feat: drawer (#1105)

* feat: add drawer size variant * chore: adjust button margin * chore: adjust button margin * chore: adjust button margin
ocean-ds · Jun 14, 2024 · 1c749e0 · 1c749e0
1 parent 2504cdd
commit 1c749e0
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 11 deletions.
diff --git a/packages/ocean-core/src/components/_drawer.scss b/packages/ocean-core/src/components/_drawer.scss
@@ -29,7 +29,14 @@
   top: 0;
   transition: all 335ms ease-out 0ms;
   visibility: hidden;
-  width: 378px;
+
+  &--small {
+    width: 378px;
+  }
+
+  &--large {
+    width: 476px;
+  }
 
   &--right {
     left: auto;
@@ -60,7 +67,7 @@
 
 .ods-drawer__content--header {
   display: flex;
-  height: 48px;
+  min-height: 48px;
   padding: 0 24px;
 
   &--left {
@@ -89,4 +96,8 @@
       background-color: $color-interface-light-pure;
     }
   }
+
+  @media (max-width: 767px) {
+    padding: 0 16px;
+  }
 }
diff --git a/packages/ocean-react/src/Drawer/Drawer.tsx b/packages/ocean-react/src/Drawer/Drawer.tsx
@@ -20,6 +20,7 @@ interface DrawerProps {
   iconAlignment?: 'right' | 'left';
   anchorEl?: RefObject<HTMLDivElement> | null;
   onMouseOutDrawer?: (event?: MouseEvent<HTMLDivElement>) => void;
+  size?: 'small' | 'large';
 }
 
 const Drawer = ({
@@ -32,9 +33,9 @@ const Drawer = ({
   iconAlignment = 'right',
   anchorEl,
   onMouseOutDrawer,
+  size = 'small',
 }: DrawerProps): React.ReactElement => {
   const drawerRef = useRef<HTMLDivElement>(null);
-
   const handleOverlayClose = (event: MouseEvent<HTMLDivElement>) => {
     if (event.target === event.currentTarget) {
       event.preventDefault();
@@ -48,11 +49,11 @@ const Drawer = ({
     const position = anchorEl.current.getBoundingClientRect();
 
     if (align === 'right') {
-      const size = window.innerWidth - position.left;
+      const positionSize = window.innerWidth - position.left;
 
       return {
-        width: `${size}px`,
-        right: `${size}px`,
+        width: `${positionSize}px`,
+        right: `${positionSize}px`,
         left: 'auto',
       };
     }
@@ -90,7 +91,8 @@ const Drawer = ({
         className={classNames(
           'ods-drawer',
           open && 'ods-drawer--open',
-          `ods-drawer--${align}`
+          `ods-drawer--${align}`,
+          `ods-drawer--${size}`
         )}
         onMouseLeave={onMouseOutDrawer}
       >

diff --git a/packages/ocean-react/src/Drawer/__tests__/Drawer.test.tsx b/packages/ocean-react/src/Drawer/__tests__/Drawer.test.tsx
@@ -25,7 +25,7 @@ test('renders drawer component properly', () => {
 
   expect(document.querySelector('.ods-drawer')).toMatchInlineSnapshot(`
     <div
-      class="ods-drawer ods-drawer--open ods-drawer--right"
+      class="ods-drawer ods-drawer--open ods-drawer--right ods-drawer--small"
     >
       <div
         class="ods-drawer__content--header ods-drawer__content--header--right"
@@ -55,7 +55,7 @@ test('renders drawer attached to div on right', () => {
 
   expect(document.querySelector('.ods-drawer')).toMatchInlineSnapshot(`
     <div
-      class="ods-drawer ods-drawer--open ods-drawer--right"
+      class="ods-drawer ods-drawer--open ods-drawer--right ods-drawer--small"
     >
       <div
         class="ods-drawer__content--header ods-drawer__content--header--right"
@@ -85,7 +85,67 @@ test('renders drawer attached to div on left', () => {
 
   expect(document.querySelector('.ods-drawer')).toMatchInlineSnapshot(`
     <div
-      class="ods-drawer ods-drawer--open ods-drawer--left"
+      class="ods-drawer ods-drawer--open ods-drawer--left ods-drawer--small"
+    >
+      <div
+        class="ods-drawer__content--header ods-drawer__content--header--right"
+      >
+        <button
+          class="ods-btn ods-btn--md ods-btn--primary"
+          type="button"
+        >
+          mock-x-outline-xvg
+        </button>
+      </div>
+      <p>
+        Drawer content!
+      </p>
+    </div>
+  `);
+});
+
+test('renders drawer small drawer', () => {
+  render(
+    <AttachedDrawer size="small">
+      <p>Drawer content!</p>
+    </AttachedDrawer>
+  );
+
+  fireEvent.click(screen.getByRole('button', { name: 'Open drawer' }));
+
+  expect(document.querySelector('.ods-drawer')).toMatchInlineSnapshot(`
+    <div
+      class="ods-drawer ods-drawer--open ods-drawer--right ods-drawer--small"
+    >
+      <div
+        class="ods-drawer__content--header ods-drawer__content--header--right"
+      >
+        <button
+          class="ods-btn ods-btn--md ods-btn--primary"
+          type="button"
+        >
+          mock-x-outline-xvg
+        </button>
+      </div>
+      <p>
+        Drawer content!
+      </p>
+    </div>
+  `);
+});
+
+test('renders drawer large drawer', () => {
+  render(
+    <AttachedDrawer size="large">
+      <p>Drawer content!</p>
+    </AttachedDrawer>
+  );
+
+  fireEvent.click(screen.getByRole('button', { name: 'Open drawer' }));
+
+  expect(document.querySelector('.ods-drawer')).toMatchInlineSnapshot(`
+    <div
+      class="ods-drawer ods-drawer--open ods-drawer--right ods-drawer--large"
     >
       <div
         class="ods-drawer__content--header ods-drawer__content--header--right"

diff --git a/packages/ocean-react/src/Drawer/examples/AttachedDrawer.tsx b/packages/ocean-react/src/Drawer/examples/AttachedDrawer.tsx
@@ -8,13 +8,15 @@ export interface SimpleDrawerProps {
   open?: boolean;
   align?: 'left' | 'right';
   iconAlignment?: 'left' | 'right';
+  size?: 'small' | 'large';
 }
 
 const SimpleDrawer = ({
   children,
   open,
   align,
   iconAlignment,
+  size,
 }: SimpleDrawerProps): React.ReactElement => {
   const anchorRef = useRef<HTMLDivElement>(null);
   const [isOpen, setIsOpen] = useState(false);
@@ -63,6 +65,7 @@ const SimpleDrawer = ({
         iconAlignment={iconAlignment}
         align={align}
         anchorEl={anchorRef}
+        size={size}
       >
         {children}
       </Drawer>

diff --git a/packages/ocean-react/src/Drawer/examples/SimpleDrawer.tsx b/packages/ocean-react/src/Drawer/examples/SimpleDrawer.tsx
@@ -8,13 +8,15 @@ export interface SimpleDrawerProps {
   open?: boolean;
   align?: 'left' | 'right';
   iconAlignment?: 'left' | 'right';
+  size?: 'small' | 'large';
 }
 
 const SimpleDrawer = ({
   children,
   open,
   align,
   iconAlignment,
+  size,
 }: SimpleDrawerProps): React.ReactElement => {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -33,6 +35,7 @@ const SimpleDrawer = ({
         overlayClose={toggleOverlayClose}
         iconAlignment={iconAlignment}
         align={align}
+        size={size}
       >
         {children}
       </Drawer>

diff --git a/packages/ocean-react/src/Drawer/stories/Drawer.stories.mdx b/packages/ocean-react/src/Drawer/stories/Drawer.stories.mdx
@@ -38,6 +38,8 @@ import { Drawer } from '@useblu/ocean-react';
 | .ods-drawer\_\overlay--open    | Transitional styles applied to the overlay after open.        |
 | .ods-drawer                    | Styles applied to the drawer content.                         |
 | .ods-drawer--open              | Transitional styles applied to the drawer content after open. |
+| .ods-drawer--small             | Styled applied to drawer size                                 |
+| .ods-drawer--large             | Styled applied to drawer size                                 |
 | .ods-drawer\_\_content--header | Styles applied to the drawer content header.                  |
 
 ## Playground
@@ -49,6 +51,7 @@ import { Drawer } from '@useblu/ocean-react';
       open: false,
       align: 'right',
       iconAlignment: 'right',
+      size: 'small',
     }}
     parameters={{
       controls: { exclude: /^onMouseOutDrawer*/ },
@@ -68,6 +71,11 @@ import { Drawer } from '@useblu/ocean-react';
         options: ['right', 'left'],
         control: { type: 'select' },
       },
+      size: {
+        name: 'size',
+        options: ['small', 'large'],
+        control: { type: 'radio' },
+      },
     }}
   >
     {(props) => (
@@ -129,7 +137,7 @@ import { Drawer } from '@useblu/ocean-react';
               variant="secondary"
               size="md"
               blocked
-              style={{ margin: '0 8px 0 0' }}
+              style={{ margin: '0 12px 0 0' }}
             >
               Default
             </Button>
@@ -152,6 +160,7 @@ import { Drawer } from '@useblu/ocean-react';
       open: false,
       align: 'right',
       iconAlignment: 'right',
+      size: 'small',
     }}
     parameters={{
       controls: { exclude: /^onMouseOutDrawer*/ },
@@ -171,6 +180,11 @@ import { Drawer } from '@useblu/ocean-react';
         options: ['right', 'left'],
         control: { type: 'select' },
       },
+      size: {
+        name: 'size',
+        options: ['small', 'large'],
+        control: { type: 'radio' },
+      },
     }}
   >
     {(props) => (