@superdispatch/ui 0.21.6 → 0.21.13

package/src/columns/Columns.stories.tsx

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

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

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