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

Core set of Swrve UI Components

import React from 'react'
import Chip from './Chip'

const extendedPalette = [
  'dodgerBlue',
  'pictonBlue',
  'javaGreen',
  'limaGreen',
  'frenchRoseRed',
  'sunglowYellow',
  'electricViolet',
  'royalBlue',
  'lazyLavender',
  'orangePeel',
  'cloudWhite'
]
export default {
  title: 'Core/Chip',
  component: Chip,
  args: { children: 'Chip Content', className: '' },
  argTypes: {
    children: {
      name: 'Chip content',
      control: 'text'
    },
    className: {
      control: 'text'
    }
  }
}
export const BasicChipWithCallbackAlertOnDelete = args => {
  return (
    <Chip onDelete={() => alert('You clicked the delete')} className="mr-2" {...args}>
      {args.children}
    </Chip>
  )
}

BasicChipWithCallbackAlertOnDelete.storyName = 'Basic Chip with callback alert on delete'

export const ChipWithCustomTheme = () => {
  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>
  )
}

ChipWithCustomTheme.storyName = 'Chip with custom theme'
ChipWithCustomTheme.parameters = { controls: { disabled: true } }

export const ChipWithNoDeleteIcon = () => {
  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>
  )
}

ChipWithNoDeleteIcon.storyName = 'Chip with no delete icon'
ChipWithNoDeleteIcon.parameters = { controls: { disabled: true } }