@digigov/ui 2.0.0-85c27c19 → 2.0.0-aefd0709

package/src/content/SummaryList/__stories__/SummaryListExample.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+
+import {
+  SummaryList,
+  SummaryListItem,
+  SummaryListItemAction,
+  SummaryListItemKey,
+  SummaryListItemValue,
+  WidthValues,
+} from '@digigov/ui/content/SummaryList';
+
+import { Link } from '@digigov/ui/navigation/Link';
+
+const data = [
+  {
+    key: 'Όνομα',
+    value: 'Γιώργος Παπαδόπουλος',
+    action: 'Αλλαγή',
+  },
+  {
+    key: 'Ημερομηνία Γέννησης',
+    value: '11 Μαϊου 1990',
+    action: 'Αλλαγή Ημερομηνίας',
+  },
+  {
+    key: 'Κινητό τηλέφωνο επικοινωνίας',
+    value: '6941234567',
+    action: 'Αλλαγή',
+  },
+];
+
+export const SummaryListExample = ({
+  sm,
+  md,
+  lg,
+  border = true,
+  noLastBorder = false,
+  itemBorder = true,
+  showKey = true,
+  showValue = true,
+  showActions = true,
+}: {
+  sm?: WidthValues;
+  md?: WidthValues;
+  lg?: WidthValues;
+  border?: boolean;
+  noLastBorder?: boolean;
+  itemBorder?: boolean;
+  showKey?: boolean;
+  showValue?: boolean;
+  showActions?: boolean;
+}) => (
+  <SummaryList border={border} noLastBorder={noLastBorder}>
+    {data &&
+      data.map((item, index) => (
+        <SummaryListItem key={index} border={itemBorder}>
+          {showKey && (
+            <SummaryListItemKey sm={sm} md={md} lg={lg}>
+              {item.key}
+            </SummaryListItemKey>
+          )}
+          {showValue && (
+            <SummaryListItemValue>{item.value}</SummaryListItemValue>
+          )}
+          {showActions && (
+            <SummaryListItemAction>
+              <Link href="#">{item.action}</Link>
+            </SummaryListItemAction>
+          )}
+        </SummaryListItem>
+      ))}
+  </SummaryList>
+);
+
+export default SummaryListExample;

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

@@ -5,37 +5,25 @@ title: SummaryList
 
 # SummaryList
 
-Use the summary list to summarise information, for example, a user’s responses at the end of a form.
+Use the summary list to summarize information, for example, a user’s responses at the end of a form.
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="content/SummaryList"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/content/SummaryList/__stories__/Default.tsx" />
 
-### Summary list with actions
+### With actions
 
 Assistive technology users, like those who use a screen reader, may hear the links out of context and not know what they do.
 To give more context, add visually hidden text to the links.
 This means a screen reader user will hear a meaningful action, like ‘Αλλαγή ονόματος’ or ‘Αλλαγή ημερομηνίας γέννησης’.
 
-<Story
-  packageName="@digigov/ui"
-  component="content/SummaryList"
-  story="WithActions.tsx"
-/>
+<code src="@digigov/ui/content/SummaryList/__stories__/WithActions.tsx" />
 
-### Summary list without borders
+### Without borders
 
 If you do not include actions in your summary list and it would be better for your design to remove the separating borders, use the `border={false}` prop.
 
-<Story
-  packageName="@digigov/ui"
-  component="content/SummaryList"
-  story="WithoutBorders.tsx"
-/>
+<code src="@digigov/ui/content/SummaryList/__stories__/WithoutBorders.tsx" />
 
 ## API
 

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

@@ -1,44 +1,49 @@
 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 { SummaryListExample } from '@digigov/ui/content/SummaryList/__stories__/SummaryListExample';
 import { WithActions } from '@digigov/ui/content/SummaryList/__stories__/WithActions';
 import { WithKeyAndAction } from '@digigov/ui/content/SummaryList/__stories__/WithKeyAndAction';
 import { WithNoLastBorder } from '@digigov/ui/content/SummaryList/__stories__/WithNoLastBorder';
 import { WithoutActions } from '@digigov/ui/content/SummaryList/__stories__/WithoutActions';
 import { WithoutBorders } from '@digigov/ui/content/SummaryList/__stories__/WithoutBorders';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 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="WithNoLastBorder">
-      <WithNoLastBorder />
-    </TestVariant>
-    <TestVariant title="WithoutActions">
-      <WithoutActions />
-    </TestVariant>
-    <TestVariant title="WithoutBorders">
-      <WithoutBorders />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="RowVariations">
+        <RowVariations />
+      </TestVariant>
+      <TestVariant title="SummaryListExample">
+        <SummaryListExample />
+      </TestVariant>
+      <TestVariant title="WithActions">
+        <WithActions />
+      </TestVariant>
+      <TestVariant title="WithKeyAndAction">
+        <WithKeyAndAction />
+      </TestVariant>
+      <TestVariant title="WithNoLastBorder">
+        <WithNoLastBorder />
+      </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' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

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

@@ -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

@@ -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/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();
 });
-