primer_view_components 0.0.49 → 0.0.53

data/app/components/primer/icon_button.rb

@@ -42,7 +42,7 @@ module Primer
     # @param type [Symbol] <%= one_of(Primer::BaseButton::TYPE_OPTIONS) %>
     # @param box [Boolean] Whether the button is in a <%= link_to_component(Primer::BorderBoxComponent) %>. If `true`, the button will have the `Box-btn-octicon` class.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(scheme: DEFAULT_SCHEME, icon:, box: false, **system_arguments)
+    def initialize(icon:, scheme: DEFAULT_SCHEME, box: false, **system_arguments)
       @icon = icon
 
       @system_arguments = system_arguments

data/app/components/primer/label_component.rb

@@ -2,6 +2,9 @@
 
 module Primer
   # Use `Label` to add contextual metadata to a design.
+  #
+  # @accessibility
+  #   Use `aria-label` if the `Label` or the context around it don't explain the label.
   class LabelComponent < Primer::Component
     status :beta
 
@@ -29,27 +32,25 @@ module Primer
     VARIANT_OPTIONS = VARIANT_MAPPINGS.keys << nil
 
     # @example Schemes
-    #   <%= render(Primer::LabelComponent.new(title: "Label: Label")) { "Default" } %>
-    #   <%= render(Primer::LabelComponent.new(title: "Label: Label", scheme: :primary)) { "Primary" } %>
-    #   <%= render(Primer::LabelComponent.new(title: "Label: Label", scheme: :secondary)) { "Secondary" } %>
-    #   <%= render(Primer::LabelComponent.new(title: "Label: Label", scheme: :info)) { "Info" } %>
-    #   <%= render(Primer::LabelComponent.new(title: "Label: Label", scheme: :success)) { "Success" } %>
-    #   <%= render(Primer::LabelComponent.new(title: "Label: Label", scheme: :warning)) { "Warning" } %>
-    #   <%= render(Primer::LabelComponent.new(title: "Label: Label", scheme: :danger)) { "Danger" } %>
+    #   <%= render(Primer::LabelComponent.new) { "Default" } %>
+    #   <%= render(Primer::LabelComponent.new( scheme: :primary)) { "Primary" } %>
+    #   <%= render(Primer::LabelComponent.new( scheme: :secondary)) { "Secondary" } %>
+    #   <%= render(Primer::LabelComponent.new( scheme: :info)) { "Info" } %>
+    #   <%= render(Primer::LabelComponent.new( scheme: :success)) { "Success" } %>
+    #   <%= render(Primer::LabelComponent.new( scheme: :warning)) { "Warning" } %>
+    #   <%= render(Primer::LabelComponent.new( scheme: :danger)) { "Danger" } %>
     #
     # @example Variants
-    #   <%= render(Primer::LabelComponent.new(title: "Label: Label")) { "Default" } %>
-    #   <%= render(Primer::LabelComponent.new(title: "Label: Label", variant: :large)) { "Large" } %>
+    #   <%= render(Primer::LabelComponent.new) { "Default" } %>
+    #   <%= render(Primer::LabelComponent.new( variant: :large)) { "Large" } %>
     #
     # @param tag [Symbol] <%= one_of(Primer::LabelComponent::TAG_OPTIONS) %>
-    # @param title [String] `title` attribute for the component element.
     # @param scheme [Symbol] <%= one_of(Primer::LabelComponent::SCHEME_MAPPINGS.keys) %>
     # @param variant [Symbol] <%= one_of(Primer::LabelComponent::VARIANT_OPTIONS) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(tag: DEFAULT_TAG, title:, scheme: nil, variant: nil, **system_arguments)
+    def initialize(tag: DEFAULT_TAG, scheme: nil, variant: nil, **system_arguments)
       @system_arguments = system_arguments
       @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
-      @system_arguments[:title] = title
       @system_arguments[:classes] = class_names(
         "Label",
         system_arguments[:classes],

data/app/components/primer/navigation/tab_component.rb

@@ -142,7 +142,7 @@ module Primer
         end
 
         render(Primer::BaseComponent.new(**@wrapper_arguments)) do
-          yield
+          yield if block_given?
         end
       end
 

data/app/components/primer/progress_bar_component.rb

@@ -11,9 +11,6 @@ module Primer
     # @param bg [Symbol] The background color
     # @param kwargs [Hash] The same arguments as <%= link_to_system_arguments_docs %>.
     renders_many :items, lambda { |percentage: 0, bg: :success_inverse, **system_arguments|
-      percentage = percentage
-      system_arguments = system_arguments
-
       system_arguments[:tag] = :span
       system_arguments[:bg] = bg
       system_arguments[:style] = join_style_arguments(system_arguments[:style], "width: #{percentage}%;")

data/app/components/primer/tab_nav_component.rb

@@ -40,7 +40,7 @@ module Primer
 
     # @example Default
     #   <%= render(Primer::TabNavComponent.new(label: "Default")) do |c| %>
-    #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
+    #     <% c.tab(selected: true, href: "#") { "Tab 1" } %>
     #     <% c.tab(href: "#") { "Tab 2" } %>
     #     <% c.tab(href: "#") { "Tab 3" } %>
     #   <% end %>

data/app/lib/primer/fetch_or_fallback_helper.rb

@@ -48,6 +48,7 @@ module Primer
       end
     end
 
+    # rubocop:disable Style/OptionalBooleanParameter
     def fetch_or_fallback_boolean(given_value, fallback = false)
       if [true, false].include?(given_value)
         given_value
@@ -55,6 +56,7 @@ module Primer
         fallback
       end
     end
+    # rubocop:enable Style/OptionalBooleanParameter
 
     def silence_deprecations?
       Rails.application.config.primer_view_components.silence_deprecations

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

@@ -6,7 +6,7 @@ module Primer
     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
+      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(symbol:, size:, width: nil, height: nil)

data/app/lib/primer/tabbed_component_helper.rb

@@ -24,7 +24,7 @@ module Primer
       return yield unless @with_panel
 
       render Primer::TabContainerComponent.new(**system_arguments) do
-        yield
+        yield if block_given?
       end
     end
 

data/app/lib/primer/view_helper.rb

@@ -1,5 +1,6 @@
 # frozen_string_literal: true
 
+# :nocov:
 module Primer
   # Module to allow shorthand calls for Primer components
   module ViewHelper

data/lib/primer/classify/cache.rb

@@ -95,11 +95,6 @@ module Primer
             values: Primer::Classify::Flex::ALIGN_SELF_VALUES
           )
 
-          preload(
-            keys: [Primer::Classify::WIDTH_KEY, Primer::Classify::HEIGHT_KEY],
-            values: [:fit]
-          )
-
           preload(
             keys: Primer::Classify::BOX_SHADOW_KEY,
             values: [true, :small, :medium, :large, :extra_large, :none]

data/lib/primer/classify/flex.rb

@@ -89,7 +89,7 @@ module Primer
         def justify_content(value, breakpoint)
           val = fetch_or_fallback(JUSTIFY_CONTENT_VALUES, value)
 
-          formatted_value = val.to_s.gsub(/(flex\_|space\_)/, "")
+          formatted_value = val.to_s.gsub(/(flex_|space_)/, "")
           "flex#{breakpoint}-justify-#{formatted_value}"
         end
 

data/lib/primer/classify/functional_colors.rb

@@ -24,9 +24,9 @@ module Primer
           value:,
           mappings:,
           non_functional_prefix:,
+          functional_options:,
           functional_prefix: "",
           number_prefix: "",
-          functional_options:,
           options_without_mappigs: []
         )
           sym_value = value.to_sym

data/lib/primer/classify/utilities.rb

@@ -24,7 +24,9 @@ module Primer
         "^v-align" => "vertical_align",
         "^d" => "display",
         "^wb" => "word_break",
-        "^v" => "visibility"
+        "^v" => "visibility",
+        "^width" => "w",
+        "^height" => "h"
       }.freeze
 
       class << self
@@ -83,7 +85,7 @@ module Primer
           return { classes: classes } if ENV["RAILS_ENV"] == "production"
 
           obj = {}
-          classes = classes.split(" ")
+          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|
@@ -112,6 +114,21 @@ module Primer
           obj
         end
 
+        def classes_to_args(classes)
+          classes_to_hash(classes).map do |key, value|
+            val = case value
+                  when Symbol
+                    ":#{value}"
+                  when String
+                    value.to_json
+                  else
+                    value
+                  end
+
+            "#{key}: #{val}"
+          end.join(", ")
+        end
+
         private
 
         def find_selector(selector)

data/lib/primer/classify/utilities.yml

@@ -85,6 +85,22 @@
   - float-md-none
   - float-lg-none
   - float-xl-none
+:w:
+  :fit:
+  - width-fit
+  :full:
+  - width-full
+  :auto:
+  - width-auto
+  - width-sm-auto
+  - width-md-auto
+  - width-lg-auto
+  - width-xl-auto
+:h:
+  :fit:
+  - height-fit
+  :full:
+  - height-full
 :m:
   0:
   - m-0

data/lib/primer/classify/validation.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+require_relative "utilities"
+
+module Primer
+  class Classify
+    # :nodoc:
+    class Validation
+      INVALID_CLASS_NAME_PREFIXES = /bg-|color-|text-|box-shadow-|text-|box_shadow-/.freeze
+
+      class << self
+        def invalid?(class_name)
+          class_name.start_with?(INVALID_CLASS_NAME_PREFIXES) || Primer::Classify::Utilities.supported_selector?(class_name)
+        end
+      end
+    end
+  end
+end

data/lib/primer/classify.rb

@@ -7,6 +7,7 @@ require_relative "classify/functional_border_colors"
 require_relative "classify/functional_text_colors"
 require_relative "classify/grid"
 require_relative "classify/utilities"
+require_relative "classify/validation"
 
 module Primer
   # :nodoc:
@@ -14,14 +15,9 @@ module Primer
     # Keys where we can simply translate { key: value } into ".key-value"
     CONCAT_KEYS = %i[text box_shadow].freeze
 
-    INVALID_CLASS_NAME_PREFIXES =
-      (["bg-", "color-", "text-", "box-shadow-"] + CONCAT_KEYS.map { |k| "#{k}-" }).freeze
-
     COLOR_KEY = :color
     BG_KEY = :bg
     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
     CONTAINER_KEY = :container
 
@@ -94,8 +90,6 @@ module Primer
         BORDER_RADIUS_KEY,
         COLOR_KEY,
         BG_KEY,
-        WIDTH_KEY,
-        HEIGHT_KEY,
         BOX_SHADOW_KEY,
         CONTAINER_KEY
       ]
@@ -113,7 +107,7 @@ module Primer
         extracted_results[:style] = [
           extracted_results.delete(:styles),
           style
-        ].compact.join("").presence
+        ].compact.join.presence
 
         extracted_results
       end
@@ -125,8 +119,8 @@ 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) } || Primer::Classify::Utilities.supported_selector?(class_name)
+            classes.split.each_with_object([]) do |class_name, memo|
+              memo << class_name if Primer::Classify::Validation.invalid?(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?
@@ -202,12 +196,6 @@ module Primer
           memo[:classes] << Primer::Classify::Flex.classes(key, val, breakpoint)
         elsif Primer::Classify::Grid::KEYS.include?(key)
           memo[:classes] << Primer::Classify::Grid.classes(key, val, breakpoint)
-        elsif key == WIDTH_KEY || key == HEIGHT_KEY
-          if val == :fit
-            memo[:classes] << "#{key}-#{val}"
-          else
-            memo[key] = val
-          end
         elsif TEXT_KEYS.include?(key)
           memo[:classes] << "text-#{val.to_s.dasherize}"
         elsif TYPOGRAPHY_KEYS.include?(key)
@@ -224,8 +212,6 @@ module Primer
                             else
                               "color-shadow-#{val.to_s.dasherize}"
                             end
-        else
-          memo[:classes] << "#{key.to_s.dasherize}#{breakpoint}-#{val.to_s.dasherize}"
         end
       end
 

data/lib/primer/view_components/constants.rb

@@ -29,7 +29,7 @@ module Primer
         private
 
         def format_hash(values, invert, symbolize)
-          val = values.invert if invert
+          val = invert ? values.invert : values
           # remove defaults
           val = val.except("", nil)
 

data/lib/primer/view_components/linters/argument_mappers/base.rb

@@ -1,8 +1,11 @@
 # frozen_string_literal: true
 
+require "primer/view_components/constants"
+require "primer/classify/utilities"
+require "primer/classify/validation"
 require_relative "conversion_error"
 require_relative "system_arguments"
-require "primer/view_components/constants"
+require_relative "helpers/erb_block"
 
 module ERBLint
   module Linters
@@ -11,6 +14,7 @@ module ERBLint
       # Override attribute_to_args in a child class to customize its mapping behavior.
       class Base
         DEFAULT_TAG = nil
+        ATTRIBUTES = [].freeze
 
         def initialize(tag)
           @tag = tag
@@ -26,13 +30,70 @@ module ERBLint
           args[:tag] = ":#{@tag.name}" unless self.class::DEFAULT_TAG.nil? || @tag.name == self.class::DEFAULT_TAG
 
           @tag.attributes.each do |attribute|
-            args.merge!(attribute_to_args(attribute))
+            attr_name = attribute.name
+
+            if self.class::ATTRIBUTES.include?(attr_name)
+              args.merge!(attribute_to_args(attribute))
+            elsif attr_name == "class"
+              args.merge!(map_classes(attribute))
+            else
+              # Assume the attribute is a system argument.
+              args.merge!(SystemArguments.new(attribute).to_args)
+            end
           end
 
           args
         end
 
         def attribute_to_args(attribute); end
+
+        def map_classes(classes_node)
+          erb_helper.raise_if_erb_block(classes_node)
+
+          system_arguments = system_arguments_to_args(classes_node.value)
+          args = classes_to_args(system_arguments[:classes]&.split || [])
+
+          invalid_classes = args[:classes].select { |class_name| Primer::Classify::Validation.invalid?(class_name) }
+
+          raise ConversionError, "Cannot convert #{'class'.pluralize(invalid_classes.size)} #{invalid_classes.join(',')}" if invalid_classes.present?
+
+          # Using splat to order the arguments in Component's args -> System Args -> custom classes
+          res = {
+            **args.except(:classes),
+            **system_arguments.except(:classes)
+          }
+
+          if args[:classes].present?
+            res = {
+              **res,
+              classes: args[:classes].join(" ").to_json
+            }
+          end
+
+          res
+        end
+
+        # Override this with your component's mappings, it should return a hash with the component's arguments,
+        # including a `classes` key that will contain all classes that the mapper couldn't handle.
+        # @returns { classes: Array, ... }
+        def classes_to_args(classes)
+          { classes: classes }
+        end
+
+        def system_arguments_to_args(classes)
+          system_arguments = Primer::Classify::Utilities.classes_to_hash(classes)
+
+          # need to transform symbols to strings with leading `:`
+          system_arguments.transform_values do |v|
+            v.is_a?(Symbol) ? ":#{v}" : v
+          end
+        end
+
+        private
+
+        def erb_helper
+          @erb_helper ||= Helpers::ErbBlock.new
+        end
       end
     end
   end

data/lib/primer/view_components/linters/argument_mappers/button.rb

@@ -7,8 +7,6 @@ module ERBLint
     module ArgumentMappers
       # Maps classes in a button element to arguments for the Button component.
       class Button < Base
-        require "pry"
-
         SCHEME_MAPPINGS = Primer::ViewComponents::Constants.get(
           component: "Primer::ButtonComponent",
           constant: "SCHEME_MAPPINGS",
@@ -30,28 +28,26 @@ module ERBLint
           constant: "DEFAULT_TAG"
         ).freeze
 
+        ATTRIBUTES = %w[disabled type].freeze
+
         def attribute_to_args(attribute)
           attr_name = attribute.name
 
-          if attr_name == "class"
-            classes_to_args(attribute)
-          elsif attr_name == "disabled"
+          case attr_name
+          when "disabled"
             { disabled: true }
-          elsif attr_name == "type"
+          when "type"
             # button is the default type, so we don't need to do anything.
             return {} if attribute.value == "button"
 
             raise ConversionError, "Button component does not support type \"#{attribute.value}\"" unless TYPE_OPTIONS.include?(attribute.value)
 
             { type: ":#{attribute.value}" }
-          else
-            # Assume the attribute is a system argument.
-            SystemArguments.new(attribute).to_args
           end
         end
 
         def classes_to_args(classes)
-          classes.value.split(" ").each_with_object({}) do |class_name, acc|
+          classes.each_with_object({ classes: [] }) do |class_name, acc|
             next if class_name == "btn"
 
             if SCHEME_MAPPINGS[class_name] && acc[:scheme].nil?
@@ -63,7 +59,7 @@ module ERBLint
             elsif class_name == "BtnGroup-item"
               acc[:group_item] = true
             else
-              raise ConversionError, "Cannot convert class \"#{class_name}\""
+              acc[:classes] << class_name
             end
           end
         end