@veracity/vui 2.5.0-beta.0 → 2.5.0

package/src/progressCircular/progressCircular.tsx

@@ -0,0 +1,89 @@
+import React, { useEffect, useState } from 'react'
+
+import { Box, BoxProps } from '../box'
+import { styled, useStyleConfig, vui } from '../core'
+import { T } from '../t'
+import { cs } from '../utils'
+import { absCenterStyles, labelBottom, maxValue } from './consts'
+import { ProgressCircularProps } from './progressCircular.types'
+
+export const ProgressCircularBase = styled.divBox`
+  display: flex;
+  position: relative;
+  width: 100%;
+`
+const MainCircle = styled.circle`
+  fill: transparent;
+`
+
+const ProgressCircle = styled(MainCircle)`
+  transform: rotate(-90deg);
+  transform-origin: 50% 50%;
+  transition: stroke-dashoffset 0.5s ease-out;
+`
+
+/** [Beta] Indicates a process progress. */
+export const ProgressCircular = vui<'div', ProgressCircularProps>((props, ref) => {
+  const { children, className, label, value = 0, showPercentage, ...rest } = props
+
+  const styles = useStyleConfig('ProgressCircular', props)
+
+  const [progress, setProgress] = useState(value)
+
+  useEffect(() => {
+    setProgress(value ? Math.ceil(value) : 0)
+  }, [value])
+
+  useEffect(() => {
+    const w = !value ? 0 : Math.ceil(value)
+    setProgress(w > maxValue ? maxValue : w)
+  }, [value])
+
+  const radius = maxValue / 2 - styles.strokeWidth * 2
+  const angle = radius * 2 * Math.PI
+  const offset = angle - (progress / maxValue) * angle
+
+  return (
+    <ProgressCircularBase className={cs('vui-progress-circular', className)} ref={ref} w={styles.width} {...rest}>
+      <svg
+        aria-valuemax={maxValue}
+        aria-valuemin={0}
+        aria-valuenow={progress}
+        height={styles.width}
+        version="1.1"
+        viewBox="0 0 100 100"
+        width={styles.width}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <MainCircle cx="50" cy="50" r={radius} stroke={styles.stroke.main} strokeWidth={styles.strokeWidth} />
+        <ProgressCircle
+          cx="50"
+          cy="50"
+          r={radius}
+          stroke={styles.stroke.progress}
+          strokeDasharray={`${angle} ${angle}`}
+          strokeDashoffset={offset}
+          strokeWidth={styles.strokeWidth}
+        />
+      </svg>
+      <Box {...(absCenterStyles as BoxProps)} top={styles.top}>
+        {children ? (
+          children
+        ) : showPercentage ? (
+          <T color={styles.color} fontSize={styles.fontSize}>
+            {progress}%
+          </T>
+        ) : null}
+      </Box>
+      {!!label && (
+        <Box {...(absCenterStyles as BoxProps)} bottom={labelBottom}>
+          <T color={styles.color} fontSize={styles.fontSize}>
+            {label}
+          </T>
+        </Box>
+      )}
+    </ProgressCircularBase>
+  )
+})
+
+export default ProgressCircular

package/src/progressCircular/progressCircular.types.ts

@@ -0,0 +1,9 @@
+import { SystemProps } from '../system'
+import { ThemingProps } from '../theme'
+
+export type ProgressCircularProps = SystemProps &
+  ThemingProps<'ProgressCircular'> & {
+    label?: string
+    value?: number
+    showPercentage?: boolean
+  }

package/src/progressCircular/theme.ts

@@ -0,0 +1,50 @@
+import { darkBlue, energyRed, landGreen } from '../theme/foundations/colors'
+
+const baseStyle = {
+  color: 'darkBlue.main'
+}
+
+const defaultProps = {
+  size: 'md',
+  variant: 'primary'
+}
+
+const sizes = {
+  sm: {
+    strokeWidth: 4,
+    width: 46,
+    top: 15,
+    fontSize: 12
+  },
+  md: { strokeWidth: 5, width: 80, top: 30, fontSize: 16 },
+  lg: { strokeWidth: 6, width: 120, top: 48, fontSize: 18 },
+  xl: { strokeWidth: 7, width: 160, top: 64, fontSize: 22 }
+}
+
+const variants = {
+  primary: {
+    stroke: {
+      main: darkBlue[95],
+      progress: darkBlue.main
+    }
+  },
+  green: {
+    stroke: {
+      main: landGreen[95],
+      progress: landGreen.main
+    }
+  },
+  red: {
+    stroke: {
+      main: energyRed[95],
+      progress: energyRed.main
+    }
+  }
+}
+
+export default {
+  baseStyle,
+  defaultProps,
+  sizes,
+  variants
+}

package/src/radio/consts.ts

@@ -0,0 +1,5 @@
+export const radioColors = {
+  main: 'seaBlue.main',
+  hover: 'seaBlue.40',
+  disabled: 'sandstone.main'
+}

package/src/radio/radio.tsx

@@ -4,6 +4,7 @@ import { omitThemingProps, styled, th, useStyleConfig, vui } from '../core'
 import Icon from '../icon'
 import T from '../t'
 import { ChangeEvent, cs, filterUndefined } from '../utils'
+import { radioColors } from './consts'
 import { useRadioGroupContext } from './context'
 import { RadioProps, RadioStyleProps } from './radio.types'
 
@@ -39,11 +40,11 @@ export const RadioBase = styled.labelBox<RadioStyleProps>`
   }
 
   &[aria-disabled='true'] {
-    color: disabled.color;
+    color: ${radioColors.disabled};
     cursor: not-allowed;
 
     .vui-radioControl {
-      color: disabled.color;
+      color: ${radioColors.disabled};
     }
   }
 `
@@ -87,8 +88,8 @@ export const Radio = vui<'span', RadioProps>((props, ref) => {
 
   const icon = isChecked ? iconChecked : iconProp
   const controlMr = children || label ? 1 : 0
-  const color = isChecked ? controlColor : 'grey.60'
-  const controlHoverColor = isChecked ? hoverColor : 'grey.90'
+  const color = controlColor ? controlColor : radioColors.main
+  const controlHoverColor = hoverColor ? hoverColor : radioColors.hover
 
   useEffect(() => {
     if (groupIsChecked !== undefined) {
@@ -132,7 +133,6 @@ export const Radio = vui<'span', RadioProps>((props, ref) => {
           {...{ checked, defaultChecked, disabled, id, name, required, value }}
           {...inputProps}
         />
-
         <Icon className="vui-radioIcon" h="100%" name={icon} w="100%" />
       </RadioControl>
 

package/src/radio/radio.types.ts

@@ -9,7 +9,7 @@ export type RadioProps = SystemProps &
   ThemingProps<'Radio'> & {
     /** Provides value to radio in controlled mode. */
     checked?: boolean
-    /** Available theme colors for this component. @default blue */
+    /** Deprecated. Please use variant instead. @deprecated  */
     colorScheme?: 'blue' | 'prussian'
     /** Disables radio and related elements with the right styling. */
     disabled?: boolean

package/src/radio/radioGroup.tsx

@@ -16,21 +16,8 @@ export const RadioGroupBase = styled.divBox`
  * Exposes some props to the children via context.
  */
 export const RadioGroup = vui<'div', RadioGroupProps>((props, ref) => {
-  const {
-    className,
-    colorScheme,
-    defaultValue,
-    disabled,
-    isRow,
-    name,
-    onBlur,
-    onChange,
-    onFocus,
-    size,
-    value,
-    variant,
-    ...rest
-  } = props
+  const { className, defaultValue, disabled, isRow, name, onBlur, onChange, onFocus, size, value, variant, ...rest } =
+    props
   const [isChecked, setIsChecked] = useState(value ?? defaultValue)
 
   const handleOnChange = useCallback(
@@ -44,7 +31,6 @@ export const RadioGroup = vui<'div', RadioGroupProps>((props, ref) => {
   const context = useMemo(
     () =>
       filterUndefined({
-        colorScheme,
         defaultValue,
         disabled,
         isChecked,
@@ -56,7 +42,7 @@ export const RadioGroup = vui<'div', RadioGroupProps>((props, ref) => {
         value,
         variant
       }),
-    [colorScheme, defaultValue, disabled, handleOnChange, isChecked, name, onBlur, onFocus, size, value, variant]
+    [defaultValue, disabled, handleOnChange, isChecked, name, onBlur, onFocus, size, value, variant]
   )
 
   const aliasedProps = filterUndefined({

package/src/radio/radioGroup.types.ts

@@ -4,7 +4,7 @@ import { ChangeEventHandler, FocusEventHandler } from '../utils'
 
 export type RadioGroupProps = SystemProps &
   ThemingProps<'Radio'> & {
-    /** Available theme colors for this component. */
+    /** Deprecated. Please use variant instead. @deprecated  */
     colorScheme?: 'blue' | 'prussian'
     /** Passes the prop to each radio. */
     disabled?: boolean

package/src/radio/theme.ts

@@ -1,28 +1,14 @@
-import { Dict } from '../utils'
+import { radioColors } from './consts'
 
-function variantDefault(props: Dict) {
-  const { colorScheme: c } = props
-
-  const control = {
-    color: `${c}.80`,
-    hoverColor: `${c}.90`
-  }
-
-  if (c === 'prussian') {
-    control.hoverColor = 'prussian.70'
-  }
-
-  return {
-    control
+const baseStyle = {
+  control: {
+    color: radioColors.main,
+    hoverColor: radioColors.hover
   }
 }
 
-const baseStyle = {}
-
 const defaultProps = {
-  colorScheme: 'blue',
-  size: 'md',
-  variant: 'default'
+  size: 'md'
 }
 
 const parts = ['container', 'control', 'label']
@@ -57,9 +43,7 @@ const sizes = {
   }
 }
 
-const variants = {
-  default: variantDefault
-}
+const variants = {}
 
 export default {
   baseStyle,

package/src/switch/consts.ts

@@ -0,0 +1,8 @@
+export const switchColors = {
+  main: 'seaBlue.main',
+  hover: 'seaBlue.40',
+  disabled: 'sandstone.main',
+  disabledBg: 'sandstone.95',
+  green: 'landGreen.main',
+  red: 'energyRed.main'
+}

package/src/switch/switch.types.ts

@@ -8,7 +8,7 @@ export type SwitchButtonProps = SystemProps &
   ThemingProps<'Switch'> & {
     /** Provides value to switch in controlled mode. */
     checked?: boolean
-    /** Available theme colors for this component. */
+    /** Deprecated. Please use variant instead. @deprecated  */
     colorScheme?: 'blue' | 'green' | 'prussian'
     /** Disables switch and related elements with the right styling. */
     disabled?: boolean
@@ -57,7 +57,7 @@ export type SwitchProps = SystemProps &
     button?: ReactNode
     /** Provides value to switch button in controlled mode. */
     checked?: boolean
-    /** Available theme colors for this component. @default blue */
+    /** Deprecated. Please use variant instead. @deprecated  */
     colorScheme?: 'blue' | 'green' | 'prussian'
     /** Disables switch and related elements with the right styling. */
     disabled?: boolean

package/src/switch/switchButton.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState } from 'react'
 
 import { omitThemingProps, styled, useStyleConfig, vui } from '../core'
 import { ChangeEvent, cs, filterUndefined, FocusEvent } from '../utils'
+import { switchColors } from './consts'
 import { useSwitchContext } from './context'
 import { SwitchButtonProps } from './switch.types'
 
@@ -18,43 +19,41 @@ const SwitchInput = styled.inputBox`
   z-index: 1;
 `
 
-/** Circular element that moves along the track when toggled. */
-const SwitchThumb = styled.spanBox`
-  border-radius: round;
+const SwitchFoundation = styled.spanBox`
+  border-radius: 100px;
   display: inline-flex;
   flex-shrink: 0;
-  position: absolute;
   transition-duration: fast;
+  position: relative;
+`
+
+/** Circular element that moves along the track when toggled. */
+const SwitchThumb = styled(SwitchFoundation)`
+  position: absolute;
 `
 
 /** Track element along which the thumb moves when toggled. */
-const SwitchTrack = styled.spanBox`
+const SwitchTrack = styled(SwitchFoundation)`
   align-items: center;
-  border-radius: round;
-  display: inline-flex;
   flex: 1;
-  position: relative;
-  transition-duration: fast;
 `
 
-export const SwitchButtonBase = styled.spanBox`
+export const SwitchButtonBase = styled(SwitchFoundation)`
   color: white;
   cursor: pointer;
-  display: inline-flex;
-  flex-shrink: 0;
-  position: relative;
+  --x-ring-color: green;
 
   &[aria-disabled='true'] {
     cursor: not-allowed;
 
     .vui-switchThumb {
-      background-color: disabled.color;
+      background-color: ${switchColors.disabled};
     }
 
     .vui-switchTrack {
-      // Using ring instead of border when disabled, because it's easier
-      --x-ring-color: var(--vui-colors-disabled-border);
-      background-color: disabled.bg;
+      --x-ring-color: ${switchColors.disabled};
+      background-color: ${switchColors.disabledBg};
+      color: ${switchColors.disabled};
     }
   }
 `
@@ -124,10 +123,10 @@ export const SwitchButton = vui<'span', SwitchButtonProps>((props, ref) => {
   })
 
   const trackAliasedProps = filterUndefined({
-    bg: isChecked ? trackStyles.bg : 'grey.50',
+    bg: isChecked ? trackStyles.bg : switchColors.disabled,
     pl: isChecked ? 1 : labelOffset,
     pr: isChecked ? labelOffset : 1,
-    ring: !disabled ? (isFocused ? trackStyles.ring : 0) : 1
+    ring: !disabled ? (isFocused ? trackStyles.ring : 0) : 3
   })
 
   return (
@@ -144,12 +143,13 @@ export const SwitchButton = vui<'span', SwitchButtonProps>((props, ref) => {
         onChange={handleOnChange}
         onFocus={handleOnFocus}
         ref={inputRef}
+        tabIndex={-1}
         type="checkbox"
         {...{ checked, defaultChecked, disabled, id, name, required, value }}
         {...inputProps}
       />
 
-      <SwitchTrack className="vui-switchTrack" {...trackStyles} {...trackAliasedProps}>
+      <SwitchTrack className="vui-switchTrack" tabIndex={0} {...trackStyles} {...trackAliasedProps}>
         {!isChecked && innerLabelOff}
 
         <SwitchThumb className="vui-switchThumb" {...thumbStyles} {...thumbAliasedProps} />

package/src/switch/switchMain.tsx

@@ -33,7 +33,6 @@ export const Switch = vui<'label', SwitchProps>((props, ref) => {
     checked,
     children,
     className,
-    colorScheme,
     defaultChecked,
     disabled,
     id,
@@ -59,7 +58,6 @@ export const Switch = vui<'label', SwitchProps>((props, ref) => {
     () =>
       filterUndefined({
         checked,
-        colorScheme,
         defaultChecked,
         disabled,
         name,
@@ -71,7 +69,7 @@ export const Switch = vui<'label', SwitchProps>((props, ref) => {
         value,
         variant
       }),
-    [checked, colorScheme, defaultChecked, disabled, name, onBlur, onChange, onFocus, required, size, value, variant]
+    [checked, defaultChecked, disabled, name, onBlur, onChange, onFocus, required, size, value, variant]
   )
 
   const aliasedProps = filterUndefined({

package/src/switch/theme.ts

@@ -1,4 +1,15 @@
-import { Dict } from '../utils'
+import { switchColors } from './consts'
+
+const baseStyle = {
+  button: {
+    thumb: {
+      bg: 'white'
+    },
+    track: {
+      ring: 3
+    }
+  }
+}
 
 function sizeLg() {
   const button = {
@@ -60,28 +71,9 @@ function sizeSm() {
   return { button, label }
 }
 
-function variantContained(props: Dict) {
-  const { colorScheme: c } = props
-
-  const button = {
-    thumb: {
-      bg: 'white'
-    },
-    track: {
-      bg: `${c}.80`,
-      ring: 3
-    }
-  }
-
-  return { button }
-}
-
-const baseStyle = {}
-
 const defaultProps = {
-  colorScheme: 'blue',
   size: 'md',
-  variant: 'contained'
+  variant: 'primary'
 }
 
 const parts = ['container', 'button', 'label']
@@ -93,7 +85,27 @@ const sizes = {
 }
 
 const variants = {
-  contained: variantContained
+  primary: {
+    button: {
+      track: {
+        bg: switchColors.main
+      }
+    }
+  },
+  green: {
+    button: {
+      track: {
+        bg: switchColors.green
+      }
+    }
+  },
+  red: {
+    button: {
+      track: {
+        bg: switchColors.red
+      }
+    }
+  }
 }
 
 export default {

package/src/textarea/textarea.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react'
 
 import { omitThemingProps, styled, useStyleConfig, vui } from '../core'
+import { inputColors } from '../input/consts'
 import T from '../t'
 import { ChangeEvent, cs, filterUndefined } from '../utils'
-import { greyColor, greyLightColor, redColor } from './consts'
 import { getInitialCount } from './helpers'
 import { TextareaProps } from './textarea.types'
 
@@ -16,15 +16,9 @@ const TextareaTextarea = styled.textareaBox`
   transition-duration: fast;
   width: 100%;
 
-  &::placeholder {
-    color: grey.60;
-  }
-
   &[aria-disabled='true'],
   &[aria-disabled='true']::placeholder {
-    background-color: disabled.bg;
-    border-color: disabled.border;
-    color: disabled.color;
+    opacity: 0.5;
     cursor: not-allowed;
   }
 `
@@ -49,7 +43,6 @@ export const Textarea = vui<'div', TextareaProps>((props, ref) => {
     defaultValue,
     disabled,
     id,
-    isInvalid,
     maxLength,
     name,
     onBlur,
@@ -70,10 +63,7 @@ export const Textarea = vui<'div', TextareaProps>((props, ref) => {
   const [count, setCount] = useState(getInitialCount(props))
   const [valueInternal, setValueInternal] = useState(defaultValue)
 
-  const colorProps = filterUndefined({
-    colorScheme: colorSchemeProp ?? (isInvalid ? 'red' : undefined)
-  })
-  const styles = useStyleConfig('Textarea', { ...colorProps, ...props })
+  const styles = useStyleConfig('Textarea', props)
 
   function onChange(e: ChangeEvent<HTMLTextAreaElement>) {
     setValueInternal(e.target.value)
@@ -87,9 +77,9 @@ export const Textarea = vui<'div', TextareaProps>((props, ref) => {
 
   const textareaAliasedProps = filterUndefined({
     'aria-disabled': disabled,
-    bg: readOnly ? greyLightColor : undefined,
-    focusBorderColor: !readOnly ? 'transparent' : undefined,
-    focusRing: readOnly ? 0 : undefined
+    bg: readOnly ? inputColors.disabled : undefined,
+    focusWithinBorderColor: !readOnly ? 'transparent' : undefined,
+    focusWithinRingColor: readOnly ? 'transparent' : undefined
   })
 
   useEffect(() => {
@@ -128,7 +118,7 @@ export const Textarea = vui<'div', TextareaProps>((props, ref) => {
       {showCount && (
         <T
           className="vui-textareaCount"
-          color={maxLength && count > maxLength ? redColor : greyColor}
+          color={maxLength && count > maxLength ? inputColors.error : inputColors.helpText}
           position="absolute"
           right={0}
           size="sm"

package/src/textarea/textarea.types.ts

@@ -8,7 +8,7 @@ export type TextareaProps = SystemProps &
     autoFocus?: boolean
     /** Children are disabled for this component. */
     children?: never
-    /** Available theme colors for this component. @default grey */
+    /** Deprecated. Please use variant instead. @deprecated  */
     colorScheme?: 'green' | 'grey' | 'red'
     /** Passed to the inner input. */
     cols?: number
@@ -16,7 +16,7 @@ export type TextareaProps = SystemProps &
     defaultValue?: number | string
     /** Passed to the inner input. */
     disabled?: boolean
-    /** Styles the textarea in invalid state. */
+    /** Deprecated. Please use variant="red" instead. @deprecated*/
     isInvalid?: boolean
     /** Passed to the inner input. */
     maxLength?: number

package/src/textarea/theme.ts

@@ -1,29 +1,17 @@
-import { Dict } from '../utils'
-
-function variantDefault(props: Dict) {
-  const { colorScheme: c } = props
-
-  const container = {}
-
-  const textarea = {
-    borderColor: `${c}.80`,
-    focusRing: 2,
-    focusRingColor: `${c}.80`
-  }
-
-  if (c === 'grey') {
-    textarea.borderColor = `${c}.60`
-    textarea.focusRingColor = 'blue.50'
+import { inputColors } from '../input/consts'
+
+const baseStyle = {
+  textarea: {
+    focusWithinRing: 2,
+    color: inputColors.inputText
+  },
+  input: {
+    color: { placeholder: inputColors.placeholder }
   }
-
-  return { container, textarea }
 }
 
-const baseStyle = {}
-
 const defaultProps = {
-  colorScheme: 'grey',
-  variant: 'default'
+  variant: 'grey'
 }
 
 const parts = ['container', 'textarea']
@@ -31,7 +19,24 @@ const parts = ['container', 'textarea']
 const sizes = {}
 
 const variants = {
-  default: variantDefault
+  grey: {
+    textarea: {
+      borderColor: inputColors.border,
+      focusWithinRingColor: inputColors.focus
+    }
+  },
+  green: {
+    textarea: {
+      borderColor: inputColors.success,
+      focusWithinRingColor: inputColors.success
+    }
+  },
+  red: {
+    textarea: {
+      borderColor: inputColors.error,
+      focusWithinRingColor: inputColors.error
+    }
+  }
 }
 
 export default {