@digigov/ui 0.28.3 → 0.29.0

package/src/core/List/List.stories.js

@@ -0,0 +1,15 @@
+import List from '@digigov/ui/core/List';
+export default {
+  title: 'Digigov UI/core/List',
+  description:
+    'Use lists to make blocks of text easier to read, and to break information into manageable chunks.',
+  link: 'https://guide.services.gov.gr/docs/styles/typography#lists',
+  component: List,
+  displayName: 'List',
+};
+export * from '@digigov/ui/core/List/__stories__/Default';
+export * from '@digigov/ui/core/List/__stories__/BulletList';
+export * from '@digigov/ui/core/List/__stories__/NumberedList';
+export * from '@digigov/ui/core/List/__stories__/WithExtraSpace';
+export * from '@digigov/ui/core/List/__stories__/NestedBulletList';
+export * from '@digigov/ui/core/List/__stories__/NestedListWithVariantStyles';

package/src/core/List/List.stories.playwright.json

@@ -0,0 +1,27 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-ui-core-list--default": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "Tab"
+              }
+            },
+            {
+              "name": "keyboard.press",
+              "args": {
+                "key": "Tab"
+              }
+            }
+          ],
+          "id": "HP7t7DFo8MEt",
+          "title": "Navigate with tab"
+        }
+      ]
+    }
+  }
+}

package/src/core/List/List.tsx

@@ -0,0 +1,3 @@
+export * from '@digigov/react-core/List';
+import List from '@digigov/react-core/List';
+export default List;

package/src/core/List/ListItem.tsx

@@ -0,0 +1,5 @@
+import ListItem from '@digigov/react-core/ListItem';
+
+export { ListItem };
+
+export default ListItem;

package/src/core/List/ListItemContent.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+
+export interface ListItemContentProps {
+  className?: string;
+}
+
+export const ListItemContent: React.FC<ListItemContentProps> = withDeprecation(
+  ({ children, ...props }) => {
+    return <div {...props}>{children}</div>;
+  },
+  {
+    name: 'ListItemContent',
+    warning:
+      'There is no need to use ListItemContent component anymore. It will be removed in a later version',
+  }
+);
+
+export default ListItemContent;

package/src/core/List/ListItemIcon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+
+export interface ListItemIconProps {}
+
+export const ListItemIcon: React.FC<ListItemIconProps> = withDeprecation(
+  ({ children, ...props }) => {
+    return <div {...props}>{children}</div>;
+  },
+  {
+    name: 'ListItemIcon',
+    warning:
+      'There is no need to use ListItemIcon component anymore. It will be removed in a later version',
+  }
+);
+
+export default ListItemIcon;

package/src/core/List/ListItemText.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import NormalText, { NormalTextProps } from '@digigov/ui/typography/NormalText';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+
+export interface ListItemTextProps extends NormalTextProps {
+  ref?: React.Ref<HTMLSpanElement>;
+}
+
+export const ListItemText: React.FC<ListItemTextProps> = withDeprecation(
+  ({ children, ...props }) => {
+    return <NormalText {...props}>{children}</NormalText>;
+  },
+  {
+    name: 'ListItemText',
+    warning:
+      'There is no need to use ListItemText component anymore. It will be removed in a later version',
+  }
+);
+
+export default ListItemText;

package/src/core/List/ListItemTitle.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import Title, { TitleProps } from '@digigov/ui/typography/Title';
+import Link, { LinkProps } from '@digigov/ui/core/Link';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+
+export interface ListItemTitleProps extends TitleProps {
+  href?: string;
+  linkProps?: Omit<LinkProps, 'href'>;
+}
+
+export const ListItemTitle: React.FC<ListItemTitleProps> = withDeprecation(
+  ({ href, linkProps, children, ...props }) => {
+    return (
+      <Title {...props}>
+        {href ? (
+          <Link href={href} {...linkProps}>
+            {children}
+          </Link>
+        ) : (
+          children
+        )}
+      </Title>
+    );
+  },
+  {
+    name: 'ListItemTitle',
+    warning:
+      'There is no need to use ListItemTitle component anymore. It will be removed in a later version',
+  }
+);
+
+export default ListItemTitle;

package/src/core/List/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,322 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the ErrorSummary with sample data 1`] = `
+<ThemeProvider
+  theme={
+    Object {
+      "breakpoints": Object {
+        "between": [Function],
+        "down": [Function],
+        "keys": Array [
+          "xs",
+          "sm",
+          "md",
+          "lg",
+          "xl",
+        ],
+        "only": [Function],
+        "up": [Function],
+        "values": Object {
+          "lg": 1280,
+          "md": 960,
+          "sm": 600,
+          "xl": 1920,
+          "xs": 0,
+        },
+        "width": [Function],
+      },
+      "direction": "ltr",
+      "footer": Object {
+        "contrastText": "",
+        "link": "",
+        "main": "",
+      },
+      "header": Object {
+        "border": Object {
+          "background": "",
+          "height": "",
+          "width": "",
+        },
+        "height": "",
+        "logo": Object {
+          "component": "",
+          "height": "",
+        },
+      },
+      "mixins": Object {
+        "gutters": [Function],
+        "toolbar": Object {
+          "@media (min-width:0px) and (orientation: landscape)": Object {
+            "minHeight": 48,
+          },
+          "@media (min-width:600px)": Object {
+            "minHeight": 64,
+          },
+          "minHeight": 56,
+        },
+      },
+      "overrides": Object {},
+      "palette": Object {
+        "action": Object {
+          "activatedOpacity": 0.12,
+          "active": "rgba(0, 0, 0, 0.54)",
+          "disabled": "rgba(0, 0, 0, 0.26)",
+          "disabledBackground": "rgba(0, 0, 0, 0.12)",
+          "disabledOpacity": 0.38,
+          "focus": "rgba(0, 0, 0, 0.12)",
+          "focusOpacity": 0.12,
+          "hover": "rgba(0, 0, 0, 0.04)",
+          "hoverOpacity": 0.04,
+          "selected": "rgba(0, 0, 0, 0.08)",
+          "selectedOpacity": 0.08,
+        },
+        "augmentColor": [Function],
+        "background": Object {
+          "default": "#fafafa",
+          "paper": "#fff",
+        },
+        "common": Object {
+          "black": "#000",
+          "white": "#fff",
+        },
+        "contrastThreshold": 3,
+        "divider": "rgba(0, 0, 0, 0.12)",
+        "error": Object {
+          "contrastText": "#fff",
+          "dark": "#d32f2f",
+          "light": "#e57373",
+          "main": "#f44336",
+        },
+        "getContrastText": [Function],
+        "grey": Object {
+          "100": "#f5f5f5",
+          "200": "#eeeeee",
+          "300": "#e0e0e0",
+          "400": "#bdbdbd",
+          "50": "#fafafa",
+          "500": "#9e9e9e",
+          "600": "#757575",
+          "700": "#616161",
+          "800": "#424242",
+          "900": "#212121",
+          "A100": "#d5d5d5",
+          "A200": "#aaaaaa",
+          "A400": "#303030",
+          "A700": "#616161",
+        },
+        "info": Object {
+          "contrastText": "#fff",
+          "dark": "#1976d2",
+          "light": "#64b5f6",
+          "main": "#2196f3",
+        },
+        "primary": Object {
+          "contrastText": "#fff",
+          "dark": "#303f9f",
+          "light": "#7986cb",
+          "main": "#3f51b5",
+        },
+        "secondary": Object {
+          "contrastText": "#fff",
+          "dark": "#c51162",
+          "light": "#ff4081",
+          "main": "#f50057",
+        },
+        "success": Object {
+          "contrastText": "rgba(0, 0, 0, 0.87)",
+          "dark": "#388e3c",
+          "light": "#81c784",
+          "main": "#4caf50",
+        },
+        "text": Object {
+          "disabled": "rgba(0, 0, 0, 0.38)",
+          "hint": "rgba(0, 0, 0, 0.38)",
+          "primary": "rgba(0, 0, 0, 0.87)",
+          "secondary": "rgba(0, 0, 0, 0.54)",
+        },
+        "tonalOffset": 0.2,
+        "type": "light",
+        "warning": Object {
+          "contrastText": "rgba(0, 0, 0, 0.87)",
+          "dark": "#f57c00",
+          "light": "#ffb74d",
+          "main": "#ff9800",
+        },
+      },
+      "props": Object {},
+      "shadows": Array [
+        "none",
+        "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
+        "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
+        "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
+        "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
+        "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
+        "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
+        "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
+        "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
+        "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
+        "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
+        "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
+        "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
+        "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
+        "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
+        "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
+        "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
+        "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
+        "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
+        "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
+        "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
+        "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
+        "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
+        "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
+        "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
+      ],
+      "shape": Object {
+        "borderRadius": 4,
+      },
+      "spacing": [Function],
+      "transitions": Object {
+        "create": [Function],
+        "duration": Object {
+          "complex": 375,
+          "enteringScreen": 225,
+          "leavingScreen": 195,
+          "short": 250,
+          "shorter": 200,
+          "shortest": 150,
+          "standard": 300,
+        },
+        "easing": Object {
+          "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
+          "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
+          "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
+          "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
+        },
+        "getAutoHeightDuration": [Function],
+      },
+      "typography": Object {
+        "body1": Object {
+          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+          "fontSize": "1rem",
+          "fontWeight": 400,
+          "letterSpacing": "0.00938em",
+          "lineHeight": 1.5,
+        },
+        "body2": Object {
+          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+          "fontSize": "0.875rem",
+          "fontWeight": 400,
+          "letterSpacing": "0.01071em",
+          "lineHeight": 1.43,
+        },
+        "button": Object {
+          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+          "fontSize": "0.875rem",
+          "fontWeight": 500,
+          "letterSpacing": "0.02857em",
+          "lineHeight": 1.75,
+          "textTransform": "uppercase",
+        },
+        "caption": Object {
+          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+          "fontSize": "0.75rem",
+          "fontWeight": 400,
+          "letterSpacing": "0.03333em",
+          "lineHeight": 1.66,
+        },
+        "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+        "fontSize": 14,
+        "fontWeightBold": 700,
+        "fontWeightLight": 300,
+        "fontWeightMedium": 500,
+        "fontWeightRegular": 400,
+        "h1": Object {
+          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+          "fontSize": "6rem",
+          "fontWeight": 300,
+          "letterSpacing": "-0.01562em",
+          "lineHeight": 1.167,
+        },
+        "h2": Object {
+          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+          "fontSize": "3.75rem",
+          "fontWeight": 300,
+          "letterSpacing": "-0.00833em",
+          "lineHeight": 1.2,
+        },
+        "h3": Object {
+          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+          "fontSize": "3rem",
+          "fontWeight": 400,
+          "letterSpacing": "0em",
+          "lineHeight": 1.167,
+        },
+        "h4": Object {
+          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+          "fontSize": "2.125rem",
+          "fontWeight": 400,
+          "letterSpacing": "0.00735em",
+          "lineHeight": 1.235,
+        },
+        "h5": Object {
+          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+          "fontSize": "1.5rem",
+          "fontWeight": 400,
+          "letterSpacing": "0em",
+          "lineHeight": 1.334,
+        },
+        "h6": Object {
+          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+          "fontSize": "1.25rem",
+          "fontWeight": 500,
+          "letterSpacing": "0.0075em",
+          "lineHeight": 1.6,
+        },
+        "htmlFontSize": 16,
+        "overline": Object {
+          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+          "fontSize": "0.75rem",
+          "fontWeight": 400,
+          "letterSpacing": "0.08333em",
+          "lineHeight": 2.66,
+          "textTransform": "uppercase",
+        },
+        "pxToRem": [Function],
+        "round": [Function],
+        "subtitle1": Object {
+          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+          "fontSize": "1rem",
+          "fontWeight": 400,
+          "letterSpacing": "0.00938em",
+          "lineHeight": 1.75,
+        },
+        "subtitle2": Object {
+          "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
+          "fontSize": "0.875rem",
+          "fontWeight": 500,
+          "letterSpacing": "0.00714em",
+          "lineHeight": 1.57,
+        },
+      },
+      "zIndex": Object {
+        "appBar": 1100,
+        "drawer": 1200,
+        "mobileStepper": 1000,
+        "modal": 1300,
+        "snackbar": 1400,
+        "speedDial": 1050,
+        "tooltip": 1500,
+      },
+      Symbol(mui.nested): false,
+    }
+  }
+>
+  <ForwardRef(List)>
+    <ul
+      className="govgr-list"
+    >
+      this is some random warning text
+    </ul>
+  </ForwardRef(List)>
+</ThemeProvider>
+`;

package/src/core/List/__stories__/BulletList.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { List } from '@digigov/ui/core/List/List';
+import { ListItem } from '@digigov/ui/core/List/ListItem';
+
+export const BulletList = () => (
+  <List listStyle="bullet">
+    <ListItem>List Item One</ListItem>
+    <ListItem>List Item Two</ListItem>
+    <ListItem>List Item Three</ListItem>
+  </List>
+);
+
+export default BulletList;

package/src/core/List/__stories__/Default.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { List } from '@digigov/ui/core/List/List';
+import { ListItem } from '@digigov/ui/core/List/ListItem';
+import { Link } from '@digigov/ui/core/Link';
+
+export const Default = () => (
+  <List>
+    <ListItem>
+      <Link>List Item One</Link>
+    </ListItem>
+    <ListItem>
+      <Link>List Item Two</Link>
+    </ListItem>
+    <ListItem>
+      <Link>List Item Three</Link>
+    </ListItem>
+  </List>
+);
+
+export default Default;

package/src/core/List/__stories__/NestedBulletList.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { List } from '@digigov/ui/core/List/List';
+import { ListItem } from '@digigov/ui/core/List/ListItem';
+
+export const NestedBulletList = () => (
+  <List listStyle="bullet">
+    <ListItem>
+      Level 1 List Item One
+      <List listStyle="bullet">
+        <ListItem>
+          Level 2 List Item One
+          <List listStyle="bullet">
+            <ListItem>Level 3 List Item One</ListItem>
+            <ListItem>Level 3 List Item Two</ListItem>
+          </List>
+        </ListItem>
+        <ListItem>
+          Level 2 List Item Two
+          <List listStyle="bullet">
+            <ListItem>Level 3 List Item One</ListItem>
+            <ListItem>Level 3 List Item Two</ListItem>
+          </List>
+        </ListItem>
+      </List>
+    </ListItem>
+    <ListItem>
+      Level 1 List Item Two
+      <List listStyle="bullet">
+        <ListItem>Level 2 List Item One</ListItem>
+        <ListItem>Level 2 List Item Two</ListItem>
+      </List>
+    </ListItem>
+  </List>
+);
+
+export default NestedBulletList;

package/src/core/List/__stories__/NestedListWithVariantStyles.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { List } from '@digigov/ui/core/List/List';
+import { ListItem } from '@digigov/ui/core/List/ListItem';
+
+export const NestedListWithVariantStyles = () => (
+  <List>
+    <ListItem>
+      Level 1 List Item One
+      <List listStyle="bullet">
+        <ListItem>
+          Level 2 List Item One
+          <List>
+            <ListItem>Level 3 List Item One</ListItem>
+            <ListItem>Level 3 List Item Two</ListItem>
+          </List>
+        </ListItem>
+        <ListItem>
+          Level 2 List Item Two
+          <List listStyle="bullet">
+            <ListItem>Level 3 List Item One</ListItem>
+          </List>
+        </ListItem>
+      </List>
+    </ListItem>
+    <ListItem>
+      Level 1 List Item Two
+      <List listStyle="number">
+        <ListItem>
+          Level 2 List Item One
+          <List listStyle="number">
+            <ListItem>Level 3 List Item One</ListItem>
+            <ListItem>Level 3 List Item Two</ListItem>
+          </List>
+        </ListItem>
+        <ListItem>Level 2 List Item Two</ListItem>
+      </List>
+    </ListItem>
+    <ListItem>Level 1 List Item Three</ListItem>
+  </List>
+);
+
+export default NestedListWithVariantStyles;

package/src/core/List/__stories__/NumberedList.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { List } from '@digigov/ui/core/List/List';
+import { ListItem } from '@digigov/ui/core/List/ListItem';
+
+export const NumberedList = () => (
+  <List listStyle="number">
+    <ListItem>List Item One</ListItem>
+    <ListItem>List Item Two</ListItem>
+    <ListItem>List Item Three</ListItem>
+  </List>
+);
+
+export default NumberedList;

package/src/core/List/__stories__/WithExtraSpace.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { List } from '@digigov/ui/core/List/List';
+import { ListItem } from '@digigov/ui/core/List/ListItem';
+
+export const WithExtraSpace = () => (
+  <List spaced>
+    <ListItem>List Item One</ListItem>
+    <ListItem>List Item Two</ListItem>
+    <ListItem>List Item Three</ListItem>
+  </List>
+);
+
+export default WithExtraSpace;

package/src/core/List/index.mdx

@@ -0,0 +1,34 @@
+---
+id: list
+title: List
+---
+
+```bash
+import List from '@digigov/ui/core/List';
+```
+
+## How to use
+
+### Default
+
+<Story packageName="@digigov/ui" component="core/List" story="Default.tsx" />
+
+### List with bullets
+
+<Story packageName="@digigov/ui" component="core/List" story="BulletList.tsx" />
+
+### List with numbers
+
+<Story
+  packageName="@digigov/ui"
+  component="core/List"
+  story="NumberedList.tsx"
+/>
+
+### List with extra space
+
+<Story packageName="@digigov/ui" component="core/List" story="WithExtraSpace.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="List" />

package/src/core/List/index.spec.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+import Component from '@digigov/ui/core/List';
+
+it('renders the ErrorSummary with sample data', () => {
+  expect(
+    <Component>this is some random warning text</Component>
+  ).toMatchSnapshot();
+});

package/src/core/List/index.tsx

@@ -0,0 +1,7 @@
+export { List as default } from '@digigov/ui/core/List/List';
+export * from '@digigov/ui/core/List/List';
+export * from '@digigov/ui/core/List/ListItem';
+export * from '@digigov/ui/core/List/ListItemContent';
+export * from '@digigov/ui/core/List/ListItemTitle';
+export * from '@digigov/ui/core/List/ListItemText';
+export * from '@digigov/ui/core/List/ListItemIcon';