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

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

@@ -1,437 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports._WithTruncateOptionsTooltip = exports._WithTooltip = exports._WithHeaderAndFooter = exports._Default = exports.WithHeaderAndFooter = void 0;
-var React = _interopRequireWildcard(require("react"));
-var _Button = require("../Button");
-var _ButtonDropdown = require("../ButtonDropdown");
-var _Menu = require("../Menu/Menu.stories");
-var _OptionButton = require("./OptionButton");
-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)];
-const textOptions = [{
-  key: '1',
-  label: 'Option one'
-}, {
-  key: '2',
-  label: 'Option two'
-}, {
-  key: '3',
-  label: 'Option three this is a very long option that would truncate'
-}, {
-  key: '4',
-  label: 'Option four very long option that would truncate'
-}, {
-  key: '5',
-  label: 'Option five(disabled)',
-  disabled: true
-}, {
-  key: '6',
-  label: 'Option six(disabled) very long option that would truncate',
-  disabled: true
-}, {
-  key: '7',
-  label: 'Option Seven'
-}, {
-  key: '8',
-  label: 'Option Eight'
-}, {
-  key: '9',
-  label: 'Option Night'
-}];
-const menuProps = {
-  isFluid: false,
-  menuDisabled: false,
-  options: textOptions
-};
-var _default = exports.default = {
-  tags: ['autodocs'],
-  title: 'Components/Option Button/Generic Option Button',
-  component: _OptionButton.OptionButton,
-  argTypes: {
-    onButtonClick: {
-      description: '**onButtonClick** handler that is applied to the root `<button>` element',
-      action: 'clicked',
-      table: {
-        type: {
-          summary: '(SyntheticEvent<HTMLElement>) => mixed'
-        }
-      }
-    },
-    menu: {
-      description: '**menu** contains a list of choices as options on a temporary surface. It appears on interacts with option button.',
-      defaultValue: menuProps,
-      control: {
-        type: 'object'
-      },
-      table: {
-        type: {
-          summary: 'MenuProps'
-        }
-      }
-    },
-    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: 'medium'
-        }
-      }
-    },
-    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,}'
-        }
-      }
-    },
-    tooltip: {
-      control: {
-        type: 'object'
-      },
-      description: 'Field to set the **Tooltip** for Base Button and Options Button',
-      table: {
-        type: {
-          summary: 'OptionButtonTooltipProps'
-        }
-      }
-    },
-    clickAwayRef: {
-      type: {
-        optional: true
-      },
-      description: 'ref that contains the functions to open or close the child',
-      table: {
-        type: {
-          summary: 'ClickAwayRefType'
-        }
-      }
-    }
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a OptionButton component',
-      description: {
-        component: `
-\`\`\`js
-import { OptionButton } from "@spaced-out/ui-design-system/lib/components/OptionButton";
-\`\`\`
-Option Button allow users to take the main action, and also provides with multiple options related to the main action. OptionButton comes with multiple variants and has various states(hover, focus, etc). There are two parts of OptionButton, left button to perform main action, right button to select any further options related to main action.
-
-- 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.
-
-
-**Note: ** Always use \`ariaLabel\` with Icon only option button to avoid accessibility violation
-        `
-      }
-    },
-    storySource: {
-      componentPath: '/src/components/OptionButton/OptionButton.jsx'
-    }
-  }
-};
-const _Default = args => /*#__PURE__*/React.createElement("div", {
-  className: _OptionButtonStoriesModule.default.optionBtnWrapper
-}, /*#__PURE__*/React.createElement(_OptionButton.OptionButton, args));
-exports._Default = _Default;
-_Default.args = {
-  children: 'Send',
-  type: 'primary',
-  size: 'small',
-  iconLeftName: 'paper-plane-top',
-  iconRightName: 'chevron-down',
-  ariaLabel: 'Icon Button',
-  isFluid: false,
-  actionType: 'submit',
-  menu: menuProps
-};
-const _WithTruncateOptionsTooltip = args => /*#__PURE__*/React.createElement("div", {
-  className: _OptionButtonStoriesModule.default.optionBtnWrapper
-}, /*#__PURE__*/React.createElement(_OptionButton.OptionButton, args));
-exports._WithTruncateOptionsTooltip = _WithTruncateOptionsTooltip;
-_WithTruncateOptionsTooltip.args = {
-  children: 'Send',
-  type: 'primary',
-  size: 'small',
-  iconLeftName: 'paper-plane-top',
-  iconRightName: 'chevron-down',
-  ariaLabel: 'Icon Button',
-  isFluid: false,
-  actionType: 'submit',
-  menu: {
-    ...menuProps,
-    showLabelTooltip: {
-      maxLines: 2
-    }
-  }
-};
-const _WithTooltip = args => /*#__PURE__*/React.createElement("div", {
-  className: _OptionButtonStoriesModule.default.optionBtnWrapper
-}, /*#__PURE__*/React.createElement(_OptionButton.OptionButton, args));
-exports._WithTooltip = _WithTooltip;
-_WithTooltip.args = {
-  children: 'Send',
-  type: 'primary',
-  size: 'small',
-  iconLeftName: 'paper-plane-top',
-  iconRightName: 'chevron-down',
-  ariaLabel: 'Icon Button',
-  isFluid: false,
-  actionType: 'submit',
-  menu: menuProps,
-  tooltip: {
-    baseButton: {
-      body: 'Send now',
-      placement: 'top-start'
-    },
-    optionsButton: {
-      body: 'Schedule for later',
-      placement: 'top-end'
-    }
-  }
-};
-const _WithHeaderAndFooter = args => /*#__PURE__*/React.createElement(WithHeaderAndFooter, args);
-exports._WithHeaderAndFooter = _WithHeaderAndFooter;
-const WithHeaderAndFooter = args => {
-  const clickAwayRef = React.useRef(null);
-  const [selectedKeys, setSelectedKeys] = React.useState([]);
-
-  // @ts-ignore - TS7031 - Binding element 'key' implicitly has an 'any' type.
-  const handleOptionSelect = _ref => {
-    let {
-      key
-    } = _ref;
-    // @ts-ignore - TS2345 - Argument of type 'any' 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[]) => any[]' 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(_OptionButton.OptionButton, _extends({}, args, {
-    menu: {
-      ...args.menu,
-      selectedKeys,
-      header: /*#__PURE__*/React.createElement(_Menu.MenuHeader, null),
-      footer: /*#__PURE__*/React.createElement(_Menu.MenuFooter, {
-        onSave: onSave
-      })
-    },
-    onOptionSelect: handleOptionSelect,
-    clickAwayRef: clickAwayRef
-  })));
-};
-exports.WithHeaderAndFooter = WithHeaderAndFooter;
-const menuPropsWithHeaderAndFooter = {
-  options: textOptions,
-  isFluid: false,
-  menuDisabled: false,
-  optionsVariant: 'checkbox'
-};
-_WithHeaderAndFooter.args = {
-  children: 'Send',
-  type: 'primary',
-  size: 'small',
-  iconLeftName: 'paper-plane-top',
-  iconRightName: 'chevron-down',
-  ariaLabel: 'Icon Button',
-  isFluid: false,
-  actionType: 'submit',
-  menu: menuPropsWithHeaderAndFooter,
-  tooltip: {
-    baseButton: {
-      body: 'Send now',
-      placement: 'top-start'
-    },
-    optionsButton: {
-      body: 'Schedule for later',
-      placement: 'top-end'
-    }
-  }
-};

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

@@ -1,47 +0,0 @@
-import { Flow } from 'flow-to-typescript-codemod';
-import * as React from 'react';
-import type { MenuClassNames, MenuLabelTooltip } from '../../types/menu';
-import type { ClickAwayRefType } from '../../utils/click-away';
-import type { ButtonProps } from '../Button';
-import type { AnchorType } from '../ButtonDropdown';
-import type { MenuOption, MenuOptionsVariant, Virtualization } from '../Menu';
-import type { OptionButtonTooltipProps } from './OptionButton';
-type ClassNames = Readonly<{
-    wrapper?: string;
-    baseButtonWrapper?: string;
-    baseButtonIcon?: string;
-    optionsButtonWrapper?: string;
-    optionsButtonIcon?: string;
-    dropdownContainer?: string;
-}>;
-export type SimpleOptionButtonRef = {
-    selectedKeys?: Array<string>;
-};
-export type SimpleOptionButtonProps = (// Input props
-(ButtonProps) & {
-    classNames?: ClassNames;
-    tooltip?: OptionButtonTooltipProps;
-    anchorPosition?: AnchorType;
-    tooltip?: OptionButtonTooltipProps;
-    menuSize?: 'small' | 'medium';
-    options?: Array<MenuOption>;
-    optionsVariant?: MenuOptionsVariant;
-    allowSearch?: boolean;
-    selectedKeys?: Array<string>;
-    menuVirtualization?: Virtualization;
-    header?: React.ReactNode;
-    footer?: React.ReactNode;
-    menuClassNames?: MenuClassNames;
-    showLabelTooltip?: MenuLabelTooltip;
-    allowWrap?: boolean;
-    onOptionSelect?: (option: MenuOption, arg2?: React.SyntheticEvent<HTMLElement> | null | undefined) => unknown;
-    onButtonClick?: ((arg1: React.SyntheticEvent<HTMLElement>) => unknown) | null | undefined;
-    onMenuOpen?: () => unknown;
-    onMenuClose?: () => unknown;
-    resolveLabel?: (option: MenuOption) => string | React.ReactNode;
-    resolveSecondaryLabel?: (option: MenuOption) => string | React.ReactNode;
-    clickAwayRef?: ClickAwayRefType;
-});
-export declare const SimpleOptionButton: Flow.AbstractComponent<SimpleOptionButtonProps, SimpleOptionButtonRef>;
-export {};
-//# sourceMappingURL=SimpleOptionButton.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"SimpleOptionButton.d.ts","sourceRoot":"","sources":["../../../src/components/OptionButton/SimpleOptionButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAEhD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,cAAc,EAAE,gBAAgB,EAAC,MAAM,kBAAkB,CAAC;AACvE,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AAE7D,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,WAAW,CAAC;AAC3C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,EAAC,UAAU,EAAE,kBAAkB,EAAE,cAAc,EAAC,MAAM,SAAS,CAAC;AAE5E,OAAO,KAAK,EAAC,wBAAwB,EAAC,MAAM,gBAAgB,CAAC;AAI7D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC,CAAC;AAEH,MAAM,MAAM,qBAAqB,GAAG;IAClC,YAAY,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,uBAAuB,GAAG,CACtC,AADuC,cAAc;AACrD,CAAC,WAAW,CAAC,GAAG;IACd,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB,OAAO,CAAC,EAAE,wBAAwB,CAAC;IACnC,cAAc,CAAC,EAAE,UAAU,CAAC;IAE5B,OAAO,CAAC,EAAE,wBAAwB,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAE9B,OAAO,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC5B,cAAc,CAAC,EAAE,kBAAkB,CAAC;IACpC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC7B,kBAAkB,CAAC,EAAE,cAAc,CAAC;IACpC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,cAAc,CAAC,EAAE,CACf,MAAM,EAAE,UAAU,EAClB,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG,SAAS,KACxD,OAAO,CAAC;IACb,aAAa,CAAC,EAAE,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,KAAK,OAAO,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IAC1F,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,OAAO,CAAC;IAE5B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChE,qBAAqB,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IACzE,YAAY,CAAC,EAAE,gBAAgB,CAAC;CACjC,CAAC,CAAC;AAmGH,eAAO,MAAM,kBAAkB,EAAE,IAAI,CAAC,iBAAiB,CAAC,uBAAuB,EAAE,qBAAqB,CAA4F,CAAC"}