Doggo Storybook 0.9.0

Storybook
- Introduction
- Buttons
- Data
- Feedback
- Form
- Layout
- Media
- Menu
- Miscellaneous
- Navigation

Steps

Renders a navigation for form steps.

Usage

With patch navigation:

<.steps current_step={0}>
  <: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}>
  <: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 current_step={1}>
  <:step>Profile</:step>
  <:step>Delivery</:step>
  <:step>Confirmation</:step>
</.steps>

Non linear Open in playground

<.steps 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 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>