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

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

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

package/src/app/Footer/interaction.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { Default } from '@digigov/ui/app/Footer/__stories__/Default';
+
+test('renders the Default Hover and click', async ({ mount, page }) => {
+  await mount(
+    <Default />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.locator("#root>footer>div>div>section:nth-child(1)>p>a:nth-child(1)").hover();
+ await page.locator("#root>footer>div>div>section:nth-child(1)>p>a:nth-child(1)").click();
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/app/Header/index.mdx

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

package/src/app/Header/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 { Default } from '@digigov/ui/app/Header/__stories__/Default';
+import { WithHeaderNavigation } from '@digigov/ui/app/Header/__stories__/WithHeaderNavigation';
+import { WithNavigation } from '@digigov/ui/app/Header/__stories__/WithNavigation';
+import { WithServiceName } from '@digigov/ui/app/Header/__stories__/WithServiceName';
+import { WithServiceNameAndLogo } from '@digigov/ui/app/Header/__stories__/WithServiceNameAndLogo';
+
+test('renders the All Header variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="WithHeaderNavigation">
+      <WithHeaderNavigation />
+    </TestVariant>
+    <TestVariant title="WithNavigation">
+      <WithNavigation />
+    </TestVariant>
+    <TestVariant title="WithServiceName">
+      <WithServiceName />
+    </TestVariant>
+    <TestVariant title="WithServiceNameAndLogo">
+      <WithServiceNameAndLogo />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/app/Loader/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/app/Loader/__stories__/Default';
+
+test('renders the All Loader 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/app/Masthead/index.mdx

@@ -5,9 +5,7 @@ title: Masthead
 
 # Masthead
 
-```bash
-import Masthead from '@digigov/ui/app/Masthead';
-```
+The Masthead component is a set of features or layout that marks the page and delivers identifying information to web users.
 
 ## How to use
 
@@ -15,4 +13,11 @@ import Masthead from '@digigov/ui/app/Masthead';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Masthead" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "Masthead",
+  "MastheadBody",
+  "MastheadLogo",
+]} 
+/> 

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

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

package/src/app/Masthead/interaction.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { Default } from '@digigov/ui/app/Masthead/__stories__/Default';
+
+test('renders the Default Hover', async ({ mount, page }) => {
+  await mount(
+    <Default />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.locator("#root>section>div>main>a").hover();
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/app/Modal/Modal.stories.js

@@ -13,3 +13,4 @@ export * from '@digigov/ui/app/Modal/__stories__/AlertDialog';
 export * from '@digigov/ui/app/Modal/__stories__/Dense';
 export * from '@digigov/ui/app/Modal/__stories__/WithHooks';
 export * from '@digigov/ui/app/Modal/__stories__/Auto';
+export * from '@digigov/ui/app/Modal/__stories__/WithoutModalGaps';

package/src/app/Modal/__stories__/WithoutModalGaps.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+
+import {
+  Modal,
+  ModalHeading,
+  ModalContent,
+  ModalAction,
+} from '@digigov/ui/app/Modal';
+
+import { Button } from '@digigov/ui/form/Button';
+import { FieldContainer } from '@digigov/ui/form/FieldContainer';
+import { LabelContainer } from '@digigov/ui/form/LabelContainer';
+import { TextInput } from '@digigov/ui/form/TextInput';
+
+export const WithoutModalGaps = () => {
+  const [open, setOpen] = useState(false);
+  return (
+    <div>
+      <Button
+        onClick={() => {
+          setOpen(!open);
+        }}
+      >
+        Προσθήκη τηλεφώνου
+      </Button>
+      <Modal open={open} aria-labelledby="modal-label" gaps={false}>
+        <ModalHeading id="modal-label">Προσθήκη τηλεφώνου</ModalHeading>
+        <ModalContent>
+          <FieldContainer>
+            <LabelContainer>
+              Συμπληρώστε το τηλέφωνο επικοινωνίας
+              <TextInput name="inputext" maxWidth={'10-char'}></TextInput>
+            </LabelContainer>
+          </FieldContainer>
+        </ModalContent>
+        <ModalAction>
+          <Button>Υποβολή</Button>
+          <Button
+            variant="link"
+            onClick={() => {
+              setOpen(!open);
+            }}
+          >
+            Ακύρωση
+          </Button>
+        </ModalAction>
+      </Modal>
+    </div>
+  );
+};
+
+export default WithoutModalGaps;

package/src/app/Modal/auto.tsx

@@ -32,14 +32,14 @@ export const ModalAuto = React.forwardRef<HTMLDivElement, ModalAutoProps>(
     clickOutside = false,
     closeOnEscape = false,
     ...props
-  }) {
+  }, ref) {
     const context = useModalContext();
     if (!context) {
       throw new Error('ModalAuto must be used within an ModalProvider');
     }
     const { registerModal } = context;
     return (
-      <Modal {...registerModal(id, { clickOutside, closeOnEscape })} {...props}>
+      <Modal {...registerModal(id, { clickOutside, closeOnEscape })} {...props} ref={ref}>
         {props.children}
       </Modal>
     );

package/src/app/Modal/index.mdx

@@ -3,9 +3,7 @@ id: modal
 title: Modal
 ---
 
-```bash
-import Modal, {ModalHeading, ModalContent, ModalAction} from "@digigov/ui/app/Modal";
-```
+Modal is a dialog box/popup window which contains information or an action and it is displayed on top of the current page:
 
 ## How to use
 
@@ -30,4 +28,13 @@ implementation in the ARIA Authoring Practices Guide (APG) at
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Modal" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "ModalContainer",
+  "Modal",
+  "ModalHeading",
+  "ModalContent",
+  "ModalAction"]} 
+/> 
+

package/src/app/Modal/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 { AlertDialog } from '@digigov/ui/app/Modal/__stories__/AlertDialog';
+import { Auto } from '@digigov/ui/app/Modal/__stories__/Auto';
+import { Default } from '@digigov/ui/app/Modal/__stories__/Default';
+import { Dense } from '@digigov/ui/app/Modal/__stories__/Dense';
+import { WithHooks } from '@digigov/ui/app/Modal/__stories__/WithHooks';
+
+test('renders the All Modal variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="AlertDialog">
+      <AlertDialog />
+    </TestVariant>
+    <TestVariant title="Auto">
+      <Auto />
+    </TestVariant>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="Dense">
+      <Dense />
+    </TestVariant>
+    <TestVariant title="WithHooks">
+      <WithHooks />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/app/Modal/index.tsx

@@ -17,9 +17,9 @@ export interface ModalProps extends ModalContainerProps {
 }
 
 export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
-  function Modal({ ...props }) {
+  function Modal({ ...props }, ref) {
     if (props.open) {
-      return <ModalBase {...props} />;
+      return <ModalBase {...props} ref={ref} />;
     } else {
       return null;
     }
@@ -45,7 +45,7 @@ export const ModalBase = React.forwardRef<HTMLDivElement, ModalProps>(
       return () => {
         lastModalElementInstance.removeEventListener('focus', handleFocus);
       };
-    }, [open]);
+    }, []);
     return (
       <ModalContainer
         open={open}

package/src/app/Modal/interaction.test.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { Auto } from '@digigov/ui/app/Modal/__stories__/Auto';
+import { Dense } from '@digigov/ui/app/Modal/__stories__/Dense';
+import { WithHooks } from '@digigov/ui/app/Modal/__stories__/WithHooks';
+
+test('renders the Auto Click modal', async ({ mount, page }) => {
+  await mount(
+    <Auto />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.locator("#root>div>button:nth-child(1)").click();
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  
+
+
+test('renders the Dense Open modal', async ({ mount, page }) => {
+  await mount(
+    <Dense />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.locator("#root>div>button").click();
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  
+
+
+test('renders the WithHooks Click modal with hooks', async ({ mount, page }) => {
+  await mount(
+    <WithHooks />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.locator("#root>div>button").click();
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/app/NotFound/index.mdx

@@ -13,4 +13,6 @@ import NotFound from '@digigov/ui/app/NotFound';
 
 ## API
 
+See below for a complete reference to all of the props  available to the components mentioned here.
+
 There are no available prop types for this component.

package/src/app/NotFound/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/app/NotFound/__stories__/Default';
+
+test('renders the All NotFound 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/app/Panel/index.mdx

@@ -3,9 +3,8 @@ id: panel
 title: Panel
 ---
 
-```bash
-import Panel from '@digigov/ui/app/Panel';
-```
+Panels are bordered boxes where you can place texts, lists, tables and other content. 
+Panels are similar to cards, but they don't include media.
 
 ## How to use
 
@@ -13,4 +12,10 @@ import Panel from '@digigov/ui/app/Panel';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Panel" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "Panel", 
+  "PanelTitle", 
+  "PanelBody"]} 
+/> 

package/src/app/Panel/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/app/Panel/__stories__/Default';
+
+test('renders the All Panel 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/app/PhaseBannerHeader/index.mdx

@@ -3,9 +3,7 @@ id: phase-banner-header
 title: PhaseBannerHeader
 ---
 
-```bash
-import PhaseBannerHeader from '@digigov/ui/app/PhaseBannerHeader';
-```
+Phase banner lets users know the service is still being worked on, and encourages the user to provide feedback to help improve it.
 
 ## How to use
 
@@ -17,4 +15,6 @@ import PhaseBannerHeader from '@digigov/ui/app/PhaseBannerHeader';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="PhaseBannerHeader" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["PhaseBannerHeaderContainer"]} />

package/src/app/PhaseBannerHeader/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/app/PhaseBannerHeader/__stories__/Default';
+
+test('renders the All PhaseBannerHeader 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/app/QrCodeViewer/index.mdx

@@ -3,9 +3,7 @@ id: qr-code-viewer
 title: QrCodeViewer
 ---
 
-```bash
-import QrCodeViewer from '@digigov/ui/app/QrCodeViewer';
-```
+QR codes are frequently used to track information and allow the users to access this information instantly.
 
 ## How to use
 
@@ -27,4 +25,6 @@ import QrCodeViewer from '@digigov/ui/app/QrCodeViewer';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="QrCodeViewer" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+There are no available prop types for this component.

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

@@ -176,3 +176,5 @@ export const QrCodeViewer = React.forwardRef(function QrCodeViewer(
 ) {
   return <QrCodeViewerCanvas {...props} ref={ref} />;
 });
+
+export default QrCodeViewer;

package/src/app/Skeleton/Skeleton.stories.js

@@ -0,0 +1,19 @@
+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 * from '@digigov/ui/app/Skeleton/__stories__/Default';
+export * from '@digigov/ui/app/Skeleton/__stories__/TextSizes';
+export * from '@digigov/ui/app/Skeleton/__stories__/Rectangular';
+export * from '@digigov/ui/app/Skeleton/__stories__/Circular';
+export * from '@digigov/ui/app/Skeleton/__stories__/Button';
+export * from '@digigov/ui/app/Skeleton/__stories__/NoAnimation';
+export * from '@digigov/ui/app/Skeleton/__stories__/SpecificWidthAndHeight';
+export * from '@digigov/ui/app/Skeleton/__stories__/NoAnimation';
+export * from '@digigov/ui/app/Skeleton/__stories__/UnderTypography';
+export * 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;