@digigov/ui 2.0.0-7d9a8d86 → 2.0.0-834daea4

package/src/app/QrCodeViewer/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 { Custom } from '@digigov/ui/app/QrCodeViewer/__stories__/Custom';
+import { Default } from '@digigov/ui/app/QrCodeViewer/__stories__/Default';
+
+test('renders the All QrCodeViewer variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Custom">
+      <Custom />
+    </TestVariant>
+    <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/app/Skeleton/Skeleton.stories.js

@@ -0,0 +1,18 @@
+import Skeleton from '@digigov/ui/app/Skeleton';
+export default {
+  title: 'Digigov UI/app/Skeleton',
+  description:
+    'Use a set of Skeleton components to display placeholder content when data is loading.',
+
+  component: Skeleton,
+  displayName: 'Skeleton',
+};
+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';
+export { Circular } from '@digigov/ui/app/Skeleton/__stories__/Circular';
+export { Button } from '@digigov/ui/app/Skeleton/__stories__/Button';
+export { NoAnimation } from '@digigov/ui/app/Skeleton/__stories__/NoAnimation';
+export { SpecificWidthAndHeight } from '@digigov/ui/app/Skeleton/__stories__/SpecificWidthAndHeight';
+export { UnderTypography } from '@digigov/ui/app/Skeleton/__stories__/UnderTypography';
+export { WithChildren } from '@digigov/ui/app/Skeleton/__stories__/WithChildren';

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Skeleton } from '@digigov/ui/app/Skeleton';
+
+export const Button = () => <Skeleton variant="button" />;
+
+export default Button;

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

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

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Skeleton } from '@digigov/ui/app/Skeleton';
+
+export const Default = () => <Skeleton />;
+
+export default Default;

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Skeleton } from '@digigov/ui/app/Skeleton';
+
+export const NoAnimation = () => <Skeleton animation={false} />;
+
+export default NoAnimation;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Skeleton } from '@digigov/ui/app/Skeleton';
+
+export const Rectangular = () => (
+  <Skeleton variant="rectangular" height={150} />
+);
+
+export default Rectangular;

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/doc.mdx

@@ -0,0 +1,42 @@
+---
+id: skeleton
+title: Skeleton
+---
+
+# Skeleton
+
+Use Skeleton component while a page is loading.
+
+## How to use
+
+<code src="@digigov/ui/app/Skeleton/__stories__/Default.tsx" />
+
+### Button
+
+<code src="@digigov/ui/app/Skeleton/__stories__/Button.tsx" />
+
+### Circular
+
+<code src="@digigov/ui/app/Skeleton/__stories__/Circular.tsx" />
+
+### Rectangular
+
+<code src="@digigov/ui/app/Skeleton/__stories__/Rectangular.tsx" />
+
+### Specific width and height
+
+<code src="@digigov/ui/app/Skeleton/__stories__/SpecificWidthAndHeight.tsx" />
+
+### Under Typography
+
+<code src="@digigov/ui/app/Skeleton/__stories__/UnderTypography.tsx" />
+
+### No Animation
+
+<code src="@digigov/ui/app/Skeleton/__stories__/NoAnimation.tsx" />
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Skeleton"]} />

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

@@ -0,0 +1,52 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Button } from '@digigov/ui/app/Skeleton/__stories__/Button';
+import { Circular } from '@digigov/ui/app/Skeleton/__stories__/Circular';
+import { Default } from '@digigov/ui/app/Skeleton/__stories__/Default';
+import { NoAnimation } from '@digigov/ui/app/Skeleton/__stories__/NoAnimation';
+import { Rectangular } from '@digigov/ui/app/Skeleton/__stories__/Rectangular';
+import { SpecificWidthAndHeight } from '@digigov/ui/app/Skeleton/__stories__/SpecificWidthAndHeight';
+import { TextSizes } from '@digigov/ui/app/Skeleton/__stories__/TextSizes';
+import { UnderTypography } from '@digigov/ui/app/Skeleton/__stories__/UnderTypography';
+import { WithChildren } from '@digigov/ui/app/Skeleton/__stories__/WithChildren';
+
+test('renders the All Skeleton variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Button">
+      <Button />
+    </TestVariant>
+    <TestVariant title="Circular">
+      <Circular />
+    </TestVariant>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="NoAnimation">
+      <NoAnimation />
+    </TestVariant>
+    <TestVariant title="Rectangular">
+      <Rectangular />
+    </TestVariant>
+    <TestVariant title="SpecificWidthAndHeight">
+      <SpecificWidthAndHeight />
+    </TestVariant>
+    <TestVariant title="TextSizes">
+      <TextSizes />
+    </TestVariant>
+    <TestVariant title="UnderTypography">
+      <UnderTypography />
+    </TestVariant>
+    <TestVariant title="WithChildren">
+      <WithChildren />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

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/content/Accordion/Accordion.stories.js

@@ -8,7 +8,7 @@ export default {
   component: Accordion,
   displayName: 'Accordion',
 };
-export * from '@digigov/ui/content/Accordion/__stories__/Default';
-export * from '@digigov/ui/content/Accordion/__stories__/WithHints';
-export * from '@digigov/ui/content/Accordion/__stories__/WithHook';
-export * from '@digigov/ui/content/Accordion/__stories__/Auto';
+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/__snapshots__/index.spec.tsx.snap

@@ -1,157 +1,58 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the Accordion 1`] = `
-<ForwardRef(Accordion)>
-  <ForwardRef(Base)
-    as="div"
-    className="ds-accordion--border-top ds-accordion"
-  >
+<body>
+  <div>
     <div
-      className="ds-accordion--border-top ds-accordion"
+      class=" ds-accordion ds-accordion--border-top"
     >
-      <withDeprecationComponent>
-        <ForwardRef(AccordionSection)>
-          <ForwardRef(Base)
-            as="details"
-            className="ds-accordion__section"
+      <details
+        class=" ds-accordion__section"
+        open=""
+      >
+        <summary
+          aria-level="2"
+          class=" ds-accordion__section-summary"
+          role="heading"
+        >
+          <h2
+            aria-controls="content1"
+            class=" ds-accordion__section-heading"
+            role="button"
           >
-            <details
-              className="ds-accordion__section"
+            <span
+              class="ds-accordion__section-button"
             >
-              <withDeprecationComponent>
-                <Component>
-                  <ForwardRef(AccordionSectionSummary)>
-                    <ForwardRef(Base)
-                      aria-level={2}
-                      as="summary"
-                      className="ds-accordion__section-summary"
-                      role="heading"
-                    >
-                      <summary
-                        aria-level={2}
-                        className="ds-accordion__section-summary"
-                        role="heading"
-                      >
-                        <ForwardRef(AccordionSectionSummaryHeading)
-                          aria-expanded={false}
-                          onClick={[Function]}
-                        >
-                          <ForwardRef(Base)
-                            aria-expanded={false}
-                            as="h2"
-                            className="ds-accordion__section-heading"
-                            onClick={[Function]}
-                            role="button"
-                          >
-                            <h2
-                              aria-expanded={false}
-                              className="ds-accordion__section-heading"
-                              onClick={[Function]}
-                              role="button"
-                            >
-                              <span
-                                className="ds-accordion__section-button"
-                              >
-                                Βασικες Ρυθμισεις
-                              </span>
-                            </h2>
-                          </ForwardRef(Base)>
-                        </ForwardRef(AccordionSectionSummaryHeading)>
-                      </summary>
-                    </ForwardRef(Base)>
-                  </ForwardRef(AccordionSectionSummary)>
-                </Component>
-              </withDeprecationComponent>
-              <withDeprecationComponent>
-                <ForwardRef(AccordionSectionContent)>
-                  <ForwardRef(Base)
-                    as="div"
-                    className="ds-accordion__section-content"
-                  >
-                    <div
-                      className="ds-accordion__section-content"
-                    >
-                      Περιεχομενο Βασικων Ρυθμισεων
-                    </div>
-                  </ForwardRef(Base)>
-                </ForwardRef(AccordionSectionContent)>
-              </withDeprecationComponent>
-            </details>
-          </ForwardRef(Base)>
-        </ForwardRef(AccordionSection)>
-      </withDeprecationComponent>
-      <withDeprecationComponent>
-        <ForwardRef(AccordionSection)>
-          <ForwardRef(Base)
-            as="details"
-            className="ds-accordion__section"
+              Διαφορές με το δημόσιο
+            </span>
+          </h2>
+        </summary>
+        <div
+          class=" ds-accordion__section-content"
+          id="content1"
+        >
+          <p
+            class=" ds-body"
           >
-            <details
-              className="ds-accordion__section"
+            Παρακάτω μπορείτε να δείτε την διαθέσιμη και ενεργή υπηρεσία που αφορά το επιλεγμένο γεγονός ζωής.
+          </p>
+          <ol
+            class=" ds-list"
+          >
+            <li
+              class=" ds-list__item"
             >
-              <withDeprecationComponent>
-                <Component>
-                  <ForwardRef(AccordionSectionSummary)>
-                    <ForwardRef(Base)
-                      aria-level={2}
-                      as="summary"
-                      className="ds-accordion__section-summary"
-                      role="heading"
-                    >
-                      <summary
-                        aria-level={2}
-                        className="ds-accordion__section-summary"
-                        role="heading"
-                      >
-                        <ForwardRef(AccordionSectionSummaryHeading)
-                          aria-expanded={false}
-                          onClick={[Function]}
-                        >
-                          <ForwardRef(Base)
-                            aria-expanded={false}
-                            as="h2"
-                            className="ds-accordion__section-heading"
-                            onClick={[Function]}
-                            role="button"
-                          >
-                            <h2
-                              aria-expanded={false}
-                              className="ds-accordion__section-heading"
-                              onClick={[Function]}
-                              role="button"
-                            >
-                              <span
-                                className="ds-accordion__section-button"
-                              >
-                                Υπολοιπες Ρυθμισεις
-                              </span>
-                            </h2>
-                          </ForwardRef(Base)>
-                        </ForwardRef(AccordionSectionSummaryHeading)>
-                      </summary>
-                    </ForwardRef(Base)>
-                  </ForwardRef(AccordionSectionSummary)>
-                </Component>
-              </withDeprecationComponent>
-              <withDeprecationComponent>
-                <ForwardRef(AccordionSectionContent)>
-                  <ForwardRef(Base)
-                    as="div"
-                    className="ds-accordion__section-content"
-                  >
-                    <div
-                      className="ds-accordion__section-content"
-                    >
-                      Περιεχομενο Υπολοιπων Ρυθμισεων
-                    </div>
-                  </ForwardRef(Base)>
-                </ForwardRef(AccordionSectionContent)>
-              </withDeprecationComponent>
-            </details>
-          </ForwardRef(Base)>
-        </ForwardRef(AccordionSection)>
-      </withDeprecationComponent>
+              <a
+                class=" ds-link"
+                href=""
+              >
+                Αίτηση εξώδικης αναγνώρισης απαιτήσεων / συμβιβαστικής επίλυσης διαφορών με το Δημόσιο
+              </a>
+            </li>
+          </ol>
+        </div>
+      </details>
     </div>
-  </ForwardRef(Base)>
-</ForwardRef(Accordion)>
+  </div>
+</body>
 `;

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

@@ -1,15 +1,17 @@
 import React from 'react';
 
 import {
-  AccordionAuto,
   AccordionControls,
-  AccordionSectionAuto,
   AccordionSectionContent,
   AccordionSectionSummary,
   AccordionSectionSummaryHeading,
+} from '@digigov/ui/content/Accordion';
+import { 
+  AccordionAuto,
+  AccordionSectionAuto,
   AccordionCloseAllButtonAuto,
   AccordionOpenAllButtonAuto,
-} from '@digigov/ui/content/Accordion';
+} from '@digigov/ui/content/Accordion/auto';
 
 import { List } from '@digigov/ui/content/List/List';
 import { ListItem } from '@digigov/ui/content/List/ListItem';

package/src/content/Accordion/auto.tsx

@@ -1,16 +1,18 @@
 import React, { useContext } from 'react';
-import { Button, ButtonProps } from '@digigov/react-core/Button';
-
+import { Accordion } from '@digigov/react-core/Accordion';
 import {
-  Accordion,
   AccordionSection,
-  AccordionSectionProps,
+  type AccordionSectionProps,
+} from '@digigov/react-core/AccordionSection';
+import { Button, ButtonProps } from '@digigov/react-core/Button';
+import {
   AccordionItemId,
   useAccordion,
-} from '@digigov/ui/content/Accordion';
+} from '@digigov/ui/content/Accordion/hooks';
+
 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/{index.mdx → doc.mdx}

@@ -2,12 +2,9 @@
 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.
@@ -16,21 +13,13 @@ The accordion component lets users show and hide sections of related content on
 
 ### Default Accordion
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Accordion"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/content/Accordion/__stories__/Default.tsx" />
 
 ### Accordion with Hints
 
 Accordions hide content, so the labels need to be clear. If necessary, you can add a summary line to help users understand what is in the section.
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Accordion"
-  story="WithHints.tsx"
-/>
+<code src="@digigov/ui/content/Accordion/__stories__/WithHints.tsx" />
 
 ## Accessibility
 

package/src/content/Accordion/hooks.ts

@@ -10,7 +10,7 @@ export interface UseAccordionSectionProps {
   ref: React.RefObject<HTMLDetailsElement>;
   open: boolean;
   onToggle: (
-    e: React.MouseEvent & React.SyntheticEvent<HTMLElement, Event> & Event
+    e: React.MouseEvent | React.SyntheticEvent<HTMLElement, Event> | Event
   ) => void;
   onKeyDown: (e: React.KeyboardEvent) => void;
   role: string;
@@ -103,9 +103,9 @@ export const useAccordion = ({
       if (!sectionsRef.current.has(id)) {
         sectionsRef.current.set(id, React.createRef());
       }
-      const ref = sectionsRef.current.get(id) as React.RefObject<
-        HTMLDetailsElement
-      >;
+      const ref = sectionsRef.current.get(
+        id
+      ) as React.RefObject<HTMLDetailsElement>;
 
       const onToggle = (e) => {
         if (singleOpen && e.target?.open) {

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 
 import {
   Accordion,
@@ -15,7 +15,7 @@ import { Paragraph } from '@digigov/ui/typography/Paragraph';
 
 it('renders the Accordion', () => {
   expect(
-    mount(
+    render(
       <Accordion>
         <AccordionSection open>
           <AccordionSectionSummary>
@@ -39,6 +39,6 @@ it('renders the Accordion', () => {
           </AccordionSectionContent>
         </AccordionSection>
       </Accordion>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });

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

@@ -8,6 +8,5 @@ export * from '@digigov/react-core/AccordionSectionContent';
 export * from '@digigov/react-core/AccordionSectionSummary';
 export * from '@digigov/react-core/AccordionSectionSummaryHeading';
 export * from '@digigov/ui/content/Accordion/hooks';
-export * from '@digigov/ui/content/Accordion/auto';
 
 export default Accordion;

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();
+});
+