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

Nav's Pattern Library

import React from 'react'
import withPropsCombinations from 'react-storybook-addon-props-combinations'
import Select from './select.js'
import readme from './select.readme.md'

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

export const Basic = (args) => <Select {...args} />

Basic.argTypes = {
  options: {
    control: { type: 'select' },
    options: ['Apple', 'Banana', 'Cantaloupe', 'Dragon Fruit'],
  },
}

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

export const Variations = withPropsCombinations(Select, {
  lede: ['Input lede'],
  options: [
    ['Apple', 'Banana', 'Cantaloupe', 'Dragon Fruit'],
    [
      { label: 'Gala', value: 'apple_1' },
      { label: 'Red Delicious', value: 'apple_2' },
      { label: 'Cavendish Banana', value: 'banana_1' },
      { label: 'Red Banana', value: 'banana_2' },
    ],
  ],
  label: ['choose a fruit'],
  value: ['Banana'],
  hasSpaceForErrors: [false, true],
  isInvalid: [false, true],
  required: [false, true],
  errors: [[], ['An error'], ['One error', 'Two Errors']],
})

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