@superdispatch/ui 0.21.8 → 0.21.13

package/src/inline/Inline.tsx

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

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

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

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

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

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

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

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

@@ -0,0 +1,99 @@
+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;
+    }
+  `);
+});