@veracity/vui 2.15.4 → 2.16.0

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/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/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"}