primer_view_components 0.0.123 → 0.1.1

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

@@ -3,13 +3,13 @@
 module Primer
   module Alpha
     # `NavList` provides a simple way to render side navigation, i.e. navigation
-    # that appears to the left or right side of some main content. Each section in a
+    # that appears to the left or right side of some main content. Each group in a
     # nav list is a list of links.
     #
-    # Nav list sections can contain sub items. Rather than navigating to a URL, sections
+    # Nav list groups can contain sub items. Rather than navigating to a URL, groups
     # with sub items expand and collapse on click. To indicate this functionality, the
-    # section will automatically render with a trailing chevron icon that changes direction
-    # when the section expands and collapses.
+    # group will automatically render with a trailing chevron icon that changes direction
+    # when the group expands and collapses.
     #
     # Nav list items appear visually active when selected. Each nav item must have one
     # or more ID values that determine which item will appear selected. Use the
@@ -22,40 +22,40 @@ module Primer
         "nav-list"
       end
 
-      # Sections. Each section is a list of links and an optional heading.
+      # Groups. Each group is a list of links and an optional heading.
       #
-      # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::NavList::Section) %>.
-      renders_many :sections, lambda { |**system_arguments|
-        Primer::Alpha::NavList::Section.new(selected_item_id: @selected_item_id, **system_arguments)
+      # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::NavList::Group) %>.
+      renders_many :groups, lambda { |**system_arguments|
+        Primer::Alpha::NavList::Group.new(selected_item_id: @selected_item_id, **system_arguments)
       }
 
       # @example Items and headings
       #
       #   <%= render(Primer::Alpha::NavList.new(selected_item_id: :personal_info)) do |component| %>
-      #     <% component.with_section(aria: { label: "Settings" }) do |section| %>
-      #       <% section.with_item(label: "General", selected_by_ids: :general, href: "/settings/general") %>
+      #     <% component.with_group(aria: { label: "Settings" }) do |group| %>
+      #       <% group.with_item(label: "General", selected_by_ids: :general, href: "/settings/general") %>
       #     <% end %>
-      #     <% component.with_section(aria: { label: "Account settings" }) do |section| %>
-      #       <% section.with_heading(title: "Account Settings") %>
-      #       <% section.with_item(label: "Personal Information", selected_by_ids: :personal_info, href: "/account/info") %>
-      #       <% section.with_item(label: "Password", selected_by_ids: :password, href: "/account/password") %>
-      #       <% section.with_item(label: "Billing info", selected_by_ids: :billing, href: "/account/billing") %>
+      #     <% component.with_group do |group| %>
+      #       <% group.with_heading(title: "Account Settings") %>
+      #       <% group.with_item(label: "Personal Information", selected_by_ids: :personal_info, href: "/account/info") %>
+      #       <% group.with_item(label: "Password", selected_by_ids: :password, href: "/account/password") %>
+      #       <% group.with_item(label: "Billing info", selected_by_ids: :billing, href: "/account/billing") %>
       #     <% end %>
       #   <% end %>
       #
       # @example Leading and trailing visuals
       #
       #   <%= render(Primer::Alpha::NavList.new(selected_item_id: :personal_info)) do |component| %>
-      #     <% component.with_section(aria: { label: "Account settings" }) do |section| %>
-      #       <% section.with_heading(title: "Account Settings") %>
-      #       <% section.with_item(label: "Personal Information", selected_by_ids: :personal_info, href: "/account/info") do |item| %>
+      #     <% component.with_group do |group| %>
+      #       <% group.with_heading(title: "Account Settings") %>
+      #       <% group.with_item(label: "Personal Information", selected_by_ids: :personal_info, href: "/account/info") do |item| %>
       #         <% item.with_leading_visual_avatar(src: "https://github.com/github.png", alt: "GitHub") %>
       #       <% end %>
-      #       <% section.with_item(label: "Notifications", selected_by_ids: :notifications, href: "/account/notifications") do |item| %>
+      #       <% group.with_item(label: "Notifications", selected_by_ids: :notifications, href: "/account/notifications") do |item| %>
       #         <% item.with_leading_visual_icon(icon: :bell) %>
       #         <% item.with_trailing_visual_counter(count: 15) %>
       #       <% end %>
-      #       <% section.with_item(label: "Billing info", selected_by_ids: :billing, href: "/account/billing") do |item| %>
+      #       <% group.with_item(label: "Billing info", selected_by_ids: :billing, href: "/account/billing") do |item| %>
       #         <% item.with_leading_visual_icon(icon: :package) %>
       #         <% item.with_trailing_visual_icon(icon: :"dot-fill", color: :attention) %>
       #       <% end %>
@@ -65,9 +65,9 @@ module Primer
       # @example Expandable sub items
       #
       #   <%= render(Primer::Alpha::NavList.new(selected_item_id: :email_notifications)) do |component| %>
-      #     <% component.with_section(aria: { label: "Account settings" }) do |section| %>
-      #       <% section.with_heading(title: "Account Settings") %>
-      #       <% section.with_item(label: "Notification settings", selected_by_ids: :notifications) do |item| %>
+      #     <% component.with_group do |group| %>
+      #       <% group.with_heading(title: "Account Settings") %>
+      #       <% group.with_item(label: "Notification settings") do |item| %>
       #         <% item.with_leading_visual_icon(icon: :bell) %>
       #         <% item.with_item(label: "Email", selected_by_ids: :email_notifications, href: "/account/notifications/email") do |subitem| %>
       #           <% subitem.with_trailing_visual_icon(icon: :mail) %>
@@ -76,7 +76,7 @@ module Primer
       #           <% subitem.with_trailing_visual_icon(icon: :"device-mobile") %>
       #         <% end %>
       #       <% end %>
-      #       <% section.with_item(label: "Messages", selected_by_ids: :messages) do |item| %>
+      #       <% group.with_item(label: "Messages") do |item| %>
       #         <% item.with_leading_visual_icon(icon: :bookmark) %>
       #         <% item.with_item(label: "Inbox", href: "/account/messages/inbox") do |subitem| %>
       #           <% subitem.with_trailing_visual_counter(count: 10) %>
@@ -91,12 +91,12 @@ module Primer
       # @example Trailing action
       #
       #   <%= render(Primer::Alpha::NavList.new) do |component| %>
-      #     <% component.with_section(aria: { label: "Favorite foods" }) do |section| %>
-      #       <% section.with_heading(title: "My Favorite Foods") %>
-      #       <% section.with_item(label: "Popplers", selected_by_ids: :popplers, href: "/foods/popplers") do |item| %>
+      #     <% component.with_group do |group| %>
+      #       <% group.with_heading(title: "My Favorite Foods") %>
+      #       <% group.with_item(label: "Popplers", selected_by_ids: :popplers, href: "/foods/popplers") do |item| %>
       #         <% item.with_trailing_action(show_on_hover: false, icon: "plus", "aria-label": "Add new food", size: :medium) %>
       #       <% end %>
-      #       <% section.with_item(label: "Slurm", selected_by_ids: :slurm, href: "/foods/slurm") do |item| %>
+      #       <% group.with_item(label: "Slurm", selected_by_ids: :slurm, href: "/foods/slurm") do |item| %>
       #         <% item.with_trailing_action(show_on_hover: true, icon: "plus", "aria-label": "Add new food", size: :medium) %>
       #       <% end %>
       #     <% end %>
@@ -106,10 +106,6 @@ module Primer
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(selected_item_id: nil, **system_arguments)
         @system_arguments = system_arguments
-        @system_arguments[:classes] = class_names(
-          @system_arguments[:classes],
-          "ActionListWrap"
-        )
         @selected_item_id = selected_item_id
       end
     end

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

@@ -87,6 +87,7 @@ export class NavListElement extends HTMLElement {
   collapseItem(item: HTMLElement) {
     item.nextElementSibling?.setAttribute('data-hidden', '')
     item.setAttribute('aria-expanded', 'false')
+    item.focus()
   }
 
   itemIsExpanded(item: HTMLElement | null) {
@@ -112,6 +113,28 @@ export class NavListElement extends HTMLElement {
     e.stopPropagation()
   }
 
+  // collapse item
+  handleItemWithSubItemKeydown(e: KeyboardEvent) {
+    const el = e.currentTarget
+    if (!(el instanceof HTMLElement)) return
+
+    let button = el.closest<HTMLButtonElement>('button')
+    if (!button) {
+      const button_id = el.getAttribute('aria-labelledby')
+      if (button_id) {
+        button = document.getElementById(button_id) as HTMLButtonElement
+      } else {
+        return
+      }
+    }
+
+    if (this.itemIsExpanded(button) && e.key === 'Escape') {
+      this.collapseItem(button)
+    }
+
+    e.stopPropagation()
+  }
+
   private async showMore(e: Event) {
     e.preventDefault()
     if (this.showMoreDisabled) return
@@ -162,6 +185,10 @@ export class NavListElement extends HTMLElement {
   #findSelectedNavItemById(itemId: string): HTMLElement | null {
     // 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 = navItem.getAttribute('data-item-id')?.split(' ') || []
 
       if (keys.includes(itemId)) {

data/app/components/primer/alpha/navigation/tab.rb

@@ -0,0 +1,168 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    module Navigation
+      # This component is part of navigation components such as `Primer::Alpha::TabNav`
+      # and `Primer::Alpha::UnderlineNav` and should not be used by itself.
+      #
+      # @accessibility
+      #   `Tab` renders the selected anchor tab with `aria-current="page"` by default.
+      #    When the selected tab does not correspond to the current page, such as in a nested inner tab, make sure to use aria-current="true"
+      class Tab < Primer::Component
+        status :alpha
+
+        DEFAULT_ARIA_CURRENT_FOR_ANCHOR = :page
+        ARIA_CURRENT_OPTIONS_FOR_ANCHOR = [true, DEFAULT_ARIA_CURRENT_FOR_ANCHOR].freeze
+        # Panel controlled by the Tab. This will not render anything in the tab itself.
+        # It will provide a accessor for the Tab's parent to call and render the panel
+        # content in the appropriate place.
+        # Refer to `UnderlineNav` and `TabNav` implementations for examples.
+        #
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        renders_one :panel, lambda { |**system_arguments|
+          return unless @with_panel
+
+          deny_tag_argument(**system_arguments)
+          system_arguments[:id] = @panel_id
+          system_arguments[:tag] = :div
+          system_arguments[:role] ||= :tabpanel
+          system_arguments[:tabindex] = 0
+          system_arguments[:hidden] = true unless @selected
+
+          label_present = aria("label", system_arguments) || aria("labelledby", system_arguments)
+          unless label_present
+            if @id.present?
+              system_arguments[:"aria-labelledby"] = @id
+            elsif !Rails.env.production?
+              raise ArgumentError, "Panels must be labelled. Either set a unique `id` on the tab, or set an `aria-label` directly on the panel"
+            end
+          end
+
+          Primer::BaseComponent.new(**system_arguments)
+        }
+
+        # Icon to be rendered in the Tab left.
+        #
+        # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Octicon) %>.
+        renders_one :icon, lambda { |icon = nil, **system_arguments|
+          system_arguments[:classes] = class_names(
+            @icon_classes,
+            system_arguments[:classes]
+          )
+          Primer::Beta::Octicon.new(icon, **system_arguments)
+        }
+
+        # The Tab's text.
+        #
+        # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Text) %>.
+        renders_one :text, Primer::Beta::Text
+
+        # Counter to be rendered in the Tab right.
+        #
+        # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Counter) %>.
+        renders_one :counter, Primer::Beta::Counter
+
+        attr_reader :selected
+
+        # @example Default
+        #   <%= render(Primer::Alpha::Navigation::Tab.new(selected: true)) do |component| %>
+        #     <% component.with_text { "Selected" } %>
+        #   <% end %>
+        #   <%= render(Primer::Alpha::Navigation::Tab.new) do |component| %>
+        #     <% component.with_text { "Not selected" } %>
+        #   <% end %>
+        #
+        # @example With icons and counters
+        #   <%= render(Primer::Alpha::Navigation::Tab.new) do |component| %>
+        #     <% component.with_icon(:star) %>
+        #     <% component.with_text { "Tab" } %>
+        #   <% end %>
+        #   <%= render(Primer::Alpha::Navigation::Tab.new) do |component| %>
+        #     <% component.with_icon(:star) %>
+        #     <% component.with_text { "Tab" } %>
+        #     <% component.with_counter(count: 10) %>
+        #   <% end %>
+        #   <%= render(Primer::Alpha::Navigation::Tab.new) do |component| %>
+        #     <% component.with_text { "Tab" } %>
+        #     <% component.with_counter(count: 10) %>
+        #   <% end %>
+        #
+        # @example Inside a list
+        #   <%= render(Primer::Alpha::Navigation::Tab.new(list: true)) do |component| %>
+        #     <% component.with_text { "Tab" } %>
+        #   <% end %>
+        #
+        # @example With custom HTML
+        #   <%= render(Primer::Alpha::Navigation::Tab.new) do %>
+        #     <div>
+        #       This is my <strong>custom HTML</strong>
+        #     </div>
+        #   <% end %>
+        #
+        # @param list [Boolean] Whether the Tab is an item in a `<ul>` list.
+        # @param selected [Boolean] Whether the Tab is selected or not.
+        # @param with_panel [Boolean] Whether the Tab has an associated panel.
+        # @param panel_id [String] Only applies if `with_panel` is `true`. Unique id of panel.
+        # @param icon_classes [Boolean] Classes that must always be applied to icons.
+        # @param wrapper_arguments [Hash] <%= link_to_system_arguments_docs %> to be used in the `<li>` wrapper when the tab is an item in a list.
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(list: false, selected: false, with_panel: false, panel_id: "", icon_classes: "", wrapper_arguments: {}, **system_arguments)
+          @selected = selected
+          @icon_classes = icon_classes
+          @list = list
+          @with_panel = with_panel
+
+          @system_arguments = system_arguments
+          @id = @system_arguments[:id]
+          @wrapper_arguments = wrapper_arguments
+
+          if with_panel || @system_arguments[:tag] == :button
+            @system_arguments[:tag] = :button
+            @system_arguments[:type] = :button
+            @system_arguments[:role] = :tab
+            panel_id(panel_id)
+            # https://www.w3.org/TR/wai-aria-practices/#presentation_role
+            @wrapper_arguments[:role] = :presentation
+          else
+            @system_arguments[:tag] = :a
+          end
+
+          @wrapper_arguments[:tag] = :li
+          @wrapper_arguments[:display] ||= :inline_flex
+
+          return unless @selected
+
+          if @system_arguments[:tag] == :a
+            aria_current = aria("current", system_arguments) || DEFAULT_ARIA_CURRENT_FOR_ANCHOR
+            @system_arguments[:"aria-current"] = fetch_or_fallback(ARIA_CURRENT_OPTIONS_FOR_ANCHOR, aria_current, DEFAULT_ARIA_CURRENT_FOR_ANCHOR)
+          else
+            @system_arguments[:"aria-selected"] = true
+          end
+        end
+
+        def wrapper
+          unless @list
+            yield
+            return # returning `yield` caused a double render
+          end
+
+          render(Primer::BaseComponent.new(**@wrapper_arguments)) do
+            yield if block_given?
+          end
+        end
+
+        private
+
+        def panel_id(panel_id)
+          if panel_id.blank?
+            raise ArgumentError, "`panel_id` is required" unless Rails.env.production?
+          else
+            @panel_id = panel_id
+            @system_arguments[:"aria-controls"] = @panel_id
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/overlay/body.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class Overlay
+      # A `Overlay::Body` is a compositional component, used to render the
+      # Body of an overlay. See <%= link_to_component(Primer::Alpha::Overlay) %>.
+      class Body < Primer::Component
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(padding: DEFAULT_PADDING, **system_arguments)
+          @system_arguments = deny_tag_argument(**system_arguments)
+          @system_arguments[:tag] = :div
+          @system_arguments[:classes] = class_names(
+            "Overlay-body",
+            PADDING_MAPPINGS[fetch_or_fallback(PADDING_OPTIONS, padding, DEFAULT_PADDING)],
+            system_arguments[:classes]
+          )
+        end
+
+        def call
+          render(Primer::BaseComponent.new(**@system_arguments)) { content }
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/overlay/footer.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class Overlay
+      DEFAULT_ALIGN_CONTENT = :end
+      ALIGN_CONTENT_MAPPINGS = {
+        :start => "Overlay-footer--alignStart",
+        :center => "Overlay-footer--alignCenter",
+        DEFAULT_ALIGN_CONTENT => "Overlay-footer--alignEnd"
+      }.freeze
+      ALIGN_CONTENT_OPTIONS = ALIGN_CONTENT_MAPPINGS.keys
+
+      # A `Overlay::Footer` is a compositional component, used to render the
+      # Footer of an overlay. See <%= link_to_component(Primer::Alpha::Overlay) %>.
+      class Footer < Primer::Component
+        # @param show_divider [Boolean] Show a divider between the footer and body.
+        # @param align_content [Symbol] The alginment of contents. <%= one_of(Primer::Alpha::Overlay::ALIGN_CONTENT_OPTIONS) %>
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(
+          show_divider: false,
+          align_content: DEFAULT_ALIGN_CONTENT,
+          **system_arguments
+        )
+          @system_arguments = deny_tag_argument(**system_arguments)
+          @system_arguments[:tag] = :div
+          @system_arguments[:classes] = class_names(
+            "Overlay-footer",
+            ALIGN_CONTENT_MAPPINGS[fetch_or_fallback(ALIGN_CONTENT_OPTIONS, align_content, DEFAULT_ALIGN_CONTENT)],
+            { "Overlay-footer--divided": show_divider },
+            system_arguments[:classes]
+          )
+        end
+
+        def call
+          render(Primer::BaseComponent.new(**@system_arguments)) { content }
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/overlay/header.html.erb

@@ -0,0 +1,15 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <div class="Overlay-headerContentWrap">
+    <div class="Overlay-titleWrap">
+      <h1 class="Overlay-title <% if @visually_hide_title || content.present? %>sr-only<% end %>"><%= @title %></h1>
+      <% if content.present? %>
+        <%= content %>
+      <% elsif @subtitle.present? %>
+        <h2 id="<%= @id %>-description" class="Overlay-description"><%= @subtitle %></h2>
+      <% end %>
+    </div>
+    <div class="Overlay-actionWrap">
+      <%= render Primer::Beta::CloseButton.new(classes: "Overlay-closeButton", "popoverhidetarget": @id) %>
+    </div>
+  </div>
+<% end %>

data/app/components/primer/alpha/overlay/header.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    class Overlay
+      # A `Overlay::Header` is a compositional component, used to render the
+      # Header of an overlay. See <%= link_to_component(Primer::Alpha::Overlay) %>.
+      class Header < Primer::Component
+        DEFAULT_SIZE = :medium
+        SIZE_MAPPINGS = {
+          DEFAULT_SIZE => nil,
+          :large => "Overlay-header--large"
+        }.freeze
+        SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+        # @param title [String] Describes the content of the Overlay.
+        # @param subtitle [String] Provides dditional context for the Overlay, also setting the `aria-describedby` attribute.
+        # @param size [Symbol] The size of the Header. <%= one_of(Primer::Alpha::Overlay::Header::SIZE_OPTIONS) %>
+        # @param divider [Boolean] Show a divider between the header and body.
+        # @param visually_hide_title [Boolean] Visually hide the `title` while maintaining a label for assistive technologies.
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(
+          id:,
+          title:,
+          subtitle: nil,
+          size: DEFAULT_SIZE,
+          divider: false,
+          visually_hide_title: false,
+          **system_arguments
+        )
+          @id = id
+          @title = title
+          @subtitle = subtitle
+          @visually_hide_title = visually_hide_title
+          @system_arguments = deny_tag_argument(**system_arguments)
+          @system_arguments[:tag] = :header
+          @system_arguments[:classes] = class_names(
+            "Overlay-header",
+            { "Overlay-header--divided": divider },
+            SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)],
+            system_arguments[:classes]
+          )
+        end
+      end
+    end
+  end
+end

data/app/components/primer/alpha/overlay.css

@@ -0,0 +1 @@
+.Overlay[popover]{border-width:0;padding:0;position:absolute}.Overlay[popover]:not(:open){display:none}anchored-position{display:block}

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

@@ -0,0 +1,11 @@
+{
+  "name": "alpha/overlay",
+  "selectors": [
+    ".Overlay[popover]",
+    ".Overlay[popover]:not(:open)",
+    "anchored-position"
+  ],
+  "classes": [
+    "Overlay"
+  ]
+}

data/app/components/primer/alpha/overlay.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["overlay.pcss"],"names":[],"mappings":"AAAA,kBACE,cAAe,CACf,SAAU,CACV,iBACF,CAGA,6BACE,YACF,CAEA,kBACE,aACF","file":"overlay.css","sourcesContent":[".Overlay[popover] {\n  border-width: 0;\n  padding: 0;\n  position: absolute;\n}\n\n/* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n.Overlay[popover]:not(:open) {\n  display: none;\n}\n\nanchored-position {\n  display: block;\n}\n"]}

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

@@ -0,0 +1,11 @@
+<%= show_button %>
+
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <%= header %>
+  <% if content.present? %>
+    <%= content %>
+  <% else %>
+    <%= body %>
+    <%= footer %>
+  <% end %>
+<% end %>

data/app/components/primer/alpha/overlay.pcss

@@ -0,0 +1,14 @@
+.Overlay[popover] {
+  border-width: 0;
+  padding: 0;
+  position: absolute;
+}
+
+/* stylelint-disable-next-line selector-pseudo-class-no-unknown */
+.Overlay[popover]:not(:open) {
+  display: none;
+}
+
+anchored-position {
+  display: block;
+}