primer_view_components 0.0.48 → 0.0.49

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2c751bc60362c19e97ba5fbe22227e19186efa799862932a6f7b8541ad8e1eaa
-  data.tar.gz: 4efd584159e4883f8bcc72954fff356c753b0b8980056ee0c58b7a3bd650cb90
+  metadata.gz: 43c27ddfb1f920ba9dfd9989d859cc61b3fd26bc3788a44873412c971ad58cc1
+  data.tar.gz: 640aed54b2b1e68bb24c06989320f445da9e2e3c2981e959e693345f61fc92cf
 SHA512:
-  metadata.gz: c6169f90241d046f9cee4faf1fb971cac34360c8ebb116e2c2e39fdd0aeff5e8cca17e899bdd8a97f94ebefa4c3705d6929b0978a96f0264dcab3fa96342faaf
-  data.tar.gz: 8576857a521647f43ccb3fe413b0e24b5d65a8c06e9036dd3035b37d8fb5989aa43a7ac2d33863f5faa022c099c6a8386d30de8b764e19cf93b9dcb207fd4eef
+  metadata.gz: 7c6b6ce07b479c462a01cfe65ccda3da920689c5e6642231f897bf5f92f559836d30d6f01bfec2c7ae99545c391abe25b85e7cd45da18de8249f63176b00bedb
+  data.tar.gz: ef88c518675d73c7c418fee48a11f173200f3a98ab4f10115fcfad5ccf5fa4ef0b3452da7bb9577a55a3d3286a3536f616f56aac4a07108421e8466abc76250b

data/CHANGELOG.md

@@ -30,6 +30,49 @@ The category for changes related to documentation, testing and tooling. Also, fo
 
 ## main
 
+## 0.0.49
+
+### New
+
+* Add linter suggestions for `Label` component.
+
+    *Manuel Puyol*
+
+* Add linter suggestions for `ClipboardCopy` component.
+
+    *Manuel Puyol*
+
+### Updates
+
+* Update the `Truncate` component to accept `:strong` as a tag.
+
+    *Amélia Chavot*
+
+* Improve `Primer::Classify::Utilities.classes_to_hash` performance.
+
+    *Manuel Puyol*
+
+### Breaking changes
+
+* Require tab with panels to have `panel_id` so `aria-controls` can be set.
+
+    *Kate Higa*
+
+* Renames:
+  * `Primer::AvatarStackComponent` to `Primer::Beta::AvatarStack`.
+
+    *Manuel Puyol*
+
+### Misc
+
+* Extract example tag parsing into helper.
+
+    *Kate Higa*
+
+* Generate a static constant JSON and use it when defining linters.
+
+    *Manuel Puyol*
+
 ## 0.0.48
 
 ### Breaking changes

data/app/components/primer/beta/avatar.rb

@@ -8,7 +8,7 @@ module Primer
     # for organizations or any other non-human avatars.
     # - By default, `Avatar` will render a static `<img>`. To have `Avatar` function as a link, set the `href` which will wrap the `<img>` in a `<a>`.
     # - Set `size` to update the height and width of the `Avatar` in pixels.
-    # - To stack multiple avatars together, use <%= link_to_component(Primer::AvatarStackComponent) %>.
+    # - To stack multiple avatars together, use <%= link_to_component(Primer::Beta::AvatarStack) %>.
     #
     # @accessibility
     #   Images should have text alternatives that describe the information or function represented.

data/app/components/primer/beta/avatar_stack.rb

@@ -0,0 +1,92 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `AvatarStack` to stack multiple avatars together.
+    class AvatarStack < Primer::Component
+      status :beta
+
+      ALIGN_DEFAULT = :left
+      ALIGN_OPTIONS = [ALIGN_DEFAULT, :right].freeze
+
+      DEFAULT_TAG = :div
+      TAG_OPTIONS = [DEFAULT_TAG, :span].freeze
+
+      DEFAULT_BODY_TAG = :div
+      BODY_TAG_OPTIONS = [DEFAULT_BODY_TAG, :span].freeze
+      # Required list of stacked avatars.
+      #
+      # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::Beta::Avatar) %>.
+      renders_many :avatars, "Primer::Beta::Avatar"
+
+      # @example Default
+      #   <%= render(Primer::Beta::AvatarStack.new) do |c| %>
+      #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #   <% end  %>
+      #
+      # @example Align right
+      #   <%= render(Primer::Beta::AvatarStack.new(align: :right)) do |c| %>
+      #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #   <% end  %>
+      #
+      # @example With tooltip
+      #   <%= render(Primer::Beta::AvatarStack.new(tooltipped: true, body_arguments: { label: 'This is a tooltip!' })) do |c| %>
+      #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #   <% end  %>
+      #
+      # @param tag [Symbol] <%= one_of(Primer::Beta::AvatarStack::TAG_OPTIONS) %>
+      # @param align [Symbol] <%= one_of(Primer::Beta::AvatarStack::ALIGN_OPTIONS) %>
+      # @param tooltipped [Boolean] Whether to add a tooltip to the stack or not.
+      # @param body_arguments [Hash] Parameters to add to the Body. If `tooltipped` is set, has the same arguments as <%= link_to_component(Primer::Tooltip) %>.
+      #   The default tag is <%= pretty_value(Primer::Beta::AvatarStack::DEFAULT_BODY_TAG) %> but can be changed using `tag:`
+      #   to <%= one_of(Primer::Beta::AvatarStack::BODY_TAG_OPTIONS, lower: true) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(tag: DEFAULT_TAG, align: ALIGN_DEFAULT, tooltipped: false, body_arguments: {}, **system_arguments)
+        @align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
+        @system_arguments = system_arguments
+        @tooltipped = tooltipped
+        @body_arguments = body_arguments
+
+        body_tag = @body_arguments[:tag] || DEFAULT_BODY_TAG
+        @body_arguments[:tag] = fetch_or_fallback(BODY_TAG_OPTIONS, body_tag, DEFAULT_BODY_TAG)
+        @body_arguments[:classes] = class_names(
+          "AvatarStack-body",
+          @body_arguments[:classes]
+        )
+
+        @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
+        @system_arguments[:classes] = class_names(
+          "AvatarStack",
+          system_arguments[:classes],
+          "AvatarStack--right" => @align == :right
+        )
+      end
+
+      def body_component
+        if @tooltipped
+          Primer::Tooltip.new(**@body_arguments)
+        else
+          Primer::BaseComponent.new(**@body_arguments)
+        end
+      end
+
+      def before_render
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "AvatarStack--two" => avatars.size == 2,
+          "AvatarStack--three-plus" => avatars.size > 2
+        )
+      end
+
+      def render?
+        avatars.any?
+      end
+    end
+  end
+end

data/app/components/primer/image_crop.html.erb

@@ -5,8 +5,8 @@
     <%= render(Primer::SpinnerComponent.new(size: :large, flex: 1, "data-loading-slot": true)) %>
   <% end %>
 
-  <input type="hidden" data-image-crop-input="x" name="cropped_x">
-  <input type="hidden" data-image-crop-input="y" name="cropped_y">
-  <input type="hidden" data-image-crop-input="width" name="cropped_width">
-  <input type="hidden" data-image-crop-input="height" name="cropped_height">
+  <input autocomplete="off" type="hidden" data-image-crop-input="x" name="cropped_x">
+  <input autocomplete="off" type="hidden" data-image-crop-input="y" name="cropped_y">
+  <input autocomplete="off" type="hidden" data-image-crop-input="width" name="cropped_width">
+  <input autocomplete="off" type="hidden" data-image-crop-input="height" name="cropped_height">
 <% end %>

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

@@ -20,6 +20,7 @@ module Primer
       renders_one :panel, lambda { |**system_arguments|
         return unless @with_panel
 
+        system_arguments[:id] = @panel_id
         system_arguments[:tag] = :div
         system_arguments[:role] ||= :tabpanel
         system_arguments[:tabindex] = 0
@@ -98,10 +99,11 @@ module Primer
       # @param list [Boolean] Whether the Tab is an item in a `<ul>` list.
       # @param selected [Boolean] Whether the Tab is selected or not.
       # @param with_panel [Boolean] Whether the Tab has an associated panel.
+      # @param panel_id [String] Only applies if `with_panel` is `true`. Unique id of panel.
       # @param icon_classes [Boolean] Classes that must always be applied to icons.
       # @param wrapper_arguments [Hash] <%= link_to_system_arguments_docs %> to be used in the `<li>` wrapper when the tab is an item in a list.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(list: false, selected: false, with_panel: false, icon_classes: "", wrapper_arguments: {}, **system_arguments)
+      def initialize(list: false, selected: false, with_panel: false, panel_id: "", icon_classes: "", wrapper_arguments: {}, **system_arguments)
         @selected = selected
         @icon_classes = icon_classes
         @list = list
@@ -114,6 +116,7 @@ module Primer
           @system_arguments[:tag] = :button
           @system_arguments[:type] = :button
           @system_arguments[:role] = :tab
+          panel_id(panel_id)
         else
           @system_arguments[:tag] = :a
         end
@@ -142,6 +145,17 @@ module Primer
           yield
         end
       end
+
+      private
+
+      def panel_id(panel_id)
+        if panel_id.blank?
+          raise ArgumentError, "`panel_id` is required" unless Rails.env.production?
+        else
+          @panel_id = panel_id
+          @system_arguments[:"aria-controls"] = @panel_id
+        end
+      end
     end
   end
 end

data/app/components/primer/tab_nav_component.rb

@@ -13,6 +13,7 @@ module Primer
     # 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 panel_id [String] Only applies if `with_panel` is `true`. Unique ID of panel.
     # @param selected [Boolean] Whether the tab is selected.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     renders_many :tabs, lambda { |selected: false, **system_arguments|
@@ -63,19 +64,19 @@ module Primer
     #
     # @example With panels
     #   <%= render(Primer::TabNavComponent.new(label: "With panels", with_panel: true)) do |c| %>
-    #     <% c.tab(selected: true, id: "tab-1") do |t| %>
+    #     <% c.tab(selected: true, panel_id: "panel-1", id: "tab-1") do |t| %>
     #       <% t.text { "Tab 1" } %>
     #       <% t.panel do %>
     #         Panel 1
     #       <% end %>
     #     <% end %>
-    #     <% c.tab(id: "tab-2") do |t| %>
+    #     <% c.tab(id: "tab-2", panel_id: "panel-2") do |t| %>
     #       <% t.text { "Tab 2" } %>
     #       <% t.panel do %>
     #         Panel 2
     #       <% end %>
     #     <% end %>
-    #     <% c.tab(id: "tab-3") do |t| %>
+    #     <% c.tab(id: "tab-3", panel_id: "panel-3") do |t| %>
     #       <% t.text { "Tab 3" } %>
     #       <% t.panel do %>
     #         Panel 3

data/app/components/primer/truncate.rb

@@ -6,7 +6,7 @@ module Primer
     status :beta
 
     DEFAULT_TAG = :div
-    TAG_OPTIONS = [DEFAULT_TAG, :span, :p].freeze
+    TAG_OPTIONS = [DEFAULT_TAG, :span, :p, :strong].freeze
 
     # @example Default
     #   <div class="col-2">

data/app/components/primer/underline_nav_component.rb

@@ -19,6 +19,7 @@ module Primer
     # 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 panel_id [String] Only applies if `with_panel` is `true`. Unique id of panel.
     # @param selected [Boolean] Whether the tab is selected.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     renders_many :tabs, lambda { |selected: false, **system_arguments|
@@ -104,13 +105,13 @@ module Primer
     #
     # @example With panels
     #   <%= render(Primer::UnderlineNavComponent.new(label: "With panels", with_panel: true)) do |component| %>
-    #     <% component.tab(selected: true, id: "tab-1") do |t| %>
+    #     <% component.tab(selected: true, id: "tab-1", panel_id: "panel-1") do |t| %>
     #       <% t.text { "Item 1" } %>
     #       <% t.panel do %>
     #         Panel 1
     #       <% end %>
     #     <% end %>
-    #     <% component.tab(id: "tab-2") do |t| %>
+    #     <% component.tab(id: "tab-2", panel_id: "panel-2") do |t| %>
     #       <% t.text { "Item 2" } %>
     #       <% t.panel do %>
     #         Panel 2

data/lib/primer/classify/utilities.rb

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
 
+require "yaml"
+
 # :nodoc:
 module Primer
   class Classify
@@ -16,6 +18,15 @@ module Primer
       # 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"
+      }.freeze
+
       class << self
         def classname(key, val, breakpoint = "")
           if (valid = validate(key, val, breakpoint))
@@ -104,23 +115,33 @@ module Primer
         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
+          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" unless ENV["RAILS_ENV"] == "production"

data/lib/primer/view_components.rb

@@ -7,22 +7,21 @@ require "primer/view_components/engine"
 module Primer
   # :nodoc:
   module ViewComponents
-    DEFAULT_STATUSES_PATH = File.expand_path("static")
+    DEFAULT_STATIC_PATH = File.expand_path("static")
     DEFAULT_STATUS_FILE_NAME = "statuses.json"
+    DEFAULT_CONSTANTS_FILE_NAME = "constants.json"
 
     # generate_statuses returns a hash mapping component name to
     # the component's status sorted alphabetically by the component name.
     def self.generate_statuses
-      statuses = Primer::Component.descendants.each_with_object({}) do |component, mem|
+      Primer::Component.descendants.sort_by(&:name).each_with_object({}) do |component, mem|
         mem[component.to_s] = component.status.to_s
       end
-
-      statuses.sort_by { |k, _v| k }.to_h
     end
 
     # dump_statuses generates the status hash and then serializes
     # it as json at the given path
-    def self.dump_statuses(path: DEFAULT_STATUSES_PATH)
+    def self.dump_statuses(path: DEFAULT_STATIC_PATH)
       require "json"
 
       statuses = generate_statuses
@@ -35,8 +34,37 @@ module Primer
 
     # read_statuses returns a JSON string matching the output of
     # generate_statuses
-    def self.read_statuses(path: DEFAULT_STATUSES_PATH)
+    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
+      Primer::Component.descendants.sort_by(&:name).each_with_object({}) do |component, mem|
+        mem[component.to_s] = component.constants(false).sort.each_with_object({}) do |constant, h|
+          h[constant] = component.const_get(constant)
+        end
+      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)
+      require "json"
+
+      constants = generate_constants
+
+      File.open(File.join(path, DEFAULT_CONSTANTS_FILE_NAME), "w") do |f|
+        f.write(JSON.pretty_generate(constants))
+        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))
+    end
   end
 end

data/lib/primer/view_components/constants.rb

@@ -0,0 +1,55 @@
+# frozen_string_literal: true
+
+require "json"
+
+module Primer
+  module ViewComponents
+    # A module for constants that are used in the view components.
+    class Constants
+      CONSTANTS = JSON.parse(
+        File.read(
+          File.join(File.dirname(__FILE__), "../../../static/constants.json")
+        )
+      ).freeze
+
+      class << self
+        def get(component:, constant:, invert: true, symbolize: false)
+          values = CONSTANTS.dig(component, constant)
+
+          case values
+          when Hash
+            format_hash(values, invert, symbolize)
+          when Array
+            format_array(values, symbolize)
+          else
+            values
+          end
+        end
+
+        private
+
+        def format_hash(values, invert, symbolize)
+          val = values.invert if invert
+          # remove defaults
+          val = val.except("", nil)
+
+          return val.transform_values { |v| symbolize_value(v) } if symbolize
+
+          val
+        end
+
+        def format_array(values, symbolize)
+          val = values.select(&:present?)
+
+          return val.map { |v| symbolize_value(v) } if symbolize
+
+          val
+        end
+
+        def symbolize_value(value)
+          ":#{value}"
+        end
+      end
+    end
+  end
+end