@veracity/vui 2.18.1 → 2.18.2-beta.0

package/src/theme/foundations/colors.ts

@@ -106,7 +106,7 @@ export const darkBlue = {
   15: 'hsl(223, 67%, 15%)',
   10: 'hsl(223, 67%, 10%)',
   5: 'hsl(223, 67%, 5%)',
-  main: 'hsl(223, 67%, 18%)'
+  main: 'hsl(223, 67%, 18%)',
 }
 
 export const digiGreen = {
@@ -129,7 +129,7 @@ export const digiGreen = {
   15: 'hsl(139, 100%, 15%)',
   10: 'hsl(139, 100%, 10%)',
   5: 'hsl(139, 100%, 5%)',
-  main: 'hsl(139, 100%, 78%)'
+  main: 'hsl(139, 100%, 78%)',
 }
 
 export const earth = {
@@ -152,7 +152,7 @@ export const earth = {
   15: 'hsl(35, 53%, 15%)',
   10: 'hsl(35, 53%, 10%)',
   5: 'hsl(35, 53%, 5%)',
-  main: 'hsl(35, 53%, 89%)'
+  main: 'hsl(35, 53%, 89%)',
 }
 
 export const energyRed = {
@@ -175,7 +175,7 @@ export const energyRed = {
   15: 'hsl(357, 83%, 15%)',
   10: 'hsl(357, 83%, 10%)',
   5: 'hsl(357, 83%, 5%)',
-  main: 'hsl(357, 83%, 54%)'
+  main: 'hsl(357, 83%, 54%)',
 }
 
 export const landGreen = {
@@ -198,7 +198,7 @@ export const landGreen = {
   15: 'hsl(114, 49%, 15%)',
   10: 'hsl(114, 49%, 10%)',
   5: 'hsl(114, 49%, 5%)',
-  main: 'hsl(114, 49%, 41%)'
+  main: 'hsl(114, 49%, 41%)',
 }
 
 export const seaBlue = {
@@ -221,7 +221,7 @@ export const seaBlue = {
   15: 'hsl(218, 100%, 15%)',
   10: 'hsl(218, 100%, 10%)',
   5: 'hsl(218, 100%, 5%)',
-  main: 'hsl(218, 100%, 28%)'
+  main: 'hsl(218, 100%, 28%)',
 }
 
 export const sandstone = {
@@ -245,7 +245,7 @@ export const sandstone = {
   15: 'hsl(40, 3%, 15%)',
   10: 'hsl(40, 3%, 10%)',
   5: 'hsl(40, 3%, 5%)',
-  main: 'hsl(40, 3%, 79%)'
+  main: 'hsl(40, 3%, 79%)',
 }
 
 export const skyBlue = {
@@ -271,7 +271,7 @@ export const skyBlue = {
   main: 'hsl(196, 74%, 77%)', // skyBlue.77
   active: 'hsl(196, 74%, 95%)', // skyBlue.95
   hover: 'hsl(196, 74%, 90%)', // skyBlue.90
-  selected: 'hsl(196, 74%, 95%)' // skyBlue.95
+  selected: 'hsl(196, 74%, 95%)', // skyBlue.95
 }
 
 export const sunflower = {
@@ -294,7 +294,7 @@ export const sunflower = {
   15: 'hsl(55, 100%, 15%)',
   10: 'hsl(55, 100%, 10%)',
   5: 'hsl(55, 100%, 5%)',
-  main: 'hsl(55, 100%, 73%)'
+  main: 'hsl(55, 100%, 73%)',
 }
 
 export const terracotta = {
@@ -317,7 +317,7 @@ export const terracotta = {
   15: 'hsl(34, 100%, 15%)',
   10: 'hsl(34, 100%, 10%)',
   5: 'hsl(34, 100%, 5%)',
-  main: 'hsl(34, 100%, 35%)'
+  main: 'hsl(34, 100%, 35%)',
 }
 
 export const warmGrey = {
@@ -340,7 +340,7 @@ export const warmGrey = {
   15: 'hsl(30, 8%, 15%)',
   10: 'hsl(30, 8%, 10%)',
   5: 'hsl(30, 8%, 5%)',
-  main: 'hsl(30, 8%, 56%)'
+  main: 'hsl(30, 8%, 56%)',
 }
 
 export const blue = {
@@ -353,7 +353,7 @@ export const blue = {
   70: '#1e86e5',
   80: '#0067c5',
   90: '#075094',
-  100: '#003f79'
+  100: '#003f79',
 }
 
 export const green = {
@@ -366,7 +366,7 @@ export const green = {
   70: '#4ea344',
   80: '#36842d',
   90: '#276121',
-  100: '#024019'
+  100: '#024019',
 }
 
 export const grey = {
@@ -379,7 +379,7 @@ export const grey = {
   70: '#768b9c',
   80: '#698091',
   90: '#586c7a',
-  100: '#465663'
+  100: '#465663',
 }
 
 export const pink = {
@@ -392,7 +392,7 @@ export const pink = {
   70: '#ee00c1',
   80: '#da00b1',
   90: '#a00082',
-  100: '#72005c'
+  100: '#72005c',
 }
 
 export const prussian = {
@@ -405,7 +405,7 @@ export const prussian = {
   70: '#003b57',
   80: '#002a3e',
   90: '#001620',
-  100: '#000b11'
+  100: '#000b11',
 }
 
 export const red = {
@@ -418,7 +418,7 @@ export const red = {
   70: '#e84148',
   80: '#d6383f',
   90: '#b62f3a',
-  100: '#962730'
+  100: '#962730',
 }
 
 export const yellow = {
@@ -431,13 +431,13 @@ export const yellow = {
   70: '#f4b40d',
   80: '#e29c13',
   90: '#b67b08',
-  100: '#83591a'
+  100: '#83591a',
 }
 
 export const disabled = {
   bg: sandstone[95],
   border: sandstone[10],
-  color: sandstone[10]
+  color: sandstone[10],
 }
 
 export default {
@@ -519,5 +519,5 @@ export default {
   prussian,
   red,
   yellow,
-  disabled
+  disabled,
 }

package/src/theme/foundations/durations.ts

@@ -2,5 +2,5 @@ export default {
   instant: '100ms',
   fast: '200ms',
   normal: '300ms',
-  slow: '400ms'
+  slow: '400ms',
 }

package/src/theme/foundations/fontSizes.ts

@@ -2,5 +2,5 @@ export default {
   xs: 12,
   sm: 14,
   md: 16,
-  lg: 18
+  lg: 18,
 }

package/src/theme/foundations/fontWeights.ts

@@ -1,5 +1,5 @@
 export default {
   regular: '400',
   medium: '500',
-  demi: '600'
+  demi: '600',
 }

package/src/theme/foundations/fonts.ts

@@ -1,4 +1,4 @@
 export default {
   avenir: `'Avenir Next', Verdana, Geneva, Tahoma, sans-serif`,
-  dnvDisplay: `'DNV Display'`
+  dnvDisplay: `'DNV Display'`,
 }

package/src/theme/foundations/gridTemplateColumns.ts

@@ -10,5 +10,5 @@ export default {
   9: 'repeat(9, minmax(0, 1fr))',
   10: 'repeat(10, minmax(0, 1fr))',
   11: 'repeat(11, minmax(0, 1fr))',
-  12: 'repeat(12, minmax(0, 1fr))'
+  12: 'repeat(12, minmax(0, 1fr))',
 }

package/src/theme/foundations/gridTemplateRows.ts

@@ -4,5 +4,5 @@ export default {
   3: 'repeat(3, minmax(0, 1fr))',
   4: 'repeat(4, minmax(0, 1fr))',
   5: 'repeat(5, minmax(0, 1fr))',
-  6: 'repeat(6, minmax(0, 1fr))'
+  6: 'repeat(6, minmax(0, 1fr))',
 }

package/src/theme/foundations/index.ts

@@ -39,5 +39,5 @@ export default {
   transforms,
   transitions,
   timingFunctions,
-  zIndices
+  zIndices,
 }

package/src/theme/foundations/radii.ts

@@ -8,5 +8,5 @@ export default {
   lg: 4,
   /** xl radius. @deprecated */
   xl: 6,
-  round: 9999
+  round: 9999,
 }

package/src/theme/foundations/screens.ts

@@ -6,5 +6,5 @@ export default {
   lg: 1024,
   xl: 1280,
   xxl: 1536,
-  '2xl': 1536 // Obsolete, please use 'xxl' instead
+  '2xl': 1536, // Obsolete, please use 'xxl' instead
 }

package/src/theme/foundations/shadows.ts

@@ -23,5 +23,5 @@ export default {
   l2: `-4px 0 12px 0 ${greyLight}`,
   l3: `-7px 0 20px 0 ${greyDark}`,
   l4: `-12px 0 30px 0 ${greyDark}`,
-  modal: `0 12px 30px 0 ${modal}`
+  modal: `0 12px 30px 0 ${modal}`,
 }

package/src/theme/foundations/transformers.ts

@@ -12,5 +12,5 @@ export default {
   },
   space: (value: string | number) => {
     return typeof value === 'string' ? value : `${value * 8}px`
-  }
+  },
 }

package/src/theme/foundations/zIndices.ts

@@ -2,5 +2,5 @@ export default {
   drawer: 1300,
   modal: 1400,
   toast: 1500,
-  tooltip: 1600
+  tooltip: 1600,
 }

package/src/theme/themePlaceholder.ts

@@ -13,5 +13,5 @@ export default {
   defaultProps,
   parts,
   sizes,
-  variants
+  variants,
 }

package/src/toast/useToast.tsx

@@ -11,9 +11,9 @@ export const slowToastDuration = 8000
 
 const setup: ToastSetup = {
   options: {
-    duration: defaultDuration
+    duration: defaultDuration,
   },
-  componentList: []
+  componentList: [],
 }
 
 const getDurationTime = (duration: ToastDuration) => (duration === 'fast' ? fastToastDuration : slowToastDuration)
@@ -41,7 +41,7 @@ export const useToast = () => {
           verticalAlign="center"
           w={1}
         />
-      )
+      ),
     }
 
     addToast(toast)
@@ -53,27 +53,27 @@ export const useToast = () => {
 
   const showInfo = useCallback(
     (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'info', duration }),
-    [showToast]
+    [showToast],
   )
 
   const showSuccess = useCallback(
     (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'success', duration }),
-    [showToast]
+    [showToast],
   )
 
   const showWarning = useCallback(
     (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'warning', duration }),
-    [showToast]
+    [showToast],
   )
 
   const showError = useCallback(
     (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'error', duration }),
-    [showToast]
+    [showToast],
   )
 
   const showLoading = useCallback(
     (text: ReactNode, duration: ToastDuration = defaultDuration) => showToast({ text, status: 'loading', duration }),
-    [showToast]
+    [showToast],
   )
 
   return {
@@ -83,6 +83,6 @@ export const useToast = () => {
     showSuccess,
     showWarning,
     showError,
-    showLoading
+    showLoading,
   }
 }

package/src/tooltip/consts.ts

@@ -12,27 +12,27 @@ export const pointerPlacement = {
     bottom: `-${pointerSize / 2}px`,
     left: '50%',
     right: 'auto',
-    translate: '-50%, 0'
+    translate: '-50%, 0',
   },
   bottom: {
     top: `-${pointerSize / 2}px`,
     bottom: 'auto',
     left: '50%',
     right: 'auto',
-    translate: '-50%, 0'
+    translate: '-50%, 0',
   },
   left: {
     top: `50%`,
     bottom: 'auto',
     left: 'auto',
     right: '-4px',
-    translate: '-50%, -50%'
+    translate: '-50%, -50%',
   },
   right: {
     top: `50%`,
     bottom: 'auto',
     left: '2px',
     right: 'auto',
-    translate: '0, -50%'
-  }
+    translate: '0, -50%',
+  },
 }

package/src/tooltip/tooltip.tsx

@@ -22,7 +22,7 @@ export const Tooltip = (props: TooltipProps) => {
     linkProps,
     maxWidth = '400px',
     text = 'Tooltip',
-    placement = 'top'
+    placement = 'top',
   } = props
 
   const isDesktop = useUp('md')
@@ -64,9 +64,9 @@ export const Tooltip = (props: TooltipProps) => {
         modifiers: [
           {
             name: 'flip',
-            enabled: false
-          }
-        ]
+            enabled: false,
+          },
+        ],
       }}
     >
       {children as ReactElement<any, string | JSXElementConstructor<any>> | undefined}

package/src/tree/theme.ts

@@ -2,7 +2,7 @@ const baseStyle = {}
 
 const defaultProps = {
   size: 'xl',
-  variant: 'default'
+  variant: 'default',
 }
 
 const parts = ['container', 'icon', 'firstLevelItem', 'item', 'text']
@@ -13,26 +13,26 @@ const sizes = {
       fontSize: 'md', // 16px
       height: 48,
       lineHeight: '24px',
-      py: '12px'
+      py: '12px',
     },
     icon: {
       height: 18,
-      width: 18
-    }
-  }
+      width: 18,
+    },
+  },
 }
 
 const variants = {
   default: {
     container: {
-      bg: 'white'
+      bg: 'white',
     },
     firstLevelItem: {
       bg: 'white',
       color: 'seaBlue.main',
       activeColor: 'seaBlue.main',
       activeBg: 'skyBlue.85',
-      hoverBg: 'skyBlue.80' // '#A6DEF2'
+      hoverBg: 'skyBlue.80', // '#A6DEF2'
     },
     item: {
       bg: 'white',
@@ -41,13 +41,13 @@ const variants = {
       activeBg: 'skyBlue.85',
       hoverBg: 'skyBlue.80',
       selectedBg: 'skyBlue.10',
-      px: 2
-    }
+      px: 2,
+    },
   },
   dark: {
     container: {
       bg: 'darkBlue.main',
-      color: 'white'
+      color: 'white',
     },
     firstLevelItem: {
       bg: 'darkBlue.main',
@@ -55,7 +55,7 @@ const variants = {
       activeBg: 'darkBlue.25',
       activeColor: 'seaBlue.main',
       hoverBg: 'darkBlue.25', //'#152D6A'
-      hoverColor: 'white'
+      hoverColor: 'white',
     },
     item: {
       bg: 'skyBlue.97',
@@ -63,9 +63,9 @@ const variants = {
       activeBg: 'skyBlue.85',
       activeColor: 'seaBlue.main',
       hoverBg: 'skyBlue.80',
-      hoverColor: 'seaBlue.main'
-    }
-  }
+      hoverColor: 'seaBlue.main',
+    },
+  },
 }
 
 export default {
@@ -73,5 +73,5 @@ export default {
   defaultProps,
   parts,
   sizes,
-  variants
+  variants,
 }

package/src/tree/tree.tsx

@@ -49,7 +49,7 @@ export const Tree = vui<'div', TreeProps>((props, ref) => {
             items: child.props.items || items,
             isCollapsed: child.props.isCollapsed,
             disabled: child.props.disabled,
-            onClickTreeItem: onClickTreeItem
+            onClickTreeItem: onClickTreeItem,
           } as unknown as TreeItemProps)
         }
       })

package/src/tree/treeItem.tsx

@@ -132,7 +132,7 @@ export const TreeItem = vui<'li', TreeItemProps>((props, ref) => {
 
   const aliasedProps = filterUndefined({
     'aria-expanded': isCollapsable ? !collapsedInternal : undefined,
-    role: 'treeitem'
+    role: 'treeitem',
   })
 
   // hoverBg cannot be styled directly from theme, it has to be JS manipulated because of event propagation
@@ -170,7 +170,7 @@ export const TreeItem = vui<'li', TreeItemProps>((props, ref) => {
           className={cs(
             'vui-treeItem-permanent',
             isActiveInternal ? 'vui-treeItem-active' : '',
-            isFirstLevel ? 'vui-treeItem-firstLevel' : ''
+            isFirstLevel ? 'vui-treeItem-firstLevel' : '',
           )}
           fontWeight={isActiveInternal ? '600' : '500'}
           pl={`${innerBoxPl}px`}

package/src/tutorial/consts.ts

@@ -1,5 +1,5 @@
 export const tutorialColors = {
   bg: 'darkBlue.main',
   buttonColor: 'digiGreen.main',
-  color: 'white'
+  color: 'white',
 }

package/src/tutorial/tutorial.tsx

@@ -18,7 +18,7 @@ export function Tutorial({
   title,
   id,
   placement = 'right',
-  showSkipButton
+  showSkipButton,
 }: TutorialProps) {
   const { isVisible, setIsVisible, saveDisplayed } = useTutorial(id)
 
@@ -50,9 +50,9 @@ export function Tutorial({
         modifiers: [
           {
             name: 'flip',
-            enabled: false
-          }
-        ]
+            enabled: false,
+          },
+        ],
       }}
       visible={isVisible}
     >

package/src/tutorial/tutorialCard.tsx

@@ -14,7 +14,7 @@ export function TutorialCard({
   showSkipButton,
   onAction,
   onDismiss,
-  onFinish
+  onFinish,
 }: TutorialCardProps) {
   const [steps, setSteps] = useState<TutorialStepWrapper[]>([])
   const [activeStep, setActiveStep] = useState<number>(0)
@@ -25,7 +25,7 @@ export function TutorialCard({
 
       const finalStep: TutorialDataStep = {
         title: `Completed!`,
-        content: `${readMoreLink ? 'To learn more, please visit:' : 'Thank you!'}`
+        content: `${readMoreLink ? 'To learn more, please visit:' : 'Thank you!'}`,
       }
 
       if (readMoreLink) finalStep.readMoreLink = readMoreLink

package/src/utils/dates.ts

@@ -38,7 +38,7 @@ export function validateDateFormat(dateString: string) {
 export const getDateUTCValue = (date: Date) => ({
   utcYear: date.getUTCFullYear(),
   utcMonth: date.getUTCMonth(),
-  utcDate: date.getUTCDate()
+  utcDate: date.getUTCDate(),
 })
 
 // Generate a date by set its utc value

package/src/utils/formatDate.ts

@@ -31,7 +31,7 @@ export const dateFormats: Record<DateFormat, FormatDateOptions> = {
   'YYYY-MM-DD': { locales: 'fr-CA' },
   'YYYY/MM/DD, HH:MM': { locales: 'en-ZA', hour: '2-digit', minute: '2-digit' },
   'YYYY-MM-DD, HH:MM': { locales: 'fr-CA', timeStyle: 'short' },
-  'YYYY-MM-DD, HH:MM:SS': { locales: 'fr-CA' }
+  'YYYY-MM-DD, HH:MM:SS': { locales: 'fr-CA' },
 }
 
 /**
@@ -44,7 +44,7 @@ export const dateFormats: Record<DateFormat, FormatDateOptions> = {
 export function formatDate(
   date?: string | number | Date,
   format: DateFormat = 'DD MM YYYY',
-  options?: FormatDateOptions
+  options?: FormatDateOptions,
 ) {
   const formatOptions = dateFormats[format]
   const { locales, ...mergedOptions } = { ...formatOptions, ...options }

package/src/utils/object.ts

@@ -19,7 +19,7 @@ export function merge<S1 extends Dict, S2 extends Dict, S3 extends Dict, S4 exte
   s1: S1,
   s2: S2,
   s3: S3,
-  s4: S4
+  s4: S4,
 ): S1 & S2 & S3 & S4
 export function merge(...sources: any[]): any {
   const target = {} as Dict
@@ -51,7 +51,7 @@ export function merge(...sources: any[]): any {
  */
 export function objectFilter<T extends Dict, K extends keyof T>(
   object: T,
-  fn: (value: any, key: string, object: T) => boolean
+  fn: (value: any, key: string, object: T) => boolean,
 ) {
   const result: Partial<T> = {}
 

package/src/utils/react.ts

@@ -8,7 +8,7 @@ import React, {
   useCallback,
   useEffect,
   useRef,
-  useState
+  useState,
 } from 'react'
 
 import { isArray, isFunction } from './assertion'
@@ -42,7 +42,7 @@ export function createContext<ContextType>(options: CreateContextOptions = {}) {
   const {
     errorMessage = 'Context can only be accessed by components wrapped with the Provider.',
     isOptional,
-    name
+    name,
   } = options
 
   const Context = React.createContext<ContextType | undefined>(undefined)
@@ -90,7 +90,7 @@ const defaultEvents = ['mousedown', 'touchstart']
 export function useClickOutside(
   ref: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[],
   callback?: (event: Event) => void,
-  events: string[] = defaultEvents
+  events: string[] = defaultEvents,
 ) {
   const eventsString = JSON.stringify(events)
   const listener = useCallbackRef((ev: Event) => {
@@ -141,7 +141,7 @@ export function useControlled<T>(props: UseControlledProps<T>) {
   return [value, onChange, { isControlled, reset }] as [
     T,
     Dispatch<SetStateAction<T>>,
-    { isControlled: boolean; reset: () => void }
+    { isControlled: boolean; reset: () => void },
   ]
 }
 

package/src/utils/styles.ts

@@ -93,5 +93,5 @@ export function HSLToRGBA(h: number, s: number, l: number, alpha?: number) {
 export const ellipsisOverflow = {
   overflow: 'hidden',
   textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap' as Property.WhiteSpace
+  whiteSpace: 'nowrap' as Property.WhiteSpace,
 }