primer_view_components 0.0.44 → 0.0.48

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,7 +10,8 @@ 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 selected [Boolean] Whether the tab is selected.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -62,19 +63,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, 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") do |t| %>
     #       <% t.text { "Tab 2" } %>
     #       <% t.panel do %>
     #         Panel 2
     #       <% end %>
     #     <% end %>
-    #     <% c.tab do |t| %>
+    #     <% c.tab(id: "tab-3") do |t| %>
     #       <% t.text { "Tab 3" } %>
     #       <% t.panel do %>
     #         Panel 3
@@ -119,7 +120,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 +132,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

@@ -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,7 +13,11 @@ 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 selected [Boolean] Whether the tab is selected.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -34,9 +38,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 +104,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") do |t| %>
     #       <% t.text { "Item 1" } %>
     #       <% t.panel do %>
     #         Panel 1
     #       <% end %>
     #     <% end %>
-    #     <% component.tab do |t| %>
+    #     <% component.tab(id: "tab-2") do |t| %>
     #       <% t.text { "Item 2" } %>
     #       <% t.panel do %>
     #         Panel 2
@@ -131,7 +136,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,31 +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
-    DISPLAY_KEY = :display
-    SPACING_KEYS = Primer::Classify::Spacing::KEYS
-
     # Keys where we can simply translate { key: value } into ".key-value"
-    CONCAT_KEYS = SPACING_KEYS + %i[hide position v float 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, :float, Primer::Classify::Grid::COL_KEY] + SPACING_KEYS + Primer::Classify::Flex::RESPONSIVE_KEYS).freeze
+    RESPONSIVE_KEYS = ([Primer::Classify::Grid::COL_KEY] + Primer::Classify::Flex::RESPONSIVE_KEYS).freeze
 
     BOOLEAN_MAPPINGS = {
       underline: {
@@ -79,6 +80,7 @@ module Primer
     BORDER_RADIUS_KEY = :border_radius
     TYPOGRAPHY_KEYS = [:font_size].freeze
     VALID_KEYS = (
+      Primer::Classify::Utilities::UTILITIES.keys +
       CONCAT_KEYS +
       BOOLEAN_MAPPINGS.keys +
       BORDER_MARGIN_KEYS +
@@ -92,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
@@ -129,7 +126,7 @@ module Primer
         if force_system_arguments? && !ENV["PRIMER_WARNINGS_DISABLED"]
           invalid_class_names =
             classes.split(" ").each_with_object([]) do |class_name, memo|
-              memo << class_name if INVALID_CLASS_NAME_PREFIXES.any? { |prefix| class_name.start_with?(prefix) }
+              memo << class_name if INVALID_CLASS_NAME_PREFIXES.any? { |prefix| class_name.start_with?(prefix) } || Primer::Classify::Utilities.supported_selector?(class_name)
             end
 
           raise ArgumentError, "Use System Arguments (https://primer.style/view-components/system-arguments) instead of Primer CSS class #{'name'.pluralize(invalid_class_names.length)} #{invalid_class_names.to_sentence}. This warning will not be raised in production. Set PRIMER_WARNINGS_DISABLED=1 to disable this warning." if invalid_class_names.any?
@@ -155,7 +152,7 @@ module Primer
           next unless VALID_KEYS.include?(key)
 
           if value.is_a?(Array)
-            raise ArgumentError, "#{key} does not support responsive values" unless RESPONSIVE_KEYS.include?(key)
+            raise ArgumentError, "#{key} does not support responsive values" unless RESPONSIVE_KEYS.include?(key) || Primer::Classify::Utilities.supported_key?(key)
 
             value.each_with_index do |val, index|
               Primer::Classify::Cache.read(memo, key, val, BREAKPOINTS[index]) || extract_value(memo, key, val, BREAKPOINTS[index])
@@ -173,8 +170,8 @@ module Primer
       def extract_value(memo, key, val, breakpoint)
         return if val.nil? || val == ""
 
-        if SPACING_KEYS.include?(key)
-          memo[:classes] << Primer::Classify::Spacing.spacing(key, val, breakpoint)
+        if Primer::Classify::Utilities.supported_key?(key)
+          memo[:classes] << Primer::Classify::Utilities.classname(key, val, breakpoint)
         elsif BOOLEAN_MAPPINGS.key?(key)
           BOOLEAN_MAPPINGS[key][:mappings].each do |m|
             memo[:classes] << m[:css_class] if m[:value] == val && m[:css_class].present?
@@ -187,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"
@@ -233,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:
@@ -19,26 +25,6 @@ module Primer
         end
 
         def preload!
-          preload(
-            keys: Primer::Classify::Spacing::MARGIN_DIRECTION_MAPPINGS.keys,
-            values: Primer::Classify::Spacing::MARGIN_DIRECTION_OPTIONS
-          )
-
-          preload(
-            keys: Primer::Classify::Spacing::BASE_MAPPINGS.keys,
-            values: Primer::Classify::Spacing::BASE_OPTIONS
-          )
-
-          preload(
-            keys: Primer::Classify::Spacing::AUTO_MAPPINGS.keys,
-            values: Primer::Classify::Spacing::AUTO_OPTIONS
-          )
-
-          preload(
-            keys: Primer::Classify::Spacing::RESPONSIVE_MAPPINGS.keys,
-            values: Primer::Classify::Spacing::RESPONSIVE_OPTIONS
-          )
-
           preload(
             keys: Primer::Classify::Flex::DIRECTION_KEY,
             values: Primer::Classify::Flex::DIRECTION_VALUES
@@ -69,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
@@ -84,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]
@@ -133,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/lib/primer/classify/utilities.rb

@@ -0,0 +1,148 @@
+# frozen_string_literal: true
+
+# :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
+
+      class << self
+        def classname(key, val, breakpoint = "")
+          if (valid = validate(key, val, breakpoint))
+            valid
+          else
+            # Get selector
+            UTILITIES[key][val][BREAKPOINTS.index(breakpoint)]
+          end
+        end
+
+        # Does the Utilitiy class support the given key
+        #
+        # returns Boolean
+        def supported_key?(key)
+          UTILITIES[key].present?
+        end
+
+        # Does the Utilitiy class support the given key and value
+        #
+        # returns Boolean
+        def supported_value?(key, val)
+          supported_key?(key) && UTILITIES[key][val].present?
+        end
+
+        # Does the given selector exist in the utilities file
+        #
+        # returns Boolean
+        def supported_selector?(selector)
+          # This method is too slow to run in production
+          return false if ENV["RAILS_ENV"] == "production"
+
+          find_selector(selector).present?
+        end
+
+        # Is the key and value responsive
+        #
+        # returns Boolean
+        def responsive?(key, val)
+          supported_value?(key, val) && UTILITIES[key][val].count > 1
+        end
+
+        # Get the options for the given key
+        #
+        # returns Array or nil if key not supported
+        def mappings(key)
+          return unless supported_key?(key)
+
+          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 ENV["RAILS_ENV"] == "production"
+
+          obj = {}
+          classes = classes.split(" ")
+          # Loop through all classes supplied and reject ones we find a match for
+          # So when we're at the end of the loop we have classes left with any non-system classes.
+          classes.reject! do |classname|
+            key, value, index = find_selector(classname)
+            next false if key.nil?
+
+            # Create array if nil
+            obj[key] = Array.new(5, nil) if obj[key].nil?
+            # Place the arguments in the responsive array based on index mr: [nil, 2]
+            obj[key][index] = value
+            next true
+          end
+
+          # Transform responsive arrays into arrays without trailing nil, so `mr: [1, nil, nil, nil, nil]` becomes `mr: 1`
+          obj.transform_values! do |value|
+            value = value.reverse.drop_while(&:nil?).reverse
+            if value.count == 1
+              value.first
+            else
+              value
+            end
+          end
+
+          # Add back the non-system classes
+          obj[:classes] = classes.join(" ") if classes.any?
+          obj
+        end
+
+        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" ] }`
+          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
+          end
+
+          nil
+        end
+
+        def validate(key, val, breakpoint)
+          unless supported_key?(key)
+            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 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 ENV["RAILS_ENV"] == "production"
+
+            return ""
+          end
+
+          nil
+        end
+      end
+    end
+  end
+end