npm - @digigov/ui - Versions diffs - 2.0.0-834daea4 → 2.0.0-87b6232d - Mend

@digigov/ui 2.0.0-834daea4 → 2.0.0-87b6232d

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 (1044) hide show

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

@@ -4,37 +4,37 @@ exports[`renders the SummaryList with sample data 1`] = `
 <body>
   <div>
     <dl
-      class=" ds-summary-list"
+      class="ds-summary-list"
     >
       <div
-        class=" ds-summary-list__row"
+        class="ds-summary-list__row"
       >
         <dt
-          class=" ds-summary-list__key ds-summary-list__key--sm-3"
+          class="ds-summary-list__key ds-summary-list__key--sm-3"
         >
           Όνομα
         </dt>
         <dd
-          class=" ds-summary-list__value"
+          class="ds-summary-list__value"
         >
            Μάριος
         </dd>
         <dd
-          class=" ds-summary-list__actions"
+          class="ds-summary-list__actions"
         >
            Αλλαγή
         </dd>
       </div>
       <div
-        class=" ds-summary-list__row"
+        class="ds-summary-list__row"
       >
         <dt
-          class=" ds-summary-list__key ds-summary-list__key--sm-3"
+          class="ds-summary-list__key ds-summary-list__key--sm-3"
         >
           Επώνυμο
         </dt>
         <dd
-          class=" ds-summary-list__value"
+          class="ds-summary-list__value"
         >
           Μενεξές
         </dd>

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

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

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

@@ -4,29 +4,41 @@ 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);
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
   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);
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
   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.test.tsx CHANGED Viewed

@@ -18,6 +18,10 @@ test('renders the All TaskList 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/Timeline/index.test.tsx CHANGED Viewed

@@ -18,6 +18,10 @@ test('renders the All Timeline 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/doc.mdx ADDED Viewed

@@ -0,0 +1,49 @@
+---
+id: Introduction
+---
+---
+# Digigov UI
+Digigov UI is a collection of reusable, accessible, and design-consistent React components for building web applications.
+It is designed to work seamlessly with the [GOV.GR design system](https://guide.services.gov.gr) and other [Digigov libraries](learn/overview).
+## Before We Start
+User interfaces play a crucial role in web applications, influencing both usability and accessibility.
+With `@digigov/ui`, we provide a structured and efficient way to build scalable and accessible UI components.
+The `@digigov/ui` library offers structure and flexibility, enabling developers to build cohesive and accessible interfaces with ease.
+Whether you're designing a simple form or a complex application, `@digigov/ui` components provide a solid foundation that enhances development
+efficiency while supporting customization and scalability."
+## Overview
+The `@digigov/ui` package offers a collection of reusable, accessible, and design-consistent React components tailored for `GOV.GR` services. The library ensures seamless integration with `@digigov/css`, providing predefined styles that adhere to the [GOV.GR design guidelines](https://guide.services.gov.gr).
+### 📦 Installation
+```sh
+yarn add @digigov/ui
+```
+Or using npm:
+```sh
+npm install i @digigov/ui
+```
+### Key Features
+✅ **Prebuilt Components**: Includes **Buttons**, **Modals**, **Tables**, **Inputs**, **Paragraphs**, **Headers**, **Tabs**, **Accordions** and more, and more—ready to use with minimal configuration.
+🎨 **Customizability** – Built-in theming, **modify colors**, **typography**, and **spacing** using CSS variables make it easy to adapt components to different project needs.
+♿ **Accessibility by Design**: Components follow WCAG standards to ensure usability for all users.
+🔌 **Integration-Friendly**: Works seamlessly with `@digigov/form`, `@digigov/css`, and other Digigov libraries.
+In the following sections, we will walk you through the concepts of `@digigov/ui` components, including usage examples, and best practices.

package/src/feedback/CopyToClipboard/CopyToClipboard.stories.jsx ADDED Viewed

@@ -0,0 +1,70 @@
+import React from 'react';
+import { CopyToClipboard } from '@digigov/ui/feedback/CopyToClipboard';
+import { Button } from '@digigov/ui/form/Button';
+export default {
+  title: 'Digigov UI/feedback/CopyToClipboard',
+  component: CopyToClipboard,
+  displayName: 'CopyToClipboard',
+};
+export const WithControls = {
+  render: (args) => {
+    return (
+      <CopyToClipboard
+        text={args.text}
+        variant={args.variant}
+        tooltipAlign={args.tooltipAlign}
+        dense={args.dense}
+        message={args.message}
+        id={args.id}
+        onCopy={() => {
+          console.log('content copied!');
+        }}
+      >
+        <Button color="secondary" aria-describedby="copy-to-clipboard">
+          Αντιγραφή
+        </Button>
+      </CopyToClipboard>
+    );
+  },
+  args: {
+    text: 'copied-text',
+    variant: 'tooltip',
+    tooltipAlign: 'left',
+    dense: false,
+    message: 'Αντιγράφηκε στο πρόχειρο',
+    id: 'copy-to-clipboard',
+  },
+  argTypes: {
+    text: {
+      control: { type: 'text' },
+    },
+    variant: {
+      options: ['tooltip', 'banner'],
+      control: { type: 'select' },
+    },
+    tooltipAlign: {
+      options: ['left', 'right'],
+      control: { type: 'select' },
+      if: { arg: 'variant', eq: 'tooltip' },
+    },
+    dense: {
+      control: { type: 'boolean' },
+      if: { arg: 'variant', eq: 'tooltip' },
+    },
+    message: {
+      control: { type: 'text' },
+    },
+    id: {
+      control: { type: 'text' },
+    },
+  },
+  parameters: {
+    controls: { exclude: ['timeout', 'ref'] },
+  },
+};
+export { Default } from '@digigov/ui/feedback/CopyToClipboard/__stories__/Default';
+export { Banner } from '@digigov/ui/feedback/CopyToClipboard/__stories__/Banner';
+export { Dense } from '@digigov/ui/feedback/CopyToClipboard/__stories__/Dense';

package/src/feedback/CopyToClipboard/doc.mdx CHANGED Viewed

@@ -3,6 +3,8 @@ id: copy-to-clipboard
 title: CopyToClipboard
 ---
+# CopyToClipboard
 ## How to use
 <code src="@digigov/ui/feedback/CopyToClipboard/__stories__/Default.tsx" />
@@ -17,6 +19,6 @@ title: CopyToClipboard
 ## API
-See below for a complete reference to all of the props  available to the components mentioned here.
+See below for a complete reference to all of the props available to the components mentioned here.
-<ComponentProps componentName={["CopyToClipboardContainer"]} />
+<ComponentProps componentName={['CopyToClipboardContainer']} />{' '}

package/src/feedback/CopyToClipboard/index.test.tsx CHANGED Viewed

@@ -22,6 +22,10 @@ test('renders the All CopyToClipboard 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/feedback/CopyToClipboard/index.tsx CHANGED Viewed

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