@veracity/vui 2.6.3 → 2.7.0

package/src/list/theme.ts

@@ -12,7 +12,8 @@ const baseStyle = {
 }
 
 const defaultProps = {
-  size: 'lg'
+  size: 'lg',
+  variant: 'default'
 }
 
 const parts = ['container', 'divider', 'heading', 'icon', 'item', 'text']
@@ -80,7 +81,15 @@ const sizes = {
   }
 }
 
-const variants = {}
+const variants = {
+  default: {},
+  // variant *blue* was introduced for the *header* component
+  blue: {
+    heading: {
+      color: 'darkBlue.main'
+    }
+  }
+}
 
 export default {
   baseStyle,

package/src/logo/Logo.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import Box from '../box'
 import { cdnUrl, vui } from '../core'
-import Svg from '../svg'
+import Svg, { SvgProps } from '../svg'
 import { cs } from '../utils'
 import { LogoProps } from './logo.types'
 
@@ -11,7 +11,7 @@ const dnvLogo = `${cdnUrl}/common/icons/logos/dnv-logo.svg`
 
 /** Brand logo. */
 export const Logo = vui<'div', LogoProps>((props, ref) => {
-  const { brand, children, className, src, url, ...rest } = props
+  const { brand, children, className, src, styles, url, ...rest } = props
 
   let svgSrc = src
 
@@ -20,8 +20,18 @@ export const Logo = vui<'div', LogoProps>((props, ref) => {
   const linkProps = url ? { as: 'a', href: url, outline: 'none', focusRing: 2 } : {}
 
   return (
-    <Box centerV className={cs('vui-logo', className)} flexShrink={0} h={40} mr={2} ref={ref} {...linkProps} {...rest}>
-      {children ?? <Svg aria-label="logo" h="100%" src={svgSrc} />}
+    <Box
+      centerV
+      className={cs('vui-logo', className)}
+      flexShrink={0}
+      h={40}
+      mr={2}
+      ref={ref}
+      {...styles?.container}
+      {...linkProps}
+      {...rest}
+    >
+      {children ?? <Svg aria-label="logo" h="100%" src={svgSrc} {...(styles?.svg as unknown as SvgProps)} />}
     </Box>
   )
 })

package/src/logo/logo.types.ts

@@ -7,6 +7,7 @@ export type LogoData = {
   src?: string
   /** Renders logo wrapper as a link with given url as href. */
   url?: string
+  styles?: { container?: BoxProps; svg?: BoxProps }
 }
 
 export type LogoProps = BoxProps & LogoData

package/src/p/theme.ts

@@ -5,6 +5,10 @@ const defaultProps = {
 }
 
 const sizes = {
+  xs: {
+    fontSize: 'xs',
+    lineHeight: '18px'
+  },
   sm: {
     fontSize: 'sm',
     lineHeight: '22px'

package/src/table/thead.tsx

@@ -7,6 +7,14 @@ import { TheadProps } from './table.types'
 import Th from './th'
 import Tr from './tr'
 
+/*@formatter:off*/
+const TheadBase = styled.theadBox`
+  tr th {
+    border-bottom: 1px solid sandstone.main;
+  }
+`
+/*@formatter:on*/
+
 /** Displays Table head with support for columns and sticky. */
 export const Thead = vui<'thead', TheadProps>((props, ref) => {
   const { children, className, ...rest } = props
@@ -22,12 +30,6 @@ export const Thead = vui<'thead', TheadProps>((props, ref) => {
       }
     : {}
 
-  const TheadBase = styled.theadBox`
-    tr th {
-      border-bottom: ${rest.borderBottom || '1px solid sandstone.main'};
-    }
-  `
-
   return (
     <TheadBase className={cs('vui-thead', className)} ref={ref} {...stickyProps} {...styles.thead} {...rest}>
       {children ?? (