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

Nav's Pattern Library

import React from 'react'
import Copy from './copy.js'
import readme from './copy.readme.md'

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

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

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

Standard.args = {
  bold: false,
  light: false,
  boldType: 'regular',
  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'