@superdispatch/ui 0.21.6 → 0.21.13

package/src/chip/ChipOverrides.tsx

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

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

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