primer_view_components 0.0.39 → 0.0.44

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

@@ -1,3 +1,4 @@
+<%= label %>
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
   <%= input %>
   <%= icon %>

data/app/components/primer/avatar_stack_component.rb

@@ -8,6 +8,8 @@ module Primer
     ALIGN_DEFAULT = :left
     ALIGN_OPTIONS = [ALIGN_DEFAULT, :right].freeze
 
+    DEFAULT_TAG = :div
+    TAG_OPTIONS = [DEFAULT_TAG, :span].freeze
     # Required list of stacked avatars.
     #
     # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::AvatarComponent) %>.
@@ -34,11 +36,12 @@ module Primer
     #     <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
     #   <% end  %>
     #
+    # @param tag [Symbol] <%= one_of(Primer::AvatarStackComponent::TAG_OPTIONS) %>
     # @param align [Symbol] <%= one_of(Primer::AvatarStackComponent::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::TooltipComponent) %>.
+    # @param body_arguments [Hash] Parameters to add to the Body. If `tooltipped` is set, has the same arguments as <%= link_to_component(Primer::Tooltip) %>.
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-    def initialize(align: ALIGN_DEFAULT, tooltipped: false, body_arguments: {}, **system_arguments)
+    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
@@ -50,7 +53,7 @@ module Primer
         @body_arguments[:classes]
       )
 
-      @system_arguments[:tag] ||= :div
+      @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
       @system_arguments[:classes] = class_names(
         "AvatarStack",
         system_arguments[:classes],
@@ -60,7 +63,7 @@ module Primer
 
     def body_component
       if @tooltipped
-        Primer::TooltipComponent.new(**@body_arguments)
+        Primer::Tooltip.new(**@body_arguments)
       else
         Primer::BaseComponent.new(**@body_arguments)
       end

data/app/components/primer/base_component.rb

@@ -77,20 +77,22 @@ 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, :fill]) %> |
+    # | `width` | Symbol | <%= one_of([:fit]) %> |
     #
     # ## Grid
     #
     # | Name | Type | Description |
     # | :- | :- | :- |
-    # | `col` | Integer | Number of columns. |
+    # | `clearfix` | Boolean | Wether to assign the `clearfix` class. |
+    # | `col` | Integer | Number of columns. <%= one_of(Primer::Classify::Grid::COL_VALUES) %> |
+    # | `container` | Symbol | Size of the container. <%= one_of(Primer::Classify::Grid::CONTAINER_VALUES) %> |
     #
     # ## Layout
     #
     # | Name | Type | Description |
     # | :- | :- | :- |
     # | `display` | Symbol | <%= one_of([:none, :block, :flex, :inline, :inline_block, :inline_flex, :table, :table_cell]) %> |
-    # | `height` | Symbol | <%= one_of([:fit, :fill]) %> |
+    # | `height` | Symbol | <%= one_of([:fit]) %> |
     # | `hide` | Symbol | Hide the element at a specific breakpoint. <%= one_of([:sm, :md, :lg, :xl]) %> |
     # | `v` | Symbol | Visibility. <%= one_of([:hidden, :visible]) %> |
     # | `vertical_align` | Symbol | <%= one_of([:baseline, :top, :middle, :bottom, :text_top, :text_bottom]) %> |
@@ -129,9 +131,12 @@ module Primer
     #
     # | Name | Type | Description |
     # | :- | :- | :- |
-    # | `font_size` | String, Integer | <%= one_of(["00", 0, 1, 2, 3, 4, 5, 6]) %> |
-    # | `font_weight` | Symbol | Font weight. <%= one_of([:light, :normal, :bold]) %> |
+    # | `font_family` | Symbol | Font weight. <%= one_of([:mono]) %> |
+    # | `font_size` | String, Integer, Symbol | <%= one_of(["00", 0, 1, 2, 3, 4, 5, 6, :small, :normal]) %> |
+    # | `font_style` | Symbol | Font weight. <%= one_of([:italic]) %> |
+    # | `font_weight` | Symbol | Font weight. <%= one_of([:light, :normal, :bold, :emphasized]) %> |
     # | `text_align` | Symbol | Text alignment. <%= one_of([:left, :right, :center]) %> |
+    # | `text_transform` | Symbol | Text alignment. <%= one_of([:uppercase]) %> |
     # | `underline` | Boolean | Whether text should be underlined. |
     # | `word_break` | Symbol | Whether to break words on line breaks. Can only be `:break_all`. |
     #
@@ -143,10 +148,15 @@ module Primer
     # | test_selector | String | Adds `data-test-selector='given value'` in non-Production environments for testing purposes. |
     def initialize(tag:, classes: nil, **system_arguments)
       @tag = tag
-      @result = Primer::Classify.call(**system_arguments.merge(classes: classes))
+      @system_arguments = system_arguments
 
+      raise ArgumentError, "`class` is an invalid argument. Use `classes` instead." if system_arguments.key?(:class) && !Rails.env.production?
+
+      @result = Primer::Classify.call(**@system_arguments.merge(classes: classes))
+
+      @system_arguments[:"data-view-component"] = true
       # Filter out Primer keys so they don't get assigned as HTML attributes
-      @content_tag_args = add_test_selector(system_arguments).except(*Primer::Classify::VALID_KEYS)
+      @content_tag_args = add_test_selector(@system_arguments).except(*Primer::Classify::VALID_KEYS)
     end
 
     def call

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

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # `Text` is a wrapper component that will apply typography styles to the text inside.
+    class Text < Primer::Component
+      status :beta
+
+      DEFAULT_TAG = :span
+
+      # @example Default
+      #   <%= render(Primer::Beta::Text.new(tag: :p, font_weight: :bold)) { "Bold Text" } %>
+      #   <%= render(Primer::Beta::Text.new(tag: :p, color: :text_danger)) { "Danger Text" } %>
+      #
+      # @param tag [Symbol]
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(tag: DEFAULT_TAG, **system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = tag
+      end
+
+      def call
+        render(Primer::BaseComponent.new(**@system_arguments)) { content }
+      end
+    end
+  end
+end

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

@@ -1,3 +1,4 @@
+<%# erblint:counter ButtonComponentMigrationCounter 1 %>
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
   <% if spinner.present? %>
     <%= spinner %>

data/app/components/primer/blankslate_component.rb

@@ -3,8 +3,8 @@
 module Primer
   # Use `Blankslate` when there is a lack of content within a page or section. Use as placeholder to tell users why something isn't there.
   # @accessibility
-  #   `BlankSlate` renders an `<h3>` element for the title by default. Update the heading level based on what is appropriate for your page hierarchy by setting `title_tag`.
-  #   [Learn more about best heading practices (WAI Headings)](https://www.w3.org/WAI/tutorials/page-structure/headings/)
+  #   `Blankslate` renders an `<h3>` element for the title by default. Update the heading level based on what is appropriate for your page hierarchy by setting `title_tag`.
+  #   <%= link_to_heading_practices %>
   class BlankslateComponent < Primer::Component
     status :beta
 
@@ -23,61 +23,79 @@ module Primer
     #     description: "Description",
     #   ) %>
     #
-    # @example Icon|Add an `icon` to give additional context. Refer to the [Octicons](https://primer.style/octicons/) documentation to choose an icon.
-    #   <%= render Primer::BlankslateComponent.new(
-    #     icon: "octoface",
-    #     title: "Title",
-    #     description: "Description",
-    #   ) %>
+    # @example Icon
+    #   @description
+    #     Add an `icon` to give additional context. Refer to the [Octicons](https://primer.style/octicons/) documentation to choose an icon.
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       icon: :globe,
+    #       title: "Title",
+    #       description: "Description",
+    #     ) %>
     #
-    # @example Loading|Add a [SpinnerComponent](https://primer.style/view-components/components/spinner) to the blankslate in place of an icon.
-    #   <%= render Primer::BlankslateComponent.new(
-    #     title: "Title",
-    #     description: "Description",
-    #   ) do |component| %>
-    #     <% component.spinner(size: :large) %>
-    #   <% end %>
+    # @example Loading
+    #   @description
+    #     Add a [SpinnerComponent](https://primer.style/view-components/components/spinner) to the blankslate in place of an icon.
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       title: "Title",
+    #       description: "Description",
+    #     ) do |component| %>
+    #       <% component.spinner(size: :large) %>
+    #     <% end %>
     #
-    # @example Custom content|Pass custom content as a block in place of `description`.
-    #   <%= render Primer::BlankslateComponent.new(
-    #     title: "Title",
-    #   ) do %>
-    #     <em>Your custom content here</em>
-    #   <% end %>
+    # @example Custom content
+    #   @description
+    #     Pass custom content as a block in place of `description`.
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       title: "Title",
+    #     ) do %>
+    #       <em>Your custom content here</em>
+    #     <% end %>
     #
-    # @example Action button|Provide a button to guide users to take action from the blankslate. The button appears below the description and custom content.
-    #   <%= render Primer::BlankslateComponent.new(
-    #     icon: "book",
-    #     title: "Welcome to the mona wiki!",
-    #     description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
+    # @example Action button
+    #   @description
+    #     Provide a button to guide users to take action from the blankslate. The button appears below the description and custom content.
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       icon: :book,
+    #       title: "Welcome to the mona wiki!",
+    #       description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
     #
-    #     button_text: "Create the first page",
-    #     button_url: "https://github.com/monalisa/mona/wiki/_new",
-    #   ) %>
+    #       button_text: "Create the first page",
+    #       button_url: "https://github.com/monalisa/mona/wiki/_new",
+    #     ) %>
     #
-    # @example Link|Add an additional link to help users learn more about a feature. The link will be shown at the very bottom:
-    #   <%= render Primer::BlankslateComponent.new(
-    #     icon: "book",
-    #     title: "Welcome to the mona wiki!",
-    #     description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
-    #     link_text: "Learn more about wikis",
-    #     link_url: "https://docs.github.com/en/github/building-a-strong-community/about-wikis",
-    #   ) %>
+    # @example Link
+    #   @description
+    #     Add an additional link to help users learn more about a feature. The link will be shown at the very bottom:
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       icon: :book,
+    #       title: "Welcome to the mona wiki!",
+    #       description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
+    #       link_text: "Learn more about wikis",
+    #       link_url: "https://docs.github.com/en/github/building-a-strong-community/about-wikis",
+    #     ) %>
     #
-    # @example Variations|There are a few variations of how the Blankslate appears: `narrow` adds a maximum width, `large` increases the font size, and `spacious` adds extra padding.
-    #   <%= render Primer::BlankslateComponent.new(
-    #     icon: "book",
-    #     title: "Welcome to the mona wiki!",
-    #     description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
-    #     narrow: true,
-    #     large: true,
-    #     spacious: true,
-    #   ) %>
+    # @example Variations
+    #   @description
+    #     There are a few variations of how the Blankslate appears: `narrow` adds a maximum width, `large` increases the font size, and `spacious` adds extra padding.
+    #   @code
+    #     <%= render Primer::BlankslateComponent.new(
+    #       icon: :book,
+    #       title: "Welcome to the mona wiki!",
+    #       description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
+    #       narrow: true,
+    #       large: true,
+    #       spacious: true,
+    #     ) %>
     #
     # @param title [String] Text that appears in a larger bold font.
     # @param title_tag [Symbol] HTML tag to use for title.
-    # @param icon [String] Octicon icon to use at top of component.
-    # @param icon_size [Symbol] <%= one_of(Primer::OcticonComponent::SIZE_MAPPINGS) %>
+    # @param icon [Symbol] Octicon icon to use at top of component.
+    # @param icon_size [Symbol] <%= one_of(Primer::OcticonComponent::SIZE_MAPPINGS, sort: false) %>
     # @param image_src [String] Image to display.
     # @param image_alt [String] Alt text for image.
     # @param description [String] Text that appears below the title. Typically a whole sentence.
@@ -89,6 +107,7 @@ module Primer
     # @param narrow [Boolean] Adds a maximum width.
     # @param large [Boolean] Increases the font size.
     # @param spacious [Boolean] Adds extra padding.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(
       title: "",
       title_tag: :h3,
@@ -111,7 +130,7 @@ module Primer
       **system_arguments
     )
       @system_arguments = system_arguments
-      @system_arguments[:tag] ||= :div
+      @system_arguments[:tag] = :div
       @system_arguments[:classes] = class_names(
         @system_arguments[:classes],
         "blankslate",

data/app/components/primer/button_component.rb

@@ -78,11 +78,12 @@ module Primer
     #
     # @param scheme [Symbol] <%= one_of(Primer::ButtonComponent::SCHEME_OPTIONS) %>
     # @param variant [Symbol] <%= one_of(Primer::ButtonComponent::VARIANT_OPTIONS) %>
-    # @param tag [Symbol] <%= one_of(Primer::BaseButton::TAG_OPTIONS) %>
-    # @param type [Symbol] <%= one_of(Primer::BaseButton::TYPE_OPTIONS) %>
+    # @param tag [Symbol] (Primer::BaseButton::DEFAULT_TAG) <%= one_of(Primer::BaseButton::TAG_OPTIONS) %>
+    # @param type [Symbol] (Primer::BaseButton::DEFAULT_TYPE) <%= one_of(Primer::BaseButton::TYPE_OPTIONS) %>
     # @param group_item [Boolean] Whether button is part of a ButtonGroup.
     # @param block [Boolean] Whether button is full-width with `display: block`.
     # @param caret [Boolean] Whether or not to render a caret.
+    # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
     def initialize(
       scheme: DEFAULT_SCHEME,
       variant: DEFAULT_VARIANT,

data/app/components/primer/button_group.rb

@@ -22,7 +22,7 @@ module Primer
     #     <% component.button(scheme: :primary) { "Primary" } %>
     #     <% component.button(scheme: :danger) { "Danger" } %>
     #     <% component.button(scheme: :outline) { "Outline" } %>
-    #     <% component.button(classes: "my-class") { "Custom class" } %>
+    #     <% component.button(classes: "custom-class") { "Custom class" } %>
     #   <% end %>
     #
     # @example Variants
@@ -46,7 +46,7 @@ module Primer
     def initialize(variant: Primer::ButtonComponent::DEFAULT_VARIANT, **system_arguments)
       @variant = variant
       @system_arguments = system_arguments
-      @system_arguments[:tag] ||= :div
+      @system_arguments[:tag] = :div
 
       @system_arguments[:classes] = class_names(
         "BtnGroup",

data/app/components/primer/clipboard_copy_component.js

@@ -1,4 +1,5 @@
 import '@github/clipboard-copy-element';
+const CLIPBOARD_COPY_TIMER_DURATION = 2000;
 function toggleSVG(svg) {
     if (svg.style.display === '' || svg.style.display === 'block') {
         svg.style.display = 'none';
@@ -15,9 +16,19 @@ function toggleCopyButton(button) {
     toggleSVG(clippyIcon);
     toggleSVG(checkIcon);
 }
+const clipboardCopyElementTimers = new WeakMap();
 document.addEventListener('clipboard-copy', function ({ target }) {
     if (!(target instanceof HTMLElement))
         return;
-    toggleCopyButton(target);
-    setTimeout(toggleCopyButton, 2000, target);
+    if (!target.hasAttribute('data-view-component'))
+        return;
+    const currentTimeout = clipboardCopyElementTimers.get(target);
+    if (currentTimeout) {
+        clearTimeout(currentTimeout);
+        clipboardCopyElementTimers.delete(target);
+    }
+    else {
+        toggleCopyButton(target);
+    }
+    clipboardCopyElementTimers.set(target, setTimeout(toggleCopyButton, CLIPBOARD_COPY_TIMER_DURATION, target));
 });

data/app/components/primer/clipboard_copy_component.ts

@@ -1,5 +1,7 @@
 import '@github/clipboard-copy-element'
 
+const CLIPBOARD_COPY_TIMER_DURATION = 2000
+
 function toggleSVG(svg: SVGElement) {
   if (svg.style.display === '' || svg.style.display === 'block') {
     svg.style.display = 'none'
@@ -18,9 +20,20 @@ function toggleCopyButton(button: HTMLElement) {
   toggleSVG(checkIcon)
 }
 
+const clipboardCopyElementTimers = new WeakMap<HTMLElement, number>()
+
 document.addEventListener('clipboard-copy', function ({target}) {
   if (!(target instanceof HTMLElement)) return
-  toggleCopyButton(target)
+  if (!target.hasAttribute('data-view-component')) return
+
+  const currentTimeout = clipboardCopyElementTimers.get(target)
+
+  if (currentTimeout) {
+    clearTimeout(currentTimeout)
+    clipboardCopyElementTimers.delete(target)
+  } else {
+    toggleCopyButton(target)
+  }
 
-  setTimeout(toggleCopyButton, 2000, target)
+  clipboardCopyElementTimers.set(target, setTimeout(toggleCopyButton, CLIPBOARD_COPY_TIMER_DURATION, target))
 })

data/app/components/primer/component.rb

@@ -5,7 +5,7 @@ require "view_component/version"
 module Primer
   # @private
   class Component < ViewComponent::Base
-    include ViewComponent::SlotableV2 unless ViewComponent::VERSION::STRING.to_f >= 2.28
+    include ViewComponent::SlotableV2 unless ViewComponent::Base < ViewComponent::SlotableV2
     include ClassNameHelper
     include FetchOrFallbackHelper
     include TestSelectorHelper
@@ -25,6 +25,11 @@ module Primer
       ActiveSupport::Deprecation.warn(message)
     end
 
+    def validate_aria_label
+      aria_label = @system_arguments[:"aria-label"] || @system_arguments.dig(:aria, :label)
+      raise ArgumentError, "`aria-label` is required." if aria_label.nil? && !Rails.env.production?
+    end
+
     def silence_deprecations?
       Rails.application.config.primer_view_components.silence_deprecations
     end

data/app/components/primer/counter_component.rb

@@ -1,7 +1,12 @@
 # frozen_string_literal: true
 
 module Primer
-  # Use `CounterComponent` to add a count to navigational elements and buttons.
+  # Use `Counter` to add a count to navigational elements and buttons.
+  #
+  # @accessibility
+  #   Always use `Counter` with adjacent text that provides supplementary information regarding what the count is for. For instance, `Counter`
+  #   should be accompanied with text such as `issues` or `pull requests`.
+  #
   class CounterComponent < Primer::Component
     status :beta
 

data/app/components/primer/details_component.rb

@@ -14,7 +14,7 @@ module Primer
 
     # Use the Summary slot as a trigger to reveal the content.
     #
-    # @param button [Boolean] Whether to render the Summary as a button or not.
+    # @param button [Boolean] (true) Whether to render the Summary as a button or not.
     # @param kwargs [Hash] The same arguments as <%= link_to_system_arguments_docs %>.
     renders_one :summary, lambda { |button: true, **system_arguments|
       system_arguments[:tag] = :summary
@@ -33,6 +33,17 @@ module Primer
       Primer::BaseComponent.new(**system_arguments)
     }
 
+    # @example Default
+    #
+    #   <%= render Primer::DetailsComponent.new do |c| %>
+    #     component.summary do
+    #       "Summary"
+    #     end
+    #     component.body do
+    #       "Body"
+    #     end
+    #   <% end %>
+    #
     # @param overlay [Symbol] Dictates the type of overlay to render with. <%= one_of(Primer::DetailsComponent::OVERLAY_MAPPINGS.keys) %>
     # @param reset [Boolean] Defatuls to false. If set to true, it will remove the default caret and remove style from the summary element
     # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>