primer_view_components 0.13.1 → 0.14.0

data/lib/primer/view_components/linters/base_linter.rb

@@ -24,6 +24,7 @@ module ERBLint
       CLASSES = [].freeze
       REQUIRED_ARGUMENTS = [].freeze
 
+      # :nodoc:
       class ConfigSchema < LinterConfig
         property :override_ignores_if_correctable, accepts: [true, false], default: false, reader: :override_ignores_if_correctable?
       end
@@ -154,13 +155,13 @@ module ERBLint
         # Unless explicitly set, we don't want to mark correctable offenses if the counter is correct.
         if !@config.override_ignores_if_correctable? && expected_count == @total_offenses
           clear_offenses
-          return
+          return false
         end
 
         if @offenses_not_corrected.zero?
           # have to adjust to get `\n` so we delete the whole line
           add_offense(processed_source.to_source_range(comment_node.loc.adjust(end_pos: 1)), "Unused erblint:count comment for #{rule_name}", "") if comment_node
-          return
+          return false
         end
 
         first_offense = @offenses[0]

data/lib/primer/view_components/linters/deprecated_components_counter.rb

@@ -63,7 +63,7 @@ module ERBLint
         if offenses_count.zero?
           # have to adjust to get `\n` so we delete the whole line
           add_offense_with_severity(processed_source.to_source_range(comment_node.loc.adjust(end_pos: 1)), "Unused erblint:counter comment for #{rule_name}", "") if comment_node
-          return
+          return false
         end
 
         first_offense = @offenses[0]

data/lib/primer/view_components/linters/disallow_action_list.rb

@@ -10,6 +10,7 @@ module ERBLint
       include ERBLint::LinterRegistry
       include TagTreeHelpers
 
+      # :nodoc:
       class ConfigSchema < LinterConfig
         property :ignore_files, accepts: array_of?(String), default: -> { [] }
       end

data/lib/primer/view_components/linters/severity_schema.rb

@@ -4,6 +4,7 @@ require "erb_lint/utils/severity_levels"
 
 module ERBLint
   module Linters
+    # :nodoc:
     class SeveritySchema < LinterConfig
       # SEVERITY_NAMES :info, :refactor, :convention, :warning, :error, :fatal
       # see https://github.com/Shopify/erb-lint/blob/main/lib/erb_lint/utils/severity_levels.rb

data/lib/primer/view_components/version.rb

@@ -5,14 +5,13 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 13
-      PATCH = 1
+      MINOR = 14
+      PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end
   end
 end
 
-# rubocop:disable Rails/Output
 puts Primer::ViewComponents::VERSION::STRING if __FILE__ == $PROGRAM_NAME
 # rubocop:enable Rails/Output

data/lib/primer/yard/lookbook_pages_backend.rb

@@ -42,14 +42,12 @@ module Primer
           ), __dir__
         )
 
-        # rubocop:disable Lint/UselessAssignment
         documented_methods = docs.non_slot_methods.select do |mtd|
           [component.name, "Primer::Forms::Dsl::InputMethods"].include?(mtd.parent.title)
         end
 
         preview_methods = PREVIEW_MAP[component]
         preview_erbs = preview_methods.map do |preview_method|
-          # rubocop:disable Style/IfUnlessModifier
           if Primer::FormsPreview.instance_methods.exclude?(preview_method)
             raise "Preview '#{preview_method}' does not exist in Primer::FormsPreview"
           end

data/lib/rubocop/cop/primer/base_cop.rb

@@ -12,7 +12,7 @@ module RuboCop
         # We only verify SystemArguments if it's a `.new` call on a component or
         # a ViewHeleper call.
         def valid_node?(node)
-          return if node.nil?
+          return false if node.nil?
 
           view_helpers.include?(node.method_name) || (node.method_name == :new && !node.receiver.nil? && ::Primer::ViewComponents::STATUSES.key?(node.receiver.const_name))
         end

data/lib/rubocop/cop/primer/deprecated_arguments.rb

@@ -298,7 +298,6 @@ module RuboCop
         def extract_kv_from(pair)
           key = pair.key.value
 
-          # rubocop:disable Lint/BooleanSymbol
           value = case pair.value.type
                   when :sym, :str
                     pair.value.value.to_sym
@@ -307,7 +306,6 @@ module RuboCop
                   else
                     return []
                   end
-          # rubocop:enable Lint/BooleanSymbol
 
           [key, value]
         end

data/lib/rubocop/cop/primer/deprecated_components.rb

@@ -3,7 +3,7 @@
 require "rubocop"
 require "json"
 require "parser/current"
-require_relative "./../../../primer/view_components/linters/helpers/deprecated_components_helpers"
+require_relative "../../../primer/view_components/linters/helpers/deprecated_components_helpers"
 
 module RuboCop
   module Cop

data/lib/rubocop/cop/primer/deprecated_label_schemes.rb

@@ -58,7 +58,7 @@ module RuboCop
         private
 
         def label_node?(node)
-          return if node.nil?
+          return false if node.nil?
 
           node.method_name == :new && !node.receiver.nil? && node.receiver.const_name == "Primer::Beta::Label"
         end

data/lib/rubocop/cop/primer/deprecated_label_variants.rb

@@ -61,7 +61,7 @@ module RuboCop
         private
 
         def label_node?(node)
-          return if node.nil?
+          return false if node.nil?
 
           node.method_name == :new && !node.receiver.nil? && node.receiver.const_name == "Primer::Beta::Label"
         end

data/previews/primer/alpha/octicon_symbols_preview/default.html.erb

@@ -0,0 +1,6 @@
+<%= render(Primer::Alpha::OcticonSymbols.new(icons: [{ symbol: :container, size: :medium }])) %>
+
+<svg xmlns="http://www.w3.org/2000/svg" height="40" width="40" aria-label="Circled container icon" tabindex="0">
+  <circle cx="20" cy="20" r="18" stroke="green" stroke-width="3px" fill="white" />
+  <use href="#octicon_container_24" x="8" y="8" />
+</svg>

data/previews/primer/alpha/octicon_symbols_preview/playground.html.erb

@@ -0,0 +1,13 @@
+<p style="max-width: 500px">
+  Below is an SVG image containing the chosen octicon surrounded by a green circle. The octicon has been emitted
+  onto the page as an SVG &lt;symbol&gt; element and included into the SVG you see below with the &lt;use&gt; element.
+  See the <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol" target="_blank">MDN docs</a> for
+  more information.
+</p>
+
+<%= render(Primer::Alpha::OcticonSymbols.new(icons: [{ symbol: octicon, size: :medium }])) %>
+
+<svg xmlns="http://www.w3.org/2000/svg" height="40" width="40" aria-label="Circled <%= octicon %> icon" tabindex="0">
+  <circle cx="20" cy="20" r="18" stroke="green" stroke-width="3px" fill="white" />
+  <use href="#octicon_<%= octicon %>_24" x="8" y="8" />
+</svg>

data/previews/primer/alpha/octicon_symbols_preview.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label OcticonSymbols
+    class OcticonSymbolsPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param octicon [Symbol] medium_octicon
+      def playground(octicon: :container)
+        render_with_template(locals: { octicon: octicon })
+      end
+
+      # @label Default
+      #
+      # @snapshot
+      def default
+      end
+    end
+  end
+end

data/previews/primer/alpha/text_field_preview.rb

@@ -176,6 +176,11 @@ module Primer
         render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.example_check_ok_path, name: "my-text-field", label: "My text field"))
       end
 
+      # @label Auto check request accepted
+      def with_auto_check_accepted
+        render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.example_check_accepted_path, name: "my-text-field", label: "My text field"))
+      end
+
       # @label Auto check request error
       def with_auto_check_error
         render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.example_check_error_path, name: "my-text-field", label: "My text field"))

data/previews/primer/beta/avatar_preview.rb

@@ -64,6 +64,12 @@ module Primer
         render(Primer::Beta::Avatar.new(size: 48, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
       end
 
+      # @label 64px
+      # @snapshot
+      def size_64
+        render(Primer::Beta::Avatar.new(size: 64, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
       # @label 80px
       # @snapshot
       def size_80

data/previews/primer/beta/button_group_preview.rb

@@ -69,6 +69,17 @@ module Primer
           end
         end
       end
+
+      # @label With clipboard copy button
+      # @snapshot
+      def with_clipboard_copy_button(size: :medium, scheme: :default)
+        render(Primer::Beta::ButtonGroup.new(size: size, scheme: scheme)) do |component|
+          component.with_button { "Button 1" }
+          component.with_clipboard_copy_button(id: "button-2", value: "Copyable value", aria: { label: "Copy some text" }) do |button|
+            button.with_tooltip(text: "Copy some text")
+          end
+        end
+      end
     end
   end
 end

data/previews/primer/beta/clipboard_copy_button_preview.rb

@@ -0,0 +1,29 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # @label ClipboardCopyButton
+    class ClipboardCopyButtonPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param text [String]
+      def playground(text: "Text to copy")
+        render(Primer::Beta::ClipboardCopyButton.new(id: "clipboard-button", aria: { label: "Copy" }, value: text))
+      end
+
+      # @label Playground
+      # @snapshot
+      def default
+        render(Primer::Beta::ClipboardCopyButton.new(id: "clipboard-button", aria: { label: "Copy" }, value: "Text to copy"))
+      end
+
+      # @label With tooltip
+      # @snapshot
+      def with_tooltip
+        render(Primer::Beta::ClipboardCopyButton.new(id: "clipboard-button", aria: { label: "Copy" }, value: "Text to copy")) do |button|
+          button.with_tooltip(text: "Copy some text")
+        end
+      end
+    end
+  end
+end

data/previews/primer/beta/subhead_preview.rb

@@ -9,10 +9,11 @@ module Primer
       # @param spacious [Boolean]
       # @param hide_border [Boolean]
       # @param heading_danger [Boolean]
+      # @param heading_size [Symbol] select [medium, large]
       # @param heading_tag [Symbol] select [div, h1, h2, h3, h4, h5, h6]
-      def playground(spacious: false, hide_border: false, heading_tag: :div, heading_danger: false)
+      def playground(spacious: false, hide_border: false, heading_tag: :div, heading_size: Primer::Beta::Subhead::DEFAULT_HEADING_SIZE, heading_danger: false)
         render(Primer::Beta::Subhead.new(spacious: spacious, hide_border: hide_border)) do |component|
-          component.with_heading(tag: heading_tag, danger: heading_danger) do
+          component.with_heading(tag: heading_tag, size: heading_size, danger: heading_danger) do
             "My Heading"
           end
           component.with_description do
@@ -26,11 +27,12 @@ module Primer
       # @param spacious [Boolean]
       # @param hide_border [Boolean]
       # @param heading_danger [Boolean]
+      # @param heading_size [Symbol] select [medium, large]
       # @param heading_tag [Symbol] select [div, h1, h2, h3, h4, h5, h6]
       # @snapshot
-      def default(spacious: false, hide_border: false, heading_tag: :div, heading_danger: false)
+      def default(spacious: false, hide_border: false, heading_tag: :div, heading_size: Primer::Beta::Subhead::DEFAULT_HEADING_SIZE, heading_danger: false)
         render(Primer::Beta::Subhead.new(spacious: spacious, hide_border: hide_border)) do |component|
-          component.with_heading(tag: heading_tag, danger: heading_danger) do
+          component.with_heading(tag: heading_tag, size: heading_size, danger: heading_danger) do
             "My Heading"
           end
           component.with_description do
@@ -98,6 +100,32 @@ module Primer
       end
       #
       # @!endgroup
+
+      # @!group Header size
+      #
+      # @label Large
+      def large_header
+        render(Primer::Beta::Subhead.new) do |component|
+          component.with_heading(size: :large) do
+            "Large Header"
+          end
+          component.with_description do
+            "Description"
+          end
+        end
+      end
+
+      # @label Medium
+      def medium_header
+        render(Primer::Beta::Subhead.new) do |component|
+          component.with_heading(size: :medium) do
+            "Medium Header"
+          end
+          component.with_description do
+            "Description"
+          end
+        end
+      end
     end
   end
 end

data/previews/primer/forms_preview/action_menu_form.html.erb

@@ -0,0 +1,3 @@
+<%= primer_form_with(url: action_menu_form_action_path(format: route_format)) do |f| %>
+  <%= render(ActionMenuForm.new(f)) %>
+<% end %>

data/previews/primer/forms_preview.rb

@@ -23,6 +23,10 @@ module Primer
 
     def select_form; end
 
+    def action_menu_form(route_format: :html)
+      render_with_template(locals: { route_format: route_format })
+    end
+
     def radio_button_with_nested_form; end
 
     def check_box_with_nested_form; end

data/static/arguments.json

@@ -923,7 +923,7 @@
         "name": "subtitle",
         "type": "String",
         "default": "`nil`",
-        "description": "Provides dditional context for the dialog, also setting the `aria-describedby` attribute."
+        "description": "Provides additional context for the dialog, also setting the `aria-describedby` attribute."
       },
       {
         "name": "show_divider",
@@ -3034,7 +3034,7 @@
         "name": "size",
         "type": "Integer",
         "default": "`20`",
-        "description": "One of `16`, `20`, `24`, `32`, `40`, `48`, or `80`."
+        "description": "One of `16`, `20`, `24`, `32`, `40`, `48`, `64`, or `80`."
       },
       {
         "name": "shape",
@@ -3108,7 +3108,7 @@
         "name": "tag",
         "type": "Symbol",
         "default": "`:button`",
-        "description": "One of `:a`, `:button`, or `:summary`."
+        "description": "One of `:a`, `:button`, `:clipboard-copy`, or `:summary`."
       },
       {
         "name": "type",
@@ -3249,6 +3249,12 @@
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/button.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/button/default/",
     "parameters": [
+      {
+        "name": "base_button_class",
+        "type": "Class",
+        "default": "`Primer::Beta::BaseButton`",
+        "description": "The button class to render."
+      },
       {
         "name": "scheme",
         "type": "Symbol",
@@ -3277,7 +3283,7 @@
         "name": "tag",
         "type": "Symbol",
         "default": "`:button`",
-        "description": "One of `:a`, `:button`, or `:summary`."
+        "description": "One of `:a`, `:button`, `:clipboard-copy`, or `:summary`."
       },
       {
         "name": "type",
@@ -3361,6 +3367,68 @@
       }
     ]
   },
+  {
+    "component": "ClipboardCopyBaseButton",
+    "status": "beta",
+    "a11y_reviewed": false,
+    "short_name": "ClipboardCopyBaseButton",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/clipboard_copy_base_button.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/clipboard_copy_base_button/default/",
+    "parameters": [
+      {
+        "name": "tag",
+        "type": "Symbol",
+        "default": "`:button`",
+        "description": "One of `:a`, `:button`, `:clipboard-copy`, or `:summary`."
+      },
+      {
+        "name": "type",
+        "type": "Symbol",
+        "default": "`:button`",
+        "description": "One of `:button`, `:reset`, or `:submit`."
+      },
+      {
+        "name": "block",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether button is full-width with `display: block`."
+      },
+      {
+        "name": "disabled",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether or not the button is disabled. If true, this option forces `tag:` to `:button`."
+      },
+      {
+        "name": "inactive",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether the button looks visually disabled, but can still accept all the same interactions as an enabled button."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
+  {
+    "component": "ClipboardCopyButton",
+    "status": "beta",
+    "a11y_reviewed": false,
+    "short_name": "ClipboardCopyButton",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/clipboard_copy_button.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/clipboard_copy_button/default/",
+    "parameters": [
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "The arguments accepted by [Button](/components/beta/button) and [ClipboardCopy](/components/beta/clipboardcopy)."
+      }
+    ]
+  },
   {
     "component": "CloseButton",
     "status": "beta",
@@ -3561,13 +3629,7 @@
         "name": "tag",
         "type": "Symbol",
         "default": "N/A",
-        "description": "One of `:a`, `:button`, or `:summary`."
-      },
-      {
-        "name": "wrapper_arguments",
-        "type": "Hash",
-        "default": "`{}`",
-        "description": "Optional keyword arguments to be passed to the wrapper `<div>` tag."
+        "description": "One of `:a`, `:button`, `:clipboard-copy`, or `:summary`."
       },
       {
         "name": "scheme",
@@ -4399,7 +4461,7 @@
         "name": "tag",
         "type": "Symbol",
         "default": "`:button`",
-        "description": "One of `:a`, `:button`, or `:summary`."
+        "description": "One of `:a`, `:button`, `:clipboard-copy`, or `:summary`."
       },
       {
         "name": "type",
@@ -4490,7 +4552,7 @@
         "name": "tag",
         "type": "Symbol",
         "default": "N/A",
-        "description": "One of `:a`, `:button`, or `:summary`."
+        "description": "One of `:a`, `:button`, `:clipboard-copy`, or `:summary`."
       },
       {
         "name": "type",

data/static/audited_at.json

@@ -73,6 +73,8 @@
   "Primer::Beta::Button": "",
   "Primer::Beta::ButtonGroup": "",
   "Primer::Beta::ClipboardCopy": "",
+  "Primer::Beta::ClipboardCopyBaseButton": "",
+  "Primer::Beta::ClipboardCopyButton": "",
   "Primer::Beta::CloseButton": "",
   "Primer::Beta::Counter": "",
   "Primer::Beta::Details": "",

data/static/classes.json

@@ -218,9 +218,6 @@
   "Button-visual": [
     "Primer::Beta::Button"
   ],
-  "Button-withTooltip": [
-    "Primer::Beta::Button"
-  ],
   "ButtonGroup": [
     "Primer::Beta::ButtonGroup"
   ],
@@ -254,6 +251,9 @@
   "FormControl-inlineValidation": [
     "Primer::Alpha::TextField"
   ],
+  "FormControl-inlineValidation--success": [
+    "Primer::Alpha::TextField"
+  ],
   "FormControl-inlineValidation--visual": [
     "Primer::Alpha::TextField"
   ],
@@ -528,6 +528,12 @@
   "Subhead-heading--danger": [
     "Primer::Beta::Subhead"
   ],
+  "Subhead-heading--large": [
+    "Primer::Beta::Subhead"
+  ],
+  "Subhead-heading--medium": [
+    "Primer::Beta::Subhead"
+  ],
   "TimelineItem": [
     "Primer::Beta::TimelineItem"
   ],

data/static/constants.json

@@ -709,6 +709,7 @@
       32,
       40,
       48,
+      64,
       80
     ],
     "SMALL_THRESHOLD": 24
@@ -736,7 +737,8 @@
     "TAG_OPTIONS": [
       "button",
       "a",
-      "summary"
+      "summary",
+      "clipboard-copy"
     ],
     "TYPE_OPTIONS": [
       "button",
@@ -836,6 +838,10 @@
   },
   "Primer::Beta::ClipboardCopy": {
   },
+  "Primer::Beta::ClipboardCopyBaseButton": {
+  },
+  "Primer::Beta::ClipboardCopyButton": {
+  },
   "Primer::Beta::CloseButton": {
     "DEFAULT_TYPE": "button",
     "TYPE_OPTIONS": [
@@ -1238,7 +1244,16 @@
     ]
   },
   "Primer::Beta::Subhead": {
+    "DEFAULT_HEADING_SIZE": "large",
     "DEFAULT_HEADING_TAG": "div",
+    "HEADING_SIZE_MAP": {
+      "large": "Subhead-heading--large",
+      "medium": "Subhead-heading--medium"
+    },
+    "HEADING_SIZE_OPTIONS": [
+      "large",
+      "medium"
+    ],
     "HEADING_TAG_OPTIONS": [
       "div",
       "h1",