@superdispatch/ui 0.21.6 → 0.21.13

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

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

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

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

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

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

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