feat(ui): add new sizes to Modal (#1128)

* introduce new sizes for Modal

* fix story

* correct size

* add margin update story

* add min to 2xl

Author: guoda-puidokaite

.changeset/huge-worlds-tell.md

@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-ui-components": minor
+---
+
+Add `xl` and `2xl` sizes to `Modal`.

packages/ui-components/src/components/Modal/Modal.component.tsx

@@ -63,6 +63,10 @@ const sizeClass = (size: ModalSize) => {
   switch (size) {
     case "large":
       return `jn:w-[40rem]`
+    case "xl":
+      return `jn:w-[76.75rem]`
+    case "2xl":
+      return `jn:w-[80%] jn:min-w-[85rem] jn:max-w-[112.5rem]`
     default:
       return `jn:w-[33.625rem]`
   }
@@ -226,7 +230,7 @@ export const Modal: React.FC<ModalProps> = ({
   )
 }
 
-type ModalSize = "small" | "large"
+type ModalSize = "small" | "large" | "xl" | "2xl"
 
 export interface ModalProps extends Omit<React.HTMLProps<HTMLDivElement>, "size"> {
   /** The title of the modal. This will be rendering as the heading of the modal, and the modal's `arial-labelledby` attribute will reference the title/heading element. If the modal does not have `title` or `heading`, use `ariaLabel` to provide an accessible name for the modal. */

packages/ui-components/src/components/Modal/Modal.stories.tsx

@@ -70,7 +70,9 @@ const meta: Meta<typeof Modal> = {
   decorators: [
     (Story) => (
       <PortalProvider>
-        <Story />
+        <div className="jn:m-20 jn:flex jn:justify-center">
+          <Story />
+        </div>
       </PortalProvider>
     ),
   ],
@@ -116,15 +118,89 @@ export const AutoFocusDialog: Story = {
   },
 }
 
-export const LargeWithTitle: Story = {
+const ReusableForm = () => (
+  <Form>
+    <FormRow>
+      <TextInput label="First Name" id="firstname" />
+    </FormRow>
+    <FormRow>
+      <TextInput label="Last Name" id="lastname" />
+    </FormRow>
+    <FormRow>
+      <TextInput label="Email" id="email" type="email" />
+    </FormRow>
+    <FormRow>
+      <TextInput label="Password" id="password" type="password" />
+    </FormRow>
+    <FormRow>
+      <TextInput label="Retype Password" id="retype-password" type="password" />
+    </FormRow>
+    <FormRow>
+      <Select label="Role">
+        <SelectOption>Private Person</SelectOption>
+        <SelectOption>Small Business</SelectOption>
+      </Select>
+    </FormRow>
+    <FormRow>
+      <ComboBox label="Country">
+        <ComboBoxOption value="germany" key="DE">
+          Germany
+        </ComboBoxOption>
+        <ComboBoxOption value="uk" key="UK">
+          United Kingdom
+        </ComboBoxOption>
+        <ComboBoxOption value="us" key="US">
+          USA
+        </ComboBoxOption>
+      </ComboBox>
+    </FormRow>
+  </Form>
+)
+
+export const DefaultWithForm: Story = {
+  render: Template,
+  args: {
+    title: "Default Modal Form",
+    initialFocus: "#firstname",
+    cancelButtonLabel: "Cancel",
+    confirmButtonLabel: "Register now",
+    children: <ReusableForm />,
+  },
+}
+
+export const LargeWithForm: Story = {
   render: Template,
   args: {
     size: "large",
-    title: "Large Modal",
-    confirmButtonLabel: "OK",
-    // @ts-ignore
-    closeOnConfirm: true /* Only relevant for storybook, this is not a native prop of the component! */,
-    children: <p>A large modal with a title</p>,
+    title: "Large Modal Form",
+    initialFocus: "#firstname",
+    cancelButtonLabel: "Cancel",
+    confirmButtonLabel: "Register now",
+    children: <ReusableForm />,
+  },
+}
+
+export const XLWithForm: Story = {
+  render: Template,
+  args: {
+    size: "xl",
+    title: "XL With Form",
+    initialFocus: "#firstname",
+    cancelButtonLabel: "Cancel",
+    confirmButtonLabel: "Register now",
+    children: <ReusableForm />,
+  },
+}
+
+export const XXLWithForm: Story = {
+  render: Template,
+  args: {
+    size: "2xl",
+    title: "2XL With Form",
+    initialFocus: "#firstname",
+    cancelButtonLabel: "Cancel",
+    confirmButtonLabel: "Register now",
+    children: <ReusableForm />,
   },
 }
 
@@ -235,51 +311,3 @@ export const TestComboBoxInModal: Story = {
     ),
   },
 }
-
-export const ModalWithALargerForm: Story = {
-  render: Template,
-  args: {
-    title: "Register",
-    initialFocus: "#firstname",
-    cancelButtonLabel: "Cancel",
-    confirmButtonLabel: "Register now",
-    children: (
-      <Form>
-        <FormRow>
-          <TextInput label="First Name" id="firstname" />
-        </FormRow>
-        <FormRow>
-          <TextInput label="Last Name" id="lastname" />
-        </FormRow>
-        <FormRow>
-          <TextInput label="Email" id="email" type="email" />
-        </FormRow>
-        <FormRow>
-          <TextInput label="Password" id="password" type="password" />
-        </FormRow>
-        <FormRow>
-          <TextInput label="Retype Password" id="retype-password" type="password" />
-        </FormRow>
-        <FormRow>
-          <Select label="Role">
-            <SelectOption>Private Person</SelectOption>
-            <SelectOption>Small Business</SelectOption>
-          </Select>
-        </FormRow>
-        <FormRow>
-          <ComboBox label="Country">
-            <ComboBoxOption value="germany" key="DE">
-              Germany
-            </ComboBoxOption>
-            <ComboBoxOption value="uk" key="UK">
-              United Kingdom
-            </ComboBoxOption>
-            <ComboBoxOption value="us" key="US">
-              USA
-            </ComboBoxOption>
-          </ComboBox>
-        </FormRow>
-      </Form>
-    ),
-  },
-}