@superdispatch/ui 0.21.6 → 0.21.13

package/src/tiles/Tiles.tsx

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

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

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

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

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

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

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