fix: add x-small size to modal

Author: gciotola

packages/app-elements/src/ui/composite/Modal.tsx

@@ -27,7 +27,7 @@ export type ModalProps = {
   /** Modal content */
   children: React.ReactNode
   /** Max width preset */
-  size?: "large" | "small"
+  size?: "large" | "small" | "x-small"
 }
 
 export const Modal: React.FC<
@@ -98,6 +98,7 @@ export const Modal: React.FC<
               "fixed z-70 w-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
               size === "large" && "max-w-155 md:w-155",
               size === "small" && "max-w-105 md:w-105",
+              size === "x-small" && "max-w-80 md:w-80",
             )}
             data-testid="modal"
           >
@@ -138,7 +139,7 @@ Modal.Body = ({ children }) => {
 
 Modal.Footer = ({ children }) => {
   return (
-    <div className="flex-none px-6 py-4" data-testid="modal-footer">
+    <div className="flex-none px-6 py-4 space-y-2" data-testid="modal-footer">
       {children}
     </div>
   )

packages/docs/src/stories/composite/Modal.stories.tsx

@@ -8,6 +8,10 @@ import {
 import type { Meta, StoryFn } from "@storybook/react-vite"
 import { useRef, useState } from "react"
 import { Button } from "#ui/atoms/Button"
+import { Icon } from "#ui/atoms/Icon"
+import { Spacer } from "#ui/atoms/Spacer"
+import { StatusIcon } from "#ui/atoms/StatusIcon"
+import { Text } from "#ui/atoms/Text"
 import { Modal } from "#ui/composite/Modal"
 import { InputSelect } from "#ui/forms/InputSelect"
 
@@ -169,3 +173,55 @@ export const WithInput: StoryFn = () => {
     </div>
   )
 }
+
+/**
+ * Modal as dialog without header
+ */
+export const AsDialog: StoryFn = () => {
+  const [show, setShow] = useState(false)
+
+  const handleClose = () => setShow(false)
+  const handleShow = () => setShow(true)
+
+  return (
+    <div>
+      <Button onClick={handleShow}>Open modal</Button>
+      <Modal show={show} onClose={handleClose} size="x-small">
+        <Modal.Body>
+          <Spacer top="4" bottom="4">
+            <StatusIcon name="check" background="green" gap="x-large" />
+          </Spacer>
+          <Text weight="semibold" align="center" tag="div">
+            Your coupons are ready.
+          </Text>
+          <Text align="center" tag="div" size="x-small" variant="info">
+            Download now or find them later in Imports.
+          </Text>
+        </Modal.Body>
+        <Modal.Footer>
+          <Button
+            variant="primary"
+            onClick={() => {
+              alert("Downloaded!")
+              handleClose()
+            }}
+            fullWidth
+            alignItems="center"
+          >
+            <Icon name="fileArrowDown" />
+            Download (CSV)
+          </Button>
+          <Button
+            variant="secondary"
+            onClick={() => {
+              handleClose()
+            }}
+            fullWidth
+          >
+            Cancel
+          </Button>
+        </Modal.Footer>
+      </Modal>
+    </div>
+  )
+}