primer_view_components 0.1.7 → 0.1.8

data/app/components/primer/component.rb

@@ -16,6 +16,7 @@ module Primer
       include ViewComponent::PolymorphicSlots
     end
 
+    include AttributesHelper
     include ClassNameHelper
     include FetchOrFallbackHelper
     include TestSelectorHelper
@@ -25,15 +26,13 @@ module Primer
     include Audited::Dsl
 
     INVALID_ARIA_LABEL_TAGS = [:div, :span, :p].freeze
-    PLURAL_ARIA_ATTRIBUTES = %i[describedby labelledby].freeze
-    PLURAL_DATA_ATTRIBUTES = %i[target targets].freeze
 
     def self.deprecated?
       status == :deprecated
     end
 
-    def self.generate_id
-      "#{name.demodulize.underscore.dasherize}-#{SecureRandom.uuid}"
+    def self.generate_id(base_name: name.demodulize.underscore.dasherize)
+      "#{base_name}-#{SecureRandom.uuid}"
     end
 
     private
@@ -56,98 +55,6 @@ module Primer
       ActiveSupport::Deprecation.warn(message)
     end
 
-    def aria(val, system_arguments)
-      system_arguments[:"aria-#{val}"] || system_arguments.dig(:aria, val.to_sym)
-    end
-
-    # Merges hashes that contain "aria-*" keys and nested aria: hashes. Removes keys from
-    # each hash and returns them in the new hash.
-    #
-    # Eg. merge_aria({ "aria-disabled": "true" }, { aria: { invalid: "true" } })
-    #     => { disabled: "true", invalid: "true" }
-    #
-    # Certain aria attributes can contain multiple values separated by spaces. merge_aria
-    # will combine these plural attributes into a composite string.
-    #
-    # Eg. merge_aria({ "aria-labelledby": "foo" }, { aria: { labelledby: "bar" } })
-    #     => { labelledby: "foo bar" }
-    #
-    # It's designed to be used to normalize and merge aria information from system_arguments
-    # hashes. Consider using this pattern in component initializers:
-    #
-    # @system_arguments[:aria] = merge_aria(
-    #   @system_arguments,
-    #   { aria: { labelled_by: id } }
-    # )
-    def merge_aria(*hashes)
-      merge_prefixed_attribute_hashes(
-        *hashes, prefix: :aria, plural_keys: PLURAL_ARIA_ATTRIBUTES
-      )
-    end
-
-    # Merges hashes that contain "data-*" keys and nested data: hashes. Removes keys from
-    # each hash and returns them in the new hash.
-    #
-    # Eg. merge_data({ "data-foo": "true" }, { data: { bar: "true" } })
-    #     => { foo: "true", bar: "true" }
-    #
-    # Certain data attributes can contain multiple values separated by spaces. merge_data
-    # will combine these plural attributes into a composite string.
-    #
-    # Eg. merge_data({ "data-target": "foo" }, { data: { target: "bar" } })
-    #     => { target: "foo bar" }
-    #
-    # It's designed to be used to normalize and merge data information from system_arguments
-    # hashes. Consider using this pattern in component initializers:
-    #
-    # @system_arguments[:data] = merge_aria(
-    #   @system_arguments,
-    #   { data: { foo: "bar" } }
-    # )
-    def merge_data(*hashes)
-      merge_prefixed_attribute_hashes(
-        *hashes, prefix: :data, plural_keys: PLURAL_DATA_ATTRIBUTES
-      )
-    end
-
-    def merge_prefixed_attribute_hashes(*hashes, prefix:, plural_keys:)
-      {}.tap do |result|
-        hashes.each do |hash|
-          next unless hash
-
-          prefix_hash = hash.delete(prefix) || {}
-
-          prefix_hash.each_pair do |key, val|
-            result[key] =
-              if plural_keys.include?(key)
-                [*(result[key] || "").split, val].join(" ").strip
-              else
-                val
-              end
-          end
-
-          hash.delete_if do |key, val|
-            key_s = key.to_s
-
-            if key.start_with?("#{prefix}-")
-              bare_key = key_s.sub("#{prefix}-", "").to_sym
-
-              result[bare_key] =
-                if plural_keys.include?(bare_key)
-                  [*(result[bare_key] || "").split, val].join(" ").strip
-                else
-                  val
-                end
-
-              true
-            else
-              false
-            end
-          end
-        end
-      end
-    end
-
     def validate_aria_label
       aria_label = aria("label", @system_arguments)
       aria_labelledby = aria("labelledby", @system_arguments)

data/app/lib/primer/attributes_helper.rb

@@ -0,0 +1,105 @@
+# frozen_string_literal: true
+
+module Primer
+  # :nodoc:
+  module AttributesHelper
+    PLURAL_ARIA_ATTRIBUTES = %i[describedby labelledby].freeze
+    PLURAL_DATA_ATTRIBUTES = %i[target targets].freeze
+
+    def aria(val, system_arguments)
+      system_arguments[:"aria-#{val}"] || system_arguments.dig(:aria, val.to_sym)
+    end
+
+    def data(val, system_arguments)
+      system_arguments[:"data-#{val}"] || system_arguments.dig(:data, val.to_sym)
+    end
+
+    # Merges hashes that contain "aria-*" keys and nested aria: hashes. Removes keys from
+    # each hash and returns them in the new hash.
+    #
+    # Eg. merge_aria({ "aria-disabled": "true" }, { aria: { invalid: "true" } })
+    #     => { disabled: "true", invalid: "true" }
+    #
+    # Certain aria attributes can contain multiple values separated by spaces. merge_aria
+    # will combine these plural attributes into a composite string.
+    #
+    # Eg. merge_aria({ "aria-labelledby": "foo" }, { aria: { labelledby: "bar" } })
+    #     => { labelledby: "foo bar" }
+    #
+    # It's designed to be used to normalize and merge aria information from system_arguments
+    # hashes. Consider using this pattern in component initializers:
+    #
+    # @system_arguments[:aria] = merge_aria(
+    #   @system_arguments,
+    #   { aria: { labelled_by: id } }
+    # )
+    def merge_aria(*hashes)
+      merge_prefixed_attribute_hashes(
+        *hashes, prefix: :aria, plural_keys: PLURAL_ARIA_ATTRIBUTES
+      )
+    end
+
+    # Merges hashes that contain "data-*" keys and nested data: hashes. Removes keys from
+    # each hash and returns them in the new hash.
+    #
+    # Eg. merge_data({ "data-foo": "true" }, { data: { bar: "true" } })
+    #     => { foo: "true", bar: "true" }
+    #
+    # Certain data attributes can contain multiple values separated by spaces. merge_data
+    # will combine these plural attributes into a composite string.
+    #
+    # Eg. merge_data({ "data-target": "foo" }, { data: { target: "bar" } })
+    #     => { target: "foo bar" }
+    #
+    # It's designed to be used to normalize and merge data information from system_arguments
+    # hashes. Consider using this pattern in component initializers:
+    #
+    # @system_arguments[:data] = merge_aria(
+    #   @system_arguments,
+    #   { data: { foo: "bar" } }
+    # )
+    def merge_data(*hashes)
+      merge_prefixed_attribute_hashes(
+        *hashes, prefix: :data, plural_keys: PLURAL_DATA_ATTRIBUTES
+      )
+    end
+
+    def merge_prefixed_attribute_hashes(*hashes, prefix:, plural_keys:)
+      {}.tap do |result|
+        hashes.each do |hash|
+          next unless hash
+
+          prefix_hash = hash.delete(prefix) || {}
+
+          prefix_hash.each_pair do |key, val|
+            result[key] =
+              if plural_keys.include?(key)
+                [*(result[key] || "").split, val].join(" ").strip
+              else
+                val
+              end
+          end
+
+          hash.delete_if do |key, val|
+            key_s = key.to_s
+
+            if key.start_with?("#{prefix}-")
+              bare_key = key_s.sub("#{prefix}-", "").to_sym
+
+              result[bare_key] =
+                if plural_keys.include?(bare_key)
+                  [*(result[bare_key] || "").split, val].join(" ").strip
+                else
+                  val
+                end
+
+              true
+            else
+              false
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/lib/primer/forms/text_field.rb

@@ -6,6 +6,11 @@ module Primer
     class TextField < BaseComponent
       delegate :builder, :form, to: :@input
 
+      INPUT_WRAP_SIZE = {
+        small: "FormControl-input-wrap--small",
+        large: "FormControl-input-wrap--large"
+      }.freeze
+
       def initialize(input:)
         @input = input
 
@@ -17,6 +22,7 @@ module Primer
         @field_wrap_arguments = {
           class: class_names(
             "FormControl-input-wrap",
+            INPUT_WRAP_SIZE[input.size],
             "FormControl-input-wrap--trailingAction": @input.show_clear_button?,
             "FormControl-input-wrap--leadingVisual": @input.leading_visual?
           ),

data/lib/primer/view_components/version.rb

@@ -6,7 +6,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 1
-      PATCH = 7
+      PATCH = 8
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

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

@@ -98,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",
@@ -128,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",
@@ -1396,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

@@ -31,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

@@ -381,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": {