@superdispatch/ui 0.21.13 → 0.22.0

package/src/tiles/Tiles.tsx

@@ -1,163 +0,0 @@
-import { ClassNameMap, CSSProperties, makeStyles } from '@material-ui/styles';
-import clsx from 'clsx';
-import { forwardRef, ReactNode } from 'react';
-import flattenChildren from 'react-keyed-flatten-children';
-import {
-  ResponsivePropRecord,
-  useResponsivePropRecord,
-} from '../props/ResponsiveProp';
-import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
-
-const PREVENT_COLLAPSE = 1;
-
-type TilesClassKey =
-  | 'root'
-  | 'container'
-  | 'child'
-  | 'childContainer'
-  | 'space1'
-  | 'space2'
-  | 'space3'
-  | 'space4'
-  | 'space5'
-  | 'space6'
-  | 'space7'
-  | 'space8'
-  | 'space9'
-  | 'space10'
-  | 'columns1'
-  | 'columns2'
-  | 'columns3'
-  | 'columns4'
-  | 'columns5'
-  | 'columns6';
-export type TilesSpace = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
-export type TilesColumns = 1 | 2 | 3 | 4 | 5 | 6;
-
-function spaceVariant(
-  theme: SuperDispatchTheme,
-  space: TilesSpace,
-): CSSProperties {
-  const gap = theme.spacing(space);
-
-  return {
-    '&:before': {
-      marginTop: -gap - PREVENT_COLLAPSE,
-    },
-
-    '& > $container': {
-      marginLeft: -gap,
-
-      '& > $child > $childContainer': {
-        marginTop: gap,
-        marginLeft: gap,
-      },
-    },
-  };
-}
-
-function columnVariant(columns: TilesColumns): CSSProperties {
-  return {
-    flex: `0 0 ${100 / columns}%`,
-  };
-}
-
-const useStyles = makeStyles<
-  SuperDispatchTheme,
-  { classes?: Partial<ClassNameMap<TilesClassKey>> },
-  TilesClassKey
->(
-  (theme) => ({
-    root: {
-      paddingTop: PREVENT_COLLAPSE,
-
-      '&:before': {
-        content: '""',
-        display: 'block',
-        marginTop: -PREVENT_COLLAPSE,
-      },
-    },
-
-    container: {
-      display: 'flex',
-      flexWrap: 'wrap',
-    },
-
-    child: {
-      minWidth: 0,
-    },
-
-    childContainer: {
-      height: '100%',
-    },
-
-    space1: spaceVariant(theme, 1),
-    space2: spaceVariant(theme, 2),
-    space3: spaceVariant(theme, 3),
-    space4: spaceVariant(theme, 4),
-    space5: spaceVariant(theme, 5),
-    space6: spaceVariant(theme, 6),
-    space7: spaceVariant(theme, 7),
-    space8: spaceVariant(theme, 8),
-    space9: spaceVariant(theme, 9),
-    space10: spaceVariant(theme, 10),
-
-    columns1: columnVariant(1),
-    columns2: columnVariant(2),
-    columns3: columnVariant(3),
-    columns4: columnVariant(4),
-    columns5: columnVariant(5),
-    columns6: columnVariant(6),
-  }),
-  { name: 'SD-Tiles' },
-);
-
-export interface TilesProps {
-  children?: ReactNode;
-  space?: ResponsivePropRecord<TilesSpace>;
-  columns?: ResponsivePropRecord<TilesColumns>;
-}
-
-export const Tiles = forwardRef<HTMLDivElement, TilesProps>(
-  ({ children, space: spaceProp = 1, columns: columnsProp = 1 }, ref) => {
-    const styles = useStyles({});
-    const space = useResponsivePropRecord(spaceProp);
-    const columns = useResponsivePropRecord(columnsProp);
-
-    return (
-      <div
-        ref={ref}
-        className={clsx(styles.root, {
-          [styles.space1]: space === 1,
-          [styles.space2]: space === 2,
-          [styles.space3]: space === 3,
-          [styles.space4]: space === 4,
-          [styles.space5]: space === 5,
-          [styles.space6]: space === 6,
-          [styles.space7]: space === 7,
-          [styles.space8]: space === 8,
-          [styles.space9]: space === 9,
-          [styles.space10]: space === 10,
-        })}
-      >
-        <div className={styles.container}>
-          {flattenChildren(children).map((child, idx) => (
-            <div
-              key={idx}
-              className={clsx(styles.child, {
-                [styles.columns1]: columns === 1,
-                [styles.columns2]: columns === 2,
-                [styles.columns3]: columns === 3,
-                [styles.columns4]: columns === 4,
-                [styles.columns5]: columns === 5,
-                [styles.columns6]: columns === 6,
-              })}
-            >
-              <div className={styles.childContainer}>{child}</div>
-            </div>
-          ))}
-        </div>
-      </div>
-    );
-  },
-);

package/src/tiles/__tests__/Tiles.spec.tsx

@@ -1,221 +0,0 @@
-import { renderCSS } from '@superdispatch/ui-testutils';
-import { Tiles } from '../Tiles';
-
-it('checks component css', () => {
-  expect(
-    renderCSS(
-      <Tiles space={1}>
-        <div />
-        <div />
-      </Tiles>,
-      ['SD-Tiles'],
-    ),
-  ).toMatchInlineSnapshot(`
-    .SD-Tiles-root {
-      padding-top: 1px;
-    }
-
-    .SD-Tiles-root:before {
-      content: '';
-      display: block;
-      margin-top: -1px;
-    }
-
-    .SD-Tiles-container {
-      display: flex;
-      flex-wrap: wrap;
-    }
-
-    .SD-Tiles-child {
-      min-width: 0;
-    }
-
-    .SD-Tiles-childContainer {
-      height: 100%;
-    }
-
-    .SD-Tiles-space1:before {
-      margin-top: -9px;
-    }
-
-    .SD-Tiles-space1 > .SD-Tiles-container {
-      margin-left: -8px;
-    }
-
-    .SD-Tiles-space1
-      > .SD-Tiles-container
-      > .SD-Tiles-child
-      > .SD-Tiles-childContainer {
-      margin-top: 8px;
-      margin-left: 8px;
-    }
-
-    .SD-Tiles-space2:before {
-      margin-top: -17px;
-    }
-
-    .SD-Tiles-space2 > .SD-Tiles-container {
-      margin-left: -16px;
-    }
-
-    .SD-Tiles-space2
-      > .SD-Tiles-container
-      > .SD-Tiles-child
-      > .SD-Tiles-childContainer {
-      margin-top: 16px;
-      margin-left: 16px;
-    }
-
-    .SD-Tiles-space3:before {
-      margin-top: -25px;
-    }
-
-    .SD-Tiles-space3 > .SD-Tiles-container {
-      margin-left: -24px;
-    }
-
-    .SD-Tiles-space3
-      > .SD-Tiles-container
-      > .SD-Tiles-child
-      > .SD-Tiles-childContainer {
-      margin-top: 24px;
-      margin-left: 24px;
-    }
-
-    .SD-Tiles-space4:before {
-      margin-top: -33px;
-    }
-
-    .SD-Tiles-space4 > .SD-Tiles-container {
-      margin-left: -32px;
-    }
-
-    .SD-Tiles-space4
-      > .SD-Tiles-container
-      > .SD-Tiles-child
-      > .SD-Tiles-childContainer {
-      margin-top: 32px;
-      margin-left: 32px;
-    }
-
-    .SD-Tiles-space5:before {
-      margin-top: -41px;
-    }
-
-    .SD-Tiles-space5 > .SD-Tiles-container {
-      margin-left: -40px;
-    }
-
-    .SD-Tiles-space5
-      > .SD-Tiles-container
-      > .SD-Tiles-child
-      > .SD-Tiles-childContainer {
-      margin-top: 40px;
-      margin-left: 40px;
-    }
-
-    .SD-Tiles-space6:before {
-      margin-top: -49px;
-    }
-
-    .SD-Tiles-space6 > .SD-Tiles-container {
-      margin-left: -48px;
-    }
-
-    .SD-Tiles-space6
-      > .SD-Tiles-container
-      > .SD-Tiles-child
-      > .SD-Tiles-childContainer {
-      margin-top: 48px;
-      margin-left: 48px;
-    }
-
-    .SD-Tiles-space7:before {
-      margin-top: -57px;
-    }
-
-    .SD-Tiles-space7 > .SD-Tiles-container {
-      margin-left: -56px;
-    }
-
-    .SD-Tiles-space7
-      > .SD-Tiles-container
-      > .SD-Tiles-child
-      > .SD-Tiles-childContainer {
-      margin-top: 56px;
-      margin-left: 56px;
-    }
-
-    .SD-Tiles-space8:before {
-      margin-top: -65px;
-    }
-
-    .SD-Tiles-space8 > .SD-Tiles-container {
-      margin-left: -64px;
-    }
-
-    .SD-Tiles-space8
-      > .SD-Tiles-container
-      > .SD-Tiles-child
-      > .SD-Tiles-childContainer {
-      margin-top: 64px;
-      margin-left: 64px;
-    }
-
-    .SD-Tiles-space9:before {
-      margin-top: -73px;
-    }
-
-    .SD-Tiles-space9 > .SD-Tiles-container {
-      margin-left: -72px;
-    }
-
-    .SD-Tiles-space9
-      > .SD-Tiles-container
-      > .SD-Tiles-child
-      > .SD-Tiles-childContainer {
-      margin-top: 72px;
-      margin-left: 72px;
-    }
-
-    .SD-Tiles-space10:before {
-      margin-top: -81px;
-    }
-
-    .SD-Tiles-space10 > .SD-Tiles-container {
-      margin-left: -80px;
-    }
-
-    .SD-Tiles-space10
-      > .SD-Tiles-container
-      > .SD-Tiles-child
-      > .SD-Tiles-childContainer {
-      margin-top: 80px;
-      margin-left: 80px;
-    }
-
-    .SD-Tiles-columns1 {
-      flex: 0 0 100%;
-    }
-
-    .SD-Tiles-columns2 {
-      flex: 0 0 50%;
-    }
-
-    .SD-Tiles-columns3 {
-      flex: 0 0 33.333333333333336%;
-    }
-
-    .SD-Tiles-columns4 {
-      flex: 0 0 25%;
-    }
-
-    .SD-Tiles-columns5 {
-      flex: 0 0 20%;
-    }
-
-    .SD-Tiles-columns6 {
-      flex: 0 0 16.666666666666668%;
-    }
-  `);
-});

package/src/toolbar/ToolbarOverrides.ts

@@ -1,14 +0,0 @@
-import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
-
-export function overrideToolbar(theme: SuperDispatchTheme): void {
-  theme.overrides.MuiToolbar = {
-    regular: { minHeight: theme.spacing(8) },
-
-    gutters: {
-      [theme.breakpoints.up('sm')]: {
-        paddingLeft: theme.spacing(2),
-        paddingRight: theme.spacing(2),
-      },
-    },
-  };
-}

package/src/toolbar/__tests__/Toolbar.spec.tsx

@@ -1,50 +0,0 @@
-import { Toolbar } from '@material-ui/core';
-import { renderCSS, renderTheme } from '@superdispatch/ui-testutils';
-
-it('checks default props', () => {
-  const { props } = renderTheme();
-
-  expect(props.MuiToolbar).toMatchInlineSnapshot(`undefined`);
-});
-
-it('checks component css', () => {
-  expect(renderCSS(<Toolbar />, ['MuiToolbar'])).toMatchInlineSnapshot(`
-    .MuiToolbar-root {
-      display: flex;
-      position: relative;
-      align-items: center;
-    }
-
-    .MuiToolbar-gutters {
-      padding-left: 16px;
-      padding-right: 16px;
-    }
-
-    @media (min-width: 600px) {
-      .MuiToolbar-gutters {
-        padding-left: 16px;
-        padding-right: 16px;
-      }
-    }
-
-    .MuiToolbar-regular {
-      min-height: 64px;
-    }
-
-    @media (min-width: 0px) and (orientation: landscape) {
-      .MuiToolbar-regular {
-        min-height: 48px;
-      }
-    }
-
-    @media (min-width: 600px) {
-      .MuiToolbar-regular {
-        min-height: 64px;
-      }
-    }
-
-    .MuiToolbar-dense {
-      min-height: 48px;
-    }
-  `);
-});

package/src/tooltip/Tooltip.stories.tsx

@@ -1,32 +0,0 @@
-import { Button, Tooltip } from '@material-ui/core';
-import { PropsLink } from '@superdispatch/ui-docs';
-import { Inline } from '../inline/Inline';
-
-export default {
-  title: 'Data Display/Tooltip',
-  parameters: {
-    componentSubtitle: (
-      <PropsLink url="https://material-ui.com/api/tooltip/#props" />
-    ),
-  },
-};
-
-export const basic = () => (
-  <Inline>
-    <Tooltip title="Default">
-      <Button>Default</Button>
-    </Tooltip>
-
-    <Tooltip title="Left" placement="left">
-      <Button>Left</Button>
-    </Tooltip>
-
-    <Tooltip title="Top" placement="top">
-      <Button>Top</Button>
-    </Tooltip>
-
-    <Tooltip title="Right" placement="right">
-      <Button>Right</Button>
-    </Tooltip>
-  </Inline>
-);

package/src/tooltip/TooltipOverrides.ts

@@ -1,34 +0,0 @@
-import { Color } from '../theme/Color';
-import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
-
-export function overrideTooltip(theme: SuperDispatchTheme): void {
-  theme.props.MuiTooltip = { arrow: true };
-
-  theme.overrides.MuiTooltip = {
-    tooltip: {
-      ...theme.typography.body2,
-      padding: theme.spacing(1, 1.5),
-      backgroundColor: Color.Dark400,
-    },
-
-    popperArrow: {
-      '&[x-placement*="top"] $arrow': {
-        '&::before': { borderBottomRightRadius: 2 },
-      },
-      '&[x-placement*="left"] $arrow': {
-        '&::before': { borderTopRightRadius: 2 },
-      },
-      '&[x-placement*="right"] $arrow': {
-        '&::before': { borderBottomLeftRadius: 2 },
-      },
-      '&[x-placement*="bottom"] $arrow': {
-        '&::before': { borderTopLeftRadius: 2 },
-      },
-    },
-
-    arrow: {
-      color: Color.Dark400,
-      fontSize: theme.spacing(1),
-    },
-  };
-}

package/src/tooltip/__tests__/Tooltip.spec.tsx

@@ -1,182 +0,0 @@
-import { Tooltip } from '@material-ui/core';
-import { renderCSS, renderTheme } from '@superdispatch/ui-testutils';
-
-it('checks default props', () => {
-  const { props } = renderTheme();
-
-  expect(props.MuiTooltip).toMatchInlineSnapshot(`
-    Object {
-      "arrow": true,
-    }
-  `);
-});
-
-it('checks component css', () => {
-  expect(
-    renderCSS(
-      <Tooltip title="text">
-        <div />
-      </Tooltip>,
-      ['MuiTooltip'],
-    ),
-  ).toMatchInlineSnapshot(`
-    .MuiTooltip-popper {
-      z-index: 1500;
-      pointer-events: none;
-    }
-
-    .MuiTooltip-popperInteractive {
-      pointer-events: auto;
-    }
-
-    .MuiTooltip-popperArrow[x-placement*='bottom'] .MuiTooltip-arrow {
-      top: 0;
-      left: 0;
-      margin-top: -0.71em;
-      margin-left: 4px;
-      margin-right: 4px;
-    }
-
-    .MuiTooltip-popperArrow[x-placement*='top'] .MuiTooltip-arrow {
-      left: 0;
-      bottom: 0;
-      margin-left: 4px;
-      margin-right: 4px;
-      margin-bottom: -0.71em;
-    }
-
-    .MuiTooltip-popperArrow[x-placement*='right'] .MuiTooltip-arrow {
-      left: 0;
-      width: 0.71em;
-      height: 1em;
-      margin-top: 4px;
-      margin-left: -0.71em;
-      margin-bottom: 4px;
-    }
-
-    .MuiTooltip-popperArrow[x-placement*='left'] .MuiTooltip-arrow {
-      right: 0;
-      width: 0.71em;
-      height: 1em;
-      margin-top: 4px;
-      margin-right: -0.71em;
-      margin-bottom: 4px;
-    }
-
-    .MuiTooltip-popperArrow[x-placement*='left'] .MuiTooltip-arrow::before {
-      transform-origin: 0 0;
-      border-top-right-radius: 2px;
-    }
-
-    .MuiTooltip-popperArrow[x-placement*='right'] .MuiTooltip-arrow::before {
-      transform-origin: 100% 100%;
-      border-bottom-left-radius: 2px;
-    }
-
-    .MuiTooltip-popperArrow[x-placement*='top'] .MuiTooltip-arrow::before {
-      transform-origin: 100% 0;
-      border-bottom-right-radius: 2px;
-    }
-
-    .MuiTooltip-popperArrow[x-placement*='bottom'] .MuiTooltip-arrow::before {
-      transform-origin: 0 100%;
-      border-top-left-radius: 2px;
-    }
-
-    .MuiTooltip-tooltip {
-      color: Color.White;
-      padding: 8px 12px;
-      font-size: 14px;
-      max-width: 300px;
-      word-wrap: break-word;
-      font-family: 'Inter', sans-serif;
-      font-weight: 400;
-      line-height: 20px;
-      border-radius: 4px;
-      background-color: Color.Dark400;
-    }
-
-    @media (min-width: 0px) and (max-width: 599.95px) {
-      .MuiTooltip-tooltip {
-        font-size: 16px;
-        line-height: 24px;
-      }
-    }
-
-    .MuiTooltip-tooltipArrow {
-      margin: 0;
-      position: relative;
-    }
-
-    .MuiTooltip-arrow {
-      color: Color.Dark400;
-      width: 1em;
-      height: 0.71em;
-      overflow: hidden;
-      position: absolute;
-      font-size: 8px;
-      box-sizing: border-box;
-    }
-
-    .MuiTooltip-arrow::before {
-      width: 100%;
-      height: 100%;
-      margin: auto;
-      content: '';
-      display: block;
-      transform: rotate(45deg);
-      background-color: currentColor;
-    }
-
-    .MuiTooltip-touch {
-      padding: 8px 16px;
-      font-size: 0.875rem;
-      font-weight: 400;
-      line-height: 1.14286em;
-    }
-
-    .MuiTooltip-tooltipPlacementLeft {
-      margin: 0 24px;
-      transform-origin: right center;
-    }
-
-    @media (min-width: 600px) {
-      .MuiTooltip-tooltipPlacementLeft {
-        margin: 0 14px;
-      }
-    }
-
-    .MuiTooltip-tooltipPlacementRight {
-      margin: 0 24px;
-      transform-origin: left center;
-    }
-
-    @media (min-width: 600px) {
-      .MuiTooltip-tooltipPlacementRight {
-        margin: 0 14px;
-      }
-    }
-
-    .MuiTooltip-tooltipPlacementTop {
-      margin: 24px 0;
-      transform-origin: center bottom;
-    }
-
-    @media (min-width: 600px) {
-      .MuiTooltip-tooltipPlacementTop {
-        margin: 14px 0;
-      }
-    }
-
-    .MuiTooltip-tooltipPlacementBottom {
-      margin: 24px 0;
-      transform-origin: center top;
-    }
-
-    @media (min-width: 600px) {
-      .MuiTooltip-tooltipPlacementBottom {
-        margin: 14px 0;
-      }
-    }
-  `);
-});