primer_view_components 0.0.48 → 0.0.52

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2c751bc60362c19e97ba5fbe22227e19186efa799862932a6f7b8541ad8e1eaa
-  data.tar.gz: 4efd584159e4883f8bcc72954fff356c753b0b8980056ee0c58b7a3bd650cb90
+  metadata.gz: ad52227798e79cb0259c00e61d24a3e72854dfb4fa4ffb4901fb30a2fa7f3370
+  data.tar.gz: 5f2e4decc740b1e9712744819d655091a2a45e9ac8b403beed54c8c9e6a6e332
 SHA512:
-  metadata.gz: c6169f90241d046f9cee4faf1fb971cac34360c8ebb116e2c2e39fdd0aeff5e8cca17e899bdd8a97f94ebefa4c3705d6929b0978a96f0264dcab3fa96342faaf
-  data.tar.gz: 8576857a521647f43ccb3fe413b0e24b5d65a8c06e9036dd3035b37d8fb5989aa43a7ac2d33863f5faa022c099c6a8386d30de8b764e19cf93b9dcb207fd4eef
+  metadata.gz: c7cac3105837c025730e7c6e01395db680d1c750bf4d2240594f00c4758a7d404802d184dd3bd53a14c8a2e14e25776152792e97fceb2a686182aaf1474ae162
+  data.tar.gz: f296ae7b5e8f6217b05e719169db5f08b1d1d8d7fb9293e083ae9a836f12d98c73e88cc320df3522a902f4dada28ac10ce7c9f37a96f0b175aaa1e2940e1bec9

data/CHANGELOG.md

@@ -30,6 +30,161 @@ The category for changes related to documentation, testing and tooling. Also, fo
 
 ## main
 
+## 0.0.52
+
+### New
+
+* Adding `Primer::Beta::Truncate` component to reflect changes in primer/css component [Truncate](https://primer.style/css/components/truncate).
+
+    *Jon Rohan*
+
+* Add cop to look for deprecated system arguments and suggest replacements.
+
+    *Jon Rohan*
+
+* Add cop to use `primer_octicon` in favor of `octicon`.
+
+    *Manuel Puyol*
+
+* Fix release script so it doesn't loop continuously.
+
+    *Cameron Dutro*
+
+### Updates
+
+* Promote `ClipboardCopy` to beta.
+
+    *Manuel Puyol*
+
+* PrimerOcticon linter supports `aria-` and `data-` attributes.
+
+    *Manuel Puyol*
+
+* Linters can:
+  * convert values with ERB interpolations.
+  * autocorrect cases with custom classes.
+
+    *Manuel Puyol*
+
+* Add a `scheme` option to `BorderBoxComponent` rows.
+
+    *Cameron Dutro*
+
+* Upgrade rubocop and support Ruby 3.0.
+
+    *Cameron Dutro*
+
+* Linters will not autocorrect cases where a required argument is missing.
+
+    *Manuel Puyol*
+
+### Misc
+
+* Update benchmarks to run in every supported Ruby version.
+
+    *Manuel Puyol*
+
+## 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
+
+### Updates
+
+* Fix incorrect slots syntax in docs.
+
+    *Joel Hawksley*, *Blake Williams*
+
+### 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

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

@@ -0,0 +1,5 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <% items.each do |item| %>
+    <%= item %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,110 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # Use `Truncate` to shorten overflowing text with an ellipsis.
+    class Truncate < Primer::Component
+      status :beta
+
+      # Text slot used for the truncated text.
+      #
+      # @param priority [Boolean] if true, the text will be given priority
+      # @param expandable [Boolean] if true, the text will expand on hover or focus
+      # @param max_width [Integer] if provided, the text will be truncated at a maximum width
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_many :items, "TruncateText"
+
+      # @example Default
+      #   <%= render(Primer::Beta::Truncate.new) { "branch-name-that-is-really-long" } %>
+      #
+      # @example Multiple items
+      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
+      #     <% component.item do %>really-long-repository-owner-name<% end %>
+      #     <% component.item(font_weight: :bold) do %>
+      #       <%= render(Primer::BaseComponent.new(tag: :span, font_weight: :normal)) { "/" } %> really-long-repository-name
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Advanced multiple items
+      #   <%= render(Primer::Beta::Truncate.new(tag: :ol)) do |component| %>
+      #     <% component.item(tag: :li) do %>primer<% end %>
+      #     <% component.item(tag: :li, priority: true) do %>/ css<% end %>
+      #     <% component.item(tag: :li) do %>/ Issues<% end %>
+      #     <% component.item(tag: :li) do %>/ #123 —<% end %>
+      #     <% component.item(tag: :li, priority: true) do %>
+      #       Visual bug on primer.style found in lists
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Expand on hover or focus
+      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
+      #     <% component.item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
+      #     <% component.item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
+      #     <% component.item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
+      #     <% component.item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
+      #   <% end %>
+      #
+      # @example Max widths
+      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
+      #     <% component.item(max_width: 300, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
+      #     <% component.item(max_width: 200, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
+      #     <% component.item(max_width: 100, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
+      #   <% end %>
+      #
+      # @example Max widths on new lines
+      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
+      #     <% component.item(max_width: 300, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
+      #   <% end %>
+      #   <br/>
+      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
+      #     <% component.item(max_width: 200, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
+      #   <% end %>
+      #   <br/>
+      #   <%= render(Primer::Beta::Truncate.new) do |component| %>
+      #     <% component.item(max_width: 100, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
+      #   <% end %>
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(**system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = system_arguments[:tag] || :span
+        @system_arguments[:classes] = class_names(
+          "Truncate",
+          system_arguments[:classes]
+        )
+      end
+
+      def before_render
+        return unless content.present? && items.empty?
+
+        item { content }
+      end
+
+      def render?
+        items.any?
+      end
+
+      # This component is part of `Primer::Beta::Truncate` and should not be
+      # used as a standalone component.
+      class TruncateText < Primer::Component
+        def initialize(priority: false, expandable: false, max_width: nil, **system_arguments)
+          @system_arguments = system_arguments
+          @system_arguments[:tag] = system_arguments[:tag] || :span
+          @system_arguments[:classes] = class_names(
+            "Truncate-text",
+            "Truncate-text--primary": priority,
+            "Truncate-text--expandable": expandable
+          )
+
+          @system_arguments[:style] = join_style_arguments(@system_arguments[:style], "max-width: #{max_width}px;") unless max_width.nil?
+        end
+
+        def call
+          render(Primer::BaseComponent.new(**@system_arguments)) do
+            content
+          end
+        end
+      end
+    end
+  end
+end

data/app/components/primer/border_box_component.rb

@@ -13,6 +13,14 @@ module Primer
     }.freeze
     PADDING_SUGGESTION = "Perhaps you could consider using :padding options of #{PADDING_MAPPINGS.keys.to_sentence}?"
 
+    DEFAULT_ROW_SCHEME = :default
+    ROW_SCHEME_MAPPINGS = {
+      DEFAULT_ROW_SCHEME => "",
+      :neutral => "Box-row--gray",
+      :info => "Box-row--blue",
+      :warning => "Box-row--yellow"
+    }.freeze
+
     # Optional Header.
     #
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
@@ -54,11 +62,13 @@ module Primer
 
     # Use Rows to add rows with borders and maintain the same padding.
     #
+    # @param scheme [Symbol] Color scheme. <%= one_of(Primer::BorderBoxComponent::ROW_SCHEME_MAPPINGS.keys) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    renders_many :rows, lambda { |**system_arguments|
+    renders_many :rows, lambda { |scheme: DEFAULT_ROW_SCHEME, **system_arguments|
       system_arguments[:tag] = :li
       system_arguments[:classes] = class_names(
         "Box-row",
+        ROW_SCHEME_MAPPINGS[fetch_or_fallback(ROW_SCHEME_MAPPINGS.keys, scheme, DEFAULT_ROW_SCHEME)],
         system_arguments[:classes]
       )
 
@@ -102,6 +112,22 @@ module Primer
     #     <% end %>
     #   <% end %>
     #
+    # @example Row colors
+    #   <%= render(Primer::BorderBoxComponent.new) do |component| %>
+    #     <% component.row do %>
+    #       Default
+    #     <% end %>
+    #     <% component.row(scheme: :neutral) do %>
+    #       Neutral
+    #     <% end %>
+    #     <% component.row(scheme: :info) do %>
+    #       Info
+    #     <% end %>
+    #     <% component.row(scheme: :warning) do %>
+    #       Warning
+    #     <% end %>
+    #   <% end %>
+    #
     # @param padding [Symbol] <%= one_of(Primer::BorderBoxComponent::PADDING_MAPPINGS.keys) %>
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(padding: DEFAULT_PADDING, **system_arguments)