Inert control

@react.component
let make = () => {
  <>
  <p className="specimen-case-line">{React.string("An inert action's own words, one line after its Action group.")}</p>
  <KitReact.Roles.ActionGroup
    lead=PrimaryAction({icon: KitReact.Icons.iconArrowRight, children: React.string("Save changes"), state: KitReact.ActionState.Inert({id: "save-changes", words: [KitReact.Words.Text("Complete the billing email before saving.")]})})
    secondary=[SecondaryAction({children: React.string("Save draft"), state: KitReact.ActionState.Inert({id: "save-draft", words: [KitReact.Words.Text("Wait for the current draft to load.")]})})]
  />
  <KitReact.Roles.ActionGroup
    lead=EmphasisedNextAction({children: React.string("Review invoice"), state: KitReact.ActionState.Inert({id: "review-invoice", words: [KitReact.Words.Text("Add a line item before review.")]})})
  />
  <KitReact.Roles.ActionGroup
    lead=SplitAction(KitReact.Roles.SplitAction.role({
      action: PrimaryAction,
      id: "role-inert-control-send",
      label: "More ways to send",
      variants: [
        {
          items: [
            KitReact.Menu.Item({name: "Send and mark as paid"}),
            KitReact.Menu.Item({name: "Schedule sending…"}),
          ],
        },
      ],
      state: Inert({
        id: "send-invoice",
        words: [KitReact.Words.Text("Add the customer's email before sending.")],
      }),
      children: React.string("Send invoice"),
    }))
    secondary=[SecondaryAction({children: React.string("Save as draft")})]
  />
  <p className="specimen-case-line">{React.string("Two actions inert for one reason share one line.")}</p>
  <KitReact.Roles.ActionGroup
    lead=PrimaryAction({children: React.string("Submit claim"), state: KitReact.ActionState.Inert({id: "submit-claim", words: [KitReact.Words.Text("Add a receipt for the taxi fare before submitting.")]})})
    secondary=[
      SecondaryAction({children: React.string("Duplicate claim"), state: KitReact.ActionState.Covered("receipts-uploading")}),
      SecondaryAction({children: React.string("Export as PDF"), state: KitReact.ActionState.Covered("receipts-uploading")}),
    ]
    reason={id: "receipts-uploading", words: [KitReact.Words.Text("Duplicate claim and Export as PDF wait until the receipts finish uploading.")]}
  />
  <p className="specimen-case-line">{React.string("A region's standing describes the actions it makes inert; an action outside it keeps its own words.")}</p>
  <KitReact.Roles.HeadedRegion
    heading={[KitReact.Words.Text("Hall booking")]}
    notices=[{
      state: Settled({}),
      standing: React.string("The hall calendar is syncing"),
      sentence: React.string("The date and room can't be changed while the hall calendar syncs."),
      sentenceProps: {id: "booking-syncing"},
    }]
    content={<>
      <KitReact.Roles.FactGroup>
        <KitReact.Roles.LabelledFact name={React.string("Organiser")} value={Words([KitReact.Words.Text("Aisha Khan")])} />
        <KitReact.Roles.LabelledFact name={React.string("Room")} value={Words([KitReact.Words.Text("Garden Room")])} />
      </KitReact.Roles.FactGroup>
      <KitReact.Roles.ActionGroup
        secondary=[
          SecondaryAction({children: React.string("Change date"), state: KitReact.ActionState.Covered("booking-syncing")}),
          SecondaryAction({children: React.string("Change room"), state: KitReact.ActionState.Covered("booking-syncing")}),
        ]
      />
    </>}
  />
  <KitReact.Roles.ActionGroup
    secondary=[
      SecondaryAction({children: React.string("Email the organiser")}),
      SecondaryAction({children: React.string("Download invoice"), state: KitReact.ActionState.Inert({id: "download-booking-invoice", words: [KitReact.Words.Text("The invoice is ready once the booking is paid.")]})}),
    ]
  />
  <p className="specimen-case-line">{React.string("A page's standing describes every action it makes inert, wherever it stands.")}</p>
  <KitReact.Roles.Notice
    state=Settled({})
    standing={React.string("This invoice is paid")}
    sentence={React.string("A paid invoice can't be edited, sent again or have its reminder withdrawn.")}
    sentenceProps={id: "invoice-paid"}
  />
  <KitReact.Roles.HeadedRegion
    heading={[KitReact.Words.Text("Oakmere Primary School invoice")]}
    content={<>
      <KitReact.Roles.FactGroup>
        <KitReact.Roles.LabelledFact name={React.string("Amount")} value={Words([KitReact.Words.Amount(KitReact.Amount.money(Specimen_Reader.reader, ~currency="GBP", ~amount="84.00"))])} />
      </KitReact.Roles.FactGroup>
      <KitReact.Roles.ActionGroup
        lead=PrimaryAction({children: React.string("Edit invoice"), state: KitReact.ActionState.Covered("invoice-paid")})
        secondary=[SecondaryAction({children: React.string("Send again"), state: KitReact.ActionState.Covered("invoice-paid")})]
      />
    </>}
  />
  <KitReact.Roles.Row
    subject={React.string("Payment reminder")} subjectHref={"#role-inert-control-inert"}
    facts=[{key: "sends", content: Words([KitReact.Words.Text("Sends on "), KitReact.Words.Time(KitReact.Time.day(Specimen_Reader.reader, {year: 2026, month: 5, day: 20}))]), props: {}}]
    actions=[KitReact.Roles.Row.SecondaryAction({children: React.string("Withdraw"), state: KitReact.ActionState.Covered("invoice-paid")})]
  />
  </>
}