primer_view_components 0.0.54 → 0.0.55

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,11 +16,11 @@ 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(with_panel:, **system_arguments)
+    def tab_container_wrapper(with_panel:, **system_arguments)
       return yield unless with_panel
 
       render Primer::TabContainerComponent.new(**system_arguments) do

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

data/lib/primer/classify/utilities.rb

@@ -175,7 +175,7 @@ module Primer
           unless supported_value?(key, val)
             raise ArgumentError, "#{val} is not a valid value for :#{key}. Use one of #{mappings(key)}" unless ENV["RAILS_ENV"] == "production"
 
-            return ""
+            return "#{key.to_s.dasherize}-#{val.to_s.dasherize}"
           end
 
           nil

data/lib/primer/classify/utilities.yml

@@ -22,6 +22,39 @@
   - anim-hover-grow
   :rotate:
   - anim-rotate
+:color:
+  :text_primary:
+  - color-text-primary
+  :text_secondary:
+  - color-text-secondary
+  :text_tertiary:
+  - color-text-tertiary
+  :text_link:
+  - color-text-link
+  :text_success:
+  - color-text-success
+  :text_warning:
+  - color-text-warning
+  :text_danger:
+  - color-text-danger
+  :text_inverse:
+  - color-text-inverse
+  :text_white:
+  - color-text-white
+  :icon_primary:
+  - color-icon-primary
+  :icon_secondary:
+  - color-icon-secondary
+  :icon_tertiary:
+  - color-icon-tertiary
+  :icon_info:
+  - color-icon-info
+  :icon_danger:
+  - color-icon-danger
+  :icon_success:
+  - color-icon-success
+  :icon_warning:
+  - color-icon-warning
 :position:
   :static:
   - position-static
@@ -1220,6 +1253,8 @@
   - py-lg-12
   - py-xl-12
 :word_break:
+  :break_word:
+  - wb-break-word
   :break_all:
   - wb-break-all
 :display:

data/lib/primer/classify.rb

@@ -4,7 +4,6 @@ require_relative "classify/cache"
 require_relative "classify/flex"
 require_relative "classify/functional_background_colors"
 require_relative "classify/functional_border_colors"
-require_relative "classify/functional_text_colors"
 require_relative "classify/grid"
 require_relative "classify/utilities"
 require_relative "classify/validation"
@@ -15,7 +14,6 @@ module Primer
     # Keys where we can simply translate { key: value } into ".key-value"
     CONCAT_KEYS = %i[text box_shadow].freeze
 
-    COLOR_KEY = :color
     BG_KEY = :bg
     TEXT_KEYS = %i[font_family font_style font_weight text_align text_transform].freeze
     BOX_SHADOW_KEY = :box_shadow
@@ -88,7 +86,6 @@ module Primer
         BORDER_KEY,
         BORDER_COLOR_KEY,
         BORDER_RADIUS_KEY,
-        COLOR_KEY,
         BG_KEY,
         BOX_SHADOW_KEY,
         CONTAINER_KEY
@@ -176,8 +173,6 @@ module Primer
           else
             memo[:classes] << Primer::Classify::FunctionalBackgroundColors.color(val)
           end
-        elsif key == COLOR_KEY
-          memo[:classes] << Primer::Classify::FunctionalTextColors.color(val)
         elsif key == BORDER_KEY
           border_value = if val == true
                            "border"

data/lib/primer/view_components/version.rb

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

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

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+require "rubocop"
+require "primer/view_components/statuses"
+require_relative "../../../../app/lib/primer/view_helper"
+
+module RuboCop
+  module Cop
+    module Primer
+      # :nodoc:
+      class BaseCop < RuboCop::Cop::Cop
+        # We only verify SystemArguments if it's a `.new` call on a component or
+        # a ViewHeleper call.
+        def valid_node?(node)
+          return if node.nil?
+
+          view_helpers.include?(node.method_name) || (node.method_name == :new && !node.receiver.nil? && ::Primer::ViewComponents::STATUSES.key?(node.receiver.const_name))
+        end
+
+        private
+
+        def view_helpers
+          ::Primer::ViewHelper::HELPERS.keys.map { |key| "primer_#{key}".to_sym }
+        end
+      end
+    end
+  end
+end

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

@@ -1,8 +1,6 @@
 # frozen_string_literal: true
 
 require "rubocop"
-require "primer/view_components/statuses"
-require_relative "../../../../app/lib/primer/view_helper"
 
 # :nocov:
 module RuboCop
@@ -15,7 +13,7 @@ module RuboCop
       #
       # good
       # Component.new(foo: :bar)
-      class DeprecatedArguments < RuboCop::Cop::Cop
+      class DeprecatedArguments < BaseCop
         INVALID_MESSAGE = <<~STR
           Avoid using deprecated arguments: https://primer.style/view-components/deprecated.
         STR
@@ -259,18 +257,6 @@ module RuboCop
             corrector.replace(node, replacement) if replacement.present?
           end
         end
-
-        private
-
-        # We only verify SystemArguments if it's a `.new` call on a component or
-        # a ViewHleper call.
-        def valid_node?(node)
-          view_helpers.include?(node.method_name) || (node.method_name == :new && ::Primer::ViewComponents::STATUSES.key?(node.receiver.const_name))
-        end
-
-        def view_helpers
-          ::Primer::ViewHelper::HELPERS.keys.map { |key| "primer_#{key}".to_sym }
-        end
       end
     end
   end

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

@@ -2,8 +2,6 @@
 
 require "rubocop"
 require "primer/classify/utilities"
-require "primer/view_components/statuses"
-require_relative "../../../../app/lib/primer/view_helper"
 
 # :nocov:
 module RuboCop
@@ -16,7 +14,7 @@ module RuboCop
       #
       # good
       # Component.new(mr: 1)
-      class SystemArgumentInsteadOfClass < RuboCop::Cop::Cop
+      class SystemArgumentInsteadOfClass < BaseCop
         INVALID_MESSAGE = <<~STR
           Avoid using CSS classes when you can use System Arguments: https://primer.style/view-components/system-arguments.
         STR
@@ -53,18 +51,6 @@ module RuboCop
             corrector.replace(node.loc.expression, args)
           end
         end
-
-        private
-
-        # We only verify SystemArguments if it's a `.new` call on a component or
-        # a ViewHleper call.
-        def valid_node?(node)
-          view_helpers.include?(node.method_name) || (node.method_name == :new && ::Primer::ViewComponents::STATUSES.key?(node.receiver.const_name))
-        end
-
-        def view_helpers
-          ::Primer::ViewHelper::HELPERS.keys.map { |key| "primer_#{key}".to_sym }
-        end
       end
     end
   end

data/lib/tasks/docs.rake

@@ -68,7 +68,6 @@ namespace :docs do
       Primer::SpinnerComponent,
       Primer::SubheadComponent,
       Primer::TabContainerComponent,
-      Primer::TabNavComponent,
       Primer::Beta::Text,
       Primer::TimeAgoComponent,
       Primer::TimelineItemComponent,
@@ -76,7 +75,8 @@ namespace :docs do
       Primer::Truncate,
       Primer::Beta::Truncate,
       Primer::Alpha::UnderlineNav,
-      Primer::Alpha::UnderlinePanels
+      Primer::Alpha::TabNav,
+      Primer::Alpha::TabPanels
     ]
 
     js_components = [
@@ -86,9 +86,9 @@ namespace :docs do
       Primer::Beta::AutoComplete,
       Primer::ClipboardCopy,
       Primer::TabContainerComponent,
-      Primer::TabNavComponent,
       Primer::TimeAgoComponent,
-      Primer::Alpha::UnderlinePanels
+      Primer::Alpha::UnderlinePanels,
+      Primer::Alpha::TabPanels
     ]
 
     all_components = Primer::Component.descendants - [Primer::BaseComponent]
@@ -206,7 +206,7 @@ namespace :docs do
             f.puts
             f.puts("### `#{slot_documentation.name.to_s.capitalize}`")
 
-            if slot_documentation.base_docstring.present?
+            if slot_documentation.base_docstring.to_s.present?
               f.puts
               f.puts(view_context.render(inline: slot_documentation.base_docstring))
             end

data/lib/tasks/utilities.rake

@@ -11,6 +11,8 @@ namespace :utilities do
     # rubocop:disable Lint/ConstantDefinitionInBlock
     SUPPORTED_KEYS = %i[
       anim
+      color-icon
+      color-text
       d
       float
       height

data/static/arguments.yml

@@ -22,8 +22,8 @@
     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
+- component: TabNav
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tab_nav.rb
   parameters:
   - name: tag
     type: Symbol
@@ -34,10 +34,6 @@
     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: "`{}`"
@@ -46,8 +42,8 @@
     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
+- component: TabPanels
+  source: https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tab_panels.rb
   parameters:
   - name: label
     type: String
@@ -56,7 +52,7 @@
       the purpose of the tabs.
   - name: align
     type: Symbol
-    default: "`:left`"
+    default: N/A
     description: One of `:left` and `:right`. - Defaults to left
   - name: body_arguments
     type: Hash
@@ -70,6 +66,30 @@
     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: BaseButton
   source: https://github.com/primer/view_components/tree/main/app/components/primer/base_button.rb
   parameters:
@@ -886,33 +906,6 @@
     type: Hash
     default: N/A
     description: "[System arguments](/system-arguments)"
-- component: TabNav
-  source: https://github.com/primer/view_components/tree/main/app/components/primer/tab_nav_component.rb
-  parameters:
-  - name: label
-    type: String
-    default: N/A
-    description: Used to set the `aria-label` on the top level `<nav>` element.
-  - name: with_panel
-    type: Boolean
-    default: "`false`"
-    description: Whether the TabNav should navigate through pages or panels. When
-      true, [TabContainer](/components/tabcontainer) is rendered along with JavaScript
-      behavior. Additionally, the `tab` slot will render as a button as opposed to
-      an anchor.
-  - 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.
-      Only applies if `with_panel` is `true`."
-  - name: system_arguments
-    type: Hash
-    default: N/A
-    description: "[System arguments](/system-arguments)"
 - component: TimeAgo
   source: https://github.com/primer/view_components/tree/main/app/components/primer/time_ago_component.rb
   parameters: