feat: implement using size prop for sheet component

src/Sheet/README.md

@@ -20,9 +20,11 @@ notes: |
   const [blocking, setBlocking] = useState(false);
   const [dark, setDark] = useState(false);
   const [position, setPosition] = useState('bottom');
+  const [size, setSize] = useState('md');
   const [show, setShow] = useState(false);
 
   const positions = ['left', 'right', 'top', 'bottom'];
+  const sizes = ['sm', 'md', 'lg'];
 
   return (
     <>
@@ -35,6 +37,15 @@ notes: |
           <Dropdown.Item eventKey={position}>{position}</Dropdown.Item>
         ))}
       </DropdownButton><br />
+      <DropdownButton
+        id="size-dropdown-btn"
+        onSelect={setSize}
+        title={`Size: ${size}`}
+      >
+        {sizes.map((size) => (
+          <Dropdown.Item key={size} eventKey={size}>{size}</Dropdown.Item>
+        ))}
+      </DropdownButton><br />
       <Button onClick={() => setShow(true)} className="mb-2 mb-md-0">
         Show the Sheet
       </Button>{' '}
@@ -47,6 +58,7 @@ notes: |
 
       <Sheet
         position={position}
+        size={size}
         show={show}
         blocking={blocking}
         variant={dark ? 'dark' : 'light'}

src/Sheet/Sheet.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 import Sheet, { POSITIONS, VARIANTS } from '.';
 
@@ -113,5 +113,25 @@ describe('<Sheet />', () => {
       expect(sheetElement).toHaveClass('pgn__sheet-component');
       expect(sheetElement).toHaveClass(sheetClass);
     });
+
+    it('renders with correct size classes', () => {
+      const { unmount } = render(<Sheet size="sm" />);
+      const sheetSm = screen.getByRole('alert');
+
+      expect(sheetSm).toHaveClass('pgn__sheet-sm');
+
+      unmount();
+
+      render(<Sheet size="lg" />);
+      const sheetLg = screen.getByRole('alert');
+
+      expect(sheetLg).toHaveClass('pgn__sheet-lg');
+    });
+
+    it('renders default size (md) when no size is provided', () => {
+      render(<Sheet />);
+      const sheet = screen.getByRole('alert');
+      expect(sheet).toHaveClass('pgn__sheet-md');
+    });
   });
 });

src/Sheet/__snapshots__/Sheet.test.jsx.snap

@@ -23,7 +23,7 @@ exports[`<Sheet /> snapshots blocking, left snapshot 1`] = `
     <div
       aria-atomic="true"
       aria-live="polite"
-      className="pgn__sheet-component pgn__sheet__light left"
+      className="pgn__sheet-component pgn__sheet__light pgn__sheet-md left"
       role="alert"
     >
       <div
@@ -57,7 +57,7 @@ exports[`<Sheet /> snapshots dark, right snapshot 1`] = `
     <div
       aria-atomic="true"
       aria-live="polite"
-      className="pgn__sheet-component pgn__sheet__dark right"
+      className="pgn__sheet-component pgn__sheet__dark pgn__sheet-md right"
       role="alert"
     >
       <div
@@ -91,7 +91,7 @@ exports[`<Sheet /> snapshots default args snapshot: bottom, show, light 1`] = `
     <div
       aria-atomic="true"
       aria-live="polite"
-      className="pgn__sheet-component pgn__sheet__light bottom"
+      className="pgn__sheet-component pgn__sheet__light pgn__sheet-md bottom"
       role="alert"
     >
       <div

src/Sheet/index.jsx

@@ -12,6 +12,12 @@ export const POSITIONS = {
   bottom: 'bottom',
 };
 
+export const SIZES = {
+  sm: 'sm',
+  md: 'md',
+  lg: 'lg',
+};
+
 export const VARIANTS = {
   light: 'light',
   dark: 'dark',
@@ -27,13 +33,14 @@ class Sheet extends React.Component {
 
   renderSheet() {
     const {
-      children, position, variant, className,
+      children, position, variant, className, size,
     } = this.props;
     return (
       <div
         className={classNames(
           'pgn__sheet-component',
           `pgn__sheet__${variant}`,
+          `pgn__sheet-${size}`,
           position,
           className,
         )}
@@ -95,6 +102,8 @@ Sheet.propTypes = {
     POSITIONS.top,
     POSITIONS.bottom,
   ]),
+  /** Size of sheet to render */
+  size: PropTypes.oneOf(Object.values(SIZES)),
   /** Boolean used to control whether the Sheet shows. */
   show: PropTypes.bool,
   /** Specifies function that controls `show` value. */
@@ -107,6 +116,7 @@ Sheet.defaultProps = {
   blocking: false,
   children: undefined,
   position: POSITIONS.bottom,
+  size: SIZES.md,
   show: true,
   onClose: () => {},
   variant: VARIANTS.light,

src/Sheet/index.scss

@@ -81,8 +81,20 @@
 
   &.left,
   &.right {
-    max-width: 272px;
     height: 100%;
     top: 0;
+    width: 100%;
+
+    &.pgn__sheet-sm {
+      max-width: var(--pgn-size-sheet-sm);
+    }
+
+    &.pgn__sheet-md {
+      max-width: var(--pgn-size-sheet-md);
+    }
+
+    &.pgn__sheet-lg {
+      max-width: var(--pgn-size-sheet-lg);
+    }
   }
 }

tokens/src/core/components/Sheet.json

@@ -7,5 +7,13 @@
         "main": { "source": "$zindex-sheet", "$value": "1032" }
       }
     }
+  },
+  "size": {
+    "$type": "dimension",
+    "sheet": {
+      "sm": { "value": "400px" },
+      "md": { "value": "500px" },
+      "lg": { "value": "800px" }
+    }
   }
 }