@superdispatch/ui 0.21.8 → 0.21.13

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

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

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

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

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

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

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

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

@@ -0,0 +1,24 @@
+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,
+    },
+  };
+}