Merge pull request #90 from ynput/develop

Release 1.0.5
ynput · May 6, 2024 · b372cfe · b372cfe
2 parents 0a485ce + 8ddec04
commit b372cfe
Show file tree

Hide file tree

Showing 3 changed files with 116 additions and 83 deletions.
diff --git a/src/Overlay/Dialog/Dialog.stories.tsx b/src/Overlay/Dialog/Dialog.stories.tsx
@@ -12,46 +12,60 @@ export default meta
 
 type Story = StoryObj<typeof Dialog>
 
-
 const HeaderContent = () => <div>This is title of dialog</div>
 
 const BodyContent = () => (
   <>
-    <div>Are you sure you want to permanently delete this folder and all its associated tasks, products, versions, representations, and workfiles?</div>
+    <div>
+      Are you sure you want to permanently delete this folder and all its associated tasks,
+      products, versions, representations, and workfiles?
+    </div>
   </>
 )
 
 const FooterContent = () => <span>Ynput is awesome. Copyright ©2024 Ynput</span>
 
 const closeProps = {
-  label: 'Close'
+  label: 'Close',
 }
 
-const Template = () => {
-
+const Template = (args: Story['args']) => {
   const [openModal, setOpenModal] = useState(false)
-  
+
   return (
     <>
       <Button onClick={() => setOpenModal(!openModal)} icon="open_in_full">
         Show Modal
       </Button>
-      <Dialog 
-        header={<HeaderContent/>}
+      <Dialog
+        header={<HeaderContent />}
         children={<BodyContent />}
-        footer={<FooterContent />}
         isOpen={openModal}
         onClose={() => setOpenModal(false)}
         closeProps={closeProps}
         hideCancelButton={false}
-        size='full'
-        variant='dialog'
+        size="full"
         onShow={() => console.log('test123')}
+        {...args}
       />
     </>
   )
 }
 
 export const Default: Story = {
-  render: () => Template(),
+  render: Template,
+}
+
+export const Footer: Story = {
+  render: Template,
+  args: {
+    footer: <FooterContent />,
+  },
+}
+
+export const DialogVariant: Story = {
+  render: Template,
+  args: {
+    variant: 'dialog',
+  },
 }
diff --git a/src/Overlay/Dialog/Dialog.styled.ts b/src/Overlay/Dialog/Dialog.styled.ts
@@ -1,7 +1,6 @@
 import styled, { css, keyframes } from 'styled-components'
 import { Button } from '../../Button'
-import { titleLarge } from '../../theme'
-
+import { titleMedium } from '../../theme'
 
 const fadeInAnimation = keyframes`
   0% {
@@ -14,63 +13,72 @@ const fadeInAnimation = keyframes`
   }
 `
 
-const widthSizes  = {
+const widthSizes = {
   sm: '400px',
   md: '600px',
   lg: '800px',
   full: '85%',
-};
+}
 
-const heightSizes  = {
+const heightSizes = {
   sm: '300px',
   md: '400px',
   lg: '500px',
   full: '85%',
-};
-
-const getWidthSize = (size: string) => size ? widthSizes[size as keyof typeof widthSizes] : widthSizes.sm;
-const getHeightSize = (size: string) => size ? heightSizes[size as keyof typeof heightSizes] : heightSizes.sm;
+}
 
+const getWidthSize = (size: string) =>
+  size ? widthSizes[size as keyof typeof widthSizes] : widthSizes.sm
+const getHeightSize = (size: string) =>
+  size ? heightSizes[size as keyof typeof heightSizes] : heightSizes.sm
 
 export const Dialog = styled.dialog<{ $size?: string }>`
-    background-color: var(--md-sys-color-surface-container);
-    border: none;
-    border-radius: var(--border-radius-m);
-    flex-direction: column;
-    gap: 16px;
-    padding: 0;
-    min-width: 200px;
-    min-height: 100px;
-    max-width: 85%;
-    width: ${({ $size }) => $size ? css` ${getWidthSize($size)}` : '200px'};
-    max-Height: ${({ $size }) => $size ? css` ${getHeightSize($size)}` : '100px' };
-
-    /* Backdrop property affects inactive area around modal */
-    &::backdrop {
-      background-color: rgba(0, 0, 0, 0.3);
-    }
-
-    /* Styles for dialogs that carry modal behavior */
-    &:modal {
-    }
+  background-color: var(--md-sys-color-surface-container);
+  border: none;
+  border-radius: var(--border-radius-m);
+  flex-direction: column;
+  padding: 0;
+  min-width: 200px;
+  min-height: 100px;
+  max-width: 85%;
+  width: ${({ $size }) =>
+    $size
+      ? css`
+          ${getWidthSize($size)}
+        `
+      : '200px'};
+  max-height: ${({ $size }) =>
+    $size
+      ? css`
+          ${getHeightSize($size)}
+        `
+      : '100px'};
+
+  /* Backdrop property affects inactive area around modal */
+  &::backdrop {
+    background-color: rgba(0, 0, 0, 0.5);
+  }
 
-    /* Styles for dialogs that carry non-modal behavior */
-    &:not(:modal) {
-    }
+  /* Styles for dialogs that carry modal behavior */
+  &:modal {
+  }
 
-    &[open] {
-      display: flex;
-      animation: ${fadeInAnimation} 150ms ease-in-out forwards, ${fadeInAnimation} 150ms ease-in-out backwards;
-      animation-fill-mode: both;
-    }
+  /* Styles for dialogs that carry non-modal behavior */
+  &:not(:modal) {
+  }
 
+  &[open] {
+    display: flex;
+    animation: ${fadeInAnimation} 150ms ease-in-out forwards,
+      ${fadeInAnimation} 150ms ease-in-out backwards;
+    animation-fill-mode: both;
+  }
 `
 
 export const Close = styled(Button)`
   position: absolute;
   right: 8px;
-  top: 50%;
-  transform: translateY(-50%);
+  top: 8px;
 `
 
 export const BaseDialogEdge = styled.div`
@@ -79,16 +87,20 @@ export const BaseDialogEdge = styled.div`
   gap: 8px;
 `
 
-
-export const Header = styled(BaseDialogEdge)<{ hideCancelButton?: boolean }>`
+export const Header = styled(BaseDialogEdge)`
   position: relative;
   display: flex;
   flex-direction: column;
   padding: 16px;
-  ${({ hideCancelButton }) => !hideCancelButton && css`padding-right: 32px;`}
-  ${titleLarge}
-  & > * { 
-    ${titleLarge}
+  padding-right: 48px;
+
+  &.hideCancelButton {
+    padding-right: 16px;
+  }
+
+  ${titleMedium}
+  & > * {
+    ${titleMedium}
   }
 `
 
@@ -105,4 +117,3 @@ export const Body = styled.div`
   overflow: auto;
   flex-grow: 1;
 `
-
diff --git a/src/Overlay/Dialog/Dialog.tsx b/src/Overlay/Dialog/Dialog.tsx
@@ -9,6 +9,7 @@ export interface DialogProps extends Omit<React.HTMLAttributes<HTMLDialogElement
   footer?: React.ReactNode
   closeProps?: ButtonProps
   hideCancelButton?: boolean
+  showCloseButton?: boolean
   isOpen: boolean
   onClose?: () => void
   onShow?: () => void
@@ -31,14 +32,15 @@ export const Dialog = forwardRef<HTMLDialogElement, DialogProps>((props) => {
     header,
     footer,
     hideCancelButton = false,
+    showCloseButton = false,
     closeProps,
     isOpen,
     onClose,
     className,
     classNames,
     size,
     onShow,
-    variant = 'modal'
+    variant = 'modal',
   } = props
 
   const [isModalOpen, setModalOpen] = useState(isOpen)
@@ -53,11 +55,11 @@ export const Dialog = forwardRef<HTMLDialogElement, DialogProps>((props) => {
   useEffect(() => {
     const modalElement = modalRef.current
     if (!modalElement) return
-    const showDialog =  variant === 'dialog' && modalElement.show()
-    const showModal =  variant === 'modal' && modalElement.showModal()
+    const showDialog = variant === 'dialog' && modalElement.show()
+    const showModal = variant === 'modal' && modalElement.showModal()
     const showAll = () => {
-        showDialog || showModal
-        onShow && onShow()
+      showDialog || showModal
+      onShow && onShow()
     }
     isModalOpen ? showAll() : modalElement.close()
   }, [isModalOpen])
@@ -75,27 +77,33 @@ export const Dialog = forwardRef<HTMLDialogElement, DialogProps>((props) => {
       className={clsx('modal', className)}
       {...props}
     >
-      <Styled.Header className={clsx('header', classNames?.header)}>
-          {header ? header : ''}
-          {hideCancelButton ? null : (
-            <Styled.Close 
-              className={clsx('cancelButton', classNames?.cancelButton)}
-              icon="close"
-              variant="text"
-              autoFocus
-              onClick={handleCloseModal}
-            /> )}
-      </Styled.Header>
-      {children && <Styled.Body className={clsx('body', classNames?.body)}>{children}</Styled.Body>}
-      <Styled.Footer className={clsx('footer', classNames?.footer)}>
-          { footer && footer } 
-          <Button
-            label={!!closeProps?.label ? closeProps.label : 'Cancel'}
-            className={clsx('closeButton', classNames?.closeButton)}
+      <Styled.Header className={clsx('header', { hideCancelButton }, classNames?.header)}>
+        {header ? header : ''}
+        {hideCancelButton ? null : (
+          <Styled.Close
+            className={clsx('cancelButton', classNames?.cancelButton)}
+            icon="close"
             variant="text"
+            autoFocus
             onClick={handleCloseModal}
-            {...closeProps}
           />
-      </Styled.Footer>
+        )}
+      </Styled.Header>
+      {children && <Styled.Body className={clsx('body', classNames?.body)}>{children}</Styled.Body>}
+      {(footer || showCloseButton) && (
+        <Styled.Footer className={clsx('footer', classNames?.footer)}>
+          {showCloseButton && (
+            <Button
+              label={!!closeProps?.label ? closeProps.label : 'Close'}
+              className={clsx('closeButton', classNames?.closeButton)}
+              variant="text"
+              onClick={handleCloseModal}
+              {...closeProps}
+            />
+          )}
+          {footer && footer}
+        </Styled.Footer>
+      )}
     </Styled.Dialog>
-)})
+  )
+})