@veritone-ce/design-system 1.12.5 → 1.12.6

package/dist/components/UtilityRail/UtilityRail.stories.d.ts

@@ -0,0 +1,8 @@
+import { ComponentStory, Story, ComponentMeta } from '@storybook/react';
+import UtilityRail from '.';
+declare const _default: ComponentMeta<({ items, ...props }: {
+    items: import(".").Item[];
+    'data-testid'?: string | undefined;
+}) => JSX.Element>;
+export default _default;
+export declare const Default: ComponentStory<typeof UtilityRail> | Story;

package/dist/components/UtilityRail/UtilityRail.stories.js

@@ -0,0 +1,22 @@
+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 { mock } from './mock';
+import UtilityRail from '.';
+export default {
+    title: 'Components/UtilityRail',
+    component: UtilityRail
+};
+export const Default = (_a) => {
+    var args = __rest(_a, []);
+    return _jsx(UtilityRail, Object.assign({ items: mock }, args));
+};

package/dist/components/UtilityRail/__tests__/UtilityRail.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '../../../utils/tests/helpers';
+import { screen } from '@testing-library/react';
+import UtilityRail from '..';
+import { mock } from '../mock';
+describe('<UtilityRail />', () => {
+    it('should render the UtilityRail component', () => {
+        render(_jsx(UtilityRail, { items: mock }));
+        expect(screen.getByText('UtilityRail')).toBeInTheDocument();
+    });
+    it('should render a specific amount of items', () => {
+        render(_jsx(UtilityRail, { "data-testid": "utility-rail", items: [
+                {
+                    title: 'Title item 1',
+                    subtitle: 'Subtitle item 1',
+                    description: 'Description item 1'
+                },
+                {
+                    title: 'Title item 2',
+                    subtitle: 'Subtitle item 2',
+                    description: 'Description item 2'
+                }
+            ] }));
+        const utilityRail = screen.getByTestId('utility-rail');
+        expect(utilityRail.childElementCount).toHaveLength(2);
+    });
+});

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

@@ -0,0 +1,11 @@
+export type Item = {
+    title: string;
+    subtitle: string;
+    description: string;
+};
+type UtilityRailProps = {
+    items: Item[];
+    'data-testid'?: string;
+};
+declare const UtilityRail: ({ items, ...props }: UtilityRailProps) => JSX.Element;
+export default UtilityRail;

package/dist/components/UtilityRail/index.js

@@ -0,0 +1,54 @@
+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 } from "react/jsx-runtime";
+import { useTheme } from '@mui/material/styles';
+import { Typography, Box } from '@mui/material';
+const UtilityRail = (_a) => {
+    var { items } = _a, props = __rest(_a, ["items"]);
+    const { palette } = useTheme();
+    return (_jsx(Box, Object.assign({}, props, { sx: {
+            'div:last-of-type': {
+                borderLeft: `0.125rem transparent solid`
+            }
+        } }, { children: items.map((item, index) => (_jsx(Box, Object.assign({ "data-testid": `item-${index}`, sx: {
+                '&::before': {
+                    content: '""',
+                    display: 'block',
+                    height: '0.625rem',
+                    width: '0.625rem',
+                    marginLeft: '-0.5rem',
+                    borderRadius: '50%',
+                    border: `0.125rem ${palette.secondary.main} solid`,
+                    backgroundColor: `${palette.common.white}`
+                },
+                borderLeft: `0.125rem ${palette.secondary.main} solid`,
+                display: 'flex'
+            } }, { children: _jsxs(Box, Object.assign({ sx: {
+                    padding: '0 1.25rem 1.25rem'
+                } }, { children: [_jsx(Typography, Object.assign({ sx: {
+                            fontSize: '0.625rem',
+                            fontWeight: 400,
+                            lineHeight: '1rem',
+                            color: palette.text.secondary
+                        } }, { children: item.subtitle })), _jsx(Typography, Object.assign({ sx: {
+                            fontSize: '0.75rem',
+                            fontWeight: 400,
+                            lineHeight: '1rem',
+                            color: palette.text.primary
+                        } }, { children: item.title })), _jsx(Typography, Object.assign({ sx: {
+                            fontSize: '0.625rem',
+                            fontWeight: 400,
+                            lineHeight: '1rem',
+                            color: palette.text.secondary
+                        } }, { children: item.description }))] })) }), index))) })));
+};
+export default UtilityRail;

package/dist/components/UtilityRail/mock.d.ts

@@ -0,0 +1,2 @@
+import { Item } from '.';
+export declare const mock: Item[];

package/dist/components/UtilityRail/mock.js

@@ -0,0 +1,32 @@
+export const mock = [
+    {
+        title: 'Variant Exported by user567',
+        subtitle: '1.2.21_01:10:00',
+        description: 'Language: Spanish • Voice: Anna'
+    },
+    {
+        title: 'Variant Exported by user567',
+        subtitle: '1.2.21_01:10:00',
+        description: 'Language: Spanish • Voice: Anna'
+    },
+    {
+        title: 'Variant Exported by user567',
+        subtitle: '1.2.21_01:10:00',
+        description: 'Language: Spanish • Voice: Anna'
+    },
+    {
+        title: 'Variant Exported by user567',
+        subtitle: '1.2.21_01:10:00',
+        description: 'Language: Spanish • Voice: Anna'
+    },
+    {
+        title: 'Variant Exported by user567',
+        subtitle: '1.2.21_01:10:00',
+        description: 'Language: Spanish • Voice: Anna'
+    },
+    {
+        title: 'Variant Exported by user567',
+        subtitle: '1.2.21_01:10:00',
+        description: 'Language: Spanish • Voice: Anna'
+    }
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritone-ce/design-system",
-  "version": "1.12.5",
+  "version": "1.12.6",
   "private": false,
   "scripts": {
     "start": "yarn storybook",
@@ -14,7 +14,7 @@
     "build-storybook": "build-storybook -s public",
     "test-storybook": "test-storybook",
     "build-storybook-docs": "build-storybook  --docs",
-    "prepare": "install-peers",
+    "prepare": "install-peers && husky install",
     "commit": "cz",
     "typecheck": "tsc --noEmit",
     "chromatic": "npx chromatic --project-token=2d24b3ec5211 --exit-zero-on-changes"
@@ -46,7 +46,6 @@
     "@types/node": "^16.7.13",
     "axios": "^1.2.1",
     "cz-conventional-changelog": "^3.3.0",
-    "husky": "^8.0.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
@@ -87,7 +86,7 @@
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "husky": "^8.0.2",
+    "husky": "8.0.2",
     "install-peers-cli": "^2.2.0",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",