Doggo Storybook 0.17.0

Steps

Renders a navigation for form steps.

Usage

Completed steps get accessibility text marked with the data-visually-hidden attribute, which needs a CSS rule. See Visually hidden text.

With patch navigation:

<.steps current_step={0} label="Order process">
  <:step on_click={JS.patch(to: ~p"/form/step/personal-information")}>
    Profile
  </:step>
  <:step on_click={JS.patch(to: ~p"/form/step/delivery")}>
    Delivery
  </:step>
  <:step on_click={JS.patch(to: ~p"/form/step/confirmation")}>
    Confirmation
  </:step>
</.steps>

With push events:

<.steps current_step={0} label="Order process">
  <:step on_click={JS.push("go-to-step", value: %{step: "profile"})}>
    Profile
  </:step>
  <:step on_click={JS.push("go-to-step", value: %{step: "delivery"})}>
    Delivery
  </:step>
  <:step on_click={JS.push("go-to-step", value: %{step: "confirmation"})}>
    Confirmation
  </:step>
</.steps>

Without links

Open in playground

<.steps label="Order process" current_step={1}>
  <:step>Profile</:step>
  <:step>Delivery</:step>
  <:step>Confirmation</:step>
</.steps>

Non linear

Open in playground

<.steps label="Order process" current_step={1}>
  <:step on_click={Phoenix.LiveView.JS.push("go-to-step", value: %{step: "profile"})}>
    Profile
  </:step>
  <:step on_click={Phoenix.LiveView.JS.push("go-to-step", value: %{step: "delivery"})}>
    Delivery
  </:step>
  <:step on_click={Phoenix.LiveView.JS.push("go-to-step", value: %{step: "confirmation"})}>
    Confirmation
  </:step>
</.steps>

Linear

Open in playground

<.steps label="Order process" current_step={1} linear>
  <:step on_click={Phoenix.LiveView.JS.push("go-to-step", value: %{step: "profile"})}>
    Profile
  </:step>
  <:step on_click={Phoenix.LiveView.JS.push("go-to-step", value: %{step: "delivery"})}>
    Delivery
  </:step>
  <:step on_click={Phoenix.LiveView.JS.push("go-to-step", value: %{step: "confirmation"})}>
    Confirmation
  </:step>
</.steps>