@superdispatch/ui 0.21.6 → 0.21.13

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,26 @@
+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>
+);