@navinc/base-react-components/src/cc-input.story.js

Nav's Pattern Library

import styled from 'styled-components'
import { CCInput } from './cc-input.js'
import readme from './cc-input.readme.md'
import { StandardCard } from './standard-card.js'

const CreditCardInput = styled(CCInput)`
  width: 100%;
`

export default {
  title: 'Form Elements/CCInput',
  component: CreditCardInput,
  parameters: {
    readme: { content: readme },
  },
}

export const Basic = (args) => {
  return (
    <StandardCard>
      <CreditCardInput onBlur={(event) => console.log(event)} {...args} />
    </StandardCard>
  )
}

Basic.args = {
  lede: 'Input lede',
  label: 'Input some text',
  type: '',
  value: 'I am an input component',
  placeholder: 'placeholder',
  required: false,
  hasSpaceForErrors: true,
  isInvalid: false,
  errors: [],
  onChange: 'yourFunction()',
  onBlur: 'blurFunction()',
  createTokenRef: 'function()',
}