@vectara/vectara-ui 9.2.2 → 9.2.4
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.
|
@@ -3,5 +3,6 @@ import { Props as OptionsListProps } from "../optionsList/OptionsList";
|
|
|
3
3
|
import { Props as PopoverProps } from "../popover/Popover";
|
|
4
4
|
export type Props = Pick<PopoverProps, "isOpen" | "setIsOpen" | "onClickButton"> & Pick<OptionsListProps<any>, "options" | "onSelectOption"> & Pick<ButtonPrimaryProps, "children" | "icon" | "color" | "size" | "className" | "fullWidth" | "onClick" | "href" | "track"> & {
|
|
5
5
|
type?: "primary" | "secondary";
|
|
6
|
+
"data-testid"?: string;
|
|
6
7
|
};
|
|
7
|
-
export declare const VuiOptionsButton: ({ type, isOpen, setIsOpen, onClickButton, children, icon, color, size, className, fullWidth, onSelectOption, options, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
export declare const VuiOptionsButton: ({ type, isOpen, setIsOpen, onClickButton, children, icon, color, size, className, fullWidth, onSelectOption, options, "data-testid": testId, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -19,7 +19,7 @@ import { VuiIcon } from "../icon/Icon";
|
|
|
19
19
|
import { VuiPopover } from "../popover/Popover";
|
|
20
20
|
import { VuiButtonSecondary } from "../button/ButtonSecondary";
|
|
21
21
|
export const VuiOptionsButton = (_a) => {
|
|
22
|
-
var { type = "primary", isOpen, setIsOpen, onClickButton, children, icon, color, size, className, fullWidth, onSelectOption, options } = _a, rest = __rest(_a, ["type", "isOpen", "setIsOpen", "onClickButton", "children", "icon", "color", "size", "className", "fullWidth", "onSelectOption", "options"]);
|
|
22
|
+
var { type = "primary", isOpen, setIsOpen, onClickButton, children, icon, color, size, className, fullWidth, onSelectOption, options, "data-testid": testId } = _a, rest = __rest(_a, ["type", "isOpen", "setIsOpen", "onClickButton", "children", "icon", "color", "size", "className", "fullWidth", "onSelectOption", "options", "data-testid"]);
|
|
23
23
|
const Button = type === "primary" ? VuiButtonPrimary : VuiButtonSecondary;
|
|
24
|
-
return (_jsxs(VuiFlexContainer, Object.assign({ spacing: "none", alignItems: "center", className: className }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(Button, Object.assign({ icon: icon, color: color, size: size, className: "vuiOptionsButtonLeft", fullWidth: fullWidth }, rest, { children: children })) })), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiPopover, Object.assign({ isOpen: isOpen, setIsOpen: () => setIsOpen(!isOpen), onClickButton: onClickButton, button: _jsx(Button, { color: color, size: size, className: `vuiOptionsButtonRight vuiOptionsButtonRight--${color}`, isSelected: isOpen, icon: _jsx(VuiIcon, { children: _jsx(BiCaretDown, {}) }) }) }, { children: _jsx(VuiOptionsList, { onSelectOption: onSelectOption, options: options }) })) }))] })));
|
|
24
|
+
return (_jsxs(VuiFlexContainer, Object.assign({ spacing: "none", alignItems: "center", className: className }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(Button, Object.assign({ icon: icon, color: color, size: size, className: "vuiOptionsButtonLeft", fullWidth: fullWidth, "data-testid": testId }, rest, { children: children })) })), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiPopover, Object.assign({ isOpen: isOpen, setIsOpen: () => setIsOpen(!isOpen), onClickButton: onClickButton, button: _jsx(Button, { color: color, size: size, className: `vuiOptionsButtonRight vuiOptionsButtonRight--${color}`, "data-testid": `${testId}-options`, isSelected: isOpen, icon: _jsx(VuiIcon, { children: _jsx(BiCaretDown, {}) }) }) }, { children: _jsx(VuiOptionsList, { onSelectOption: onSelectOption, options: options }) })) }))] })));
|
|
25
25
|
};
|
|
@@ -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
|
};
|