@superdispatch/ui 0.21.13 → 0.22.0

package/src/app-bar/AppBar.stories.tsx

@@ -1,62 +0,0 @@
-import { AppBar, IconButton, Toolbar, Typography } from '@material-ui/core';
-import { ArrowBack, Close } from '@material-ui/icons';
-import { Meta } from '@storybook/react';
-import { PropsLink } from '@superdispatch/ui-docs';
-import { Column, Columns } from '..';
-
-export default {
-  title: 'Surfaces/AppBar',
-  parameters: {
-    componentSubtitle: (
-      <PropsLink url="https://material-ui.com/api/app-bar/#props" />
-    ),
-  },
-} as Meta;
-
-export const basic = () => (
-  <AppBar>
-    <Toolbar>
-      <Columns align="center">
-        <Column width="content">
-          <IconButton edge="start" aria-label="back">
-            <ArrowBack />
-          </IconButton>
-        </Column>
-
-        <Column>
-          <Typography variant="h2">App Bar</Typography>
-        </Column>
-
-        <Column width="content">
-          <IconButton edge="end" aria-label="close">
-            <Close />
-          </IconButton>
-        </Column>
-      </Columns>
-    </Toolbar>
-  </AppBar>
-);
-
-export const dense = () => (
-  <AppBar>
-    <Toolbar variant="dense">
-      <Columns align="center">
-        <Column width="content">
-          <IconButton edge="start" aria-label="back">
-            <ArrowBack />
-          </IconButton>
-        </Column>
-
-        <Column>
-          <Typography variant="h2">App Bar</Typography>
-        </Column>
-
-        <Column width="content">
-          <IconButton edge="end" aria-label="close">
-            <Close />
-          </IconButton>
-        </Column>
-      </Columns>
-    </Toolbar>
-  </AppBar>
-);

package/src/app-bar/AppBarOverrides.ts

@@ -1,9 +0,0 @@
-import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
-
-export function overrideAppBar(theme: SuperDispatchTheme): void {
-  theme.props.MuiAppBar = {
-    elevation: 0,
-    color: 'inherit',
-    position: 'static',
-  };
-}

package/src/app-bar/__tests__/AppBar.spec.tsx

@@ -1,86 +0,0 @@
-import { AppBar } from '@material-ui/core';
-import { renderCSS, renderTheme } from '@superdispatch/ui-testutils';
-
-it('checks default props', () => {
-  const { props } = renderTheme();
-
-  expect(props.MuiAppBar).toMatchInlineSnapshot(`
-    Object {
-      "color": "inherit",
-      "elevation": 0,
-      "position": "static",
-    }
-  `);
-});
-
-it('checks component css', () => {
-  expect(renderCSS(<AppBar />, ['MuiAppBar'])).toMatchInlineSnapshot(`
-    .MuiAppBar-root {
-      width: 100%;
-      display: flex;
-      z-index: 1100;
-      box-sizing: border-box;
-      flex-shrink: 0;
-      flex-direction: column;
-    }
-
-    .MuiAppBar-positionFixed {
-      top: 0;
-      left: auto;
-      right: 0;
-      position: fixed;
-    }
-
-    @media print {
-      .MuiAppBar-positionFixed {
-        position: absolute;
-      }
-    }
-
-    .MuiAppBar-positionAbsolute {
-      top: 0;
-      left: auto;
-      right: 0;
-      position: absolute;
-    }
-
-    .MuiAppBar-positionSticky {
-      top: 0;
-      left: auto;
-      right: 0;
-      position: sticky;
-    }
-
-    .MuiAppBar-positionStatic {
-      position: static;
-    }
-
-    .MuiAppBar-positionRelative {
-      position: relative;
-    }
-
-    .MuiAppBar-colorDefault {
-      color: rgba(0, 0, 0, 0.87);
-      background-color: #f5f5f5;
-    }
-
-    .MuiAppBar-colorPrimary {
-      color: Color.White;
-      background-color: Color.Blue300;
-    }
-
-    .MuiAppBar-colorSecondary {
-      color: Color.White;
-      background-color: #f50057;
-    }
-
-    .MuiAppBar-colorInherit {
-      color: inherit;
-    }
-
-    .MuiAppBar-colorTransparent {
-      color: inherit;
-      background-color: transparent;
-    }
-  `);
-});

package/src/autocomplete/Autocomplete.stories.tsx

@@ -1,76 +0,0 @@
-import { TextField } from '@material-ui/core';
-import { Autocomplete } from '@material-ui/lab';
-import { Meta } from '@storybook/react';
-import { PropsLink } from '@superdispatch/ui-docs';
-import { Box } from '@superdispatch/ui-lab';
-
-export default {
-  title: 'Inputs/Autocomplete',
-  decorators: [
-    (Story) => (
-      <Box maxWidth="240px">
-        <Story />
-      </Box>
-    ),
-  ],
-  parameters: {
-    componentSubtitle: (
-      <PropsLink url="https://material-ui.com/api/autocomplete/#props" />
-    ),
-  },
-} as Meta;
-
-export const basic = () => (
-  <Autocomplete
-    options={['Option 1', 'Option 2']}
-    renderInput={(params) => (
-      <TextField {...params} label="Label" helperText="Helper text" />
-    )}
-  />
-);
-
-export const error = () => (
-  <Autocomplete
-    options={['Option 1', 'Option 2']}
-    renderInput={(params) => (
-      <TextField
-        {...params}
-        error={true}
-        label="Label"
-        helperText="Error text"
-      />
-    )}
-  />
-);
-
-export const disabled = () => (
-  <Autocomplete
-    disabled={true}
-    options={[]}
-    renderInput={(params) => <TextField {...params} />}
-  />
-);
-
-export const loading = () => (
-  <Autocomplete
-    loading={true}
-    options={[]}
-    renderInput={(params) => <TextField {...params} />}
-  />
-);
-
-export const disableClearable = () => (
-  <Autocomplete
-    disableClearable={true}
-    options={['Option 1', 'Option 2']}
-    renderInput={(params) => <TextField {...params} />}
-  />
-);
-
-export const forcePopupIcon = () => (
-  <Autocomplete
-    forcePopupIcon={true}
-    options={['John Doe', 'Richard Roe']}
-    renderInput={(params) => <TextField {...params} />}
-  />
-);

package/src/autocomplete/AutocompleteOverrides.tsx

@@ -1,58 +0,0 @@
-import { SvgIcon } from '@material-ui/core';
-import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
-
-export function overrideAutocomplete(theme: SuperDispatchTheme): void {
-  const sm = theme.breakpoints.up('sm');
-
-  // Remove `Object.assign` after official release of `Autocomplete`.
-  Object.assign(theme.props, {
-    MuiAutocomplete: {
-      popupIcon: (
-        <SvgIcon>
-          <path d="M12 16.5L6 9h12l-6 7.5z" fill="currentColor" />
-        </SvgIcon>
-      ),
-    },
-  });
-
-  Object.assign(theme.overrides, {
-    MuiAutocomplete: {
-      paper: { ...theme.typography.body2 },
-      tag: {
-        margin: '4px',
-        [sm]: { margin: '2px' },
-      },
-      endAdornment: {
-        top: 0,
-        bottom: 0,
-        display: 'flex',
-        alignItems: 'center',
-      },
-      popupIndicator: {
-        '& .MuiSvgIcon-root': {
-          fontSize: '24px',
-          [sm]: { fontSize: '16px' },
-        },
-      },
-      inputRoot: {
-        '&[class*="MuiOutlinedInput-root"]': {
-          padding: '6px 8px',
-
-          '& $input': {
-            width: '144px',
-            padding: '4px',
-          },
-
-          '& $input:first-child': { paddingLeft: undefined },
-          '& $endAdornment': { right: '12px' },
-
-          [sm]: {
-            padding: theme.spacing(0.5, 0.75),
-            '& $input': { padding: '2px' },
-            '& $endAdornment': { right: '8px' },
-          },
-        },
-      },
-    },
-  });
-}

package/src/autocomplete/__tests__/Autocomplete.spec.tsx

@@ -1,323 +0,0 @@
-import { Autocomplete } from '@material-ui/lab';
-import { renderCSS, renderTheme } from '@superdispatch/ui-testutils';
-
-it('checks default props', () => {
-  const { props } = renderTheme();
-
-  // Remove `any` after official release.
-  expect((props as any).MuiAutocomplete).toMatchInlineSnapshot(`
-    Object {
-      "popupIcon": <WithStyles(ForwardRef(SvgIcon))>
-        <path
-          d="M12 16.5L6 9h12l-6 7.5z"
-          fill="currentColor"
-        />
-      </WithStyles(ForwardRef(SvgIcon))>,
-    }
-  `);
-});
-
-it('checks component css', () => {
-  expect(
-    renderCSS(<Autocomplete options={[]} renderInput={() => <div />} />, [
-      'MuiAutocomplete',
-    ]),
-  ).toMatchInlineSnapshot(`
-    .MuiAutocomplete-root.Mui-focused .MuiAutocomplete-clearIndicatorDirty {
-      visibility: visible;
-    }
-
-    @media (pointer: fine) {
-      .MuiAutocomplete-root:hover .MuiAutocomplete-clearIndicatorDirty {
-        visibility: visible;
-      }
-    }
-
-    .MuiAutocomplete-fullWidth {
-      width: 100%;
-    }
-
-    .MuiAutocomplete-tag {
-      margin: 4px;
-      max-width: calc(100% - 6px);
-    }
-
-    @media (min-width: 600px) {
-      .MuiAutocomplete-tag {
-        margin: 2px;
-      }
-    }
-
-    .MuiAutocomplete-tagSizeSmall {
-      margin: 2px;
-      max-width: calc(100% - 4px);
-    }
-
-    .MuiAutocomplete-inputRoot {
-      flex-wrap: wrap;
-    }
-
-    .MuiAutocomplete-hasPopupIcon .MuiAutocomplete-inputRoot,
-    .MuiAutocomplete-hasClearIcon .MuiAutocomplete-inputRoot {
-      padding-right: 30px;
-    }
-
-    .MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon
-      .MuiAutocomplete-inputRoot {
-      padding-right: 56px;
-    }
-
-    .MuiAutocomplete-inputRoot .MuiAutocomplete-input {
-      width: 0;
-      min-width: 30px;
-    }
-
-    .MuiAutocomplete-inputRoot[class*='MuiInput-root'] {
-      padding-bottom: 1px;
-    }
-
-    .MuiAutocomplete-inputRoot[class*='MuiOutlinedInput-root'] {
-      padding: 6px 8px;
-    }
-
-    .MuiAutocomplete-inputRoot[class*='MuiOutlinedInput-root'][class*='MuiOutlinedInput-marginDense'] {
-      padding: 6px;
-    }
-
-    .MuiAutocomplete-inputRoot[class*='MuiFilledInput-root'] {
-      padding-top: 19px;
-      padding-left: 8px;
-    }
-
-    .MuiAutocomplete-inputRoot[class*='MuiFilledInput-root'][class*='MuiFilledInput-marginDense'] {
-      padding-bottom: 1px;
-    }
-
-    .MuiAutocomplete-inputRoot[class*='MuiFilledInput-root'][class*='MuiFilledInput-marginDense']
-      .MuiAutocomplete-input {
-      padding: 4.5px 4px;
-    }
-
-    .MuiAutocomplete-hasPopupIcon
-      .MuiAutocomplete-inputRoot[class*='MuiFilledInput-root'],
-    .MuiAutocomplete-hasClearIcon
-      .MuiAutocomplete-inputRoot[class*='MuiFilledInput-root'] {
-      padding-right: 39px;
-    }
-
-    .MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon
-      .MuiAutocomplete-inputRoot[class*='MuiFilledInput-root'] {
-      padding-right: 65px;
-    }
-
-    .MuiAutocomplete-inputRoot[class*='MuiFilledInput-root']
-      .MuiAutocomplete-input {
-      padding: 9px 4px;
-    }
-
-    .MuiAutocomplete-inputRoot[class*='MuiFilledInput-root']
-      .MuiAutocomplete-endAdornment {
-      right: 9px;
-    }
-
-    .MuiAutocomplete-inputRoot[class*='MuiOutlinedInput-root'][class*='MuiOutlinedInput-marginDense']
-      .MuiAutocomplete-input {
-      padding: 4.5px 4px;
-    }
-
-    .MuiAutocomplete-hasPopupIcon
-      .MuiAutocomplete-inputRoot[class*='MuiOutlinedInput-root'],
-    .MuiAutocomplete-hasClearIcon
-      .MuiAutocomplete-inputRoot[class*='MuiOutlinedInput-root'] {
-      padding-right: 39px;
-    }
-
-    .MuiAutocomplete-hasPopupIcon.MuiAutocomplete-hasClearIcon
-      .MuiAutocomplete-inputRoot[class*='MuiOutlinedInput-root'] {
-      padding-right: 65px;
-    }
-
-    .MuiAutocomplete-inputRoot[class*='MuiOutlinedInput-root']
-      .MuiAutocomplete-input {
-      width: 144px;
-      padding: 4px;
-    }
-
-    .MuiAutocomplete-inputRoot[class*='MuiOutlinedInput-root']
-      .MuiAutocomplete-endAdornment {
-      right: 12px;
-    }
-
-    @media (min-width: 600px) {
-      .MuiAutocomplete-inputRoot[class*='MuiOutlinedInput-root'] {
-        padding: 4px 6px;
-      }
-
-      .MuiAutocomplete-inputRoot[class*='MuiOutlinedInput-root']
-        .MuiAutocomplete-input {
-        padding: 2px;
-      }
-
-      .MuiAutocomplete-inputRoot[class*='MuiOutlinedInput-root']
-        .MuiAutocomplete-endAdornment {
-        right: 8px;
-      }
-    }
-
-    .MuiAutocomplete-inputRoot[class*='MuiInput-root'][class*='MuiInput-marginDense']
-      .MuiAutocomplete-input {
-      padding: 4px 4px 5px;
-    }
-
-    .MuiAutocomplete-inputRoot[class*='MuiInput-root'][class*='MuiInput-marginDense']
-      .MuiAutocomplete-input:first-child {
-      padding: 3px 0 6px;
-    }
-
-    .MuiAutocomplete-inputRoot[class*='MuiInput-root'] .MuiAutocomplete-input {
-      padding: 4px;
-    }
-
-    .MuiAutocomplete-inputRoot[class*='MuiInput-root']
-      .MuiAutocomplete-input:first-child {
-      padding: 6px 0;
-    }
-
-    .MuiAutocomplete-input {
-      opacity: 0;
-      flex-grow: 1;
-      text-overflow: ellipsis;
-    }
-
-    .MuiAutocomplete-inputFocused {
-      opacity: 1;
-    }
-
-    .MuiAutocomplete-endAdornment {
-      top: 0;
-      right: 0;
-      bottom: 0;
-      display: flex;
-      position: absolute;
-      align-items: center;
-    }
-
-    .MuiAutocomplete-clearIndicator {
-      padding: 4px;
-      visibility: hidden;
-      margin-right: -2px;
-    }
-
-    .MuiAutocomplete-popupIndicator {
-      padding: 2px;
-      margin-right: -2px;
-    }
-
-    .MuiAutocomplete-popupIndicator .MuiSvgIcon-root {
-      font-size: 24px;
-    }
-
-    @media (min-width: 600px) {
-      .MuiAutocomplete-popupIndicator .MuiSvgIcon-root {
-        font-size: 16px;
-      }
-    }
-
-    .MuiAutocomplete-popupIndicatorOpen {
-      transform: rotate(180deg);
-    }
-
-    .MuiAutocomplete-popper {
-      z-index: 1300;
-    }
-
-    .MuiAutocomplete-popperDisablePortal {
-      position: absolute;
-    }
-
-    .MuiAutocomplete-paper {
-      margin: 4px 0;
-      overflow: hidden;
-      font-size: 14px;
-      font-family: 'Inter', sans-serif;
-      font-weight: 400;
-      line-height: 20px;
-    }
-
-    @media (min-width: 0px) and (max-width: 599.95px) {
-      .MuiAutocomplete-paper {
-        font-size: 16px;
-        line-height: 24px;
-      }
-    }
-
-    .MuiAutocomplete-listbox {
-      margin: 0;
-      padding: 8px 0;
-      overflow: auto;
-      list-style: none;
-      max-height: 40vh;
-    }
-
-    .MuiAutocomplete-loading {
-      color: Color.Dark200;
-      padding: 14px 16px;
-    }
-
-    .MuiAutocomplete-noOptions {
-      color: Color.Dark200;
-      padding: 14px 16px;
-    }
-
-    .MuiAutocomplete-option {
-      cursor: pointer;
-      display: flex;
-      outline: 0;
-      box-sizing: border-box;
-      min-height: 48px;
-      align-items: center;
-      padding-top: 6px;
-      padding-left: 16px;
-      padding-right: 16px;
-      padding-bottom: 6px;
-      justify-content: flex-start;
-      -webkit-tap-highlight-color: transparent;
-    }
-
-    @media (min-width: 600px) {
-      .MuiAutocomplete-option {
-        min-height: auto;
-      }
-    }
-
-    .MuiAutocomplete-option[aria-selected='true'] {
-      background-color: Color.Silver300;
-    }
-
-    .MuiAutocomplete-option[data-focus='true'] {
-      background-color: Color.Silver100;
-    }
-
-    .MuiAutocomplete-option:active {
-      background-color: Color.Silver300;
-    }
-
-    .MuiAutocomplete-option[aria-disabled='true'] {
-      opacity: 0.38;
-      pointer-events: none;
-    }
-
-    .MuiAutocomplete-groupLabel {
-      top: -8px;
-      background-color: Color.White;
-    }
-
-    .MuiAutocomplete-groupUl {
-      padding: 0;
-    }
-
-    .MuiAutocomplete-groupUl .MuiAutocomplete-option {
-      padding-left: 24px;
-    }
-  `);
-});

package/src/avatar/Avatar.stories.tsx

@@ -1,17 +0,0 @@
-import { Avatar } from '@material-ui/core';
-import { PropsLink } from '@superdispatch/ui-docs';
-
-export default {
-  title: 'Data Display/Avatar',
-  parameters: {
-    componentSubtitle: (
-      <PropsLink url="https://material-ui.com/api/avatar/#props" />
-    ),
-  },
-};
-
-export const basic = () => <Avatar />;
-export const text = () => <Avatar>A1</Avatar>;
-export const image = () => (
-  <Avatar src="https://images.unsplash.com/photo-1571816119607-57e48af1caa9?q=80" />
-);

package/src/avatar/AvatarOverrides.ts

@@ -1,24 +0,0 @@
-import { Color } from '../theme/Color';
-import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
-
-export function overrideAvatar(theme: SuperDispatchTheme): void {
-  theme.overrides.MuiAvatar = {
-    root: {
-      ...theme.typography.h5,
-      textTransform: 'uppercase',
-
-      width: theme.spacing(5),
-      height: theme.spacing(5),
-
-      [theme.breakpoints.up('sm')]: {
-        width: theme.spacing(4),
-        height: theme.spacing(4),
-      },
-    },
-
-    colorDefault: {
-      color: Color.Dark300,
-      backgroundColor: Color.Silver300,
-    },
-  };
-}