@swrve/core/src/option-group/option-group.stories.js

Core set of Swrve UI Components

import React from 'react'
import OptionGroup from './option-group'
import { Button } from '../index'
import IconButton from '../icon-button/icon-button'

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

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

export default {
  title: 'Core/OptionGroup',
  decorators: [WrapperDecorator],
  component: OptionGroup
}

export const AComponentForGroupingOptionButtons = args => {
  return (
    <OptionGroup>
      <IconButton
        size="large"
        iconName="reports"
        label="I am a label"
        onClick={() => {}}
        {...args}
      />
      <IconButton
        size="large"
        iconName="iam"
        label="I am a label"
        selected={true}
        onClick={() => {}}
        {...args}
      />
      <IconButton size="large" iconName="push" label="I am a label" onClick={() => {}} {...args} />
    </OptionGroup>
  )
}

AComponentForGroupingOptionButtons.storyName = 'A component for grouping option buttons.'
AComponentForGroupingOptionButtons.parameters = {
  docs: {
    description: {
      component: `This component takes its children and arranges them in a rounded-rectangular
      shape.\n\nIt's intended for use with button components (like <code>Button</code> and 
      <code>IconButton</code>
      ).\n\nInternally, it maps its children and clones each child, in order to inject a
      className prop with a dynamic value, for the appropriate application of border and
      border-radius styles.\n\nThe example below features a group of large <IconButton />{' '}
      components.`
    }
  }
}

export const ExampleOfUseWithSmallIconButtons = args => {
  const labelIsVisibleProp = true

  return (
    <OptionGroup>
      <IconButton
        labelIsVisible={labelIsVisibleProp}
        size="small"
        iconName="iam"
        label="I am a label"
        selected={false}
        onClick={() => {}}
        {...args}
      />
      <IconButton
        onClick={() => {}}
        labelIsVisible={labelIsVisibleProp}
        size="small"
        iconName="push"
        label="I am a label"
        {...args}
      />
    </OptionGroup>
  )
}

ExampleOfUseWithSmallIconButtons.storyName = 'Example of use with small icon buttons.'
ExampleOfUseWithSmallIconButtons.parameters = {
  docs: {
    description: {
      story: `The component will group a set of small <code>IconButton</code> components appropriately,
      both when the button label is and is not visible.`
    }
  }
}

export const ExampleOfUseWithRegularButtons = args => {
  return (
    <OptionGroup>
      <Button theme="neutral-outline" onClick={() => null} {...args}>
        Button
      </Button>
      <Button theme="neutral-outline" onClick={() => null} {...args}>
        Button
      </Button>
      <Button theme="neutral-outline" onClick={() => null} {...args}>
        Button
      </Button>
      <Button theme="neutral-outline" onClick={() => null} selected={true} {...args}>
        Button
      </Button>
    </OptionGroup>
  )
}

ExampleOfUseWithRegularButtons.storyName = 'Example of use with regular buttons.'
ExampleOfUseWithRegularButtons.parameters = {
  docs: {
    description: {
      story: `The component will group a set of <code>Button</code> components.`
    }
  }
}

export const ExampleOfUseWithButtonsWithOptionsSetToFullWidth = args => {
  return (
    <div className="w-64">
      <OptionGroup className="flex">
        <Button className="flex-grow" theme="neutral-outline" onClick={() => null} {...args}>
          Button
        </Button>
        <Button className="flex-grow" theme="neutral-outline" onClick={() => null} {...args}>
          Button
        </Button>
      </OptionGroup>
    </div>
  )
}

ExampleOfUseWithButtonsWithOptionsSetToFullWidth.storyName =
  'Example of use with buttons with options set to full width'
ExampleOfUseWithButtonsWithOptionsSetToFullWidth.parameters = {
  docs: {
    description: {
      story: `The component will group a set of <code>Button</code> components.`
    }
  }
}