primer_view_components 0.0.45 → 0.0.49

data/app/components/primer/popover_component.rb

@@ -23,12 +23,15 @@ module Primer
       :top_right => "Popover-message--top-right"
     }.freeze
 
+    DEFAULT_HEADING_TAG = :h4
+
     # The heading
     #
+    # @param tag [Symbol] (Primer::PopoverComponent::DEFAULT_HEADING_TAG) <%= one_of(Primer::HeadingComponent::TAG_OPTIONS) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_one :heading, lambda { |**system_arguments|
+    renders_one :heading, lambda { |tag: DEFAULT_HEADING_TAG, **system_arguments|
+      system_arguments[:tag] = tag
       system_arguments[:mb] ||= 2
-      system_arguments[:tag] ||= :h4
 
       Primer::HeadingComponent.new(**system_arguments)
     }
@@ -106,7 +109,7 @@ module Primer
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(**system_arguments)
       @system_arguments = system_arguments
-      @system_arguments[:tag] ||= :div
+      @system_arguments[:tag] = :div
       @system_arguments[:classes] = class_names(
         system_arguments[:classes],
         "Popover"

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

@@ -1,4 +1,4 @@
-import './auto_complete/auto_complete';
+import './beta/auto_complete/auto_complete';
 import './clipboard_copy_component';
 import './tab_container_component';
 import './time_ago_component';

data/app/components/primer/primer.js

@@ -1,4 +1,4 @@
-import './auto_complete/auto_complete';
+import './beta/auto_complete/auto_complete';
 import './clipboard_copy_component';
 import './tab_container_component';
 import './time_ago_component';

data/app/components/primer/primer.ts

@@ -1,4 +1,4 @@
-import './auto_complete/auto_complete'
+import './beta/auto_complete/auto_complete'
 import './clipboard_copy_component'
 import './tab_container_component'
 import './time_ago_component'

data/app/components/primer/tab_nav_component.rb

@@ -10,8 +10,10 @@ module Primer
     DEFAULT_EXTRA_ALIGN = :left
     EXTRA_ALIGN_OPTIONS = [DEFAULT_EXTRA_ALIGN, :right].freeze
 
-    # Tabs to be rendered. For more information, refer to <%= link_to_component(Primer::Navigation::TabComponent) %>.
+    # Tabs to be rendered. 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|
@@ -62,19 +64,19 @@ module Primer
     #
     # @example With panels
     #   <%= render(Primer::TabNavComponent.new(label: "With panels", with_panel: true)) do |c| %>
-    #     <% c.tab(selected: true) do |t| %>
+    #     <% c.tab(selected: true, panel_id: "panel-1", id: "tab-1") do |t| %>
     #       <% t.text { "Tab 1" } %>
     #       <% t.panel do %>
     #         Panel 1
     #       <% end %>
     #     <% end %>
-    #     <% c.tab do |t| %>
+    #     <% c.tab(id: "tab-2", panel_id: "panel-2") do |t| %>
     #       <% t.text { "Tab 2" } %>
     #       <% t.panel do %>
     #         Panel 2
     #       <% end %>
     #     <% end %>
-    #     <% c.tab do |t| %>
+    #     <% c.tab(id: "tab-3", panel_id: "panel-3") do |t| %>
     #       <% t.text { "Tab 3" } %>
     #       <% t.panel do %>
     #         Panel 3
@@ -119,7 +121,8 @@ module Primer
     #   <% end %>
     #
     # @param label [String] Used to set the `aria-label` on the top level `<nav>` element.
-    # @param with_panel [Boolean] Whether the TabNav should navigate through pages or panels.
+    # @param with_panel [Boolean] Whether the TabNav should navigate through pages or panels. When true, <%= link_to_component(Primer::TabContainerComponent) %>
+    #   is rendered along with JavaScript behavior. Additionally, the `tab` slot will render as a button as opposed to an anchor.
     # @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 %>
@@ -130,7 +133,7 @@ module Primer
       @body_arguments = body_arguments
       @wrapper_arguments = wrapper_arguments
 
-      @system_arguments[:tag] ||= :div
+      @system_arguments[:tag] = :div
       @system_arguments[:classes] = class_names(
         "tabnav",
         system_arguments[:classes]

data/app/components/primer/timeline_item_component.rb

@@ -7,14 +7,14 @@ module Primer
 
     # Avatar to be rendered to the left of the Badge.
     #
-    # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::AvatarComponent) %>.
+    # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Avatar) %>.
     renders_one :avatar, lambda { |src:, size: 40, square: true, **system_arguments|
       system_arguments[:classes] = class_names(
         "TimelineItem-avatar",
         system_arguments[:classes]
       )
 
-      Primer::AvatarComponent.new(src: src, size: size, square: square, **system_arguments)
+      Primer::Beta::Avatar.new(src: src, size: size, square: square, **system_arguments)
     }
 
     # Badge that will be connected to other TimelineItems.

data/app/components/primer/tooltip.rb

@@ -70,7 +70,7 @@ module Primer
       **system_arguments
     )
       @system_arguments = system_arguments
-      @system_arguments[:tag] ||= :span
+      @system_arguments[:tag] ||= :span # rubocop:disable Primer/NoTagMemoize
       @system_arguments[:aria] = { label: label }
 
       @system_arguments[:classes] = class_names(

data/app/components/primer/truncate.rb

@@ -6,7 +6,7 @@ module Primer
     status :beta
 
     DEFAULT_TAG = :div
-    TAG_OPTIONS = [DEFAULT_TAG, :span, :p].freeze
+    TAG_OPTIONS = [DEFAULT_TAG, :span, :p, :strong].freeze
 
     # @example Default
     #   <div class="col-2">
@@ -22,6 +22,11 @@ module Primer
     # @example Custom size
     #   <%= render(Primer::Truncate.new(tag: :span, inline: true, expandable: true, max_width: 100)) { "branch-name-that-is-really-long" } %>
     #
+    # @example With HTML content
+    #   <%= render(Primer::Truncate.new(tag: :span, inline: true, expandable: true, max_width: 100)) do %>
+    #     <span>branch-name-that-is-really-long</span>
+    #   <% end %>
+    #
     # @param tag [Symbol] <%= one_of(Primer::Truncate::TAG_OPTIONS) %>
     # @param inline [Boolean] Whether the element is inline (or inline-block).
     # @param expandable [Boolean] Whether the entire string should be revealed on hover. Can only be used in conjunction with `inline`.

data/app/components/primer/underline_nav_component.rb

@@ -13,8 +13,13 @@ module Primer
     BODY_TAG_DEFAULT = :div
     BODY_TAG_OPTIONS = [BODY_TAG_DEFAULT, :ul].freeze
 
-    # Use the tabs to list navigation items. For more information, refer to <%= link_to_component(Primer::Navigation::TabComponent) %>.
+    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|
@@ -34,9 +39,10 @@ module Primer
 
     # 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 { |**system_arguments|
-      system_arguments[:tag] ||= :div
+    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)
@@ -99,13 +105,13 @@ module Primer
     #
     # @example With panels
     #   <%= render(Primer::UnderlineNavComponent.new(label: "With panels", with_panel: true)) do |component| %>
-    #     <% component.tab(selected: true) do |t| %>
+    #     <% 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 do |t| %>
+    #     <% component.tab(id: "tab-2", panel_id: "panel-2") do |t| %>
     #       <% t.text { "Item 2" } %>
     #       <% t.panel do %>
     #         Panel 2
@@ -131,7 +137,8 @@ module Primer
     #   <% end %>
     #
     # @param label [String] The `aria-label` on top level `<nav>` element.
-    # @param with_panel [Boolean] Whether the TabNav should navigate through pages or panels.
+    # @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`.

data/{app/lib → lib}/primer/classify.rb

@@ -1,40 +1,32 @@
 # frozen_string_literal: true
 
+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"
+
 module Primer
   # :nodoc:
   class Classify
-    # Load the utilities.yml file.
-    # Disabling because we want to load symbols, strings, and integers from the .yml file
-    # rubocop:disable Security/YAMLLoad
-    UTILITIES = YAML.load(
-      File.read(
-        File.join(File.dirname(__FILE__), "./classify/utilities.yml")
-      )
-    ).freeze
-    # rubocop:enable Security/YAMLLoad
-
-    DISPLAY_KEY = :display
-
     # Keys where we can simply translate { key: value } into ".key-value"
-    CONCAT_KEYS = %i[position v text box_shadow].freeze
+    CONCAT_KEYS = %i[text box_shadow].freeze
 
     INVALID_CLASS_NAME_PREFIXES =
-      (["bg-", "color-", "text-", "d-", "v-align-", "wb-", "box-shadow-"] + CONCAT_KEYS.map { |k| "#{k}-" }).freeze
+      (["bg-", "color-", "text-", "box-shadow-"] + CONCAT_KEYS.map { |k| "#{k}-" }).freeze
 
     COLOR_KEY = :color
     BG_KEY = :bg
-    VERTICAL_ALIGN_KEY = :vertical_align
-    WORD_BREAK_KEY = :word_break
     TEXT_KEYS = %i[font_family font_style font_weight text_align text_transform].freeze
     WIDTH_KEY = :width
     HEIGHT_KEY = :height
     BOX_SHADOW_KEY = :box_shadow
-    VISIBILITY_KEY = :visibility
-    ANIMATION_KEY = :animation
     CONTAINER_KEY = :container
 
     BREAKPOINTS = ["", "-sm", "-md", "-lg", "-xl"].freeze
-    RESPONSIVE_KEYS = ([DISPLAY_KEY, Primer::Classify::Grid::COL_KEY] + Primer::Classify::Flex::RESPONSIVE_KEYS).freeze
+    RESPONSIVE_KEYS = ([Primer::Classify::Grid::COL_KEY] + Primer::Classify::Flex::RESPONSIVE_KEYS).freeze
 
     BOOLEAN_MAPPINGS = {
       underline: {
@@ -88,7 +80,7 @@ module Primer
     BORDER_RADIUS_KEY = :border_radius
     TYPOGRAPHY_KEYS = [:font_size].freeze
     VALID_KEYS = (
-      UTILITIES.keys +
+      Primer::Classify::Utilities::UTILITIES.keys +
       CONCAT_KEYS +
       BOOLEAN_MAPPINGS.keys +
       BORDER_MARGIN_KEYS +
@@ -102,14 +94,9 @@ module Primer
         BORDER_RADIUS_KEY,
         COLOR_KEY,
         BG_KEY,
-        DISPLAY_KEY,
-        VERTICAL_ALIGN_KEY,
-        WORD_BREAK_KEY,
         WIDTH_KEY,
         HEIGHT_KEY,
         BOX_SHADOW_KEY,
-        VISIBILITY_KEY,
-        ANIMATION_KEY,
         CONTAINER_KEY
       ]
     ).freeze
@@ -197,12 +184,6 @@ module Primer
           end
         elsif key == COLOR_KEY
           memo[:classes] << Primer::Classify::FunctionalTextColors.color(val)
-        elsif key == DISPLAY_KEY
-          memo[:classes] << "d#{breakpoint}-#{val.to_s.dasherize}"
-        elsif key == VERTICAL_ALIGN_KEY
-          memo[:classes] << "v-align-#{val.to_s.dasherize}"
-        elsif key == WORD_BREAK_KEY
-          memo[:classes] << "wb-#{val.to_s.dasherize}"
         elsif key == BORDER_KEY
           border_value = if val == true
                            "border"
@@ -243,14 +224,6 @@ module Primer
                             else
                               "color-shadow-#{val.to_s.dasherize}"
                             end
-        elsif key == VISIBILITY_KEY
-          memo[:classes] << "v-#{val.to_s.dasherize}"
-        elsif key == ANIMATION_KEY
-          memo[:classes] << if val == :grow
-                              "hover-grow"
-                            else
-                              "anim-#{val.to_s.dasherize}"
-                            end
         else
           memo[:classes] << "#{key.to_s.dasherize}#{breakpoint}-#{val.to_s.dasherize}"
         end

data/{app/lib → lib}/primer/classify/cache.rb

@@ -1,5 +1,11 @@
 # frozen_string_literal: true
 
+require_relative "flex"
+require_relative "functional_background_colors"
+require_relative "functional_border_colors"
+require_relative "functional_text_colors"
+require_relative "grid"
+
 module Primer
   class Classify
     # :nodoc:
@@ -49,11 +55,6 @@ module Primer
             values: Primer::Classify::Grid::COL_VALUES
           )
 
-          preload(
-            keys: Primer::Classify::DISPLAY_KEY,
-            values: [:flex, :block, :inline_block, :inline_flex, :none, :table, :table_cell]
-          )
-
           preload(
             keys: [Primer::Classify::COLOR_KEY],
             values: Primer::Classify::FunctionalTextColors::OPTIONS
@@ -64,16 +65,6 @@ module Primer
             values: Primer::Classify::FunctionalBackgroundColors::OPTIONS
           )
 
-          preload(
-            keys: Primer::Classify::VERTICAL_ALIGN_KEY,
-            values: [:baseline, :top, :middle, :bottom, :text_top, :text_bottom]
-          )
-
-          preload(
-            keys: Primer::Classify::WORD_BREAK_KEY,
-            values: [:break_all]
-          )
-
           preload(
             keys: :text_align,
             values: [:left, :center, :right]
@@ -113,11 +104,6 @@ module Primer
             keys: Primer::Classify::BOX_SHADOW_KEY,
             values: [true, :small, :medium, :large, :extra_large, :none]
           )
-
-          preload(
-            keys: Primer::Classify::VISIBILITY_KEY,
-            values: [:hidden, :visible]
-          )
         end
 
         def preload(keys:, values:)

data/{app/lib → lib}/primer/classify/functional_background_colors.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require_relative "functional_colors"
+
 module Primer
   class Classify
     # Background specific functional colors

data/{app/lib → lib}/primer/classify/functional_border_colors.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require_relative "functional_colors"
+
 module Primer
   class Classify
     # Border specific functional colors

data/{app/lib → lib}/primer/classify/functional_text_colors.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require_relative "functional_colors"
+
 module Primer
   class Classify
     # Text specific functional colors.

data/{app/lib → lib}/primer/classify/utilities.rb

@@ -1,17 +1,39 @@
 # frozen_string_literal: true
 
+require "yaml"
+
 # :nodoc:
 module Primer
   class Classify
     # Handler for PrimerCSS utility classes loaded from utilities.rake
     class Utilities
+      # Load the utilities.yml file.
+      # Disabling because we want to load symbols, strings, and integers from the .yml file
+      # rubocop:disable Security/YAMLLoad
+      UTILITIES = YAML.load(
+        File.read(
+          File.join(File.dirname(__FILE__), "./utilities.yml")
+        )
+      ).freeze
+      # rubocop:enable Security/YAMLLoad
+      BREAKPOINTS = ["", "-sm", "-md", "-lg", "-xl"].freeze
+
+      # Replacements for some classnames that end up being a different argument key
+      REPLACEMENT_KEYS = {
+        "^anim" => "animation",
+        "^v-align" => "vertical_align",
+        "^d" => "display",
+        "^wb" => "word_break",
+        "^v" => "visibility"
+      }.freeze
+
       class << self
         def classname(key, val, breakpoint = "")
           if (valid = validate(key, val, breakpoint))
             valid
           else
             # Get selector
-            Primer::Classify::UTILITIES[key][val][Primer::Classify::BREAKPOINTS.index(breakpoint)]
+            UTILITIES[key][val][BREAKPOINTS.index(breakpoint)]
           end
         end
 
@@ -19,14 +41,14 @@ module Primer
         #
         # returns Boolean
         def supported_key?(key)
-          Primer::Classify::UTILITIES[key].present?
+          UTILITIES[key].present?
         end
 
         # Does the Utilitiy class support the given key and value
         #
         # returns Boolean
         def supported_value?(key, val)
-          supported_key?(key) && Primer::Classify::UTILITIES[key][val].present?
+          supported_key?(key) && UTILITIES[key][val].present?
         end
 
         # Does the given selector exist in the utilities file
@@ -34,7 +56,7 @@ module Primer
         # returns Boolean
         def supported_selector?(selector)
           # This method is too slow to run in production
-          return false if Rails.env.production?
+          return false if ENV["RAILS_ENV"] == "production"
 
           find_selector(selector).present?
         end
@@ -43,7 +65,7 @@ module Primer
         #
         # returns Boolean
         def responsive?(key, val)
-          supported_value?(key, val) && Primer::Classify::UTILITIES[key][val].count > 1
+          supported_value?(key, val) && UTILITIES[key][val].count > 1
         end
 
         # Get the options for the given key
@@ -52,13 +74,13 @@ module Primer
         def mappings(key)
           return unless supported_key?(key)
 
-          Primer::Classify::UTILITIES[key].keys
+          UTILITIES[key].keys
         end
 
         # Extract hash from classes ie. "mr-1 mb-2 foo" => { mr: 1, mb: 2, classes: "foo" }
         def classes_to_hash(classes)
           # This method is too slow to run in production
-          return { classes: classes } if Rails.env.production?
+          return { classes: classes } if ENV["RAILS_ENV"] == "production"
 
           obj = {}
           classes = classes.split(" ")
@@ -93,38 +115,48 @@ module Primer
         private
 
         def find_selector(selector)
-          # Search each key/value_hash pair, eg. key `:mr` and value_hash `{ 0 => [ "mr-0", "mr-sm-0", "mr-md-0", "mr-lg-0", "mr-xl-0" ] }`
-          Primer::Classify::UTILITIES.each do |key, value_hash|
-            # Each value hash will also contain an array of classnames for breakpoints
-            # Key argument `0`, classes `[ "mr-0", "mr-sm-0", "mr-md-0", "mr-lg-0", "mr-xl-0" ]`
-            value_hash.each do |key_argument, classnames|
-              # Skip each value hash until we get one with the selector
-              next unless classnames.include?(selector)
-
-              # Return [:mr, 0, 1]
-              # has index of classname, so we can match it up with responsvie array `mr: [nil, 0]`
-              return [key, key_argument, classnames.index(selector)]
-            end
+          key = infer_selector_key(selector)
+          value_hash = UTILITIES[key]
+
+          return nil if value_hash.blank?
+
+          # Each value hash will also contain an array of classnames for breakpoints
+          # Key argument `0`, classes `[ "mr-0", "mr-sm-0", "mr-md-0", "mr-lg-0", "mr-xl-0" ]`
+          value_hash.each do |key_argument, classnames|
+            # Skip each value hash until we get one with the selector
+            next unless classnames.include?(selector)
+
+            # Return [:mr, 0, 1]
+            # has index of classname, so we can match it up with responsvie array `mr: [nil, 0]`
+            return [key, key_argument, classnames.index(selector)]
           end
 
           nil
         end
 
+        def infer_selector_key(selector)
+          REPLACEMENT_KEYS.each do |k, v|
+            return v.to_sym if selector.match?(Regexp.new(k))
+          end
+
+          selector.split("-").first.to_sym
+        end
+
         def validate(key, val, breakpoint)
           unless supported_key?(key)
-            raise ArgumentError, "#{key} is not a valid Primer utility key" unless Rails.env.production?
+            raise ArgumentError, "#{key} is not a valid Primer utility key" unless ENV["RAILS_ENV"] == "production"
 
             return ""
           end
 
           unless breakpoint.empty? || responsive?(key, val)
-            raise ArgumentError, "#{key} does not support responsive values" unless Rails.env.production?
+            raise ArgumentError, "#{key} does not support responsive values" unless ENV["RAILS_ENV"] == "production"
 
             return ""
           end
 
           unless supported_value?(key, val)
-            raise ArgumentError, "#{val} is not a valid value for :#{key}. Use one of #{mappings(key)}" unless Rails.env.production?
+            raise ArgumentError, "#{val} is not a valid value for :#{key}. Use one of #{mappings(key)}" unless ENV["RAILS_ENV"] == "production"
 
             return ""
           end