@digigov/ui 2.0.0-85c27c19 → 2.0.0-8e254888

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

@@ -3,15 +3,18 @@ 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 />
-  )
+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");
+  await page.keyboard.press('Tab');
+  await page.keyboard.press('Tab');
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/content/Table/Table.stories.js

@@ -19,7 +19,7 @@ export { DarkVariant } from '@digigov/ui/content/Table/__stories__/DarkVariant';
 export { DarkVariantWithVerticalHeaders } from '@digigov/ui/content/Table/__stories__/DarkVariantWithVerticalHeaders';
 export { WithLoader } from '@digigov/ui/content/Table/__stories__/WithLoader';
 export { DefinedWidth } from '@digigov/ui/content/Table/__stories__/DefinedWidth';
-export { Densed } from '@digigov/ui/content/Table/__stories__/Densed';
+export { Dense } from '@digigov/ui/content/Table/__stories__/Dense';
 export { RowColors } from '@digigov/ui/content/Table/__stories__/RowColors';
 export { MultipleProps } from '@digigov/ui/content/Table/__stories__/MultipleProps';
 export { WithSortFilters } from '@digigov/ui/content/Table/__stories__/WithSortFilters';

package/src/content/Table/TableFloatingScroll.tsx

@@ -42,7 +42,6 @@ export function TableFloatingScroll(props) {
       if (ref.current?.offsetWidth) {
         // @ts-ignore
         setContainerWidth(ref.current.offsetWidth);
-
       }
       if (contentRef.current?.offsetWidth) {
         // @ts-ignore

package/src/content/Table/__stories__/{Densed.tsx → Dense.tsx}

@@ -98,7 +98,7 @@ const data = [
   },
 ];
 
-export const Densed = () => {
+export const Dense = () => {
   return (
     <TableContainer border>
       <Table dense>
@@ -126,4 +126,4 @@ export const Densed = () => {
     </TableContainer>
   );
 };
-export default Densed;
+export default Dense;

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

@@ -1,9 +1,8 @@
 // @delay-test-snapshot
 import React, { useState } from 'react';
-import { CircularProgress } from '@digigov/ui/app/Loader';
-import { LoaderContainer } from '@digigov/ui/app/Loader';
-import { TableLoaderBackground } from '@digigov/ui/content/Table';
+import { CircularProgress, LoaderContainer } from '@digigov/ui/app/Loader';
 import {
+  TableLoaderBackground,
   TableContainer,
   Table,
   TableCaption,

package/src/content/Table/doc.mdx

@@ -0,0 +1,81 @@
+---
+id: table
+title: Table
+---
+
+# Table
+
+## How to use
+
+<code src="@digigov/ui/content/Table/__stories__/Default.tsx" />
+
+### With dark header
+
+<code src="@digigov/ui/content/Table/__stories__/DarkVariant.tsx" />
+
+### With captions
+
+Use the `<TableCaption>` element to describe a table in the same way you would use a heading. A caption helps users find, navigate and understand tables.
+
+<code src="@digigov/ui/content/Table/__stories__/TableCaptions.tsx" />
+
+### With numeric values
+
+<code src="@digigov/ui/content/Table/__stories__/NumericDataType.tsx" />
+
+### With zebra rows
+
+<code src="@digigov/ui/content/Table/__stories__/ZebraProp.tsx" />
+
+### With primary or secondary colored rows
+
+The prop `color='primary'` or `color='secondary'` is only functional when Table component has `variant='default'`.
+
+<code src="@digigov/ui/content/Table/__stories__/RowColors.tsx" />
+
+### With vertical lines
+
+<code src="@digigov/ui/content/Table/__stories__/VerticalBorders.tsx" />
+
+### With dense style
+
+<code src="@digigov/ui/content/Table/__stories__/Dense.tsx" />
+
+### Custom column widths
+
+<code src="@digigov/ui/content/Table/__stories__/DefinedWidth.tsx" />
+
+### Without data (empty table)
+
+<code src="@digigov/ui/content/Table/__stories__/NoData.tsx" />
+
+### With loader
+
+<code src="@digigov/ui/content/Table/__stories__/WithLoader.tsx" />
+
+### With stack style
+
+Use this prop when you want to display a more user friendly table for small screens.
+
+<code src="@digigov/ui/content/Table/__stories__/Stacked.tsx" />
+
+## Accessibility
+
+You can read more about the accessibility patterns used in our Table
+implementation in the ARIA Authoring Practices Guide (APG) at [Table](https://www.w3.org/WAI/ARIA/apg/patterns/table/) section.
+
+## API
+
+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/hooks/useSort.tsx

@@ -1,5 +1,4 @@
-import { useState } from 'react';
-import { useMemo } from 'react';
+import { useState, useMemo } from 'react';
 
 export type SortDirection = 1 | -1 | 0;
 

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

@@ -5,7 +5,7 @@ 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 { Dense } from '@digigov/ui/content/Table/__stories__/Dense';
 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';
@@ -38,8 +38,8 @@ test('renders the All Table variants', async ({ mount, page }) => {
     <TestVariant title="DefinedWidth">
       <DefinedWidth />
     </TestVariant>
-    <TestVariant title="Densed">
-      <Densed />
+    <TestVariant title="Dense">
+      <Dense />
     </TestVariant>
     <TestVariant title="Full">
       <Full />

package/src/content/Table/index.tsx

@@ -36,7 +36,7 @@ export const TableSortLabel = React.forwardRef<
     <Dropdown
       ref={(el) => {
         dropdownRef.current = el;
-        typeof ref === 'function' && ref(el);
+        if (typeof ref === 'function') ref(el);
       }}
       disabled={disabled}
       {...props}
@@ -63,12 +63,12 @@ export const TableSortLabel = React.forwardRef<
             tabIndex={0}
             onClick={() => {
               onSort(1);
-              dropdownRef.current && (dropdownRef.current.open = false);
+              if (dropdownRef.current) dropdownRef.current.open = false;
             }}
             onKeyDown={(e) => {
               if (e.key === 'Enter') {
                 onSort(1);
-                dropdownRef.current && (dropdownRef.current.open = false);
+                if (dropdownRef.current) dropdownRef.current.open = false;
               }
             }}
           >
@@ -85,12 +85,12 @@ export const TableSortLabel = React.forwardRef<
             tabIndex={0}
             onClick={() => {
               onSort(-1);
-              dropdownRef.current && (dropdownRef.current.open = false);
+              if (dropdownRef.current) dropdownRef.current.open = false;
             }}
             onKeyDown={(e) => {
               if (e.key === 'Enter') {
                 onSort(-1);
-                dropdownRef.current && (dropdownRef.current.open = false);
+                if (dropdownRef.current) dropdownRef.current.open = false;
               }
             }}
           >

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

@@ -2,17 +2,35 @@ import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
 
 import { WithLoader } from '@digigov/ui/content/Table/__stories__/WithLoader';
+import { WithSortFilters } from '@digigov/ui/content/Table/__stories__/WithSortFilters';
 const SCREENSHOT_DELAY = 2_000;
-const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
+const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
 test('renders the WithLoader Toggle Loading', async ({ mount, page }) => {
-  await mount(
-    <WithLoader />
-  )
+  await mount(<WithLoader />);
   await page.evaluate(() => document.fonts.ready);
   await delay(SCREENSHOT_DELAY);
- await page.locator("#root>button").click();
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  await page.locator('#root>button').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
+  expect(screenshot).toMatchSnapshot();
+});
+
+test('renders the WithSortFilters Click on header cell', async ({
+  mount,
+  page,
+}) => {
+  await mount(<WithSortFilters />);
+  await page.evaluate(() => document.fonts.ready);
+  await delay(SCREENSHOT_DELAY);
+  await page
+    .locator('#root>div>table>thead>tr>th:nth-child(1)>details>summary')
+    .click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/content/TaskList/{index.mdx → doc.mdx}

@@ -9,13 +9,11 @@ TaskList is a component that displays number of steps required to complete a pro
 
 ## How to use
 
-### Default
+<code src="@digigov/ui/content/TaskList/__stories__/Default.tsx" />
 
-<Story
-  packageName="@digigov/ui"
-  component="content/TaskList"
-  story="Default.tsx"
-/>
+## With dense style
+
+<code src="@digigov/ui/content/TaskList/__stories__/Dense.tsx" />
 
 ## API
 

package/src/content/Timeline/{index.mdx → doc.mdx}

@@ -11,13 +11,11 @@ User can better understand what has happened and also understand what the next s
 
 ## How to use
 
-### Default
+<code src="@digigov/ui/content/Timeline/__stories__/Default.tsx" />
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Timeline"
-  story="Default.tsx"
-/>
+## With dense style
+
+<code src="@digigov/ui/content/Timeline/__stories__/Dense.tsx" />
 
 ## API
 

package/src/feedback/CopyToClipboard/__stories__/Default.tsx

@@ -11,7 +11,7 @@ export const Default = () => {
       message="Αντιγράφηκε στο πρόχειρο"
       id="copy-to-clipboard"
       onCopy={() => {
-        console.log('yess copied');
+        console.log('content copied!');
       }}
     >
       <Button color="secondary" aria-describedby="copy-to-clipboard">

package/src/feedback/CopyToClipboard/doc.mdx

@@ -0,0 +1,22 @@
+---
+id: copy-to-clipboard
+title: CopyToClipboard
+---
+
+## How to use
+
+<code src="@digigov/ui/feedback/CopyToClipboard/__stories__/Default.tsx" />
+
+### As banner
+
+<code src="@digigov/ui/feedback/CopyToClipboard/__stories__/Banner.tsx" />
+
+### With dense style
+
+<code src="@digigov/ui/feedback/CopyToClipboard/__stories__/Dense.tsx" />
+
+## API
+
+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.tsx

@@ -41,7 +41,7 @@ export const CopyToClipboard = React.forwardRef<
   }, [enabled]);
 
   function copyToClipboard() {
-    onCopy && onCopy();
+    if (onCopy) onCopy();
     navigator.clipboard.writeText(text);
     setEnabled(true);
   }

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

@@ -6,36 +6,34 @@ import { Default } from '@digigov/ui/feedback/CopyToClipboard/__stories__/Defaul
 import { Dense } from '@digigov/ui/feedback/CopyToClipboard/__stories__/Dense';
 
 test('renders the Banner Click button', async ({ mount, page }) => {
-  await mount(
-    <Banner />
-  )
+  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' });
+  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 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' });
+  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 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' });
+  await page.locator('#root>div>div>button').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/feedback/ErrorSummary/ErrorSummary.stories.js

@@ -12,4 +12,5 @@ export { Dense } from '@digigov/ui/feedback/ErrorSummary/__stories__/Dense';
 export { LinkedToInput } from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToInput';
 export { LinkedToField } from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToField';
 export { LinkedToCheckbox } from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToCheckbox';
+export { ErrorGroupLinkedToInput } from '@digigov/ui/feedback/ErrorSummary/__stories__/ErrorGroupLinkedToInput';
 export { WithBackLinkAndButton } from '@digigov/ui/feedback/ErrorSummary/__stories__/WithBackLinkAndButton';

package/src/feedback/ErrorSummary/__snapshots__/index.spec.tsx.snap

@@ -1,7 +1,7 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the ErrorSummary with sample data 1`] = `
-<ForwardRef(ErrorSummary)>
+<ForwardRef(ErrorSummary2)>
   this is some random warning text
-</ForwardRef(ErrorSummary)>
+</ForwardRef(ErrorSummary2)>
 `;

package/src/feedback/ErrorSummary/__stories__/ErrorGroupLinkedToInput.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { List, ListItem } from '@digigov/ui/content/List';
+import { ErrorSummary } from '@digigov/ui/feedback/ErrorSummary';
+import { FieldContainer } from '@digigov/ui/form/FieldContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { TextInput } from '@digigov/ui/form/TextInput';
+import { Link } from '@digigov/ui/navigation/Link';
+import { Heading } from '@digigov/ui/typography/Heading';
+import { Hint } from '@digigov/ui/typography/Hint';
+
+export const ErrorGroupLinkedToInput = () => (
+  <div>
+    <ErrorSummary variant="error-group">
+      <Heading size="md">Τα παρακάτω πεδία της φόρμας ειναι λάθος.</Heading>
+      <List listStyle="bullet">
+        <ListItem>
+          <b>Όνομα επιχείρησης:</b>{' '}
+          <Link href="#business-name">
+            Πρέπει να συμπληρώσετε το όνομα της επιχείρησης
+          </Link>
+        </ListItem>
+        <ListItem>
+          <b>Διεύθυνση επιχείρησης:</b>{' '}
+          <Link href="#address-name">
+            Πρέπει να συμπληρώσετε τη διεύθυνση της επιχείρησης
+          </Link>
+        </ListItem>
+      </List>
+    </ErrorSummary>
+    <FieldContainer error>
+      <LabelContainer>
+        <LabelTitle size="md">Όνομα επιχείρησης</LabelTitle>
+        <Hint>Ποιο είναι το όνομα της επιχείρησης;</Hint>
+        <TextInput error name="inputext" id="business-name"></TextInput>
+      </LabelContainer>
+    </FieldContainer>
+    <FieldContainer error>
+      <LabelContainer>
+        <LabelTitle size="md">Διεύθυνση επιχείρησης</LabelTitle>
+        <Hint>Ποια είναι η διεύθυνση της επιχείρησης;</Hint>
+        <TextInput error name="inputext" id="business-address"></TextInput>
+      </LabelContainer>
+    </FieldContainer>
+  </div>
+);
+
+export default ErrorGroupLinkedToInput;

package/src/feedback/ErrorSummary/__stories__/LinkedToInput.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 import { ErrorSummary } from '@digigov/ui/feedback/ErrorSummary';
 import { ErrorMessage } from '@digigov/ui/form/ErrorMessage';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 import { Link } from '@digigov/ui/navigation/Link';
 import { Heading } from '@digigov/ui/typography/Heading';

package/src/feedback/ErrorSummary/{index.mdx → doc.mdx}

@@ -5,17 +5,13 @@ title: ErrorSummary
 
 # ErrorSummary
 
-Use this component at the top of a page to summarise any errors a user has made.
+Use this component at the top of a page to summarize 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.
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/ErrorSummary"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/feedback/ErrorSummary/__stories__/Default.tsx" />
 
 ### Linking from the error summary to each answer
 
@@ -23,32 +19,20 @@ You must link the errors in the error summary to the answer they relate to.
 
 For questions that require a user to answer using a single field, like a file upload, select, textarea, text input or character count, link to the field.
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/ErrorSummary"
-  story="LinkedToInput.tsx"
-/>
+<code src="@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToInput.tsx" />
 
 When a user has to enter their answer into multiple fields, such as the day, month and year fields in the date input component, link to the first field that contains an error.
 
 If you do not know which field contains an error, link to the first field.
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/ErrorSummary"
-  story="LinkedToField.tsx"
-/>
+<code src="@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToField.tsx" />
 
 For questions that require a user to select one or more options from a list using radios or checkboxes, link to the first radio or checkbox.
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/ErrorSummary"
-  story="LinkedToCheckbox.tsx"
-/>
+<code src="@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToCheckbox.tsx" />
 
 ## API
 
 See below for a complete reference to all of the props  available to the components mentioned here.
 
-<ComponentProps componentName={["ErrorSummary"]} /> 
+{/* <ComponentProps componentName={["ErrorSummary"]} />  */}

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

@@ -3,6 +3,7 @@ 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 { ErrorGroupLinkedToInput } from '@digigov/ui/feedback/ErrorSummary/__stories__/ErrorGroupLinkedToInput';
 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';
@@ -18,6 +19,9 @@ test('renders the All ErrorSummary variants', async ({ mount, page }) => {
     <TestVariant title="Dense">
       <Dense />
     </TestVariant>
+    <TestVariant title="ErrorGroupLinkedToInput">
+      <ErrorGroupLinkedToInput />
+    </TestVariant>
     <TestVariant title="LinkedToCheckbox">
       <LinkedToCheckbox />
     </TestVariant>

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { LinkedToCheckbox } from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToCheckbox';
+
+test('renders the LinkedToCheckbox Go to checkbox', async ({ mount, page }) => {
+  await mount(<LinkedToCheckbox />);
+  await page.evaluate(() => document.fonts.ready);
+  await page.keyboard.press('Tab');
+  await page.keyboard.press('Enter');
+
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
+  expect(screenshot).toMatchSnapshot();
+});

package/src/feedback/NotificationBanner/__snapshots__/index.spec.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the notification banner 1`] = `
 <NotificationBanner

package/src/feedback/NotificationBanner/{index.mdx → doc.mdx}

@@ -17,28 +17,17 @@ Use a ‘neutral’ notification banner if the user needs to know about somethin
 
 ## How to use
 
-### Default NotificationBanner
-<Story
-  packageName="@digigov/ui"
-  component="feedback/NotificationBanner"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/feedback/NotificationBanner/__stories__/Default.tsx" />
 
 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"
-/>
+### With success style
+
+<code src="@digigov/ui/feedback/NotificationBanner/__stories__/Success.tsx" />
+
+### With dense style
+
+<code src="@digigov/ui/feedback/NotificationBanner/__stories__/Dense.tsx" />
 
 ## API