TokensBlock.stories.mdx

import {Canvas, Meta, Story, ArgsTable} from '@storybook/addon-docs'; import ofDesignTokens from '@open-formulieren/design-tokens/dist/tokens.js';

import TokensBlock from './TokensBlock';

<Meta title="Public API/TokensBlock" component={TokensBlock} decorators={[ Story => ( <div style={{maxWidth: '600px', margin: 'auto'}}> ), ]} parameters={{ docs: { source: { type: 'dynamic', excludeDecorators: true, }, }, }} />

Tokens block

Displays a context header with the relevant tokens contained inside.

export const Template = ({path, tokens}) => ;

export const colorTokens = Object.values(ofDesignTokens.of.color).filter( potentialToken => 'value' in potentialToken );

{Template.bind({})}