npm - @digigov/ui - Versions diffs - 2.0.0-daaf7bdf → 2.0.0-eaf330f5 - Mend

@digigov/ui 2.0.0-daaf7bdf → 2.0.0-eaf330f5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1290) hide show

package/src/content/SummaryList/__snapshots__/index.spec.tsx.snap CHANGED Viewed

@@ -1,97 +1,45 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the SummaryList with sample data 1`] = `
-<ForwardRef(SummaryList)>
-  <ForwardRef(Base)
-    as="dl"
-    className="ds-summary-list"
-  >
+<body>
+  <div>
     <dl
-      className="ds-summary-list"
+      class="ds-summary-list"
     >
-      <ForwardRef(SummaryListItem)>
-        <ForwardRef(Base)
-          as="div"
-          className="ds-summary-list__row"
+      <div
+        class="ds-summary-list__row"
+      >
+        <dt
+          class="ds-summary-list__key ds-summary-list__key--sm-3"
         >
-          <div
-            className="ds-summary-list__row"
-          >
-            <ForwardRef(SummaryListItemKey)>
-              <ForwardRef(Base)
-                as="dt"
-                className="ds-summary-list__key"
-              >
-                <dt
-                  className="ds-summary-list__key"
-                >
-                  Όνομα
-                </dt>
-              </ForwardRef(Base)>
-            </ForwardRef(SummaryListItemKey)>
-            <ForwardRef(SummaryListItemValue)>
-              <ForwardRef(Base)
-                as="dd"
-                className="ds-summary-list__value"
-              >
-                <dd
-                  className="ds-summary-list__value"
-                >
-                   Μάριος
-                </dd>
-              </ForwardRef(Base)>
-            </ForwardRef(SummaryListItemValue)>
-            <ForwardRef(SummaryListItemAction)>
-              <ForwardRef(Base)
-                as="dd"
-                className="ds-summary-list__actions"
-              >
-                <dd
-                  className="ds-summary-list__actions"
-                >
-                   Αλλαγή
-                </dd>
-              </ForwardRef(Base)>
-            </ForwardRef(SummaryListItemAction)>
-          </div>
-        </ForwardRef(Base)>
-      </ForwardRef(SummaryListItem)>
-      <ForwardRef(SummaryListItem)>
-        <ForwardRef(Base)
-          as="div"
-          className="ds-summary-list__row"
+          Όνομα
+        </dt>
+        <dd
+          class="ds-summary-list__value"
         >
-          <div
-            className="ds-summary-list__row"
-          >
-            <ForwardRef(SummaryListItemKey)>
-              <ForwardRef(Base)
-                as="dt"
-                className="ds-summary-list__key"
-              >
-                <dt
-                  className="ds-summary-list__key"
-                >
-                  Επώνυμο
-                </dt>
-              </ForwardRef(Base)>
-            </ForwardRef(SummaryListItemKey)>
-            <ForwardRef(SummaryListItemValue)>
-              <ForwardRef(Base)
-                as="dd"
-                className="ds-summary-list__value"
-              >
-                <dd
-                  className="ds-summary-list__value"
-                >
-                  Μενεξές
-                </dd>
-              </ForwardRef(Base)>
-            </ForwardRef(SummaryListItemValue)>
-          </div>
-        </ForwardRef(Base)>
-      </ForwardRef(SummaryListItem)>
+           Μάριος
+        </dd>
+        <dd
+          class="ds-summary-list__actions"
+        >
+           Αλλαγή
+        </dd>
+      </div>
+      <div
+        class="ds-summary-list__row"
+      >
+        <dt
+          class="ds-summary-list__key ds-summary-list__key--sm-3"
+        >
+          Επώνυμο
+        </dt>
+        <dd
+          class="ds-summary-list__value"
+        >
+          Μενεξές
+        </dd>
+      </div>
     </dl>
-  </ForwardRef(Base)>
-</ForwardRef(SummaryList)>
+  </div>
+</body>
 `;

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

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

@@ -42,6 +42,10 @@ test('renders the All SummaryList variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

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

@@ -3,15 +3,22 @@ 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");
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+  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/Table.stories.jsx ADDED Viewed

@@ -0,0 +1,216 @@
+import React from 'react';
+import {
+  TableContainer,
+  Table,
+  TableCaption,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableHeadCell,
+  TableDataCell,
+} from '@digigov/ui/content/Table';
+export default {
+  title: 'Digigov UI/content/Table',
+  description:
+    'Use the table component to make information easier to compare and scan for users.',
+  link: 'https://guide.services.gov.gr/docs/components/table',
+  component: Table,
+  displayName: 'Table',
+};
+const data = {
+  title: 'Χρήστες',
+  labels: {
+    name: 'Ονοματεπώνυμο',
+    role: 'Ρόλος',
+    email: 'Email',
+    phone: 'Ώρες',
+  },
+  content: [
+    {
+      name: 'Μάριος Μενεξές',
+      role: 'Χειριστής',
+      email: 'marios@mail.com',
+      phone: '34',
+    },
+    {
+      name: 'Καλλιόπη Παπαδοπούλου',
+      role: 'Χειριστής',
+      email: 'kalliopi@mail.com',
+      phone: '65',
+    },
+    {
+      name: 'Μαρία Φλούπη',
+      role: 'Διαχειριστής',
+      email: 'maria@mail.com',
+      phone: '12',
+    },
+    {
+      name: 'Ηλέκτρα Αποστόλου',
+      role: 'Διαχειριστής',
+      email: 'ilektra@mail.com',
+      phone: '26',
+    },
+  ],
+};
+export const WithControls = {
+  render: (args) => {
+    return (
+      <TableContainer border={args.containerBorder}>
+        <Table
+          headerVariant={args.headerVariant}
+          verticalBorders={args.verticalBorders}
+          variant={args.variant}
+          dense={args.dense}
+          stacked={args.stacked}
+        >
+          {data && (
+            <>
+              <TableCaption size={args.tableCaptionSize}>
+                {data.title}
+              </TableCaption>
+              <TableHead>
+                <TableRow>
+                  {data.labels &&
+                    Object.keys(data.labels).map((key, index) => (
+                      <TableHeadCell
+                        key={key}
+                        width={index === 0 && args.firstTableHeadCellWidth}
+                        dataType={key === 'phone' && args.tableHeadCellDataType}
+                      >
+                        {data.labels[key]}
+                      </TableHeadCell>
+                    ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {data.content &&
+                  data.content.map((item, index) => (
+                    <TableRow
+                      key={index}
+                      highlight={index === 1 && args.tableRowHighlight}
+                      color={index === 1 && args.tableRowColor}
+                    >
+                      <TableDataCell data-label={data.labels.name}>
+                        {item.name}
+                      </TableDataCell>
+                      <TableDataCell data-label={data.labels.role}>
+                        {item.role}
+                      </TableDataCell>
+                      <TableDataCell data-label={data.labels.email}>
+                        {item.email}
+                      </TableDataCell>
+                      <TableDataCell
+                        data-label={data.labels.phone}
+                        dataType={args.tableHeadCellDataType}
+                      >
+                        {item.phone}
+                      </TableDataCell>
+                    </TableRow>
+                  ))}
+              </TableBody>
+            </>
+          )}
+        </Table>
+      </TableContainer>
+    );
+  },
+  args: {
+    containerBorder: false,
+    headerVariant: 'light',
+    verticalBorders: false,
+    variant: 'default',
+    stacked: 'md',
+    dense: false,
+    tableCaptionSize: 'md',
+    tableRowHighlight: false,
+    tableRowColor: 'primary',
+    firstTableHeadCellWidth: '25%',
+    tableHeadCellDataType: 'text',
+  },
+  argTypes: {
+    containerBorder: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    headerVariant: {
+      options: ['dark', 'light'],
+      control: { type: 'inline-radio' },
+    },
+    verticalBorders: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    variant: {
+      control: { type: 'inline-radio' },
+      options: ['default', 'zebra'],
+    },
+    stacked: {
+      control: {
+        type: 'select',
+      },
+      options: ['always', 'sm', 'md', 'never'],
+    },
+    dense: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    tableCaptionSize: {
+      control: {
+        type: 'select',
+      },
+      options: ['sm', 'md', 'lg', 'xl'],
+    },
+    tableRowHighlight: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    tableRowColor: {
+      control: {
+        type: 'inline-radio',
+      },
+      options: ['primary', 'secondary'],
+    },
+    firstTableHeadCellWidth: {
+      control: {
+        type: 'select',
+      },
+      options: ['25%', '33.3%', '50%', '66.6%', '75%', '100%', 'full'],
+    },
+    tableHeadCellDataType: {
+      control: {
+        type: 'inline-radio',
+      },
+      options: ['numeric', 'text'],
+    },
+  },
+  parameters: {
+    controls: { exclude: ['ref'] },
+  },
+};
+export { Default } from '@digigov/ui/content/Table/__stories__/Default';
+export { TableCaptions } from '@digigov/ui/content/Table/__stories__/TableCaptions';
+export { NoData } from '@digigov/ui/content/Table/__stories__/NoData';
+export { VerticalHeaders } from '@digigov/ui/content/Table/__stories__/VerticalHeaders';
+export { ZebraProp } from '@digigov/ui/content/Table/__stories__/ZebraProp';
+export { NumericDataType } from '@digigov/ui/content/Table/__stories__/NumericDataType';
+export { VerticalBorders } from '@digigov/ui/content/Table/__stories__/VerticalBorders';
+export { Stacked } from '@digigov/ui/content/Table/__stories__/Stacked';
+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 { 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';
+export { WithFloatingScroll } from '@digigov/ui/content/Table/__stories__/WithFloatingScroll';
+export { Full } from '@digigov/ui/content/Table/__stories__/Full';

package/src/content/Table/TableFloatingScroll.tsx CHANGED Viewed

@@ -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} RENAMED Viewed

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

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

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

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

@@ -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 />
@@ -83,6 +83,10 @@ test('renders the All Table variants', async ({ mount, page }) => {
   </div>
   )
   await page.evaluate(() => document.fonts.ready);
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
   await delay(SCREENSHOT_DELAY);
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });

package/src/content/Table/index.tsx CHANGED Viewed

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