@digigov/ui 1.2.0-a7ffb5dc → 2.0.0-0edebf87

package/src/app/Skeleton/__stories__/SpecificWidthAndHeight.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Skeleton } from '@digigov/ui/app/Skeleton';
+
+export const SpecificWidthAndHeight = () => (
+    <Skeleton width={200} height={200}/>
+);
+
+export default SpecificWidthAndHeight;

package/src/app/Skeleton/__stories__/TextSizes.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Skeleton } from '@digigov/ui/app/Skeleton';
+
+export const TextSizes = () => (
+  <>
+    <Skeleton mb={2} fontSize="xs" />
+    <Skeleton mb={2} fontSize="sm" />
+    <Skeleton mb={2} fontSize="md" />
+    <Skeleton mb={2} fontSize="lg" />
+    <Skeleton mb={2} fontSize="xl" />
+  </>
+);
+
+export default TextSizes;

package/src/app/Skeleton/__stories__/UnderTypography.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Skeleton } from '@digigov/ui/app/Skeleton';
+import Heading from '@digigov/ui/typography/Heading';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+
+export const UnderTypography = () => (
+  <>
+    <Heading>
+      <Skeleton />
+    </Heading>
+    <Paragraph>
+      <Skeleton />
+    </Paragraph>
+  </>
+);
+
+export default UnderTypography;

package/src/app/Skeleton/__stories__/WithChildren.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Skeleton } from '@digigov/ui/app/Skeleton';
+import { NormalText } from '@digigov/ui/typography/NormalText';
+
+export const WithChildren = () => (
+  <Skeleton>
+    <NormalText>Κείμενο</NormalText>
+  </Skeleton>
+);
+
+export default WithChildren;

package/src/app/Skeleton/index.tsx

@@ -0,0 +1,4 @@
+export * from '@digigov/react-core/Skeleton';
+
+import Skeleton from '@digigov/react-core/Skeleton';
+export default Skeleton;

package/src/app/ThemeOptions/index.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import clsx from 'clsx';
-import { BaseProps } from '@digigov/react-core';
+import { BaseProps } from '@digigov/react-core/Base';
 import useFontSize, {
   FontSizeOptions,
 } from '@digigov/ui/app/hooks/useFontSize';

package/src/content/Accordion/__stories__/Auto.tsx

@@ -9,7 +9,7 @@ import {
   AccordionSectionSummaryHeading,
   AccordionCloseAllButtonAuto,
   AccordionOpenAllButtonAuto,
-} from '@digigov/ui/content/Accordion/';
+} from '@digigov/ui/content/Accordion';
 
 import { List } from '@digigov/ui/content/List/List';
 import { ListItem } from '@digigov/ui/content/List/ListItem';
@@ -19,7 +19,7 @@ import { Paragraph } from '@digigov/ui/typography/Paragraph';
 
 export const Auto = () => {
   return (
-    <AccordionAuto defaultOpen={'1'} singleOpen>
+    <AccordionAuto defaultOpen={'1'}>
       <AccordionControls>
         <AccordionOpenAllButtonAuto>Open all</AccordionOpenAllButtonAuto>
         <AccordionCloseAllButtonAuto>Close all</AccordionCloseAllButtonAuto>

package/src/content/Accordion/auto.tsx

@@ -10,7 +10,7 @@ import {
 } from '@digigov/ui/content/Accordion';
 import { UseAccordionReturn } from '@digigov/ui/content/Accordion/hooks';
 
-export interface ButtonAccordionAutoProps extends ButtonProps {}
+export interface ButtonAccordionAutoProps extends ButtonProps { }
 export interface AccordionSectionAutoProps extends AccordionSectionProps {
   id: string;
 }

package/src/content/Accordion/hooks.ts

@@ -119,7 +119,6 @@ export const useAccordion = ({
           });
         } else {
           setCurrentOpen({ ...current, [id]: e.target?.open });
-          console.log('current2 is', current);
         }
       };
 

package/src/content/Accordion/index.mdx

@@ -3,18 +3,19 @@ id: accordion
 title: Accordion
 ---
 
+ 
 # Accordion
 
+
+
 This component is currently experimental because adding a summary line with more than a few short words will likely make the button text too long, particularly for users of screen readers.
 
 The accordion component lets users show and hide sections of related content on a page.
 
-```bash
-import Accordion from '@digigov/ui/content/Accordion';
-```
-
 ## How to use
 
+### Default Accordion
+
 <Story
   packageName="@digigov/ui"
   component="content/Accordion"
@@ -38,4 +39,7 @@ implementation in the [ARIA Authoring Practices Guide (APG)](https://www.w3.org/
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Accordion" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Accordion", "AccordionSection","AccordionSectionSummary","AccordionSectionSummaryHeading","AccordionSectionContent"]} />
+

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Auto } from '@digigov/ui/content/Accordion/__stories__/Auto';
+import { Default } from '@digigov/ui/content/Accordion/__stories__/Default';
+import { WithHints } from '@digigov/ui/content/Accordion/__stories__/WithHints';
+import { WithHook } from '@digigov/ui/content/Accordion/__stories__/WithHook';
+
+test('renders the All Accordion variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Auto">
+      <Auto />
+    </TestVariant>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="WithHints">
+      <WithHints />
+    </TestVariant>
+    <TestVariant title="WithHook">
+      <WithHook />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+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);
+ await page.locator("#root>div>details:nth-child(2)>summary").click();
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/content/Blockquote/index.mdx

@@ -9,10 +9,6 @@ This component is currently experimental because adding a summary line with more
 
 The Blockquote component lets users show and hide sections of related content on a page.
 
-```bash
-import Blockquote from '@digigov/ui/content/Blockquote';
-```
-
 ## How to use
 
 <Story
@@ -23,4 +19,6 @@ import Blockquote from '@digigov/ui/content/Blockquote';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Blockquote" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Blockquote"]} />

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Default } from '@digigov/ui/content/Blockquote/__stories__/Default';
+import { Dense } from '@digigov/ui/content/Blockquote/__stories__/Dense';
+
+test('renders the All Blockquote variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="Dense">
+      <Dense />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/content/Card/index.mdx

@@ -8,10 +8,6 @@ title: Card
 Cards can be used to divide and organise interface content for better understandability and readability.
 When used correctly, Cards can help users to scan through vast amounts of information quicker.
 
-```bash
-import Card from '@digigov/ui/content/Card';
-```
-
 ## How to use
 
 <Story packageName="@digigov/ui" component="content/Card" story="Default.tsx" />
@@ -102,4 +98,6 @@ Cards also provides styles for actionable elements such as Buttons or Links.
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Card" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Card", "CardHeading", "CardContent", "CardAction"]} /> 

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

@@ -0,0 +1,60 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Default } from '@digigov/ui/content/Card/__stories__/Default';
+import { Dense } from '@digigov/ui/content/Card/__stories__/Dense';
+import { WithClickableContent } from '@digigov/ui/content/Card/__stories__/WithClickableContent';
+import { WithClickableLink } from '@digigov/ui/content/Card/__stories__/WithClickableLink';
+import { WithDarkBorder } from '@digigov/ui/content/Card/__stories__/WithDarkBorder';
+import { WithDarkTopBorder } from '@digigov/ui/content/Card/__stories__/WithDarkTopBorder';
+import { WithDivider } from '@digigov/ui/content/Card/__stories__/WithDivider';
+import { WithGrayBorder } from '@digigov/ui/content/Card/__stories__/WithGrayBorder';
+import { WithGrayTopBorder } from '@digigov/ui/content/Card/__stories__/WithGrayTopBorder';
+import { WithGroupButton } from '@digigov/ui/content/Card/__stories__/WithGroupButton';
+import { WithLink } from '@digigov/ui/content/Card/__stories__/WithLink';
+
+test('renders the All Card variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="Dense">
+      <Dense />
+    </TestVariant>
+    <TestVariant title="WithClickableContent">
+      <WithClickableContent />
+    </TestVariant>
+    <TestVariant title="WithClickableLink">
+      <WithClickableLink />
+    </TestVariant>
+    <TestVariant title="WithDarkBorder">
+      <WithDarkBorder />
+    </TestVariant>
+    <TestVariant title="WithDarkTopBorder">
+      <WithDarkTopBorder />
+    </TestVariant>
+    <TestVariant title="WithDivider">
+      <WithDivider />
+    </TestVariant>
+    <TestVariant title="WithGrayBorder">
+      <WithGrayBorder />
+    </TestVariant>
+    <TestVariant title="WithGrayTopBorder">
+      <WithGrayTopBorder />
+    </TestVariant>
+    <TestVariant title="WithGroupButton">
+      <WithGroupButton />
+    </TestVariant>
+    <TestVariant title="WithLink">
+      <WithLink />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/content/Chip/index.mdx

@@ -9,10 +9,6 @@ Chips allow users to enter information, make selections, filter content, or trig
 While buttons are expected to appear consistently and with familiar calls to action,
 chips should appear dynamically as a group of multiple interactive elements.
 
-```bash
-import Chip from '@digigov/ui/content/Chip';
-```
-
 ## How to use
 
 <Story packageName="@digigov/ui" component="content/Chip" story="Default.tsx" />
@@ -51,4 +47,7 @@ import Chip from '@digigov/ui/content/Chip';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Chip" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Chip"]} />
+

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { ClickableChip } from '@digigov/ui/content/Chip/__stories__/ClickableChip';
+import { ClickableDeletableChip } from '@digigov/ui/content/Chip/__stories__/ClickableDeletableChip';
+import { Default } from '@digigov/ui/content/Chip/__stories__/Default';
+import { DeletableChip } from '@digigov/ui/content/Chip/__stories__/DeletableChip';
+import { GroupOfChips } from '@digigov/ui/content/Chip/__stories__/GroupOfChips';
+
+test('renders the All Chip variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="ClickableChip">
+      <ClickableChip />
+    </TestVariant>
+    <TestVariant title="ClickableDeletableChip">
+      <ClickableDeletableChip />
+    </TestVariant>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="DeletableChip">
+      <DeletableChip />
+    </TestVariant>
+    <TestVariant title="GroupOfChips">
+      <GroupOfChips />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/content/Details/Details.stories.playwright.json

@@ -10,12 +10,6 @@
               "args": {
                 "selector": "html>body>div:nth-child(5)>details>summary"
               }
-            },
-            {
-              "name": "click",
-              "args": {
-                "selector": "html"
-              }
             }
           ],
           "id": "Vmcdm2eBOyC1",
@@ -24,4 +18,4 @@
       ]
     }
   }
-}
+}

package/src/content/Details/index.mdx

@@ -7,10 +7,6 @@ title: Details
 
 The details component is a short link that shows more detailed help text when a user clicks on it.
 
-```bash
-import Details from '@digigov/ui/content/Details';
-```
-
 ## How to use
 
 <Story
@@ -26,4 +22,6 @@ implementation in the ARIA Authoring Practices Guide (APG) at [Disclosure](https
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Details" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Details", "DetailsSummary", "DetailsContent"]} />

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Default } from '@digigov/ui/content/Details/__stories__/Default';
+
+test('renders the All Details variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/content/Details/interaction.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+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);
+ await page.locator("#root>details>summary").click();
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/content/List/__stories__/Default.tsx

@@ -1,18 +1,17 @@
 import React from 'react';
 import { List } from '@digigov/ui/content/List/List';
 import { ListItem } from '@digigov/ui/content/List/ListItem';
-import { Link } from '@digigov/ui/navigation/Link';
 
 export const Default = () => (
   <List>
     <ListItem>
-      <Link>Αποτελέσματα διαγνωστικών εργαστηριακών εξετάσεων</Link>
+      Αποτελέσματα διαγνωστικών εργαστηριακών εξετάσεων
     </ListItem>
     <ListItem>
-      <Link>Πτυχία τριτοβάθμιας εκπαίδευσης</Link>
+      Πτυχία τριτοβάθμιας εκπαίδευσης
     </ListItem>
     <ListItem>
-      <Link>Υπεύθυνη Δήλωση / Εξουσιοδότηση / Γνήσιο Υπογραφής</Link>
+      Υπεύθυνη Δήλωση / Εξουσιοδότηση / Γνήσιο Υπογραφής
     </ListItem>
   </List>
 );

package/src/content/List/index.mdx

@@ -3,10 +3,6 @@ id: list
 title: List
 ---
 
-```bash
-import List from '@digigov/ui/content/List';
-```
-
 ## How to use
 
 ### Default
@@ -39,4 +35,6 @@ import List from '@digigov/ui/content/List';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="List" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["List", "ListItem"]} />

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { BulletList } from '@digigov/ui/content/List/__stories__/BulletList';
+import { Default } from '@digigov/ui/content/List/__stories__/Default';
+import { HorizontalList } from '@digigov/ui/content/List/__stories__/HorizontalList';
+import { NestedBulletList } from '@digigov/ui/content/List/__stories__/NestedBulletList';
+import { NumberedList } from '@digigov/ui/content/List/__stories__/NumberedList';
+import { WithExtraSpace } from '@digigov/ui/content/List/__stories__/WithExtraSpace';
+
+test('renders the All List variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="BulletList">
+      <BulletList />
+    </TestVariant>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="HorizontalList">
+      <HorizontalList />
+    </TestVariant>
+    <TestVariant title="NestedBulletList">
+      <NestedBulletList />
+    </TestVariant>
+    <TestVariant title="NumberedList">
+      <NumberedList />
+    </TestVariant>
+    <TestVariant title="WithExtraSpace">
+      <WithExtraSpace />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/content/SafeHTML/index.tsx

@@ -26,7 +26,7 @@ const elementClassNameMapping = {
 };
 
 if (typeof window !== 'undefined') {
-  DomPurify.addHook('afterSanitizeAttributes', function (node) {
+  DomPurify.addHook('afterSanitizeAttributes', function(node) {
     if (node.tagName.toLowerCase() in elementClassNameMapping) {
       node.setAttribute(
         'class',
@@ -73,7 +73,7 @@ export const SafeHTML = ({
   content,
   tags,
   Tag = 'span',
-  style = {},
+  ...props
 }: SafeHTMLProps) => {
   if (tags) {
     tags.push(...defaultTags);
@@ -89,11 +89,10 @@ export const SafeHTML = ({
   return (
     <Tag
       // @ts-ignore
-      style={{ whiteSpace: 'break-spaces', ...style }}
-      className="ds-body"
       dangerouslySetInnerHTML={{
         __html: parsedHTML,
       }}
+      {...props}
     />
   );
 };

package/src/content/StepNav/index.mdx

@@ -7,10 +7,6 @@ title: StepNav
 
 StepNav is a component that displays number of steps required to complete a process inside your application.
 
-```bash
-import StepNav from '@digigov/ui/content/StepNav';
-```
-
 ## How to use
 
 ### Default
@@ -21,10 +17,37 @@ import StepNav from '@digigov/ui/content/StepNav';
   story="Default.tsx"
 />
 
-### With hints
+### StepNav with hints
 
 <Story
   packageName="@digigov/ui"
   component="content/StepNav"
   story="WithHints.tsx"
 />
+
+### StepNav with dense
+
+<Story
+  packageName="@digigov/ui"
+  component="content/StepNav"
+  story="Dense.tsx"
+/>
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={
+  [
+    "StepNav",
+    "StepNavControls", 
+    "StepNavList",
+    "StepNavListItem",
+    "StepNavAccordion",
+    "StepNavAccordionSummary",
+    "StepNavAccordionSummaryHeading",
+    "StepNavCircleNumber",
+    "StepNavAccordionHeadingTitle",
+    "StepNavAccordionHeadingText",
+    "StepNavAccordionContent"
+  ]} />

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Auto } from '@digigov/ui/content/StepNav/__stories__/Auto';
+import { Default } from '@digigov/ui/content/StepNav/__stories__/Default';
+import { Dense } from '@digigov/ui/content/StepNav/__stories__/Dense';
+import { WithHints } from '@digigov/ui/content/StepNav/__stories__/WithHints';
+import { WithHook } from '@digigov/ui/content/StepNav/__stories__/WithHook';
+
+test('renders the All StepNav variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Auto">
+      <Auto />
+    </TestVariant>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="Dense">
+      <Dense />
+    </TestVariant>
+    <TestVariant title="WithHints">
+      <WithHints />
+    </TestVariant>
+    <TestVariant title="WithHook">
+      <WithHook />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+