primer_view_components 0.3.0 → 0.4.0

data/previews/primer/alpha/action_bar_preview.rb

@@ -0,0 +1,77 @@
+# typed: true
+# frozen_string_literal: true
+
+# Setup Playground to use all available component props
+# Setup Features to use individual component props and combinations
+
+module Primer
+  module Alpha
+    # @label ActionBar
+    class ActionBarPreview < ViewComponent::Preview
+      # @label Default
+      # @snapshot
+      def default
+        render(Primer::Alpha::ActionBar.new) do |component|
+          component.with_item_icon_button(icon: :search, label: "Search")
+          component.with_item_icon_button(icon: :pencil, label: "Edit")
+          component.with_item_icon_button(icon: :archive, label: "Archive")
+          component.with_item_divider
+          component.with_item_icon_button(icon: :heart, label: "Heart")
+          component.with_item_icon_button(icon: :bookmark, label: "Bookmark")
+          component.with_item_icon_button(icon: :mention, label: "Mention")
+          component.with_item_divider
+          component.with_item_icon_button(icon: :paperclip, label: "Attach")
+        end
+      end
+
+      # @label Inline with other components
+      def inline; end
+
+      # @label Playground
+      # @param size [Symbol] select [[Small, small], [Medium, medium], [Large, large]]
+      # @param overflow_menu [Boolean]
+      def playground(size: :medium, overflow_menu: true)
+        render(Primer::Alpha::ActionBar.new(size: size, overflow_menu: overflow_menu)) do |component|
+          component.with_item_icon_button(icon: :search, label: "Search")
+          component.with_item_icon_button(icon: :pencil, label: "Edit")
+          component.with_item_icon_button(icon: :archive, label: "Archive")
+          component.with_item_divider
+          component.with_item_icon_button(icon: :heart, label: "Heart")
+          component.with_item_icon_button(icon: :bookmark, label: "Bookmark")
+          component.with_item_icon_button(icon: :mention, label: "Mention")
+          component.with_item_divider
+          component.with_item_icon_button(icon: :paperclip, label: "Attach")
+        end
+      end
+
+      # @!group sizes
+      def small
+        render(Primer::Alpha::ActionBar.new(size: :small)) do |component|
+          component.with_item_icon_button(icon: :search, label: "Search")
+          component.with_item_icon_button(icon: :pencil, label: "Edit")
+          component.with_item_icon_button(icon: :archive, label: "Archive")
+          component.with_item_divider
+        end
+      end
+
+      def medium
+        render(Primer::Alpha::ActionBar.new(size: :medium)) do |component|
+          component.with_item_icon_button(icon: :search, label: "Search")
+          component.with_item_icon_button(icon: :pencil, label: "Edit")
+          component.with_item_icon_button(icon: :archive, label: "Archive")
+          component.with_item_divider
+        end
+      end
+
+      def large
+        render(Primer::Alpha::ActionBar.new(size: :large)) do |component|
+          component.with_item_icon_button(icon: :search, label: "Search")
+          component.with_item_icon_button(icon: :pencil, label: "Edit")
+          component.with_item_icon_button(icon: :archive, label: "Archive")
+          component.with_item_divider
+        end
+      end
+      # @!endgroup
+    end
+  end
+end

data/previews/primer/alpha/action_list_preview.rb

@@ -37,6 +37,7 @@ module Primer
       # @param role text
       # @param scheme [Symbol] select [full, inset]
       # @param show_dividers toggle
+      # @snapshot
       def default(
         role: Primer::Alpha::ActionList::DEFAULT_ROLE,
         scheme: Primer::Alpha::ActionList::DEFAULT_SCHEME,
@@ -137,6 +138,7 @@ module Primer
       # @param title text
       # @param subtitle text
       # @param list_id text
+      # @snapshot
       def heading(
         scheme: Primer::Alpha::ActionList::Heading::DEFAULT_SCHEME,
         title: "This is a title",
@@ -237,6 +239,7 @@ module Primer
       end
 
       # @label Item [default]
+      # @snapshot
       def item_default
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
@@ -286,6 +289,7 @@ module Primer
       end
 
       # @label Item [leading and trailing visual]
+      # @snapshot
       def item_leading_trailing_visual
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
@@ -298,6 +302,7 @@ module Primer
       end
 
       # @label Item [description]
+      # @snapshot
       def item_with_description
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
@@ -309,6 +314,7 @@ module Primer
       end
 
       # @label Item [inline description]
+      # @snapshot
       def item_with_description_inline
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
@@ -320,6 +326,7 @@ module Primer
       end
 
       # @label Item [trailing action]
+      # @snapshot
       def item_trailing_action
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
@@ -331,6 +338,7 @@ module Primer
       end
 
       # @label Item [danger]
+      # @snapshot
       def item_danger
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
@@ -340,6 +348,7 @@ module Primer
       end
 
       # @label Item [disabled]
+      # @snapshot
       def item_disabled
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }
@@ -370,6 +379,7 @@ module Primer
       end
 
       # @label Item [active]
+      # @snapshot
       def item_active
         render(Primer::Alpha::ActionList.new(
                  aria: { label: "List heading" }

data/previews/primer/alpha/action_menu_preview.rb

@@ -32,6 +32,7 @@ module Primer
 
       # @label Default
       #
+      # @snapshot interactive
       def default
         render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1")) do |menu|
           menu.with_show_button { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "Menu" }
@@ -50,6 +51,7 @@ module Primer
 
       # @label Wide
       #
+      # @snapshot interactive
       def wide
         render(Primer::Alpha::ActionMenu.new(select_variant: :single, size: :medium)) do |menu|
           menu.with_show_button { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "A wider menu" }
@@ -119,6 +121,7 @@ module Primer
 
       # @label Single item selected
       #
+      # @snapshot interactive
       def single_selected_item
         render(Primer::Alpha::ActionMenu.new(select_variant: :single)) do |menu|
           menu.with_show_button { "Menu" }
@@ -130,6 +133,7 @@ module Primer
 
       # @label Single Select with Internal Label
       #
+      # @snapshot interactive
       def single_select_with_internal_label
         render(Primer::Alpha::ActionMenu.new(select_variant: :single, dynamic_label: true, dynamic_label_prefix: "Menu")) do |menu|
           menu.with_show_button { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "Menu" }
@@ -143,6 +147,7 @@ module Primer
 
       # @label Multiple items selected
       #
+      # @snapshot interactive
       def multiple_selected_items
         render(Primer::Alpha::ActionMenu.new(select_variant: :multiple)) do |menu|
           menu.with_show_button { "Menu" }

data/previews/primer/alpha/auto_complete_preview.rb

@@ -35,6 +35,7 @@ module Primer
       # @param is_label_inline toggle
       # @param with_icon toggle
       # @param is_clearable toggle
+      # @snapshot
       def default(label_text: "Select a fruit", is_label_visible: true, is_label_inline: false, with_icon: false, is_clearable: false)
         # rubocop:disable Primer/ComponentNameMigration
         render(

data/previews/primer/alpha/banner_preview.rb

@@ -27,21 +27,25 @@ module Primer
       # @!group Schemes
       #
       # @label Default scheme
+      # @snapshot
       def scheme_default
         render(Primer::Alpha::Banner.new) { "This is a default banner." }
       end
 
       # @label Danger
+      # @snapshot
       def scheme_danger
         render(Primer::Alpha::Banner.new(scheme: :danger)) { "This is a danger banner!" }
       end
 
       # @label Success
+      # @snapshot
       def scheme_success
         render(Primer::Alpha::Banner.new(scheme: :success)) { "This is a success banner!" }
       end
 
       # @label Warning
+      # @snapshot
       def scheme_warning
         render(Primer::Alpha::Banner.new(scheme: :warning)) { "This is a warning banner!" }
       end
@@ -49,11 +53,13 @@ module Primer
       # @!endgroup
 
       # @label Dismissable
+      # @snapshot
       def dismissable
-        render(Primer::Alpha::Banner.new(dismissable: true, reappear: true)) { "This is a dismissable banner." }
+        render(Primer::Alpha::Banner.new(dismissible: true, reappear: true)) { "This is a dismissable banner." }
       end
 
       # @!group Full Width
+      # @snapshot
       #
       # @label Full width
       def full_width
@@ -75,6 +81,7 @@ module Primer
       # @param scheme [Symbol] select [default, warning, danger, success]
       # @param content text
       # @param reappear [Boolean]
+      # @snapshot
       def with_action_button(full: false, dismissible: false, icon: :people, scheme: Primer::Alpha::Banner::DEFAULT_SCHEME, reappear: true, content: "This is a banner with an action!")
         icon = nil if icon == :none
         render_with_template(locals: { full: full, dismissible: dismissible, icon: icon == :none ? nil : icon, scheme: scheme, content: content, reappear: reappear })
@@ -88,6 +95,7 @@ module Primer
       # @param scheme [Symbol] select [default, warning, danger, success]
       # @param content text
       # @param reappear [Boolean]
+      # @snapshot
       def with_action_content(full: false, dismissible: false, icon: :people, scheme: Primer::Alpha::Banner::DEFAULT_SCHEME, reappear: true, content: "Did you know? Comments can be edited.")
         icon = nil if icon == :none
         render_with_template(locals: { full: full, dismissible: dismissible, icon: icon == :none ? nil : icon, scheme: scheme, content: content, reappear: reappear })

data/previews/primer/alpha/button_marketing_preview.rb

@@ -24,6 +24,7 @@ module Primer
       end
 
       # @!group Size Variants
+      # @snapshot
       #
       # @label Default
       def sizes_default
@@ -37,6 +38,7 @@ module Primer
       # @!endgroup
 
       # @!group Schemes
+      # @snapshot
       #
       # @label Default
       def scheme_default

data/previews/primer/alpha/check_box_group_preview.rb

@@ -42,6 +42,7 @@ module Primer
       end
 
       # @!group Options
+      # @snapshot
       #
       # @label With caption
       def with_caption

data/previews/primer/alpha/check_box_preview.rb

@@ -40,12 +40,18 @@ module Primer
       end
 
       # @!group Options
+      # @snapshot
       #
       # @label With caption
       def with_caption
         render(Primer::Alpha::CheckBox.new(caption: "With a caption", name: "my-check-box1", label: "Jean-Luc Picard"))
       end
 
+      # @label Checked
+      def checked
+        render(Primer::Alpha::CheckBox.new(checked: true, name: "my-check-box1", label: "Jean-Luc Picard"))
+      end
+
       # @label Visually hidden label
       def visually_hide_label
         render(Primer::Alpha::CheckBox.new(visually_hide_label: true, name: "my-check-box2", label: "Jean-Luc Picard"))

data/previews/primer/alpha/dialog_preview.rb

@@ -37,6 +37,7 @@ module Primer
       # @param visually_hide_title [Boolean] toggle
       # @param button_text [String] text
       # @param body_text [String] text
+      # @snapshot interactive
       def default(title: "Test Dialog", subtitle: nil, size: :medium, button_text: "Show Dialog", body_text: "Content", position: :center, position_narrow: :fullscreen, visually_hide_title: false)
         render(Primer::Alpha::Dialog.new(title: title, subtitle: subtitle, size: size, position: position, position_narrow: position_narrow, visually_hide_title: visually_hide_title)) do |d|
           d.with_show_button { button_text }

data/previews/primer/alpha/dropdown_preview.rb

@@ -24,6 +24,7 @@ module Primer
 
       # @label Default
       #
+      # @snapshot interactive
       def default
         render(Primer::Alpha::Dropdown.new) do |component|
           component.with_button { "Dropdown" }

data/previews/primer/alpha/hellip_button_preview.rb

@@ -8,6 +8,7 @@ module Primer
       #
       # @param aria_label [String]
       # @param inline [Boolean]
+      # @snapshot
       def default(inline: false, aria_label: "No effect")
         render(Primer::Alpha::HellipButton.new(inline: inline, "aria-label": aria_label))
       end

data/previews/primer/alpha/hidden_text_expander_preview.rb

@@ -14,6 +14,7 @@ module Primer
       # @label Default options
       # @param label [String] text
       # @param inline [Boolean] toggle
+      # @snapshot
       def default(label: "No effect", inline: false)
         render(Primer::Alpha::HiddenTextExpander.new(inline: inline, "aria-label": label))
       end

data/previews/primer/alpha/layout_preview.rb

@@ -20,6 +20,7 @@ module Primer
       end
 
       # @label Default
+      # @snapshot
       def default
         render(Primer::Alpha::Layout.new) do |component|
           component.with_main(bg: :attention, p: 6) do
@@ -32,6 +33,7 @@ module Primer
       end
 
       # @!group Gutter
+      # @snapshot
       #
       # @label None
       def gutter_none
@@ -104,6 +106,7 @@ module Primer
       # @!endgroup
 
       # @!group Sidebar width
+      # @snapshot
       #
       # @label Narrow
       def sidebar_width_narrow
@@ -132,6 +135,7 @@ module Primer
       # @!endgroup
 
       # @!group Sidebar column placement
+      # @snapshot
       #
       # @label Start
       def sidebar_col_placement_start

data/previews/primer/alpha/menu_preview.rb

@@ -8,6 +8,7 @@ module Primer
       def playground; end
 
       # @label Default
+      # @snapshot
       def default; end
     end
   end

data/previews/primer/alpha/multi_input_preview.rb

@@ -26,6 +26,7 @@ module Primer
       end
 
       # @label Default
+      # @snapshot
       def default
         render_with_template(
           template: "primer/alpha/multi_input_preview/playground",
@@ -38,6 +39,7 @@ module Primer
       end
 
       # @label With caption
+      # @snapshot
       def with_caption
         render_with_template(
           template: "primer/alpha/multi_input_preview/playground",
@@ -51,6 +53,7 @@ module Primer
       end
 
       # @label Visually hidden label
+      # @snapshot
       def visually_hide_label
         render_with_template(
           template: "primer/alpha/multi_input_preview/playground",
@@ -64,6 +67,7 @@ module Primer
       end
 
       # @label Disabled
+      # @snapshot
       def disabled
         render_with_template(
           template: "primer/alpha/multi_input_preview/playground",

data/previews/primer/alpha/nav_list_preview.rb

@@ -32,6 +32,7 @@ module Primer
       end
 
       # @label Default
+      # @snapshot
       def default
         render(Primer::Alpha::NavList.new(selected_item_id: :code_review_limits)) do |list|
           list.with_heading(title: "Repository settings")
@@ -85,6 +86,7 @@ module Primer
       end
 
       # @label Show more item
+      # @snapshot
       def show_more_item
         render(Primer::Alpha::NavList.new(aria: { label: "My favorite foods" })) do |list|
           list.with_group do |group|
@@ -99,6 +101,7 @@ module Primer
       end
 
       # @label Trailing action
+      # @snapshot
       def trailing_action; end
     end
   end

data/previews/primer/alpha/radio_button_group_preview.rb

@@ -31,6 +31,7 @@ module Primer
       end
 
       # @label Default
+      # @snapshot
       def default
         render(Primer::Alpha::RadioButtonGroup.new(name: "my-radio-group", label: "Question: what kind of bear is best?")) do |component|
           component.radio_button(label: "Bears", value: "bears")
@@ -42,6 +43,7 @@ module Primer
       # @!group Options
       #
       # @label With caption
+      # @snapshot
       def with_caption
         render(Primer::Alpha::RadioButtonGroup.new(caption: "With a caption", name: "my-radio-group", label: "Question: what kind of bear is best?")) do |component|
           component.radio_button(label: "Bears", value: "bears1")

data/previews/primer/alpha/radio_button_preview.rb

@@ -35,6 +35,7 @@ module Primer
       end
 
       # @label Default
+      # @snapshot
       def default
         render(Primer::Alpha::RadioButton.new(name: "my-radio-button", label: "Battlestar Galactica", value: "bsg"))
       end
@@ -42,16 +43,25 @@ module Primer
       # @!group Options
       #
       # @label With caption
+      # @snapshot
       def with_caption
         render(Primer::Alpha::RadioButton.new(caption: "With a caption", name: "my-radio-button", label: "Battlestar Galactica", value: "bsg1"))
       end
 
+      # @label Checked
+      # @snapshot
+      def checked
+        render(Primer::Alpha::RadioButton.new(name: "my-radio-button", label: "Battlestar Galactica", value: "bsg2", checked: true ))
+      end
+
       # @label Visually hidden label
+      # @snapshot
       def visually_hide_label
         render(Primer::Alpha::RadioButton.new(visually_hide_label: true, name: "my-radio-button", label: "Battlestar Galactica", value: "bsg2"))
       end
 
       # @label Disabled
+      # @snapshot
       def disabled
         render(Primer::Alpha::RadioButton.new(disabled: true, name: "my-radio-button", label: "Battlestar Galactica", value: "bsg4"))
       end

data/previews/primer/alpha/segmented_control_preview.rb

@@ -24,6 +24,7 @@ module Primer
       end
 
       # @label Default
+      # @snapshot
       def default
         render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |component|
           component.with_item(label: "Preview", selected: true)
@@ -35,6 +36,7 @@ module Primer
       # @!group Full width
       # @label Size small
       # @param hide_labels [Boolean] toggle
+      # @snapshot
       def full_width_small(hide_labels: false)
         render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :small)) do |component|
           component.with_item(label: "Preview", selected: true)
@@ -45,6 +47,7 @@ module Primer
 
       # @label Size medium
       # @param hide_labels [Boolean] toggle
+      # @snapshot
       def full_width_medium(hide_labels: false)
         render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :medium)) do |component|
           component.with_item(label: "Preview", selected: true)
@@ -55,6 +58,7 @@ module Primer
 
       # @label Size large
       # @param hide_labels [Boolean] toggle
+      # @snapshot
       def full_width_large(hide_labels: false)
         render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :large)) do |component|
           component.with_item(label: "Preview", selected: true)
@@ -66,6 +70,7 @@ module Primer
 
       # @!group Icons and text
       # @label Size small
+      # @snapshot
       def icons_and_text_small
         render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :small)) do |component|
           component.with_item(label: "Preview", icon: :eye, selected: true)
@@ -75,6 +80,7 @@ module Primer
       end
 
       # @label Size medium
+      # @snapshot
       def icons_and_text_medium
         render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :medium)) do |component|
           component.with_item(label: "Preview", icon: :eye, selected: true)
@@ -84,6 +90,7 @@ module Primer
       end
 
       # @label Size large
+      # @snapshot
       def icons_and_text_large
         render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :large)) do |component|
           component.with_item(label: "Preview", icon: :eye, selected: true)
@@ -95,6 +102,7 @@ module Primer
 
       # @!group Icons only
       # @label Size small
+      # @snapshot
       def icon_only_small
         render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :small)) do |component|
           component.with_item(label: "Preview", icon: :eye, selected: true)
@@ -104,6 +112,7 @@ module Primer
       end
 
       # @label Size medium
+      # @snapshot
       def icon_only_medium
         render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :medium)) do |component|
           component.with_item(label: "Preview", icon: :eye, selected: true)
@@ -113,6 +122,7 @@ module Primer
       end
 
       # @label Size large
+      # @snapshot
       def icon_only_large
         render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :large)) do |component|
           component.with_item(label: "Preview", icon: :eye, selected: true)
@@ -151,6 +161,7 @@ module Primer
 
       # NOTE: this preview uses a group to force it's display below the other groups
       # @!group With link as tag
+      # @snapshot
       def with_link_as_tag
         render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |component|
           component.with_item(tag: :a, href: "#", label: "Preview", icon: :eye, selected: true)
@@ -161,8 +172,10 @@ module Primer
       # @!endgroup
 
       # @!group With aria labeled headings
+      # @snapshot
       def with_subhead_actions; end
 
+      # @snapshot
       def with_label_and_caption; end
       # @!endgroup
     end

data/previews/primer/alpha/select_preview.rb

@@ -65,6 +65,7 @@ module Primer
       # @!group Options
       #
       # @label With caption
+      # @snapshot
       def with_caption
         render(Primer::Alpha::Select.new(caption: "With a caption", name: "my-select-list", label: "Favorite place to visit")) do |component|
           component.option(label: "Lopez Island", value: "lopez")
@@ -75,6 +76,7 @@ module Primer
       end
 
       # @label Visually hidden label
+      # @snapshot
       def visually_hide_label
         render(Primer::Alpha::Select.new(visually_hide_label: true, name: "my-select-list", label: "Favorite place to visit")) do |component|
           component.option(label: "Lopez Island", value: "lopez")
@@ -85,6 +87,7 @@ module Primer
       end
 
       # @label Full width
+      # @snapshot
       def full_width
         render(Primer::Alpha::Select.new(full_width: true, name: "my-select-list", label: "Favorite place to visit")) do |component|
           component.option(label: "Lopez Island", value: "lopez")
@@ -95,6 +98,7 @@ module Primer
       end
 
       # @label Disabled
+      # @snapshot
       def disabled
         render(Primer::Alpha::Select.new(disabled: true, name: "my-select-list", label: "Favorite place to visit")) do |component|
           component.option(label: "Lopez Island", value: "lopez")
@@ -105,6 +109,7 @@ module Primer
       end
 
       # @label Invalid
+      # @snapshot
       def invalid
         render(Primer::Alpha::Select.new(invalid: true, name: "my-select-list", label: "Favorite place to visit")) do |component|
           component.option(label: "Lopez Island", value: "lopez")
@@ -115,6 +120,7 @@ module Primer
       end
 
       # @label With validation message
+      # @snapshot
       def with_validation_message
         render(Primer::Alpha::Select.new(validation_message: "An error occurred!", name: "my-select-list", label: "Favorite place to visit")) do |component|
           component.option(label: "Lopez Island", value: "lopez")

data/previews/primer/alpha/tab_nav_preview.rb

@@ -22,6 +22,7 @@ module Primer
       end
 
       # @label Default
+      # @snapshot
       def default
         render(Primer::Alpha::TabNav.new(label: "Default")) do |component|
           component.with_tab(selected: true, href: "#") { "Tab 1" }
@@ -31,6 +32,7 @@ module Primer
       end
 
       # @label With icons and counters
+      # @snapshot
       def with_icons_and_counters
         render(Primer::Alpha::TabNav.new(label: "With icons and counters")) do |component|
           component.with_tab(href: "#1", selected: true) do |tab|
@@ -52,6 +54,7 @@ module Primer
       end
 
       # @param align [Symbol] select [left, right]
+      # @snapshot
       def with_extra(align: :right)
         render_with_template(locals: { align: align })
       end

data/previews/primer/alpha/tab_panels_preview.rb

@@ -23,6 +23,7 @@ module Primer
       #
       # @param number_of_panels [Integer] number
       # @param align [Symbol] select [left, right]
+      # @snapshot
       def default(number_of_panels: 3, align: :left)
         render(Primer::Alpha::TabPanels.new(label: "label", align: align)) do |component|
           Array.new(number_of_panels || 3) do |i|