@superdispatch/ui 0.21.13 → 0.21.14

package/src/switch/__tests__/Switch.spec.tsx

@@ -1,204 +0,0 @@
-import { Switch } from '@material-ui/core';
-import { renderCSS, renderTheme } from '@superdispatch/ui-testutils';
-
-it('checks default props', () => {
-  const { props } = renderTheme();
-
-  expect(props.MuiSwitch).toMatchInlineSnapshot(`
-    Object {
-      "color": "primary",
-      "disableFocusRipple": true,
-      "disableRipple": true,
-    }
-  `);
-});
-
-it('checks component css', () => {
-  expect(renderCSS(<Switch />, ['MuiSwitch'])).toMatchInlineSnapshot(`
-.MuiSwitch-root {
-  width: 76px;
-  height: 44px;
-  display: inline-flex;
-  padding: 6px 12px;
-  z-index: 0;
-  overflow: hidden;
-  position: relative;
-  box-sizing: border-box;
-  flex-shrink: 0;
-  vertical-align: middle;
-}
-
-@media print {
-  .MuiSwitch-root {
-    color-adjust: exact;
-  }
-}
-
-@media (min-width: 600px) {
-  .MuiSwitch-root {
-    width: 64px;
-    height: 32px;
-    padding: 4px 12px;
-  }
-}
-
-.MuiSwitch-edgeStart {
-  margin-left: -8px;
-}
-
-.MuiSwitch-edgeEnd {
-  margin-right: -8px;
-}
-
-.MuiSwitch-switchBase {
-  top: 0;
-  left: 8px;
-  color: #fafafa;
-  padding: 10px 8px;
-  z-index: 1;
-  position: absolute;
-  transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
-    transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-}
-
-.MuiSwitch-switchBase.Mui-checked {
-  transform: translateX(20px);
-}
-
-.MuiSwitch-switchBase.Mui-disabled {
-  color: #bdbdbd;
-}
-
-@media (min-width: 600px) {
-  .MuiSwitch-switchBase {
-    padding: 8px;
-  }
-}
-
-@media (min-width: 600px) {
-  .MuiSwitch-switchBase.Mui-checked {
-    transform: translateX(16px);
-  }
-}
-
-.MuiSwitch-colorPrimary.Mui-disabled {
-  color: #bdbdbd;
-}
-
-.MuiSwitch-colorPrimary.Mui-checked + .MuiSwitch-track {
-  background-color: Color.Blue300;
-}
-
-.MuiSwitch-colorPrimary.Mui-disabled + .MuiSwitch-track {
-  background-color: Color.Silver300;
-}
-
-.MuiSwitch-colorPrimary + .MuiSwitch-track {
-  background-color: Color.Silver500;
-}
-
-.MuiSwitch-colorPrimary.Mui-checked.Mui-disabled + .MuiSwitch-track {
-  background-color: Color.Blue100;
-}
-
-.MuiSwitch-colorPrimary:hover + .MuiSwitch-track {
-  background-color: Color.Dark100;
-}
-
-.MuiSwitch-colorPrimary.Mui-focusVisible + .MuiSwitch-track {
-  box-shadow: 0 0 0 3px Color.Blue100;
-}
-
-@media (hover: none) {
-  .MuiSwitch-colorPrimary.Mui-checked:hover {
-    background-color: transparent;
-  }
-}
-
-.MuiSwitch-colorPrimary.Mui-checked:hover + .MuiSwitch-track {
-  background-color: Color.Blue400;
-}
-
-.MuiSwitch-colorSecondary.Mui-checked {
-  color: #f50057;
-}
-
-.MuiSwitch-colorSecondary.Mui-disabled {
-  color: #bdbdbd;
-}
-
-.MuiSwitch-colorSecondary.Mui-checked + .MuiSwitch-track {
-  background-color: #f50057;
-}
-
-.MuiSwitch-colorSecondary.Mui-disabled + .MuiSwitch-track {
-  background-color: Color.Black;
-}
-
-.MuiSwitch-colorSecondary.Mui-checked:hover {
-  background-color: rgba(245, 0, 87, 0.04);
-}
-
-@media (hover: none) {
-  .MuiSwitch-colorSecondary.Mui-checked:hover {
-    background-color: transparent;
-  }
-}
-
-.MuiSwitch-sizeSmall {
-  width: 40px;
-  height: 24px;
-  padding: 7px;
-}
-
-.MuiSwitch-sizeSmall .MuiSwitch-thumb {
-  width: 16px;
-  height: 16px;
-}
-
-.MuiSwitch-sizeSmall .MuiSwitch-switchBase {
-  padding: 4px;
-}
-
-.MuiSwitch-sizeSmall .MuiSwitch-switchBase.Mui-checked {
-  transform: translateX(16px);
-}
-
-.MuiSwitch-input {
-  left: -100%;
-  width: 300%;
-}
-
-.MuiSwitch-thumb {
-  color: Color.White;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background-color: currentColor;
-}
-
-@media (min-width: 600px) {
-  .MuiSwitch-thumb {
-    width: 16px;
-    height: 16px;
-  }
-}
-
-.MuiSwitch-track {
-  width: 100%;
-  height: 100%;
-  z-index: -1;
-  box-shadow: 0 0 0 0 Color.Transparent;
-  transition: box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
-    background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  border-radius: 16px;
-  background-color: Color.Black;
-}
-
-@media (min-width: 600px) {
-  .MuiSwitch-track {
-    border-radius: 13px;
-  }
-}
-`);
-});

package/src/tabs/Tabs.stories.tsx

@@ -1,40 +0,0 @@
-import { Tab, Tabs } from '@material-ui/core';
-import { Meta } from '@storybook/react';
-import { UseState } from '@superdispatch/ui-docs';
-
-export default { title: 'Navigation/Tabs' } as Meta;
-
-export const basic = () => (
-  <UseState initialState={1}>
-    {(state, setState) => (
-      <Tabs
-        value={state}
-        onChange={(_, next) => {
-          setState(next);
-        }}
-      >
-        <Tab value={1} label="Tab 1" />
-        <Tab value={2} label="Tab 2" />
-        <Tab value={3} label="Tab 3" />
-      </Tabs>
-    )}
-  </UseState>
-);
-
-export const scrollButtons = () => (
-  <UseState initialState={1}>
-    {(state, setState) => (
-      <Tabs
-        value={state}
-        scrollButtons="on"
-        onChange={(_, next) => {
-          setState(next);
-        }}
-      >
-        <Tab value={1} label="Tab 1" />
-        <Tab value={2} label="Tab 2" />
-        <Tab value={3} label="Tab 3" />
-      </Tabs>
-    )}
-  </UseState>
-);

package/src/tabs/TabsOverrides.ts

@@ -1,45 +0,0 @@
-import { Color } from '../theme/Color';
-import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
-
-export function overrideTabs(theme: SuperDispatchTheme): void {
-  theme.props.MuiTabs = {
-    variant: 'scrollable',
-    textColor: 'primary',
-    indicatorColor: 'primary',
-  };
-
-  theme.overrides.MuiTabs = {
-    root: { minHeight: theme.spacing(6) },
-    scrollButtons: {
-      opacity: 1,
-      color: Color.Dark100,
-      width: theme.spacing(4),
-      transition: theme.transitions.create('opacity', {
-        duration: theme.transitions.duration.short,
-      }),
-    },
-  };
-
-  theme.overrides.MuiTab = {
-    root: {
-      ...theme.typography.body2,
-
-      minHeight: theme.spacing(6),
-
-      transition: theme.transitions.create(['color'], {
-        duration: theme.transitions.duration.short,
-      }),
-
-      [theme.breakpoints.up('sm')]: {
-        minWidth: undefined,
-        fontSize: undefined,
-        padding: theme.spacing(0.75, 3),
-      },
-    },
-
-    textColorPrimary: {
-      color: Color.Dark500,
-      '&:hover, &:focus': { color: Color.Blue300 },
-    },
-  };
-}

package/src/tabs/__tests__/Tabs.spec.tsx

@@ -1,226 +0,0 @@
-import { Tab, Tabs } from '@material-ui/core';
-import { renderCSS, renderTheme } from '@superdispatch/ui-testutils';
-
-it('checks default props', () => {
-  const { props } = renderTheme();
-
-  expect(props.MuiTabs).toMatchInlineSnapshot(`
-    Object {
-      "indicatorColor": "primary",
-      "textColor": "primary",
-      "variant": "scrollable",
-    }
-  `);
-  expect(props.MuiTab).toMatchInlineSnapshot(`undefined`);
-});
-
-it('checks component css', () => {
-  expect(
-    renderCSS(
-      <Tabs value="tab" scrollButtons="on">
-        <Tab value="tab" label="Text" />
-      </Tabs>,
-      ['MuiTab', 'MuiTabs', 'MuiTabScrollButton', 'PrivateTabIndicator'],
-    ),
-  ).toMatchInlineSnapshot(`
-    .MuiTab-root {
-      padding: 6px 12px;
-      overflow: hidden;
-      position: relative;
-      font-size: 14px;
-      max-width: 264px;
-      min-width: 72px;
-      box-sizing: border-box;
-      min-height: 48px;
-      text-align: center;
-      transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-      flex-shrink: 0;
-      font-family: 'Inter', sans-serif;
-      font-weight: 400;
-      line-height: 20px;
-      white-space: normal;
-    }
-
-    @media (min-width: 0px) and (max-width: 599.95px) {
-      .MuiTab-root {
-        font-size: 16px;
-        line-height: 24px;
-      }
-    }
-
-    @media (min-width: 600px) {
-      .MuiTab-root {
-        padding: 6px 24px;
-      }
-    }
-
-    .MuiTab-labelIcon {
-      min-height: 72px;
-      padding-top: 9px;
-    }
-
-    .MuiTab-labelIcon .MuiTab-wrapper > *:first-child {
-      margin-bottom: 6px;
-    }
-
-    .MuiTab-textColorInherit {
-      color: inherit;
-      opacity: 0.7;
-    }
-
-    .MuiTab-textColorInherit.Mui-selected {
-      opacity: 1;
-    }
-
-    .MuiTab-textColorInherit.Mui-disabled {
-      opacity: 0.5;
-    }
-
-    .MuiTab-textColorPrimary {
-      color: Color.Dark500;
-    }
-
-    .MuiTab-textColorPrimary.Mui-selected {
-      color: Color.Blue300;
-    }
-
-    .MuiTab-textColorPrimary.Mui-disabled {
-      color: Color.Dark100;
-    }
-
-    .MuiTab-textColorPrimary:hover,
-    .MuiTab-textColorPrimary:focus {
-      color: Color.Blue300;
-    }
-
-    .MuiTab-textColorSecondary {
-      color: Color.Dark200;
-    }
-
-    .MuiTab-textColorSecondary.Mui-selected {
-      color: #f50057;
-    }
-
-    .MuiTab-textColorSecondary.Mui-disabled {
-      color: Color.Dark100;
-    }
-
-    .MuiTab-fullWidth {
-      flex-grow: 1;
-      max-width: none;
-      flex-basis: 0;
-      flex-shrink: 1;
-    }
-
-    .MuiTab-wrapped {
-      font-size: 0.75rem;
-      line-height: 1.5;
-    }
-
-    .MuiTab-wrapper {
-      width: 100%;
-      display: inline-flex;
-      align-items: center;
-      flex-direction: column;
-      justify-content: center;
-    }
-
-    .MuiTabs-root {
-      display: flex;
-      overflow: hidden;
-      min-height: 48px;
-      -webkit-overflow-scrolling: touch;
-    }
-
-    .MuiTabs-vertical {
-      flex-direction: column;
-    }
-
-    .MuiTabs-flexContainer {
-      display: flex;
-    }
-
-    .MuiTabs-flexContainerVertical {
-      flex-direction: column;
-    }
-
-    .MuiTabs-centered {
-      justify-content: center;
-    }
-
-    .MuiTabs-scroller {
-      flex: 1 1 auto;
-      display: inline-block;
-      position: relative;
-      white-space: nowrap;
-    }
-
-    .MuiTabs-fixed {
-      width: 100%;
-      overflow-x: hidden;
-    }
-
-    .MuiTabs-scrollable {
-      overflow-x: scroll;
-      scrollbar-width: none;
-    }
-
-    .MuiTabs-scrollable::-webkit-scrollbar {
-      display: none;
-    }
-
-    .MuiTabs-scrollButtons {
-      color: Color.Dark100;
-      width: 32px;
-      opacity: 1;
-      transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-    }
-
-    @media (max-width: 599.95px) {
-      .MuiTabs-scrollButtonsDesktop {
-        display: none;
-      }
-    }
-
-    .MuiTabScrollButton-root {
-      width: 40px;
-      opacity: 0.8;
-      flex-shrink: 0;
-    }
-
-    .MuiTabScrollButton-root.Mui-disabled {
-      opacity: 0;
-    }
-
-    .MuiTabScrollButton-vertical {
-      width: 100%;
-      height: 40px;
-    }
-
-    .MuiTabScrollButton-vertical svg {
-      transform: rotate(90deg);
-    }
-
-    .PrivateTabIndicator-root-1 {
-      width: 100%;
-      bottom: 0;
-      height: 2px;
-      position: absolute;
-      transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-    }
-
-    .PrivateTabIndicator-colorPrimary-2 {
-      background-color: Color.Blue300;
-    }
-
-    .PrivateTabIndicator-colorSecondary-3 {
-      background-color: #f50057;
-    }
-
-    .PrivateTabIndicator-vertical-4 {
-      right: 0;
-      width: 2px;
-      height: 100%;
-    }
-  `);
-});

package/src/tag/Tag.stories.tsx

@@ -1,53 +0,0 @@
-import { Inline } from '../inline/Inline';
-import { Tag } from './Tag';
-
-export default { title: 'Data Display/Tag', component: Tag };
-
-export const subtle = () => (
-  <Inline>
-    <Tag color="grey" variant="subtle">
-      Grey
-    </Tag>
-    <Tag color="blue" variant="subtle">
-      Blue
-    </Tag>
-    <Tag color="green" variant="subtle">
-      Green
-    </Tag>
-    <Tag color="purple" variant="subtle">
-      Purple
-    </Tag>
-    <Tag color="red" variant="subtle">
-      Red
-    </Tag>
-    <Tag color="teal" variant="subtle">
-      Teal
-    </Tag>
-  </Inline>
-);
-
-export const bold = () => (
-  <Inline>
-    <Tag color="grey" variant="bold">
-      Grey
-    </Tag>
-    <Tag color="blue" variant="bold">
-      Blue
-    </Tag>
-    <Tag color="green" variant="bold">
-      Green
-    </Tag>
-    <Tag color="purple" variant="bold">
-      Purple
-    </Tag>
-    <Tag color="red" variant="bold">
-      Red
-    </Tag>
-    <Tag color="teal" variant="bold">
-      Teal
-    </Tag>
-    <Tag color="yellow" variant="bold">
-      Yellow
-    </Tag>
-  </Inline>
-);

package/src/tag/Tag.tsx

@@ -1,130 +0,0 @@
-import { Theme, Typography, TypographyProps } from '@material-ui/core';
-import { ClassNameMap, makeStyles } from '@material-ui/styles';
-import cx from 'clsx';
-import {
-  ElementType,
-  forwardRef,
-  ForwardRefExoticComponent,
-  RefAttributes,
-} from 'react';
-import { Color } from '../theme/Color';
-
-export type TagClassKey =
-  | 'root'
-  | 'colorGrey'
-  | 'colorBlue'
-  | 'colorGreen'
-  | 'colorPurple'
-  | 'colorRed'
-  | 'colorTeal'
-  | 'colorYellow'
-  | 'variantSubtle'
-  | 'variantBold';
-
-const useStyles = makeStyles<
-  Theme,
-  { classes?: Partial<ClassNameMap<TagClassKey>> },
-  TagClassKey
->(
-  (theme) => ({
-    root: {
-      maxWidth: '100%',
-      alignItems: 'center',
-      display: 'inline-flex',
-      borderRadius: theme.spacing(0.5),
-      padding: theme.spacing(0, 0.5),
-    },
-
-    variantSubtle: {
-      '&$colorGrey': { color: Color.Dark300, backgroundColor: Color.Silver200 },
-      '&$colorBlue': { color: Color.Blue500, backgroundColor: Color.Blue50 },
-      '&$colorGreen': { color: Color.Green500, backgroundColor: Color.Green50 },
-      '&$colorPurple': {
-        color: Color.Purple500,
-        backgroundColor: Color.Purple50,
-      },
-      '&$colorRed': { color: Color.Red500, backgroundColor: Color.Red50 },
-      '&$colorTeal': { color: Color.Teal500, backgroundColor: Color.Teal50 },
-      '&$colorYellow': {
-        color: Color.Yellow500,
-        backgroundColor: Color.Yellow50,
-      },
-    },
-
-    variantBold: {
-      color: Color.White,
-
-      '&$colorGrey': { backgroundColor: Color.Dark300 },
-      '&$colorBlue': { backgroundColor: Color.Blue500 },
-      '&$colorGreen': { backgroundColor: Color.Green500 },
-      '&$colorPurple': { backgroundColor: Color.Purple500 },
-      '&$colorRed': { backgroundColor: Color.Red500 },
-      '&$colorTeal': { backgroundColor: Color.Teal500 },
-      '&$colorYellow': { backgroundColor: Color.Yellow500 },
-    },
-
-    colorGrey: {},
-    colorBlue: {},
-    colorGreen: {},
-    colorPurple: {},
-    colorRed: {},
-    colorTeal: {},
-    colorYellow: {},
-  }),
-  { name: 'SD-Tag' },
-);
-
-export interface TagProps
-  extends RefAttributes<unknown>,
-    Omit<TypographyProps, 'ref' | 'classes' | 'color' | 'variant'> {
-  classes?: Partial<ClassNameMap<TagClassKey>>;
-  component?: ElementType;
-
-  color: 'grey' | 'blue' | 'green' | 'purple' | 'red' | 'teal' | 'yellow';
-  variant: 'subtle' | 'bold';
-  fontWeight?: 'regular' | 'bold';
-}
-
-export const Tag: ForwardRefExoticComponent<TagProps> = forwardRef(
-  (
-    {
-      color,
-      variant,
-      children,
-      classes,
-      className,
-      noWrap = true,
-      fontWeight = 'bold',
-      component = 'div' as const,
-      ...props
-    },
-    ref,
-  ) => {
-    const styles = useStyles({ classes });
-
-    return (
-      <Typography
-        {...props}
-        ref={ref}
-        noWrap={noWrap}
-        component={component}
-        variant={fontWeight === 'bold' ? 'body1' : 'body2'}
-        className={cx(
-          styles.root,
-          color === 'grey' && styles.colorGrey,
-          color === 'blue' && styles.colorBlue,
-          color === 'green' && styles.colorGreen,
-          color === 'purple' && styles.colorPurple,
-          color === 'red' && styles.colorRed,
-          color === 'teal' && styles.colorTeal,
-          color === 'yellow' && styles.colorYellow,
-          variant === 'subtle' && styles.variantSubtle,
-          variant === 'bold' && styles.variantBold,
-          className,
-        )}
-      >
-        {children}
-      </Typography>
-    );
-  },
-);