Dialog, open
A form that arrives after the task opens.
Edit a name while it loads
A name that is ready to save with nothing to wait for.
Save a name that is already loaded
Decisions opened from their page.
Cancel bookings
Committee bookings
Cancel booking
Committee booking
Close the hall
|
Skip to content
Hallkeeper Hall closures
|
Show the open attribute alone
Committee booking
A Dialog over the page's own work, its lead a Primary action.
Send the invoice
A task that sends an email, its preview after the form.
Invite a volunteer
A refund and what it returns, before its amount and reason.
Refund the deposit
A task that publishes a page, its preview before the actions.
Publish the autumn programme
A creation in steps, at its first step and at its last.
New event
New event at its last step
A task with the subject it acts on, its consequence holding each amount it changes.
Split the charge
The same task while its form loads, the subject standing.
Split the charge while it loads
A decision whose consequence holds each amount it changes.
Cancel the charge
A task whose agreement is signed with the actor’s full name.
Save a card to charge later
A step whose Number fields answer one question, with the set's help.
How many of each size
The same step with the set's error, its help kept.
How many of each size with an error
Source
<p class="specimen-case-line">A form that arrives after the task opens.</p>
<details open>
<summary>Edit a name while it loads</summary>
<Kit.Phoenix.Roles.SecondaryAction.secondary_action id="dialog-loading-opener">Edit name</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
<Kit.Phoenix.Roles.Dialog.dialog open id="dialog-loading" return_focus="dialog-loading-opener" aria-labelledby="dialog-loading-title">
<:heading rest={%{id: "dialog-loading-title"}}>Edit name</:heading>
<:form_groups loading={Kit.Phoenix.Loading.sentence("The name had not loaded.")}>
<form id="dialog-loading-form">
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} id="dialog-loading-name-form-group" control_rest={%{id: "dialog-loading-name", name: "name", type: "text"}}>
<:label rest={%{for: "dialog-loading-name"}}>Name</:label>
<:printed_value>No name given</:printed_value>
</Kit.Phoenix.Roles.FormGroup.form_group>
</form>
</:form_groups>
<:primary_action state={Kit.Phoenix.ActionState.inert("dialog-loading-save", [Kit.Phoenix.Words.text("Save waits until the name has loaded.")])} rest={%{type: "submit", form: "dialog-loading-form"}}>Save name</:primary_action>
<:secondary_action>Cancel</:secondary_action>
</Kit.Phoenix.Roles.Dialog.dialog>
</details>
<p class="specimen-case-line">A name that is ready to save with nothing to wait for.</p>
<details>
<summary>Save a name that is already loaded</summary>
<Kit.Phoenix.Roles.SecondaryAction.secondary_action id="dialog-loading-without-control-opener">Save name</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
<Kit.Phoenix.Roles.Dialog.dialog open id="dialog-loading-without-control" return_focus="dialog-loading-without-control-opener" aria-labelledby="dialog-loading-without-control-title">
<:heading rest={%{id: "dialog-loading-without-control-title"}}>Save name</:heading>
<:form_groups loading={Kit.Phoenix.Loading.sentence("The name had not loaded.")}>
<form id="dialog-loading-without-control-form">
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} id="dialog-loading-without-control-name-form-group" control_value="Garden Room" control_rest={%{id: "dialog-loading-without-control-name", name: "name", type: "text", disabled: true}}>
<:label rest={%{for: "dialog-loading-without-control-name"}}>Name</:label>
<:printed_value>Garden Room</:printed_value>
</Kit.Phoenix.Roles.FormGroup.form_group>
</form>
</:form_groups>
<:primary_action state={Kit.Phoenix.ActionState.inert("dialog-loading-without-control-save", [Kit.Phoenix.Words.text("Save waits until the name has loaded.")])} rest={%{type: "submit", form: "dialog-loading-without-control-form"}}>Save name</:primary_action>
<:secondary_action>Cancel</:secondary_action>
</Kit.Phoenix.Roles.Dialog.dialog>
</details>
<p class="specimen-case-line">Decisions opened from their page.</p>
<details>
<summary>Cancel bookings</summary>
<Kit.Phoenix.Layouts.Record.record subject_state={Kit.Phoenix.State.none()} density="desk">
<:facts_related_records rest={%{"aria-labelledby": "dialog-bookings-title"}} heading="Committee bookings" heading_rest={%{id: "dialog-bookings-title"}}>
</:facts_related_records>
<:decision_compact_work>
<Kit.Phoenix.Roles.ActionGroup.action_group><:secondary><Kit.Phoenix.Roles.SecondaryAction.secondary_action id="dialog-bookings-opener">Cancel bookings</Kit.Phoenix.Roles.SecondaryAction.secondary_action></:secondary></Kit.Phoenix.Roles.ActionGroup.action_group>
</:decision_compact_work>
</Kit.Phoenix.Layouts.Record.record>
<Kit.Phoenix.Roles.Dialog.dialog open id="dialog-bookings-task" return_focus="dialog-bookings-opener" aria-labelledby="dialog-bookings-task-title">
<:heading rest={%{id: "dialog-bookings-task-title"}}>Cancel bookings</:heading>
<:form_groups>
<form id="dialog-bookings-form">
<Kit.Phoenix.Roles.SelectionControl.group id="dialog-bookings-rooms">
<:legend>Bookings</:legend>
<:choice kind={:checkbox} control_rest={%{name: "rooms", value: "main-hall"}} printed_value="Not ticked">Main Hall</:choice>
<:choice kind={:checkbox} control_rest={%{name: "rooms", value: "garden-room"}} printed_value="Not ticked">Garden Room</:choice>
<:choice kind={:checkbox} control_rest={%{name: "rooms", value: "kitchen"}} printed_value="Not ticked">Kitchen</:choice>
</Kit.Phoenix.Roles.SelectionControl.group>
</form>
</:form_groups>
<:primary_action state={Kit.Phoenix.ActionState.inert("dialog-bookings-cancel", [Kit.Phoenix.Words.text("No booking is ticked. Tick the bookings to cancel, or keep them and close.")])} rest={%{type: "submit", form: "dialog-bookings-form"}}>Cancel bookings</:primary_action>
<:secondary_action>Keep them</:secondary_action>
</Kit.Phoenix.Roles.Dialog.dialog>
</details>
<details>
<summary>Cancel booking</summary>
<Kit.Phoenix.Layouts.Record.record subject_state={Kit.Phoenix.State.none()} density="desk">
<:facts_related_records rest={%{"aria-labelledby": "dialog-record-title"}} heading="Committee booking" heading_rest={%{id: "dialog-record-title"}}>
</:facts_related_records>
<:decision_compact_work>
<Kit.Phoenix.Roles.ActionGroup.action_group><:secondary><Kit.Phoenix.Roles.SecondaryAction.secondary_action id="dialog-record-opener">Cancel booking</Kit.Phoenix.Roles.SecondaryAction.secondary_action></:secondary></Kit.Phoenix.Roles.ActionGroup.action_group>
</:decision_compact_work>
</Kit.Phoenix.Layouts.Record.record>
<Kit.Phoenix.Roles.Dialog.dialog open id="dialog-record-task" return_focus="dialog-record-opener" aria-labelledby="dialog-record-task-title">
<:heading rest={%{id: "dialog-record-task-title"}}>Cancel booking</:heading>
<:form_groups>
<form id="dialog-record-form">
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} id="dialog-record-reason-form-group" control_rest={%{id: "dialog-record-reason", name: "reason", type: "text"}}><:printed_value>No reason given</:printed_value>
<:label rest={%{for: "dialog-record-reason"}}>Reason</:label>
</Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group id="dialog-record-told-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.email()} control_value="office@oakmereprimary.org" control_rest={%{id: "dialog-record-told", name: "told"}}><:printed_value>office@oakmereprimary.org</:printed_value>
<:label rest={%{for: "dialog-record-told"}}>Who to tell</:label>
</Kit.Phoenix.Roles.FormGroup.form_group>
</form>
</:form_groups>
<:primary_action rest={%{type: "submit", form: "dialog-record-form"}}>Cancel booking</:primary_action>
<:secondary_action>Keep booking</:secondary_action>
<:status_lines><Kit.Phoenix.Roles.StatusLine.status_line>Cancelling tells office@oakmereprimary.org and frees Main Hall.</Kit.Phoenix.Roles.StatusLine.status_line></:status_lines>
</Kit.Phoenix.Roles.Dialog.dialog>
</details>
<details>
<summary>Close the hall</summary>
<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="Hallkeeper" navigation_label="Application" navigation="none" density="desk">
<:subject>Hall closures</:subject>
<:actions><Kit.Phoenix.Roles.SecondaryAction.secondary_action id="dialog-shell-opener">Close the hall</Kit.Phoenix.Roles.SecondaryAction.secondary_action></:actions>
<:body>
<Kit.Phoenix.Layouts.List.list subject_state={Kit.Phoenix.State.none()}>
<:rows rest={%{"aria-label": "Hall closures"}}>
<Kit.Phoenix.Table.comparison_table>
<:caption>Hall closures</:caption>
<:subject_heading label="Closure" />
<:column_headings label="Rooms">Rooms</:column_headings>
<:row facts={[%Kit.Phoenix.Table.ComparisonCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Main hall")])}]}>
<Kit.Phoenix.Roles.Row.row>
<:subject href="../../../record/">Floor resealing</:subject>
</Kit.Phoenix.Roles.Row.row>
</:row>
<:row facts={[%Kit.Phoenix.Table.ComparisonCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Whole hall")])}]}>
<Kit.Phoenix.Roles.Row.row>
<:subject href="../../../record/">Boiler service</:subject>
</Kit.Phoenix.Roles.Row.row>
</:row>
<:row facts={[%Kit.Phoenix.Table.ComparisonCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Main hall and kitchen")])}]}>
<Kit.Phoenix.Roles.Row.row>
<:subject href="../../../record/">Polling day</:subject>
</Kit.Phoenix.Roles.Row.row>
</:row>
</Kit.Phoenix.Table.comparison_table>
</:rows>
</Kit.Phoenix.Layouts.List.list>
<Kit.Phoenix.Roles.Dialog.dialog open id="dialog-shell-task" return_focus="dialog-shell-opener" aria-labelledby="dialog-shell-task-title">
<:heading rest={%{id: "dialog-shell-task-title"}}>Close the hall</:heading>
<:form_groups>
<form id="dialog-shell-form">
<Kit.Phoenix.Roles.FormGroup.form_group id="dialog-shell-day">
<:label>Day</:label>
<:control :let={binding}>
<Kit.Phoenix.Roles.DateField.date_field binding={binding} reader={reader()} name="day" today={Kit.Phoenix.Time.day(reader(), ~D[2025-04-09])} direction={:either} />
</:control>
<:printed_value>No day chosen</:printed_value>
</Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} id="dialog-shell-reason-form-group" control_rest={%{id: "dialog-shell-reason", name: "reason", type: "text"}}><:printed_value>No reason given</:printed_value>
<:label rest={%{for: "dialog-shell-reason"}}>Reason</:label>
</Kit.Phoenix.Roles.FormGroup.form_group>
</form>
</:form_groups>
<:primary_action rest={%{type: "submit", form: "dialog-shell-form"}}>Close the hall</:primary_action>
<:secondary_action>Keep it open</:secondary_action>
</Kit.Phoenix.Roles.Dialog.dialog>
</:body>
</Kit.Phoenix.Layouts.Shell.shell>
</details>
<details>
<summary>Show the open attribute alone</summary>
<Kit.Phoenix.Layouts.Record.record subject_state={Kit.Phoenix.State.none()} density="desk">
<:facts_related_records rest={%{"aria-labelledby": "dialog-native-title"}} heading="Committee booking" heading_rest={%{id: "dialog-native-title"}}>
</:facts_related_records>
</Kit.Phoenix.Layouts.Record.record>
<Kit.Phoenix.Roles.Dialog.dialog {%{"open" => true}} id="dialog-native-task" aria-labelledby="dialog-native-task-title">
<:heading rest={%{id: "dialog-native-task-title"}}>Cancel booking</:heading>
<:form_groups>
<form id="dialog-native-form">
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} id="dialog-native-reason-form-group" control_rest={%{id: "dialog-native-reason", name: "reason", type: "text"}}><:printed_value>No reason given</:printed_value>
<:label rest={%{for: "dialog-native-reason"}}>Reason</:label>
</Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group id="dialog-native-told-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.email()} control_value="office@oakmereprimary.org" control_rest={%{id: "dialog-native-told", name: "told"}}><:printed_value>office@oakmereprimary.org</:printed_value>
<:label rest={%{for: "dialog-native-told"}}>Who to tell</:label>
</Kit.Phoenix.Roles.FormGroup.form_group>
</form>
</:form_groups>
<:primary_action rest={%{type: "submit", form: "dialog-native-form"}}>Cancel booking</:primary_action>
<:secondary_action>Keep booking</:secondary_action>
</Kit.Phoenix.Roles.Dialog.dialog>
</details>
<p class="specimen-case-line">A Dialog over the page's own work, its lead a Primary action.</p>
<details>
<summary>Send the invoice</summary>
<Kit.Phoenix.Roles.SecondaryAction.secondary_action id="dialog-invoice-opener">Send the invoice</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
<Kit.Phoenix.Roles.Dialog.dialog open id="dialog-invoice" return_focus="dialog-invoice-opener" aria-labelledby="dialog-invoice-title">
<:heading rest={%{id: "dialog-invoice-title"}}>Send the invoice</:heading>
<Kit.Phoenix.Roles.InlineConsequence.inline_consequence region="consequence" aria-label="Send the Oakmere WI invoice">
<:subject>Oakmere WI invoice</:subject>
<:consequence>Sending this invoice emails it to Oakmere WI with its payment link.</:consequence>
<:effective_time>Takes effect as soon as you confirm.</:effective_time>
<:correction_path></:correction_path>
</Kit.Phoenix.Roles.InlineConsequence.inline_consequence>
<:primary_action>Send invoice</:primary_action>
<:secondary_action>Keep editing</:secondary_action>
</Kit.Phoenix.Roles.Dialog.dialog>
</details>
<p class="specimen-case-line">A task that sends an email, its preview after the form.</p>
<details>
<summary>Invite a volunteer</summary>
<Kit.Phoenix.Roles.SecondaryAction.secondary_action id="dialog-invite-opener">Invite a volunteer</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
<Kit.Phoenix.Roles.Dialog.dialog open id="dialog-invite" return_focus="dialog-invite-opener" aria-labelledby="dialog-invite-title">
<:heading rest={%{id: "dialog-invite-title"}}>Invite a volunteer</:heading>
<:form_groups>
<form id="dialog-invite-form">
<Kit.Phoenix.Roles.FormGroup.form_group id="dialog-invite-email-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.email()} control_value="aisha@oakmereprimary.org" control_rest={%{id: "dialog-invite-email", name: "email"}}><:printed_value>aisha@oakmereprimary.org</:printed_value>
<:label rest={%{for: "dialog-invite-email"}}>Email</:label>
</Kit.Phoenix.Roles.FormGroup.form_group>
</form>
</:form_groups>
<:outbound_previews>
<Kit.Phoenix.Roles.OutboundPreview.headed_region heading="The invitation, as Aisha will get it">
<Kit.Phoenix.Roles.OutboundPreview.outbound_preview>
<:facts>
<Kit.Phoenix.Roles.FactGroup.fact_group>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<:name>Channel</:name><:value>Email to <Kit.Phoenix.Email.email address="aisha@oakmereprimary.org" /></:value>
</Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<:name>Subject</:name><:value>Help run Oakmere Village Hall</:value>
</Kit.Phoenix.Roles.LabelledFact.labelled_fact>
</Kit.Phoenix.Roles.FactGroup.fact_group>
</:facts>
<:email title="Help run Oakmere Village Hall" document="<!doctype html><html lang=en><head><style>body{margin:0;padding:24px;font-family:Georgia,serif;color:#222222;background:#ffffff}p{margin:0 0 12px;font-size:15px;line-height:1.5}</style></head><body><p>Hello Aisha,</p><p>You are invited to help run the bookings at Oakmere Village Hall.</p><p>You will be able to see the hall’s calendar, answer booking requests and help visitors find a room for their event.</p><p>Before your first shift, we will show you how to check a booking, arrange the room and leave the hall ready for the next group.</p><p>The main hall holds the larger gatherings. The Garden room is on the ground floor, through the main entrance and past the kitchen.</p><p>Keys are kept at the welcome desk. Collect them when you arrive and return them there before you leave.</p><p>If a visitor needs help with access or has a question you cannot answer, ask the volunteer at the welcome desk.</p><p>You can choose the shifts that suit you. Tell us before a shift if you can no longer come so another volunteer can take it.</p><p>Reply to this email if you would like to visit the hall before you begin. We will arrange a time to meet you and answer your questions.</p><p>Accept within 7 days.</p><p>Oakmere Village Hall</p></body></html>" />
</Kit.Phoenix.Roles.OutboundPreview.outbound_preview>
<:time>Goes when you send it.</:time>
</Kit.Phoenix.Roles.OutboundPreview.headed_region>
</:outbound_previews>
<:primary_action rest={%{type: "submit", form: "dialog-invite-form"}}>Send invitation</:primary_action>
<:secondary_action>Cancel</:secondary_action>
</Kit.Phoenix.Roles.Dialog.dialog>
</details>
<p class="specimen-case-line">A refund and what it returns, before its amount and reason.</p>
<details>
<summary>Refund the deposit</summary>
<Kit.Phoenix.Roles.SecondaryAction.secondary_action id="dialog-refund-opener">Refund the deposit</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
<Kit.Phoenix.Roles.Dialog.dialog open id="dialog-refund" return_focus="dialog-refund-opener" aria-labelledby="dialog-refund-title">
<:heading rest={%{id: "dialog-refund-title"}}>Refund the deposit</:heading>
<:form_groups>
<form id="dialog-refund-form">
<Kit.Phoenix.Roles.FormGroup.form_group id="dialog-refund-amount-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:short)} control_value="£50.00" control_rest={%{id: "dialog-refund-amount", name: "amount", type: "text"}}><:printed_value>£50.00</:printed_value>
<:label rest={%{for: "dialog-refund-amount"}}>Amount</:label>
</Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} id="dialog-refund-reason-form-group" control_rest={%{id: "dialog-refund-reason", name: "reason", type: "text"}}><:printed_value>No reason given</:printed_value>
<:label rest={%{for: "dialog-refund-reason"}}>Reason</:label>
</Kit.Phoenix.Roles.FormGroup.form_group>
</form>
</:form_groups>
<Kit.Phoenix.Roles.InlineConsequence.inline_consequence region="consequence" aria-label="Refund St Anne’s Scout Group deposit">
<:subject>St Anne’s Scout Group deposit</:subject>
<:consequence>Refunding £50.00 returns it to St Anne’s Scout Group’s card.</:consequence>
<:effective_time>Takes effect as soon as you confirm.</:effective_time>
<:correction_path>A refund cannot be taken back.</:correction_path>
</Kit.Phoenix.Roles.InlineConsequence.inline_consequence>
<:primary_action rest={%{type: "submit", form: "dialog-refund-form"}}>Refund deposit</:primary_action>
<:secondary_action>Keep the deposit</:secondary_action>
</Kit.Phoenix.Roles.Dialog.dialog>
</details>
<p class="specimen-case-line">A task that publishes a page, its preview before the actions.</p>
<details>
<summary>Publish the autumn programme</summary>
<Kit.Phoenix.Roles.SecondaryAction.secondary_action id="dialog-publish-opener">Publish the autumn programme</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
<Kit.Phoenix.Roles.Dialog.dialog open id="dialog-publish" return_focus="dialog-publish-opener" aria-labelledby="dialog-publish-title">
<:heading rest={%{id: "dialog-publish-title"}}>Publish the autumn programme</:heading>
<:outbound_previews>
<Kit.Phoenix.Roles.OutboundPreview.headed_region heading="The programme, as visitors will see it">
<Kit.Phoenix.Roles.OutboundPreview.outbound_preview>
<:facts>
<Kit.Phoenix.Roles.FactGroup.fact_group>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<:name>Page</:name><:value>Autumn programme</:value>
</Kit.Phoenix.Roles.LabelledFact.labelled_fact>
</Kit.Phoenix.Roles.FactGroup.fact_group>
</:facts>
<:page title="Autumn programme" document="<!doctype html><html lang=en><head><style>body{margin:0;padding:24px;font-family:Georgia,serif;color:#222222;background:#ffffff}h1{margin:0 0 16px;font-size:22px;font-weight:normal}ul{margin:0;padding:0;list-style:none}li{padding:12px 0;border-top:1px solid #dddddd;font-size:15px;line-height:1.5}b{display:block}</style></head><body><h1>Autumn programme</h1><ul><li><b>Pilates</b>Mondays at 7pm, 12 places</li><li><b>Chair yoga</b>Wednesdays at 10am, 8 places</li><li><b>Watercolour</b>Thursdays at 2pm, 10 places</li></ul></body></html>" />
</Kit.Phoenix.Roles.OutboundPreview.outbound_preview>
<:time>Goes live when bookings open on 1 September.</:time>
</Kit.Phoenix.Roles.OutboundPreview.headed_region>
</:outbound_previews>
<:primary_action>Publish when bookings open</:primary_action>
<:secondary_action>Cancel</:secondary_action>
</Kit.Phoenix.Roles.Dialog.dialog>
</details>
<p class="specimen-case-line">A creation in steps, at its first step and at its last.</p>
<details>
<summary>New event</summary>
<Kit.Phoenix.Roles.SecondaryAction.secondary_action id="dialog-event-opener">New event</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
<Kit.Phoenix.Roles.Dialog.dialog open id="dialog-event" return_focus="dialog-event-opener" aria-labelledby="dialog-event-title" progress_rest={%{"aria-label": "Steps"}}>
<:heading rest={%{id: "dialog-event-title"}}>New event</:heading>
<:progress name="Name" state="current" />
<:progress name="Organiser" state="upcoming" />
<:progress name="Room" state="upcoming" />
<:form_groups>
<form id="dialog-event-form">
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} id="dialog-event-name-form-group" control_rest={%{id: "dialog-event-name", name: "name", type: "text"}}><:printed_value>No name given</:printed_value>
<:label rest={%{for: "dialog-event-name"}}>Event name</:label>
</Kit.Phoenix.Roles.FormGroup.form_group>
</form>
</:form_groups>
<:continue rest={%{type: "submit", form: "dialog-event-form"}} />
<:back rest={%{}} />
<:primary_action rest={%{type: "submit", form: "dialog-event-form"}}>Create event</:primary_action>
<:secondary_action>Cancel</:secondary_action>
</Kit.Phoenix.Roles.Dialog.dialog>
</details>
<details>
<summary>New event at its last step</summary>
<Kit.Phoenix.Roles.SecondaryAction.secondary_action id="dialog-event-room-opener">New event</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
<Kit.Phoenix.Roles.Dialog.dialog open id="dialog-event-room" return_focus="dialog-event-room-opener" aria-labelledby="dialog-event-room-title" progress_rest={%{"aria-label": "Steps"}}>
<:heading rest={%{id: "dialog-event-room-title"}}>New event</:heading>
<:progress name="Name" state="done" />
<:progress name="Organiser" state="done" />
<:progress name="Room" state="current" />
<:form_groups>
<form id="dialog-event-room-form">
<Kit.Phoenix.Roles.SelectionControl.group id="dialog-event-room-rooms">
<:legend>Room</:legend>
<:choice kind={:radio} control_rest={%{name: "room", value: "main-hall"}} printed_value="Not chosen">Main Hall</:choice>
<:choice kind={:radio} control_rest={%{name: "room", value: "garden-room"}} printed_value="Not chosen">Garden Room</:choice>
<:choice kind={:radio} control_rest={%{name: "room", value: "kitchen"}} printed_value="Not chosen">Kitchen</:choice>
</Kit.Phoenix.Roles.SelectionControl.group>
</form>
</:form_groups>
<:continue rest={%{type: "submit", form: "dialog-event-room-form"}} />
<:back rest={%{}} />
<:primary_action rest={%{type: "submit", form: "dialog-event-room-form"}}>Create event</:primary_action>
<:secondary_action>Cancel</:secondary_action>
</Kit.Phoenix.Roles.Dialog.dialog>
</details>
<p class="specimen-case-line">A task with the subject it acts on, its consequence holding each amount it changes.</p>
<details>
<summary>Split the charge</summary>
<Kit.Phoenix.Roles.SecondaryAction.secondary_action id="dialog-split-opener">Split the charge</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
<Kit.Phoenix.Roles.Dialog.dialog open id="dialog-split" return_focus="dialog-split-opener" aria-labelledby="dialog-split-title">
<:heading rest={%{id: "dialog-split-title"}}>Split the charge</:heading>
<:context>
<Kit.Phoenix.Roles.FactGroup.fact_group>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<:name>Charge</:name><:value>Autumn programme hire</:value>
</Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<:name>Amount</:name><:value words={[Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "180.00")))]} />
</Kit.Phoenix.Roles.LabelledFact.labelled_fact>
</Kit.Phoenix.Roles.FactGroup.fact_group>
</:context>
<:form_groups>
<form id="dialog-split-form">
<Kit.Phoenix.Roles.FormGroup.form_group id="dialog-split-school-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:short)} control_value="£90.00" control_rest={%{id: "dialog-split-school", name: "school", type: "text"}}><:printed_value>£90.00</:printed_value>
<:label rest={%{for: "dialog-split-school"}}>Oakmere Primary School</:label>
</Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group id="dialog-split-wi-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:short)} control_value="£50.00" control_rest={%{id: "dialog-split-wi", name: "wi", type: "text"}}><:printed_value>£50.00</:printed_value>
<:label rest={%{for: "dialog-split-wi"}}>Oakmere WI</:label>
</Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group id="dialog-split-scouts-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:short)} control_value="£40.00" control_rest={%{id: "dialog-split-scouts", name: "scouts", type: "text"}}><:printed_value>£40.00</:printed_value>
<:label rest={%{for: "dialog-split-scouts"}}>St Anne’s Scout Group</:label>
</Kit.Phoenix.Roles.FormGroup.form_group>
</form>
</:form_groups>
<Kit.Phoenix.Roles.InlineConsequence.inline_consequence region="consequence" aria-label="Split the Autumn programme hire charge">
<:subject>Autumn programme hire charge</:subject>
<:consequence>Splitting the £180.00 charge across three payers changes what each one owes.</:consequence>
<:amounts>
<Kit.Phoenix.Table.comparison_table>
<:caption>What each payer owes</:caption>
<:subject_heading label="Payer" />
<:column_headings label="Before" kind="amount">Before</:column_headings>
<:column_headings label="After" kind="amount">After</:column_headings>
<:row facts={[%Kit.Phoenix.Table.ComparisonCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "180.00")))])}, %Kit.Phoenix.Table.ComparisonCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "90.00")))])}]}>Oakmere Primary School</:row>
<:row facts={[%Kit.Phoenix.Table.ComparisonCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "0.00")))])}, %Kit.Phoenix.Table.ComparisonCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "50.00")))])}]}>Oakmere WI</:row>
<:row facts={[%Kit.Phoenix.Table.ComparisonCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "0.00")))])}, %Kit.Phoenix.Table.ComparisonCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "40.00")))])}]}>St Anne’s Scout Group</:row>
</Kit.Phoenix.Table.comparison_table>
</:amounts>
<:effective_time>Takes effect as soon as you confirm.</:effective_time>
<:correction_path>To change the split later, split the charge again from its record.</:correction_path>
</Kit.Phoenix.Roles.InlineConsequence.inline_consequence>
<:primary_action rest={%{type: "submit", form: "dialog-split-form"}}>Split charge</:primary_action>
<:secondary_action>Keep one charge</:secondary_action>
</Kit.Phoenix.Roles.Dialog.dialog>
</details>
<p class="specimen-case-line">The same task while its form loads, the subject standing.</p>
<details>
<summary>Split the charge while it loads</summary>
<Kit.Phoenix.Roles.SecondaryAction.secondary_action id="dialog-split-loading-opener">Split the charge</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
<Kit.Phoenix.Roles.Dialog.dialog open id="dialog-split-loading" return_focus="dialog-split-loading-opener" aria-labelledby="dialog-split-loading-title">
<:heading rest={%{id: "dialog-split-loading-title"}}>Split the charge</:heading>
<:context>
<Kit.Phoenix.Roles.FactGroup.fact_group>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<:name>Charge</:name><:value>Autumn programme hire</:value>
</Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<:name>Amount</:name><:value words={[Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "180.00")))]} />
</Kit.Phoenix.Roles.LabelledFact.labelled_fact>
</Kit.Phoenix.Roles.FactGroup.fact_group>
</:context>
<:form_groups loading={Kit.Phoenix.Loading.sentence("The payers had not loaded.")}>
<form id="dialog-split-loading-form">
<Kit.Phoenix.Roles.FormGroup.form_group id="dialog-split-loading-first-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:short)} control_rest={%{id: "dialog-split-loading-first", name: "first", type: "text"}}><:printed_value>No share given</:printed_value>
<:label rest={%{for: "dialog-split-loading-first"}}>First payer</:label>
</Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group id="dialog-split-loading-second-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:short)} control_rest={%{id: "dialog-split-loading-second", name: "second", type: "text"}}><:printed_value>No share given</:printed_value>
<:label rest={%{for: "dialog-split-loading-second"}}>Second payer</:label>
</Kit.Phoenix.Roles.FormGroup.form_group>
</form>
</:form_groups>
<:primary_action state={Kit.Phoenix.ActionState.inert("dialog-split-loading-split", [Kit.Phoenix.Words.text("Split waits until the payers have loaded.")])} rest={%{type: "submit", form: "dialog-split-loading-form"}}>Split charge</:primary_action>
<:secondary_action>Keep one charge</:secondary_action>
</Kit.Phoenix.Roles.Dialog.dialog>
</details>
<p class="specimen-case-line">A decision whose consequence holds each amount it changes.</p>
<details>
<summary>Cancel the charge</summary>
<Kit.Phoenix.Roles.SecondaryAction.secondary_action id="dialog-cancel-charge-opener">Cancel the charge</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
<Kit.Phoenix.Roles.Dialog.dialog open id="dialog-cancel-charge" return_focus="dialog-cancel-charge-opener" aria-labelledby="dialog-cancel-charge-title">
<:heading rest={%{id: "dialog-cancel-charge-title"}}>Cancel the charge</:heading>
<:form_groups>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} id="dialog-cancel-charge-name-form-group" control_rest={%{id: "dialog-cancel-charge-name", name: "name", type: "text"}}><:printed_value>No name typed</:printed_value>
<:label rest={%{for: "dialog-cancel-charge-name"}}>Charge name</:label>
</Kit.Phoenix.Roles.FormGroup.form_group>
</:form_groups>
<Kit.Phoenix.Roles.InlineConsequence.inline_consequence region="consequence" aria-label="Cancel the Autumn programme hire charge">
<:subject>Autumn programme hire charge</:subject>
<:consequence>Cancelling the £180.00 charge removes what each payer owes, and cannot be undone.</:consequence>
<:amounts>
<Kit.Phoenix.Table.comparison_table>
<:caption>What each payer owes</:caption>
<:subject_heading label="Payer" />
<:column_headings label="Before" kind="amount">Before</:column_headings>
<:column_headings label="After" kind="amount">After</:column_headings>
<:row facts={[%Kit.Phoenix.Table.ComparisonCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "90.00")))])}, %Kit.Phoenix.Table.ComparisonCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "0.00")))])}]}>Oakmere Primary School</:row>
<:row facts={[%Kit.Phoenix.Table.ComparisonCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "50.00")))])}, %Kit.Phoenix.Table.ComparisonCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "0.00")))])}]}>Oakmere WI</:row>
<:row facts={[%Kit.Phoenix.Table.ComparisonCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "40.00")))])}, %Kit.Phoenix.Table.ComparisonCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.amount(Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "0.00")))])}]}>St Anne’s Scout Group</:row>
</Kit.Phoenix.Table.comparison_table>
</:amounts>
<:effective_time>Takes effect as soon as you confirm.</:effective_time>
<:correction_path>To charge the payers again, add a new charge from the programme’s record.</:correction_path>
</Kit.Phoenix.Roles.InlineConsequence.inline_consequence>
<:destructive_action icon="trash" state={Kit.Phoenix.Roles.Dialog.DestructiveState.confirmation("Autumn programme hire", "dialog-cancel-charge-cancel", "Type Autumn programme hire to cancel it.")}>Cancel the charge</:destructive_action>
<:secondary_action>Keep the charge</:secondary_action>
</Kit.Phoenix.Roles.Dialog.dialog>
</details>
<p class="specimen-case-line">A task whose agreement is signed with the actor’s full name.</p>
<details>
<summary>Save a card to charge later</summary>
<Kit.Phoenix.Roles.SecondaryAction.secondary_action id="dialog-signed-opener">Save card</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
<Kit.Phoenix.Roles.Dialog.dialog open id="dialog-signed" return_focus="dialog-signed-opener" aria-labelledby="dialog-signed-title">
<:heading rest={%{id: "dialog-signed-title"}}>Save card</:heading>
<:form_groups>
<form id="dialog-signed-card" action="#dialog-signed" method="get">
<Kit.Phoenix.Roles.FormGroup.form_group id="dialog-signed-name-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)}
control_rest={%{id: "dialog-signed-name", name: "name", autocomplete: "cc-name", value: "Aisha Khan"}}
><:printed_value>Aisha Khan</:printed_value>
<:label rest={%{for: "dialog-signed-name"}}>Name on card</:label>
</Kit.Phoenix.Roles.FormGroup.form_group>
</form>
</:form_groups>
<:agreement>By saving this card, you allow Oakmere Village Hall to charge it for later invoices on their due date. You can remove the card from your account at any time.</:agreement>
<:signature>
<Kit.Phoenix.Roles.FormGroup.form_group id="dialog-signed-signature-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)}
control_rest={%{id: "dialog-signed-signature", name: "signature", autocomplete: "name", form: "dialog-signed-card"}}
><:printed_value>Not signed</:printed_value>
<:label rest={%{for: "dialog-signed-signature"}}>Your full name, to sign</:label>
</Kit.Phoenix.Roles.FormGroup.form_group>
</:signature>
<:primary_action rest={%{type: "submit", form: "dialog-signed-card"}}>Save card</:primary_action>
<:secondary_action>Keep current card</:secondary_action>
</Kit.Phoenix.Roles.Dialog.dialog>
</details>
<p class="specimen-case-line">A step whose Number fields answer one question, with the set's help.</p>
<details>
<summary>How many of each size</summary>
<Kit.Phoenix.Roles.SecondaryAction.secondary_action id="dialog-sizes-opener">Add items</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
<Kit.Phoenix.Roles.Dialog.dialog open id="dialog-sizes" return_focus="dialog-sizes-opener" aria-labelledby="dialog-sizes-title" progress_rest={%{"aria-label": "Steps"}}>
<:heading rest={%{id: "dialog-sizes-title"}}>Add items</:heading>
<:progress name="Sizes" state="current" />
<:progress name="Review" state="upcoming" />
<:form_groups>
<form id="dialog-sizes-form" novalidate>
<Kit.Phoenix.Layouts.Form.group_set id="dialog-sizes-set">
<:legend>How many of each size</:legend>
<Kit.Phoenix.Roles.FormGroup.form_group id="dialog-sizes-small">
<:label>Small</:label>
<:control :let={binding}><Kit.Phoenix.Roles.NumberField.number_field width="short" binding={binding} reader={reader()} name="small" value="0" /></:control>
<:printed_value>0</:printed_value>
</Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group id="dialog-sizes-medium">
<:label>Medium</:label>
<:control :let={binding}><Kit.Phoenix.Roles.NumberField.number_field width="short" binding={binding} reader={reader()} name="medium" value="0" /></:control>
<:printed_value>0</:printed_value>
</Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group id="dialog-sizes-large">
<:label>Large</:label>
<:control :let={binding}><Kit.Phoenix.Roles.NumberField.number_field width="short" binding={binding} reader={reader()} name="large" value="0" /></:control>
<:printed_value>0</:printed_value>
</Kit.Phoenix.Roles.FormGroup.form_group>
<:help>Use 0 for a size you are not adding.</:help>
</Kit.Phoenix.Layouts.Form.group_set>
</form>
</:form_groups>
<:continue rest={%{type: "submit", form: "dialog-sizes-form"}} />
<:back rest={%{}} />
<:primary_action rest={%{type: "submit", form: "dialog-sizes-form"}}>Add items</:primary_action>
<:secondary_action>Cancel</:secondary_action>
</Kit.Phoenix.Roles.Dialog.dialog>
</details>
<p class="specimen-case-line">The same step with the set's error, its help kept.</p>
<details>
<summary>How many of each size with an error</summary>
<Kit.Phoenix.Roles.SecondaryAction.secondary_action id="dialog-sizes-error-opener">Add items</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
<Kit.Phoenix.Roles.Dialog.dialog open id="dialog-sizes-error" return_focus="dialog-sizes-error-opener" aria-labelledby="dialog-sizes-error-title" progress_rest={%{"aria-label": "Steps"}}>
<:heading rest={%{id: "dialog-sizes-error-title"}}>Add items</:heading>
<:progress name="Sizes" state="current" />
<:progress name="Review" state="upcoming" />
<:form_groups>
<form id="dialog-sizes-error-form" novalidate>
<Kit.Phoenix.Layouts.Form.group_set id="dialog-sizes-error-set">
<:legend>How many of each size</:legend>
<Kit.Phoenix.Roles.FormGroup.form_group id="dialog-sizes-error-small">
<:label>Small</:label>
<:control :let={binding}><Kit.Phoenix.Roles.NumberField.number_field width="short" binding={binding} reader={reader()} name="small" value="0" /></:control>
<:printed_value>0</:printed_value>
</Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group id="dialog-sizes-error-medium">
<:label>Medium</:label>
<:control :let={binding}><Kit.Phoenix.Roles.NumberField.number_field width="short" binding={binding} reader={reader()} name="medium" value="0" /></:control>
<:printed_value>0</:printed_value>
</Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group id="dialog-sizes-error-large">
<:label>Large</:label>
<:control :let={binding}><Kit.Phoenix.Roles.NumberField.number_field width="short" binding={binding} reader={reader()} name="large" value="0" /></:control>
<:printed_value>0</:printed_value>
</Kit.Phoenix.Roles.FormGroup.form_group>
<:help>Use 0 for a size you are not adding.</:help>
<:error>Enter at least one item across the sizes.</:error>
</Kit.Phoenix.Layouts.Form.group_set>
</form>
</:form_groups>
<:continue rest={%{type: "submit", form: "dialog-sizes-error-form"}} />
<:back rest={%{}} />
<:primary_action rest={%{type: "submit", form: "dialog-sizes-error-form"}}>Add items</:primary_action>
<:secondary_action>Cancel</:secondary_action>
</Kit.Phoenix.Roles.Dialog.dialog>
</details>
Dialog, unsaved
Add a room
A long room form with changes not yet saved.
Add a room with more details
A long room form whose last submission was refused.
Add a room after a refusal
A long room form with its entry saved and its actions in place.
Add a room with its entry saved
Source
<details>
<summary>Add a room</summary>
<Kit.Phoenix.Roles.SecondaryAction.secondary_action id="dialog-unsaved-opener">Add a room</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
<Kit.Phoenix.Roles.Dialog.dialog open id="dialog-unsaved" return_focus="dialog-unsaved-opener" aria-labelledby="dialog-unsaved-title" unsaved="Not saved" keep={%Kit.Phoenix.Keep{key: "aisha-khan/rooms/new", version: "1"}}>
<:heading rest={%{id: "dialog-unsaved-title"}}>Add a room</:heading>
<:form_groups>
<form id="dialog-unsaved-form">
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} id="dialog-unsaved-name-form-group" control_rest={%{id: "dialog-unsaved-name", name: "name", type: "text", value: "Garden Room"}}>
<:printed_value>Garden Room</:printed_value>
<:label rest={%{for: "dialog-unsaved-name"}}>Room name</:label>
</Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group id="dialog-unsaved-seats-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:narrow)} control_rest={%{id: "dialog-unsaved-seats", name: "seats", type: "text", inputmode: "numeric", value: "40"}}>
<:printed_value>40</:printed_value>
<:label rest={%{for: "dialog-unsaved-seats"}}>Seats</:label>
</Kit.Phoenix.Roles.FormGroup.form_group>
</form>
</:form_groups>
<:primary_action rest={%{type: "submit", form: "dialog-unsaved-form"}}>Add room</:primary_action>
<:secondary_action>Cancel</:secondary_action>
</Kit.Phoenix.Roles.Dialog.dialog>
</details>
<p class="specimen-case-line">A long room form with changes not yet saved.</p>
<details>
<summary>Add a room with more details</summary>
<Kit.Phoenix.Roles.SecondaryAction.secondary_action id="dialog-unsaved-long-opener">Add a room</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
<Kit.Phoenix.Roles.Dialog.dialog open id="dialog-unsaved-long" return_focus="dialog-unsaved-long-opener" aria-labelledby="dialog-unsaved-long-title" unsaved="Not saved">
<:heading rest={%{id: "dialog-unsaved-long-title"}}>Add a room</:heading>
<:form_groups><form id="dialog-unsaved-long-form">
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} id="dialog-unsaved-long-name-form-group" control_rest={%{id: "dialog-unsaved-long-name", name: "name", type: "text", value: "Garden Room"}}><:label rest={%{for: "dialog-unsaved-long-name"}}>Room name</:label><:printed_value>Garden Room</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:narrow)} id="dialog-unsaved-long-seats-form-group" control_rest={%{id: "dialog-unsaved-long-seats", name: "seats", type: "text", value: "40"}}><:label rest={%{for: "dialog-unsaved-long-seats"}}>Seats</:label><:printed_value>40</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} id="dialog-unsaved-long-building-form-group" control_rest={%{id: "dialog-unsaved-long-building", name: "building", type: "text", value: "Community centre"}}><:label rest={%{for: "dialog-unsaved-long-building"}}>Building</:label><:printed_value>Community centre</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:short)} id="dialog-unsaved-long-floor-form-group" control_rest={%{id: "dialog-unsaved-long-floor", name: "floor", type: "text", value: "Ground floor"}}><:label rest={%{for: "dialog-unsaved-long-floor"}}>Floor</:label><:printed_value>Ground floor</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} id="dialog-unsaved-long-contact-form-group" control_rest={%{id: "dialog-unsaved-long-contact", name: "contact", type: "text", value: "Aisha Khan"}}><:label rest={%{for: "dialog-unsaved-long-contact"}}>Contact name</:label><:printed_value>Aisha Khan</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:wide)} id="dialog-unsaved-long-email-form-group" control_rest={%{id: "dialog-unsaved-long-email", name: "email", type: "text", value: "aisha@example.org"}}><:label rest={%{for: "dialog-unsaved-long-email"}}>Contact email</:label><:printed_value>aisha@example.org</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} id="dialog-unsaved-long-telephone-form-group" control_rest={%{id: "dialog-unsaved-long-telephone", name: "telephone", type: "text", value: "01632 960123"}}><:label rest={%{for: "dialog-unsaved-long-telephone"}}>Telephone</:label><:printed_value>01632 960123</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:wide)} id="dialog-unsaved-long-street-form-group" control_rest={%{id: "dialog-unsaved-long-street", name: "street", type: "text", value: "12 Garden Street"}}><:label rest={%{for: "dialog-unsaved-long-street"}}>Street address</:label><:printed_value>12 Garden Street</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} id="dialog-unsaved-long-town-form-group" control_rest={%{id: "dialog-unsaved-long-town", name: "town", type: "text", value: "Oakmere"}}><:label rest={%{for: "dialog-unsaved-long-town"}}>Town</:label><:printed_value>Oakmere</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:narrow)} id="dialog-unsaved-long-postcode-form-group" control_rest={%{id: "dialog-unsaved-long-postcode", name: "postcode", type: "text", value: "OX1 1AA"}}><:label rest={%{for: "dialog-unsaved-long-postcode"}}>Postcode</:label><:printed_value>OX1 1AA</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:wide)} id="dialog-unsaved-long-access-form-group" control_rest={%{id: "dialog-unsaved-long-access", name: "access", type: "text", value: "Step-free entrance"}}><:label rest={%{for: "dialog-unsaved-long-access"}}>Access</:label><:printed_value>Step-free entrance</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:column)} id="dialog-unsaved-long-notes-form-group" control_rest={%{id: "dialog-unsaved-long-notes", name: "notes", type: "text", value: "Key held at reception"}}><:label rest={%{for: "dialog-unsaved-long-notes"}}>Notes</:label><:printed_value>Key held at reception</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
</form></:form_groups>
<:primary_action rest={%{type: "submit", form: "dialog-unsaved-long-form"}}>Add room</:primary_action>
<:secondary_action>Cancel</:secondary_action>
</Kit.Phoenix.Roles.Dialog.dialog>
</details>
<p class="specimen-case-line">A long room form whose last submission was refused.</p>
<details>
<summary>Add a room after a refusal</summary>
<Kit.Phoenix.Roles.SecondaryAction.secondary_action id="dialog-unsaved-refused-opener">Add a room</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
<Kit.Phoenix.Roles.Dialog.dialog open id="dialog-unsaved-refused" return_focus="dialog-unsaved-refused-opener" aria-labelledby="dialog-unsaved-refused-title" unsaved="Not saved">
<:heading rest={%{id: "dialog-unsaved-refused-title"}}>Add a room</:heading>
<:form_groups><form id="dialog-unsaved-refused-form">
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} id="dialog-unsaved-refused-name-form-group" control_rest={%{id: "dialog-unsaved-refused-name", name: "name", type: "text", value: "Garden Room"}}><:label rest={%{for: "dialog-unsaved-refused-name"}}>Room name</:label><:printed_value>Garden Room</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:narrow)} id="dialog-unsaved-refused-seats-form-group" control_rest={%{id: "dialog-unsaved-refused-seats", name: "seats", type: "text", value: "40"}}><:label rest={%{for: "dialog-unsaved-refused-seats"}}>Seats</:label><:printed_value>40</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} id="dialog-unsaved-refused-building-form-group" control_rest={%{id: "dialog-unsaved-refused-building", name: "building", type: "text", value: "Community centre"}}><:label rest={%{for: "dialog-unsaved-refused-building"}}>Building</:label><:printed_value>Community centre</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:short)} id="dialog-unsaved-refused-floor-form-group" control_rest={%{id: "dialog-unsaved-refused-floor", name: "floor", type: "text", value: "Ground floor"}}><:label rest={%{for: "dialog-unsaved-refused-floor"}}>Floor</:label><:printed_value>Ground floor</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} id="dialog-unsaved-refused-contact-form-group" control_rest={%{id: "dialog-unsaved-refused-contact", name: "contact", type: "text", value: "Aisha Khan"}}><:label rest={%{for: "dialog-unsaved-refused-contact"}}>Contact name</:label><:printed_value>Aisha Khan</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:wide)} id="dialog-unsaved-refused-email-form-group" control_rest={%{id: "dialog-unsaved-refused-email", name: "email", type: "text", value: "aisha@example.org"}}><:label rest={%{for: "dialog-unsaved-refused-email"}}>Contact email</:label><:printed_value>aisha@example.org</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} id="dialog-unsaved-refused-telephone-form-group" control_rest={%{id: "dialog-unsaved-refused-telephone", name: "telephone", type: "text", value: "01632 960123"}}><:label rest={%{for: "dialog-unsaved-refused-telephone"}}>Telephone</:label><:printed_value>01632 960123</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:wide)} id="dialog-unsaved-refused-street-form-group" control_rest={%{id: "dialog-unsaved-refused-street", name: "street", type: "text", value: "12 Garden Street"}}><:label rest={%{for: "dialog-unsaved-refused-street"}}>Street address</:label><:printed_value>12 Garden Street</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} id="dialog-unsaved-refused-town-form-group" control_rest={%{id: "dialog-unsaved-refused-town", name: "town", type: "text", value: "Oakmere"}}><:label rest={%{for: "dialog-unsaved-refused-town"}}>Town</:label><:printed_value>Oakmere</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:narrow)} id="dialog-unsaved-refused-postcode-form-group" control_rest={%{id: "dialog-unsaved-refused-postcode", name: "postcode", type: "text", value: "OX1 1AA"}}><:label rest={%{for: "dialog-unsaved-refused-postcode"}}>Postcode</:label><:printed_value>OX1 1AA</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:wide)} id="dialog-unsaved-refused-access-form-group" control_rest={%{id: "dialog-unsaved-refused-access", name: "access", type: "text", value: "Step-free entrance"}}><:label rest={%{for: "dialog-unsaved-refused-access"}}>Access</:label><:printed_value>Step-free entrance</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:column)} id="dialog-unsaved-refused-notes-form-group" control_rest={%{id: "dialog-unsaved-refused-notes", name: "notes", type: "text", value: "Key held at reception"}}><:label rest={%{for: "dialog-unsaved-refused-notes"}}>Notes</:label><:printed_value>Key held at reception</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
</form></:form_groups>
<:refusal><Kit.Phoenix.Roles.Refusal.refusal id="dialog-unsaved-refused-refusal"><:line>Room not added. A room with this name already exists.</:line><:cause href="#dialog-unsaved-refused-name">Choose another room name</:cause></Kit.Phoenix.Roles.Refusal.refusal></:refusal>
<:primary_action rest={%{type: "submit", form: "dialog-unsaved-refused-form"}}>Add room</:primary_action>
<:secondary_action>Cancel</:secondary_action>
</Kit.Phoenix.Roles.Dialog.dialog>
</details>
<p class="specimen-case-line">A long room form with its entry saved and its actions in place.</p>
<details>
<summary>Add a room with its entry saved</summary>
<Kit.Phoenix.Roles.SecondaryAction.secondary_action id="dialog-unsaved-saved-opener">Add a room</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
<Kit.Phoenix.Roles.Dialog.dialog open id="dialog-unsaved-saved" return_focus="dialog-unsaved-saved-opener" aria-labelledby="dialog-unsaved-saved-title">
<:heading rest={%{id: "dialog-unsaved-saved-title"}}>Add a room</:heading>
<:form_groups><form id="dialog-unsaved-saved-form">
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} id="dialog-unsaved-saved-name-form-group" control_rest={%{id: "dialog-unsaved-saved-name", name: "name", type: "text", value: "Garden Room"}}><:label rest={%{for: "dialog-unsaved-saved-name"}}>Room name</:label><:printed_value>Garden Room</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:narrow)} id="dialog-unsaved-saved-seats-form-group" control_rest={%{id: "dialog-unsaved-saved-seats", name: "seats", type: "text", value: "40"}}><:label rest={%{for: "dialog-unsaved-saved-seats"}}>Seats</:label><:printed_value>40</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} id="dialog-unsaved-saved-building-form-group" control_rest={%{id: "dialog-unsaved-saved-building", name: "building", type: "text", value: "Community centre"}}><:label rest={%{for: "dialog-unsaved-saved-building"}}>Building</:label><:printed_value>Community centre</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:short)} id="dialog-unsaved-saved-floor-form-group" control_rest={%{id: "dialog-unsaved-saved-floor", name: "floor", type: "text", value: "Ground floor"}}><:label rest={%{for: "dialog-unsaved-saved-floor"}}>Floor</:label><:printed_value>Ground floor</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} id="dialog-unsaved-saved-contact-form-group" control_rest={%{id: "dialog-unsaved-saved-contact", name: "contact", type: "text", value: "Aisha Khan"}}><:label rest={%{for: "dialog-unsaved-saved-contact"}}>Contact name</:label><:printed_value>Aisha Khan</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:wide)} id="dialog-unsaved-saved-email-form-group" control_rest={%{id: "dialog-unsaved-saved-email", name: "email", type: "text", value: "aisha@example.org"}}><:label rest={%{for: "dialog-unsaved-saved-email"}}>Contact email</:label><:printed_value>aisha@example.org</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} id="dialog-unsaved-saved-telephone-form-group" control_rest={%{id: "dialog-unsaved-saved-telephone", name: "telephone", type: "text", value: "01632 960123"}}><:label rest={%{for: "dialog-unsaved-saved-telephone"}}>Telephone</:label><:printed_value>01632 960123</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:wide)} id="dialog-unsaved-saved-street-form-group" control_rest={%{id: "dialog-unsaved-saved-street", name: "street", type: "text", value: "12 Garden Street"}}><:label rest={%{for: "dialog-unsaved-saved-street"}}>Street address</:label><:printed_value>12 Garden Street</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} id="dialog-unsaved-saved-town-form-group" control_rest={%{id: "dialog-unsaved-saved-town", name: "town", type: "text", value: "Oakmere"}}><:label rest={%{for: "dialog-unsaved-saved-town"}}>Town</:label><:printed_value>Oakmere</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:narrow)} id="dialog-unsaved-saved-postcode-form-group" control_rest={%{id: "dialog-unsaved-saved-postcode", name: "postcode", type: "text", value: "OX1 1AA"}}><:label rest={%{for: "dialog-unsaved-saved-postcode"}}>Postcode</:label><:printed_value>OX1 1AA</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:wide)} id="dialog-unsaved-saved-access-form-group" control_rest={%{id: "dialog-unsaved-saved-access", name: "access", type: "text", value: "Step-free entrance"}}><:label rest={%{for: "dialog-unsaved-saved-access"}}>Access</:label><:printed_value>Step-free entrance</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:column)} id="dialog-unsaved-saved-notes-form-group" control_rest={%{id: "dialog-unsaved-saved-notes", name: "notes", type: "text", value: "Key held at reception"}}><:label rest={%{for: "dialog-unsaved-saved-notes"}}>Notes</:label><:printed_value>Key held at reception</:printed_value></Kit.Phoenix.Roles.FormGroup.form_group>
</form></:form_groups>
<:primary_action rest={%{type: "submit", form: "dialog-unsaved-saved-form"}}>Add room</:primary_action>
<:secondary_action>Cancel</:secondary_action>
</Kit.Phoenix.Roles.Dialog.dialog>
</details>
Dialog, inert
A Dialog whose Primary lead waits.
Send the invoice
A Dialog whose Destructive lead waits.
Delete the booking
A creation in steps whose Continue waits.
New event
Source
<p class="specimen-case-line">A Dialog whose Primary lead waits.</p>
<details>
<summary>Send the invoice</summary>
<Kit.Phoenix.Roles.SecondaryAction.secondary_action id="dialog-inert-invoice-opener">Send the invoice</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
<Kit.Phoenix.Roles.Dialog.dialog open id="dialog-inert-invoice" return_focus="dialog-inert-invoice-opener" aria-labelledby="dialog-inert-invoice-title">
<:heading rest={%{id: "dialog-inert-invoice-title"}}>Send the invoice</:heading>
<Kit.Phoenix.Roles.InlineConsequence.inline_consequence region="consequence" aria-label="Send the Oakmere WI invoice">
<:subject>Oakmere WI invoice</:subject>
<:consequence>Sending this invoice emails it to Oakmere WI with its payment link.</:consequence>
<:effective_time>Takes effect as soon as you confirm.</:effective_time>
<:correction_path></:correction_path>
</Kit.Phoenix.Roles.InlineConsequence.inline_consequence>
<:primary_action state={Kit.Phoenix.ActionState.inert("dialog-inert-invoice-send", [Kit.Phoenix.Words.text("Send waits until the invoice has been prepared.")])}>Send invoice</:primary_action>
<:secondary_action>Keep editing</:secondary_action>
</Kit.Phoenix.Roles.Dialog.dialog>
</details>
<p class="specimen-case-line">A Dialog whose Destructive lead waits.</p>
<details>
<summary>Delete the booking</summary>
<Kit.Phoenix.Roles.SecondaryAction.secondary_action id="dialog-inert-delete-opener">Delete the booking</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
<Kit.Phoenix.Roles.Dialog.dialog open id="dialog-inert-delete" return_focus="dialog-inert-delete-opener" aria-labelledby="dialog-inert-delete-title">
<:heading rest={%{id: "dialog-inert-delete-title"}}>Delete the booking</:heading>
<Kit.Phoenix.Roles.InlineConsequence.inline_consequence region="consequence" aria-label="Delete the Oakmere WI booking">
<:subject>Oakmere WI booking</:subject>
<:consequence>Deleting this booking frees Tuesday in the Main Hall and removes its invoice.</:consequence>
<:effective_time>Takes effect as soon as you confirm.</:effective_time>
<:correction_path></:correction_path>
</Kit.Phoenix.Roles.InlineConsequence.inline_consequence>
<:destructive_action icon="trash" state={Kit.Phoenix.Roles.Dialog.DestructiveState.inert("dialog-inert-delete-delete", [Kit.Phoenix.Words.text("Delete waits until the booking’s invoice has been checked.")])}>Delete booking</:destructive_action>
<:secondary_action>Keep the booking</:secondary_action>
</Kit.Phoenix.Roles.Dialog.dialog>
</details>
<p class="specimen-case-line">A creation in steps whose Continue waits.</p>
<details>
<summary>New event</summary>
<Kit.Phoenix.Roles.SecondaryAction.secondary_action id="dialog-inert-event-opener">New event</Kit.Phoenix.Roles.SecondaryAction.secondary_action>
<Kit.Phoenix.Roles.Dialog.dialog open id="dialog-inert-event" return_focus="dialog-inert-event-opener" aria-labelledby="dialog-inert-event-title" progress_rest={%{"aria-label": "Steps"}}>
<:heading rest={%{id: "dialog-inert-event-title"}}>New event</:heading>
<:progress name="Name" state="current" />
<:progress name="Organiser" state="upcoming" />
<:progress name="Room" state="upcoming" />
<:form_groups>
<form id="dialog-inert-event-form">
<Kit.Phoenix.Roles.FormGroup.form_group kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)} id="dialog-inert-event-name-form-group" control_value="Autumn programme hire" control_rest={%{id: "dialog-inert-event-name", name: "name", type: "text"}}>
<:label rest={%{for: "dialog-inert-event-name"}}>Event name</:label>
<:printed_value>Autumn programme hire</:printed_value>
</Kit.Phoenix.Roles.FormGroup.form_group>
</form>
</:form_groups>
<:continue state={Kit.Phoenix.ActionState.inert("dialog-inert-event-continue", [Kit.Phoenix.Words.text("Continue waits until the event name has been checked.")])} rest={%{type: "submit", form: "dialog-inert-event-form"}} />
<:back rest={%{}} />
<:primary_action rest={%{type: "submit", form: "dialog-inert-event-form"}}>Create event</:primary_action>
<:secondary_action>Cancel</:secondary_action>
</Kit.Phoenix.Roles.Dialog.dialog>
</details>