Lookbook Demo

Previews

No matching results.

Pages

No matching results.

Annotating preview files

Lookbook extends the standard ViewComponent preview classes using Yard-style comment annotations in the source code.

Head over to the Lookbook site to find out more about previews and tags →

Example preview file

# @label Basic Button
# @display bg_color "#fff"
class ButtonComponentPreview < ViewComponent::Preview
  # Primary button
  # ---------------
  # This is the button style you should use for most things.
  #
  # @label Primary
  def default
    render ButtonComponent.new do
      "Click me"
    end
  end
  # Button with icon
  # ----------------
  # This example uses dynamic preview parameters
  # which can be edited live in the Lookbook UI
  #
  # @param text
  # @param icon select [heart, cog, alert]
  def icon(text: "Spread the love", icon: "heart")
    render ButtonComponent.new(icon: icon) do
      text
    end
  end
  # Inverted button
  # ---------------
  # For light-on-dark screens
  #
  # @display bg_color "#000"
  def secondary
    render ButtonComponent.new(style: :inverted) do
      "Click me"
    end
  end
  # Unicorn button
  # ---------------
  # This button style is still a **work in progress**
  # and so has been hidden from the navigation.
  #
  # @hidden
  def unicorn
    render ButtonComponent.new do
      "Click me"
    end
  end
  # @!group More examples
  def short_text
    render ButtonComponent.new do
      "Go"
    end
  end
  def long_text
    render ButtonComponent.new do
      "Click here to do this thing because it's the best way to do it"
    end
  end
  def emoji_text
    render ButtonComponent.new do
      "👀📗"
    end
  end
  # @!endgroup
end