@navinc/base-react-components/src/_deprecated/flex-container/story.js

Nav's Pattern Library

import React from 'react'

import { storiesOf } from '@storybook/react'
import { text, select } from '@storybook/addon-knobs'

import FlexContainer from './'
import readme from './readme.md'

storiesOf('__ | Deprecated', module).add(
  'FlexContainer',
  () => (
    <FlexContainer
      flex={text('flex', '')}
      flexFlow={select(
        'flexFlow',
        {
          'row wrap': 'row wrap',
          'row nowrap': 'row nowrap',
          'column nowrap': 'column nowrap',
          '': '',
        },
        ''
      )}
      alignContent={select(
        'alignContent',
        {
          center: 'center',
          'flex-start': 'flex-start',
          'flex-end': 'flex-end',
          'space-between': 'space-between',
          'space-around': 'space-around',
          stretch: 'stretch',
          '': '',
        },
        ''
      )}
      alignItems={select(
        'alignItems',
        {
          center: 'center',
          'flex-start': 'flex-start',
          'flex-end': 'flex-end',
          stretch: 'stretch',
          '': '',
        },
        ''
      )}
      justifyContent={select(
        'justifyContent',
        {
          center: 'center',
          'flex-start': 'flex-start',
          'flex-end': 'flex-end',
          'space-between': 'space-between',
          'space-around': 'space-around',
          '': '',
        },
        ''
      )}
    >
      <h1>I am inside a flex container now.</h1>
    </FlexContainer>
  ),
  {
    info: { text: readme },
  }
)