@digigov/ui 1.2.0-a7ffb5dc → 2.0.0-0edebf87

package/src/content/StepNav/interaction.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { Default } from '@digigov/ui/content/StepNav/__stories__/Default';
+
+test('renders the Default Click 1st and all', async ({ mount, page }) => {
+  await mount(
+    <Default />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.locator("#root>div>ol>li:nth-child(1)>details>summary>h2>div>span:nth-child(1)").hover();
+ await page.locator("#root>div>ol>li:nth-child(1)>details>summary>h2>div>span:nth-child(1)").click();
+ await page.locator("#root>div>div>button").click();
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/content/SummaryList/index.mdx

@@ -7,10 +7,6 @@ title: SummaryList
 
 Use the summary list to summarise information, for example, a user’s responses at the end of a form.
 
-```bash
-import SummaryList from '@digigov/ui/content/SummaryList';
-```
-
 ## How to use
 
 <Story
@@ -43,4 +39,13 @@ If you do not include actions in your summary list and it would be better for yo
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="SummaryList" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={
+  ["SummaryList",
+  "SummaryListItem",
+  "SummaryListItemAction",
+  "SummaryListItemKey",
+  "SummaryListItemValue"
+  ]
+} />

package/src/content/SummaryList/index.test.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Default } from '@digigov/ui/content/SummaryList/__stories__/Default';
+import { RowVariations } from '@digigov/ui/content/SummaryList/__stories__/RowVariations';
+import { WithActions } from '@digigov/ui/content/SummaryList/__stories__/WithActions';
+import { WithKeyAndAction } from '@digigov/ui/content/SummaryList/__stories__/WithKeyAndAction';
+import { WithoutActions } from '@digigov/ui/content/SummaryList/__stories__/WithoutActions';
+import { WithoutBorders } from '@digigov/ui/content/SummaryList/__stories__/WithoutBorders';
+
+test('renders the All SummaryList variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="RowVariations">
+      <RowVariations />
+    </TestVariant>
+    <TestVariant title="WithActions">
+      <WithActions />
+    </TestVariant>
+    <TestVariant title="WithKeyAndAction">
+      <WithKeyAndAction />
+    </TestVariant>
+    <TestVariant title="WithoutActions">
+      <WithoutActions />
+    </TestVariant>
+    <TestVariant title="WithoutBorders">
+      <WithoutBorders />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/content/SummaryList/interaction.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { WithActions } from '@digigov/ui/content/SummaryList/__stories__/WithActions';
+
+test('renders the WithActions Navigate with keyboard', async ({ mount, page }) => {
+  await mount(
+    <WithActions />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.keyboard.press("Tab");
+ await page.keyboard.press("Tab");
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/content/Table/__stories__/WithLoader.tsx

@@ -1,3 +1,4 @@
+// @delay-test-snapshot
 import React, { useState } from 'react';
 import { CircularProgress } from '@digigov/ui/app/Loader';
 import { LoaderContainer } from '@digigov/ui/app/Loader';

package/src/content/Table/index.mdx

@@ -5,19 +5,6 @@ title: Table
 
 # Table
 
-```bash
-import {
-  TableContainer,
-  Table,
-  TableCaption,
-  TableHead,
-  TableRow,
-  TableBody,
-  TableHeadCell,
-  TableDataCell,
-} from '@digigov/ui/content/Table';
-```
-
 ## How to use
 
 <Story
@@ -109,4 +96,16 @@ implementation in the ARIA Authoring Practices Guide (APG) at [Table](https://ww
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Table" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "TableContainer",
+  "Table",
+  "TableCaption",
+  "TableHead",
+  "TableRow",
+  "TableBody",
+  "TableHeadCell",
+  "TableDataCell"
+  ]
+} />

package/src/content/Table/index.test.tsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { DarkVariant } from '@digigov/ui/content/Table/__stories__/DarkVariant';
+import { DarkVariantWithVerticalHeaders } from '@digigov/ui/content/Table/__stories__/DarkVariantWithVerticalHeaders';
+import { Default } from '@digigov/ui/content/Table/__stories__/Default';
+import { DefinedWidth } from '@digigov/ui/content/Table/__stories__/DefinedWidth';
+import { Densed } from '@digigov/ui/content/Table/__stories__/Densed';
+import { Full } from '@digigov/ui/content/Table/__stories__/Full';
+import { MultipleProps } from '@digigov/ui/content/Table/__stories__/MultipleProps';
+import { NoData } from '@digigov/ui/content/Table/__stories__/NoData';
+import { NumericDataType } from '@digigov/ui/content/Table/__stories__/NumericDataType';
+import { RowColors } from '@digigov/ui/content/Table/__stories__/RowColors';
+import { Stacked } from '@digigov/ui/content/Table/__stories__/Stacked';
+import { TableCaptions } from '@digigov/ui/content/Table/__stories__/TableCaptions';
+import { VerticalBorders } from '@digigov/ui/content/Table/__stories__/VerticalBorders';
+import { VerticalHeaders } from '@digigov/ui/content/Table/__stories__/VerticalHeaders';
+import { WithFloatingScroll } from '@digigov/ui/content/Table/__stories__/WithFloatingScroll';
+import { WithLoader } from '@digigov/ui/content/Table/__stories__/WithLoader';
+import { WithSortFilters } from '@digigov/ui/content/Table/__stories__/WithSortFilters';
+import { ZebraProp } from '@digigov/ui/content/Table/__stories__/ZebraProp';
+
+const SCREENSHOT_DELAY = 2_000;
+const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
+
+test('renders the All Table variants', async ({ mount, page }) => {
+  await delay(SCREENSHOT_DELAY);
+  await mount(
+
+    <div>
+      <TestVariant title="DarkVariant">
+        <DarkVariant />
+      </TestVariant>
+      <TestVariant title="DarkVariantWithVerticalHeaders">
+        <DarkVariantWithVerticalHeaders />
+      </TestVariant>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="DefinedWidth">
+        <DefinedWidth />
+      </TestVariant>
+      <TestVariant title="Densed">
+        <Densed />
+      </TestVariant>
+      <TestVariant title="Full">
+        <Full />
+      </TestVariant>
+      <TestVariant title="MultipleProps">
+        <MultipleProps />
+      </TestVariant>
+      <TestVariant title="NoData">
+        <NoData />
+      </TestVariant>
+      <TestVariant title="NumericDataType">
+        <NumericDataType />
+      </TestVariant>
+      <TestVariant title="RowColors">
+        <RowColors />
+      </TestVariant>
+      <TestVariant title="Stacked">
+        <Stacked />
+      </TestVariant>
+      <TestVariant title="TableCaptions">
+        <TableCaptions />
+      </TestVariant>
+      <TestVariant title="VerticalBorders">
+        <VerticalBorders />
+      </TestVariant>
+      <TestVariant title="VerticalHeaders">
+        <VerticalHeaders />
+      </TestVariant>
+      <TestVariant title="WithFloatingScroll">
+        <WithFloatingScroll />
+      </TestVariant>
+      <TestVariant title="WithLoader">
+        <WithLoader />
+      </TestVariant>
+      <TestVariant title="WithSortFilters">
+        <WithSortFilters />
+      </TestVariant>
+      <TestVariant title="ZebraProp">
+        <ZebraProp />
+      </TestVariant>
+    </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+

package/src/content/Table/index.tsx

@@ -48,12 +48,12 @@ export const TableSortLabel = React.forwardRef<
           <CaretIcon
             direction={'up'}
             size="sm"
-            variant={direction === 1 ? 'dark' : 'gray'}
+            color={direction === 1 ? 'dark' : 'gray'}
           />
           <CaretIcon
             direction={'down'}
             size="sm"
-            variant={direction === -1 ? 'dark' : 'gray'}
+            color={direction === -1 ? 'dark' : 'gray'}
           />
         </TableSortIconContainer>
       </DropdownButton>

package/src/content/Table/interaction.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { WithLoader } from '@digigov/ui/content/Table/__stories__/WithLoader';
+
+test('renders the WithLoader Toggle Loading', async ({ mount, page }) => {
+  await mount(
+    <WithLoader />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.locator("#root>button").click();
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/content/TaskList/index.mdx

@@ -7,10 +7,6 @@ title: TaskList
 
 TaskList is a component that displays number of steps required to complete a process inside your application.
 
-```bash
-import TaskList from '@digigov/ui/content/TaskList';
-```
-
 ## How to use
 
 ### Default
@@ -23,4 +19,12 @@ import TaskList from '@digigov/ui/content/TaskList';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="TaskList" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "TaskList",
+  "TaskListItem",
+  "TaskListItemHeading",
+  "TaskListItemContent",
+  "TaskListItemTag"
+  ]} /> 

package/src/content/TaskList/index.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Default } from '@digigov/ui/content/TaskList/__stories__/Default';
+import { Dense } from '@digigov/ui/content/TaskList/__stories__/Dense';
+
+test('renders the All TaskList variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="Dense">
+      <Dense />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/content/Timeline/index.mdx

@@ -9,10 +9,6 @@ A timeline is a useful way to display a whole range of information and/or data p
 Keeping things organized in logical sequence timeline helps to keep track of what’s happening.
 User can better understand what has happened and also understand what the next steps should be.
 
-```bash
-import Timeline from '@digigov/ui/content/Timeline';
-```
-
 ## How to use
 
 ### Default
@@ -25,4 +21,13 @@ import Timeline from '@digigov/ui/content/Timeline';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Timeline" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "Timeline",
+  "TimelineItem",
+  "TimelineHeading",
+  "TimelineContent",
+  "TimelineActions",
+  ]} /> 
+

package/src/content/Timeline/index.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Default } from '@digigov/ui/content/Timeline/__stories__/Default';
+import { Dense } from '@digigov/ui/content/Timeline/__stories__/Dense';
+
+test('renders the All Timeline variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="Dense">
+      <Dense />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/feedback/CopyToClipboard/index.mdx

@@ -3,10 +3,6 @@ id: copy-to-clipboard
 title: CopyToClipboard
 ---
 
-```bash
-import CopyToClipboard from '@digigov/ui/feedback/CopyToClipboard';
-```
-
 ## How to use
 
 ### Default
@@ -27,4 +23,6 @@ import CopyToClipboard from '@digigov/ui/feedback/CopyToClipboard';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="CopyToClipboard" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["CopyToClipboardContainer"]} /> 

package/src/feedback/CopyToClipboard/index.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Banner } from '@digigov/ui/feedback/CopyToClipboard/__stories__/Banner';
+import { Default } from '@digigov/ui/feedback/CopyToClipboard/__stories__/Default';
+import { Dense } from '@digigov/ui/feedback/CopyToClipboard/__stories__/Dense';
+
+test('renders the All CopyToClipboard variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Banner">
+      <Banner />
+    </TestVariant>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="Dense">
+      <Dense />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/feedback/CopyToClipboard/interaction.test.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { Banner } from '@digigov/ui/feedback/CopyToClipboard/__stories__/Banner';
+import { Default } from '@digigov/ui/feedback/CopyToClipboard/__stories__/Default';
+import { Dense } from '@digigov/ui/feedback/CopyToClipboard/__stories__/Dense';
+
+test('renders the Banner Click button', async ({ mount, page }) => {
+  await mount(
+    <Banner />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.locator("#root>div>div>button").click();
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  
+
+
+test('renders the Default Click button', async ({ mount, page }) => {
+  await mount(
+    <Default />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.locator("#root>div>div>button").click();
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  
+
+
+test('renders the Dense Click button', async ({ mount, page }) => {
+  await mount(
+    <Dense />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.locator("#root>div>div>button").click();
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/feedback/ErrorSummary/index.mdx

@@ -9,10 +9,6 @@ Use this component at the top of a page to summarise any errors a user has made.
 
 When a user makes an error, you must show both an error summary and an error message next to each answer that contains an error.
 
-```bash
-import ErrorSummary from '@digigov/ui/feedback/ErrorSummary';
-```
-
 ## How to use
 
 <Story
@@ -53,4 +49,6 @@ For questions that require a user to select one or more options from a list usin
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="ErrorSummary" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["ErrorSummary"]} /> 

package/src/feedback/ErrorSummary/index.test.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Default } from '@digigov/ui/feedback/ErrorSummary/__stories__/Default';
+import { Dense } from '@digigov/ui/feedback/ErrorSummary/__stories__/Dense';
+import { LinkedToCheckbox } from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToCheckbox';
+import { LinkedToField } from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToField';
+import { LinkedToInput } from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToInput';
+import { WithBackLinkAndButton } from '@digigov/ui/feedback/ErrorSummary/__stories__/WithBackLinkAndButton';
+
+test('renders the All ErrorSummary variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="Dense">
+      <Dense />
+    </TestVariant>
+    <TestVariant title="LinkedToCheckbox">
+      <LinkedToCheckbox />
+    </TestVariant>
+    <TestVariant title="LinkedToField">
+      <LinkedToField />
+    </TestVariant>
+    <TestVariant title="LinkedToInput">
+      <LinkedToInput />
+    </TestVariant>
+    <TestVariant title="WithBackLinkAndButton">
+      <WithBackLinkAndButton />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/feedback/NotificationBanner/index.mdx

@@ -9,16 +9,15 @@ This component is currently experimental because more research is needed to vali
 
 Use a notification banner to tell the user about something they need to know about, but that’s not directly related to the page content.
 
-```bash
-import NotificationBanner from '@digigov/ui/feedback/NotificationBanner';
-```
-
 ## How to use
 
 Use a ‘neutral’ blue notification banner if the user needs to know about a problem with the service as a whole.
 
 Use a ‘neutral’ notification banner if the user needs to know about something that’s happening elsewhere in the service.
 
+## How to use
+
+### Default NotificationBanner
 <Story
   packageName="@digigov/ui"
   component="feedback/NotificationBanner"
@@ -27,12 +26,22 @@ Use a ‘neutral’ notification banner if the user needs to know about somethin
 
 You can also use a notification banner to tell the user about the outcome of something they’ve just done - but they have not finished using the service, so it does not make sense to use a confirmation page.
 
+### Success NotificationBanner
 <Story
   packageName="@digigov/ui"
   component="feedback/NotificationBanner"
   story="Success.tsx"
 />
 
+### Dense NotificationBanner
+<Story
+  packageName="@digigov/ui"
+  component="feedback/NotificationBanner"
+  story="Dense.tsx"
+/>
+
 ## API
 
-<PropTypes packageName="@digigov/ui" component="NotificationBanner" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["NotificationBannerContainer","NotificationBannerContent","NotificationBannerHeader","NotificationBannerHeading","NotificationBannerLink"]} /> 

package/src/feedback/NotificationBanner/index.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Default } from '@digigov/ui/feedback/NotificationBanner/__stories__/Default';
+import { Dense } from '@digigov/ui/feedback/NotificationBanner/__stories__/Dense';
+import { Success } from '@digigov/ui/feedback/NotificationBanner/__stories__/Success';
+
+test('renders the All NotificationBanner variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="Dense">
+      <Dense />
+    </TestVariant>
+    <TestVariant title="Success">
+      <Success />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/feedback/NotificationBanner/interaction.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { Default } from '@digigov/ui/feedback/NotificationBanner/__stories__/Default';
+import { Success } from '@digigov/ui/feedback/NotificationBanner/__stories__/Success';
+
+test('renders the Default Hover and click', async ({ mount, page }) => {
+  await mount(
+    <Default />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.locator("#root>div>div:nth-child(2)>h3>a").hover();
+ await page.locator("#root>div>div:nth-child(2)>h3>a").click();
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  
+
+
+test('renders the Success Hover and click', async ({ mount, page }) => {
+  await mount(
+    <Success />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.locator("#root>div>div:nth-child(2)>h3>a").hover();
+ await page.locator("#root>div>div:nth-child(2)>h3>a").click();
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/feedback/PhaseBanner/index.mdx

@@ -7,14 +7,12 @@ title: PhaseBanner
 
 Use the phase banner component to show users your service is still being worked on.
 
-```bash
-import PhaseBanner from '@digigov/ui/feedback/PhaseBanner';
-```
-
 ## How to use
 
 Your banner must be directly under the blue GOV.GR header and colour bar.
 
+### Default
+
 <Story
   packageName="@digigov/ui"
   component="feedback/PhaseBanner"
@@ -31,4 +29,9 @@ Your banner must be directly under the blue GOV.GR header and colour bar.
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="PhaseBanner" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "PhaseBanner",
+  "PhaseBannerTag",
+  "PhaseBannerText"]} />