primer_view_components 0.0.54 → 0.0.55

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c9b70049a9f24586f7b1239cdd97832cb9e813cc063ca475c77ae00ed448a6c4
-  data.tar.gz: 8df167c58fa86039a008d301969af68f7efa8e4345d49abf269cb09734ec1841
+  metadata.gz: 24d9b6954280f4366b91f69fe7d29af41b8ce480b015a6d2f281c9e6c3bd4637
+  data.tar.gz: cae48c352697db57fd18b2712850cdc5a47da809449dcbd1f32398a777135cda
 SHA512:
-  metadata.gz: 7c87327784f69a03b4636e2952c98da1feb4b5c47776c8e46cd423ae562d25aa061c99f0ff3ebee605984816db3b3c6209fd7ddb5ed0577a1ed7b1ff8a68bbc8
-  data.tar.gz: c386eb3940ee79d8992b45168e18846863c6d503801674d13efe6ea8617cfc9d7a3957e3e324959c884d13bdd66113188ea23c9bcbf9dce00ff9eb54ce0deef3
+  metadata.gz: e334ce2c9e71f8b54f0a22d094a333ce1df7216a601885732c2a1f669e03d67f4b0e2d9799c39600edc33e9ef972949a02de1a8adc4081c702b14d4bfe6bacbc
+  data.tar.gz: 4640a31794a5e6df77bcf1a707758bb970d80a33afbcd42a812efd3ce3c9f032b7789de55f3ab0d74d7d8657c1d06f3965f926437cf609455f3db4b2c4a2bc6f

data/CHANGELOG.md

@@ -30,6 +30,39 @@ The category for changes related to documentation, testing and tooling. Also, fo
 
 ## main
 
+## 0.0.55
+
+### Breaking changes
+
+* `Primer::Breadcrumbs` requires `href`s for all items and no longer accepts the `selected` argument.
+
+    *Joel Hawksley*
+
+* Split `TabNav` into `TabNav` and `TabPanels`.
+
+    *Kate Higa*
+
+### New
+
+* Use the allocation_stats gem to count object allocations in our benchmarks.
+* Improve performance of Octicon cache key construction.
+
+    *Cameron Dutro*
+
+* Update `@primer/css` to `17.7.0` which includes a new argument for `word_break`
+
+    *Jon Rohan*
+
+### Misc
+
+* Clean up extra constants in `UnderlineNav`.
+
+    *Kate Higa*
+
+* Refactor some of the rubocop valid_node? logic into BaseCop class.
+
+    *Jon Rohan*
+
 ## 0.0.54
 
 ### Breaking changes
@@ -68,6 +101,10 @@ The category for changes related to documentation, testing and tooling. Also, fo
 
     *Manuel Puyol*
 
+* Moving text color variables to Utilities class
+
+    *Jon Rohan*
+
 ### Bug fixes
 
 * Linters won't convert HTML special elements.

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

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

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

@@ -0,0 +1,130 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Use `TabNav` to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page.
+    # For panel navigation, use <%= link_to_component(Primer::Alpha::TabPanels) %> instead.
+    #
+    # @accessibility
+    #   - By default, `TabNav` 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 TabNav < Primer::Component
+      include Primer::TabbedComponentHelper
+      include Primer::TabNavHelper
+
+      status :alpha
+
+      BODY_TAG_DEFAULT = :ul
+
+      TAG_DEFAULT = :nav
+      TAG_OPTIONS = [TAG_DEFAULT, :div].freeze
+
+      # Tabs to be rendered. For more information, refer to <%= link_to_component(Primer::Navigation::TabComponent) %>.
+      #
+      # @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] = tab_nav_tab_classes(system_arguments[:classes])
+        Primer::Navigation::TabComponent.new(
+          list: true,
+          selected: selected,
+          **system_arguments
+        )
+      }
+
+      # Renders extra content to the `TabNav`. This will be rendered after the tabs.
+      #
+      # @param align [Symbol] <%= one_of(Primer::Alpha::TabNav::EXTRA_ALIGN_OPTIONS) %>
+      renders_one :extra, lambda { |align: EXTRA_ALIGN_DEFAULT, &block|
+        @align = fetch_or_fallback(EXTRA_ALIGN_OPTIONS, align, EXTRA_ALIGN_DEFAULT)
+
+        view_context.capture { block&.call }
+      }
+
+      # @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::TabNav.new(label: "Default")) do |c| %>
+      #       <% c.tab(selected: true, href: "#") { "Tab 1" } %>
+      #       <% c.tab(href: "#") { "Tab 2" } %>
+      #       <% c.tab(href: "#") { "Tab 3" } %>
+      #     <% end %>
+      #
+      # @example Default with `<div>`
+      #   <%= render(Primer::Alpha::TabNav.new(label: "Default")) do |c| %>
+      #     <% c.tab(selected: true, href: "#") { "Tab 1" } %>
+      #     <% c.tab(href: "#") { "Tab 2" } %>
+      #     <% c.tab(href: "#") { "Tab 3" } %>
+      #   <% end %>
+      #
+      # @example With icons and counters
+      #   <%= render(Primer::Alpha::TabNav.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 %>
+      #   <% end %>
+      #
+      # @example With extra content
+      #   <%= render(Primer::Alpha::TabNav.new(label: "With extra content")) do |c| %>
+      #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
+      #     <% c.tab(href: "#") { "Tab 2" } %>
+      #     <% c.tab(href: "#") { "Tab 3" } %>
+      #     <% c.extra do %>
+      #       <%= render(Primer::ButtonComponent.new(float: :right)) { "Button" } %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Adding extra content after the tabs
+      #   <%= render(Primer::Alpha::TabNav.new(label: "Adding extra content after the tabs", display: :flex, body_arguments: { flex: 1 })) do |c| %>
+      #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
+      #     <% c.tab(href: "#") { "Tab 2" } %>
+      #     <% c.tab(href: "#") { "Tab 3" } %>
+      #     <% c.extra(align: :right) do %>
+      #       <div>
+      #         <%= render(Primer::ButtonComponent.new) { "Button" } %>
+      #       </div>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Customizing the body
+      #   <%= render(Primer::Alpha::TabNav.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::TabNav::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 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, body_arguments: {}, **system_arguments)
+        @align = EXTRA_ALIGN_DEFAULT
+        @system_arguments = system_arguments
+        @body_arguments = body_arguments
+
+        @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
+        @system_arguments[:classes] = tab_nav_classes(system_arguments[:classes])
+
+        @body_arguments = body_arguments
+        @body_arguments[:tag] = BODY_TAG_DEFAULT
+        @body_arguments[:classes] = tab_nav_body_classes(system_arguments[:classes])
+
+        aria_label_for_page_nav(label)
+      end
+    end
+  end
+end

data/app/components/primer/{tab_nav_component.html.erb → alpha/tab_panels.html.erb}

@@ -1,19 +1,14 @@
-<%= wrapper(with_panel: @with_panel, **@wrapper_arguments) do %>
+<%= tab_container_wrapper(with_panel: true, **@wrapper_arguments) do %>
   <%= render Primer::BaseComponent.new(**@system_arguments) do %>
     <%= extra if @align == :left %>
-
     <%= render Primer::BaseComponent.new(**@body_arguments) do %>
       <% tabs.each do |tab| %>
         <%= tab %>
       <% end %>
     <% end %>
-
     <%= extra if @align == :right %>
   <% end %>
-
-  <% if @with_panel %>
-    <% tabs.each do |tab| %>
-      <%= tab.panel %>
-    <% end %>
+  <% tabs.each do |tab| %>
+    <%= tab.panel %>
   <% end %>
 <% end %>

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

@@ -0,0 +1,82 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Use `TabPanels` for tabs with panel navigation.
+    class TabPanels < Primer::Component
+      include Primer::TabbedComponentHelper
+      include Primer::TabNavHelper
+
+      status :alpha
+
+      BODY_TAG_DEFAULT = :ul
+
+      TAG_DEFAULT = :nav
+      TAG_OPTIONS = [TAG_DEFAULT, :div].freeze
+
+      # Tabs to be rendered. For more information, 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] = tab_nav_tab_classes(system_arguments[:classes])
+
+        Primer::Navigation::TabComponent.new(
+          selected: selected,
+          with_panel: true,
+          list: true,
+          panel_id: "panel-#{id}",
+          **system_arguments
+        )
+      }
+
+      # Renders extra content to the `TabPanels`. This will be rendered after the tabs.
+      #
+      # @param align [Symbol] <%= one_of(Primer::Alpha::TabNav::EXTRA_ALIGN_OPTIONS) %>
+      renders_one :extra, lambda { |align: EXTRA_ALIGN_DEFAULT, &block|
+        @align = fetch_or_fallback(EXTRA_ALIGN_OPTIONS, align, EXTRA_ALIGN_DEFAULT)
+
+        view_context.capture { block&.call }
+      }
+
+      # @example Default
+      #   <%= render(Primer::Alpha::TabPanels.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 %>
+      #   <% 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::TabNavHelper::EXTRA_ALIGN_OPTIONS) %> - Defaults to <%= Primer::TabNavHelper::EXTRA_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:, body_arguments: {}, wrapper_arguments: {}, **system_arguments)
+        @align = EXTRA_ALIGN_DEFAULT
+        @wrapper_arguments = wrapper_arguments
+
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] = tab_nav_classes(@system_arguments[:classes])
+
+        @body_arguments = body_arguments
+        @body_arguments[:tag] = :ul
+        @body_arguments[:classes] = tab_nav_body_classes(@body_arguments[:classes])
+
+        @body_arguments[:role] = :tablist
+        @body_arguments[:"aria-label"] = label
+      end
+    end
+  end
+end

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

@@ -17,17 +17,11 @@ module Primer
       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.
@@ -130,7 +124,7 @@ module Primer
         @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
+        aria_label_for_page_nav(label)
       end
 
       private

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

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

data/app/components/primer/base_component.rb

@@ -65,7 +65,7 @@ module Primer
     # | :- | :- | :- |
     # | `bg` | String, Symbol | Background color. Accepts either a hex value as a String or <%= one_of(Primer::Classify::FunctionalBackgroundColors::OPTIONS, lower: true) %> |
     # | `border_color` | Symbol | Border color. <%= one_of(Primer::Classify::FunctionalBorderColors::OPTIONS) %> |
-    # | `color` | Symbol | Text color. <%= one_of(Primer::Classify::FunctionalTextColors::OPTIONS) %> |
+    # | `color` | Symbol | Text color. <%= one_of(Primer::Classify::Utilities.mappings(:color)) %> |
     #
     # ## Flex
     #

data/app/components/primer/beta/breadcrumbs.html.erb

@@ -1,6 +1,7 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
   <ol>
-    <% items.each do |item| %>
+    <% items.each_with_index do |item, index| %>
+      <% item.selected = index == items.length - 1 %>
       <%= item %>
     <% end %>
   </ol>

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

@@ -2,14 +2,11 @@
 
 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.
+    # Use `Breadcrumbs` to display page hierarchy.
     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"
 
@@ -17,7 +14,7 @@ module Primer
       #   <%= 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 %>
+      #     <% component.item(href: "/about/team") do %>Team<% end %>
       #   <% end %>
       #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -34,23 +31,28 @@ module Primer
       # 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)
+        attr_accessor :selected, :href
+
+        def initialize(href:, **system_arguments)
           @href = href
           @system_arguments = system_arguments
+          @selected = false
 
-          @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
+          link_arguments = { href: @href }
+
+          if selected
+            link_arguments[:"aria-current"] = "page"
+            link_arguments[:classes] = "breadcrumb-item-selected"
+            @system_arguments[:classes] = "#{@system_arguments[:classes]} breadcrumb-item-selected"
+          end
+
           render(Primer::BaseComponent.new(**@system_arguments)) do
-            if @href.present?
-              render(Primer::LinkComponent.new(href: @href)) { content }
-            else
-              content
-            end
+            render(Primer::LinkComponent.new(**link_arguments)) { content }
           end
         end
       end

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

@@ -2,7 +2,7 @@
 
 module Primer
   module Navigation
-    # This component is part of navigation components such as `Primer::TabNavComponent`
+    # This component is part of navigation components such as `Primer::Alpha::TabNav`
     # and `Primer::Alpha::UnderlineNav` and should not be used by itself.
     #
     # @accessibility
@@ -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 `UnderlineNav` and `TabNavComponent` implementations for examples.
+      # Refer to `UnderlineNav` and `TabNav` implementations for examples.
       #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :panel, lambda { |**system_arguments|