@swrve/core/src/form-group/FormGroup.stories.js

Core set of Swrve UI Components

import React from 'react'
import { storiesOf } from '@storybook/react'
import { withKnobs, text } from '@storybook/addon-knobs'
import FormGroup from './FormGroup'
import Input from '../input/input'
import { withInfo } from '@storybook/addon-info'
import { Icon } from '@swrve/icons'

const styles = {
  margin: '20px 50px 40px'
}

const WrapperDecorator = storyFn => <div style={styles}>{storyFn()}</div>

const stories = storiesOf('Core|FormGroup', module)
  .addDecorator(WrapperDecorator)
  .addDecorator(withKnobs)
  .addDecorator(withInfo)

stories.add(
  'A FormGroup component.',
  () => (
    <div className="w-64">
      <FormGroup label="I am some label text">
        <Input value="I am some input text" onChange={() => {}} className="w-full" />
      </FormGroup>
    </div>
  ),
  {
    info: `
    This component can be used to add structure to forms. It groups a control
    component with a label, applying a set of appropriate styles.

    The control component is passed as children to the <FormGroup> component.
    The value of the label is set via props. Additionally, there exists a set of
    configuration-based props, for setting the label's "for" attribute value,
    and for passing custom CSS classes.
    `
  }
)

stories.add(
  'The value of the label is set via props.',
  () => (
    <div className="w-64">
      <FormGroup label={text('label', 'Favourite food:')}>
        <Input value="Pineapple" onChange={() => {}} className="w-full" />
      </FormGroup>
    </div>
  ),
  {
    info: `
      The component accepts a "label" prop with a string value, which determines
      the text content of the rendered label element.
      `
  }
)

stories.add(
  'The label\'s "for" attribute is set via props.',
  () => (
    <div className="w-64">
      <FormGroup label="Destination:" labelFor={text('labelFor', 'city')}>
        <Input value="New York" id="city" name="city" onChange={() => {}} className="w-full" />
      </FormGroup>
    </div>
  ),
  {
    info: `
      The component accepts a "labelFor" prop with a string value, which
      determines the "for" attribute of the rendered label element.
  
      The "for" attribute explicitly associates the label with a control element.
      `
  }
)

stories.add(
  'Custom CSS classes can be passed via props.',
  () => (
    <div className="w-64">
      <FormGroup label="Planet:" className={text('className', 'border border-radicalRed-100')}>
        <Input value="Jupiter" className="w-full" onChange={() => {}} />
      </FormGroup>
    </div>
  ),
  {
    info: `
      The component accepts a "className" prop, which allows classes to be passed
      to the component and composed alongside default styling.
      `
  }
)