@digigov/ui 2.0.0-8e254888 → 2.0.0-a32ad9b2

package/src/content/Table/Table.stories.jsx

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

@@ -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/interaction.test.tsx

@@ -9,6 +9,10 @@ const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 test('renders the WithLoader Toggle Loading', async ({ mount, page }) => {
   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({
@@ -24,6 +28,10 @@ test('renders the WithSortFilters Click on header cell', async ({
 }) => {
   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')

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

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

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

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

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

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

@@ -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/interaction.test.tsx

@@ -8,6 +8,10 @@ import { Dense } from '@digigov/ui/feedback/CopyToClipboard/__stories__/Dense';
 test('renders the Banner Click button', async ({ mount, page }) => {
   await mount(<Banner />);
   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 page.locator('#root>div>div>button').click();
   const screenshot = await page.screenshot({
     fullPage: true,
@@ -19,6 +23,10 @@ test('renders the Banner Click button', async ({ mount, page }) => {
 test('renders the Default Click button', async ({ mount, page }) => {
   await mount(<Default />);
   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 page.locator('#root>div>div>button').click();
   const screenshot = await page.screenshot({
     fullPage: true,
@@ -30,6 +38,10 @@ test('renders the Default Click button', async ({ mount, page }) => {
 test('renders the Dense Click button', async ({ mount, page }) => {
   await mount(<Dense />);
   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 page.locator('#root>div>div>button').click();
   const screenshot = await page.screenshot({
     fullPage: true,

package/src/feedback/ErrorSummary/ErrorSummary.stories.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { ErrorSummary } from '@digigov/ui/feedback/ErrorSummary';
+import { Link } from '@digigov/ui/navigation/Link';
+import { Heading } from '@digigov/ui/typography/Heading';
+import { List, ListItem } from '@digigov/ui/content/List';
+
+export default {
+  title: 'Digigov UI/feedback/ErrorSummary',
+  description:
+    'Use this component at the top of a page to summarise any errors a user has made.',
+  link: 'https://guide.services.gov.gr/docs/components/error-summary',
+  component: ErrorSummary,
+  displayName: 'ErrorSummary',
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <ErrorSummary dense={args.dense}>
+        <Heading size="sm">{args.heading}</Heading>
+        <List listStyle="none">
+          {args.links.map((link, index) => (
+            <ListItem key={index}>
+              <Link href={link.href}>{link.label}</Link>
+            </ListItem>
+          ))}
+        </List>
+      </ErrorSummary>
+    );
+  },
+  parameters: {
+    controls: { exclude: ['variant', 'ref'] },
+  },
+  args: {
+    dense: false,
+    heading: 'Υπήρξε κάποιο πρόβλημα',
+    links: [
+      {
+        href: '#',
+        label: 'Πρέπει να συμπληρώσετε το έτος',
+      },
+      {
+        href: '#',
+        label: 'Πρέπει να συμπληρώσετε το μήνα',
+      },
+    ],
+  },
+  argTypes: {
+    dense: {
+      control: { type: 'boolean' },
+    },
+    heading: {
+      control: { type: 'text' },
+    },
+    links: {
+      control: { type: 'object' },
+    },
+  },
+};
+
+export { Default } from '@digigov/ui/feedback/ErrorSummary/__stories__/Default';
+export { Dense } from '@digigov/ui/feedback/ErrorSummary/__stories__/Dense';
+export { LinkedToInput } from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToInput';
+export { LinkedToField } from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToField';
+export { LinkedToCheckbox } from '@digigov/ui/feedback/ErrorSummary/__stories__/LinkedToCheckbox';
+export { ErrorGroupLinkedToInput } from '@digigov/ui/feedback/ErrorSummary/__stories__/ErrorGroupLinkedToInput';
+export { WithBackLinkAndButton } from '@digigov/ui/feedback/ErrorSummary/__stories__/WithBackLinkAndButton';

package/src/feedback/ErrorSummary/__snapshots__/index.spec.tsx.snap

@@ -1,7 +1,17 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the ErrorSummary with sample data 1`] = `
-<ForwardRef(ErrorSummary2)>
-  this is some random warning text
-</ForwardRef(ErrorSummary2)>
+Object {
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": Object {},
+  "key": null,
+  "props": Object {
+    "children": "this is some random warning text",
+  },
+  "type": Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "render": [Function],
+  },
+}
 `;

package/src/feedback/ErrorSummary/index.test.tsx

@@ -38,6 +38,10 @@ test('renders the All ErrorSummary 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/ErrorSummary/interaction.test.tsx

@@ -6,6 +6,10 @@ import { LinkedToCheckbox } from '@digigov/ui/feedback/ErrorSummary/__stories__/
 test('renders the LinkedToCheckbox Go to checkbox', async ({ mount, page }) => {
   await mount(<LinkedToCheckbox />);
   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 page.keyboard.press('Tab');
   await page.keyboard.press('Enter');
 

package/src/feedback/NotificationBanner/NotificationBanner.stories.js

@@ -1,4 +1,5 @@
 import NotificationBanner from '@digigov/ui/feedback/NotificationBanner';
+
 export default {
   title: 'Digigov UI/feedback/NotificationBanner',
   tags: ['Experimental'],
@@ -9,6 +10,41 @@ export default {
   component: NotificationBanner,
   displayName: 'NotificationBanner',
 };
+
+export const WithControls = {
+  args: {
+    title: 'Ειδοποίηση',
+    children: ' Σε 7 ημέρες θα μπορείτε να υποβάλετε την αίτηση.',
+    link: {
+      label: 'Προβολή αίτησης',
+      href: '#',
+    },
+    variant: 'info',
+    dense: false,
+  },
+  argTypes: {
+    title: {
+      control: { type: 'text' },
+    },
+    children: {
+      control: { type: 'text' },
+    },
+    link: {
+      control: { type: 'object' },
+    },
+    variant: {
+      options: ['info', 'success', 'error'],
+      control: { type: 'select' },
+    },
+    dense: {
+      control: { type: 'boolean' },
+    },
+  },
+  parameters: {
+    controls: { exclude: ['ref'] },
+  },
+};
+
 export { Default } from '@digigov/ui/feedback/NotificationBanner/__stories__/Default';
 export { Success } from '@digigov/ui/feedback/NotificationBanner/__stories__/Success';
 export { Dense } from '@digigov/ui/feedback/NotificationBanner/__stories__/Dense';

package/src/feedback/NotificationBanner/__snapshots__/index.spec.tsx.snap

@@ -1,23 +1,33 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the notification banner 1`] = `
-<NotificationBanner
-  title="Notification Banner Example"
->
-  this is a notification
-</NotificationBanner>
+Object {
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": Object {},
+  "key": null,
+  "props": Object {
+    "children": "this is a notification",
+    "title": "Notification Banner Example",
+  },
+  "type": [Function],
+}
 `;
 
 exports[`renders the notification banner with title and link 1`] = `
-<NotificationBanner
-  link={
-    Object {
+Object {
+  "$$typeof": Symbol(react.transitional.element),
+  "_owner": null,
+  "_store": Object {},
+  "key": null,
+  "props": Object {
+    "children": "this is a notification",
+    "link": Object {
       "href": "/",
       "label": "This is a label",
-    }
-  }
-  title="Notification Banner Example"
->
-  this is a notification
-</NotificationBanner>
+    },
+    "title": "Notification Banner Example",
+  },
+  "type": [Function],
+}
 `;

package/src/feedback/NotificationBanner/index.test.tsx

@@ -22,6 +22,10 @@ test('renders the All NotificationBanner 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();
 });