@vectara/vectara-ui 13.4.0 → 13.6.0

package/lib/components/button/BaseButton.d.ts

@@ -19,6 +19,7 @@ export type BaseButtonProps = {
     href?: LinkProps["href"];
     target?: LinkProps["target"];
     track?: LinkProps["track"];
+    download?: LinkProps["download"];
     htmlFor?: string;
     tabIndex?: number;
     title?: string;

package/lib/components/button/BaseButton.js

@@ -66,6 +66,6 @@ export const BaseButton = forwardRef((_a, ref) => {
         onMouseOver,
         onMouseOut,
         onMouseMove,
-        tabIndex, ["type"]: isSubmit ? "submit" : "button", disabled: isDisabled }, rest);
+        tabIndex, type: isSubmit ? "submit" : "button", disabled: isDisabled }, rest);
     return (_jsxs("button", Object.assign({ className: classes }, props, { ref: ref }, { children: [iconContainer, children] })));
 });

package/lib/components/card/Card.d.ts

@@ -10,6 +10,8 @@ type Props = {
     ungrouped?: boolean;
     fullHeight?: boolean;
     isScrollable?: boolean;
+    isExpanded?: boolean;
+    onToggleExpansion?: () => void;
 };
-export declare const VuiCard: ({ type, header, body, align, interactive, href, className, padding, ungrouped, fullHeight, isScrollable, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiCard: ({ type, header, body, align, interactive, href, className, padding, ungrouped, fullHeight, isScrollable, isExpanded, onToggleExpansion, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/card/Card.js

@@ -11,18 +11,32 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from "classnames";
+import { BiChevronDown, BiChevronRight } from "react-icons/bi";
+import { VuiFlexContainer } from "../flex/FlexContainer";
+import { VuiFlexItem } from "../flex/FlexItem";
+import { VuiIcon } from "../icon/Icon";
+import { createId } from "../../utils/createId";
 export const VuiCard = (_a) => {
-    var { type = "outlined", header, body, align = "left", interactive, href, className, padding = "s", ungrouped, fullHeight, isScrollable } = _a, rest = __rest(_a, ["type", "header", "body", "align", "interactive", "href", "className", "padding", "ungrouped", "fullHeight", "isScrollable"]);
-    const classes = classNames("vuiCard", `vuiCard--${type}`, `vuiCard--${align}`, `vuiCard--${padding}`, {
-        "vuiCard--interactive": interactive && !href,
+    var { type = "outlined", header, body, align = "left", interactive, href, className, padding = "s", ungrouped, fullHeight, isScrollable, isExpanded, onToggleExpansion } = _a, rest = __rest(_a, ["type", "header", "body", "align", "interactive", "href", "className", "padding", "ungrouped", "fullHeight", "isScrollable", "isExpanded", "onToggleExpansion"]);
+    const isExpandable = Boolean(onToggleExpansion);
+    const buttonId = createId();
+    const bodyId = createId();
+    const classes = classNames("vuiCard", 
+    // for now, we only support outlined cards for expandable cards
+    `vuiCard--${isExpandable ? "outlined" : type}`, `vuiCard--${align}`, `vuiCard--${padding}`, {
+        "vuiCard--interactive": interactive && !href && !isExpandable,
         "vuiCard--link": href,
         "vuiCard--ungrouped": ungrouped,
-        "vuiCard--fullHeight": fullHeight
+        "vuiCard--fullHeight": fullHeight,
+        "vuiCard--expandable": isExpandable
     }, className);
     const bodyClasses = classNames("vuiCard__body", {
         "vuiCard__body--withHeader": header,
         "vuiCard__body--scrollable": isScrollable
     });
+    if (isExpandable) {
+        return (_jsxs("div", Object.assign({ className: classes }, rest, { children: [header && (_jsx("button", Object.assign({ className: "vuiCard__expandableButton", onClick: onToggleExpansion, id: buttonId, "aria-controls": bodyId, "aria-expanded": isExpanded, type: "button" }, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", justifyContent: "start", spacing: "xs" }, { children: [_jsx(VuiIcon, Object.assign({ size: "m", color: "neutral", className: "vuiCard__expandableIcon" }, { children: isExpanded ? _jsx(BiChevronDown, {}) : _jsx(BiChevronRight, {}) })), _jsx(VuiFlexItem, Object.assign({ className: "vuiCard__expandableHeader", grow: 1 }, { children: header }))] })) }))), isExpanded && body && (_jsx("div", Object.assign({ className: bodyClasses, id: bodyId, "aria-labelledby": buttonId }, { children: body })))] })));
+    }
     const headerContent = header && _jsx("div", Object.assign({ className: "vuiCard__header" }, { children: header }));
     const bodyContent = body && _jsx("div", Object.assign({ className: bodyClasses }, { children: body }));
     if (href) {

package/lib/components/card/_index.scss

@@ -104,3 +104,50 @@
     padding: $sizeXl $sizeXxl;
   }
 }
+
+.vuiCard--expandable {
+  .vuiCard__expandableButton {
+    display: block;
+    width: 100%;
+    padding: $sizeM $sizeL;
+    text-align: left;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    transition: background-color $transitionSpeed;
+  }
+
+  .vuiCard__expandableButton:hover {
+    background-color: var(--vui-color-light-shade);
+  }
+
+  .vuiCard__expandableButton:focus {
+    outline: 2px solid var(--vui-color-primary);
+    outline-offset: -2px;
+  }
+
+  .vuiCard__expandableIcon {
+    transition: transform $transitionSpeed ease-in-out;
+  }
+
+  .vuiCard__expandableHeader {
+    text-align: inherit;
+  }
+}
+
+// Size-specific expandable button padding
+.vuiCard--expandable.vuiCard--s .vuiCard__expandableButton {
+  padding: $sizeM $sizeL;
+}
+
+.vuiCard--expandable.vuiCard--m .vuiCard__expandableButton {
+  padding: $sizeL $sizeXl;
+}
+
+.vuiCard--expandable.vuiCard--l .vuiCard__expandableButton {
+  padding: $sizeXl $sizeXxl;
+}
+
+.vuiCard--expandable.vuiCard--outlined .vuiCard__body {
+  border-top: 1px solid var(--vui-color-border-light);
+}

package/lib/components/context/Context.js

@@ -15,10 +15,12 @@ import { LIGHT_THEME, DARK_THEME, toStyle } from "./Theme";
 const VuiContext = createContext(undefined);
 export const VuiContextProvider = ({ children, linkProvider, pathProvider, drawerTitle = "h2", theme = LIGHT_THEME, portalContainer = document.body, isThemeIsolated }) => {
     const createLink = (linkConfig) => {
-        if (linkProvider)
-            return linkProvider(linkConfig);
-        const { className, href, onClick, children, ref } = linkConfig, rest = __rest(linkConfig, ["className", "href", "onClick", "children", "ref"]);
-        return (_jsx("a", Object.assign({ className: className, href: href, onClick: onClick }, rest, { children: children })));
+        if (!linkProvider || linkConfig.download) {
+            const { className, href, onClick, children, ref } = linkConfig, rest = __rest(linkConfig, ["className", "href", "onClick", "children", "ref"]);
+            // To support downloads, we must use anchor tags, not a react-router Link.
+            return (_jsx("a", Object.assign({ className: className, href: href, onClick: onClick }, rest, { children: children })));
+        }
+        return linkProvider(linkConfig);
     };
     const getPath = () => {
         return pathProvider ? pathProvider() : window.location.pathname;

package/lib/components/link/types.d.ts

@@ -16,4 +16,5 @@ export type LinkProps = {
     tabIndex?: number;
     "data-testid"?: string;
     ref?: ForwardedRef<HTMLAnchorElement | null>;
+    download?: string;
 };

package/lib/styles/index.css

@@ -1173,6 +1173,46 @@ fieldset {
   padding: 32px 40px;
 }
 
+.vuiCard--expandable .vuiCard__expandableButton {
+  display: block;
+  width: 100%;
+  padding: 16px 24px;
+  text-align: left;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+.vuiCard--expandable .vuiCard__expandableButton:hover {
+  background-color: var(--vui-color-light-shade);
+}
+.vuiCard--expandable .vuiCard__expandableButton:focus {
+  outline: 2px solid var(--vui-color-primary);
+  outline-offset: -2px;
+}
+.vuiCard--expandable .vuiCard__expandableIcon {
+  transition: transform 0.2s ease-in-out;
+}
+.vuiCard--expandable .vuiCard__expandableHeader {
+  text-align: inherit;
+}
+
+.vuiCard--expandable.vuiCard--s .vuiCard__expandableButton {
+  padding: 16px 24px;
+}
+
+.vuiCard--expandable.vuiCard--m .vuiCard__expandableButton {
+  padding: 24px 32px;
+}
+
+.vuiCard--expandable.vuiCard--l .vuiCard__expandableButton {
+  padding: 32px 40px;
+}
+
+.vuiCard--expandable.vuiCard--outlined .vuiCard__body {
+  border-top: 1px solid var(--vui-color-border-light);
+}
+
 .vuiChatTurn {
   position: relative;
   left: 0;

package/package.json

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