primer_view_components 0.24.1 → 0.25.1

data/app/components/primer/alpha/toggle_switch.js

@@ -20,7 +20,7 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
     }
     get csrf() {
         const csrfElement = this.querySelector('[data-csrf]');
-        return this.getAttribute('csrf') || (csrfElement instanceof HTMLInputElement && csrfElement.value) || null;
+        return this.getAttribute('data-csrf') || (csrfElement instanceof HTMLInputElement && csrfElement.value) || null;
     }
     get csrfField() {
         // the authenticity token is passed into the element and is not generated in js land

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

@@ -56,10 +56,6 @@ module Primer
         }
 
         @system_arguments[:src] = @src if @src
-
-        return unless @src && @csrf_token
-
-        @system_arguments[:csrf] = @csrf_token
       end
 
       def on?
@@ -73,6 +69,22 @@ module Primer
       def disabled?
         !enabled?
       end
+
+      private
+
+      def before_render
+        @csrf_token ||= view_context.form_authenticity_token(
+          form_options: {
+            method: :post,
+            action: @src
+          }
+        )
+
+        @system_arguments[:data] = merge_data(
+          @system_arguments,
+          { data: { csrf: @csrf_token } }
+        )
+      end
     end
   end
 end

data/app/components/primer/alpha/toggle_switch.ts

@@ -19,7 +19,7 @@ class ToggleSwitchElement extends HTMLElement {
 
   get csrf(): string | null {
     const csrfElement = this.querySelector('[data-csrf]')
-    return this.getAttribute('csrf') || (csrfElement instanceof HTMLInputElement && csrfElement.value) || null
+    return this.getAttribute('data-csrf') || (csrfElement instanceof HTMLInputElement && csrfElement.value) || null
   }
 
   get csrfField(): string {

data/app/components/primer/beta/breadcrumbs.css

@@ -1 +1 @@
-.breadcrumb-item{display:inline-block;list-style:none;margin-left:-.35em;white-space:nowrap}.breadcrumb-item:after{border-right:.1em solid var(--borderColor-neutral-emphasis);content:"";display:inline-block;height:.8em;margin:0 .5em;transform:rotate(15deg) translateY(.0625em)}.breadcrumb-item:first-child{margin-left:0}.breadcrumb-item-selected:after,.breadcrumb-item[aria-current]:not([aria-current=false]):after{content:none}.breadcrumb-item-selected a{color:var(--fgColor-default);cursor:default!important;-webkit-text-decoration:none!important;text-decoration:none!important}
+.breadcrumb-item{display:inline-block;list-style:none;margin-left:-.35em}.breadcrumb-item:after{border-right:.1em solid var(--borderColor-neutral-emphasis);content:"";display:inline-block;height:.8em;margin:0 .5em;transform:rotate(15deg) translateY(.0625em)}.breadcrumb-item:first-child{margin-left:0}.breadcrumb-item-selected:after,.breadcrumb-item[aria-current]:not([aria-current=false]):after{content:none}.breadcrumb-item-selected a{color:var(--fgColor-default);cursor:default!important;-webkit-text-decoration:none!important;text-decoration:none!important}

data/app/components/primer/beta/breadcrumbs.css.map

@@ -1 +1 @@
-{"version":3,"sources":["breadcrumbs.pcss"],"names":[],"mappings":"AAAA,iBACE,oBAAqB,CAGrB,eAAgB,CAFhB,kBAAoB,CACpB,kBAeF,CAZE,uBAKE,2DAA6D,CAD7D,UAAW,CAHX,oBAAqB,CACrB,WAAa,CACb,aAAe,CAGf,2CACF,CAEA,6BACE,aACF,CAKA,+FACE,YACF,CAGF,4BACE,4BAA6B,CAC7B,wBAA0B,CAC1B,sCAAgC,CAAhC,8BACF","file":"breadcrumbs.css","sourcesContent":[".breadcrumb-item {\n  display: inline-block;\n  margin-left: -0.35em;\n  white-space: nowrap;\n  list-style: none;\n\n  &::after {\n    display: inline-block;\n    height: 0.8em;\n    margin: 0 0.5em;\n    content: '';\n    border-right: 0.1em solid var(--borderColor-neutral-emphasis);\n    transform: rotate(15deg) translateY(0.0625em);\n  }\n\n  &:first-child {\n    margin-left: 0;\n  }\n}\n\n.breadcrumb-item-selected,\n.breadcrumb-item[aria-current]:not([aria-current='false']) {\n  &::after {\n    content: none;\n  }\n}\n\n.breadcrumb-item-selected a {\n  color: var(--fgColor-default);\n  cursor: default !important;\n  text-decoration: none !important;\n}\n"]}
+{"version":3,"sources":["breadcrumbs.pcss"],"names":[],"mappings":"AAAA,iBACE,oBAAqB,CAErB,eAAgB,CADhB,kBAeF,CAZE,uBAKE,2DAA6D,CAD7D,UAAW,CAHX,oBAAqB,CACrB,WAAa,CACb,aAAe,CAGf,2CACF,CAEA,6BACE,aACF,CAKA,+FACE,YACF,CAGF,4BACE,4BAA6B,CAC7B,wBAA0B,CAC1B,sCAAgC,CAAhC,8BACF","file":"breadcrumbs.css","sourcesContent":[".breadcrumb-item {\n  display: inline-block;\n  margin-left: -0.35em;\n  list-style: none;\n\n  &::after {\n    display: inline-block;\n    height: 0.8em;\n    margin: 0 0.5em;\n    content: '';\n    border-right: 0.1em solid var(--borderColor-neutral-emphasis);\n    transform: rotate(15deg) translateY(0.0625em);\n  }\n\n  &:first-child {\n    margin-left: 0;\n  }\n}\n\n.breadcrumb-item-selected,\n.breadcrumb-item[aria-current]:not([aria-current='false']) {\n  &::after {\n    content: none;\n  }\n}\n\n.breadcrumb-item-selected a {\n  color: var(--fgColor-default);\n  cursor: default !important;\n  text-decoration: none !important;\n}\n"]}

data/app/components/primer/beta/breadcrumbs.pcss

@@ -1,7 +1,6 @@
 .breadcrumb-item {
   display: inline-block;
   margin-left: -0.35em;
-  white-space: nowrap;
   list-style: none;
 
   &::after {

data/app/components/primer/beta/clipboard_copy.html.erb

@@ -1,8 +1,11 @@
-<%= render Primer::BaseComponent.new(**@system_arguments) do %>
-  <% if content.present? %>
-    <%= content %>
-  <% else %>
-    <%= render Primer::Beta::Octicon.new(:copy) %>
-    <%= render Primer::Beta::Octicon.new(:check, color: :success, style: "display: none;") %>
+<%= render Primer::BaseComponent.new(tag: :span) do %>
+  <%= render Primer::BaseComponent.new(**@system_arguments) do %>
+    <% if content.present? %>
+      <%= content %>
+    <% else %>
+      <%= render Primer::Beta::Octicon.new(:copy) %>
+      <%= render Primer::Beta::Octicon.new(:check, color: :success, style: "display: none;") %>
+    <% end %>
   <% end %>
+  <div aria-live="polite" aria-atomic="true" class="sr-only" data-clipboard-copy-feedback></div>
 <% end %>

data/app/components/primer/beta/clipboard_copy.js

@@ -29,12 +29,27 @@ document.addEventListener('clipboard-copy', ({ target }) => {
     if (!target.hasAttribute('data-view-component'))
         return;
     const currentTimeout = clipboardCopyElementTimers.get(target);
+    const clipboardCopyLiveRegion = target.parentNode?.querySelector('[data-clipboard-copy-feedback]');
+    const copiedAnnouncement = 'Copied!';
     if (currentTimeout) {
         clearTimeout(currentTimeout);
         clipboardCopyElementTimers.delete(target);
     }
     else {
         showCheck(target);
+        if (clipboardCopyLiveRegion) {
+            if (clipboardCopyLiveRegion.textContent === copiedAnnouncement) {
+                /* This is a hack due to the way the aria live API works.
+                A screen reader will not read a live region again
+                if the text is the same. Adding a space character tells
+                the browser that the live region has updated,
+                which will cause it to read again, but with no audible difference. */
+                clipboardCopyLiveRegion.textContent = `${copiedAnnouncement}\u00A0`;
+            }
+            else {
+                clipboardCopyLiveRegion.textContent = copiedAnnouncement;
+            }
+        }
     }
     clipboardCopyElementTimers.set(target, setTimeout(() => {
         showCopy(target);

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

@@ -10,6 +10,8 @@ module Primer
     #
     # @accessibility
     #   Always set an accessible label to help the user interact with the component.
+    #
+    #   This component has a built-in `aria-live` region that announces "Copied!" when the copy element is pressed.
     class ClipboardCopy < Primer::Component
       status :beta
 

data/app/components/primer/beta/clipboard_copy.ts

@@ -37,12 +37,26 @@ document.addEventListener('clipboard-copy', ({target}) => {
   if (!target.hasAttribute('data-view-component')) return
 
   const currentTimeout = clipboardCopyElementTimers.get(target)
+  const clipboardCopyLiveRegion = target.parentNode?.querySelector<HTMLElement>('[data-clipboard-copy-feedback]')
+  const copiedAnnouncement = 'Copied!'
 
   if (currentTimeout) {
     clearTimeout(currentTimeout)
     clipboardCopyElementTimers.delete(target)
   } else {
     showCheck(target)
+    if (clipboardCopyLiveRegion) {
+      if (clipboardCopyLiveRegion.textContent === copiedAnnouncement) {
+        /* This is a hack due to the way the aria live API works.
+        A screen reader will not read a live region again
+        if the text is the same. Adding a space character tells
+        the browser that the live region has updated,
+        which will cause it to read again, but with no audible difference. */
+        clipboardCopyLiveRegion.textContent = `${copiedAnnouncement}\u00A0`
+      } else {
+        clipboardCopyLiveRegion.textContent = copiedAnnouncement
+      }
+    }
   }
 
   clipboardCopyElementTimers.set(

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

@@ -5,6 +5,8 @@ module Primer
     # `ClipboardCopyButton` uses the `ClipboardCopy` component to copy text to the clipboard,
     # styled as a Primer button. It can be used wherever a button is desired, and works well
     # with components like `ButtonGroup`.
+    # @accessibility
+    #   This component has a built-in `aria-live` region that announces "Copied!" when the copy button is pressed.
     class ClipboardCopyButton < Primer::Beta::Button
       # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Button) %> and <%= link_to_component(Primer::Beta::ClipboardCopy) %>.
       def initialize(**system_arguments)

data/app/lib/primer/attributes_helper.rb

@@ -54,7 +54,7 @@ module Primer
     # It's designed to be used to normalize and merge data information from system_arguments
     # hashes. Consider using this pattern in component initializers:
     #
-    # @system_arguments[:data] = merge_aria(
+    # @system_arguments[:data] = merge_data(
     #   @system_arguments,
     #   { data: { foo: "bar" } }
     # )

data/lib/primer/forms/toggle_switch.html.erb

@@ -10,13 +10,5 @@
 
     <div><%= render(Caption.new(input: @input)) %></div>
   </span>
-  <%
-    csrf = @input.csrf || @view_context.form_authenticity_token(
-      form_options: {
-        method: :post,
-        action: @input.src
-      }
-    )
-  %>
-  <%= render(Primer::Alpha::ToggleSwitch.new(src: @input.src, csrf: csrf, **@input.input_arguments)) %>
+  <%= render(Primer::Alpha::ToggleSwitch.new(src: @input.src, csrf_token: @input.csrf, **@input.input_arguments)) %>
 <% end %>

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 24
+      MINOR = 25
       PATCH = 1
 
       STRING = [MAJOR, MINOR, PATCH].join(".")

data/previews/primer/alpha/banner_preview.rb

@@ -55,7 +55,7 @@ module Primer
       # @label Dismissable
       # @snapshot
       def dismissible
-        render(Primer::Alpha::Banner.new(dismiss_scheme: :hide, reappear: true)) { "This is a dismissable banner." }
+        render(Primer::Alpha::Banner.new(dismiss_scheme: :hide)) { "This is a dismissable banner." }
       end
 
       # @!group Full Width

data/previews/primer/alpha/toggle_switch_preview.rb

@@ -52,7 +52,7 @@ module Primer
       end
 
       def with_csrf_token
-        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, csrf_token: "let_me_in"))
+        render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path))
       end
 
       def with_bad_csrf_token

data/previews/primer/beta/breadcrumbs_preview/with_beta_truncate.html.erb

@@ -0,0 +1,15 @@
+<% texts = [
+          "Breadcrumb Item 1",
+          "Breadcrumb Item 2 with a really long, long, long name",
+          "Breadcrumb Item 3 with an extremely long, long, long name"
+        ] %>
+
+<%= render(Primer::Beta::Breadcrumbs.new) do |breadcrumbs| %>
+  <% texts.each_with_index do |text, i| %>
+    <% breadcrumbs.with_item(href: "##{i}") do %>
+      <%= render(Primer::Beta::Truncate.new) do |truncate| %>
+        <% truncate.with_item(max_width: 135) { text } %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/previews/primer/beta/breadcrumbs_preview/with_deprecated_truncate.html.erb

@@ -0,0 +1,14 @@
+<%# erblint:counter DeprecatedComponentsCounter 1 %>
+<% texts = [
+          "Breadcrumb Item 1",
+          "Breadcrumb Item 2 with a really long, long, long name",
+          "Breadcrumb Item 3 with an extremely long, long, long name"
+        ] %>
+
+<%= render(Primer::Beta::Breadcrumbs.new) do |breadcrumbs| %>
+  <% texts.each_with_index do |text, i| %>
+    <% breadcrumbs.with_item(href: "##{i}") do %>
+      <%= render(Primer::Truncate.new(inline: true, max_width: 135)) { text } %>
+    <% end %>
+  <% end %>
+<% end %>

data/previews/primer/beta/breadcrumbs_preview.rb

@@ -26,6 +26,18 @@ module Primer
           end
         end
       end
+
+      # @label WithBetaTruncate
+      # @snapshot
+      def with_beta_truncate
+        render_with_template
+      end
+
+      # @label WithDeprecatedTruncate
+      # @snapshot
+      def with_deprecated_truncate
+        render_with_template
+      end
     end
   end
 end

data/previews/primer/beta/label_preview.rb

@@ -9,8 +9,13 @@ module Primer
       # @param size [Symbol] select [medium, large]
       # @param tag [Symbol] select [span, summary, a, div]
       # @param inline [Boolean] toggle
-      def playground(size: :medium, tag: :span, inline: false)
-        render(Primer::Beta::Label.new(tag: tag, size: size, inline: inline)) { "Label" }
+      # @param href [String] URL to be used with an anchor tag
+      def playground(size: :medium, tag: :span, inline: false, href: nil)
+        if tag == :a
+          render(Primer::Beta::Label.new(tag: tag, size: size, inline: inline, href: href || "#")) { "Link label" }
+        else
+          render(Primer::Beta::Label.new(tag: tag, size: size, inline: inline)) { "Label" }
+        end
       end
 
       # @label Default Options

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

@@ -1,3 +1,3 @@
-<%= render(ExampleToggleSwitchForm.new(csrf: "let_me_in", label: "Good example", src: toggle_switch_index_path, id: "success-toggle")) %>
+<%= render(ExampleToggleSwitchForm.new(label: "Good example", src: toggle_switch_index_path, id: "success-toggle")) %>
 <hr>
-<%= render(ExampleToggleSwitchForm.new(csrf: "a_bad_value", label: "Bad example", src: toggle_switch_index_path, id: "error-toggle")) %>
+<%= render(ExampleToggleSwitchForm.new(label: "Bad example", src: toggle_switch_index_path(fail: true), id: "error-toggle")) %>

data/static/info_arch.json

@@ -10921,6 +10921,32 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/beta/breadcrumbs/with_beta_truncate",
+        "name": "with_beta_truncate",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/beta/breadcrumbs/with_deprecated_truncate",
+        "name": "with_deprecated_truncate",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [
@@ -11630,7 +11656,7 @@
   {
     "fully_qualified_name": "Primer::Beta::ClipboardCopy",
     "description": "Use `ClipboardCopy` to copy element text content or input values to the clipboard.\n\nThis component by itself is not styled as a button, and can therefore only be used in limited circumstances.\nIf you're looking for a button, consider using {{#link_to_component}}Primer::Beta::ClipboardCopyButton{{/link_to_component}}\ninstead.",
-    "accessibility_docs": "Always set an accessible label to help the user interact with the component.",
+    "accessibility_docs": "Always set an accessible label to help the user interact with the component.\n\nThis component has a built-in `aria-live` region that announces \"Copied!\" when the copy element is pressed.",
     "is_form_component": false,
     "is_published": true,
     "requires_js": true,
@@ -11797,7 +11823,7 @@
   {
     "fully_qualified_name": "Primer::Beta::ClipboardCopyButton",
     "description": "`ClipboardCopyButton` uses the `ClipboardCopy` component to copy text to the clipboard,\nstyled as a Primer button. It can be used wherever a button is desired, and works well\nwith components like `ButtonGroup`.",
-    "accessibility_docs": null,
+    "accessibility_docs": "This component has a built-in `aria-live` region that announces \"Copied!\" when the copy button is pressed.",
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,

data/static/previews.json

@@ -2011,6 +2011,32 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/beta/breadcrumbs/with_beta_truncate",
+        "name": "with_beta_truncate",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/beta/breadcrumbs/with_deprecated_truncate",
+        "name": "with_deprecated_truncate",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.24.1
+  version: 0.25.1
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-05-14 00:00:00.000000000 Z
+date: 2024-05-31 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -813,6 +813,8 @@ files:
 - previews/primer/beta/blankslate_preview/inside_flex_container.html.erb
 - previews/primer/beta/border_box_preview.rb
 - previews/primer/beta/breadcrumbs_preview.rb
+- previews/primer/beta/breadcrumbs_preview/with_beta_truncate.html.erb
+- previews/primer/beta/breadcrumbs_preview/with_deprecated_truncate.html.erb
 - previews/primer/beta/button_group_preview.rb
 - previews/primer/beta/button_group_preview/with_menu_button.html.erb
 - previews/primer/beta/button_preview.rb