@navinc/base-react-components/src/copy.story.js

Nav's Pattern Library

import React from 'react'
import withPropsCombinations from 'react-storybook-addon-props-combinations'

import Copy from './copy'
import readme from './copy.readme.md'

export default {
  title: 'Typography/Copy',
  component: Copy,
  parameters: {
    info: readme,
  },
}

export const Standard = (args) => <Copy {...args} />

Standard.argTypes = {
  size: {
    type: 'select',
    options: ['md', 'sm', 'xs', 'xxs'],
  },
}

Standard.args = {
  bold: false,
  light: false,
  size: 'md',
  shouldScaleFont: false,
  children: 'I am a Copy component',
}

// Internally withPropsCombinations uses `pretty-format`
// with the ReactElement plugin, which does not recogize StyledComponents.
// As such, the source for a StyledComponent will show `UNDEFINED`
// instead of checking for `displayName`
const Kopy = (props) => <Copy {...props} />
Kopy.displayName = 'Copy'
export const Variations = withPropsCombinations(Kopy, {
  shouldScaleFont: [true, false],
  bold: [true, false],
  light: [true, false],
  size: ['', 'sm', 'xs'],
  children: ['Hello there, I hope you are having a grape day!'],
})

Variations.parameters = {
  info: { disable: true },
}