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

@digigov/ui 2.0.0-daaf7bdf → 2.0.0-e20fed09

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 (3235) 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/__stories__/Default.tsx CHANGED Viewed

@@ -11,7 +11,7 @@ import {
 import { Link } from '@digigov/ui/navigation/Link';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
-export const Default = () => (
+export const Default = (_: any) => (
   <SummaryList>
     <SummaryListItem>
       <SummaryListItemKey>Όνομα</SummaryListItemKey>

package/src/content/SummaryList/__stories__/RowVariations.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ import {
 import { Link } from '@digigov/ui/navigation/Link';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
-export const RowVariations = () => (
+export const RowVariations = (_: any) => (
   <>
     <SummaryList>
       <SummaryListItem>

package/src/content/SummaryList/__stories__/WithActions.tsx CHANGED Viewed

@@ -12,7 +12,7 @@ import Button, { ButtonGroup } from '@digigov/ui/form/Button';
 import { Link } from '@digigov/ui/navigation/Link';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
-export const WithActions = () => (
+export const WithActions = (_: any) => (
   <SummaryList>
     <SummaryListItem>
       <SummaryListItemKey>Όνομα</SummaryListItemKey>

package/src/content/SummaryList/__stories__/WithKeyAndAction.tsx CHANGED Viewed

@@ -11,7 +11,7 @@ import { ButtonGroup, Button } from '@digigov/ui/form/Button';
 import { Link } from '@digigov/ui/navigation/Link';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
-export const WithKeyAndAction = () => {
+export const WithKeyAndAction = (_: any) => {
   return (
     <>
       <SummaryList>

package/src/content/SummaryList/__stories__/WithNoLastBorder.tsx CHANGED Viewed

@@ -11,7 +11,7 @@ import {
 import { Link } from '@digigov/ui/navigation/Link';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
-export const WithNoLastBorder = () => (
+export const WithNoLastBorder = (_: any) => (
   <SummaryList noLastBorder>
     <SummaryListItem>
       <SummaryListItemKey>Όνομα</SummaryListItemKey>

package/src/content/SummaryList/__stories__/WithoutActions.tsx CHANGED Viewed

@@ -7,7 +7,7 @@ import {
   SummaryListItemValue,
 } from '@digigov/ui/content/SummaryList';
-export const WithoutActions = () => (
+export const WithoutActions = (_: any) => (
   <SummaryList>
     <SummaryListItem>
       <SummaryListItemKey>Όνομα</SummaryListItemKey>

package/src/content/SummaryList/__stories__/WithoutBorders.tsx CHANGED Viewed

@@ -10,7 +10,7 @@ import {
 import Link from '@digigov/ui/navigation/Link';
 import VisuallyHidden from '@digigov/ui/utils/VisuallyHidden';
-export const WithoutBorders = () => (
+export const WithoutBorders = (_: any) => (
   <SummaryList border={false}>
     <SummaryListItem>
       <SummaryListItemKey>Όνομα</SummaryListItemKey>

package/src/content/SummaryList/doc.mdx ADDED Viewed

@@ -0,0 +1,39 @@
+---
+id: summary-list
+title: SummaryList
+---
+# SummaryList
+Use the summary list to summarize information, for example, a user’s responses at the end of a form.
+## How to use
+<code src="@digigov/ui/content/SummaryList/__stories__/Default.tsx" />
+### 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 ‘Αλλαγή ημερομηνίας γέννησης’.
+<code src="@digigov/ui/content/SummaryList/__stories__/WithActions.tsx" />
+### 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.
+<code src="@digigov/ui/content/SummaryList/__stories__/WithoutBorders.tsx" />
+## API
+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 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,219 @@
+import React from 'react';
+import doc from './doc.mdx?raw';
+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,
+  tags: ['autodocs'],
+  markdown: doc,
+  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__/DarkVariant.tsx CHANGED Viewed

@@ -41,7 +41,7 @@ const data = {
   ],
 };
-export const DarkVariant = () => {
+export const DarkVariant = (_: any) => {
   return (
     <TableContainer>
       <Table headerVariant="dark">

package/src/content/Table/__stories__/DarkVariantWithVerticalHeaders.tsx CHANGED Viewed

@@ -41,7 +41,7 @@ const data = {
   ],
 };
-export const DarkVariantWithVerticalHeaders = () => {
+export const DarkVariantWithVerticalHeaders = (_: any) => {
   return (
     <TableContainer>
       <Table headerVariant="dark">

package/src/content/Table/__stories__/Default.tsx CHANGED Viewed

@@ -36,7 +36,7 @@ const data = {
   ],
 };
-export const Default = () => {
+export const Default = (_: any) => {
   return (
     <TableContainer>
       <Table>

package/src/content/Table/__stories__/DefinedWidth.tsx CHANGED Viewed

@@ -36,7 +36,7 @@ const data = {
   ],
 };
-export const DefinedWidth = () => {
+export const DefinedWidth = (_: any) => {
   return (
     <TableContainer>
       <Table>