@navinc/base-react-components/src/toast-hook.story.js

Nav's Pattern Library

import React from 'react'
import styled from 'styled-components'
import { useToast, Toast, ToastProvider } from './toast-hook.js'

const Wrapper = styled.div`
  width: 100%;
`

const Demo = ({ type, title, copy, isDismissible }) => {
  const { showMessage } = useToast()

  const message = {
    type,
    title,
    copy,
    isDismissible,
  }

  return (
    <Wrapper>
      <Toast />
      <button
        onClick={() => {
          showMessage(message)
        }}
      >
        Click Me
      </button>
    </Wrapper>
  )
}

export default {
  title: 'Hooks/useToast',
  component: Toast,
}
const defaultTypes = {
  success: 'success',
  error: 'error',
  neutralAction: 'neutralAction',
}

export const Basic = (args) => {
  return (
    <ToastProvider>
      <Demo {...args} />
    </ToastProvider>
  )
}

Basic.argTypes = {
  type: {
    control: { type: 'select' },
    options: defaultTypes,
  },
}

Basic.args = {
  type: 'neutralAction',
  title: 'title',
  copy: 'some copy',
  isDismissible: true,
}