@superdispatch/ui 0.21.6 → 0.21.13

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

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

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

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