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

package/lib/components/ButtonDropdown/ButtonDropdown.stories.tsx

@@ -1,677 +0,0 @@
-import * as React from 'react';
-
-import {
-  getButtonLabelFromSelectedKeys,
-  getSelectedKeysFromSelectedOption,
-} from '../../utils/menu';
-import type {ButtonProps} from '../Button';
-import {BUTTON_ACTION_TYPE} from '../Button';
-import {Icon} from '../Icon';
-import type {MenuGroupTitleOption, MenuOption, MenuProps} from '../Menu';
-import {MenuFooter, MenuHeader} from '../Menu/Menu.stories';
-import {FormLabelSmall} from '../Text';
-import {ELEVATION_TYPES, Tooltip} from '../Tooltip';
-
-import type {ButtonDropdownProps} from './ButtonDropdown';
-import {
-  ANCHOR_POSITION_TYPE,
-  ButtonDropdown,
-  STRATEGY_TYPE,
-} from './ButtonDropdown';
-
-import css from './ButtonDropdown.stories.module.css';
-
-
-const anchorPositionOptions: Array<unknown> = [
-  ...Object.values(ANCHOR_POSITION_TYPE),
-];
-
-const positionStrategyOptions: Array<unknown> = [...Object.values(STRATEGY_TYPE)];
-
-const actionTypeOptions: Array<unknown> = [...Object.values(BUTTON_ACTION_TYPE)];
-
-const elevationOptions: Array<unknown> = [...Object.values(ELEVATION_TYPES)];
-
-const textOptions: MenuOption[] = [
-  {key: '1', label: 'Option one'},
-  {key: '2', label: 'Option two'},
-  {key: '3', label: 'Option three'},
-  {
-    key: '4',
-    label:
-      'Option three this is a very long option that would truncate, and this is even longer text to further test the truncation behavior in the dropdown component, ensuring that extremely long labels are handled gracefully and do not break the layout or overflow in an undesirable way, especially when the text is much longer than what would typically be expected in a dropdown option.',
-  },
-  {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 groupTitleComponentMenuOptions: Array<MenuGroupTitleOption> = [
-  {
-    groupTitle: (
-      <div className={css.titleWrapper}>
-        <FormLabelSmall color="tertiary">Fast Food</FormLabelSmall>
-        <div className={css.infoContainer}>
-          <Tooltip body="Hello!" elevation="menu">
-            <Icon name="circle-info" size="small" color="tertiary" />
-          </Tooltip>
-        </div>
-      </div>
-    ),
-    options: [
-      {
-        key: '1',
-        iconLeft: 'burger',
-        label: 'Burger',
-      },
-      {
-        key: '2',
-        iconLeft: 'pizza',
-        label: 'Pizza',
-      },
-      {
-        key: '3',
-        iconLeft: 'french-fries',
-        label: 'Fries',
-      },
-    ],
-  },
-  {
-    groupTitle: (
-      <div className={css.titleWrapper}>
-        <FormLabelSmall color="tertiary">Fruits</FormLabelSmall>
-        <div className={css.infoContainer}>
-          <Tooltip body="Hello!" elevation="menu">
-            <Icon name="circle-info" size="small" color="tertiary" />
-          </Tooltip>
-        </div>
-      </div>
-    ),
-    options: [
-      {
-        key: '7',
-        iconLeft: 'banana',
-        label: 'Banana',
-      },
-      {
-        key: '8',
-        iconLeft: 'pear',
-        label: 'Pear',
-      },
-      {
-        key: '9',
-        iconLeft: 'lemon',
-        label: 'Lemon',
-      },
-    ],
-  },
-];
-
-const menuProps: MenuProps = {
-  isFluid: false,
-  menuDisabled: false,
-  size: 'medium',
-  options: textOptions,
-};
-
-const textOnlyButtonProps: ButtonProps = {
-  children: 'Button Text',
-};
-
-const textAndIconButtonProps: ButtonProps = {
-  children: 'Long Button Text',
-  iconLeftName: 'face-party',
-  iconRightName: 'face-party',
-};
-
-const iconOnlyButtonProps: ButtonProps = {
-  iconLeftName: 'face-party',
-  ariaLabel: 'Icon Button Dropdown',
-};
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Button Dropdown/Generic Button Dropdown',
-  component: ButtonDropdown,
-  argTypes: {
-    onClick: {
-      description:
-        '**onClick** handler that is applied to the root `<button>` element',
-      action: 'clicked',
-      table: {
-        type: {summary: '(SyntheticEvent<HTMLElement>) => mixed'},
-      },
-    },
-    classNames: {
-      description: 'External classNames to be applied',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary:
-            '{buttonWrapper?: string, dropdownContainer?: string, buttonIcon?: string}',
-        },
-      },
-    },
-    tooltip: {
-      control: {
-        type: 'object',
-      },
-      description: 'Field to set the **Tooltip** for Button Dropdown',
-      table: {
-        type: {summary: 'BaseTooltipProps'},
-      },
-    },
-    menu: {
-      description: 'Menu props to use',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {summary: 'MenuProps'},
-      },
-    },
-    elevation: {
-      description:
-        'Elevation level for the dropdown menu. This controls the z-index stacking order. Default is set to "modal" elevation. Use higher elevation levels when rendering the dropdown above other elevated elements like Modal, Toast, etc.',
-      control: {
-        type: 'select',
-      },
-      options: elevationOptions,
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'modal'},
-      },
-    },
-    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'},
-      },
-    },
-    iconRightName: {
-      description:
-        'Right icon to be applied to the button, it internally uses the `Icon` component to render icons',
-      control: {
-        type: 'text',
-      },
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    iconRightType: {
-      description:
-        'Type of Right 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:
-        '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 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 relative to its reference element. It can be any one value from the dropdown',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'bottom-start'},
-      },
-    },
-    positionStrategy: {
-      options: positionStrategyOptions,
-      description:
-        'Position of Menu relative to either its nearest positioned ancestor (absolute) or its nearest containing block- usually the viewport (fixed). It can be any one value from the dropdown',
-      control: {
-        type: 'select',
-      },
-      table: {
-        type: {summary: 'enum'},
-        defaultValue: {summary: 'absolute'},
-      },
-    },
-    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 ButtonDropdown component',
-      description: {
-        component: `
-\`\`\`js
-import { ButtonDropdown } from "@spaced-out/ui-design-system/lib/components/ButtonDropdown";
-\`\`\`
-Button Dropdown is a composite component that internally implements **<a href="../?path=/docs/components-menu--docs">Menu</a>** with
-**<a href="../?path=/docs/components-button--docs">Button</a>** component. It also uses **Floating UI** to position the
-menu component relative to empty space available, taking viewport and component position into account. This makes sure that menu is always visible
-irrespective of the component positioning. The component has a callback to notify the parent on option selection. Button Dropdown is implemented inside a
-\`ClickAway\` listener and thus Menu is closed automatically on outside click.
-
-If you want to use Icon only button for button dropdown. Use IconLeftName and IconLeftType.
-
-- Supports passing a \`clickAwayRef\` prop to the component.
-- You can always force Open the 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 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 button for accessibility
-
-**Note: ** For checkbox type option set you can make use of \`getSelectedKeysFromSelectedOption\` and \`getButtonLabelFromSelectedKeys\` from \`utils/menu\`
-to populate \`selectedKeys\` and \`buttonText\` respectively.
-          `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/ButtonDropdown/ButtonDropdown.jsx',
-    },
-  },
-};
-
-export const _TextOnly = (args: ButtonDropdownProps) => (<div className={css.menuBtnWrapper}>
-  <ButtonDropdown {...args} />
-</div>);
-
-_TextOnly.args = {
-  ...textOnlyButtonProps,
-  menu: menuProps,
-  size: 'medium',
-};
-
-export const _TextWithTooltip = (args: ButtonDropdownProps) => (<div className={css.menuBtnWrapper}>
-  <ButtonDropdown {...args} />
-</div>);
-
-_TextWithTooltip.args = {
-  ...textOnlyButtonProps,
-  menu: {...menuProps, showLabelTooltip: {maxLines: 2}},
-  size: 'medium',
-};
-
-export const _WithSearch = (args: ButtonDropdownProps) => (<div className={css.menuBtnWrapper}>
-  <ButtonDropdown {...args} />
-</div>);
-
-_WithSearch.args = {
-  ...textOnlyButtonProps,
-  menu: {...menuProps, allowSearch: true},
-  size: 'medium',
-};
-
-export const _TextAndIcon = (args: ButtonDropdownProps) => (<div className={css.menuBtnWrapper}>
-  <ButtonDropdown {...args} />
-</div>);
-
-_TextAndIcon.args = {
-  ...textAndIconButtonProps,
-  menu: menuProps,
-  size: 'medium',
-};
-
-export const _IconOnly = (args: ButtonDropdownProps) => (<div className={css.menuBtnWrapper}>
-  <ButtonDropdown {...args} />
-</div>);
-
-_IconOnly.args = {
-  ...iconOnlyButtonProps,
-  menu: menuProps,
-  size: 'medium',
-  tooltip: {body: 'face-party'},
-};
-
-export const _DynamicIcon = (args: ButtonDropdownProps) => {
-  const [iconName, setIconName] = React.useState('chevron-down');
-  return (
-    <div className={css.menuBtnWrapper}>
-      <ButtonDropdown
-        {...args}
-        iconLeftName={iconName}
-        onMenuOpen={() => setIconName('chevron-up')}
-        onMenuClose={() => setIconName('chevron-down')}
-        tooltip={{body: iconName}}
-      />
-    </div>
-  );
-};
-
-_DynamicIcon.args = {
-  iconLeftName: 'chevron-down',
-  ariaLabel: 'Icon Button Dropdown',
-  menu: menuProps,
-  size: 'medium',
-};
-
-const complicatedMenuProps: MenuProps = {
-  isFluid: false,
-  menuDisabled: false,
-  size: 'medium',
-  groupTitleOptions: groupTitleComponentMenuOptions,
-};
-
-export const _TextAndDynamicIcon = (args: ButtonDropdownProps) => {
-  const [iconName, setIconName] = React.useState('chevron-down');
-  return (
-    <div className={css.menuBtnWrapper}>
-      <ButtonDropdown
-        {...args}
-        iconRightName={iconName}
-        onMenuOpen={() => setIconName('chevron-up')}
-        onMenuClose={() => setIconName('chevron-down')}
-      />
-    </div>
-  );
-};
-
-_TextAndDynamicIcon.args = {
-  children: 'Long Button Text',
-  iconRightName: 'chevron-down',
-  iconRightType: 'regular',
-  menu: complicatedMenuProps,
-  size: 'medium',
-  type: 'ghost',
-};
-
-const checkboxMenuProps: MenuProps = {
-  options: textOptions,
-  optionsVariant: 'checkbox',
-  selectedKeys: ['4'],
-  isFluid: false,
-};
-
-export const _WithCheckboxMenu = (args: ButtonDropdownProps) => {
-  const [btnText, setBtnText] = React.useState('');
-  const [selectedKeys, setSelectedKeys] = React.useState(
-    args.menu?.selectedKeys || [],
-  );
-
-  React.useEffect(() => {
-    setSelectedKeys(args.menu?.selectedKeys || []);
-    const newBtnText = getButtonLabelFromSelectedKeys(
-      args.menu?.selectedKeys,
-      args.children,
-    );
-// @ts-ignore - TS2345 - Argument of type 'React.ReactNode' is not assignable to parameter of type 'SetStateAction<string>'.
-    setBtnText(newBtnText);
-  }, [args.menu?.selectedKeys]);
-
-  const handleChange = (option: MenuOption) => {
-    const newSelectedKeys = getSelectedKeysFromSelectedOption(
-      option,
-      selectedKeys,
-    );
-    const newBtnText = getButtonLabelFromSelectedKeys(
-      newSelectedKeys,
-      args.children,
-    );
-    setSelectedKeys(newSelectedKeys);
-// @ts-ignore - TS2345 - Argument of type 'React.ReactNode' is not assignable to parameter of type 'SetStateAction<string>'.
-    setBtnText(newBtnText);
-  };
-
-  return (
-    <div className={css.menuBtnWrapper}>
-      <ButtonDropdown
-        {...args}
-        menu={{...args.menu, selectedKeys}}
-        onOptionSelect={handleChange}
-      >
-        {btnText}
-      </ButtonDropdown>
-    </div>
-  );
-};
-
-_WithCheckboxMenu.args = {
-  children: 'Long Button Text',
-  menu: checkboxMenuProps,
-  size: 'medium',
-};
-
-const radioMenuProps: MenuProps = {
-  options: textOptions,
-  optionsVariant: 'radio',
-  selectedKeys: ['4'],
-  isFluid: false,
-};
-
-export const _WithRadioMenu = (args: ButtonDropdownProps) => {
-  const [selectedKeys, setSelectedKeys] = React.useState(
-    args.menu?.selectedKeys || [],
-  );
-
-  React.useEffect(() => {
-    setSelectedKeys(args.menu?.selectedKeys || []);
-  }, [args.menu?.selectedKeys]);
-
-  const handleChange = (option: MenuOption) => {
-    setSelectedKeys([option.key]);
-  };
-
-  return (
-    <div className={css.menuBtnWrapper}>
-      <ButtonDropdown
-        {...args}
-        menu={{...args.menu, selectedKeys}}
-        onOptionSelect={handleChange}
-      >
-        {args.children}
-      </ButtonDropdown>
-    </div>
-  );
-};
-
-_WithRadioMenu.args = {
-  children: 'Long Button Text',
-  menu: radioMenuProps,
-  size: 'medium',
-};
-export const _WithHeaderAndFooter = (args: ButtonDropdownProps) => (<WithHeaderAndFooter {...args} />);
-
-export const WithHeaderAndFooter = (args: ButtonDropdownProps) => {
-  const clickAwayRef = React.useRef(null);
-  const [btnText, setBtnText] = React.useState('');
-  const [selectedKeys, setSelectedKeys] = React.useState(
-    args.menu?.selectedKeys || [],
-  );
-
-  React.useEffect(() => {
-    setSelectedKeys(args.menu?.selectedKeys || []);
-    const newBtnText = getButtonLabelFromSelectedKeys(
-      args.menu?.selectedKeys,
-      args.children,
-    );
-// @ts-ignore - TS2345 - Argument of type 'React.ReactNode' is not assignable to parameter of type 'SetStateAction<string>'.
-    setBtnText(newBtnText);
-  }, [args.menu?.selectedKeys]);
-
-  const handleChange = (option: MenuOption) => {
-    const newSelectedKeys = getSelectedKeysFromSelectedOption(
-      option,
-      selectedKeys,
-    );
-    const newBtnText = getButtonLabelFromSelectedKeys(
-      newSelectedKeys,
-      args.children,
-    );
-    setSelectedKeys(newSelectedKeys);
-// @ts-ignore - TS2345 - Argument of type 'React.ReactNode' is not assignable to parameter of type 'SetStateAction<string>'.
-    setBtnText(newBtnText);
-  };
-
-  const onSave = () => {
-    if (clickAwayRef.current) {
-// @ts-ignore - TS2339 - Property 'forceClose' does not exist on type 'never'.
-      clickAwayRef.current.forceClose();
-    }
-  };
-
-  return (
-    <div className={css.menuBtnWrapper}>
-      <ButtonDropdown
-        {...args}
-        menu={{
-          ...args.menu,
-          selectedKeys,
-          header: <MenuHeader />,
-          footer: <MenuFooter onSave={onSave} />,
-        }}
-        onOptionSelect={handleChange}
-        clickAwayRef={clickAwayRef}
-      >
-        {btnText}
-      </ButtonDropdown>
-    </div>
-  );
-};
-
-const menuPropsWithHeaderAndFooter: MenuProps = {
-  isFluid: false,
-  options: textOptions,
-  optionsVariant: 'checkbox',
-};
-
-_WithHeaderAndFooter.args = {
-  children: 'Long Button Text',
-  menu: menuPropsWithHeaderAndFooter,
-  size: 'medium',
-};