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

Core set of Swrve UI Components

import React from 'react'
import FormGroup from './FormGroup'
import Input from '../input/input'

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

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

export default {
  title: 'Core/FormGroup',
  decorators: [WrapperDecorator],
  component: FormGroup,
  args: { label: 'I am some label text' },
  argTypes: {
    label: {
      name: 'Label Text',
      control: 'text'
    },
    className: {
      control: 'text'
    }
  }
}

export const AFormGroupComponent = args => (
  <div className="w-64">
    <FormGroup label="I am some label text" {...args}>
      <Input value="I am some input text" onChange={() => {}} className="w-full" />
    </FormGroup>
  </div>
)

AFormGroupComponent.storyName = 'A FormGroup component.'
AFormGroupComponent.parameters = {
  docs: {
    description: {
      component: `This component can be used to add structure to forms. It groups a control
      component with a label, applying a set of appropriate styles.\n\nThe 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.`
    }
  }
}

export const TheValueOfTheLabelIsSetViaProps = args => (
  <div className="w-64">
    <FormGroup label="Favourite food:" {...args}>
      <Input value="Pineapple" onChange={() => {}} className="w-full" />
    </FormGroup>
  </div>
)

TheValueOfTheLabelIsSetViaProps.storyName = 'The value of the label is set via props.'
TheValueOfTheLabelIsSetViaProps.parameters = {
  docs: {
    description: {
      story: `The component accepts a "label" prop with a string value, which determines
      the text content of the rendered label element.`
    }
  }
}

export const TheLabelsForAttributeIsSetViaProps = args => (
  <div className="w-64">
    <FormGroup label="Destination:" labelFor="city" {...args}>
      <Input value="New York" id="city" name="city" onChange={() => {}} className="w-full" />
    </FormGroup>
  </div>
)

TheLabelsForAttributeIsSetViaProps.storyName = 'The label\'s "for" attribute is set via props.'
TheLabelsForAttributeIsSetViaProps.parameters = {
  docs: {
    description: {
      story: `The component accepts a "labelFor" prop with a string value, which
      determines the "for" attribute of the rendered label element.\n\nThe "for" attribute explicitly associates the label with a control element.`
    }
  }
}

export const CustomCssClassesCanBePassedViaProps = args => (
  <div className="w-64">
    <FormGroup label="Planet:" className="border border-radicalRed-100" {...args}>
      <Input value="Jupiter" className="w-full" onChange={() => {}} />
    </FormGroup>
  </div>
)

CustomCssClassesCanBePassedViaProps.storyName = 'Custom CSS classes can be passed via props.'
CustomCssClassesCanBePassedViaProps.parameters = {
  docs: {
    description: {
      story: `The component accepts a "className" prop, which allows classes to be passed
      to the component and composed alongside default styling.`
    }
  }
}