@superdispatch/ui 0.21.13 → 0.21.14

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

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

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

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

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

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

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

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