@superdispatch/ui 0.21.13 → 0.22.0

package/src/chip/ChipOverrides.tsx

@@ -1,111 +0,0 @@
-import { SvgIcon } from '@material-ui/core';
-import { Color } from '../theme/Color';
-import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
-
-export function overrideChip(theme: SuperDispatchTheme): void {
-  const sm = theme.breakpoints.up('sm');
-
-  theme.props.MuiChip = {
-    size: 'small',
-    deleteIcon: (
-      <div>
-        <SvgIcon>
-          <path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M13.239 12L17 8.239 15.761 7 12 10.761 8.239 7 7 8.239 10.761 12 7 15.761 8.239 17 12 13.239 15.761 17 17 15.761 13.239 12z"
-            fill="currentColor"
-          />
-        </SvgIcon>
-      </div>
-    ),
-  };
-  theme.overrides.MuiChip = {
-    root: {
-      ...theme.typography.body2,
-      color: undefined,
-      height: undefined,
-      borderRadius: 4,
-      backgroundColor: Color.Silver200,
-      '&$disabled': {
-        opacity: undefined,
-        color: Color.Dark100,
-      },
-    },
-
-    sizeSmall: {
-      height: undefined,
-    },
-
-    labelSmall: {
-      paddingLeft: 6,
-      paddingRight: 6,
-      [sm]: { paddingLeft: 4, paddingRight: 4 },
-    },
-
-    clickable: {
-      '&:hover, &:focus': {
-        backgroundColor: undefined,
-      },
-      '&:active': {
-        boxShadow: undefined,
-      },
-      '&:focus': {
-        boxShadow: `0 0 0 2px ${Color.Silver300}`,
-      },
-      '&:active, &:hover': {
-        backgroundColor: Color.Silver300,
-      },
-    },
-
-    deletable: {
-      '&:focus': {
-        backgroundColor: undefined,
-        boxShadow: `0 0 0 2px ${Color.Silver300}`,
-      },
-    },
-
-    deleteIcon: {
-      width: undefined,
-      height: undefined,
-      display: 'flex',
-      transition: theme.transitions.create('background-color'),
-
-      '&:active, &:hover, &:focus': {
-        '& > svg': {
-          backgroundColor: Color.Silver400,
-        },
-      },
-
-      '& > svg': {
-        borderRadius: '50%',
-        color: Color.Dark200,
-        fontSize: '1em',
-      },
-    },
-
-    deleteIconSmall: {
-      width: undefined,
-      height: undefined,
-
-      padding: theme.spacing(0.5),
-      marginLeft: theme.spacing(-0.5),
-      marginRight: theme.spacing(0.25),
-      [sm]: { marginRight: 0 },
-    },
-
-    icon: {
-      color: Color.Dark100,
-      fontSize: '1em',
-      marginRight: undefined,
-    },
-
-    iconSmall: {
-      width: undefined,
-      height: undefined,
-      marginLeft: 8,
-      marginRight: undefined,
-      [sm]: { marginLeft: 4 },
-    },
-  };
-}

package/src/chip/__tests__/Chip.spec.tsx

@@ -1,308 +0,0 @@
-import { Chip } from '@material-ui/core';
-import { renderCSS, renderTheme } from '@superdispatch/ui-testutils';
-
-it('checks default props', () => {
-  const { props } = renderTheme();
-
-  expect(props.MuiChip).toMatchInlineSnapshot(`
-    Object {
-      "deleteIcon": <div>
-        <WithStyles(ForwardRef(SvgIcon))>
-          <path
-            clipRule="evenodd"
-            d="M13.239 12L17 8.239 15.761 7 12 10.761 8.239 7 7 8.239 10.761 12 7 15.761 8.239 17 12 13.239 15.761 17 17 15.761 13.239 12z"
-            fill="currentColor"
-            fillRule="evenodd"
-          />
-        </WithStyles(ForwardRef(SvgIcon))>
-      </div>,
-      "size": "small",
-    }
-  `);
-});
-
-it('checks component css', () => {
-  expect(renderCSS(<Chip />, ['MuiChip'])).toMatchInlineSnapshot(`
-.MuiChip-root {
-  border: none;
-  cursor: default;
-  display: inline-flex;
-  outline: 0;
-  padding: 0;
-  font-size: 14px;
-  box-sizing: border-box;
-  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
-    box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  align-items: center;
-  font-family: 'Inter', sans-serif;
-  font-weight: 400;
-  line-height: 20px;
-  white-space: nowrap;
-  border-radius: 4px;
-  vertical-align: middle;
-  justify-content: center;
-  text-decoration: none;
-  background-color: Color.Silver200;
-}
-
-.MuiChip-root.Mui-disabled {
-  color: Color.Dark100;
-  pointer-events: none;
-}
-
-.MuiChip-root .MuiChip-avatar {
-  color: #616161;
-  width: 24px;
-  height: 24px;
-  font-size: 0.75rem;
-  margin-left: 5px;
-  margin-right: -6px;
-}
-
-.MuiChip-root .MuiChip-avatarColorPrimary {
-  color: Color.White;
-  background-color: rgb(0, 81, 178);
-}
-
-.MuiChip-root .MuiChip-avatarColorSecondary {
-  color: Color.White;
-  background-color: #c51162;
-}
-
-.MuiChip-root .MuiChip-avatarSmall {
-  width: 18px;
-  height: 18px;
-  font-size: 0.625rem;
-  margin-left: 4px;
-  margin-right: -4px;
-}
-
-@media (min-width: 0px) and (max-width: 599.95px) {
-  .MuiChip-root {
-    font-size: 16px;
-    line-height: 24px;
-  }
-}
-
-.MuiChip-colorPrimary {
-  color: Color.White;
-  background-color: Color.Blue300;
-}
-
-.MuiChip-colorSecondary {
-  color: Color.White;
-  background-color: #f50057;
-}
-
-.MuiChip-clickable {
-  cursor: pointer;
-  user-select: none;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.MuiChip-clickable:focus {
-  box-shadow: 0 0 0 2px Color.Silver300;
-}
-
-.MuiChip-clickable:active,
-.MuiChip-clickable:hover {
-  background-color: Color.Silver300;
-}
-
-.MuiChip-clickableColorPrimary:hover,
-.MuiChip-clickableColorPrimary:focus {
-  background-color: rgb(20, 128, 255);
-}
-
-.MuiChip-clickableColorSecondary:hover,
-.MuiChip-clickableColorSecondary:focus {
-  background-color: rgb(245, 20, 100);
-}
-
-.MuiChip-deletable:focus {
-  box-shadow: 0 0 0 2px Color.Silver300;
-}
-
-.MuiChip-deletableColorPrimary:focus {
-  background-color: rgb(51, 144, 255);
-}
-
-.MuiChip-deletableColorSecondary:focus {
-  background-color: rgb(247, 51, 120);
-}
-
-.MuiChip-outlined {
-  border: 1px solid rgba(0, 0, 0, 0.23);
-  background-color: transparent;
-}
-
-.MuiChip-clickable.MuiChip-outlined:hover,
-.MuiChip-clickable.MuiChip-outlined:focus,
-.MuiChip-deletable.MuiChip-outlined:focus {
-  background-color: rgba(25, 35, 52, 0.04);
-}
-
-.MuiChip-outlined .MuiChip-avatar {
-  margin-left: 4px;
-}
-
-.MuiChip-outlined .MuiChip-avatarSmall {
-  margin-left: 2px;
-}
-
-.MuiChip-outlined .MuiChip-icon {
-  margin-left: 4px;
-}
-
-.MuiChip-outlined .MuiChip-iconSmall {
-  margin-left: 2px;
-}
-
-.MuiChip-outlined .MuiChip-deleteIcon {
-  margin-right: 5px;
-}
-
-.MuiChip-outlined .MuiChip-deleteIconSmall {
-  margin-right: 3px;
-}
-
-.MuiChip-outlinedPrimary {
-  color: Color.Blue300;
-  border: 1px solid Color.Blue300;
-}
-
-.MuiChip-clickable.MuiChip-outlinedPrimary:hover,
-.MuiChip-clickable.MuiChip-outlinedPrimary:focus,
-.MuiChip-deletable.MuiChip-outlinedPrimary:focus {
-  background-color: rgba(0, 117, 255, 0.04);
-}
-
-.MuiChip-outlinedSecondary {
-  color: #f50057;
-  border: 1px solid #f50057;
-}
-
-.MuiChip-clickable.MuiChip-outlinedSecondary:hover,
-.MuiChip-clickable.MuiChip-outlinedSecondary:focus,
-.MuiChip-deletable.MuiChip-outlinedSecondary:focus {
-  background-color: rgba(245, 0, 87, 0.04);
-}
-
-.MuiChip-icon {
-  color: Color.Dark100;
-  font-size: 1em;
-  margin-left: 5px;
-}
-
-.MuiChip-iconSmall {
-  margin-left: 8px;
-}
-
-@media (min-width: 600px) {
-  .MuiChip-iconSmall {
-    margin-left: 4px;
-  }
-}
-
-.MuiChip-iconColorPrimary {
-  color: inherit;
-}
-
-.MuiChip-iconColorSecondary {
-  color: inherit;
-}
-
-.MuiChip-label {
-  overflow: hidden;
-  white-space: nowrap;
-  padding-left: 12px;
-  padding-right: 12px;
-  text-overflow: ellipsis;
-}
-
-.MuiChip-labelSmall {
-  padding-left: 6px;
-  padding-right: 6px;
-}
-
-@media (min-width: 600px) {
-  .MuiChip-labelSmall {
-    padding-left: 4px;
-    padding-right: 4px;
-  }
-}
-
-.MuiChip-deleteIcon {
-  color: rgba(25, 35, 52, 0.26);
-  cursor: pointer;
-  margin: 0 5px 0 -6px;
-  display: flex;
-  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.MuiChip-deleteIcon:hover {
-  color: rgba(25, 35, 52, 0.4);
-}
-
-.MuiChip-deleteIcon > svg {
-  color: Color.Dark200;
-  font-size: 1em;
-  border-radius: 50%;
-}
-
-.MuiChip-deleteIcon:active > svg,
-.MuiChip-deleteIcon:hover > svg,
-.MuiChip-deleteIcon:focus > svg {
-  background-color: Color.Silver400;
-}
-
-.MuiChip-deleteIconSmall {
-  padding: 4px;
-  margin-left: -4px;
-  margin-right: 2px;
-}
-
-@media (min-width: 600px) {
-  .MuiChip-deleteIconSmall {
-    margin-right: 0;
-  }
-}
-
-.MuiChip-deleteIconColorPrimary {
-  color: rgba(255, 255, 255, 0.7);
-}
-
-.MuiChip-deleteIconColorPrimary:hover,
-.MuiChip-deleteIconColorPrimary:active {
-  color: Color.White;
-}
-
-.MuiChip-deleteIconColorSecondary {
-  color: rgba(255, 255, 255, 0.7);
-}
-
-.MuiChip-deleteIconColorSecondary:hover,
-.MuiChip-deleteIconColorSecondary:active {
-  color: Color.White;
-}
-
-.MuiChip-deleteIconOutlinedColorPrimary {
-  color: rgba(0, 117, 255, 0.7);
-}
-
-.MuiChip-deleteIconOutlinedColorPrimary:hover,
-.MuiChip-deleteIconOutlinedColorPrimary:active {
-  color: Color.Blue300;
-}
-
-.MuiChip-deleteIconOutlinedColorSecondary {
-  color: rgba(245, 0, 87, 0.7);
-}
-
-.MuiChip-deleteIconOutlinedColorSecondary:hover,
-.MuiChip-deleteIconOutlinedColorSecondary:active {
-  color: #f50057;
-}
-`);
-});

package/src/columns/Column.tsx

@@ -1,124 +0,0 @@
-import { forwardRef, ReactNode } from 'react';
-import styled, { css, SimpleInterpolation } from 'styled-components';
-import {
-  ResponsiveProp,
-  ResponsivePropTuple,
-  useResponsiveProp,
-} from '../props/ResponsiveProp';
-
-export type ColumnWidth =
-  | 'adaptive'
-  | 'content'
-  | 'fluid'
-  | '1/2'
-  | '1/3'
-  | '2/3'
-  | '1/4'
-  | '3/4'
-  | '1/5'
-  | '2/5'
-  | '3/5'
-  | '4/5';
-
-function computeFlexBasis(scale: number): string {
-  return `${scale * 100}%`;
-}
-
-function flexBasisMixin(width: ColumnWidth): string {
-  switch (width) {
-    case '1/2':
-      return computeFlexBasis(1 / 2);
-    case '1/3':
-      return computeFlexBasis(1 / 3);
-    case '2/3':
-      return computeFlexBasis(2 / 3);
-    case '1/4':
-      return computeFlexBasis(1 / 4);
-    case '3/4':
-      return computeFlexBasis(3 / 4);
-    case '1/5':
-      return computeFlexBasis(1 / 5);
-    case '2/5':
-      return computeFlexBasis(2 / 5);
-    case '3/5':
-      return computeFlexBasis(3 / 5);
-    case '4/5':
-      return computeFlexBasis(4 / 5);
-  }
-
-  return 'auto';
-}
-
-function columnRootMixin(width: ColumnWidth): readonly SimpleInterpolation[] {
-  return css`
-    flex-grow: 0;
-    flex-basis: ${flexBasisMixin(width)};
-    width: ${width === 'fluid' ? '100%' : 'auto'};
-    flex-shrink: ${width === 'fluid' || width === 'adaptive' ? 1 : 0};
-  `;
-}
-
-interface ColumnRootProps {
-  columnWidth: ResponsivePropTuple<ColumnWidth>;
-}
-
-const ColumnRoot = styled.div<ColumnRootProps>(
-  ({ theme, columnWidth }) =>
-    css`
-      min-width: 0;
-
-      ${columnRootMixin(columnWidth[0])};
-
-      ${theme.breakpoints.up('sm')} {
-        ${columnRootMixin(columnWidth[1])};
-      }
-
-      ${theme.breakpoints.up('md')} {
-        ${columnRootMixin(columnWidth[2])};
-      }
-
-      & > div {
-        padding-top: var(--column-space-top);
-        padding-left: var(--column-space-left);
-        padding-bottom: var(--column-space-bottom);
-      }
-
-      &:last-child > div {
-        padding-top: 0;
-        padding-bottom: 0;
-      }
-    `,
-);
-
-export interface ColumnProps {
-  children?: ReactNode;
-  'aria-label'?: string;
-  'aria-labelledby'?: string;
-
-  width?: ResponsiveProp<ColumnWidth>;
-}
-
-export const Column = forwardRef<HTMLDivElement, ColumnProps>(
-  (
-    {
-      children,
-      'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledBy,
-      width = 'fluid',
-    }: ColumnProps,
-    ref,
-  ) => {
-    const columnWidth = useResponsiveProp(width);
-
-    return (
-      <ColumnRoot
-        ref={ref}
-        columnWidth={columnWidth}
-        aria-label={ariaLabel}
-        aria-labelledby={ariaLabelledBy}
-      >
-        <div>{children}</div>
-      </ColumnRoot>
-    );
-  },
-);