kit

Fact group

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 Shell, Home, List, Record, Form, Stepped flow, Settings, Reports, Issued document

Fact group

A long date and time and a date range stay within four facts.

Starts
Dates
People
24
Standing
Draft

A lone fact stands in its group.

Amount due
£240.00

Amount and Stamp values pair at Phone; a value wider than its half takes its own line.

Standing
Awaiting the hirer’s countersignature
Deposit held
£50.00
Amount due
£240.00

A choice keeps Form groups before its action.

Deposit, part kept

What happens to the deposit?
25
Two chairs were damaged.

A choice has no Form group before its action.

Deposit, released

What happens to the deposit?

Source
@react.component
let make = () => {
  let choice = (~name, ~value, ~label, ~checked): KitReact.Roles.SelectionControl.Group.choice<KitReact.Roles.SelectionControl.Group.kind> =>
    {label: React.string(label), kind: KitReact.Roles.SelectionControl.Group.Radio, checked, printedValue: [KitReact.Words.Text(checked ? "Chosen" : "Not chosen")], props: {}, controlProps: {name, value}, outputProps: {}, reasonProps: {}}
  let deposit = [
    choice(~name="fact-group-deposit", ~value="release", ~label="Release it in full", ~checked=false),
    choice(~name="fact-group-deposit", ~value="part", ~label="Keep part of it", ~checked=true),
    choice(~name="fact-group-deposit", ~value="keep", ~label="Keep all of it", ~checked=false),
  ]
  let released = [
    choice(~name="fact-group-released", ~value="release", ~label="Release it in full", ~checked=true),
    choice(~name="fact-group-released", ~value="part", ~label="Keep part of it", ~checked=false),
    choice(~name="fact-group-released", ~value="keep", ~label="Keep all of it", ~checked=false),
  ]
  <>
    <p className="specimen-case-line">{React.string("A long date and time and a date range stay within four facts.")}</p>
    <KitReact.Roles.FactGroup>
      <KitReact.Roles.LabelledFact name={React.string("Starts")} value={Words([KitReact.Words.Time(KitReact.Time.moment(Specimen_Reader.reader, Date.fromString("2026-09-28T00:35:00Z")))])} />
      <KitReact.Roles.LabelledFact name={React.string("Dates")} value={Words([KitReact.Words.Time(KitReact.Time.dayRange(Specimen_Reader.reader, ~first={year: 2026, month: 9, day: 28}, ~last={year: 2027, month: 10, day: 28}))])} />
      <KitReact.Roles.LabelledFact name={React.string("People")} value={Words([KitReact.Words.Amount(KitReact.Amount.count(Specimen_Reader.reader, 24))])} />
      <KitReact.Roles.LabelledFact name={React.string("Standing")} value={Stamp(Neutral, [KitReact.Words.Text("Draft")])} />
    </KitReact.Roles.FactGroup>
    <p className="specimen-case-line">{React.string("A lone fact stands in its group.")}</p>
    <KitReact.Roles.FactGroup>
      <KitReact.Roles.LabelledFact name={React.string("Amount due")} value={Words([KitReact.Words.Amount(KitReact.Amount.money(Specimen_Reader.reader, ~amount="240.00", ~currency="GBP"))])} />
    </KitReact.Roles.FactGroup>
    <p className="specimen-case-line">{React.string("Amount and Stamp values pair at Phone; a value wider than its half takes its own line.")}</p>
    <KitReact.Roles.FactGroup>
      <KitReact.Roles.LabelledFact name={React.string("Standing")} value={Stamp(Attention, [KitReact.Words.Text("Awaiting the hirer’s countersignature")])} />
      <KitReact.Roles.LabelledFact name={React.string("Deposit held")} value={Words([KitReact.Words.Amount(KitReact.Amount.money(Specimen_Reader.reader, ~amount="50.00", ~currency="GBP"))])} />
      <KitReact.Roles.LabelledFact name={React.string("Amount due")} value={Words([KitReact.Words.Amount(KitReact.Amount.money(Specimen_Reader.reader, ~amount="240.00", ~currency="GBP"))])} />
    </KitReact.Roles.FactGroup>
    <p className="specimen-case-line">{React.string("A choice keeps Form groups before its action.")}</p>
    <KitReact.Roles.LabelPanel element=Form props={{ariaLabel: "Deposit, part kept"}}
      heading=[Text("Deposit, part kept")]
      content=[
        SelectionControlGroup({
          id: "fact-group-deposit",
          choices: deposit,
          legend: React.string("What happens to the deposit?"),
        }),
        FormGroup({id: "fact-group-kept-amount-form-group", kind: Text(Narrow), label: React.string("Amount kept"), labelProps: {htmlFor: "fact-group-kept-amount"}, controlProps: {id: "fact-group-kept-amount", name: "kept-amount", inputMode: "decimal"}, controlValue: "25", printedValue: React.string("25")}),
        FormGroup({id: "fact-group-kept-reason-form-group", kind: Textarea, label: React.string("Reason"), labelProps: {htmlFor: "fact-group-kept-reason"}, controlProps: {id: "fact-group-kept-reason", name: "reason"}, controlValue: "Two chairs were damaged.", printedValue: React.string("Two chairs were damaged.")}),
      ]
      actions={{lead: PrimaryAction({children: React.string("Settle the deposit"), props: {type_: "submit"}})}}
    />
    <p className="specimen-case-line">{React.string("A choice has no Form group before its action.")}</p>
    <KitReact.Roles.LabelPanel element=Form props={{ariaLabel: "Deposit, released"}}
      heading=[Text("Deposit, released")]
      content=[
        SelectionControlGroup({
          id: "fact-group-released",
          choices: released,
          legend: React.string("What happens to the deposit?"),
        }),
      ]
      actions={{lead: PrimaryAction({children: React.string("Settle the deposit"), props: {type_: "submit"}})}}
    />
  </>
}