@spaced-out/ui-design-system 0.4.13-beta.1 → 0.4.14

package/lib/components/OptionButton/SimpleOptionButton.stories.js

@@ -1,552 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports._WithTooltip = exports._WithHeaderAndFooter = exports._TextWithTooltip = exports._TextOnly = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _Button = require("../Button");
-var _ButtonDropdown = require("../ButtonDropdown");
-var _Menu = require("../Menu/Menu.stories");
-var _SimpleOptionButton = require("./SimpleOptionButton");
-var _OptionButtonStoriesModule = _interopRequireDefault(require("./OptionButton.stories.module.css"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const anchorPositionOptions = [...Object.values(_ButtonDropdown.ANCHOR_POSITION_TYPE)];
-const actionTypeOptions = [...Object.values(_Button.BUTTON_ACTION_TYPE)];
-var _default = exports.default = {
-  tags: ['autodocs'],
-  title: 'Components/Option Button/Simple Option Button',
-  component: _SimpleOptionButton.SimpleOptionButton,
-  argTypes: {
-    onButtonClick: {
-      description: '**onButtonClick** handler that is applied to the root `<button>` element',
-      action: 'clicked',
-      table: {
-        type: {
-          summary: '(SyntheticEvent<HTMLElement>) => mixed'
-        }
-      }
-    },
-    iconLeftName: {
-      description: 'Left icon to be applied to the button, it internally uses the `Icon` component to render icons',
-      control: {
-        type: 'text'
-      },
-      table: {
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    iconLeftType: {
-      description: 'Type of Left Icon. Type represents 4 unique icon styles :- Solid, Regular, Duotone and Brands',
-      options: ['regular', 'solid', 'duotone', 'brands'],
-      control: {
-        type: 'select'
-      },
-      table: {
-        type: {
-          summary: 'string'
-        },
-        defaultValue: {
-          summary: 'regular'
-        }
-      }
-    },
-    type: {
-      options: ['primary', 'secondary', 'tertiary', 'ghost', 'danger'],
-      description: 'Type of Button. Supported types are listed on the dropdown',
-      control: {
-        type: 'select'
-      },
-      table: {
-        type: {
-          summary: 'enum'
-        },
-        defaultValue: {
-          summary: 'primary'
-        }
-      }
-    },
-    actionType: {
-      options: actionTypeOptions,
-      description: 'Action type of Button. Supported types are listed on the dropdown',
-      control: {
-        type: 'select'
-      },
-      table: {
-        type: {
-          summary: 'enum'
-        },
-        defaultValue: {
-          summary: 'submit'
-        }
-      }
-    },
-    size: {
-      description: 'Option Button supports only two size variants namely small and medium. `small` < `medium`',
-      control: {
-        type: 'radio'
-      },
-      options: ['small', 'medium'],
-      table: {
-        type: {
-          summary: 'enum'
-        },
-        defaultValue: {
-          summary: 'small'
-        }
-      }
-    },
-    menuSize: {
-      description: 'Size of Menu',
-      control: {
-        type: 'radio'
-      },
-      options: ['small', 'medium'],
-      table: {
-        type: {
-          summary: 'enum'
-        },
-        defaultValue: {
-          summary: 'small'
-        }
-      }
-    },
-    disabled: {
-      description: 'If **true**, the component is disabled',
-      control: {
-        type: 'boolean'
-      },
-      table: {
-        type: {
-          summary: 'boolean'
-        },
-        defaultValue: {
-          summary: 'false'
-        }
-      }
-    },
-    isLoading: {
-      description: 'If **true**, the component would show a circular loader and also preserve the current size of button so that there are no jumps',
-      control: {
-        type: 'boolean'
-      },
-      table: {
-        type: {
-          summary: 'boolean'
-        },
-        defaultValue: {
-          summary: 'false'
-        }
-      }
-    },
-    isFluid: {
-      description: 'If **true**, the component would take the container\'s `width`',
-      control: {
-        type: 'boolean'
-      },
-      table: {
-        type: {
-          summary: 'boolean'
-        },
-        defaultValue: {
-          summary: 'false'
-        }
-      }
-    },
-    children: {
-      description: 'The content of the Button',
-      table: {
-        type: {
-          summary: 'React.Component | string'
-        }
-      }
-    },
-    ariaLabel: {
-      control: {
-        type: 'text'
-      },
-      description: '**aria-label** should be used where Option Button do not have have discernible text. This would avoid accessibility violations in screen readers',
-      table: {
-        type: {
-          summary: 'string'
-        }
-      }
-    },
-    onOptionSelect: {
-      description: '**onOptionSelect** handler is triggered when there is a change in selected option',
-      action: 'clicked',
-      table: {
-        type: {
-          summary: '(option: MenuOption, ?SyntheticEvent<HTMLElement>) => mixed'
-        }
-      }
-    },
-    onMenuOpen: {
-      description: '**onMenuOpen** handler is triggered when menu is opened. This should be helpful in cases where you want to change Button icon / text on this trigger.',
-      action: 'clicked',
-      table: {
-        type: {
-          summary: '() => mixed'
-        }
-      }
-    },
-    onMenuClose: {
-      description: '**onMenuClose** handler is triggered when menu is closed. This should be helpful in cases where you want to change Button icon / text on this trigger.',
-      action: 'clicked',
-      table: {
-        type: {
-          summary: '() => mixed'
-        }
-      }
-    },
-    anchorPosition: {
-      options: anchorPositionOptions,
-      description: 'Position of Menu. It can be any one value from the dropdown',
-      control: {
-        type: 'select'
-      },
-      table: {
-        type: {
-          summary: 'enum'
-        },
-        defaultValue: {
-          summary: 'bottom-start'
-        }
-      }
-    },
-    classNames: {
-      description: 'External classNames to be applied',
-      control: {
-        type: 'object'
-      },
-      table: {
-        type: {
-          summary: '{wrapper?: string, baseButtonWrapper?: string, baseButtonIcon?: string, optionsButtonWrapper?: string, optionsButtonIcon?: string, dropdownContainer?: string,}'
-        }
-      }
-    },
-    menuClassNames: {
-      description: 'External classnames to be applied to the menu. Wrapper gets applied to Menu wrapper and option gets applied to each option in the menu.',
-      control: {
-        type: 'object'
-      },
-      table: {
-        type: {
-          summary: '{wrapper?: string, option?: string, groupTitle?: string, optionTextContainer?: string, optionTextLabel?: string}'
-        }
-      }
-    },
-    tooltip: {
-      control: {
-        type: 'object'
-      },
-      description: 'Field to set the **Tooltip** for Base Button and Options Button',
-      table: {
-        type: {
-          summary: 'OptionButtonTooltipProps'
-        }
-      }
-    },
-    options: {
-      description: 'Options to be displayed in buttonOptionButton',
-      control: {
-        type: 'object'
-      },
-      table: {
-        type: {
-          summary: 'Array<MenuOption>'
-        }
-      }
-    },
-    optionsVariant: {
-      description: 'Menu supports multiple options variant',
-      control: {
-        type: 'select'
-      },
-      options: ['checkbox', 'radio', 'normal'],
-      table: {
-        type: {
-          summary: 'enum'
-        },
-        defaultValue: {
-          summary: 'normal'
-        }
-      }
-    },
-    allowSearch: {
-      description: `if **true**, the component would show a search input on top of menu.
-        This is a simple **static search**
-        which filter options by **matching search text to option label**`,
-      control: {
-        type: 'boolean'
-      },
-      table: {
-        type: {
-          summary: 'boolean'
-        },
-        defaultValue: {
-          summary: false
-        }
-      }
-    },
-    selectedKeys: {
-      description: 'Selected keys corresponding to options. These options are shown as selected in UI',
-      control: {
-        type: 'array'
-      },
-      table: {
-        type: {
-          summary: 'Array<string>'
-        }
-      }
-    },
-    resolveLabel: {
-      description: 'A function that resolves the label for a MenuOption. This is useful when you want to customize the label of an option based on some condition',
-      table: {
-        type: {
-          summary: '(option: MenuOption) => string | React.ReactNode'
-        }
-      }
-    },
-    resolveSecondaryLabel: {
-      description: 'A function that resolves the secondary label for a MenuOption. This is useful when you want to customize the secondary label of an option based on some condition',
-      table: {
-        type: {
-          summary: '(option: MenuOption) => string | React.ReactNode'
-        }
-      }
-    },
-    menuVirtualization: {
-      description: `If **Enabled**, the options will only be rendered when they are within the component's viewport. **menuHeight and itemHeight** accept numerical input, interpreted as pixel values.`,
-      control: {
-        type: 'object'
-      },
-      table: {
-        type: {
-          summary: '{enable: boolean, menuHeight?: number, itemHeight?: number}'
-        }
-      }
-    },
-    header: {
-      description: 'Custom Header For the Menu',
-      table: {
-        type: {
-          summary: 'React.ReactNode'
-        }
-      }
-    },
-    footer: {
-      description: 'Custom Header For the Menu',
-      table: {
-        type: {
-          summary: 'React.ReactNode'
-        }
-      }
-    },
-    clickAwayRef: {
-      type: {
-        optional: true
-      },
-      description: 'ref that contains the functions to open or close the child',
-      table: {
-        type: {
-          summary: 'ClickAwayRefType'
-        }
-      }
-    },
-    showLabelTooltip: {
-      description: 'Show Tooltip on the label of the menu option if truncated',
-      control: {
-        type: 'object'
-      },
-      table: {
-        type: {
-          summary: 'MenuLabelTooltip'
-        }
-      }
-    },
-    allowWrap: {
-      description: 'Allows the label to wrap up to 3 lines. If truncated, a tooltip will display up to 10 lines.',
-      control: {
-        type: 'boolean'
-      },
-      table: {
-        type: {
-          summary: 'boolean'
-        },
-        defaultValue: {
-          summary: false
-        }
-      }
-    }
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a OptionButton component',
-      description: {
-        component: `
-\`\`\`js
-import { SimpleOptionButton } from "@spaced-out/ui-design-system/lib/components/OptionButton";
-\`\`\`
-Simple Option Button allow users to take the main action, and also provides with multiple options related to the main action.
-SimpleOptionButton comes with multiple variants and has various states(hover, focus, etc). There are two parts of SimpleOptionButton,
-left button to perform main action, right button to select any further options related to main action.
-
-**Note: ** Always use \`ariaLabel\` with Icon only option button to avoid accessibility violation
-
-- **SimpleOptionButton** serially spreads out BaseMenuProps, meaning it would accept options as a prop instead of whole Menu.
-- **SimpleOptionButton** would have implicit label selection behavior built in, meaning if you select an option the
-label would get auto populated for the component itself.
-- The component maintains an internal state for selections. You can always override it with explicit **selectedKeys**
-prop which changes on **onOptionSelect** callback.
-- You can always get the most recent instance of selected options from ref by using \`ref.current?.selectedKeys\`. This might be useful when you have
-options which are multi-select.
-- The component also supports custom **header** as \`React Component\` and this is then passed in
-the **<a href="../?path=/docs/components-menu--docs">Menu</a>** Component.
-- The component also supports custom **footer** as \`React Component\` and this is then passed in
-the **<a href="../?path=/docs/components-menu--docs">Menu</a>** Component. This might be useful when you need
-to save some state in the parent component.
-- You can always force Open  the options instance from ref by using \`clickAwayRef.current?.forceOpen\`. This might be useful when want to force Open as per you needs.
-- You can always force Close the options instance from ref by using \`clickAwayRef.current?.forceClose\`. This might be useful when want to force Close as per you needs.
-
-
-        `
-      }
-    },
-    storySource: {
-      componentPath: '/src/components/OptionButton/OptionButton.jsx'
-    }
-  }
-};
-const options = [{
-  key: '1',
-  label: 'Option one',
-  iconLeft: 'coffee'
-}, {
-  key: '2',
-  label: 'Option two',
-  iconLeft: 'user'
-}, {
-  key: '4',
-  label: 'Option three this is a very long option that would truncate',
-  iconLeft: 'face-party'
-}, {
-  key: '5',
-  label: 'Option five(disabled)',
-  disabled: true,
-  iconLeft: 'flag'
-}, {
-  key: '6',
-  label: 'Option six(disabled) very long option that would truncate',
-  disabled: true,
-  iconLeft: 'camera'
-}, {
-  key: '7',
-  label: 'Option seven',
-  iconLeft: 'coffee'
-}, {
-  key: '8',
-  label: 'Option eight',
-  iconLeft: 'user'
-}, {
-  key: '9',
-  label: 'Option nine',
-  iconLeft: 'face-party'
-}];
-const textOnlyButtonProps = {
-  children: 'Button Text'
-};
-const commonMenuProps = {
-  options,
-  size: 'small',
-  isFluid: false
-};
-const _TextOnly = args => {
-  const [selectedKeys, setSelectedKeys] = React.useState([]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: _OptionButtonStoriesModule.default.optionBtnWrapper
-  }, /*#__PURE__*/React.createElement(_SimpleOptionButton.SimpleOptionButton, _extends({}, args, {
-    selectedKeys: selectedKeys,
-    onOptionSelect: () => setSelectedKeys([])
-  })));
-};
-exports._TextOnly = _TextOnly;
-_TextOnly.args = {
-  ...textOnlyButtonProps,
-  ...commonMenuProps
-};
-const _TextWithTooltip = args => {
-  const [selectedKeys, setSelectedKeys] = React.useState([]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: _OptionButtonStoriesModule.default.optionBtnWrapper
-  }, /*#__PURE__*/React.createElement(_SimpleOptionButton.SimpleOptionButton, _extends({}, args, {
-    selectedKeys: selectedKeys,
-    onOptionSelect: () => setSelectedKeys([])
-  })));
-};
-exports._TextWithTooltip = _TextWithTooltip;
-_TextWithTooltip.args = {
-  ...textOnlyButtonProps,
-  ...commonMenuProps,
-  showLabelTooltip: {
-    maxLines: 2
-  }
-};
-const _WithTooltip = args => /*#__PURE__*/React.createElement("div", {
-  className: _OptionButtonStoriesModule.default.optionBtnWrapper
-}, /*#__PURE__*/React.createElement(_SimpleOptionButton.SimpleOptionButton, args));
-exports._WithTooltip = _WithTooltip;
-_WithTooltip.args = {
-  ...textOnlyButtonProps,
-  ...commonMenuProps,
-  tooltip: {
-    baseButton: {
-      body: 'Send now',
-      placement: 'top-start'
-    },
-    optionsButton: {
-      body: 'Schedule for later',
-      placement: 'top-end'
-    }
-  }
-};
-const _WithHeaderAndFooter = args => {
-  const clickAwayRef = React.useRef(null);
-  const [selectedKeys, setSelectedKeys] = React.useState([]);
-  const handleOptionSelect = key => {
-    // @ts-ignore - TS2345 - Argument of type 'string' is not assignable to parameter of type 'never'.
-    if (selectedKeys.includes(key)) {
-      setSelectedKeys(currentKeys => currentKeys.filter(currKey => currKey !== key));
-    } else {
-      // @ts-ignore - TS2345 - Argument of type '(currentKeys: never[]) => string[]' is not assignable to parameter of type 'SetStateAction<never[]>'.
-      setSelectedKeys(currentKeys => [...currentKeys, key]);
-    }
-  };
-  const onSave = () => {
-    if (clickAwayRef.current) {
-      // @ts-ignore - TS2339 - Property 'forceClose' does not exist on type 'never'.
-      clickAwayRef.current.forceClose();
-    }
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: _OptionButtonStoriesModule.default.optionBtnWrapper
-  }, /*#__PURE__*/React.createElement(_SimpleOptionButton.SimpleOptionButton, _extends({}, args, {
-    selectedKeys: selectedKeys,
-    onOptionSelect: option => handleOptionSelect(option.key),
-    header: /*#__PURE__*/React.createElement(_Menu.MenuHeader, null),
-    footer: /*#__PURE__*/React.createElement(_Menu.MenuFooter, {
-      onSave: onSave
-    }),
-    clickAwayRef: clickAwayRef
-  })));
-};
-exports._WithHeaderAndFooter = _WithHeaderAndFooter;
-_WithHeaderAndFooter.args = {
-  ...textOnlyButtonProps,
-  ...commonMenuProps,
-  optionsVariant: 'checkbox'
-};

package/lib/components/OptionButton/index.d.ts

@@ -1,3 +0,0 @@
-export * from './OptionButton';
-export * from './SimpleOptionButton';
-//# sourceMappingURL=index.d.ts.map

package/lib/components/OptionButton/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/OptionButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC"}

package/lib/components/PageTitle/PageTitle.d.ts

@@ -1,156 +0,0 @@
-import { Flow } from 'flow-to-typescript-codemod';
-import * as React from 'react';
-type ClassNames = Readonly<{
-    wrapper?: string;
-    leftSlot?: string;
-    rightSlot?: string;
-}>;
-export type PageTitleProps = {
-    classNames?: ClassNames;
-    children?: React.ReactNode;
-    pageNameKey?: string;
-    showBackButton?: boolean;
-    onBack?: () => void;
-};
-export declare const PAGE_NAME_LIST: Readonly<{
-    dashboard: {
-        title: string;
-        iconName: string;
-        iconType: string;
-    };
-    engage: {
-        title: string;
-        iconName: string;
-        iconType: string;
-    };
-    journeys: {
-        title: string;
-        iconName: string;
-        iconType: string;
-    };
-    workflows: {
-        title: string;
-        iconName: string;
-        iconType: string;
-    };
-    trm: {
-        title: string;
-        iconName: string;
-        iconType: string;
-    };
-    analytics: {
-        title: string;
-        iconName: string;
-        iconType: string;
-    };
-    messaging: {
-        title: string;
-        iconName: string;
-        iconType: string;
-    };
-    chatbot: {
-        title: string;
-        iconName: string;
-        iconType: string;
-    };
-    referrals: {
-        title: string;
-        iconName: string;
-        iconType: string;
-    };
-    records: {
-        title: string;
-        iconName: string;
-        iconType: string;
-    };
-    bulkCleanup: {
-        title: string;
-        iconName: string;
-        iconType: string;
-    };
-    support: {
-        title: string;
-        iconName: string;
-        iconType: string;
-    };
-    audit: {
-        title: string;
-        iconName: string;
-        iconType: string;
-    };
-    timeline: {
-        title: string;
-        iconName: string;
-        iconType: string;
-    };
-    people: {
-        title: string;
-        iconName: string;
-        iconType: string;
-    };
-    jobs: {
-        title: string;
-        iconName: string;
-        iconType: string;
-    };
-    contacts: {
-        title: string;
-        iconName: string;
-        iconType: string;
-    };
-    meetings: {
-        title: string;
-        iconName: string;
-        iconType: string;
-    };
-    contacts3: {
-        title: string;
-        iconName: string;
-        iconType: string;
-    };
-    tracking: {
-        title: string;
-        iconName: string;
-        iconType: string;
-    };
-    earnings: {
-        title: string;
-        iconName: string;
-        iconType: string;
-    };
-    settings: {
-        title: string;
-        iconName: string;
-        iconType: string;
-    };
-    broadcast: {
-        title: string;
-        iconName: string;
-        iconType: string;
-    };
-}>;
-export type TabSlotProps = {
-    children?: React.ReactNode;
-    className: string;
-};
-export declare const TabSlot: {
-    ({ children, className, ...props }: TabSlotProps): React.JSX.Element;
-    displayName: string;
-};
-export type RightSlotProps = {
-    children?: React.ReactNode;
-};
-export declare const RightSlot: {
-    ({ children, ...props }: RightSlotProps): React.JSX.Element;
-    displayName: string;
-};
-export type PageNameProps = {
-    children?: React.ReactNode;
-};
-export declare const PageName: {
-    ({ children, ...props }: PageNameProps): React.JSX.Element;
-    displayName: string;
-};
-export declare const PageTitle: Flow.AbstractComponent<PageTitleProps, HTMLDivElement>;
-export {};
-//# sourceMappingURL=PageTitle.d.ts.map