On Home, Record, Form, Settings, Field result
Notice, attention
Card payments are paused
The card on file expired on , so no booking can be paid until it is replaced.
Three Saturday bookings have no caretaker
Inside a Panel.
Saturday opening
The caretaker has not confirmed
Maya Osei was asked on .
Source
@react.component
let make = () =>
<>
<KitReact.Roles.Notice
state=Attention
standing={React.string("Card payments are paused")}
sentence={<>{React.string("The card on file expired on ")}<KitReact.Roles.Time value={KitReact.Time.day(Specimen_Reader.reader, {year: 2025, month: 4, day: 30})} />{React.string(", so no booking can be paid until it is replaced.")}</>}
action={{action: Link({href: "#role-notice-attention", children: React.string("Replace the card")})}}
/>
<KitReact.Roles.Notice
state=Attention
standing={React.string("Three Saturday bookings have no caretaker")}
action={{action: SecondaryAction({children: React.string("Assign caretakers")})}}
/>
<p className="specimen-case-line">{React.string("Inside a Panel.")}</p>
<KitReact.Roles.LabelPanel props={{ariaLabel: "Saturday opening"}}
heading=[KitReact.Words.Text("Saturday opening")]
content=[Notice({
state: Attention,
standing: React.string("The caretaker has not confirmed"),
sentence: <>{React.string("Maya Osei was asked on ")}<KitReact.Roles.Time value={KitReact.Time.day(Specimen_Reader.reader, {year: 2025, month: 4, day: 14})} />{React.string(".")}</>,
action: {action: SecondaryAction({children: React.string("Ask again")})},
})]
/>
</>
Notice, settled
Card payments are running again
Bookings held while they were paused were paid on .
The last import skipped 4 rows
They had no booking date, so nothing was added for them.
Inside a Panel.
Hall calendar
Calendar sync is paused until Monday
Changes made meanwhile show once it resumes.
Source
@react.component
let make = () =>
<>
<KitReact.Roles.Notice
state=Settled({dismissProps: {}})
standing={React.string("Card payments are running again")}
sentence={<>{React.string("Bookings held while they were paused were paid on ")}<KitReact.Roles.Time value={KitReact.Time.day(Specimen_Reader.reader, {year: 2025, month: 5, day: 2})} />{React.string(".")}</>}
/>
<KitReact.Roles.Notice
state=Settled({})
standing={React.string("The last import skipped 4 rows")}
sentence={React.string("They had no booking date, so nothing was added for them.")}
action={{action: Link({href: "#role-notice-settled", children: React.string("See the skipped rows")})}}
/>
<p className="specimen-case-line">{React.string("Inside a Panel.")}</p>
<KitReact.Roles.LabelPanel props={{ariaLabel: "Hall calendar"}}
heading=[KitReact.Words.Text("Hall calendar")]
content=[Notice({
state: Settled({dismissProps: {}}),
standing: React.string("Calendar sync is paused until Monday"),
sentence: React.string("Changes made meanwhile show once it resumes."),
})]
/>
</>
Notice, inert
A Notice whose action waits.
Three Saturday bookings have no caretaker
Assign caretakers waits until the bookings have loaded.
A settled Notice whose actions wait.
The last import skipped 4 rows
They had no booking date, so nothing was added for them.
See the skipped rows waits until they have loaded.
Dismiss waits until the skipped rows have loaded.
The skipped rows are being checked.
A settled Notice whose Dismiss waits.
Calendar sync is running again
Changes made while it was paused are being added.
Dismiss waits until the calendar has synced.
Source
@react.component
let make = () =>
<>
<p className="specimen-case-line"> {React.string("A Notice whose action waits.")} </p>
<KitReact.Roles.Notice
state=Attention
standing={React.string("Three Saturday bookings have no caretaker")}
action={{action: SecondaryAction({children: React.string("Assign caretakers"), state: Inert({id: "notice-inert-assign", words: [KitReact.Words.Text("Assign caretakers waits until the bookings have loaded.")]})})}}
/>
<p className="specimen-case-line"> {React.string("A settled Notice whose actions wait.")} </p>
<KitReact.Roles.Notice
state=Settled({dismissProps: {}, dismissState: Inert({id: "notice-inert-dismiss", words: [KitReact.Words.Text("Dismiss waits until the skipped rows have loaded.")]})})
standing={React.string("The last import skipped 4 rows")}
sentence={React.string("They had no booking date, so nothing was added for them.")}
action={{action: SecondaryAction({children: React.string("See the skipped rows"), state: Inert({id: "notice-inert-rows", words: [KitReact.Words.Text("See the skipped rows waits until they have loaded.")]})}), statusLines: [{children: React.string("The skipped rows are being checked.")}]}}
/>
<p className="specimen-case-line"> {React.string("A settled Notice whose Dismiss waits.")} </p>
<KitReact.Roles.Notice
state=Settled({dismissProps: {}, dismissState: Inert({id: "notice-inert-sync-dismiss", words: [KitReact.Words.Text("Dismiss waits until the calendar has synced.")]})})
standing={React.string("Calendar sync is running again")}
sentence={React.string("Changes made while it was paused are being added.")}
/>
</>