@swrve/core/src/chip/Chip.stories.js

Core set of Swrve UI Components

import React from 'react'
import { storiesOf } from '@storybook/react'
import Chip from './Chip'

import { withInfo } from '@storybook/addon-info'

const extendedPalette = [
  'dodgerBlue',
  'pictonBlue',
  'javaGreen',
  'limaGreen',
  'frenchRoseRed',
  'sunglowYellow',
  'electricViolet',
  'royalBlue',
  'lazyLavender',
  'orangePeel'
]
const stories = storiesOf('Core|Chip', module).addDecorator(withInfo())

stories
  .add('Basic Chip with callback alert on delete', () => {
    return (
      <Chip onDelete={() => alert('You clicked the delete')} className="mr-2">
        Chip Content
      </Chip>
    )
  })
  .add('Chip with custom theme', () => {
    return (
      <div>
        <Chip
          theme="primary"
          onDelete={() => alert('You clicked the primary delete')}
          className="mr-2"
        >
          Chip primary
        </Chip>
        <Chip onDelete={() => alert('You clicked the default delete')} className="mr-2">
          Chip Default
        </Chip>
        <Chip
          theme="warning"
          onDelete={() => alert('You clicked the warning delete')}
          className="mr-2"
        >
          Chip warning
        </Chip>
        <Chip
          theme="radicalRed"
          onDelete={() => alert('You clicked the error delete')}
          className="mr-2"
        >
          Chip error
        </Chip>
        {extendedPalette.map(color => (
          <Chip
            key={color}
            theme={color}
            onDelete={() => alert(`You clicked the ${color} delete`)}
            className="mr-2"
          >
            Chip {color}
          </Chip>
        ))}
      </div>
    )
  })
  .add('Chip with no delete icon', () => {
    return (
      <div>
        <Chip theme="primary" className="mr-2">
          Chip No Delete Primary
        </Chip>
        <Chip className="mr-2">Chip No Delete Default</Chip>
        <Chip theme="warning" className="mr-2">
          Chip No Delete Warning
        </Chip>
        <Chip theme="radicalRed" className="mr-2">
          Chip No Delete Error
        </Chip>
        {extendedPalette.map(color => (
          <Chip key={color} theme={color} className="mr-2">
            Chip {color}
          </Chip>
        ))}
      </div>
    )
  })