feat: pr fixes and adds modal footer

packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx

@@ -34,6 +34,8 @@ import { defaultThemes, Theme, withTheme } from '../Theme'
 import { TypographyStyles } from '../Typography/Typography.styles'
 import { NumberInputStyles } from '../NumberInput/NumberInput.styles'
 import { ModalStyles } from '../Modal/Modal.styles'
+import { ModalFooterStyles } from '../ModalFooter/ModalFooter.styles'
+import { ModalBody } from '../ModalBody'
 import { ModalBodyStyles } from '../ModalBody/ModalBody.styles'
 
 const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
@@ -71,6 +73,7 @@ const componentStyles: Array<ReturnType<typeof withTheme> | SerializedStyles> =
     TableRowStyles,
     NumberInputStyles,
     ModalStyles,
+    ModalFooterStyles,
     ModalBodyStyles,
   ]
 

packages/lsd-react/src/components/Modal/Modal.classes.ts

@@ -4,7 +4,7 @@ export const modalClasses = {
   small: 'lsd-modal--small',
   medium: 'lsd-modal--medium',
   large: 'lsd-modal--large',
-  extraSmall: 'lsd-modal--extra-small',
+  xsmall: 'lsd-modal--extra-small',
 
   modalContainer: 'lsd-modal__container',
 

packages/lsd-react/src/components/Modal/Modal.stories.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { Meta, Story } from '@storybook/react'
-import { ModalBody } from '../ModalBody'
 import { Modal, ModalProps } from './Modal'
 import { Button } from '../Button'
+import { ModalBody } from '../ModalBody'
+import { ModalFooter } from '../ModalFooter'
 
 export default {
   title: 'Modal',
@@ -11,7 +12,7 @@ export default {
     size: {
       type: {
         name: 'enum',
-        value: ['extraSmall', 'small', 'medium', 'large'],
+        value: ['xsmall', 'small', 'medium', 'large'],
       },
     },
   },
@@ -23,25 +24,37 @@ export const Root: Story<
   }
 > = ({ body, ...args }) => {
   const [isOpen, setIsOpen] = useState(false)
+  const slotStyles: React.CSSProperties = {
+    boxSizing: 'border-box',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    alignItems: 'center',
+    border: '1px solid rgb(var(--lsd-border-primary)',
+    padding: '30px',
+  }
 
   return (
     <div style={{ width: 400 }}>
       <Button onClick={() => setIsOpen(!isOpen)}>Open Modal</Button>
       <Modal {...args} isOpen={isOpen} onClose={() => setIsOpen(false)}>
-        <ModalBody>{body}</ModalBody>
+        <ModalBody>
-        <div style={{ display: 'flex' }}>
+          <div style={slotStyles}>{body}</div>
+        </ModalBody>
+
+        <ModalFooter>
           <Button
-            size={args.size === 'extraSmall' ? 'small' : args.size}
+            size={args.size === 'xsmall' ? 'small' : args.size}
             style={{
               marginRight: 12,
             }}
           >
             Button 1
           </Button>
-          <Button size={args.size === 'extraSmall' ? 'small' : args.size}>
+          <Button size={args.size === 'xsmall' ? 'small' : args.size}>
             Button 2
           </Button>
-        </div>
+        </ModalFooter>
       </Modal>
     </div>
   )

packages/lsd-react/src/components/Modal/Modal.styles.ts

@@ -69,7 +69,7 @@ export const ModalStyles = css`
     }
   }
 
-  .${modalClasses.extraSmall} {
+  .${modalClasses.xsmall} {
     .${modalClasses.modalContainer} {
       min-width: 490px;
     }

packages/lsd-react/src/components/Modal/Modal.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import React from 'react'
+import React, { ReactNode } from 'react'
 import {
   CommonProps,
   omitCommonProps,
@@ -13,9 +13,9 @@ import { IconButton } from '../IconButton'
 export type ModalProps = CommonProps &
   Omit<React.HTMLAttributes<HTMLDivElement>, 'label'> & {
     isOpen: boolean
-    size?: 'extraSmall' | 'small' | 'medium' | 'large'
+    size?: 'xsmall' | 'small' | 'medium' | 'large'
-    title?: string
+    title?: ReactNode
-    subtitle?: string
+    subtitle?: ReactNode
     onClose?: () => void
   }
 
@@ -67,7 +67,7 @@ export const Modal: React.FC<ModalProps> & {
 
             {!!subtitle && (
               <Typography
-                className={modalClasses.title}
+                className={modalClasses.subtitle}
                 variant={size === 'small' ? 'label2' : 'label1'}
                 component="div"
               >

packages/lsd-react/src/components/ModalBody/ModalBody.stories.tsx

@@ -15,16 +15,23 @@ export default {
 
 export const Root: Story<
   ModalBodyProps & {
-    body: string
+    content: string
-    title: string
   }
-> = ({ body, ...args }) => (
+> = ({ content, ...args }) => {
-  <div style={{ width: 400 }}>
+  const bodyStyle: React.CSSProperties = {
-    <ModalBody {...args}>{body}</ModalBody>
+    boxSizing: 'border-box',
-  </div>
+    border: '1px solid rgb(var(--lsd-border-primary)',
-)
+    padding: '30px',
+  }
+
+  return (
+    <ModalBody {...args} style={bodyStyle}>
+      {content}
+    </ModalBody>
+  )
+}
 
 Root.args = {
-  title: 'Title',
+  content:
-  body: 'A wise man can learn more from a foolish question than a fool can learn from a wise answer.',
+    'A wise man can learn more from a foolish question than a fool can learn from a wise answer.',
 }

packages/lsd-react/src/components/ModalBody/ModalBody.styles.ts

@@ -3,14 +3,6 @@ import { modalBodyClasses } from './ModalBody.classes'
 
 export const ModalBodyStyles = css`
   .${modalBodyClasses.root} {
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-
-    border: 1px solid rgb(var(--lsd-border-primary));
-    padding: 30px;
     margin: 18px 0;
   }
 `

packages/lsd-react/src/components/ModalFooter/ModalFooter.classes.ts

@@ -0,0 +1,3 @@
+export const modalFooterClasses = {
+  root: `lsd-modal-footer`,
+}

packages/lsd-react/src/components/ModalFooter/ModalFooter.stories.tsx

@@ -0,0 +1,48 @@
+import { Meta, Story } from '@storybook/react'
+import { ModalFooter, ModalFooterProps } from './ModalFooter'
+import { Button } from '../Button'
+
+export default {
+  title: 'ModalFooter',
+  component: ModalFooter,
+  argTypes: {
+    size: {
+      type: {
+        name: 'enum',
+        value: ['xsmall', 'small', 'medium', 'large'],
+      },
+    },
+  },
+} as Meta
+
+export const Root: Story<
+  ModalFooterProps & {
+    size: 'xsmall' | 'small' | 'medium' | 'large'
+  }
+> = ({ size, ...args }) => {
+  const footerStyle: React.CSSProperties = {
+    boxSizing: 'border-box',
+    border: '1px solid rgb(var(--lsd-border-primary)',
+    padding: '30px',
+  }
+
+  return (
+    <ModalFooter {...args} style={footerStyle}>
+      <ModalFooter>
+        <Button
+          size={size === 'xsmall' ? 'small' : size}
+          style={{
+            marginRight: 12,
+          }}
+        >
+          Button 1
+        </Button>
+        <Button size={size === 'xsmall' ? 'small' : size}>Button 2</Button>
+      </ModalFooter>
+    </ModalFooter>
+  )
+}
+
+Root.args = {
+  size: 'large',
+}

packages/lsd-react/src/components/ModalFooter/ModalFooter.styles.ts

@@ -0,0 +1,8 @@
+import { css } from '@emotion/react'
+import { modalFooterClasses } from './ModalFooter.classes'
+
+export const ModalFooterStyles = css`
+  .${modalFooterClasses.root} {
+    display: flex;
+  }
+`

packages/lsd-react/src/components/ModalFooter/ModalFooter.tsx

@@ -0,0 +1,28 @@
+import clsx from 'clsx'
+import React from 'react'
+import {
+  CommonProps,
+  omitCommonProps,
+  useCommonProps,
+} from '../../utils/useCommonProps'
+import { modalFooterClasses } from './ModalFooter.classes'
+
+export type ModalFooterProps = CommonProps &
+  Omit<React.HTMLAttributes<HTMLDivElement>, 'label'>
+
+export const ModalFooter: React.FC<ModalFooterProps> & {
+  classes: typeof modalFooterClasses
+} = ({ children, ...props }) => {
+  const commonProps = useCommonProps(props)
+
+  return (
+    <div
+      {...omitCommonProps(props)}
+      className={clsx(commonProps.className, modalFooterClasses.root)}
+    >
+      {children}
+    </div>
+  )
+}
+
+ModalFooter.classes = modalFooterClasses

packages/lsd-react/src/components/ModalFooter/index.ts

@@ -0,0 +1 @@
+export * from './ModalFooter'

packages/lsd-react/src/index.ts

@@ -33,3 +33,4 @@ export * from './components/Typography'
 export * from './components/NumberInput'
 export * from './components/Modal'
 export * from './components/ModalBody'
+export * from './components/ModalFooter'