primer_view_components 0.0.50 → 0.0.54

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 81f226f5fd176e5a1565b2064ba3a85a8af1c11bfd7c3c9503714f3f5cd41dac
-  data.tar.gz: d655dc0cfa7260a09de3f1f662a1317eb2540914407f33cfdbc07b369a6cd5b0
+  metadata.gz: c9b70049a9f24586f7b1239cdd97832cb9e813cc063ca475c77ae00ed448a6c4
+  data.tar.gz: 8df167c58fa86039a008d301969af68f7efa8e4345d49abf269cb09734ec1841
 SHA512:
-  metadata.gz: 07bc38eedefeae46a76d6f7a4b28892a4f01ab0018564c610d8143919c3fed93da3ad91c7970225fdfaac1fd12a294b51e245633f690e87b7392a21d3d3d65f8
-  data.tar.gz: c162cf3fca8accf0a92b9045e9e77bce16d3e646793a3fd479b12efd7e545e0cb9c56cc60884b39965ed7f41baf502d990cee3279170a3b896c845558a3ba714
+  metadata.gz: 7c87327784f69a03b4636e2952c98da1feb4b5c47776c8e46cd423ae562d25aa061c99f0ff3ebee605984816db3b3c6209fd7ddb5ed0577a1ed7b1ff8a68bbc8
+  data.tar.gz: c386eb3940ee79d8992b45168e18846863c6d503801674d13efe6ea8617cfc9d7a3957e3e324959c884d13bdd66113188ea23c9bcbf9dce00ff9eb54ce0deef3

data/CHANGELOG.md

@@ -30,8 +30,144 @@ The category for changes related to documentation, testing and tooling. Also, fo
 
 ## main
 
+## 0.0.54
+
+### Breaking changes
+
+* Rename `BreadcrumbComponent` to `Beta::Breadcrumbs`.
+
+    *Joel Hawksley*
+
+* Split `UnderlineNavComponent` into `Alpha::UnderlineNav` and `Alpha::UnderlinePanels`.
+
+    *Kate Higa*
+
+## 0.0.53
+
+### New
+
+* Add autocorrection to `FlashComponent` linter when the context is basic text.
+
+    *Manuel Puyol*
+
+### Updates
+
+* Linters won't mark offenses when the ignore count is correct unless explicitly configured to do so.
+
+    *Manuel Puyol*
+
+* Deprecating background and border color presentational arguments
+
+    *Jon Rohan*
+
+* Map the `for` argument when autofixing `ClipboardCopy` migrations.
+
+    *Kristján Oddsson*
+
+* Add autocorrection for `CloseButton` linter.
+
+    *Manuel Puyol*
+
+### Bug fixes
+
+* Linters won't convert HTML special elements.
+
+    *Manuel Puyol*
+
+### Misc
+
+* Only run CHANGELOG CI on pull requests.
+
+    *Manuel Puyol*
+
+* Run CI actions on pushes to main.
+
+    *Cameron Dutro*
+
+* Get to 100% code coverage.
+
+    *Cameron Dutro*
+
+## 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*
+
+* Add a linter generator.
+
+    *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.

data/app/components/primer/alpha/underline_nav.html.erb

@@ -0,0 +1,15 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <% if @align == :right %>
+    <%= actions %>
+  <% end %>
+
+  <%= render body do %>
+    <% tabs.each do |tab| %>
+      <%= tab %>
+    <% end %>
+  <% end %>
+
+  <% if @align == :left %>
+    <%= actions %>
+  <% end %>
+<% end %>

data/app/components/primer/alpha/underline_nav.rb

@@ -0,0 +1,143 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Use `UnderlineNav` to style navigation links with a minimal
+    # underlined selected state, typically placed at the top
+    # of the page.
+    # For panel navigation, use <%= link_to_component(Primer::Alpha::UnderlinePanels) %> instead.
+    #
+    # @accessibility
+    #   - By default, `UnderlineNav` renders links within a `<nav>` element. `<nav>` has an
+    #     implicit landmark role of `navigation` which should be reserved for main links.
+    #     For all other set of links, set tag to `:div`.
+    #   - See <%= link_to_component(Primer::Navigation::TabComponent) %> for additional
+    #     accessibility considerations.
+    class UnderlineNav < Primer::Component
+      include Primer::TabbedComponentHelper
+      include Primer::UnderlineNavHelper
+
+      ALIGN_DEFAULT = :left
+      ALIGN_OPTIONS = [ALIGN_DEFAULT, :right].freeze
+
+      BODY_TAG_DEFAULT = :ul
+
+      TAG_DEFAULT = :nav
+      TAG_OPTIONS = [TAG_DEFAULT, :div].freeze
+
+      ACTIONS_TAG_DEFAULT = :div
+      ACTIONS_TAG_OPTIONS = [ACTIONS_TAG_DEFAULT, :span].freeze
+
+      # Use the tabs to list page links.
+      #
+      # @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|
+        system_arguments[:classes] = underline_nav_tab_classes(system_arguments[:classes])
+        Primer::Navigation::TabComponent.new(
+          list: true,
+          selected: selected,
+          icon_classes: "UnderlineNav-octicon",
+          **system_arguments
+        )
+      }
+
+      # Use actions for a call to action.
+      #
+      # @param tag [Symbol] (Primer::UnderlineNavHelper::ACTIONS_TAG_DEFAULT) <%= one_of(Primer::UnderlineNavHelper::ACTIONS_TAG_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :actions, lambda { |tag: ACTIONS_TAG_DEFAULT, **system_arguments|
+        system_arguments[:tag] = fetch_or_fallback(ACTIONS_TAG_OPTIONS, tag, ACTIONS_TAG_DEFAULT)
+        system_arguments[:classes] = underline_nav_action_classes(system_arguments[:classes])
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # @example Default with `<nav>`
+      #   @description
+      #     `<nav>` is a landmark and should be reserved for main navigation links. See <%= link_to_accessibility %>.
+      #   @code
+      #     <%= render(Primer::Alpha::UnderlineNav.new(label: "Default with nav element")) do |component| %>
+      #       <% component.tab(href: "#", selected: true) { "Item 1" } %>
+      #       <% component.tab(href: "#") { "Item 2" } %>
+      #       <% component.actions do %>
+      #         <%= render(Primer::ButtonComponent.new) { "Button!" } %>
+      #       <% end %>
+      #     <% end %>
+      #
+      # @example With `<div>`
+      #   <%= render(Primer::Alpha::UnderlineNav.new(tag: :div, label: "With div element")) do |component| %>
+      #     <% component.tab(href: "#", selected: true) { "Item 1" } %>
+      #     <% component.tab(href: "#") { "Item 2" } %>
+      #     <% component.actions do %>
+      #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example With icons and counters
+      #   <%= render(Primer::Alpha::UnderlineNav.new(label: "With icons and counters")) do |component| %>
+      #     <% component.tab(href: "#", selected: true) do |t| %>
+      #       <% t.icon(icon: :star) %>
+      #       <% t.text { "Item 1" } %>
+      #     <% end %>
+      #     <% component.tab(href: "#") do |t| %>
+      #       <% t.icon(icon: :star) %>
+      #       <% t.text { "Item 2" } %>
+      #       <% t.counter(count: 10) %>
+      #     <% end %>
+      #     <% component.tab(href: "#") do |t| %>
+      #       <% t.text { "Item 3" } %>
+      #       <% t.counter(count: 10) %>
+      #     <% end %>
+      #     <% component.actions do %>
+      #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Align right
+      #   <%= render(Primer::Alpha::UnderlineNav.new(label: "Align right", align: :right)) do |component| %>
+      #     <% component.tab(href: "#", selected: true) do |t| %>
+      #       <% t.text { "Item 1" } %>
+      #     <% end %>
+      #     <% component.tab(href: "#") do |t| %>
+      #       <% t.text { "Item 2" } %>
+      #     <% end %>
+      #     <% component.actions do %>
+      #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @example Customizing the body
+      #   <%= render(Primer::Alpha::UnderlineNav.new(label: "Default", body_arguments: { classes: "custom-class", border: true, border_color: :info })) do |c| %>
+      #     <% c.tab(selected: true, href: "#") { "Tab 1" }%>
+      #     <% c.tab(href: "#") { "Tab 2" } %>
+      #     <% c.tab(href: "#") { "Tab 3" } %>
+      #   <% end %>
+      #
+      # @param tag [Symbol] <%= one_of(Primer::Alpha::UnderlineNav::TAG_OPTIONS) %>
+      # @param label [String] Sets an `aria-label` that helps assistive technology users understand the purpose of the links, and distinguish it from similar elements.
+      # @param align [Symbol] <%= one_of(Primer::UnderlineNavHelper::ALIGN_OPTIONS) %> - Defaults to <%= Primer::UnderlineNavHelper::ALIGN_DEFAULT %>
+      # @param body_arguments [Hash] <%= link_to_system_arguments_docs %> for the body wrapper.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(label:, tag: TAG_DEFAULT, align: ALIGN_DEFAULT, body_arguments: {}, **system_arguments)
+        @align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
+
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, TAG_DEFAULT)
+        @system_arguments[:classes] = underline_nav_classes(@system_arguments[:classes], @align)
+
+        @body_arguments = body_arguments
+        @body_arguments[:tag] = :ul
+        @body_arguments[:classes] = underline_nav_body_classes(@body_arguments[:classes])
+
+        @system_arguments[:tag] == :nav ? @system_arguments[:"aria-label"] = label : @body_arguments[:"aria-label"] = label
+      end
+
+      private
+
+      def body
+        Primer::BaseComponent.new(**@body_arguments)
+      end
+    end
+  end
+end

data/app/components/primer/{underline_nav_component.html.erb → alpha/underline_panels.html.erb}

@@ -1,23 +1,18 @@
-<%= wrapper(**@wrapper_arguments) do %>
+<%= wrapper(with_panel: true, **@wrapper_arguments) do %>
   <%= render Primer::BaseComponent.new(**@system_arguments) do %>
     <% if @align == :right %>
       <%= actions %>
     <% end %>
-
     <%= render body do %>
       <% tabs.each do |tab| %>
         <%= tab %>
       <% end %>
     <% end %>
-
     <% if @align == :left %>
       <%= actions %>
     <% end %>
   <% end %>
-
-  <% if @with_panel %>
-    <% tabs.each do |tab| %>
-      <%= tab.panel %>
-    <% end %>
+  <% tabs.each do |tab| %>
+    <%= tab.panel %>
   <% end %>
 <% end %>

data/app/components/primer/alpha/underline_panels.rb

@@ -0,0 +1,86 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # Use `UnderlinePanels` to style tabs with an associated panel and an underlined selected state.
+    class UnderlinePanels < Primer::Component
+      include Primer::TabbedComponentHelper
+      include Primer::UnderlineNavHelper
+      # Use to render a button and an associated panel slot. See the example below or refer to <%= link_to_component(Primer::Navigation::TabComponent) %>.
+      #
+      # @param id [String] Unique ID of tab.
+      # @param selected [Boolean] Whether the tab is selected.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_many :tabs, lambda { |id:, selected: false, **system_arguments|
+        system_arguments[:id] = id
+        system_arguments[:classes] = underline_nav_tab_classes(system_arguments[:classes])
+
+        Primer::Navigation::TabComponent.new(
+          selected: selected,
+          with_panel: true,
+          list: true,
+          icon_classes: "UnderlineNav-octicon",
+          panel_id: "panel-#{id}",
+          **system_arguments
+        )
+      }
+
+      # Use actions for a call to action.
+      #
+      # @param tag [Symbol] (Primer::UnderlineNavHelper::ACTIONS_TAG_DEFAULT) <%= one_of(Primer::UnderlineNavHelper::ACTIONS_TAG_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :actions, lambda { |tag: ACTIONS_TAG_DEFAULT, **system_arguments|
+        system_arguments[:tag] = fetch_or_fallback(ACTIONS_TAG_OPTIONS, tag, ACTIONS_TAG_DEFAULT)
+        system_arguments[:classes] = underline_nav_action_classes(system_arguments[:classes])
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
+      # @example Default
+      #   <%= render(Primer::Alpha::UnderlinePanels.new(label: "With panels")) do |component| %>
+      #     <% component.tab(id: "tab-1", selected: true) do |t| %>
+      #       <% t.text { "Tab 1" } %>
+      #       <% t.panel do %>
+      #         Panel 1
+      #       <% end %>
+      #     <% end %>
+      #     <% component.tab(id: "tab-2") do |t| %>
+      #       <% t.text { "Tab 2" } %>
+      #       <% t.panel do %>
+      #         Panel 2
+      #       <% end %>
+      #     <% end %>
+      #     <% component.actions do %>
+      #       <%= render(Primer::ButtonComponent.new) { "Button!" } %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @param label [String] Sets an `aria-label` that helps assistive technology users understand the purpose of the tabs.
+      # @param align [Symbol] <%= one_of(Primer::UnderlineNavHelper::ALIGN_OPTIONS) %> - Defaults to <%= Primer::UnderlineNavHelper::ALIGN_DEFAULT %>
+      # @param body_arguments [Hash] <%= link_to_system_arguments_docs %> for the body wrapper.
+      # @param wrapper_arguments [Hash] <%= link_to_system_arguments_docs %> for the `TabContainer` wrapper.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(label:, align: ALIGN_DEFAULT, body_arguments: {}, wrapper_arguments: {}, **system_arguments)
+        @align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
+        @wrapper_arguments = wrapper_arguments
+
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] = underline_nav_classes(@system_arguments[:classes], @align)
+
+        @body_arguments = body_arguments
+        @body_arguments[:tag] = :ul
+        @body_arguments[:classes] = underline_nav_body_classes(@body_arguments[:classes])
+
+        @body_arguments[:role] = :tablist
+        @body_arguments[:"aria-label"] = label
+      end
+
+      private
+
+      def body
+        Primer::BaseComponent.new(**@body_arguments)
+      end
+    end
+  end
+end

data/app/components/primer/base_component.rb

@@ -93,8 +93,8 @@ module Primer
     # | Name | Type | Description |
     # | :- | :- | :- |
     # | `display` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:display)) %> |
-    # | `width` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:width)) %>. Also supports integer values. |
-    # | `height` | Symbol | <%= one_of(Primer::Classify::Utilities.mappings(:height)) %>. Also supports integer values. |
+    # | `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_stack.rb

@@ -21,23 +21,23 @@ module Primer
 
       # @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") %>
+      #     <% 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") %>
+      #     <% 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") %>
+      #     <% 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) %>