@digigov/ui 2.0.0-85c27c19 → 2.0.0-87b6232d

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

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

@@ -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,43 @@ 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);
+
+  // 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',
+  });
+  expect(screenshot).toMatchSnapshot();
+});
+
+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>button").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.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

@@ -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.mdx → doc.mdx}

@@ -11,13 +11,11 @@ User can better understand what has happened and also understand what the next s
 
 ## How to use
 
-### Default
+<code src="@digigov/ui/content/Timeline/__stories__/Default.tsx" />
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Timeline"
-  story="Default.tsx"
-/>
+## With dense style
+
+<code src="@digigov/ui/content/Timeline/__stories__/Dense.tsx" />
 
 ## API
 

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/__stories__/Default.tsx

@@ -11,7 +11,7 @@ export const Default = () => {
       message="Αντιγράφηκε στο πρόχειρο"
       id="copy-to-clipboard"
       onCopy={() => {
-        console.log('yess copied');
+        console.log('content copied!');
       }}
     >
       <Button color="secondary" aria-describedby="copy-to-clipboard">

package/src/feedback/CopyToClipboard/doc.mdx

@@ -0,0 +1,24 @@
+---
+id: copy-to-clipboard
+title: CopyToClipboard
+---
+
+# CopyToClipboard
+
+## How to use
+
+<code src="@digigov/ui/feedback/CopyToClipboard/__stories__/Default.tsx" />
+
+### As banner
+
+<code src="@digigov/ui/feedback/CopyToClipboard/__stories__/Banner.tsx" />
+
+### With dense style
+
+<code src="@digigov/ui/feedback/CopyToClipboard/__stories__/Dense.tsx" />
+
+## API
+
+See below for a complete reference to all of the props available to the components mentioned here.
+
+<ComponentProps componentName={['CopyToClipboardContainer']} />{' '}