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 [width, setWidth] = useState('md');
   const [show, setShow] = useState(false);
 
   const positions = ['left', 'right', 'top', 'bottom'];
+  const widths = ['sm', 'md', 'lg'];
 
   return (
     <>
@@ -35,6 +37,15 @@ notes: |
           <Dropdown.Item eventKey={position}>{position}</Dropdown.Item>
         ))}
       </DropdownButton><br />
+      <DropdownButton
+        id="width-dropdown-btn"
+        onSelect={setWidth}
+        title={`Width: ${width}`}
+      >
+        {widths.map((width) => (
+          <Dropdown.Item key={width} eventKey={width}>{width}</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}
+        width={width}
         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 width classes', () => {
+      const { unmount } = render(<Sheet width="sm" />);
+      const sheetSm = screen.getByRole('alert');
+
+      expect(sheetSm).toHaveClass('pgn__sheet-width-sm');
+
+      unmount();
+
+      render(<Sheet width="lg" />);
+      const sheetLg = screen.getByRole('alert');
+
+      expect(sheetLg).toHaveClass('pgn__sheet-width-lg');
+    });
+
+    it('renders default width (md) when no width is provided', () => {
+      render(<Sheet />);
+      const sheet = screen.getByRole('alert');
+      expect(sheet).toHaveClass('pgn__sheet-width-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-width-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-width-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-width-md bottom"
       role="alert"
     >
       <div

src/Sheet/index.jsx

@@ -12,6 +12,12 @@ export const POSITIONS = {
   bottom: 'bottom',
 };
 
+export const WIDTHS = {
+  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, width,
     } = this.props;
     return (
       <div
         className={classNames(
           'pgn__sheet-component',
           `pgn__sheet__${variant}`,
+          `pgn__sheet-width-${width}`,
           position,
           className,
         )}
@@ -95,6 +102,8 @@ Sheet.propTypes = {
     POSITIONS.top,
     POSITIONS.bottom,
   ]),
+  /** Width of sheet to render */
+  width: PropTypes.oneOf(Object.values(WIDTHS)),
   /** 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,
+  width: WIDTHS.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-width-sm {
+      max-width: var(--pgn-width-sheet-sm);
+    }
+
+    &.pgn__sheet-width-md {
+      max-width: var(--pgn-width-sheet-md);
+    }
+
+    &.pgn__sheet-width-lg {
+      max-width: var(--pgn-width-sheet-lg);
+    }
   }
 }

styles/css/core/variables.css

@@ -123,6 +123,9 @@
   --pgn-size-search-field-border-width-base: 0.0625rem;
   --pgn-size-search-field-border-width-focus: 0.3125rem;
   --pgn-size-search-field-border-radius: 0;
+  --pgn-width-sheet-sm: 400px;
+  --pgn-width-sheet-md: 500px;
+  --pgn-width-sheet-lg: 800px;
   --pgn-size-spinner-base-width: 2rem;
   --pgn-size-spinner-base-border-width: 0.25em;
   --pgn-size-spinner-sm-width: 1rem;

tokens/src/core/components/Sheet.json

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