openproject-primer_view_components 0.16.0 → 0.17.1

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

@@ -179,6 +179,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

@@ -25,6 +25,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

@@ -230,9 +230,6 @@
   "Button-visual": [
     "Primer::Beta::Button"
   ],
-  "Button-withTooltip": [
-    "Primer::Beta::Button"
-  ],
   "ButtonGroup": [
     "Primer::Beta::ButtonGroup"
   ],
@@ -269,6 +266,9 @@
   "FormControl-inlineValidation": [
     "Primer::Alpha::TextField"
   ],
+  "FormControl-inlineValidation--success": [
+    "Primer::Alpha::TextField"
+  ],
   "FormControl-inlineValidation--visual": [
     "Primer::Alpha::TextField"
   ],
@@ -576,6 +576,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",