openproject-primer_view_components 0.32.0 → 0.33.0

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/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/components/primer/open_project/sub_header.css

@@ -1 +1 @@
-.SubHeader{align-items:center;display:grid;flex-wrap:wrap;grid-template-areas:"left middle right" "bottom bottom bottom";grid-template-columns:auto 1fr auto;row-gap:16px}.SubHeader-rightPane{align-items:center;column-gap:12px;display:flex;grid-area:right}.SubHeader-middlePane{grid-area:middle;text-align:center}.SubHeader-bottomPane{grid-area:bottom;margin-bottom:16px}.SubHeader-leftPane{align-items:center;display:flex;gap:12px;grid-area:left;width:100%}.SubHeader-filterContainer{display:flex;gap:8px;width:100%}
+.SubHeader{align-items:center;display:grid;flex-wrap:wrap;grid-template-areas:"left middle right" "bottom bottom bottom";grid-template-columns:auto 1fr auto;margin-bottom:16px}.SubHeader-rightPane{align-items:center;column-gap:12px;display:flex;grid-area:right}.SubHeader-middlePane{grid-area:middle;text-align:center}.SubHeader-bottomPane{grid-area:bottom}.SubHeader-leftPane{align-items:center;display:flex;gap:12px;grid-area:left;width:100%}.SubHeader-filterContainer{display:flex;gap:8px;width:100%}

data/app/components/primer/open_project/sub_header.css.map

@@ -1 +1 @@
-{"version":3,"sources":["sub_header.pcss"],"names":[],"mappings":"AAEA,WAKI,kBAAmB,CAJnB,YAAa,CAOb,cAAe,CANf,8DAA+D,CAC/D,mCAAoC,CACpC,YAKJ,CAEA,qBAGI,kBAAmB,CACnB,eAAgB,CAFhB,YAAa,CADb,eAIJ,CAEA,sBACI,gBAAiB,CACjB,iBACJ,CAEA,sBACI,gBAAiB,CACjB,kBACJ,CAEA,oBAGI,kBAAmB,CADnB,YAAa,CAGb,QAAS,CAJT,cAAe,CAGf,UAEJ,CAEA,2BACI,YAAa,CAEb,OAAQ,CADR,UAEJ","file":"sub_header.css","sourcesContent":["/* CSS for SubHeader  */\n\n.SubHeader {\n    display: grid;\n    grid-template-areas: \"left middle right\" \"bottom bottom bottom\";\n    grid-template-columns: auto 1fr auto;\n    row-gap: 16px;\n    align-items: center;\n\n    /* When the filter input is expanded in mobile, we switch to a flex layout */\n    flex-wrap: wrap;\n}\n\n.SubHeader-rightPane {\n    grid-area: right;\n    display: flex;\n    align-items: center;\n    column-gap: 12px;\n}\n\n.SubHeader-middlePane {\n    grid-area: middle;\n    text-align: center;\n}\n\n.SubHeader-bottomPane {\n    grid-area: bottom;\n    margin-bottom: 16px;\n}\n\n.SubHeader-leftPane {\n    grid-area: left;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    gap: 12px;\n}\n\n.SubHeader-filterContainer {\n    display: flex;\n    width: 100%;\n    gap: 8px;\n}\n"]}
+{"version":3,"sources":["sub_header.pcss"],"names":[],"mappings":"AAEA,WAII,kBAAmB,CAHnB,YAAa,CAOb,cAAe,CANf,8DAA+D,CAC/D,mCAAoC,CAEpC,kBAIJ,CAEA,qBAGI,kBAAmB,CACnB,eAAgB,CAFhB,YAAa,CADb,eAIJ,CAEA,sBACI,gBAAiB,CACjB,iBACJ,CAEA,sBACI,gBACJ,CAEA,oBAGI,kBAAmB,CADnB,YAAa,CAGb,QAAS,CAJT,cAAe,CAGf,UAEJ,CAEA,2BACI,YAAa,CAEb,OAAQ,CADR,UAEJ","file":"sub_header.css","sourcesContent":["/* CSS for SubHeader  */\n\n.SubHeader {\n    display: grid;\n    grid-template-areas: \"left middle right\" \"bottom bottom bottom\";\n    grid-template-columns: auto 1fr auto;\n    align-items: center;\n    margin-bottom: 16px;\n\n    /* When the filter input is expanded in mobile, we switch to a flex layout */\n    flex-wrap: wrap;\n}\n\n.SubHeader-rightPane {\n    grid-area: right;\n    display: flex;\n    align-items: center;\n    column-gap: 12px;\n}\n\n.SubHeader-middlePane {\n    grid-area: middle;\n    text-align: center;\n}\n\n.SubHeader-bottomPane {\n    grid-area: bottom;\n}\n\n.SubHeader-leftPane {\n    grid-area: left;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    gap: 12px;\n}\n\n.SubHeader-filterContainer {\n    display: flex;\n    width: 100%;\n    gap: 8px;\n}\n"]}

data/app/components/primer/open_project/sub_header.html.erb

@@ -5,7 +5,7 @@
       <%= render @mobile_filter_cancel do
         I18n.t("button_cancel")
       end if @mobile_filter_cancel.present? %>
-    <% end if @filter_container.present? %>
+    <% end if filter_input.present? %>
     <%= render @mobile_filter_trigger if @mobile_filter_trigger.present? %>
     <%= filter_button %>
   </div>

data/app/components/primer/open_project/sub_header.pcss

@@ -4,8 +4,8 @@
     display: grid;
     grid-template-areas: "left middle right" "bottom bottom bottom";
     grid-template-columns: auto 1fr auto;
-    row-gap: 16px;
     align-items: center;
+    margin-bottom: 16px;
 
     /* When the filter input is expanded in mobile, we switch to a flex layout */
     flex-wrap: wrap;
@@ -25,7 +25,6 @@
 
 .SubHeader-bottomPane {
     grid-area: bottom;
-    margin-bottom: 16px;
 }
 
 .SubHeader-leftPane {

data/app/components/primer/open_project/sub_header.rb

@@ -108,16 +108,15 @@ module Primer
         system_arguments[:font_weight] ||= :bold
 
         Primer::Beta::Text.new(**system_arguments)
-
       }
 
       # A slot for a generic component which will be shown in a second row below the rest, spanning the whole width
       renders_one :bottom_pane_component, lambda { |**system_arguments|
         deny_tag_argument(**system_arguments)
         system_arguments[:tag] = :div
+        system_arguments[:mt] ||= 3
 
         Primer::BaseComponent.new(**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 = 32
+      MINOR = 33
       PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")

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/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

@@ -11630,7 +11630,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 +11797,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,

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: openproject-primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.32.0
+  version: 0.33.0
 platform: ruby
 authors:
 - GitHub Open Source
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-05-31 00:00:00.000000000 Z
+date: 2024-06-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview