@superdispatch/ui-lab 0.50.5 → 0.50.6

package/src/file-list-item/__tests__/FileListItem.spec.tsx

@@ -1,339 +0,0 @@
-import { Stack } from '@superdispatch/ui';
-import { renderComponent } from '@superdispatch/ui-testutils';
-import { screen } from '@testing-library/react';
-import { FileListItem } from '../FileListItem';
-
-it('checks if delete button appears', () => {
-  renderComponent(<FileListItem name="TST1208 Dispatcher Info.pdf" />);
-
-  expect(screen.getAllByTitle('Delete')).toHaveLength(1);
-});
-
-it('checks if delete button dont appear', () => {
-  renderComponent(
-    <FileListItem name="TST1208 Dispatcher Info.pdf" canDelete={false} />,
-  );
-
-  expect(screen.queryByTitle('Delete')).toBeNull();
-});
-
-it('checks if FileListItem renders properly', () => {
-  renderComponent(
-    <FileListItem name="TST1208 Dispatcher Info.pdf" canDelete={false} />,
-  );
-
-  expect(screen.getByLabelText('file-list-item')).toMatchInlineSnapshot(`
-    <div
-      aria-label="file-list-item"
-    >
-      <div
-        class="Columns-SD__sc-1a73118-0 bwYPTL"
-      >
-        <div
-          class="Column__ColumnRoot-SD__sc-m9n6o6-0 jNPayl"
-        >
-          <div>
-            <svg
-              aria-hidden="true"
-              class="MuiSvgIcon-root MuiSvgIcon-colorAction MuiSvgIcon-fontSizeSmall"
-              focusable="false"
-              viewBox="0 0 24 24"
-            >
-              <path
-                d="M12,10.5H13V13.5H12V10.5M7,11.5H8V10.5H7V11.5M20,6V18A2,2 0 0,1 18,20H6A2,2 0 0,1 4,18V6A2,2 0 0,1 6,4H18A2,2 0 0,1 20,6M9.5,10.5A1.5,1.5 0 0,0 8,9H5.5V15H7V13H8A1.5,1.5 0 0,0 9.5,11.5V10.5M14.5,10.5A1.5,1.5 0 0,0 13,9H10.5V15H13A1.5,1.5 0 0,0 14.5,13.5V10.5M18.5,9H15.5V15H17V13H18.5V11.5H17V10.5H18.5V9Z"
-              />
-            </svg>
-          </div>
-        </div>
-        <div
-          class="Column__ColumnRoot-SD__sc-m9n6o6-0 hbBUFf"
-        >
-          <div>
-            <div
-              class="FileListItem__FileListItemName-SD__sc-hxbsiy-0 gMzDXg"
-              id="uid_3"
-            >
-              TST1208 Dispatcher Info.pdf
-            </div>
-          </div>
-        </div>
-        <div
-          class="Column__ColumnRoot-SD__sc-m9n6o6-0 jNPayl"
-        >
-          <div />
-        </div>
-      </div>
-    </div>
-  `);
-});
-
-it('checks if FileListItem renders', () => {
-  renderComponent(
-    <Stack aria-label="file-list-items-stack">
-      <FileListItem name="Read this document.txt" />
-      <FileListItem name="TST1208 Dispatcher Info.pdf" />
-      <FileListItem name="TST1208 Dispatcher Info.pdf" canDelete={false} />
-      <FileListItem
-        name="attachment.jpg"
-        url="https://picsum.photos/seed/picsum/1024/768"
-      />
-    </Stack>,
-  );
-
-  expect(screen.getByLabelText('file-list-items-stack')).toMatchInlineSnapshot(`
-    <div
-      aria-label="file-list-items-stack"
-      class="Stack__StackRoot-SD__sc-qkml7c-0 cNqlNY"
-    >
-      <div>
-        <div
-          aria-label="file-list-item"
-        >
-          <div
-            class="Columns-SD__sc-1a73118-0 bwYPTL"
-          >
-            <div
-              class="Column__ColumnRoot-SD__sc-m9n6o6-0 jNPayl"
-            >
-              <div>
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-colorAction MuiSvgIcon-fontSizeSmall"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    d="M14,17H7V15H14M17,13H7V11H17M17,9H7V7H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z"
-                  />
-                </svg>
-              </div>
-            </div>
-            <div
-              class="Column__ColumnRoot-SD__sc-m9n6o6-0 hbBUFf"
-            >
-              <div>
-                <div
-                  class="FileListItem__FileListItemName-SD__sc-hxbsiy-0 gMzDXg"
-                  id="uid_4"
-                >
-                  Read this document.txt
-                </div>
-              </div>
-            </div>
-            <div
-              class="Column__ColumnRoot-SD__sc-m9n6o6-0 jNPayl"
-            >
-              <div>
-                <button
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall"
-                  tabindex="0"
-                  title="Delete"
-                  type="button"
-                >
-                  <span
-                    class="MuiIconButton-label"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                      />
-                    </svg>
-                  </span>
-                  <span
-                    class="MuiTouchRipple-root"
-                  />
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div>
-        <div
-          aria-label="file-list-item"
-        >
-          <div
-            class="Columns-SD__sc-1a73118-0 bwYPTL"
-          >
-            <div
-              class="Column__ColumnRoot-SD__sc-m9n6o6-0 jNPayl"
-            >
-              <div>
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-colorAction MuiSvgIcon-fontSizeSmall"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    d="M12,10.5H13V13.5H12V10.5M7,11.5H8V10.5H7V11.5M20,6V18A2,2 0 0,1 18,20H6A2,2 0 0,1 4,18V6A2,2 0 0,1 6,4H18A2,2 0 0,1 20,6M9.5,10.5A1.5,1.5 0 0,0 8,9H5.5V15H7V13H8A1.5,1.5 0 0,0 9.5,11.5V10.5M14.5,10.5A1.5,1.5 0 0,0 13,9H10.5V15H13A1.5,1.5 0 0,0 14.5,13.5V10.5M18.5,9H15.5V15H17V13H18.5V11.5H17V10.5H18.5V9Z"
-                  />
-                </svg>
-              </div>
-            </div>
-            <div
-              class="Column__ColumnRoot-SD__sc-m9n6o6-0 hbBUFf"
-            >
-              <div>
-                <div
-                  class="FileListItem__FileListItemName-SD__sc-hxbsiy-0 gMzDXg"
-                  id="uid_5"
-                >
-                  TST1208 Dispatcher Info.pdf
-                </div>
-              </div>
-            </div>
-            <div
-              class="Column__ColumnRoot-SD__sc-m9n6o6-0 jNPayl"
-            >
-              <div>
-                <button
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall"
-                  tabindex="0"
-                  title="Delete"
-                  type="button"
-                >
-                  <span
-                    class="MuiIconButton-label"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                      />
-                    </svg>
-                  </span>
-                  <span
-                    class="MuiTouchRipple-root"
-                  />
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div>
-        <div
-          aria-label="file-list-item"
-        >
-          <div
-            class="Columns-SD__sc-1a73118-0 bwYPTL"
-          >
-            <div
-              class="Column__ColumnRoot-SD__sc-m9n6o6-0 jNPayl"
-            >
-              <div>
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-colorAction MuiSvgIcon-fontSizeSmall"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    d="M12,10.5H13V13.5H12V10.5M7,11.5H8V10.5H7V11.5M20,6V18A2,2 0 0,1 18,20H6A2,2 0 0,1 4,18V6A2,2 0 0,1 6,4H18A2,2 0 0,1 20,6M9.5,10.5A1.5,1.5 0 0,0 8,9H5.5V15H7V13H8A1.5,1.5 0 0,0 9.5,11.5V10.5M14.5,10.5A1.5,1.5 0 0,0 13,9H10.5V15H13A1.5,1.5 0 0,0 14.5,13.5V10.5M18.5,9H15.5V15H17V13H18.5V11.5H17V10.5H18.5V9Z"
-                  />
-                </svg>
-              </div>
-            </div>
-            <div
-              class="Column__ColumnRoot-SD__sc-m9n6o6-0 hbBUFf"
-            >
-              <div>
-                <div
-                  class="FileListItem__FileListItemName-SD__sc-hxbsiy-0 gMzDXg"
-                  id="uid_6"
-                >
-                  TST1208 Dispatcher Info.pdf
-                </div>
-              </div>
-            </div>
-            <div
-              class="Column__ColumnRoot-SD__sc-m9n6o6-0 jNPayl"
-            >
-              <div />
-            </div>
-          </div>
-        </div>
-      </div>
-      <div>
-        <div
-          aria-label="file-list-item"
-        >
-          <div
-            class="Columns-SD__sc-1a73118-0 bwYPTL"
-          >
-            <div
-              class="Column__ColumnRoot-SD__sc-m9n6o6-0 jNPayl"
-            >
-              <div>
-                <svg
-                  aria-hidden="true"
-                  class="MuiSvgIcon-root MuiSvgIcon-colorAction MuiSvgIcon-fontSizeSmall"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"
-                  />
-                </svg>
-              </div>
-            </div>
-            <div
-              class="Column__ColumnRoot-SD__sc-m9n6o6-0 hbBUFf"
-            >
-              <div>
-                <div
-                  class="FileListItem__FileListItemName-SD__sc-hxbsiy-0 gMzDXg"
-                  id="uid_7"
-                >
-                  Object {
-                    "pathname": "/seed/picsum/1024/768",
-                  }
-                </div>
-              </div>
-            </div>
-            <div
-              class="Column__ColumnRoot-SD__sc-m9n6o6-0 jNPayl"
-            >
-              <div>
-                <button
-                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall"
-                  tabindex="0"
-                  title="Delete"
-                  type="button"
-                >
-                  <span
-                    class="MuiIconButton-label"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall"
-                      focusable="false"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
-                      />
-                    </svg>
-                  </span>
-                  <span
-                    class="MuiTouchRipple-root"
-                  />
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  `);
-});

package/src/flag-list/FlagList.stories.tsx

@@ -1,72 +0,0 @@
-import { Link, Tooltip } from '@material-ui/core';
-import { Meta } from '@storybook/react';
-import { Button } from '../button/Button';
-import { FlagList } from './FlagList';
-import { FlagListItem } from './FlagListItem';
-
-export default {
-  title: 'Lab/FlagList',
-  component: FlagList,
-  subcomponents: { FlagListItem },
-} as Meta;
-
-export const basic = () => (
-  <FlagList
-    title={<Link href="#">Alexandrino Cappuccino</Link>}
-    endAction={<Button variant="neutral">View Profile</Button>}
-  >
-    <FlagListItem showHelpIcon={true}>New Item</FlagListItem>
-    <FlagListItem
-      variant="warning"
-      showHelpIcon={true}
-      endAction={<Button variant="neutral">Action</Button>}
-    >
-      Warning
-    </FlagListItem>
-    <FlagListItem
-      variant="danger"
-      showHelpIcon={true}
-      endAction={<Button variant="neutral">Action</Button>}
-    >
-      Alert
-    </FlagListItem>
-  </FlagList>
-);
-
-export const headerless = () => (
-  <FlagList isStandalone={true}>
-    <FlagListItem
-      showHelpIcon={true}
-      endAction={<Button variant="neutral">Action</Button>}
-    >
-      New Item
-    </FlagListItem>
-    <FlagListItem
-      variant="warning"
-      showHelpIcon={true}
-      endAction={<Button variant="neutral">Action</Button>}
-    >
-      Warning
-    </FlagListItem>
-    <FlagListItem
-      variant="danger"
-      showHelpIcon={true}
-      endAction={<Button variant="neutral">Action</Button>}
-    >
-      Alert
-    </FlagListItem>
-  </FlagList>
-);
-
-export const withTooltips = () => (
-  <FlagList title="Flight to Mars">
-    <Tooltip placement="top-end" title="This is a tooltip for New Item">
-      <FlagListItem
-        showHelpIcon={true}
-        endAction={<Button variant="neutral">Action</Button>}
-      >
-        New Item
-      </FlagListItem>
-    </Tooltip>
-  </FlagList>
-);

package/src/flag-list/FlagList.tsx

@@ -1,54 +0,0 @@
-import { ColorDynamic } from '@superdispatch/ui';
-import { forwardRef, ReactNode } from 'react';
-import styled from 'styled-components';
-
-const FlagListHeader = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-
-  gap: 16px;
-  padding: 12px 16px;
-
-  background: ${ColorDynamic.Silver200};
-  border: 1px solid ${ColorDynamic.Silver400};
-  border-bottom: none;
-  border-radius: 4px 4px 0 0;
-
-  ${({ theme }) => theme.breakpoints.down('xs')} {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-`;
-
-const FlagListContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-`;
-
-interface BannerListProps {
-  isStandalone?: boolean;
-  title?: ReactNode;
-  endAction?: ReactNode;
-  children: ReactNode;
-}
-
-export const FlagList = forwardRef<HTMLDivElement, BannerListProps>(
-  ({ isStandalone = false, title, endAction, children }, ref) => {
-    return (
-      <FlagListContainer
-        data-variant={isStandalone ? 'standalone' : 'with-header'}
-        ref={ref}
-      >
-        {(title || endAction) && (
-          <FlagListHeader>
-            {title}
-            {endAction}
-          </FlagListHeader>
-        )}
-        {children}
-      </FlagListContainer>
-    );
-  },
-);

package/src/flag-list/FlagListItem.tsx

@@ -1,126 +0,0 @@
-import { Error, Flag, Help, Warning } from '@material-ui/icons';
-import { ColorDynamic } from '@superdispatch/ui';
-import { forwardRef, ReactNode } from 'react';
-import styled, { css } from 'styled-components';
-
-type Variant = 'primary' | 'warning' | 'danger';
-
-const IconContainer = styled.div`
-  padding: 4px;
-  border-radius: 50%;
-  background: ${ColorDynamic.Silver200};
-  color: ${ColorDynamic.Blue300};
-  transition: ${({ theme }) =>
-    theme.transitions.create(['color', 'background-color'])};
-
-  & .MuiSvgIcon-root {
-    font-size: 16px;
-  }
-`;
-
-const Content = styled.div`
-  display: flex;
-  align-items: center;
-  width: 100%;
-  gap: 8px;
-`;
-
-const HelpIcon = styled.div`
-  margin-left: auto;
-
-  & > svg {
-    font-size: 16px;
-    color: ${ColorDynamic.Dark500};
-  }
-`;
-
-const EndActions = styled.div`
-  display: flex;
-  align-items: center;
-  margin-left: auto;
-  gap: 8px;
-
-  ${({ theme }) => theme.breakpoints.down('xs')} {
-    margin-left: 0;
-    width: 100%;
-  }
-`;
-
-const BannerListItemStandalone = css`
-  background: ${ColorDynamic.Silver200};
-`;
-
-const BannerListContainer = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-
-  padding: 8px 16px 8px 12px;
-  border: 1px solid ${ColorDynamic.Silver400};
-  background: ${ColorDynamic.White};
-  cursor: default;
-
-  transition: ${({ theme }) =>
-    theme.transitions.create(['color', 'background-color'])};
-
-  & + & {
-    border-top: none;
-  }
-
-  &:last-child {
-    border-radius: 0 0 4px 4px;
-  }
-
-  &:hover {
-    background: ${ColorDynamic.Silver200};
-
-    & ${IconContainer} {
-      background: ${ColorDynamic.White};
-    }
-  }
-
-  [data-variant='standalone'] &:not(:hover) {
-    ${BannerListItemStandalone}
-  }
-
-  ${({ theme }) => theme.breakpoints.down('xs')} {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-`;
-
-interface BannerItemProps {
-  variant?: Variant;
-  showHelpIcon?: boolean;
-  endAction?: ReactNode;
-  children?: ReactNode;
-}
-
-export const FlagListItem = forwardRef<HTMLDivElement, BannerItemProps>(
-  (
-    { variant = 'primary', showHelpIcon, endAction, children, ...rest },
-    ref,
-  ) => {
-    return (
-      <BannerListContainer {...rest} ref={ref}>
-        <Content>
-          <IconContainer>
-            {variant === 'danger' ? (
-              <Error htmlColor={ColorDynamic.Red300} />
-            ) : variant === 'warning' ? (
-              <Warning htmlColor={ColorDynamic.Yellow300} />
-            ) : (
-              <Flag />
-            )}
-          </IconContainer>
-
-          {children}
-
-          <HelpIcon>{showHelpIcon && <Help />}</HelpIcon>
-        </Content>
-
-        {endAction && <EndActions>{endAction}</EndActions>}
-      </BannerListContainer>
-    );
-  },
-);

package/src/index.spec.ts

@@ -1,53 +0,0 @@
-import * as api from '.';
-
-test('api', () => {
-  expect(api).toMatchInlineSnapshot(`
-    Object {
-      "Alert": React.forwardRef(Alert),
-      "AnchorButton": React.forwardRef(AnchorButton),
-      "Banner": React.forwardRef(Banner),
-      "Box": React.forwardRef(Box),
-      "Button": React.forwardRef(Button),
-      "ButtonArea": React.forwardRef(ButtonArea),
-      "Chat": React.forwardRef(Chat),
-      "ChatMessage": React.forwardRef(ChatMessage),
-      "Container": React.forwardRef(Container),
-      "DescriptionItem": React.forwardRef(DescriptionItem),
-      "DescriptionLineItem": React.forwardRef(DescriptionLineItem),
-      "DottedLine": React.forwardRef(DescriptionLineItem__DottedLine),
-      "EmailAutocomplete": React.forwardRef(EmailAutocomplete),
-      "FileDropZone": React.forwardRef(FileDropZone),
-      "FileListItem": React.forwardRef(FileListItem),
-      "FlagList": React.forwardRef(FlagList),
-      "FlagListItem": React.forwardRef(FlagListItem),
-      "LinkedText": [Function],
-      "MultilineText": React.forwardRef(MultilineText),
-      "Navbar": [Function],
-      "NavbarAccordion": [Function],
-      "NavbarAccordionLabel": React.forwardRef(NavbarAccordion__NavbarAccordionLabel),
-      "NavbarAvatar": [Function],
-      "NavbarBadge": React.forwardRef(NavbarItem__NavbarBadge),
-      "NavbarBottomBar": [Function],
-      "NavbarItem": [Function],
-      "NavbarLabel": React.forwardRef(NavbarItem__NavbarLabel),
-      "NavbarList": [Function],
-      "NavbarMenu": [Function],
-      "NavbarMenuItem": [Function],
-      "PasswordStrength": [Function],
-      "Sidebar": React.forwardRef(Sidebar),
-      "SidebarBackButton": [Function],
-      "SidebarContainer": React.forwardRef(SidebarContainer),
-      "SidebarContent": [Function],
-      "SidebarDivider": React.forwardRef(SidebarDivider),
-      "SidebarMenuItem": React.forwardRef(SidebarMenuItem),
-      "SidebarMenuItemAction": React.forwardRef(SidebarMenuItemAction),
-      "SidebarMenuItemAvatar": React.forwardRef(SidebarMenuItemAvatar),
-      "SidebarSubheader": React.forwardRef(SidebarSubheader),
-      "TextBox": React.forwardRef(TextBox),
-      "formatBytes": [Function],
-      "toBytes": [Function],
-      "useNavbarContext": [Function],
-      "useSidebarContext": [Function],
-    }
-  `);
-});

package/src/index.ts

@@ -1,36 +0,0 @@
-export * from './alert/Alert';
-export * from './banner/Banner';
-export * from './box/Box';
-export * from './button-area/ButtonArea';
-export * from './button/Button';
-export * from './chat/Chat';
-export * from './chat/ChatMessage';
-export * from './container/Container';
-export * from './description-item/DescriptionItem';
-export * from './description-line-item/DescriptionLineItem';
-export * from './email-autocomplate/EmailAutocomplete';
-export * from './file-drop-zone/FileDropZone';
-export * from './file-list-item/FileListItem';
-export * from './flag-list/FlagList';
-export * from './flag-list/FlagListItem';
-export * from './linked-text/LinkedText';
-export * from './multiline-text/MultilineText';
-export * from './navbar/Navbar';
-export * from './navbar/NavbarAccordion';
-export * from './navbar/NavbarAvatar';
-export * from './navbar/NavbarBottomBar';
-export { useNavbarContext } from './navbar/NavbarContext';
-export * from './navbar/NavbarItem';
-export * from './navbar/NavbarList';
-export * from './navbar/NavbarMenu';
-export * from './passwordStepper/PasswordStrength';
-export * from './sidebar/Sidebar';
-export * from './sidebar/SidebarBackButton';
-export * from './sidebar/SidebarContainer';
-export * from './sidebar/SidebarContent';
-export * from './sidebar/SidebarDivider';
-export * from './sidebar/SidebarMenuItem';
-export * from './sidebar/SidebarMenuItemAction';
-export * from './sidebar/SidebarMenuItemAvatar';
-export * from './sidebar/SidebarSubheader';
-export * from './text-box/TextBox';