@hyphen/hyphen-components 2.25.2 → 3.0.0

package/src/components/Drawer/Drawer.stories.tsx

@@ -1,6 +1,15 @@
-import { Drawer, DrawerPlacementType } from './Drawer';
+import {
+  Drawer,
+  DrawerCloseButton,
+  DrawerContent,
+  DrawerHeader,
+  DrawerPlacementType,
+  DrawerProvider,
+  DrawerTitle,
+  DrawerTrigger,
+} from './Drawer';
 import type { Meta, StoryObj } from '@storybook/react';
-import React, { MutableRefObject, useEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { useOpenClose } from '../../hooks';
 import { Button } from '../Button/Button';
 import { Box } from '../Box/Box';
@@ -16,7 +25,50 @@ const meta: Meta<typeof Drawer> = {
 export default meta;
 type Story = StoryObj<typeof Drawer>;
 
-export const BasicUsage = () => {
+const drawerContent: JSX.Element[] = [];
+for (let i = 0; i < 50; i++) {
+  drawerContent.push(<Box key={i}>Drawer content&hellip;</Box>);
+}
+
+export const UncontrolledWithProvider = () => {
+  const ref = useRef(null);
+
+  return (
+    <div id="drawerContainer" ref={ref} style={{ height: '240px' }}>
+      <DrawerProvider defaultIsOpen={false}>
+        <DrawerTrigger asChild>
+          <Button variant="primary">Toggle Uncontrolled Drawer</Button>
+        </DrawerTrigger>
+        <Drawer ariaLabel="drawer component example" containerRef={ref}>
+          <DrawerHeader>
+            <DrawerTitle>Drawer Title</DrawerTitle>
+            <DrawerCloseButton />
+          </DrawerHeader>
+          <DrawerContent>{drawerContent}</DrawerContent>
+        </Drawer>
+      </DrawerProvider>
+    </div>
+  );
+};
+
+export const OpenUncontrolledWithProvider: Story = {
+  play: async ({ canvasElement, mount }) => {
+    await mount(<UncontrolledWithProvider />);
+    const canvas = within(canvasElement);
+
+    await userEvent.click(canvas.getByText('Toggle Uncontrolled Drawer'));
+
+    await expect(canvas.getByText('Drawer Title')).toBeInTheDocument();
+
+    await userEvent.click(canvas.getByLabelText('close'));
+
+    await expect(canvas.queryByText('Drawer Title')).toBeNull();
+
+    await userEvent.click(canvas.getByText('Toggle Uncontrolled Drawer'));
+  },
+};
+
+export const ControlledWithoutProvider = () => {
   const {
     isOpen: isDrawerOpen,
     handleOpen: openDrawer,
@@ -27,46 +79,89 @@ export const BasicUsage = () => {
 
   return (
     <div id="drawerContainer" ref={ref} style={{ height: '240px' }}>
-      <Button variant="primary" onClick={openDrawer}>
-        Open Drawer
-      </Button>
+      <DrawerTrigger asChild onClick={openDrawer}>
+        <Button variant="primary">Open Drawer</Button>
+      </DrawerTrigger>
       <Drawer
         isOpen={isDrawerOpen}
-        title="Drawer Title"
-        onDismiss={closeDrawer}
         ariaLabel="drawer component example"
         containerRef={ref}
+        onDismiss={closeDrawer}
       >
-        <Box
-          padding={{ base: '0 2xl 2xl 2xl', tablet: '0 4xl 4xl 4xl' }}
-          display="block"
-          childGap="md"
-        >
-          <Box>Drawer content</Box>
-        </Box>
+        <DrawerHeader>
+          <DrawerTitle>Drawer Title</DrawerTitle>
+          <DrawerCloseButton onClose={closeDrawer} />
+        </DrawerHeader>
+        <DrawerContent>{drawerContent}</DrawerContent>
       </Drawer>
     </div>
   );
 };
 
-export const OpenDrawer: Story = {
+ControlledWithoutProvider.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+
+export const OpenControlledControlledWithoutProvider: Story = {
   play: async ({ canvasElement, mount }) => {
-    await mount(<BasicUsage />);
+    await mount(<ControlledWithoutProvider />);
     const canvas = within(canvasElement);
 
     await userEvent.click(canvas.getByText('Open Drawer'));
 
-    await expect(canvas.getByText('Drawer content')).toBeInTheDocument();
+    await expect(canvas.getByText('Drawer Title')).toBeInTheDocument();
+
+    await userEvent.click(canvas.getByLabelText('close'));
+
+    await expect(canvas.queryByText('Drawer Title')).toBeNull();
+
+    await userEvent.click(canvas.getByText('Open Drawer'));
+
+    await userEvent.click(
+      document.getElementsByClassName('ReactModal__Overlay')[0]
+    );
+
+    await expect(canvas.queryByText('Drawer Title')).toBeNull();
+
+    await userEvent.click(canvas.getByText('Open Drawer'));
   },
 };
 
-export const Placement = () => {
+export const DefaultIsOpen = () => {
   const {
     isOpen: isDrawerOpen,
     handleOpen: openDrawer,
     handleClose: closeDrawer,
   } = useOpenClose();
-  const [placement, setPlacement] = useState('right');
+
+  const ref = useRef(null);
+
+  return (
+    <div id="drawerContainer" ref={ref} style={{ height: '240px' }}>
+      <DrawerProvider defaultIsOpen>
+        <DrawerTrigger asChild onClick={openDrawer}>
+          <Button variant="primary">Open Drawer</Button>
+        </DrawerTrigger>
+        <Drawer
+          isOpen={isDrawerOpen}
+          ariaLabel="drawer component example"
+          containerRef={ref}
+          onDismiss={closeDrawer}
+        >
+          <DrawerHeader>
+            <DrawerTitle>Drawer Title</DrawerTitle>
+            <DrawerCloseButton onClose={closeDrawer} />
+          </DrawerHeader>
+          <DrawerContent>{drawerContent}</DrawerContent>
+        </Drawer>
+      </DrawerProvider>
+    </div>
+  );
+};
+
+export const Placement = () => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [placement, setPlacement] = useState('bottom');
   const placementOptions = [
     {
       id: 'top',
@@ -90,7 +185,11 @@ export const Placement = () => {
     },
   ];
   return (
-    <Box display="block" childGap="md">
+    <div
+      id="placementStory"
+      className="display-flex flex-direction-column align-items-flex-start g-lg"
+      ref={ref}
+    >
       <RadioGroup
         title="Placement"
         direction="row"
@@ -99,301 +198,150 @@ export const Placement = () => {
         value={placement}
         options={placementOptions}
       />
-      <Button variant="primary" onClick={openDrawer}>
-        Open Drawer
-      </Button>
-      <Drawer
-        title="test"
-        isOpen={isDrawerOpen}
-        onDismiss={closeDrawer}
-        placement={placement as DrawerPlacementType}
-        ariaLabel="drawer component example"
-      >
-        <Box
-          padding={{ base: '0 2xl 2xl 2xl', tablet: '0 4xl 4xl 4xl' }}
-          display="block"
-          childGap="md"
+      <DrawerProvider>
+        <DrawerTrigger asChild>
+          <Button variant="primary">Open Drawer</Button>
+        </DrawerTrigger>
+        <Drawer
+          placement={placement as DrawerPlacementType}
+          ariaLabel="drawer component example"
         >
-          <Box as="p">drawer content</Box>
-          <Box as="p">drawer content</Box>
-          <Box as="p">drawer content</Box>
-          <Box as="p">drawer content</Box>
-          <Box as="p">drawer content</Box>
-          <Box as="p">drawer content</Box>
-          <Box as="p">drawer content</Box>
-          <Box as="p">drawer content</Box>
-          <Box as="p">drawer content</Box>
-        </Box>
-      </Drawer>
-    </Box>
+          <DrawerHeader>
+            <DrawerTitle>{placement} placement</DrawerTitle>
+            <DrawerCloseButton />
+          </DrawerHeader>
+          <DrawerContent height="8xl">{drawerContent}</DrawerContent>
+        </Drawer>
+      </DrawerProvider>
+    </div>
   );
 };
 
-export const DrawerHeader = () => {
-  const {
-    isOpen: isDrawerOpen,
-    handleOpen: openDrawer,
-    handleClose: closeDrawer,
-  } = useOpenClose();
-  const drawerContent = [];
-  for (let i = 0; i < 50; i++) {
-    drawerContent.push(<Box key={i}>Drawer content&hellip;</Box>);
-  }
-  return (
-    <>
-      <Button variant="primary" onClick={openDrawer}>
-        Title and Close Button
-      </Button>
-      <Drawer
-        ariaLabel="drawer component example"
-        isOpen={isDrawerOpen}
-        onDismiss={closeDrawer}
-        title="Drawer Title"
-      >
-        <Box
-          padding={{ base: '0 2xl 2xl 2xl', tablet: '0 4xl 4xl 4xl' }}
-          display="block"
-          childGap="md"
-        >
-          {drawerContent}
-        </Box>
-      </Drawer>
-    </>
-  );
+Placement.parameters = {
+  chromatic: { disableSnapshot: true },
 };
 
-export const TitleAndCloseButton = () => {
-  const {
-    isOpen: isDrawerOpen,
-    handleOpen: openDrawer,
-    handleClose: closeDrawer,
-  } = useOpenClose();
-  const drawerContent = [];
-  for (let i = 0; i < 50; i++) {
-    drawerContent.push(<Box key={i}>Drawer content&hellip;</Box>);
-  }
-  return (
-    <>
-      <Button variant="primary" onClick={openDrawer}>
-        Title and Close Button
-      </Button>
-      <Drawer
-        ariaLabel="drawer component example"
-        isOpen={isDrawerOpen}
-        onDismiss={closeDrawer}
-        title="Drawer Title"
-      >
-        <Box
-          padding={{ base: '0 2xl 2xl 2xl', tablet: '0 4xl 4xl 4xl' }}
-          display="block"
-          childGap="md"
-        >
-          {drawerContent}
-        </Box>
-      </Drawer>
-    </>
-  );
-};
+export const OpenBottomDrawer: Story = {
+  play: async ({ canvasElement, mount }) => {
+    await mount(<Placement />);
+    const canvas = within(canvasElement);
 
-export const CloseButtonOnly = () => {
-  const {
-    isOpen: isDrawerOpen,
-    handleOpen: openDrawer,
-    handleClose: closeDrawer,
-  } = useOpenClose();
-  const drawerContent = [];
-  for (let i = 0; i < 50; i++) {
-    drawerContent.push(<Box key={i}>Drawer content&hellip;</Box>);
-  }
-  return (
-    <>
-      <Button variant="primary" onClick={openDrawer}>
-        Close Button Only
-      </Button>
-      <Drawer
-        ariaLabel="drawer component example"
-        isOpen={isDrawerOpen}
-        onDismiss={closeDrawer}
-        closeButton
-      >
-        <Box
-          padding={{ base: '0 2xl 2xl 2xl', tablet: '0 4xl 4xl 4xl' }}
-          display="block"
-          childGap="md"
-        >
-          {drawerContent}
-        </Box>
-      </Drawer>
-    </>
-  );
+    await userEvent.click(canvas.getByText('Open Drawer'));
+  },
 };
 
 export const Width = () => {
-  const {
-    isOpen: isDrawerOpen,
-    handleOpen: openDrawer,
-    handleClose: closeDrawer,
-  } = useOpenClose();
   const [width, setWidth] = React.useState('default');
   const handleClick = (newWidth: WidthSize) => {
     setWidth(newWidth);
-    openDrawer();
   };
   const widths = ['16rem', '400px', '100%'];
   return (
-    <>
-      <Box gap="sm" direction="row">
+    <DrawerProvider defaultIsOpen={false}>
+      <Box gap="md" direction="row">
         {widths.map((width: string) => (
-          <Button
-            variant="primary"
-            onClick={() => handleClick(width as WidthSize)}
-            key={width}
-          >
-            {`Open ${width} Drawer `}
-          </Button>
+          <DrawerTrigger asChild>
+            <Button
+              variant="primary"
+              onClick={() => handleClick(width as WidthSize)}
+              key={width}
+            >
+              {`Open ${width} Drawer `}
+            </Button>
+          </DrawerTrigger>
         ))}
       </Box>
-      <Drawer
-        width={width as WidthSize}
-        title={`${width} wide drawer`}
-        isOpen={isDrawerOpen}
-        onDismiss={closeDrawer}
-        closeButton
-        ariaLabel="drawer component example"
-      >
-        <Box
-          padding={{ base: '0 2xl 2xl 2xl', tablet: '0 4xl 4xl 4xl' }}
-          display="block"
-          childGap="md"
-        >
-          <Box>drawer content</Box>
-        </Box>
+      <Drawer width={width as WidthSize} ariaLabel="drawer component example">
+        <DrawerHeader>
+          <DrawerTitle>Drawer Title</DrawerTitle>
+          <DrawerCloseButton />
+        </DrawerHeader>
+        <DrawerContent>{drawerContent}</DrawerContent>
       </Drawer>
-    </>
+    </DrawerProvider>
   );
 };
 
-export const Height = () => {
-  const {
-    isOpen: isDrawerOpen,
-    handleOpen: openDrawer,
-    handleClose: closeDrawer,
-  } = useOpenClose();
-  return (
-    <>
-      <Button variant="primary" onClick={openDrawer}>
-        Open Drawer
-      </Button>
-      <Drawer
-        placement="top"
-        isOpen={isDrawerOpen}
-        onDismiss={closeDrawer}
-        closeButton
-        ariaLabel="drawer component example"
-      >
-        <Box padding="lg" height="4xl" display="block" childGap="md">
-          <Box>4xl Height</Box>
-        </Box>
-      </Drawer>
-    </>
-  );
+Width.parameters = {
+  chromatic: { disableSnapshot: true },
 };
 
 export const HiddenOverlay = () => {
-  const closeBtnRef = useRef<HTMLButtonElement>();
-  const returnFocusRef = useRef<HTMLButtonElement>();
-  const returnFocus = () => {
-    if (returnFocusRef && returnFocusRef.current) {
-      returnFocusRef.current.focus();
-    }
-  };
-  const {
-    isOpen: isDrawerOpen,
-    handleToggle: handleDrawerToggle,
-    handleClose: closeDrawer,
-  } = useOpenClose({ onClose: returnFocus });
-  useEffect(() => {
-    setTimeout(() => {
-      if (closeBtnRef && closeBtnRef.current) {
-        closeBtnRef.current.focus();
-      }
-    }, 100);
-  }, [isDrawerOpen]);
   return (
-    <>
-      <Button
-        variant="primary"
-        onClick={handleDrawerToggle}
-        ref={returnFocusRef as MutableRefObject<HTMLButtonElement>}
-      >
-        Toggle Drawer
-      </Button>
-      <Drawer
-        isOpen={isDrawerOpen}
-        onDismiss={closeDrawer}
-        ariaLabel="drawer component example"
-        hideOverlay
-      >
-        <Box
-          padding={{ base: '2xl', tablet: '4xl' }}
-          display="block"
-          childGap="md"
-        >
-          <Button
-            ref={closeBtnRef as MutableRefObject<HTMLButtonElement>}
-            onClick={closeDrawer}
-            variant="primary"
-          >
-            close
-          </Button>
-          <Box>drawer content</Box>
-        </Box>
+    <DrawerProvider defaultIsOpen={false}>
+      <DrawerTrigger asChild>
+        <Button variant="primary">Toggle Drawer</Button>
+      </DrawerTrigger>
+      <Drawer hideOverlay ariaLabel="drawer component example">
+        <DrawerHeader>
+          <DrawerTitle>Drawer Title</DrawerTitle>
+          <DrawerCloseButton />
+        </DrawerHeader>
+        <DrawerContent>{drawerContent}</DrawerContent>
       </Drawer>
-    </>
+    </DrawerProvider>
   );
 };
 
+HiddenOverlay.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+
+export const OpenHiddenOverlay: Story = {
+  play: async ({ canvasElement, mount }) => {
+    await mount(<HiddenOverlay />);
+    const canvas = within(canvasElement);
+
+    await userEvent.click(canvas.getByText('Toggle Drawer'));
+  },
+};
+
 export const InitialFocusRef = () => {
-  const {
-    isOpen: isDrawerOpen,
-    handleOpen: openDrawer,
-    handleClose: closeDrawer,
-  } = useOpenClose();
   const ref = useRef(null);
+  const containerRef = useRef(null);
   return (
-    <>
-      <Button variant="primary" onClick={openDrawer}>
-        Open Drawer
-      </Button>
-      <Drawer
-        isOpen={isDrawerOpen}
-        onDismiss={closeDrawer}
-        initialFocusRef={ref}
-        title="initialFocusRef"
-        ariaLabel="drawer component example"
-      >
-        <Box
-          padding={{ base: '0 2xl 2xl 2xl', tablet: '0 4xl 4xl 4xl' }}
-          display="block"
-          childGap="md"
+    <div ref={containerRef}>
+      <DrawerProvider defaultIsOpen={false}>
+        <DrawerTrigger asChild>
+          <Button variant="primary">Toggle Drawer</Button>
+        </DrawerTrigger>
+        <Drawer
+          initialFocusRef={ref}
+          containerRef={containerRef}
+          ariaLabel="drawer component example"
         >
-          <Box>drawer content</Box>
-          <Button variant="primary" ref={ref} onClick={closeDrawer}>
-            I receive focus
-          </Button>
-        </Box>
-      </Drawer>
-    </>
+          <DrawerHeader>
+            <DrawerTitle>Drawer Title</DrawerTitle>
+            <DrawerCloseButton />
+          </DrawerHeader>
+          <DrawerContent>
+            <DrawerTrigger asChild>
+              <Button variant="primary" ref={ref} data-testid="focus-button">
+                I receive focus
+              </Button>
+            </DrawerTrigger>
+          </DrawerContent>
+        </Drawer>
+      </DrawerProvider>
+    </div>
   );
 };
 
+InitialFocusRef.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+
+export const OpenInitialFocusRef: Story = {
+  play: async ({ canvasElement, mount }) => {
+    await mount(<InitialFocusRef />);
+    const canvas = within(canvasElement);
+
+    await userEvent.click(canvas.getByText('Toggle Drawer'));
+  },
+};
+
 export const ContainedDrawer = () => {
-  const containerRef = useRef<HTMLDivElement>();
-  const {
-    isOpen: isDrawerOpen,
-    handleOpen: openDrawer,
-    handleClose: closeDrawer,
-  } = useOpenClose();
+  const containerRef = useRef(null);
   return (
     <Box
       position="relative"
@@ -404,27 +352,38 @@ export const ContainedDrawer = () => {
       background="info"
       padding="lg"
       overflow="hidden"
+      borderWidth="sm"
     >
-      <Button variant="primary" onClick={openDrawer}>
-        Show Drawer
-      </Button>
-      <Drawer
-        isOpen={isDrawerOpen}
-        onDismiss={closeDrawer}
-        containerRef={containerRef as MutableRefObject<HTMLDivElement>}
-        dangerouslyBypassScrollLock
-        hideOverlay
-        title="containerRef"
-        ariaLabel="drawer component example"
-      >
-        <Box
-          padding={{ base: '0 2xl 2xl 2xl', tablet: '0 4xl 4xl 4xl' }}
-          as="p"
+      <DrawerProvider defaultIsOpen={false}>
+        <DrawerTrigger asChild>
+          <Button variant="primary">Toggle Drawer</Button>
+        </DrawerTrigger>
+        <Drawer
+          containerRef={containerRef}
+          ariaLabel="drawer component example"
         >
-          This drawer is rendered inside it&apos;s containing div, rather than
-          the document.body
-        </Box>
-      </Drawer>
+          <DrawerHeader>
+            <DrawerTitle>Drawer Title</DrawerTitle>
+            <DrawerCloseButton />
+          </DrawerHeader>
+          <DrawerContent>{drawerContent}</DrawerContent>
+        </Drawer>
+      </DrawerProvider>
     </Box>
   );
 };
+
+ContainedDrawer.parameters = {
+  chromatic: { disableSnapshot: true },
+};
+
+export const OpenContainedDrawer: Story = {
+  play: async ({ canvasElement, mount }) => {
+    await mount(<ContainedDrawer />);
+    const canvas = within(canvasElement);
+
+    await userEvent.click(canvas.getByText('Toggle Drawer'));
+
+    await expect(canvas.getByText('Drawer Title')).toBeInTheDocument();
+  },
+};