Added extraLarge size prop to the Pane

src/components/Pane/index.jsx

@@ -15,7 +15,7 @@ import Footer from "./Footer";
 import Header from "./Header";
 import { getHeader, updateHeaderHeight } from "./utils";
 
-const SIZES = { small: "small", large: "large" };
+const SIZES = { small: "small", large: "large", extraLarge: "extraLarge" };
 
 const Pane = ({
   size = SIZES.small,
@@ -114,6 +114,7 @@ const Pane = ({
             className={classnames("neeto-ui-pane__wrapper", {
               "neeto-ui-pane__wrapper--small": size === SIZES.small,
               "neeto-ui-pane__wrapper--large": size === SIZES.large,
+              "neeto-ui-pane__wrapper--extralarge": size === SIZES.extraLarge,
               [className]: className,
             })}
             {...otherProps}

src/styles/components/_pane.scss

@@ -68,6 +68,10 @@
       --neeto-ui-pane-wrapper-width: 50vw;
     }
 
+    &--extralarge {
+      --neeto-ui-pane-wrapper-width: 90vw;
+    }
+
     @include viewport(tab-min) {
       width: 50%;
     }

stories/Overlays/Pane.stories.jsx

@@ -91,6 +91,7 @@ const Default = args => {
 const Sizes = args => {
   const [showPaneExtraSmall, setShowPaneExtraSmall] = useState(false);
   const [showPaneLarge, setShowPaneLarge] = useState(false);
+  const [showPaneExtraLarge, setShowPaneExtraLarge] = useState(false);
 
   return (
     <div className="w-full">
@@ -99,6 +100,10 @@ const Sizes = args => {
           <div className="flex flex-row flex-wrap items-center justify-start gap-6">
             <Button label="Small" onClick={() => setShowPaneExtraSmall(true)} />
             <Button label="Large" onClick={() => setShowPaneLarge(true)} />
+            <Button
+              label="Extra Large"
+              onClick={() => setShowPaneExtraLarge(true)}
+            />
           </div>
         </div>
       </div>
@@ -157,6 +162,37 @@ const Sizes = args => {
           />
         </Pane.Footer>
       </Pane>
+      <Pane
+        {...args}
+        isOpen={showPaneExtraLarge}
+        size="extraLarge"
+        onClose={() => setShowPaneExtraLarge(false)}
+      >
+        <Pane.Header>
+          <Typography style="h2">They're creepy & they're kooky</Typography>
+        </Pane.Header>
+        <Pane.Body>
+          <Typography lineHeight="normal" style="body2">
+            Somewhere out in space live the Herculoids! Zok, the laser-ray
+            dragon! Igoo, the giant rock ape! Tundro, the tremendous! Gloop and
+            Gleep, the formless, fearless wonders! With Zandor, their leader,
+            and his wife, Tara, and son, Dorno, they team up to protect their
+            planet from sinister invaders! All-strong! All-brave! All-heroes!
+            They're the Herculoids!
+          </Typography>
+        </Pane.Body>
+        <Pane.Footer className="space-x-2">
+          <Button
+            label="Continue"
+            onClick={() => setShowPaneExtraLarge(false)}
+          />
+          <Button
+            label="Cancel"
+            style="text"
+            onClick={() => setShowPaneExtraLarge(false)}
+          />
+        </Pane.Footer>
+      </Pane>
     </div>
   );
 };

types/Pane.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { PopupProps, PopupContentProps } from "./Popup";
 
-export type PaneProps = PopupProps & { size?: "small" | "large" };
+export type PaneProps = PopupProps & { size?: "small" | "large" | "extraLarge" };
 
 const Pane: React.FC<PaneProps> & {
   Header: React.FC<PopupContentProps>;