primer_view_components 0.1.6 → 0.1.8

data/previews/primer/alpha/action_menu_preview.rb

@@ -9,10 +9,12 @@ module Primer
       # @param select_variant [Symbol] select [single, multiple, none]
       # @param anchor_align [Symbol] select [start, center, end]
       # @param anchor_side [Symbol] select [outside_bottom, outside_top, outside_left, outside_right]
+      # @param size [Symbol] select [auto, small, medium, large, xlarge]
       def playground(
-        select_variant: Primer::Alpha::ActionMenu::DEFAULT_SELECT_VARIANT, anchor_align: Primer::Alpha::Overlay::DEFAULT_ANCHOR_ALIGN, anchor_side: Primer::Alpha::Overlay::DEFAULT_ANCHOR_SIDE
+        select_variant: Primer::Alpha::ActionMenu::DEFAULT_SELECT_VARIANT, anchor_align: Primer::Alpha::Overlay::DEFAULT_ANCHOR_ALIGN, anchor_side: Primer::Alpha::Overlay::DEFAULT_ANCHOR_SIDE,
+        size: Primer::Alpha::Overlay::DEFAULT_SIZE
       )
-        render(Primer::Alpha::ActionMenu.new(select_variant: select_variant, anchor_align: anchor_align, anchor_side: anchor_side)) do |menu|
+        render(Primer::Alpha::ActionMenu.new(select_variant: select_variant, anchor_align: anchor_align, anchor_side: anchor_side, size: size)) do |menu|
           menu.with_show_button { "Menu" }
           menu.with_item(label: "Copy link")
           menu.with_item(label: "Quote reply")
@@ -46,6 +48,23 @@ module Primer
         end
       end
 
+      # @label Wide
+      #
+      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" }
+
+          menu.with_item(label: "Default", active: true, value: "default") do |item|
+            item.with_trailing_visual_label(scheme: :accent, inline: true).with_content("Recommended")
+            item.with_description { "This is an example for wide ActionMenus" }
+          end
+
+          menu.with_item(label: "Extended", active: false, value: "extended") do |item|
+            item.with_description { "It allows for extended descriptions with extra afforance for additional visuals" }
+          end
+        end
+      end
+
       # @label With icon button
       #
       def with_icon_button
@@ -166,9 +185,28 @@ module Primer
           component.with_item(label: "Alert", tag: :button, content_arguments: { onclick: "alert('Foo')", onkeydown: "if (event.key === 'Enter') { alert(event.key) }" })
           component.with_item(label: "Navigate", tag: :a, content_arguments: { href: UrlHelpers.action_menu_landing_path })
           component.with_item(label: "Copy text", tag: :"clipboard-copy", content_arguments: { value: "Text to copy" })
+          component.with_item(
+            label: "Submit form",
+            href: UrlHelpers.action_menu_form_action_path,
+            form_arguments: {
+              name: "foo", value: "bar", method: :post
+            }
+          )
         end
       end
 
+      # @label Single select form
+      #
+      def single_select_form(route_format: :html)
+        render_with_template(locals: { route_format: route_format })
+      end
+
+      # @label Multiple select form
+      #
+      def multiple_select_form(route_format: :html)
+        render_with_template(locals: { route_format: route_format })
+      end
+
       # @label With disabled items
       #
       def with_disabled_items
@@ -206,6 +244,12 @@ module Primer
         end
       end
 
+      # @label [Item] Submitting Forms
+      #
+      def submitting_forms
+        render_with_template(locals: {})
+      end
+
       # @label [Item] Inline description
       #
       def inline_description

data/previews/primer/alpha/nav_list_preview/trailing_action.html.erb

@@ -1,19 +1,19 @@
-<%= render(Primer::Alpha::NavList.new) do |list| %>
+<%= render(Primer::Alpha::NavList.new(aria: { label: "Workflow results" })) do |list| %>
   <% list.with_group do |group| %>
-    <%= group.with_heading(title: "Shopping list") %>
-    <% group.with_item(label: "Bread", href: "/list/1") do |item| %>
-      <%= item.with_trailing_action(icon: :plus, aria: { label: "Activate alert" }, name: "bread_button") %>
+    <% group.with_heading(title: "Workflows") %>
+    <% group.with_item(label: "Build and Test", href: "/workflows/1") do |item| %>
+      <%= item.with_trailing_action(icon: :sync, aria: { label: "Build and test: re-run workflow" }, name: "build_and_test_button") %>
     <% end %>
-    <% group.with_item(label: "Cheese", href: "/list/2") do |item| %>
-      <%= item.with_trailing_action(icon: :plus, aria: { label: "Activate alert" }, name: "cheese_button") %>
+    <% group.with_item(label: "Publish", href: "/workflows/2") do |item| %>
+      <%= item.with_trailing_action(icon: :sync, aria: { label: "Publish: re-run workflow" }, name: "publish_button") %>
     <% end %>
   <% end %>
 <% end %>
 
 <script type="text/javascript" data-eval="true">
-  const breadButton = document.querySelector("[name=bread_button]")
-  breadButton.addEventListener("click", () => alert("You selected bread."))
+  const breadButton = document.querySelector("[name=build_and_test_button]")
+  breadButton.addEventListener("click", () => alert("The 'Build and Test' workflow will be re-run."))
 
-  const cheeseButton = document.querySelector("[name=cheese_button]")
-  cheeseButton.addEventListener("click", () => alert("You selected cheese."))
+  const cheeseButton = document.querySelector("[name=publish_button]")
+  cheeseButton.addEventListener("click", () => alert("The 'Publish' workflow will be re-run."))
 </script>

data/previews/primer/alpha/nav_list_preview.rb

@@ -6,13 +6,11 @@ module Primer
     class NavListPreview < ViewComponent::Preview
       # @label Playground
       def playground
-        render(Primer::Alpha::NavList.new(selected_item_id: :code_review_limits)) do |list|
-          list.with_group do |group|
-            group.with_heading(title: "Repository settings")
+        render(Primer::Alpha::NavList.new(aria: { label: "Repository settings" }, selected_item_id: :code_review_limits)) do |list|
+          list.with_heading(title: "Repository settings")
 
-            group.with_item(label: "General", href: "/general") do |item|
-              item.with_leading_visual_icon(icon: :gear)
-            end
+          list.with_item(label: "General", href: "/general") do |item|
+            item.with_leading_visual_icon(icon: :gear)
           end
 
           list.with_group do |group|
@@ -35,13 +33,17 @@ module Primer
 
       # @label Default
       def default
-        render(Primer::Alpha::NavList.new(selected_item_id: :code_review_limits)) do |list|
-          list.with_group do |group|
-            group.with_heading(title: "Repository settings")
+        render(Primer::Alpha::NavList.new(aria: { label: "Repository settings" }, selected_item_id: :code_review_limits)) do |list|
+          list.with_heading(title: "Repository settings")
 
-            group.with_item(label: "General", href: "/general") do |item|
-              item.with_leading_visual_icon(icon: :gear)
-            end
+          list.with_item(label: "General", href: "/general") do |item|
+            item.with_leading_visual_icon(icon: :gear)
+          end
+
+          list.with_divider
+
+          list.with_item(label: "Settings", href: "/settings") do |item|
+            item.with_leading_visual_icon(icon: :beaker)
           end
 
           list.with_group do |group|
@@ -62,21 +64,40 @@ module Primer
         end
       end
 
+      # @label Top-level items
+      #
+      def top_level_items
+        render(Primer::Alpha::NavList.new(aria: { label: "Account settings" })) do |list|
+          list.with_heading(title: "Account settings")
+
+          list.with_item(label: "General", href: "/general") do |item|
+            item.with_leading_visual_icon(icon: :gear)
+          end
+
+          list.with_item(label: "Billing", href: "/billing") do |item|
+            item.with_leading_visual_icon(icon: :"credit-card")
+          end
+
+          list.with_item(label: "Change password", href: "/change_password") do |item|
+            item.with_leading_visual_icon(icon: :key)
+          end
+        end
+      end
+
       # @label Show more item
       def show_more_item
-        render(Primer::Alpha::NavList.new) do |list|
+        render(Primer::Alpha::NavList.new(aria: { label: "My favorite foods" })) do |list|
           list.with_group 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")
-            group.with_show_more_item(label: "Show more", src: "/nav_list_items", pages: 2)
+            group.with_show_more_item(label: "Show more foods", src: UrlHelpers.nav_list_items_path, pages: 2)
           end
         end
       end
 
       # @label Trailing action
-      def trailing_action
-      end
+      def trailing_action; end
     end
   end
 end

data/previews/primer/beta/button_preview/trailing_counter.html.erb

@@ -0,0 +1,11 @@
+<%= render(Primer::Beta::Button.new(
+    scheme: :primary,
+    size: :medium,
+    block: block,
+    id: id,
+    align_content: align_content
+)) do |component| %>
+  <% component.with_leading_visual_icon(icon: :star) %>
+  <% component.with_trailing_visual_counter(count: 15) %>
+  Button
+<% end %>

data/previews/primer/beta/button_preview.rb

@@ -266,6 +266,21 @@ module Primer
                              })
       end
 
+      # @label Trailing Counter
+      # @param block toggle
+      # @param align_content select [center, start]
+      def trailing_counter(
+        block: false,
+        id: "button-preview",
+        align_content: :center
+      )
+        render_with_template(locals: {
+                               block: block,
+                               id: id,
+                               align_content: align_content
+                             })
+      end
+
       # @label With tooltip
       # @param scheme select [default, primary, danger, invisible, link]
       # @param size select [small, medium]

data/previews/primer/box_preview.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Primer
+  # @label Box
+  class BoxPreview < ViewComponent::Preview
+    # @label Playground
+    #
+    # @param content [String] text
+    def playground(content: "Playground")
+      render(Primer::Box.new) { content }
+    end
+
+    # @label Default
+    def default(content: "Default")
+      render(Primer::Box.new) { content }
+    end
+
+    # @label Border
+    def border(content: "Box with border")
+      render(Primer::Box.new(border: true, p: 3)) { content }
+    end
+
+    # @label Border Bottom
+    def border_bottom(content: "Box with bottom border")
+      render(Primer::Box.new(border: :bottom, p: 3)) { content }
+    end
+  end
+end

data/static/arguments.json

@@ -43,6 +43,12 @@
         "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",
@@ -73,6 +79,17 @@
       }
     ]
   },
+  {
+    "component": "ActionList::FormWrapper",
+    "status": "alpha",
+    "a11y_reviewed": false,
+    "short_name": "ActionListFormWrapper",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list/form_wrapper.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_list/form_wrapper/default/",
+    "parameters": [
+
+    ]
+  },
   {
     "component": "ActionList::Heading",
     "status": "alpha",
@@ -81,12 +98,6 @@
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list/heading.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_list/heading/default/",
     "parameters": [
-      {
-        "name": "id",
-        "type": "String",
-        "default": "`self.class.generate_id`",
-        "description": "The group's identifier (ID attribute in HTML)."
-      },
       {
         "name": "title",
         "type": "String",
@@ -111,12 +122,6 @@
         "default": "`:subtle`",
         "description": "Display a background color if scheme is `filled`."
       },
-      {
-        "name": "tag",
-        "type": "Integer",
-        "default": "N/A",
-        "description": "Semantic tag for the heading."
-      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -169,6 +174,12 @@
         "default": "`{}`",
         "description": "[System arguments](/system-arguments) used to construct the item's anchor or button tag."
       },
+      {
+        "name": "form_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "Allows the item to submit a form on click. The URL passed in the `href:` option will be used as the form action. Pass the `method:` option to this hash to control what kind of request is made, One of `:delete`, `:get`, `:head`, `:patch`, `:post`, or `:put`. The `name:` option is required and specifies the desired name of the field that will be included in the params sent to the server on form submission. Specify the `value:` option to send a custom value to the server; otherwise the value of `name:` is sent."
+      },
       {
         "name": "truncate_label",
         "type": "Boolean",
@@ -263,6 +274,12 @@
         "default": "`:outside_bottom`",
         "description": "One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`.."
       },
+      {
+        "name": "size",
+        "type": "Symbol",
+        "default": "`:auto`",
+        "description": "One of `:auto`, `:large`, `:medium`, `:medium_portrait`, `:small`, or `:xlarge`.."
+      },
       {
         "name": "src",
         "type": "String",
@@ -291,7 +308,13 @@
         "name": "select_variant",
         "type": "Symbol",
         "default": "`:none`",
-        "description": ". One of `:multiple`, `:none`, or `:single`.."
+        "description": "One of `:multiple`, `:none`, or `:single`."
+      },
+      {
+        "name": "form_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "Allows an `ActionMenu` 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."
       },
       {
         "name": "system_arguments",
@@ -319,7 +342,7 @@
         "name": "system_arguments",
         "type": "Hash",
         "default": "N/A",
-        "description": "[System arguments](/system-arguments)"
+        "description": "The arguments accepted by [ActionList](/components/alpha/actionlist)"
       }
     ]
   },
@@ -1361,6 +1384,28 @@
       }
     ]
   },
+  {
+    "component": "NavList::Divider",
+    "status": "alpha",
+    "a11y_reviewed": false,
+    "short_name": "NavListDivider",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list/divider.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/nav_list/divider/default/",
+    "parameters": [
+      {
+        "name": "scheme",
+        "type": "Symbol",
+        "default": "`:subtle`",
+        "description": "Display a background color if scheme is `filled`."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
   {
     "component": "NavList::Group",
     "status": "alpha",

data/static/audited_at.json

@@ -1,6 +1,7 @@
 {
   "Primer::Alpha::ActionList": "",
   "Primer::Alpha::ActionList::Divider": "",
+  "Primer::Alpha::ActionList::FormWrapper": "",
   "Primer::Alpha::ActionList::Heading": "",
   "Primer::Alpha::ActionList::Item": "",
   "Primer::Alpha::ActionMenu": "",
@@ -30,6 +31,7 @@
   "Primer::Alpha::Menu": "",
   "Primer::Alpha::MultiInput": "",
   "Primer::Alpha::NavList": "",
+  "Primer::Alpha::NavList::Divider": "",
   "Primer::Alpha::NavList::Group": "",
   "Primer::Alpha::NavList::Item": "",
   "Primer::Alpha::Navigation::Tab": "",

data/static/classes.json

@@ -237,6 +237,9 @@
   "Subhead-actions": [
     "Primer::Beta::Subhead"
   ],
+  "ActionListHeader": [
+    "Primer::Alpha::ActionList"
+  ],
   "SegmentedControl": [
     "Primer::Alpha::SegmentedControl"
   ],

data/static/constants.json

@@ -5,6 +5,7 @@
     "DEFAULT_SCHEME": "full",
     "DEFAULT_SELECT_VARIANT": "none",
     "Divider": "Primer::Alpha::ActionList::Divider",
+    "FormWrapper": "Primer::Alpha::ActionList::FormWrapper",
     "Heading": "Primer::Alpha::ActionList::Heading",
     "Item": "Primer::Alpha::ActionList::Item",
     "MENU_ROLE": "menu",
@@ -39,6 +40,17 @@
       "filled"
     ]
   },
+  "Primer::Alpha::ActionList::FormWrapper": {
+    "DEFAULT_HTTP_METHOD": "get",
+    "HTTP_METHOD_OPTIONS": [
+      "get",
+      "post",
+      "patch",
+      "put",
+      "delete",
+      "head"
+    ]
+  },
   "Primer::Alpha::ActionList::Heading": {
     "DEFAULT_SCHEME": "subtle",
     "HEADING_LEVELS": [
@@ -369,9 +381,12 @@
   "Primer::Alpha::MultiInput": {
   },
   "Primer::Alpha::NavList": {
+    "Divider": "Primer::Alpha::NavList::Divider",
     "Group": "Primer::Alpha::NavList::Group",
     "Item": "Primer::Alpha::NavList::Item"
   },
+  "Primer::Alpha::NavList::Divider": {
+  },
   "Primer::Alpha::NavList::Group": {
   },
   "Primer::Alpha::NavList::Item": {
@@ -623,7 +638,12 @@
     ]
   },
   "Primer::Beta::AutoComplete::Item": {
-    "ALLOWED_DESCRIPTION_VARIANTS": [
+    "DEFAULT_DESCRIPTION_VARIANT": "block",
+    "DESCRIPTION_VARIANT_MAPPINGS": {
+      "inline": "ActionListItem-descriptionWrap--inline",
+      "block": "ActionListItem-descriptionWrap"
+    },
+    "DESCRIPTION_VARIANT_OPTIONS": [
       "inline",
       "block"
     ]