@navinc/base-react-components/src/button.story.js

Nav's Pattern Library

import React from 'react'
import { Button } from './button.js'
import { ButtonAction } from './button-action.tsx'
import readme from './button.readme.md'
import { iconsMap } from './icons/index.js'

export default {
  title: 'Navigation/Button',
  component: Button,
  parameters: {
    readme: { content: readme },
  },
}

export const Basic = (args) => <Button {...args} />

Basic.argTypes = {
  size: {
    type: 'select',
    options: ['small', 'medium', 'mediumFull', 'large', 'largeFull', 'extraLarge', 'cardButton'],
  },
  iconPosition: {
    type: 'select',
    options: [null, 'left', 'right'],
  },
  iconFilename: {
    type: 'select',
    options: [null, ...Object.keys(iconsMap)],
  },
  variation: {
    type: 'select',
    options: [
      'main',
      'outline',
      'shade',
      'white',
      'tan',
      'destructive',
      'accent',
      'buttonLink',
      'buttonLinkIcon',
      'noOutline',
      'whiteOutline',
      'neutral',
    ],
  },
}
Basic.args = {
  asAnchor: false,
  href: '',
  variation: 'main',
  size: '',
  iconFilename: null,
  iconPosition: null,
  disabled: false,
  isLoading: false,
  children: 'Click me sista!',
}

export const Action = (args) => <ButtonAction {...args} />

Action.argTypes = {
  position: {
    type: 'select',
    options: ['collapsed', 'expanded', 'navigate'],
  },
  size: {
    type: 'select',
    options: ['small', 'medium', 'large', 'extraLarge'],
  },
}
Action.args = {
  size: '',
  position: 'collapsed',
  children: 'Click me sista!',
}