@veracity/vui 2.9.0-beta.0 → 2.9.0-beta.2

package/src/accordion/accordion.tsx

@@ -6,7 +6,6 @@ import { cs, filterUndefined } from '../utils'
 import { AccordionItemProps, AccordionProps } from './accordion.types'
 import AccordionItem from './accordionItem'
 import AccordionItemHorizontal from './accordionItemHorizontal'
-import { borderColor, defaultItemTitleHoverBg } from './consts'
 import { AccordionProvider } from './context'
 
 export const AccordionBase = styled.divBox`
@@ -17,31 +16,24 @@ export const AccordionBase = styled.divBox`
 
 /** Allows to show and hide sections of related content on a page. */
 export const Accordion = vui<'div', AccordionProps>((props, ref) => {
-  const {
-    children,
-    className,
-    itemTitleHoverBg = defaultItemTitleHoverBg,
-    items,
-    orientation = 'vertical',
-    iconPosition = 'end',
-    size,
-    ...rest
-  } = props
+  const { children, className, items, orientation = 'vertical', iconPosition = 'end', size, variant, ...rest } = props
   const styles = useStyleConfig('Accordion', props)
-
-  const context = useMemo(() => filterUndefined({ size }), [size])
-
+  const context = useMemo(() => filterUndefined({ size, variant }), [size, variant])
   const aliasedProps = filterUndefined<AccordionProps>({})
-
   const isVertical = orientation === 'vertical'
   return (
     <AccordionProvider value={context}>
       <AccordionBase
-        borderLeft={isVertical ? undefined : `1px solid ${borderColor}`}
-        borderTop={isVertical ? `1px solid ${borderColor}` : undefined}
+        borderLeft={
+          isVertical
+            ? undefined
+            : `1px solid transparent
+        `
+        }
+        borderTop={isVertical ? `1px solid transparent` : undefined}
         className={cs('vui-accordion', className)}
         ref={ref}
-        {...styles}
+        {...styles.container}
         {...aliasedProps}
         {...rest}
       >
@@ -49,14 +41,12 @@ export const Accordion = vui<'div', AccordionProps>((props, ref) => {
           <List w="100%">
             {items
               ? items?.map?.((item: AccordionItemProps, key: number) => (
-                  <AccordionItem iconPosition={iconPosition} itemTitleHoverBg={itemTitleHoverBg} key={key} {...item} />
+                  <AccordionItem iconPosition={iconPosition} key={key} {...item} />
                 ))
               : children}
           </List>
         ) : items ? (
-          items?.map?.((item: AccordionItemProps, key: number) => (
-            <AccordionItemHorizontal itemTitleHoverBg={itemTitleHoverBg} key={key} {...item} />
-          ))
+          items?.map?.((item: AccordionItemProps, key: number) => <AccordionItemHorizontal key={key} {...item} />)
         ) : (
           children
         )}

package/src/accordion/accordion.types.ts

@@ -11,8 +11,6 @@ export type AccordionProps = SystemProps &
   ThemingProps<'Accordion'> & {
     /** Items AccordionOrientation @default "vertical" */
     orientation?: AccordionOrientation
-    /** Hover color for the item title @default "skyBlue.95" */
-    itemTitleHoverBg?: string
     /** Collection of Accordion items */
     items?: AccordionItemProps[]
     /** Icon position for vertical orientation @default "end" */
@@ -41,8 +39,6 @@ export type AccordionItemProps = ListItemProps & {
   collapsed?: boolean
   /** The icon position @default "end" */
   iconPosition?: AccordionIconPosition
-  /** Hover color for the item title @default "skyBlue.95" */
-  itemTitleHoverBg?: string
   /** Title */
   title?: string | ReactNode
   /** Collapse change state */
@@ -52,4 +48,5 @@ export type AccordionItemProps = ListItemProps & {
 export type AccordionItemArrowProps = {
   collapsed?: boolean
   orientation?: AccordionOrientation
+  color?: string
 }

package/src/accordion/accordionItem.tsx

@@ -6,7 +6,6 @@ import { ListItem } from '../list'
 import { cs } from '../utils'
 import { AccordionItemProps } from './accordion.types'
 import AccordionItemArrow from './accordionItemArrow'
-import { borderColor, defaultItemTitleHoverBg, expandedItemTitleHoverBg } from './consts'
 import { useAccordionContext } from './context'
 
 /** An accordion item. */
@@ -19,7 +18,6 @@ export const AccordionItem = (props: AccordionItemProps) => {
     disabled,
     id,
     iconPosition = 'end',
-    itemTitleHoverBg = defaultItemTitleHoverBg,
     title,
     onToggle,
     ...rest
@@ -44,9 +42,13 @@ export const AccordionItem = (props: AccordionItemProps) => {
 
   return (
     <ListItem
-      borderBottom={`1px solid ${borderColor}`}
+      borderBottom="1px solid transparent"
+      borderColor={styles.item.borderColor}
       className={cs('vui-accordion-item', className)}
+      color="yellow"
       disabled={disabled}
+      disabledBg={styles.item.disabledBg}
+      disabledColor={styles.item.disabledColor}
       flexDirection="column"
       h="auto"
       id={`${id}`}
@@ -55,8 +57,15 @@ export const AccordionItem = (props: AccordionItemProps) => {
       {...rest}
     >
       <Box
+        color="yellow"
         cursor={disabled ? 'not-allowed' : 'pointer'}
-        hoverBg={disabled ? 'transparent' : collapsedInternal ? itemTitleHoverBg : expandedItemTitleHoverBg}
+        hoverBg={
+          disabled
+            ? 'transparent'
+            : collapsedInternal
+            ? styles.item.itemTitleHoverBg
+            : styles.item.expandedItemTitleHoverBg
+        }
         justifyContent={iconPosition === 'start' ? 'initial' : 'space-between'}
         onClick={toggle}
         px={2}
@@ -65,7 +74,7 @@ export const AccordionItem = (props: AccordionItemProps) => {
       >
         {isIconStart && (
           <Box>
-            <AccordionItemArrow collapsed={collapsedInternal} />
+            <AccordionItemArrow collapsed={collapsedInternal} color={styles.icon.color} />
           </Box>
         )}
         <Box fontWeight={typeof title === 'string' ? '500' : 'inherit'} ml={isIconStart ? 2 : 0}>
@@ -73,7 +82,7 @@ export const AccordionItem = (props: AccordionItemProps) => {
         </Box>
         {isIconEnd && (
           <Box>
-            <AccordionItemArrow collapsed={collapsedInternal} />
+            <AccordionItemArrow collapsed={collapsedInternal} color={styles.icon.color} />
           </Box>
         )}
       </Box>

package/src/accordion/accordionItemArrow.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 
 import Icon from '../icon'
 import { AccordionItemArrowProps } from './accordion.types'
-import { iconColor } from './consts'
 
 const names = {
   horizontal: {
@@ -15,8 +14,12 @@ const names = {
   }
 }
 
-const AccordionItemArrow = ({ collapsed, orientation = 'vertical' }: AccordionItemArrowProps) => (
-  <Icon color={iconColor} name={names[orientation][collapsed ? 'collapsed' : 'expanded']} size="xs" />
+const AccordionItemArrow = ({
+  collapsed,
+  color = 'sandstone.10',
+  orientation = 'vertical'
+}: AccordionItemArrowProps) => (
+  <Icon name={names[orientation][collapsed ? 'collapsed' : 'expanded']} pathFill={color} size="sm" />
 )
 
 export default React.memo(AccordionItemArrow)

package/src/accordion/accordionItemHorizontal.tsx

@@ -5,24 +5,12 @@ import { omitThemingProps, useStyleConfig } from '../core'
 import { cs } from '../utils'
 import { AccordionItemProps } from './accordion.types'
 import AccordionItemArrow from './accordionItemArrow'
-import { borderColor, defaultItemTitleHoverBg, expandedItemTitleHoverBg } from './consts'
 import { useAccordionContext } from './context'
 
 /** An accordion item (horizontal AccordionOrientation). */
 export const AccordionItemHorizontal = (props: AccordionItemProps) => {
-  const {
-    className,
-    children,
-    collapsed,
-    content,
-    disabled,
-    id,
-    contentPx,
-    itemTitleHoverBg = defaultItemTitleHoverBg,
-    title,
-    onToggle,
-    ...rest
-  } = omitThemingProps(props)
+  const { className, children, collapsed, content, disabled, id, contentPx, title, onToggle, ...rest } =
+    omitThemingProps(props)
   const [collapsedInternal, setIsCollapsedInternal] = useState<boolean>(false)
 
   const styles = useStyleConfig('Accordion', useAccordionContext())
@@ -47,7 +35,7 @@ export const AccordionItemHorizontal = (props: AccordionItemProps) => {
     <Box
       alignItems={collapsedInternal ? 'normal' : 'baseline'}
       bg={disabled ? 'disabled.bg' : undefined}
-      borderRight={`1px solid ${borderColor}`}
+      borderRight="1px solid transparent"
       className={cs('vui-accordion-item-horizontal', className)}
       color={disabled ? 'disabled.color' : undefined}
       column
@@ -55,15 +43,21 @@ export const AccordionItemHorizontal = (props: AccordionItemProps) => {
       id={`${id}`}
       maxW={collapsedInternal ? styles.item.minH : 'auto'}
       minW={styles.item.minH}
-      p={0}
       transitionDuration="0ms"
       userSelect={disabled ? 'none' : undefined}
+      {...styles.item}
+      p={0}
       {...rest}
     >
       <Box
-        {...styles.item}
         cursor={cursor}
-        hoverBg={disabled ? 'transparent' : collapsedInternal ? itemTitleHoverBg : expandedItemTitleHoverBg}
+        hoverBg={
+          disabled
+            ? 'transparent'
+            : collapsedInternal
+            ? styles.item.itemTitleHoverBg
+            : styles.item.expandedItemTitleHoverBg
+        }
         justifyContent="space-between"
         minH={styles.item.minH}
         onClick={toggle}

package/src/accordion/theme.ts

@@ -1,7 +1,8 @@
 const baseStyle = {}
 
 const defaultProps = {
-  size: 'md'
+  size: 'md',
+  variant: 'light'
 }
 
 const sizes = {
@@ -25,7 +26,38 @@ const sizes = {
   }
 }
 
-const variants = {}
+const variants = {
+  light: {
+    container: {
+      bg: 'white',
+      borderColor: 'sandstone.main'
+    },
+    item: {
+      borderColor: 'sandstone.main',
+      itemTitleHoverBg: 'skyBlue.95',
+      expandedItemTitleHoverBg: 'skyBlue.90'
+    },
+    icon: {
+      color: 'sandstone.10'
+    }
+  },
+  dark: {
+    container: {
+      bg: 'darkBlue.main',
+      borderColor: 'white',
+      color: 'white'
+    },
+    item: {
+      borderColor: 'white',
+      disabledBg: 'transparent',
+      itemTitleHoverBg: 'seaBlue.35',
+      expandedItemTitleHoverBg: 'seaBlue.25'
+    },
+    icon: {
+      color: 'digiGreen.main'
+    }
+  }
+}
 
 export default {
   baseStyle,

package/src/button/button.tsx

@@ -124,6 +124,7 @@ export const Button = vui<'button', ButtonProps>((props, ref) => {
         disabledColor: 'color',
         hoverBg: 'bg',
         hoverBorderColor: 'borderColor',
+        hoverColor: 'color',
         activeBg: 'bg',
         cursor: 'not-allowed',
         opacity: 0.5

package/src/buttonGroup/buttonGroup.tsx

@@ -47,6 +47,10 @@ export const ButtonGroupBase = styled.divBox<{ innerBorderColor: string }>`
     color: ${p => th.color('white')};
   }
 
+  > .vui-button-variant-buttonGroupRounded {
+    border-left-width: 1px !important;
+  }
+
   > .${activeClassName}.vui-button-variant-buttonGroupRounded:hover {
     background-color: ${p => th.color('seaBlue.20')};
   }

package/src/input/input.tsx

@@ -42,6 +42,7 @@ export const InputBase = styled.divBox`
  */
 export const Input = vui<'div', InputProps>((props, ref) => {
   const {
+    autoComplete,
     autoCompleteOptions,
     autoFocus,
     children,
@@ -94,6 +95,11 @@ export const Input = vui<'div', InputProps>((props, ref) => {
     onChangeProp?.(e)
   }
 
+  function onAutoCompleteSelect(value: string) {
+    const e = { target: { value }, type: 'autoCompleteSelect' }
+    onChange(e as unknown as ChangeEvent)
+  }
+
   const aliasedProps = filterUndefined({
     'aria-disabled': disabled,
     bg: readOnly ? inputColors.disabled : undefined,
@@ -138,6 +144,7 @@ export const Input = vui<'div', InputProps>((props, ref) => {
                   step,
                   type
                 }}
+                autoComplete={autoCompleteOptions?.length ? 'off' : autoComplete}
                 value={valueInternal}
                 {...inputProps}
               />
@@ -162,8 +169,8 @@ export const Input = vui<'div', InputProps>((props, ref) => {
         {!!autoCompleteOptions && (
           <Popover.Content>
             <List>
-              {autoCompleteOptions.filter(filterAutoCompleteOptions).map((i: string) => (
-                <List.Item cursor="pointer" hoverBg="skyBlue.hover" key={i} onClick={() => setValueInternal(i)}>
+              {autoCompleteOptions?.filter?.(filterAutoCompleteOptions).map((i: string) => (
+                <List.Item cursor="pointer" hoverBg="skyBlue.hover" key={i} onClick={() => onAutoCompleteSelect(i)}>
                   {i}
                 </List.Item>
               ))}

package/src/input/input.types.ts

@@ -13,6 +13,8 @@ export type InputProps = SystemProps &
     /** List of autocomplete options. */
     autoCompleteOptions?: string[]
     /** Passed to the inner input. */
+    autoComplete?: string
+    /** Passed to the inner input. */
     autoFocus?: boolean
     /** Deprecated. Please use variant instead. @deprecated  */
     colorScheme?: 'green' | 'grey' | 'red'

package/src/input/inputInput.tsx

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

package/src/input/theme.ts

@@ -6,7 +6,7 @@ const baseStyle = {
     color: inputColors.inputText
   },
   input: {
-    color: { placeholder: inputColors.placeholder }
+    placeholderTextColor: inputColors.placeholder
   }
 }
 

package/src/list/listItem.tsx

@@ -30,9 +30,9 @@ export const ListItemBase = styled.liBox`
   transition-duration: fast;
 
   &[aria-disabled='true'] {
-    color: sandstone.main;
     cursor: not-allowed;
     user-select: none;
+    opacity: 0.5;
   }
 
   &:focus-visible {
@@ -101,7 +101,7 @@ export const ListItem = vui<'li', ListItemProps>((props, ref) => {
 
   return (
     <ListItemBase
-      bg={disabled ? 'sandstone.95' : undefined}
+      bg={disabled ? rest.disabledBg || 'sandstone.95' : undefined}
       className={cs('vui-listItem', className)}
       onClick={!disabled ? onClick : undefined}
       ref={ref}

package/dist/cjs/accordion/consts.d.ts

@@ -1,5 +0,0 @@
-export declare const expandedItemTitleHoverBg = "skyBlue.90";
-export declare const defaultItemTitleHoverBg = "skyBlue.95";
-export declare const borderColor = "sandstone.main";
-export declare const iconColor = "sandstone.10";
-//# sourceMappingURL=consts.d.ts.map

package/dist/cjs/accordion/consts.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/accordion/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,wBAAwB,eAAe,CAAA;AAEpD,eAAO,MAAM,uBAAuB,eAAe,CAAA;AAEnD,eAAO,MAAM,WAAW,mBAAmB,CAAA;AAE3C,eAAO,MAAM,SAAS,iBAAiB,CAAA"}

package/dist/cjs/accordion/consts.js

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.iconColor = exports.borderColor = exports.defaultItemTitleHoverBg = exports.expandedItemTitleHoverBg = void 0;
-exports.expandedItemTitleHoverBg = 'skyBlue.90';
-exports.defaultItemTitleHoverBg = 'skyBlue.95';
-exports.borderColor = 'sandstone.main';
-exports.iconColor = 'sandstone.10';

package/dist/esm/accordion/consts.d.ts

@@ -1,5 +0,0 @@
-export declare const expandedItemTitleHoverBg = "skyBlue.90";
-export declare const defaultItemTitleHoverBg = "skyBlue.95";
-export declare const borderColor = "sandstone.main";
-export declare const iconColor = "sandstone.10";
-//# sourceMappingURL=consts.d.ts.map

package/dist/esm/accordion/consts.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/accordion/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,wBAAwB,eAAe,CAAA;AAEpD,eAAO,MAAM,uBAAuB,eAAe,CAAA;AAEnD,eAAO,MAAM,WAAW,mBAAmB,CAAA;AAE3C,eAAO,MAAM,SAAS,iBAAiB,CAAA"}

package/dist/esm/accordion/consts.js

@@ -1,4 +0,0 @@
-export const expandedItemTitleHoverBg = 'skyBlue.90';
-export const defaultItemTitleHoverBg = 'skyBlue.95';
-export const borderColor = 'sandstone.main';
-export const iconColor = 'sandstone.10';

package/src/accordion/consts.ts

@@ -1,7 +0,0 @@
-export const expandedItemTitleHoverBg = 'skyBlue.90'
-
-export const defaultItemTitleHoverBg = 'skyBlue.95'
-
-export const borderColor = 'sandstone.main'
-
-export const iconColor = 'sandstone.10'