primer_view_components 0.0.47 → 0.0.51

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1b0ba62c9f5f11df09d24b40ca5e61e7d618046aba651ad733c8db06c482fe26
-  data.tar.gz: 34c0b8066b85d5392dd241baeb3b654ba47d7de1f360b793ac893750989d99dd
+  metadata.gz: 2e619cd65db4a67059cc81f1d9f7d57a9c3b6c9cf9dadf9cfb2cd4c37fdcedc2
+  data.tar.gz: 18eaf89147d7a3e415520b09f117bf4b748fbb9a06e166df12ccc3a930506007
 SHA512:
-  metadata.gz: 47e1bca34582e4406fcc268ac786a322cc3f99a62789aeece262b91e1ca26a15c145835ad60afbcd85a13b3a37da7a54541aedf8e2af5b60c43d7d6cf6767072
-  data.tar.gz: 2edfb035e82896ea22bec576a98b34eb2e3c18cccf2d3ba18744f7b77135f6a1310b466179025c216d396708fdf5fbe802a2dc436c57d1510632eb9567776df1
+  metadata.gz: 821f1b4b53b823049bbc8e1a740b1f21d36ada796e69c59471c9f9a28183b5d94a61958544ef3c3e6386424b595e72627abcab2cd05d61de10104ea40941e201
+  data.tar.gz: 58d0e5f7961736bee805ed3d99d5432bb4dfa16df8170abe89b1f24f2857cf80a17a578fb762b0f6f1e5b307fe96a9803e960cce6a1a2901282908e678295f79

data/CHANGELOG.md

@@ -30,6 +30,119 @@ The category for changes related to documentation, testing and tooling. Also, fo
 
 ## main
 
+## 0.0.51
+
+### Breaking changes
+
+* Rename `width` and `height` System Arguments to `w` and `h`, resolving conflict with HTML attribute names.
+
+    *Manuel Puyol*
+
+### Updates
+
+* `SystemArgumentInsteadOfClass` linter will check for arguments in ViewHelpers.
+
+    *Manuel Puyol*
+
+## 0.0.50
+
+### New
+
+* Add linter suggestions for `CloseButton` component.
+
+    *Manuel Puyol*
+
+### Breaking changes
+
+* Update to `octicons` `v15`, removing open-ended dependency. See [https://github.com/primer/octicons/releases/tag/v15.0.0] for icon name changes in release.
+
+    *Joel Hawksley*
+
+### Updates
+
+* Don't require `title` for `Label`.
+
+    *Manuel Puyol*
+
+* Improve autocorrectable linters to convert known SystemArgument classes.
+
+    *Manuel Puyol*
+
+* Add support for `width: :full` and `height: :full` to System Arguments.
+
+    *Joel Hawksley*
+
+### Bug fixes
+
+* Update linters to not autocorrect attributes with ERB blocks.
+
+    *Manuel Puyol*
+
+* Fix `:height` and `:width` docs to pull from Utilities
+
+    *Jon Rohan*
+
+## 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
+
+* Ensure panels in `Navigation::Tab` have a label.
+
+    *Kate Higa*
+
+### Misc
+
+* Expose custom cops and default config for erblint.
+
+    *Manuel Puyol*
+
+* Fix double constant assign.
+
+    *Manuel Puyol*
+
 ## 0.0.47
 
 ### Breaking changes

data/app/components/primer/base_component.rb

@@ -79,7 +79,6 @@ module Primer
     # | `flex_shrink` | Integer | To enable, set to `0`. |
     # | `flex_wrap` | Symbol | <%= one_of(Primer::Classify::Flex::WRAP_MAPPINGS.keys) %> |
     # | `justify_content` | Symbol | <%= one_of(Primer::Classify::Flex::JUSTIFY_CONTENT_VALUES) %> |
-    # | `width` | Symbol | <%= one_of([:fit]) %> |
     #
     # ## Grid
     #
@@ -94,7 +93,8 @@ module Primer
     # | Name | Type | Description |
     # | :- | :- | :- |
     # | `display` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:display)) %> |
-    # | `height` | Symbol | <%= one_of([:fit]) %> |
+    # | `w` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:w)) %> Also supports integer values. |
+    # | `h` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:h)) %> Also supports integer values. |
     # | `hide` | Symbol | Hide the element at a specific breakpoint. <%= one_of(Primer::Classify::Utilities.mappings(:hide)) %> |
     # | `visibility` | Symbol | Visibility. <%= one_of(Primer::Classify::Utilities.mappings(:visibility)) %> |
     # | `vertical_align` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:vertical_align)) %> |

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

@@ -29,7 +29,7 @@ module Primer
       # @param type [Symbol] <%= one_of(Primer::Beta::AutoComplete::Input::TYPE_OPTIONS) %>
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :input, lambda { |**system_arguments|
-        aria_label = system_arguments[:"aria-label"] || system_arguments.dig(:aria, :label) || @aria_label
+        aria_label = aria("label", system_arguments) || @aria_label
         if aria_label.present?
           system_arguments[:"aria-label"] = aria_label
           system_arguments[:aria]&.delete(:label)
@@ -106,7 +106,7 @@ module Primer
       def initialize(src:, list_id:, input_id:, **system_arguments)
         @list_id = list_id
         @input_id = input_id
-        @aria_label = system_arguments[:"aria-label"] || system_arguments.dig(:aria, :label)
+        @aria_label = aria("label", system_arguments)
 
         system_arguments.delete(:"aria-label") && system_arguments[:aria]&.delete(:label)
 

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/clipboard_copy.html.erb

@@ -2,7 +2,7 @@
   <% if content.present? %>
     <%= content %>
   <% else %>
-    <%= render Primer::OcticonComponent.new("clippy") %>
-    <%= render Primer::OcticonComponent.new("check", color: :icon_success, style: "display: none;") %>
+    <%= render Primer::OcticonComponent.new(:paste) %>
+    <%= render Primer::OcticonComponent.new(:check, color: :icon_success, style: "display: none;") %>
   <% end %>
 <% end %>

data/app/components/primer/component.rb

@@ -29,8 +29,12 @@ module Primer
       ActiveSupport::Deprecation.warn(message)
     end
 
+    def aria(val, system_arguments)
+      system_arguments[:"aria-#{val}"] || system_arguments.dig(:aria, val.to_sym)
+    end
+
     def validate_aria_label
-      aria_label = @system_arguments[:"aria-label"] || @system_arguments.dig(:aria, :label)
+      aria_label = aria("label", @system_arguments)
       raise ArgumentError, "`aria-label` is required." if aria_label.nil? && !Rails.env.production?
     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/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

@@ -18,10 +18,23 @@ module Primer
       #
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       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
         system_arguments[:hidden] = true unless @selected
 
+        label_present = aria("label", system_arguments) || aria("labelledby", system_arguments)
+        unless label_present
+          if @id.present?
+            system_arguments[:"aria-labelledby"] = @id
+          elsif !Rails.env.production?
+            raise ArgumentError, "Panels must be labelled. Either set a unique `id` on the tab, or set an `aria-label` directly on the panel"
+          end
+        end
+
         Primer::BaseComponent.new(**system_arguments)
       }
 
@@ -86,20 +99,24 @@ 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
+        @with_panel = with_panel
 
         @system_arguments = system_arguments
+        @id = @system_arguments[:id]
 
         if with_panel || @system_arguments[:tag] == :button
           @system_arguments[:tag] = :button
           @system_arguments[:type] = :button
           @system_arguments[:role] = :tab
+          panel_id(panel_id)
         else
           @system_arguments[:tag] = :a
         end
@@ -111,7 +128,7 @@ module Primer
         return unless @selected
 
         if @system_arguments[:tag] == :a
-          aria_current = @system_arguments[:"aria-current"] || @system_arguments.dig(:aria, :current) || DEFAULT_ARIA_CURRENT_FOR_ANCHOR
+          aria_current = aria("current", system_arguments) || DEFAULT_ARIA_CURRENT_FOR_ANCHOR
           @system_arguments[:"aria-current"] = fetch_or_fallback(ARIA_CURRENT_OPTIONS_FOR_ANCHOR, aria_current, DEFAULT_ARIA_CURRENT_FOR_ANCHOR)
         else
           @system_arguments[:"aria-selected"] = true
@@ -128,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) 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 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 do |t| %>
+    #     <% c.tab(id: "tab-3", panel_id: "panel-3") do |t| %>
     #       <% t.text { "Tab 3" } %>
     #       <% t.panel do %>
     #         Panel 3