primer_view_components 0.0.53 → 0.0.57

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

@@ -1,23 +1,18 @@
-<%= wrapper(**@wrapper_arguments) do %>
+<%= tab_container_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/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/{breadcrumb_component.html.erb → 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

@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `Breadcrumbs` to display page hierarchy.
+    class Breadcrumbs < Primer::Component
+      status :beta
+
+      # @param href [String] The URL to link to.
+      # @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(href: "/about/team") 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
+        attr_accessor :selected, :href
+
+        def initialize(href:, **system_arguments)
+          @href = href
+          @system_arguments = system_arguments
+          @selected = false
+
+          @system_arguments[:tag] = :li
+          @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
+            render(Primer::LinkComponent.new(**link_arguments)) { content }
+          end
+        end
+      end
+    end
+  end
+end

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

@@ -2,8 +2,8 @@
 
 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.
+    # This component is part of navigation components such as `Primer::Alpha::TabNav`
+    # 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 `TabNav` 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/octicon_component.rb

@@ -41,7 +41,12 @@ module Primer
         system_arguments.delete(:width)
       end
 
-      cache_key = Primer::Octicon::Cache.get_key(symbol: icon_key, size: size, **system_arguments.slice(:height, :width))
+      cache_key = Primer::Octicon::Cache.get_key(
+        symbol: icon_key,
+        size: size,
+        height: system_arguments[:height],
+        width: system_arguments[:width]
+      )
 
       @system_arguments = system_arguments
       @system_arguments[:tag] = :svg

data/app/components/primer/tab_container_component.rb

@@ -2,7 +2,7 @@
 
 module Primer
   # Use `TabContainer` to create tabbed content with keyboard support. This component does not add any styles.
-  # It only provides the tab functionality. If you want styled Tabs you can look at <%= link_to_component(Primer::TabNavComponent) %>.
+  # It only provides the tab functionality. If you want styled Tabs you can look at <%= link_to_component(Primer::Alpha::TabNav) %>.
   #
   # This component requires javascript.
   class TabContainerComponent < Primer::Component

data/app/lib/primer/class_name_helper.rb

@@ -7,22 +7,23 @@ module Primer
   # :nodoc:
   module ClassNameHelper
     def class_names(*args)
-      classes = []
-
-      args.each do |class_name|
-        case class_name
-        when String
-          classes << class_name if class_name.present?
-        when Hash
-          class_name.each do |key, val|
-            classes << key if val
+      [].tap do |classes|
+        args.each do |class_name|
+          case class_name
+          when String
+            classes << class_name if class_name.present?
+          when Hash
+            class_name.each do |key, val|
+              classes << key if val
+            end
+          when Array
+            classes << class_names(*class_name).presence
           end
-        when Array
-          classes << class_names(*class_name).presence
         end
-      end
 
-      classes.compact.uniq.join(" ")
+        classes.compact!
+        classes.uniq!
+      end.join(" ")
     end
   end
 end

data/app/lib/primer/octicon/cache.rb

@@ -9,8 +9,9 @@ module Primer
       PRELOADED_ICONS = [:alert, :check, :"chevron-down", :paste, :clock, :"dot-fill", :info, :"kebab-horizontal", :link, :lock, :mail, :pencil, :plus, :question, :repo, :search, :"shield-lock", :star, :trash, :x].freeze
 
       class << self
-        def get_key(symbol:, size:, width: nil, height: nil)
-          [symbol, size, width, height].join("_")
+        def get_key(**kwargs)
+          correct_key_args?(**kwargs)
+          kwargs.hash
         end
 
         def read(key)
@@ -36,6 +37,13 @@ module Primer
         def preload!
           PRELOADED_ICONS.each { |icon| Primer::OcticonComponent.new(icon: icon) }
         end
+
+        private
+
+        def correct_key_args?(symbol:, size:, width: nil, height: nil)
+          # This method does nothing but will raise an ArgumentError if the
+          # wrong args are passed.
+        end
       end
     end
   end

data/app/lib/primer/tab_nav_helper.rb

@@ -0,0 +1,35 @@
+# 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 TabNavHelper
+    extend ActiveSupport::Concern
+
+    EXTRA_ALIGN_DEFAULT = :left
+    EXTRA_ALIGN_OPTIONS = [EXTRA_ALIGN_DEFAULT, :right].freeze
+
+    def tab_nav_tab_classes(classes)
+      class_names(
+        "tabnav-tab",
+        classes
+      )
+    end
+
+    def tab_nav_classes(classes)
+      class_names(
+        "tabnav",
+        classes
+      )
+    end
+
+    def tab_nav_body_classes(classes)
+      class_names(
+        "tabnav-tabs",
+        classes
+      )
+    end
+  end
+end

data/app/lib/primer/tabbed_component_helper.rb

@@ -16,12 +16,12 @@ module Primer
 
     private
 
-    def navigation_tag(with_panel)
-      with_panel ? :div : :nav
+    def aria_label_for_page_nav(label)
+      @system_arguments[:tag] == :nav ? @system_arguments[:"aria-label"] = label : @body_arguments[:"aria-label"] = label
     end
 
-    def wrapper(**system_arguments)
-      return yield unless @with_panel
+    def tab_container_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/classify/cache.rb

@@ -3,7 +3,6 @@
 require_relative "flex"
 require_relative "functional_background_colors"
 require_relative "functional_border_colors"
-require_relative "functional_text_colors"
 require_relative "grid"
 
 module Primer
@@ -55,11 +54,6 @@ module Primer
             values: Primer::Classify::Grid::COL_VALUES
           )
 
-          preload(
-            keys: [Primer::Classify::COLOR_KEY],
-            values: Primer::Classify::FunctionalTextColors::OPTIONS
-          )
-
           preload(
             keys: [Primer::Classify::BG_KEY],
             values: Primer::Classify::FunctionalBackgroundColors::OPTIONS