@veracity/vui 2.24.2 → 2.25.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.24.2",
+  "version": "2.25.0-beta.0",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/core/vuiProvider/animations.ts

@@ -9,10 +9,10 @@ export const bounce = `
 	}
 `
 
-export const fadeDown = `
+export const fadeDown = (distance: number) => `
 	from {
 		opacity: 0;
-		transform: translateY(-20px)
+		transform: translateY(-${distance}px)
 	}
 	to {
 		opacity: 1;
@@ -29,10 +29,10 @@ export const fadeIn = `
 	}
 `
 
-export const fadeLeft = `
+export const fadeLeft = (distance: number) => `
 	from {
 		opacity: 0;
-		transform: translateX(20px)
+		transform: translateX(${distance}px)
 	}
 	to {
 		opacity: 1;
@@ -49,10 +49,10 @@ export const fadeOut = `
 	}
 `
 
-export const fadeRight = `
+export const fadeRight = (distance: number) => `
 	from {
 		opacity: 0;
-		transform: translateX(-20px)
+		transform: translateX(-${distance}px)
 	}
 	to {
 		opacity: 1;
@@ -60,10 +60,10 @@ export const fadeRight = `
 	}
 `
 
-export const fadeUp = `
+export const fadeUp = (distance: number) => `
 	from {
 		opacity: 0;
-		transform: translateY(20px)
+		transform: translateY(${distance}px)
 	}
 	to {
 		opacity: 1;

package/src/core/vuiProvider/globalStyle.tsx

@@ -77,7 +77,7 @@ export default createGlobalStyle<GlobalStyleProps>`
   }
 
   @keyframes vui-fadeDown {
-  ${fadeDown}
+  ${fadeDown(20)}
   }
 
   @keyframes vui-fadeIn {
@@ -85,19 +85,28 @@ export default createGlobalStyle<GlobalStyleProps>`
   }
 
   @keyframes vui-fadeLeft {
-  ${fadeLeft}
+  ${fadeLeft(20)}
+  }
+
+  @keyframes vui-fadeLeftLong {
+  ${fadeLeft(600)}
   }
 
   @keyframes vui-fadeOut {
   ${fadeOut}
   }
 
+
   @keyframes vui-fadeRight {
-  ${fadeRight}
+  ${fadeRight(20)}
+  }
+
+  @keyframes vui-fadeRightLong {
+  ${fadeRight(600)}
   }
 
   @keyframes vui-fadeUp {
-  ${fadeUp}
+  ${fadeUp(20)}
   }
 
   @keyframes vui-pulse {

package/src/dialog/consts.ts

@@ -28,6 +28,18 @@ export const dialogStatusMapping: DialogStatusMapping = {
   },
 }
 
+export const modalAnimation = {
+  left: 'fadeRightLong',
+  center: 'fadeDown',
+  right: 'fadeLeftLong',
+}
+
+export const modalJustifyContent = {
+  left: 'start',
+  center: 'center',
+  right: 'end',
+}
+
 export const containerId = 'vui-dynamic-container'
 
 export const modalClass = 'vui-modal'

package/src/dialog/dialog.tsx

@@ -1,8 +1,9 @@
-import React, { useRef } from 'react'
+import { useRef } from 'react'
 
 import { styled, useStyleConfig, vui, VuiComponent } from '../core'
 import { Modal } from '../modal'
 import { cs, isJsx, isReactText, random, useIds } from '../utils'
+import { modalAnimation, modalJustifyContent } from './consts'
 import { DialogProvider } from './context'
 import { DialogProps } from './dialog.types'
 import DialogBody from './dialogBody'
@@ -20,8 +21,6 @@ export const DialogBase = styled.divBox`
   box-shadow: modal;
   display: flex;
   flex-direction: column;
-  margin: 16px;
-  max-height: calc(100vh - 32px); // full height - margin top/bottom
   width: 100%;
 `
 
@@ -46,6 +45,7 @@ export const Dialog = vui<'div', DialogProps>((props, ref) => {
     id,
     isOpen,
     modalProps: modalPropsProp,
+    placement = 'center',
     onClose,
     size,
     status,
@@ -60,8 +60,8 @@ export const Dialog = vui<'div', DialogProps>((props, ref) => {
   const [dialogId, bodyId, titleId] = useIds(idRef.current, ['dialog', 'dialog-body', 'dialog-title'])
 
   const body = isReactText(bodyProp) ? { children: bodyProp } : bodyProp
-  const showFooter = Boolean(footer || cancelButton || submitButton)
   const showHeader = Boolean(header || closeButton || icon || title)
+  const showFooter = Boolean(footer || cancelButton || submitButton)
 
   const ariaProps = {
     'aria-describedby': bodyId,
@@ -69,8 +69,13 @@ export const Dialog = vui<'div', DialogProps>((props, ref) => {
   }
 
   const modalProps = {
+    animation: modalAnimation[placement as keyof typeof modalAnimation],
+    contentProps: {
+      alignItems: placement === 'center' ? 'center' : 'auto',
+      justifyContent: modalJustifyContent[placement as keyof typeof modalJustifyContent],
+      ...modalPropsProp?.contentProps,
+    },
     ...modalPropsProp,
-    contentProps: { alignItems: 'center', justifyContent: 'center', ...modalPropsProp?.contentProps },
   }
 
   const context = { bodyId, icon, isOpen, onClose, size, status, titleId, variant }
@@ -81,6 +86,7 @@ export const Dialog = vui<'div', DialogProps>((props, ref) => {
         <DialogBase
           className={cs('vui-dialog', className)}
           id={dialogId}
+          maxH={placement === 'center' ? 'calc(100vh - 32px)' : '100%'}
           ref={ref}
           role="dialog"
           {...ariaProps}

package/src/dialog/dialog.types.ts

@@ -1,5 +1,3 @@
-import { ReactText } from 'react'
-
 import { BoxProps } from '../box'
 import { ButtonProps, IconButtonProps } from '../button'
 import { HeadingProps } from '../heading'
@@ -26,11 +24,13 @@ export type DialogHeaderProps = PropsOf<'div', BoxProps & Pick<DialogProps, 'clo
 
 export type DialogIconProps = PropsOf<'svg', IconProps>
 
+export type DialogPlacement = 'left' | 'center' | 'right'
+
 export type DialogProps = SystemProps &
   ThemingProps<'Dialog'> &
   Pick<ModalProps, 'isOpen' | 'onClose'> & {
     /** Socket for the main Dialog content. */
-    body?: ReactText | DialogBodyProps | JSX.Element
+    body?: string | number | DialogBodyProps | JSX.Element
     /** Socket for a cancel button in the Dialog Footer. */
     cancelButton?: DialogCancelButtonProps | JSX.Element
     /** Socket for a close icon button in the Dialog Header. */
@@ -45,6 +45,8 @@ export type DialogProps = SystemProps &
     icon?: IconProp | DialogIconProps | JSX.Element
     /** The props being passed into the internal Modal component. */
     modalProps?: ModalProps
+    /** Position of the dialog @default center */
+    placement?: DialogPlacement
     /** Adds an icon for a given status, such as error or warning. */
     status?: DialogStatus
     /** Socket for a submit button in the Dialog Footer. */

package/src/drawer/drawer.tsx

@@ -0,0 +1,24 @@
+import Box from '../box'
+import { omitThemingProps, useStyleConfig, vui } from '../core'
+import { Dialog } from '../dialog'
+import { cs } from '../utils'
+import { DrawerProps } from './drawer.types'
+
+/** Drawer component based on Dialog. */
+export const Drawer = vui<'div', DrawerProps>((props, ref) => {
+  const { children, className, dialogProps, isLeft, isOpen, onClose } = omitThemingProps(props)
+  const styles = useStyleConfig('Drawer', props)
+
+  const placement = isLeft ? 'left' : 'right'
+
+  return (
+    <Dialog isOpen={isOpen} onClose={onClose} placement={placement} ref={ref} {...dialogProps}>
+      <Box className={cs('vui-drawer', className)} column p={3} {...styles} h="100vh" overflow="hidden">
+        {children}
+      </Box>
+    </Dialog>
+  )
+})
+
+Drawer.displayName = 'Drawer'
+export default Drawer

package/src/drawer/drawer.types.ts

@@ -0,0 +1,15 @@
+import { DialogProps } from '../dialog'
+import { SystemProps } from '../system'
+import { ThemingProps } from '../theme'
+
+export type DrawerProps = SystemProps &
+  ThemingProps<'Drawer'> & {
+    /** The props being passed into the internal Dialog component. */
+    dialogProps?: DialogProps
+    /** Determines if the drawer is on the left side of the screen. @default false */
+    isLeft?: boolean
+    /** Determines if the drawer is open. @default false */
+    isOpen?: boolean
+    /** Function to be called when the drawer is closed */
+    onClose?: () => void
+  }

package/src/drawer/index.ts

@@ -0,0 +1,3 @@
+export * from './drawer'
+export { default } from './drawer'
+export * from './drawer.types'

package/src/drawer/theme.ts

@@ -0,0 +1,14 @@
+const baseStyle = {}
+
+const defaultProps = {}
+
+const sizes = {}
+
+const variants = {}
+
+export default {
+  baseStyle,
+  defaultProps,
+  sizes,
+  variants,
+}

package/src/index.ts

@@ -16,6 +16,7 @@ export * from './datePicker'
 export * from './dialog'
 export * from './divider'
 export * from './dragAndDrop'
+export * from './drawer'
 export * from './focusLock'
 export * from './footer'
 export * from './grid'

package/src/modal/modal.tsx

@@ -20,6 +20,7 @@ import { manager, useModalManager } from './modalManager'
 export const Modal = vui<'div', ModalProps>((props, ref) => {
   const {
     allowPinchZoom,
+    animation = 'fadeDown',
     children,
     className,
     contentProps,
@@ -103,7 +104,7 @@ export const Modal = vui<'div', ModalProps>((props, ref) => {
             isDisabled={disableTrapFocus}
             returnFocus={!disableReturnFocus}
           >
-            <ModalContent animation="fadeDown" {...contentProps}>
+            <ModalContent animation={animation} {...contentProps}>
               {cloneElement(children, childProps)}
             </ModalContent>
           </FocusLock>

package/src/modal/modal.types.ts

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react'
 
 import { FocusableElement } from '../focusLock/focusLock.types'
-import { SystemProps } from '../system'
+import { AnimationProp, SystemProps } from '../system'
 import { ThemingProps } from '../theme'
 import { MouseEvent } from '../utils'
 
@@ -15,6 +15,8 @@ export type ModalProps = SystemProps &
   ThemingProps<'Modal'> & {
     /** Handle zoom/pinch gestures on iOS devices when scroll locking is enabled. */
     allowPinchZoom?: boolean
+    /** The animation to use when the Modal is open. @default fadeDown */
+    animation?: AnimationProp
     /** A single child content element. */
     children: ReactElement
     /** Props passed to internal ModalContent component. */

package/src/theme/components.ts

@@ -13,6 +13,7 @@ import Definition from '../definition/theme'
 import Dialog from '../dialog/theme'
 import Divider from '../divider/theme'
 import DragAndDrop from '../dragAndDrop/theme'
+import Drawer from '../drawer/theme'
 import Footer from '../footer/theme'
 import Grid from '../grid/theme'
 import Header from '../header/theme'
@@ -70,6 +71,7 @@ export default {
   Dialog,
   Divider,
   DragAndDrop,
+  Drawer,
   Footer,
   Grid,
   Header,

package/src/theme/foundations/animations.ts

@@ -1,10 +1,13 @@
 export default {
+  none: 'none',
   bounce: 'vui-bounce 1s infinite',
   fadeDown: 'vui-fadeDown 0.2s ease-in-out',
   fadeIn: 'vui-fadeIn 0.2s ease-in-out',
   fadeLeft: 'vui-fadeLeft 0.2s ease-in-out',
+  fadeLeftLong: 'vui-fadeLeftLong 0.3s ease-out',
   fadeOut: 'vui-fadeOut 0.2s ease-in-out',
   fadeRight: 'vui-fadeRight 0.2s ease-in-out',
+  fadeRightLong: 'vui-fadeRightLong 0.3s ease-out',
   fadeUp: 'vui-fadeUp 0.2s ease-in-out',
   pulse: 'vui-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
   spin: 'vui-spin 1s linear infinite',