@vectara/vectara-ui 9.2.6 → 9.3.1

package/lib/components/steps/Step.js

@@ -42,5 +42,5 @@ export const VuiStep = ({ title, status = "incomplete", subTitle, onClick, stepN
     if (isClickable) {
         return (_jsx("button", Object.assign({ className: stepContainerClasses, onKeyDown: handleKeyDown, onClick: handleClick, type: "button", "aria-current": status === "current" ? "step" : undefined, "data-testid": dataTestId, "data-status": status }, { children: stepContent })));
     }
-    return (_jsx("div", Object.assign({ className: stepContainerClasses, "aria-current": status === "current" ? "step" : undefined }, { children: stepContent })));
+    return (_jsx("div", Object.assign({ className: stepContainerClasses, "aria-current": status === "current" ? "step" : undefined, "data-testid": dataTestId }, { children: stepContent })));
 };

package/lib/components/steps/Steps.js

@@ -32,7 +32,7 @@ export const VuiSteps = (_a) => {
     const totalSteps = steps.length;
     const currentStepIndex = steps.findIndex((step) => step.status === "current");
     return (_jsx("div", Object.assign({ className: classes, "data-testid": dataTestId }, rest, { children: _jsx("div", Object.assign({ className: "vuiSteps__container" }, { children: steps.map((step, index) => {
-                var _a, _b, _c;
+                var _a, _b, _c, _d;
                 const isFirstStep = index === 0;
                 const isLastStep = index === totalSteps - 1;
                 const stepContainerClasses = classNames("vuiSteps__stepContainer", {
@@ -42,6 +42,6 @@ export const VuiSteps = (_a) => {
                 const icon = (_a = step.icon) !== null && _a !== void 0 ? _a : (step.status === "complete" ? (_jsx(BiCheck, {})) : step.status === "danger" ? (_jsx(BiError, {})) : step.status === "warning" ? (_jsx(BiSolidHand, {})) : null);
                 return (_jsxs("div", Object.assign({ className: stepContainerClasses }, { children: [!isLastStep && (_jsx("div", { className: classNames("vuiSteps__connector", {
                                 "vuiSteps__connector--complete": index < currentStepIndex
-                            }) })), _jsx(VuiStep, { title: step.title, status: step.status, onClick: step.onClick, "data-testid": `${dataTestId}-step-${index}`, stepNode: step.status === "loading" ? (_jsx("div", { children: _jsx(VuiSpinner, {}) })) : icon ? (_jsx(VuiIcon, Object.assign({ color: statusToColor[(_b = step.status) !== null && _b !== void 0 ? _b : "incomplete"], size: size === "xs" ? undefined : size }, { children: icon }))) : size === "xs" ? null : (_jsx("span", Object.assign({ className: "vuiStep__numberText" }, { children: (_c = step.value) !== null && _c !== void 0 ? _c : index + 1 }))), size: size, subTitle: step.subTitle })] }), index));
+                            }) })), _jsx(VuiStep, { title: step.title, status: step.status, onClick: step.onClick, "data-testid": (_b = step["data-testid"]) !== null && _b !== void 0 ? _b : `${dataTestId}-step-${index}`, stepNode: step.status === "loading" ? (_jsx("div", { children: _jsx(VuiSpinner, {}) })) : icon ? (_jsx(VuiIcon, Object.assign({ color: statusToColor[(_c = step.status) !== null && _c !== void 0 ? _c : "incomplete"], size: size === "xs" ? undefined : size }, { children: icon }))) : size === "xs" ? null : (_jsx("span", Object.assign({ className: "vuiStep__numberText" }, { children: (_d = step.value) !== null && _d !== void 0 ? _d : index + 1 }))), size: size, subTitle: step.subTitle })] }), index));
             }) })) })));
 };

package/lib/components/timeline/Timeline.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 type Props = {
     children: React.ReactNode;
+    spacing?: "none" | "s" | "m" | "l";
 };
-export declare const VuiTimeline: ({ children }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiTimeline: ({ children, spacing }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/timeline/Timeline.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import classNames from "classnames";
 import React from "react";
-export const VuiTimeline = ({ children }) => {
+export const VuiTimeline = ({ children, spacing = "m" }) => {
     const childrenCount = React.Children.count(children);
     const wrappedChildren = React.Children.map(children, (child, index) => {
         const isLast = index === childrenCount - 1;
-        const classes = classNames("vuiTimelineContainer", { "vuiTimelineContainer--bordered": !isLast });
+        const classes = classNames("vuiTimelineContainer", `vuiTimelineContainer--spacing-${spacing}`, {
+            "vuiTimelineContainer--bordered": !isLast
+        });
         return _jsx("div", Object.assign({ className: classes }, { children: child }));
     });
     return _jsx(_Fragment, { children: wrappedChildren });

package/lib/components/timeline/_index.scss

@@ -3,9 +3,24 @@ $iconWidth: 36px;
 .vuiTimelineContainer {
   margin-left: $iconWidth;
   border-left: 1px solid transparent;
+}
+
+.vuiTimelineContainer--spacing-none {
+  padding-bottom: 0;
+}
+
+.vuiTimelineContainer--spacing-s {
+  padding-bottom: $sizeS;
+}
+
+.vuiTimelineContainer--spacing-m {
   padding-bottom: $sizeM;
 }
 
+.vuiTimelineContainer--spacing-l {
+  padding-bottom: $sizeL;
+}
+
 .vuiTimelineContainer--bordered {
   border-left: 2px solid $borderColorLight;
 }

package/lib/styles/index.css

@@ -4342,9 +4342,24 @@ h2.react-datepicker__current-month {
 .vuiTimelineContainer {
   margin-left: 36px;
   border-left: 1px solid transparent;
+}
+
+.vuiTimelineContainer--spacing-none {
+  padding-bottom: 0;
+}
+
+.vuiTimelineContainer--spacing-s {
+  padding-bottom: 12px;
+}
+
+.vuiTimelineContainer--spacing-m {
   padding-bottom: 16px;
 }
 
+.vuiTimelineContainer--spacing-l {
+  padding-bottom: 24px;
+}
+
 .vuiTimelineContainer--bordered {
   border-left: 2px solid #e3e4f3;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "9.2.6",
+  "version": "9.3.1",
   "homepage": "./",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",