feat: #2501 - POC for component tokens documentation

[twjeffery]

Related story: GovAlta/ui-components#2501

Purpose

Proof of concept for how we can document all component tokens on our documentation site in a sustainable way with low manual maintanance.

Screenshare overview

⸻

What Was Implemented

this POC was completed for the Button component.

Reusable ComponentTokenTable Component

• Renders tokens in a table, within an accordion, grouped by pre defined token categories
• Includes a header with a “Show all / Hide all” button that expands and collapses all accordions
• Allows copying token names to clipboard with feedback via a temporary notification
• Pulls from token JSON files published in the @abgov/design-tokens package on NPM
• Automatically categorizes tokens using the categorizeTokens utility
• Ignores empty categories
• Highlights copied token and displays a toast for user feedback

categorizeComponentTokens.ts Utility

• Groups tokens by token types and names into categories (e.g., “Typography tokens”, “Size & spacing tokens”)
• Accepts a customizable order for categories when needed
• Ensures “Other tokens” category appears last

useComponentTokens() React Hook

• Accepts a token JSON file and a custom category order
• Returns: tokensList: grouped tokens, orderedCategories: sorted category names

---

How to Add This to Another Component Page

1. Import the component tokens JSON

import accordionTokens from "@abgov/design-tokens/data/component-design-tokens/accordion-design-tokens.json";

2. (optional) Define a category order

const accordionCategoryOrder = [
  "Border tokens",
  "Typography tokens",
  "Size & spacing tokens",
  "State tokens",
  "Other tokens"
];

3. Use the shared hook

const { tokensList, orderedCategories } = useComponentTokens(
  accordionTokens,
  accordionCategoryOrder
);

4. Render the token table

<ComponentTokenTable
  tokensList={tokensList}
  orderedCategories={orderedCategories}
/>

[netlify]

✅ Deploy Preview for abgov-ui-component-docs ready!

Name	Link
🔨 Latest commit	bcdfe4a
🔍 Latest deploy log	https://app.netlify.com/sites/abgov-ui-component-docs/deploys/67e201a25706d5000863da89
😎 Deploy Preview	https://deploy-preview-326--abgov-ui-component-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 0 Accessibility: 100 Best Practices: 100 SEO: 75 PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.