@navinc/base-react-components/src/form-elements/phone-number-input.story.js

Nav's Pattern Library

import React from 'react'
import PhoneNumberInput from './phone-number-input.js'
import withPropsCombinations from 'react-storybook-addon-props-combinations'

import readme from './phone-number-input.readme.md'
import { Formik } from 'formik'

export default {
  title: 'Form Elements/PhoneNumberInput',
  component: PhoneNumberInput,
  parameters: {
    info: { text: readme },
  },
}

const Template = (args) => (
  <Formik initialValues={{ phone: '+12224445555' }}>
    <PhoneNumberInput {...args} />
  </Formik>
)

export const Basic = Template.bind({})

Basic.args = {
  label: 'Phone Number',
  name: 'phone',
  isRequired: true,
}

export const Variations = withPropsCombinations(Template, {
  name: ['phone'],
  label: ['Phone Number'],
  isRequired: [true, false],
})

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