@vectara/vectara-ui 18.1.1 → 18.2.0

package/lib/components/topicButton/TopicButton.d.ts

@@ -1,4 +1,13 @@
 import { LinkProps } from "../link/types";
+import { BADGE_COLOR } from "../badge/Badge";
+export declare const TOPIC_BUTTON_COLOR: readonly ["primary", "accent"];
+export type TopicButtonColor = (typeof TOPIC_BUTTON_COLOR)[number];
+export declare const TOPIC_BUTTON_STYLE: readonly ["compactRow", "compactGrid"];
+export type TopicButtonStyle = (typeof TOPIC_BUTTON_STYLE)[number];
+type TopicButtonBadge = {
+    label: string;
+    color: (typeof BADGE_COLOR)[number];
+};
 type Props = {
     children?: React.ReactNode;
     className?: string;
@@ -8,6 +17,10 @@ type Props = {
     onClick?: () => void;
     title?: string;
     fullWidth?: boolean;
+    color?: TopicButtonColor;
+    buttonStyle?: TopicButtonStyle;
+    badges?: TopicButtonBadge[];
+    icon?: React.ReactNode;
 };
-export declare const VuiTopicButton: ({ children, className, href, onClick, title, fullWidth, target, track, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiTopicButton: ({ children, className, href, onClick, title, fullWidth, color, buttonStyle, badges, icon, target, track, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/topicButton/TopicButton.js

@@ -9,20 +9,39 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+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, target, track } = _a, rest = __rest(_a, ["children", "className", "href", "onClick", "title", "fullWidth", "target", "track"]);
+    var { children, className, href, onClick, title, fullWidth, color = "primary", buttonStyle, badges, icon, target, track } = _a, rest = __rest(_a, ["children", "className", "href", "onClick", "title", "fullWidth", "color", "buttonStyle", "badges", "icon", "target", "track"]);
     const { createLink } = useVuiContext();
-    const classes = classNames("vuiTopicButton", className, {
+    const classes = classNames("vuiTopicButton", `vuiTopicButton--${color}`, className, {
+        [`vuiTopicButton--${buttonStyle}`]: buttonStyle,
         "vuiTopicButton--fullWidth": fullWidth
     });
-    const content = (_jsxs(_Fragment, { children: [title && (_jsxs(_Fragment, { children: [_jsx(VuiTitle, Object.assign({ size: "s" }, { children: _jsx("p", { children: _jsx(VuiTextColor, Object.assign({ color: "primary" }, { children: title })) }) })), children && _jsx(VuiSpacer, { size: "xxs" })] })), children] }));
+    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] })) })));
+    }
     if (href) {
         return createLink(Object.assign(Object.assign({ className: classes, href,
             onClick, children: content, target }, rest), getTrackingProps(track)));

package/lib/components/topicButton/_index.scss

@@ -11,7 +11,6 @@
 
   &:hover {
     text-decoration: none;
-    box-shadow: $shadowLargeEnd, var(--vui-color-primary-shade) 0 0 1px 1px;
     z-index: 1;
   }
 }
@@ -19,3 +18,27 @@
 .vuiTopicButton--fullWidth {
   width: 100%;
 }
+
+.vuiTopicButton--primary:hover {
+  box-shadow: $shadowLargeEnd, var(--vui-color-primary-shade) 0 0 1px 1px;
+}
+
+.vuiTopicButton--accent:hover {
+  box-shadow: $shadowLargeEnd, var(--vui-color-accent-shade) 0 0 1px 1px;
+}
+
+.vuiTopicButton--compactRow {
+  padding: $sizeS $sizeM;
+}
+
+.vuiTopicButton--compactGrid {
+  padding: $sizeM;
+}
+
+// A subtle vertical rule separating the title from the description in the compact row.
+.vuiTopicButton__divider {
+  display: block;
+  width: 1px;
+  height: $sizeM;
+  background-color: var(--vui-color-light-shade);
+}

package/lib/styles/index.css

@@ -6000,7 +6000,6 @@ h2.react-datepicker__current-month {
 }
 .vuiTopicButton:hover {
   text-decoration: none;
-  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px, var(--vui-color-primary-shade) 0 0 1px 1px;
   z-index: 1;
 }
 
@@ -6008,6 +6007,29 @@ h2.react-datepicker__current-month {
   width: 100%;
 }
 
+.vuiTopicButton--primary:hover {
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px, var(--vui-color-primary-shade) 0 0 1px 1px;
+}
+
+.vuiTopicButton--accent:hover {
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px, var(--vui-color-accent-shade) 0 0 1px 1px;
+}
+
+.vuiTopicButton--compactRow {
+  padding: 12px 16px;
+}
+
+.vuiTopicButton--compactGrid {
+  padding: 16px;
+}
+
+.vuiTopicButton__divider {
+  display: block;
+  width: 1px;
+  height: 16px;
+  background-color: var(--vui-color-light-shade);
+}
+
 .vuiTitle {
   color: var(--vui-color-text);
   margin-bottom: 0;

package/package.json

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

package/src/docs/pages/topicButton/Color.tsx

@@ -0,0 +1,28 @@
+import { BiEditAlt } from "react-icons/bi";
+import { VuiFlexContainer, VuiFlexItem, VuiIcon, VuiText, VuiTopicButton } from "../../../lib";
+
+export const Color = () => {
+  return (
+    <VuiFlexContainer direction="column" spacing="m">
+      {(["primary", "accent"] as const).map((color) => (
+        <VuiFlexItem key={color} grow={1}>
+          <VuiTopicButton
+            color={color}
+            title={`${color} topic button`}
+            icon={
+              <VuiIcon color={color}>
+                <BiEditAlt />
+              </VuiIcon>
+            }
+            fullWidth
+            badges={[{ label: `${color.charAt(0).toUpperCase() + color.slice(1)}`, color }]}
+          >
+            <VuiText>
+              <p>Colors the title and hover shadow to match the {color} color.</p>
+            </VuiText>
+          </VuiTopicButton>
+        </VuiFlexItem>
+      ))}
+    </VuiFlexContainer>
+  );
+};

package/src/docs/pages/topicButton/CompactGrid.tsx

@@ -0,0 +1,32 @@
+import { BiBook, BiData  } from "react-icons/bi";
+import { VuiFlexContainer, VuiFlexItem, VuiIcon, VuiText, VuiTextColor, VuiTopicButton } from "../../../lib";
+
+const templates = [
+  { title: "Customer support", },
+  { title: "Ingest agent", icon: <BiData /> },
+  { title: "Tech knowledge", icon: <BiBook /> }
+];
+
+export const CompactGrid = () => {
+  return (
+    <VuiFlexContainer spacing="m">
+      {templates.map((template) => (
+        <VuiFlexItem key={template.title} grow={1}>
+          <VuiTopicButton
+            href="#"
+            title={template.title}
+            buttonStyle="compactGrid"
+            icon={template.icon ? <VuiIcon color="primary">{template.icon}</VuiIcon> : undefined}
+            fullWidth
+          >
+            <VuiText size="xs">
+              <p>
+                <VuiTextColor color="subdued">Use template to build agents</VuiTextColor>
+              </p>
+            </VuiText>
+          </VuiTopicButton>
+        </VuiFlexItem>
+      ))}
+    </VuiFlexContainer>
+  );
+};

package/src/docs/pages/topicButton/CompactRow.tsx

@@ -0,0 +1,53 @@
+import { BiData } from "react-icons/bi";
+import { VuiIcon, VuiText, VuiTextColor, VuiTopicButton, VuiSpacer } from "../../../lib";
+
+export const CompactRow = () => {
+  return (
+    <>
+      <VuiTopicButton
+        href="#"
+        title="Customer support"
+        buttonStyle="compactRow"
+        badges={[
+          { label: "Support", color: "neutral" },
+          { label: "Technical", color: "neutral" }
+        ]}
+        fullWidth
+      >
+        <VuiText size="s">
+          <p>
+            <VuiTextColor color="subdued">
+              Ingest data from multiple sources, parse and transform, and index into corpora.
+            </VuiTextColor>
+          </p>
+        </VuiText>
+      </VuiTopicButton>
+
+      <VuiSpacer size="m" />
+
+      <VuiTopicButton
+        href="#"
+        title="Ingest agent"
+        buttonStyle="compactRow"
+        icon={
+          <VuiIcon size="s" color="primary">
+            <BiData />
+          </VuiIcon>
+        }
+        badges={[
+          { label: "Indexing", color: "neutral" },
+          { label: "Pipelines", color: "neutral" }
+        ]}
+        fullWidth
+      >
+        <VuiText size="s">
+          <p>
+            <VuiTextColor color="subdued">
+              Ingest data from multiple sources, parse and transform, and index into corpora.
+            </VuiTextColor>
+          </p>
+        </VuiText>
+      </VuiTopicButton>
+    </>
+  );
+};

package/src/docs/pages/topicButton/index.tsx

@@ -1,6 +1,12 @@
 import { Link } from "./Link";
+import { Color } from "./Color";
+import { CompactRow } from "./CompactRow";
+import { CompactGrid } from "./CompactGrid";
 
 const LinkSource = require("!!raw-loader!./Link");
+const ColorSource = require("!!raw-loader!./Color");
+const CompactRowSource = require("!!raw-loader!./CompactRow");
+const CompactGridSource = require("!!raw-loader!./CompactGrid");
 
 export const topicButton = {
   name: "Topic Button",
@@ -10,6 +16,21 @@ export const topicButton = {
       name: "Link",
       component: <Link />,
       source: LinkSource.default.toString()
+    },
+    {
+      name: "Color",
+      component: <Color />,
+      source: ColorSource.default.toString()
+    },
+    {
+      name: "Compact row",
+      component: <CompactRow />,
+      source: CompactRowSource.default.toString()
+    },
+    {
+      name: "Compact grid",
+      component: <CompactGrid />,
+      source: CompactGridSource.default.toString()
     }
   ]
 };