@superdispatch/ui 0.21.13 → 0.22.0

package/src/tag/__tests__/Tag.spec.tsx

@@ -1,82 +0,0 @@
-import { renderCSS } from '@superdispatch/ui-testutils';
-import { Tag } from '../..';
-
-it('checks component css', () => {
-  expect(renderCSS(<Tag color="blue" variant="bold" />, ['SD-Tag']))
-    .toMatchInlineSnapshot(`
-    .SD-Tag-root {
-      display: inline-flex;
-      padding: 0px 4px;
-      max-width: 100%;
-      align-items: center;
-      border-radius: 4px;
-    }
-
-    .SD-Tag-variantSubtle.SD-Tag-colorGrey {
-      color: Color.Dark300;
-      background-color: Color.Silver200;
-    }
-
-    .SD-Tag-variantSubtle.SD-Tag-colorBlue {
-      color: Color.Blue500;
-      background-color: Color.Blue50;
-    }
-
-    .SD-Tag-variantSubtle.SD-Tag-colorGreen {
-      color: Color.Green500;
-      background-color: Color.Green50;
-    }
-
-    .SD-Tag-variantSubtle.SD-Tag-colorPurple {
-      color: Color.Purple500;
-      background-color: Color.Purple50;
-    }
-
-    .SD-Tag-variantSubtle.SD-Tag-colorRed {
-      color: Color.Red500;
-      background-color: Color.Red50;
-    }
-
-    .SD-Tag-variantSubtle.SD-Tag-colorTeal {
-      color: Color.Teal500;
-      background-color: Color.Teal50;
-    }
-
-    .SD-Tag-variantSubtle.SD-Tag-colorYellow {
-      color: Color.Yellow500;
-      background-color: Color.Yellow50;
-    }
-
-    .SD-Tag-variantBold {
-      color: Color.White;
-    }
-
-    .SD-Tag-variantBold.SD-Tag-colorGrey {
-      background-color: Color.Dark300;
-    }
-
-    .SD-Tag-variantBold.SD-Tag-colorBlue {
-      background-color: Color.Blue500;
-    }
-
-    .SD-Tag-variantBold.SD-Tag-colorGreen {
-      background-color: Color.Green500;
-    }
-
-    .SD-Tag-variantBold.SD-Tag-colorPurple {
-      background-color: Color.Purple500;
-    }
-
-    .SD-Tag-variantBold.SD-Tag-colorRed {
-      background-color: Color.Red500;
-    }
-
-    .SD-Tag-variantBold.SD-Tag-colorTeal {
-      background-color: Color.Teal500;
-    }
-
-    .SD-Tag-variantBold.SD-Tag-colorYellow {
-      background-color: Color.Yellow500;
-    }
-  `);
-});

package/src/text-field/TextField.stories.tsx

@@ -1,50 +0,0 @@
-import { InputAdornment, MenuItem, TextField } from '@material-ui/core';
-import { AccountCircle as AccountCircleIcon } from '@material-ui/icons';
-import { PropsLink } from '@superdispatch/ui-docs';
-
-export default {
-  title: 'Inputs/TextField',
-  parameters: {
-    componentSubtitle: (
-      <PropsLink url="https://material-ui.com/api/avatar/#props" />
-    ),
-  },
-};
-
-export const basic = () => <TextField label="Label" helperText="Helper Text" />;
-export const error = () => (
-  <TextField label="Label" helperText="Error Text" error={true} />
-);
-
-export const multiline = () => <TextField multiline={true} />;
-export const fullWidth = () => <TextField fullWidth={true} />;
-export const disabled = () => <TextField disabled={true} />;
-export const startAdornment = () => (
-  <TextField
-    InputProps={{
-      startAdornment: (
-        <InputAdornment position="start">
-          <AccountCircleIcon color="action" />
-        </InputAdornment>
-      ),
-    }}
-  />
-);
-export const endAdornment = () => (
-  <TextField
-    InputProps={{
-      endAdornment: (
-        <InputAdornment position="end">
-          <AccountCircleIcon color="action" />
-        </InputAdornment>
-      ),
-    }}
-  />
-);
-export const select = () => (
-  <TextField select={true}>
-    <MenuItem value={1}>Option 1</MenuItem>
-    <MenuItem value={2}>Option 2</MenuItem>
-    <MenuItem value={3}>Option 3</MenuItem>
-  </TextField>
-);

package/src/text-field/TextFieldOverrides.tsx

@@ -1,149 +0,0 @@
-import { SvgIcon, SvgIconProps } from '@material-ui/core';
-import { forwardRef } from 'react';
-import { Color } from '../theme/Color';
-import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
-
-const SelectIcon = forwardRef<SVGSVGElement, SvgIconProps>((props, ref) => (
-  <SvgIcon ref={ref} {...props}>
-    <path d="M12 16.5L6 9h12l-6 7.5z" fill="currentColor" />
-  </SvgIcon>
-));
-
-export function overrideTextField(theme: SuperDispatchTheme): void {
-  const sm = theme.breakpoints.up('sm');
-
-  theme.props.MuiTextField = { minRows: 4, maxRows: 4, variant: 'outlined' };
-
-  theme.overrides.MuiFormLabel = {
-    root: {
-      ...theme.typography.body2,
-
-      color: Color.Dark400,
-
-      '&$error': { color: undefined },
-      '&$focused': { color: undefined },
-      '&$disabled': { color: undefined },
-    },
-  };
-
-  theme.overrides.MuiInputBase = {
-    root: {
-      ...theme.typography.body2,
-      '&$disabled': { backgroundColor: Color.Silver100 },
-    },
-    input: {
-      textOverflow: 'ellipsis',
-      height: theme.spacing(3),
-      [sm]: { height: theme.spacing(2.5) },
-    },
-    inputMultiline: { resize: 'vertical' },
-  };
-
-  theme.props.MuiInputLabel = { shrink: true };
-
-  theme.overrides.MuiInputLabel = {
-    root: { marginBottom: theme.spacing(0.5), transformOrigin: undefined },
-    formControl: {
-      top: undefined,
-      left: undefined,
-      position: undefined,
-      transform: undefined,
-    },
-    shrink: { transform: undefined, transformOrigin: undefined },
-    outlined: {
-      zIndex: undefined,
-      transform: undefined,
-      pointerEvents: undefined,
-      '&$shrink': { transform: undefined },
-    },
-  };
-
-  theme.props.MuiOutlinedInput = {
-    notched: false,
-  };
-
-  theme.overrides.MuiOutlinedInput = {
-    root: { '&:hover $notchedOutline': { borderColor: undefined } },
-
-    input: {
-      padding: theme.spacing(1.25, 1.5),
-      [sm]: { padding: theme.spacing(0.75, 1) },
-    },
-
-    multiline: { padding: theme.spacing(0.75, 1) },
-    adornedStart: { paddingLeft: theme.spacing(1) },
-    adornedEnd: { paddingRight: theme.spacing(1) },
-
-    notchedOutline: {
-      top: 0,
-      borderColor: Color.Silver500,
-      '& legend': { display: 'none' },
-    },
-  };
-
-  theme.props.MuiSelect = {
-    IconComponent: SelectIcon,
-  };
-
-  theme.overrides.MuiSelect = {
-    icon: {
-      top: 'calc(50% - 0.5em)',
-      '$disabled &': { color: Color.Dark100 },
-
-      fontSize: theme.spacing(3),
-      [sm]: { fontSize: theme.spacing(2) },
-    },
-
-    iconOutlined: {
-      right: theme.spacing(1.5),
-      [sm]: { right: theme.spacing(1) },
-    },
-
-    select: {
-      '&:focus': {
-        backgroundColor: undefined,
-      },
-    },
-
-    selectMenu: {
-      '&&': {
-        paddingRight: theme.spacing(4.5),
-        [sm]: { right: theme.spacing(4) },
-      },
-    },
-  };
-
-  theme.overrides.MuiInputAdornment = {
-    root: {
-      '& .MuiSvgIcon-root:not(.MuiSvgIcon-fontSizeSmall)': {
-        fontSize: theme.spacing(3),
-        [sm]: { fontSize: theme.spacing(2.5) },
-      },
-
-      '& .MuiIconButton-root': { padding: theme.spacing(1) },
-    },
-
-    positionStart: {
-      '& .MuiIconButton-root': {
-        marginLeft: theme.spacing(-0.5),
-        [sm]: { marginLeft: theme.spacing(-0.75) },
-      },
-    },
-
-    positionEnd: {
-      '& .MuiIconButton-root': {
-        marginRight: theme.spacing(-0.5),
-        [sm]: { marginRight: theme.spacing(-0.75) },
-      },
-    },
-  };
-
-  theme.overrides.MuiFormHelperText = {
-    root: {
-      ...theme.typography.body2,
-      marginTop: theme.spacing(0.5),
-    },
-
-    contained: { marginLeft: undefined, marginRight: undefined },
-  };
-}