@veritone-ce/design-system 2.4.4 → 2.4.6

package/README.md

@@ -40,3 +40,19 @@ Builds the documentation for production to the `storybook-static` folder.
 You can learn more in the [Storybook Design System for Developers](https://storybook.js.org/tutorials/design-systems-for-developers/). [Chromatic](https://www.chromatic.com/docs/)
 
 To learn React, check out the [React documentation](https://reactjs.org/).
+
+## To Test in Another App
+
+Are you adding new components or making changes in the Design System that you want to test out locally in another application? Here are some instructions to get you started.
+
+1. In Design System run `yarn publish:local`
+
+   - If this is your first time, you may need be prompted to install `yalc`, proceed with `y` to install it.
+
+2. In the other app running locally, run `npx yalc add @veritone-ce/design-system`
+
+   - This will replace the `@veritone-ce/design-system` in the package.json with the local version.
+
+   **Be sure to revert the package.json changes before pushing changes**
+
+3. Repeat steps 1 & 2 after any design system changes to update them in the other app.

package/dist/cjs/Checkbox/index.js

@@ -52,6 +52,7 @@ const Checkbox = React.forwardRef(
         "data-testid": dataTestId,
         style,
         className: cx.cx(styles_module.default["checkbox"], className),
+        "data-pendo": props["data-pendo"],
         children: [
           /* @__PURE__ */ jsxRuntime.jsxs("label", { className: styles_module.default["passthrough-label-container"], children: [
             /* @__PURE__ */ jsxRuntime.jsx(

package/dist/cjs/IconButton/index.js

@@ -29,6 +29,7 @@ const IconButton = React.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
+        ...props,
         ref,
         type: props.type,
         "data-loading": loading,

package/dist/cjs/Menu/controlled.js

@@ -129,6 +129,7 @@ function Menu({
                 {
                   role: "menuitem",
                   isActive: i === activeIndex,
+                  disabled: option.disabled,
                   ...getItemProps({
                     onClick(event) {
                       option.onSelect(event);
@@ -136,7 +137,8 @@ function Menu({
                   }),
                   render: option.render,
                   label: option.label,
-                  icon: option.icon
+                  icon: option.icon,
+                  "data-pendo": option["data-pendo"]
                 },
                 i
               ))

package/dist/cjs/Select/controlled.js

@@ -76,7 +76,8 @@ function ControlledSelect({
                 setOpen(true);
                 props.onInputChange(e, e.target.value);
               },
-              className: styles_module.default["inner-input"]
+              className: styles_module.default["inner-input"],
+              "data-pendo": props["data-pendo"]
             }
           ) }),
           selectedOption && clearable && /* @__PURE__ */ jsxRuntime.jsx(

package/dist/cjs/TablePagination/index.js

@@ -35,7 +35,8 @@ function TablePagination({
           value: option
         })),
         onChange: (_, newRowsPerPage) => props.onRowsPerPageChange?.(newRowsPerPage),
-        className: styles_module.default["rows-per-page-select"]
+        className: styles_module.default["rows-per-page-select"],
+        "data-pendo": props["data-pendo-select"]
       }
     ) }),
     /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles_module.default["page-counts"], children: [
@@ -53,6 +54,7 @@ function TablePagination({
           type: "button",
           disabled: !showPrev,
           onClick: () => props.onChangePage(page - 1),
+          "data-pendo": props["data-pendo-prev"],
           children: /* @__PURE__ */ jsxRuntime.jsx(internal.NavigateBeforeIcon, {})
         }
       ) }),
@@ -62,6 +64,7 @@ function TablePagination({
           type: "button",
           disabled: !showNext,
           onClick: () => props.onChangePage(page + 1),
+          "data-pendo": props["data-pendo-next"],
           children: /* @__PURE__ */ jsxRuntime.jsx(internal.NavigateNextIcon, {})
         }
       ) })

package/dist/esm/Checkbox/index.js

@@ -48,6 +48,7 @@ const Checkbox = forwardRef(
         "data-testid": dataTestId,
         style,
         className: cx(css["checkbox"], className),
+        "data-pendo": props["data-pendo"],
         children: [
           /* @__PURE__ */ jsxs("label", { className: css["passthrough-label-container"], children: [
             /* @__PURE__ */ jsx(

package/dist/esm/IconButton/index.js

@@ -25,6 +25,7 @@ const IconButton = forwardRef(
     return /* @__PURE__ */ jsxs(
       "button",
       {
+        ...props,
         ref,
         type: props.type,
         "data-loading": loading,

package/dist/esm/Menu/controlled.js

@@ -125,6 +125,7 @@ function Menu({
                 {
                   role: "menuitem",
                   isActive: i === activeIndex,
+                  disabled: option.disabled,
                   ...getItemProps({
                     onClick(event) {
                       option.onSelect(event);
@@ -132,7 +133,8 @@ function Menu({
                   }),
                   render: option.render,
                   label: option.label,
-                  icon: option.icon
+                  icon: option.icon,
+                  "data-pendo": option["data-pendo"]
                 },
                 i
               ))

package/dist/esm/Select/controlled.js

@@ -72,7 +72,8 @@ function ControlledSelect({
                 setOpen(true);
                 props.onInputChange(e, e.target.value);
               },
-              className: css["inner-input"]
+              className: css["inner-input"],
+              "data-pendo": props["data-pendo"]
             }
           ) }),
           selectedOption && clearable && /* @__PURE__ */ jsx(

package/dist/esm/TablePagination/index.js

@@ -31,7 +31,8 @@ function TablePagination({
           value: option
         })),
         onChange: (_, newRowsPerPage) => props.onRowsPerPageChange?.(newRowsPerPage),
-        className: css["rows-per-page-select"]
+        className: css["rows-per-page-select"],
+        "data-pendo": props["data-pendo-select"]
       }
     ) }),
     /* @__PURE__ */ jsxs("span", { className: css["page-counts"], children: [
@@ -49,6 +50,7 @@ function TablePagination({
           type: "button",
           disabled: !showPrev,
           onClick: () => props.onChangePage(page - 1),
+          "data-pendo": props["data-pendo-prev"],
           children: /* @__PURE__ */ jsx(NavigateBeforeIcon, {})
         }
       ) }),
@@ -58,6 +60,7 @@ function TablePagination({
           type: "button",
           disabled: !showNext,
           onClick: () => props.onChangePage(page + 1),
+          "data-pendo": props["data-pendo-next"],
           children: /* @__PURE__ */ jsx(NavigateNextIcon, {})
         }
       ) })

package/dist/types/Checkbox/index.d.ts

@@ -7,6 +7,7 @@ export type CheckboxProps = Omit<React.ComponentPropsWithoutRef<'input'>, 'type'
     disabled?: boolean;
     onChange?(event: React.ChangeEvent<HTMLInputElement>, checked: boolean): void;
     'data-testid'?: string;
+    'data-pendo'?: string;
     style?: React.CSSProperties;
     className?: string;
 };
@@ -18,6 +19,7 @@ declare const Checkbox: React.ForwardRefExoticComponent<Omit<Omit<React.Detailed
     disabled?: boolean | undefined;
     onChange?(event: React.ChangeEvent<HTMLInputElement>, checked: boolean): void;
     'data-testid'?: string | undefined;
+    'data-pendo'?: string | undefined;
     style?: React.CSSProperties | undefined;
     className?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>;

package/dist/types/Menu/controlled.d.ts

@@ -5,6 +5,8 @@ export type MenuOption = {
     render?: React.ReactNode;
     icon?: React.ReactNode;
     onSelect(e: React.MouseEvent<HTMLButtonElement>): void;
+    'data-pendo'?: string;
+    disabled?: boolean;
 };
 export type MenuRole = 'tooltip' | 'dialog' | 'alertdialog' | 'menu' | 'listbox' | 'grid' | 'tree' | 'select' | 'label' | 'combobox';
 export type MenuProps = {
@@ -32,6 +34,7 @@ export type MenuItemProps = {
     icon?: React.ReactNode;
     isActive: boolean;
     disabled?: boolean;
+    'data-pendo'?: string;
 };
 export declare const MenuItem: React.ForwardRefExoticComponent<MenuItemProps & React.ButtonHTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
 export default Menu;

package/dist/types/Select/controlled.d.ts

@@ -5,6 +5,7 @@ export type ControlledSelectProps<OptionValue> = CommonSelectProps<OptionValue>
     inputValue: string;
     onChange(event: React.SyntheticEvent<HTMLElement>, newValue: SelectValue<OptionValue>): void;
     onInputChange(event: React.SyntheticEvent<HTMLElement>, newValue: string): void;
+    'data-pendo'?: string;
 };
 declare function ControlledSelect<OptionValue>({ ref, endIcon, placeholder, clearable, ...props }: ControlledSelectProps<OptionValue>): import("react/jsx-runtime").JSX.Element;
 export default ControlledSelect;

package/dist/types/TablePagination/index.d.ts

@@ -7,6 +7,9 @@ export type TablePaginationProps = {
     onRowsPerPageChange?(rowsPerPage: number): void;
     rowsPerPageOptions?: number[];
     rowsPerPageLabel?: React.ReactNode;
+    'data-pendo-select'?: string;
+    'data-pendo-prev'?: string;
+    'data-pendo-next'?: string;
     className?: string;
 };
 export default function TablePagination({ page, count, rowsPerPage, rowsPerPageOptions, rowsPerPageLabel, ...props }: TablePaginationProps): import("react/jsx-runtime").JSX.Element;

package/package.json

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