primer_view_components 0.0.53 → 0.0.54

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4df5bb105c8b48aed71b4652afbf6814257fcb2c344085b328c27f8f109a80c1
-  data.tar.gz: 72ff93288cac5eb1cabdc7cb8031c488452499203d768fcf3795bbe18cb31a43
+  metadata.gz: c9b70049a9f24586f7b1239cdd97832cb9e813cc063ca475c77ae00ed448a6c4
+  data.tar.gz: 8df167c58fa86039a008d301969af68f7efa8e4345d49abf269cb09734ec1841
 SHA512:
-  metadata.gz: 3af26e886cc8998ef3d449471400319615c0e820ce7265316e6de6fda2b55340f7f7a82d3c7c78f5c4e393f60d7638126bd8e8a88675735bfe570d2958ee2484
-  data.tar.gz: aff9d0ca813126c33daab60f57bb01915ea8b779f17df99e648ec236f0da12bb9b16f54af24dfa871a50253663d71813533386457424f09f46a5458d5556a5b2
+  metadata.gz: 7c87327784f69a03b4636e2952c98da1feb4b5c47776c8e46cd423ae562d25aa061c99f0ff3ebee605984816db3b3c6209fd7ddb5ed0577a1ed7b1ff8a68bbc8
+  data.tar.gz: c386eb3940ee79d8992b45168e18846863c6d503801674d13efe6ea8617cfc9d7a3957e3e324959c884d13bdd66113188ea23c9bcbf9dce00ff9eb54ce0deef3

data/CHANGELOG.md

@@ -30,6 +30,18 @@ The category for changes related to documentation, testing and tooling. Also, fo
 
 ## main
 
+## 0.0.54
+
+### Breaking changes
+
+* Rename `BreadcrumbComponent` to `Beta::Breadcrumbs`.
+
+    *Joel Hawksley*
+
+* Split `UnderlineNavComponent` into `Alpha::UnderlineNav` and `Alpha::UnderlinePanels`.
+
+    *Kate Higa*
+
 ## 0.0.53
 
 ### New
@@ -44,6 +56,10 @@ The category for changes related to documentation, testing and tooling. Also, fo
 
     *Manuel Puyol*
 
+* Deprecating background and border color presentational arguments
+
+    *Jon Rohan*
+
 * Map the `for` argument when autofixing `ClipboardCopy` migrations.
 
     *Kristján Oddsson*

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

@@ -0,0 +1,15 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <% if @align == :right %>
+    <%= actions %>
+  <% end %>
+
+  <%= render body do %>
+    <% tabs.each do |tab| %>
+      <%= tab %>
+    <% end %>
+  <% end %>
+
+  <% if @align == :left %>
+    <%= actions %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,143 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Use `UnderlineNav` to style navigation links with a minimal
+    # underlined selected state, typically placed at the top
+    # of the page.
+    # For panel navigation, use <%= link_to_component(Primer::Alpha::UnderlinePanels) %> instead.
+    #
+    # @accessibility
+    #   - By default, `UnderlineNav` renders links within a `<nav>` element. `<nav>` has an
+    #     implicit landmark role of `navigation` which should be reserved for main links.
+    #     For all other set of links, set tag to `:div`.
+    #   - See <%= link_to_component(Primer::Navigation::TabComponent) %> for additional
+    #     accessibility considerations.
+    class UnderlineNav < Primer::Component
+      include Primer::TabbedComponentHelper
+      include Primer::UnderlineNavHelper
+
+      ALIGN_DEFAULT = :left
+      ALIGN_OPTIONS = [ALIGN_DEFAULT, :right].freeze
+
+      BODY_TAG_DEFAULT = :ul
+
+      TAG_DEFAULT = :nav
+      TAG_OPTIONS = [TAG_DEFAULT, :div].freeze
+
+      ACTIONS_TAG_DEFAULT = :div
+      ACTIONS_TAG_OPTIONS = [ACTIONS_TAG_DEFAULT, :span].freeze
+
+      # Use the tabs to list page links.
+      #
+      # @param selected [Boolean] Whether the tab is selected.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_many :tabs, lambda { |selected: false, **system_arguments|
+        system_arguments[:classes] = underline_nav_tab_classes(system_arguments[:classes])
+        Primer::Navigation::TabComponent.new(
+          list: true,
+          selected: selected,
+          icon_classes: "UnderlineNav-octicon",
+          **system_arguments
+        )
+      }
+
+      # Use actions for a call to action.
+      #
+      # @param tag [Symbol] (Primer::UnderlineNavHelper::ACTIONS_TAG_DEFAULT) <%= one_of(Primer::UnderlineNavHelper::ACTIONS_TAG_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :actions, lambda { |tag: ACTIONS_TAG_DEFAULT, **system_arguments|
+        system_arguments[:tag] = fetch_or_fallback(ACTIONS_TAG_OPTIONS, tag, ACTIONS_TAG_DEFAULT)
+        system_arguments[:classes] = underline_nav_action_classes(system_arguments[:classes])
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # @example Default with `<nav>`
+      #   @description
+      #     `<nav>` is a landmark and should be reserved for main navigation links. See <%= link_to_accessibility %>.
+      #   @code
+      #     <%= render(Primer::Alpha::UnderlineNav.new(label: "Default with nav element")) do |component| %>
+      #       <% component.tab(href: "#", selected: true) { "Item 1" } %>
+      #       <% component.tab(href: "#") { "Item 2" } %>
+      #       <% component.actions do %>
+      #         <%= render(Primer::ButtonComponent.new) { "Button!" } %>
+      #       <% end %>
+      #     <% end %>
+      #
+      # @example With `<div>`
+      #   <%= render(Primer::Alpha::UnderlineNav.new(tag: :div, label: "With div element")) do |component| %>
+      #     <% component.tab(href: "#", selected: true) { "Item 1" } %>
+      #     <% component.tab(href: "#") { "Item 2" } %>
+      #     <% component.actions do %>
+      #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example With icons and counters
+      #   <%= render(Primer::Alpha::UnderlineNav.new(label: "With icons and counters")) do |component| %>
+      #     <% component.tab(href: "#", selected: true) do |t| %>
+      #       <% t.icon(icon: :star) %>
+      #       <% t.text { "Item 1" } %>
+      #     <% end %>
+      #     <% component.tab(href: "#") do |t| %>
+      #       <% t.icon(icon: :star) %>
+      #       <% t.text { "Item 2" } %>
+      #       <% t.counter(count: 10) %>
+      #     <% end %>
+      #     <% component.tab(href: "#") do |t| %>
+      #       <% t.text { "Item 3" } %>
+      #       <% t.counter(count: 10) %>
+      #     <% end %>
+      #     <% component.actions do %>
+      #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Align right
+      #   <%= render(Primer::Alpha::UnderlineNav.new(label: "Align right", align: :right)) do |component| %>
+      #     <% component.tab(href: "#", selected: true) do |t| %>
+      #       <% t.text { "Item 1" } %>
+      #     <% end %>
+      #     <% component.tab(href: "#") do |t| %>
+      #       <% t.text { "Item 2" } %>
+      #     <% end %>
+      #     <% component.actions do %>
+      #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Customizing the body
+      #   <%= render(Primer::Alpha::UnderlineNav.new(label: "Default", body_arguments: { classes: "custom-class", border: true, border_color: :info })) do |c| %>
+      #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
+      #     <% c.tab(href: "#") { "Tab 2" } %>
+      #     <% c.tab(href: "#") { "Tab 3" } %>
+      #   <% end %>
+      #
+      # @param tag [Symbol] <%= one_of(Primer::Alpha::UnderlineNav::TAG_OPTIONS) %>
+      # @param label [String] Sets an `aria-label` that helps assistive technology users understand the purpose of the links, and distinguish it from similar elements.
+      # @param align [Symbol] <%= one_of(Primer::UnderlineNavHelper::ALIGN_OPTIONS) %> - Defaults to <%= Primer::UnderlineNavHelper::ALIGN_DEFAULT %>
+      # @param body_arguments [Hash] <%= link_to_system_arguments_docs %> for the body wrapper.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(label:, tag: TAG_DEFAULT, align: ALIGN_DEFAULT, body_arguments: {}, **system_arguments)
+        @align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
+
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
+        @system_arguments[:classes] = underline_nav_classes(@system_arguments[:classes], @align)
+
+        @body_arguments = body_arguments
+        @body_arguments[:tag] = :ul
+        @body_arguments[:classes] = underline_nav_body_classes(@body_arguments[:classes])
+
+        @system_arguments[:tag] == :nav ? @system_arguments[:"aria-label"] = label : @body_arguments[:"aria-label"] = label
+      end
+
+      private
+
+      def body
+        Primer::BaseComponent.new(**@body_arguments)
+      end
+    end
+  end
+end

data/app/components/primer/{underline_nav_component.html.erb → alpha/underline_panels.html.erb}

@@ -1,23 +1,18 @@
-<%= wrapper(**@wrapper_arguments) do %>
+<%= wrapper(with_panel: true, **@wrapper_arguments) do %>
   <%= render Primer::BaseComponent.new(**@system_arguments) do %>
     <% if @align == :right %>
       <%= actions %>
     <% end %>
-
     <%= render body do %>
       <% tabs.each do |tab| %>
         <%= tab %>
       <% end %>
     <% end %>
-
     <% if @align == :left %>
       <%= actions %>
     <% end %>
   <% end %>
-
-  <% if @with_panel %>
-    <% tabs.each do |tab| %>
-      <%= tab.panel %>
-    <% end %>
+  <% tabs.each do |tab| %>
+    <%= tab.panel %>
   <% end %>
 <% end %>

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

@@ -0,0 +1,86 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Use `UnderlinePanels` to style tabs with an associated panel and an underlined selected state.
+    class UnderlinePanels < Primer::Component
+      include Primer::TabbedComponentHelper
+      include Primer::UnderlineNavHelper
+      # Use to render a button and an associated panel slot. See the example below or refer to <%= link_to_component(Primer::Navigation::TabComponent) %>.
+      #
+      # @param id [String] Unique ID of tab.
+      # @param selected [Boolean] Whether the tab is selected.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_many :tabs, lambda { |id:, selected: false, **system_arguments|
+        system_arguments[:id] = id
+        system_arguments[:classes] = underline_nav_tab_classes(system_arguments[:classes])
+
+        Primer::Navigation::TabComponent.new(
+          selected: selected,
+          with_panel: true,
+          list: true,
+          icon_classes: "UnderlineNav-octicon",
+          panel_id: "panel-#{id}",
+          **system_arguments
+        )
+      }
+
+      # Use actions for a call to action.
+      #
+      # @param tag [Symbol] (Primer::UnderlineNavHelper::ACTIONS_TAG_DEFAULT) <%= one_of(Primer::UnderlineNavHelper::ACTIONS_TAG_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :actions, lambda { |tag: ACTIONS_TAG_DEFAULT, **system_arguments|
+        system_arguments[:tag] = fetch_or_fallback(ACTIONS_TAG_OPTIONS, tag, ACTIONS_TAG_DEFAULT)
+        system_arguments[:classes] = underline_nav_action_classes(system_arguments[:classes])
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # @example Default
+      #   <%= render(Primer::Alpha::UnderlinePanels.new(label: "With panels")) do |component| %>
+      #     <% component.tab(id: "tab-1", selected: true) do |t| %>
+      #       <% t.text { "Tab 1" } %>
+      #       <% t.panel do %>
+      #         Panel 1
+      #       <% end %>
+      #     <% end %>
+      #     <% component.tab(id: "tab-2") do |t| %>
+      #       <% t.text { "Tab 2" } %>
+      #       <% t.panel do %>
+      #         Panel 2
+      #       <% end %>
+      #     <% end %>
+      #     <% component.actions do %>
+      #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @param label [String] Sets an `aria-label` that helps assistive technology users understand the purpose of the tabs.
+      # @param align [Symbol] <%= one_of(Primer::UnderlineNavHelper::ALIGN_OPTIONS) %> - Defaults to <%= Primer::UnderlineNavHelper::ALIGN_DEFAULT %>
+      # @param body_arguments [Hash] <%= link_to_system_arguments_docs %> for the body wrapper.
+      # @param wrapper_arguments [Hash] <%= link_to_system_arguments_docs %> for the `TabContainer` wrapper.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(label:, align: ALIGN_DEFAULT, body_arguments: {}, wrapper_arguments: {}, **system_arguments)
+        @align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
+        @wrapper_arguments = wrapper_arguments
+
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] = underline_nav_classes(@system_arguments[:classes], @align)
+
+        @body_arguments = body_arguments
+        @body_arguments[:tag] = :ul
+        @body_arguments[:classes] = underline_nav_body_classes(@body_arguments[:classes])
+
+        @body_arguments[:role] = :tablist
+        @body_arguments[:"aria-label"] = label
+      end
+
+      private
+
+      def body
+        Primer::BaseComponent.new(**@body_arguments)
+      end
+    end
+  end
+end

data/app/components/primer/beta/breadcrumbs.rb

@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `Breadcrumb` to display page hierarchy within a section of the site. All of the items in the breadcrumb "trail" are links except for the final item, which is a plain string indicating the current page.
+    class Breadcrumbs < Primer::Component
+      status :beta
+
+      # _Note: if both `href` and `selected: true` are passed in, `href` will be ignored and the item will not be rendered as a link._
+      #
+      # @param href [String] The URL to link to.
+      # @param selected [Boolean] Whether or not the item is selected and not rendered as a link.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_many :items, "Item"
+
+      # @example Basic
+      #   <%= render(Primer::Beta::Breadcrumbs.new) do |component| %>
+      #     <% component.item(href: "/") do %>Home<% end %>
+      #     <% component.item(href: "/about") do %>About<% end %>
+      #     <% component.item(selected: true) do %>Team<% end %>
+      #   <% end %>
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(**system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = :nav
+        @system_arguments[:aria] = { label: "Breadcrumb" }
+      end
+
+      def render?
+        items.any?
+      end
+
+      # This component is part of `Primer::Beta::Breadcrumbs` and should not be
+      # used as a standalone component.
+      class Item < Primer::Component
+        def initialize(href: nil, selected: false, **system_arguments)
+          @href = href
+          @system_arguments = system_arguments
+
+          @href = nil if selected
+          @system_arguments[:tag] = :li
+          @system_arguments[:"aria-current"] = "page" if selected
+          @system_arguments[:classes] = "breadcrumb-item #{@system_arguments[:classes]}"
+        end
+
+        def call
+          render(Primer::BaseComponent.new(**@system_arguments)) do
+            if @href.present?
+              render(Primer::LinkComponent.new(href: @href)) { content }
+            else
+              content
+            end
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/primer/navigation/tab_component.rb

@@ -3,7 +3,7 @@
 module Primer
   module Navigation
     # This component is part of navigation components such as `Primer::TabNavComponent`
-    # and `Primer::UnderlineNavComponent` and should not be used by itself.
+    # and `Primer::Alpha::UnderlineNav` and should not be used by itself.
     #
     # @accessibility
     #   `TabComponent` renders the selected anchor tab with `aria-current="page"` by default.
@@ -14,7 +14,7 @@ module Primer
       # 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 `UnderlineNavComponent` and `TabNavComponent` implementations for examples.
+      # Refer to `UnderlineNav` and `TabNavComponent` implementations for examples.
       #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :panel, lambda { |**system_arguments|
@@ -111,19 +111,21 @@ module Primer
 
         @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 = wrapper_arguments
         @wrapper_arguments[:tag] = :li
-        @wrapper_arguments[:display] ||= :flex
+        @wrapper_arguments[:display] ||= :inline_flex
 
         return unless @selected
 

data/app/components/primer/tab_nav_component.html.erb

@@ -1,4 +1,4 @@
-<%= wrapper(**@wrapper_arguments) do %>
+<%= wrapper(with_panel: @with_panel, **@wrapper_arguments) do %>
   <%= render Primer::BaseComponent.new(**@system_arguments) do %>
     <%= extra if @align == :left %>
 

data/app/lib/primer/tabbed_component_helper.rb

@@ -20,8 +20,8 @@ module Primer
       with_panel ? :div : :nav
     end
 
-    def wrapper(**system_arguments)
-      return yield unless @with_panel
+    def wrapper(with_panel:, **system_arguments)
+      return yield unless with_panel
 
       render Primer::TabContainerComponent.new(**system_arguments) do
         yield if block_given?

data/app/lib/primer/underline_nav_helper.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+require "active_support/concern"
+
+module Primer
+  # Helper to share tab validation logic between components.
+  # The component will raise an error if there are 0 or 2+ selected tabs.
+  module UnderlineNavHelper
+    extend ActiveSupport::Concern
+
+    ALIGN_DEFAULT = :left
+    ALIGN_OPTIONS = [ALIGN_DEFAULT, :right].freeze
+
+    ACTIONS_TAG_DEFAULT = :div
+    ACTIONS_TAG_OPTIONS = [ACTIONS_TAG_DEFAULT, :span].freeze
+
+    def underline_nav_classes(classes, align)
+      class_names(
+        classes,
+        "UnderlineNav",
+        "UnderlineNav--right" => align == :right
+      )
+    end
+
+    def underline_nav_body_classes(classes)
+      class_names(
+        "UnderlineNav-body",
+        classes,
+        "list-style-none"
+      )
+    end
+
+    def underline_nav_action_classes(classes)
+      class_names("UnderlineNav-actions", classes)
+    end
+
+    def underline_nav_tab_classes(classes)
+      class_names(
+        "UnderlineNav-item",
+        classes
+      )
+    end
+  end
+end

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
     module VERSION
       MAJOR = 0
       MINOR = 0
-      PATCH = 53
+      PATCH = 54
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/lib/rubocop/cop/primer/deprecated_arguments.rb

@@ -35,6 +35,110 @@ module RuboCop
         # }
         #
         DEPRECATED = {
+          bg: {
+            white: "bg: :primary",
+            gray_light: "bg: :secondary",
+            gray: "bg: :tertiary",
+            gray_dark: "bg: :canvas_inverse",
+            blue_light: "bg: :info",
+            blue: "bg: :info_inverse",
+            green_light: "bg: :success",
+            green: "bg: :success_inverse",
+            yellow_light: "bg: :warning",
+            yellow: "bg: :warning_inverse",
+            red_light: "bg: :danger",
+            red: "bg: :danger_inverse",
+            gray_0: nil,
+            gray_1: nil,
+            gray_2: nil,
+            gray_3: nil,
+            gray_4: nil,
+            gray_5: nil,
+            gray_6: nil,
+            gray_7: nil,
+            gray_8: nil,
+            gray_9: nil,
+            blue_0: nil,
+            blue_1: nil,
+            blue_2: nil,
+            blue_3: nil,
+            blue_4: nil,
+            blue_5: nil,
+            blue_6: nil,
+            blue_7: nil,
+            blue_8: nil,
+            blue_9: nil,
+            green_0: nil,
+            green_1: nil,
+            green_2: nil,
+            green_3: nil,
+            green_4: nil,
+            green_5: nil,
+            green_6: nil,
+            green_7: nil,
+            green_8: nil,
+            green_9: nil,
+            yellow_0: nil,
+            yellow_1: nil,
+            yellow_2: nil,
+            yellow_3: nil,
+            yellow_4: nil,
+            yellow_5: nil,
+            yellow_6: nil,
+            yellow_7: nil,
+            yellow_8: nil,
+            yellow_9: nil,
+            red_0: nil,
+            red_1: nil,
+            red_2: nil,
+            red_3: nil,
+            red_4: nil,
+            red_5: nil,
+            red_6: nil,
+            red_7: nil,
+            red_8: nil,
+            red_9: nil,
+            purple_0: nil,
+            purple_1: nil,
+            purple_2: nil,
+            purple_3: nil,
+            purple_4: nil,
+            purple_5: nil,
+            purple_6: nil,
+            purple_7: nil,
+            purple_8: nil,
+            purple_9: nil,
+            pink_0: nil,
+            pink_1: nil,
+            pink_2: nil,
+            pink_3: nil,
+            pink_4: nil,
+            pink_5: nil,
+            pink_6: nil,
+            pink_7: nil,
+            pink_8: nil,
+            pink_9: nil,
+            orange_0: nil,
+            orange_1: nil,
+            orange_2: nil,
+            orange_3: nil,
+            orange_4: nil,
+            orange_5: nil,
+            orange_6: nil,
+            orange_7: nil,
+            orange_8: nil,
+            orange_9: nil
+          },
+          border_color: {
+            gray: "border_color: :primary",
+            gray_light: "border_color: :secondary",
+            gray_dark: "border_color: :tertiary",
+            blue: "border_color: :info",
+            green: "border_color: :success",
+            yellow: "border_color: :warning",
+            red: "border_color: :danger",
+            white: "border_color: :inverse"
+          },
           color: {
             blue: "color: :text_link",
             gray_dark: "color: :text_primary",

data/lib/tasks/docs.rake

@@ -40,7 +40,7 @@ namespace :docs do
       Primer::BlankslateComponent,
       Primer::BorderBoxComponent,
       Primer::BoxComponent,
-      Primer::BreadcrumbComponent,
+      Primer::Beta::Breadcrumbs,
       Primer::ButtonComponent,
       Primer::ButtonGroup,
       Primer::Alpha::ButtonMarketing,
@@ -75,7 +75,8 @@ namespace :docs do
       Primer::Tooltip,
       Primer::Truncate,
       Primer::Beta::Truncate,
-      Primer::UnderlineNavComponent
+      Primer::Alpha::UnderlineNav,
+      Primer::Alpha::UnderlinePanels
     ]
 
     js_components = [
@@ -87,7 +88,7 @@ namespace :docs do
       Primer::TabContainerComponent,
       Primer::TabNavComponent,
       Primer::TimeAgoComponent,
-      Primer::UnderlineNavComponent
+      Primer::Alpha::UnderlinePanels
     ]
 
     all_components = Primer::Component.descendants - [Primer::BaseComponent]

data/static/arguments.yml

@@ -22,6 +22,54 @@
     type: Hash
     default: N/A
     description: "[System arguments](/system-arguments)"
+- component: UnderlineNav
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/alpha/underline_nav.rb
+  parameters:
+  - name: tag
+    type: Symbol
+    default: "`:nav`"
+    description: One of `:div` and `:nav`.
+  - name: label
+    type: String
+    default: N/A
+    description: Sets an `aria-label` that helps assistive technology users understand
+      the purpose of the links, and distinguish it from similar elements.
+  - name: align
+    type: Symbol
+    default: "`:left`"
+    description: One of `:left` and `:right`. - Defaults to left
+  - name: body_arguments
+    type: Hash
+    default: "`{}`"
+    description: "[System arguments](/system-arguments) for the body wrapper."
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
+- component: UnderlinePanels
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/alpha/underline_panels.rb
+  parameters:
+  - name: label
+    type: String
+    default: N/A
+    description: Sets an `aria-label` that helps assistive technology users understand
+      the purpose of the tabs.
+  - name: align
+    type: Symbol
+    default: "`:left`"
+    description: One of `:left` and `:right`. - Defaults to left
+  - name: body_arguments
+    type: Hash
+    default: "`{}`"
+    description: "[System arguments](/system-arguments) for the body wrapper."
+  - name: wrapper_arguments
+    type: Hash
+    default: "`{}`"
+    description: "[System arguments](/system-arguments) for the `TabContainer` wrapper."
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
 - component: BaseButton
   source: https://github.com/primer/view_components/tree/main/app/components/primer/base_button.rb
   parameters:
@@ -132,6 +180,13 @@
     type: Hash
     default: N/A
     description: "[System arguments](/system-arguments)"
+- component: Breadcrumbs
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/breadcrumbs.rb
+  parameters:
+  - name: system_arguments
+    type: Hash
+    default: N/A
+    description: "[System arguments](/system-arguments)"
 - component: Text
   source: https://github.com/primer/view_components/tree/main/app/components/primer/beta/text.rb
   parameters:
@@ -235,13 +290,6 @@
     type: Hash
     default: N/A
     description: "[System arguments](/system-arguments)"
-- component: Breadcrumb
-  source: https://github.com/primer/view_components/tree/main/app/components/primer/breadcrumb_component.rb
-  parameters:
-  - name: system_arguments
-    type: Hash
-    default: N/A
-    description: "[System arguments](/system-arguments)"
 - component: Button
   source: https://github.com/primer/view_components/tree/main/app/components/primer/button_component.rb
   parameters:
@@ -948,33 +996,3 @@
     type: Hash
     default: N/A
     description: "[System arguments](/system-arguments)"
-- component: UnderlineNav
-  source: https://github.com/primer/view_components/tree/main/app/components/primer/underline_nav_component.rb
-  parameters:
-  - name: label
-    type: String
-    default: N/A
-    description: The `aria-label` on top level `<nav>` element.
-  - name: with_panel
-    type: Boolean
-    default: "`false`"
-    description: Whether the `UnderlineNav` should navigate through pages or panels.
-      When true, [TabContainer](/components/tabcontainer) is rendered along with JavaScript
-      behavior.
-  - name: align
-    type: Symbol
-    default: "`:left`"
-    description: One of `:left` and `:right`. - Defaults to left
-  - name: body_arguments
-    type: Hash
-    default: "`{ tag: BODY_TAG_DEFAULT }`"
-    description: "[System arguments](/system-arguments) for the body wrapper."
-  - name: wrapper_arguments
-    type: Hash
-    default: "`{}`"
-    description: "[System arguments](/system-arguments) for the `TabContainer` wrapper.
-      Only applies if `with_panel` is `true`."
-  - name: system_arguments
-    type: Hash
-    default: N/A
-    description: "[System arguments](/system-arguments)"

data/static/classes.yml

@@ -114,6 +114,7 @@
 - ".custom-class"
 - ".d-flex"
 - ".d-inline-block"
+- ".d-inline-flex"
 - ".details-overlay"
 - ".details-reset"
 - ".dropdown"

data/static/constants.json

@@ -33,6 +33,26 @@
       "large"
     ]
   },
+  "Primer::Alpha::UnderlineNav": {
+    "ACTIONS_TAG_DEFAULT": "div",
+    "ACTIONS_TAG_OPTIONS": [
+      "div",
+      "span"
+    ],
+    "ALIGN_DEFAULT": "left",
+    "ALIGN_OPTIONS": [
+      "left",
+      "right"
+    ],
+    "BODY_TAG_DEFAULT": "ul",
+    "TAG_DEFAULT": "nav",
+    "TAG_OPTIONS": [
+      "nav",
+      "div"
+    ]
+  },
+  "Primer::Alpha::UnderlinePanels": {
+  },
   "Primer::BaseButton": {
     "DEFAULT_TAG": "button",
     "DEFAULT_TYPE": "button",
@@ -82,6 +102,11 @@
       "span"
     ]
   },
+  "Primer::Beta::Breadcrumbs": {
+    "Item": "Primer::Beta::Breadcrumbs::Item"
+  },
+  "Primer::Beta::Breadcrumbs::Item": {
+  },
   "Primer::Beta::Text": {
     "DEFAULT_TAG": "span"
   },
@@ -110,11 +135,6 @@
   },
   "Primer::BoxComponent": {
   },
-  "Primer::BreadcrumbComponent": {
-    "ItemComponent": "Primer::BreadcrumbComponent::ItemComponent"
-  },
-  "Primer::BreadcrumbComponent::ItemComponent": {
-  },
   "Primer::ButtonComponent": {
     "DEFAULT_SCHEME": "default",
     "DEFAULT_VARIANT": "medium",
@@ -619,22 +639,5 @@
       "p",
       "strong"
     ]
-  },
-  "Primer::UnderlineNavComponent": {
-    "ACTIONS_TAG_DEFAULT": "div",
-    "ACTIONS_TAG_OPTIONS": [
-      "div",
-      "span"
-    ],
-    "ALIGN_DEFAULT": "left",
-    "ALIGN_OPTIONS": [
-      "left",
-      "right"
-    ],
-    "BODY_TAG_DEFAULT": "div",
-    "BODY_TAG_OPTIONS": [
-      "div",
-      "ul"
-    ]
   }
 }

data/static/statuses.json

@@ -1,5 +1,7 @@
 {
   "Primer::Alpha::ButtonMarketing": "alpha",
+  "Primer::Alpha::UnderlineNav": "alpha",
+  "Primer::Alpha::UnderlinePanels": "alpha",
   "Primer::BaseButton": "beta",
   "Primer::BaseComponent": "beta",
   "Primer::Beta::AutoComplete": "beta",
@@ -7,14 +9,14 @@
   "Primer::Beta::AutoComplete::Item": "beta",
   "Primer::Beta::Avatar": "beta",
   "Primer::Beta::AvatarStack": "beta",
+  "Primer::Beta::Breadcrumbs": "beta",
+  "Primer::Beta::Breadcrumbs::Item": "alpha",
   "Primer::Beta::Text": "beta",
   "Primer::Beta::Truncate": "beta",
   "Primer::Beta::Truncate::TruncateText": "alpha",
   "Primer::BlankslateComponent": "beta",
   "Primer::BorderBoxComponent": "beta",
   "Primer::BoxComponent": "stable",
-  "Primer::BreadcrumbComponent": "beta",
-  "Primer::BreadcrumbComponent::ItemComponent": "alpha",
   "Primer::ButtonComponent": "beta",
   "Primer::ButtonGroup": "beta",
   "Primer::ClipboardCopy": "beta",
@@ -53,6 +55,5 @@
   "Primer::TimelineItemComponent": "beta",
   "Primer::TimelineItemComponent::BadgeComponent": "alpha",
   "Primer::Tooltip": "beta",
-  "Primer::Truncate": "beta",
-  "Primer::UnderlineNavComponent": "alpha"
+  "Primer::Truncate": "beta"
 }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.0.53
+  version: 0.0.54
 platform: ruby
 authors:
 - GitHub Open Source
-autorequire:
+autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-08-26 00:00:00.000000000 Z
+date: 2021-08-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -352,7 +352,7 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: 0.9.25
-description:
+description: 
 email:
 - opensource+primer_view_components@github.com
 executables: []
@@ -365,10 +365,12 @@ files:
 - app/assets/javascripts/primer_view_components.js
 - app/assets/javascripts/primer_view_components.js.map
 - app/components/primer/alpha/button_marketing.rb
+- app/components/primer/alpha/underline_nav.html.erb
+- app/components/primer/alpha/underline_nav.rb
+- app/components/primer/alpha/underline_panels.html.erb
+- app/components/primer/alpha/underline_panels.rb
 - app/components/primer/auto_complete/auto_complete.d.ts
 - app/components/primer/auto_complete/auto_complete.js
-- app/components/primer/auto_complete/auto_component.d.ts
-- app/components/primer/auto_complete/auto_component.js
 - app/components/primer/base_button.rb
 - app/components/primer/base_component.rb
 - app/components/primer/beta/auto_complete.rb
@@ -380,6 +382,8 @@ files:
 - app/components/primer/beta/avatar.rb
 - app/components/primer/beta/avatar_stack.html.erb
 - app/components/primer/beta/avatar_stack.rb
+- app/components/primer/beta/breadcrumbs.html.erb
+- app/components/primer/beta/breadcrumbs.rb
 - app/components/primer/beta/text.rb
 - app/components/primer/beta/truncate.html.erb
 - app/components/primer/beta/truncate.rb
@@ -388,8 +392,6 @@ files:
 - app/components/primer/border_box_component.html.erb
 - app/components/primer/border_box_component.rb
 - app/components/primer/box_component.rb
-- app/components/primer/breadcrumb_component.html.erb
-- app/components/primer/breadcrumb_component.rb
 - app/components/primer/button_component.html.erb
 - app/components/primer/button_component.rb
 - app/components/primer/button_group.html.erb
@@ -472,8 +474,6 @@ files:
 - app/components/primer/timeline_item_component.rb
 - app/components/primer/tooltip.rb
 - app/components/primer/truncate.rb
-- app/components/primer/underline_nav_component.html.erb
-- app/components/primer/underline_nav_component.rb
 - app/lib/primer/class_name_helper.rb
 - app/lib/primer/fetch_or_fallback_helper.rb
 - app/lib/primer/join_style_arguments_helper.rb
@@ -481,6 +481,7 @@ files:
 - app/lib/primer/status/dsl.rb
 - app/lib/primer/tabbed_component_helper.rb
 - app/lib/primer/test_selector_helper.rb
+- app/lib/primer/underline_nav_helper.rb
 - app/lib/primer/view_helper.rb
 - lib/primer/classify.rb
 - lib/primer/classify/cache.rb
@@ -539,7 +540,7 @@ licenses:
 - MIT
 metadata:
   allowed_push_host: https://rubygems.org
-post_install_message:
+post_install_message: 
 rdoc_options: []
 require_paths:
 - lib
@@ -555,7 +556,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubygems_version: 3.1.2
-signing_key:
+signing_key: 
 specification_version: 4
 summary: ViewComponents for the Primer Design System
 test_files: []

data/app/components/primer/auto_complete/auto_component.d.ts

@@ -1 +0,0 @@
-import '@github/auto-complete-element';

data/app/components/primer/auto_complete/auto_component.js

@@ -1 +0,0 @@
-import '@github/auto-complete-element';

data/app/components/primer/breadcrumb_component.rb

@@ -1,57 +0,0 @@
-# frozen_string_literal: true
-
-module Primer
-  # Use `Breadcrumb` to display page hierarchy within a section of the site. All of the items in the breadcrumb "trail" are links except for the final item, which is a plain string indicating the current page.
-  class BreadcrumbComponent < Primer::Component
-    status :beta
-
-    # _Note: if both `href` and `selected: true` are passed in, `href` will be ignored and the item will not be rendered as a link._
-    #
-    # @param href [String] The URL to link to.
-    # @param selected [Boolean] Whether or not the item is selected and not rendered as a link.
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_many :items, "ItemComponent"
-
-    # @example Basic
-    #   <%= render(Primer::BreadcrumbComponent.new) do |component| %>
-    #     <% component.item(href: "/") do %>Home<% end %>
-    #     <% component.item(href: "/about") do %>About<% end %>
-    #     <% component.item(selected: true) do %>Team<% end %>
-    #   <% end %>
-    #
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(**system_arguments)
-      @system_arguments = system_arguments
-      @system_arguments[:tag] = :nav
-      @system_arguments[:aria] = { label: "Breadcrumb" }
-    end
-
-    def render?
-      items.any?
-    end
-
-    # This component is part of `Primer::BreadcrumbComponent` and should not be
-    # used as a standalone component.
-    class ItemComponent < Primer::Component
-      def initialize(href: nil, selected: false, **system_arguments)
-        @href = href
-        @system_arguments = system_arguments
-
-        @href = nil if selected
-        @system_arguments[:tag] = :li
-        @system_arguments[:"aria-current"] = "page" if selected
-        @system_arguments[:classes] = "breadcrumb-item #{@system_arguments[:classes]}"
-      end
-
-      def call
-        render(Primer::BaseComponent.new(**@system_arguments)) do
-          if @href.present?
-            render(Primer::LinkComponent.new(href: @href)) { content }
-          else
-            content
-          end
-        end
-      end
-    end
-  end
-end

data/app/components/primer/underline_nav_component.rb

@@ -1,187 +0,0 @@
-# frozen_string_literal: true
-
-module Primer
-  # Use `UnderlineNav` to style navigation with a minimal
-  # underlined selected state, typically used for navigation placed at the top
-  # of the page.
-  class UnderlineNavComponent < Primer::Component
-    include Primer::TabbedComponentHelper
-
-    ALIGN_DEFAULT = :left
-    ALIGN_OPTIONS = [ALIGN_DEFAULT, :right].freeze
-
-    BODY_TAG_DEFAULT = :div
-    BODY_TAG_OPTIONS = [BODY_TAG_DEFAULT, :ul].freeze
-
-    ACTIONS_TAG_DEFAULT = :div
-    ACTIONS_TAG_OPTIONS = [ACTIONS_TAG_DEFAULT, :span].freeze
-
-    # Use the tabs to list navigation items. When `with_panel` is set on the parent, a button is rendered for panel navigation. Otherwise,
-    # an anchor tag is rendered for page navigation. For more information, refer to <%= link_to_component(Primer::Navigation::TabComponent) %>.
-    #
-    # @param panel_id [String] Only applies if `with_panel` is `true`. Unique id of panel.
-    # @param selected [Boolean] Whether the tab is selected.
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_many :tabs, lambda { |selected: false, **system_arguments|
-      system_arguments[:classes] = class_names(
-        "UnderlineNav-item",
-        system_arguments[:classes]
-      )
-
-      Primer::Navigation::TabComponent.new(
-        list: list?,
-        selected: selected,
-        with_panel: @with_panel,
-        icon_classes: "UnderlineNav-octicon",
-        **system_arguments
-      )
-    }
-
-    # Use actions for a call to action.
-    #
-    # @param tag [Symbol] (Primer::UnderlineNavComponent::ACTIONS_TAG_DEFAULT) <%= one_of(Primer::UnderlineNavComponent::ACTIONS_TAG_OPTIONS) %>
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :actions, lambda { |tag: ACTIONS_TAG_DEFAULT, **system_arguments|
-      system_arguments[:tag] = fetch_or_fallback(ACTIONS_TAG_OPTIONS, tag, ACTIONS_TAG_DEFAULT)
-      system_arguments[:classes] = class_names("UnderlineNav-actions", system_arguments[:classes])
-
-      Primer::BaseComponent.new(**system_arguments)
-    }
-
-    # @example Default
-    #   <%= render(Primer::UnderlineNavComponent.new(label: "Default")) do |component| %>
-    #     <% component.tab(href: "#", selected: true) { "Item 1" } %>
-    #     <% component.tab(href: "#") { "Item 2" } %>
-    #     <% component.actions do %>
-    #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example With icons and counters
-    #   <%= render(Primer::UnderlineNavComponent.new(label: "With icons and counters")) do |component| %>
-    #     <% component.tab(href: "#", selected: true) do |t| %>
-    #       <% t.icon(icon: :star) %>
-    #       <% t.text { "Item 1" } %>
-    #     <% end %>
-    #     <% component.tab(href: "#") do |t| %>
-    #       <% t.icon(icon: :star) %>
-    #       <% t.text { "Item 2" } %>
-    #       <% t.counter(count: 10) %>
-    #     <% end %>
-    #     <% component.tab(href: "#") do |t| %>
-    #       <% t.text { "Item 3" } %>
-    #       <% t.counter(count: 10) %>
-    #     <% end %>
-    #     <% component.actions do %>
-    #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example Align right
-    #   <%= render(Primer::UnderlineNavComponent.new(label: "Align right", align: :right)) do |component| %>
-    #     <% component.tab(href: "#", selected: true) do |t| %>
-    #       <% t.text { "Item 1" } %>
-    #     <% end %>
-    #     <% component.tab(href: "#") do |t| %>
-    #       <% t.text { "Item 2" } %>
-    #     <% end %>
-    #     <% component.actions do %>
-    #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example As a list
-    #   <%= render(Primer::UnderlineNavComponent.new(label: "As a list", body_arguments: { tag: :ul })) do |component| %>
-    #     <% component.tab(href: "#", selected: true) do |t| %>
-    #       <% t.text { "Item 1" } %>
-    #     <% end %>
-    #     <% component.tab(href: "#") do |t| %>
-    #       <% t.text { "Item 2" } %>
-    #     <% end %>
-    #     <% component.actions do %>
-    #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example With panels
-    #   <%= render(Primer::UnderlineNavComponent.new(label: "With panels", with_panel: true)) do |component| %>
-    #     <% component.tab(selected: true, id: "tab-1", panel_id: "panel-1") do |t| %>
-    #       <% t.text { "Item 1" } %>
-    #       <% t.panel do %>
-    #         Panel 1
-    #       <% end %>
-    #     <% end %>
-    #     <% component.tab(id: "tab-2", panel_id: "panel-2") do |t| %>
-    #       <% t.text { "Item 2" } %>
-    #       <% t.panel do %>
-    #         Panel 2
-    #       <% end %>
-    #     <% end %>
-    #     <% component.actions do %>
-    #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
-    #     <% end %>
-    #   <% end %>
-    #
-    # @example Customizing the body
-    #   <%= render(Primer::UnderlineNavComponent.new(label: "Default", body_arguments: { tag: :ul, classes: "custom-class", border: true, border_color: :info })) do |c| %>
-    #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
-    #     <% c.tab(href: "#") { "Tab 2" } %>
-    #     <% c.tab(href: "#") { "Tab 3" } %>
-    #   <% end %>
-    #
-    # @example Customizing the wrapper
-    #   <%= render(Primer::UnderlineNavComponent.new(label: "Default", wrapper_arguments: { classes: "custom-class", border: true, border_color: :info })) do |c| %>
-    #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
-    #     <% c.tab(href: "#") { "Tab 2" } %>
-    #     <% c.tab(href: "#") { "Tab 3" } %>
-    #   <% end %>
-    #
-    # @param label [String] The `aria-label` on top level `<nav>` element.
-    # @param with_panel [Boolean] Whether the `UnderlineNav` should navigate through pages or panels. When true, <%= link_to_component(Primer::TabContainerComponent) %> is
-    #   rendered along with JavaScript behavior.
-    # @param align [Symbol] <%= one_of(Primer::UnderlineNavComponent::ALIGN_OPTIONS) %> - Defaults to <%= Primer::UnderlineNavComponent::ALIGN_DEFAULT %>
-    # @param body_arguments [Hash] <%= link_to_system_arguments_docs %> for the body wrapper.
-    # @param wrapper_arguments [Hash] <%= link_to_system_arguments_docs %> for the `TabContainer` wrapper. Only applies if `with_panel` is `true`.
-    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(label:, with_panel: false, align: ALIGN_DEFAULT, body_arguments: { tag: BODY_TAG_DEFAULT }, wrapper_arguments: {}, **system_arguments)
-      @with_panel = with_panel
-      @align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
-      @wrapper_arguments = wrapper_arguments
-
-      @system_arguments = system_arguments
-      @system_arguments[:tag] = navigation_tag(with_panel)
-      @system_arguments[:classes] = class_names(
-        @system_arguments[:classes],
-        "UnderlineNav",
-        "UnderlineNav--right" => @align == :right
-      )
-
-      @body_arguments = body_arguments
-      @body_tag = fetch_or_fallback(BODY_TAG_OPTIONS, body_arguments[:tag]&.to_sym, BODY_TAG_DEFAULT)
-
-      @body_arguments[:tag] = @body_tag
-      @body_arguments[:classes] = class_names(
-        "UnderlineNav-body",
-        @body_arguments[:classes],
-        "list-style-none" => list?
-      )
-
-      if with_panel
-        @body_arguments[:role] = :tablist
-        @body_arguments[:"aria-label"] = label
-      else
-        @system_arguments[:"aria-label"] = label
-      end
-    end
-
-    private
-
-    def list?
-      @body_tag == :ul
-    end
-
-    def body
-      Primer::BaseComponent.new(**@body_arguments)
-    end
-  end
-end