@veritone-ce/design-system 1.12.34 → 1.12.35

package/dist/components/Breadcrumbs/index.d.ts

@@ -1,13 +1,20 @@
 import { SxProps, Theme } from '@mui/material';
+import React from 'react';
 export type BreadcrumbsProps = {
     'data-testid'?: string;
     links: {
-        href: string;
-        label: string;
+        to: string;
+        label: React.ReactNode;
     }[];
+    LinkComponent?: BreadcrumbsLinkComponent;
     sx?: SxProps<Theme>;
     className?: string;
 };
+export type BreadcrumbsLinkComponentProps = {
+    to: string;
+    children?: React.ReactNode;
+};
+export type BreadcrumbsLinkComponent = React.ComponentType<BreadcrumbsLinkComponentProps>;
 /**
  * - This is the breadcrumbs component that is used in the header
  * - It takes in an array of links and renders them as breadcrumbs

package/dist/components/Breadcrumbs/index.js

@@ -5,7 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _material = require("@mui/material");
+var _react = _interopRequireDefault(require("react"));
 var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 /**
  * - This is the breadcrumbs component that is used in the header
  * - It takes in an array of links and renders them as breadcrumbs
@@ -14,6 +16,15 @@ var _jsxRuntime = require("react/jsx-runtime");
  **/
 
 var Breadcrumbs = function Breadcrumbs(props) {
+  var LinkComponent = _react["default"].useMemo(function () {
+    var _props$LinkComponent;
+    return (_props$LinkComponent = props.LinkComponent) !== null && _props$LinkComponent !== void 0 ? _props$LinkComponent : function (linkProps) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Link, {
+        href: linkProps.to,
+        children: linkProps.children
+      });
+    };
+  }, [props.LinkComponent]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Breadcrumbs, {
     "aria-label": "breadcrumbs",
     "data-testid": props['data-testid'],
@@ -33,10 +44,10 @@ var Breadcrumbs = function Breadcrumbs(props) {
             textTransform: 'uppercase'
           },
           children: link.label
-        }, link.href);
+        }, link.to);
       } else {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Link, {
-          href: link.href,
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(LinkComponent, {
+          to: link.to,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
             sx: {
               color: function color(theme) {
@@ -46,11 +57,12 @@ var Breadcrumbs = function Breadcrumbs(props) {
               fontStyle: 'normal',
               fontWeight: 600,
               fontSize: '18px',
-              textTransform: 'uppercase'
+              textTransform: 'uppercase',
+              textDecoration: 'none'
             },
             children: link.label
           })
-        }, link.href);
+        }, link.to);
       }
     })
   });

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export type { AlertProps } from './components/Alert';
 export { default as AudioSlider } from './components/AudioSlider';
 export type { AudioSliderProps } from './components/AudioSlider';
 export { default as Breadcrumbs } from './components/Breadcrumbs';
-export type { BreadcrumbsProps } from './components/Breadcrumbs';
+export type { BreadcrumbsProps, BreadcrumbsLinkComponentProps, BreadcrumbsLinkComponent } from './components/Breadcrumbs';
 export { default as Button } from './components/Button';
 export type { ButtonProps } from './components/Button';
 export { default as Checkbox } from './components/Checkbox';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritone-ce/design-system",
-  "version": "1.12.34",
+  "version": "1.12.35",
   "private": false,
   "description": "Design System for Veritone CE",
   "keywords": [