@veracity/vui 2.7.0 → 2.8.0-rc.1

package/dist/esm/tree/tree.types.d.ts

@@ -1,6 +1,7 @@
 import { ReactNode, ReactText } from 'react';
 import { IconProp } from '../icon';
 import { LinkProps } from '../link';
+import { ListItemProps } from '../list';
 import { SystemProps } from '../system';
 import { ThemingProps } from '../theme';
 import { PropsOf } from '../utils';
@@ -12,7 +13,7 @@ export declare type TreeProps = SystemProps & ThemingProps<'Tree'> & {
     /** Socket defining the expand icon on the left. */
     iconExpand?: IconProp;
     /** Socket displaying a tree of items. */
-    items?: PropsOf<'div', TreeItemProps>[] | JSX.Element;
+    items?: PropsOf<'li', TreeItemProps>[] | JSX.Element;
     /** Socket defining the size of the tree. */
     onClickItem?: (id: TreeItemId) => void;
 };
@@ -22,7 +23,7 @@ export declare type TreeOnToggleEvent = {
     id: TreeItemId;
     collapsed: boolean;
 };
-export declare type TreeItemProps = SystemProps & ThemingProps<'Tree'> & {
+export declare type TreeItemProps = ListItemProps & ThemingProps<'Tree'> & {
     activeItemId?: TreeItemId;
     /** internal, not exposed */
     activeItemIndex?: TreeItemId;
@@ -39,16 +40,22 @@ export declare type TreeItemProps = SystemProps & ThemingProps<'Tree'> & {
     /** Socket defining the expand icon on the left. */
     iconExpand?: IconProp;
     /** The children of this tree item. */
-    items?: PropsOf<'div', TreeItemProps>[];
+    items?: PropsOf<'li', TreeItemProps>[];
     children?: ReactNode;
     /** Collapsed state */
     isCollapsed?: boolean;
+    /** indicates if the item is first-level; if yes it can be styled differently */
+    isFirstLevel?: boolean;
     /** Displays item and its content in disabled state with appropriate styling. */
     disabled?: boolean;
     /** Displays item in selected state with appropriate styling. */
     isActive?: boolean;
     /** If provided, content is wrapper with a link and the props are provided to the element. */
     linkProps?: TreeItemLinkProps;
+    /** internal, padding left; if provided it will accumulate function of levels. */
+    propagatedPL?: number;
+    /** Socket defining the size of the padding increment. */
+    plUnit?: number;
     /** Socket displaying text within the item. */
     text: ReactText | JSX.Element;
     /** Collapse change state */

package/dist/esm/tree/tree.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tree.types.d.ts","sourceRoot":"","sources":["../../../src/tree/tree.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE5C,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAElC,oBAAY,SAAS,GAAG,WAAW,GACjC,YAAY,CAAC,MAAM,CAAC,GAAG;IACrB,gCAAgC;IAChC,YAAY,CAAC,EAAE,UAAU,CAAA;IACzB,qDAAqD;IACrD,YAAY,CAAC,EAAE,QAAQ,CAAA;IACvB,mDAAmD;IACnD,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,aAAa,CAAC,EAAE,GAAG,GAAG,CAAC,OAAO,CAAA;IACrD,4CAA4C;IAC5C,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,UAAU,KAAK,IAAI,CAAA;CACvC,CAAA;AAEH,oBAAY,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE,SAAS,CAAC,GAAG,MAAM,CAAA;AAEhE,oBAAY,UAAU,GAAG,MAAM,GAAG,MAAM,CAAA;AAExC,oBAAY,iBAAiB,GAAG;IAC9B,EAAE,EAAE,UAAU,CAAA;IACd,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,oBAAY,aAAa,GAAG,WAAW,GACrC,YAAY,CAAC,MAAM,CAAC,GAAG;IACrB,YAAY,CAAC,EAAE,UAAU,CAAA;IACzB,4BAA4B;IAC5B,eAAe,CAAC,EAAE,UAAU,CAAA;IAC5B,gBAAgB;IAChB,EAAE,EAAE,UAAU,CAAA;IACd,mEAAmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,oDAAoD;IACpD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,kDAAkD;IAClD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,qDAAqD;IACrD,YAAY,CAAC,EAAE,QAAQ,CAAA;IACvB,mDAAmD;IACnD,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,sCAAsC;IACtC,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,aAAa,CAAC,EAAE,CAAA;IACvC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,sBAAsB;IACtB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6FAA6F;IAC7F,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,8CAA8C;IAC9C,IAAI,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAAA;IAC7B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAC7C,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,UAAU,KAAK,IAAI,CAAA;CAC3C,CAAA"}
+{"version":3,"file":"tree.types.d.ts","sourceRoot":"","sources":["../../../src/tree/tree.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAE5C,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;AACnC,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAA;AAElC,oBAAY,SAAS,GAAG,WAAW,GACjC,YAAY,CAAC,MAAM,CAAC,GAAG;IACrB,gCAAgC;IAChC,YAAY,CAAC,EAAE,UAAU,CAAA;IACzB,qDAAqD;IACrD,YAAY,CAAC,EAAE,QAAQ,CAAA;IACvB,mDAAmD;IACnD,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,yCAAyC;IACzC,KAAK,CAAC,EAAE,OAAO,CAAC,IAAI,EAAE,aAAa,CAAC,EAAE,GAAG,GAAG,CAAC,OAAO,CAAA;IACpD,4CAA4C;IAC5C,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,UAAU,KAAK,IAAI,CAAA;CACvC,CAAA;AAEH,oBAAY,iBAAiB,GAAG,OAAO,CAAC,GAAG,EAAE,SAAS,CAAC,GAAG,MAAM,CAAA;AAEhE,oBAAY,UAAU,GAAG,MAAM,GAAG,MAAM,CAAA;AAExC,oBAAY,iBAAiB,GAAG;IAC9B,EAAE,EAAE,UAAU,CAAA;IACd,SAAS,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,oBAAY,aAAa,GAAG,aAAa,GACvC,YAAY,CAAC,MAAM,CAAC,GAAG;IACrB,YAAY,CAAC,EAAE,UAAU,CAAA;IACzB,4BAA4B;IAC5B,eAAe,CAAC,EAAE,UAAU,CAAA;IAC5B,gBAAgB;IAChB,EAAE,EAAE,UAAU,CAAA;IACd,mEAAmE;IACnE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,oDAAoD;IACpD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,kDAAkD;IAClD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,qDAAqD;IACrD,YAAY,CAAC,EAAE,QAAQ,CAAA;IACvB,mDAAmD;IACnD,UAAU,CAAC,EAAE,QAAQ,CAAA;IACrB,sCAAsC;IACtC,KAAK,CAAC,EAAE,OAAO,CAAC,IAAI,EAAE,aAAa,CAAC,EAAE,CAAA;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,sBAAsB;IACtB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,gFAAgF;IAChF,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,6FAA6F;IAC7F,SAAS,CAAC,EAAE,iBAAiB,CAAA;IAC7B,iFAAiF;IACjF,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,8CAA8C;IAC9C,IAAI,EAAE,SAAS,GAAG,GAAG,CAAC,OAAO,CAAA;IAC7B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAC7C,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,UAAU,KAAK,IAAI,CAAA;CAC3C,CAAA"}

package/dist/esm/tree/treeItem.d.ts

@@ -1,8 +1,8 @@
 import { TreeItemProps } from './tree.types';
-export declare const TreeItemBase: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
+export declare const TreeItemBase: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, import("..").SystemProps, never>;
 /**
  * Displays a tree item with text and optional icons. Can be shown as selected.
  */
-export declare const TreeItem: import("../core").VuiComponent<"div", TreeItemProps>;
+export declare const TreeItem: import("../core").VuiComponent<"li", TreeItemProps>;
 export default TreeItem;
 //# sourceMappingURL=treeItem.d.ts.map

package/dist/esm/tree/treeItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"treeItem.d.ts","sourceRoot":"","sources":["../../../src/tree/treeItem.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAI5C,eAAO,MAAM,YAAY,+HAcxB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,sDAiJnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}
+{"version":3,"file":"treeItem.d.ts","sourceRoot":"","sources":["../../../src/tree/treeItem.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAK5C,eAAO,MAAM,YAAY,8HAKxB,CAAA;AAGD;;GAEG;AACH,eAAO,MAAM,QAAQ,qDAmLnB,CAAA;AAEF,eAAe,QAAQ,CAAA"}

package/dist/esm/tree/treeItem.js

@@ -1,34 +1,30 @@
 import React, { useEffect, useState } from 'react';
 import { Box } from '../box';
 import { styled, useStyleConfig, vui } from '../core';
-import { cs, isArray, isReactText } from '../utils';
+import { List } from '../list';
+import { cs, isArray, isReactText, vuiColorToRGBA } from '../utils';
 import { useTreeContext } from './context';
 import TreeIcon from './treeIcon';
 import TreeText from './treeText';
-export const TreeItemBase = styled.divBox `
+/*@formatter:off*/
+export const TreeItemBase = styled.liBox `
   display: flex;
   flex-direction: column;
-  line-height: normal;
-  outline: none;
-  align-content: flex-start;
-  align-items: flex-start;
-  overflow: visible;
-  height: auto;
-
-  & [aria-disabled='true'] {
-    cursor: not-allowed;
-    user-select: none;
-  }
+  transition-duration: fast;
+  width: 100%;
 `;
+/*@formatter:on*/
 /**
  * Displays a tree item with text and optional icons. Can be shown as selected.
  */
 export const TreeItem = vui((props, ref) => {
     const mergedProps = { ...useTreeContext(), ...props };
-    const { activeItemId, activeItemIndex, children, center, centerH, centerV = true, className, iconCollapse = 'falMinus', isCollapsed, disabled, iconExpand = 'falPlus', id, items, isActive, isTruncated, key, onClickTreeItem, onToggle, text, ...rest } = mergedProps;
+    const { activeItemId, activeItemIndex, children, center, centerH, centerV = true, className, iconCollapse = 'falMinus', isCollapsed, disabled, iconExpand = 'falPlus', id, items, isActive, isFirstLevel, isTruncated, key, onClickTreeItem, onToggle, propagatedPL, plUnit = 26, text, ...rest } = mergedProps;
     const styles = useStyleConfig('Tree', useTreeContext());
-    const { activeBg, h, hoverBg, p, px, py, selectedBg, ...itemStyles } = styles.item;
+    const { activeBg, bg, color, h, hoverBg, hoverColor, p, px, py, selectedBg, ...itemStyles } = styles.item;
     const [collapsedInternal, setIsCollapsedInternal] = useState(false);
+    const innerBoxPl = propagatedPL || 0;
+    const innerListPl = innerBoxPl + (plUnit || 0);
     useEffect(() => {
         setIsCollapsedInternal(!!isCollapsed);
     }, [isCollapsed]);
@@ -44,47 +40,69 @@ export const TreeItem = vui((props, ref) => {
         // Avoids triggering parent's onClick
         e.stopPropagation();
     };
-    const interactiveProps = !disabled
-        ? {
-            cursor: 'pointer',
-            focusVisibleRing: 2,
-            hoverBg: 'transparent',
-            activeBg: 'transparent',
-            userSelect: 'none'
-        }
-        : {};
     const hoverTreeItem = (e, type) => {
         const target = e.target;
+        let parentDiv = undefined;
         if (target.classList.contains('vui-treeItem-permanent')) {
-            target.style.backgroundColor = type === 'over' ? '#e2f1ff' : 'transparent';
-            e.stopPropagation();
+            parentDiv = target;
+        }
+        else {
+            const parentLi = target.closest('.vui-treeItem');
+            parentDiv = parentLi?.getElementsByClassName('vui-treeItem-permanent')[0];
+        }
+        const isDivActive = parentDiv.classList.contains('vui-treeItem-active') ? true : false;
+        // translate the list-item style over to the div
+        if (parentDiv.classList.contains('vui-treeItem-permanent')) {
+            // is it a fist level item?
+            if (parentDiv.classList.contains('vui-treeItem-firstLevel')) {
+                if (type === 'over') {
+                    parentDiv.style.backgroundColor = vuiColorToRGBA(styles?.firstLevelItem?.hoverBg || 'transparent');
+                }
+                if (type === 'out') {
+                    parentDiv.style.backgroundColor = isDivActive
+                        ? vuiColorToRGBA(styles?.firstLevelItem?.activeBg || 'transparent')
+                        : vuiColorToRGBA(styles?.firstLevelItem?.bg || 'transparent');
+                }
+            }
+            else {
+                // it is NOT first level
+                if (type === 'over') {
+                    parentDiv.style.backgroundColor = vuiColorToRGBA(styles?.item?.hoverBg || 'transparent');
+                }
+                if (type === 'out') {
+                    parentDiv.style.backgroundColor = isDivActive
+                        ? vuiColorToRGBA(styles?.item?.activeBg || 'transparent')
+                        : vuiColorToRGBA(styles?.item?.bg || 'transparent');
+                }
+            }
         }
         else {
             e.preventDefault();
-            const permanent = target
-                .closest('.vui-treeItem')
-                ?.getElementsByClassName('vui-treeItem-permanent')[0];
-            const collapsible = target
-                .closest('.vui-treeItem')
-                ?.getElementsByClassName('vui-treeItem-collapsible')[0];
-            const active = target.closest('.vui-treeItem')?.getElementsByClassName('vui-treeItem-active')[0];
-            permanent ? (permanent.style.backgroundColor = type === 'over' ? '#e2f1ff' : 'transparent') : null;
-            collapsible ? (collapsible.style.backgroundColor = 'transparent') : null;
-            active ? (active.style.backgroundColor = 'hsl(139, 100%, 90%)') : null;
         }
+        e.stopPropagation();
     };
     const isCollapsable = (isArray(children) && children.length > 0) || (isArray(items) && items.length > 0);
     const isActiveInternal = (!activeItemIndex && isActive) || activeItemIndex === id;
-    return (React.createElement(TreeItemBase, { alignItems: "start", className: cs('vui-treeItem', className), h: collapsedInternal ? h : isCollapsable ? 'auto' : h, id: id, m: 0, onClick: !disabled ? (e) => toggle(e) : undefined, onMouseOut: !disabled ? (e) => hoverTreeItem(e, 'out') : undefined, onMouseOver: !disabled ? (e) => hoverTreeItem(e, 'over') : undefined, p: 0, ref: ref, w: 1, ...itemStyles, ...interactiveProps, ...rest, hoverBg: "transparent" },
-        React.createElement(Box, { flexDirection: "column", hoverBg: "transparent", m: 0, pl: 2, pr: 0, py: py, w: 1 },
-            React.createElement(Box, { alignItems: "center", bg: isActiveInternal ? 'hsl(139, 100%, 90%)' : 'transparent', className: isActiveInternal ? 'vui-treeItem-active' : 'vui-treeItem-permanent', flexDirection: "row", hoverBg: "transparent", m: 0, p: 0, w: 1 },
-                items && items?.length > 0 && (React.createElement(React.Fragment, null, collapsedInternal ? React.createElement(TreeIcon, { mr: 1, name: iconExpand }) : React.createElement(TreeIcon, { mr: 1, name: iconCollapse }))),
-                items?.length === 0 && React.createElement(TreeIcon, { mr: 1, name: "cusDotFullAlt" }),
-                isReactText(text) ? React.createElement(TreeText, { ...{ isTruncated, text } }) : text),
-            isCollapsable && !collapsedInternal && (React.createElement(Box, { className: "vui-treeItem-collapsible", flexDirection: "column", hoverBg: "transparent", m: 0, p: 0, w: 1 }, children ??
+    let textMl = items && items?.length > 0 ? 0 : 1.5;
+    if (!isCollapsable) {
+        textMl += 3.8;
+    }
+    // hoverBg cannot be styled directly from theme, it has to be JS manipulated because of event propagation
+    return (React.createElement(TreeItemBase, { className: cs('vui-treeItem', isFirstLevel ? 'vui-treeItem-firstLevel' : '', className), color: isFirstLevel ? styles?.firstLevelItem?.color : color, h: collapsedInternal ? h : isCollapsable ? 'auto' : h, id: id.toString(), m: 0, onClick: !disabled ? (e) => toggle(e) : undefined, onMouseOut: !disabled ? (e) => hoverTreeItem(e, 'out') : undefined, onMouseOver: !disabled ? (e) => hoverTreeItem(e, 'over') : undefined, p: 0, propagatedPL: propagatedPL, ref: ref, w: 1, ...itemStyles, bg: isFirstLevel
+            ? isActiveInternal
+                ? styles?.firstLevelItem?.activeBg
+                : styles?.firstLevelItem?.bg
+            : isActiveInternal
+                ? styles?.item?.activeBg
+                : bg, hoverBg: undefined, ...rest },
+        React.createElement(React.Fragment, null,
+            React.createElement(Box, { centerV: true, className: cs('vui-treeItem-permanent', isActiveInternal ? 'vui-treeItem-active' : '', isFirstLevel ? 'vui-treeItem-firstLevel' : ''), fontWeight: isActiveInternal ? '600' : '500', pl: `${innerBoxPl}px` },
+                items && items?.length > 0 && (React.createElement(React.Fragment, null, collapsedInternal ? React.createElement(TreeIcon, { mx: 1.5, name: iconExpand }) : React.createElement(TreeIcon, { mx: 1.5, name: iconCollapse }))),
+                isReactText(text) ? React.createElement(TreeText, { ml: textMl, ...{ isTruncated, text } }) : text),
+            isCollapsable && !collapsedInternal && (React.createElement(List, { w: 1 }, children ??
                 (isArray(items)
-                    ? items.map(({ key, ...props }, index) => {
-                        return (React.createElement(TreeItem, { activeItemIndex: activeItemIndex, iconCollapse: iconCollapse, iconExpand: iconExpand, key: key ?? index, onClickTreeItem: onClickTreeItem, ...props }));
+                    ? items.map(({ key, propagatedPL, ...props }, index) => {
+                        return (React.createElement(TreeItem, { activeItemIndex: activeItemIndex, iconCollapse: iconCollapse, iconExpand: iconExpand, key: key ?? index, onClickTreeItem: onClickTreeItem, propagatedPL: innerListPl, ...props }));
                     })
                     : items))))));
 });

package/dist/esm/tutorial/tutorialCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tutorialCard.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorialCard.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAyC,MAAM,kBAAkB,CAAA;AAG3F,wBAAgB,YAAY,CAAC,EAC3B,WAAsB,EACtB,SAAS,EACT,KAAK,EACL,YAAY,EACZ,KAAK,EAAE,UAAe,EACtB,cAAc,EACd,QAAQ,EACR,SAAS,EACT,QAAQ,EACT,EAAE,iBAAiB,eAqHnB"}
+{"version":3,"file":"tutorialCard.d.ts","sourceRoot":"","sources":["../../../src/tutorial/tutorialCard.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAAyC,MAAM,kBAAkB,CAAA;AAG3F,wBAAgB,YAAY,CAAC,EAC3B,WAAsB,EACtB,SAAS,EACT,KAAK,EACL,YAAY,EACZ,KAAK,EAAE,UAAe,EACtB,cAAc,EACd,QAAQ,EACR,SAAS,EACT,QAAQ,EACT,EAAE,iBAAiB,eAuHnB"}

package/dist/esm/tutorial/tutorialCard.js

@@ -33,6 +33,7 @@ export function TutorialCard({ actionLabel = 'Action', className, title, readMor
                 showSkipButton && !isFinalStep && (React.createElement(Button, { mr: 2, onClick: onDismiss, variant: "primaryLight" }, "Skip")),
                 isFinalStep && (React.createElement(Button, { mr: 2, onClick: onFinish, variant: "primaryLight" }, "Finish")),
                 !!onAction && (React.createElement(Button, { mr: 6, onClick: onAction, variant: "primaryLight" },
-                    actionLabel,
-                    onAction)))))));
+                    React.createElement(React.Fragment, null,
+                        actionLabel,
+                        onAction))))))));
 }

package/dist/esm/utils/styles.d.ts

@@ -7,10 +7,9 @@ export declare function parseHSL(color: string): {
     s: number;
     l: number;
 };
-/** Builds RGBA string. */
-export declare const buildRGBA: (r: number, g: number, b: number, alpha?: number) => string;
 /** Converts hex color value to rgb with optional alpha property. */
 export declare function hexToRGBA(hex: string, alpha?: number): string;
+export declare function vuiColorToRGBA(color: string, alpha?: number): string;
 /** Converts hsl color value to rgb with optional alpha property. */
 export declare function HSLToRGBA(h: number, s: number, l: number, alpha?: number): string;
 /** Styling to add ellipsis for long texts. */

package/dist/esm/utils/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAElC,+EAA+E;AAC/E,wBAAgB,EAAE,CAAC,GAAG,UAAU,EAAE,GAAG,EAAE,UAEtC;AAED,6BAA6B;AAC7B,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM;;;;EAIrC;AAED,0BAA0B;AAC1B,eAAO,MAAM,SAAS,MAAO,MAAM,KAAK,MAAM,KAAK,MAAM,UAAU,MAAM,WACW,CAAA;AAEpF,oEAAoE;AACpE,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,UAgBpD;AAED,oEAAoE;AACpE,wBAAgB,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,UA0CxE;AAED,8CAA8C;AAC9C,eAAO,MAAM,gBAAgB;;;;CAI5B,CAAA"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/utils/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAIlC,+EAA+E;AAC/E,wBAAgB,EAAE,CAAC,GAAG,UAAU,EAAE,GAAG,EAAE,UAEtC;AAED,6BAA6B;AAC7B,wBAAgB,QAAQ,CAAC,KAAK,EAAE,MAAM;;;;EAIrC;AAED,oEAAoE;AACpE,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,UAgBpD;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,UAS3D;AAED,oEAAoE;AACpE,wBAAgB,SAAS,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,UA0CxE;AAED,8CAA8C;AAC9C,eAAO,MAAM,gBAAgB;;;;CAI5B,CAAA"}

package/dist/esm/utils/styles.js

@@ -1,3 +1,4 @@
+import { colors } from '../theme';
 /** Concatenates individual className arguments and returns a single string. */
 export function cs(...classNames) {
     return classNames.filter(Boolean).join(' ');
@@ -8,8 +9,6 @@ export function parseHSL(color) {
     const res = regexp?.exec?.(color)?.slice?.(1);
     return { h: Number(res?.[0]) || 0, s: Number(res?.[1]) || 0, l: Number(res?.[2]) || 0 };
 }
-/** Builds RGBA string. */
-export const buildRGBA = (r, g, b, alpha) => alpha !== undefined ? `rgba(${r}, ${g}, ${b}, ${alpha})` : `rgb(${r}, ${g}, ${b})`;
 /** Converts hex color value to rgb with optional alpha property. */
 export function hexToRGBA(hex, alpha) {
     let hexStr = hex;
@@ -23,7 +22,16 @@ export function hexToRGBA(hex, alpha) {
     const r = parseInt(hexStr.slice(0, 2), 16);
     const g = parseInt(hexStr.slice(2, 4), 16);
     const b = parseInt(hexStr.slice(4, 6), 16);
-    return buildRGBA(r, g, b, alpha);
+    return alpha !== undefined ? `rgba(${r}, ${g}, ${b}, ${alpha})` : `rgb(${r}, ${g}, ${b})`;
+}
+export function vuiColorToRGBA(color, alpha) {
+    if (!color.includes('.'))
+        return 'transparent';
+    const [colorName, shade] = color.split('.');
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    const x = parseHSL(colors[colorName][shade]);
+    return HSLToRGBA(x.h, x.s, x.l, alpha || shade === 'main' ? 1 : parseInt(shade));
 }
 /** Converts hsl color value to rgb with optional alpha property. */
 export function HSLToRGBA(h, s, l, alpha) {
@@ -64,7 +72,7 @@ export function HSLToRGBA(h, s, l, alpha) {
     r = Math.round((r + m) * 255);
     g = Math.round((g + m) * 255);
     b = Math.round((b + m) * 255);
-    return buildRGBA(r, g, b, alpha);
+    return alpha !== undefined ? `rgba(${r}, ${g}, ${b}, ${alpha})` : `rgb(${r}, ${g}, ${b})`;
 }
 /** Styling to add ellipsis for long texts. */
 export const ellipsisOverflow = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.7.0",
+  "version": "2.8.0-rc.1",
   "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/breadcrumbs/breadcrumbs.tsx

@@ -11,18 +11,29 @@ export const BreadcrumbsBase = styled.divBox`
   display: flex;
   min-width: 0;
   transition-duration: normal;
+
+  .vui-breadcrumbs-item:last-of-type {
+    font-weight: 600;
+  }
 `
 
 /** Breadcrumbs consist of a list of items that help a user visualize a page's location within the hierarchical structure of a website, and allow correspondent navigation. */
 export const Breadcrumbs = vui<'div', BreadcrumbsProps>((props, ref) => {
-  const { children, className, size, ...rest } = props
+  const { children, className, size, variant, ...rest } = props
   const styles = useStyleConfig('Breadcrumbs', props)
-  const context = useMemo(() => filterUndefined({ size }), [size])
+  const context = useMemo(() => filterUndefined({ size, variant }), [size, variant])
   const aliasedProps = filterUndefined<BreadcrumbsProps>({})
   const arrayChildren = Children.toArray(children)
+
   return (
     <BreadcrumbsProvider value={context}>
-      <BreadcrumbsBase className={cs('vui-breadcrumbs', className)} ref={ref} {...styles} {...aliasedProps} {...rest}>
+      <BreadcrumbsBase
+        className={cs('vui-breadcrumbs', className)}
+        ref={ref}
+        {...styles.main}
+        {...aliasedProps}
+        {...rest}
+      >
         {Children.map(arrayChildren, (child, key) => (
           <Fragment key={key}>
             {child}

package/src/breadcrumbs/breadcrumbs.types.ts

@@ -1,7 +1,6 @@
 import { ReactNode } from 'react'
 
 import { BoxProps } from '../box'
-import { IconProp } from '../icon'
 import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
 
@@ -12,8 +11,6 @@ export type BreadcrumbsItemProps = BoxProps & {
   className?: string
   /** Content */
   children?: ReactNode
-  /** Icon */
-  icon?: IconProp
 }
 
 export type BreadcrumbsSeparatorProps = BoxProps & {

package/src/breadcrumbs/breadcrumbsItem.tsx

@@ -2,28 +2,23 @@ import React from 'react'
 
 import { Box } from '../box'
 import { omitThemingProps, useStyleConfig, vui, VuiComponent } from '../core'
-import { Icon } from '../icon'
 import { cs } from '../utils'
 import { BreadcrumbsItemProps } from './breadcrumbs.types'
 import { useBreadcrumbsContext } from './context'
 
 /** A Breadcrumb item. */
 export const BreadcrumbsItem = vui<'div', BreadcrumbsItemProps>((props, ref) => {
-  const { className, children, icon, ...rest } = omitThemingProps(props)
+  const { className, children, ...rest } = omitThemingProps(props)
   const styles = useStyleConfig('Breadcrumbs', useBreadcrumbsContext())
-  const color = rest.color || 'darkBlue.main'
-
   return (
     <Box
       alignItems="center"
       className={cs('vui-breadcrumbs-item', className)}
-      color={color}
       p={0}
       ref={ref}
-      {...rest}
       {...styles.item}
+      {...rest}
     >
-      {!!icon && <Icon name={icon} pathFill={color} size="sm" />}
       {children}
     </Box>
   )

package/src/breadcrumbs/breadcrumbsSeparator.tsx

@@ -1,15 +1,21 @@
 import React from 'react'
 
 import { Box } from '../box'
+import { useStyleConfig } from '../core'
 import { Icon } from '../icon'
 import { cs } from '../utils'
 import { BreadcrumbsSeparatorProps } from './breadcrumbs.types'
+import { useBreadcrumbsContext } from './context'
 
 /** Breadcrumbs separator. */
-export const BreadcrumbsSeparator = ({ className, children, content, ...rest }: BreadcrumbsSeparatorProps) => (
-  <Box alignItems="center" className={cs('vui-breadcrumbs-separator', className)} p={0} {...rest}>
-    {content || children || <Icon name="falAngleRight" pathFill="darkBlue.main" />}
-  </Box>
-)
+export const BreadcrumbsSeparator = ({ className, children, content, ...rest }: BreadcrumbsSeparatorProps) => {
+  const styles = useStyleConfig('Breadcrumbs', useBreadcrumbsContext())
+
+  return (
+    <Box alignItems="center" className={cs('vui-breadcrumbs-separator', className)} p={0} {...rest}>
+      {content || children || <Icon name="falAngleRight" {...styles.separator} />}
+    </Box>
+  )
+}
 
 export default BreadcrumbsSeparator

package/src/breadcrumbs/theme.ts

@@ -1,22 +1,78 @@
 const baseStyle = {}
 
 const defaultProps = {
-  size: 'md'
+  size: 'md',
+  variant: 'dark'
 }
 
 const sizes = {
+  xs: {
+    item: {
+      fontSize: 12,
+      lineHeight: '18px'
+    },
+    separator: {
+      size: 'xs'
+    }
+  },
   sm: {
-    item: {}
+    item: {
+      fontSize: 14,
+      lineHeight: '22px'
+    },
+    separator: {
+      size: 'sm'
+    }
   },
   md: {
-    item: {}
+    item: { fontSize: 16, lineHeight: '26px' },
+    separator: {
+      size: 'md'
+    }
   },
   lg: {
-    item: {}
+    item: { fontSize: 18, lineHeight: '32px' },
+    separator: {
+      size: 'lg'
+    }
   }
 }
 
-const variants = {}
+const variants = {
+  dark: {
+    item: {
+      color: 'seaBlue.main'
+    },
+    main: {
+      bg: 'transparent'
+    },
+    separator: {
+      pathFill: 'sandstone.10'
+    }
+  },
+  white: {
+    item: {
+      color: 'white'
+    },
+    main: {
+      bg: 'darkBlue.main'
+    },
+    separator: {
+      pathFill: 'white'
+    }
+  },
+  light: {
+    item: {
+      color: 'digiGreen.main'
+    },
+    main: {
+      bg: 'darkBlue.main'
+    },
+    separator: {
+      pathFill: 'white'
+    }
+  }
+}
 
 export default {
   baseStyle,

package/src/footer/footer.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 
+import { Box } from '../box'
 import { styled, useDown, useStyleConfig, vui, VuiComponent } from '../core'
 import { Divider } from '../divider'
 import { Link } from '../link'
@@ -26,12 +27,30 @@ export const FooterBase = styled.divBox`
 
 /** Branded Veracity Footer with trademark and links sections. Controls max-width of the content. */
 export const Footer = vui<'div', FooterProps>((props, ref) => {
-  const { children, className, columns, linkedIn, size, variant, isSlim, ...rest } = props
+  const {
+    applicationLinks,
+    applicationStaticItems = [],
+    children,
+    className,
+    columns,
+    isApplication = false,
+    linkedIn,
+    size,
+    variant,
+    isSlim,
+    ...rest
+  } = props
 
   const context = { size, variant }
 
   const styles = useStyleConfig('Footer', props)
 
+  if (isApplication) {
+    if (!applicationLinks) {
+      console.error('Footer: isApplication is true but applicationLinks is not set.')
+    }
+  }
+
   const slimLinks: FooterLinkData[] = [
     {
       id: 'home',
@@ -58,13 +77,61 @@ export const Footer = vui<'div', FooterProps>((props, ref) => {
   return (
     <FooterProvider value={context}>
       <FooterBase
-        className={cs('vui-footer', className)}
+        className={cs('vui-footer', isApplication ? 'vui-footer-app' : '', className)}
+        px={isApplication ? '40px' : 3}
         py={isSlim ? (downMd ? '16px' : '9px') : 5}
         {...styles.container}
         ref={ref}
         {...rest}
       >
-        {isSlim && (
+        {isApplication && (
+          <FooterContent alignContent="center" alignItems="center" maxW="100%">
+            <FooterRow alignContent="space-between" w={1}>
+              <Box
+                alignItems="self-start"
+                columnGap={3}
+                flex={{ xs: '0 0 100%', sm: '0 0 100%', md: '0 0 100%', lg: '0 0 50%' }}
+                py={{ xs: 1, sm: 1, md: 1.25, lg: 1.5 }}
+                wrap
+              >
+                {applicationLinks?.map((link, index) => (
+                  <Box flex={{ xs: '0 0 50%', sm: '0 0 auto' }} key={index} minW={70}>
+                    <FooterLink {...link} />
+                  </Box>
+                ))}
+              </Box>
+              {downLg && <Divider borderColor="sandstone.main" mb={0.5} mt={1} w={1} />}
+              <Box
+                centerV
+                columnGap={3}
+                flex={{ xs: '0 0 100%', sm: '0 0 100%', md: '0 0 100%', lg: '0 0 50%' }}
+                justifyContent={{ sm: 'center', lg: 'flex-end' }}
+                py={{ xs: 1, sm: 1, md: 1.25, lg: 1.5 }}
+                wrap
+              >
+                {applicationStaticItems?.map((text, index) => (
+                  <Box key={index}>
+                    <T size="sm">{text}</T>
+                  </Box>
+                ))}
+                <Box>
+                  <Link
+                    fontWeight="demi"
+                    href={linkedIn ?? defaultLinkedInUrl}
+                    iconLeft={<Link.Icon mr={1} name="cubCircleLinkedIn" radius="50%" size="xs" />}
+                    isExternal
+                    size={{ _: 'sm', md: 'md' }}
+                    {...styles.link}
+                  >
+                    <FooterHeading fontSize="16px" mb={0} text="Follow us" />
+                  </Link>
+                </Box>
+              </Box>
+            </FooterRow>
+          </FooterContent>
+        )}
+
+        {!isApplication && isSlim && (
           <FooterContent alignContent="center" alignItems="center" maxW={{ xs: 343, sm: 305, md: 720, lg: 975 }}>
             <FooterRow>
               {slimLinks.map((link, index) => {
@@ -104,7 +171,7 @@ export const Footer = vui<'div', FooterProps>((props, ref) => {
           </FooterContent>
         )}
 
-        {!isSlim && (
+        {!isApplication && !isSlim && (
           <FooterContent>
             {children ??
               (columns && (

package/src/footer/footer.types.ts

@@ -24,8 +24,11 @@ export type FooterLinkData = {
 export type FooterProps = Omit<BoxProps, 'size' | 'variant'> &
   ThemingProps<'Footer'> &
   Pick<FooterTrademarkProps, 'linkedIn'> & {
+    applicationLinks?: FooterLinkData[]
+    applicationStaticItems?: string[]
     /** Data defining content of multiple columns. */
     columns?: FooterColumnData[]
+    isApplication?: boolean
     isSlim?: boolean
   }