@superdispatch/ui 0.21.13 → 0.22.0

package/src/index.ts

@@ -1,47 +0,0 @@
-export * from './adaptive-toolbar/AdaptiveToolbar';
-export * from './adaptive-vertical-toolbar/AdaptiveVerticalToolbar';
-export * from './avatar-button/AvatarButton';
-export * from './button/Button';
-export * from './card-button/CardButton';
-export * from './checkbox/CheckboxField';
-export * from './checkbox/CheckboxGroudField';
-export * from './columns/Column';
-export * from './columns/Columns';
-export * from './description-list/DescriptionList';
-export * from './drawer/DrawerActions';
-export * from './drawer/DrawerContent';
-export * from './drawer/DrawerList';
-export * from './drawer/DrawerTitle';
-export * from './dropdown-button/DropdownButton';
-export * from './grid/GridStack';
-export * from './grid/InlineGrid';
-export * from './info-card/InfoCard';
-export * from './info-tooltip/InfoTooltip';
-export * from './inline/Inline';
-export * from './number-field/NumberField';
-export * from './overflow-text/OverflowText';
-export * from './props/AlignProps';
-export * from './props/CollapseProp';
-export * from './props/ResponsiveProp';
-export * from './props/SpaceProp';
-export * from './radio/RadioField';
-export * from './radio/RadioGroupField';
-export * from './responsive/CollapseBreakpoint';
-export * from './responsive/MinBreakpoint';
-export * from './responsive/ResponsiveContext';
-export * from './snackbar/Snackbar';
-export * from './snackbar/SnackbarContent';
-export * from './snackbar/SnackbarStack';
-export * from './stack/Stack';
-export * from './tag/Tag';
-export * from './theme/Color';
-export * from './theme/SuperDispatchTheme';
-export * from './theme/ThemeProvider';
-export * from './tiles/Tiles';
-export * from './utils/ExitTransitionPlaceholder';
-export * from './utils/isEmptyReactNode';
-export * from './utils/mergeRefs';
-export * from './utils/renderChildren';
-export * from './utils/ResizeObserver';
-export * from './utils/useUID';
-export * from './utils/VisibilityObserver';

package/src/info-card/InfoCard.stories.tsx

@@ -1,29 +0,0 @@
-import { Typography } from '@material-ui/core';
-import { Meta } from '@storybook/react';
-import { Button } from '../button/Button';
-import { Stack } from '../stack/Stack';
-import { InfoCard } from './InfoCard';
-
-export default { title: 'Surfaces/InfoCard', component: InfoCard } as Meta;
-
-export const basic = () => (
-  <InfoCard>
-    <Stack space="small">
-      <Typography variant="h3">Title</Typography>
-      <Typography>Content</Typography>
-
-      <Button>Button</Button>
-    </Stack>
-  </InfoCard>
-);
-
-export const large = () => (
-  <InfoCard size="large">
-    <Stack space="small">
-      <Typography variant="h3">Title</Typography>
-      <Typography>Content</Typography>
-
-      <Button>Button</Button>
-    </Stack>
-  </InfoCard>
-);

package/src/info-card/InfoCard.tsx

@@ -1,95 +0,0 @@
-import {
-  Card,
-  CardClassKey,
-  CardContent,
-  CardContentProps,
-  CardProps,
-} from '@material-ui/core';
-import { CSSProperties, makeStyles } from '@material-ui/styles';
-import clsx from 'clsx';
-import { forwardRef, ForwardRefExoticComponent, useState } from 'react';
-import { SuperDispatchTheme } from '../theme/SuperDispatchTheme';
-import { assignRef } from '../utils/mergeRefs';
-
-export type InfoCardClassKey =
-  | 'sizeLarge'
-  | 'content'
-  | 'fullWidth'
-  | CardClassKey;
-
-const useStyles = makeStyles(
-  (theme: SuperDispatchTheme): Record<InfoCardClassKey, CSSProperties> => ({
-    root: {
-      '&$fullWidth': {
-        borderRadius: 0,
-        borderLeftWidth: 0,
-        borderRightWidth: 0,
-      },
-    },
-    fullWidth: {},
-    sizeLarge: {},
-    content: {
-      padding: theme.spacing(2),
-
-      '$sizeLarge > &': {
-        [theme.breakpoints.up('sm')]: {
-          padding: theme.spacing(3),
-        },
-      },
-    },
-  }),
-  { name: 'SD-InfoCard' },
-);
-
-export interface InfoCardProps extends CardProps {
-  size?: 'medium' | 'large';
-  CardContentProps?: CardContentProps;
-}
-
-export const InfoCard: ForwardRefExoticComponent<InfoCardProps> = forwardRef(
-  (
-    {
-      size,
-      square,
-      classes,
-      children,
-      className,
-      CardContentProps: cardContentProps = {},
-      ...props
-    },
-    ref,
-  ) => {
-    const {
-      content: contentClassName,
-      sizeLarge: sizeLargeClassName,
-      fullWidth: fullWidthClassName,
-      ...styles
-    } = useStyles({ classes });
-    const [rootNode, setRootNode] = useState<HTMLElement | null>(null);
-
-    const clientRect = rootNode?.getBoundingClientRect();
-    const isFullWidth = clientRect?.width === window.innerWidth;
-
-    return (
-      <Card
-        {...props}
-        ref={(node) => {
-          assignRef(ref, node);
-          setRootNode(node as HTMLElement);
-        }}
-        classes={styles}
-        className={clsx(className, {
-          [sizeLargeClassName]: size === 'large',
-          [fullWidthClassName]: isFullWidth,
-        })}
-      >
-        <CardContent
-          {...cardContentProps}
-          className={clsx(cardContentProps.className, contentClassName)}
-        >
-          {children}
-        </CardContent>
-      </Card>
-    );
-  },
-);

package/src/info-card/__tests__/InfoCard.spec.tsx

@@ -1,22 +0,0 @@
-import { renderCSS } from '@superdispatch/ui-testutils';
-import { InfoCard } from '../..';
-
-it('checks component css', () => {
-  expect(renderCSS(<InfoCard />, ['SD-InfoCard'])).toMatchInlineSnapshot(`
-    .SD-InfoCard-root.SD-InfoCard-fullWidth {
-      border-radius: 0;
-      border-left-width: 0;
-      border-right-width: 0;
-    }
-    
-    .SD-InfoCard-content {
-      padding: 16px;
-    }
-
-    @media (min-width: 600px) {
-      .SD-InfoCard-sizeLarge > .SD-InfoCard-content {
-        padding: 24px;
-      }
-    }
-  `);
-});

package/src/info-tooltip/InfoTooltip.stories.tsx

@@ -1,77 +0,0 @@
-import { Typography } from '@material-ui/core';
-import { Meta } from '@storybook/react';
-import { Button } from '../button/Button';
-import { InfoTooltip } from './InfoTooltip';
-
-export default {
-  title: 'Surfaces/InfoTooltip',
-  component: InfoTooltip,
-} as Meta;
-
-export const basic = () => (
-  <InfoTooltip
-    interactive={true}
-    iconButtonProps={{
-      'aria-label': 'aria label info',
-    }}
-    title={
-      <>
-        <Typography variant="h3">Title</Typography>
-        <Typography>Content</Typography>
-        <Button>Button</Button>
-      </>
-    }
-  />
-);
-
-export const withLabel = () => (
-  <InfoTooltip
-    interactive={true}
-    iconButtonProps={{
-      'aria-label': 'aria label info',
-    }}
-    title={
-      <>
-        <Typography variant="h3">Title</Typography>
-        <Typography>Content</Typography>
-        <Button>Button</Button>
-      </>
-    }
-  >
-    <Typography>Label</Typography>
-  </InfoTooltip>
-);
-
-export const medium = () => (
-  <InfoTooltip
-    interactive={false}
-    fontSize="medium"
-    iconButtonProps={{
-      'aria-label': 'aria label info',
-    }}
-    title={
-      <>
-        <Typography variant="h3">Title</Typography>
-        <Typography>Non-Interactive Content</Typography>
-        <Button>Button</Button>
-      </>
-    }
-  />
-);
-
-export const large = () => (
-  <InfoTooltip
-    interactive={false}
-    fontSize="large"
-    iconButtonProps={{
-      'aria-label': 'aria label info',
-    }}
-    title={
-      <>
-        <Typography variant="h3">Title</Typography>
-        <Typography>Non-Interactive Content</Typography>
-        <Button>Button</Button>
-      </>
-    }
-  />
-);

package/src/info-tooltip/InfoTooltip.tsx

@@ -1,72 +0,0 @@
-import {
-  IconButton,
-  IconButtonProps,
-  Tooltip,
-  TooltipProps,
-  Typography,
-  TypographyProps,
-} from '@material-ui/core';
-import { Info } from '@material-ui/icons';
-import { forwardRef, ForwardRefExoticComponent, ReactNode } from 'react';
-import styled from 'styled-components';
-
-interface InfoTooltipProps extends Omit<TooltipProps, 'title' | 'children'> {
-  title: NonNullable<ReactNode>;
-  children?: ReactNode;
-  iconButtonProps?: IconButtonProps;
-  fontSize?: 'inherit' | 'default' | 'small' | 'medium' | 'large' | undefined;
-  TextProps?: TypographyProps;
-  isOpen?: boolean;
-  onClose?: () => void;
-  onClick?: () => void;
-}
-
-const Root = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-export const InfoTooltip: ForwardRefExoticComponent<InfoTooltipProps> =
-  forwardRef(
-    (
-      {
-        children,
-        iconButtonProps,
-        fontSize = 'small',
-        TextProps,
-        title,
-        isOpen,
-        onClick,
-        onClose,
-        ...props
-      },
-      ref,
-    ) => {
-      const tooltip = (
-        <Tooltip
-          open={isOpen}
-          title={title}
-          placement="top"
-          onClose={onClose}
-          disableFocusListener={true}
-          disableTouchListener={true}
-          onClick={onClick}
-          ref={ref}
-          {...props}
-        >
-          <IconButton {...iconButtonProps} size="small" onMouseOver={onClick}>
-            <Info color="action" fontSize={fontSize} />
-          </IconButton>
-        </Tooltip>
-      );
-
-      if (!children) return tooltip;
-
-      return (
-        <Root>
-          <Typography {...TextProps}>{children}</Typography>
-          {tooltip}
-        </Root>
-      );
-    },
-  );

package/src/info-tooltip/__tests__/InfoTooltip.spec.tsx

@@ -1,166 +0,0 @@
-import { renderCSS } from '@superdispatch/ui-testutils';
-import { InfoTooltip } from '../..';
-
-it('checks component css InfoTooltip', () => {
-  expect(renderCSS(<InfoTooltip title={<span />} />, ['MuiTooltip']))
-    .toMatchInlineSnapshot(`
-    .MuiTooltip-popper {
-      z-index: 1500;
-      pointer-events: none;
-    }
-
-    .MuiTooltip-popperInteractive {
-      pointer-events: auto;
-    }
-
-    .MuiTooltip-popperArrow[x-placement*='bottom'] .MuiTooltip-arrow {
-      top: 0;
-      left: 0;
-      margin-top: -0.71em;
-      margin-left: 4px;
-      margin-right: 4px;
-    }
-
-    .MuiTooltip-popperArrow[x-placement*='top'] .MuiTooltip-arrow {
-      left: 0;
-      bottom: 0;
-      margin-left: 4px;
-      margin-right: 4px;
-      margin-bottom: -0.71em;
-    }
-
-    .MuiTooltip-popperArrow[x-placement*='right'] .MuiTooltip-arrow {
-      left: 0;
-      width: 0.71em;
-      height: 1em;
-      margin-top: 4px;
-      margin-left: -0.71em;
-      margin-bottom: 4px;
-    }
-
-    .MuiTooltip-popperArrow[x-placement*='left'] .MuiTooltip-arrow {
-      right: 0;
-      width: 0.71em;
-      height: 1em;
-      margin-top: 4px;
-      margin-right: -0.71em;
-      margin-bottom: 4px;
-    }
-
-    .MuiTooltip-popperArrow[x-placement*='left'] .MuiTooltip-arrow::before {
-      transform-origin: 0 0;
-      border-top-right-radius: 2px;
-    }
-
-    .MuiTooltip-popperArrow[x-placement*='right'] .MuiTooltip-arrow::before {
-      transform-origin: 100% 100%;
-      border-bottom-left-radius: 2px;
-    }
-
-    .MuiTooltip-popperArrow[x-placement*='top'] .MuiTooltip-arrow::before {
-      transform-origin: 100% 0;
-      border-bottom-right-radius: 2px;
-    }
-
-    .MuiTooltip-popperArrow[x-placement*='bottom'] .MuiTooltip-arrow::before {
-      transform-origin: 0 100%;
-      border-top-left-radius: 2px;
-    }
-
-    .MuiTooltip-tooltip {
-      color: Color.White;
-      padding: 8px 12px;
-      font-size: 14px;
-      max-width: 300px;
-      word-wrap: break-word;
-      font-family: 'Inter', sans-serif;
-      font-weight: 400;
-      line-height: 20px;
-      border-radius: 4px;
-      background-color: Color.Dark400;
-    }
-
-    @media (min-width: 0px) and (max-width: 599.95px) {
-      .MuiTooltip-tooltip {
-        font-size: 16px;
-        line-height: 24px;
-      }
-    }
-
-    .MuiTooltip-tooltipArrow {
-      margin: 0;
-      position: relative;
-    }
-
-    .MuiTooltip-arrow {
-      color: Color.Dark400;
-      width: 1em;
-      height: 0.71em;
-      overflow: hidden;
-      position: absolute;
-      font-size: 8px;
-      box-sizing: border-box;
-    }
-
-    .MuiTooltip-arrow::before {
-      width: 100%;
-      height: 100%;
-      margin: auto;
-      content: '';
-      display: block;
-      transform: rotate(45deg);
-      background-color: currentColor;
-    }
-
-    .MuiTooltip-touch {
-      padding: 8px 16px;
-      font-size: 0.875rem;
-      font-weight: 400;
-      line-height: 1.14286em;
-    }
-
-    .MuiTooltip-tooltipPlacementLeft {
-      margin: 0 24px;
-      transform-origin: right center;
-    }
-
-    @media (min-width: 600px) {
-      .MuiTooltip-tooltipPlacementLeft {
-        margin: 0 14px;
-      }
-    }
-
-    .MuiTooltip-tooltipPlacementRight {
-      margin: 0 24px;
-      transform-origin: left center;
-    }
-
-    @media (min-width: 600px) {
-      .MuiTooltip-tooltipPlacementRight {
-        margin: 0 14px;
-      }
-    }
-
-    .MuiTooltip-tooltipPlacementTop {
-      margin: 24px 0;
-      transform-origin: center bottom;
-    }
-
-    @media (min-width: 600px) {
-      .MuiTooltip-tooltipPlacementTop {
-        margin: 14px 0;
-      }
-    }
-
-    .MuiTooltip-tooltipPlacementBottom {
-      margin: 24px 0;
-      transform-origin: center top;
-    }
-
-    @media (min-width: 600px) {
-      .MuiTooltip-tooltipPlacementBottom {
-        margin: 14px 0;
-      }
-    }
-  `);
-});

package/src/inline/Inline.stories.tsx

@@ -1,135 +0,0 @@
-import { Link } from '@material-ui/core';
-import { Meta } from '@storybook/react';
-import { Empty, Placeholder } from '@superdispatch/ui-docs';
-import { Box } from '@superdispatch/ui-lab';
-import { Inline } from './Inline';
-
-export default {
-  title: 'Layout/Inline',
-  component: Inline,
-  decorators: [
-    (Story) => (
-      <Box maxWidth="240px">
-        <Story />
-      </Box>
-    ),
-  ],
-  parameters: {
-    componentSubtitle: (
-      <>
-        Heavily inspired by the{' '}
-        <Link href="https://seek-oss.github.io/braid-design-system/components/Inline">
-          Inline
-        </Link>{' '}
-        component from the{' '}
-        <Link href="https://seek-oss.github.io/braid-design-system">
-          BRAID Design System
-        </Link>
-        .
-      </>
-    ),
-  },
-} as Meta;
-
-export const basic = () => (
-  <Inline>
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-  </Inline>
-);
-
-export const emptyElements = () => (
-  <Inline>
-    <Empty />
-    <Placeholder width={48} height={48} />
-    <Empty />
-    <Placeholder width={48} height={48} />
-    <Empty />
-    <Placeholder width={48} height={48} />
-    <Empty />
-    <Placeholder width={48} height={48} />
-    <Empty />
-    <Placeholder width={48} height={48} />
-  </Inline>
-);
-
-export const responsiveSpace = () => (
-  <Inline space={['xsmall', 'small']}>
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-  </Inline>
-);
-
-export const horizontalAlignment = () => (
-  <Inline horizontalAlign="center">
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-  </Inline>
-);
-
-export const responsiveHorizontalAlignment = () => (
-  <Inline horizontalAlign={['center', 'left']}>
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={48} />
-  </Inline>
-);
-
-export const verticalAlignment = () => (
-  <Inline verticalAlign="center">
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={64} />
-    <Placeholder width={48} height={24} />
-  </Inline>
-);
-
-export const responsiveVerticalAlignment = () => (
-  <Inline verticalAlign={['center', 'bottom']}>
-    <Placeholder width={48} height={48} />
-    <Placeholder width={48} height={64} />
-    <Placeholder width={48} height={24} />
-  </Inline>
-);
-
-export const noWrap = () => (
-  <Box maxWidth="240px" overflow="hidden">
-    <Inline noWrap={true}>
-      <Placeholder width={48} height={48} />
-      <Placeholder width={48} height={48} />
-      <Placeholder width={48} height={48} />
-      <Placeholder width={48} height={48} />
-      <Placeholder width={48} height={48} />
-    </Inline>
-  </Box>
-);