@superdispatch/ui 0.21.13 → 0.21.14

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

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

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

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

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

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

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

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

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