@superdispatch/ui 0.21.6 → 0.21.13

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

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

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

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

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

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

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

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

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