@veracity/vui 2.5.0 → 2.6.0

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.seaBlue.main)
+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

package/src/select/select.tsx

@@ -1,9 +1,11 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 
+import { Box } from '../box'
+import { Input } from '../input'
 import { Popover } from '../popover'
 import { __DEV__ } from '../utils'
 import { SelectProvider } from './context'
-import { SelectProps } from './select.types'
+import { SelectOptionData, SelectProps } from './select.types'
 import SelectButton from './selectButton'
 import SelectContent from './selectContent'
 import SelectGroup from './selectGroup'
@@ -29,6 +31,7 @@ export function Select(props: SelectProps) {
     placeholder = 'Please select',
     readOnly,
     selectButton,
+    showOptionsFilter,
     size,
     value,
     variant,
@@ -41,6 +44,9 @@ export function Select(props: SelectProps) {
     console.error('<Select /> is used with isMultiple but its value is not an array: ', value)
   }
 
+  const [query, setQuery] = useState<string>('')
+  const [filteredOptions, setFilteredOptions] = useState(options)
+
   const context = {
     disabled,
     isInvalid,
@@ -53,6 +59,16 @@ export function Select(props: SelectProps) {
     variant,
     ...selectProps
   }
+  const onQueryChange = (e: any) => {
+    setQuery(e.target.value?.toLowerCase())
+  }
+
+  const filterOptions = (i: SelectOptionData) =>
+    !showOptionsFilter || !query?.length ? true : i?.text?.toLowerCase()?.includes(query)
+
+  useEffect(() => {
+    setFilteredOptions(options?.filter(filterOptions))
+  }, [query])
 
   return (
     <SelectProvider value={context}>
@@ -60,9 +76,22 @@ export function Select(props: SelectProps) {
         <>
           {selectButton ?? <SelectButton />}
           <SelectContent>
+            {showOptionsFilter && (
+              <Box mr={2}>
+                <Input
+                  iconLeft="culFilterAlt"
+                  m={1}
+                  mt={0}
+                  onChange={onQueryChange}
+                  placeholder="Filter…"
+                  size="sm"
+                  value={query}
+                />
+              </Box>
+            )}
             <SelectGroup maxH={maxHeight} tabIndex={1000}>
               {children ??
-                options?.map?.(option => <SelectOption key={option.value} title={option.text} {...option} />)}
+                filteredOptions?.map?.(option => <SelectOption key={option.value} title={option.text} {...option} />)}
             </SelectGroup>
           </SelectContent>
         </>

package/src/select/select.types.ts

@@ -38,6 +38,8 @@ export type SelectProps = ThemingProps<'Select'> &
     readOnly?: boolean
     /** Custom select button slot. */
     selectButton?: ReactNode
+    /** Displays a filter input to limit the number of options. */
+    showOptionsFilter?: boolean
   }
 
 export type SelectOptionData = {

package/src/select/selectButton.tsx

@@ -45,7 +45,6 @@ export const SelectButton = vui<'button', SelectButtonProps>((props, ref) => {
       as={LineButton}
       bg="white"
       className={cs('vui-selectButton', className)}
-      colorScheme="prussian"
       disabled={disabled}
       focusRing={2}
       fontWeight="regular"

package/src/sidemenu/consts.ts

@@ -1,8 +1,3 @@
 export const border = '1px solid lightgray'
 
 export const expandedWidth = 64
-
-export const right = {
-  expanded: 16,
-  collapsed: 34
-}