import * as React from 'react';
import Token from '.';
import { Stack } from '../Layout/index';

export default {
  title: 'Components|Token',
  component: Token,
};

export const index = () => (
  <Stack>
    <Token>Default</Token>
    <Token color="Red" backgroundColor="Dark Neutral 1">
      Custom colours
    </Token>
    <Token backgroundColor="transparent" borderColor="Red" color="Orange">
      Border token regular
    </Token>
    <Token size="narrow" backgroundColor="Light Green 3" color="Green">
      Narrow token
    </Token>
    <Token size="narrow" borderColor="Blue" backgroundColor="Light Blue 3" color="Blue">
      Narrow bordered token
    </Token>
  </Stack>
);