@superdispatch/ui 0.21.6 → 0.21.13

package/src/snackbar/__tests__/Snackbar.spec.tsx

@@ -0,0 +1,196 @@
+import { renderCSS, renderTheme } from '@superdispatch/ui-testutils';
+import { Snackbar } from '../../index';
+
+it('checks default props', () => {
+  const { props } = renderTheme();
+
+  expect(props.MuiSnackbar).toMatchInlineSnapshot(`undefined`);
+  expect(props.MuiSnackbarContent).toMatchInlineSnapshot(`undefined`);
+});
+
+it('checks component css', () => {
+  expect(
+    renderCSS(<Snackbar open={true} />, [
+      'MuiSnackbar',
+      'MuiSnackbarContent',
+      'SD-SnackbarContent',
+    ]),
+  ).toMatchInlineSnapshot(`
+    .MuiSnackbar-root {
+      left: 8px;
+      right: 8px;
+      display: flex;
+      z-index: 1400;
+      position: fixed;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .MuiSnackbar-anchorOriginTopCenter {
+      top: 8px;
+    }
+
+    @media (min-width: 600px) {
+      .MuiSnackbar-anchorOriginTopCenter {
+        top: 24px;
+        left: 50%;
+        right: auto;
+        transform: translateX(-50%);
+      }
+    }
+
+    .MuiSnackbar-anchorOriginBottomCenter {
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+
+    @media (min-width: 600px) {
+      .MuiSnackbar-anchorOriginBottomCenter {
+        left: 50%;
+        right: auto;
+        bottom: 24px;
+        transform: translateX(-50%);
+      }
+    }
+
+    .MuiSnackbar-anchorOriginTopRight {
+      top: 8px;
+      justify-content: flex-end;
+    }
+
+    @media (min-width: 600px) {
+      .MuiSnackbar-anchorOriginTopRight {
+        top: 24px;
+        left: auto;
+        right: 24px;
+      }
+    }
+
+    .MuiSnackbar-anchorOriginBottomRight {
+      bottom: 8px;
+      justify-content: flex-end;
+    }
+
+    @media (min-width: 600px) {
+      .MuiSnackbar-anchorOriginBottomRight {
+        left: auto;
+        right: 24px;
+        bottom: 24px;
+      }
+    }
+
+    .MuiSnackbar-anchorOriginTopLeft {
+      top: 8px;
+      justify-content: flex-start;
+    }
+
+    @media (min-width: 600px) {
+      .MuiSnackbar-anchorOriginTopLeft {
+        top: 24px;
+        left: 24px;
+        right: auto;
+      }
+    }
+
+    .MuiSnackbar-anchorOriginBottomLeft {
+      bottom: 8px;
+      justify-content: flex-start;
+    }
+
+    @media (min-width: 600px) {
+      .MuiSnackbar-anchorOriginBottomLeft {
+        left: 24px;
+        right: auto;
+        bottom: 24px;
+      }
+    }
+
+    .MuiSnackbarContent-root {
+      color: Color.White;
+      width: 100%;
+      display: flex;
+      padding: 6px 16px;
+      flex-grow: 1;
+      flex-wrap: wrap;
+      font-size: 14px;
+      min-height: 60px;
+      align-items: center;
+      font-family: 'Inter', sans-serif;
+      font-weight: 400;
+      line-height: 20px;
+      border-radius: 0;
+      background-color: rgb(49, 49, 49);
+    }
+
+    @media (min-width: 0px) and (max-width: 599.95px) {
+      .MuiSnackbarContent-root {
+        font-size: 16px;
+        line-height: 24px;
+      }
+    }
+
+    @media (min-width: 600px) {
+      .MuiSnackbarContent-root {
+        width: 432px;
+        flex-grow: initial;
+        max-width: 432px;
+        min-width: 288px;
+        border-radius: 4px;
+      }
+    }
+
+    .MuiSnackbarContent-message {
+      flex: 1;
+      display: flex;
+      padding: 8px 0;
+    }
+
+    .MuiSnackbarContent-action {
+      display: flex;
+      align-items: center;
+      margin-left: auto;
+      margin-right: -8px;
+      padding-left: 16px;
+    }
+
+    .SD-SnackbarContent-root {
+      color: Color.White;
+      background-color: Color.Dark500;
+    }
+
+    .SD-SnackbarContent-root.SD-SnackbarContent-variantError {
+      color: Color.White;
+      background-color: Color.Red500;
+    }
+
+    .SD-SnackbarContent-action {
+      padding-left: 8px;
+    }
+
+    .SD-SnackbarContent-message {
+      align-items: center;
+    }
+
+    @media (max-width: 599.95px) {
+      .SD-SnackbarContent-message {
+        font-size: 16px;
+      }
+    }
+
+    .SD-SnackbarContent-icon {
+      font-size: 24px;
+      margin-right: 8px;
+    }
+
+    .SD-SnackbarContent-closeButton {
+      color: Color.White40;
+    }
+
+    .SD-SnackbarContent-closeButton:hover,
+    .SD-SnackbarContent-closeButton:focus {
+      color: Color.White40;
+      background-color: Color.White08;
+    }
+  `);
+});

package/src/stack/Stack.stories.tsx

@@ -0,0 +1,113 @@
+import { Link } from '@material-ui/core';
+import { Meta } from '@storybook/react';
+import { Empty, Placeholder } from '@superdispatch/ui-docs';
+import { Box } from '@superdispatch/ui-lab';
+import { Stack } from './Stack';
+
+export default {
+  title: 'Layout/Stack',
+  component: Stack,
+  decorators: [
+    (Story) => (
+      <Box maxWidth="240px">
+        <Story />
+      </Box>
+    ),
+  ],
+  parameters: {
+    componentSubtitle: (
+      <>
+        Heavily inspired by the{' '}
+        <Link href="https://seek-oss.github.io/braid-design-system/components/Stack">
+          Stack
+        </Link>{' '}
+        component from the{' '}
+        <Link href="https://seek-oss.github.io/braid-design-system">
+          BRAID Design System
+        </Link>
+        .
+      </>
+    ),
+  },
+} as Meta;
+
+export const basic = () => (
+  <Stack>
+    <Placeholder height={48} />
+    <Placeholder height={48} />
+    <Placeholder height={48} />
+  </Stack>
+);
+
+export const emptyElements = () => (
+  <Stack>
+    <Empty />
+    <Placeholder height={48} />
+    <Empty />
+    <Placeholder height={48} />
+    <Empty />
+    <Placeholder height={48} />
+  </Stack>
+);
+
+export const responsiveSpace = () => (
+  <Stack space={['small', 'xsmall', 'xxsmall']}>
+    <Placeholder height={48} />
+    <Placeholder height={48} />
+    <Placeholder height={48} />
+  </Stack>
+);
+
+export const alignment = () => (
+  <Stack align="center">
+    <Placeholder height={48} width={48} />
+    <Placeholder height={48} width={64} />
+    <Placeholder height={48} width={128} />
+  </Stack>
+);
+
+export const responsiveAlignment = () => (
+  <Stack align={['center', 'left']}>
+    <Placeholder height={48} width={48} />
+    <Placeholder height={48} width={64} />
+    <Placeholder height={48} width={128} />
+  </Stack>
+);
+
+export const dynamicWidth = () => (
+  <Stack>
+    <Box padding="small">
+      <Stack align={['left', 'right']}>
+        <Box
+          padding="small"
+          borderWidth="small"
+          borderRadius="small"
+          borderColor="Silver400"
+          backgroundColor="White"
+        >
+          Hey!
+        </Box>
+
+        <Box
+          padding="small"
+          borderWidth="small"
+          borderRadius="small"
+          borderColor="Silver400"
+          backgroundColor="White"
+        >
+          Ho!
+        </Box>
+
+        <Box
+          padding="small"
+          borderWidth="small"
+          borderRadius="small"
+          borderColor="Silver400"
+          backgroundColor="White"
+        >
+          Let’s Go!
+        </Box>
+      </Stack>
+    </Box>
+  </Stack>
+);

package/src/stack/Stack.tsx

@@ -0,0 +1,86 @@
+import { forwardRef, ReactNode } from 'react';
+import flattenChildren from 'react-keyed-flatten-children';
+import styled, { css, SimpleInterpolation } from 'styled-components';
+import { HorizontalAlign, parseAlignProp } from '../props/AlignProps';
+import {
+  parseResponsiveProp,
+  ResponsiveProp,
+  ResponsivePropTuple,
+} from '../props/ResponsiveProp';
+import { parseSpaceProp, SpaceProp } from '../props/SpaceProp';
+
+function stackItemMixin(
+  space: SpaceProp,
+  align: HorizontalAlign,
+): readonly SimpleInterpolation[] {
+  return css`
+    flex-direction: column;
+    align-items: ${parseAlignProp(align)};
+    display: ${align === 'left' ? 'block' : 'flex'};
+
+    &:empty {
+      display: none;
+    }
+
+    &:not(:empty) ~ div {
+      padding-top: ${parseSpaceProp(space)}px;
+    }
+  `;
+}
+
+interface StackRootProps {
+  space: ResponsivePropTuple<SpaceProp>;
+  align: ResponsivePropTuple<HorizontalAlign>;
+}
+
+const StackRoot = styled.div<StackRootProps>(
+  ({ theme, space, align }) =>
+    css`
+      width: 100%;
+
+      & > div {
+        ${stackItemMixin(space[0], align[0])};
+
+        ${theme.breakpoints.up('sm')} {
+          ${stackItemMixin(space[1], align[1])};
+        }
+
+        ${theme.breakpoints.up('md')} {
+          ${stackItemMixin(space[2], align[2])};
+        }
+      }
+    `,
+);
+
+export interface StackProps {
+  children?: ReactNode;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  space?: ResponsiveProp<SpaceProp>;
+  align?: ResponsiveProp<HorizontalAlign>;
+}
+
+export const Stack = forwardRef<HTMLDivElement, StackProps>(
+  (
+    {
+      children,
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledBy,
+      space = 'xsmall',
+      align = 'left',
+    },
+    ref,
+  ) => (
+    <StackRoot
+      ref={ref}
+      align={parseResponsiveProp(align)}
+      space={parseResponsiveProp(space)}
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledBy}
+    >
+      {flattenChildren(children).map((child, idx) => (
+        <div key={idx}>{child}</div>
+      ))}
+    </StackRoot>
+  ),
+);

package/src/svg-icon/SvgIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { Home as HomeIcon } from '@material-ui/icons';
+import { PropsLink } from '@superdispatch/ui-docs';
+import { Inline } from '../inline/Inline';
+
+export default {
+  title: 'Data Display/SvgIcon',
+  parameters: {
+    componentSubtitle: (
+      <PropsLink url="https://material-ui.com/api/svg-icon/#props" />
+    ),
+  },
+};
+
+export const basic = () => (
+  <Inline>
+    <HomeIcon />
+    <HomeIcon color="primary" />
+    <HomeIcon color="action" />
+    <HomeIcon color="disabled" />
+  </Inline>
+);
+
+export const customSize = () => (
+  <Inline verticalAlign="bottom">
+    <HomeIcon fontSize="small" />
+    <HomeIcon />
+    <HomeIcon fontSize="large" />
+  </Inline>
+);

package/src/svg-icon/SvgIconOverrides.ts

@@ -0,0 +1,32 @@
+import { Color } from '../theme/Color';
+import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
+
+export function overrideSvgIcon(theme: SuperDispatchTheme): void {
+  const sm = theme.breakpoints.up('sm');
+
+  theme.overrides.MuiSvgIcon = {
+    root: {
+      display: 'inherit',
+
+      fontSize: 'var(--mui-svg-icon-size, 32px)',
+      [sm]: {
+        fontSize: 'var(--mui-svg-icon-size, 24px)',
+      },
+    },
+
+    fontSizeSmall: {
+      fontSize: 'var(--mui-svg-icon-size, 24px)',
+      [sm]: {
+        fontSize: 'var(--mui-svg-icon-size, 16px)',
+      },
+    },
+
+    fontSizeLarge: {
+      fontSize: 'var(--mui-svg-icon-size, 32px)',
+    },
+
+    colorAction: {
+      color: Color.Dark100,
+    },
+  };
+}

package/src/svg-icon/__tests__/SvgIcon.spec.tsx

@@ -0,0 +1,67 @@
+import { SvgIcon } from '@material-ui/core';
+import { renderCSS, renderTheme } from '@superdispatch/ui-testutils';
+
+it('checks default props', () => {
+  const { props } = renderTheme();
+
+  expect(props.MuiSvgIcon).toMatchInlineSnapshot(`undefined`);
+});
+
+it('checks component css', () => {
+  expect(renderCSS(<SvgIcon />, ['MuiSvgIcon'])).toMatchInlineSnapshot(`
+.MuiSvgIcon-root {
+  fill: currentColor;
+  width: 1em;
+  height: 1em;
+  display: inherit;
+  font-size: var(--mui-svg-icon-size, 32px);
+  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  flex-shrink: 0;
+  user-select: none;
+}
+
+@media (min-width: 600px) {
+  .MuiSvgIcon-root {
+    font-size: var(--mui-svg-icon-size, 24px);
+  }
+}
+
+.MuiSvgIcon-colorPrimary {
+  color: Color.Blue300;
+}
+
+.MuiSvgIcon-colorSecondary {
+  color: #f50057;
+}
+
+.MuiSvgIcon-colorAction {
+  color: Color.Dark100;
+}
+
+.MuiSvgIcon-colorError {
+  color: Color.Red300;
+}
+
+.MuiSvgIcon-colorDisabled {
+  color: Color.Silver400;
+}
+
+.MuiSvgIcon-fontSizeInherit {
+  font-size: inherit;
+}
+
+.MuiSvgIcon-fontSizeSmall {
+  font-size: var(--mui-svg-icon-size, 24px);
+}
+
+@media (min-width: 600px) {
+  .MuiSvgIcon-fontSizeSmall {
+    font-size: var(--mui-svg-icon-size, 16px);
+  }
+}
+
+.MuiSvgIcon-fontSizeLarge {
+  font-size: var(--mui-svg-icon-size, 32px);
+}
+`);
+});

package/src/switch/Switch.stories.tsx

@@ -0,0 +1,60 @@
+import {
+  FormControlLabel,
+  FormGroup,
+  Switch,
+  TextField,
+} from '@material-ui/core';
+import { PropsLink } from '@superdispatch/ui-docs';
+import { CheckboxField, RadioField, RadioGroupField } from '..';
+
+export default {
+  title: 'Inputs/Switch',
+  parameters: {
+    componentSubtitle: (
+      <PropsLink url="https://material-ui.com/api/switch/#props" />
+    ),
+  },
+};
+
+export const basic = () => <Switch />;
+
+export const labelled = () => (
+  <FormGroup row={true}>
+    <FormControlLabel label="Right Label" control={<Switch />} />
+
+    <FormControlLabel
+      label="Left Label"
+      labelPlacement="start"
+      control={<Switch />}
+    />
+  </FormGroup>
+);
+
+export const disabled = () => (
+  <FormGroup row={true}>
+    <FormControlLabel
+      label="On"
+      checked={true}
+      disabled={true}
+      control={<Switch />}
+    />
+
+    <FormControlLabel
+      label="Off"
+      checked={false}
+      disabled={true}
+      control={<Switch />}
+    />
+  </FormGroup>
+);
+
+export const inlineForm = () => (
+  <RadioGroupField RadioGroupProps={{ row: true }}>
+    <FormGroup row={true}>
+      <RadioField label="Radio" />
+      <CheckboxField label="Checkbox" />
+      <FormControlLabel label="Switch" control={<Switch />} />
+      <TextField placeholder="Text Field" />
+    </FormGroup>
+  </RadioGroupField>
+);

package/src/switch/SwitchOverrides.ts

@@ -0,0 +1,88 @@
+import { Color } from '../theme/Color';
+import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
+
+export function overrideSwitch(theme: SuperDispatchTheme): void {
+  const sm = theme.breakpoints.up('sm');
+
+  theme.props.MuiSwitch = {
+    color: 'primary',
+    disableRipple: true,
+    disableFocusRipple: true,
+  };
+
+  theme.overrides.MuiSwitch = {
+    root: {
+      width: theme.spacing(9.5),
+      height: theme.spacing(5.5),
+      padding: theme.spacing(0.75, 1.5),
+      [sm]: {
+        width: theme.spacing(8),
+        height: theme.spacing(4),
+        padding: theme.spacing(0.5, 1.5),
+      },
+    },
+
+    track: {
+      opacity: undefined,
+      boxShadow: `0 0 0 0 ${Color.Transparent}`,
+
+      transition: theme.transitions.create(['box-shadow', 'background-color'], {
+        duration: theme.transitions.duration.shortest,
+      }),
+
+      borderRadius: theme.spacing(2),
+      [sm]: { borderRadius: theme.spacing(1.625) },
+    },
+
+    thumb: {
+      color: Color.White,
+      boxShadow: undefined,
+      width: theme.spacing(3),
+      height: theme.spacing(3),
+      [sm]: { width: theme.spacing(2), height: theme.spacing(2) },
+    },
+
+    switchBase: {
+      left: theme.spacing(1),
+      padding: theme.spacing(1.25, 1),
+      [sm]: { padding: theme.spacing(1) },
+
+      '&$checked': {
+        transform: `translateX(${theme.spacing(2.5)}px)`,
+        [sm]: { transform: `translateX(${theme.spacing(2)}px)` },
+      },
+
+      '&$checked + $track': {
+        opacity: undefined,
+      },
+
+      '&$disabled + $track': {
+        opacity: undefined,
+      },
+    },
+
+    colorPrimary: {
+      '&$checked': {
+        color: undefined,
+
+        '&:hover': {
+          backgroundColor: undefined,
+
+          '& + $track': { backgroundColor: Color.Blue400 },
+        },
+      },
+
+      '& + $track': { backgroundColor: Color.Silver500 },
+
+      '&$disabled + $track': { backgroundColor: Color.Silver300 },
+
+      '&$checked$disabled + $track': { backgroundColor: Color.Blue100 },
+
+      '&:hover + $track': { backgroundColor: Color.Dark100 },
+
+      '&.Mui-focusVisible + $track': {
+        boxShadow: `0 0 0 3px ${Color.Blue100}`,
+      },
+    },
+  };
+}