@veracity/vui 2.18.2-beta.1 → 2.18.2-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.18.2-beta.1",
+  "version": "2.18.2-beta.3",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/stepIndicator/stepIndicator.tsx

@@ -21,7 +21,7 @@ const Content = ({ number, variant, size }: { number?: number; variant?: string;
  * Implements stepper indicator **
  */
 export const StepIndicator = vui<'div', StepIndicatorProps>((props, ref) => {
-  const { icon, number, className, size, variant, ...rest } = props
+  const { icon, number, className, size = 'md', variant = 'active', ...rest } = props
   const styles = useStyleConfig('StepIndicator', props)
 
   return icon ? (

package/src/table/table.types.ts

@@ -38,7 +38,9 @@ export type TableProps = SystemProps &
 
 export type TbodyProps = SystemProps
 
-export type TdProps = SystemProps
+export type TdProps = SystemProps & {
+  level?: number
+}
 
 export type TfootProps = SystemProps
 

package/src/table/td.tsx

@@ -1,6 +1,5 @@
-import React from 'react'
-
 import { styled, useStyleConfig, vui } from '../core'
+import T from '../t'
 import { cs } from '../utils'
 import { useTableContext } from './context'
 import { TdProps } from './table.types'
@@ -11,10 +10,21 @@ export const TdBase = styled.tdBox`
 
 /** Displays a cell inside Table row. */
 export const Td = vui<'td', TdProps>((props, ref) => {
-  const { className, ...rest } = props
+  const { className, level = 0, children, ...rest } = props
   const styles = useStyleConfig('Table', useTableContext())
 
-  return <TdBase className={cs('vui-td', className)} px={2} ref={ref} {...styles.td} {...rest} />
+  return (
+    <TdBase className={cs('vui-td', className)} px={2} ref={ref} {...styles.td} {...rest}>
+      {!!level && (
+        <T mr={1}>
+          {Array.from({ length: level }).map((_i, key) => (
+            <T key={key}>&mdash;</T>
+          ))}
+        </T>
+      )}
+      {children}
+    </TdBase>
+  )
 })
 
 Td.displayName = 'Td'

package/src/table/thead.tsx

@@ -9,7 +9,8 @@ import Tr from './tr'
 
 /*@formatter:off*/
 const TheadBase = styled.theadBox`
-  tr th {
+  tr th,
+  tr td {
     border-bottom: 1px solid sandstone.main;
   }
 `

package/src/table/tr.tsx

@@ -41,7 +41,7 @@ export const Tr = vui<'tr', TrProps>((props, ref) => {
   rest.children = (
     <>
       {nested !== undefined && (
-        <Td textAlign="center" w={10}>
+        <Td maxW={16} px={0} textAlign="center">
           {nested ? <Button icon={buttonClassName(isExpanded)} onClick={onToggle} variant="subtleBlue" /> : null}
         </Td>
       )}