Merge pull request #103 from wrap-org/docs/etch-token-tables

docs: use etch token tables

Author: mergify[bot]

.storybook/preview.ts

@@ -1,5 +1,6 @@
 import type { Preview } from '@storybook/react'
 import { DocPage } from './DocPage';
+import tokens from '@wrap.ngo/tokens/dist/index.css?raw'
 
 // Load the actual web components
 import '../src/components/composition/App/App';
@@ -53,6 +54,23 @@ const preview: Preview = {
     backgrounds: {
       disable: true,
     },
+    designTokenTables: {
+      tokens: [
+        tokens,
+      ],
+      collections: {
+        'evg-color': 'color',
+        'evg-radius': 'radius',
+        'evg-spacing': 'spacing',
+        'evg-shadow': 'shadow',
+        'evg-font-family': 'font-family',
+        'evg-font-line-height': 'line-height',
+        'evg-font-size': 'font-size',
+        'evg-font-weight': 'font-weight',
+        'evg-theme': 'color',
+        'evg-sentiment': 'color',
+      },
+    },
     viewport: {
       viewports: {
         aaMinimum: {

package-lock.json

@@ -37,6 +37,7 @@
     "@commitlint/cli": "^19.8.0",
     "@commitlint/config-conventional": "^19.4.1",
     "@etchteam/eslint-config": "^2.2.32",
+    "@etchteam/storybook-addon-design-token-tables": "1.1.0",
     "@etchteam/stylelint-config": "^1.7.2",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.3",

package.json

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/blocks';
-import Tokens from './blocks/Tokens/Tokens';
+import { Tokens } from '@etchteam/storybook-addon-design-token-tables';
 
 <Meta title="Foundations/Tokens/Button" />
 
@@ -11,4 +11,4 @@ Dedicated token collections that standardise button styling across the system. B
 define values for sizes, background and border colours for different states (default, hover,
 active, disabled) to ensure consistent interactive elements throughout the interface.
 
-<Tokens collection="button" />
+<Tokens collection="evg-button" />

src/docs/foundations/tokens/Button.mdx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/blocks';
-import Tokens from './blocks/Tokens/Tokens';
+import { Tokens } from '@etchteam/storybook-addon-design-token-tables';
 
 <Meta title="Foundations/Tokens/Colors" />
 
@@ -13,5 +13,5 @@ We've organised them into primary, secondary, neutral, and semantic palettes wit
 tints and shades. Each colour is defined as a token that can be referenced consistently across
 the entire system.
 
-<Tokens collection="color" />
+<Tokens collection="evg-color" />
 

src/docs/foundations/tokens/Colors.mdx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/blocks';
-import Tokens from './blocks/Tokens/Tokens';
+import { Tokens } from '@etchteam/storybook-addon-design-token-tables';
 
 <Meta title="Foundations/Tokens/Elevation" />
 
@@ -11,4 +11,4 @@ Shadow system creates depth and hierarchy through perceived elevation from the s
 These tokens define box-shadow properties with increasing intensity to establish hierarchy
 and focus through perceived distance from the background.
 
-<Tokens collection="shadow" />
+<Tokens collection="evg-shadow" />

src/docs/foundations/tokens/Elevation.mdx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/blocks';
-import Tokens from './blocks/Tokens/Tokens';
+import { Tokens } from '@etchteam/storybook-addon-design-token-tables';
 
 <Meta title="Foundations/Tokens/Font" />
 
@@ -13,12 +13,12 @@ styles and maintaining typographic rhythm throughout the interface.
 
 ## Family
 
-<Tokens collection="font-family" />
+<Tokens collection="evg-font-family" />
 
 ## Size
 
-<Tokens collection="font-size" />
+<Tokens collection="evg-font-size" />
 
 ## Weight
 
-<Tokens collection="font-weight" />
+<Tokens collection="evg-font-weight" />

src/docs/foundations/tokens/Font.mdx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/blocks';
-import Tokens from './blocks/Tokens/Tokens';
+import { Tokens } from '@etchteam/storybook-addon-design-token-tables';
 
 <Meta title="Foundations/Tokens/Input" />
 
@@ -10,4 +10,4 @@ import Tokens from './blocks/Tokens/Tokens';
 Input tokens define consistent styling for inputs, selects, textareas, and other
 form controls, to ensure that all form interactions are consistent.
 
-<Tokens collection="input" />
+<Tokens collection="evg-input" />

src/docs/foundations/tokens/Input.mdx

@@ -1,5 +1,5 @@
 import { Meta } from '@storybook/blocks';
-import Tokens from './blocks/Tokens/Tokens';
+import { Tokens } from '@etchteam/storybook-addon-design-token-tables';
 
 <Meta title="Foundations/Tokens/Radius" />
 
@@ -12,4 +12,4 @@ The radius scale provides consistent corner treatments from sharp (0px) to fully
 helping to establish the overall aesthetic of the interface and create visual harmony
 between components.
 
-<Tokens collection="radius" />
+<Tokens collection="evg-radius" />

src/docs/foundations/tokens/Radius.mdx

@@ -1,5 +1,5 @@
 import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
-import Tokens from './blocks/Tokens/Tokens';
+import { Tokens } from '@etchteam/storybook-addon-design-token-tables';
 
 <Meta title="Foundations/Tokens/Sentiment" />
 
@@ -12,4 +12,4 @@ These colour tokens are designed with appropriate accessible contrast variations
 backgrounds, and borders. This streamlined approach creates clear visual signalling for
 users across all interface elements.
 
-<Tokens collection="sentiment" />
+<Tokens collection="evg-sentiment" />