import {Canvas, Meta, Story, ArgsTable} from '@storybook/addon-docs'; import ofDesignTokens from '@open-formulieren/design-tokens/dist/tokens.js';
import TokenRow from './TokenRow';
export const Template = ({designToken, contained = false}) => (
The token row adapts its layout based on the container it is in - by default it's displayed in 'mobile'/'narrow' view, but on wider containers the content is displayed in a single row.
This relies on the @container queries, which are fairly new - not all browsers
support this yet!
Default
{Template.bind({})}Contained
{Template.bind({})}CSS color properties
{Template.bind({})}