Stepped flowBuilt revision v17.10.0 Phoenix TopicsHuman supportBring a missing role, layout, or state, or a rendering against the standard, to the session working on kit. Name the package and the entry. Stepped flowOpen the whole page Source<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
<:subject>Stepped flow</:subject>
<:lede words={@owner} />
<:lede words="Layout example" />
<:actions><a href="../layout-stepped-flow/#layout-stepped-flow">{@owner}</a></:actions>
<:body>
<Kit.Phoenix.Layouts.SteppedFlow.stepped_flow subject_state={Kit.Phoenix.State.none()} id="layout-stepped-flow-current-summary" progress_rest={%{"aria-label": "Import progress"}}>
<:progress name="File" state="done" />
<:progress name="Mapping" state="done" />
<:progress name="Preview" state="current" />
<:progress name="Result" state="upcoming" />
<:current_step id="current-summary-preview-step" rest={%{"aria-labelledby": "current-summary-preview-title"}} heading="Preview hirer import" heading_rest={%{id: "current-summary-preview-title"}}>
<Kit.Phoenix.Roles.FormGroup.form_group id="current-summary-billing-email-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.email()} control_rest={%{id: "current-summary-billing-email", name: "billing-email", value: "aisha@oakmereprimary.org"}}>
<:printed_value>aisha@oakmereprimary.org</:printed_value>
<:label rest={%{for: "current-summary-billing-email"}}>Billing email</:label>
</Kit.Phoenix.Roles.FormGroup.form_group>
</:current_step>
<:summary heading="Import summary" />
<:summary_step name="File" href="../form/">
<Kit.Phoenix.Roles.LabelledFact.labelled_fact><:name>Uploaded</:name><:value>hirers.csv</:value></Kit.Phoenix.Roles.LabelledFact.labelled_fact>
</:summary_step>
<:summary_step name="Mapping" href="../form/">
<Kit.Phoenix.Roles.LabelledFact.labelled_fact><:name>Columns</:name><:value>All 9 columns matched to your fields</:value></Kit.Phoenix.Roles.LabelledFact.labelled_fact>
</:summary_step>
<:summary_step name="Preview" current={true}>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact><:name>Billing email</:name><:value><Kit.Phoenix.Email.email address="aisha@oakmereprimary.org" /></:value></Kit.Phoenix.Roles.LabelledFact.labelled_fact>
</:summary_step>
</Kit.Phoenix.Layouts.SteppedFlow.stepped_flow>
<Kit.Phoenix.Layouts.SteppedFlow.stepped_flow id="layout-stepped-flow-stepped-flow" committing={true} subject_state={Kit.Phoenix.State.none()} progress_rest={
%{"aria-label": "Import progress"}
}>
<:progress name="File" state="done" />
<:progress name="Mapping" state="done" />
<:progress name="Preview" state="current" />
<:progress name="Result" state="upcoming" />
<:current_step id="preview-step" rest={%{"aria-labelledby": "preview-title"}} heading="Preview hirer import" heading_rest={%{id: "preview-title"}}>
<Kit.Phoenix.Roles.FormGroup.form_group id="preview-billing-email-form-group"
kind={Kit.Phoenix.Roles.FormGroup.Kind.email()}
control_rest={%{id: "preview-billing-email", name: "billing-email", value: "aisha@oakmereprimary.org"}}
><:printed_value>aisha@oakmereprimary.org</:printed_value>
<:label rest={%{for: "preview-billing-email"}}>Billing email</:label>
</Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group id="preview-telephone-form-group"
kind={Kit.Phoenix.Roles.FormGroup.Kind.telephone()}
control_rest={%{id: "preview-telephone", name: "telephone", value: "01632 960 123"}}
><:printed_value>01632 960 123</:printed_value>
<:label rest={%{for: "preview-telephone"}}>Telephone</:label>
</Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.Row.row>
<:subject>Oakmere Primary School</:subject>
<:facts><Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.named(reader(), Decimal.new("40"), "rows", 0)} /> ready · Row 17 needs a decision</:facts>
</Kit.Phoenix.Roles.Row.row>
<Kit.Phoenix.Roles.InlineConsequence.inline_consequence region="consequence" aria-label="Import Oakmere Primary School">
<:subject>Oakmere Primary School</:subject>
<:consequence>Importing adds the hirer and starts their first agreement.</:consequence>
<:effective_time>The import runs as soon as you continue.</:effective_time>
<:correction_path>You can remove an imported hirer for 30 days after the import.</:correction_path>
</Kit.Phoenix.Roles.InlineConsequence.inline_consequence>
</:current_step>
<:summary heading="Import summary" />
<:summary_step name="File" href="../form/">
<Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<:name>Uploaded</:name><:value>hirers-2025-05-12.csv, <Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.named(reader(), Decimal.new("42"), "rows", 0)} /> found</:value>
</Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<:name>Ready to import</:name><:value><Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.named(reader(), Decimal.new("40"), "rows", 0)} /></:value>
</Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<:name>Matched to hirers you have</:name><:value><Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.named(reader(), Decimal.new("2"), "rows", 0)} /></:value>
</Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact id="summary-row-17">
<:name>Row 17, Riverside Scouts</:name><:value>Matches two hirers: Riverside Scouts and Riverside Scout Group</:value>
</Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<:name>Last import</:name><:value><Kit.Phoenix.Roles.Time.time value={Kit.Phoenix.Time.day(reader(), ~D[2025-02-12])} />, <Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.named(reader(), Decimal.new("38"), "hirers", 0)} /></:value>
</Kit.Phoenix.Roles.LabelledFact.labelled_fact>
</:summary_step>
<:summary_step name="Mapping" href="../form/">
<Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<:name>Columns</:name><:value>All 9 columns matched to your fields</:value>
</Kit.Phoenix.Roles.LabelledFact.labelled_fact>
</:summary_step>
<:refusal>
<Kit.Phoenix.Roles.Refusal.refusal id="preview-refused">
<:line>Import is refused while row 17 matches more than one hirer:</:line>
<:cause href="#summary-row-17">Row 17, Riverside Scouts</:cause>
</Kit.Phoenix.Roles.Refusal.refusal>
</:refusal>
<:back><Kit.Phoenix.Roles.WayBack.way_back href="../form/">Back to mapping</Kit.Phoenix.Roles.WayBack.way_back></:back>
<:continue_or_commit>Import hirers</:continue_or_commit>
</Kit.Phoenix.Layouts.SteppedFlow.stepped_flow>
<Kit.Phoenix.Layouts.SteppedFlow.stepped_flow subject_state={Kit.Phoenix.State.none()} id="layout-stepped-flow-result" progress_rest={%{"aria-label": "Import progress"}}>
<:progress name="File" state="done" />
<:progress name="Mapping" state="done" />
<:progress name="Preview" state="done" />
<:progress name="Result" state="current" />
<:current_step id="result-step" rest={%{"aria-labelledby": "result-title"}} heading="Hirers imported" heading_rest={%{id: "result-title"}}>
<Kit.Phoenix.Roles.Row.row>
<:subject>Oakmere Primary School</:subject>
<:facts><Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.named(reader(), Decimal.new("40"), "rows", 0)} /> imported · <Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.named(reader(), Decimal.new("2"), "rows", 0)} /> skipped as hirers you have</:facts>
</Kit.Phoenix.Roles.Row.row>
<Kit.Phoenix.Roles.ActionGroup.action_group><:secondary><Kit.Phoenix.Roles.SecondaryAction.secondary_action type="button">Undo import</Kit.Phoenix.Roles.SecondaryAction.secondary_action></:secondary></Kit.Phoenix.Roles.ActionGroup.action_group>
</:current_step>
<:continue_or_commit>Finish</:continue_or_commit>
</Kit.Phoenix.Layouts.SteppedFlow.stepped_flow>
<Kit.Phoenix.Layouts.SteppedFlow.stepped_flow committing={true} subject_state={Kit.Phoenix.State.none()} id="layout-stepped-flow-empty-region" progress_rest={%{"aria-label": "Import progress"}}>
<:progress name="File" state="done" />
<:progress name="Mapping" state="done" />
<:progress name="Preview" state="current" />
<:progress name="Result" state="upcoming" />
<:current_step id="empty-region-preview-step" rest={%{"aria-labelledby": "empty-region-preview-title"}} heading="Preview hirer import" heading_rest={%{id: "empty-region-preview-title"}}>
</:current_step>
<:summary />
<:back><Kit.Phoenix.Roles.WayBack.way_back href="../form/">Back to mapping</Kit.Phoenix.Roles.WayBack.way_back></:back>
<:continue_or_commit>Import hirers</:continue_or_commit>
</Kit.Phoenix.Layouts.SteppedFlow.stepped_flow>
</:body>
</Kit.Phoenix.Layouts.Shell.shell>
Stepped flow, no-summaryOpen the whole page Source<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
<:subject>Stepped flow</:subject>
<:lede words={@owner} />
<:lede words="Layout example" />
<:actions><a href="../../layout-stepped-flow/#layout-stepped-flow-no-summary">{@owner}</a></:actions>
<:body>
<Kit.Phoenix.Layouts.SteppedFlow.stepped_flow id="layout-stepped-flow-no-summary-stepped-flow" subject_state={Kit.Phoenix.State.none()} progress_rest={
%{"aria-label": "Import progress"}
}>
<:progress name="File" state="done" />
<:progress name="Mapping" state="done" />
<:progress name="Preview" state="current" />
<:progress name="Result" state="upcoming" />
<:current_step id="stepped-flow-no-summary-step" rest={%{"aria-labelledby": "stepped-flow-no-summary-title"}} heading="Preview hirer import" heading_rest={%{id: "stepped-flow-no-summary-title"}}>
<Kit.Phoenix.Roles.FormGroup.form_group id="stepped-flow-no-summary-email-form-group"
kind={Kit.Phoenix.Roles.FormGroup.Kind.email()}
control_rest={%{id: "stepped-flow-no-summary-email", name: "billing-email", value: "aisha@oakmereprimary.org"}}
><:printed_value>aisha@oakmereprimary.org</:printed_value>
<:label rest={%{for: "stepped-flow-no-summary-email"}}>Billing email</:label>
</Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group id="stepped-flow-no-summary-telephone-form-group"
kind={Kit.Phoenix.Roles.FormGroup.Kind.telephone()}
control_rest={%{id: "stepped-flow-no-summary-telephone", name: "telephone", value: "01632 960 123"}}
><:printed_value>01632 960 123</:printed_value>
<:label rest={%{for: "stepped-flow-no-summary-telephone"}}>Telephone</:label>
</Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.InlineConsequence.inline_consequence region="consequence" aria-label="Import Oakmere Primary School">
<:subject>Oakmere Primary School</:subject>
<:consequence>Importing adds the hirer and starts their first agreement.</:consequence>
<:effective_time>The import runs as soon as you continue.</:effective_time>
<:correction_path>You can remove an imported hirer for 30 days after the import.</:correction_path>
</Kit.Phoenix.Roles.InlineConsequence.inline_consequence>
</:current_step>
<:back><Kit.Phoenix.Roles.WayBack.way_back href="../../form/">Back to mapping</Kit.Phoenix.Roles.WayBack.way_back></:back>
<:continue_or_commit>Import hirers</:continue_or_commit>
</Kit.Phoenix.Layouts.SteppedFlow.stepped_flow>
</:body>
</Kit.Phoenix.Layouts.Shell.shell>
Stepped flow, previewOpen the whole page Source<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
<:subject>Import hires</:subject>
<:lede words={@owner} />
<:lede words="Layout example" />
<:actions><a href="../../layout-stepped-flow/#layout-stepped-flow-preview">{@owner}</a></:actions>
<:body>
<Kit.Phoenix.Layouts.SteppedFlow.stepped_flow id="layout-stepped-flow-preview-stepped-flow" committing={true} subject_state={Kit.Phoenix.State.none()} progress_rest={%{"aria-label": "Import progress"}}>
<:progress name="File" state="done" />
<:progress name="Mapping" state="done" />
<:progress name="Preview" state="current" />
<:progress name="Result" state="upcoming" />
<:current_step id="stepped-flow-preview-step" rest={%{"aria-labelledby": "stepped-flow-preview-title"}} heading="Check 6 hires" heading_rest={%{id: "stepped-flow-preview-title"}}>
<Kit.Phoenix.Roles.FormGroup.form_group id="stepped-flow-preview-existing-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.select()} control_rest={%{id: "stepped-flow-preview-existing", name: "existing"}} control_value="keep">
<:label rest={%{for: "stepped-flow-preview-existing"}}>When a hire is already here</:label>
<:option value="keep">Keep the one here</:option>
<:option value="replace">Replace it</:option>
</Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.HeadedRegion.headed_region heading="Ready to add">
<:content>
<Kit.Phoenix.Roles.Row.row>
<:subject element="span">Oakmere WI</:subject>
<:stamp><Kit.Phoenix.Roles.Stamp.stamp state="settled">Ready</Kit.Phoenix.Roles.Stamp.stamp></:stamp>
<:facts><Kit.Phoenix.Roles.Time.time value={Kit.Phoenix.Time.interval_with_weekday(reader(), ~U[2025-05-06 18:00:00Z], ~U[2025-05-06 20:00:00Z])} /> · Main Hall</:facts>
<:actions><Kit.Phoenix.Roles.SecondaryAction.secondary_action type="button">Skip</Kit.Phoenix.Roles.SecondaryAction.secondary_action></:actions>
</Kit.Phoenix.Roles.Row.row>
<Kit.Phoenix.Roles.Row.row>
<:subject element="span">St Anne’s Scout Group</:subject>
<:stamp><Kit.Phoenix.Roles.Stamp.stamp state="settled">Ready</Kit.Phoenix.Roles.Stamp.stamp></:stamp>
<:facts><Kit.Phoenix.Roles.Time.time value={Kit.Phoenix.Time.interval_with_weekday(reader(), ~U[2025-05-07 17:00:00Z], ~U[2025-05-07 18:30:00Z])} /> · Main Hall</:facts>
<:actions><Kit.Phoenix.Roles.SecondaryAction.secondary_action type="button">Skip</Kit.Phoenix.Roles.SecondaryAction.secondary_action></:actions>
</Kit.Phoenix.Roles.Row.row>
<Kit.Phoenix.Roles.Row.row>
<:subject element="span">Garden club</:subject>
<:stamp><Kit.Phoenix.Roles.Stamp.stamp state="settled">Ready</Kit.Phoenix.Roles.Stamp.stamp></:stamp>
<:facts><Kit.Phoenix.Roles.Time.time value={Kit.Phoenix.Time.interval_with_weekday(reader(), ~U[2025-05-10 09:00:00Z], ~U[2025-05-10 11:00:00Z])} /> · Garden room</:facts>
<:actions><Kit.Phoenix.Roles.SecondaryAction.secondary_action type="button">Skip</Kit.Phoenix.Roles.SecondaryAction.secondary_action></:actions>
</Kit.Phoenix.Roles.Row.row>
</:content>
</Kit.Phoenix.Roles.HeadedRegion.headed_region>
<Kit.Phoenix.Roles.HeadedRegion.headed_region heading="Needs a decision">
<:content>
<Kit.Phoenix.Roles.Row.row>
<:subject element="span" rest={%{id: "hartford-keep"}}>Hartford Dance Studio</:subject>
<:stamp><Kit.Phoenix.Roles.Stamp.stamp state="attention">Clash</Kit.Phoenix.Roles.Stamp.stamp></:stamp>
<:facts><Kit.Phoenix.Roles.Time.time value={Kit.Phoenix.Time.interval_with_weekday(reader(), ~U[2025-05-08 16:00:00Z], ~U[2025-05-08 19:00:00Z])} /> · Main Hall</:facts>
<:choices control_rest={%{value: "keep"}} printed_value="Not chosen">Keep</:choices>
<:choices control_rest={%{value: "skip"}} printed_value="Not chosen">Skip</:choices>
</Kit.Phoenix.Roles.Row.row>
</:content>
</Kit.Phoenix.Roles.HeadedRegion.headed_region>
<Kit.Phoenix.Roles.HeadedRegion.headed_region heading="Skipped">
<:content>
<Kit.Phoenix.Roles.Row.row>
<:subject element="span">Row 5</:subject>
<:stamp><Kit.Phoenix.Roles.Stamp.stamp state="neutral">Skipped</Kit.Phoenix.Roles.Stamp.stamp></:stamp>
<:facts>No date given</:facts>
</Kit.Phoenix.Roles.Row.row>
<Kit.Phoenix.Roles.Row.row>
<:subject element="span">Row 6</:subject>
<:stamp><Kit.Phoenix.Roles.Stamp.stamp state="neutral">Skipped</Kit.Phoenix.Roles.Stamp.stamp></:stamp>
<:facts>No room called Annexe</:facts>
</Kit.Phoenix.Roles.Row.row>
</:content>
</Kit.Phoenix.Roles.HeadedRegion.headed_region>
<Kit.Phoenix.Roles.InlineConsequence.inline_consequence region="consequence" aria-label="Import 4 hires">
<:subject>hires-may.csv</:subject>
<:consequence>Importing adds 4 hires to the diary.</:consequence>
<:effective_time>The hires join the diary as soon as you import them.</:effective_time>
<:correction_path>You can undo the import from its result.</:correction_path>
</Kit.Phoenix.Roles.InlineConsequence.inline_consequence>
</:current_step>
<:summary heading="Import summary" />
<:summary_step name="File" href="../">
<Kit.Phoenix.Roles.LabelledFact.labelled_fact><:name>Uploaded</:name><:value>hires-may.csv</:value></Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact><:name>Rows</:name><:value>6</:value></Kit.Phoenix.Roles.LabelledFact.labelled_fact>
</:summary_step>
<:back><Kit.Phoenix.Roles.WayBack.way_back href="../">Back</Kit.Phoenix.Roles.WayBack.way_back></:back>
<:continue_or_commit>Import 4 hires</:continue_or_commit>
</Kit.Phoenix.Layouts.SteppedFlow.stepped_flow>
<Kit.Phoenix.Layouts.SteppedFlow.stepped_flow id="layout-stepped-flow-preview-stepped-flow-2" committing={true} subject_state={Kit.Phoenix.State.none()} progress_rest={%{"aria-label": "Import progress"}}>
<:progress name="File" state="done" />
<:progress name="Mapping" state="done" />
<:progress name="Preview" state="current" />
<:progress name="Result" state="upcoming" />
<:current_step id="stepped-flow-records-step" rest={%{"aria-labelledby": "stepped-flow-records-title"}} heading="Check 1 hire" heading_rest={%{id: "stepped-flow-records-title"}}>
<Kit.Phoenix.Roles.FormGroup.form_group id="stepped-flow-records-existing-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.select()} control_rest={%{id: "stepped-flow-records-existing", name: "existing"}} control_value="keep">
<:label rest={%{for: "stepped-flow-records-existing"}}>When a hire is already here</:label>
<:option value="keep">Keep the one here</:option>
<:option value="replace">Replace it</:option>
</Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Table.rows_table>
<:caption>Rows in hire-details.csv</:caption>
<:subject_heading label="Hire" />
<:column_headings label="When">When</:column_headings>
<:column_headings label="Room">Room</:column_headings>
<:column_headings label="Contact">Contact</:column_headings>
<:column_headings label="Outcome">Outcome</:column_headings>
<:row rest={%{id: "stepped-flow-records-hire"}} facts={[
%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Every Thursday · "), Kit.Phoenix.Words.time(Kit.Phoenix.Time.clock_interval(reader(), ~T[18:00:00], ~T[20:00:00]))])},
%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words("Garden room")},
%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words("Aisha Khan")},
%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.content(~H"""
<Kit.Phoenix.Roles.Stamp.stamp state="alert">Room unavailable</Kit.Phoenix.Roles.Stamp.stamp>
""")}
]}>Riverside community choir</:row>
</Kit.Phoenix.Table.rows_table>
<Kit.Phoenix.Roles.InlineConsequence.inline_consequence region="consequence" aria-label="Import 1 hire">
<:subject>hire-details.csv</:subject>
<:consequence>Importing adds 1 hire to the diary.</:consequence>
<:effective_time>The hire joins the diary as soon as you import it.</:effective_time>
<:correction_path>You can undo the import from its result.</:correction_path>
</Kit.Phoenix.Roles.InlineConsequence.inline_consequence>
</:current_step>
<:summary heading="Import summary" />
<:summary_step name="File" href="../">
<Kit.Phoenix.Roles.LabelledFact.labelled_fact><:name>Uploaded</:name><:value>hire-details.csv</:value></Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact><:name>Rows</:name><:value>1</:value></Kit.Phoenix.Roles.LabelledFact.labelled_fact>
</:summary_step>
<:refusal>
<Kit.Phoenix.Roles.Refusal.refusal id="stepped-flow-records-refused">
<:line>Import is refused because the room is unavailable.</:line>
<:cause href="#stepped-flow-records-hire">Riverside community choir: Garden room is unavailable.</:cause>
</Kit.Phoenix.Roles.Refusal.refusal>
</:refusal>
<:back><Kit.Phoenix.Roles.WayBack.way_back href="../">Back</Kit.Phoenix.Roles.WayBack.way_back></:back>
<:continue_or_commit>Import 1 hire</:continue_or_commit>
</Kit.Phoenix.Layouts.SteppedFlow.stepped_flow>
</:body>
</Kit.Phoenix.Layouts.Shell.shell>
Stepped flow, resultOpen the whole page Source<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
<:subject>Import hires</:subject>
<:lede words={@owner} />
<:lede words="Layout example" />
<:actions><a href="../../layout-stepped-flow/#layout-stepped-flow-result">{@owner}</a></:actions>
<:body>
<Kit.Phoenix.Layouts.SteppedFlow.stepped_flow id="layout-stepped-flow-result-stepped-flow" subject_state={Kit.Phoenix.State.none()} progress_rest={%{"aria-label": "Import progress"}}>
<:progress name="File" state="done" />
<:progress name="Mapping" state="done" />
<:progress name="Preview" state="done" />
<:progress name="Result" state="current" />
<:current_step id="stepped-flow-result-step" rest={%{"aria-labelledby": "stepped-flow-result-title"}} heading="Imported 4 hires" heading_rest={%{id: "stepped-flow-result-title"}}>
<Kit.Phoenix.Table.rows_table>
<:caption>Rows in hires-may.csv</:caption>
<:subject_heading label="Hire" />
<:column_headings label="When">When</:column_headings>
<:column_headings label="Room">Room</:column_headings>
<:column_headings label="Outcome">Outcome</:column_headings>
<:row facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.interval_with_weekday(reader(), ~U[2025-05-06 18:00:00Z], ~U[2025-05-06 20:00:00Z]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Main Hall")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.content(~H"""
<Kit.Phoenix.Roles.Stamp.stamp state="settled">Added</Kit.Phoenix.Roles.Stamp.stamp>
""")}]}>Oakmere WI</:row>
<:row facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.interval_with_weekday(reader(), ~U[2025-05-07 17:00:00Z], ~U[2025-05-07 18:30:00Z]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Main Hall")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.content(~H"""
<Kit.Phoenix.Roles.Stamp.stamp state="settled">Added</Kit.Phoenix.Roles.Stamp.stamp>
""")}]}>St Anne’s Scout Group</:row>
<:row facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.interval_with_weekday(reader(), ~U[2025-05-08 16:00:00Z], ~U[2025-05-08 19:00:00Z]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Main Hall")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.content(~H"""
<Kit.Phoenix.Roles.Stamp.stamp state="settled">Added</Kit.Phoenix.Roles.Stamp.stamp>
""")}]}>Hartford Dance Studio</:row>
<:row facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.time(Kit.Phoenix.Time.interval_with_weekday(reader(), ~U[2025-05-10 09:00:00Z], ~U[2025-05-10 11:00:00Z]))])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Garden room")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.content(~H"""
<Kit.Phoenix.Roles.Stamp.stamp state="settled">Added</Kit.Phoenix.Roles.Stamp.stamp>
""")}]}>Garden club</:row>
<:row facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("No date given")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Main Hall")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.content(~H"""
<Kit.Phoenix.Roles.Stamp.stamp state="neutral">Skipped</Kit.Phoenix.Roles.Stamp.stamp>
""")}]}>Row 5</:row>
<:row facts={[%Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("No room called Annexe")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.words([Kit.Phoenix.Words.text("Annexe")])}, %Kit.Phoenix.Table.FactCell{content: Kit.Phoenix.Table.Fact.content(~H"""
<Kit.Phoenix.Roles.Stamp.stamp state="neutral">Skipped</Kit.Phoenix.Roles.Stamp.stamp>
""")}]}>Row 6</:row>
</Kit.Phoenix.Table.rows_table>
<Kit.Phoenix.Roles.ActionGroup.action_group>
<:secondary><Kit.Phoenix.Roles.SecondaryAction.secondary_action type="button">Undo the import</Kit.Phoenix.Roles.SecondaryAction.secondary_action></:secondary>
<:return><Kit.Phoenix.Roles.WayBack.way_back href="../../list/">Back to hires</Kit.Phoenix.Roles.WayBack.way_back></:return>
</Kit.Phoenix.Roles.ActionGroup.action_group>
</:current_step>
<:summary heading="Import summary" />
<:summary_step name="File" href="../">
<Kit.Phoenix.Roles.LabelledFact.labelled_fact><:name>Uploaded</:name><:value>hires-may.csv</:value></Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact><:name>Rows</:name><:value>6</:value></Kit.Phoenix.Roles.LabelledFact.labelled_fact>
</:summary_step>
</Kit.Phoenix.Layouts.SteppedFlow.stepped_flow>
</:body>
</Kit.Phoenix.Layouts.Shell.shell>
Stepped flow, refused-undoOpen the whole page Source<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
<:subject>Stepped flow</:subject>
<:lede words={@owner} />
<:lede words="Layout example" />
<:actions><a href="../../layout-stepped-flow/#layout-stepped-flow-refused-undo">{@owner}</a></:actions>
<:body>
<Kit.Phoenix.Layouts.SteppedFlow.stepped_flow id="layout-stepped-flow-refused-undo-stepped-flow" committing={true} subject_state={Kit.Phoenix.State.none()} progress_rest={
%{"aria-label": "Import progress"}
}>
<:page_refusal>
<Kit.Phoenix.Roles.Refusal.refusal id="stepped-flow-undo-refused-1">
<:line>Undo is refused: row 4 is no longer in the file you uploaded.</:line>
</Kit.Phoenix.Roles.Refusal.refusal>
</:page_refusal>
<:progress name="File" state="done" />
<:progress name="Mapping" state="done" />
<:progress name="Preview" state="current" />
<:progress name="Result" state="upcoming" />
<:current_step id="preview-step" rest={%{"aria-labelledby": "preview-title"}} heading="Preview hirer import" heading_rest={%{id: "preview-title"}}>
<Kit.Phoenix.Roles.FormGroup.form_group id="preview-billing-email-form-group"
kind={Kit.Phoenix.Roles.FormGroup.Kind.email()}
control_rest={%{id: "preview-billing-email", name: "billing-email", value: "aisha@oakmereprimary.org"}}
><:printed_value>aisha@oakmereprimary.org</:printed_value>
<:label rest={%{for: "preview-billing-email"}}>Billing email</:label>
</Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group id="preview-telephone-form-group"
kind={Kit.Phoenix.Roles.FormGroup.Kind.telephone()}
control_rest={%{id: "preview-telephone", name: "telephone", value: "01632 960 123"}}
><:printed_value>01632 960 123</:printed_value>
<:label rest={%{for: "preview-telephone"}}>Telephone</:label>
</Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.Row.row>
<:subject>Oakmere Primary School</:subject>
<:facts><Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.named(reader(), Decimal.new("40"), "rows", 0)} /> ready · Row 17 needs a decision</:facts>
</Kit.Phoenix.Roles.Row.row>
<Kit.Phoenix.Roles.InlineConsequence.inline_consequence region="consequence" aria-label="Import Oakmere Primary School">
<:subject>Oakmere Primary School</:subject>
<:consequence>Importing adds the hirer and starts their first agreement.</:consequence>
<:effective_time>The import runs as soon as you continue.</:effective_time>
<:correction_path>You can remove an imported hirer for 30 days after the import.</:correction_path>
</Kit.Phoenix.Roles.InlineConsequence.inline_consequence>
</:current_step>
<:summary heading="Import summary" />
<:summary_step name="File" href="../../form/">
<Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<:name>Uploaded</:name><:value>hirers-2025-05-12.csv, <Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.named(reader(), Decimal.new("42"), "rows", 0)} /> found</:value>
</Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<:name>Ready to import</:name><:value><Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.named(reader(), Decimal.new("40"), "rows", 0)} /></:value>
</Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<:name>Matched to hirers you have</:name><:value><Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.named(reader(), Decimal.new("2"), "rows", 0)} /></:value>
</Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact id="summary-row-17">
<:name>Row 17, Riverside Scouts</:name><:value>Matches two hirers: Riverside Scouts and Riverside Scout Group</:value>
</Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<:name>Last import</:name><:value><Kit.Phoenix.Roles.Time.time value={Kit.Phoenix.Time.day(reader(), ~D[2025-02-12])} />, <Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.named(reader(), Decimal.new("38"), "hirers", 0)} /></:value>
</Kit.Phoenix.Roles.LabelledFact.labelled_fact>
</:summary_step>
<:summary_step name="Mapping" href="../../form/">
<Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<:name>Columns</:name><:value>All 9 columns matched to your fields</:value>
</Kit.Phoenix.Roles.LabelledFact.labelled_fact>
</:summary_step>
<:refusal>
<Kit.Phoenix.Roles.Refusal.refusal id="preview-refused">
<:line>Import is refused while row 17 matches more than one hirer:</:line>
<:cause href="#summary-row-17">Row 17, Riverside Scouts</:cause>
</Kit.Phoenix.Roles.Refusal.refusal>
</:refusal>
<:back><Kit.Phoenix.Roles.WayBack.way_back href="../../form/">Back to mapping</Kit.Phoenix.Roles.WayBack.way_back></:back>
<:continue_or_commit>Import hirers</:continue_or_commit>
</Kit.Phoenix.Layouts.SteppedFlow.stepped_flow>
</:body>
</Kit.Phoenix.Layouts.Shell.shell>
Stepped flow, unsavedOpen the whole page Source<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
<:subject>Stepped flow</:subject>
<:lede words={@owner} />
<:lede words="Layout example" />
<:actions><a href="../../layout-stepped-flow/#layout-stepped-flow-unsaved">{@owner}</a></:actions>
<:body>
<Kit.Phoenix.Layouts.SteppedFlow.stepped_flow id="layout-stepped-flow-unsaved-stepped-flow" subject_state={Kit.Phoenix.State.unsaved(:attention, "Not saved")} progress_rest={
%{"aria-label": "Import progress"}
}>
<:progress name="File" state="done" />
<:progress name="Mapping" state="current" />
<:progress name="Preview" state="upcoming" />
<:progress name="Result" state="upcoming" />
<:current_step id="stepped-flow-unsaved-step" keep={%Kit.Phoenix.Keep{key: "aisha-khan/import/hirers/mapping", version: "2"}} rest={%{"aria-labelledby": "stepped-flow-unsaved-title"}} heading="Match the columns" heading_rest={%{id: "stepped-flow-unsaved-title"}}>
<Kit.Phoenix.Roles.FormGroup.form_group id="stepped-flow-unsaved-name-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:wide)}
control_rest={%{id: "stepped-flow-unsaved-name", name: "name-column", value: "School name"}}
><:printed_value>School name</:printed_value>
<:label rest={%{for: "stepped-flow-unsaved-name"}}>Column holding the hirer's name</:label>
</Kit.Phoenix.Roles.FormGroup.form_group>
<Kit.Phoenix.Roles.FormGroup.form_group id="stepped-flow-unsaved-email-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:wide)}
control_rest={%{id: "stepped-flow-unsaved-email", name: "email-column", value: "Office email"}}
><:printed_value>Office email</:printed_value>
<:label rest={%{for: "stepped-flow-unsaved-email"}}>Column holding the billing email</:label>
</Kit.Phoenix.Roles.FormGroup.form_group>
</:current_step>
<:back><Kit.Phoenix.Roles.WayBack.way_back href="../../stepped-flow/">Back to file</Kit.Phoenix.Roles.WayBack.way_back></:back>
<:continue_or_commit>Continue to preview</:continue_or_commit>
</Kit.Phoenix.Layouts.SteppedFlow.stepped_flow>
</:body>
</Kit.Phoenix.Layouts.Shell.shell>
Stepped flow, signedOpen the whole page Source<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
<:subject>Stepped flow</:subject>
<:lede words={@owner} />
<:lede words="Layout example" />
<:actions><a href="../../layout-stepped-flow/#layout-stepped-flow-signed">{@owner}</a></:actions>
<:body>
<Kit.Phoenix.Layouts.SteppedFlow.stepped_flow id="layout-stepped-flow-signed-stepped-flow" committing={true} subject_state={Kit.Phoenix.State.none()} progress_rest={
%{"aria-label": "Booking progress"}
}>
<:progress name="Hall" state="done" />
<:progress name="Your details" state="done" />
<:progress name="Check and book" state="current" />
<:current_step id="stepped-flow-signed-step" rest={%{"aria-labelledby": "stepped-flow-signed-title"}} heading="Check your booking" heading_rest={%{id: "stepped-flow-signed-title"}}>
<Kit.Phoenix.Roles.Row.row>
<:subject>Main hall</:subject>
<:facts><Kit.Phoenix.Roles.Time.time value={Kit.Phoenix.Time.interval_with_weekday(reader(), ~U[2025-06-14 09:00:00Z], ~U[2025-06-14 15:00:00Z])} /> · <Kit.Phoenix.Roles.Amount.amount value={Kit.Phoenix.Amount.money(reader(), Money.new(:GBP, "84.00"))} /></:facts>
</Kit.Phoenix.Roles.Row.row>
</:current_step>
<:summary heading="Booking summary" />
<:summary_step name="Hall" href="../../form/">
<Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<:name>Hall</:name><:value>Main hall, up to 120 people</:value>
</Kit.Phoenix.Roles.LabelledFact.labelled_fact>
</:summary_step>
<:summary_step name="Your details" href="../../form/">
<Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<:name>Hirer</:name><:value>Aisha Khan, Oakmere Primary School</:value>
</Kit.Phoenix.Roles.LabelledFact.labelled_fact>
</:summary_step>
<:agreement>By booking, you agree to the <a href="../../role-agreement/#role-agreement-terms">hire terms</a>.</:agreement>
<:signature>
<Kit.Phoenix.Roles.FormGroup.form_group id="stepped-flow-signed-signature-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.text(:medium)}
control_rest={%{id: "stepped-flow-signed-signature", name: "signature", autocomplete: "name", form: "stepped-flow-signed-step"}}
><:printed_value>Not signed</:printed_value>
<:label rest={%{for: "stepped-flow-signed-signature"}}>Your full name, to sign</:label>
</Kit.Phoenix.Roles.FormGroup.form_group>
</:signature>
<:back><Kit.Phoenix.Roles.WayBack.way_back href="../../form/">Back to your details</Kit.Phoenix.Roles.WayBack.way_back></:back>
<:continue_or_commit>Book hall</:continue_or_commit>
</Kit.Phoenix.Layouts.SteppedFlow.stepped_flow>
</:body>
</Kit.Phoenix.Layouts.Shell.shell>
Stepped flow, inertOpen the whole page Source<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
<:subject>Stepped flow</:subject>
<:lede words={@owner} />
<:lede words="Layout example" />
<:actions><a href="../../layout-stepped-flow/#layout-stepped-flow-inert">{@owner}</a></:actions>
<:body>
<Kit.Phoenix.Layouts.SteppedFlow.stepped_flow id="layout-stepped-flow-inert-stepped-flow" subject_state={Kit.Phoenix.State.none()} progress_rest={%{"aria-label": "Import progress"}}>
<:progress name="File" state="done" />
<:progress name="Mapping" state="current" />
<:progress name="Preview" state="upcoming" />
<:current_step id="flow-inert-mapping" rest={%{"aria-labelledby": "flow-inert-mapping-title"}} heading="Match the columns" heading_rest={%{id: "flow-inert-mapping-title"}}>
<Kit.Phoenix.Roles.FormGroup.form_group id="flow-inert-column-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.select()} control_rest={%{id: "flow-inert-column", name: "column"}}>
<:label rest={%{for: "flow-inert-column"}}>Billing email column</:label>
<:option value="">Choose a column</:option>
<:option value="email">Email</:option>
<:printed_value>No column chosen</:printed_value>
</Kit.Phoenix.Roles.FormGroup.form_group>
</:current_step>
<:back><Kit.Phoenix.Roles.WayBack.way_back href="../../form/">Back to file</Kit.Phoenix.Roles.WayBack.way_back></:back>
<:continue_or_commit state={Kit.Phoenix.ActionState.inert("flow-inert-continue", "Choose the billing email column before continuing.")}>Continue</:continue_or_commit>
</Kit.Phoenix.Layouts.SteppedFlow.stepped_flow>
<p class="specimen-case-line">A commit that waits.</p>
<Kit.Phoenix.Layouts.SteppedFlow.stepped_flow id="layout-stepped-flow-inert-stepped-flow-2" subject_state={Kit.Phoenix.State.none()} progress_rest={%{"aria-label": "Import progress"}}>
<:progress name="Mapping" state="done" />
<:progress name="Preview" state="current" />
<:current_step id="flow-inert-preview" rest={%{"aria-labelledby": "flow-inert-preview-title"}} heading="Preview hirer import" heading_rest={%{id: "flow-inert-preview-title"}}>
<Kit.Phoenix.Roles.InlineConsequence.inline_consequence region="consequence" aria-label="Import Oakmere Primary School">
<:subject>Oakmere Primary School</:subject>
<:consequence>Importing adds the hirer and starts their first agreement.</:consequence>
<:effective_time>The import runs as soon as you continue.</:effective_time>
<:correction_path>You can remove an imported hirer for 30 days after the import.</:correction_path>
</Kit.Phoenix.Roles.InlineConsequence.inline_consequence>
</:current_step>
<:back><Kit.Phoenix.Roles.WayBack.way_back href="../../form/">Back to mapping</Kit.Phoenix.Roles.WayBack.way_back></:back>
<:continue_or_commit state={Kit.Phoenix.ActionState.inert("flow-inert-import", "Resolve the matching hirers before importing.")}>Import hirers</:continue_or_commit>
</Kit.Phoenix.Layouts.SteppedFlow.stepped_flow>
<p class="specimen-case-line">A destructive commit that waits.</p>
<Kit.Phoenix.Layouts.SteppedFlow.stepped_flow id="layout-stepped-flow-inert-stepped-flow-3" subject_state={Kit.Phoenix.State.none()} progress_rest={%{"aria-label": "Deletion progress"}}>
<:progress name="Choose" state="done" />
<:progress name="Confirm" state="current" />
<:current_step id="flow-inert-delete" rest={%{"aria-labelledby": "flow-inert-delete-title"}} heading="Delete a hirer" heading_rest={%{id: "flow-inert-delete-title"}}>
<Kit.Phoenix.Roles.InlineConsequence.inline_consequence region="consequence" aria-label="Delete Riverside Scouts">
<:subject>Riverside Scouts</:subject>
<:consequence>Deleting Riverside Scouts removes their bookings and invoices, and cannot be undone.</:consequence>
<:effective_time>Takes effect as soon as you confirm.</:effective_time>
<:correction_path></:correction_path>
</Kit.Phoenix.Roles.InlineConsequence.inline_consequence>
</:current_step>
<:back><Kit.Phoenix.Roles.WayBack.way_back href="../../form/">Back to hirers</Kit.Phoenix.Roles.WayBack.way_back></:back>
<:destructive_action icon="trash" state={Kit.Phoenix.ActionState.inert("flow-inert-destructive", "The hirer can be deleted once their last booking is over.")}>Delete the hirer</:destructive_action>
</Kit.Phoenix.Layouts.SteppedFlow.stepped_flow>
</:body>
</Kit.Phoenix.Layouts.Shell.shell>
Stepped flow, middle-stepOpen the whole page Source<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
<:subject>Stepped flow</:subject>
<:lede words={@owner} />
<:lede words="Layout example" />
<:actions><a href="../../layout-stepped-flow/#layout-stepped-flow-middle-step">{@owner}</a></:actions>
<:body>
<Kit.Phoenix.Layouts.SteppedFlow.stepped_flow id="layout-stepped-flow-middle-step-stepped-flow" subject_state={Kit.Phoenix.State.none()} progress_rest={%{"aria-label": "Request progress"}}>
<:progress name="Details" state="done" />
<:progress name="Place" state="done" />
<:progress name="Schedule" state="done" />
<:progress name="Attendance" state="done" />
<:progress name="Access" state="current" />
<:progress name="Review" state="upcoming" />
<:current_step id="middle-step" rest={%{"aria-labelledby": "middle-step-title"}} heading="Choose room access" heading_rest={%{id: "middle-step-title"}}>
<Kit.Phoenix.Roles.FormGroup.form_group id="middle-step-access-form-group" kind={Kit.Phoenix.Roles.FormGroup.Kind.select()} control_rest={%{id: "middle-step-access", name: "access"}} control_value="step-free">
<:label rest={%{for: "middle-step-access"}}>Entrance</:label>
<:option value="step-free">Step-free entrance</:option>
<:option value="front">Front entrance</:option>
<:printed_value>Step-free entrance</:printed_value>
</Kit.Phoenix.Roles.FormGroup.form_group>
</:current_step>
<:summary heading="Request summary" />
<:summary_step name="Details" href="../../form/">
<Kit.Phoenix.Roles.LabelledFact.labelled_fact><:name>Name</:name><:value>Aisha Khan</:value></Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact><:name>Email</:name><:value>aisha@example.org</:value></Kit.Phoenix.Roles.LabelledFact.labelled_fact>
</:summary_step>
<:summary_step name="Place" href="../../form/">
<Kit.Phoenix.Roles.LabelledFact.labelled_fact><:name>Room</:name><:value>Main hall</:value></Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact><:name>Capacity</:name><:value>Up to 120 people</:value></Kit.Phoenix.Roles.LabelledFact.labelled_fact>
</:summary_step>
<:summary_step name="Schedule" href="../../form/">
<Kit.Phoenix.Roles.LabelledFact.labelled_fact><:name>Day</:name><:value>Thursday mornings</:value></Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact><:name>Frequency</:name><:value>Every week</:value></Kit.Phoenix.Roles.LabelledFact.labelled_fact>
</:summary_step>
<:summary_step name="Attendance" href="../../form/">
<Kit.Phoenix.Roles.LabelledFact.labelled_fact><:name>People</:name><:value>24</:value></Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact><:name>Seating</:name><:value>Chairs in a circle</:value></Kit.Phoenix.Roles.LabelledFact.labelled_fact>
</:summary_step>
<:back><Kit.Phoenix.Roles.WayBack.way_back href="../../form/">Back</Kit.Phoenix.Roles.WayBack.way_back></:back>
<:continue_or_commit>Continue</:continue_or_commit>
</Kit.Phoenix.Layouts.SteppedFlow.stepped_flow>
</:body>
</Kit.Phoenix.Layouts.Shell.shell>
Stepped flow, review-stepOpen the whole page Source<Kit.Phoenix.Layouts.Shell.shell print_identity={@print.identity} print_subject={@print.subject} print_standing={@print.standing} print_tenant={@print.tenant} product="kit" navigation_label="Application" navigation="none" density="desk">
<:subject>Stepped flow</:subject>
<:lede words={@owner} />
<:lede words="Layout example" />
<:actions><a href="../../layout-stepped-flow/#layout-stepped-flow-review-step">{@owner}</a></:actions>
<:body>
<Kit.Phoenix.Layouts.SteppedFlow.stepped_flow id="layout-stepped-flow-review-step-stepped-flow" subject_state={Kit.Phoenix.State.none()} progress_rest={%{"aria-label": "Request progress"}}>
<:progress name="Details" state="done" />
<:progress name="Place" state="done" />
<:progress name="Schedule" state="done" />
<:progress name="Attendance" state="done" />
<:progress name="Access" state="done" />
<:progress name="Review" state="current" />
<:current_step id="review-step" rest={%{"aria-labelledby": "review-step-title"}} heading="Check your request" heading_rest={%{id: "review-step-title"}}>
<Kit.Phoenix.Roles.HeadedRegion.headed_region heading="Details">
<:content><Kit.Phoenix.Roles.FactGroup.fact_group>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact><:name>Name</:name><:value>Aisha Khan</:value></Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact><:name>Email</:name><:value>aisha@example.org</:value></Kit.Phoenix.Roles.LabelledFact.labelled_fact>
</Kit.Phoenix.Roles.FactGroup.fact_group><a href="../../form/" aria-label="Change Details">Change</a></:content>
</Kit.Phoenix.Roles.HeadedRegion.headed_region>
<Kit.Phoenix.Roles.HeadedRegion.headed_region heading="Place">
<:content><Kit.Phoenix.Roles.FactGroup.fact_group>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact><:name>Room</:name><:value>Main hall</:value></Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact><:name>Capacity</:name><:value>Up to 120 people</:value></Kit.Phoenix.Roles.LabelledFact.labelled_fact>
</Kit.Phoenix.Roles.FactGroup.fact_group><a href="../../form/" aria-label="Change Place">Change</a></:content>
</Kit.Phoenix.Roles.HeadedRegion.headed_region>
<Kit.Phoenix.Roles.HeadedRegion.headed_region heading="Schedule">
<:content><Kit.Phoenix.Roles.FactGroup.fact_group>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact><:name>Day</:name><:value>Thursday mornings</:value></Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact><:name>Frequency</:name><:value>Every week</:value></Kit.Phoenix.Roles.LabelledFact.labelled_fact>
</Kit.Phoenix.Roles.FactGroup.fact_group><a href="../../form/" aria-label="Change Schedule">Change</a></:content>
</Kit.Phoenix.Roles.HeadedRegion.headed_region>
<Kit.Phoenix.Roles.HeadedRegion.headed_region heading="Attendance">
<:content><Kit.Phoenix.Roles.FactGroup.fact_group>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact><:name>People</:name><:value>24</:value></Kit.Phoenix.Roles.LabelledFact.labelled_fact>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact><:name>Seating</:name><:value>Chairs in a circle</:value></Kit.Phoenix.Roles.LabelledFact.labelled_fact>
</Kit.Phoenix.Roles.FactGroup.fact_group><a href="../../form/" aria-label="Change Attendance">Change</a></:content>
</Kit.Phoenix.Roles.HeadedRegion.headed_region>
<Kit.Phoenix.Roles.HeadedRegion.headed_region heading="Access">
<:content><Kit.Phoenix.Roles.FactGroup.fact_group>
<Kit.Phoenix.Roles.LabelledFact.labelled_fact><:name>Entrance</:name><:value>Step-free entrance</:value></Kit.Phoenix.Roles.LabelledFact.labelled_fact>
</Kit.Phoenix.Roles.FactGroup.fact_group><a href="../../form/" aria-label="Change Access">Change</a></:content>
</Kit.Phoenix.Roles.HeadedRegion.headed_region>
</:current_step>
<:refusal><Kit.Phoenix.Roles.Refusal.refusal id="review-step-refusal"><:line>Save is refused: the main hall is no longer available.</:line><:cause href="../../form/">Choose another place</:cause></Kit.Phoenix.Roles.Refusal.refusal></:refusal>
<:back><Kit.Phoenix.Roles.WayBack.way_back href="../../form/">Back</Kit.Phoenix.Roles.WayBack.way_back></:back>
<:continue_or_commit>Save request</:continue_or_commit>
</Kit.Phoenix.Layouts.SteppedFlow.stepped_flow>
</:body>
</Kit.Phoenix.Layouts.Shell.shell>
|