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

package/src/app/QrCodeViewer/index.test.tsx

@@ -18,6 +18,10 @@ test('renders the All QrCodeViewer 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/app/Skeleton/Skeleton.stories.js

@@ -7,6 +7,36 @@ export default {
   component: Skeleton,
   displayName: 'Skeleton',
 };
+
+export const WithControls = {
+  args: {
+    variant: 'text',
+    fontSize: 'sm',
+    animation: false,
+  },
+
+  argTypes: {
+    variant: {
+      options: ['circular', 'rectangular', 'text', 'button'],
+      control: { type: 'radio' },
+    },
+    fontSize: {
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      control: { type: 'select' },
+      if: { arg: 'variant', eq: 'text' },
+    },
+    width: {
+      control: { type: 'number', min: 0 },
+    },
+    height: {
+      control: { type: 'number', min: 0 },
+    },
+    animation: {
+      control: { type: 'boolean' },
+    },
+  },
+};
+
 export { Default } from '@digigov/ui/app/Skeleton/__stories__/Default';
 export { TextSizes } from '@digigov/ui/app/Skeleton/__stories__/TextSizes';
 export { Rectangular } from '@digigov/ui/app/Skeleton/__stories__/Rectangular';

package/src/app/Skeleton/index.test.tsx

@@ -46,6 +46,10 @@ test('renders the All Skeleton 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/Accordion/Accordion.stories.jsx

@@ -0,0 +1,86 @@
+import React from 'react';
+
+import {
+  Accordion,
+  AccordionSection,
+  AccordionSectionContent,
+  AccordionSectionSummary,
+  AccordionSectionSummaryHeading,
+} from '@digigov/ui/content/Accordion';
+import { Hint } from '@digigov/ui/typography/Hint';
+
+export default {
+  title: 'Digigov UI/content/Accordion',
+  tags: ['Experimental'],
+  description:
+    'The accordion component lets users show and hide sections of related content on a page.',
+  link: 'https://guide.services.gov.gr/docs/components/accordion',
+  component: Accordion,
+  displayName: 'Accordion',
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <Accordion
+        horizontalBorders={args.horizontalBorders}
+        summaryColor={args.summaryColor}
+        dense={args.dense}
+      >
+        <AccordionSection open>
+          <AccordionSectionSummary>
+            <AccordionSectionSummaryHeading aria-controls="content1">
+              {args.title}
+            </AccordionSectionSummaryHeading>
+            {args.hint > 0 && <Hint>{args.hintMessage}</Hint>}
+          </AccordionSectionSummary>
+          <AccordionSectionContent id="content1">
+            {args.content}
+          </AccordionSectionContent>
+        </AccordionSection>
+      </Accordion>
+    );
+  },
+  args: {
+    title: 'Διαφορές με το δημόσιο',
+    hint: true,
+    hintMessage:
+      'Δικαστικές και εξωδικαστικές διαφορές με το Δημόσιο, εκκαθάριση δικαστικών δαπανών κ.ά.',
+    content:
+      'Παρακάτω μπορείτε να δείτε την διαθέσιμη και ενεργή υπηρεσία που αφορά το επιλεγμένο γεγονός ζωής.',
+    horizontalBorders: 'top',
+    summaryColor: 'primary',
+    dense: false,
+  },
+  argTypes: {
+    title: {
+      control: { type: 'text' },
+    },
+    hint: {
+      control: { type: 'boolean' },
+    },
+    hintMessage: {
+      control: { type: 'text' },
+      if: { arg: 'hint', eq: true },
+    },
+    content: {
+      control: { type: 'text' },
+    },
+    horizontalBorders: {
+      options: ['none', 'top', 'bottom'],
+      control: { type: 'select' },
+    },
+    summaryColor: {
+      options: ['primary', 'secondary'],
+      control: { type: 'select' },
+    },
+    dense: {
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+export { Default } from '@digigov/ui/content/Accordion/__stories__/Default';
+export { WithHints } from '@digigov/ui/content/Accordion/__stories__/WithHints';
+export { WithHook } from '@digigov/ui/content/Accordion/__stories__/WithHook';
+export { Auto } from '@digigov/ui/content/Accordion/__stories__/Auto';

package/src/content/Accordion/hooks.ts

@@ -34,7 +34,7 @@ export const useAccordion = ({
   singleOpen = false,
 }: UseAccordionProps = {}): UseAccordionReturn => {
   const sectionsRef = useRef<
-    Map<AccordionItemId, React.RefObject<HTMLDetailsElement>>
+    Map<AccordionItemId, React.RefObject<HTMLDetailsElement | null>>
   >(new Map());
   const [current, setCurrentOpen] = useState(
     defaultOpen ? { [defaultOpen]: true } : {}

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

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

@@ -6,6 +6,10 @@ import { Default } from '@digigov/ui/content/Accordion/__stories__/Default';
 test('renders the Default Mouse navigation', 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>details:nth-child(2)>summary').click();
   const screenshot = await page.screenshot({
     fullPage: true,

package/src/content/Blockquote/Blockquote.stories.js

@@ -7,5 +7,25 @@ export default {
   component: Blockquote,
   displayName: 'Blockquote',
 };
+
+export const WithControls = {
+  args: {
+    children:
+      'Οι προσωπικές πληροφορίες που συμπληρώνετε στην αίτησή σας θα χρησιμοποιηθούν αποκλειστικά για την εξυπηρέτησή σας.',
+    dense: false,
+  },
+  argTypes: {
+    children: {
+      control: { type: 'text' },
+    },
+    dense: {
+      control: { type: 'boolean' },
+    },
+  },
+  parameters: {
+    controls: { exclude: ['ref'] },
+  },
+};
+
 export { Default } from '@digigov/ui/content/Blockquote/__stories__/Default';
 export { Dense } from '@digigov/ui/content/Blockquote/__stories__/Dense';

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

@@ -18,6 +18,10 @@ test('renders the All Blockquote 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/Card/Card.stories.jsx

@@ -0,0 +1,118 @@
+import React from 'react';
+
+import {
+  Card,
+  CardHeading,
+  CardContent,
+  CardAction,
+} from '@digigov/ui/content/Card';
+import { Button } from '@digigov/ui/form/Button';
+import { LinkBase } from '@digigov/ui/navigation/Link';
+
+export default {
+  title: 'Digigov UI/content/Card',
+  tags: ['Experimental'],
+  description:
+    'Cards can be used to divide and organise interface content for better understandability and readability',
+  link: 'https://guide.services.gov.gr/docs/components/card',
+  component: Card,
+  displayName: 'Card',
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <Card
+        variant={args.variant}
+        borderColor={args.borderColor}
+        callToAction={args.callToAction}
+        dense={args.dense}
+        fullHeight={args.fullHeight}
+      >
+        <CardHeading>
+          {args.callToAction || args.action === 'title' ? (
+            <LinkBase href="#">{args.title} </LinkBase>
+          ) : (
+            args.title
+          )}
+        </CardHeading>
+        <CardContent>{args.content}</CardContent>
+        {args.action === 'button' && (
+          <CardAction>
+            <Button>Είσοδος</Button>
+          </CardAction>
+        )}
+        {args.action === 'link' && (
+          <CardAction>
+            <LinkBase href="#">Περισσότερα</LinkBase>
+          </CardAction>
+        )}
+      </Card>
+    );
+  },
+  args: {
+    title: 'Γεωργία και κτηνοτροφία',
+    content:
+      'Διαδικασίες, επιδοτήσεις και αποζημιώσεις για την γεωργική, κτηνοτροφική ή αλιευτική σας δραστηριότητα.',
+    action: 'button',
+    actionButtonText: 'Συνέχεια',
+    actionButtonLink: 'Συνέχεια',
+    variant: 'default',
+    borderColor: 'light',
+    callToAction: false,
+    dense: false,
+    fullHeight: false,
+  },
+  argTypes: {
+    title: {
+      control: { type: 'text' },
+    },
+    content: {
+      control: { type: 'text' },
+    },
+    action: {
+      options: ['button', 'link', 'title'],
+      control: { type: 'select' },
+    },
+    actionButtonText: {
+      control: { type: 'text' },
+      if: { arg: 'action', eq: 'button' },
+    },
+    actionButtonLink: {
+      control: { type: 'text' },
+      if: { arg: 'action', eq: 'link' },
+    },
+    variant: {
+      options: ['border', 'divider', 'border-top', 'default'],
+      control: { type: 'select' },
+    },
+    borderColor: {
+      options: ['light', 'dark'],
+      control: { type: 'inline-radio' },
+      if: { arg: 'variant', neq: 'default' },
+    },
+    callToAction: {
+      control: { type: 'boolean' },
+    },
+    dense: {
+      control: { type: 'boolean' },
+    },
+    fullHeight: {
+      control: { type: 'boolean' },
+    },
+  },
+  parameters: {
+    controls: { exclude: ['ref'] },
+  },
+};
+export { Default } from '@digigov/ui/content/Card/__stories__/Default';
+export { WithGrayBorder } from '@digigov/ui/content/Card/__stories__/WithGrayBorder';
+export { WithDarkBorder } from '@digigov/ui/content/Card/__stories__/WithDarkBorder';
+export { WithGrayTopBorder } from '@digigov/ui/content/Card/__stories__/WithGrayTopBorder';
+export { WithDarkTopBorder } from '@digigov/ui/content/Card/__stories__/WithDarkTopBorder';
+export { WithDivider } from '@digigov/ui/content/Card/__stories__/WithDivider';
+export { WithClickableContent } from '@digigov/ui/content/Card/__stories__/WithClickableContent';
+export { WithClickableLink } from '@digigov/ui/content/Card/__stories__/WithClickableLink';
+export { WithGroupButton } from '@digigov/ui/content/Card/__stories__/WithGroupButton';
+export { WithLink } from '@digigov/ui/content/Card/__stories__/WithLink';
+export { Dense } from '@digigov/ui/content/Card/__stories__/Dense';

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

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

@@ -6,6 +6,10 @@ import { WithClickableContent } from '@digigov/ui/content/Card/__stories__/WithC
 test('renders the WithClickableContent Click card', async ({ mount, page }) => {
   await mount(<WithClickableContent />);
   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>div:nth-child(1)>a').click();
   const screenshot = await page.screenshot({
     fullPage: true,

package/src/content/Chip/Chip.stories.js

@@ -4,6 +4,28 @@ export default {
   component: Chip,
   displayName: 'Chip',
 };
+
+export const WithControls = {
+  args: {
+    children: 'Ετικέτα',
+    onClick: true,
+    onDelete: true,
+  },
+  argTypes: {
+    children: {
+      control: { type: 'text' },
+    },
+    onClick: {
+      control: { type: 'boolean' },
+    },
+    onDelete: {
+      control: { type: 'boolean' },
+    },
+  },
+  parameters: {
+    controls: { exclude: ['ref'] },
+  },
+};
 export { Default } from '@digigov/ui/content/Chip/__stories__/Default';
 export { ClickableChip } from '@digigov/ui/content/Chip/__stories__/ClickableChip';
 export { DeletableChip } from '@digigov/ui/content/Chip/__stories__/DeletableChip';

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

@@ -30,6 +30,10 @@ test('renders the All Chip 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/Details/index.test.tsx

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

@@ -6,6 +6,10 @@ import { Default } from '@digigov/ui/content/Details/__stories__/Default';
 test('renders the Default Open Details', 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>details>summary').click();
   const screenshot = await page.screenshot({
     fullPage: true,

package/src/content/List/List.stories.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { List } from '@digigov/ui/content/List/List';
+import { ListItem } from '@digigov/ui/content/List/ListItem';
+
+export default {
+  title: 'Digigov UI/content/List',
+  description:
+    'Use lists to make blocks of text easier to read, and to break information into manageable chunks.',
+  link: 'https://guide.services.gov.gr/docs/styles/typography#lists',
+  component: List,
+  displayName: 'List',
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <List listStyle={args.listStyle} dense={args.dense} layout={args.layout}>
+        {args.listItems.map((item, index) => (
+          <ListItem key={index}>{item}</ListItem>
+        ))}
+      </List>
+    );
+  },
+  args: {
+    listStyle: 'none',
+    layout: 'vertical',
+    dense: false,
+    listItems: [
+      'Αποτελέσματα διαγνωστικών εργαστηριακών εξετάσεων',
+      'Πτυχία τριτοβάθμιας εκπαίδευσης',
+      'Υπεύθυνη Δήλωση / Εξουσιοδότηση / Γνήσιο Υπογραφής',
+    ],
+  },
+  argTypes: {
+    listStyle: {
+      options: ['none', 'bullet', 'number'],
+      control: { type: 'select' },
+    },
+    layout: {
+      options: ['vertical', 'horizontal'],
+      control: { type: 'select' },
+    },
+    dense: {
+      control: { type: 'boolean' },
+    },
+    listItems: {
+      control: { type: 'object' },
+    },
+  },
+  parameters: {
+    controls: { exclude: ['ref'] },
+  },
+};
+
+export { Default } from '@digigov/ui/content/List/__stories__/Default';
+export { BulletList } from '@digigov/ui/content/List/__stories__/BulletList';
+export { NumberedList } from '@digigov/ui/content/List/__stories__/NumberedList';
+export { HorizontalList } from '@digigov/ui/content/List/__stories__/HorizontalList';
+export { WithExtraSpace } from '@digigov/ui/content/List/__stories__/WithExtraSpace';
+export { NestedBulletList } from '@digigov/ui/content/List/__stories__/NestedBulletList';

package/src/content/List/__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(List2)>
-  this is some random warning text
-</ForwardRef(List2)>
+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/content/List/index.test.tsx

@@ -34,6 +34,10 @@ test('renders the All List 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/Markdown/index.test.tsx

@@ -14,6 +14,10 @@ test('renders the All Markdown 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/SafeHTML/index.test.tsx

@@ -14,6 +14,10 @@ test('renders the All SafeHTML 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/StepNav/index.test.tsx

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

@@ -6,6 +6,10 @@ import { Default } from '@digigov/ui/content/StepNav/__stories__/Default';
 test('renders the Default Click 1st and all', 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>ol>li:nth-child(1)>details>summary>h2>div>span:nth-child(1)'

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

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

@@ -9,6 +9,10 @@ test('renders the WithActions Navigate with keyboard', async ({
 }) => {
   await mount(<WithActions />);
   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('Tab');