From 4979a5cd96481968845f27e3eba261684047f21a Mon Sep 17 00:00:00 2001
From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>
Date: Wed, 6 Apr 2022 10:38:34 +0200
Subject: [PATCH] feat(system): add more dialog sizes

---
 .../status-react/src/system/dialog/dialog.tsx |  6 +++--
 .../status-react/src/system/dialog/styles.tsx | 22 ++++++++++++++++++-
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/packages/status-react/src/system/dialog/dialog.tsx b/packages/status-react/src/system/dialog/dialog.tsx
index 17ec7c5a..5cea3371 100644
--- a/packages/status-react/src/system/dialog/dialog.tsx
+++ b/packages/status-react/src/system/dialog/dialog.tsx
@@ -11,6 +11,7 @@ import { Separator } from '../separator'
 import { Actions, Body, Content, Header, Overlay } from './styles'
 
 import type { ButtonProps } from '../button'
+import type { Variants } from './styles'
 
 interface DialogTriggerProps {
   children: [React.ReactElement, React.ReactElement]
@@ -34,15 +35,16 @@ const DialogTrigger = (props: DialogTriggerProps) => {
 interface DialogProps {
   title: React.ReactNode
   children: React.ReactNode
+  size?: Variants['size']
 }
 
 const Dialog = (props: DialogProps) => {
-  const { title, children } = props
+  const { title, children, size, ...contentProps } = props
 
   return (
     <Primitive.Portal>
       <Overlay as={Primitive.Overlay} />
-      <Content as={Primitive.Content}>
+      <Content as={Primitive.Content} size={size} {...contentProps}>
         <Header>
           <Heading as={Primitive.Title} weight="600" size="17">
             {title}
diff --git a/packages/status-react/src/system/dialog/styles.tsx b/packages/status-react/src/system/dialog/styles.tsx
index 1eb36b5e..4fe7daf9 100644
--- a/packages/status-react/src/system/dialog/styles.tsx
+++ b/packages/status-react/src/system/dialog/styles.tsx
@@ -1,5 +1,9 @@
 import { keyframes, styled } from '~/src/styles/config'
 
+import type { VariantProps } from '~/src/styles/config'
+
+export type Variants = VariantProps<typeof Content>
+
 const overlayAnimation = keyframes({
   '0%': {
     opacity: 0,
@@ -40,12 +44,28 @@ export const Content = styled('div', {
   left: '50%',
   transform: 'translate(-50%, -50%)',
   width: '90vw',
-  maxWidth: '638px',
   maxHeight: '85vh',
 
   '@motion': {
     animation: `${contentAnimation} 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards`,
   },
+
+  variants: {
+    size: {
+      480: {
+        maxWidth: '480px',
+      },
+      640: {
+        maxWidth: '640px',
+      },
+      1060: {
+        maxWidth: '1060px',
+      },
+    },
+  },
+  defaultVariants: {
+    size: '480',
+  },
 })
 
 export const Header = styled('div', {