@superdispatch/ui 0.21.13 → 0.21.14

package/src/drawer/__tests__/Drawer.spec.tsx

@@ -1,227 +0,0 @@
-import { Drawer } from '@material-ui/core';
-import { renderCSS, renderTheme } from '@superdispatch/ui-testutils';
-import { DrawerActions } from '../DrawerActions';
-import { DrawerContent } from '../DrawerContent';
-import { DrawerList } from '../DrawerList';
-import { DrawerTitle } from '../DrawerTitle';
-
-it('checks default props', () => {
-  const { props } = renderTheme();
-
-  expect(props.MuiDrawer).toMatchInlineSnapshot(`
-    Object {
-      "anchor": "right",
-    }
-  `);
-});
-
-it('checks component css', () => {
-  expect(
-    renderCSS(
-      <Drawer open={true}>
-        <DrawerTitle title="Title" />
-        <DrawerContent />
-        <DrawerList />
-        <DrawerActions />
-      </Drawer>,
-      [
-        'MuiDrawer',
-        'SD-DrawerActions',
-        'SD-DrawerContent',
-        'SD-DrawerList',
-        'SD-DrawerTitle',
-      ],
-    ),
-  ).toMatchInlineSnapshot(`
-    .MuiDrawer-docked {
-      flex: 0 0 auto;
-    }
-
-    .MuiDrawer-paper {
-      top: 0;
-      flex: 1 0 auto;
-      height: 100%;
-      display: flex;
-      outline: 0;
-      z-index: 1200;
-      position: fixed;
-      max-width: 100%;
-      min-width: 100%;
-      overflow-y: auto;
-      flex-direction: column;
-      -webkit-overflow-scrolling: touch;
-    }
-
-    @media (min-width: 600px) {
-      .MuiDrawer-paper {
-        max-width: 600px;
-        min-width: 432px;
-      }
-    }
-
-    .MuiDrawer-paperAnchorLeft {
-      left: 0;
-      right: auto;
-    }
-
-    .MuiDrawer-paperAnchorRight {
-      left: auto;
-      right: 0;
-    }
-
-    .MuiDrawer-paperAnchorTop {
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: auto;
-      height: auto;
-      max-height: 100%;
-    }
-
-    .MuiDrawer-paperAnchorBottom {
-      top: auto;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      height: auto;
-      max-height: 100%;
-    }
-
-    .MuiDrawer-paperAnchorDockedLeft {
-      border-right: 1px solid Color.Silver400;
-    }
-
-    .MuiDrawer-paperAnchorDockedTop {
-      border-bottom: 1px solid Color.Silver400;
-    }
-
-    .MuiDrawer-paperAnchorDockedRight {
-      border-left: 1px solid Color.Silver400;
-    }
-
-    .MuiDrawer-paperAnchorDockedBottom {
-      border-top: 1px solid Color.Silver400;
-    }
-
-    .SD-DrawerActions-appBar.SD-DrawerActions-appBar {
-      top: auto;
-      bottom: 0;
-      transition: border-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-      border-left: none;
-      border-right: none;
-      border-bottom: none;
-    }
-
-    .SD-DrawerActions-appBar.SD-DrawerActions-appBar:not(.SD-DrawerActions-appBarSticky) {
-      border-top-color: Color.Transparent;
-    }
-
-    .SD-DrawerActions-toolbar.MuiToolbar-gutters {
-      padding-left: 24px;
-      padding-right: 24px;
-    }
-
-    @media (min-width: 960px) {
-      .SD-DrawerActions-toolbar.MuiToolbar-gutters {
-        padding-left: 32px;
-        padding-right: 32px;
-      }
-    }
-
-    .SD-DrawerContent-root {
-      padding: 16px 24px;
-      max-width: 100%;
-    }
-
-    @media (min-width: 960px) {
-      .SD-DrawerContent-root {
-        padding: 16px 32px;
-      }
-    }
-
-    .SD-DrawerList-root {
-      max-width: 100%;
-    }
-
-    .SD-DrawerList-root .MuiListItem-gutters {
-      padding-left: 24px;
-      padding-right: 24px;
-    }
-
-    @media (min-width: 960px) {
-      .SD-DrawerList-root .MuiListItem-gutters {
-        padding-left: 32px;
-        padding-right: 32px;
-      }
-
-      .SD-DrawerList-root .MuiListItem-gutters.MuiListItem-secondaryAction {
-        padding-right: 64px;
-      }
-
-      .SD-DrawerList-root .MuiListItem-gutters .MuiListItemSecondaryAction-root {
-        right: 32px;
-      }
-
-      .SD-DrawerList-root
-        .MuiListItem-gutters
-        .MuiListItemSecondaryAction-root
-        .MuiIconButton-edgeEnd {
-        margin-right: -16px;
-      }
-    }
-
-    .SD-DrawerList-root .MuiListItem-gutters.MuiListItem-secondaryAction {
-      padding-right: 48px;
-    }
-
-    .SD-DrawerList-root .MuiListItem-gutters .MuiListItemSecondaryAction-root {
-      right: 24px;
-    }
-
-    .SD-DrawerList-root
-      .MuiListItem-gutters
-      .MuiListItemSecondaryAction-root
-      .MuiIconButton-edgeEnd {
-      margin-right: -12px;
-    }
-
-    .SD-DrawerTitle-appBar.SD-DrawerTitle-appBar {
-      border-top: none;
-      transition: border-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-      border-left: none;
-      border-right: none;
-    }
-
-    .SD-DrawerTitle-appBar.SD-DrawerTitle-appBar:not(.SD-DrawerTitle-appBarSticky) {
-      border-bottom-color: Color.Transparent;
-    }
-
-    .SD-DrawerTitle-toolbar.MuiToolbar-gutters {
-      padding-left: 24px;
-      padding-right: 24px;
-    }
-
-    @media (min-width: 960px) {
-      .SD-DrawerTitle-toolbar.MuiToolbar-gutters {
-        padding-left: 32px;
-        padding-right: 32px;
-      }
-    }
-
-    .SD-DrawerTitle-startAction {
-      margin-right: 4px;
-    }
-
-    .SD-DrawerTitle-startAction .MuiIconButton-edgeStart {
-      margin-left: -16px;
-    }
-
-    .SD-DrawerTitle-endAction {
-      margin-left: 4px;
-    }
-
-    .SD-DrawerTitle-endAction .MuiIconButton-edgeEnd {
-      margin-right: -16px;
-    }
-  `);
-});

package/src/dropdown-button/DropdownButton.stories.tsx

@@ -1,15 +0,0 @@
-import { MenuItem } from '@material-ui/core';
-import { Meta } from '@storybook/react';
-import { DropdownButton } from './DropdownButton';
-
-export default {
-  title: 'Navigation/DropdownButton',
-  component: DropdownButton,
-} as Meta;
-
-export const basic = () => (
-  <DropdownButton label="Post to SLB">
-    <MenuItem>Post to SLB & CD</MenuItem>
-    <MenuItem>Post to CD</MenuItem>
-  </DropdownButton>
-);

package/src/dropdown-button/DropdownButton.tsx

@@ -1,131 +0,0 @@
-import {
-  ButtonGroup,
-  ButtonGroupProps as MuiButtonGroupProps,
-  MenuList,
-  MenuListProps as MuiMenuListProps,
-  Popover,
-} from '@material-ui/core';
-import * as React from 'react';
-import { forwardRef, MouseEvent, ReactElement, ReactNode } from 'react';
-import styled from 'styled-components';
-import { Color, mergeRefs, useUID } from '..';
-import { Button, ButtonProps } from '../button/Button';
-
-function CaretDownIcon(): ReactElement {
-  return (
-    <svg viewBox="0 0 8 4">
-      <path
-        fill="currentColor"
-        d="M0.666687 0.666656L4.00002 3.99999L7.33335 0.666656H0.666687Z"
-      />
-    </svg>
-  );
-}
-
-const CaretButton = styled(Button)`
-  width: auto;
-  ${({ variant }) =>
-    variant === 'contained' && `border-left: 1px solid ${Color.Blue500}`};
-`;
-
-interface DropdownButtonProps extends Omit<ButtonProps, 'children'> {
-  label?: ReactNode;
-  children: ReactNode;
-  MenuListProps?: Omit<MuiMenuListProps, 'id'>;
-  ButtonGroupProps?: MuiButtonGroupProps;
-}
-
-export const DropdownButton = forwardRef<
-  HTMLButtonElement,
-  DropdownButtonProps
->(
-  (
-    {
-      MenuListProps,
-      ButtonGroupProps,
-
-      children,
-      isLoading,
-      onClick,
-      label,
-      ...buttonProps
-    },
-    ref,
-  ) => {
-    const uid = useUID();
-    const [open, setOpen] = React.useState(false);
-    const anchorRef = React.useRef<HTMLDivElement | null>(null);
-
-    function handleClick(event: MouseEvent<HTMLButtonElement>): void {
-      setOpen(false);
-      onClick?.(event);
-    }
-
-    function handleToggle(): void {
-      setOpen((prevOpen) => !prevOpen);
-    }
-
-    function handleClose(event: React.MouseEvent<Document>): void {
-      if (anchorRef.current?.contains(event.currentTarget)) {
-        return;
-      }
-      setOpen(false);
-    }
-
-    return (
-      <>
-        <ButtonGroup
-          {...ButtonGroupProps}
-          ref={mergeRefs(ButtonGroupProps?.ref, anchorRef)}
-          fullWidth={ButtonGroupProps?.fullWidth || buttonProps.fullWidth}
-        >
-          <Button
-            ref={ref}
-            onClick={handleClick}
-            disabled={isLoading}
-            isLoading={isLoading}
-            {...buttonProps}
-          >
-            {label}
-          </Button>
-
-          <CaretButton
-            onClick={handleToggle}
-            disabled={isLoading}
-            color={buttonProps.color}
-            variant={buttonProps.variant}
-            aria-haspopup="menu"
-            aria-controls={open ? uid : undefined}
-            aria-expanded={open ? 'true' : undefined}
-          >
-            <CaretDownIcon />
-          </CaretButton>
-        </ButtonGroup>
-
-        <Popover
-          open={open}
-          onClose={handleClose}
-          anchorEl={anchorRef.current}
-          anchorOrigin={{
-            vertical: 'bottom',
-            horizontal: 'left',
-          }}
-        >
-          <div style={{ minWidth: anchorRef.current?.clientWidth }}>
-            <MenuList
-              {...MenuListProps}
-              id={uid}
-              onClick={() => {
-                setOpen(false);
-              }}
-            >
-              {children}
-            </MenuList>
-          </div>
-        </Popover>
-      </>
-    );
-  },
-);
-
-export default DropdownButton;

package/src/grid/GridStack.tsx

@@ -1,45 +0,0 @@
-import { Grid, GridProps } from '@material-ui/core';
-import {
-  Children,
-  forwardRef,
-  ForwardRefExoticComponent,
-  RefAttributes,
-} from 'react';
-
-export interface GridStackProps
-  extends RefAttributes<HTMLDivElement>,
-    Pick<
-      GridProps,
-      'style' | 'className' | 'children' | 'spacing' | 'alignItems'
-    > {}
-
-/**
- * @deprecated in favor of `Stack`.
- */
-export const GridStack: ForwardRefExoticComponent<GridStackProps> = forwardRef(
-  ({ children, alignItems = 'stretch' as const, ...props }, ref) => {
-    const items = Children.toArray(children);
-
-    return (
-      <Grid
-        {...props}
-        ref={ref}
-        container={true}
-        wrap="nowrap"
-        direction="column"
-        alignItems={alignItems}
-      >
-        {items.map((item, idx) => (
-          <Grid
-            key={idx}
-            item={true}
-            zeroMinWidth={true}
-            xs={alignItems === 'stretch' ? 12 : undefined}
-          >
-            {item}
-          </Grid>
-        ))}
-      </Grid>
-    );
-  },
-);

package/src/grid/InlineGrid.tsx

@@ -1,56 +0,0 @@
-import { Grid, GridProps } from '@material-ui/core';
-import {
-  Children,
-  forwardRef,
-  ForwardRefExoticComponent,
-  RefAttributes,
-} from 'react';
-
-export interface InlineGridProps
-  extends RefAttributes<HTMLDivElement>,
-    Pick<
-      GridProps,
-      | 'style'
-      | 'className'
-      | 'children'
-      | 'wrap'
-      | 'spacing'
-      | 'justify'
-      | 'alignItems'
-    > {}
-
-/**
- * @deprecated in favor of `Inline` component.
- */
-export const InlineGrid: ForwardRefExoticComponent<InlineGridProps> =
-  forwardRef(
-    (
-      {
-        children,
-        wrap = 'wrap' as const,
-        justify = 'flex-start' as const,
-        alignItems = 'flex-start' as const,
-        ...props
-      },
-      ref,
-    ) => {
-      const items = Children.toArray(children);
-
-      return (
-        <Grid
-          {...props}
-          ref={ref}
-          wrap={wrap}
-          container={true}
-          justify={justify}
-          alignItems={alignItems}
-        >
-          {items.map((item, idx) => (
-            <Grid key={idx} item={true} zeroMinWidth={true}>
-              {item}
-            </Grid>
-          ))}
-        </Grid>
-      );
-    },
-  );

package/src/icon-button/IconButton.stories.tsx

@@ -1,53 +0,0 @@
-import { IconButton } from '@material-ui/core';
-import { Save as SaveIcon } from '@material-ui/icons';
-import { PropsLink } from '@superdispatch/ui-docs';
-import { Inline } from '..';
-
-export default {
-  title: 'Inputs/IconButton',
-  parameters: {
-    componentSubtitle: (
-      <PropsLink url="https://material-ui.com/api/icon-button/#props" />
-    ),
-  },
-};
-
-export const basic = () => (
-  <IconButton>
-    <SaveIcon />
-  </IconButton>
-);
-
-export const disabled = () => (
-  <IconButton disabled={true}>
-    <SaveIcon />
-  </IconButton>
-);
-
-export const colors = () => (
-  <Inline>
-    <IconButton>
-      <SaveIcon />
-    </IconButton>
-
-    <IconButton color="primary">
-      <SaveIcon />
-    </IconButton>
-
-    <IconButton color="inherit">
-      <SaveIcon />
-    </IconButton>
-  </Inline>
-);
-
-export const sizes = () => (
-  <Inline verticalAlign="center">
-    <IconButton size="small">
-      <SaveIcon fontSize="inherit" />
-    </IconButton>
-
-    <IconButton>
-      <SaveIcon fontSize="inherit" />
-    </IconButton>
-  </Inline>
-);

package/src/icon-button/IconButtonOverrides.ts

@@ -1,32 +0,0 @@
-import { Color } from '../theme/Color';
-import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
-
-export function overrideIconButton(theme: SuperDispatchTheme): void {
-  theme.overrides.MuiIconButton = {
-    root: {
-      color: Color.Dark100,
-
-      backgroundColor: Color.Transparent,
-
-      transition: theme.transitions.create(['color', 'background-color'], {
-        duration: theme.transitions.duration.short,
-      }),
-
-      '&:hover': { backgroundColor: Color.Transparent },
-      '&:active': { color: Color.Dark500 },
-      '&:hover ': { color: Color.Dark300 },
-      '&:focus': { backgroundColor: Color.Silver400 },
-
-      '&$disabled': { color: Color.Silver500 },
-    },
-    colorPrimary: {
-      '&:active': { color: Color.Blue500 },
-      '&:hover ': { color: Color.Blue300 },
-      '&:focus': { backgroundColor: Color.Blue50 },
-    },
-
-    edgeEnd: { marginRight: theme.spacing(-1) },
-
-    edgeStart: { marginLeft: theme.spacing(-1) },
-  };
-}

package/src/icon-button/__tests__/IconButton.spec.tsx

@@ -1,124 +0,0 @@
-import { IconButton } from '@material-ui/core';
-import { renderCSS, renderTheme } from '@superdispatch/ui-testutils';
-
-it('checks default props', () => {
-  const { props } = renderTheme();
-
-  expect(props.MuiIconButton).toMatchInlineSnapshot(`undefined`);
-});
-
-it('checks component css', () => {
-  expect(renderCSS(<IconButton />, ['MuiIconButton'])).toMatchInlineSnapshot(`
-.MuiIconButton-root {
-  flex: 0 0 auto;
-  color: Color.Dark100;
-  padding: 12px;
-  overflow: visible;
-  font-size: 1.5rem;
-  text-align: center;
-  transition: color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
-    background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  border-radius: 50%;
-  background-color: Color.Transparent;
-}
-
-.MuiIconButton-root:hover {
-  background-color: Color.Transparent;
-}
-
-.MuiIconButton-root.Mui-disabled {
-  color: Color.Silver500;
-  background-color: transparent;
-}
-
-.MuiIconButton-root:active {
-  color: Color.Dark500;
-}
-
-.MuiIconButton-root:hover {
-  color: Color.Dark300;
-}
-
-.MuiIconButton-root:focus {
-  background-color: Color.Silver400;
-}
-
-@media (hover: none) {
-  .MuiIconButton-root:hover {
-    background-color: transparent;
-  }
-}
-
-.MuiIconButton-edgeStart {
-  margin-left: -8px;
-}
-
-.MuiIconButton-sizeSmall.MuiIconButton-edgeStart {
-  margin-left: -3px;
-}
-
-.MuiIconButton-edgeEnd {
-  margin-right: -8px;
-}
-
-.MuiIconButton-sizeSmall.MuiIconButton-edgeEnd {
-  margin-right: -3px;
-}
-
-.MuiIconButton-colorInherit {
-  color: inherit;
-}
-
-.MuiIconButton-colorPrimary {
-  color: Color.Blue300;
-}
-
-.MuiIconButton-colorPrimary:hover {
-  background-color: rgba(0, 117, 255, 0.04);
-}
-
-.MuiIconButton-colorPrimary:active {
-  color: Color.Blue500;
-}
-
-.MuiIconButton-colorPrimary:hover {
-  color: Color.Blue300;
-}
-
-.MuiIconButton-colorPrimary:focus {
-  background-color: Color.Blue50;
-}
-
-@media (hover: none) {
-  .MuiIconButton-colorPrimary:hover {
-    background-color: transparent;
-  }
-}
-
-.MuiIconButton-colorSecondary {
-  color: #f50057;
-}
-
-.MuiIconButton-colorSecondary:hover {
-  background-color: rgba(245, 0, 87, 0.04);
-}
-
-@media (hover: none) {
-  .MuiIconButton-colorSecondary:hover {
-    background-color: transparent;
-  }
-}
-
-.MuiIconButton-sizeSmall {
-  padding: 3px;
-  font-size: 1.125rem;
-}
-
-.MuiIconButton-label {
-  width: 100%;
-  display: flex;
-  align-items: inherit;
-  justify-content: inherit;
-}
-`);
-});