kit

Headed region

Built revision v17.10.0

React
Topics

Human support

Bring a missing role, layout, or state, or a rendering against the standard, to the session working on kit. Name the package and the entry.

On Home, Record, Form, Stepped flow, Settings, Find, Help, Issued document, Showcase

Headed region

Contact
Aisha Khan
Email
aisha@oakmereprimary.org

Custom fields

Year group
Year 4
Insurance reference
OPS-2291

Access

Key holder
The caretaker
Side gate
Open from

Out of hours

Key safe
Beside the side gate
Who to call
Tom Reid, 01632 960 148

A lone Fact group needs no Headed region.

Contact
Tom Reid
Email
tom@oakmerechoir.org

A Headed region inside a Row, before its expansion.

Oakmere WIAwaiting payment

Main Hall hire · £84.00

Payment plan

First payment
£42.00
Balance
£42.00
Payment history
Paid on
£42.00
Paid on
£42.00

A nested Headed region with nothing in it.

Access

Key holder
The caretaker

Out of hours

A nested Headed region holding a note as it was written.

Access

Key holder
The caretaker

Arrival notes

Before you arrive

Ask @Aisha Khan to confirm the address for B-1042 Garden room before .
Read the hire terms first, then use 4721 at the gate.

  • Bring your own chairs.

  • Leave the hall by ten.

  1. Ring the bell by the side gate.

  2. Wait for the caretaker.

  • Done

    Deposit paid

  • Not done

    Key returned

The side door sticks in the cold.

Gate: 4721
Alarm: 0990

Floor plan: garden-room-plan.pdf

A Headed region whose content is a note as it was written.

Arrival notes

Ring the bell by the side gate.
If nobody answers, the key is in the safe beside it.

Please stack the chairs along the back wall and switch off the heating in the Main Hall before you leave.

A nested heading names its week in dates.

Main Hall

Key holder
The caretaker

Bookings for

Choir rehearsal
Monday and Thursday evenings
Toddler group
Wednesday morning

A Headed region with a Notice at its head.

Insurance

Public liability cover has lapsed

No booking can be confirmed until a new certificate is on file.

Insurer
Oakmere Mutual
Policy
PL-40218
Source
let note: KitReact.AuthoredText.shown = {
  value: [
    Heading([Text("Before you arrive", [])]),
    Paragraph([
      Text("Ask ", []),
      Mention({kind: Person, id: "aisha-khan", label: "Aisha Khan"}),
      Text(" to confirm ", []),
      Text("the address", [Bold]),
      Text(" for ", []),
      Mention({kind: Subject, id: "b-1042", label: "B-1042 Garden room"}),
      Text(" before ", []),
      Date({year: 2025, month: 3, day: 14}),
      Text(".", []),
      HardBreak,
      Text("Read the ", []),
      Text("hire terms", [Link("https://example.com/hire-terms")]),
      Text(" first, ", []),
      Text("then", [Italic]),
      Text(" use ", []),
      Text("4721", [Code]),
      Text(" at the gate.", []),
    ]),
    BulletList([[[Text("Bring your own chairs.", [])]], [[Text("Leave the hall by ten.", [])]]]),
    OrderedList([[[Text("Ring the bell by the side gate.", [])]], [[Text("Wait for the caretaker.", [])]]]),
    TaskList([{checked: true, content: [[Text("Deposit paid", [])]]}, {checked: false, content: [[Text("Key returned", [])]]}]),
    Blockquote([[Text("The side door sticks in the cold.", [])]]),
    CodeBlock("Gate: 4721\nAlarm: 0990"),
    Paragraph([Text("Floor plan: ", []), File({id: "floor-plan", name: "garden-room-plan.pdf"})]),
  ],
  reader: Specimen_Reader.reader,
  mentionLink: (kind, _) =>
    switch kind {
    | Person => Some("#role-headed-region")
    | Subject => None
    },
  fileLink: _ => Some("#role-headed-region"),
}

@react.component
let make = () =>
  <>
    <KitReact.Roles.FactGroup>
      <KitReact.Roles.LabelledFact name={React.string("Contact")} value={Words([KitReact.Words.Text("Aisha Khan")])} />
      <KitReact.Roles.LabelledFact name={React.string("Email")} value={Words([KitReact.Words.Email("aisha@oakmereprimary.org")])} />
    </KitReact.Roles.FactGroup>
    <KitReact.Roles.HeadedRegion
      heading={[KitReact.Words.Text("Custom fields")]}
      content={<KitReact.Roles.FactGroup>
        <KitReact.Roles.LabelledFact name={React.string("Year group")} value={Words([KitReact.Words.Text("Year 4")])} />
        <KitReact.Roles.LabelledFact name={React.string("Insurance reference")} value={Words([KitReact.Words.Text("OPS-2291")])} />
      </KitReact.Roles.FactGroup>}
    />
    <KitReact.Roles.HeadedRegion
      heading={[KitReact.Words.Text("Access")]}
      content={<KitReact.Roles.FactGroup>
        <KitReact.Roles.LabelledFact name={React.string("Key holder")} value={Words([KitReact.Words.Text("The caretaker")])} />
        <KitReact.Roles.LabelledFact name={React.string("Side gate")} value={Content(<>{React.string("Open from ")}<time dateTime="17:30">{React.string("half past five")}</time></>)} />
      </KitReact.Roles.FactGroup>}
      region={{
        heading: [KitReact.Words.Text("Out of hours")],
        content: <KitReact.Roles.FactGroup>
          <KitReact.Roles.LabelledFact name={React.string("Key safe")} value={Words([KitReact.Words.Text("Beside the side gate")])} />
          <KitReact.Roles.LabelledFact name={React.string("Who to call")} value={Words([KitReact.Words.Text("Tom Reid, 01632 960 148")])} />
        </KitReact.Roles.FactGroup>,
      }}
    />
    <p className="specimen-case-line">{React.string("A lone Fact group needs no Headed region.")}</p>
    <KitReact.Roles.FactGroup>
      <KitReact.Roles.LabelledFact name={React.string("Contact")} value={Words([KitReact.Words.Text("Tom Reid")])} />
      <KitReact.Roles.LabelledFact name={React.string("Email")} value={Words([KitReact.Words.Email("tom@oakmerechoir.org")])} />
    </KitReact.Roles.FactGroup>
    <p className="specimen-case-line">{React.string("A Headed region inside a Row, before its expansion.")}</p>
    <KitReact.Roles.Row
      subject={React.string("Oakmere WI")}
      subjectHref={"../role-row/#role-row"}
      stamp={<KitReact.Roles.Stamp state=KitReact.Roles.Stamp.Neutral> {React.string("Awaiting payment")} </KitReact.Roles.Stamp>}
      facts=[{key: "hire", content: Words([KitReact.Words.Text("Main Hall hire · "), KitReact.Words.Amount(KitReact.Amount.money(Specimen_Reader.reader, ~currency="GBP", ~amount="84.00"))]), props: {}}]
      headedRegion=[{
        heading: [KitReact.Words.Text("Payment plan")],
        content: FactGroup({children: <>
          <KitReact.Roles.LabelledFact name={React.string("First payment")} value={Words([KitReact.Words.Amount(KitReact.Amount.money(Specimen_Reader.reader, ~amount="42.00", ~currency="GBP"))])} />
          <KitReact.Roles.LabelledFact name={React.string("Balance")} value={Words([KitReact.Words.Amount(KitReact.Amount.money(Specimen_Reader.reader, ~amount="42.00", ~currency="GBP"))])} />
        </>}),
      }]
      expansion={{
        summary: React.string("Payment history"),
        content: FactGroup({children: <>
          <KitReact.Roles.LabelledFact name={<>{React.string("Paid on ")}<KitReact.Roles.Time value={KitReact.Time.day(Specimen_Reader.reader, {year: 2025, month: 2, day: 3})} /></>} value={Words([KitReact.Words.Amount(KitReact.Amount.money(Specimen_Reader.reader, ~amount="42.00", ~currency="GBP"))])} />
          <KitReact.Roles.LabelledFact name={<>{React.string("Paid on ")}<KitReact.Roles.Time value={KitReact.Time.day(Specimen_Reader.reader, {year: 2025, month: 2, day: 10})} /></>} value={Words([KitReact.Words.Amount(KitReact.Amount.money(Specimen_Reader.reader, ~amount="42.00", ~currency="GBP"))])} />
        </>}),
        expanded: false,
      }}
    />
    <p className="specimen-case-line">{React.string("A nested Headed region with nothing in it.")}</p>
    <KitReact.Roles.HeadedRegion
      props={{id: "role-headed-region-empty-region"}}
      heading={[KitReact.Words.Text("Access")]}
      content={<KitReact.Roles.FactGroup>
        <KitReact.Roles.LabelledFact name={React.string("Key holder")} value={Words([KitReact.Words.Text("The caretaker")])} />
      </KitReact.Roles.FactGroup>}
      region={{heading: [KitReact.Words.Text("Out of hours")], content: <></>}}
    />
    <p className="specimen-case-line">{React.string("A nested Headed region holding a note as it was written.")}</p>
    <KitReact.Roles.HeadedRegion
      heading={[KitReact.Words.Text("Access")]}
      content={<KitReact.Roles.FactGroup>
        <KitReact.Roles.LabelledFact name={React.string("Key holder")} value={Words([KitReact.Words.Text("The caretaker")])} />
      </KitReact.Roles.FactGroup>}
      region={{
        heading: [KitReact.Words.Text("Arrival notes")],
        authoredText: note,
      }}
    />
    <p className="specimen-case-line">{React.string("A Headed region whose content is a note as it was written.")}</p>
    <KitReact.Roles.HeadedRegion
      heading={[KitReact.Words.Text("Arrival notes")]}
      authoredText={{
        value: [
          Paragraph([Text("Ring the bell by the side gate.", []), HardBreak, Text("If nobody answers, the key is in the safe beside it.", [])]),
          Paragraph([]),
          Paragraph([Text("Please stack the chairs along the back wall and switch off the heating in the Main Hall before you leave.", [])]),
        ],
        reader: Specimen_Reader.reader,
        mentionLink: (_, _) => None,
        fileLink: _ => None,
      }}
    />
    <p className="specimen-case-line">{React.string("A nested heading names its week in dates.")}</p>
    <KitReact.Roles.HeadedRegion
      heading={[KitReact.Words.Text("Main Hall")]}
      content={<KitReact.Roles.FactGroup>
        <KitReact.Roles.LabelledFact name={React.string("Key holder")} value={Words([KitReact.Words.Text("The caretaker")])} />
      </KitReact.Roles.FactGroup>}
      region={{
        heading: [
          KitReact.Words.Text("Bookings for "),
          KitReact.Words.Time(KitReact.Time.dayRange(Specimen_Reader.reader, ~first={year: 2025, month: 4, day: 14}, ~last={year: 2025, month: 4, day: 20})),
        ],
        content: <KitReact.Roles.FactGroup>
          <KitReact.Roles.LabelledFact name={React.string("Choir rehearsal")} value={Words([KitReact.Words.Text("Monday and Thursday evenings")])} />
          <KitReact.Roles.LabelledFact name={React.string("Toddler group")} value={Words([KitReact.Words.Text("Wednesday morning")])} />
        </KitReact.Roles.FactGroup>,
      }}
    />
    <p className="specimen-case-line">{React.string("A Headed region with a Notice at its head.")}</p>
    <KitReact.Roles.HeadedRegion
      heading={[KitReact.Words.Text("Insurance")]}
      notices=[{
        state: Attention,
        standing: React.string("Public liability cover has lapsed"),
        sentence: React.string("No booking can be confirmed until a new certificate is on file."),
        action: {action: Link({href: "#role-headed-region", children: React.string("Add a certificate")})},
      }]
      content={<KitReact.Roles.FactGroup>
        <KitReact.Roles.LabelledFact name={React.string("Insurer")} value={Words([KitReact.Words.Text("Oakmere Mutual")])} />
        <KitReact.Roles.LabelledFact name={React.string("Policy")} value={Words([KitReact.Words.Text("PL-40218")])} />
      </KitReact.Roles.FactGroup>}
    />
  </>

Headed region, inert

A region whose actions wait.

Invitations waiting for an answer

None right now. An invitation stands here until it is accepted.

Inviting waits until the people who can sign in have loaded.

Choose who can sign in before sharing a sign-up link.

Copying invitations waits until they have loaded.

A region inside another, its actions waiting.

Access

The caretaker can sign in.

Invitations waiting for an answer

None right now. An invitation stands here until it is accepted.

Inviting waits until the people who can sign in have loaded.

Choose who can sign in before sharing a sign-up link.

Copying invitations waits until they have loaded.

Source
let empty = prefix => KitReact.WorkState.Empty({
  words: [KitReact.Words.Text("None right now. An invitation stands here until it is accepted.")],
  actions: [
    {children: React.string("Invite someone"), state: KitReact.ActionState.Inert({id: prefix ++ "-invite", words: [KitReact.Words.Text("Inviting waits until the people who can sign in have loaded.")]})},
    {children: React.string("Share a sign-up link"), state: KitReact.ActionState.Inert({id: prefix ++ "-share", words: [KitReact.Words.Text("Choose who can sign in before sharing a sign-up link.")]})},
  ],
  more: KitReact.Roles.ActionMenu.role({
    id: prefix ++ "-more",
    label: "More invitation actions",
    state: Inert({id: prefix ++ "-more-trigger", words: [KitReact.Words.Text("Copying invitations waits until they have loaded.")]}),
    groups: [{items: [KitReact.Menu.Item({name: "Copy invitations"}), KitReact.Menu.Item({name: "Download invitations"})]}],
  }),
})

@react.component
let make = () =>
  <>
    <p className="specimen-case-line"> {React.string("A region whose actions wait.")} </p>
    <KitReact.Roles.HeadedRegion
      heading=[KitReact.Words.Text("Invitations waiting for an answer")]
      content={React.null}
      state={empty("headed-inert")}
    />
    <p className="specimen-case-line"> {React.string("A region inside another, its actions waiting.")} </p>
    <KitReact.Roles.HeadedRegion
      heading=[KitReact.Words.Text("Access")]
      content={<p> {React.string("The caretaker can sign in.")} </p>}
      region={{heading: [KitReact.Words.Text("Invitations waiting for an answer")], content: React.null, state: empty("headed-nested-inert")}}
    />
  </>