@navinc/base-react-components/src/info-drawer.story.js

Nav's Pattern Library

import { useCallback } from 'react'
import styled from 'styled-components'
import { Button } from './button.js'
import { InfoDrawer, useInfoDrawer, InfoDrawerProvider } from './info-drawer.js'
import readme from './info-drawer.readme.md'

export default {
  title: 'General/InfoDrawer',
  component: InfoDrawer,
  parameters: {
    readme: { content: readme },
  },
  argTypes: {
    orientBottom: {
      control: {
        type: 'boolean',
        // options: ['right', 'bottom'],
      },
    },
    variation: {
      control: {
        type: 'select',
        options: ['default', 'blue'],
      },
    },
    heightVariation: {
      control: {
        type: 'select',
        options: ['dynamic', 'full'],
      },
    },
  },
  args: {
    orientBottom: false,
    variation: 'default',
    title: 'sample title',
    content: `Eiusmod nulla nulla quis esse. Sint veniam tempor ad ex ex do ad. Mollit proident aliqua labore duis excepteur ea nisi velit aliqua minim. Nulla occaecat est eu et ut irure elit adipisicing exercitation sint dolore. Sint tempor ullamco dolor incididunt proident in nostrud sunt dolor consectetur Lorem fugiat cupidatat labore. Non labore cillum est amet ipsum incididunt do tempor duis Lorem quis velit enim. Non aliquip sit in Lorem non deserunt in culpa eu consectetur est in eu proident.

Reprehenderit adipisicing aute pariatur exercitation velit. Tempor fugiat cillum ullamco laboris elit voluptate cupidatat velit. Nisi cupidatat nulla occaecat quis exercitation cillum incididunt.

Aute occaecat sunt tempor pariatur in fugiat adipisicing nostrud. Dolor magna amet deserunt amet incididunt in nisi eu cillum duis est fugiat in deserunt. Nostrud quis sit cupidatat cillum magna amet est. Consectetur consectetur anim anim eu deserunt duis aliquip sint tempor incididunt aliquip. Excepteur quis aliquip esse ad. Culpa eiusmod enim voluptate dolor exercitation officia irure qui do ut dolore cupidatat.

Consectetur dolore veniam excepteur aute aliqua elit incididunt proident ut amet eu. Amet do fugiat ea qui aliqua sit eiusmod irure elit et exercitation. Aliquip do adipisicing reprehenderit do tempor reprehenderit eiusmod in proident anim elit. Tempor cillum Lorem occaecat sunt.`,
  },
}

const StyledInfoDrawer = styled(InfoDrawer)`
  top: 0;
  right: 0;
`

const InfoDrawerStory = (args) => {
  const onClose = useCallback(() => console.log('closed the drawer.'), [])
  const { setInfoDrawer } = useInfoDrawer({ onClose })

  return (
    <>
      <StyledInfoDrawer variation={args.variation} heightVariation={args.heightVariation} />
      <Button
        onClick={() => {
          setInfoDrawer({
            orientBottom: args.orientBottom,
            isOpen: true,
            title: args.title,
            content: ({ setInfoDrawer: localSetInfoDrawer }) => {
              return (
                <div>
                  {args.content}
                  <hr />
                  <button
                    onClick={() => {
                      localSetInfoDrawer({ isOpen: false })
                    }}
                  >
                    Close Drawer Within Content
                  </button>
                </div>
              )
            },
          })
        }}
      >
        Open info drawer
      </Button>
    </>
  )
}

const CloseHandler = () => {
  const onClose = useCallback(() => console.log('just observing'), [])
  useInfoDrawer({ onClose })
  return null
}
export const Basic = (args) => (
  <InfoDrawerProvider>
    <InfoDrawerStory {...args} />
    <CloseHandler />
  </InfoDrawerProvider>
)