@veracity/vui 2.5.1 → 2.6.1

package/src/header/headerServices.tsx

@@ -33,14 +33,7 @@ export function HeaderServices(props: HeaderServicesProps) {
     <>
       <RenderOnScreen minWidth="lg">
         <Menu isLazy={false} offset={[0, 8]} placement="bottom-end" size="lg" {...rest}>
-          <Menu.Button
-            colorScheme="prussian"
-            icon="falTh"
-            ml={1}
-            title="My services"
-            {...styles.button}
-            {...buttonProps}
-          />
+          <Menu.Button icon="falTh" ml={1} title="My services" {...styles.button} {...buttonProps} />
 
           <Menu.List heading="My Services" maxH={400} w={320} {...styles.list}>
             <ListContent links={links} />

package/src/heading/heading.tsx

@@ -9,7 +9,7 @@ export const HeadingBase = styled.h2Box`
   transition-duration: fast;
 `
 
-/** Displays bold text in different sizes. Used as title for pages, articles, panels, etc. */
+/** Used to define headings and titles for pages, articles, panels, etc. */
 export const Heading = vui<'h2', HeadingProps>((props, ref) => {
   const { align, casing, children, className, decoration, text, weight, ...rest } = omitThemingProps(props)
   const styles = useStyleConfig('Heading', props)

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

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+  details: [32, 32, [], '', 'M16 32C24.8366 32 32 24.8365 32 16C32 7.16345 24.8366 0 16 0C7.16344 0 0 7.16345 0 16C0 24.8365 7.16344 32 16 32ZM21.8359 13.3936L21.2136 17.375H17.9452V27H13.5617V17.375H10V13.3936H13.5617V10.359C13.5617 6.90698 15.656 5 18.8602 5C20.3949 5 22 5.26904 22 5.26904V8.65881H20.2312C18.4887 8.65881 17.9452 9.72058 17.9452 10.8098V13.3936H21.8359Z'],
+  name: 'cubCircleFB'
+} as IconDefinition

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

@@ -0,0 +1,9 @@
+/* eslint-disable */
+
+import {IconDefinition} from '../../types'
+
+export default {
+    details: [32, 32, [], '', 'M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32ZM7.31384 24H11.2529V11.3147H7.31384V24ZM7 7.28132C7 8.54095 8.02167 9.58428 9.28127 9.58428C10.5404 9.58428 11.5625 8.54095 11.5625 7.28132C11.5625 6.02138 10.5412 5 9.28127 5C8.02136 5 7 6.02138 7 7.28132ZM22.0651 24H26V17.0318C26 13.6219 25.2671 10.9966 21.2805 10.9966C19.364 10.9966 18.0794 12.0484 17.5535 13.0451H17.4983V11.3147H13.7204V24H17.6553V17.7188C17.6553 16.0648 17.9691 14.4659 20.0171 14.4659C22.0354 14.4659 22.0651 16.3532 22.0651 17.8249V24Z'],
+    name: 'cubCircleLinkedIn',
+    pathProps: {fillRule: 'evenodd', clipRule: 'evenodd'}
+} as IconDefinition

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

@@ -0,0 +1,9 @@
+/* eslint-disable */
+
+import {IconDefinition} from '../../types'
+
+export default {
+    details: [32, 32, [], '', 'M16 32C24.8366 32 32 24.8365 32 16C32 7.16345 24.8366 0 16 0C7.16344 0 0 7.16345 0 16C0 24.8365 7.16344 32 16 32ZM24.7526 12.0765C24.7526 11.8796 24.7526 11.6827 24.7386 11.486C25.6181 10.839 26.3859 10.0375 27 9.13757C26.1904 9.48901 25.3109 9.74219 24.4036 9.84058C25.3388 9.2782 26.0507 8.39221 26.3858 7.33752C25.5203 7.85779 24.5431 8.23755 23.5241 8.43433C22.7005 7.54846 21.5279 7 20.2297 7C17.731 7 15.7208 9.03906 15.7208 11.5422C15.7208 11.8938 15.7627 12.2452 15.8325 12.5828C12.0914 12.3859 8.75505 10.5859 6.53549 7.82971C6.14461 8.50464 5.9213 9.27808 5.9213 10.1218C5.9213 11.6969 6.71695 13.089 7.93143 13.9047C7.19164 13.8766 6.49361 13.6656 5.89337 13.3281V13.3844C5.89337 15.5922 7.44292 17.4203 9.5089 17.8422C9.13202 17.9406 8.72717 17.9968 8.32236 17.9968C8.02917 17.9968 7.75002 17.9688 7.47079 17.9265C8.04315 19.7266 9.70433 21.0344 11.6866 21.0765C10.1371 22.3 8.19667 23.0172 6.08884 23.0172C5.71191 23.0172 5.36296 23.0032 5 22.9609C6.9962 24.2546 9.36929 25 11.9239 25C20.2158 25 24.7526 18.0812 24.7526 12.0765Z'],
+    name: 'cubCircleTwitter',
+    pathProps: {fillRule: 'evenodd', clipRule: 'evenodd'}
+} as IconDefinition

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

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+  details: [32, 32, [], '', 'M19.8409 16.0142L14.3523 13.0536V18.9747L19.8409 16.0142Z M16 32C24.8365 32 32 24.8365 32 16C32 7.16345 24.8365 0 16 0C7.16345 0 0 7.16345 0 16C0 24.8365 7.16345 32 16 32ZM24.7046 9.4187C25.6081 9.64917 26.3197 10.3282 26.5612 11.1906C27 12.7534 27 16.0142 27 16.0142C27 16.0142 27 19.2749 26.5612 20.8378C26.3197 21.7 25.6081 22.3508 24.7046 22.5813C23.0669 23 16.5 23 16.5 23C16.5 23 9.93314 23 8.29544 22.5813C7.39194 22.3508 6.68033 21.7 6.43881 20.8378C6 19.2749 6 16.0142 6 16.0142C6 16.0142 6 12.7534 6.43881 11.1906C6.68033 10.3282 7.39194 9.64929 8.29544 9.4187C9.93314 9 16.5 9 16.5 9C16.5 9 23.0669 9 24.7046 9.4187Z'],
+  name: 'cubCircleYoutube'
+} as IconDefinition

package/src/icons/baseIcons/icons.ts

@@ -19,6 +19,10 @@ export { default as conUploadFile } from './conc/conUploadFile'
 export { default as conUploadFile1 } from './conc/conUploadFile1'
 export { default as conUploadFile2 } from './conc/conUploadFile2'
 export { default as cubBellship } from './cub/cubBellship'
+export { default as cubCircleFB } from './cub/cubCircleFB'
+export { default as cubCircleLinkedIn } from './cub/cubCircleLinkedIn'
+export { default as cubCircleTwitter } from './cub/cubCircleTwitter'
+export { default as cubCircleYoutube } from './cub/cubCircleYoutube'
 export { default as cubDNV } from './cub/cubDNV'
 export { default as cubPowerBi } from './cub/cubPowerBi'
 export { default as cubVeracity } from './cub/cubVeracity'

package/src/icons/baseIcons/types.ts

@@ -20,6 +20,10 @@ export type BaseIcon =
   | 'conUploadFile1'
   | 'conUploadFile2'
   | 'cubBellship'
+  | 'cubCircleFB'
+  | 'cubCircleLinkedIn'
+  | 'cubCircleTwitter'
+  | 'cubCircleYoutube'
   | 'cubDNV'
   | 'cubPowerBi'
   | 'cubVeracity'

package/src/input/input.tsx

@@ -1,6 +1,8 @@
 import React, { useEffect, useMemo, useState } from 'react'
 
 import { styled, useStyleConfig, vui, VuiComponent } from '../core'
+import { List } from '../list'
+import { Popover } from '../popover'
 import { T } from '../t'
 import { ChangeEvent, cs, filterUndefined, isString } from '../utils'
 import { inputColors, inputStateMapping } from './consts'
@@ -11,6 +13,10 @@ import { InputProps } from './input.types'
 import InputIcon from './inputIcon'
 import InputInput from './inputInput'
 
+export const InputContainer = styled.divBox`
+  width: 100%;
+`
+
 export const InputBase = styled.divBox`
   align-items: center;
   background-color: white;
@@ -36,7 +42,7 @@ export const InputBase = styled.divBox`
  */
 export const Input = vui<'div', InputProps>((props, ref) => {
   const {
-    autoComplete,
+    autoCompleteOptions,
     autoFocus,
     children,
     className,
@@ -100,54 +106,71 @@ export const Input = vui<'div', InputProps>((props, ref) => {
     setCount(`${value}`?.length ? `${value}`.length : 0)
   }, [value])
 
+  const filterAutoCompleteOptions = (i: string) =>
+    valueInternal === i ? false : !valueInternal || i.toLowerCase().includes(`${valueInternal}`.toLowerCase())
+
   return (
     <InputProvider value={context}>
-      <InputBase className={cs('vui-input', className)} ref={ref} {...styles.container} {...aliasedProps} {...rest}>
-        {itemLeft}
-        {isString(iconLeft) ? <InputIcon ml={1} name={iconLeft} /> : iconLeft}
-        {children ?? input ?? (
-          <InputInput
-            ref={inputRef}
-            {...{
-              autoComplete,
-              autoFocus,
-              defaultValue,
-              disabled,
-              id,
-              max,
-              maxLength,
-              min,
-              name,
-              onBlur,
-              onChange,
-              onFocus,
-              pattern,
-              placeholder,
-              readOnly,
-              required,
-              step,
-              type
-            }}
-            value={valueInternal}
-            {...inputProps}
-          />
-        )}
-        {isString(iconRight) ? <InputIcon mr={1} name={iconRight} /> : iconRight}
-        {itemRight}
-        {state && <InputIcon mr={1} {...states[state]?.iconProps} />}
-        {showCount && (
-          <T
-            className="vui-inputCount"
-            color={maxLength && count > maxLength ? inputColors.error : inputColors.helpText}
-            position="absolute"
-            right={0}
-            size="sm"
-            top="calc(100% + 1px)"
-          >
-            {count} {maxLength ? `/ ${maxLength}` : null}
-          </T>
+      <Popover placement="bottom-start">
+        <Popover.Trigger as={InputContainer}>
+          <InputBase className={cs('vui-input', className)} ref={ref} {...styles.container} {...aliasedProps} {...rest}>
+            {itemLeft}
+            {isString(iconLeft) ? <InputIcon ml={1} name={iconLeft} /> : iconLeft}
+            {children ?? input ?? (
+              <InputInput
+                ref={inputRef}
+                {...{
+                  autoFocus,
+                  defaultValue,
+                  disabled,
+                  id,
+                  max,
+                  maxLength,
+                  min,
+                  name,
+                  onBlur,
+                  onChange,
+                  onFocus,
+                  pattern,
+                  placeholder,
+                  readOnly,
+                  required,
+                  step,
+                  type
+                }}
+                value={valueInternal}
+                {...inputProps}
+              />
+            )}
+            {isString(iconRight) ? <InputIcon mr={1} name={iconRight} /> : iconRight}
+            {itemRight}
+            {state && <InputIcon mr={1} {...states[state]?.iconProps} />}
+            {showCount && (
+              <T
+                className="vui-inputCount"
+                color={maxLength && count > maxLength ? inputColors.error : inputColors.helpText}
+                position="absolute"
+                right={0}
+                size="sm"
+                top="calc(100% + 1px)"
+              >
+                {count} {maxLength ? `/ ${maxLength}` : null}
+              </T>
+            )}
+          </InputBase>
+        </Popover.Trigger>
+        {!!autoCompleteOptions && (
+          <Popover.Content>
+            <List>
+              {autoCompleteOptions.filter(filterAutoCompleteOptions).map((i: string) => (
+                <List.Item cursor="pointer" hoverBg="skyBlue.hover" key={i} onClick={() => setValueInternal(i)}>
+                  {i}
+                </List.Item>
+              ))}
+            </List>
+          </Popover.Content>
         )}
-      </InputBase>
+      </Popover>
       {!!helpText && <HelpText>{helpText}</HelpText>}
       {!!errorText && <HelpText isError>{errorText}</HelpText>}
     </InputProvider>

package/src/input/input.types.ts

@@ -10,8 +10,8 @@ export type InputInputProps = PropsOf<'input', SystemProps>
 
 export type InputProps = SystemProps &
   ThemingProps<'Input'> & {
-    /** Passed to the inner input. */
-    autoComplete?: string
+    /** List of autocomplete options. */
+    autoCompleteOptions?: string[]
     /** Passed to the inner input. */
     autoFocus?: boolean
     /** Deprecated. Please use variant instead. @deprecated  */

package/src/input/inputInput.tsx

@@ -35,6 +35,7 @@ export const InputInput = vui<'input', InputInputProps>((props, ref) => {
 
   return (
     <InputInputBase
+      autoComplete={false}
       className={cs('vui-inputInput', className)}
       ref={ref}
       {...styles.input}

package/src/link/link.types.ts

@@ -4,7 +4,7 @@ import { ThemingProps } from '../theme'
 
 export type LinkProps = SystemProps &
   ThemingProps<'Link'> & {
-    /** Available theme colors for this component. @deprecated */
+    /** Deprecated. Please use variant instead. @deprecated  */
     colorScheme?: 'blue' | 'white'
     /** Alias for textDecoration prop. @deprecated */
     decoration?: TypographyProps['textDecoration']

package/src/link/theme.ts

@@ -1,45 +1,39 @@
-function variantDefault() {
-  const container = {
-    color: `seaBlue.main`,
-    hoverColor: `seaBlue.main`
-  }
-
-  return { container }
-}
-
-function variantWhite() {
-  const container = {
-    color: `white`,
-    hoverColor: `white`
-  }
-
-  return { container }
-}
-
-function variantLight() {
-  const container = {
-    color: `seaBlue.main`,
-    hoverColor: `seaBlue.main`
-  }
-
-  return { container }
-}
-
-const variantPlain = {
+const baseStyle = {
   container: {
-    hoverTextDecoration: 'none'
+    dislplay: 'inline'
   }
 }
 
-const baseStyle = {}
-
 const defaultProps = {
   size: 'md',
-  variant: 'default'
+  variant: 'dark'
 }
 
 const parts = ['container', 'icon', 'text']
 
+const variants = {
+  dark: {
+    container: {
+      color: `seaBlue.main`
+    }
+  },
+  light: {
+    container: {
+      color: `digiGreen.main`
+    }
+  },
+  white: {
+    container: {
+      color: `white`
+    }
+  },
+  plain: {
+    container: {
+      hoverTextDecoration: 'none'
+    }
+  }
+}
+
 const sizes = {
   sm: {
     container: {
@@ -79,13 +73,6 @@ const sizes = {
   }
 }
 
-const variants = {
-  default: variantDefault,
-  light: variantLight,
-  plain: variantPlain,
-  white: variantWhite
-}
-
 export default {
   baseStyle,
   defaultProps,

package/src/list/list.tsx

@@ -14,13 +14,10 @@ export const ListBase = styled.ulBox``
 
 /** Displays a list of list link items and optional heading. Exposes some props to the children via context. */
 export const List = vui<'ul', ListProps>((props, ref) => {
-  const { children, className, colorScheme, heading, isInteractive, items, size, variant, ...rest } = props
+  const { children, className, heading, isInteractive, items, size, variant, ...rest } = props
   const styles = useStyleConfig('List', props)
 
-  const context = useMemo(
-    () => filterUndefined({ colorScheme, isInteractive, size, variant }),
-    [colorScheme, isInteractive, size, variant]
-  )
+  const context = useMemo(() => filterUndefined({ isInteractive, size, variant }), [isInteractive, size, variant])
 
   return (
     <ListProvider value={context}>

package/src/list/list.types.ts

@@ -8,7 +8,7 @@ import { PropsOf } from '../utils'
 
 export type ListProps = SystemProps &
   ThemingProps<'List'> & {
-    /** Available theme colors for this component. @default blue */
+    /** Deprecated. @deprecated  */
     colorScheme?: 'blue' | 'grey'
     /** Socket displaying a heading above the items. */
     heading?: React.ReactNode
@@ -28,7 +28,7 @@ export type ListItemProps = SystemProps &
     centerH?: boolean
     /** Centers the content vertically. @deprecated */
     centerV?: boolean
-    /** Available theme colors for this component. */
+    /** Deprecated. @deprecated  */
     colorScheme?: 'blue' | 'grey'
     /** Displays content in a column. @deprecated */
     column?: boolean

package/src/list/listHeading.tsx

@@ -13,7 +13,6 @@ export const ListHeading = vui<'span', TProps>((props, ref) => {
   return (
     <T
       className={cs('vui-listHeading', className)}
-      color="grey.60"
       display="inline-block"
       px={2}
       py={1}

package/src/list/listItem.tsx

@@ -29,8 +29,7 @@ export const ListItemBase = styled.liBox`
   transition-duration: fast;
 
   &[aria-disabled='true'] {
-    background-color: disabled.bg;
-    color: disabled.color;
+    color: sandstone.main;
     cursor: not-allowed;
     user-select: none;
   }
@@ -100,6 +99,7 @@ export const ListItem = vui<'li', ListItemProps>((props, ref) => {
 
   return (
     <ListItemBase
+      bg={disabled ? 'sandstone.95' : undefined}
       className={cs('vui-listItem', className)}
       onClick={!disabled ? onClick : undefined}
       ref={ref}

package/src/list/theme.ts

@@ -1,24 +1,18 @@
-import { Dict } from '../utils'
-
-function variantDefault(props: Dict) {
-  const { colorScheme: c } = props
-
-  const item: Dict = {
-    activeBg: `${c}.30`,
-    hoverBg: `${c}.20`,
-    selectedBg: `${c}.10`,
+const baseStyle = {
+  item: {
+    color: 'sandstone.10',
+    activeBg: 'skyBlue.95',
+    hoverBg: 'skyBlue.90',
+    selectedBg: 'skyBlue.95',
     px: 2
+  },
+  heading: {
+    color: 'sandstone.60'
   }
-
-  return { item }
 }
 
-const baseStyle = {}
-
 const defaultProps = {
-  colorScheme: 'blue',
-  size: 'md',
-  variant: 'default'
+  size: 'lg'
 }
 
 const parts = ['container', 'divider', 'heading', 'icon', 'item', 'text']
@@ -29,8 +23,11 @@ const sizes = {
       size: 'sm'
     },
     item: {
-      fontSize: 'md',
-      h: 32
+      fontSize: 12,
+      h: 24
+    },
+    heading: {
+      fontSize: 12
     }
   },
   md: {
@@ -38,56 +35,53 @@ const sizes = {
       size: 'md'
     },
     item: {
-      fontSize: 'md',
-      h: 40
+      fontSize: 14,
+      h: 32
+    },
+    heading: {
+      fontSize: 14
     }
   },
   lg: {
-    item: {
-      fontSize: 'md',
-      h: 48
-    },
     icon: {
       size: 'lg'
+    },
+    item: {
+      fontSize: 16,
+      h: 40
+    },
+    heading: {
+      fontSize: 16
     }
   },
   xl: {
-    item: {
-      fontSize: 'lg',
-      h: 56
-    },
     icon: {
-      scale: 2
-    }
-  }
-}
-
-const variants = {
-  default: variantDefault,
-  ordered: {
-    container: {
-      as: 'ol',
-      listStyleType: 'decimal',
-      pl: 3
+      size: 'xl'
     },
     item: {
-      display: 'list-item',
-      h: ''
+      fontSize: 18,
+      h: 48
+    },
+    heading: {
+      fontSize: 18
     }
   },
-  unordered: {
-    container: {
-      as: 'ul',
-      listStyleType: 'disc',
-      pl: 3
+  xxl: {
+    icon: {
+      size: 'xl'
     },
     item: {
-      display: 'list-item',
-      h: ''
+      fontSize: 18,
+      h: 56
+    },
+    heading: {
+      fontSize: 18
     }
   }
 }
 
+const variants = {}
+
 export default {
   baseStyle,
   defaultProps,

package/src/logo/Logo.tsx

@@ -9,7 +9,7 @@ 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. */
+/** Brand logo. */
 export const Logo = vui<'div', LogoProps>((props, ref) => {
   const { brand, children, className, src, url, ...rest } = props
 

package/src/menu/menuList.tsx

@@ -13,7 +13,7 @@ export const MenuList = vui<'ul', MenuListProps>((props, ref) => {
   const styles = useStyleConfig('Menu', useMenuContext())
 
   return (
-    <PopoverContent ref={contentRef} {...contentProps}>
+    <PopoverContent borderRadius="1px" ref={contentRef} {...contentProps}>
       <List className={cs('vui-menuList', className)} py={1} ref={ref} w="100%" {...styles.list} {...rest} />
     </PopoverContent>
   )

package/src/modal/modal.tsx

@@ -103,7 +103,9 @@ export const Modal = vui<'div', ModalProps>((props, ref) => {
             isDisabled={disableTrapFocus}
             returnFocus={!disableReturnFocus}
           >
-            <ModalContent {...contentProps}>{cloneElement(children, childProps)}</ModalContent>
+            <ModalContent animation="fadeDown" {...contentProps}>
+              {cloneElement(children, childProps)}
+            </ModalContent>
           </FocusLock>
         </Box>
       </Portal>

package/src/modal/modalBackdrop.tsx

@@ -2,14 +2,16 @@ import React from 'react'
 
 import { styled, useStyleConfig, vui } from '../core'
 import { colors } from '../theme'
-import { cs, hexToRGBA } from '../utils'
+import { cs, HSLToRGBA, parseHSL } from '../utils'
 import { useModalContext } from './context'
 import { ModalBackdropProps } from './modal.types'
 
+const { h, s, l } = parseHSL(colors.sandstone[5])
+const rgba = HSLToRGBA(h, s, l, 0.6)
+
 export const ModalBackdropBase = styled.divBox`
-  animation: vui-fadeIn 0.3s ease;
-  background-color: ${hexToRGBA(colors.prussian[80], 0.6)};
-  inset: 0px;
+  background-color: ${rgba};
+  inset: 0;
   position: fixed;
   z-index: modal;
 `
@@ -19,7 +21,15 @@ export const ModalBackdrop = vui<'div', ModalBackdropProps>((props, ref) => {
   const { className, ...rest } = props
   const styles = useStyleConfig('Modal', useModalContext())
 
-  return <ModalBackdropBase className={cs('vui-modalBackdrop', className)} ref={ref} {...styles.backdrop} {...rest} />
+  return (
+    <ModalBackdropBase
+      animation="fadeIn"
+      className={cs('vui-modalBackdrop', className)}
+      ref={ref}
+      {...styles.backdrop}
+      {...rest}
+    />
+  )
 })
 
 export default ModalBackdrop