primer_view_components 0.13.2 → 0.15.0

data/previews/primer/alpha/action_menu_preview.rb

@@ -52,6 +52,67 @@ module Primer
         end
       end
 
+      # @label With groups
+      #
+      # @snapshot interactive
+      def with_groups
+        render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1")) do |menu|
+          menu.with_show_button do |button|
+            button.with_trailing_action_icon(icon: :"triangle-down")
+            "Favorite character"
+          end
+
+          menu.with_group do |group|
+            group.with_heading(title: "Battlestar Galactica")
+            group.with_item(label: "William Adama")
+            group.with_item(label: 'Kara "Starbuck" Thrace')
+            group.with_item(label: 'Sharon "Boomer" Valerii')
+            group.with_item(label: "Gaius Baltar")
+          end
+
+          menu.with_group do |group|
+            group.with_heading(title: "Star Trek")
+            group.with_item(label: "Capt. Jean-luc Picard")
+            group.with_item(label: "Capt. Kathryn M. Janeway")
+            group.with_item(label: "Capt. Benjamin L. Sisko")
+            group.with_item(label: "Capt. James T. Kirk")
+          end
+
+          menu.with_group do |group|
+            group.with_heading(title: "Star Wars")
+            group.with_item(label: "Leia Organa")
+            group.with_item(label: "Luke Skywalker")
+            group.with_item(label: "Han Solo")
+            group.with_item(label: "Chewbacca")
+          end
+        end
+      end
+
+      # @label With items and groups
+      #
+      # @snapshot interactive
+      def with_items_and_groups
+        render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1")) do |menu|
+          menu.with_show_button do |button|
+            button.with_trailing_action_icon(icon: :"triangle-down")
+            "Meal preference"
+          end
+
+          menu.with_item(label: "Meat option")
+          menu.with_divider
+
+          menu.with_group do |group|
+            group.with_heading(title: "Vegetarian options")
+            group.with_item(label: "Grilled portbello mushroom")
+            group.with_item(label: "Polenta")
+            group.with_item(label: "Seitan")
+          end
+
+          menu.with_divider
+          menu.with_item(label: "Fish option")
+        end
+      end
+
       # @label Wide
       #
       # @snapshot interactive
@@ -87,10 +148,12 @@ module Primer
       def single_select
         render(Primer::Alpha::ActionMenu.new(select_variant: :single)) do |menu|
           menu.with_show_button { "Menu" }
-          menu.with_item(label: "Fast forward")
-          menu.with_item(label: "Recursive")
-          menu.with_item(label: "Ours")
-          menu.with_item(label: "Resolve")
+          menu.with_item(label: "Fast forward", item_id: :fast_forward)
+          menu.with_item(label: "Recursive", item_id: :recursive)
+          menu.with_item(label: "Ours", item_id: :ours)
+          menu.with_item(label: "Resolve", item_id: :resolve)
+          menu.with_item(label: "Disabled", disabled: true, item_id: :disabled)
+          menu.with_item(label: "Hidden", hidden: true, disabled: true, item_id: :hidden)
         end
       end
 
@@ -105,7 +168,8 @@ module Primer
             username: "langermank",
             full_name: "Katie Langerman",
             full_name_scheme: :inline,
-            avatar_arguments: { shape: :square }
+            avatar_arguments: { shape: :square },
+            item_id: :katie
           )
 
           menu.with_avatar_item(
@@ -113,7 +177,8 @@ module Primer
             username: "jonrohan",
             full_name: "Jon Rohan",
             full_name_scheme: :inline,
-            avatar_arguments: { shape: :square }
+            avatar_arguments: { shape: :square },
+            item_id: :jon
           )
 
           menu.with_avatar_item(
@@ -121,7 +186,8 @@ module Primer
             username: "broccolinisoup",
             full_name: "Armağan Ersöz",
             full_name_scheme: :inline,
-            avatar_arguments: { shape: :square }
+            avatar_arguments: { shape: :square },
+            item_id: :armagan
           )
         end
       end

data/previews/primer/alpha/dialog_preview/with_auto_complete.html.erb

@@ -0,0 +1,8 @@
+<%= render(Primer::Alpha::Dialog.new(id: "dialog-one", title: title, subtitle: subtitle, visually_hide_title: false)) do |d| %>
+  <% d.with_show_button { button_text } %>
+  <% d.with_body do %>
+    <%= render(Primer::Beta::AutoComplete.new(src: url, label_text: "Search", list_id: "list", input_id: "input")) do |a| %>
+      <% a.with_leading_visual_icon(icon: :search) %>
+    <% end %>
+  <% end %>
+<% end %>

data/previews/primer/alpha/dialog_preview.rb

@@ -152,6 +152,23 @@ module Primer
                              })
       end
 
+      # @label Dialog with AutoComplete text input
+      #
+      # @param title [String] text
+      # @param subtitle [String] text
+      # @param button_text [String] text
+      # @param show_divider [Boolean] toggle
+      # @snapshot interactive
+      def with_auto_complete(title: "Test Dialog", subtitle: nil, button_text: "Show Dialog", show_divider: true)
+        render_with_template(locals: {
+                               title: title,
+                               subtitle: subtitle,
+                               button_text: button_text,
+                               show_divider: show_divider,
+                               url: UrlHelpers.autocomplete_index_path
+                             })
+      end
+
       # @label Page with scrollbar and dialog
       #
       # @param title [String] text

data/previews/primer/alpha/octicon_symbols_preview/default.html.erb

@@ -0,0 +1,6 @@
+<%= render(Primer::Alpha::OcticonSymbols.new(icons: [{ symbol: :container, size: :medium }])) %>
+
+<svg xmlns="http://www.w3.org/2000/svg" height="40" width="40" aria-label="Circled container icon" tabindex="0">
+  <circle cx="20" cy="20" r="18" stroke="green" stroke-width="3px" fill="white" />
+  <use href="#octicon_container_24" x="8" y="8" />
+</svg>

data/previews/primer/alpha/octicon_symbols_preview/playground.html.erb

@@ -0,0 +1,13 @@
+<p style="max-width: 500px">
+  Below is an SVG image containing the chosen octicon surrounded by a green circle. The octicon has been emitted
+  onto the page as an SVG &lt;symbol&gt; element and included into the SVG you see below with the &lt;use&gt; element.
+  See the <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol" target="_blank">MDN docs</a> for
+  more information.
+</p>
+
+<%= render(Primer::Alpha::OcticonSymbols.new(icons: [{ symbol: octicon, size: :medium }])) %>
+
+<svg xmlns="http://www.w3.org/2000/svg" height="40" width="40" aria-label="Circled <%= octicon %> icon" tabindex="0">
+  <circle cx="20" cy="20" r="18" stroke="green" stroke-width="3px" fill="white" />
+  <use href="#octicon_<%= octicon %>_24" x="8" y="8" />
+</svg>

data/previews/primer/alpha/octicon_symbols_preview.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label OcticonSymbols
+    class OcticonSymbolsPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param octicon [Symbol] medium_octicon
+      def playground(octicon: :container)
+        render_with_template(locals: { octicon: octicon })
+      end
+
+      # @label Default
+      #
+      # @snapshot
+      def default
+      end
+    end
+  end
+end

data/previews/primer/alpha/text_field_preview.rb

@@ -176,6 +176,11 @@ module Primer
         render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.example_check_ok_path, name: "my-text-field", label: "My text field"))
       end
 
+      # @label Auto check request accepted
+      def with_auto_check_accepted
+        render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.example_check_accepted_path, name: "my-text-field", label: "My text field"))
+      end
+
       # @label Auto check request error
       def with_auto_check_error
         render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.example_check_error_path, name: "my-text-field", label: "My text field"))

data/previews/primer/beta/avatar_preview.rb

@@ -64,6 +64,12 @@ module Primer
         render(Primer::Beta::Avatar.new(size: 48, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
       end
 
+      # @label 64px
+      # @snapshot
+      def size_64
+        render(Primer::Beta::Avatar.new(size: 64, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
       # @label 80px
       # @snapshot
       def size_80

data/previews/primer/beta/blankslate_preview/inside_flex_container.html.erb

@@ -0,0 +1,6 @@
+<div style="display: flex">
+  <%= render Primer::Beta::Blankslate.new do |component| %>
+    <% component.with_heading(tag: :h2) { "Heading" } %>
+    <% component.with_description { "Description" } %>
+  <% end %>
+</div>

data/previews/primer/beta/blankslate_preview.rb

@@ -134,6 +134,9 @@ module Primer
           component.with_secondary_action(href: "#").with_content("Learn more about vulnerabilities")
         end
       end
+
+      def inside_flex_container
+      end
     end
   end
 end

data/previews/primer/beta/button_group_preview.rb

@@ -69,6 +69,17 @@ module Primer
           end
         end
       end
+
+      # @label With clipboard copy button
+      # @snapshot
+      def with_clipboard_copy_button(size: :medium, scheme: :default)
+        render(Primer::Beta::ButtonGroup.new(size: size, scheme: scheme)) do |component|
+          component.with_button { "Button 1" }
+          component.with_clipboard_copy_button(id: "button-2", value: "Copyable value", aria: { label: "Copy some text" }) do |button|
+            button.with_tooltip(text: "Copy some text")
+          end
+        end
+      end
     end
   end
 end

data/previews/primer/beta/clipboard_copy_button_preview.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label ClipboardCopyButton
+    class ClipboardCopyButtonPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param text [String]
+      def playground(text: "Text to copy")
+        render(Primer::Beta::ClipboardCopyButton.new(id: "clipboard-button", aria: { label: "Copy" }, value: text))
+      end
+
+      # @label Playground
+      # @snapshot
+      def default
+        render(Primer::Beta::ClipboardCopyButton.new(id: "clipboard-button", aria: { label: "Copy" }, value: "Text to copy"))
+      end
+
+      # @label With tooltip
+      # @snapshot
+      def with_tooltip
+        render(Primer::Beta::ClipboardCopyButton.new(id: "clipboard-button", aria: { label: "Copy" }, value: "Text to copy")) do |button|
+          button.with_tooltip(text: "Copy some text")
+        end
+      end
+    end
+  end
+end

data/previews/primer/beta/nav_list_preview.rb

@@ -106,7 +106,7 @@ module Primer
       # @snapshot
       def show_more_item
         render(Primer::Beta::NavList.new(aria: { label: "My favorite foods" })) do |list|
-          list.with_group do |group|
+          list.with_group(id: "foods") do |group|
             group.with_heading(title: "My favorite foods")
             group.with_item(label: "Popplers", href: "/foods/popplers")
             group.with_item(label: "Slurm", href: "/foods/slurm")
@@ -114,6 +114,15 @@ module Primer
               item.with_trailing_visual_icon(icon: :plus)
             end
           end
+
+          list.with_group(id: "snacks") do |group|
+            group.with_heading(title: "My favorite snacks")
+            group.with_item(label: "Popplers", href: "/foods/popplers")
+            group.with_item(label: "Slurm", href: "/foods/slurm")
+            group.with_show_more_item(label: "Show more snacks", src: UrlHelpers.nav_list_items_path, pages: 4) do |item|
+              item.with_trailing_visual_icon(icon: :plus)
+            end
+          end
         end
       end
 

data/previews/primer/beta/subhead_preview.rb

@@ -9,10 +9,11 @@ module Primer
       # @param spacious [Boolean]
       # @param hide_border [Boolean]
       # @param heading_danger [Boolean]
+      # @param heading_size [Symbol] select [medium, large]
       # @param heading_tag [Symbol] select [div, h1, h2, h3, h4, h5, h6]
-      def playground(spacious: false, hide_border: false, heading_tag: :div, heading_danger: false)
+      def playground(spacious: false, hide_border: false, heading_tag: :div, heading_size: Primer::Beta::Subhead::DEFAULT_HEADING_SIZE, heading_danger: false)
         render(Primer::Beta::Subhead.new(spacious: spacious, hide_border: hide_border)) do |component|
-          component.with_heading(tag: heading_tag, danger: heading_danger) do
+          component.with_heading(tag: heading_tag, size: heading_size, danger: heading_danger) do
             "My Heading"
           end
           component.with_description do
@@ -26,11 +27,12 @@ module Primer
       # @param spacious [Boolean]
       # @param hide_border [Boolean]
       # @param heading_danger [Boolean]
+      # @param heading_size [Symbol] select [medium, large]
       # @param heading_tag [Symbol] select [div, h1, h2, h3, h4, h5, h6]
       # @snapshot
-      def default(spacious: false, hide_border: false, heading_tag: :div, heading_danger: false)
+      def default(spacious: false, hide_border: false, heading_tag: :div, heading_size: Primer::Beta::Subhead::DEFAULT_HEADING_SIZE, heading_danger: false)
         render(Primer::Beta::Subhead.new(spacious: spacious, hide_border: hide_border)) do |component|
-          component.with_heading(tag: heading_tag, danger: heading_danger) do
+          component.with_heading(tag: heading_tag, size: heading_size, danger: heading_danger) do
             "My Heading"
           end
           component.with_description do
@@ -98,6 +100,32 @@ module Primer
       end
       #
       # @!endgroup
+
+      # @!group Header size
+      #
+      # @label Large
+      def large_header
+        render(Primer::Beta::Subhead.new) do |component|
+          component.with_heading(size: :large) do
+            "Large Header"
+          end
+          component.with_description do
+            "Description"
+          end
+        end
+      end
+
+      # @label Medium
+      def medium_header
+        render(Primer::Beta::Subhead.new) do |component|
+          component.with_heading(size: :medium) do
+            "Medium Header"
+          end
+          component.with_description do
+            "Description"
+          end
+        end
+      end
     end
   end
 end

data/previews/primer/forms_preview/action_menu_form.html.erb

@@ -0,0 +1,3 @@
+<%= primer_form_with(url: action_menu_form_action_path(format: route_format)) do |f| %>
+  <%= render(ActionMenuForm.new(f)) %>
+<% end %>

data/previews/primer/forms_preview.rb

@@ -23,6 +23,10 @@ module Primer
 
     def select_form; end
 
+    def action_menu_form(route_format: :html)
+      render_with_template(locals: { route_format: route_format })
+    end
+
     def radio_button_with_nested_form; end
 
     def check_box_with_nested_form; end

data/static/arguments.json

@@ -217,6 +217,12 @@
         "default": "`nil`",
         "description": "Item label. If no label is provided, content is used."
       },
+      {
+        "name": "item_id",
+        "type": "String",
+        "default": "`nil`",
+        "description": "An ID that will be attached to the item's `<li>` element as `data-item-id` for distinguishing between items, perhaps in JavaScript."
+      },
       {
         "name": "label_classes",
         "type": "String",
@@ -386,12 +392,97 @@
     ]
   },
   {
-    "component": "ActionMenu::List",
+    "component": "ActionMenu::Group",
     "status": "alpha",
     "a11y_reviewed": true,
+    "short_name": "ActionMenuGroup",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/group.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/group/default/",
+    "parameters": [
+      {
+        "name": "id",
+        "type": "String",
+        "default": "`self.class.generate_id`",
+        "description": "HTML ID value."
+      },
+      {
+        "name": "role",
+        "type": "Boolean",
+        "default": "`nil`",
+        "description": "ARIA role describing the function of the list. listbox and menu are a common values."
+      },
+      {
+        "name": "item_classes",
+        "type": "String",
+        "default": "`nil`",
+        "description": "Additional CSS classes to attach to items."
+      },
+      {
+        "name": "scheme",
+        "type": "Symbol",
+        "default": "`:full`",
+        "description": "One of `:full` or `:inset`. `inset` children are offset (vertically and horizontally) from list edges. `full` (default) children are flush (vertically and horizontally) with list edges."
+      },
+      {
+        "name": "show_dividers",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Display a divider above each item in the list when it does not follow a header or divider."
+      },
+      {
+        "name": "select_variant",
+        "type": "Symbol",
+        "default": "`:none`",
+        "description": "How items may be selected in the list. One of `:multiple`, `:multiple_checkbox`, `:none`, or `:single`."
+      },
+      {
+        "name": "form_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "Allows an `ActionList` to act as a select list in multi- and single-select modes. Pass the `builder:` and `name:` options to this hash. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which are created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission. *NOTE*: Consider using an [ActionMenu](/components/alpha/actionmenu) instead of using this feature directly."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
+  {
+    "component": "ActionMenu::Heading",
+    "status": "alpha",
+    "a11y_reviewed": false,
+    "short_name": "ActionMenuHeading",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/heading.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/heading/default/",
+    "parameters": [
+
+    ]
+  },
+  {
+    "component": "ActionMenu::List",
+    "status": "alpha",
+    "a11y_reviewed": false,
     "short_name": "ActionMenuList",
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/list.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/list/default/",
+    "parameters": [
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "The arguments accepted by [ActionList](/components/alpha/actionlist)"
+      }
+    ]
+  },
+  {
+    "component": "ActionMenu::ListWrapper",
+    "status": "alpha",
+    "a11y_reviewed": true,
+    "short_name": "ActionMenuListWrapper",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/list_wrapper.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/list_wrapper/default/",
     "parameters": [
       {
         "name": "menu_id",
@@ -923,7 +1014,7 @@
         "name": "subtitle",
         "type": "String",
         "default": "`nil`",
-        "description": "Provides dditional context for the dialog, also setting the `aria-describedby` attribute."
+        "description": "Provides additional context for the dialog, also setting the `aria-describedby` attribute."
       },
       {
         "name": "show_divider",
@@ -3034,7 +3125,7 @@
         "name": "size",
         "type": "Integer",
         "default": "`20`",
-        "description": "One of `16`, `20`, `24`, `32`, `40`, `48`, or `80`."
+        "description": "One of `16`, `20`, `24`, `32`, `40`, `48`, `64`, or `80`."
       },
       {
         "name": "shape",
@@ -3108,7 +3199,7 @@
         "name": "tag",
         "type": "Symbol",
         "default": "`:button`",
-        "description": "One of `:a`, `:button`, or `:summary`."
+        "description": "One of `:a`, `:button`, `:clipboard-copy`, or `:summary`."
       },
       {
         "name": "type",
@@ -3249,6 +3340,12 @@
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/button.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/button/default/",
     "parameters": [
+      {
+        "name": "base_button_class",
+        "type": "Class",
+        "default": "`Primer::Beta::BaseButton`",
+        "description": "The button class to render."
+      },
       {
         "name": "scheme",
         "type": "Symbol",
@@ -3277,7 +3374,7 @@
         "name": "tag",
         "type": "Symbol",
         "default": "`:button`",
-        "description": "One of `:a`, `:button`, or `:summary`."
+        "description": "One of `:a`, `:button`, `:clipboard-copy`, or `:summary`."
       },
       {
         "name": "type",
@@ -3361,6 +3458,68 @@
       }
     ]
   },
+  {
+    "component": "ClipboardCopyBaseButton",
+    "status": "beta",
+    "a11y_reviewed": false,
+    "short_name": "ClipboardCopyBaseButton",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/clipboard_copy_base_button.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/clipboard_copy_base_button/default/",
+    "parameters": [
+      {
+        "name": "tag",
+        "type": "Symbol",
+        "default": "`:button`",
+        "description": "One of `:a`, `:button`, `:clipboard-copy`, or `:summary`."
+      },
+      {
+        "name": "type",
+        "type": "Symbol",
+        "default": "`:button`",
+        "description": "One of `:button`, `:reset`, or `:submit`."
+      },
+      {
+        "name": "block",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether button is full-width with `display: block`."
+      },
+      {
+        "name": "disabled",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether or not the button is disabled. If true, this option forces `tag:` to `:button`."
+      },
+      {
+        "name": "inactive",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether the button looks visually disabled, but can still accept all the same interactions as an enabled button."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
+  {
+    "component": "ClipboardCopyButton",
+    "status": "beta",
+    "a11y_reviewed": false,
+    "short_name": "ClipboardCopyButton",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/clipboard_copy_button.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/clipboard_copy_button/default/",
+    "parameters": [
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "The arguments accepted by [Button](/components/beta/button) and [ClipboardCopy](/components/beta/clipboardcopy)."
+      }
+    ]
+  },
   {
     "component": "CloseButton",
     "status": "beta",
@@ -3561,13 +3720,7 @@
         "name": "tag",
         "type": "Symbol",
         "default": "N/A",
-        "description": "One of `:a`, `:button`, or `:summary`."
-      },
-      {
-        "name": "wrapper_arguments",
-        "type": "Hash",
-        "default": "`{}`",
-        "description": "Optional keyword arguments to be passed to the wrapper `<div>` tag."
+        "description": "One of `:a`, `:button`, `:clipboard-copy`, or `:summary`."
       },
       {
         "name": "scheme",
@@ -4399,7 +4552,7 @@
         "name": "tag",
         "type": "Symbol",
         "default": "`:button`",
-        "description": "One of `:a`, `:button`, or `:summary`."
+        "description": "One of `:a`, `:button`, `:clipboard-copy`, or `:summary`."
       },
       {
         "name": "type",
@@ -4490,7 +4643,7 @@
         "name": "tag",
         "type": "Symbol",
         "default": "N/A",
-        "description": "One of `:a`, `:button`, or `:summary`."
+        "description": "One of `:a`, `:button`, `:clipboard-copy`, or `:summary`."
       },
       {
         "name": "type",