Icon action

let row = (~subject) =>
  <KitReact.Roles.Row subject={React.string(subject)} subjectHref={"#role-icon-action"}
    facts=[{key: "day", content: Words([KitReact.Words.Text(subject == "Oakmere WI" ? "Tuesday · Main Hall" : "Thursday · Garden Room")]), props: {}}]
    actions=[
      KitReact.Roles.Row.IconAction({icon: KitReact.Icons.iconPencilSimple, label: `Edit ${subject}`}),
      KitReact.Roles.Row.IconAction({icon: KitReact.Icons.iconDotsThree, label: `More actions for ${subject}`}),
    ]
  />

@react.component
let make = () => {
  <>
    <KitReact.Roles.IconAction icon=KitReact.Icons.iconDotsThree label="More actions" />
    <KitReact.Roles.IconAction icon=KitReact.Icons.iconCopy label="Copy the invoice link" />
    <KitReact.Roles.IconAction href="#role-icon-action" icon=KitReact.Icons.iconPencilSimple label="Edit the booking" />
    <p className="specimen-case-line">{React.string("Icon actions in a Row's actions, named with the row's subject.")}</p>
    {row(~subject="Oakmere WI")}
    {row(~subject="Oakmere Primary School")}
    <p className="specimen-case-line">{React.string("An Icon action in an Action group beside a Secondary action.")}</p>
    <KitReact.Roles.ActionGroup
      lead=PrimaryAction({children: React.string("Send invoice")})
      secondary=[SecondaryAction({children: React.string("Save as draft")}), IconAction({icon: KitReact.Icons.iconCopy, label: "Copy the invoice link"})]
      return={<KitReact.Roles.WayBack href="#role-icon-action">{React.string("Return to invoices")}</KitReact.Roles.WayBack>}
    />
  </>
}