qlu-20-ui-library 1.7.3 → 1.7.5

package/dist/types/components/SearchFilterSideDrawer/SaveSearch/index.js

@@ -2,8 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ClickableText, EllipsisText, GetSvgIcon, Loader, Tooltip, } from "../..";
 import SearchTimer from "./SearchTimer";
 import "./style.scss";
-const SavedSearches = ({ titles, isLoading = false, onTitleClick = () => { }, onDeleteClick = () => { }, remainingTime = 0, showMore = false, handleMoreClick = () => { }, isDisabled = false, handleBack = () => { }, }) => {
-    const shouldShowTimer = (title) => (title.searchType === "nameGen" || title.searchType === "external" || title.searchType === "massUpdate") &&
+const SavedSearches = ({ titles, isLoading = false, onTitleClick = () => { }, onDeleteClick = () => { }, remainingTime = 0, showMore = false, handleMoreClick = () => { }, isDisabled = false, handleBack = () => { }, dataCy, }) => {
+    const shouldShowTimer = (title) => (title.searchType === "nameGen" ||
+        title.searchType === "external" ||
+        title.searchType === "massUpdate") &&
         !title.isCompleted;
     const handleTitleClick = (title) => (_event) => {
         onTitleClick(title);
@@ -11,7 +13,8 @@ const SavedSearches = ({ titles, isLoading = false, onTitleClick = () => { }, on
     const handleDeleteClick = (title) => (_event) => {
         onDeleteClick(title);
     };
-    return (_jsxs("div", { className: "savedSearches", children: [_jsxs("div", { children: [_jsxs("div", { children: [_jsx("button", { type: "button", onClick: handleBack, children: _jsx(GetSvgIcon, { iconType: "chevronLeft", iconSize: "24" }) }), _jsx("h3", { children: "Saved Searches" })] }), _jsxs("div", { children: [titles.map((title, index) => (_jsxs("div", { children: [_jsxs("div", { children: [_jsxs("button", { type: "button", className: "btn-Title", onClick: handleTitleClick(title), children: [title.searchType === "external" && (_jsx(Tooltip, { toolTipPosition: "bottom", content: "Search More", children: _jsx(GetSvgIcon, { iconType: "globeSearch", iconSize: "24" }) })), title.searchType === "massUpdate" && (_jsx(Tooltip, { toolTipPosition: "bottom", content: "Mass Update", children: _jsx(GetSvgIcon, { iconType: "refresh", iconSize: "24" }) })), title.searchType === "nameGen" && (_jsx(Tooltip, { toolTipPosition: "bottom", content: "Search Builder", children: _jsx(GetSvgIcon, { iconType: "sparkles", iconSize: "24" }) })), title.searchType !== "nameGen" &&
-                                                        title.searchType !== "external" && title.searchType !== "massUpdate" && (_jsx(Tooltip, { toolTipPosition: "bottom", content: "Basic Search", children: _jsx(GetSvgIcon, { iconType: "search", iconSize: "24" }) })), _jsx(EllipsisText, { toolTipPosition: "bottom", maxWidth: `${shouldShowTimer(title) || title.isLoading ? 208 : 264}px`, children: title.name }), shouldShowTimer(title) && (_jsx(SearchTimer, { remainingTime: remainingTime ?? 0 }))] }), title.isLoading && _jsx(Loader, { width: "18", height: "18" })] }), _jsx("button", { type: "button", className: "btn-Delete", onClick: handleDeleteClick(title), children: _jsx(GetSvgIcon, { iconType: "delete", iconSize: "18" }) })] }, index))), isLoading && (_jsx("span", { className: "loader", children: _jsx(Loader, { width: "20", height: "20" }) })), _jsx("div", { className: "loadMore", children: showMore && (_jsx(ClickableText, { text: "Load More", colorVariant: "gray", onClick: handleMoreClick, disabled: isDisabled, sizeVariant: "sm" })) })] })] }), _jsx("div", { className: "resultWrapper", children: _jsx(ClickableText, { text: "Back to results", colorVariant: "orange", onClick: handleBack, disabled: isDisabled, sizeVariant: "base" }) })] }));
+    return (_jsxs("div", { className: "savedSearches", children: [_jsxs("div", { children: [_jsxs("div", { children: [_jsx("button", { type: "button", onClick: handleBack, "data-cy": `${dataCy}-back-arrow`, children: _jsx(GetSvgIcon, { iconType: "chevronLeft", iconSize: "24" }) }), _jsx("h3", { children: "Saved Searches" })] }), _jsxs("div", { children: [titles.map((title, index) => (_jsxs("div", { children: [_jsxs("div", { children: [_jsxs("button", { type: "button", className: "btn-Title", onClick: handleTitleClick(title), "data-cy": `${dataCy}-select`, children: [title.searchType === "external" && (_jsx(Tooltip, { toolTipPosition: "bottom", content: "Search More", children: _jsx(GetSvgIcon, { iconType: "globeSearch", iconSize: "24" }) })), title.searchType === "massUpdate" && (_jsx(Tooltip, { toolTipPosition: "bottom", content: "Mass Update", children: _jsx(GetSvgIcon, { iconType: "refresh", iconSize: "24" }) })), title.searchType === "nameGen" && (_jsx(Tooltip, { toolTipPosition: "bottom", content: "Search Builder", children: _jsx(GetSvgIcon, { iconType: "sparkles", iconSize: "24" }) })), title.searchType !== "nameGen" &&
+                                                        title.searchType !== "external" &&
+                                                        title.searchType !== "massUpdate" && (_jsx(Tooltip, { toolTipPosition: "bottom", content: "Basic Search", children: _jsx(GetSvgIcon, { iconType: "search", iconSize: "24" }) })), _jsx(EllipsisText, { toolTipPosition: "bottom", maxWidth: `${shouldShowTimer(title) || title.isLoading ? 208 : 264}px`, children: title.name }), shouldShowTimer(title) && (_jsx(SearchTimer, { remainingTime: remainingTime ?? 0 }))] }), title.isLoading && _jsx(Loader, { width: "18", height: "18" })] }), _jsx("button", { type: "button", className: "btn-Delete", onClick: handleDeleteClick(title), "data-cy": `${dataCy}-delete`, children: _jsx(GetSvgIcon, { iconType: "delete", iconSize: "18" }) })] }, index))), isLoading && (_jsx("span", { className: "loader", children: _jsx(Loader, { width: "20", height: "20" }) })), _jsx("div", { className: "loadMore", children: showMore && (_jsx(ClickableText, { text: "Load More", colorVariant: "gray", onClick: handleMoreClick, disabled: isDisabled, sizeVariant: "sm", dataCy: `${dataCy}-load-more` })) })] })] }), _jsx("div", { className: "resultWrapper", children: _jsx(ClickableText, { text: "Back to results", colorVariant: "orange", onClick: handleBack, disabled: isDisabled, sizeVariant: "base", dataCy: `${dataCy}-back` }) })] }));
 };
 export default SavedSearches;

package/dist/types/components/Select/index.d.ts

@@ -17,11 +17,12 @@ type SelectProps = {
     className?: string;
     containerStyles?: React.CSSProperties;
     renderContent?: () => ReactNode;
+    dataCy?: string;
 };
 export declare const SelectContext: React.Context<{
     value: string;
     onChange: (value: string) => void;
     setShowMenu: (value: boolean) => void;
 }>;
-declare function Select({ value, onChange, children, iconType, disabled, menuPosition, showIconRight, showIconLeft, iconSizeLeft, iconSizeRight, colorStyling, maxWidth, className, containerStyles, renderContent, }: SelectProps): import("react/jsx-runtime").JSX.Element;
+declare function Select({ value, onChange, children, iconType, disabled, menuPosition, showIconRight, showIconLeft, iconSizeLeft, iconSizeRight, colorStyling, maxWidth, className, containerStyles, renderContent, dataCy, }: SelectProps): import("react/jsx-runtime").JSX.Element;
 export default Select;

package/dist/types/components/Select/index.js

@@ -4,7 +4,7 @@ import { GetSvgIcon } from "..";
 import "./style.scss";
 import clsx from "clsx";
 export const SelectContext = createContext({ value: "", onChange: () => { }, setShowMenu: () => { } });
-function Select({ value, onChange, children, iconType = "bell", disabled = false, menuPosition = "left", showIconRight = false, showIconLeft = false, iconSizeLeft = "16", iconSizeRight = "16", colorStyling = "gray", maxWidth = "200px", className, containerStyles = {}, renderContent, }) {
+function Select({ value, onChange, children, iconType = "bell", disabled = false, menuPosition = "left", showIconRight = false, showIconLeft = false, iconSizeLeft = "16", iconSizeRight = "16", colorStyling = "gray", maxWidth = "200px", className, containerStyles = {}, renderContent, dataCy, }) {
     // ================================== children validation ================================== //
     React.Children.forEach(children, (child) => {
         if (React.isValidElement(child)) {
@@ -56,7 +56,7 @@ function Select({ value, onChange, children, iconType = "bell", disabled = false
     const toggleMenuShow = () => {
         setShowMenu((prevState) => !prevState);
     };
-    return (_jsxs("div", { style: { ...containerStyles }, className: `${containerCLSX}`, children: [_jsxs("button", { type: "button", className: buttonClassName, onClick: toggleMenuShow, ref: dropContainerRef, disabled: disabled, children: [showIconLeft && (_jsx("div", { className: "leftIcon", children: _jsx(GetSvgIcon, { iconType: iconType, iconSize: iconSizeLeft }) })), _jsx("span", { style: {
+    return (_jsxs("div", { style: { ...containerStyles }, className: `${containerCLSX}`, children: [_jsxs("button", { type: "button", className: buttonClassName, onClick: toggleMenuShow, ref: dropContainerRef, disabled: disabled, "data-cy": dataCy, children: [showIconLeft && (_jsx("div", { className: "leftIcon", children: _jsx(GetSvgIcon, { iconType: iconType, iconSize: iconSizeLeft }) })), _jsx("span", { style: {
                             textOverflow: "ellipsis",
                             maxWidth: maxWidth,
                             marginRight: "24px",

package/dist/types/components/SelectDropDown/index.d.ts

@@ -8,7 +8,8 @@ interface SelectDropDown {
     isAllSelected: boolean;
     isDisabled?: boolean;
     tooltipContent?: string;
+    dataCy?: string;
     hideSelectedText?: boolean;
 }
-declare const SelectDropDown: ({ onApplyClick, selectedCount, showCancel, onCancelClick, totalCount, isAllSelected, isDisabled, tooltipContent, hideSelectedText, }: SelectDropDown) => import("react/jsx-runtime").JSX.Element;
+declare const SelectDropDown: ({ onApplyClick, selectedCount, showCancel, onCancelClick, totalCount, isAllSelected, isDisabled, tooltipContent, dataCy, hideSelectedText, }: SelectDropDown) => import("react/jsx-runtime").JSX.Element;
 export default SelectDropDown;

package/dist/types/components/SelectDropDown/index.js

@@ -5,7 +5,7 @@ import "./style.scss";
 import SearchCheckboxComponent from "../SearchCheckboxComponent";
 import { v4 as uuidv4 } from "uuid";
 import clsx from "clsx";
-const SelectDropDown = ({ onApplyClick, selectedCount = 0, showCancel = true, onCancelClick = () => false, totalCount = 10, isAllSelected, isDisabled, tooltipContent, hideSelectedText = false, }) => {
+const SelectDropDown = ({ onApplyClick, selectedCount = 0, showCancel = true, onCancelClick = () => false, totalCount = 10, isAllSelected, isDisabled, tooltipContent, dataCy, hideSelectedText = false, }) => {
     const [listShow, setListShow] = useState(false);
     const [topRange, setTopRange] = useState(selectedCount);
     const dropdownRef = useRef(null);
@@ -70,6 +70,6 @@ const SelectDropDown = ({ onApplyClick, selectedCount = 0, showCancel = true, on
         "selectDropDown--dropdown-list-show": listShow,
         "selectDropDown--dropdown-list-hide": !listShow,
     });
-    return (_jsx(Tooltip, { content: tooltipContent, toolTipPosition: "top", isDisabled: !tooltipContent, children: _jsx("div", { className: "selectDropDown--container", children: _jsxs("span", { className: "selectDropDown--dropdown", children: [_jsxs("button", { onClick: toggleListShow, disabled: isDisabled, className: "selectDropDown--btn--dropdown", ref: selectContainerRef, children: [_jsx(SearchCheckboxComponent, { sizeVariant: "base", checked: false, onClick: handleCheckboxClick, isAllSelected: isAllSelected, isSubsetSelected: !isAllSelected && selectedCount > 0, isDisabled: isDisabled }), selectedCount > 0 && (_jsxs("p", { children: [selectedCount, " ", !hideSelectedText && "selected"] })), _jsx("span", { children: _jsx(GetSvgIcon, { iconType: "arrowDown", iconSize: "16" }) })] }), _jsx("dialog", { id: uuidv4(), ref: dropdownRef, className: "dropdownContainer", children: _jsxs("ul", { className: dropDownListClassName, children: [_jsx("li", { onClick: handleSelectAllClick, children: "Select All" }), _jsxs("li", { children: ["Select Top", _jsx("span", { className: "space", children: listShow && (_jsx(NumberInputField, { initialNumber: String(topRange), handleChange: handleChange, props: { style: { width: "70px", maxWidth: "70px" } } })) })] }), _jsx("span", { className: "apply", children: _jsx(PrimaryButton, { text: "Apply", colorVariant: "orange", onClick: handleApply, isDisabled: topRange < 0 }) }), showCancel && (_jsx("span", { className: "cancel", children: _jsx(TertiaryButton, { text: "Clear Selection", onClick: handleCancel }) }))] }) })] }) }) }));
+    return (_jsx(Tooltip, { content: tooltipContent, toolTipPosition: "top", isDisabled: !tooltipContent, children: _jsx("div", { className: "selectDropDown--container", "data-cy": dataCy, children: _jsxs("span", { className: "selectDropDown--dropdown", children: [_jsxs("button", { onClick: toggleListShow, disabled: isDisabled, className: "selectDropDown--btn--dropdown", ref: selectContainerRef, children: [_jsx(SearchCheckboxComponent, { sizeVariant: "base", checked: false, onClick: handleCheckboxClick, isAllSelected: isAllSelected, isSubsetSelected: !isAllSelected && selectedCount > 0, isDisabled: isDisabled }), selectedCount > 0 && (_jsxs("p", { children: [selectedCount, " ", !hideSelectedText && "selected"] })), _jsx("span", { children: _jsx(GetSvgIcon, { iconType: "arrowDown", iconSize: "16" }) })] }), _jsx("dialog", { id: uuidv4(), ref: dropdownRef, className: "dropdownContainer", children: _jsxs("ul", { className: dropDownListClassName, children: [_jsx("li", { onClick: handleSelectAllClick, "data-cy": `${dataCy}-select-all`, children: "Select All" }), _jsxs("li", { children: ["Select Top", _jsx("span", { className: "space", children: listShow && (_jsx(NumberInputField, { initialNumber: String(topRange), handleChange: handleChange, props: { style: { width: "70px", maxWidth: "70px" } }, dataCy: `${dataCy}-input` })) })] }), _jsx("span", { className: "apply", children: _jsx(PrimaryButton, { text: "Apply", colorVariant: "orange", onClick: handleApply, isDisabled: topRange < 0, dataCy: `${dataCy}-apply` }) }), showCancel && (_jsx("span", { className: "cancel", children: _jsx(TertiaryButton, { text: "Clear Selection", onClick: handleCancel, dataCy: `${dataCy}-clear-selection` }) }))] }) })] }) }) }));
 };
 export default SelectDropDown;

package/dist/types/components/SelectItem/index.d.ts

@@ -1,9 +1,10 @@
 import { ComponentPropsWithoutRef, ReactNode } from "react";
 import "./style.scss";
-type SelectItemProps = ComponentPropsWithoutRef<'button'> & {
+type SelectItemProps = ComponentPropsWithoutRef<"button"> & {
     itemValue: string;
     children?: ReactNode;
     className?: string;
+    dataCy?: string;
 };
-declare function SelectItem({ itemValue, children, className, ...props }: SelectItemProps): import("react/jsx-runtime").JSX.Element;
+declare function SelectItem({ itemValue, children, className, dataCy, ...props }: SelectItemProps): import("react/jsx-runtime").JSX.Element;
 export default SelectItem;

package/dist/types/components/SelectItem/index.js

@@ -3,11 +3,11 @@ import { useContext } from "react";
 import { SelectContext } from "../Select";
 import "./style.scss";
 import clsx from "clsx";
-function SelectItem({ itemValue, children, className = "", ...props }) {
+function SelectItem({ itemValue, children, className = "", dataCy, ...props }) {
     const { onChange, setShowMenu, value } = useContext(SelectContext);
     const areValuesEqual = itemValue === value;
     const selectItemCLSX = clsx({
-        "selectItemDropdown": true,
+        selectItemDropdown: true,
         "selectItemDropdown-Active": areValuesEqual,
         "selectItemDropdown-NonActive": !areValuesEqual,
         [`${className}`]: true,
@@ -18,7 +18,7 @@ function SelectItem({ itemValue, children, className = "", ...props }) {
         }
         setShowMenu(false);
     };
-    return (_jsx("button", { className: selectItemCLSX, onClick: optionClick, ...props, children: children || itemValue }));
+    return (_jsx("button", { className: selectItemCLSX, onClick: optionClick, "data-cy": dataCy, ...props, children: children || itemValue }));
 }
 Object.defineProperty(SelectItem, "selectItemComponent", {
     value: true,

package/dist/types/components/SelectablePill/index.d.ts

@@ -12,6 +12,7 @@ type SelectablePillProps = ComponentPropsWithRef<"button"> & {
     onEnter?: () => void;
     onLeave?: () => void;
     isDisabled?: boolean;
+    dataCy?: string;
 };
-declare const SelectablePill: ({ id, text, onSelect, onExclude, variant, highlight, onEnter, onLeave, isDisabled, iconPath, ...props }: SelectablePillProps) => import("react/jsx-runtime").JSX.Element;
+declare const SelectablePill: ({ id, text, onSelect, onExclude, variant, highlight, onEnter, onLeave, isDisabled, iconPath, dataCy, ...props }: SelectablePillProps) => import("react/jsx-runtime").JSX.Element;
 export default SelectablePill;

package/dist/types/components/SelectablePill/index.js

@@ -5,7 +5,7 @@ import GetSvgIcon from "../GetSvgIcon";
 import CircularIcon from "../CircularIcon";
 import EllipsisText from "../EllipsisText";
 import Tooltip from "../Tooltip";
-const SelectablePill = ({ id, text, onSelect, onExclude, variant = "unselected", highlight = false, onEnter = () => { }, onLeave = () => { }, isDisabled = false, iconPath, ...props }) => {
+const SelectablePill = ({ id, text, onSelect, onExclude, variant = "unselected", highlight = false, onEnter = () => { }, onLeave = () => { }, isDisabled = false, iconPath, dataCy, ...props }) => {
     const className = clsx({
         "selectablePill--Generic": true,
         "selectablePill--Selected": variant === "selected",
@@ -22,9 +22,9 @@ const SelectablePill = ({ id, text, onSelect, onExclude, variant = "unselected",
         "selectablePill--Exclude": true,
         "selectablePill--ExcludeSelected": variant === "excluded",
     });
-    return (_jsxs("button", { id: id, disabled: isDisabled, className: className, ...props, onMouseEnter: onEnter, onMouseLeave: onLeave, onClick: onSelect, children: [!!iconPath && (_jsx("span", { className: "selectablePill--logoSVG", children: _jsx(CircularIcon, { iconSize: "24", errorImageContainerSize: "34", iconPath: iconPath, altImageType: "company" }) })), _jsx(EllipsisText, { maxWidth: "330px", toolTipPosition: "bottom", children: text }), _jsxs("div", { className: "selectablePill--ActionButton", children: [_jsx(Tooltip, { content: "Include", children: _jsx("button", { className: includeButton, children: _jsx(GetSvgIcon, { iconType: "tick", iconSize: "24" }) }) }), _jsx(Tooltip, { content: "Exclude", children: _jsx("button", { className: excludeButton, onClick: (e) => {
+    return (_jsxs("button", { id: id, disabled: isDisabled, className: className, ...props, onMouseEnter: onEnter, onMouseLeave: onLeave, onClick: onSelect, "data-cy": dataCy, children: [!!iconPath && (_jsx("span", { className: "selectablePill--logoSVG", children: _jsx(CircularIcon, { iconSize: "24", errorImageContainerSize: "34", iconPath: iconPath, altImageType: "company" }) })), _jsx(EllipsisText, { maxWidth: "330px", toolTipPosition: "bottom", children: text }), _jsxs("div", { className: "selectablePill--ActionButton", children: [_jsx(Tooltip, { content: "Include", children: _jsx("button", { className: includeButton, "data-cy": `${dataCy}-include`, children: _jsx(GetSvgIcon, { iconType: "tick", iconSize: "24" }) }) }), _jsx(Tooltip, { content: "Exclude", children: _jsx("button", { className: excludeButton, onClick: (e) => {
                                 e.stopPropagation();
                                 onExclude(e);
-                            }, children: _jsx(GetSvgIcon, { iconType: "notAllowed", iconSize: "24" }) }) })] })] }));
+                            }, "data-cy": `${dataCy}-exclude`, children: _jsx(GetSvgIcon, { iconType: "notAllowed", iconSize: "24" }) }) })] })] }));
 };
 export default SelectablePill;

package/dist/types/components/Svg/Box.d.ts

@@ -0,0 +1,6 @@
+interface BoxProps {
+    width?: string;
+    height?: string;
+}
+declare const Box: ({ width, height }: BoxProps) => import("react/jsx-runtime").JSX.Element;
+export default Box;

package/dist/types/components/Svg/Box.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Box = ({ width = "20", height = "20" }) => {
+    return (_jsxs("svg", { width: width, height: height, viewBox: "0 0 18 18", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsxs("g", { "clip-path": "url(#clip0_15980_26871)", children: [_jsx("path", { d: "M15.75 11.9999V5.99987C15.7497 5.73682 15.6803 5.47847 15.5487 5.25074C15.417 5.023 15.2278 4.83389 15 4.70237L9.75 1.70237C9.52197 1.57071 9.2633 1.5014 9 1.5014C8.7367 1.5014 8.47803 1.57071 8.25 1.70237L3 4.70237C2.7722 4.83389 2.58299 5.023 2.45135 5.25074C2.31971 5.47847 2.25027 5.73682 2.25 5.99987V11.9999C2.25027 12.2629 2.31971 12.5213 2.45135 12.749C2.58299 12.9767 2.7722 13.1658 3 13.2974L8.25 16.2974C8.47803 16.429 8.7367 16.4983 9 16.4983C9.2633 16.4983 9.52197 16.429 9.75 16.2974L15 13.2974C15.2278 13.1658 15.417 12.9767 15.5487 12.749C15.6803 12.5213 15.7497 12.2629 15.75 11.9999Z", stroke: "#ADADAD", "stroke-linecap": "round", "stroke-linejoin": "round" }), _jsx("path", { d: "M2.45312 5.21985L9.00062 9.00735L15.5481 5.21985", stroke: "#ADADAD", "stroke-linecap": "round", "stroke-linejoin": "round" }), _jsx("path", { d: "M9 16.5599V8.99988", stroke: "#ADADAD", "stroke-linecap": "round", "stroke-linejoin": "round" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_15980_26871", children: _jsx("rect", { width: width, height: height, fill: "white" }) }) })] }));
+};
+export default Box;

package/dist/types/components/SwitchLarge/index.d.ts

@@ -10,6 +10,7 @@ interface SwitchProps {
 }
 interface SwitchLargeProps {
     switches: [SwitchProps, SwitchProps];
+    dataCy?: string;
 }
-declare const SwitchLarge: ({ switches }: SwitchLargeProps) => import("react/jsx-runtime").JSX.Element;
+declare const SwitchLarge: ({ switches, dataCy }: SwitchLargeProps) => import("react/jsx-runtime").JSX.Element;
 export default SwitchLarge;

package/dist/types/components/SwitchLarge/index.js

@@ -2,7 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "./style.scss";
 import GetSvgIcon from "../GetSvgIcon";
 import { Tooltip } from "..";
-const SwitchLarge = ({ switches }) => {
-    return (_jsx("div", { className: "switchLarge", children: switches.map((s, index) => (_jsx(Tooltip, { content: s.name, children: _jsxs("button", { className: `${s.isActive ? "active" : ""}`, onClick: s.onClick, children: [s.text && !s.iconType && (_jsx("span", { className: "switchButtonText", children: s.text })), s.iconType && _jsx(GetSvgIcon, { iconType: s.iconType, iconSize: "16" })] }, index) }))) }));
+const SwitchLarge = ({ switches, dataCy }) => {
+    return (_jsx("div", { className: "switchLarge", children: switches.map((s, index) => (_jsx(Tooltip, { content: s.name, children: _jsxs("button", { className: `${s.isActive ? "active" : ""}`, onClick: s.onClick, "data-cy": s.text
+                    ? `${dataCy}-${s.text?.toLowerCase()}`
+                    : `${dataCy}-${s.name?.toLowerCase()}`, children: [s.text && !s.iconType && (_jsx("span", { className: "switchButtonText", children: s.text })), s.iconType && _jsx(GetSvgIcon, { iconType: s.iconType, iconSize: "16" })] }, index) }))) }));
 };
 export default SwitchLarge;

package/dist/types/components/TableNameCell/index.d.ts

@@ -10,6 +10,7 @@ type TableNameCellProps = {
     iconKey?: string;
     altImageType?: string;
     metaContent?: ReactNode;
+    dataCy?: string;
 };
-declare const TableNameCell: ({ index, isSelected, onCheckClick, onNameClick, name, iconPath, iconKey, altImageType, metaContent, }: TableNameCellProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableNameCell: ({ index, isSelected, onCheckClick, onNameClick, name, iconPath, iconKey, altImageType, metaContent, dataCy, }: TableNameCellProps) => import("react/jsx-runtime").JSX.Element;
 export default TableNameCell;

package/dist/types/components/TableNameCell/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CheckboxComponent, PersonCompanyNameClickable, RectangularIcon, } from "..";
 import "./styles.scss";
-const TableNameCell = ({ index, isSelected, onCheckClick, onNameClick, name, iconPath, iconKey, altImageType = "profile", metaContent, }) => {
-    return (_jsxs("div", { className: "tableNameCell", children: [_jsx("p", { children: index }), _jsx(CheckboxComponent, { sizeVariant: "xs", checked: isSelected, onClick: onCheckClick }), _jsx(RectangularIcon, { iconPath: iconPath, iconSize: "40", borderRadius: "6", altImageType: altImageType }, iconKey), _jsxs("span", { className: "nameContainer", children: [_jsx(PersonCompanyNameClickable, { text: name, onClick: onNameClick }), metaContent] })] }));
+const TableNameCell = ({ index, isSelected, onCheckClick, onNameClick, name, iconPath, iconKey, altImageType = "profile", metaContent, dataCy, }) => {
+    return (_jsxs("div", { className: "tableNameCell", "data-cy": dataCy, children: [_jsx("p", { children: index }), _jsx(CheckboxComponent, { sizeVariant: "xs", checked: isSelected, onClick: onCheckClick }), _jsx(RectangularIcon, { iconPath: iconPath, iconSize: "40", borderRadius: "6", altImageType: altImageType }, iconKey), _jsxs("span", { className: "nameContainer", children: [_jsx(PersonCompanyNameClickable, { text: name, onClick: onNameClick }), metaContent] })] }));
 };
 export default TableNameCell;

package/dist/types/components/TablePagination/index.d.ts

@@ -11,6 +11,7 @@ interface TablePaginationProps {
     onPageNumberClick: (pageNumber: number) => void;
     totalPages: number;
     buttonsDisabled?: boolean;
+    dataCy?: string;
 }
 declare const TablePagination: React.FC<TablePaginationProps>;
 export default TablePagination;

package/dist/types/components/TablePagination/index.js

@@ -2,12 +2,12 @@ import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useState } from "react";
 import "./style.scss";
 import clsx from "clsx";
-const TablePagination = ({ totalCount = 50, lowerCap = 1, upperCap = 25, currentPage = 1, totalPages, onPrevClick = () => { }, onNextClick = () => { }, onPageNumberClick = () => { }, buttonsDisabled = false, }) => {
+const TablePagination = ({ totalCount = 50, lowerCap = 1, upperCap = 25, currentPage = 1, totalPages, onPrevClick = () => { }, onNextClick = () => { }, onPageNumberClick = () => { }, buttonsDisabled = false, dataCy, }) => {
     const [all, setAll] = useState(totalPages < 8 ? true : false);
     useEffect(() => {
         setAll(totalPages < 8 ? true : false);
     }, [totalPages]);
-    return (_jsxs("div", { className: "tablePagination", children: [_jsxs("p", { children: [" ", lowerCap, "-", upperCap, " of ", totalCount, " "] }), _jsxs("span", { className: "tablePagination-ButtonGroup", children: [_jsx("button", { className: currentPage === 1 || buttonsDisabled ? "disable-cursor" : "", onClick: onPrevClick, disabled: currentPage === 1 || buttonsDisabled, children: "Previous" }), all &&
+    return (_jsxs("div", { className: "tablePagination", "data-cy": dataCy, children: [_jsxs("p", { children: [" ", lowerCap, "-", upperCap, " of ", totalCount, " "] }), _jsxs("span", { className: "tablePagination-ButtonGroup", children: [_jsx("button", { className: currentPage === 1 || buttonsDisabled ? "disable-cursor" : "", onClick: onPrevClick, disabled: currentPage === 1 || buttonsDisabled, children: "Previous" }), all &&
                         totalPages < 8 &&
                         Array.from({ length: totalPages }, (_, index) => index + 1).map((button, index) => {
                             return (_jsx("button", { disabled: buttonsDisabled, className: clsx({

package/dist/types/components/Tabs/index.d.ts

@@ -10,6 +10,7 @@ interface TabsProps {
     onSelect: (tab: string) => void;
     selectedTab: string;
     children?: ReactNode;
+    dataCyArray?: string[];
 }
-declare const Tabs: ({ tabs, onSelect, selectedTab, children }: TabsProps) => import("react/jsx-runtime").JSX.Element;
+declare const Tabs: ({ tabs, onSelect, selectedTab, dataCyArray, children, }: TabsProps) => import("react/jsx-runtime").JSX.Element;
 export default Tabs;

package/dist/types/components/Tabs/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "./style.scss";
 import clsx from "clsx";
-const Tabs = ({ tabs, onSelect, selectedTab, children }) => {
+const Tabs = ({ tabs, onSelect, selectedTab, dataCyArray = [], children, }) => {
     const getClassName = (className, tab) => {
         return clsx({
             [`${className}--Generic`]: true,
@@ -14,6 +14,6 @@ const Tabs = ({ tabs, onSelect, selectedTab, children }) => {
         }
         return count.toString().padStart(2, "0");
     };
-    return (_jsxs("div", { className: "tabs", children: [_jsx("div", { className: "tabsNav", children: tabs.map((tab) => (_jsxs("button", { className: getClassName("tabsNavItem", tab.title), onClick: () => onSelect(tab.title), children: [tab.title, Boolean(tab.count) && (_jsx("p", { className: getClassName("tabsNavItem-Number", tab.title), children: formatCount(tab.count ?? 0) }))] }, tab.id))) }), children] }));
+    return (_jsxs("div", { className: "tabs", children: [_jsx("div", { className: "tabsNav", children: tabs.map((tab, index) => (_jsxs("button", { className: getClassName("tabsNavItem", tab.title), onClick: () => onSelect(tab.title), "data-cy": dataCyArray[index] ?? "", children: [tab.title, Boolean(tab.count) && (_jsx("p", { className: getClassName("tabsNavItem-Number", tab.title), children: formatCount(tab.count ?? 0) }))] }, tab.id))) }), children] }));
 };
 export default Tabs;

package/dist/types/components/TertiaryButton/index.d.ts

@@ -7,6 +7,7 @@ interface TertiaryButtonProps {
     isDisabled?: boolean;
     onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
     children?: ReactNode;
+    dataCy?: string;
 }
-declare const TertiaryButton: ({ text, tertiaryButtonClassName, sizeVariant, isDisabled, onClick, children, }: TertiaryButtonProps) => import("react/jsx-runtime").JSX.Element;
+declare const TertiaryButton: ({ text, tertiaryButtonClassName, sizeVariant, isDisabled, onClick, children, dataCy, }: TertiaryButtonProps) => import("react/jsx-runtime").JSX.Element;
 export default TertiaryButton;

package/dist/types/components/TertiaryButton/index.js

@@ -3,12 +3,12 @@ import clsx from "clsx";
 import "./style.scss";
 const TertiaryButton = ({ text = "Button text", tertiaryButtonClassName = "", sizeVariant = "xs", 
 // colorVariant = 'orange',
-isDisabled = false, onClick, children, }) => {
+isDisabled = false, onClick, children, dataCy, }) => {
     const className = clsx({
         tertiaryButtonGeneric: true,
         [`${sizeVariant}Size--TertiaryButton`]: true,
         // [`${colorVariant}--TertiaryButton`]: true
     });
-    return (_jsx("button", { type: "button", className: `${className} ${tertiaryButtonClassName}`, disabled: isDisabled, onClick: onClick, children: children ? children : text }));
+    return (_jsx("button", { type: "button", className: `${className} ${tertiaryButtonClassName}`, disabled: isDisabled, onClick: onClick, "data-cy": dataCy, children: children ? children : text }));
 };
 export default TertiaryButton;

package/dist/types/components/ToggleComponent/index.d.ts

@@ -4,6 +4,7 @@ type Props = {
     initialState: boolean;
     sizeVariant?: "sm" | "base";
     onClick: () => void;
+    dataCy?: string;
 };
 declare const ToggleComponent: React.FC<Props>;
 export default ToggleComponent;

package/dist/types/components/ToggleComponent/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import "./style.scss";
-const ToggleComponent = ({ initialState, onClick, sizeVariant = "base", }) => {
+const ToggleComponent = ({ initialState, onClick, sizeVariant = "base", dataCy, }) => {
     const [isOn, setIsOn] = useState(initialState);
     useEffect(() => {
         setIsOn(initialState);
@@ -10,6 +10,6 @@ const ToggleComponent = ({ initialState, onClick, sizeVariant = "base", }) => {
         setIsOn(!isOn);
         onClick();
     };
-    return (_jsx("div", { className: `${sizeVariant === "sm" ? "smSizeToggle" : "toggle"} ${isOn ? "on" : "off"}`, onClick: handleToggle, children: _jsx("div", { className: sizeVariant === "sm" ? "smSizeToggle-switch" : "toggle-switch" }) }));
+    return (_jsx("div", { className: `${sizeVariant === "sm" ? "smSizeToggle" : "toggle"} ${isOn ? "on" : "off"}`, onClick: handleToggle, "data-cy": dataCy, children: _jsx("div", { className: sizeVariant === "sm" ? "smSizeToggle-switch" : "toggle-switch" }) }));
 };
 export default ToggleComponent;

package/dist/types/types.d.ts

@@ -4,7 +4,7 @@ import { companyLineChartFinancialTabProp } from "./components/CompanyLineChartF
 import { IProduct } from "./components/CompanyProductsTab";
 import { ICompetitor } from "./components/CompetitorsCompanyTab";
 import { Education, Experience } from "./components/PeopleCard/interface";
-export type IconType = "checkList" | "abstractCircle" | "seo" | "abstractGeometric" | "penEdit" | "plus" | "cross" | "thumb" | "clock" | "tick" | "linkedinLogo" | "searchArrow" | "excalamationCircle" | "edit" | "delete" | "chatOneBallon" | "qluLogo" | "gear" | "home" | "paperPlaneUpRight" | "search" | "chat" | "briefcase" | "barGraph" | "book" | "company" | "dollarBriefcase" | "industry" | "jobTitle" | "location" | "strategyPath" | "tools" | "employees" | "management" | "cheveronDown" | "cheveronUp" | "passTick" | "arrowLeft" | "arrowRight" | "doNotInclude" | "tickCircle" | "phone" | "email" | "eye" | "eyeOff" | "congratulations" | "heart" | "questionMark" | "officeBuilding" | "calendar" | "notes" | "kebab" | "star" | "filterFunel" | "sortUpDownArrows" | "download" | "sparkles" | "writeNotes" | "undo" | "emailSend" | "copy" | "openLink" | "internalUser" | "bell" | "graduationHat" | "link" | "user" | "password" | "emailDisconnected" | "bolt" | "images" | "information" | "inviteUser" | "list" | "table" | "arrowDown" | "arrowUp" | "chevronLeft" | "chevronRight" | "radio" | "like" | "unlike" | "refresh" | "emailRound" | "globeSearch" | "groupIcon" | "jD" | "hiringCompany" | "sampleProfiles" | "matchingProfile" | "clipBoard" | "sortascending" | "sortdescending" | "exclamation" | "refresh-ccw" | "hourglass" | "outlook" | "menu-alt" | "simpler-tick" | "menu-extended" | "umberalla" | "sidebar" | "paperClip" | "adjustment" | "document" | "file" | "google" | "enter" | "key" | "cornerDown" | "pdf" | "notAllowed" | "pause" | "resume" | "university" | "userClock" | "ascendingOrder" | "descendingOrder" | "tickVerification" | "copied" | "archive" | "additionalInformation" | "checkCircle" | "companyClock" | "companyOwnership" | "cutBriefcase";
+export type IconType = "checkList" | "abstractCircle" | "seo" | "abstractGeometric" | "penEdit" | "plus" | "cross" | "thumb" | "clock" | "tick" | "linkedinLogo" | "searchArrow" | "excalamationCircle" | "edit" | "delete" | "chatOneBallon" | "qluLogo" | "gear" | "home" | "paperPlaneUpRight" | "search" | "chat" | "briefcase" | "barGraph" | "book" | "company" | "dollarBriefcase" | "industry" | "jobTitle" | "location" | "strategyPath" | "tools" | "employees" | "management" | "cheveronDown" | "cheveronUp" | "passTick" | "arrowLeft" | "arrowRight" | "doNotInclude" | "tickCircle" | "phone" | "email" | "eye" | "eyeOff" | "congratulations" | "heart" | "questionMark" | "officeBuilding" | "calendar" | "notes" | "kebab" | "star" | "filterFunel" | "sortUpDownArrows" | "download" | "sparkles" | "writeNotes" | "undo" | "emailSend" | "copy" | "openLink" | "internalUser" | "bell" | "graduationHat" | "link" | "user" | "password" | "emailDisconnected" | "bolt" | "images" | "information" | "inviteUser" | "list" | "table" | "arrowDown" | "arrowUp" | "chevronLeft" | "chevronRight" | "radio" | "like" | "unlike" | "refresh" | "emailRound" | "globeSearch" | "groupIcon" | "jD" | "hiringCompany" | "sampleProfiles" | "matchingProfile" | "clipBoard" | "sortascending" | "sortdescending" | "exclamation" | "refresh-ccw" | "hourglass" | "outlook" | "menu-alt" | "simpler-tick" | "menu-extended" | "umberalla" | "sidebar" | "paperClip" | "adjustment" | "document" | "file" | "google" | "enter" | "key" | "cornerDown" | "pdf" | "notAllowed" | "pause" | "resume" | "university" | "userClock" | "ascendingOrder" | "descendingOrder" | "tickVerification" | "copied" | "archive" | "additionalInformation" | "checkCircle" | "companyClock" | "companyOwnership" | "cutBriefcase" | "box";
 export type SelectedUnselectedErrorVariant = "selected" | "excluded" | "unselected" | "error";
 export type IconSize = "2" | "4" | "6" | "8" | "10" | "12" | "14" | "16" | "18" | "20" | "22" | "24" | "26" | "28" | "30" | "32" | "34" | "36" | "38" | "40" | "44" | "48" | "52" | "56" | "58" | "64" | "72" | "80" | "88" | "120" | "280";
 export type TopNavbarButtonTypes = "Home" | "Chat" | "Search" | "Assignments" | "Campaigns" | "Settings";

package/dist/types.d.ts

@@ -4,7 +4,7 @@ import { companyLineChartFinancialTabProp } from "./components/CompanyLineChartF
 import { IProduct } from "./components/CompanyProductsTab";
 import { ICompetitor } from "./components/CompetitorsCompanyTab";
 import { Education, Experience } from "./components/PeopleCard/interface";
-export type IconType = "checkList" | "abstractCircle" | "seo" | "abstractGeometric" | "penEdit" | "plus" | "cross" | "thumb" | "clock" | "tick" | "linkedinLogo" | "searchArrow" | "excalamationCircle" | "edit" | "delete" | "chatOneBallon" | "qluLogo" | "gear" | "home" | "paperPlaneUpRight" | "search" | "chat" | "briefcase" | "barGraph" | "book" | "company" | "dollarBriefcase" | "industry" | "jobTitle" | "location" | "strategyPath" | "tools" | "employees" | "management" | "cheveronDown" | "cheveronUp" | "passTick" | "arrowLeft" | "arrowRight" | "doNotInclude" | "tickCircle" | "phone" | "email" | "eye" | "eyeOff" | "congratulations" | "heart" | "questionMark" | "officeBuilding" | "calendar" | "notes" | "kebab" | "star" | "filterFunel" | "sortUpDownArrows" | "download" | "sparkles" | "writeNotes" | "undo" | "emailSend" | "copy" | "openLink" | "internalUser" | "bell" | "graduationHat" | "link" | "user" | "password" | "emailDisconnected" | "bolt" | "images" | "information" | "inviteUser" | "list" | "table" | "arrowDown" | "arrowUp" | "chevronLeft" | "chevronRight" | "radio" | "like" | "unlike" | "refresh" | "emailRound" | "globeSearch" | "groupIcon" | "jD" | "hiringCompany" | "sampleProfiles" | "matchingProfile" | "clipBoard" | "sortascending" | "sortdescending" | "exclamation" | "refresh-ccw" | "hourglass" | "outlook" | "menu-alt" | "simpler-tick" | "menu-extended" | "umberalla" | "sidebar" | "paperClip" | "adjustment" | "document" | "file" | "google" | "enter" | "key" | "cornerDown" | "pdf" | "notAllowed" | "pause" | "resume" | "university" | "userClock" | "ascendingOrder" | "descendingOrder" | "tickVerification" | "copied" | "archive" | "additionalInformation" | "checkCircle" | "companyClock" | "companyOwnership" | "cutBriefcase";
+export type IconType = "checkList" | "abstractCircle" | "seo" | "abstractGeometric" | "penEdit" | "plus" | "cross" | "thumb" | "clock" | "tick" | "linkedinLogo" | "searchArrow" | "excalamationCircle" | "edit" | "delete" | "chatOneBallon" | "qluLogo" | "gear" | "home" | "paperPlaneUpRight" | "search" | "chat" | "briefcase" | "barGraph" | "book" | "company" | "dollarBriefcase" | "industry" | "jobTitle" | "location" | "strategyPath" | "tools" | "employees" | "management" | "cheveronDown" | "cheveronUp" | "passTick" | "arrowLeft" | "arrowRight" | "doNotInclude" | "tickCircle" | "phone" | "email" | "eye" | "eyeOff" | "congratulations" | "heart" | "questionMark" | "officeBuilding" | "calendar" | "notes" | "kebab" | "star" | "filterFunel" | "sortUpDownArrows" | "download" | "sparkles" | "writeNotes" | "undo" | "emailSend" | "copy" | "openLink" | "internalUser" | "bell" | "graduationHat" | "link" | "user" | "password" | "emailDisconnected" | "bolt" | "images" | "information" | "inviteUser" | "list" | "table" | "arrowDown" | "arrowUp" | "chevronLeft" | "chevronRight" | "radio" | "like" | "unlike" | "refresh" | "emailRound" | "globeSearch" | "groupIcon" | "jD" | "hiringCompany" | "sampleProfiles" | "matchingProfile" | "clipBoard" | "sortascending" | "sortdescending" | "exclamation" | "refresh-ccw" | "hourglass" | "outlook" | "menu-alt" | "simpler-tick" | "menu-extended" | "umberalla" | "sidebar" | "paperClip" | "adjustment" | "document" | "file" | "google" | "enter" | "key" | "cornerDown" | "pdf" | "notAllowed" | "pause" | "resume" | "university" | "userClock" | "ascendingOrder" | "descendingOrder" | "tickVerification" | "copied" | "archive" | "additionalInformation" | "checkCircle" | "companyClock" | "companyOwnership" | "cutBriefcase" | "box";
 export type SelectedUnselectedErrorVariant = "selected" | "excluded" | "unselected" | "error";
 export type IconSize = "2" | "4" | "6" | "8" | "10" | "12" | "14" | "16" | "18" | "20" | "22" | "24" | "26" | "28" | "30" | "32" | "34" | "36" | "38" | "40" | "44" | "48" | "52" | "56" | "58" | "64" | "72" | "80" | "88" | "120" | "280";
 export type TopNavbarButtonTypes = "Home" | "Chat" | "Search" | "Assignments" | "Campaigns" | "Settings";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qlu-20-ui-library",
-  "version": "1.7.3",
+  "version": "1.7.5",
   "type": "module",
   "scripts": {
     "dev": "vite",