Add docs to ButtonComponent

demo/app/previews/button_component_preview.rb

@@ -1,70 +1,164 @@
 class ButtonComponentPreview < ViewComponent::Preview
+  # Button Component
+  # ------------
+  # Buttons are used primarily for actions, such as “Add”, “Close”, “Cancel”, or “Save”.
+  # Plain buttons, which look similar to links, are used for less important or less commonly used actions,
+  # such as “view shipping settings”.
+  #
+  # @param outline toggle "Gives the button a subtle alternative to the default button styling, appropriate for certain backdrops"
+  # @param plain toggle "Renders a button that looks like a link"
+  # @param primary toggle "Provides extra visual weight and identifies the primary action in a set of buttons"
+  # @param pressed toggle "Sets the button in a pressed state"
+  # @param monochrome toggle "Makes `plain` and `outline` Button colors (text, borders, icons) the same as the current text color. Also adds an underline to `plain` Buttons."
+  # @param loading toggle "Replaces button text with a spinner while a background action is being performed"
+  # @param destructive toggle "Indicates a dangerous or potentially negative action"
+  # @param disabled toggle "Disables the button, disallowing merchant interaction"
+  # @param disable_with_loader toggle "Disables the button and shows loading spinner on click"
+  # @param disclosure select "Displays the button with a disclosure icon" {{Polaris::ButtonComponent::DISCLOSURE_OPTIONS}}
+  # @param url text "Button acts as link"
+  # @param external toggle "Forces url to open in a new tab"
+  # @param full_width toggle "Allows the button to grow to the width of its container"
+  # @param submit toggle "Allows the button to submit a form"
+  # @param remove_underline toggle "Removes underline from button text (including on interaction) when `monochrome` and `plain` are true"
+  # @param size select "Size of button" {{Polaris::ButtonComponent::SIZE_MAPPINGS.keys}}
+  # @param text_align select "Position of text" {{Polaris::ButtonComponent::TEXT_ALIGN_MAPPINGS.keys}}
+  # @param icon_name text "Adds icon to the button"
+  def default(
+    outline: false,
+    plain: false,
+    primary: false,
+    pressed: false,
+    monochrome: false,
+    loading: false,
+    destructive: false,
+    disabled: false,
+    disable_with_loader: false,
+    disclosure: Polaris::ButtonComponent::DISCLOSURE_DEFAULT,
+    url: nil,
+    external: false,
+    full_width: false,
+    submit: false,
+    remove_underline: false,
+    size: Polaris::ButtonComponent::SIZE_DEFAULT,
+    text_align: Polaris::ButtonComponent::TEXT_ALIGN_DEFAULT,
+    icon_name: "CirclePlusMinor"
+  )
+    render_with_locals(binding)
+  end
+
   def basic
   end
 
-  def outline
+  # @param outline toggle "Gives the button a subtle alternative to the default button styling, appropriate for certain backdrops"
+  def outline(outline: true)
+    render_with_locals(binding)
   end
 
-  def outline_monochrome
+  # @param outline toggle "Gives the button a subtle alternative to the default button styling, appropriate for certain backdrops"
+  # @param monochrome toggle "Makes `plain` and `outline` Button colors (text, borders, icons) the same as the current text color. Also adds an underline to `plain` Buttons."
+  def outline_monochrome(outline: true, monochrome: true)
+    render_with_locals(binding)
   end
 
-  def plain
+  # @param plain toggle "Renders a button that looks like a link"
+  def plain(plain: true)
+    render_with_locals(binding)
   end
 
-  def plain_monochrome
+  # @param plain toggle "Renders a button that looks like a link"
+  # @param monochrome toggle "Makes `plain` and `outline` Button colors (text, borders, icons) the same as the current text color. Also adds an underline to `plain` Buttons."
+  def plain_monochrome(plain: true, monochrome: true)
+    render_with_locals(binding)
   end
 
-  def plain_monochrome_no_underline
+  # @param plain toggle "Renders a button that looks like a link"
+  # @param monochrome toggle "Makes `plain` and `outline` Button colors (text, borders, icons) the same as the current text color. Also adds an underline to `plain` Buttons."
+  # @param remove_underline toggle "Removes underline from button text (including on interaction) when `monochrome` and `plain` are true"
+  def plain_monochrome_no_underline(plain: true, monochrome: true, remove_underline: true)
+    render_with_locals(binding)
   end
 
-  def plain_destructive
+  # @param plain toggle "Renders a button that looks like a link"
+  # @param destructive toggle "Indicates a dangerous or potentially negative action"
+  def plain_destructive(plain: true, destructive: true)
+    render_with_locals(binding)
   end
 
-  def primary
+  # @param primary toggle "Provides extra visual weight and identifies the primary action in a set of buttons"
+  def primary(primary: true)
+    render_with_locals(binding)
   end
 
-  def destructive
+  # @param destructive toggle "Indicates a dangerous or potentially negative action"
+  def destructive(destructive: true)
+    render_with_locals(binding)
   end
 
-  def slim
+  # @param size select "Size of button" {{Polaris::ButtonComponent::SIZE_MAPPINGS.keys}}
+  def slim(size: :slim)
+    render_with_locals(binding)
   end
 
-  def large
+  # @param size select "Size of button" {{Polaris::ButtonComponent::SIZE_MAPPINGS.keys}}
+  def large(size: :large)
+    render_with_locals(binding)
   end
 
-  def full_width
+  # @param full_width toggle "Allows the button to grow to the width of its container"
+  def full_width(full_width: true)
+    render_with_locals(binding)
   end
 
-  def text_aligned
+  # @param plain toggle "Renders a button that looks like a link"
+  # @param text_align select "Position of text" {{Polaris::ButtonComponent::TEXT_ALIGN_MAPPINGS.keys}}
+  def text_aligned(plain: true, text_align: :left)
+    render_with_locals(binding)
   end
 
-  def pressed
+  # @param pressed toggle "Sets the button in a pressed state"
+  def pressed(pressed: true)
+    render_with_locals(binding)
   end
 
-  def disclosure
+  # @param disclosure select "Displays the button with a disclosure icon" {{Polaris::ButtonComponent::DISCLOSURE_OPTIONS}}
+  def disclosure(disclosure: :up)
+    render_with_locals(binding)
   end
 
-  def disabled
+  # @param disabled toggle "Disables the button, disallowing merchant interaction"
+  def disabled(disabled: true)
+    render_with_locals(binding)
   end
 
   def disable_with_actions
   end
 
-  def disable_with_loader
+  # @param disable_with_loader toggle "Disables the button and shows loading spinner on click"
+  def disable_with_loader(disable_with_loader: true)
+    render_with_locals(binding)
   end
 
-  def loading
+  # @param loading toggle "Replaces button text with a spinner while a background action is being performed"
+  def loading(loading: true)
+    render_with_locals(binding)
   end
 
   def text_with_icon
   end
 
-  def icon_only
+  # @param url text "Button acts as link"
+  def icon_only(url: "https://shopify.com")
+    render_with_locals(binding)
   end
 
-  def with_icon_name
+  # @param icon_name text "Adds icon to the button"
+  def with_icon_name(icon_name: "CirclePlusMajor")
+    render_with_locals(binding)
   end
 
-  def external
+  # @param url text "Button acts as link"
+  # @param external toggle "Forces url to open in a new tab"
+  def external(url: "https://shopify.dev", external: true)
+    render_with_locals(binding)
   end
 end

demo/app/previews/button_component_preview/default.html.erb

@@ -0,0 +1,20 @@
+<%= polaris_button(
+  url: url,
+  outline: outline,
+  plain: plain,
+  primary: primary,
+  pressed: pressed,
+  monochrome: monochrome,
+  loading: loading,
+  destructive: destructive,
+  disabled: disabled,
+  disable_with_loader: disable_with_loader,
+  disclosure: disclosure,
+  external: external,
+  full_width: full_width,
+  submit: submit,
+  remove_underline: remove_underline,
+  size: size,
+  text_align: text_align,
+  icon_name: icon_name
+) { "Add product" } %>

demo/app/previews/button_component_preview/destructive.html.erb

@@ -1 +1 @@
-<%= polaris_button(destructive: true) { "Delete theme" } %>
+<%= polaris_button(destructive: destructive) { "Delete theme" } %>

demo/app/previews/button_component_preview/disable_with_loader.html.erb

@@ -1 +1 @@
-<%= polaris_button(disable_with_loader: true) { "Disable on click" } %>
+<%= polaris_button(disable_with_loader: disable_with_loader) { "Disable on click" } %>

demo/app/previews/button_component_preview/disabled.html.erb

@@ -1 +1 @@
-<%= polaris_button(disabled: true) { "Buy shipping label" } %>
+<%= polaris_button(disabled: disabled) { "Buy shipping label" } %>

demo/app/previews/button_component_preview/disclosure.html.erb

@@ -1,7 +1,3 @@
 <%= polaris_text_container do %>
-  <%= polaris_button(disclosure: true) { "Show more" } %>
-  <%= polaris_button(disclosure: :down) { "Show more" } %>
-  <%= polaris_button(disclosure: :up) { "Show more" } %>
-  <%= polaris_button(disclosure: :select) { "Show more" } %>
-  <%= polaris_button(disclosure: true, plain: true) { "Show more" } %>
+  <%= polaris_button(disclosure: disclosure) { "Show more" } %>
 <% end %>

demo/app/previews/button_component_preview/external.html.erb

@@ -1 +1 @@
-<%= polaris_button(url: "https://shopify.dev", external: true) { "Shopify" } %>
+<%= polaris_button(url: url, external: external) { "Shopify" } %>

demo/app/previews/button_component_preview/full_width.html.erb

@@ -1,3 +1,3 @@
 <div style="width: 300px">
-  <%= polaris_button(full_width: true) { "Add customer" } %>
+  <%= polaris_button(full_width: full_width) { "Add customer" } %>
 </div>

demo/app/previews/button_component_preview/icon_only.html.erb

@@ -1,3 +1,3 @@
-<%= polaris_button(url: "https://shopify.com") do |button| %>
+<%= polaris_button(url: url) do |button| %>
   <% button.with_icon(name: "ArrowLeftMinor") %>
 <% end %>

demo/app/previews/button_component_preview/large.html.erb

@@ -1 +1 @@
-<%= polaris_button(size: :large) { "Create store" } %>
+<%= polaris_button(size: size) { "Create store" } %>

demo/app/previews/button_component_preview/loading.html.erb

@@ -1 +1 @@
-<%= polaris_button(loading: true) { "Save product" } %>
+<%= polaris_button(loading: loading) { "Save product" } %>

demo/app/previews/button_component_preview/outline.html.erb

@@ -1 +1 @@
-<%= polaris_button(outline: true) { "Add product" } %>
+<%= polaris_button(outline: outline) { "Add product" } %>

demo/app/previews/button_component_preview/outline_monochrome.html.erb

@@ -1,3 +1,3 @@
 <div style="color: #bf0711;">
-  <%= polaris_button(monochrome: true, outline: true) { "Retry" } %>
+  <%= polaris_button(monochrome: monochrome, outline: outline) { "Retry" } %>
 </div>

demo/app/previews/button_component_preview/plain.html.erb

@@ -1 +1 @@
-<%= polaris_button(plain: true) { "View shipping settings" } %>
+<%= polaris_button(plain: plain) { "View shipping settings" } %>

demo/app/previews/button_component_preview/plain_destructive.html.erb

@@ -1 +1 @@
-<%= polaris_button(plain: true, destructive: true) { "Remove" } %>
+<%= polaris_button(plain: plain, destructive: destructive) { "Remove" } %>

demo/app/previews/button_component_preview/plain_monochrome.html.erb

@@ -1,4 +1,4 @@
 <div>
   Could not retrieve data.
-  <%= polaris_button(plain: true, monochrome: true) { "Try again" } %>
+  <%= polaris_button(plain: plain, monochrome: monochrome) { "Try again" } %>
 </div>

demo/app/previews/button_component_preview/plain_monochrome_no_underline.html.erb

@@ -1 +1 @@
-<%= polaris_button(plain: true, monochrome: true, remove_underline: true) { "Try again" } %>
+<%= polaris_button(plain: plain, monochrome: monochrome, remove_underline: remove_underline) { "Try again" } %>

demo/app/previews/button_component_preview/pressed.html.erb

@@ -1,4 +1,4 @@
 <%= polaris_button_group(segmented: true) do |group| %>
-  <%= group.with_button(pressed: true) { "First button" } %>
+  <%= group.with_button(pressed: pressed) { "First button" } %>
   <%= group.with_button { "Second button" } %>
 <% end %>

demo/app/previews/button_component_preview/primary.html.erb

@@ -1 +1 @@
-<%= polaris_button(primary: true) { "Save theme" } %>
+<%= polaris_button(primary: primary) { "Save theme" } %>

demo/app/previews/button_component_preview/slim.html.erb

@@ -1 +1 @@
-<%= polaris_button(size: :slim) { "Save variant" } %>
+<%= polaris_button(size: size) { "Save variant" } %>

demo/app/previews/button_component_preview/text_aligned.html.erb

@@ -1,4 +1,4 @@
-<%= polaris_button(plain: true, text_align: :left) do %>
+<%= polaris_button(plain: plain, text_align: text_align) do %>
   This is a really long string of text that overflows onto the next line we need
   to put in a lot of words now you can see the alignment. It is very long but a
   customer could potentially name something this long.

demo/app/previews/button_component_preview/with_icon_name.html.erb

@@ -1,3 +1 @@
-<%= polaris_button(url: "https://shopify.com", icon_name: "ArrowLeftMinor") %>
-
-<%= polaris_button(icon_name: "CirclePlusMajor") { "Add product" } %>
+<%= polaris_button(icon_name: icon_name) { "Add product" } %>

demo/config/initializers/view_component_preview.rb

@@ -0,0 +1,10 @@
+module RenderWithLocals
+  def render_with_locals(bind)
+    caller_method_name = caller_locations(1, 1)[0].label
+    parameter_names = method(caller_method_name).parameters.map(&:last)
+    locals = parameter_names.index_with { |name| bind.local_variable_get(name) }
+    render_with_template(locals: locals)
+  end
+end
+
+ViewComponent::Preview.include(RenderWithLocals)