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

package/lib/components/StickyBar/StickyBar.stories.tsx

@@ -1,152 +0,0 @@
-import * as React from 'react';
-
-import {Button} from '../Button';
-import {Col, Row} from '../Grid';
-import {BodySmall} from '../Text';
-
-import type {StickyBarProps} from './';
-import {StickyBar, StickyBarLeftSlot, StickyBarRightSlot} from './StickyBar';
-
-import css from './StickyBar.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Sticky Footer',
-  component: StickyBar,
-  argTypes: {
-    classNames: {
-      description: 'Provide an optional className to be applied to the wrapper',
-      control: {
-        type: 'string',
-      },
-      table: {
-        type: {
-          summary: 'string',
-        },
-      },
-    },
-    // position: {
-    //   description: 'Position of the StickyBar',
-    //   options: ['top', 'bottom'],
-    //   control: {
-    //     type: 'select',
-    //   },
-    //   table: {
-    //     type: {
-    //       summary: 'string',
-    //     },
-    //     defaultValue: {
-    //       summary: 'bottom',
-    //     },
-    //   },
-    // },
-  },
-  parameters: {
-    docs: {
-      subtitle: 'Generates a StickyFooter component.',
-      description: {
-        component: `
-\`\`\`js
-import {
-  StickyBar,
-  StickyBarLeftSlot,
-  StickyBarRightSlot
-} from "@spaced-out/ui-design-system/lib/components/StickyBar";
-\`\`\`
-
-The \`StickyBar\` component is a flexible and customizable sticky bar that can be used
-to display content in a fixed position at bottom of the screen(You would need to set/manage the \`position\` attribute). It consists
-of two slots, one on the left and one on the right, where you can place children elements,
-such as buttons or icons.
-
-Slots:
-
-- \`StickyBarLeftSlot\`: Use this slot to place content on the left side of the \`StickyBar\`.
-- \`StickyBarRightSlot\`: Use this slot to place content on the right side of the \`StickyBar\`.
-
-Example Usage:
-
-\`\`\`jsx
-const MyComponent = () => (
-  <StickyBar>
-    <StickyBarLeftSlot>
-      <Button type="tertiary">Button Text</Button>
-      <Button type="ghost">Button Text</Button>
-    </StickyBarLeftSlot>
-    <StickyBarRightSlot>
-      <Button type="ghost">Button Text</Button>
-      <Button type="primary">Button Text</Button>
-    </StickyBarRightSlot>
-  </StickyBar>
-);
-\`\`\`
-        `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/StickyBar/StickyBar.jsx',
-    },
-  },
-};
-
-export const _StickyFooter = (args: StickyBarProps) => (<div className={css.container}>
-  <StickyBar {...args}>
-    <StickyBarLeftSlot>
-      <Button type="tertiary">Button Text</Button>
-      <Button type="ghost">Button Text</Button>
-    </StickyBarLeftSlot>
-    <StickyBarRightSlot>
-      <Button type="ghost">Button Text</Button>
-      <Button type="primary">Button Text</Button>
-    </StickyBarRightSlot>
-  </StickyBar>
-</div>);
-
-export const _WithGrid = (args: StickyBarProps) => (<>
-  <div className={css.container}>
-    <BodySmall color="information">
-      Column Offset: 1, Column Span: 11
-    </BodySmall>
-    <StickyBar {...args}>
-      <Row className={css.noPadding}>
-        <Col offset={1} span={11}>
-          <StickyBarLeftSlot>
-            <Button type="ghost">Cancel</Button>
-            <Button>Save Changes</Button>
-          </StickyBarLeftSlot>
-        </Col>
-      </Row>
-    </StickyBar>
-  </div>
-  <div className={css.container}>
-    <BodySmall color="information">
-      Column Offset: 6, Column Span: 6
-    </BodySmall>
-    <StickyBar {...args}>
-      <Row className={css.noPadding}>
-        <Col offset={6} span={6}>
-          <StickyBarLeftSlot>
-            <Button type="ghost">Cancel</Button>
-            <Button>Save Changes</Button>
-          </StickyBarLeftSlot>
-        </Col>
-      </Row>
-    </StickyBar>
-  </div>
-  <div className={css.container}>
-    <BodySmall color="information">
-      Column Offset: 9, Column Span: 3
-    </BodySmall>
-    <StickyBar {...args}>
-      <Row className={css.noPadding}>
-        <Col offset={9} span={3} className={css.stickRight}>
-          <StickyBarRightSlot>
-            <Button type="ghost">Cancel</Button>
-            <Button>Save Changes</Button>
-          </StickyBarRightSlot>
-        </Col>
-      </Row>
-    </StickyBar>
-  </div>
-</>);

package/lib/components/StickyBar/StickyBar.tsx

@@ -1,65 +0,0 @@
-import {Flow} from 'flow-to-typescript-codemod';
-
-import * as React from 'react';
-
-import classify from '../../utils/classify';
-
-import css from './StickyBar.module.css';
-
-
-export type StickyBarProps = {
-  className?: string;
-  children: React.ReactNode;
-  position?: 'top' | 'bottom';
-};
-
-export type StickyBarChildProps = {
-  className?: string;
-  children: React.ReactNode;
-};
-
-export const StickyBarLeftSlot = (
-  {
-    className,
-    children,
-    ...props
-  }: StickyBarChildProps,
-) => (<div {...props} className={classify(css.leftSlot, className)}>
-  {children}
-</div>);
-
-export const StickyBarRightSlot = (
-  {
-    className,
-    children,
-    ...props
-  }: StickyBarChildProps,
-) => (<div {...props} className={classify(css.rightSlot, className)}>
-  {children}
-</div>);
-
-export const StickyBar: Flow.AbstractComponent<StickyBarProps, HTMLDivElement> = React.forwardRef<HTMLDivElement, StickyBarProps>((
-  {
-    className,
-    children,
-    position = 'bottom',
-    ...props
-  }: StickyBarProps,
-  ref,
-) => (
-  <div
-    {...props}
-    ref={ref}
-    data-testid="StickyBar"
-    className={classify(
-      css.wrapper,
-      {
-        [css.top]: position === 'top',
-        [css.bottom]: position === 'bottom',
-      },
-      className,
-    )}
-  >
-    {children}
-  </div>
-));

package/lib/components/StickyBar/index.ts

@@ -1 +0,0 @@
-export * from './StickyBar';

package/lib/components/SubMenu/SubMenu.stories.tsx

@@ -1,413 +0,0 @@
-import * as React from 'react';
-
-import {TEXT_COLORS} from '../../types/typography';
-import {classify} from '../../utils/classify';
-import {Badge} from '../Badge';
-import {ClickableIcon, Icon} from '../Icon';
-
-import type {SubMenuProps} from './';
-import {SubMenu} from './SubMenu';
-import {SubMenuGroup} from './SubMenuGroup';
-import {
-  SubMenuItem,
-  SubMenuItemAction,
-  SubMenuItemBadges,
-  SubMenuItemText,
-} from './SubMenuItem';
-import {SubMenuLink} from './SubMenuLink';
-
-import css from './SubMenu.stories.module.css';
-
-
-export default {
-  tags: ['autodocs'],
-  title: 'Components/Sub Menu',
-  component: SubMenu,
-  argTypes: {
-    title: {
-      type: {required: true},
-      description: 'The title of the SubMenu',
-      table: {
-        type: {summary: 'React.Component | string'},
-      },
-    },
-    titleIcon: {
-      description: 'Optional Icon before the title of the SubMenu',
-      control: {
-        type: 'string',
-      },
-      table: {
-        type: {summary: 'React.Component | string'},
-      },
-    },
-    titleIconType: {
-      description: 'Provide a type for the Icon',
-      control: {type: 'select'},
-      options: ['regular', 'solid', 'duotone', 'brands'],
-      table: {
-        type: {summary: 'string'},
-      },
-    },
-    titleIconSize: {
-      control: {type: 'select'},
-      options: ['small', 'medium'],
-      description: 'Optional size for the Icon',
-      table: {
-        type: {summary: 'string'},
-        defaultValue: {summary: 'medium'},
-      },
-    },
-    classNames: {
-      description:
-        'Provide an optional classNames to be applied to the wrapper of submenu. And for SubMenuGroup apply classNames to wrapper, groupHeader & menuGroup',
-      control: {
-        type: 'object',
-      },
-      table: {
-        type: {
-          summary:
-            'SubMenu: {wrapper?: string} SubMenuGroup: { wrapper?: string, groupHeader?: string, menuGroup?: string} ',
-        },
-      },
-    },
-    onClose: {
-      description:
-        '**onClose** handler that is applied to the Header close button',
-      action: 'closed',
-      table: {
-        type: {summary: '() => mixed'},
-      },
-    },
-    showClose: {
-      description:
-        'If **true**, the component would show the Header close button',
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        type: {summary: 'boolean'},
-        defaultValue: {summary: 'false'},
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      subtitle:
-        'Generates a SubMenu, SubMenuGroup, SubMenuItem, SubMenuLink, SubMenuItemIcon, SubMenuItemText and SubMenuItemAction components.',
-      description: {
-        component: `
-\`\`\`js
-import {SubMenu} from '@spaced-out/ui-design-system/lib/components/SubMenu';
-import {SubMenuGroup} from '@spaced-out/ui-design-system/lib/components/SubMenu/SubMenuGroup';
-import {
-  SubMenuItem,
-  SubMenuItemAction,
-  SubMenuItemBadges,
-  SubMenuItemIcon,
-  SubMenuItemText,
-} from '@spaced-out/ui-design-system/lib/components/SubMenu/SubMenuItem';
-import {SubMenuLink} from '@spaced-out/ui-design-system/lib/components/SubMenu/SubMenuLink';
-\`\`\`
-
-SubMenu offers different components for different slots. SubMenu renders all of its children passed to it.
-Children of SubMenu can be SubMenuGroup, SubMenuLink or any other React component for cases like implementing search features in sub menu.
-
-SubMenuGroup accepts few props named groupTitle, collapsible and multiple SubMenuItem as children.
-It is a controlled component, which means, you need to pass the selectedMenuKey, if selectedMenuKey is same as menuKey then Sub
-Menu Item will be shown as selected. And if its a part of a group then that SubMenuGroup remains expanded. When an item from another group
-is selected then all other groups are collapsed.
-You will pass a callback function in onChange prop, if Sub Menu Item is clicked this function will be called and you will receive
-the selectedMenuKey which will be the menuKey prop of Sub Menu Item.
-
-SubMenuItem accepts four named child components:- SubMenuItemIcon, SubMenuItemText, SubMenuItemBadges, and SubMenuItemAction.
-SubMenuItemIcon, SubMenuItemText and SubMenuItemBadges are aligned at start and SubMenuItemAction is aligned at end.
-SubMenuItemAction button is shown on mouse hover, focus and selection of the SubMenuItem.
-
-The SubMenuLink takes the following props: menuLinkTitle, menuLinkIcon, onChange, selectedMenuKey.
-If selectedMenuKey is same as menuKey then SubMenuLink will be shown as selected.
-      `,
-      },
-    },
-    storySource: {
-      componentPath: '/src/components/SubMenu/SubMenu.jsx',
-    },
-  },
-};
-
-export const _SubMenu = (args: SubMenuProps) => {
-  const [selectedMenu, setSelectedMenu] = React.useState('menu-0');
-  const onMenuItemChangeHandler = (menu: string): void => {
-    setSelectedMenu(menu);
-  };
-
-  return (
-    <div className={css.container}>
-      <SubMenu
-        title={args.title}
-        showClose={args.showClose}
-        titleIcon={args.titleIcon}
-        titleIconType={args.titleIconType}
-        onClose={args.onClose}
-      >
-        <SubMenuGroup
-          groupTitle="Inbox"
-          groupIcon="fa-duotone fa-messages"
-          groupIconSize="small"
-          groupIconType="duotone"
-          collapsible={true}
-          onChange={onMenuItemChangeHandler}
-          selectedMenuKey={selectedMenu}
-          status="information"
-        >
-          <SubMenuItem
-            menuKey={'menu-0'}
-            classNames={{
-              wrapper: classify(css.menuItem, {
-                [css.selected]: selectedMenu === 'menu-0',
-              }),
-            }}
-          >
-            <SubMenuItemText>San Francisco</SubMenuItemText>
-            <SubMenuItemBadges className={css.subMenuItemBadges}>
-              <Icon
-                name="star"
-                size="small"
-                type="solid"
-                className={css.iconStar}
-              />
-            </SubMenuItemBadges>
-            <SubMenuItemAction>
-              <ClickableIcon
-                name="ellipsis"
-                size="small"
-                color={TEXT_COLORS.inverseSecondary}
-                type="solid"
-                ariaLabel="More Actions"
-                className={css.actionsMenuBtn}
-              />
-              <div className={css.actionItemsContainer}>
-                <Icon
-                  name="whatsapp"
-                  type="brands"
-                  color={TEXT_COLORS.inverseSecondary}
-                  size="small"
-                />
-                <Icon
-                  name="comment-sms"
-                  color={TEXT_COLORS.inverseSecondary}
-                  size="small"
-                />
-              </div>
-            </SubMenuItemAction>
-          </SubMenuItem>
-          <SubMenuItem
-            menuKey={'menu-1'}
-            classNames={{
-              wrapper: classify(css.menuItem, {
-                [css.selected]: selectedMenu === 'menu-1',
-              }),
-            }}
-          >
-            <SubMenuItemText>Boston</SubMenuItemText>
-            <SubMenuItemAction>
-              <ClickableIcon
-                name="ellipsis"
-                size="small"
-                color={TEXT_COLORS.inverseSecondary}
-                type="solid"
-                ariaLabel="More Actions"
-                className={css.actionsMenuBtn}
-              />
-              <div className={css.actionItemsContainer}>
-                <Icon
-                  name="whatsapp"
-                  type="brands"
-                  color={TEXT_COLORS.inverseSecondary}
-                  size="small"
-                />
-                <Icon
-                  name="comment-sms"
-                  color={TEXT_COLORS.inverseSecondary}
-                  size="small"
-                />
-              </div>
-            </SubMenuItemAction>
-          </SubMenuItem>
-          <SubMenuItem
-            menuKey={'menu-2'}
-            classNames={{
-              wrapper: classify(css.menuItem, {
-                [css.selected]: selectedMenu === 'menu-2',
-              }),
-            }}
-          >
-            <SubMenuItemText>Miami</SubMenuItemText>
-            <SubMenuItemBadges className={css.subMenuItemBadges}>
-              <Badge
-                text="3"
-                fill="blueDark"
-                classNames={{text: css.badgeTextColor}}
-              />
-            </SubMenuItemBadges>
-            <SubMenuItemAction>
-              <ClickableIcon
-                name="ellipsis"
-                size="small"
-                color={TEXT_COLORS.inverseSecondary}
-                type="solid"
-                ariaLabel="More Actions"
-                className={css.actionsMenuBtn}
-              />
-              <div className={css.actionItemsContainer}>
-                <Icon
-                  name="whatsapp"
-                  type="brands"
-                  color={TEXT_COLORS.inverseSecondary}
-                  size="small"
-                />
-                <Icon
-                  name="comment-sms"
-                  color={TEXT_COLORS.inverseSecondary}
-                  size="small"
-                />
-              </div>
-            </SubMenuItemAction>
-          </SubMenuItem>
-          <SubMenuItem
-            menuKey={'menu-3'}
-            classNames={{
-              wrapper: classify(css.menuItem, {
-                [css.selected]: selectedMenu === 'menu-3',
-              }),
-            }}
-          >
-            <SubMenuItemText>New York</SubMenuItemText>
-            <SubMenuItemBadges className={css.subMenuItemBadges}>
-              <Badge
-                text="12"
-                fill="blueDark"
-                classNames={{text: css.badgeTextColor}}
-              />
-            </SubMenuItemBadges>
-            <SubMenuItemAction>
-              <ClickableIcon
-                name="ellipsis"
-                size="small"
-                color={TEXT_COLORS.inverseSecondary}
-                type="solid"
-                ariaLabel="More Actions"
-                className={css.actionsMenuBtn}
-              />
-              <div className={css.actionItemsContainer}>
-                <Icon
-                  name="whatsapp"
-                  type="brands"
-                  color={TEXT_COLORS.inverseSecondary}
-                  size="small"
-                />
-                <Icon
-                  name="comment-sms"
-                  color={TEXT_COLORS.inverseSecondary}
-                  size="small"
-                />
-              </div>
-            </SubMenuItemAction>
-          </SubMenuItem>
-          <SubMenuItem
-            menuKey={'menu-4'}
-            disabled
-            classNames={{
-              wrapper: classify(css.menuItem, {
-                [css.selected]: selectedMenu === 'menu-4',
-              }),
-            }}
-          >
-            <SubMenuItemText>Disabled</SubMenuItemText>
-{ /* @ts-ignore - TS2769 - No overload matches this call. */}
-            <SubMenuItemAction tabIndex={-1}>
-              <ClickableIcon
-                name="ellipsis"
-                size="small"
-                color={TEXT_COLORS.inverseSecondary}
-                type="solid"
-                ariaLabel="More Actions"
-                className={css.actionsMenuBtn}
-              />
-              <div className={css.actionItemsContainer}>
-                <Icon
-                  name="whatsapp"
-                  type="brands"
-                  color={TEXT_COLORS.inverseSecondary}
-                  size="small"
-                />
-                <Icon
-                  name="comment-sms"
-                  color={TEXT_COLORS.inverseSecondary}
-                  size="small"
-                />
-              </div>
-            </SubMenuItemAction>
-          </SubMenuItem>
-        </SubMenuGroup>
-        <SubMenuGroup
-          groupTitle="Live Agent Transfer"
-          groupIcon="headset"
-          groupIconSize="small"
-          groupIconType="duotone"
-          collapsible={true}
-          onChange={onMenuItemChangeHandler}
-          selectedMenuKey={selectedMenu}
-        >
-          <SubMenuItem menuKey={'menu-5'}>
-            <SubMenuItemText>Queue #1</SubMenuItemText>
-          </SubMenuItem>
-          <SubMenuItem menuKey={'menu-6'}>
-            <SubMenuItemText>Queue #2</SubMenuItemText>
-          </SubMenuItem>
-        </SubMenuGroup>
-        <div className={css.menuDivider} />
-        <SubMenuGroup
-          groupTitle="AI Generation"
-          groupIcon="sparkles"
-          groupIconSize="small"
-          groupIconType="duotone"
-          collapsible={true}
-          onChange={onMenuItemChangeHandler}
-          selectedMenuKey={selectedMenu}
-        >
-          <SubMenuItem menuKey={'menu-7'}>
-            <SubMenuItemText>Queue #1</SubMenuItemText>
-          </SubMenuItem>
-          <SubMenuItem menuKey={'menu-8'}>
-            <SubMenuItemText>Queue #2</SubMenuItemText>
-          </SubMenuItem>
-        </SubMenuGroup>
-        <SubMenuLink
-          menuLinkTitle="Jobs"
-          menuLinkIcon="screen-users"
-          menuLinkIconSize="small"
-          menuLinkIconType="duotone"
-          menuKey="menu-link-0"
-          selectedMenuKey={selectedMenu}
-          onChange={onMenuItemChangeHandler}
-        />
-        <SubMenuLink
-          menuLinkTitle="Referrals"
-          menuLinkIcon="user-check"
-          menuLinkIconSize="small"
-          menuLinkIconType="duotone"
-          menuKey="menu-link-1"
-          selectedMenuKey={selectedMenu}
-          onChange={onMenuItemChangeHandler}
-        />
-      </SubMenu>
-    </div>
-  );
-};
-
-_SubMenu.args = {
-  title: 'Messaging',
-  titleIcon: 'messages',
-  titleIconType: 'duotone',
-  showClose: true,
-};