primer_view_components 0.0.61 → 0.0.65

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

@@ -9,9 +9,10 @@ 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(**kwargs)
-          correct_key_args?(**kwargs)
-          kwargs.hash
+        def get_key(symbol:, size:, width: nil, height: nil)
+          attrs = { symbol: symbol, size: size, width: width, height: height }
+          attrs.compact!
+          attrs.hash
         end
 
         def read(key)
@@ -37,13 +38,6 @@ 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/lib/primer/classify/utilities.rb

@@ -16,21 +16,8 @@ module Primer
         )
       ).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",
-        "^width" => "w",
-        "^height" => "h",
-        "^color-bg" => "bg",
-        "^color-border" => "border_color",
-        "^color-fg" => "color"
-      }.freeze
+      BREAKPOINTS = ["", "-sm", "-md", "-lg", "-xl"].freeze
 
       SUPPORTED_KEY_CACHE = Hash.new { |h, k| h[k] = !UTILITIES[k].nil? }
       BREAKPOINT_INDEX_CACHE = Hash.new { |h, k| h[k] = BREAKPOINTS.index(k) }
@@ -145,36 +132,6 @@ module Primer
           end.join(", ")
         end
 
-        private
-
-        def find_selector(selector)
-          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" if validate_class_names?
@@ -191,11 +148,27 @@ module Primer
           unless supported_value?(key, val)
             raise ArgumentError, "#{val} is not a valid value for :#{key}. Use one of #{mappings(key)}" if validate_class_names?
 
+            return nil if [true, false].include?(val)
+
             return "#{key.to_s.dasherize}-#{val.to_s.dasherize}"
           end
 
           nil
         end
+
+        private
+
+        def find_selector(selector)
+          # Build hash indexed on the selector for fast lookup.
+          @selector_cache ||= UTILITIES.each_with_object({}) do |(keyword, argument_w_selectors), dict|
+            argument_w_selectors.each do |argument, selectors|
+              selectors.each_with_index do |css_selector, index|
+                dict[css_selector] = [keyword, argument, index]
+              end
+            end
+          end
+          @selector_cache[selector]
+        end
       end
     end
   end

data/lib/primer/classify/utilities.yml

@@ -47,38 +47,6 @@
   - color-fg-on-emphasis
   :inherit:
   - color-fg-inherit
-  :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
 :bg:
   :default:
   - color-bg-default
@@ -118,30 +86,6 @@
   - color-bg-sponsors
   :sponsors_emphasis:
   - color-bg-sponsors-emphasis
-  :canvas:
-  - color-bg-canvas
-  :canvas_inverse:
-  - color-bg-canvas-inverse
-  :canvas_inset:
-  - color-bg-canvas-inset
-  :primary:
-  - color-bg-primary
-  :secondary:
-  - color-bg-secondary
-  :tertiary:
-  - color-bg-tertiary
-  :info:
-  - color-bg-info
-  :info_inverse:
-  - color-bg-info-inverse
-  :danger_inverse:
-  - color-bg-danger-inverse
-  :success_inverse:
-  - color-bg-success-inverse
-  :warning:
-  - color-bg-warning
-  :warning_inverse:
-  - color-bg-warning-inverse
 :border_color:
   :default:
   - color-border-default
@@ -177,18 +121,6 @@
   - color-border-sponsors
   :sponsors_emphasis:
   - color-border-sponsors-emphasis
-  :primary:
-  - color-border-primary
-  :secondary:
-  - color-border-secondary
-  :tertiary:
-  - color-border-tertiary
-  :inverse:
-  - color-border-inverse
-  :info:
-  - color-border-info
-  :warning:
-  - color-border-warning
 :position:
   :static:
   - position-static
@@ -1545,3 +1477,301 @@
   - col-md-12
   - col-lg-12
   - col-xl-12
+:font_size:
+  '00':
+  - f00
+  1:
+  - f1
+  2:
+  - f2
+  3:
+  - f3
+  4:
+  - f4
+  5:
+  - f5
+  6:
+  - f6
+  :small:
+  - text-small
+  :normal:
+  - text-normal
+:top:
+  0:
+  - top-0
+  false:
+  - top-0
+:bottom:
+  0:
+  - bottom-0
+  false:
+  - bottom-0
+:left:
+  0:
+  - left-0
+  false:
+  - left-0
+:right:
+  0:
+  - right-0
+  false:
+  - right-0
+:underline:
+  true:
+  - text-underline
+  false:
+  - no-underline
+:font_family:
+  :mono:
+  - text-mono
+:font_style:
+  :italic:
+  - text-italic
+:text_transform:
+  :uppercase:
+  - text-uppercase
+:text_align:
+  :right:
+  - text-right
+  :left:
+  - text-left
+  :center:
+  - text-center
+:font_weight:
+  :light:
+  - text-light
+  :normal:
+  - text-normal
+  :bold:
+  - text-bold
+  :semibold:
+  - text-semibold
+  :emphasized:
+  - text-emphasized
+:box_shadow:
+  true:
+  - color-shadow-small
+  :small:
+  - color-shadow-small
+  :medium:
+  - color-shadow-medium
+  :large:
+  - color-shadow-large
+  :extra_large:
+  - color-shadow-extra-large
+  :none:
+  - box-shadow-none
+  false:
+  - box-shadow-none
+:border:
+  :left:
+  - border-left
+  :top:
+  - border-top
+  :bottom:
+  - border-bottom
+  :right:
+  - border-right
+  :y:
+  - border-y
+  :x:
+  - border-x
+  true:
+  - border
+  0:
+  - border-0
+  false:
+  - border-0
+  :dashed:
+  - border-dashed
+:border_top:
+  0:
+  - border-top-0
+:border_bottom:
+  0:
+  - border-bottom-0
+:border_left:
+  0:
+  - border-left-0
+:border_right:
+  0:
+  - border-right-0
+:border_radius:
+  0:
+  - rounded-0
+  1:
+  - rounded-1
+  2:
+  - rounded-2
+  3:
+  - rounded-3
+:justify_content:
+  :flex_start:
+  - flex-justify-start
+  - flex-sm-justify-start
+  - flex-md-justify-start
+  - flex-lg-justify-start
+  - flex-xl-justify-start
+  :flex_end:
+  - flex-justify-end
+  - flex-sm-justify-end
+  - flex-md-justify-end
+  - flex-lg-justify-end
+  - flex-xl-justify-end
+  :center:
+  - flex-justify-center
+  - flex-sm-justify-center
+  - flex-md-justify-center
+  - flex-lg-justify-center
+  - flex-xl-justify-center
+  :space_between:
+  - flex-justify-between
+  - flex-sm-justify-between
+  - flex-md-justify-between
+  - flex-lg-justify-between
+  - flex-xl-justify-between
+  :space_around:
+  - flex-justify-around
+  - flex-sm-justify-around
+  - flex-md-justify-around
+  - flex-lg-justify-around
+  - flex-xl-justify-around
+:align_items:
+  :flex_start:
+  - flex-items-start
+  - flex-sm-items-start
+  - flex-md-items-start
+  - flex-lg-items-start
+  - flex-xl-items-start
+  :flex_end:
+  - flex-items-end
+  - flex-sm-items-end
+  - flex-md-items-end
+  - flex-lg-items-end
+  - flex-xl-items-end
+  :center:
+  - flex-items-center
+  - flex-sm-items-center
+  - flex-md-items-center
+  - flex-lg-items-center
+  - flex-xl-items-center
+  :baseline:
+  - flex-items-baseline
+  - flex-sm-items-baseline
+  - flex-md-items-baseline
+  - flex-lg-items-baseline
+  - flex-xl-items-baseline
+  :stretch:
+  - flex-items-stretch
+  - flex-sm-items-stretch
+  - flex-md-items-stretch
+  - flex-lg-items-stretch
+  - flex-xl-items-stretch
+:flex_wrap:
+  :wrap:
+  - flex-wrap
+  - flex-sm-wrap
+  - flex-md-wrap
+  - flex-lg-wrap
+  - flex-xl-wrap
+  :nowrap:
+  - flex-nowrap
+  - flex-sm-nowrap
+  - flex-md-nowrap
+  - flex-lg-nowrap
+  - flex-xl-nowrap
+  :reverse:
+  - flex-wrap-reverse
+  - flex-sm-wrap-reverse
+  - flex-md-wrap-reverse
+  - flex-lg-wrap-reverse
+  - flex-xl-wrap-reverse
+:direction:
+  :column:
+  - flex-column
+  - flex-sm-column
+  - flex-md-column
+  - flex-lg-column
+  - flex-xl-column
+  :column_reverse:
+  - flex-column-reverse
+  - flex-sm-column-reverse
+  - flex-md-column-reverse
+  - flex-lg-column-reverse
+  - flex-xl-column-reverse
+  :row:
+  - flex-row
+  - flex-sm-row
+  - flex-md-row
+  - flex-lg-row
+  - flex-xl-row
+  :row_reverse:
+  - flex-row-reverse
+  - flex-sm-row-reverse
+  - flex-md-row-reverse
+  - flex-lg-row-reverse
+  - flex-xl-row-reverse
+:flex:
+  1:
+  - flex-1
+  - flex-sm-1
+  - flex-md-1
+  - flex-lg-1
+  - flex-xl-1
+  :auto:
+  - flex-auto
+  - flex-sm-auto
+  - flex-md-auto
+  - flex-lg-auto
+  - flex-xl-auto
+:align_self:
+  :auto:
+  - flex-self-auto
+  - flex-sm-self-auto
+  - flex-md-self-auto
+  - flex-lg-self-auto
+  - flex-xl-self-auto
+  :start:
+  - flex-self-start
+  - flex-sm-self-start
+  - flex-md-self-start
+  - flex-lg-self-start
+  - flex-xl-self-start
+  :end:
+  - flex-self-end
+  - flex-sm-self-end
+  - flex-md-self-end
+  - flex-lg-self-end
+  - flex-xl-self-end
+  :center:
+  - flex-self-center
+  - flex-sm-self-center
+  - flex-md-self-center
+  - flex-lg-self-center
+  - flex-xl-self-center
+  :baseline:
+  - flex-self-baseline
+  - flex-sm-self-baseline
+  - flex-md-self-baseline
+  - flex-lg-self-baseline
+  - flex-xl-self-baseline
+  :stretch:
+  - flex-self-stretch
+  - flex-sm-self-stretch
+  - flex-md-self-stretch
+  - flex-lg-self-stretch
+  - flex-xl-self-stretch
+:flex_grow:
+  0:
+  - flex-grow-0
+  - flex-sm-grow-0
+  - flex-md-grow-0
+  - flex-lg-grow-0
+  - flex-xl-grow-0
+:flex_shrink:
+  0:
+  - flex-shrink-0
+  - flex-sm-shrink-0
+  - flex-md-shrink-0
+  - flex-lg-shrink-0
+  - flex-xl-shrink-0