Add LargeDialog component and story

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"
   }

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 (

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,
+})

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>
+  )
+}

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,
+}

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"