@superdispatch/ui 0.21.6 → 0.21.13

package/src/description-list/DescriptionList.stories.tsx

@@ -0,0 +1,148 @@
+import { Link } from '@material-ui/core';
+import CalendarTodayIcon from '@material-ui/icons/CalendarToday';
+import ChatIcon from '@material-ui/icons/Chat';
+import NotesIcon from '@material-ui/icons/Notes';
+import PersonIcon from '@material-ui/icons/Person';
+import PhoneIcon from '@material-ui/icons/Phone';
+import RoomIcon from '@material-ui/icons/Room';
+import { Meta } from '@storybook/react';
+import { PhoneLink, PhoneText } from '@superdispatch/phones';
+import { Box } from '@superdispatch/ui-lab';
+import { DescriptionList, DescriptionListItem } from './DescriptionList';
+
+export default {
+  title: 'Data Display/DescriptionList',
+  component: DescriptionList,
+  subcomponents: { DescriptionListItem },
+  decorators: [
+    (Story) => (
+      <Box maxWidth="200px">
+        <Story />
+      </Box>
+    ),
+  ],
+} as Meta;
+
+export const small = () => (
+  <DescriptionList size="small">
+    <DescriptionListItem
+      icon={<CalendarTodayIcon />}
+      label="Posted on"
+      content="Feb 03, 2020"
+    />
+    <DescriptionListItem
+      icon={<RoomIcon />}
+      content="167 Zosh Rd, Dallas, PA 18612"
+    />
+    <DescriptionListItem icon={<NotesIcon />} label="Notes" />
+  </DescriptionList>
+);
+
+export const medium = () => (
+  <DescriptionList size="medium">
+    <DescriptionListItem
+      icon={<CalendarTodayIcon />}
+      label="Posted on"
+      content="Feb 03, 2020"
+    />
+    <DescriptionListItem
+      icon={<RoomIcon />}
+      content="167 Zosh Rd, Dallas, PA 18612"
+    />
+    <DescriptionListItem icon={<NotesIcon />} label="Notes" />
+  </DescriptionList>
+);
+
+export const large = () => (
+  <DescriptionList size="large">
+    <DescriptionListItem
+      icon={<CalendarTodayIcon />}
+      label="Posted on"
+      content="Feb 03, 2020"
+    />
+    <DescriptionListItem
+      icon={<RoomIcon />}
+      content="167 Zosh Rd, Dallas, PA 18612"
+    />
+    <DescriptionListItem icon={<NotesIcon />} label="Notes" />
+  </DescriptionList>
+);
+
+export const fallback = () => (
+  <DescriptionList>
+    <DescriptionListItem
+      icon={<CalendarTodayIcon />}
+      label="Posted on"
+      content={null}
+      fallback="N/A"
+    />
+    <DescriptionListItem
+      icon={<RoomIcon />}
+      content=""
+      fallback="No address available"
+    />
+    <DescriptionListItem
+      icon={<NotesIcon />}
+      content={false}
+      fallback="No delivery notes"
+    />
+  </DescriptionList>
+);
+
+export const inset = () => (
+  <DescriptionList size="small">
+    <DescriptionListItem
+      icon={<PersonIcon />}
+      content={<b>Antony Hoffman</b>}
+    />
+
+    <DescriptionListItem
+      inset={true}
+      content={<PhoneLink phone="303 555 0105" format="national" />}
+    />
+
+    <DescriptionListItem
+      inset={true}
+      content={
+        <Link href="mailto:dustin.russel@example.com">
+          dustin.russel@example.com
+        </Link>
+      }
+      contentTypographyProps={{
+        disableUnderline: true,
+        TooltipProps: {
+          interactive: true,
+          title: 'dustin.russel@example.com',
+        },
+      }}
+    />
+  </DescriptionList>
+);
+
+export const nested = () => (
+  <DescriptionList>
+    <DescriptionListItem
+      icon={<RoomIcon />}
+      content="NISSAN WAY, CANTON, MS 39046"
+    />
+    <DescriptionListItem
+      icon={<PhoneIcon />}
+      content=""
+      fallback="No pickup date"
+    />
+
+    <DescriptionList size="small">
+      <DescriptionListItem icon={<PersonIcon />} content="MGR MGR" />
+      <DescriptionListItem
+        inset={true}
+        content={<PhoneText phone="6018550402" format="national" />}
+      />
+    </DescriptionList>
+
+    <DescriptionListItem
+      icon={<ChatIcon />}
+      content=""
+      fallback="No pickup notes"
+    />
+  </DescriptionList>
+);

package/src/description-list/DescriptionList.tsx

@@ -0,0 +1,170 @@
+import { SvgIcon, Typography, TypographyProps } from '@material-ui/core';
+import { CSSProperties, makeStyles } from '@material-ui/styles';
+import clsx from 'clsx';
+import { forwardRef, ReactNode } from 'react';
+import { OverflowText, OverflowTextProps } from '../overflow-text/OverflowText';
+import { Color } from '../theme/Color';
+import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
+import { isEmptyReactNode } from '../utils/isEmptyReactNode';
+import { useUID } from '../utils/useUID';
+
+function sizeVariant(
+  theme: SuperDispatchTheme,
+  mobileSpacing: number,
+  desktopSpacing: number,
+): CSSProperties {
+  return {
+    '& > $list, & > $item': {
+      '&:not(:last-child)': {
+        paddingBottom: theme.spacing(mobileSpacing),
+
+        [theme.breakpoints.up('sm')]: {
+          paddingBottom: theme.spacing(desktopSpacing),
+        },
+      },
+    },
+  };
+}
+
+const useStyles = makeStyles(
+  (theme: SuperDispatchTheme) => ({
+    list: sizeVariant(theme, 2, 1),
+    listSmall: sizeVariant(theme, 1, 0.5),
+    listLarge: sizeVariant(theme, 3, 2),
+
+    item: {
+      display: 'flex',
+      alignItems: 'center',
+    },
+
+    icon: {
+      display: 'inline-flex',
+      marginRight: theme.spacing(1),
+
+      '& > .MuiSvgIcon-root': {
+        color: Color.Dark100,
+        fontSize: theme.spacing(3),
+
+        [theme.breakpoints.up('sm')]: {
+          fontSize: theme.spacing(2),
+        },
+      },
+    },
+  }),
+  { name: 'SD-DescriptionList' },
+);
+
+//
+// DescriptionList
+//
+
+export interface DescriptionListProps {
+  children?: ReactNode;
+  size?: 'small' | 'medium' | 'large';
+}
+
+export const DescriptionList = forwardRef<HTMLDivElement, DescriptionListProps>(
+  ({ size, ...props }, ref) => {
+    const styles = useStyles();
+
+    return (
+      <div
+        {...props}
+        ref={ref}
+        data-size={size}
+        className={clsx(styles.list, {
+          [styles.listSmall]: size === 'small',
+          [styles.listLarge]: size === 'large',
+        })}
+      />
+    );
+  },
+);
+
+//
+// DescriptionListItem
+//
+
+export interface DescriptionListItemProps {
+  icon?: ReactNode;
+  inset?: boolean;
+
+  label?: ReactNode;
+  labelTypographyProps?: Omit<
+    TypographyProps,
+    'noWrap' | 'variant' | 'component' | 'color'
+  >;
+
+  content?: ReactNode;
+  contentTypographyProps?: Omit<OverflowTextProps, 'component' | 'color'>;
+
+  fallback?: ReactNode;
+}
+
+export const DescriptionListItem = forwardRef<
+  HTMLDivElement,
+  DescriptionListItemProps
+>(
+  (
+    {
+      inset,
+      icon = inset ? <SvgIcon /> : null,
+
+      label,
+      labelTypographyProps,
+
+      content,
+      contentTypographyProps,
+
+      fallback,
+    },
+    ref,
+  ) => {
+    const styles = useStyles();
+    const labelID = useUID(labelTypographyProps?.id);
+
+    const shouldRenderFallback = isEmptyReactNode(content);
+
+    return (
+      <div
+        ref={ref}
+        className={styles.item}
+        aria-labelledby={label != null ? labelID : undefined}
+      >
+        {!!icon && <div className={styles.icon}>{icon}</div>}
+
+        <OverflowText
+          {...contentTypographyProps}
+          component="span"
+          color={
+            shouldRenderFallback && label == null
+              ? 'textSecondary'
+              : 'textPrimary'
+          }
+          TooltipProps={{
+            ...contentTypographyProps?.TooltipProps,
+            title:
+              contentTypographyProps?.TooltipProps?.title ??
+              content ??
+              undefined,
+          }}
+        >
+          {label != null && (
+            <Typography
+              {...labelTypographyProps}
+              id={labelID}
+              variant="body2"
+              component="span"
+              color="textSecondary"
+            >
+              {label}
+            </Typography>
+          )}
+
+          {label != null && ' '}
+          {!shouldRenderFallback ? content : fallback}
+        </OverflowText>
+      </div>
+    );
+  },
+);

package/src/dialog/Dialog.playroom.tsx

@@ -0,0 +1,24 @@
+import { Dialog as MuiDialog, DialogProps } from '@material-ui/core';
+import { forwardRef } from 'react';
+
+export const Dialog = forwardRef<HTMLDivElement, DialogProps>(
+  (
+    {
+      open = true,
+      disableAutoFocus = true,
+      disableEnforceFocus = true,
+      disableRestoreFocus = true,
+      ...props
+    },
+    ref,
+  ) => (
+    <MuiDialog
+      {...props}
+      ref={ref}
+      open={open}
+      disableAutoFocus={disableAutoFocus}
+      disableEnforceFocus={disableEnforceFocus}
+      disableRestoreFocus={disableRestoreFocus}
+    />
+  ),
+);

package/src/dialog/Dialog.stories.tsx

@@ -0,0 +1,60 @@
+import { DialogActions, DialogContent, DialogTitle } from '@material-ui/core';
+import { PropsLink, UseState } from '@superdispatch/ui-docs';
+import { Button } from '..';
+import { Dialog } from './Dialog.playroom';
+
+export default {
+  title: 'Feedback/Dialog',
+  parameters: {
+    componentSubtitle: (
+      <PropsLink url="https://material-ui.com/api/dialog/#props" />
+    ),
+  },
+};
+
+export const basic = () => (
+  <UseState initialState={false}>
+    {(open, setOpen) => (
+      <>
+        <Button
+          onClick={() => {
+            setOpen(true);
+          }}
+        >
+          Open Dialog
+        </Button>
+
+        <Dialog
+          open={open}
+          disablePortal={true}
+          onClose={() => {
+            setOpen(false);
+          }}
+        >
+          <DialogTitle>Use Google’s location service?</DialogTitle>
+          <DialogContent>
+            Let Google help apps determine location. This means sending
+            anonymous location data to Google, even when no apps are running.
+          </DialogContent>
+          <DialogActions>
+            <Button
+              onClick={() => {
+                setOpen(false);
+              }}
+            >
+              Disagree
+            </Button>
+            <Button
+              onClick={() => {
+                setOpen(false);
+              }}
+              variant="contained"
+            >
+              Agree
+            </Button>
+          </DialogActions>
+        </Dialog>
+      </>
+    )}
+  </UseState>
+);

package/src/dialog/DialogOverrides.ts

@@ -0,0 +1,39 @@
+import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
+
+export function overrideDialog(theme: SuperDispatchTheme): void {
+  theme.props.MuiDialogTitle = { disableTypography: true };
+
+  theme.overrides.MuiDialog = {
+    paper: {
+      margin: theme.spacing(3),
+    },
+
+    paperWidthXs: {
+      maxWidth: Math.max(theme.breakpoints.values.xs, 360),
+
+      '&$paperScrollBody': {
+        [theme.breakpoints.down(
+          Math.max(theme.breakpoints.values.xs, 360) + 32 * 2,
+        )]: {
+          maxWidth: 'calc(100% - 64px)',
+        },
+      },
+    },
+  };
+
+  theme.overrides.MuiDialogTitle = {
+    root: { ...theme.typography.h3 },
+  };
+
+  theme.overrides.MuiDialogContent = {
+    root: { padding: theme.spacing(0, 3) },
+  };
+
+  theme.overrides.MuiDialogActions = {
+    root: { padding: theme.spacing(3) },
+
+    spacing: {
+      '& > :not(:first-child)': { marginLeft: theme.spacing(2) },
+    },
+  };
+}

package/src/dialog/__tests__/Dialog.spec.tsx

@@ -0,0 +1,219 @@
+import {
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+} from '@material-ui/core';
+import { renderCSS, renderTheme } from '@superdispatch/ui-testutils';
+
+it('checks default props', () => {
+  const { props } = renderTheme();
+
+  expect(props.MuiDialog).toMatchInlineSnapshot(`undefined`);
+  expect(props.MuiDialogTitle).toMatchInlineSnapshot(`
+    Object {
+      "disableTypography": true,
+    }
+  `);
+  expect(props.MuiDialogContent).toMatchInlineSnapshot(`undefined`);
+  expect(props.MuiDialogActions).toMatchInlineSnapshot(`undefined`);
+});
+
+it('checks component css', () => {
+  expect(
+    renderCSS(
+      <Dialog open={true}>
+        <DialogTitle>Text</DialogTitle>
+        <DialogContent />
+        <DialogActions />
+      </Dialog>,
+      ['MuiDialog', 'MuiDialogTitle', 'MuiDialogContent', 'MuiDialogActions'],
+    ),
+  ).toMatchInlineSnapshot(`
+    @media print {
+      .MuiDialog-root {
+        position: absolute !important;
+      }
+    }
+
+    .MuiDialog-scrollPaper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .MuiDialog-scrollBody {
+      overflow-x: hidden;
+      overflow-y: auto;
+      text-align: center;
+    }
+
+    .MuiDialog-scrollBody:after {
+      width: 0;
+      height: 100%;
+      content: '';
+      display: inline-block;
+      vertical-align: middle;
+    }
+
+    .MuiDialog-container {
+      height: 100%;
+      outline: 0;
+    }
+
+    @media print {
+      .MuiDialog-container {
+        height: auto;
+      }
+    }
+
+    .MuiDialog-paper {
+      margin: 24px;
+      position: relative;
+      overflow-y: auto;
+    }
+
+    @media print {
+      .MuiDialog-paper {
+        box-shadow: none;
+        overflow-y: visible;
+      }
+    }
+
+    .MuiDialog-paperScrollPaper {
+      display: flex;
+      max-height: calc(100% - 64px);
+      flex-direction: column;
+    }
+
+    .MuiDialog-paperScrollBody {
+      display: inline-block;
+      text-align: left;
+      vertical-align: middle;
+    }
+
+    .MuiDialog-paperWidthFalse {
+      max-width: calc(100% - 64px);
+    }
+
+    .MuiDialog-paperWidthXs {
+      max-width: 360px;
+    }
+
+    @media (max-width: 507.95px) {
+      .MuiDialog-paperWidthXs.MuiDialog-paperScrollBody {
+        max-width: calc(100% - 64px);
+      }
+    }
+
+    @media (max-width: 423.95px) {
+      .MuiDialog-paperWidthXs.MuiDialog-paperScrollBody {
+        max-width: calc(100% - 64px);
+      }
+    }
+
+    .MuiDialog-paperWidthSm {
+      max-width: 600px;
+    }
+
+    @media (max-width: 663.95px) {
+      .MuiDialog-paperWidthSm.MuiDialog-paperScrollBody {
+        max-width: calc(100% - 64px);
+      }
+    }
+
+    .MuiDialog-paperWidthMd {
+      max-width: 960px;
+    }
+
+    @media (max-width: 1023.95px) {
+      .MuiDialog-paperWidthMd.MuiDialog-paperScrollBody {
+        max-width: calc(100% - 64px);
+      }
+    }
+
+    .MuiDialog-paperWidthLg {
+      max-width: 1280px;
+    }
+
+    @media (max-width: 1343.95px) {
+      .MuiDialog-paperWidthLg.MuiDialog-paperScrollBody {
+        max-width: calc(100% - 64px);
+      }
+    }
+
+    .MuiDialog-paperWidthXl {
+      max-width: 1920px;
+    }
+
+    @media (max-width: 1983.95px) {
+      .MuiDialog-paperWidthXl.MuiDialog-paperScrollBody {
+        max-width: calc(100% - 64px);
+      }
+    }
+
+    .MuiDialog-paperFullWidth {
+      width: calc(100% - 64px);
+    }
+
+    .MuiDialog-paperFullScreen {
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      max-width: 100%;
+      max-height: none;
+      border-radius: 0;
+    }
+
+    .MuiDialog-paperFullScreen.MuiDialog-paperScrollBody {
+      margin: 0;
+      max-width: 100%;
+    }
+
+    .MuiDialogActions-root {
+      flex: 0 0 auto;
+      display: flex;
+      padding: 24px;
+      align-items: center;
+      justify-content: flex-end;
+    }
+
+    .MuiDialogActions-spacing > :not(:first-child) {
+      margin-left: 16px;
+    }
+
+    .MuiDialogContent-root {
+      flex: 1 1 auto;
+      padding: 0px 24px;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+
+    .MuiDialogContent-root:first-child {
+      padding-top: 20px;
+    }
+
+    .MuiDialogContent-dividers {
+      padding: 16px 24px;
+      border-top: 1px solid Color.Silver400;
+      border-bottom: 1px solid Color.Silver400;
+    }
+
+    .MuiDialogTitle-root {
+      flex: 0 0 auto;
+      margin: 0;
+      padding: 16px 24px;
+      font-size: 20px;
+      font-family: 'Inter', sans-serif;
+      font-weight: 500;
+      line-height: 28px;
+    }
+
+    @media (min-width: 0px) and (max-width: 599.95px) {
+      .MuiDialogTitle-root {
+        font-size: 20px;
+        line-height: 26px;
+      }
+    }
+  `);
+});

package/src/drawer/Drawer.playroom.tsx

@@ -0,0 +1,22 @@
+import { Drawer as MuiDrawer, DrawerProps } from '@material-ui/core';
+import { forwardRef } from 'react';
+
+export const Drawer = forwardRef<HTMLDivElement, DrawerProps>(
+  (
+    {
+      disableAutoFocus = true,
+      disableEnforceFocus = true,
+      disableRestoreFocus = true,
+      ...props
+    },
+    ref,
+  ) => (
+    <MuiDrawer
+      {...props}
+      ref={ref}
+      disableAutoFocus={disableAutoFocus}
+      disableEnforceFocus={disableEnforceFocus}
+      disableRestoreFocus={disableRestoreFocus}
+    />
+  ),
+);