@superdispatch/ui-lab 0.50.3 → 0.50.5

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

@@ -0,0 +1,339 @@
+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

@@ -0,0 +1,72 @@
+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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,126 @@
+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

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,36 @@
+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';