primer_view_components 0.0.35 → 0.0.40

data/app/components/primer/tab_container_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use TabContainer to create tabbed content with keyboard support. This component does not add any styles.
+  # 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) %>.
   #
   # This component requires javascript.

data/app/components/primer/tab_nav_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use TabNav to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page.
+  # Use `TabNav` to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page.
   class TabNavComponent < Primer::Component
     include Primer::TabbedComponentHelper
 

data/app/components/primer/text_component.rb

@@ -1,18 +1,21 @@
 # frozen_string_literal: true
 
 module Primer
-  # The Text component is a wrapper component that will apply typography styles to the text inside.
+  # `Text` is a wrapper component that will apply typography styles to the text inside.
   class TextComponent < Primer::Component
     status :beta
 
+    DEFAULT_TAG = :span
+
     # @example Default
     #   <%= render(Primer::TextComponent.new(tag: :p, font_weight: :bold)) { "Bold Text" } %>
     #   <%= render(Primer::TextComponent.new(tag: :p, color: :text_danger)) { "Danger Text" } %>
     #
+    # @param tag [Symbol]
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(**system_arguments)
+    def initialize(tag: DEFAULT_TAG, **system_arguments)
       @system_arguments = system_arguments
-      @system_arguments[:tag] ||= :span
+      @system_arguments[:tag] = tag
     end
 
     def call

data/app/components/primer/time_ago_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use Primer::TimeAgoComponent to display a time relative to how long ago it was. This component requires JavaScript.
+  # Use `TimeAgo` to display a time relative to how long ago it was. This component requires JavaScript.
   class TimeAgoComponent < Primer::Component
     status :beta
 

data/app/components/primer/timeline_item_component.rb

@@ -19,7 +19,7 @@ module Primer
 
     # Badge that will be connected to other TimelineItems.
     #
-    # @param icon [String] Name of [Octicon](https://primer.style/octicons/) to use.
+    # @param icon [String] Name of <%= link_to_octicons %> to use.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     renders_one :badge, "BadgeComponent"
 

data/app/components/primer/tooltip_component.rb

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # The Tooltip component is a wrapper component that will apply a tooltip to the provided content.
+  # `Tooltip` is a wrapper component that will apply a tooltip to the provided content.
   class TooltipComponent < Primer::Component
     DIRECTION_DEFAULT = :n
     ALIGN_DEFAULT = :default

data/app/components/primer/{truncate_component.rb → truncate.rb}

@@ -1,21 +1,23 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use TruncateComponent to shorten overflowing text with an ellipsis.
-  class TruncateComponent < Primer::Component
+  # Use `Truncate` to shorten overflowing text with an ellipsis.
+  class Truncate < Primer::Component
+    status :beta
+
     # @example Default
     #   <div class="col-2">
-    #     <%= render(Primer::TruncateComponent.new(tag: :p)) { "branch-name-that-is-really-long" } %>
+    #     <%= render(Primer::Truncate.new(tag: :p)) { "branch-name-that-is-really-long" } %>
     #   </div>
     #
     # @example Inline
-    #   <%= render(Primer::TruncateComponent.new(tag: :span, inline: true)) { "branch-name-that-is-really-long" } %>
+    #   <%= render(Primer::Truncate.new(tag: :span, inline: true)) { "branch-name-that-is-really-long" } %>
     #
     # @example Expandable
-    #   <%= render(Primer::TruncateComponent.new(tag: :span, inline: true, expandable: true)) { "branch-name-that-is-really-long" } %>
+    #   <%= render(Primer::Truncate.new(tag: :span, inline: true, expandable: true)) { "branch-name-that-is-really-long" } %>
     #
     # @example Custom size
-    #   <%= render(Primer::TruncateComponent.new(tag: :span, inline: true, expandable: true, max_width: 100)) { "branch-name-that-is-really-long" } %>
+    #   <%= render(Primer::Truncate.new(tag: :span, inline: true, expandable: true, max_width: 100)) { "branch-name-that-is-really-long" } %>
     #
     # @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

@@ -1,7 +1,7 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use the UnderlineNav component to style navigation with a minimal
+  # Use `UnderlineNav` to style navigation with a minimal
   # underlined selected state, typically used for navigation placed at the top
   # of the page.
   class UnderlineNavComponent < Primer::Component

data/app/lib/primer/classify.rb

@@ -3,35 +3,29 @@
 module Primer
   # :nodoc:
   class Classify
-    DIRECTION_KEY = :direction
-    JUSTIFY_CONTENT_KEY = :justify_content
-    ALIGN_ITEMS_KEY = :align_items
     DISPLAY_KEY = :display
     SPACING_KEYS = Primer::Classify::Spacing::KEYS
-    RESPONSIVE_KEYS = ([DISPLAY_KEY, DIRECTION_KEY, JUSTIFY_CONTENT_KEY, ALIGN_ITEMS_KEY, :col, :float] + SPACING_KEYS).freeze
-    BREAKPOINTS = ["", "-sm", "-md", "-lg", "-xl"].freeze
 
     # Keys where we can simply translate { key: value } into ".key-value"
     CONCAT_KEYS = SPACING_KEYS + %i[hide position v float col text box_shadow].freeze
 
     INVALID_CLASS_NAME_PREFIXES =
-      (["bg-", "color-", "text-", "d-", "v-align-", "wb-", "text-", "box-shadow-"] + CONCAT_KEYS.map { |k| "#{k}-" }).freeze
+      (["bg-", "color-", "text-", "d-", "v-align-", "wb-", "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[text_align font_weight].freeze
-    FLEX_KEY = :flex
-    FLEX_GROW_KEY = :flex_grow
-    FLEX_SHRINK_KEY = :flex_shrink
-    ALIGN_SELF_KEY = :align_self
     WIDTH_KEY = :width
     HEIGHT_KEY = :height
     BOX_SHADOW_KEY = :box_shadow
     VISIBILITY_KEY = :visibility
     ANIMATION_KEY = :animation
 
+    BREAKPOINTS = ["", "-sm", "-md", "-lg", "-xl"].freeze
+    RESPONSIVE_KEYS = ([DISPLAY_KEY, :col, :float] + SPACING_KEYS + Primer::Classify::Flex::RESPONSIVE_KEYS).freeze
+
     BOOLEAN_MAPPINGS = {
       underline: {
         mappings: [
@@ -89,6 +83,7 @@ module Primer
       BORDER_MARGIN_KEYS +
       TYPOGRAPHY_KEYS +
       TEXT_KEYS +
+      Primer::Classify::Flex::KEYS +
       [
         BORDER_KEY,
         BORDER_COLOR_KEY,
@@ -98,13 +93,6 @@ module Primer
         DISPLAY_KEY,
         VERTICAL_ALIGN_KEY,
         WORD_BREAK_KEY,
-        DIRECTION_KEY,
-        JUSTIFY_CONTENT_KEY,
-        ALIGN_ITEMS_KEY,
-        FLEX_KEY,
-        FLEX_GROW_KEY,
-        FLEX_SHRINK_KEY,
-        ALIGN_SELF_KEY,
         WIDTH_KEY,
         HEIGHT_KEY,
         BOX_SHADOW_KEY,
@@ -120,7 +108,7 @@ module Primer
         extracted_results[:class] = [
           validated_class_names(classes),
           extracted_results.delete(:classes)
-        ].compact.join(" ").presence
+        ].compact.join(" ").strip.presence
 
         extracted_results[:style] = [
           extracted_results.delete(:styles),
@@ -216,23 +204,10 @@ module Primer
           memo[:classes] << "#{key.to_s.dasherize}-#{val}"
         elsif key == BORDER_RADIUS_KEY
           memo[:classes] << "rounded-#{val}"
-        elsif key == DIRECTION_KEY
-          memo[:classes] << "flex#{breakpoint}-#{val.to_s.dasherize}"
-        elsif key == JUSTIFY_CONTENT_KEY
-          formatted_value = val.to_s.gsub(/(flex\_|space\_)/, "")
-          memo[:classes] << "flex#{breakpoint}-justify-#{formatted_value}"
-        elsif key == ALIGN_ITEMS_KEY
-          memo[:classes] << "flex#{breakpoint}-items-#{val.to_s.gsub('flex_', '')}"
-        elsif key == FLEX_KEY
-          memo[:classes] << "flex-#{val}"
-        elsif key == FLEX_GROW_KEY
-          memo[:classes] << "flex-grow-#{val}"
-        elsif key == FLEX_SHRINK_KEY
-          memo[:classes] << "flex-shrink-#{val}"
-        elsif key == ALIGN_SELF_KEY
-          memo[:classes] << "flex-self-#{val}"
+        elsif Primer::Classify::Flex::KEYS.include?(key)
+          memo[:classes] << Primer::Classify::Flex.classes(key, val, breakpoint)
         elsif key == WIDTH_KEY || key == HEIGHT_KEY
-          if val == :fit || val == :fill
+          if val == :fit
             memo[:classes] << "#{key}-#{val}"
           else
             memo[key] = val

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

@@ -40,18 +40,18 @@ module Primer
           )
 
           preload(
-            keys: Primer::Classify::DIRECTION_KEY,
-            values: [:row, :column]
+            keys: Primer::Classify::Flex::DIRECTION_KEY,
+            values: Primer::Classify::Flex::DIRECTION_VALUES
           )
 
           preload(
-            keys: Primer::Classify::JUSTIFY_CONTENT_KEY,
-            values: [:flex_start, :flex_end, :center, :space_between, :space_around]
+            keys: Primer::Classify::Flex::JUSTIFY_CONTENT_KEY,
+            values: Primer::Classify::Flex::JUSTIFY_CONTENT_VALUES
           )
 
           preload(
-            keys: Primer::Classify::ALIGN_ITEMS_KEY,
-            values: [:flex_start, :flex_end, :center, :baseline, :stretch]
+            keys: Primer::Classify::Flex::ALIGN_ITEMS_KEY,
+            values: Primer::Classify::Flex::ALIGN_ITEMS_VALUES
           )
 
           preload(
@@ -61,12 +61,12 @@ module Primer
 
           preload(
             keys: [Primer::Classify::COLOR_KEY],
-            values: [*Primer::Classify::FunctionalTextColors::OPTIONS, *Primer::Classify::FunctionalTextColors::DEPRECATED_OPTIONS]
+            values: Primer::Classify::FunctionalTextColors::OPTIONS
           )
 
           preload(
             keys: [Primer::Classify::BG_KEY],
-            values: [*Primer::Classify::FunctionalBackgroundColors::OPTIONS, *Primer::Classify::FunctionalBackgroundColors::DEPRECATED_OPTIONS]
+            values: Primer::Classify::FunctionalBackgroundColors::OPTIONS
           )
 
           preload(
@@ -90,23 +90,28 @@ module Primer
           )
 
           preload(
-            keys: Primer::Classify::FLEX_KEY,
-            values: [1, :auto]
+            keys: Primer::Classify::Flex::FLEX_KEY,
+            values: Primer::Classify::Flex::FLEX_VALUES
           )
 
           preload(
-            keys: [Primer::Classify::FLEX_GROW_KEY, Primer::Classify::FLEX_SHRINK_KEY],
-            values: [0]
+            keys: Primer::Classify::Flex::GROW_KEY,
+            values: Primer::Classify::Flex::GROW_VALUES
           )
 
           preload(
-            keys: [Primer::Classify::ALIGN_SELF_KEY],
-            values: [:auto, :start, :end, :center, :baseline, :stretch]
+            keys: Primer::Classify::Flex::SHRINK_KEY,
+            values: Primer::Classify::Flex::SHRINK_VALUES
+          )
+
+          preload(
+            keys: Primer::Classify::Flex::ALIGN_SELF_KEY,
+            values: Primer::Classify::Flex::ALIGN_SELF_VALUES
           )
 
           preload(
             keys: [Primer::Classify::WIDTH_KEY, Primer::Classify::HEIGHT_KEY],
-            values: [:fit, :fill]
+            values: [:fit]
           )
 
           preload(

data/app/lib/primer/classify/flex.rb

@@ -0,0 +1,111 @@
+# frozen_string_literal: true
+
+module Primer
+  class Classify
+    # Handler for PrimerCSS flex classes.
+    class Flex
+      extend Primer::FetchOrFallbackHelper
+
+      FLEX_KEY = :flex
+      FLEX_VALUES = [1, :auto].freeze
+
+      WRAP_KEY = :flex_wrap
+      WRAP_MAPPINGS = {
+        wrap: "flex-wrap",
+        nowrap: "flex-nowrap",
+        reverse: "flex-wrap-reverse"
+      }.freeze
+
+      SHRINK_KEY = :flex_shrink
+      SHRINK_VALUES = [0].freeze
+
+      GROW_KEY = :flex_grow
+      GROW_VALUES = [0].freeze
+
+      ALIGN_SELF_KEY = :align_self
+      ALIGN_SELF_VALUES = [:auto, :start, :end, :center, :baseline, :stretch].freeze
+
+      DIRECTION_KEY = :direction
+      DIRECTION_VALUES = [:column, :column_reverse, :row, :row_reverse].freeze
+
+      JUSTIFY_CONTENT_KEY = :justify_content
+      JUSTIFY_CONTENT_VALUES = [:flex_start, :flex_end, :center, :space_between, :space_around].freeze
+
+      ALIGN_ITEMS_KEY = :align_items
+      ALIGN_ITEMS_VALUES = [:flex_start, :flex_end, :center, :baseline, :stretch].freeze
+
+      KEYS = [FLEX_KEY, WRAP_KEY, SHRINK_KEY, GROW_KEY, ALIGN_SELF_KEY, DIRECTION_KEY, JUSTIFY_CONTENT_KEY, ALIGN_ITEMS_KEY].freeze
+      RESPONSIVE_KEYS = [DIRECTION_KEY, JUSTIFY_CONTENT_KEY, ALIGN_ITEMS_KEY].freeze
+
+      class << self
+        def classes(key, value, breakpoint)
+          send(key, value, breakpoint)
+        end
+
+        private
+
+        def flex(value, _breakpoint)
+          generate(
+            value: value,
+            allowed_values: FLEX_VALUES,
+            prefix: "flex"
+          )
+        end
+
+        def flex_shrink(value, _breakpoint)
+          generate(
+            value: value,
+            allowed_values: SHRINK_VALUES,
+            prefix: "flex-shrink"
+          )
+        end
+
+        def flex_grow(value, _breakpoint)
+          generate(
+            value: value,
+            allowed_values: GROW_VALUES,
+            prefix: "flex-grow"
+          )
+        end
+
+        def align_self(value, _breakpoint)
+          generate(
+            value: value,
+            allowed_values: ALIGN_SELF_VALUES,
+            prefix: "flex-self"
+          )
+        end
+
+        def flex_wrap(value, _breakpoint)
+          WRAP_MAPPINGS[fetch_or_fallback(WRAP_MAPPINGS.keys, value)]
+        end
+
+        def direction(value, breakpoint)
+          val = fetch_or_fallback(DIRECTION_VALUES, value)
+
+          "flex#{breakpoint}-#{val.to_s.dasherize}"
+        end
+
+        def justify_content(value, breakpoint)
+          val = fetch_or_fallback(JUSTIFY_CONTENT_VALUES, value)
+
+          formatted_value = val.to_s.gsub(/(flex\_|space\_)/, "")
+          "flex#{breakpoint}-justify-#{formatted_value}"
+        end
+
+        def align_items(value, breakpoint)
+          val = fetch_or_fallback(ALIGN_ITEMS_VALUES, value)
+
+          formatted_value = val.to_s.gsub("flex_", "")
+          "flex#{breakpoint}-items-#{formatted_value}"
+        end
+
+        def generate(value:, allowed_values:, prefix:)
+          val = fetch_or_fallback(allowed_values, value)
+
+          "#{prefix}-#{val}"
+        end
+      end
+    end
+  end
+end

data/app/lib/primer/classify/functional_border_colors.rb

@@ -13,8 +13,7 @@ module Primer
         success: :success,
         warning: :warning,
         danger: :danger,
-        inverse: :inverse,
-        overlay: :overlay
+        inverse: :inverse
       }.freeze
 
       MAPPINGS = {

data/app/lib/primer/fetch_or_fallback_helper.rb

@@ -25,10 +25,10 @@ module Primer
 
     InvalidValueError = Class.new(StandardError)
 
-    def fetch_or_fallback(allowed_values, given_value, fallback = nil, deprecated_values: [])
+    def fetch_or_fallback(allowed_values, given_value, fallback = nil, deprecated_values: nil)
       if allowed_values.include?(given_value)
         given_value
-      elsif deprecated_values.include?(given_value)
+      elsif deprecated_values&.include?(given_value)
         ActiveSupport::Deprecation.warn("#{given_value} is deprecated and will be removed in a future version.") unless Rails.env.production? || silence_deprecations?
 
         given_value

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

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Primer
+  module Octicon
+    # :nodoc:
+    class Cache
+      LOOKUP = {} # rubocop:disable Style/MutableConstant
+      # Preload the top 20 used icons.
+      PRELOADED_ICONS = [:alert, :check, :"chevron-down", :clippy, :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("_")
+        end
+
+        def read(key)
+          LOOKUP[key]
+        end
+
+        # Cache size limit.
+        def limit
+          500
+        end
+
+        def set(key, value)
+          LOOKUP[key] = value
+
+          # Remove first item when the cache is too large.
+          LOOKUP.shift if LOOKUP.size > limit
+        end
+
+        def clear!
+          LOOKUP.clear
+        end
+
+        def preload!
+          PRELOADED_ICONS.each { |icon| Primer::OcticonComponent.new(icon: icon) }
+        end
+      end
+    end
+  end
+end