@veracity/vui 2.18.2-beta.0 → 2.18.2-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.18.2-beta.0",
+  "version": "2.18.2-beta.2",
   "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

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react'
+
 import { IconProps } from '../icon'
 import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
@@ -36,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
 
@@ -52,7 +56,11 @@ export type TheadProps = SystemProps & {}
 
 export type TrProps = SystemProps & {
   /** Adds selected styling. */
+  isExpanded?: boolean
   isSelected?: boolean
+  nested?: ReactNode
+  onCollapsed?: () => void
+  onExpanded?: () => void
 }
 
 export type TableSortIconProps = Omit<IconProps, 'order'> & {

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

@@ -1,32 +1,67 @@
-import React from 'react'
+import { useEffect, useState } from 'react'
 
+import Button from '../button'
 import { styled, useStyleConfig, vui } from '../core'
 import { cs } from '../utils'
 import { useTableContext } from './context'
 import { TrProps } from './table.types'
+import Td from './td'
+
+const trClassName = 'vui-tr'
+const buttonClassName = (isExpanded?: boolean) => (isExpanded ? 'falAngleUp' : 'falAngleDown')
 
 export const TrBase = styled.trBox`
+  position: relative;
   transition-duration: fast;
 `
 
 /** Displays Table row that can contain heading or data cells. */
 export const Tr = vui<'tr', TrProps>((props, ref) => {
-  const { className, isSelected, ...rest } = props
+  const { className, isExpanded: isExpandedProp, isSelected, nested, onCollapsed, onExpanded, ...rest } = props
   const { variant } = useTableContext() ?? {}
   const styles = useStyleConfig('Table', useTableContext())
+  const [isExpanded, setIsExpanded] = useState(isExpandedProp)
+
+  useEffect(() => {
+    setIsExpanded(isExpandedProp)
+  }, [isExpandedProp])
+
+  const onToggle = () => {
+    if (isExpanded) {
+      setIsExpanded(false)
+      onCollapsed?.()
+    } else {
+      setIsExpanded(true)
+      onExpanded?.()
+    }
+  }
 
   const selectedProps = isSelected ? { bg: 'skyBlue.selected' } : {}
 
+  rest.children = (
+    <>
+      {nested !== undefined && (
+        <Td maxW={8} px={0} textAlign="center">
+          {nested ? <Button icon={buttonClassName(isExpanded)} onClick={onToggle} variant="subtleBlue" /> : null}
+        </Td>
+      )}
+      {rest.children}
+    </>
+  )
+
   return (
-    <TrBase
-      className={cs('vui-tr', className)}
-      data-selected={Boolean(isSelected)}
-      data-variant={variant}
-      ref={ref}
-      {...styles.tr}
-      {...selectedProps}
-      {...rest}
-    />
+    <>
+      <TrBase
+        className={cs(trClassName, `${trClassName}-${isExpanded ? 'expanded' : 'collapsed'}`, className)}
+        data-selected={Boolean(isSelected)}
+        data-variant={variant}
+        ref={ref}
+        {...styles.tr}
+        {...selectedProps}
+        {...rest}
+      />
+      {isExpanded && nested}
+    </>
   )
 })