From ff8ab3578daa1491299469f3c678029c006d83af Mon Sep 17 00:00:00 2001
From: Alexander Lebedev <alexander.lebedev@gmail.com>
Date: Fri, 18 Oct 2024 13:33:33 +0200
Subject: [PATCH] Add LargeDialog component and story

---
 packages/ui/package.json                      |  1 +
 .../src/components/Dialog/Dialog.stories.tsx  |  2 +-
 .../src/components/Dialog/LargeDialog.css.ts  | 37 +++++++++++
 .../components/Dialog/LargeDialog.stories.tsx | 38 +++++++++++
 .../ui/src/components/Dialog/LargeDialog.tsx  | 65 +++++++++++++++++++
 yarn.lock                                     |  1 +
 6 files changed, 143 insertions(+), 1 deletion(-)
 create mode 100644 packages/ui/src/components/Dialog/LargeDialog.css.ts
 create mode 100644 packages/ui/src/components/Dialog/LargeDialog.stories.tsx
 create mode 100644 packages/ui/src/components/Dialog/LargeDialog.tsx

diff --git a/packages/ui/package.json b/packages/ui/package.json
index 6a98fc7b82..30f94d5ee6 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -63,6 +63,7 @@
     "@vanilla-extract/recipes": "0.5.5",
     "@vanilla-extract/sprinkles": "1.6.3",
     "clsx": "2.1.1",
+    "framer-motion": "11.1.7",
     "react": "18.3.1",
     "react-dom": "18.3.1"
   }
diff --git a/packages/ui/src/components/Dialog/Dialog.stories.tsx b/packages/ui/src/components/Dialog/Dialog.stories.tsx
index c2ab5f66db..b1a9d54cd2 100644
--- a/packages/ui/src/components/Dialog/Dialog.stories.tsx
+++ b/packages/ui/src/components/Dialog/Dialog.stories.tsx
@@ -16,7 +16,7 @@ export default {
   },
 } as Meta<typeof Dialog>
 
-export const Default: StoryFn<typeof Dialog> = () => {
+export const Base: StoryFn<typeof Dialog> = () => {
   const [open, setOpen] = useState(false)
 
   return (
diff --git a/packages/ui/src/components/Dialog/LargeDialog.css.ts b/packages/ui/src/components/Dialog/LargeDialog.css.ts
new file mode 100644
index 0000000000..06ab840f0e
--- /dev/null
+++ b/packages/ui/src/components/Dialog/LargeDialog.css.ts
@@ -0,0 +1,37 @@
+import { style } from '@vanilla-extract/css'
+import { breakpoints, minWidth, tokens } from '../../theme'
+
+export const closeButton = style({
+  position: 'absolute',
+  right: tokens.space.md,
+  top: tokens.space.md,
+})
+
+export const content = style({
+  display: 'flex',
+  width: '100%',
+})
+
+export const card = style({
+  position: 'relative',
+  marginBlock: 'auto',
+  marginInline: 'auto',
+  width: '100%',
+
+  '@media': {
+    // This is unusual, we normally target min-width instead
+    [`screen and (max-width: ${breakpoints.xs}px)`]: {
+      boxShadow: 'none',
+      borderRadius: 0,
+      border: 'none',
+      minHeight: '100vh',
+    },
+    [minWidth.sm]: {
+      maxWidth: '80%',
+    },
+  },
+})
+
+export const heading = style({
+  marginRight: tokens.space.lg,
+})
diff --git a/packages/ui/src/components/Dialog/LargeDialog.stories.tsx b/packages/ui/src/components/Dialog/LargeDialog.stories.tsx
new file mode 100644
index 0000000000..a3f3755ba2
--- /dev/null
+++ b/packages/ui/src/components/Dialog/LargeDialog.stories.tsx
@@ -0,0 +1,38 @@
+import { type Meta, type StoryFn } from '@storybook/react'
+import { yStack } from '../../patterns'
+import { Button } from '../Button/Button'
+import { Text } from '../Text/Text'
+import { LargeDialog } from './LargeDialog'
+
+export default {
+  title: 'Dialog',
+  parameters: {
+    backgrounds: {
+      default: 'gray100',
+    },
+    layout: 'centered',
+  },
+} as Meta<unknown>
+
+export const Large: StoryFn = () => {
+  return (
+    <div>
+      <LargeDialog.Root>
+        <div className={yStack({ gap: 'md' })}>
+          Button opens dialog
+          <LargeDialog.Trigger asChild>
+            <Button variant="secondary">Click me</Button>
+          </LargeDialog.Trigger>
+        </div>
+
+        <LargeDialog.Content>
+          <LargeDialog.Header>Hello_world!</LargeDialog.Header>
+          <Text>
+            Lorem ipsum dolor sit amet, florrum plorrum klufs grufs glufs. Nufs ep trop. Nufs ep
+            trop. Lorem ipsum dolor sit amet, florrum plorrum.
+          </Text>
+        </LargeDialog.Content>
+      </LargeDialog.Root>
+    </div>
+  )
+}
diff --git a/packages/ui/src/components/Dialog/LargeDialog.tsx b/packages/ui/src/components/Dialog/LargeDialog.tsx
new file mode 100644
index 0000000000..83833c0e55
--- /dev/null
+++ b/packages/ui/src/components/Dialog/LargeDialog.tsx
@@ -0,0 +1,65 @@
+import { clsx } from 'clsx'
+import { motion } from 'framer-motion'
+import { type ComponentProps } from 'react'
+import { CrossIcon } from '../../icons'
+import { framerTransitions } from '../../theme'
+import { IconButton } from '../Button/IconButton'
+import { Card } from '../Card/Card'
+import { Heading } from '../Heading/Heading'
+import * as Dialog from './Dialog'
+import { card, closeButton, content, heading } from './LargeDialog.css'
+
+// Large modal, full-screen on mobile
+function Content({
+  children,
+  centerContent = true,
+  className,
+  ...forwardedProps
+}: ComponentProps<typeof Dialog.Content>) {
+  return (
+    <Dialog.Content
+      centerContent={centerContent}
+      className={clsx(content, className)}
+      {...forwardedProps}
+    >
+      <MotionCard
+        className={card}
+        initial={{ opacity: 0, y: '2vh' }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{
+          ...framerTransitions.easeInOutCubic,
+          duration: framerTransitions.defaultDuration,
+        }}
+      >
+        <Dialog.Close asChild>
+          <IconButton Icon={<CrossIcon />} className={closeButton} />
+        </Dialog.Close>
+        {children}
+      </MotionCard>
+    </Dialog.Content>
+  )
+}
+
+const MotionCard = motion(Card.Root)
+
+function Header({ children, className, ...forwardedProps }: ComponentProps<typeof Heading>) {
+  return (
+    <Dialog.Title asChild>
+      <Heading
+        as="h2"
+        variant="standard.24"
+        className={clsx(heading, className)}
+        {...forwardedProps}
+      >
+        {children}
+      </Heading>
+    </Dialog.Title>
+  )
+}
+
+export const LargeDialog = {
+  Root: Dialog.Root,
+  Trigger: Dialog.Trigger,
+  Content,
+  Header,
+}
diff --git a/yarn.lock b/yarn.lock
index e6a813c156..cea7b77602 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -25464,6 +25464,7 @@ __metadata:
     eslint-config-prettier: "npm:9.1.0"
     eslint-plugin-jest: "npm:28.8.3"
     eslint-plugin-testing-library: "npm:6.3.0"
+    framer-motion: "npm:11.1.7"
     jest: "npm:29.7.0"
     jest-environment-jsdom: "npm:29.7.0"
     react: "npm:18.3.1"