@veracity/vui 1.1.2 → 1.2.0-beta.0

package/src/core/vuiProvider/vuiProvider.tsx

@@ -4,6 +4,7 @@ import { ThemeProvider } from 'styled-components'
 import ModalStyle from '../../modal/modalStyle'
 import PopoverStyle from '../../popover/popoverStyle'
 import defaultTheme, { VuiTheme } from '../../theme'
+import { ChildrenProp } from '../types'
 import GlobalStyle from './globalStyle'
 import ResetCSS from './resetCSS'
 
@@ -17,23 +18,21 @@ type VuiProviderProps = {
 }
 
 /** Provides theme to all wrapped components and by default includes CSS reset and global styles. */
-const VuiProvider: FC<VuiProviderProps> = ({
+const VuiProvider: FC<VuiProviderProps & ChildrenProp> = ({
   children,
   globalStyle = true,
   resetCSS = true,
   theme = defaultTheme as VuiTheme
-}) => {
-  return (
-    <ThemeProvider theme={theme}>
-      <>
-        {resetCSS && <ResetCSS />}
-        <GlobalStyle globalStyle={globalStyle} />
-        <ModalStyle />
-        <PopoverStyle />
-        {children}
-      </>
-    </ThemeProvider>
-  )
-}
+}) => (
+  <ThemeProvider theme={theme}>
+    <>
+      {resetCSS && <ResetCSS />}
+      <GlobalStyle globalStyle={globalStyle} />
+      <ModalStyle />
+      <PopoverStyle />
+      {children}
+    </>
+  </ThemeProvider>
+)
 
 export default VuiProvider

package/src/dialog/consts.ts

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

package/src/dialog/index.ts

@@ -11,3 +11,5 @@ export * from './dialogHeader'
 export * from './dialogIcon'
 export * from './dialogSubmitButton'
 export * from './dialogTitle'
+export * from './showConfirm'
+export * from './showPrompt'

package/src/dialog/showConfirm.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+
+import { VuiProvider } from '../core'
+import { Dialog } from '../dialog'
+import { addContainer, reactDomRender, removeBodyClass, removeElement, removeElements } from '../utils'
+import { containerId, modalClass, noScrollClass } from './consts'
+
+export const showConfirm = (title: string, message: string): Promise<boolean> => {
+  addContainer(containerId)
+
+  const hide = () => {
+    removeElement(containerId)
+    removeElements(modalClass)
+    removeBodyClass(noScrollClass)
+  }
+
+  return new Promise(resolve => {
+    const confirmDialog = (
+      <VuiProvider>
+        <Dialog
+          body={message}
+          cancelButton={{
+            onClick: () => {
+              resolve(false)
+              hide()
+            },
+            text: 'Cancel'
+          }}
+          closeButton={false}
+          isOpen
+          submitButton={{
+            onClick: () => {
+              resolve(true)
+              hide()
+            },
+            text: 'Confirm'
+          }}
+          title={title}
+        />
+      </VuiProvider>
+    )
+
+    reactDomRender(document.getElementById(containerId), confirmDialog)
+  })
+}

package/src/dialog/showPrompt.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+
+import { Box } from '../box'
+import { VuiProvider } from '../core'
+import { Dialog } from '../dialog'
+import { Input } from '../input'
+import { addContainer, reactDomRender, removeBodyClass, removeElement, removeElements } from '../utils'
+import { containerId, modalClass, noScrollClass } from './consts'
+
+export const showPrompt = (title: string, value = ''): Promise<string | false> => {
+  const state = { value }
+
+  const setValue = (value: string) => (state.value = value)
+
+  addContainer(containerId)
+
+  const hide = () => {
+    removeElement(containerId)
+    removeElements(modalClass)
+    removeBodyClass(noScrollClass)
+  }
+
+  return new Promise(resolve => {
+    const promptDialog = (
+      <VuiProvider>
+        <Dialog
+          body={
+            <Box px={3} py={2}>
+              <Input defaultValue={value} onChange={e => setValue(e.target.value)} />
+            </Box>
+          }
+          cancelButton={{
+            onClick: () => {
+              resolve(false)
+              hide()
+            },
+            text: 'Cancel'
+          }}
+          closeButton={false}
+          isOpen
+          submitButton={{
+            onClick: () => {
+              resolve(state.value)
+              hide()
+            },
+            text: 'Submit'
+          }}
+          title={title}
+        />
+      </VuiProvider>
+    )
+
+    reactDomRender(document.getElementById(containerId), promptDialog)
+  })
+}

package/src/header/header.types.ts

@@ -5,6 +5,7 @@ import { ButtonProps } from '../button'
 import { LinksDict } from '../core'
 import { IconProp } from '../icon'
 import { ListItemProps, ListProps } from '../list'
+import { LogoData } from '../logo/logo.types'
 import { MenuProps } from '../menu'
 import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
@@ -44,15 +45,6 @@ export type HeaderLinkData = {
 
 export type HeaderLinkItemProps = ListItemProps & HeaderLinkData
 
-export type HeaderLogoData = {
-  /** Loads logo svg from the given source. */
-  src?: string
-  /** Renders logo wrapper as a link with given url as href. */
-  url?: string
-}
-
-export type HeaderLogoProps = BoxProps & HeaderLogoData
-
 export type HeaderMainLinksProps = ListProps & {
   /** Array of objects with data for each link. */
   links?: HeaderLinkData[]
@@ -99,7 +91,7 @@ export type LoggedInHeaderProps = HeaderProps & {
   /** Socket for account popover icon on the right side. */
   account?: HeaderAccountData | JSX.Element
   /** Socket for logo on the left side. */
-  logo?: HeaderLogoData | JSX.Element
+  logo?: LogoData | JSX.Element
   /** Socket for main links in the middle-right. */
   mainLinks?: HeaderLinkData[] | JSX.Element
   /** Socket for notifications icon on the right side. */
@@ -112,7 +104,7 @@ export type LoggedOutHeaderProps = HeaderProps & {
   /** Socket for create account prompt on the right side. */
   createAccount?: HeaderCreateAccountData | JSX.Element
   /** Socket for logo on the left side. */
-  logo?: HeaderLogoData | JSX.Element
+  logo?: LogoData | JSX.Element
   /** Socket for links in the middle-right section. */
   mainLinks?: HeaderLinkData[] | JSX.Element
   /** Socket for sign in button on the right side. */

package/src/header/headerLogo.tsx

@@ -1,37 +1,21 @@
 import React from 'react'
 
-import Box from '../box'
-import { cdnUrl, useStyleConfig, vui } from '../core'
-import Svg from '../svg'
-import { cs } from '../utils'
+import { vui } from '../core'
+import { Logo } from '../logo'
+import { LogoProps } from '../logo/logo.types'
 import { useHeaderContext } from './context'
-import { HeaderLogoProps } from './header.types'
 
-const defaultLogo = `${cdnUrl}/common/icons/logos/veracity-logo.svg`
-
-/** Logo displayed in the left corner of the Header. By default Veracity logo is used. */
-export const HeaderLogo = vui<'div', HeaderLogoProps>((props, ref) => {
-  const { children, className, src = defaultLogo, url, ...rest } = props
+/** Logo displayed in the left corner of the Header. */
+export const HeaderLogo = vui<'div', LogoProps>((props, ref) => {
+  const { brand, children, className, src, url, ...rest } = props
   const { links } = useHeaderContext() ?? {}
-  const styles = useStyleConfig('Header', useHeaderContext()).logo
 
   const logoUrl = url ?? links.home
-  const linkProps = logoUrl ? { as: 'a', href: logoUrl, outline: 'none', focusRing: 2 } : {}
 
   return (
-    <Box
-      centerV
-      className={cs('vui-headerLogo', className)}
-      flexShrink={0}
-      h={40}
-      mr={2}
-      ref={ref}
-      {...styles.container}
-      {...linkProps}
-      {...rest}
-    >
-      {children ?? <Svg aria-label="logo" h="100%" src={src} {...styles.svg} />}
-    </Box>
+    <Logo brand={brand} className={className} ref={ref} src={src} url={logoUrl} {...rest}>
+      {children}
+    </Logo>
   )
 })
 

package/src/icons/baseIcons/cub/cubBellship.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+	details: [32, 33, [], '', 'M0.0322266 16.2178C0.0322266 7.44344 7.17902 0.282227 16 0.282227C24.821 0.282227 31.9678 7.44344 31.9678 16.2178C31.9678 25.0566 24.821 32.2178 16 32.2178C7.17902 32.2178 0.0322266 25.0566 0.0322266 16.2178ZM15.9994 30.9917C24.1116 30.9917 30.6793 24.3463 30.6793 16.2178C30.6793 8.0893 24.1116 1.50777 15.9994 1.50777C7.88668 1.50777 1.31958 8.08871 1.31958 16.2178C1.31958 24.3469 7.88727 30.9917 15.9994 30.9917ZM13.4247 8.66898C12.6516 8.66898 12.2653 8.41075 12.2653 7.76607C12.2653 6.86316 13.8747 6.60494 15.7423 6.60494C17.3522 6.60494 19.0901 6.86316 19.0901 7.76607H19.8633C19.8633 6.34671 17.8028 5.95907 15.678 5.95907C13.489 5.95907 11.4928 6.34612 11.4928 7.70107C11.4928 8.86279 12.2011 9.31366 13.4247 9.31366H18.0605C18.961 9.31366 19.2193 9.63629 19.2193 10.0883C19.2193 10.9912 18.3176 11.3783 15.8066 11.3783C12.845 11.3783 12.2653 11.0562 12.1368 10.346H11.4285C11.4928 11.8941 13.4247 12.088 15.8715 12.088C19.5413 12.088 19.9281 11.1201 19.9281 10.0877C19.9281 9.18425 19.349 8.66839 18.0611 8.66839H13.4247V8.66898ZM15.8066 13.0565C10.9137 13.0565 9.30377 11.1207 9.30377 8.99161C9.36805 7.37902 10.4632 4.92735 15.678 4.92735C21.0221 4.92735 23.5974 7.89489 23.5974 7.89489L24.6282 6.79816C24.6282 6.79816 21.666 3.50799 15.6138 3.50799C10.5274 3.50799 6.98618 6.08848 6.98618 8.99161C6.98618 13.3141 12.2659 14.3464 15.0989 14.5402V16.1528H12.3951V17.7016H15.0989V24.6046C15.0989 25.0566 14.5198 25.3792 14.133 25.3792C13.6176 25.3792 13.1027 25.121 12.4588 24.7984C11.8791 24.4758 11.3642 23.9599 11.3642 23.9599H12.3945C12.3945 23.9599 11.1708 23.3146 10.5268 22.7343C10.0114 22.3473 9.11094 21.5082 9.11094 21.5082C9.11094 21.5082 9.17521 22.6693 9.30377 23.5078C9.4972 24.2825 9.88346 25.5081 10.2697 26.0239V24.7984C10.2697 24.7984 10.978 26.0239 12.3302 26.863C13.6818 27.7021 13.7467 27.5083 14.3907 27.8309C15.0989 28.1536 15.2275 28.218 15.4852 28.6056C15.678 28.9926 15.7429 29.2509 15.7429 29.2509H16.2577C16.2577 29.2509 16.2577 28.9926 16.5154 28.6056C16.7089 28.2186 16.9017 28.1536 17.5463 27.8309C18.2533 27.5083 18.3182 27.7021 19.6056 26.863C20.9578 26.0245 21.666 24.7984 21.666 24.7984V26.0239C22.1166 25.5075 22.5034 24.2819 22.6969 23.5078C22.8248 22.6693 22.8891 21.5082 22.8891 21.5082C22.8891 21.5082 21.9886 22.3467 21.4726 22.7343C20.7007 23.3146 19.6056 23.9599 19.6056 23.9599H20.6364C20.6364 23.9599 20.1204 24.4763 19.5413 24.7984C18.8973 25.121 18.3825 25.3792 17.8677 25.3792C17.4171 25.3792 16.9017 25.0566 16.9017 24.6046V17.7016H19.6704V16.1528H16.9017V14.5402C19.5413 14.2176 21.6018 13.2497 23.1474 12.2818C24.0491 11.6365 24.5639 11.0562 24.5639 11.0562L23.6622 10.0239C23.6616 10.0239 20.7007 13.1209 15.8066 13.0565Z'],
+	name: 'cubBellship'
+} as IconDefinition

package/src/icons/baseIcons/cub/cubDNV.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+	details: [32, 33, [], '', 'M0 2.57227H32V10.3091H0V2.57227Z M0 12.8862H32V14.1764H0V12.8862Z M32 15.4623H0V18.0395H32V15.4623Z M4.53509 21.9312C5.40299 21.9312 6.14963 22.0723 6.77502 22.3545C7.38086 22.6192 7.88795 23.073 8.22279 23.65C8.55772 24.2229 8.72519 24.9419 8.72519 25.807V26.3848C8.72449 27.2499 8.55702 27.9692 8.22279 28.5429C7.88788 29.1156 7.38285 29.5658 6.78023 29.8288C6.15346 30.1111 5.40681 30.2522 4.5403 30.2522H0.104229V21.9312H4.53509ZM6.66558 28.3428C7.13879 27.904 7.37539 27.2337 7.37539 26.3319L7.37748 25.8408C7.37748 24.9144 7.14087 24.2395 6.66766 23.8161C6.19445 23.3928 5.48777 23.1811 4.5476 23.1811H1.46653V28.998H4.54552C5.48568 29.0001 6.19237 28.7817 6.66558 28.3428Z M18.9815 28.4296L12.6443 21.9269H11.3112V30.2479H12.6443V23.7537L18.9815 30.2479H20.3251V21.9269H18.9815V28.4296Z M27.4055 28.4296L30.5418 21.9269H31.9948L27.8975 30.2479H26.8374L22.7297 21.9269H24.2702L27.4055 28.4296Z'],
+	name: 'cubDNV'
+} as IconDefinition

package/src/icons/baseIcons/cul/culFileDownloadAlt.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+	details: [32, 34, [], '', 'M28 31.7532V32.2532C28 32.6657 27.6625 33.0032 27.25 33.0032H4.75C4.3375 33.0032 4 32.6657 4 32.2532V31.7532C4 31.3407 4.3375 31.0032 4.75 31.0032H27.25C27.6625 31.0032 28 31.3407 28 31.7532Z M23.7803 19.9362L23.3384 19.4943C23.0455 19.2014 22.5707 19.2014 22.2777 19.4943L17.0625 24.7398V13.2468C17.0625 12.8326 16.7267 12.4968 16.3125 12.4968H15.6875C15.2733 12.4968 14.9375 12.8326 14.9375 13.2468V24.7398L9.72222 19.4943C9.42934 19.2014 8.95447 19.2014 8.66153 19.4943L8.21966 19.9362C7.92678 20.2291 7.92678 20.704 8.21966 20.9968L15.4697 28.2771C15.7625 28.57 16.2374 28.57 16.5303 28.2771L23.7803 20.9968C24.0732 20.704 24.0732 20.2291 23.7803 19.9362Z M21.875 1.87808L27.1187 7.12183C27.6812 7.68433 28 8.45308 28 9.24683V14.7468C28 15.1593 27.6625 15.4968 27.25 15.4968H26.75C26.3375 15.4968 26 15.1593 26 14.7468V11.0031H19.5C18.6687 11.0031 18 10.3343 18 9.50308V3.00308H7C6.45 3.00308 6 3.45308 6 4.00308L6 14.7468C6 15.1593 5.6625 15.4968 5.25 15.4968H4.75C4.3375 15.4968 4 15.1593 4 14.7468V4.00308C4 2.34683 5.34375 1.00308 7 0.996826H19.7563C20.55 0.996826 21.3125 1.31558 21.875 1.87808ZM25.9688 9.00308C25.925 8.82808 25.8375 8.67183 25.7062 8.54058L20.4625 3.29683C20.3312 3.16558 20.175 3.07808 20 3.03433V9.00308H25.9688Z'],
+	name: 'culFileDownloadAlt'
+} as IconDefinition

package/src/icons/baseIcons/cul/culFilterAlt.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+	details: [32, 32, [], '', 'M30 5.625V6.125C30 6.5375 29.6625 6.875 29.25 6.875H2.75C2.3375 6.875 2 6.5375 2 6.125V5.625C2 5.2125 2.3375 4.875 2.75 4.875H29.25C29.6625 4.875 30 5.2125 30 5.625Z M22 15.75V16.25C22 16.6625 21.6781 17 21.2847 17H2.71535C2.32191 17 2 16.6625 2 16.25V15.75C2 15.3375 2.32191 15 2.71535 15H21.2847C21.6781 15 22 15.3375 22 15.75Z M16 26.375V25.875C16 25.4625 15.6617 25.125 15.2483 25.125H2.75168C2.33826 25.125 2 25.4625 2 25.875V26.375C2 26.7875 2.33826 27.125 2.75168 27.125H15.2483C15.6617 27.125 16 26.7875 16 26.375Z'],
+	name: 'culFilterAlt'
+} as IconDefinition

package/src/icons/baseIcons/fal/falDollarSign.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+	details: [32, 32, [], '', 'M20 16.1875C21.1667 16.5625 22.125 17.2917 22.875 18.375C23.625 19.4583 24 20.6667 24 22C24 23.6667 23.4583 25.0833 22.375 26.25C21.2917 27.4167 19.9792 28 18.4375 28H17V31.5C17 31.8333 16.8333 32 16.5 32H15.5C15.1667 32 15 31.8333 15 31.5V28H13.8125C11.8542 28 10.125 27.2917 8.625 25.875C8.375 25.625 8.375 25.375 8.625 25.125L9.375 24.4375C9.625 24.2292 9.85417 24.25 10.0625 24.5C11.1458 25.5 12.3958 26 13.8125 26H18.4375C19.4375 26 20.2708 25.6042 20.9375 24.8125C21.6458 24.0208 22 23.0833 22 22C22 21.0833 21.75 20.2708 21.25 19.5625C20.7917 18.8542 20.1667 18.375 19.375 18.125L12 15.8125C10.8333 15.4375 9.875 14.7083 9.125 13.625C8.375 12.5417 8 11.3333 8 10C8 8.33333 8.54167 6.91667 9.625 5.75C10.7083 4.58333 12.0208 4 13.5625 4H15V0.5C15 0.166667 15.1667 0 15.5 0H16.5C16.8333 0 17 0.166667 17 0.5V4H18.1875C20.1458 4 21.875 4.70833 23.375 6.125C23.625 6.375 23.625 6.625 23.375 6.875L22.625 7.5625C22.375 7.77083 22.1458 7.75 21.9375 7.5C20.8542 6.5 19.6042 6 18.1875 6H13.5625C12.5625 6 11.7083 6.39583 11 7.1875C10.3333 7.97917 10 8.91667 10 10C10 10.9167 10.2292 11.7292 10.6875 12.4375C11.1875 13.1458 11.8333 13.625 12.625 13.875L20 16.1875Z'],
+	name: 'falDollarSign'
+} as IconDefinition

package/src/icons/baseIcons/fal/falEuroSign.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+	details: [32, 32, [], '', 'M25 27.75L25.1875 28.6875C25.3125 29.1875 25.125 29.5 24.625 29.625C23.5417 29.875 22.4375 30 21.3125 30C18.0625 30 15.25 29.1042 12.875 27.3125C10.5417 25.4792 9.04167 23.0417 8.375 20H6.75C6.25 20 6 19.75 6 19.25V18.75C6 18.25 6.25 18 6.75 18H8.0625C7.9375 16.4583 7.95833 15.125 8.125 14H6.75C6.25 14 6 13.75 6 13.25V12.75C6 12.25 6.25 12 6.75 12H8.4375C9.22917 9.08333 10.7917 6.6875 13.125 4.8125C15.4583 2.9375 18.1875 2 21.3125 2C22.2708 2 23.2292 2.10417 24.1875 2.3125C24.3958 2.35417 24.5417 2.45833 24.625 2.625C24.75 2.79167 24.7917 2.97917 24.75 3.1875L24.5 4.1875C24.375 4.64583 24.0833 4.83333 23.625 4.75C22.8333 4.54167 22.0625 4.4375 21.3125 4.4375C18.8542 4.4375 16.7292 5.14583 14.9375 6.5625C13.1875 7.9375 11.9792 9.75 11.3125 12H22.125C22.375 12 22.5625 12.1042 22.6875 12.3125C22.8542 12.4792 22.9167 12.6667 22.875 12.875L22.8125 13.375C22.7292 13.7917 22.4792 14 22.0625 14H10.875C10.75 15.25 10.75 16.5833 10.875 18H21.0625C21.3125 18 21.5 18.1042 21.625 18.3125C21.7917 18.4792 21.8542 18.6667 21.8125 18.875L21.6875 19.375C21.6458 19.7917 21.4167 20 21 20H11.25C11.875 22.3333 13.0833 24.1875 14.875 25.5625C16.6667 26.8958 18.8125 27.5625 21.3125 27.5625C22.2292 27.5625 23.1458 27.4375 24.0625 27.1875C24.5625 27.0625 24.875 27.25 25 27.75Z'],
+	name: 'falEuroSign'
+} as IconDefinition

package/src/icons/baseIcons/fal/falPoundSign.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+	details: [32, 32, [], '', 'M25.25 23C25.75 23 26 23.25 26 23.75V29.25C26 29.75 25.75 30 25.25 30H6.75C6.25 30 6 29.75 6 29.25V28.4375C6 28.2292 6.0625 28.0625 6.1875 27.9375C6.35417 27.7708 6.54167 27.6875 6.75 27.6875H9.375V18H7.25C6.75 18 6.5 17.75 6.5 17.25V16.75C6.5 16.25 6.75 16 7.25 16H9.375V9.25C9.375 7.16667 10.125 5.4375 11.625 4.0625C13.1667 2.6875 15.1042 2 17.4375 2C19.3958 2 21.2292 2.5625 22.9375 3.6875C23.3958 4.02083 23.4375 4.39583 23.0625 4.8125L22.4375 5.625C22.1458 5.95833 21.8125 6 21.4375 5.75C20.1458 4.91667 18.8125 4.5 17.4375 4.5C15.8125 4.5 14.5208 4.97917 13.5625 5.9375C12.6042 6.85417 12.125 8 12.125 9.375V16H18.75C19.25 16 19.5 16.25 19.5 16.75V17.25C19.5 17.75 19.25 18 18.75 18H12.125V27.625H23.5V23.75C23.5 23.5417 23.5625 23.375 23.6875 23.25C23.8542 23.0833 24.0417 23 24.25 23H25.25Z'],
+	name: 'falPoundSign'
+} as IconDefinition

package/src/icons/baseIcons/fal/falShoppingCart.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+	details: [32, 32, [], '', 'M30.6662 5.33339H7.18223L6.71951 2.86544C6.60123 2.23483 6.05062 1.77783 5.409 1.77783H0.666667C0.2985 1.77783 0 2.07633 0 2.4445V2.88894C0 3.25711 0.2985 3.55561 0.666667 3.55561H5.04L8.92484 24.2749C8.35028 24.9064 8.00001 25.7456 8.00001 26.6667C8.00001 28.6304 9.5919 30.2223 11.5556 30.2223C13.5192 30.2223 15.1111 28.6304 15.1111 26.6667V26.6667C15.1118 26.0424 14.9473 25.429 14.6343 24.8889H22.6991C22.3861 25.429 22.2216 26.0424 22.2223 26.6667C22.2223 28.6304 23.8142 30.2222 25.7778 30.2222C27.7415 30.2222 29.3334 28.6304 29.3334 26.6667C29.3334 25.6671 28.9203 24.7645 28.2563 24.1185C28.1124 23.5496 27.5978 23.1112 26.9627 23.1112H10.5156L9.8489 19.5556H28.259C28.8905 19.5556 29.4355 19.1125 29.5643 18.4942L31.9716 6.93867C32.144 6.11067 31.512 5.33339 30.6662 5.33339V5.33339ZM13.3333 26.6667C13.3333 27.647 12.5358 28.4445 11.5556 28.4445C10.5753 28.4445 9.77779 27.647 9.77779 26.6667C9.77779 25.6865 10.5753 24.889 11.5556 24.889C12.5358 24.889 13.3333 25.6865 13.3333 26.6667ZM25.7778 28.4445C24.7975 28.4445 24 27.647 24 26.6667C24 25.6865 24.7975 24.889 25.7778 24.889C26.7581 24.889 27.5556 25.6865 27.5556 26.6667C27.5556 27.647 26.7581 28.4445 25.7778 28.4445ZM27.8976 17.7778H9.51556L7.51556 7.11117H30.1198L27.8976 17.7778Z'],
+	name: 'falShoppingCart'
+} as IconDefinition

package/src/icons/baseIcons/fal/falUserHeadset.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+	details: [32, 32, [], '', 'M22 22H21.7062C20.9462 22 20.2062 22.1812 19.4875 22.425V22.425C17.225 23.1925 14.7725 23.1925 12.51 22.425C11.7925 22.1812 11.0544 22.0012 10.2963 22.0012H10H10C5.58221 22.0012 2.00069 25.5822 2 30V30C2 31.1046 2.89543 32 4 32H28V32C29.1046 32 30 31.1046 30 30C30 25.5817 26.4183 22 22 22V22ZM4 30V30C4.00343 26.6877 6.68769 24.0035 9.99998 24H10.2962C10.7287 24 11.2287 24.1012 11.8687 24.3181H11.8687C14.5471 25.2265 17.4503 25.2265 20.1287 24.3181C20.7731 24.1 21.2744 23.9988 21.7062 23.9988H22V23.9988C25.3123 24.0022 27.9965 26.6865 28 29.9988L4 30ZM5 14V14C5.55229 14 6 13.5523 6 13V12C6 6.48625 10.4863 2 16 2C21.5138 2 26 6.48625 26 12V13V12.9998C25.997 15.76 23.7603 17.9968 21.0002 18H19.0002C19.0002 16.8954 18.1047 16 17.0002 16H15.0002V16C13.8956 16 13.0002 16.8954 13.0002 18C13.0002 19.1046 13.8956 20 15.0002 20H21.0002V20C24.8642 19.9952 27.9953 16.864 28.0002 13V12C28 5.3825 22.6175 0 16 0C9.38247 0 3.99997 5.3825 3.99997 12V13V13C3.99997 13.5523 4.44769 14 4.99997 14H5ZM16 6V6C19.2988 5.98528 21.985 8.64758 21.9997 11.9464C22.0064 13.4387 21.4542 14.8794 20.4519 15.985C20.4519 15.9906 20.46 15.9944 20.4631 16H21V16C22.0315 15.9977 22.9892 15.4645 23.5344 14.5887C23.8125 13.7725 24 12.9112 24 12C24 7.58173 20.4183 4 16 4C11.5817 4 8 7.58173 8 12C8 14.5262 9.19375 16.75 11.0219 18.2169C11.0181 18.1438 11 18.0744 11 18V18C11.0045 17.2955 11.1972 16.605 11.5581 16V16C9.33446 13.5628 9.50758 9.78436 11.9448 7.56068C13.0527 6.54986 14.5003 5.99274 16 5.99999V6Z'],
+	name: 'falUserHeadset'
+} as IconDefinition

package/src/icons/baseIcons/fas/fasChartNetwork.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+	details: [32, 32, [], '', 'M28.8 12.8C30.565 12.8 32 11.365 32 9.59995C32 7.83495 30.565 6.39995 28.8 6.39995C27.035 6.39995 25.6 7.83495 25.6 9.59995C25.6 11.365 27.035 12.8 28.8 12.8ZM3.2 15.2C1.435 15.2 0 16.635 0 18.4C0 20.165 1.435 21.6 3.2 21.6C4.965 21.6 6.4 20.165 6.4 18.4C6.4 16.635 4.965 15.2 3.2 15.2ZM25.68 13.34L24.72 12.06L22.32 13.86L23.28 15.14L25.68 13.34ZM28.8 22.4C28.08 22.4 27.42 22.65 26.885 23.05L22.085 20.17C22.275 19.61 22.4 19.02 22.4 18.395C22.4 15.3 19.895 12.795 16.8 12.795C16.38 12.795 15.97 12.85 15.58 12.94L13.54 8.56995C14.07 7.99995 14.4 7.23995 14.4 6.39995C14.4 4.63495 12.965 3.19995 11.2 3.19995C9.435 3.19995 8 4.63495 8 6.39995C8 8.16495 9.435 9.59995 11.2 9.59995C11.255 9.59995 11.305 9.58495 11.36 9.58495L13.41 13.975C12.075 14.995 11.2 16.59 11.2 18.4C11.2 21.495 13.705 24 16.8 24C18.405 24 19.84 23.315 20.86 22.235L25.65 25.11C25.625 25.27 25.6 25.4349 25.6 25.6C25.6 27.365 27.035 28.8 28.8 28.8C30.565 28.8 32 27.365 32 25.6C32 23.835 30.565 22.4 28.8 22.4ZM16.8 20.8C15.475 20.8 14.4 19.725 14.4 18.4C14.4 17.075 15.475 16 16.8 16C18.125 16 19.2 17.075 19.2 18.4C19.2 19.725 18.125 20.8 16.8 20.8ZM7.6 19.2H10V17.6H7.6V19.2Z'],
+	name: 'fasChartNetwork'
+} as IconDefinition

package/src/icons/baseIcons/fas/fasPuzzlePiece.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+	details: [33, 32, [], '', 'M29.3579 16.0362C27.0513 16.0362 26.0524 17.7913 24.7991 17.7913C21.4672 17.7913 24.5 8.00001 24.5 8.00001C24.5 8.00001 13.5951 12.4445 13.5951 7.81684C13.5951 5.82645 15.6111 5.24739 15.6111 3.03989C15.6111 1.06756 14.0492 0 12.1966 0C10.2714 0 8.50962 1.0495 8.50962 3.13034C8.50962 5.42834 10.2713 6.4235 10.2713 7.67201C10.2714 11.54 0.5 9.26434 0.5 9.26434V27.7775C0.5 27.7775 10.4242 30.0579 10.4242 26.1852C10.4242 24.9367 8.20195 23.957 8.20195 21.659C8.20195 19.5781 9.82695 18.5287 11.734 18.5287C13.6047 18.5287 15.1667 19.5962 15.1667 21.5685C15.1667 23.776 13.1507 24.3551 13.1507 26.3455C13.1507 29.7234 20.3548 27.7749 23.219 27.7749C23.219 27.7749 21.2899 21.1026 24.6539 21.1026C26.6517 21.1026 27.2329 23.1111 29.4487 23.1111C31.4285 23.1111 32.5 21.555 32.5 19.6913C32.5 17.7913 31.4466 16.0362 29.3579 16.0362Z'],
+	name: 'fasPuzzlePiece'
+} as IconDefinition

package/src/icons/baseIcons/icons.ts

@@ -1,3 +1,5 @@
+export { default as cubBellship } from './cub/cubBellship'
+export { default as cubDNV } from './cub/cubDNV'
 export { default as cubPowerBi } from './cub/cubPowerBi'
 export { default as cubVeracity } from './cub/cubVeracity'
 export { default as cuiCheckboxIndeterminate } from './cui/cuiCheckboxIndeterminate'
@@ -12,6 +14,8 @@ export { default as culCircleChartAlt } from './cul/culCircleChartAlt'
 export { default as culCovid } from './cul/culCovid'
 export { default as culDeepSearch } from './cul/culDeepSearch'
 export { default as culDotsMenu } from './cul/culDotsMenu'
+export { default as culFileDownloadAlt } from './cul/culFileDownloadAlt'
+export { default as culFilterAlt } from './cul/culFilterAlt'
 export { default as culGlobePlus } from './cul/culGlobePlus'
 export { default as culListDense } from './cul/culListDense'
 export { default as culMapMarkerStar } from './cul/culMapMarkerStar'
@@ -145,12 +149,14 @@ export { default as falCompressAlt } from './fal/falCompressAlt'
 export { default as falCopy } from './fal/falCopy'
 export { default as falCreditCard } from './fal/falCreditCard'
 export { default as falDatabase } from './fal/falDatabase'
+export { default as falDollarSign } from './fal/falDollarSign'
 export { default as falDotCircle } from './fal/falDotCircle'
 export { default as falDownload } from './fal/falDownload'
 export { default as falEdit } from './fal/falEdit'
 export { default as falEllipsisH } from './fal/falEllipsisH'
 export { default as falEllipsisV } from './fal/falEllipsisV'
 export { default as falEnvelope } from './fal/falEnvelope'
+export { default as falEuroSign } from './fal/falEuroSign'
 export { default as falExchange } from './fal/falExchange'
 export { default as falExclamationCircle } from './fal/falExclamationCircle'
 export { default as falExclamationTriangle } from './fal/falExclamationTriangle'
@@ -220,6 +226,7 @@ export { default as falPlug } from './fal/falPlug'
 export { default as falPlus } from './fal/falPlus'
 export { default as falPlusCircle } from './fal/falPlusCircle'
 export { default as falPlusSquare } from './fal/falPlusSquare'
+export { default as falPoundSign } from './fal/falPoundSign'
 export { default as falPrint } from './fal/falPrint'
 export { default as falPuzzlePiece } from './fal/falPuzzlePiece'
 export { default as falQuestionCircle } from './fal/falQuestionCircle'
@@ -237,6 +244,7 @@ export { default as falShieldAlt } from './fal/falShieldAlt'
 export { default as falShieldCheck } from './fal/falShieldCheck'
 export { default as falShip } from './fal/falShip'
 export { default as falShoppingBasket } from './fal/falShoppingBasket'
+export { default as falShoppingCart } from './fal/falShoppingCart'
 export { default as falSignIn } from './fal/falSignIn'
 export { default as falSignInAlt } from './fal/falSignInAlt'
 export { default as falSignOut } from './fal/falSignOut'
@@ -272,6 +280,7 @@ export { default as falUserCircle } from './fal/falUserCircle'
 export { default as falUserCog } from './fal/falUserCog'
 export { default as falUserEdit } from './fal/falUserEdit'
 export { default as falUserFriends } from './fal/falUserFriends'
+export { default as falUserHeadset } from './fal/falUserHeadset'
 export { default as falUserPlus } from './fal/falUserPlus'
 export { default as falUsers } from './fal/falUsers'
 export { default as falUsersClass } from './fal/falUsersClass'
@@ -286,11 +295,13 @@ export { default as fasCaretDown } from './fas/fasCaretDown'
 export { default as fasCaretLeft } from './fas/fasCaretLeft'
 export { default as fasCaretRight } from './fas/fasCaretRight'
 export { default as fasCaretUp } from './fas/fasCaretUp'
+export { default as fasChartNetwork } from './fas/fasChartNetwork'
 export { default as fasCheckCircle } from './fas/fasCheckCircle'
 export { default as fasDiamond } from './fas/fasDiamond'
 export { default as fasFolder } from './fas/fasFolder'
 export { default as fasMapMarkerAlt } from './fas/fasMapMarkerAlt'
 export { default as fasMapMarkerExclamation } from './fas/fasMapMarkerExclamation'
+export { default as fasPuzzlePiece } from './fas/fasPuzzlePiece'
 export { default as fasQuoteLeft } from './fas/fasQuoteLeft'
 export { default as fasQuoteRight } from './fas/fasQuoteRight'
 export { default as fasSolarPanel } from './fas/fasSolarPanel'

package/src/icons/baseIcons/types.ts

@@ -1,4 +1,6 @@
 export type BaseIcon =
+  | 'cubBellship'
+  | 'cubDNV'
   | 'cubPowerBi'
   | 'cubVeracity'
   | 'cuiCheckboxIndeterminate'
@@ -13,6 +15,8 @@ export type BaseIcon =
   | 'culCovid'
   | 'culDeepSearch'
   | 'culDotsMenu'
+  | 'culFileDownloadAlt'
+  | 'culFilterAlt'
   | 'culGlobePlus'
   | 'culListDense'
   | 'culMapMarkerStar'
@@ -146,12 +150,14 @@ export type BaseIcon =
   | 'falCopy'
   | 'falCreditCard'
   | 'falDatabase'
+  | 'falDollarSign'
   | 'falDotCircle'
   | 'falDownload'
   | 'falEdit'
   | 'falEllipsisH'
   | 'falEllipsisV'
   | 'falEnvelope'
+  | 'falEuroSign'
   | 'falExchange'
   | 'falExclamationCircle'
   | 'falExclamationTriangle'
@@ -221,6 +227,7 @@ export type BaseIcon =
   | 'falPlus'
   | 'falPlusCircle'
   | 'falPlusSquare'
+  | 'falPoundSign'
   | 'falPrint'
   | 'falPuzzlePiece'
   | 'falQuestionCircle'
@@ -238,6 +245,7 @@ export type BaseIcon =
   | 'falShieldCheck'
   | 'falShip'
   | 'falShoppingBasket'
+  | 'falShoppingCart'
   | 'falSignIn'
   | 'falSignInAlt'
   | 'falSignOut'
@@ -273,6 +281,7 @@ export type BaseIcon =
   | 'falUserCog'
   | 'falUserEdit'
   | 'falUserFriends'
+  | 'falUserHeadset'
   | 'falUserPlus'
   | 'falUsers'
   | 'falUsersClass'
@@ -287,11 +296,13 @@ export type BaseIcon =
   | 'fasCaretLeft'
   | 'fasCaretRight'
   | 'fasCaretUp'
+  | 'fasChartNetwork'
   | 'fasCheckCircle'
   | 'fasDiamond'
   | 'fasFolder'
   | 'fasMapMarkerAlt'
   | 'fasMapMarkerExclamation'
+  | 'fasPuzzlePiece'
   | 'fasQuoteLeft'
   | 'fasQuoteRight'
   | 'fasSolarPanel'

package/src/index.ts

@@ -17,6 +17,7 @@ export * from './image'
 export * from './input'
 export * from './link'
 export * from './list'
+export * from './logo'
 export * from './menu'
 export * from './modal'
 export * from './notification'

package/src/input/input.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useState } from 'react'
 
 import { styled, useStyleConfig, vui, VuiComponent } from '../core'
-import T from '../t'
+import { T } from '../t'
 import { ChangeEvent, cs, filterUndefined, isString } from '../utils'
 import { inputStateMapping } from './consts'
 import { InputProvider } from './context'

package/src/link/link.types.ts

@@ -10,6 +10,8 @@ export type LinkProps = SystemProps &
     decoration?: TypographyProps['textDecoration']
     /** Alias for hoverTextDecoration prop. @deprecated */
     hoverDecoration?: TypographyProps['textDecoration']
+    /** Href attribute value for the a tag. */
+    href?: string
     /** Socket displaying an icon on the left. */
     iconLeft?: IconProp | JSX.Element
     /** Socket displaying an icon on the right. */

package/src/logo/Logo.tsx

@@ -0,0 +1,29 @@
+import React from 'react'
+
+import Box from '../box'
+import { cdnUrl, vui } from '../core'
+import Svg from '../svg'
+import { cs } from '../utils'
+import { LogoProps } from './logo.types'
+
+const veracityLogo = `${cdnUrl}/common/icons/logos/veracity-logo.svg`
+const dnvLogo = `${cdnUrl}/common/icons/logos/dnv-logo.svg`
+
+/** Brand logo. By default Veracity logo is used. */
+export const Logo = vui<'div', LogoProps>((props, ref) => {
+  const { brand, children, className, src, url, ...rest } = props
+
+  let svgSrc = src
+
+  if (!svgSrc) svgSrc = brand === 'dnv' ? dnvLogo : veracityLogo
+
+  const linkProps = url ? { as: 'a', href: url, outline: 'none', focusRing: 2 } : {}
+
+  return (
+    <Box centerV className={cs('vui-logo', className)} flexShrink={0} h={40} mr={2} ref={ref} {...linkProps} {...rest}>
+      {children ?? <Svg aria-label="logo" h="100%" src={svgSrc} />}
+    </Box>
+  )
+})
+
+export default Logo

package/src/logo/index.ts

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

package/src/logo/logo.types.ts

@@ -0,0 +1,12 @@
+import { BoxProps } from '../box/box.types'
+
+export type LogoData = {
+  /** Brand name. */
+  brand?: 'veracity' | 'dnv'
+  /** Loads logo svg from the given source. */
+  src?: string
+  /** Renders logo wrapper as a link with given url as href. */
+  url?: string
+}
+
+export type LogoProps = BoxProps & LogoData

package/src/modal/focusLock.tsx

@@ -1,6 +1,7 @@
 import React, { FC, useCallback } from 'react'
 import ReactFocusLock from 'react-focus-lock'
 
+import { ChildrenProp } from '../core'
 import { FocusLockProps } from './focusLock.types'
 
 /**
@@ -8,7 +9,7 @@ import { FocusLockProps } from './focusLock.types'
  * only cycle through the children and won't leave the boundary of the FocusLock.
  * This behavior enhances accessibility of the Modal component.
  */
-export const FocusLock: FC<FocusLockProps> = props => {
+export const FocusLock: FC<FocusLockProps & ChildrenProp> = props => {
   const {
     autoFocus,
     children,

package/src/modal/modal.types.ts

@@ -1,3 +1,5 @@
+import { ReactElement } from 'react'
+
 import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
 import { MouseEvent } from '../utils'
@@ -14,7 +16,7 @@ export type ModalProps = SystemProps &
     /** Handle zoom/pinch gestures on iOS devices when scroll locking is enabled. */
     allowPinchZoom?: boolean
     /** A single child content element. */
-    children: React.ReactElement
+    children: ReactElement
     /** Props passed to internal ModalContent component. */
     contentProps?: ModalContentProps
     /** It won't auto-focus the first focuable element within the 'children' once FocusLock mounts. */

package/src/modal/modalManager.ts

@@ -1,5 +1,7 @@
 import { Ref, useEffect } from 'react'
 
+import { addBodyClass, removeBodyClass } from '../utils/dom'
+
 /** State management for nested modals. */
 class ModalManager {
   modals: any[] = []
@@ -25,12 +27,12 @@ export function useModalManager(ref: Ref<any>, isOpen?: boolean, disableScrollLo
   useEffect(() => {
     if (isOpen) {
       manager.add(ref)
-      if (!disableScrollLock) document.body.classList.add('no-scroll')
+      if (!disableScrollLock) addBodyClass('vui-no-scroll')
     }
 
     return () => {
       manager.remove(ref)
-      if (!disableScrollLock) document.body.classList.remove('no-scroll')
+      if (!disableScrollLock) removeBodyClass('vui-no-scroll')
     }
   }, [isOpen, ref])
 }