@superdispatch/ui 0.21.13 → 0.22.0

package/src/inline/Inline.tsx

@@ -1,144 +0,0 @@
-import { forwardRef, ReactNode } from 'react';
-import flattenChildren from 'react-keyed-flatten-children';
-import styled, { css, SimpleInterpolation } from 'styled-components';
-import {
-  HorizontalAlign,
-  parseAlignProp,
-  VerticalAlign,
-} from '../props/AlignProps';
-import {
-  ResponsiveProp,
-  ResponsivePropTuple,
-  useResponsiveProp,
-} from '../props/ResponsiveProp';
-import { parseSpaceProp, SpaceProp } from '../props/SpaceProp';
-
-function inlineRootMixin(
-  spaceProp: SpaceProp,
-  noWrap: boolean,
-  verticalAlign: VerticalAlign,
-  horizontalAlign: HorizontalAlign,
-): readonly SimpleInterpolation[] {
-  const space = parseSpaceProp(spaceProp);
-
-  return css`
-    &:before {
-      margin-top: ${-space - 1}px;
-    }
-
-    & > div {
-      display: flex;
-      margin-left: -${space}px;
-      flex-wrap: ${noWrap ? 'nowrap' : 'wrap'};
-      align-items: ${parseAlignProp(verticalAlign)};
-      justify-content: ${parseAlignProp(horizontalAlign)};
-
-      & > div {
-        &:empty {
-          display: none;
-        }
-
-        min-width: 0;
-        flex-shrink: 0;
-        max-width: 100%;
-
-        margin-top: ${space}px;
-        margin-left: ${space}px;
-      }
-    }
-  `;
-}
-
-interface InlineRootProps {
-  space: ResponsivePropTuple<SpaceProp>;
-  noWrap: ResponsivePropTuple<boolean>;
-  verticalAlign: ResponsivePropTuple<VerticalAlign>;
-  horizontalAlign: ResponsivePropTuple<HorizontalAlign>;
-}
-
-const InlineRoot = styled.div<InlineRootProps>(
-  ({ theme, space, noWrap, verticalAlign, horizontalAlign }) =>
-    css`
-      padding-top: 1px;
-
-      &:before {
-        content: '';
-        display: block;
-      }
-
-      ${inlineRootMixin(
-        space[0],
-        noWrap[0],
-        verticalAlign[0],
-        horizontalAlign[0],
-      )}
-
-      ${theme.breakpoints.up('sm')} {
-        ${inlineRootMixin(
-          space[1],
-          noWrap[1],
-          verticalAlign[1],
-          horizontalAlign[1],
-        )}
-      }
-
-      ${theme.breakpoints.up('md')} {
-        ${inlineRootMixin(
-          space[2],
-          noWrap[2],
-          verticalAlign[2],
-          horizontalAlign[2],
-        )}
-      }
-    `,
-);
-
-export interface InlineProps {
-  children?: ReactNode;
-  'aria-label'?: string;
-  'aria-labelledby'?: string;
-
-  noWrap?: ResponsiveProp<boolean>;
-  space?: ResponsiveProp<SpaceProp>;
-  verticalAlign?: ResponsiveProp<VerticalAlign>;
-  horizontalAlign?: ResponsiveProp<HorizontalAlign>;
-}
-
-export const Inline = forwardRef<HTMLDivElement, InlineProps>(
-  (
-    {
-      children,
-      'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledBy,
-
-      noWrap: noWrapProp = false,
-      space: spaceProp = 'xsmall',
-      verticalAlign: verticalAlignProp = 'top',
-      horizontalAlign: horizontalAlignProp = 'left',
-    },
-    ref,
-  ) => {
-    const space = useResponsiveProp(spaceProp);
-    const noWrap = useResponsiveProp(noWrapProp);
-    const verticalAlign = useResponsiveProp(verticalAlignProp);
-    const horizontalAlign = useResponsiveProp(horizontalAlignProp);
-
-    return (
-      <InlineRoot
-        ref={ref}
-        space={space}
-        noWrap={noWrap}
-        verticalAlign={verticalAlign}
-        horizontalAlign={horizontalAlign}
-        aria-label={ariaLabel}
-        aria-labelledby={ariaLabelledBy}
-      >
-        <div>
-          {flattenChildren(children).map((child, idx) => (
-            <div key={idx}>{child}</div>
-          ))}
-        </div>
-      </InlineRoot>
-    );
-  },
-);

package/src/link/Link.stories.tsx

@@ -1,41 +0,0 @@
-import { Link, Typography } from '@material-ui/core';
-import { Meta } from '@storybook/react';
-import { Box } from '@superdispatch/ui-lab';
-import { Stack } from '../stack/Stack';
-
-export default { title: 'Navigation/Link' } as Meta;
-
-export const basic = () => (
-  <Typography>
-    This is a{' '}
-    <Link href="#" target="_blank">
-      link
-    </Link>{' '}
-    in text with a <Link component="button">button link</Link>.
-  </Typography>
-);
-
-export const multiline = () => (
-  <Box maxWidth="64px">
-    <Link href="#" target="_blank">
-      This is multi-line link
-    </Link>
-  </Box>
-);
-
-export const multilineButton = () => (
-  <Box maxWidth="64px">
-    <Link component="button">This is multi-line button link</Link>
-  </Box>
-);
-
-export const colors = () => (
-  <Stack>
-    <Link href="#" target="_blank" color="primary">
-      Primary
-    </Link>
-    <Link href="#" target="_blank" color="textPrimary">
-      Text Primary
-    </Link>
-  </Stack>
-);

package/src/link/LinkOverrides.ts

@@ -1,43 +0,0 @@
-import { Color } from '../theme/Color';
-import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
-
-function line(color: string): string {
-  return `linear-gradient(to right, ${color} 0%, ${color} 100%)`;
-}
-
-export function overrideLink(theme: SuperDispatchTheme): void {
-  theme.props.MuiLink = { underline: 'none', color: 'textPrimary' };
-
-  theme.overrides.MuiLink = {
-    root: {
-      backgroundSize: '100% 1px',
-      backgroundRepeat: 'repeat-x',
-      backgroundPosition: '0 100%',
-      backgroundColor: Color.Transparent,
-
-      '&:focus': { outline: 'none' },
-      '&:hover, &:active': { backgroundImage: line('currentColor') },
-
-      '&.MuiTypography-colorTextPrimary': {
-        backgroundImage: line(Color.Silver500),
-
-        '&:focus, &:hover, &:active': {
-          color: Color.Blue300,
-          backgroundImage: line(Color.Blue300),
-        },
-      },
-    },
-
-    button: {
-      // Reset button styles.
-      backgroundColor: undefined,
-
-      // Override browser defaults.
-      fontSize: 'inherit',
-      textAlign: 'inherit',
-      lineHeight: 'inherit',
-      userSelect: 'inherit',
-      verticalAlign: 'inherit',
-    },
-  };
-}

package/src/link/__tests__/Link.spec.tsx

@@ -1,98 +0,0 @@
-import { Link } from '@material-ui/core';
-import { renderCSS, renderTheme } from '@superdispatch/ui-testutils';
-
-it('checks default props', () => {
-  const { props } = renderTheme();
-
-  expect(props.MuiLink).toMatchInlineSnapshot(`
-    Object {
-      "color": "textPrimary",
-      "underline": "none",
-    }
-  `);
-});
-
-it('checks component css', () => {
-  expect(renderCSS(<Link>Text</Link>, ['MuiLink'])).toMatchInlineSnapshot(`
-    .MuiLink-root {
-      background-size: 100% 1px;
-      background-color: Color.Transparent;
-      background-repeat: repeat-x;
-      background-position: 0 100%;
-    }
-
-    .MuiLink-root:focus {
-      outline: none;
-    }
-
-    .MuiLink-root:hover,
-    .MuiLink-root:active {
-      background-image: linear-gradient(
-        to right,
-        currentColor 0%,
-        currentColor 100%
-      );
-    }
-
-    .MuiLink-root.MuiTypography-colorTextPrimary {
-      background-image: linear-gradient(
-        to right,
-        Color.Silver500 0%,
-        Color.Silver500 100%
-      );
-    }
-
-    .MuiLink-root.MuiTypography-colorTextPrimary:focus,
-    .MuiLink-root.MuiTypography-colorTextPrimary:hover,
-    .MuiLink-root.MuiTypography-colorTextPrimary:active {
-      color: Color.Blue300;
-      background-image: linear-gradient(
-        to right,
-        Color.Blue300 0%,
-        Color.Blue300 100%
-      );
-    }
-
-    .MuiLink-underlineNone {
-      text-decoration: none;
-    }
-
-    .MuiLink-underlineHover {
-      text-decoration: none;
-    }
-
-    .MuiLink-underlineHover:hover {
-      text-decoration: underline;
-    }
-
-    .MuiLink-underlineAlways {
-      text-decoration: underline;
-    }
-
-    .MuiLink-button {
-      border: 0;
-      cursor: pointer;
-      margin: 0;
-      outline: 0;
-      padding: 0;
-      position: relative;
-      font-size: inherit;
-      text-align: inherit;
-      line-height: inherit;
-      user-select: inherit;
-      border-radius: 0;
-      vertical-align: inherit;
-      -moz-appearance: none;
-      -webkit-appearance: none;
-      -webkit-tap-highlight-color: transparent;
-    }
-
-    .MuiLink-button::-moz-focus-inner {
-      border-style: none;
-    }
-
-    .MuiLink-button.Mui-focusVisible {
-      outline: auto;
-    }
-  `);
-});

package/src/list/ListOverrides.ts

@@ -1,11 +0,0 @@
-import { Color } from '../theme/Color';
-import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
-
-export function overrideList(theme: SuperDispatchTheme): void {
-  theme.overrides.MuiListItem = {
-    root: {
-      '&$selected, &$selected:hover': { backgroundColor: Color.Blue50 },
-      '& .MuiTouchRipple-root': { color: Color.Blue100 },
-    },
-  };
-}

package/src/list/__tests__/List.spec.tsx

@@ -1,182 +0,0 @@
-import {
-  List,
-  ListItem,
-  ListItemAvatar,
-  ListItemIcon,
-  ListItemSecondaryAction,
-  ListItemText,
-} from '@material-ui/core';
-import { renderCSS, renderTheme } from '@superdispatch/ui-testutils';
-
-it('checks default props', () => {
-  const { props } = renderTheme();
-
-  expect(props.MuiList).toMatchInlineSnapshot(`undefined`);
-  expect(props.MuiListItem).toMatchInlineSnapshot(`undefined`);
-  expect(props.MuiListItemAvatar).toMatchInlineSnapshot(`undefined`);
-  expect(props.MuiListItemIcon).toMatchInlineSnapshot(`undefined`);
-  expect(props.MuiListItemSecondaryAction).toMatchInlineSnapshot(`undefined`);
-  expect(props.MuiListItemText).toMatchInlineSnapshot(`undefined`);
-});
-
-it('checks component css', () => {
-  expect(
-    renderCSS(
-      <List>
-        <ListItem>
-          <ListItemAvatar>
-            <span />
-          </ListItemAvatar>
-
-          <ListItemIcon>
-            <span />
-          </ListItemIcon>
-
-          <ListItemText />
-          <ListItemSecondaryAction />
-        </ListItem>
-
-        <ListItem button={true} />
-      </List>,
-      [
-        'MuiList',
-        'MuiListItem',
-        'MuiListItemAvatar',
-        'MuiListItemIcon',
-        'MuiListItemSecondaryAction',
-        'MuiListItemText',
-      ],
-    ),
-  ).toMatchInlineSnapshot(`
-    .MuiList-root {
-      margin: 0;
-      padding: 0;
-      position: relative;
-      list-style: none;
-    }
-
-    .MuiList-padding {
-      padding-top: 8px;
-      padding-bottom: 8px;
-    }
-
-    .MuiList-subheader {
-      padding-top: 0;
-    }
-
-    .MuiListItem-root {
-      width: 100%;
-      display: flex;
-      position: relative;
-      box-sizing: border-box;
-      text-align: left;
-      align-items: center;
-      padding-top: 8px;
-      padding-bottom: 8px;
-      justify-content: flex-start;
-      text-decoration: none;
-    }
-
-    .MuiListItem-root.Mui-focusVisible {
-      background-color: Color.Silver300;
-    }
-
-    .MuiListItem-root.Mui-selected,
-    .MuiListItem-root.Mui-selected:hover {
-      background-color: Color.Blue50;
-    }
-
-    .MuiListItem-root.Mui-disabled {
-      opacity: 0.5;
-    }
-
-    .MuiListItem-root .MuiTouchRipple-root {
-      color: Color.Blue100;
-    }
-
-    .MuiListItem-container {
-      position: relative;
-    }
-
-    .MuiListItem-dense {
-      padding-top: 4px;
-      padding-bottom: 4px;
-    }
-
-    .MuiListItem-alignItemsFlexStart {
-      align-items: flex-start;
-    }
-
-    .MuiListItem-divider {
-      border-bottom: 1px solid Color.Silver400;
-      background-clip: padding-box;
-    }
-
-    .MuiListItem-gutters {
-      padding-left: 16px;
-      padding-right: 16px;
-    }
-
-    .MuiListItem-button {
-      transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-    }
-
-    .MuiListItem-button:hover {
-      text-decoration: none;
-      background-color: Color.Silver100;
-    }
-
-    @media (hover: none) {
-      .MuiListItem-button:hover {
-        background-color: transparent;
-      }
-    }
-
-    .MuiListItem-secondaryAction {
-      padding-right: 48px;
-    }
-
-    .MuiListItemAvatar-root {
-      min-width: 56px;
-      flex-shrink: 0;
-    }
-
-    .MuiListItemAvatar-alignItemsFlexStart {
-      margin-top: 8px;
-    }
-
-    .MuiListItemIcon-root {
-      color: rgba(0, 0, 0, 0.54);
-      display: inline-flex;
-      min-width: 56px;
-      flex-shrink: 0;
-    }
-
-    .MuiListItemIcon-alignItemsFlexStart {
-      margin-top: 8px;
-    }
-
-    .MuiListItemSecondaryAction-root {
-      top: 50%;
-      right: 16px;
-      position: absolute;
-      transform: translateY(-50%);
-    }
-
-    .MuiListItemText-root {
-      flex: 1 1 auto;
-      min-width: 0;
-      margin-top: 4px;
-      margin-bottom: 4px;
-    }
-
-    .MuiListItemText-multiline {
-      margin-top: 6px;
-      margin-bottom: 6px;
-    }
-
-    .MuiListItemText-inset {
-      padding-left: 56px;
-    }
-  `);
-});

package/src/menu/Menu.stories.tsx

@@ -1,35 +0,0 @@
-import { Button, Menu, MenuItem } from '@material-ui/core';
-import { Meta } from '@storybook/react';
-import { UseState } from '@superdispatch/ui-docs';
-
-export default { title: 'Navigation/Menu' } as Meta;
-
-export const basic = () => (
-  <UseState initialState={null}>
-    {(state, setState) => (
-      <>
-        <Button
-          color="primary"
-          variant="contained"
-          onClick={(event) => {
-            setState(event.currentTarget);
-          }}
-        >
-          Menu
-        </Button>
-
-        <Menu
-          open={!!state}
-          anchorEl={state}
-          onClose={() => {
-            setState(false);
-          }}
-        >
-          <MenuItem>Option 1</MenuItem>
-          <MenuItem>Option 2</MenuItem>
-          <MenuItem>Option 3</MenuItem>
-        </Menu>
-      </>
-    )}
-  </UseState>
-);

package/src/menu/MenuOverrides.ts

@@ -1,17 +0,0 @@
-import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
-
-export function overrideMenu(theme: SuperDispatchTheme): void {
-  theme.props.MuiMenu = {
-    getContentAnchorEl: null,
-    anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
-    transformOrigin: { vertical: 'top', horizontal: 'left' },
-  };
-
-  theme.overrides.MuiMenuItem = {
-    root: {
-      ...theme.typography.body2,
-      paddingTop: theme.spacing(1),
-      paddingBottom: theme.spacing(1),
-    },
-  };
-}

package/src/menu/__tests__/Menu.spec.tsx

@@ -1,99 +0,0 @@
-import { Menu, MenuItem } from '@material-ui/core';
-import { renderCSS, renderTheme } from '@superdispatch/ui-testutils';
-
-it('checks default props', () => {
-  const { props } = renderTheme();
-
-  expect(props.MuiMenu).toMatchInlineSnapshot(`
-    Object {
-      "anchorOrigin": Object {
-        "horizontal": "left",
-        "vertical": "bottom",
-      },
-      "getContentAnchorEl": null,
-      "transformOrigin": Object {
-        "horizontal": "left",
-        "vertical": "top",
-      },
-    }
-  `);
-  expect(props.MuiMenuItem).toMatchInlineSnapshot(`undefined`);
-});
-
-it('checks component css', () => {
-  expect(
-    renderCSS(
-      <Menu open={true} anchorEl={document.body}>
-        <MenuItem />
-      </Menu>,
-      [
-        'MuiMenu',
-        'MuiMenuItem',
-        // Move to `Popover` component styles.
-        'MuiPopover',
-      ],
-    ),
-  ).toMatchInlineSnapshot(`
-    .MuiMenu-paper {
-      max-height: calc(100% - 96px);
-      -webkit-overflow-scrolling: touch;
-    }
-
-    .MuiMenu-list {
-      outline: 0;
-    }
-
-    .MuiMenuItem-root {
-      width: auto;
-      overflow: hidden;
-      font-size: 14px;
-      box-sizing: border-box;
-      min-height: 48px;
-      font-family: 'Inter', sans-serif;
-      font-weight: 400;
-      line-height: 20px;
-      padding-top: 8px;
-      white-space: nowrap;
-      padding-bottom: 8px;
-    }
-
-    @media (min-width: 0px) and (max-width: 599.95px) {
-      .MuiMenuItem-root {
-        font-size: 16px;
-        line-height: 24px;
-      }
-    }
-
-    @media (min-width: 600px) {
-      .MuiMenuItem-root {
-        min-height: auto;
-      }
-    }
-
-    .MuiMenuItem-dense {
-      font-size: 14px;
-      min-height: auto;
-      font-family: 'Inter', sans-serif;
-      font-weight: 400;
-      line-height: 20px;
-    }
-
-    @media (min-width: 0px) and (max-width: 599.95px) {
-      .MuiMenuItem-dense {
-        font-size: 16px;
-        line-height: 24px;
-      }
-    }
-
-    .MuiPopover-paper {
-      outline: 0;
-      position: absolute;
-      max-width: calc(100% - 32px);
-      min-width: 16px;
-      max-height: calc(100% - 32px);
-      min-height: 16px;
-      overflow-x: hidden;
-      overflow-y: auto;
-    }
-  `);
-});