@vectara/vectara-ui/lib/components/topicButton/TopicButton.js

Vectara's design system, codified as a React and Sass component library

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import classNames from "classnames";
import { VuiSpacer } from "../spacer/Spacer";
import { VuiTextColor } from "../typography/TextColor";
import { VuiTitle } from "../typography/Title";
import { useVuiContext } from "../context/Context";
import { getTrackingProps } from "../../utils/getTrackingProps";
import { VuiBadge } from "../badge/Badge";
import { VuiFlexContainer } from "../flex/FlexContainer";
import { VuiFlexItem } from "../flex/FlexItem";
export const TOPIC_BUTTON_COLOR = ["primary", "accent"];
export const TOPIC_BUTTON_STYLE = ["compactRow", "compactGrid"];
export const VuiTopicButton = (_a) => {
    var { children, className, href, onClick, title, fullWidth, color = "primary", buttonStyle, badges, icon, isDisabled, target, track } = _a, rest = __rest(_a, ["children", "className", "href", "onClick", "title", "fullWidth", "color", "buttonStyle", "badges", "icon", "isDisabled", "target", "track"]);
    const { createLink } = useVuiContext();
    const classes = classNames("vuiTopicButton", `vuiTopicButton--${color}`, className, {
        [`vuiTopicButton--${buttonStyle}`]: buttonStyle,
        "vuiTopicButton--fullWidth": fullWidth,
        "vuiTopicButton--isDisabled": isDisabled
    });
    const titleNode = title && (_jsx(VuiTitle, Object.assign({ size: buttonStyle ? "xs" : "s" }, { children: _jsx("p", { children: _jsx(VuiTextColor, Object.assign({ color: color }, { children: title })) }) })));
    const badgeNodes = badges === null || badges === void 0 ? void 0 : badges.map((badge, index) => (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiBadge, Object.assign({ color: badge.color, size: "s" }, { children: badge.label })) }), index)));
    let content;
    if (buttonStyle === "compactRow") {
        // Single line: icon, title, divider + description, with badges pushed right.
        content = (_jsxs(VuiFlexContainer, Object.assign({ justifyContent: "spaceBetween", alignItems: "center", spacing: "s" }, { children: [_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "s" }, { children: [icon && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: icon }))), _jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: titleNode })), _jsx(VuiFlexItem, Object.assign({ grow: true }, { children: children && (_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "s" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx("span", { className: "vuiTopicButton__divider", "aria-hidden": "true" }) })), _jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: children }))] }))) }))] })), _jsx(VuiFlexItem, { children: badgeNodes && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "xs" }, { children: badgeNodes })) }))) })] })));
    }
    else if (buttonStyle === "compactGrid") {
        // Square icon tile beside a single-line title, with children stacked below.
        content = (_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "s" }, { children: [icon && (_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false, className: "vuiTopicButton__iconTile" }, { children: icon }))), _jsxs(VuiFlexItem, Object.assign({ grow: true }, { children: [titleNode, children] }))] })));
    }
    else {
        content = (_jsx(VuiFlexContainer, Object.assign({ alignItems: "start", spacing: "m" }, { children: _jsxs(VuiFlexItem, Object.assign({ grow: true }, { children: [title && (_jsxs(_Fragment, { children: [_jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", spacing: "s" }, { children: [icon, _jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: titleNode })), badgeNodes] })), children && _jsx(VuiSpacer, { size: "xxs" })] })), children] })) })));
    }
    // Anchor tags can't be disabled, so we render a disabled button instead.
    if (href && !isDisabled) {
        return createLink(Object.assign(Object.assign({ className: classes, href,
            onClick, children: content, target }, rest), getTrackingProps(track)));
    }
    return (_jsx("button", Object.assign({ className: classes, onClick: onClick, type: "button", disabled: isDisabled }, rest, { children: content })));
};