Prism Docs

import { Button, Drawer } from '@mylighthouse/prism-react';
import { useState } from 'react';

export default function DrawerDefault(): React.JSX.Element {
  const [open, setOpen] = useState(true);

  return (
    <Drawer.Root style={{ height: '400px' }}>
      <Drawer.Content
        style={{
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <Button
          aria-controls="drawer-default"
          aria-expanded={open}
          buttonType="intelligence"
          onClick={() => setOpen((value) => !value)}
        >
          Toggle drawer
        </Button>
      </Drawer.Content>
      <Drawer.Panel
        aria-labelledby="drawer-default-title"
        id="drawer-default"
        open={open}
      >
        <Drawer.Header>
          <Drawer.Header.Title id="drawer-default-title">
            Drawer
          </Drawer.Header.Title>
          <Button
            aria-label="Close drawer"
            buttonType="ghost"
            icon="cross"
            onClick={() => setOpen(false)}
          />
        </Drawer.Header>
        <Drawer.Body>
          <p className="text-300--regular">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Consequuntur dignissimos voluptate accusantium beatae aspernatur
            dicta asperiores maiores facilis.
          </p>
        </Drawer.Body>
        <Drawer.Footer>
          <Button buttonType="secondary" onClick={() => setOpen(false)}>
            Learn more
          </Button>
          <Button onClick={() => setOpen(false)}>Got it</Button>
        </Drawer.Footer>
      </Drawer.Panel>
    </Drawer.Root>
  );
}

import { Button, Drawer } from '@mylighthouse/prism-react';
import { useState } from 'react';

export default function DrawerWithTrigger(): React.JSX.Element {
  const [open, setOpen] = useState(false);

  return (
    <Drawer.Root style={{ height: '400px' }}>
      <Drawer.Content className="p-400">
        <Button
          aria-controls="drawer-with-trigger"
          aria-expanded={open}
          aria-label="Open drawer"
          buttonType="intelligence"
          icon="artificial-intelligence"
          onClick={() => setOpen((value) => !value)}
          style={{
            borderRadius:
              'var(--prism-border-radius-100) 0 0 var(--prism-border-radius-100)',
            height: '60px',
            position: 'absolute',
            right: 0,
            top: '60px',
            width: '60px',
          }}
        />
      </Drawer.Content>
      <Drawer.Panel
        aria-labelledby="drawer-with-trigger-title"
        id="drawer-with-trigger"
        open={open}
      >
        <Drawer.Header>
          <Drawer.Header.Title id="drawer-with-trigger-title">
            Drawer
          </Drawer.Header.Title>
          <Button
            aria-label="Close drawer"
            buttonType="ghost"
            icon="cross"
            onClick={() => setOpen(false)}
          />
        </Drawer.Header>
        <Drawer.Body>
          <p className="text-300--regular">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Consequuntur dignissimos voluptate accusantium beatae aspernatur
            dicta asperiores maiores facilis.
          </p>
        </Drawer.Body>
        <Drawer.Footer>
          <Button buttonType="secondary" onClick={() => setOpen(false)}>
            Learn more
          </Button>
          <Button onClick={() => setOpen(false)}>Got it</Button>
        </Drawer.Footer>
      </Drawer.Panel>
    </Drawer.Root>
  );
}