Label panel

@react.component
let make = () =>
  <>
    <KitReact.Roles.LabelPanel props={{ariaLabel: "Amount due"}}
      heading=[Text("Amount due")]
      content=[Amount({value: KitReact.Amount.money(Specimen_Reader.reader, ~amount="240.00", ~currency="GBP")})]
    />
    <p className="specimen-case-line">{React.string("One Secondary action follows the words.")}</p>
    <KitReact.Roles.LabelPanel props={{ariaLabel: "Changed elsewhere"}}
      heading=[Text("Changed elsewhere")]
      content=[Notice({
        state: Attention,
        standing: React.string("Someone else changed this invoice while it was open"),
        action: {action: SecondaryAction({children: React.string("Reload the invoice")})},
      })]
    />
    <p className="specimen-case-line">{React.string("Each action is a form of its own.")}</p>
    <KitReact.Roles.LabelPanel props={{ariaLabel: "Plan"}}
      heading=[Text("Plan")]
      content=[]
      actions={{
        secondary: [
          Form({props: {action: "?plan=change", method: "get"}, action: SecondaryAction({children: React.string("Change the plan"), props: {type_: "submit"}})}),
          Form({props: {action: "?plan=end", method: "get"}, action: SecondaryAction({children: React.string("End the plan"), props: {type_: "submit"}})}),
        ],
      }}
    />
    <p className="specimen-case-line">{React.string("Form groups stand before the Primary action.")}</p>
    <KitReact.Roles.LabelPanel props={{ariaLabelledby: "react-label-panel-caretaker"}}
      heading=[Text("Caretaker for Saturday")]
      headingProps={{id: "react-label-panel-caretaker"}}
      content=[
        FormGroup({id: "react-label-panel-caretaker-name-form-group", kind: Text(Medium),
          label: React.string("Who opens the hall"),
          controlProps: {id: "react-label-panel-caretaker-name", name: "caretaker"}, controlValue: "Maya Osei", printedValue: React.string("Maya Osei"),
        }),
        FormGroup({id: "react-label-panel-caretaker-arrives", printedValue: <time dateTime="08:30"> {React.string("08:30")} </time>, label: React.string("Arriving"), kind: KitReact.Roles.TimeField.control({name: "arrives", reader: Specimen_Reader.reader, value: Clock(KitReact.Time.clock(Specimen_Reader.reader, {hour: 8, minute: 30})), onCommit: _ => ()})}),
      ]
      actions={{lead: PrimaryAction({children: React.string("Save the caretaker")})}}
    />
    <p className="specimen-case-line">{React.string("One group of actions, stacking at Phone.")}</p>
    <KitReact.Roles.LabelPanel
      props={KitReact.Print.omission(
        ~text="Room upkeep is not included in this printout.",
        ~props={ariaLabel: "Room upkeep"},
      )}
      heading=[Text("Room upkeep")]
      content=[]
      actions={{
        secondary: [
          SecondaryAction({children: React.string("Block out a room")}),
          SecondaryAction({children: React.string("Note a fault")}),
          SecondaryAction({children: React.string("Book a repair visit")}),
          SecondaryAction({children: React.string("Send reminders")}),
        ],
      }}
    />
  </>

@react.component
let make = () =>
  <>
    <p className="specimen-case-line">{React.string("A form reopened holding the entry kept on this device.")}</p>
    <KitReact.Roles.LabelPanel element=Form props={{id: "react-label-panel-unsaved-room-form", ariaLabelledby: "react-label-panel-unsaved-room"}}
      heading=[Text("Add a room")]
      headingProps={{id: "react-label-panel-unsaved-room"}}
      keep={{key: "aisha-khan/hall/rooms/new-room", version: "3"}}
      unsaved=[KitReact.Words.Text("Not saved")]
      content=[
        FormGroup({id: "react-label-panel-unsaved-room-name-form-group", kind: Text(Medium),
          label: React.string("Room name"),
          controlProps: {id: "react-label-panel-unsaved-room-name", name: "room-name"}, controlValue: "Garden Room", printedValue: React.string("Garden Room"),
        }),
      ]
      actions={{lead: PrimaryAction({children: React.string("Add the room"), props: {type_: "submit"}})}}
    />
  </>