@superdispatch/ui 0.21.13 → 0.21.14

package/src/card-button/CardButton.stories.tsx

@@ -1,36 +0,0 @@
-import {
-  Add as AddIcon,
-  AttachFile as AttachFileIcon,
-} from '@material-ui/icons';
-import { Meta } from '@storybook/react';
-import { CardButton } from './CardButton';
-
-export default { title: 'Inputs/CardButton', component: CardButton } as Meta;
-
-export const basic = () => (
-  <CardButton hint="or Drag & Drop files here" startIcon={<AddIcon />}>
-    Add Attachments
-  </CardButton>
-);
-
-export const endIcon = () => (
-  <CardButton hint="or Drag & Drop files here" endIcon={<AttachFileIcon />}>
-    Add Attachments
-  </CardButton>
-);
-
-export const error = () => (
-  <CardButton error="Invalid file extension">Add Attachments</CardButton>
-);
-
-export const small = () => (
-  <CardButton size="small" hint="or Drag & Drop files here">
-    Add Attachments
-  </CardButton>
-);
-
-export const large = () => (
-  <CardButton size="large" hint="or Drag & Drop files here">
-    Add Attachments
-  </CardButton>
-);

package/src/card-button/CardButton.tsx

@@ -1,202 +0,0 @@
-import {
-  ButtonBase,
-  ButtonBaseProps,
-  Theme,
-  Typography,
-} from '@material-ui/core';
-import { ClassNameMap, makeStyles } from '@material-ui/styles';
-import clsx from 'clsx';
-import {
-  forwardRef,
-  ForwardRefExoticComponent,
-  ReactNode,
-  RefAttributes,
-} from 'react';
-import { Color } from '../theme/Color';
-
-export type CardButtonClassKey =
-  | 'root'
-  | 'label'
-  | 'hint'
-  | 'error'
-  | 'primary'
-  | 'disabled'
-  | 'sizeSmall'
-  | 'sizeLarge'
-  | 'icon'
-  | 'startIcon'
-  | 'endIcon';
-
-const useStyles = makeStyles<
-  Theme,
-  { classes?: Partial<ClassNameMap<CardButtonClassKey>> },
-  CardButtonClassKey
->(
-  (theme) => ({
-    root: {
-      width: '100%',
-      display: 'flex',
-      alignItems: 'center',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      backgroundColor: Color.White,
-
-      border: '1px dashed',
-      borderRadius: theme.spacing(0.5),
-
-      padding: theme.spacing(1.5),
-      minHeight: theme.spacing(13),
-
-      transition: theme.transitions.create([
-        'color',
-        'box-shadow',
-        'border-color',
-        'background-color',
-      ]),
-    },
-
-    disabled: {
-      color: Color.Dark200,
-      borderColor: Color.Silver500,
-      backgroundColor: Color.Silver100,
-    },
-
-    error: {
-      color: Color.Red300,
-      borderColor: Color.Red300,
-      backgroundColor: Color.Red50,
-      '&:focus': { backgroundColor: Color.Red75 },
-    },
-
-    primary: {
-      color: Color.Blue300,
-      borderColor: Color.Silver500,
-      '&:focus': { backgroundColor: Color.Blue50 },
-      '&:hover, &:active': {
-        borderColor: Color.Blue300,
-        backgroundColor: Color.Blue50,
-      },
-    },
-
-    sizeSmall: {
-      minHeight: theme.spacing(6),
-    },
-
-    sizeLarge: {
-      minHeight: theme.spacing(17.5),
-    },
-
-    label: {
-      display: 'flex',
-      alignItems: 'center',
-    },
-
-    icon: {
-      display: 'flex',
-      '& svg': {
-        fontSize: theme.spacing(3),
-        [theme.breakpoints.up('sm')]: { fontSize: theme.spacing(2.5) },
-      },
-    },
-
-    startIcon: {
-      marginRight: theme.spacing(1),
-      marginLeft: theme.spacing(-0.5),
-    },
-
-    endIcon: {
-      marginLeft: theme.spacing(1),
-      marginRight: theme.spacing(-0.5),
-    },
-
-    hint: {
-      marginTop: theme.spacing(0.5),
-    },
-  }),
-  { name: 'SD-CardButton' },
-);
-
-export interface CardButtonProps
-  extends RefAttributes<HTMLButtonElement>,
-    ButtonBaseProps {
-  error?: ReactNode;
-  children?: ReactNode;
-  hint?: ReactNode;
-  startIcon?: ReactNode;
-  endIcon?: ReactNode;
-
-  size?: 'small' | 'medium' | 'large';
-
-  className?: string;
-  classes?: Partial<ClassNameMap<CardButtonClassKey>>;
-}
-
-export const CardButton: ForwardRefExoticComponent<CardButtonProps> =
-  forwardRef(
-    (
-      {
-        hint,
-        size,
-        error,
-        classes,
-        className,
-        children,
-        endIcon,
-        startIcon,
-        disabled,
-        ...props
-      },
-      ref,
-    ) => {
-      const styles = useStyles({ classes });
-
-      return (
-        <ButtonBase
-          {...props}
-          ref={ref}
-          disabled={disabled}
-          className={clsx(
-            styles.root,
-            {
-              [styles.disabled]: disabled,
-              [styles.error]: !disabled && error,
-              [styles.primary]: !disabled && !error,
-              [styles.sizeSmall]: size === 'small',
-              [styles.sizeLarge]: size === 'large',
-            },
-            className,
-          )}
-        >
-          {error ? (
-            <Typography variant="h4" color="inherit" className={styles.label}>
-              {error}
-            </Typography>
-          ) : (
-            <>
-              <Typography variant="h4" color="inherit" className={styles.label}>
-                {!!startIcon && (
-                  <span className={clsx(styles.icon, styles.startIcon)}>
-                    {startIcon}
-                  </span>
-                )}
-
-                {children}
-
-                {!!endIcon && (
-                  <span className={clsx(styles.icon, styles.endIcon)}>
-                    {endIcon}
-                  </span>
-                )}
-              </Typography>
-
-              {!!hint && (
-                <Typography color="textSecondary" className={styles.hint}>
-                  {hint}
-                </Typography>
-              )}
-            </>
-          )}
-        </ButtonBase>
-      );
-    },
-  );

package/src/card-button/__tests__/CardButton.spec.tsx

@@ -1,95 +0,0 @@
-import { renderCSS } from '@superdispatch/ui-testutils';
-import { CardButton } from '../..';
-
-it('checks component css', () => {
-  expect(renderCSS(<CardButton />, ['SD-CardButton'])).toMatchInlineSnapshot(`
-.SD-CardButton-root {
-  width: 100%;
-  border: 1px dashed;
-  display: flex;
-  padding: 12px;
-  min-height: 104px;
-  transition: color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
-    box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
-    border-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
-    background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  align-items: center;
-  border-radius: 4px;
-  flex-direction: column;
-  justify-content: center;
-  background-color: Color.White;
-}
-
-.SD-CardButton-disabled {
-  color: Color.Dark200;
-  border-color: Color.Silver500;
-  background-color: Color.Silver100;
-}
-
-.SD-CardButton-error {
-  color: Color.Red300;
-  border-color: Color.Red300;
-  background-color: Color.Red50;
-}
-
-.SD-CardButton-error:focus {
-  background-color: Color.Red75;
-}
-
-.SD-CardButton-primary {
-  color: Color.Blue300;
-  border-color: Color.Silver500;
-}
-
-.SD-CardButton-primary:focus {
-  background-color: Color.Blue50;
-}
-
-.SD-CardButton-primary:hover,
-.SD-CardButton-primary:active {
-  border-color: Color.Blue300;
-  background-color: Color.Blue50;
-}
-
-.SD-CardButton-sizeSmall {
-  min-height: 48px;
-}
-
-.SD-CardButton-sizeLarge {
-  min-height: 140px;
-}
-
-.SD-CardButton-label {
-  display: flex;
-  align-items: center;
-}
-
-.SD-CardButton-icon {
-  display: flex;
-}
-
-.SD-CardButton-icon svg {
-  font-size: 24px;
-}
-
-@media (min-width: 600px) {
-  .SD-CardButton-icon svg {
-    font-size: 20px;
-  }
-}
-
-.SD-CardButton-startIcon {
-  margin-left: -4px;
-  margin-right: 8px;
-}
-
-.SD-CardButton-endIcon {
-  margin-left: 8px;
-  margin-right: -4px;
-}
-
-.SD-CardButton-hint {
-  margin-top: 4px;
-}
-`);
-});

package/src/checkbox/CheckboxField.stories.tsx

@@ -1,61 +0,0 @@
-import {
-  FormControlLabel,
-  FormGroup,
-  Switch,
-  TextField,
-} from '@material-ui/core';
-import { RadioField } from '..';
-import { CheckboxField } from './CheckboxField';
-import { CheckboxGroupField } from './CheckboxGroudField';
-
-export default { title: 'Inputs/CheckboxField', component: CheckboxField };
-
-export const basic = () => (
-  <CheckboxField label="Label" helperText="Helper Text" />
-);
-
-export const error = () => (
-  <CheckboxField label="Label" helperText="Error Text" error={true} />
-);
-
-export const indeterminate = () => (
-  <CheckboxField indeterminate={true} label="Label" />
-);
-
-export const disabled = () => (
-  <CheckboxGroupField label="Disabled">
-    <CheckboxField label="Checked" checked={true} disabled={true} />
-    <CheckboxField label="Unchecked" checked={false} disabled={true} />
-    <CheckboxField
-      checked={true}
-      disabled={true}
-      indeterminate={true}
-      label="Checked and Indeterminate"
-    />
-
-    <CheckboxField
-      checked={false}
-      disabled={true}
-      indeterminate={true}
-      label="Unchecked and Indeterminate"
-    />
-  </CheckboxGroupField>
-);
-
-export const labelPlacement = () => (
-  <CheckboxField
-    label="Label"
-    FormControlLabelProps={{ labelPlacement: 'start' }}
-  />
-);
-
-export const inlineForm = () => (
-  <CheckboxGroupField FormGroupProps={{ row: true }}>
-    <FormGroup row={true}>
-      <RadioField label="Radio" />
-      <CheckboxField label="Checkbox" />
-      <FormControlLabel label="Switch" control={<Switch />} />
-      <TextField placeholder="Text Field" />
-    </FormGroup>
-  </CheckboxGroupField>
-);

package/src/checkbox/CheckboxField.tsx

@@ -1,56 +0,0 @@
-import {
-  Checkbox,
-  CheckboxProps,
-  FormControl,
-  FormControlLabel,
-  FormControlLabelProps,
-  FormHelperText,
-} from '@material-ui/core';
-import { forwardRef, ForwardRefExoticComponent, ReactNode } from 'react';
-
-export interface CheckboxFieldProps
-  extends CheckboxProps,
-    Pick<FormControlLabelProps, 'label'> {
-  error?: boolean;
-  helperText?: ReactNode;
-  FormControlLabelProps?: Omit<
-    FormControlLabelProps,
-    'label' | 'checked' | 'onBlur' | 'onChange' | 'control'
-  >;
-}
-
-export const CheckboxField: ForwardRefExoticComponent<CheckboxFieldProps> =
-  forwardRef(
-    (
-      {
-        label,
-        error,
-        checked,
-        onBlur,
-        onChange,
-        helperText,
-        FormControlLabelProps: formControlLabelProps,
-        ...props
-      },
-      ref,
-    ) => (
-      <FormControl error={error}>
-        <FormControlLabel
-          {...formControlLabelProps}
-          label={label}
-          checked={checked}
-          onBlur={onBlur as FormControlLabelProps['onBlur']}
-          onChange={onChange as FormControlLabelProps['onChange']}
-          control={
-            <Checkbox
-              ref={ref}
-              color="primary"
-              disableRipple={true}
-              {...props}
-            />
-          }
-        />
-        {helperText && <FormHelperText>{helperText}</FormHelperText>}
-      </FormControl>
-    ),
-  );

package/src/checkbox/CheckboxGroudField.tsx

@@ -1,53 +0,0 @@
-import {
-  FormControl,
-  FormControlProps,
-  FormGroup,
-  FormGroupProps,
-  FormHelperText,
-  FormHelperTextProps,
-  FormLabel,
-  FormLabelProps,
-} from '@material-ui/core';
-import { forwardRef, ForwardRefExoticComponent, ReactNode } from 'react';
-
-export interface CheckboxGroupFieldProps
-  extends Omit<FormControlProps, 'hiddenLabel' | 'onChange'> {
-  FormGroupProps?: Omit<FormGroupProps, 'children'>;
-
-  label?: ReactNode;
-  FormLabelProps?: Omit<FormLabelProps, 'children'>;
-
-  helperText?: ReactNode;
-  FormHelperTextProps?: Omit<FormHelperTextProps, 'children'>;
-}
-
-export const CheckboxGroupField: ForwardRefExoticComponent<CheckboxGroupFieldProps> =
-  forwardRef(
-    (
-      {
-        FormGroupProps: formGroupProps,
-
-        label,
-        FormLabelProps: formLabelProps,
-
-        helperText,
-        FormHelperTextProps: formHelperTextProps,
-
-        children,
-        ...formControlProps
-      },
-      ref,
-    ) => (
-      <FormControl {...formControlProps} hiddenLabel={!label}>
-        {!!label && <FormLabel {...formLabelProps}>{label}</FormLabel>}
-
-        <FormGroup ref={ref} {...formGroupProps}>
-          {children}
-        </FormGroup>
-
-        {!!helperText && (
-          <FormHelperText {...formHelperTextProps}>{helperText}</FormHelperText>
-        )}
-      </FormControl>
-    ),
-  );

package/src/checkbox/CheckboxOverrides.tsx

@@ -1,55 +0,0 @@
-import { SvgIcon } from '@material-ui/core';
-import { Color } from '../theme/Color';
-import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
-
-export function overrideCheckbox(theme: SuperDispatchTheme): void {
-  theme.props.MuiCheckbox = {
-    color: 'primary',
-    icon: (
-      <SvgIcon>
-        <rect
-          width="17"
-          height="17"
-          x="3.5"
-          y="3.5"
-          fill={Color.White}
-          stroke="currentColor"
-          rx="1.5"
-        />
-      </SvgIcon>
-    ),
-    checkedIcon: (
-      <SvgIcon>
-        <rect width="18" height="18" x="3" y="3" fill="currentColor" rx="2" />
-        <path
-          fill={Color.White}
-          d="M15.73 8l-.63.63c-1.43 1.43-2.94 3.05-4.37 4.5l-1.9-1.57-.7-.57L7 12.38l.7.57 2.53 2.09.63.52.58-.58c1.6-1.62 3.35-3.5 4.93-5.08l.63-.63L15.73 8z"
-        />
-      </SvgIcon>
-    ),
-    indeterminateIcon: (
-      <SvgIcon>
-        <rect width="18" height="18" x="3" y="3" fill="currentIcon" rx="2" />
-        <path fill={Color.White} d="M7 11h10v2H7v-2z" />
-      </SvgIcon>
-    ),
-  };
-
-  theme.overrides.MuiCheckbox = {
-    root: {
-      color: Color.Dark100,
-      marginTop: theme.spacing(-0.625),
-      marginBottom: theme.spacing(-0.625),
-    },
-
-    colorPrimary: {
-      '&$checked$disabled': {
-        color: Color.Silver500,
-      },
-
-      '&:hover:not($checked)': {
-        color: Color.Dark100,
-      },
-    },
-  };
-}

package/src/checkbox/__tests__/Checkbox.spec.tsx

@@ -1,105 +0,0 @@
-import { Checkbox } from '@material-ui/core';
-import { renderCSS, renderTheme } from '@superdispatch/ui-testutils';
-
-it('checks default props', () => {
-  const { props } = renderTheme();
-
-  expect(props.MuiCheckbox).toMatchInlineSnapshot(`
-    Object {
-      "checkedIcon": <WithStyles(ForwardRef(SvgIcon))>
-        <rect
-          fill="currentColor"
-          height="18"
-          rx="2"
-          width="18"
-          x="3"
-          y="3"
-        />
-        <path
-          d="M15.73 8l-.63.63c-1.43 1.43-2.94 3.05-4.37 4.5l-1.9-1.57-.7-.57L7 12.38l.7.57 2.53 2.09.63.52.58-.58c1.6-1.62 3.35-3.5 4.93-5.08l.63-.63L15.73 8z"
-          fill="#fff"
-        />
-      </WithStyles(ForwardRef(SvgIcon))>,
-      "color": "primary",
-      "icon": <WithStyles(ForwardRef(SvgIcon))>
-        <rect
-          fill="#fff"
-          height="17"
-          rx="1.5"
-          stroke="currentColor"
-          width="17"
-          x="3.5"
-          y="3.5"
-        />
-      </WithStyles(ForwardRef(SvgIcon))>,
-      "indeterminateIcon": <WithStyles(ForwardRef(SvgIcon))>
-        <rect
-          fill="currentIcon"
-          height="18"
-          rx="2"
-          width="18"
-          x="3"
-          y="3"
-        />
-        <path
-          d="M7 11h10v2H7v-2z"
-          fill="#fff"
-        />
-      </WithStyles(ForwardRef(SvgIcon))>,
-    }
-  `);
-});
-
-it('checks component css', () => {
-  expect(renderCSS(<Checkbox />, ['MuiCheckbox'])).toMatchInlineSnapshot(`
-.MuiCheckbox-root {
-  color: Color.Dark100;
-  margin-top: -5px;
-  margin-bottom: -5px;
-}
-
-.MuiCheckbox-colorPrimary.Mui-checked {
-  color: Color.Blue300;
-}
-
-.MuiCheckbox-colorPrimary.Mui-disabled {
-  color: Color.Silver400;
-}
-
-.MuiCheckbox-colorPrimary.Mui-checked.Mui-disabled {
-  color: Color.Silver500;
-}
-
-.MuiCheckbox-colorPrimary:hover:not(.Mui-checked) {
-  color: Color.Dark100;
-}
-
-.MuiCheckbox-colorPrimary.Mui-checked:hover {
-  background-color: rgba(0, 117, 255, 0.04);
-}
-
-@media (hover: none) {
-  .MuiCheckbox-colorPrimary.Mui-checked:hover {
-    background-color: transparent;
-  }
-}
-
-.MuiCheckbox-colorSecondary.Mui-checked {
-  color: #f50057;
-}
-
-.MuiCheckbox-colorSecondary.Mui-disabled {
-  color: Color.Silver400;
-}
-
-.MuiCheckbox-colorSecondary.Mui-checked:hover {
-  background-color: rgba(245, 0, 87, 0.04);
-}
-
-@media (hover: none) {
-  .MuiCheckbox-colorSecondary.Mui-checked:hover {
-    background-color: transparent;
-  }
-}
-`);
-});

package/src/chip/Chip.stories.tsx

@@ -1,26 +0,0 @@
-import { Chip } from '@material-ui/core';
-import { PropsLink } from '@superdispatch/ui-docs';
-import { Inline } from '..';
-
-export default {
-  title: 'Data Display/Chip',
-  parameters: {
-    componentSubtitle: (
-      <PropsLink url="https://material-ui.com/api/chip/#props" />
-    ),
-  },
-};
-
-export const examples = () => (
-  <Inline>
-    <Chip label="Basic" />
-    <Chip label="Disabled" disabled={true} />
-    <Chip label="Clickable" clickable={true} />
-    <Chip
-      label="Deletable"
-      onDelete={() => {
-        alert('Delete!');
-      }}
-    />
-  </Inline>
-);