@veracity/vui 2.10.0 → 2.12.0-beta.0

package/src/core/vuiProvider/useBodyScrollLock.tsx

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react'
+
+import { addBodyClass, removeBodyClass } from '../../utils'
+import { noScrollClass } from './consts'
+
+export const useBodyScrollLock = () => {
+  const [isScrollLocked, setIsScrollLocked] = useState(false)
+
+  const toggleIsScrollLocked = () => setIsScrollLocked(!isScrollLocked)
+
+  useEffect(() => {
+    if (isScrollLocked) addBodyClass(noScrollClass)
+    else removeBodyClass(noScrollClass)
+  }, [isScrollLocked])
+
+  return { isScrollLocked, setIsScrollLocked, toggleIsScrollLocked }
+}

package/src/core/vuiProvider/vuiProvider.tsx

@@ -1,7 +1,6 @@
 import React, { FC, useReducer } from 'react'
 import { ThemeProvider } from 'styled-components'
 
-import ModalStyle from '../../modal/modalStyle'
 import PopoverStyle from '../../popover/popoverStyle'
 import { Portal } from '../../portal'
 import defaultTheme, { VuiTheme } from '../../theme'
@@ -47,7 +46,6 @@ const VuiProvider: FC<VuiProviderProps & ChildrenProp> = ({
         <>
           {resetCSS && <ResetCSS />}
           <GlobalStyle globalStyle={globalStyle} />
-          <ModalStyle />
           <PopoverStyle />
           {children}
           {notifyOffline && <NotifyOffline />}

package/src/definition/definition.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+
+import { styled, useStyleConfig, vui } from '../core'
+import { DefinitionProps } from './definition.types'
+import { DefinitionContent } from './definitionContent'
+
+/**
+ * Properties are definition lists
+ * */
+// @formatter:off
+export const DefinitionVerticalBase = styled.dlBox`
+  display: grid;
+  gap: 1em;
+  grid-template-columns: repeat(auto-fit, minmax(10em, 20em));
+
+  .vui-definitionItemWrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  dt,
+  dd {
+    display: inline-flex;
+  }
+`
+
+export const DefinitionHorizontalBase = styled.dlBox`
+  padding: 10px;
+  display: grid;
+  gap: 0;
+
+  .vui-definitionItemWrapper {
+    display: flex;
+    flex-direction: column;
+    @media (min-width: 1024px) {
+      flex-direction: row;
+    }
+  }
+
+  dt,
+  dd {
+    display: inline-flex;
+    padding-left: 5px;
+  }
+
+  dd {
+    ::after {
+      content: '';
+    }
+    @media (min-width: 1024px) {
+      ::after {
+        content: ',';
+      }
+    }
+  }
+
+  dt {
+    width: 20%;
+    min-width: 130px;
+  }
+`
+// @formatter:on
+
+export const Definition = vui<'dl', DefinitionProps>((props, ref) => {
+  const { orientation = 'horizontal', ...rest } = props as DefinitionProps
+  const styles = useStyleConfig('Definition', props)
+  return (
+    <>
+      {orientation === 'horizontal' && (
+        <DefinitionHorizontalBase className="vui-definition" {...styles.container} {...rest}>
+          <DefinitionContent {...rest} />
+        </DefinitionHorizontalBase>
+      )}
+      {orientation === 'vertical' && (
+        <DefinitionVerticalBase className="vui-definition" {...styles.container} {...rest}>
+          <DefinitionContent {...rest} />
+        </DefinitionVerticalBase>
+      )}
+    </>
+  )
+})
+
+export default Definition

package/src/definition/definition.types.ts

@@ -0,0 +1,24 @@
+import { IconProp } from '../icon'
+import { SystemProps } from '../system'
+import { ThemingProps } from '../theme'
+
+export type DefinitionItemProps = SystemProps & {
+  key: string
+  keyHasIcon?: boolean
+  value: string | number | string[] | number[]
+  valueHasIcon?: boolean
+}
+export type DefinitionProps = SystemProps &
+  ThemingProps<'Definition'> & {
+    /** Socket displaying icon on the left side. */
+    iconLeft?: IconProp | JSX.Element
+    /** Socket displaying icon on the right side. */
+    iconRight?: IconProp | JSX.Element
+    isLabelBold?: boolean
+    isValueBold?: boolean
+    items?: DefinitionItemProps[]
+    /** Socket defining orientation. */
+    orientation?: 'horizontal' | 'vertical'
+    size?: 'sm' | 'md'
+    variant?: 'light' | 'dark'
+  }

package/src/definition/definitionContent.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+
+import Box from '../box'
+import { styled, useStyleConfig, vui } from '../core'
+import Icon from '../icon'
+import { cs, isArray } from '../utils'
+import { DefinitionItemProps, DefinitionProps } from './definition.types'
+
+export const DefinitionItemKey = styled.dtBox``
+export const DefinitionItemValue = styled.ddBox``
+
+export const DefinitionContent = vui<'dl', DefinitionProps>(props => {
+  const { iconLeft, iconRight, isLabelBold, isValueBold, items } = props as DefinitionProps
+
+  const styles = useStyleConfig('Definition', props)
+
+  return (
+    <>
+      {isArray<DefinitionItemProps>(items)
+        ? items.map(({ key, value, ...props }, index) => (
+            <Box className="vui-definitionItemWrapper" key={index}>
+              <DefinitionItemKey fontWeight={isLabelBold ? 'demi' : 'default'} {...styles.dt}>
+                {props.keyHasIcon && iconLeft && (
+                  <Icon className={cs('vui-definitionIcon')} name={iconLeft} {...styles.icon} />
+                )}
+                {key}
+                {props.keyHasIcon && iconRight && (
+                  <Icon className={cs('vui-definitionIcon')} name={iconRight} {...styles.icon} />
+                )}
+              </DefinitionItemKey>
+              {isArray(value) ? (
+                value.map((value, index) => (
+                  <DefinitionItemValue fontWeight={isValueBold ? 'demi' : 'default'} {...styles.dd} key={index}>
+                    {props.valueHasIcon && iconLeft && (
+                      <Icon className={cs('vui-definitionIcon')} name={iconLeft} {...styles.icon} />
+                    )}
+                    {value}
+                    {props.valueHasIcon && iconRight && (
+                      <Icon className={cs('vui-definitionIcon')} name={iconRight} {...styles.icon} />
+                    )}
+                  </DefinitionItemValue>
+                ))
+              ) : (
+                <DefinitionItemValue fontWeight={isValueBold ? 'demi' : 'default'} {...styles.dd}>
+                  {props.valueHasIcon && iconLeft && (
+                    <Icon className={cs('vui-definitionIcon')} name={iconLeft} {...styles.icon} />
+                  )}
+                  {value}
+                  {props.valueHasIcon && iconRight && (
+                    <Icon className={cs('vui-definitionIcon')} name={iconRight} {...styles.icon} />
+                  )}
+                </DefinitionItemValue>
+              )}
+            </Box>
+          ))
+        : items}
+    </>
+  )
+})
+
+export default DefinitionContent

package/src/definition/index.ts

@@ -0,0 +1,2 @@
+export * from './definition'
+export { default } from './definition'

package/src/definition/theme.ts

@@ -0,0 +1,73 @@
+const baseStyle = {}
+
+const defaultProps = {
+  size: 'md',
+  variant: 'light'
+}
+
+const parts = ['container', 'icon', 'dt', 'dd']
+
+const sizes = {
+  sm: {
+    container: {
+      fontSize: 'sm',
+      lineHeight: '22px'
+    },
+    dt: {
+      fontSize: 'sm',
+      spaceX: 4
+    },
+    dd: {
+      fontSize: 'sm',
+      spaceX: 4
+    },
+    icon: {
+      size: 'sm',
+      mx: 0.5,
+      my: 'auto'
+    }
+  },
+  md: {
+    container: {
+      fontSize: 'md',
+      lineHeight: '30px'
+    },
+    dt: {
+      fontSize: 'md',
+      spaceX: 6
+    },
+    dd: {
+      fontSize: 'md',
+      spaceX: 6
+    },
+    icon: {
+      size: 'md',
+      mx: 0.5,
+      my: 'auto'
+    }
+  }
+}
+
+const variants = {
+  light: {
+    container: {
+      bg: 'white',
+      color: 'sandstone.20',
+      borderColor: 'transparent'
+    }
+  },
+  dark: {
+    container: {
+      bg: 'darkBlue.main',
+      color: 'white'
+    }
+  }
+}
+
+export default {
+  baseStyle,
+  defaultProps,
+  parts,
+  sizes,
+  variants
+}

package/src/dialog/consts.ts

@@ -31,5 +31,3 @@ export const dialogStatusMapping: DialogStatusMapping = {
 export const containerId = 'vui-dynamic-container'
 
 export const modalClass = 'vui-modal'
-
-export const noScrollClass = 'vui-no-scroll'

package/src/{modal → focusLock}/focusLock.tsx

@@ -5,10 +5,11 @@ import { ChildrenProp } from '../core'
 import { FocusLockProps } from './focusLock.types'
 
 /**
- * Traps the focus within the provided content. That is, tabbing with keyboard will
- * only cycle through the children and won't leave the boundary of the FocusLock.
- * This behavior enhances accessibility of the Modal component.
+ * Traps the focus within the provided content.
+ *
+ * Tabbing using the keyboard will only cycle through the children and won't leave the boundary of the FocusLock wrapper.
  */
+
 export const FocusLock: FC<FocusLockProps & ChildrenProp> = props => {
   const {
     autoFocus,

package/src/focusLock/index.ts

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

package/src/footer/footer.tsx

@@ -4,6 +4,7 @@ import { Box } from '../box'
 import { styled, useDown, useStyleConfig, vui, VuiComponent } from '../core'
 import { Divider } from '../divider'
 import { Link } from '../link'
+import Menu from '../menu'
 import { T } from '../t'
 import { cs } from '../utils'
 import { FooterProvider } from './context'
@@ -97,7 +98,34 @@ export const Footer = vui<'div', FooterProps>((props, ref) => {
               >
                 {applicationLinks?.map((link, index) => (
                   <Box flex={{ xs: '0 0 50%', sm: '0 0 auto' }} key={index} minW={70}>
-                    <FooterLink {...link} />
+                    {link.items && (
+                      <Menu isLazy={false} offset={[-16, 9]} placement="top-start" size="lg" {...rest}>
+                        <Menu.Button
+                          as={Link}
+                          className="vui-footerLink-trigger"
+                          pt="3px"
+                          text={link.text}
+                          title={link.text}
+                          {...styles.link}
+                          {...rest}
+                        />
+
+                        <Menu.List maxH={400} right={0} w={320} {...styles.list}>
+                          {link.items.map(({ text, url }, index) => (
+                            <Menu.Item
+                              isTruncated
+                              key={index}
+                              linkProps={{ href: url }}
+                              text={text}
+                              title={text}
+                              {...styles.item}
+                            />
+                          ))}
+                        </Menu.List>
+                      </Menu>
+                    )}
+
+                    {!link.items && <FooterLink {...link} />}
                   </Box>
                 ))}
               </Box>

package/src/footer/footer.types.ts

@@ -18,7 +18,8 @@ export type FooterLinkData = {
   /** Unique name that identifies a link in the links dictionary. */
   id?: string
   text: string
-  url: string
+  url?: string
+  items?: FooterLinkData[]
 }
 
 export type FooterProps = Omit<BoxProps, 'size' | 'variant'> &

package/src/header/headerAccountUserInfo.tsx

@@ -33,13 +33,17 @@ export const HeaderAccountUserInfo = vui<'div', HeaderAccountUserInfoProps>((pro
           )}
           <Box column rowGap={role ? 0 : 0.5}>
             {displayName && (
-              <T fontSize={isApplication ? '12px' : 'inherit'} weight="demi">
+              <T fontSize={isApplication ? '12px' : 'inherit'} isTruncated pr={1} title={displayName} weight="demi">
                 {displayName}
               </T>
             )}
-            {companyName && <T fontSize={isApplication ? '12px' : 'inherit'}>{companyName}</T>}
+            {companyName && (
+              <T fontSize={isApplication ? '12px' : 'inherit'} isTruncated pr={1} title={companyName}>
+                {companyName}
+              </T>
+            )}
             {role && (
-              <T color="sandstone.45" fontSize={isApplication ? '12px' : 'inherit'}>
+              <T color="sandstone.45" fontSize={isApplication ? '12px' : 'inherit'} isTruncated pr={1} title={role}>
                 {role}
               </T>
             )}

package/src/header/headerLinkItem.tsx

@@ -34,12 +34,16 @@ export const HeaderLinkItem = vui<'li', HeaderLinkItemProps>((props, ref) => {
   const linkMobileProps = isMobile
     ? {
         color: 'darkBlue.main',
+        hoverColor: 'darkBlue.main',
         hoverBg: 'skyBlue.90',
+        activeColor: 'darkBlue.main',
+        activeBg: 'transparent',
         activeBorderColor: 'seaBlue.main',
-        activeBorderLeftWidth: 3,
-        pt: '0'
+        activeBorderLeftWidth: 0,
+        pt: '0',
+        activePl: isActive ? '13px' : '16px'
       }
-    : { activeBorderBottomWidth: 4, pt: '0px', activePt: '4px' }
+    : { activeBorderBottomWidth: 0, pt: '0px', activePt: isActive ? '1px' : '0' }
 
   const itemScreenProps = isMobile ? {} : { display: 'inline-flex', fontWeight: 'medium', h: '100%' }
 

package/src/header/headerNotifications.tsx

@@ -9,7 +9,7 @@ import { HeaderNotificationsProps } from './header.types'
 /*@formatter:off*/
 const Badge = styled.spanBox`
   align-items: center;
-  background-color: energyRed.main;
+  background-color: energyRed.45;
   border-radius: round;
   color: white;
   display: flex;
@@ -20,7 +20,7 @@ const Badge = styled.spanBox`
   position: absolute;
   right: 1px;
   top: 1px;
-  width: 20px;
+  min-width: 20px;
 `
 /*@formatter:on*/
 
@@ -49,7 +49,11 @@ export const HeaderNotifications = vui<'a', HeaderNotificationsProps>((props, re
         <>
           <Button.Icon name="falBell" />
 
-          {count > 0 && <Badge>{count < 100 ? count : '99+'}</Badge>}
+          {count > 0 && (
+            <Badge px={count < 9 ? '0' : '4px'} right={count < 9 ? 1 : 0}>
+              {count < 100 ? count : '99+'}
+            </Badge>
+          )}
         </>
       )}
     </Button>

package/src/header/headerSignIn.tsx

@@ -20,6 +20,7 @@ export const HeaderSignIn = vui<'button', HeaderSignInProps>((props, ref) => {
       className={cs('vui-headerSignIn', className)}
       href={url ?? links.signIn}
       ref={ref}
+      size="lg"
       variant={buttonVariant}
       {...styles.signIn}
       {...rest}

package/src/header/theme.ts

@@ -41,6 +41,7 @@ const variants = {
         activeBorderColor: 'darkBlue.main'
       },
       link: {
+        size: 'lg',
         color: 'darkBlue.main',
         borderColor: 'darkBlue.main',
         hoverColor: 'darkBlue.main',
@@ -108,6 +109,7 @@ const variants = {
         activeBorderColor: 'digiGreen.main'
       },
       link: {
+        size: 'lg',
         color: 'white',
         borderColor: 'digiGreen.main',
         hoverBg: 'seaBlue.25',

package/src/icons/baseIcons/conc/conCard.ts

@@ -0,0 +1,9 @@
+/* eslint-disable */
+
+import { IconDefinition } from "../../types";
+
+export default {
+  details: [64, 64, [], "", "M7 8C5.34315 8 4 9.34315 4 11V41C4 42.6569 5.34314 44 7 44H10V23C10 20.2386 12.2386 18 15 18H52V11C52 9.34315 50.6569 8 49 8H7ZM7 46H10V53C10 55.7614 12.2386 58 15 58H57C59.7614 58 62 55.7614 62 53V23C62 20.2386 59.7614 18 57 18H54V11C54 8.23858 51.7614 6 49 6H7C4.23858 6 2 8.23858 2 11V41C2 43.7614 4.23858 46 7 46ZM12 53V46V34H60V53C60 54.6569 58.6569 56 57 56H15C13.3431 56 12 54.6569 12 53ZM60 26V23C60 21.3431 58.6569 20 57 20H54H15C13.3431 20 12 21.3431 12 23V26H60ZM21 46C20.4477 46 20 46.4477 20 47C20 47.5523 20.4477 48 21 48H26C26.5523 48 27 47.5523 27 47C27 46.4477 26.5523 46 26 46H21ZM30 47C30 46.4477 30.4477 46 31 46H44C44.5523 46 45 46.4477 45 47C45 47.5523 44.5523 48 44 48H31C30.4477 48 30 47.5523 30 47Z"],
+  name: "conCard",
+  pathProps: { fillRule: "evenodd", clipRule: "evenodd" }
+} as IconDefinition;

package/src/icons/baseIcons/conc/conEmptyBox.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+  details: [64, 64, [], '', 'M59.4263 11.2699C59.036 9.71542 57.4927 8.74227 55.9217 9.06007L31.6293 13.9744L7.74635 9.06237C6.18953 8.74218 4.65317 9.69176 4.2434 11.2274L2.10183 19.2534C1.72138 20.6792 2.43437 22.17 3.78312 22.7687L19.8329 29.8941C21.1643 30.4852 22.728 30.0344 23.5404 28.8252L31.6346 16.7778L39.8352 28.7837C40.6816 30.0227 42.3133 30.4459 43.6552 29.7743L59.6397 21.7744C60.8978 21.1448 61.5493 19.7255 61.2067 18.3611L59.4263 11.2699ZM56.3183 11.0204C56.8419 10.9144 57.3564 11.2388 57.4865 11.757L59.2669 18.8481C59.3811 19.3029 59.1639 19.776 58.7446 19.9859L42.76 27.9858C42.3128 28.2097 41.7689 28.0686 41.4867 27.6556L33.3041 15.6761L56.3183 11.0204ZM6.17579 11.7431C6.31238 11.2312 6.82451 10.9146 7.34344 11.0214L29.9665 15.6743L21.8803 27.7099C21.6095 28.1129 21.0882 28.2632 20.6444 28.0662L4.59465 20.9408C4.14507 20.7412 3.90741 20.2443 4.03422 19.769L6.17579 11.7431ZM32.6277 24.6616C32.6277 24.1093 32.18 23.6616 31.6277 23.6616C31.0754 23.6616 30.6277 24.1093 30.6277 24.6616V52.3252L9.28119 46.0468C8.00444 45.6713 7.12769 44.4996 7.12769 43.1687V27.4775L5.12769 26.6354V43.1687C5.12769 45.3868 6.58894 47.3397 8.71685 47.9656L30.2169 54.2891C31.1379 54.56 32.1175 54.56 33.0385 54.2891L54.5385 47.9656C56.6664 47.3397 58.1277 45.3868 58.1277 43.1687V25.8459L56.1277 26.6881V43.1687C56.1277 44.4996 55.2509 45.6713 53.9742 46.0468L32.6277 52.3252V24.6616Z'],
+  name: 'conEmptyBox'
+} as IconDefinition

package/src/icons/baseIcons/icons.ts

@@ -1,4 +1,5 @@
 export { default as conAPI } from './conc/conAPI'
+export { default as conCard } from './conc/conCard'
 export { default as conClock } from './conc/conClock'
 export { default as conSaveTimeAndMoney } from './conc/conSaveTimeAndMoney'
 export { default as conVesselConnect } from './conc/conVesselConnect'
@@ -9,6 +10,7 @@ export { default as conDatabasePlus } from './conc/conDatabasePlus'
 export { default as conDataSearchAlt } from './conc/conDataSearchAlt'
 export { default as conDataSearchPlus } from './conc/conDataSearchPlus'
 export { default as conDataset } from './conc/conDataset'
+export { default as conEmptyBox } from './conc/conEmptyBox'
 export { default as conFolderPlus } from './conc/conFolderPlus'
 export { default as conInsightSearchAlt } from './conc/conInsightSearchAlt'
 export { default as conLNGBunkering } from './conc/conLNGBunkering'

package/src/icons/baseIcons/types.ts

@@ -1,5 +1,6 @@
 export type BaseIcon =
   | 'conAPI'
+  | 'conCard'
   | 'conClock'
   | 'conSaveTimeAndMoney'
   | 'conVesselConnect'
@@ -10,6 +11,7 @@ export type BaseIcon =
   | 'conDataSearchAlt'
   | 'conDataSearchPlus'
   | 'conDataset'
+  | 'conEmptyBox'
   | 'conFolderPlus'
   | 'conInsightSearchAlt'
   | 'conLNGBunkering'

package/src/index.ts

@@ -10,9 +10,11 @@ export * from './card'
 export * from './checkbox'
 export * from './copyToClipboard'
 export * from './core'
+export * from './definition'
 export * from './dialog'
 export * from './divider'
 export * from './dragAndDrop'
+export * from './focusLock'
 export * from './footer'
 export * from './grid'
 export * from './header'

package/src/input/consts.ts

@@ -43,3 +43,10 @@ export const inputStateMapping: InputStateMapping = {
     }
   }
 }
+
+export const displayValueOnlyTextSize = {
+  sm: 'xs',
+  md: 'sm',
+  lg: 'md',
+  xl: 'lg'
+}