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

Core set of Swrve UI Components

import React from 'react'
import Button from './Button'

import { Icon } from '@swrve/icons'

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

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

const controlArgs = {
  args: {
    disabled: false,
    loading: false,
    selected: false,
    children: 'Button'
  },
  argTypes: {
    theme: {
      type: 'select',
      options: [
        'primary',
        'primary-light',
        'primary-outline',
        'secondary',
        'secondary-light',
        'secondary-outline',
        'neutral',
        'neutral-outline',
        'neutral-secondary',
        'selected-neutral-secondary',
        'destructive',
        'dashed'
      ]
    },
    loaderTheme: {
      control: 'text'
    },
    fontSizeClass: {
      control: 'text'
    },
    children: {
      control: 'text'
    },
    className: {
      control: 'text'
    },
    onClick: {
      control: { disable: true }
    },
    innerRef: {
      control: { disable: true }
    }
  }
}

export default {
  title: 'Core/Button',
  decorators: [WrapperDecorator],
  component: Button,
  ...controlArgs
}

export const AConfigurableButton = args => (
  <Button onClick={() => null} theme="primary" {...args}>
    {args.children}
  </Button>
)

AConfigurableButton.storyName = 'A configurable button.'
AConfigurableButton.parameters = {
  docs: {
    description: {
      story: `A standard button component which can have its appearance configured through
      the use of "theme" and "selected" props.\n\nIt can accept all common props associated with a button element, in addition
      to a custom className prop.`
    }
  }
}

export const TheButtonAcceptsAThemePropToDetermineWhichKindOfButtonIsRendered = () => (
  <div>
    <div className="mb-4">
      <Button onClick={() => null} theme="primary">
        primary
      </Button>
    </div>
    <div className="mb-4">
      <Button onClick={() => null} theme="primary-light">
        primary-light
      </Button>
    </div>
    <div className="mb-4">
      <Button onClick={() => null} theme="primary-outline">
        primary-outline
      </Button>
    </div>
    <div className="mb-4">
      <Button onClick={() => null} theme="secondary">
        secondary
      </Button>
    </div>
    <div className="mb-4">
      <Button onClick={() => null} theme="secondary-light">
        secondary-light
      </Button>
    </div>
    <div className="mb-4">
      <Button onClick={() => null} theme="secondary-outline">
        secondary-outline
      </Button>
    </div>
    <div className="mb-4">
      <Button onClick={() => null} theme="neutral">
        neutral
      </Button>
    </div>
    <div className="mb-4">
      <Button onClick={() => null} theme="neutral-outline">
        neutral-outline
      </Button>
    </div>
    <div className="mb-4">
      <Button onClick={() => null} theme="neutral-secondary">
        neutral-secondary
      </Button>
    </div>
    <div className="mb-4">
      <Button onClick={() => null} theme="selected-neutral-secondary">
        selected-neutral-secondary
      </Button>
    </div>
    <div className="mb-4">
      <Button onClick={() => null} theme="destructive">
        destructive
      </Button>
    </div>
    <div className="mb-4">
      <Button onClick={() => null} theme="dashed" className="w-32 h-10">
        <Icon name="plus" size="xsmall" />
      </Button>
    </div>
  </div>
)

TheButtonAcceptsAThemePropToDetermineWhichKindOfButtonIsRendered.storyName =
  'The button accepts a theme prop to determine which kind of button is rendered.'
TheButtonAcceptsAThemePropToDetermineWhichKindOfButtonIsRendered.parameters = {
  docs: {
    description: {
      story: `The "theme" prop determines the button's appearance. It accepts one of the following string values:\n___\n \n- "primary"\n- "primary-light"\n- "primary-outline"\n- "secondary"\n- "secondary-light"\n- "secondary-outline"\n- "neutral"\n- "neutral-outline"\n- "destructive"`
    }
  },
  controls: {
    disabled: true
  }
}

export const TheButtonCanBeSelected = args => (
  <Button onClick={() => null} theme="neutral-outline" selected={false} {...args}>
    I am a button.
  </Button>
)

TheButtonCanBeSelected.storyName = 'The button can be "selected".'
TheButtonCanBeSelected.parameters = {
  docs: {
    description: {
      story: `The button accepts a "selected" prop, with a value of true or false.\n\nIf the value is true, the button is styled according to the rules defined
      within the CSS class ".selected-$THEME-btn". Currently, only the "neutral-outline"
      theme has an associated "selected" CSS class.`
    }
  }
}

TheButtonCanBeSelected.args = {
  selected: true,
  theme: 'neutral-outline'
}

export const TheButtonIsCapableOfReceivingAWideRangeOfProps = args => (
  <Button
    onClick={() => null}
    theme="primary"
    type="button"
    disabled={false}
    loading={false}
    {...args}
  >
    Button
  </Button>
)

TheButtonIsCapableOfReceivingAWideRangeOfProps.storyName =
  'The button is capable of receiving a wide range of props.'
TheButtonIsCapableOfReceivingAWideRangeOfProps.controls = { ...controlArgs }

export const YouCanChangeTheDefaultFontSizeClass = args => (
  <Button
    onClick={() => null}
    fontSizeClass="text-xs"
    theme="primary"
    type="button"
    disabled={false}
    {...args}
  >
    Button
  </Button>
)

YouCanChangeTheDefaultFontSizeClass.storyName = 'You can change the default fontSizeClass'
YouCanChangeTheDefaultFontSizeClass.controls = { ...controlArgs }