primer_view_components 0.0.59 → 0.0.60

data/lib/primer/classify/utilities.yml

@@ -23,6 +23,30 @@
   :rotate:
   - anim-rotate
 :color:
+  :default:
+  - color-fg-default
+  :muted:
+  - color-fg-muted
+  :subtle:
+  - color-fg-subtle
+  :accent:
+  - color-fg-accent
+  :success:
+  - color-fg-success
+  :attention:
+  - color-fg-attention
+  :severe:
+  - color-fg-severe
+  :danger:
+  - color-fg-danger
+  :done:
+  - color-fg-done
+  :sponsors:
+  - color-fg-sponsors
+  :on_emphasis:
+  - color-fg-on-emphasis
+  :inherit:
+  - color-fg-inherit
   :text_primary:
   - color-text-primary
   :text_secondary:
@@ -55,24 +79,45 @@
   - color-icon-success
   :icon_warning:
   - color-icon-warning
-:border_color:
-  :primary:
-  - color-border-primary
-  :secondary:
-  - color-border-secondary
-  :tertiary:
-  - color-border-tertiary
-  :inverse:
-  - color-border-inverse
-  :info:
-  - color-border-info
+:bg:
+  :default:
+  - color-bg-default
+  :overlay:
+  - color-bg-overlay
+  :inset:
+  - color-bg-inset
+  :subtle:
+  - color-bg-subtle
+  :emphasis:
+  - color-bg-emphasis
+  :accent:
+  - color-bg-accent
+  :accent_emphasis:
+  - color-bg-accent-emphasis
   :success:
-  - color-border-success
+  - color-bg-success
+  :success_emphasis:
+  - color-bg-success-emphasis
+  :attention:
+  - color-bg-attention
+  :attention_emphasis:
+  - color-bg-attention-emphasis
+  :severe:
+  - color-bg-severe
+  :severe_emphasis:
+  - color-bg-severe-emphasis
   :danger:
-  - color-border-danger
-  :warning:
-  - color-border-warning
-:bg:
+  - color-bg-danger
+  :danger_emphasis:
+  - color-bg-danger-emphasis
+  :done:
+  - color-bg-done
+  :done_emphasis:
+  - color-bg-done-emphasis
+  :sponsors:
+  - color-bg-sponsors
+  :sponsors_emphasis:
+  - color-bg-sponsors-emphasis
   :canvas:
   - color-bg-canvas
   :canvas_inverse:
@@ -85,24 +130,65 @@
   - color-bg-secondary
   :tertiary:
   - color-bg-tertiary
-  :overlay:
-  - color-bg-overlay
   :info:
   - color-bg-info
   :info_inverse:
   - color-bg-info-inverse
-  :danger:
-  - color-bg-danger
   :danger_inverse:
   - color-bg-danger-inverse
-  :success:
-  - color-bg-success
   :success_inverse:
   - color-bg-success-inverse
   :warning:
   - color-bg-warning
   :warning_inverse:
   - color-bg-warning-inverse
+:border_color:
+  :default:
+  - color-border-default
+  :muted:
+  - color-border-muted
+  :subtle:
+  - color-border-subtle
+  :accent:
+  - color-border-accent
+  :accent_emphasis:
+  - color-border-accent-emphasis
+  :success:
+  - color-border-success
+  :success_emphasis:
+  - color-border-success-emphasis
+  :attention:
+  - color-border-attention
+  :attention_emphasis:
+  - color-border-attention-emphasis
+  :severe:
+  - color-border-severe
+  :severe_emphasis:
+  - color-border-severe-emphasis
+  :danger:
+  - color-border-danger
+  :danger_emphasis:
+  - color-border-danger-emphasis
+  :done:
+  - color-border-done
+  :done_emphasis:
+  - color-border-done-emphasis
+  :sponsors:
+  - 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
@@ -147,6 +233,9 @@
   - v-align-text-bottom
   :baseline:
   - v-align-baseline
+:clearfix:
+  true:
+  - clearfix
 :float:
   :left:
   - float-left
@@ -531,6 +620,8 @@
   - mb-md-n12
   - mb-lg-n12
   - mb-xl-n12
+  :auto:
+  - mb-auto
 :mr:
   0:
   - mr-0
@@ -610,6 +701,8 @@
   - mr-md-n6
   - mr-lg-n6
   - mr-xl-n6
+  :auto:
+  - mr-auto
 :ml:
   0:
   - ml-0
@@ -689,6 +782,8 @@
   - ml-md-n6
   - ml-lg-n6
   - ml-xl-n6
+  :auto:
+  - ml-auto
 :mx:
   0:
   - mx-0
@@ -1368,3 +1463,85 @@
   - hide-lg
   :xl:
   - hide-xl
+:container:
+  :sm:
+  - container-sm
+  :md:
+  - container-md
+  :lg:
+  - container-lg
+  :xl:
+  - container-xl
+:col:
+  1:
+  - col-1
+  - col-sm-1
+  - col-md-1
+  - col-lg-1
+  - col-xl-1
+  2:
+  - col-2
+  - col-sm-2
+  - col-md-2
+  - col-lg-2
+  - col-xl-2
+  3:
+  - col-3
+  - col-sm-3
+  - col-md-3
+  - col-lg-3
+  - col-xl-3
+  4:
+  - col-4
+  - col-sm-4
+  - col-md-4
+  - col-lg-4
+  - col-xl-4
+  5:
+  - col-5
+  - col-sm-5
+  - col-md-5
+  - col-lg-5
+  - col-xl-5
+  6:
+  - col-6
+  - col-sm-6
+  - col-md-6
+  - col-lg-6
+  - col-xl-6
+  7:
+  - col-7
+  - col-sm-7
+  - col-md-7
+  - col-lg-7
+  - col-xl-7
+  8:
+  - col-8
+  - col-sm-8
+  - col-md-8
+  - col-lg-8
+  - col-xl-8
+  9:
+  - col-9
+  - col-sm-9
+  - col-md-9
+  - col-lg-9
+  - col-xl-9
+  10:
+  - col-10
+  - col-sm-10
+  - col-md-10
+  - col-lg-10
+  - col-xl-10
+  11:
+  - col-11
+  - col-sm-11
+  - col-md-11
+  - col-lg-11
+  - col-xl-11
+  12:
+  - col-12
+  - col-sm-12
+  - col-md-12
+  - col-lg-12
+  - col-xl-12

data/lib/primer/classify.rb

@@ -2,7 +2,6 @@
 
 require_relative "classify/cache"
 require_relative "classify/flex"
-require_relative "classify/grid"
 require_relative "classify/utilities"
 require_relative "classify/validation"
 
@@ -14,10 +13,8 @@ module Primer
 
     TEXT_KEYS = %i[font_family font_style font_weight text_align text_transform].freeze
     BOX_SHADOW_KEY = :box_shadow
-    CONTAINER_KEY = :container
 
     BREAKPOINTS = ["", "-sm", "-md", "-lg", "-xl"].freeze
-    RESPONSIVE_KEYS = ([Primer::Classify::Grid::COL_KEY] + Primer::Classify::Flex::RESPONSIVE_KEYS).freeze
 
     BOOLEAN_MAPPINGS = {
       underline: {
@@ -77,12 +74,10 @@ module Primer
       TYPOGRAPHY_KEYS +
       TEXT_KEYS +
       Primer::Classify::Flex::KEYS +
-      Primer::Classify::Grid::KEYS +
       [
         BORDER_KEY,
         BORDER_RADIUS_KEY,
-        BOX_SHADOW_KEY,
-        CONTAINER_KEY
+        BOX_SHADOW_KEY
       ]
     ).freeze
 
@@ -143,7 +138,7 @@ module Primer
 
         styles_hash.each do |key, value|
           if value.is_a?(Array)
-            raise ArgumentError, "#{key} does not support responsive values" unless RESPONSIVE_KEYS.include?(key) || Primer::Classify::Utilities.supported_key?(key)
+            raise ArgumentError, "#{key} does not support responsive values" unless Primer::Classify::Flex::RESPONSIVE_KEYS.include?(key) || Primer::Classify::Utilities.supported_key?(key)
 
             value.each_with_index do |val, index|
               extract_one_css_attr(classes, styles, key, val, BREAKPOINTS[index])
@@ -197,8 +192,6 @@ module Primer
           "rounded-#{val}"
         elsif Primer::Classify::Flex::KEYS.include?(key)
           Primer::Classify::Flex.classes(key, val, breakpoint)
-        elsif Primer::Classify::Grid::KEYS.include?(key)
-          Primer::Classify::Grid.classes(key, val, breakpoint)
         elsif TEXT_KEYS.include?(key)
           "text-#{val.to_s.dasherize}"
         elsif TYPOGRAPHY_KEYS.include?(key)

data/lib/primer/view_components/engine.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 require "rails/engine"
+require "primer/classify/utilities"
 
 module Primer
   module ViewComponents
@@ -16,10 +17,15 @@ module Primer
 
       config.primer_view_components.force_system_arguments = false
       config.primer_view_components.silence_deprecations = false
+      config.primer_view_components.validate_class_names = !Rails.env.production?
 
       initializer "primer_view_components.assets" do |app|
         app.config.assets.precompile += %w[primer_view_components] if app.config.respond_to?(:assets)
       end
+
+      config.after_initialize do |app|
+        ::Primer::Classify::Utilities.validate_class_names = app.config.primer_view_components.delete(:validate_class_names)
+      end
     end
   end
 end

data/lib/primer/view_components/linters/blankslate_component_migration_counter.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+require_relative "base_linter"
+
+module ERBLint
+  module Linters
+    # Counts the number of times a HTML Blankslate is used instead of the component.
+    class BlankslateComponentMigrationCounter < BaseLinter
+      MESSAGE = "We are migrating Blankslate to use [Primer::BlankslateComponent](https://primer.style/view-components/components/blankslate), please try to use that instead of raw HTML."
+      CLASSES = %w[blankslate].freeze
+      TAGS = %w[div].freeze
+    end
+  end
+end

data/lib/primer/view_components/linters/subhead_component_migration_counter.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+require_relative "base_linter"
+
+module ERBLint
+  module Linters
+    # Counts the number of times a HTML Subhead is used instead of the component.
+    class SubheadComponentMigrationCounter < BaseLinter
+      MESSAGE = "We are migrating Subhead to use [Primer::SubheadComponent](https://primer.style/view-components/components/subhead), please try to use that instead of raw HTML."
+      CLASSES = %w[Subhead].freeze
+      TAGS = %w[div].freeze
+    end
+  end
+end

data/lib/primer/view_components/version.rb

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

data/lib/primer/view_components.rb

@@ -8,8 +8,11 @@ module Primer
   # :nodoc:
   module ViewComponents
     DEFAULT_STATIC_PATH = File.expand_path("static")
-    DEFAULT_STATUS_FILE_NAME = "statuses.json"
-    DEFAULT_CONSTANTS_FILE_NAME = "constants.json"
+    FILE_NAMES = {
+      statuses: "statuses.json",
+      constants: "constants.json",
+      audited_at: "audited_at.json"
+    }.freeze
 
     # generate_statuses returns a hash mapping component name to
     # the component's status sorted alphabetically by the component name.
@@ -19,25 +22,14 @@ module Primer
       end
     end
 
-    # dump_statuses generates the status hash and then serializes
-    # it as json at the given path
-    def self.dump_statuses(path: DEFAULT_STATIC_PATH)
-      require "json"
-
-      statuses = generate_statuses
-
-      File.open(File.join(path, DEFAULT_STATUS_FILE_NAME), "w") do |f|
-        f.write(JSON.pretty_generate(statuses))
-        f.write($INPUT_RECORD_SEPARATOR)
+    # generate_audited_at returns a hash mapping component name to
+    # the day the component has passed an accessibility audit.
+    def self.generate_audited_at
+      Primer::Component.descendants.sort_by(&:name).each_with_object({}) do |component, mem|
+        mem[component.to_s] = component.audited_at.to_s
       end
     end
 
-    # read_statuses returns a JSON string matching the output of
-    # generate_statuses
-    def self.read_statuses(path: DEFAULT_STATIC_PATH)
-      File.read(File.join(path, DEFAULT_STATUS_FILE_NAME))
-    end
-
     # generate_constants returns a hash mapping component name to
     # all of its constants.
     def self.generate_constants
@@ -48,23 +40,19 @@ module Primer
       end
     end
 
-    # dump_constants generates the constants hash and then serializes
-    # it as json at the given path
-    def self.dump_constants(path: DEFAULT_STATIC_PATH)
+    # dump generates the requested stat hash and outputs it to a file.
+    def self.dump(stats)
       require "json"
 
-      constants = generate_constants
-
-      File.open(File.join(path, DEFAULT_CONSTANTS_FILE_NAME), "w") do |f|
-        f.write(JSON.pretty_generate(constants))
+      File.open(File.join(DEFAULT_STATIC_PATH, FILE_NAMES[stats]), "w") do |f|
+        f.write(JSON.pretty_generate(send("generate_#{stats}")))
         f.write($INPUT_RECORD_SEPARATOR)
       end
     end
 
-    # read_constants returns a JSON string matching the output of
-    # generate_constants
-    def self.read_constants(path: DEFAULT_STATIC_PATH)
-      File.read(File.join(path, DEFAULT_CONSTANTS_FILE_NAME))
+    # read returns a JSON string matching the output of the corresponding stat.
+    def self.read(stats)
+      File.read(File.join(DEFAULT_STATIC_PATH, FILE_NAMES[stats]))
     end
   end
 end

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

@@ -46,6 +46,18 @@ module RuboCop
             yellow: "bg: :warning_inverse",
             red_light: "bg: :danger",
             red: "bg: :danger_inverse",
+            canvas: "bg: :default",
+            canvas_inverse: "bg: :emphasis",
+            canvas_inset: "bg: :inset",
+            primary: "bg: :default",
+            secondary: "bg: :subtle",
+            tertiary: "bg: :subtle",
+            info: "bg: :accent",
+            info_inverse: "bg: :accent_emphasis",
+            danger_inverse: "bg: :danger_emphasis",
+            success_inverse: "bg: :success_emphasis",
+            warning: "bg: :attention",
+            warning_inverse: "bg: :attention_emphasis",
             gray_0: nil,
             gray_1: nil,
             gray_2: nil,
@@ -140,9 +152,31 @@ module RuboCop
             green: "border_color: :success",
             yellow: "border_color: :warning",
             red: "border_color: :danger",
-            white: "border_color: :inverse"
+            white: "border_color: :inverse",
+            primary: "border_color: :default",
+            secondary: "border_color: :muted",
+            tertiary: "border_color: :default",
+            inverse: nil,
+            info: "border_color: :accent_emphasis",
+            warning: "border_color: :attention_emphasis"
           },
           color: {
+            text_primary: "color: :default",
+            text_secondary: "color: :muted",
+            text_tertiary: "color: :muted",
+            text_link: "color: :accent",
+            text_success: "color: :success",
+            text_warning: "color: :attention",
+            text_danger: "color: :danger",
+            text_inverse: "color: :on_emphasis",
+            text_white: "color: :on_emphasis",
+            icon_primary: "color: :default",
+            icon_secondary: "color: :muted",
+            icon_tertiary: "color: :muted",
+            icon_info: "color: :accent",
+            icon_danger: "color: :danger",
+            icon_success: "color: :success",
+            icon_warning: "color: :attention",
             blue: "color: :text_link",
             gray_dark: "color: :text_primary",
             gray: "color: :text_secondary",

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

@@ -29,7 +29,8 @@ module RuboCop
 
         SIZE_ATTRIBUTES = %w[height width size].freeze
         STRING_ATTRIBUTES = %w[aria- data-].freeze
-        VALID_ATTRIBUTES = [*SIZE_ATTRIBUTES, *STRING_ATTRIBUTES, "class"].freeze
+        REST_ATTRIBUTES = %w[title].freeze
+        VALID_ATTRIBUTES = [*SIZE_ATTRIBUTES, *STRING_ATTRIBUTES, *REST_ATTRIBUTES, "class"].freeze
 
         STRING_ATTRIBUTE_REGEX = Regexp.union(STRING_ATTRIBUTES).freeze
         ATTRIBUTE_REGEX = Regexp.union(VALID_ATTRIBUTES).freeze
@@ -74,7 +75,9 @@ module RuboCop
             # Converting arguments for the component
             classes = classes(kwargs)
             size_attributes = transform_sizes(kwargs)
-            args = arguments_as_string(node, size_attributes, classes)
+            rest_attributes = rest_args(kwargs)
+
+            args = arguments_as_string(node, size_attributes, rest_attributes, classes)
             if node.dot?
               corrector.replace(node.loc.expression, "#{node.receiver.source}.primer_octicon(#{args})")
             else
@@ -99,6 +102,14 @@ module RuboCop
           end
         end
 
+        def rest_args(kwargs)
+          kwargs.pairs.each_with_object({}) do |pair, h|
+            next unless REST_ATTRIBUTES.include?(pair.key.value.to_s)
+
+            h[pair.key.value] = pair.value.source
+          end
+        end
+
         def octicon_size_attributes(kwargs)
           kwargs.pairs.each_with_object({}) do |pair, h|
             next unless SIZE_ATTRIBUTES.include?(pair.key.value.to_s)
@@ -125,18 +136,28 @@ module RuboCop
           class_arg.value.value
         end
 
-        def arguments_as_string(node, size_attributes, classes)
+        def arguments_as_string(node, size_attributes, rest_attributes, classes)
           args = icon(node.arguments.first)
           size_args = size_attributes_to_string(size_attributes)
           string_args = string_args_to_string(node)
+          rest_args = rest_args_to_string(rest_attributes)
 
-          args = "#{args}, #{size_attributes_to_string(size_attributes)}" if size_args.present?
+          args = "#{args}, #{size_args}" if size_args.present?
+          args = "#{args}, #{rest_args}" if rest_args.present?
           args = "#{args}, #{utilities_args(classes)}" if classes.present?
           args = "#{args}, #{string_args}" if string_args.present?
 
           args
         end
 
+        def rest_args_to_string(attrs)
+          return if attrs.blank?
+
+          attrs.map do |key, value|
+            "#{key}: #{value}"
+          end.join(", ")
+        end
+
         def utilities_args(classes)
           args = ::Primer::Classify::Utilities.classes_to_hash(classes)
 

data/lib/tasks/docs.rake

@@ -27,6 +27,7 @@ namespace :docs do
     # Rails controller for rendering arbitrary ERB
     view_context = ApplicationController.new.tap { |c| c.request = ActionDispatch::TestRequest.create }.view_context
     components = [
+      Primer::Alpha::BorderBox::Header,
       Primer::Image,
       Primer::LocalTime,
       Primer::OcticonSymbolsComponent,
@@ -75,6 +76,7 @@ namespace :docs do
       Primer::Truncate,
       Primer::Beta::Truncate,
       Primer::Alpha::UnderlineNav,
+      Primer::Alpha::UnderlinePanels,
       Primer::Alpha::TabNav,
       Primer::Alpha::TabPanels
     ]

data/lib/tasks/helpers/ast_processor.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+require_relative "ast_traverser"
+
+# :nodoc:
+class AstProcessor
+  class << self
+    def increment(stats, component, arg_name, value)
+      stats[component][:arguments][arg_name][value] = 0 unless stats[component][:arguments][arg_name][value]
+      stats[component][:arguments][arg_name][value] += 1
+    end
+
+    def process_ast(ast, stats)
+      traverser = AstTraverser.new
+      traverser.walk(ast)
+
+      return if traverser.stats.empty?
+
+      traverser.stats.each do |component, component_info|
+        stats[component] ||= {
+          paths: []
+        }
+
+        stats[component][:paths] << component_info[:path]
+        stats[component][:paths].uniq!
+        stats[component][:arguments] ||= {}
+
+        component_info[:arguments]&.each do |arg, value|
+          arg_name = arg.to_s
+          stats[component][:arguments][arg_name] ||= {}
+
+          # we want to count each class separately
+          if arg_name == "classes"
+            value.split.each do |val|
+              increment(stats, component, arg_name, val)
+            end
+          else
+            increment(stats, component, arg_name, value)
+          end
+        end
+      end
+    end
+  end
+end