@veracity/vui 2.5.0-beta.1 → 2.5.0

package/src/progressCircular/theme.ts

@@ -1,7 +1,12 @@
-const baseStyle = {}
+import { darkBlue, energyRed, landGreen } from '../theme/foundations/colors'
+
+const baseStyle = {
+  color: 'darkBlue.main'
+}
 
 const defaultProps = {
-  size: 'md'
+  size: 'md',
+  variant: 'primary'
 }
 
 const sizes = {
@@ -16,7 +21,26 @@ const sizes = {
   xl: { strokeWidth: 7, width: 160, top: 64, fontSize: 22 }
 }
 
-const variants = {}
+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,

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
-    /** @deprecated Available theme colors for this component. */
+    /** Deprecated. Please use variant instead. @deprecated  */
     colorScheme?: 'blue' | 'prussian'
     /** Disables radio and related elements with the right styling. */
     disabled?: boolean

package/src/radio/radioGroup.types.ts

@@ -4,7 +4,7 @@ import { ChangeEventHandler, FocusEventHandler } from '../utils'
 
 export type RadioGroupProps = SystemProps &
   ThemingProps<'Radio'> & {
-    /** @deprecated 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/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 {

package/src/tutorial/consts.ts

@@ -0,0 +1,5 @@
+export const tutorialColors = {
+  bg: 'darkBlue.main',
+  buttonColor: 'digiGreen.main',
+  color: 'white'
+}

package/src/tutorial/tutorial.tsx

@@ -8,16 +8,17 @@ import { useTutorial } from './useTutorial'
 
 /** [Beta] Popover Tutorial is used to display information about a new, or existing feature. */
 export function Tutorial({
+  actionLabel,
   children,
   className,
-  description,
+  onAction,
   onDismiss,
   onFinish,
-  readMoreLink,
   steps,
   title,
   id,
-  placement = 'right'
+  placement = 'right',
+  showSkipButton
 }: TutorialProps) {
   const { isVisible, setIsVisible, saveDisplayed } = useTutorial(id)
 
@@ -32,11 +33,12 @@ export function Tutorial({
     <Tippy
       content={
         <TutorialCard
+          actionLabel={actionLabel}
           className={cs('vui-tutorial', className)}
-          description={description}
+          onAction={onAction}
           onDismiss={() => onClose('dismissed')}
           onFinish={() => onClose('finished')}
-          readMoreLink={readMoreLink}
+          showSkipButton={showSkipButton}
           steps={steps}
           title={title}
         />

package/src/tutorial/tutorial.types.ts

@@ -4,50 +4,58 @@ import { Placement } from 'tippy.js'
 export type TutorialDataStep = {
   /** title of step */
   title: string
-  /** description of step */
-  description: string
-  /** Read more link */
+  /** Content */
+  content?: string
+  /** Link to page where they can read more */
   readMoreLink?: string
 }
 
 export type TutorialProps = {
+  /** Label for the action button @default `Action` */
+  actionLabel?: string
   /** Target element for the tutorial */
   children: React.ReactNode
   /** Custom class name */
   className?: string
   /** An id for further handling with localStorage */
   id: string
-  /** A general tutorial description */
-  description?: string
+  /** Invoked once the action button clicked. */
+  onAction?: () => void
   /** Invoked once the dismiss button clicked. */
   onDismiss?: () => void
   /** Invoked once the finish button clicked. */
   onFinish?: () => void
   /** Popover placement */
   placement?: Placement
-  /** Link to page where user can read more */
-  readMoreLink?: string
   /** An array of steps */
   steps: TutorialDataStep[]
-  /** A general tutorial title */
+  /** Show the Skip button */
+  showSkipButton?: boolean
+  /** General tutorial title */
   title: string
+  /** Link to page where they can read more */
+  readMoreLink?: string
 }
 
 export type TutorialCardProps = {
+  /** Label for the action button @default `Action` */
+  actionLabel?: string
   /** Custom class name */
   className?: string
   /** The card title */
   title: string
   /** Steps of the card */
   steps: TutorialDataStep[]
+  /** Invoked once the action button clicked. */
+  onAction?: () => void
   /** Callback for the dismiss button click. */
   onDismiss?: () => void
   /** Callback for the finish button click. */
   onFinish?: () => void
-  /** Description of feature */
-  description?: string
   /** Link to page where they can read more */
   readMoreLink?: string
+  /** Show the Skip button */
+  showSkipButton?: boolean
 }
 
 export type TutorialStepProps = {
@@ -55,8 +63,8 @@ export type TutorialStepProps = {
   active: boolean
   /** Title of step */
   title: string
-  /** Description of step */
-  description: string
+  /** Step content */
+  content?: string
   /** Link to page where user can read more */
   readMoreLink?: string
 }