@digigov/ui 2.0.0-113e6661 → 2.0.0-2177f152

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

@@ -1,11 +1,10 @@
 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 { 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';
@@ -19,73 +18,75 @@ import { WithFloatingScroll } from '@digigov/ui/content/Table/__stories__/WithFl
 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';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 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 All Table variants', async ({ mount, page }) => {
   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>
-  )
+    <div>
+      <TestVariant title="DarkVariant">
+        <DarkVariant />
+      </TestVariant>
+      <TestVariant title="DarkVariantWithVerticalHeaders">
+        <DarkVariantWithVerticalHeaders />
+      </TestVariant>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="DefinedWidth">
+        <DefinedWidth />
+      </TestVariant>
+      <TestVariant title="Dense">
+        <Dense />
+      </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);
   await delay(SCREENSHOT_DELAY);
 
-  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/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

@@ -4,29 +4,33 @@ 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 />
-  )
+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' });
+  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/TaskList/index.test.tsx

@@ -1,24 +1,25 @@
 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';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All TaskList variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="Dense">
-      <Dense />
-    </TestVariant>
-  </div>
-  )
+    <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' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

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/content/Timeline/index.test.tsx

@@ -1,24 +1,25 @@
 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';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All Timeline variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="Dense">
-      <Dense />
-    </TestVariant>
-  </div>
-  )
+    <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' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

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.test.tsx

@@ -1,28 +1,29 @@
 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';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 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>
-  )
+    <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' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

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/__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__/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';