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

Nav's Pattern Library

import React from 'react'
import { useArgs } from '@storybook/addons'
import Select from './select.js'
import readme from './select.readme.md'

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

const controlOptions = [
  {
    value: 'apple',
    label: 'Apple',
  },
  {
    value: 'banana',
    label: 'Banana',
  },
  {
    value: 'cantaloupe',
    label: 'Cantaloupe',
  },
  {
    value: 'dragon-fruit',
    label: 'Dragon Fruit',
  },
]

export const Basic = ({ onChange, ...args }) => {
  const [_, updateArgs] = useArgs()

  const handleChange = (e) => {
    updateArgs({ value: e.target.value })
    onChange(e)
  }

  return <Select {...args} onChange={handleChange} />
}

Basic.argTypes = {
  onChange: { action: true },
}

Basic.args = {
  lede: 'Select lede',
  label: 'Choose a fruit',
  required: false,
  hasSpaceForErrors: false,
  isInvalid: false,
  errors: [],
  value: controlOptions[0].value,
  options: controlOptions,
}