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

Nav's Pattern Library

import React from 'react'
import { MemoryRouter } from 'react-router-dom'
import { Banner } from './banner.js'
import readme from './banner.readme.md'

window.process = window.process || {}
window.process.env = window.process.env || {}
window.process.env.CLIENT_CDN_BASE_URL = 'https://dxkdvuv3hanyu.cloudfront.net'

export default {
  title: 'General/Banner',
  component: Banner,
  parameters: {
    info: { text: readme },
  },
}

export const Basic = (args) => {
  return (
    <MemoryRouter>
      <Banner {...args} />
    </MemoryRouter>
  )
}

Basic.argTypes = {
  type: {
    control: { type: 'select' },
    options: ['missingInfoAction', 'improveAction', 'positiveAction', 'neutralAction', 'warning', 'error'],
  },
}

Basic.args = {
  type: 'neutralAction',
  icon: '',
  actionIcon: '',
  title: 'This is a banner',
  copy: 'Do as the banner says or perish',
  action: 'yourFunction()',
  actionHref: '/link',
  actionLabel: 'Omit this to show the chevron on the banner',
  onDismiss: 'yourFunction()',
  shouldHideBorder: false,
  CDNIllustrationIcon: '',
  children: 'Optional Children Live Here!',
}