phx_live_storybook v0.4.5

View Source PhxLiveStorybook.Stories.Variation (phx_live_storybook v0.4.5)

A variation captures the rendered state of a UI component. Developers write multiple variations per component that describe all the “interesting” states a component can support.

Each variation will be displayed in the storybook as a code snippet alongside with the component preview.

Variations attributes type are checked against their matching attribute (if any) and will raise a compilation an error in case of mismatch.

Advanced component & variation documentation is available in the components guide.

usage

 Usage 

  def variations do
    [
      %Variation{
        id: :default,
        description: "Default dropdown",
        attributes: %{
          label: "A dropdown",
        },
        slots: [
          ~s|<:entry path="#" label="Account settings"/>|,
          ~s|<:entry path="#" label="Support"/>|,
          ~s|<:entry path="#" label="License"/>|
        ]
      }
    ]
  end

Link to this section Summary

Types

t()

Link to this section Types

Link to this type

t()

View Source 
@type t() :: %PhxLiveStorybook.Stories.Variation{
  attributes: map(),
  description: String.t() | nil,
  id: atom(),
  let: atom() | nil,
  slots: [String.t()],
  template: :unset | String.t() | nil | false
}