@swrve/core/src/icon-button/icon-button.stories.js

Core set of Swrve UI Components

import React from 'react'
import { storiesOf } from '@storybook/react'
import { withKnobs, boolean, text } from '@storybook/addon-knobs'
import { withInfo } from '@storybook/addon-info'
import { IconButton, SquareIconButton } from './index'

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

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

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

stories.add(
  'A configurable icon-button.',
  () => (
    <div>
      <div className="mb-8">
        <h4 className="mb-4">Small:</h4>
        <IconButton onClick={() => null} label="I am a label!" iconName="reports" size="small" />
      </div>
      <div className="mb-8">
        <h4 className="mb-4">Medium:</h4>
        <IconButton onClick={() => null} label="I am a label!" iconName="reports" size="medium" />
      </div>
      <div>
        <h4 className="mb-4">Large:</h4>
        <IconButton onClick={() => null} label="I am a label!" iconName="reports" size="large" />
      </div>
    </div>
  ),
  {
    info: `
      An IconButton component which renders a button designed to display an icon
      alongside some label text.

      The component's size, appearance, icon, label-text and label-visibility
      can be configured with component-specific props.

      It can accept all common props associated with a button element, in
      addition to the component-specific props.
    `
  }
)

stories.add(
  'The size of the component can be set via props.',
  () => (
    <IconButton
      onClick={() => null}
      label="I am a label!"
      iconName="reports"
      size={text('size', 'large')}
    />
  ),
  {
    info: `The "size" prop determines the size and structure of the IconButton It can have a value of "small" or "large".`
  }
)

stories.add(
  "The component's icon can be set via props.",
  () => (
    <div>
      <IconButton
        onClick={() => null}
        label="I am a label!"
        iconName={text('iconName', 'reports')}
        size="small"
      />
      <hr />
      <IconButton
        onClick={() => null}
        label="I am a label!"
        iconName={text('iconName', 'reports')}
        size="large"
      />
    </div>
  ),
  {
    info: `
      The "iconName" prop determines which icon will be rendered by the
      component.
      Some valid icon names: "reports", "iam", "manage", "push".
    `
  }
)

stories.add(
  "The component's label can be set via props.",
  () => (
    <div>
      <IconButton
        onClick={() => null}
        label={text('label', 'I am a label!')}
        iconName="reports"
        size="small"
      />
      <hr />
      <IconButton
        onClick={() => null}
        label={text('label', 'I am a label!')}
        iconName="reports"
        size="large"
      />
    </div>
  ),
  {
    info: `
      The "label" prop determines which text which will be rendered by the
      component alongside the icon.
    `
  }
)

stories.add(
  "The visiblity of the component's label can be set via props.",
  () => (
    <div>
      <IconButton
        onClick={() => null}
        label="I am a label!"
        labelIsVisible={boolean('labelIsVisible', false)}
        iconName="reports"
        size="small"
      />
      <hr />
      <IconButton
        onClick={() => null}
        label="I am a label!"
        labelIsVisible={boolean('labelIsVisible', false)}
        iconName="reports"
        size="large"
      />
    </div>
  ),
  {
    info: `The "labelIsVisible" prop determines whether the label-text will be
   rendered by the component alongside the icon.
  `
  }
)

stories.add(
  'The component can be toggled into a "selected" state via props.',
  () => (
    <div>
      <IconButton
        onClick={() => null}
        label="I am a label!"
        iconName="reports"
        size="small"
        selected={boolean('selected', true)}
      />
      <hr />
      <IconButton
        onClick={() => null}
        label="I am a label!"
        iconName="reports"
        size="large"
        selected={boolean('selected', true)}
      />
    </div>
  ),
  {
    info: `
      The "selected" prop can have a value of true or false, and determines
      aspects of the IconButton's appearance when true, indicating a selected
      state.
    `
  }
)

stories.add(
  'The component is capable of receiving a wide range of generic props.',
  () => (
    <div>
      <IconButton
        onClick={() => null}
        type={text('type', 'button')}
        disabled={boolean('disabled', false)}
        iconName="reports"
        label="I am a label!"
        size="small"
      />
      <hr />
      <IconButton
        onClick={() => null}
        type={text('type', 'button')}
        disabled={boolean('disabled', false)}
        iconName="reports"
        label="I am a label!"
        size="large"
      />
    </div>
  ),
  {
    info: `
    Any props not explicitly defined within the API are passed through and
    spread over the button element rendered by the IconButton component. This
    allows for the use of common button-related props, like "type", or
    "disabled".
  `
  }
)

stories.add(
  'A square icon button - clean with a simple hover state default colours',
  () => (
    <div className="p-8">
      <SquareIconButton
        iconName="reports"
        disabled={boolean('disabled', false)}
        selected={boolean('Selected', false)}
      />
    </div>
  ),
  {
    info: `This is a square icon button, with default colours. 
    The background is only visible in its hover state`
  }
)

stories.add(
  'A square icon button - with icon and background colours set by props',
  () => (
    <div className="p-8">
      <SquareIconButton
        iconName="edit"
        bgColor="bg-porcelain"
        iconColor="text-jungleGrey"
        disabled={boolean('disabled', false)}
        selected={boolean('Selected', false)}
      />
    </div>
  ),
  { info: `This is a square icon button, the background and icon colours can be set by props` }
)