primer_view_components 0.0.123 → 0.1.1

data/app/components/primer/alpha/action_list/divider.rb

@@ -3,7 +3,7 @@
 module Primer
   module Alpha
     class ActionList
-      # Section heading rendered above the section contents.
+      # Group heading rendered above the group contents.
       class Divider < Primer::Component
         DEFAULT_SCHEME = :subtle
         SCHEME_MAPPINGS = {
@@ -16,7 +16,7 @@ module Primer
         # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
         def initialize(scheme: DEFAULT_SCHEME, **system_arguments)
           @system_arguments = system_arguments
-          @system_arguments[:tag] = :li
+          @system_arguments[:tag] = :div
           @system_arguments[:role] = :separator
           @system_arguments[:'aria-hidden'] = true
           @scheme = fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)

data/app/components/primer/alpha/action_list/heading.html.erb

@@ -1,4 +1,4 @@
-<%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
+<%= render(Primer::BaseComponent.new(tag: :div, **@system_arguments)) do %>
   <%= render(Primer::BaseComponent.new(tag: @tag, classes: "ActionList-sectionDivider-title", id: @list_id)) do %>
     <%= @title %>
   <% end %>

data/app/components/primer/alpha/action_list/heading.rb

@@ -11,21 +11,27 @@ module Primer
           :filled => "ActionList-sectionDivider--filled"
         }.freeze
         SCHEME_OPTIONS = SCHEME_MAPPINGS.keys.freeze
+        HEADING_MIN = 1
+        HEADING_MAX = 6
+        HEADING_LEVELS = (HEADING_MIN..HEADING_MAX).to_a.freeze
 
         # @param list_id [String] The unique identifier of the sub list the heading belongs to. Used internally.
         # @param title [String] Sub list title.
+        # @param heading_level [Integer] Heading level. Level 2 results in an `<h2>` tag, level 3 an `<h3>` tag, etc.
         # @param subtitle [String] Optional sub list description.
         # @param scheme [Symbol] Display a background color if scheme is `filled`.
-        # @param tag [Symbol] Semantic tag for the heading.
+        # @param tag [Integer] Semantic tag for the heading.
         # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-        def initialize(list_id:, title:, tag: :h3, scheme: DEFAULT_SCHEME, subtitle: nil, **system_arguments)
-          @tag = tag
+        def initialize(list_id:, title:, heading_level: 3, scheme: DEFAULT_SCHEME, subtitle: nil, **system_arguments)
+          raise "Heading level must be between #{HEADING_MIN} and #{HEADING_MAX}" unless HEADING_LEVELS.include?(heading_level)
+
+          @heading_level = heading_level
+          @tag = :"h#{heading_level}"
           @system_arguments = system_arguments
           @list_id = list_id
           @title = title
           @subtitle = subtitle
           @scheme = fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)
-          @system_arguments[:tag] = :li
           @system_arguments[:classes] = class_names(
             "ActionList-sectionDivider",
             SCHEME_MAPPINGS[@scheme],

data/app/components/primer/alpha/action_list/item.rb

@@ -112,7 +112,7 @@ module Primer
         # @private
         renders_one :private_content
 
-        attr_reader :list, :href, :active, :disabled, :parent
+        attr_reader :id, :list, :href, :active, :disabled, :parent
 
         # Whether or not this item is active.
         #
@@ -128,6 +128,7 @@ module Primer
         # @param parent [Primer::Alpha::ActionList::Item] This item's parent item. `nil` if this item is at the root. Used internally.
         # @param label [String] Item label.
         # @param label_classes [String] CSS classes that will be added to the label.
+        # @param label_arguments [Hash] <%= link_to_system_arguments_docs %> used to construct the label.
         # @param content_arguments [Hash] <%= link_to_system_arguments_docs %> used to construct the item's anchor or button tag.
         # @param truncate_label [Boolean] Truncate label with ellipsis.
         # @param href [String] Link URL.
@@ -144,11 +145,12 @@ module Primer
           list:,
           label:,
           label_classes: nil,
+          label_arguments: {},
           content_arguments: {},
           parent: nil,
           truncate_label: false,
           href: nil,
-          role: :listitem,
+          role: nil,
           size: DEFAULT_SIZE,
           scheme: DEFAULT_SCHEME,
           disabled: false,
@@ -182,7 +184,7 @@ module Primer
             "ActionListItem"
           )
 
-          @system_arguments[:role] = role
+          @system_arguments[:role] = role if role
 
           @system_arguments[:aria] ||= {}
           @system_arguments[:aria][:disabled] = "true" if @disabled
@@ -191,8 +193,10 @@ module Primer
           @system_arguments[:data][:targets] = "#{list_class.custom_element_name}.items"
 
           @label_arguments = {
+            **label_arguments,
             classes: class_names(
               label_classes,
+              label_arguments[:classes],
               "ActionListItem-label",
               "ActionListItem-label--truncate" => @truncate_label
             )

data/app/components/primer/alpha/action_list.css.json

@@ -119,5 +119,46 @@
     ".ActionList-sectionDivider--filled",
     ".ActionList-sectionDivider--filled:empty",
     ".ActionList-sectionDivider--filled:first-child"
+  ],
+  "classes": [
+    "ActionListWrap",
+    "ActionListWrap--inset",
+    "ActionListWrap--divided",
+    "ActionListItem-label",
+    "ActionListItem-descriptionWrap--inline",
+    "ActionList-sectionDivider",
+    "ActionListItem",
+    "ActionListItem--navActive",
+    "ActionListItem--hasSubItem",
+    "ActionListContent",
+    "ActionListItem-multiSelectCheckmark",
+    "ActionListItem-singleSelectCheckmark",
+    "ActionListItem-multiSelectIcon",
+    "ActionListItem-multiSelectIconRect",
+    "ActionListItem-description",
+    "ActionListItem-visual",
+    "ActionListItem--danger",
+    "ActionList--subGroup",
+    "ActionListContent--visual16",
+    "ActionListContent--visual20",
+    "ActionListContent--visual24",
+    "ActionListItem-collapseIcon",
+    "ActionListContent--hasActiveSubItem",
+    "ActionListContent--sizeLarge",
+    "ActionListContent--sizeXLarge",
+    "ActionListContent--blockDescription",
+    "ActionListItem-action--leading",
+    "ActionListItem-visual--leading",
+    "ActionListItem-visual--trailing",
+    "ActionListItem-action--trailing",
+    "ActionListItem-descriptionWrap",
+    "ActionListItem-action",
+    "ActionListItem-label--truncate",
+    "ActionListItem--subItem",
+    "ActionListItem--withActions",
+    "ActionListItem-trailingAction",
+    "ActionListItem--trailingActionHover",
+    "ActionList-sectionDivider-title",
+    "ActionList-sectionDivider--filled"
   ]
 }

data/app/components/primer/alpha/action_list.html.erb

@@ -1,15 +1,13 @@
-<%= render(Primer::BaseComponent.new(tag: :ul, role: @role, classes: "ActionListWrap")) do %>
+<%= render(Primer::BaseComponent.new(tag: :div)) do %>
   <% if heading %>
     <%= heading %>
   <% end %>
-  <%= render(Primer::BaseComponent.new(tag: :li, **@list_wrapper_arguments)) do %>
-    <%= render(Primer::BaseComponent.new(tag: :ul, **@system_arguments)) do %>
-      <% items.each_with_index do |item, index| %>
-        <% if index > 0 && @show_dividers %>
-          <%= render(Primer::Alpha::ActionList::Divider.new) %>
-        <% end %>
-        <%= item %>
+  <%= render(Primer::BaseComponent.new(tag: :ul, **@system_arguments)) do %>
+    <% items.each_with_index do |item, index| %>
+      <% if index > 0 && @show_dividers %>
+        <%= render(Primer::Alpha::ActionList::Divider.new) %>
       <% end %>
+      <%= item %>
     <% end %>
   <% end %>
 <% end %>

data/app/components/primer/alpha/action_list.rb

@@ -61,10 +61,10 @@ module Primer
         **system_arguments
       )
         @id = self.class.generate_id
-        @role = role
 
         @system_arguments = system_arguments
         @system_arguments[:tag] = :ul
+        @system_arguments[:role] = role
         @item_classes = item_classes
         @scheme = fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)
         @show_dividers = show_dividers
@@ -72,7 +72,6 @@ module Primer
           SCHEME_MAPPINGS[@scheme],
           system_arguments[:classes],
           "ActionListWrap",
-          "ActionListWrap--subGroup",
           "ActionListWrap--divided" => @show_dividers
         )
 
@@ -81,18 +80,14 @@ module Primer
 
       # @private
       def before_render
+        aria_label = aria(:label, @system_arguments)
+
         if heading.present?
           @system_arguments[:"aria-labelledby"] = @id
-        elsif aria(:label, @system_arguments).blank?
+          raise ArgumentError, "An aria-label should not be provided if a heading is present" if aria_label.present?
+        elsif aria_label.blank?
           raise ArgumentError, "An aria-label or heading must be provided"
         end
-
-        return if items.blank?
-
-        @list_wrapper_arguments[:classes] = class_names(
-          @list_wrapper_arguments[:classes],
-          "ActionListItem--hasSubItem"
-        )
       end
 
       # @private

data/app/components/primer/alpha/auto_complete.css.json

@@ -19,5 +19,16 @@
     ".autocomplete-item.navigation-focus *",
     ".autocomplete-item.selected *",
     ".autocomplete-item[aria-selected=true] *"
+  ],
+  "classes": [
+    "autocomplete-label-stacked",
+    "autocomplete-label-inline",
+    "autocomplete-body",
+    "autocomplete-embedded-icon-wrap",
+    "form-control",
+    "autocomplete-results",
+    "autocomplete-item",
+    "navigation-focus",
+    "selected"
   ]
 }

data/app/components/primer/alpha/banner.css.json

@@ -20,5 +20,19 @@
     ".Banner.Banner--success .Banner-visual .octicon",
     ".Banner.Banner--full",
     ".Banner.Banner--full-whenNarrow"
+  ],
+  "classes": [
+    "Banner",
+    "Banner-actions",
+    "Banner-visual",
+    "octicon",
+    "Banner-message",
+    "Banner-title",
+    "Banner-close",
+    "Banner--warning",
+    "Banner--error",
+    "Banner--success",
+    "Banner--full",
+    "Banner--full-whenNarrow"
   ]
 }

data/app/components/primer/alpha/button_marketing.css.json

@@ -29,5 +29,15 @@
     ".btn-signup-mktg:focus-visible",
     ".btn-small-mktg",
     ".btn-large-mktg"
+  ],
+  "classes": [
+    "btn-mktg",
+    "focus",
+    "disabled",
+    "btn-muted-mktg",
+    "btn-subtle-mktg",
+    "btn-signup-mktg",
+    "btn-small-mktg",
+    "btn-large-mktg"
   ]
 }

data/app/components/primer/alpha/dialog.css.json

@@ -78,5 +78,68 @@
     ".Overlay-backdrop--side-whenNarrow.Overlay-backdrop--placement-top-whenNarrow>.Overlay-whenNarrow",
     ".Overlay-backdrop--full-whenNarrow",
     ".Overlay-backdrop--full-whenNarrow .Overlay"
+  ],
+  "classes": [
+    "Overlay--hidden",
+    "Overlay--visibilityHidden",
+    "Overlay",
+    "Overlay--size-auto",
+    "Overlay--size-full",
+    "Overlay--size-xsmall",
+    "Overlay--size-small",
+    "Overlay--size-small-portrait",
+    "Overlay--size-medium",
+    "Overlay--size-medium-portrait",
+    "Overlay--size-large",
+    "Overlay--size-xlarge",
+    "Overlay--height-auto",
+    "Overlay--height-xsmall",
+    "Overlay--height-small",
+    "Overlay--height-medium",
+    "Overlay--height-large",
+    "Overlay--height-xlarge",
+    "Overlay--width-auto",
+    "Overlay--width-small",
+    "Overlay--width-medium",
+    "Overlay--width-large",
+    "Overlay--width-xlarge",
+    "Overlay--width-xxlarge",
+    "Overlay--motion-scaleFade",
+    "Overlay-form",
+    "Overlay-header",
+    "Overlay-header--divided",
+    "Overlay-body",
+    "Overlay-header--large",
+    "Overlay-headerContentWrap",
+    "Overlay-titleWrap",
+    "Overlay-title",
+    "Overlay-description",
+    "Overlay-actionWrap",
+    "Overlay-body--paddingCondensed",
+    "Overlay-body--paddingNone",
+    "Overlay-footer",
+    "Overlay-footer--divided",
+    "Overlay-footer--alignStart",
+    "Overlay-footer--alignCenter",
+    "Overlay-footer--alignEnd",
+    "Overlay-closeButton",
+    "close-button",
+    "Overlay-backdrop--center",
+    "Overlay-backdrop--anchor",
+    "Overlay-backdrop--side",
+    "Overlay-backdrop--placement-left",
+    "Overlay-backdrop--placement-right",
+    "Overlay-backdrop--placement-bottom",
+    "Overlay-backdrop--placement-top",
+    "Overlay-backdrop--full",
+    "Overlay-backdrop--center-whenNarrow",
+    "Overlay-backdrop--anchor-whenNarrow",
+    "Overlay-backdrop--side-whenNarrow",
+    "Overlay-backdrop--placement-left-whenNarrow",
+    "Overlay-whenNarrow",
+    "Overlay-backdrop--placement-right-whenNarrow",
+    "Overlay-backdrop--placement-bottom-whenNarrow",
+    "Overlay-backdrop--placement-top-whenNarrow",
+    "Overlay-backdrop--full-whenNarrow"
   ]
 }

data/app/components/primer/alpha/dropdown.css.json

@@ -36,5 +36,26 @@
     ".dropdown-menu-sw:after",
     ".dropdown-menu-se:before",
     ".dropdown-menu-se:after"
+  ],
+  "classes": [
+    "dropdown",
+    "dropdown-caret",
+    "dropdown-menu",
+    "dropdown-menu-no-overflow",
+    "dropdown-item",
+    "octicon",
+    "color-fg-",
+    "Label",
+    "btn-link",
+    "dropdown-signout",
+    "dropdown-divider",
+    "dropdown-header",
+    "octicon-check",
+    "dropdown-menu-w",
+    "dropdown-menu-e",
+    "dropdown-menu-ne",
+    "dropdown-menu-s",
+    "dropdown-menu-sw",
+    "dropdown-menu-se"
   ]
 }

data/app/components/primer/alpha/layout.css.json

@@ -76,5 +76,32 @@
     ".Layout-main .Layout-main-centered-xl>.container-lg",
     ".Layout-main .Layout-main-centered-xl>.container-md",
     ".Layout-main .Layout-main-centered-xl>.container-xl"
+  ],
+  "classes": [
+    "Layout",
+    "Layout-divider",
+    "Layout-main",
+    "Layout-sidebar",
+    "Layout--sidebarPosition-flowRow-start",
+    "Layout--sidebarPosition-flowRow-end",
+    "Layout--sidebarPosition-flowRow-none",
+    "Layout--divided",
+    "Layout-divider--flowRow-hidden",
+    "Layout-divider--flowRow-shallow",
+    "Layout--flowRow-until-md",
+    "Layout--flowRow-until-lg",
+    "Layout--gutter-none",
+    "Layout--gutter-condensed",
+    "Layout--gutter-spacious",
+    "Layout--sidebar-narrow",
+    "Layout--sidebar-wide",
+    "Layout--sidebarPosition-start",
+    "Layout--sidebarPosition-end",
+    "Layout-main-centered-lg",
+    "Layout-main-centered-md",
+    "Layout-main-centered-xl",
+    "container-lg",
+    "container-md",
+    "container-xl"
   ]
 }

data/app/components/primer/alpha/menu.css.json

@@ -24,5 +24,16 @@
     ".menu-heading:hover",
     ".menu-heading:first-child",
     ".menu-heading:last-child"
+  ],
+  "classes": [
+    "menu",
+    "menu-item",
+    "selected",
+    "octicon",
+    "Counter",
+    "menu-warning",
+    "avatar",
+    "alert",
+    "menu-heading"
   ]
 }

data/app/components/primer/alpha/nav_list/{section.rb → group.rb}

@@ -6,10 +6,10 @@ module Primer
       # A logical grouping of navigation links with an optional heading.
       #
       # See <%= link_to_component(Primer::Alpha::NavList) %> for usage examples.
-      class Section < ActionList
-        # A special "show more" list item that appears at the bottom of the section. Clicking
+      class Group < ActionList
+        # A special "show more" list item that appears at the bottom of the group. Clicking
         # the item will fetch the next page of results from the URL passed in the `src` argument
-        # and append the resulting chunk of HTML to the section.
+        # and append the resulting chunk of HTML to the group.
         #
         # @param src [String] The URL to query for additional pages of list items.
         # @param pages [Integer] The total number of pages in the result set.
@@ -28,10 +28,10 @@ module Primer
           system_arguments[:data][:action] = "click:nav-list#showMore"
           system_arguments[:data][:"current-page"] = "1"
           system_arguments[:data][:"total-pages"] = pages.to_s
-          system_arguments[:label_classes] = class_names(
-            system_arguments[:label_classes],
-            "color-fg-accent"
-          )
+          system_arguments[:label_arguments] = {
+            **system_arguments[:label_arguments] || {},
+            color: :accent
+          }
 
           component_klass.new(list: self, src: src, **system_arguments)
         }
@@ -51,14 +51,14 @@ module Primer
           super(**@system_arguments)
         end
 
-        # Cause this section to show its list of sub items when rendered.
+        # Cause this group to show its list of sub items when rendered.
         # :nocov:
         def expand!
           @expanded = true
         end
         # :nocov:
 
-        # The items contained within this section.
+        # The items contained within this group.
         #
         # @return [Array<Primer::Alpha::ActionList::Item>]
         def items

data/app/components/primer/alpha/nav_list/item.html.erb

@@ -1,7 +1,7 @@
 <% with_private_content do %>
   <% unless items.empty? %>
     <% capture do %>
-      <%= render(Primer::BaseComponent.new(tag: :ul, **@sub_list_arguments)) do %>
+      <%= render(Primer::BaseComponent.new(tag: :ul, role: :list, **@sub_list_arguments)) do %>
         <% items.each do |item| %>
           <%= item %>
         <% end %>

data/app/components/primer/alpha/nav_list/item.rb

@@ -47,13 +47,17 @@ module Primer
             )
           }
 
+          @list = system_arguments[:list]
+
+          @sub_list_arguments["data-action"] = "keydown:#{@list.custom_element_name}#handleItemWithSubItemKeydown" if @list
+
           overrides = { "data-item-id": @selected_by_ids.join(" ") }
 
           super(**system_arguments, **overrides)
         end
 
         def active?
-          item_active?(self)
+          item_active?(self) && items.empty?
         end
 
         # Cause this item to show its list of sub items when rendered.
@@ -75,11 +79,23 @@ module Primer
 
           raise "Cannot render a trailing action for an item with subitems" if items.present? && trailing_action.present?
 
+          raise "Cannot pass `selected_by_ids:` for an item with subitems, since parent items cannot be selected" if items.present? && @selected_by_ids.present?
+
           return if items.blank?
 
+          @sub_list_arguments[:aria] = merge_aria(
+            @sub_list_arguments,
+            { aria: { labelledby: id } }
+          )
+
+          raise ArgumentError, "Items with sub-items cannot have hrefs" if href.present?
+
           @content_arguments[:tag] = :button
           @content_arguments[:"aria-expanded"] = @expanded.to_s
-          @content_arguments[:"data-action"] = "click:#{@list.custom_element_name}#handleItemWithSubItemClick"
+          @content_arguments[:"data-action"] = "
+            click:#{@list.custom_element_name}#handleItemWithSubItemClick
+            keydown:#{@list.custom_element_name}#handleItemWithSubItemKeydown
+          "
 
           with_private_trailing_action_icon(:"chevron-down", classes: "ActionListItem-collapseIcon")
 

data/app/components/primer/alpha/nav_list.d.ts

@@ -18,6 +18,7 @@ export declare class NavListElement extends HTMLElement {
     collapseItem(item: HTMLElement): void;
     itemIsExpanded(item: HTMLElement | null): boolean;
     handleItemWithSubItemClick(e: Event): void;
+    handleItemWithSubItemKeydown(e: KeyboardEvent): void;
     private showMore;
     private setShowMoreItemState;
 }

data/app/components/primer/alpha/nav_list.html.erb

@@ -1,10 +1,10 @@
-<%= render(Primer::BaseComponent.new(tag: :ul, **@system_arguments)) do %>
-  <% sections.each_with_index do |section, index| %>
-    <% if index > 0 %>
-      <%= render(Primer::Alpha::ActionList::Divider.new) %>
+<%= render(Primer::BaseComponent.new(tag: :nav, **@system_arguments)) do %>
+  <nav-list>
+    <% groups.each_with_index do |group, index| %>
+      <% if index > 0 %>
+        <%= render(Primer::Alpha::ActionList::Divider.new) %>
+      <% end %>
+      <%= group %>
     <% end %>
-    <li>
-      <%= section %>
-    </li>
-  <% end %>
+  </nav-list>
 <% end %>

data/app/components/primer/alpha/nav_list.js

@@ -82,6 +82,7 @@ let NavListElement = class NavListElement extends HTMLElement {
         var _a;
         (_a = item.nextElementSibling) === null || _a === void 0 ? void 0 : _a.setAttribute('data-hidden', '');
         item.setAttribute('aria-expanded', 'false');
+        item.focus();
     }
     itemIsExpanded(item) {
         if ((item === null || item === void 0 ? void 0 : item.tagName) === 'A') {
@@ -105,6 +106,26 @@ let NavListElement = class NavListElement extends HTMLElement {
         }
         e.stopPropagation();
     }
+    // collapse item
+    handleItemWithSubItemKeydown(e) {
+        const el = e.currentTarget;
+        if (!(el instanceof HTMLElement))
+            return;
+        let button = el.closest('button');
+        if (!button) {
+            const button_id = el.getAttribute('aria-labelledby');
+            if (button_id) {
+                button = document.getElementById(button_id);
+            }
+            else {
+                return;
+            }
+        }
+        if (this.itemIsExpanded(button) && e.key === 'Escape') {
+            this.collapseItem(button);
+        }
+        e.stopPropagation();
+    }
     async showMore(e) {
         var _a, _b;
         e.preventDefault();
@@ -157,6 +178,9 @@ _NavListElement_instances = new WeakSet(), _NavListElement_parseHTML = function
     var _a;
     // First we compare the selected link to data-item-id for each nav item
     for (const navItem of this.items) {
+        if (navItem.classList.contains('ActionListItem--hasSubItem')) {
+            continue;
+        }
         const keys = ((_a = navItem.getAttribute('data-item-id')) === null || _a === void 0 ? void 0 : _a.split(' ')) || [];
         if (keys.includes(itemId)) {
             return navItem;