primer_view_components 0.1.7 → 0.1.9

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/alpha/overlay_preview/middle_of_page_with_relative_container.html.erb

@@ -0,0 +1,19 @@
+<div style="width:100%; height: 400px; display: flex; justify-content: center; align-items: center;">
+  <div style="position:relative;">
+    <%= render(Primer::Alpha::Overlay.new(
+      title: title,
+      subtitle: subtitle,
+      role: role,
+      size: size,
+      placement: placement,
+      anchor_align: anchor_align,
+      anchor_side: anchor_side,
+      allow_out_of_bounds: allow_out_of_bounds,
+      visually_hide_title: visually_hide_title,
+    )) do |d| %>
+      <% d.with_header(title: title, size: header_size) %>
+      <% d.with_show_button { button_text } %>
+      <% d.with_body { body_text } %>
+    <% end %>
+  </div>
+</div>

data/previews/primer/alpha/overlay_preview.rb

@@ -132,6 +132,37 @@ module Primer
                                body_text: body_text
                              })
       end
+
+      # @label Middle Of Page with relative container
+      #
+      # @param title [String] text
+      # @param subtitle [String] text
+      # @param role [Symbol] select [dialog, menu]
+      # @param size [Symbol] select [auto, small, medium, medium_portrait, large, xlarge]
+      # @param anchor_align [Symbol] select [start, center, end]
+      # @param anchor_side [Symbol] select [inside_top, inside_bottom, inside_left, inside_right, inside_center, outside_top, outside_bottom, outside_left, outside_right]
+      # @param allow_out_of_bounds [Boolean] toggle
+      # @param visually_hide_title [Boolean] toggle
+      #
+      # @param header_size [Symbol] select [medium, large]
+      # @param button_text [String] text
+      # @param body_text [String] text
+      def middle_of_page_with_relative_container(title: "Test Overlay", subtitle: nil, role: :dialog, size: :auto, placement: :anchored, anchor_align: :center, anchor_side: :outside_bottom, allow_out_of_bounds: false, visually_hide_title: false, header_size: :medium, button_text: "Show Overlay", body_text: "")
+        render_with_template(locals: {
+                               title: title,
+                               subtitle: subtitle,
+                               role: role,
+                               size: size,
+                               placement: placement,
+                               anchor_align: anchor_align,
+                               anchor_side: anchor_side,
+                               allow_out_of_bounds: allow_out_of_bounds,
+                               visually_hide_title: visually_hide_title,
+                               header_size: header_size,
+                               button_text: button_text,
+                               body_text: body_text
+                             })
+      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",
@@ -1682,7 +1692,13 @@
         "name": "subtitle",
         "type": "String",
         "default": "`nil`",
-        "description": "Provides dditional context for the Overlay, also setting the `aria-describedby` attribute."
+        "description": "Provides additional context for the Overlay, also setting the `aria-describedby` attribute."
+      },
+      {
+        "name": "overlay_id",
+        "type": "String",
+        "default": "`nil`",
+        "description": "Provides the id of the overlay element so the close button can close it"
       },
       {
         "name": "size",

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": {