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

Nav's Pattern Library

import React from 'react'
import withPropsCombinations from 'react-storybook-addon-props-combinations'
import { MemoryRouter } from 'react-router-dom'
import Button from './button'
import readme from './button.readme.md'

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

export const Basic = (args) => (
  <MemoryRouter initialEntries={['/']}>
    <Button {...args} />
  </MemoryRouter>
)

Basic.argTypes = {
  size: {
    type: 'select',
    options: ['small', 'large', 'extraLarge'],
  },
  variation: {
    type: 'select',
    options: ['outline', 'noOutline', ''],
  },
}
Basic.args = {
  asAnchor: false,
  href: '',
  variation: '',
  size: '',
  disabled: false,
  isLoading: false,
  trackingContext: {
    context: 'link',
    category: 'link',
    type: 'interaction_link',
  },
  children: 'Click me sista!',
}

export const Variations = withPropsCombinations(
  (props) => (
    <MemoryRouter initialEntries={['/']}>
      <Button {...props} />
    </MemoryRouter>
  ),
  {
    asAnchor: [false, true],
    href: [null, 'https://www.youtube.com/watch?v=xfr64zoBTAQ'],
    variation: ['', 'outline', 'noOutline'],
    size: ['', 'small', 'large', 'extraLarge'],
    disabled: [false, true],
    children: ['Test'],
  }
)

Variations.parameters = {
  info: { disable: true },
}