@superdispatch/ui 0.21.13 → 0.22.0

package/src/columns/Columns.stories.tsx

@@ -1,426 +0,0 @@
-import { IconButton, Link } from '@material-ui/core';
-import EditIcon from '@material-ui/icons/Edit';
-import RoomIcon from '@material-ui/icons/Room';
-import { Meta } from '@storybook/react';
-import { Placeholder } from '@superdispatch/ui-docs';
-import { Box } from '@superdispatch/ui-lab';
-import { OverflowText } from '../overflow-text/OverflowText';
-import { Stack } from '../stack/Stack';
-import { Column } from './Column';
-import { Columns } from './Columns';
-
-export default {
-  title: 'Layout/Columns',
-  component: Columns,
-  subcomponents: { Column },
-  decorators: [
-    (Story) => (
-      <Box
-        maxWidth="320px"
-        padding="xxsmall"
-        borderRadius="small"
-        backgroundColor="Silver100"
-      >
-        <Story />
-      </Box>
-    ),
-  ],
-  parameters: {
-    componentSubtitle: (
-      <>
-        Heavily inspired by the{' '}
-        <Link href="https://seek-oss.github.io/braid-design-system/components/Column">
-          Column
-        </Link>{' '}
-        and{' '}
-        <Link href="https://seek-oss.github.io/braid-design-system/components/Columns">
-          Columns
-        </Link>{' '}
-        components from the{' '}
-        <Link href="https://seek-oss.github.io/braid-design-system">
-          BRAID Design System
-        </Link>
-        .
-      </>
-    ),
-  },
-} as Meta;
-
-export const noSpace = () => (
-  <Columns>
-    <Column>
-      <Placeholder height={48} text="First" />
-    </Column>
-
-    <Column>
-      <Placeholder height={48} text="Second" />
-    </Column>
-  </Columns>
-);
-
-export const customSpace = () => (
-  <Columns space="xsmall">
-    <Column>
-      <Placeholder height={48} text="First" />
-    </Column>
-
-    <Column>
-      <Placeholder height={48} text="Second" />
-    </Column>
-  </Columns>
-);
-
-export const responsiveSpace = () => (
-  <Columns space={['small', 'xsmall']}>
-    <Column>
-      <Placeholder height={48} text="First" />
-    </Column>
-
-    <Column>
-      <Placeholder height={48} text="Second" />
-    </Column>
-  </Columns>
-);
-
-export const alignment = () => (
-  <Columns space="xsmall" align="center">
-    <Column>
-      <Placeholder height={48} text="First" />
-    </Column>
-
-    <Column>
-      <Placeholder height={64} text="Second" />
-    </Column>
-  </Columns>
-);
-
-export const responsiveAlignment = () => (
-  <Columns space="xsmall" align={['top', 'center']}>
-    <Column>
-      <Placeholder height={48} text="First" />
-    </Column>
-
-    <Column>
-      <Placeholder height={64} text="Second" />
-    </Column>
-  </Columns>
-);
-
-export const reverse = () => (
-  <Columns space="xsmall" reverse={true}>
-    <Column>
-      <Placeholder height={48} text="First" />
-    </Column>
-
-    <Column>
-      <Placeholder height={48} text="Second" />
-    </Column>
-
-    <Column>
-      <Placeholder height={48} text="Third" />
-    </Column>
-  </Columns>
-);
-
-export const responsiveReverse = () => (
-  <Columns space="xsmall" reverse={[true, false]}>
-    <Column>
-      <Placeholder height={48} text="First" />
-    </Column>
-
-    <Column>
-      <Placeholder height={48} text="Second" />
-    </Column>
-
-    <Column>
-      <Placeholder height={48} text="Third" />
-    </Column>
-  </Columns>
-);
-
-export const collapseBelowTablet = () => (
-  <Columns space="xsmall" collapseBelow="tablet">
-    <Column width="1/2">
-      <Placeholder height={48} text="First" />
-    </Column>
-
-    <Column width="1/3">
-      <Placeholder height={48} text="Second" />
-    </Column>
-
-    <Column>
-      <Placeholder height={48} text="Third" />
-    </Column>
-  </Columns>
-);
-
-export const collapseBelowDesktop = () => (
-  <Columns space="xsmall" collapseBelow="desktop">
-    <Column width="1/2">
-      <Placeholder height={48} text="First" />
-    </Column>
-
-    <Column width="1/3">
-      <Placeholder height={48} text="Second" />
-    </Column>
-
-    <Column>
-      <Placeholder height={48} text="Third" />
-    </Column>
-  </Columns>
-);
-
-export const reverseAndCollapseBelowTablet = () => (
-  <Columns space="xsmall" collapseBelow="tablet" reverse={[true, false]}>
-    <Column>
-      <Placeholder height={48} text="First" />
-    </Column>
-
-    <Column>
-      <Placeholder height={48} text="Second" />
-    </Column>
-
-    <Column>
-      <Placeholder height={48} text="Third" />
-    </Column>
-  </Columns>
-);
-
-export const availableWidths = () => (
-  <Stack space="xsmall">
-    <Columns space="xsmall">
-      <Column width="adaptive">
-        <Placeholder height={48} text="Adaptive" />
-      </Column>
-
-      <Column>
-        <Placeholder height={48} text="Fluid" />
-      </Column>
-    </Columns>
-
-    <Columns space="xsmall">
-      <Column width="content">
-        <Placeholder height={48} text="Content" />
-      </Column>
-
-      <Column>
-        <Placeholder height={48} text="Fluid" />
-      </Column>
-    </Columns>
-
-    <Columns space="xsmall">
-      <Column width="adaptive">
-        <Placeholder height={48} text="Adaptive" />
-      </Column>
-
-      <Column width="content">
-        <Placeholder height={48} text="Content" />
-      </Column>
-
-      <Column>
-        <Placeholder height={48} text="Fluid" />
-      </Column>
-    </Columns>
-
-    <Columns space="xsmall">
-      <Column width="adaptive">
-        <Placeholder height={48} text="Adaptive" />
-      </Column>
-
-      <Column width="adaptive">
-        <Placeholder height={48} text="Adaptive" />
-      </Column>
-
-      <Column width="adaptive">
-        <Placeholder height={48} text="Adaptive" />
-      </Column>
-
-      <Column width="adaptive">
-        <Placeholder height={48} text="Adaptive" />
-      </Column>
-    </Columns>
-
-    <Columns space="xsmall">
-      <Column width="adaptive">
-        <Placeholder height={48} text="Adaptive" />
-      </Column>
-
-      <Column width="adaptive">
-        <Placeholder height={48} text="Adaptive" />
-      </Column>
-
-      <Column width="adaptive">
-        <Placeholder height={48} text="Adaptive" />
-      </Column>
-
-      <Column width="adaptive">
-        <Placeholder height={48} text="Adaptive" />
-      </Column>
-
-      <Column width="adaptive">
-        <Placeholder height={48} text="Adaptive" />
-      </Column>
-    </Columns>
-
-    <Columns space="xsmall">
-      <Column width="content">
-        <Placeholder height={48} text="Content" />
-      </Column>
-
-      <Column width="content">
-        <Placeholder height={48} text="Content" />
-      </Column>
-
-      <Column width="content">
-        <Placeholder height={48} text="Content" />
-      </Column>
-
-      <Column width="content">
-        <Placeholder height={48} text="Content" />
-      </Column>
-    </Columns>
-
-    <Columns space="xsmall">
-      <Column width="1/2">
-        <Placeholder height={48} text="1/2" />
-      </Column>
-
-      <Column>
-        <Placeholder height={48} text="Fluid" />
-      </Column>
-    </Columns>
-
-    <Columns space="xsmall">
-      <Column width="1/3">
-        <Placeholder height={48} text="1/3" />
-      </Column>
-
-      <Column>
-        <Placeholder height={48} text="Fluid" />
-      </Column>
-    </Columns>
-
-    <Columns space="xsmall">
-      <Column width="2/3">
-        <Placeholder height={48} text="2/3" />
-      </Column>
-
-      <Column>
-        <Placeholder height={48} text="Fluid" />
-      </Column>
-    </Columns>
-
-    <Columns space="xsmall">
-      <Column width="1/4">
-        <Placeholder height={48} text="1/4" />
-      </Column>
-
-      <Column>
-        <Placeholder height={48} text="Fluid" />
-      </Column>
-    </Columns>
-
-    <Columns space="xsmall">
-      <Column width="3/4">
-        <Placeholder height={48} text="3/4" />
-      </Column>
-
-      <Column>
-        <Placeholder height={48} text="Fluid" />
-      </Column>
-    </Columns>
-
-    <Columns space="xsmall">
-      <Column width="1/5">
-        <Placeholder height={48} text="1/5" />
-      </Column>
-
-      <Column>
-        <Placeholder height={48} text="Fluid" />
-      </Column>
-    </Columns>
-
-    <Columns space="xsmall">
-      <Column width="2/5">
-        <Placeholder height={48} text="2/5" />
-      </Column>
-
-      <Column>
-        <Placeholder height={48} text="Fluid" />
-      </Column>
-    </Columns>
-
-    <Columns space="xsmall">
-      <Column width="3/5">
-        <Placeholder height={48} text="3/5" />
-      </Column>
-
-      <Column>
-        <Placeholder height={48} text="Fluid" />
-      </Column>
-    </Columns>
-
-    <Columns space="xsmall">
-      <Column width="4/5">
-        <Placeholder height={48} text="4/5" />
-      </Column>
-
-      <Column>
-        <Placeholder height={48} text="Fluid" />
-      </Column>
-    </Columns>
-  </Stack>
-);
-
-export const responsiveWidths = () => (
-  <Columns space="xsmall">
-    <Column width={['1/2', '3/5']}>
-      <Placeholder
-        height={112}
-        code={JSON.stringify(['1/2', '3/5'], null, 2)}
-      />
-    </Column>
-
-    <Column>
-      <Placeholder height={112} text="Fluid" />
-    </Column>
-  </Columns>
-);
-
-export const overflowText = () => (
-  <Stack>
-    <Columns space="xsmall" align="center">
-      <Column width="content">
-        <RoomIcon color="action" />
-      </Column>
-
-      <Column width="adaptive">
-        <OverflowText>1617 Main St Fl 3</OverflowText>
-      </Column>
-
-      <Column width="content">
-        <IconButton size="small">
-          <EditIcon />
-        </IconButton>
-      </Column>
-    </Columns>
-
-    <Columns space="xsmall" align="center">
-      <Column width="content">
-        <RoomIcon color="action" />
-      </Column>
-
-      <Column width="adaptive">
-        <OverflowText>
-          1617 Main St Fl 3 Kansas City, MO 64108-1326
-        </OverflowText>
-      </Column>
-
-      <Column width="content">
-        <IconButton size="small">
-          <EditIcon />
-        </IconButton>
-      </Column>
-    </Columns>
-  </Stack>
-);

package/src/columns/Columns.tsx

@@ -1,76 +0,0 @@
-import { ForwardRefExoticComponent, ReactNode, Ref } from 'react';
-import styled, { css, SimpleInterpolation } from 'styled-components';
-import { parseAlignProp, VerticalAlign } from '../props/AlignProps';
-import { CollapseProp, parseCollapsedBelow } from '../props/CollapseProp';
-import { parseResponsiveProp, ResponsiveProp } from '../props/ResponsiveProp';
-import { parseSpaceProp, SpaceProp } from '../props/SpaceProp';
-
-function columnsRootMixin(
-  align: VerticalAlign,
-  spaceProp: SpaceProp,
-  isReversed: boolean,
-  isCollapsed: boolean,
-): readonly SimpleInterpolation[] {
-  const space = parseSpaceProp(spaceProp);
-
-  return css`
-    --column-space-left: ${isCollapsed ? 0 : space}px;
-    --column-space-top: ${isCollapsed && isReversed ? space : 0}px;
-    --column-space-bottom: ${isCollapsed && !isReversed ? space : 0}px;
-
-    align-items: ${parseAlignProp(align)};
-    margin-left: ${isCollapsed ? 0 : `-${space}`}px;
-    width: ${isCollapsed ? '100%' : `calc(100% + ${space}px)`};
-    flex-direction: ${isCollapsed
-      ? !isReversed
-        ? 'column'
-        : 'column-reverse'
-      : !isReversed
-      ? 'row'
-      : 'row-reverse'};
-  `;
-}
-
-export interface ColumnsProps {
-  id?: string;
-  children?: ReactNode;
-  'aria-label'?: string;
-  'aria-labelledby'?: string;
-  ref?: Ref<HTMLDivElement>;
-
-  reverse?: ResponsiveProp<boolean>;
-  space?: ResponsiveProp<SpaceProp>;
-  align?: ResponsiveProp<VerticalAlign>;
-  collapseBelow?: CollapseProp;
-}
-
-export const Columns: ForwardRefExoticComponent<ColumnsProps> =
-  styled.div<ColumnsProps>(
-    ({
-      theme,
-      collapseBelow,
-      align: alignProp = 'top',
-      space: spaceProp = 'none',
-      reverse: reverseProp = false,
-    }) => {
-      const align = parseResponsiveProp(alignProp);
-      const space = parseResponsiveProp(spaceProp);
-      const reverse = parseResponsiveProp(reverseProp);
-      const collapsed = parseCollapsedBelow(collapseBelow);
-
-      return css`
-        width: 100%;
-        display: flex;
-
-        ${columnsRootMixin(align[0], space[0], reverse[0], collapsed[0])};
-
-        ${theme.breakpoints.up('sm')} {
-          ${columnsRootMixin(align[1], space[1], reverse[1], collapsed[1])};
-        }
-
-        ${theme.breakpoints.up('md')} {
-          ${columnsRootMixin(align[2], space[2], reverse[2], collapsed[2])};
-        }
-      `;
-    },
-  );

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

@@ -1,137 +0,0 @@
-import { renderComponent, renderCSS } from '@superdispatch/ui-testutils';
-import { screen } from '@testing-library/react';
-import { DescriptionList, DescriptionListItem } from './DescriptionList';
-
-test('label id', () => {
-  renderComponent(
-    <DescriptionListItem
-      label="Label"
-      labelTypographyProps={{ id: 'label-id' }}
-      content="Text"
-    />,
-  );
-
-  expect(screen.getByLabelText('Label')).toMatchInlineSnapshot(`
-    <div
-      aria-labelledby="label-id"
-      class="SD-DescriptionList-item"
-    >
-      <span
-        class="MuiTypography-root SD-OverflowText-root MuiTypography-body2 MuiTypography-colorTextPrimary MuiTypography-noWrap"
-        title="Text"
-      >
-        <span
-          class="MuiTypography-root MuiTypography-body2 MuiTypography-colorTextSecondary"
-          id="label-id"
-        >
-          Label
-        </span>
-         
-        Text
-        <span
-          class="SD-OverflowText-sentinel"
-        />
-      </span>
-    </div>
-  `);
-});
-
-test('dynamic label id', () => {
-  renderComponent(<DescriptionListItem label="Label" content="Text" />);
-
-  expect(screen.getByLabelText('Label')).toMatchInlineSnapshot(`
-    <div
-      aria-labelledby="uid_2"
-      class="SD-DescriptionList-item"
-    >
-      <span
-        class="MuiTypography-root SD-OverflowText-root MuiTypography-body2 MuiTypography-colorTextPrimary MuiTypography-noWrap"
-        title="Text"
-      >
-        <span
-          class="MuiTypography-root MuiTypography-body2 MuiTypography-colorTextSecondary"
-          id="uid_2"
-        >
-          Label
-        </span>
-         
-        Text
-        <span
-          class="SD-OverflowText-sentinel"
-        />
-      </span>
-    </div>
-  `);
-});
-
-test('css', () => {
-  expect(
-    renderCSS(
-      <DescriptionList>
-        <DescriptionListItem />
-        <DescriptionListItem icon={<div />} />
-        <DescriptionListItem label={<div />} />
-        <DescriptionListItem content={<div />} />
-        <DescriptionListItem label={<div />} content={<div />} />
-      </DescriptionList>,
-      ['SD-DescriptionList'],
-    ),
-  ).toMatchInlineSnapshot(`
-    .SD-DescriptionList-list > .SD-DescriptionList-list:not(:last-child),
-    .SD-DescriptionList-list > .SD-DescriptionList-item:not(:last-child) {
-      padding-bottom: 16px;
-    }
-
-    @media (min-width: 600px) {
-      .SD-DescriptionList-list > .SD-DescriptionList-list:not(:last-child),
-      .SD-DescriptionList-list > .SD-DescriptionList-item:not(:last-child) {
-        padding-bottom: 8px;
-      }
-    }
-
-    .SD-DescriptionList-listSmall > .SD-DescriptionList-list:not(:last-child),
-    .SD-DescriptionList-listSmall > .SD-DescriptionList-item:not(:last-child) {
-      padding-bottom: 8px;
-    }
-
-    @media (min-width: 600px) {
-      .SD-DescriptionList-listSmall > .SD-DescriptionList-list:not(:last-child),
-      .SD-DescriptionList-listSmall > .SD-DescriptionList-item:not(:last-child) {
-        padding-bottom: 4px;
-      }
-    }
-
-    .SD-DescriptionList-listLarge > .SD-DescriptionList-list:not(:last-child),
-    .SD-DescriptionList-listLarge > .SD-DescriptionList-item:not(:last-child) {
-      padding-bottom: 24px;
-    }
-
-    @media (min-width: 600px) {
-      .SD-DescriptionList-listLarge > .SD-DescriptionList-list:not(:last-child),
-      .SD-DescriptionList-listLarge > .SD-DescriptionList-item:not(:last-child) {
-        padding-bottom: 16px;
-      }
-    }
-
-    .SD-DescriptionList-item {
-      display: flex;
-      align-items: center;
-    }
-
-    .SD-DescriptionList-icon {
-      display: inline-flex;
-      margin-right: 8px;
-    }
-
-    .SD-DescriptionList-icon > .MuiSvgIcon-root {
-      color: Color.Dark100;
-      font-size: 24px;
-    }
-
-    @media (min-width: 600px) {
-      .SD-DescriptionList-icon > .MuiSvgIcon-root {
-        font-size: 16px;
-      }
-    }
-  `);
-});