@veracity/vui 2.18.3 → 2.20.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.18.3",
+  "version": "2.20.0-beta.0",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/button/button.tsx

@@ -55,7 +55,7 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
     dropDownIcon = 'falAngleDown',
     icon,
     iconLeft,
-    iconRight,
+    iconRight: iconRightProp,
     isActive,
     isDropDown,
     isElevated,
@@ -77,6 +77,8 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
 
   const { iconProps: stateIconProps, ...stateProps } = states[state] ?? {}
 
+  const iconRight = isDropDown ? 'falAngleDown' : iconRightProp
+
   const variant = filterUndefined({
     variant: states[state]?.variant ?? variantProp,
   })
@@ -138,7 +140,7 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
         focusRing={3}
         h={h}
         pl={pl}
-        pr={isDropDown ? 0 : pr}
+        pr={pr}
         ref={ref}
         title={title || ariaLabel}
         type="button"
@@ -159,19 +161,22 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
           {!icon && (
             <>
               {isLoading ? (
-                <ButtonIcon mr={isDropDown ? 0 : iconLeftMr} {...loadingIconProps} />
+                <ButtonIcon mr={iconLeftMr} {...loadingIconProps} />
               ) : isString(iconLeft) ? (
-                <ButtonIcon mr={isDropDown ? 0 : iconLeftMr} name={iconLeft} />
+                <ButtonIcon mr={iconLeftMr} name={iconLeft} />
               ) : (
                 iconLeft
               )}
 
               {children ?? (isReactText(text) ? <ButtonText {...{ isTruncated, text }} /> : text)}
 
-              {isString(iconRight) ? <ButtonIcon ml={iconRightMl} name={iconRight} /> : iconRight}
+              {isString(iconRight) ? (
+                <ButtonIcon ml={!children && !text ? 0 : iconRightMl} name={iconRight} />
+              ) : (
+                iconRight
+              )}
             </>
           )}
-          {isDropDown && <ButtonIcon name={dropDownIcon} />}
         </Content>
       </ButtonBase>
     </ButtonProvider>

package/src/checkbox/checkbox.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import { omitThemingProps, styled, th, useStyleConfig, vui } from '../core'
 import Icon from '../icon'
@@ -38,8 +38,11 @@ export const CheckboxBase = styled.labelBox<CheckboxStyleProps>`
     color: ${p => th.color(p.controlHoverColor)};
   }
 
+  .vui-checkboxControl:focus-within {
+    color: ${checkboxColors.focus};
+  }
+
   &[aria-disabled='true'] {
-    color: ${checkboxColors.disabled};
     cursor: not-allowed;
 
     .vui-checkboxControl {
@@ -81,8 +84,8 @@ export const Checkbox = vui<'span', CheckboxProps>((props, ref) => {
   const { color: controlColor, hoverColor, ...controlStyles } = styles.control
 
   const icon = isIndeterminate ? iconIndeterminate : isChecked ? iconChecked : iconProp
-  const controlMr = children || label ? '12px' : 0
-  const color = controlColor ? controlColor : checkboxColors.main
+  const controlMr = children || label ? 1 : 0
+  const color = isChecked || isIndeterminate ? checkboxColors.checked : controlColor
   const controlHoverColor = hoverColor ? hoverColor : checkboxColors.hover
   const isLongLabel = label && label?.length >= 60
 
@@ -119,7 +122,6 @@ export const Checkbox = vui<'span', CheckboxProps>((props, ref) => {
         {...controlStyles}
       >
         <CheckboxInput
-          aria-label={label ? label : 'input-checkbox'}
           className="vui-checkboxInput"
           onChange={handleOnChange}
           ref={inputRef}

package/src/checkbox/consts.ts

@@ -1,5 +1,7 @@
 export const checkboxColors = {
-  main: 'seaBlue.main',
-  hover: 'seaBlue.40',
-  disabled: 'sandstone.main',
-}
+  unchecked: 'sandstone.60',
+  checked: 'seaBlue.28',
+  hover: 'seaBlue.20',
+  focus: 'seaBlue.35',
+  disabled: 'sandstone.90',
+} as const

package/src/checkbox/theme.ts

@@ -2,7 +2,7 @@ import { checkboxColors } from './consts'
 
 const baseStyle = {
   control: {
-    color: checkboxColors.main,
+    color: checkboxColors.unchecked,
     hoverColor: checkboxColors.hover,
   },
 }

package/src/index.ts

@@ -25,6 +25,7 @@ export * from './icon'
 export * from './icons'
 export * from './image'
 export * from './input'
+export * from './label'
 export * from './link'
 export * from './list'
 export * from './logo'

package/src/input/consts.ts

@@ -7,17 +7,17 @@ export const inputColors = {
   helpText: 'sandstone.30',
   icons: 'seaBlue.main',
   disabled: 'sandstone.95',
-  focus: 'seaBlue.main',
+  focus: 'focusColor',
   error: 'energyRed.45',
   loading: 'seaBlue.80',
   success: 'landGreen.35',
-}
+} as const
 
 export const stateIcons = {
   error: 'falExclamationTriangle',
   loading: 'fadSpinnerThird',
   success: 'falCheck',
-}
+} as const
 
 export const inputStateMapping: InputStateMapping = {
   error: {
@@ -49,11 +49,18 @@ export const displayValueOnlyTextSize = {
   md: 'sm',
   lg: 'md',
   xl: 'lg',
-}
+} as const
 
 export const clearIconSize = {
   sm: 'sm',
   md: 'sm',
   lg: 'sm',
   xl: 'md',
-}
+} as const
+
+export const helpTextSize = {
+  sm: 'sm',
+  md: 'sm',
+  lg: 'md',
+  xl: 'md',
+} as const

package/src/input/helpText.tsx

@@ -8,7 +8,7 @@ import { inputColors } from './consts'
 import { useInputContext } from './context'
 import { HelpTextProps } from './input.types'
 
-/** Displaying help text bellow the input. */
+/** Displaying help text below the input. */
 export const HelpText = vui<'div', HelpTextProps>((props, ref) => {
   const { className, children, isError, ...rest } = props
   const inputProps = useInputContext()
@@ -23,7 +23,7 @@ export const HelpText = vui<'div', HelpTextProps>((props, ref) => {
       className={cs('vui-inputHelpText', className)}
       color={color}
       display="flex"
-      py={1}
+      pt={0.5}
       ref={ref}
       {...styles.helpText}
       {...rest}

package/src/input/input.tsx

@@ -1,11 +1,12 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import { useEffect, useId, useMemo, useState } from 'react'
 
 import { IconButton } from '../button'
 import { styled, useStyleConfig, vui, VuiComponent } from '../core'
+import Label from '../label'
 import { T } from '../t'
 import { ChangeEvent, cs, filterUndefined, isString } from '../utils'
 import AutoCompletePopover from './autoCompletePopover'
-import { clearIconSize, displayValueOnlyTextSize, inputColors, inputStateMapping } from './consts'
+import { clearIconSize, displayValueOnlyTextSize, helpTextSize, inputColors, inputStateMapping } from './consts'
 import { InputProvider } from './context'
 import { getInitialCount } from './helpers'
 import HelpText from './helpText'
@@ -43,24 +44,27 @@ export const InputBase = styled.divBox`
 export const Input = vui<'div', InputProps>((props, ref) => {
   const {
     allowClear,
+    ariaLabel,
     autoComplete,
-    autoCompleteOptions,
     autoCompleteMaxHeight,
+    autoCompleteOptions,
     autoFocus,
     children,
     className,
     defaultValue,
     disabled,
+    displayValueOnly,
     errorText,
+    helpText,
     iconLeft,
     iconRight,
-    id,
+    id: idProp,
     input,
     inputProps,
     inputRef,
     itemLeft,
     itemRight,
-    helpText,
+    label,
     max,
     maxLength,
     min,
@@ -73,7 +77,6 @@ export const Input = vui<'div', InputProps>((props, ref) => {
     readOnly,
     required,
     showCount,
-    displayValueOnly,
     size = 'lg',
     state = '',
     stateMapping,
@@ -84,10 +87,13 @@ export const Input = vui<'div', InputProps>((props, ref) => {
     ...rest
   } = props
 
+  const generatedId = useId()
   const [count, setCount] = useState(getInitialCount(props))
   const [valueInternal, setValueInternal] = useState(defaultValue || '')
   const states = { ...inputStateMapping, ...stateMapping }
 
+  const id = idProp || generatedId
+
   const styles = useStyleConfig('Input', props)
 
   const context = useMemo(() => filterUndefined({ disabled, size, variant }), [disabled, size, variant])
@@ -130,10 +136,7 @@ export const Input = vui<'div', InputProps>((props, ref) => {
   return (
     <InputProvider value={context}>
       {displayValueOnly ? (
-        <T
-          className={cs('vui-input-value', className)}
-          size={displayValueOnlyTextSize[size] as 'xs' | 'md' | 'sm' | 'lg'}
-        >
+        <T className={cs('vui-input-value', className)} size={displayValueOnlyTextSize[size]}>
           {value || defaultValue}
         </T>
       ) : (
@@ -143,67 +146,87 @@ export const Input = vui<'div', InputProps>((props, ref) => {
           filterAutoCompleteOptions={filterAutoCompleteOptions}
           onAutoCompleteSelect={onAutoCompleteSelect}
         >
-          <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,
-                }}
-                autoComplete={autoCompleteOptions?.length ? 'off' : autoComplete}
-                value={valueInternal}
-                {...inputProps}
-              />
-            )}
-            {isString(iconRight) ? <InputIcon mr={1} name={iconRight} /> : iconRight}
-            {itemRight}
-            {state && <InputIcon mr={1} {...states[state]?.iconProps} />}
-            {allowClear && (
-              <IconButton
-                disabled={!valueInternal}
-                icon="falTimes"
-                mr={0.5}
-                onClick={onClear}
-                size={clearIconSize[size] as 'md' | 'sm' | 'lg'}
-                title="Clear"
-              />
+          <>
+            {isString(label) ? (
+              <Label aria-disabled={disabled} className="vui-input-label" htmlFor={id} mb={0.5} {...styles.label}>
+                {label}
+              </Label>
+            ) : (
+              label
             )}
-            {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>
+            <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,
+                    ariaLabel,
+                    defaultValue,
+                    disabled,
+                    id,
+                    max,
+                    maxLength,
+                    min,
+                    name,
+                    onBlur,
+                    onChange,
+                    onFocus,
+                    pattern,
+                    placeholder,
+                    readOnly,
+                    required,
+                    step,
+                    type,
+                  }}
+                  autoComplete={autoCompleteOptions?.length ? 'off' : autoComplete}
+                  value={valueInternal}
+                  {...inputProps}
+                />
+              )}
+              {isString(iconRight) ? <InputIcon mr={1} name={iconRight} /> : iconRight}
+              {itemRight}
+              {state && <InputIcon mr={1} {...states[state]?.iconProps} />}
+              {allowClear && (
+                <IconButton
+                  disabled={!valueInternal}
+                  icon="falTimes"
+                  mr={0.5}
+                  onClick={onClear}
+                  size={clearIconSize[size]}
+                  title="Clear"
+                />
+              )}
+              {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>
+          </>
         </AutoCompletePopover>
       )}
 
-      {!!helpText && <HelpText>{helpText}</HelpText>}
-      {!!errorText && <HelpText isError>{errorText}</HelpText>}
+      {!!helpText && <HelpText size={helpTextSize[size]}>{helpText}</HelpText>}
+      {!!errorText && (
+        <HelpText isError size={helpTextSize[size]}>
+          {errorText}
+        </HelpText>
+      )}
     </InputProvider>
   )
 }) as VuiComponent<'div', InputProps> & {

package/src/input/input.types.ts

@@ -7,7 +7,6 @@ import { ThemingProps } from '../theme'
 import { ChangeEventHandler, FocusEventHandler, PropsOf } from '../utils'
 
 export type InputInputProps = PropsOf<'input', SystemProps>
-
 export type InputProps = SystemProps &
   ThemingProps<'Input'> & {
     /** Allow to remove input content with clear icon. */
@@ -20,14 +19,18 @@ export type InputProps = SystemProps &
     autoCompleteMaxHeight?: number
     /** Passed to the inner input. */
     autoFocus?: boolean
+    /** ARIA label for the input element. */
+    ariaLabel?: string
     /** Deprecated. Please use variant instead. @deprecated  */
     colorScheme?: 'green' | 'grey' | 'red'
     /** Passed to the inner input. */
     defaultValue?: number | string
     /** Passed to the inner input. */
     disabled?: boolean
-    /** Socket displaying error text bellow an input. */
+    /** Socket displaying error text below an input. */
     errorText?: string | React.ReactNode
+    /** Socket displaying help text below an input. */
+    helpText?: React.ReactNode | string
     /** Socket displaying an icon on the left. */
     iconLeft?: IconProp | JSX.Element
     /** Socket displaying an icon on the right. */
@@ -44,8 +47,8 @@ export type InputProps = SystemProps &
     itemLeft?: React.ReactNode
     /** Socket displaying a custom element on the right. */
     itemRight?: React.ReactNode
-    /** Socket displaying help text bellow an input. */
-    helpText?: React.ReactNode | string
+    /** The label. */
+    label?: string | React.ReactNode
     /** Passed to the inner input. */
     max?: number | string
     /** Passed to the inner input. */

package/src/input/inputInput.tsx

@@ -25,18 +25,18 @@ export const InputInputBase = styled.input`
 
 /** Displays an input element within the Input component. */
 export const InputInput = vui<'input', InputInputProps>((props, ref) => {
-  const { className, autoComplete, ...rest } = props
+  const { type, className, autoComplete, ...rest } = props
   const inputProps = useInputContext()
   const mergedProps = { ...inputProps, ...props }
   const styles = useStyleConfig('Input', mergedProps)
 
   const aliasedProps = filterUndefined({
     'aria-disabled': mergedProps.disabled,
+    'aria-label': mergedProps.ariaLabel,
   })
 
   return (
     <InputInputBase
-      aria-label="input-text"
       autoComplete={autoComplete}
       className={cs('vui-inputInput', className)}
       ref={ref}

package/src/input/theme.ts

@@ -2,7 +2,7 @@ import { inputColors } from './consts'
 
 const baseStyle = {
   container: {
-    focusWithinRing: 2,
+    focusWithinRing: 3,
     color: inputColors.inputText,
   },
   input: {
@@ -15,7 +15,7 @@ const defaultProps = {
   variant: 'grey',
 }
 
-const parts = ['container', 'icon', 'input']
+const parts = ['container', 'icon', 'input', 'label']
 
 const sizes = {
   sm: {
@@ -27,6 +27,9 @@ const sizes = {
       size: 'xs',
     },
     input: {},
+    label: {
+      fontSize: 'sm',
+    },
   },
   md: {
     container: {
@@ -37,6 +40,9 @@ const sizes = {
       size: 'sm',
     },
     input: {},
+    label: {
+      fontSize: 'sm',
+    },
   },
   lg: {
     container: {
@@ -47,6 +53,9 @@ const sizes = {
       size: 'md',
     },
     input: {},
+    label: {
+      fontSize: 'md',
+    },
   },
   xl: {
     container: {
@@ -57,6 +66,9 @@ const sizes = {
       size: 'md',
     },
     input: {},
+    label: {
+      fontSize: 'lg',
+    },
   },
 }
 

package/src/label/index.ts

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

package/src/label/label.tsx

@@ -0,0 +1,31 @@
+import { omitThemingProps, styled, useStyleConfig, vui } from '../core'
+import T from '../t'
+import { cs } from '../utils'
+import { LabelProps } from './label.types'
+
+export const LabelBase = styled.labelBox`
+  display: block;
+  font-weight: 600;
+  width: 100%;
+  color: darkBlue.main;
+
+  &[aria-disabled='true'] {
+    color: sandstone.75;
+    cursor: not-allowed;
+  }
+`
+
+/** Displays a paragraph of text. */
+export const Label = vui<'label', LabelProps>((props, ref) => {
+  const { children, className, text, ...rest } = omitThemingProps(props)
+  const styles = useStyleConfig('Label', props)
+
+  return (
+    <T as={LabelBase} className={cs('vui-label', className)} ref={ref} {...styles} {...rest}>
+      {children ?? text}
+    </T>
+  )
+})
+
+Label.displayName = 'Label'
+export default Label

package/src/label/label.types.ts

@@ -0,0 +1,8 @@
+import { SystemProps, TypographyProps } from '../system'
+import { ThemingProps } from '../theme'
+
+export type LabelProps = SystemProps &
+  ThemingProps<'P'> & {
+    /** Displays given text if no children are provided. */
+    text?: number | string
+  }

package/src/label/theme.ts

@@ -0,0 +1,29 @@
+const baseStyle = {}
+
+const defaultProps = {
+  size: 'md',
+}
+
+const sizes = {
+  xs: {
+    fontSize: 'xs',
+  },
+  sm: {
+    fontSize: 'sm',
+  },
+  md: {
+    fontSize: 'md',
+  },
+  lg: {
+    fontSize: 'lg',
+  },
+}
+
+const variants = {}
+
+export default {
+  baseStyle,
+  defaultProps,
+  sizes,
+  variants,
+}

package/src/list/list.tsx

@@ -1,4 +1,5 @@
-import React, { useMemo } from 'react'
+import { is } from '@xstyled/util'
+import React, { useEffect, useMemo, useRef } from 'react'
 
 import { styled, useStyleConfig, vui, VuiComponent } from '../core'
 import { cs, filterUndefined, isArray, isReactText } from '../utils'
@@ -10,6 +11,10 @@ import ListIcon from './listIcon'
 import ListItem from './listItem'
 import ListText from './listText'
 
+const clickKeys = ['Enter', ' ']
+const nextKeys = ['ArrowDown', 'Tab']
+const prevKeys = ['ArrowUp']
+
 export const ListBase = styled.ulBox``
 
 /** Displays a list of list link items and optional heading. Exposes some props to the children via context. */
@@ -19,11 +24,47 @@ export const List = vui<'ul', ListProps>((props, ref) => {
 
   const context = useMemo(() => filterUndefined({ isInteractive, size, variant }), [isInteractive, size, variant])
 
+  const listRef = useRef<HTMLUListElement>(null)
+
+  const [_, setActive] = React.useState(-1)
+
+  const onKeydown = (event: KeyboardEvent) => {
+    if ([...prevKeys, ...nextKeys, ...clickKeys].includes(event.key)) {
+      event.preventDefault()
+      setActive((a: number) => {
+        let active = a
+        if (listRef.current) {
+          const allChildren = Array.from(listRef.current.childNodes)
+          const tabIndexedChildren = allChildren.filter(child => (child as HTMLElement).tabIndex === 0)
+
+          if (nextKeys.includes(event.key) && active < tabIndexedChildren.length - 1) active++
+          if (prevKeys.includes(event.key)) active = active > 0 ? active - 1 : 0
+
+          tabIndexedChildren.forEach((node, index) => {
+            if (index === active) {
+              if (clickKeys.includes(event.key)) (node as HTMLElement)?.click()
+              else (node as HTMLElement)?.focus()
+            }
+          })
+        }
+        return active
+      })
+    }
+  }
+
+  useEffect(() => {
+    if (listRef.current && isInteractive) {
+      listRef.current.addEventListener('keydown', onKeydown)
+      return () => {
+        listRef.current?.removeEventListener('keydown', onKeydown)
+      }
+    }
+  }, [listRef.current, isInteractive])
+
   return (
     <ListProvider value={context}>
-      <ListBase className={cs('vui-list', className)} ref={ref} {...styles.container} {...rest}>
+      <ListBase className={cs('vui-list', className)} ref={ref || listRef} {...styles.container} {...rest}>
         {isReactText(heading) ? <ListHeading text={heading} /> : heading}
-
         {children ??
           (isArray<ListItemProps>(items)
             ? items.map(({ key, ...props }, index) => <ListItem key={key ?? index} {...props} />)