feat(design): promote .copy-btn into shared chrome + clipboard.js

Andrew Dunnrequested to merge
andunn-copy-button into main

What does this MR do and why?

Promotes the inline copy-to-clipboard button that the kaniko docs site prototyped locally into the shared design/chrome/ layer, so every future Public Sector docs and lab consumer mounts the same button via the Pages CDN instead of re-implementing it. The kaniko prototype proved out the markup contract (a single <button class="copy-btn"> wrapping a phosphor icon, data-copy carrying the text) and the interaction (icon swap to ph-check for ~1.4s with a data-copied state attribute). Lifting it now keeps the kaniko follow-up small (strip the local <style> + <script>) and stops the next consumer from reinventing the pair.

What changes

  • New shared CSS at design/chrome/copy-btn.css. One file at the chrome layer's root (siblings: chrome/docs/, chrome/lab/), imported by both chrome aggregators' index.css. Authored against the canonical token names (--rule, --ink-2, --accent, --green); dark mode tracks automatically.
  • Token aliases in design/chrome/docs/tokens.css — --rule, --ink-2, --green map to the provisional names that live in that file today (--border, --text-2, --status-enforcing), so the shared component renders unchanged in docs chrome. The aliases disappear when the docs tokens file is replaced by a canonical import (already flagged in its header comment).
  • New shared JS at design/js/clipboard.js, served from the reference's Pages CDN at https://gitlab-com.gitlab.io/public-sector/reference/design/js/clipboard.js. Auto-binds every .copy-btn[data-copy] on DOMContentLoaded (or immediately if the document is already past loading). Swallows navigator.clipboard rejection silently — the surrounding text remains selectable.
  • Layout wiring. The docs template (templates/docs/site/src/layouts/Layout.astro) and the reference's own site (site/src/layouts/Layout.astro) both add a deferred <script> for clipboard.js. Lab consumers add the same tag manually; design/chrome/lab/README.md documents it.
  • Walkthrough entry. site/src/pages/design/chrome.astro gains a .copy-btn block with the markup contract so consumers see the canonical shape on the rendered Design → Chrome page.

Consumer-side markup contract

<button class="copy-btn" type="button"
        data-copy="<text-to-copy>"
        aria-label="Copy <thing>">
  <i class="ph-duotone ph-clipboard-text" aria-hidden="true"></i>
</button>

A docs consumer gets the styling and the behavior automatically (the docs chrome bundles the CSS, the docs Layout loads the JS). A lab consumer adds one extra <script> tag alongside anchors.js and mermaid-init.js.

References

  • Prototype that proved this out: kaniko docs site site/index.html in gitlab-com/public-sector/kaniko.
  • Companion follow-up (not in this MR): strip the local <style> block and copy-button click handler from the kaniko site once this reference release deploys.

Standards affected

None directly. standards/design/SKILL.md already names chrome/lab/ and chrome/docs/ as the two CDN-served chrome families; the copy-btn lives inside that contract.

Deviation implications

None. No .reference.yaml field changes; no consumer cutover required.

Test plan

  • make guard passes locally
  • make check passes locally (self-conformance)
  • make build && make agent succeeds
  • Rendered the reference's own site locally and verified the Design → Chrome page shows the new .copy-btn walkthrough block
  • Clicked a .copy-btn on a test page, confirmed the clipboard receives the data-copy value, the icon swaps to ph-check for ~1.4s, and data-copied="true" toggles for the duration
  • Verified dark mode still renders the button correctly (icon border tracks --rule in both light and dark themes)
  • Confirmed clipboard.js is a no-op on pages without any .copy-btn (the docs Layout always loads it, even on pages that don't use the button)

Preview

make build-site
cd site && npm run preview
# open http://localhost:4321/public-sector/reference/design/chrome/

The copy-btn walkthrough entry sits between .code-block and .site-footer in the chrome.astro components list.

Merge request reports