@vectara/vectara-ui 9.2.3 → 9.2.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -30,6 +30,8 @@
|
|
|
30
30
|
font-family: "Roboto Mono", monospace;
|
|
31
31
|
// Ensure PrismJS components wrap their lines.
|
|
32
32
|
word-wrap: break-word !important;
|
|
33
|
+
// Ensure PrismJS components wrap their lines instead of making the container super-wide.
|
|
34
|
+
word-break: break-word !important;
|
|
33
35
|
white-space: pre-wrap !important;
|
|
34
36
|
font-size: $fontSizeSmall !important;
|
|
35
37
|
color: $colorDarkShade !important;
|
|
@@ -40,7 +40,7 @@ export const VuiStep = ({ title, status = "incomplete", subTitle, onClick, stepN
|
|
|
40
40
|
};
|
|
41
41
|
const stepContent = (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ className: "vuiSteps__circleWrapper" }, { children: _jsx("div", Object.assign({ className: numberClasses }, { children: stepNode })) })), _jsx("div", Object.assign({ className: "vuiSteps__contentWrapper" }, { children: _jsx(VuiFlexContainer, Object.assign({ direction: "column", alignItems: "center", spacing: "xs" }, { children: _jsxs(VuiFlexItem, Object.assign({ grow: false }, { children: [_jsx(VuiText, Object.assign({ size: "s", className: titleClasses }, { children: _jsx("div", Object.assign({ className: "vuiStep__titleText" }, { children: title })) })), subTitle && _jsx("div", Object.assign({ className: subTitleClasses }, { children: subTitle }))] })) })) }))] }));
|
|
42
42
|
if (isClickable) {
|
|
43
|
-
return (_jsx("button", Object.assign({ className: stepContainerClasses, onKeyDown: handleKeyDown, onClick: handleClick, type: "button", "aria-current": status === "current" ? "step" : undefined, "data-testid": dataTestId }, { children: stepContent })));
|
|
43
|
+
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 })));
|
|
44
44
|
}
|
|
45
45
|
return (_jsx("div", Object.assign({ className: stepContainerClasses, "aria-current": status === "current" ? "step" : undefined }, { children: stepContent })));
|
|
46
46
|
};
|
|
@@ -5,5 +5,6 @@ type Props = {
|
|
|
5
5
|
steps: VuiStepProps[];
|
|
6
6
|
className?: string;
|
|
7
7
|
size?: StepSize;
|
|
8
|
+
"data-testid"?: string;
|
|
8
9
|
};
|
|
9
|
-
export declare const VuiSteps: ({ steps, className, size, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare const VuiSteps: ({ steps, className, size, "data-testid": dataTestId, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -25,13 +25,13 @@ const statusToColor = {
|
|
|
25
25
|
loading: "accent"
|
|
26
26
|
};
|
|
27
27
|
export const VuiSteps = (_a) => {
|
|
28
|
-
var { steps, className, size = "s" } = _a, rest = __rest(_a, ["steps", "className", "size"]);
|
|
28
|
+
var { steps, className, size = "s", "data-testid": dataTestId } = _a, rest = __rest(_a, ["steps", "className", "size", "data-testid"]);
|
|
29
29
|
const classes = classNames("vuiSteps", className, {
|
|
30
30
|
[`vuiSteps--${size}`]: size
|
|
31
31
|
});
|
|
32
32
|
const totalSteps = steps.length;
|
|
33
33
|
const currentStepIndex = steps.findIndex((step) => step.status === "current");
|
|
34
|
-
return (_jsx("div", Object.assign({ className: classes }, rest, { children: _jsx("div", Object.assign({ className: "vuiSteps__container" }, { children: steps.map((step, index) => {
|
|
34
|
+
return (_jsx("div", Object.assign({ className: classes, "data-testid": dataTestId }, rest, { children: _jsx("div", Object.assign({ className: "vuiSteps__container" }, { children: steps.map((step, index) => {
|
|
35
35
|
var _a, _b, _c;
|
|
36
36
|
const isFirstStep = index === 0;
|
|
37
37
|
const isLastStep = index === totalSteps - 1;
|
|
@@ -42,6 +42,6 @@ export const VuiSteps = (_a) => {
|
|
|
42
42
|
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);
|
|
43
43
|
return (_jsxs("div", Object.assign({ className: stepContainerClasses }, { children: [!isLastStep && (_jsx("div", { className: classNames("vuiSteps__connector", {
|
|
44
44
|
"vuiSteps__connector--complete": index < currentStepIndex
|
|
45
|
-
}) })), _jsx(VuiStep, { title: step.title, status: step.status, onClick: step.onClick, 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));
|
|
45
|
+
}) })), _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));
|
|
46
46
|
}) })) })));
|
|
47
47
|
};
|
package/lib/styles/index.css
CHANGED
|
@@ -1345,6 +1345,7 @@ fieldset {
|
|
|
1345
1345
|
color: #1c1d22;
|
|
1346
1346
|
font-family: "Roboto Mono", monospace;
|
|
1347
1347
|
word-wrap: break-word !important;
|
|
1348
|
+
word-break: break-word !important;
|
|
1348
1349
|
white-space: pre-wrap !important;
|
|
1349
1350
|
font-size: 12px !important;
|
|
1350
1351
|
color: #3f4551 !important;
|