@veritone-ce/design-system 1.12.14 → 1.12.16

package/dist/components/Breadcrumbs/Breadcrumbs.stories.js

@@ -1,31 +1,36 @@
-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 } from "react/jsx-runtime";
-import BreadcrumbsComponent from '.';
-const links = [
-    { label: 'Home', href: '/' },
-    { label: 'About', href: '/about' },
-    { label: 'Contact', href: '/contact' }
-];
-export default {
-    title: 'Components/BreadcrumbsComponent',
-    component: BreadcrumbsComponent,
-    argTypes: {
-        links: {
-            defaultValue: ['.pdf', '.format']
-        }
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = void 0;
+var _ = _interopRequireDefault(require("."));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const links = [{
+  label: 'Home',
+  href: '/'
+}, {
+  label: 'About',
+  href: '/about'
+}, {
+  label: 'Contact',
+  href: '/contact'
+}];
+var _default = {
+  title: 'Components/BreadcrumbsComponent',
+  component: _.default,
+  argTypes: {
+    links: {
+      defaultValue: ['.pdf', '.format']
     }
+  }
 };
-export const Default = (_a) => {
-    var args = __rest(_a, []);
-    return _jsx(BreadcrumbsComponent, Object.assign({}, args, { links: links }));
-};
+exports.default = _default;
+const Default = ({
+  ...args
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+  ...args,
+  links: links
+});
+exports.Default = Default;

package/dist/components/Breadcrumbs/__tests__/Breadcrumbs.test.js

@@ -1,15 +1,26 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { render } from '../../../utils/tests/helpers';
-import { screen } from '@testing-library/react';
-import Breadcrumbs from '..';
-const links = [
-    { label: 'Home', href: '/' },
-    { label: 'About', href: '/about' },
-    { label: 'Contact', href: '/contact' }
-];
+"use strict";
+
+var _helpers = require("../../../utils/tests/helpers");
+var _react = require("@testing-library/react");
+var _ = _interopRequireDefault(require(".."));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const links = [{
+  label: 'Home',
+  href: '/'
+}, {
+  label: 'About',
+  href: '/about'
+}, {
+  label: 'Contact',
+  href: '/contact'
+}];
 describe('<Breadcrumbs />', () => {
-    it('should render the Breadcrumbs component', () => {
-        render(_jsx(Breadcrumbs, { links: links, "data-testid": "breadcrumbs" }));
-        expect(screen.getByTestId('breadcrumbs')).toBeInTheDocument();
-    });
-});
+  it('should render the Breadcrumbs component', () => {
+    (0, _helpers.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      links: links,
+      "data-testid": "breadcrumbs"
+    }));
+    expect(_react.screen.getByTestId('breadcrumbs')).toBeInTheDocument();
+  });
+});

package/dist/components/Breadcrumbs/breadcrumbs.theme.js

@@ -1,10 +1,17 @@
-const breadcrumbs = (theme) => ({
-    styleOverrides: {
-        root: () => ({
-            '& .MuiBreadcrumbs-separator': {
-                color: theme.palette.text.disabled
-            }
-        })
-    }
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-export default breadcrumbs;
+exports.default = void 0;
+const breadcrumbs = theme => ({
+  styleOverrides: {
+    root: () => ({
+      '& .MuiBreadcrumbs-separator': {
+        color: theme.palette.text.disabled
+      }
+    })
+  }
+});
+var _default = breadcrumbs;
+exports.default = _default;

package/dist/components/Breadcrumbs/index.js

@@ -1,34 +1,57 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Breadcrumbs, Link, Typography } from '@mui/material';
-import theme from '../../assets/theme';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _material = require("@mui/material");
+var _theme = _interopRequireDefault(require("../../assets/theme"));
+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
  * - The last link is not clickable
  * - The last link is styled differently
  **/
-const BreadcrumbsComponent = ({ links = [] }) => {
-    return (_jsx(Breadcrumbs, Object.assign({ "aria-label": "breadcrumbs", "data-testid": "breadcrumbs" }, { children: links === null || links === void 0 ? void 0 : links.map((link, index) => {
-            if (index === links.length - 1) {
-                return (_jsx(Typography, Object.assign({ sx: {
-                        color: theme.palette.text.disabled,
-                        fontFamily: 'Dosis',
-                        fontStyle: 'normal',
-                        fontWeight: 600,
-                        fontSize: '18px',
-                        textTransform: 'uppercase'
-                    } }, { children: link.label }), index));
-            }
-            else {
-                return (_jsx(Link, Object.assign({ href: link.href }, { children: _jsx(Typography, Object.assign({ sx: {
-                            color: theme.palette.button.main,
-                            fontFamily: 'Dosis',
-                            fontStyle: 'normal',
-                            fontWeight: 600,
-                            fontSize: '18px',
-                            textTransform: 'uppercase'
-                        } }, { children: link.label }), index) }), link.href));
-            }
-        }) })));
+
+const BreadcrumbsComponent = ({
+  links = []
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Breadcrumbs, {
+    "aria-label": "breadcrumbs",
+    "data-testid": "breadcrumbs",
+    children: links?.map((link, index) => {
+      if (index === links.length - 1) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          sx: {
+            color: _theme.default.palette.text.disabled,
+            fontFamily: 'Dosis',
+            fontStyle: 'normal',
+            fontWeight: 600,
+            fontSize: '18px',
+            textTransform: 'uppercase'
+          },
+          children: link.label
+        }, index);
+      } else {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Link, {
+          href: link.href,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+            sx: {
+              color: _theme.default.palette.button.main,
+              fontFamily: 'Dosis',
+              fontStyle: 'normal',
+              fontWeight: 600,
+              fontSize: '18px',
+              textTransform: 'uppercase'
+            },
+            children: link.label
+          }, index)
+        }, link.href);
+      }
+    })
+  });
 };
-export default BreadcrumbsComponent;
+var _default = BreadcrumbsComponent;
+exports.default = _default;

package/dist/components/Button/Button.stories.js

@@ -1,47 +1,99 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@mui/material';
-import Button from './';
-import CalendarIcon from '@mui/icons-material/CalendarTodayOutlined';
-import { Fragment } from 'react';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Text = exports.Outlined = exports.Contained = void 0;
+var _material = require("@mui/material");
+var _ = _interopRequireDefault(require("./"));
+var _CalendarTodayOutlined = _interopRequireDefault(require("@mui/icons-material/CalendarTodayOutlined"));
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // import { userEvent, within } from '@storybook/testing-library'
 // import { expect } from '@storybook/jest'
-export default {
-    title: 'Components/Button',
-    component: Button,
-    // argType: {
-    //   variant: `contained`,
-    // },
-    parameters: {
-        componentSubtitle: 'Clickable Button with many variations',
-        controls: {
-            exclude: ['variant', 'classes']
-        }
+var _default = {
+  title: 'Components/Button',
+  component: _.default,
+  // argType: {
+  //   variant: `contained`,
+  // },
+  parameters: {
+    componentSubtitle: 'Clickable Button with many variations',
+    controls: {
+      exclude: ['variant', 'classes']
     }
+  }
 };
-const previewProps = [
-    {},
-    {
-        startIcon: _jsx(CalendarIcon, {})
-    },
-    {
-        endIcon: _jsx(CalendarIcon, {})
-    }
-];
-const Template = (args) => (_jsx(Box, Object.assign({ sx: {
-        display: `grid`,
-        gridTemplateColumns: `repeat(4, min-content)`,
-        justifyItems: `flex-start`,
-        gap: 2
-    } }, { children: previewProps.map((props, index) => (_jsxs(Fragment, { children: [_jsx(Button, Object.assign({}, props, args, { children: "Button" })), _jsx(Button, Object.assign({}, props, { color: `error` }, args, { children: "Button" })), _jsx(Button, Object.assign({}, props, { disabled: true }, args, { children: "Button" })), _jsx(Button, Object.assign({}, props, { isLoading: true }, args, { children: "Button" }))] }, index))) })));
-export const Contained = Template.bind({});
+exports.default = _default;
+const previewProps = [{}, {
+  startIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CalendarTodayOutlined.default, {})
+}, {
+  endIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CalendarTodayOutlined.default, {})
+}];
+const Template = args => /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+  sx: {
+    display: `grid`,
+    gridTemplateColumns: `repeat(4, min-content)`,
+    justifyItems: `flex-start`,
+    gap: 2
+  },
+  children: previewProps.map((props, index) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      ...props,
+      ...args,
+      children: "Button"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      ...props,
+      color: `error`,
+      ...args,
+      children: "Button"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      ...props,
+      disabled: true,
+      ...args,
+      children: "Button"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      ...props,
+      isLoading: true,
+      ...args,
+      children: "Button"
+    })]
+  }, index))
+});
+const Contained = Template.bind({});
+exports.Contained = Contained;
 Contained.args = {
-    variant: 'contained'
+  variant: 'contained'
 };
-export const Outlined = Template.bind({});
+const Outlined = Template.bind({});
+exports.Outlined = Outlined;
 Outlined.args = {
-    variant: 'outlined'
+  variant: 'outlined'
 };
-export const Text = Template.bind({});
+const Text = Template.bind({});
+exports.Text = Text;
 Text.args = {
-    variant: `text`
+  variant: `text`
 };
+
+/*
+ * New story using the play function.
+ * See https://storybook.js.org/docs/react/writing-stories/play-function
+ * to learn more about the play function.
+ */
+//  export const WithInteractions = (args) => <Button {...args} />;
+// export const WithInteractions = Template.bind({})
+//  WithInteractions.args = {
+//    href: 'http://storybook.js.org',
+//  }
+
+//  WithInteractions.play = async ({ canvasElement }) => {
+//   // Assigns canvas to the component root element
+//    const canvas = within(canvasElement)
+//    await userEvent.click(canvas.getByRole('link'))
+//    expect(canvas.getByRole('link')).toHaveAttribute(
+//      'href',
+//      'http://storybook.js.org',
+//     )
+//  }

package/dist/components/Button/Indicator.js

@@ -1,19 +1,34 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { CircularProgress, Box } from '@mui/material';
-import theme from '../../assets/theme';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _material = require("@mui/material");
+var _theme = _interopRequireDefault(require("../../assets/theme"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const Indicator = () => {
-    return (_jsx(Box, Object.assign({ className: "button-loader", "data-testid": "loading-indicator", sx: {
-            position: `absolute`,
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            display: `grid`,
-            justifyItems: `center`,
-            alignItems: `center`,
-            background: theme.palette.misc.rowHoverGreyOne,
-            border: `1px solid ${theme.palette.misc.rowOnHoverGreyTwo}`,
-            borderRadius: '0.2rem'
-        } }, { children: _jsx(CircularProgress, { size: 20 }) })));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+    className: "button-loader",
+    "data-testid": "loading-indicator",
+    sx: {
+      position: `absolute`,
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      display: `grid`,
+      justifyItems: `center`,
+      alignItems: `center`,
+      background: _theme.default.palette.misc.rowHoverGreyOne,
+      border: `1px solid ${_theme.default.palette.misc.rowOnHoverGreyTwo}`,
+      borderRadius: '0.2rem'
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.CircularProgress, {
+      size: 20
+    })
+  });
 };
-export default Indicator;
+var _default = Indicator;
+exports.default = _default;

package/dist/components/Button/__tests__/Button.test.js

@@ -1,34 +1,59 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { render } from '../../../utils/tests/helpers';
-import { screen } from '@testing-library/react';
-import Button from '..';
+"use strict";
+
+var _helpers = require("../../../utils/tests/helpers");
+var _react = require("@testing-library/react");
+var _ = _interopRequireDefault(require(".."));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 describe('<Button />', () => {
-    it('should render the Button component', () => {
-        render(_jsx(Button, { children: "Button" }));
-        expect(screen.getByText('Button')).toBeInTheDocument();
-    });
-    it('should render error Button component', () => {
-        render(_jsx(Button, Object.assign({ color: "error" }, { children: "Button" })));
-        expect(screen.getByText('Button')).toBeInTheDocument();
-    });
-    it('should render loading Button component', () => {
-        render(_jsx(Button, Object.assign({ isLoading: true }, { children: "Button" })));
-        expect(screen.getByTestId('loading-indicator')).toBeInTheDocument();
-    });
-    it('should render outlined Button component', () => {
-        render(_jsx(Button, Object.assign({ variant: "outlined" }, { children: "Button" })));
-        expect(screen.getByText('Button')).toBeInTheDocument();
-    });
-    it('should render error outlined Button component', () => {
-        render(_jsx(Button, Object.assign({ variant: "outlined", color: "error" }, { children: "Button" })));
-        expect(screen.getByText('Button')).toBeInTheDocument();
-    });
-    it('should render text Button component', () => {
-        render(_jsx(Button, Object.assign({ variant: "text" }, { children: "Button" })));
-        expect(screen.getByText('Button')).toBeInTheDocument();
-    });
-    it('should render error text Button component', () => {
-        render(_jsx(Button, Object.assign({ variant: "text", color: "error" }, { children: "Button" })));
-        expect(screen.getByText('Button')).toBeInTheDocument();
-    });
-});
+  it('should render the Button component', () => {
+    (0, _helpers.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      children: "Button"
+    }));
+    expect(_react.screen.getByText('Button')).toBeInTheDocument();
+  });
+  it('should render error Button component', () => {
+    (0, _helpers.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      color: "error",
+      children: "Button"
+    }));
+    expect(_react.screen.getByText('Button')).toBeInTheDocument();
+  });
+  it('should render loading Button component', () => {
+    (0, _helpers.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      isLoading: true,
+      children: "Button"
+    }));
+    expect(_react.screen.getByTestId('loading-indicator')).toBeInTheDocument();
+  });
+  it('should render outlined Button component', () => {
+    (0, _helpers.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      variant: "outlined",
+      children: "Button"
+    }));
+    expect(_react.screen.getByText('Button')).toBeInTheDocument();
+  });
+  it('should render error outlined Button component', () => {
+    (0, _helpers.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      variant: "outlined",
+      color: "error",
+      children: "Button"
+    }));
+    expect(_react.screen.getByText('Button')).toBeInTheDocument();
+  });
+  it('should render text Button component', () => {
+    (0, _helpers.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      variant: "text",
+      children: "Button"
+    }));
+    expect(_react.screen.getByText('Button')).toBeInTheDocument();
+  });
+  it('should render error text Button component', () => {
+    (0, _helpers.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      variant: "text",
+      color: "error",
+      children: "Button"
+    }));
+    expect(_react.screen.getByText('Button')).toBeInTheDocument();
+  });
+});