@veracity/vui 2.15.3 → 2.16.0

package/src/stepperVertical/stepVerticalTail.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+
+import { Box } from '../box'
+import { vui } from '../core'
+import { cs } from '../utils'
+import { tailClassName, variantColor } from './consts'
+import { StepVerticalTailProps } from './stepperVerticalTypes'
+
+/**
+ * Implements vertical stepper tail (the vertical line) **
+ */
+export const StepVerticalTail = vui<'div', StepVerticalTailProps>((props, ref) => {
+  const { children, className, size = 'md', variant = 'active', ...rest } = props
+  return (
+    <Box
+      borderRight={`1px solid ${variantColor[variant]}`}
+      className={cs(tailClassName)}
+      maxW="16px"
+      minH="100%"
+      position="absolute"
+      ref={ref}
+      w={`${size === 'md' ? 16 : 12}px`}
+      {...rest}
+    />
+  )
+})
+
+StepVerticalTail.displayName = 'StepVerticalTail'
+
+export default StepVerticalTail

package/src/stepperVertical/stepVerticalTitle.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+import { Box } from '../box'
+import { vui } from '../core'
+import { cs } from '../utils'
+import { boldTitles, stepClassName, titleColor } from './consts'
+import { StepVerticalTitleProps } from './stepperVerticalTypes'
+
+/**
+ * Implements vertical stepper tail (the vertical line) **
+ */
+export const StepVerticalTitle = vui<'div', StepVerticalTitleProps>((props, ref) => {
+  const { children, className, size = 'md', variant = 'active', ...rest } = props
+  return (
+    <Box
+      className={cs(stepClassName + 'Title')}
+      color={titleColor[variant]}
+      fontSize={`${size === 'md' ? 16 : 14}px`}
+      fontWeight={boldTitles.includes(variant) ? 600 : undefined}
+      pt={`${size === 'md' ? 4 : 2}px`}
+      whiteSpace="nowrap"
+      {...rest}
+    >
+      {children}
+    </Box>
+  )
+})
+
+StepVerticalTitle.displayName = 'StepVerticalTitle'
+
+export default StepVerticalTitle

package/src/stepperVertical/stepperVertical.tsx

@@ -0,0 +1,29 @@
+import React, { useMemo } from 'react'
+
+import { useStyleConfig, vui } from '../core'
+import { cs, filterUndefined } from '../utils'
+import { StepperVerticalProvider } from './context'
+import StepperVerticalBase from './stepperVerticalBase'
+import { StepperVerticalProps } from './stepperVerticalTypes'
+
+/**
+ * Implements vertical stepper **
+ */
+export const StepperVertical = vui<'div', StepperVerticalProps>((props, ref) => {
+  const { children, className, size, ...rest } = props
+  const styles = useStyleConfig('StepperVertical', props)
+
+  const context = useMemo(() => filterUndefined({ size }), [size])
+
+  return (
+    <StepperVerticalProvider value={context}>
+      <StepperVerticalBase className={cs('vui-stepperVertical', className)} ref={ref} {...styles.container} {...rest}>
+        {children}
+      </StepperVerticalBase>
+    </StepperVerticalProvider>
+  )
+})
+
+StepperVertical.displayName = 'StepperVertical'
+
+export default StepperVerticalBase

package/src/stepperVertical/stepperVerticalBase.ts

@@ -0,0 +1,13 @@
+import { styled } from '../core'
+import { stepClassName, tailClassName } from './consts'
+import { StepperVerticalProps } from './stepperVerticalTypes'
+
+const StepperVerticalBase = styled.divBox<StepperVerticalProps>`
+  position: relative;
+  width: 100%;
+
+  .${stepClassName}:last-of-type > .${tailClassName} {
+    display: none;
+  }
+`
+export default StepperVerticalBase

package/src/stepperVertical/stepperVerticalTypes.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react'
+
+import { BoxProps } from '../box'
+import { ChildrenProp } from '../core'
+import { IconProp } from '../icon'
+import { StepperIndicatorVariant } from '../stepperIndicator/stepperIndicatorTypes'
+import { SystemProps } from '../system'
+import { ThemingProps } from '../theme'
+
+export type StepVerticalSize = 'md' | 'sm' | undefined
+
+export type StepperVerticalProps = SystemProps & ThemingProps<'StepperVertical'> & ChildrenProp
+
+export type StepVerticalProps = SystemProps &
+  ChildrenProp & {
+    icon?: IconProp
+    number?: number
+    size?: StepVerticalSize
+    description?: ReactNode
+    title?: ReactNode
+    disabled?: boolean
+    className?: string
+    variant?: StepperIndicatorVariant
+  }
+
+export type StepVerticalTailProps = BoxProps & {
+  size?: StepVerticalSize
+  variant?: StepperIndicatorVariant
+}
+
+export type StepVerticalTitleProps = BoxProps & {
+  size?: StepVerticalSize
+  variant?: StepperIndicatorVariant
+}

package/src/stepperVertical/theme.ts

@@ -0,0 +1,22 @@
+const baseStyle = {}
+
+const defaultProps = {
+  size: 'md'
+}
+
+const parts = ['stepVertical']
+
+const sizes = {
+  sm: {},
+  md: {}
+}
+
+const variants = {}
+
+export default {
+  baseStyle,
+  defaultProps,
+  parts,
+  sizes,
+  variants
+}

package/src/tabs/consts.ts

@@ -1,6 +1,6 @@
 import { Dict } from '../utils'
 
-export const tabsColors = {
+export const colors = {
   activeBg: 'skyBlue.main',
   border: 'sandstone.main',
   color: 'sandstone.10',

package/src/tabs/tabsNavBar.tsx

@@ -6,11 +6,11 @@ import { Icon } from '../icon'
 import { List, ListItem } from '../list'
 import { TagButton } from '../tag'
 import { cs, Dict } from '../utils'
-import { iconSizeMapper, tabsColors } from './consts'
+import { colors, iconSizeMapper } from './consts'
 import { NavBarIconSize, TabNavBarProps, TabProps } from './tabs.types'
 import theme from './theme'
 
-const { activeBg, border, color, hover, main } = tabsColors
+const { activeBg, border, color, hover, main } = colors
 
 export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
   const { tabs, onNavItemClick, activeNavItem, animationDirection, showBorder, size = 'md' } = props

package/src/tabs/theme.ts

@@ -2,7 +2,7 @@ const baseStyle = {}
 
 const defaultProps = {}
 
-const parts = ['container', 'tabsNavBar', 'tab']
+const parts = ['tabsNavBar']
 
 const sizes = {
   sm: {

package/src/tag/tag.tsx

@@ -120,7 +120,13 @@ export const Tag = vui<'span', TagProps>((props, ref) => {
             {isString(iconRight) ? <TagIcon ml={spaceX} name={iconRight} /> : iconRight}
 
             {onDelete ? (
-              <TagButton disabled={disabled} isRound={isRound} ml={spaceX} onClick={e => onDelete?.(e)} />
+              <TagButton
+                aria-label="delete"
+                disabled={disabled}
+                isRound={isRound}
+                ml={spaceX}
+                onClick={e => onDelete?.(e)}
+              />
             ) : (
               itemRight
             )}

package/src/textarea/textarea.tsx

@@ -16,10 +16,11 @@ const TextareaTextarea = styled.textareaBox`
   transition-duration: fast;
   width: 100%;
 
-  &[aria-disabled='true'],
-  &[aria-disabled='true']::placeholder {
+  &[aria-disabled='true'] {
     opacity: 0.5;
     cursor: not-allowed;
+    background-color: sandstone.79;
+    border-color: sandstone.79;
   }
 `
 
@@ -77,7 +78,8 @@ export const Textarea = vui<'div', TextareaProps>((props, ref) => {
 
   const textareaAliasedProps = filterUndefined({
     'aria-disabled': disabled,
-    bg: readOnly ? inputColors.disabled : undefined,
+    bg: readOnly ? 'sandstone.97' : undefined,
+    borderColor: readOnly ? 'sandstone.55' : undefined,
     focusWithinBorderColor: !readOnly ? 'transparent' : undefined,
     focusWithinRingColor: readOnly ? 'transparent' : undefined
   })

package/src/theme/components.ts

@@ -37,6 +37,8 @@ import Select from '../select/theme'
 import Sidemenu from '../sidemenu/theme'
 import Skeleton from '../skeleton/theme'
 import Spinner from '../spinner/theme'
+import StepperIndicator from '../stepperIndicator/theme'
+import StepperVertical from '../stepperVertical/theme'
 import Switch from '../switch/theme'
 import T from '../t/theme'
 import Table from '../table/theme'
@@ -91,6 +93,8 @@ export default {
   Select,
   Sidemenu,
   Skeleton,
+  StepperIndicator,
+  StepperVertical,
   Spinner,
   Switch,
   T,

package/src/tutorial/tutorialCard.tsx

@@ -61,7 +61,9 @@ export function TutorialCard({
         style={{ WebkitFlexGrow: '0' }}
       >
         <H4 color={tutorialColors.color}>{title}</H4>
-        {!isFinalStep && <Button icon="falTimes" onClick={onDismiss} scale={2} variant="tertiaryLight" />}
+        {!isFinalStep && (
+          <Button aria-label="close" icon="falTimes" onClick={onDismiss} scale={2} variant="tertiaryLight" />
+        )}
       </Box>
       <Box flex={5} row>
         {steps?.map?.(s => (
@@ -77,6 +79,7 @@ export function TutorialCard({
       <Box alignItems="center" justifyContent="space-between" mt={0}>
         <Box alignItems="center" justifyContent="space-between" w="-webkit-fill-available">
           <Button
+            aria-label="previous"
             color={tutorialColors.buttonColor}
             disabled={isStartStep}
             icon="falArrowLeft"
@@ -99,6 +102,7 @@ export function TutorialCard({
             ))}
           </Box>
           <Button
+            aria-label="next"
             color={tutorialColors.buttonColor}
             disabled={isFinalStep}
             icon="falArrowRight"

package/dist/cjs/popover/popoverStyle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"popoverStyle.d.ts","sourceRoot":"","sources":["../../../src/popover/popoverStyle.ts"],"names":[],"mappings":";AAEA,wBAkBC"}

package/dist/esm/popover/popoverStyle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"popoverStyle.d.ts","sourceRoot":"","sources":["../../../src/popover/popoverStyle.ts"],"names":[],"mappings":";AAEA,wBAkBC"}