@superdispatch/ui 0.21.8 → 0.21.13

package/src/index.ts

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

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

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

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

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

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

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

@@ -0,0 +1,135 @@
+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>
+);