From 9fa7d43bb723a853004298effdc770d7242a6780 Mon Sep 17 00:00:00 2001
From: nils stolpe <nstolpe@users.noreply.github.com>
Date: Fri, 5 Jan 2024 11:49:00 -0500
Subject: [PATCH] fix/modal (#273)

* fix: made modal footer button lg

* fix: updated form modal styles to match design, used asChild prop to get rid of nested buttons

* refactor: moved Modal.example to ModalForm.example

* refactor: updated styling for modals and added info and custom modal examples

* fix: right aligned buttons on custom modal to show layout options
---
 src/components/Modal/index.tsx                | 80 ++++++++++++++-----
 stories/Modal/Docs.mdx                        | 13 ++-
 stories/Modal/Modal.example.tsx               | 54 -------------
 .../{Modal.stories.ts => Modal.stories.tsx}   | 23 ++++--
 stories/Modal/ModalCustom.example.tsx         | 39 +++++++++
 stories/Modal/ModalForm.example.tsx           | 46 +++++++++++
 stories/Modal/ModalInfo.example.tsx           | 37 +++++++++
 7 files changed, 209 insertions(+), 83 deletions(-)
 delete mode 100644 stories/Modal/Modal.example.tsx
 rename stories/Modal/{Modal.stories.ts => Modal.stories.tsx} (65%)
 create mode 100644 stories/Modal/ModalCustom.example.tsx
 create mode 100644 stories/Modal/ModalForm.example.tsx
 create mode 100644 stories/Modal/ModalInfo.example.tsx

diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index d92b0d69..611a124a 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -2,8 +2,9 @@
 
 import * as React from 'react'
 import * as DialogPrimitive from '@radix-ui/react-dialog'
-import { CloseIcon } from '@/assets'
+import { cva, type VariantProps } from 'class-variance-authority'
 
+import { CloseIcon } from '@/assets'
 import { cn } from '@/lib/utils'
 
 const Modal = DialogPrimitive.Root
@@ -35,7 +36,7 @@ const ModalContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 shadow-lg bg-background dark:bg-foreground duration-200 sm:rounded-lg',
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-6 shadow-lg bg-background dark:bg-foreground duration-200 sm:rounded-lg',
         className
       )}
       {...props}
@@ -46,31 +47,47 @@ const ModalContent = React.forwardRef<
 ))
 ModalContent.displayName = DialogPrimitive.Content.displayName
 
+const headerVariants = cva(
+  [
+    'flex',
+    'items-center',
+    'justify-between',
+    'p-6',
+    'space-y-1.5',
+    'text-center',
+    'sm:text-left',
+    'border-border-subtle',
+    'dark:border-border-subtle-dark'
+  ],
+  {
+    variants: {
+      variant: {
+        default: ['border-b'],
+        form: ['pb-0', 'border-b-0']
+      }
+    },
+    defaultVariants: {
+      variant: 'default'
+    }
+  }
+)
+
 const ModalHeader = ({
   className,
+  variant,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      'flex items-center justify-between p-6 space-y-1.5 text-center sm:text-left',
-      className
-    )}
-    {...props}
-  />
+}: React.HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof headerVariants>) => (
+  <div className={cn(headerVariants({ variant, className }))} {...props} />
 )
+
 ModalHeader.displayName = 'ModalHeader'
 
 const ModalFooter = ({
   className,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      'flex flex-col-reverse p-6 sm:flex-row sm:justify-start sm:space-x-2',
-      className
-    )}
-    {...props}
-  />
+  <div className={cn('flex flex-col p-6 pt-0 gap-2.5', className)} {...props} />
 )
 ModalFooter.displayName = 'ModalFooter'
 
@@ -108,17 +125,38 @@ const ModalClose = React.forwardRef<
   </DialogPrimitive.Close>
 ))
 
+const descriptionVariants = cva(
+  [
+    'text-sm',
+    'text-foreground-muted',
+    'border-border-subtle',
+    'dark:border-border-subtle-dark'
+  ],
+  {
+    variants: {
+      variant: {
+        default: ['border-b'],
+        form: ['border-b-0']
+      }
+    },
+    defaultVariants: {
+      variant: 'default'
+    }
+  }
+)
+
 const ModalDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description> &
+    VariantProps<typeof descriptionVariants>
+>(({ className, variant, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn('text-sm px-6 text-foreground-muted', className)}
+    className={cn(descriptionVariants({ variant, className }))}
     {...props}
   />
 ))
-ModalDescription.displayName = DialogPrimitive.Description.displayName
+ModalDescription.displayName = 'ModalDescription'
 
 export {
   Modal,
diff --git a/stories/Modal/Docs.mdx b/stories/Modal/Docs.mdx
index 7ef06286..cc9be9a2 100644
--- a/stories/Modal/Docs.mdx
+++ b/stories/Modal/Docs.mdx
@@ -1,6 +1,7 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
 import * as ModalStories from './Modal.stories'
+import { ModalInfoDemo } from './ModalInfo.example'
 
 <Meta of={ModalStories} />
 
@@ -8,9 +9,17 @@ import * as ModalStories from './Modal.stories'
 
 A modal is a window that can be overlaid on the main window, which when opened, the main window is left partially visible and doesn't allow any user interaction.
 
-## Default
+## Info
 
-<Canvas of={ModalStories.Default} />
+<Canvas of={ModalStories.Info} />
+
+## Custom
+
+<Canvas of={ModalStories.Custom} />
+
+## Form
+
+<Canvas of={ModalStories.Form} />
 
 ## Attributes
 
diff --git a/stories/Modal/Modal.example.tsx b/stories/Modal/Modal.example.tsx
deleted file mode 100644
index 62d2db9a..00000000
--- a/stories/Modal/Modal.example.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import {
-  Modal,
-  ModalContent,
-  ModalClose,
-  ModalCloseFooter,
-  ModalFooter,
-  ModalDescription,
-  ModalHeader,
-  ModalTitle,
-  ModalTrigger
-} from '@/components/Modal'
-import { Button } from '@/components'
-
-export const ModalDemo = () => {
-  return (
-    <Modal>
-      <ModalTrigger>
-        <Button size="sm" variant="primary">
-          Open
-        </Button>
-      </ModalTrigger>
-      <ModalContent>
-        <ModalHeader>
-          <ModalTitle>Title</ModalTitle>
-          <ModalClose />
-        </ModalHeader>
-        <ModalDescription>
-          <div className="bg-blue-50 dark:bg-blue-900 dark:text-foreground-inverse h-40 text-lg font-semibold items-center flex justify-center">
-            Replace this component with your content
-          </div>
-        </ModalDescription>
-        <ModalFooter>
-          <ModalCloseFooter className="w-full grid gap-2">
-            <Button
-              size="sm"
-              variant="primary"
-              className="w-full dark:bg-blue-300 dark:border-blue-300 dark:text-foreground"
-            >
-              Close
-            </Button>
-            <div className="flex justify-center gap-4">
-              <div className="dark:text-foreground-muted">
-                Additional text line
-              </div>
-              <div className="dark:text-primary-300 underline text-primary-600">
-                Additional text line
-              </div>
-            </div>
-          </ModalCloseFooter>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  )
-}
diff --git a/stories/Modal/Modal.stories.ts b/stories/Modal/Modal.stories.tsx
similarity index 65%
rename from stories/Modal/Modal.stories.ts
rename to stories/Modal/Modal.stories.tsx
index 9edcf9e3..18e97afe 100644
--- a/stories/Modal/Modal.stories.ts
+++ b/stories/Modal/Modal.stories.tsx
@@ -1,11 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react'
 
-import { ModalDemo } from './Modal.example'
+import { ModalInfoDemo } from './ModalInfo.example'
+import { ModalCustomDemo } from './ModalCustom.example'
+import { ModalFormDemo } from './ModalForm.example'
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta = {
   title: 'Components/Modal',
-  component: ModalDemo,
+  component: ModalFormDemo,
   parameters: {
     // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
     layout: 'centered'
@@ -13,17 +15,26 @@ const meta = {
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
   argTypes: {
     className: {
-      controle: 'text',
+      control: 'text',
       description: 'Alter the className to change the style'
     }
   }
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-} satisfies Meta<typeof ModalDemo>
+} satisfies Meta<typeof ModalFormDemo>
 
 export default meta
 type Story = StoryObj<typeof meta>
 
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-export const Default: Story = {
-  args: {}
+
+export const Info: Story = {
+  render: () => <ModalInfoDemo />
+}
+
+export const Custom: Story = {
+  render: () => <ModalCustomDemo />
+}
+
+export const Form: Story = {
+  render: () => <ModalFormDemo />
 }
diff --git a/stories/Modal/ModalCustom.example.tsx b/stories/Modal/ModalCustom.example.tsx
new file mode 100644
index 00000000..bb56a5d5
--- /dev/null
+++ b/stories/Modal/ModalCustom.example.tsx
@@ -0,0 +1,39 @@
+import {
+  Modal,
+  ModalContent,
+  ModalClose,
+  ModalFooter,
+  ModalDescription,
+  ModalHeader,
+  ModalTitle,
+  ModalTrigger
+} from '@/components/Modal'
+import { Button } from '@/components'
+
+export const ModalCustomDemo = () => (
+  <Modal>
+    <Button size="sm" variant="primary" asChild>
+      <ModalTrigger>Open</ModalTrigger>
+    </Button>
+    <ModalContent>
+      <ModalHeader>
+        <ModalTitle>Title</ModalTitle>
+        <ModalClose />
+      </ModalHeader>
+      <ModalDescription asChild>
+        <div>
+          <div className="bg-blue-50 dark:bg-blue-900 dark:text-foreground-inverse h-40 text-lg font-semibold items-center flex justify-center mb-6 mx-6">
+            Replace this component with your content
+          </div>
+        </div>
+      </ModalDescription>
+      <ModalFooter>
+        <div className="flex justify-end gap-2.5">
+          <Button variant="tertiary">Label</Button>
+          <Button variant="secondary">Label</Button>
+          <Button>Label</Button>
+        </div>
+      </ModalFooter>
+    </ModalContent>
+  </Modal>
+)
diff --git a/stories/Modal/ModalForm.example.tsx b/stories/Modal/ModalForm.example.tsx
new file mode 100644
index 00000000..398a7cda
--- /dev/null
+++ b/stories/Modal/ModalForm.example.tsx
@@ -0,0 +1,46 @@
+import {
+  Modal,
+  ModalContent,
+  ModalClose,
+  ModalCloseFooter,
+  ModalFooter,
+  ModalDescription,
+  ModalHeader,
+  ModalTitle,
+  ModalTrigger
+} from '@/components/Modal'
+import { Button } from '@/components'
+
+export const ModalFormDemo = () => (
+  <Modal>
+    <Button size="sm" variant="primary" asChild>
+      <ModalTrigger>Open</ModalTrigger>
+    </Button>
+    <ModalContent>
+      <ModalHeader variant="form">
+        <ModalTitle>Title</ModalTitle>
+        <ModalClose />
+      </ModalHeader>
+      <ModalDescription variant="form" asChild>
+        <div>
+          <div className="bg-blue-50 dark:bg-blue-900 dark:text-foreground-inverse h-40 text-lg font-semibold items-center flex justify-center mb-6 mx-6">
+            Replace this component with your form
+          </div>
+        </div>
+      </ModalDescription>
+      <ModalFooter>
+        <Button size="lg" variant="primary" asChild>
+          <ModalCloseFooter className="w-full grid gap-2">
+            Close
+          </ModalCloseFooter>
+        </Button>
+        <div className="flex justify-center gap-4">
+          <div className="text-foreground-muted">Additional text line</div>
+          <div className="dark:text-primary-300 underline text-primary-600">
+            Additional text line
+          </div>
+        </div>
+      </ModalFooter>
+    </ModalContent>
+  </Modal>
+)
diff --git a/stories/Modal/ModalInfo.example.tsx b/stories/Modal/ModalInfo.example.tsx
new file mode 100644
index 00000000..d9a25d13
--- /dev/null
+++ b/stories/Modal/ModalInfo.example.tsx
@@ -0,0 +1,37 @@
+import {
+  Modal,
+  ModalContent,
+  ModalClose,
+  ModalFooter,
+  ModalDescription,
+  ModalHeader,
+  ModalTitle,
+  ModalTrigger
+} from '@/components/Modal'
+import { Button } from '@/components'
+
+export const ModalInfoDemo = () => (
+  <Modal>
+    <Button size="sm" variant="primary" asChild>
+      <ModalTrigger>Open</ModalTrigger>
+    </Button>
+    <ModalContent>
+      <ModalHeader>
+        <ModalTitle>Title</ModalTitle>
+        <ModalClose />
+      </ModalHeader>
+      <ModalDescription className="h-40 text-foreground text-base" asChild>
+        <div>
+          <p className="mb-6 mx-6">Test</p>
+        </div>
+      </ModalDescription>
+      <ModalFooter>
+        <div className="flex justify-start gap-2.5">
+          <Button>Label</Button>
+          <Button variant="secondary">Label</Button>
+          <Button variant="tertiary">Label</Button>
+        </div>
+      </ModalFooter>
+    </ModalContent>
+  </Modal>
+)