@veracity/vui 2.5.1 → 2.6.0

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
-}