primer_view_components 0.14.0 → 0.15.1

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/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/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/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",

data/static/audited_at.json

@@ -8,7 +8,10 @@
   "Primer::Alpha::ActionList::Heading": "",
   "Primer::Alpha::ActionList::Item": "",
   "Primer::Alpha::ActionMenu": "",
-  "Primer::Alpha::ActionMenu::List": "2023-07-10",
+  "Primer::Alpha::ActionMenu::Group": "2023-07-10",
+  "Primer::Alpha::ActionMenu::Heading": "",
+  "Primer::Alpha::ActionMenu::List": "",
+  "Primer::Alpha::ActionMenu::ListWrapper": "2023-07-10",
   "Primer::Alpha::AutoComplete": "",
   "Primer::Alpha::AutoComplete::Item": "",
   "Primer::Alpha::Banner": "",

data/static/classes.json

@@ -179,6 +179,9 @@
   "Button--iconOnly": [
     "Primer::Beta::Button"
   ],
+  "Button--inactive": [
+    "Primer::Beta::Button"
+  ],
   "Button--invisible": [
     "Primer::Beta::Button"
   ],

data/static/constants.json

@@ -125,13 +125,20 @@
   "Primer::Alpha::ActionMenu": {
     "DEFAULT_PRELOAD": false,
     "DEFAULT_SELECT_VARIANT": "none",
+    "Group": "Primer::Alpha::ActionMenu::Group",
+    "Heading": "Primer::Alpha::ActionMenu::Heading",
     "List": "Primer::Alpha::ActionMenu::List",
+    "ListWrapper": "Primer::Alpha::ActionMenu::ListWrapper",
     "SELECT_VARIANT_OPTIONS": [
       "single",
       "multiple",
       "none"
     ]
   },
+  "Primer::Alpha::ActionMenu::Group": {
+  },
+  "Primer::Alpha::ActionMenu::Heading": {
+  },
   "Primer::Alpha::ActionMenu::List": {
     "DEFAULT_ITEM_TAG": "button",
     "ITEM_TAG_OPTIONS": [
@@ -140,6 +147,8 @@
       "button"
     ]
   },
+  "Primer::Alpha::ActionMenu::ListWrapper": {
+  },
   "Primer::Alpha::AutoComplete": {
     "Item": "Primer::Alpha::AutoComplete::Item"
   },