@digigov/ui 2.0.0-2445d5cb → 2.0.0-298cfc51

package/src/app/Header/doc.mdx

@@ -0,0 +1,32 @@
+---
+id: header
+title: Header
+---
+
+# Header
+
+## How to use
+
+<code src="@digigov/ui/app/Header/__stories__/Default.tsx" />
+
+### Header with service name
+
+<code src="@digigov/ui/app/Header/__stories__/WithServiceName.tsx" />
+
+### Header with service logo and service name
+
+<code src="@digigov/ui/app/Header/__stories__/WithServiceNameAndLogo.tsx" />
+
+### Default header with navigation
+
+<code src="@digigov/ui/app/Header/__stories__/WithNavigation.tsx" />
+
+## API
+
+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/interaction.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { WithHeaderNavigation } from '@digigov/ui/app/Header/__stories__/WithHeaderNavigation';
+import { WithServiceNameAndLogo } from '@digigov/ui/app/Header/__stories__/WithServiceNameAndLogo';
+
+test('renders the WithHeaderNavigation Hover on dropdown', async ({ mount, page }) => {
+  await mount(
+    <WithHeaderNavigation />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.locator("#root>div>header>div>div:nth-child(2)>button").hover();
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  
+
+
+test('renders the WithServiceNameAndLogo Keyboard navigation', async ({ mount, page }) => {
+  await mount(
+    <WithServiceNameAndLogo />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.keyboard.press("Tab");
+ await page.keyboard.press("Tab");
+ await page.keyboard.press("Tab");
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/app/Loader/Loader.stories.js

@@ -5,3 +5,4 @@ export default {
   displayName: 'CircularProgress',
 };
 export { Default } from '@digigov/ui/app/Loader/__stories__/Default';
+export { FullPageLoader } from '@digigov/ui/app/Loader/__stories__/FullPageLoader';

package/src/app/Loader/__stories__/FullPageLoader.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {
+  FullPageBackground,
+  LoaderContainer,
+  CircularProgress,
+} from '@digigov/ui/app/Loader';
+
+export const FullPageLoader = () => {
+  return (
+    <FullPageBackground>
+      <LoaderContainer>
+        <CircularProgress />
+      </LoaderContainer>
+    </FullPageBackground>
+  );
+};

package/src/app/Loader/index.native.tsx

@@ -0,0 +1,98 @@
+import React, { useRef, useEffect } from 'react';
+import { Animated, Easing } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+import { CircularProgressProps } from '@digigov/react-core/CircularProgress';
+
+export const CircularProgress: React.FC<CircularProgressProps> = ({
+  size = 'md',
+  color = 'primary',
+}) => {
+  const sizes = {
+    sm: 20,
+    md: 40,
+    lg: 50,
+  };
+  const strokeWidth = sizes[size] / 4;
+  const radius = (sizes[size] - strokeWidth) / 2;
+  const circumference = 2 * Math.PI * radius;
+  const rotateAnim = useRef(new Animated.Value(0)).current;
+  const dashAnim = useRef(new Animated.Value(circumference)).current;
+
+  const progressColor = color === 'primary' ? '#003375' : '#fff';
+  const backgroundColor = '#01b0f0';
+  const duration = 4000;
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.timing(rotateAnim, {
+        toValue: 1,
+        duration: 10000,
+        easing: Easing.linear,
+        useNativeDriver: true,
+      })
+    ).start();
+  }, [rotateAnim]);
+
+  useEffect(() => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(dashAnim, {
+          toValue: 0,
+          duration: duration * 0.4,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.timing(dashAnim, {
+          toValue: circumference,
+          duration: duration * 0.6,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+      ])
+    ).start();
+  }, [dashAnim, duration, circumference]);
+
+  const rotateInterpolate = rotateAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg'],
+  });
+
+  return (
+    <Animated.View
+      style={[
+        {
+          width: sizes[size],
+          height: sizes[size],
+          transform: [{ rotate: rotateInterpolate }],
+        },
+      ]}
+    >
+      <Svg
+        width={sizes[size]}
+        height={sizes[size]}
+        viewBox={`0 0 ${sizes[size]} ${sizes[size]}`}
+      >
+        <Circle
+          cx={sizes[size] / 2}
+          cy={sizes[size] / 2}
+          r={radius}
+          stroke={backgroundColor}
+          strokeWidth={strokeWidth}
+          fill="none"
+        />
+        <AnimatedCircle
+          cx={sizes[size] / 2}
+          cy={sizes[size] / 2}
+          r={radius}
+          stroke={progressColor}
+          strokeWidth={strokeWidth}
+          strokeDasharray={`${circumference}`}
+          strokeDashoffset={dashAnim}
+          fill="none"
+        />
+      </Svg>
+    </Animated.View>
+  );
+};
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);

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

@@ -2,6 +2,7 @@ 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';
+import { FullPageLoader } from '@digigov/ui/app/Loader/__stories__/FullPageLoader';
 
 test('renders the All Loader variants', async ({ mount, page }) => {
   await mount(
@@ -10,6 +11,9 @@ test('renders the All Loader variants', async ({ mount, page }) => {
     <TestVariant title="Default">
       <Default />
     </TestVariant>
+    <TestVariant title="FullPageLoader">
+      <FullPageLoader />
+    </TestVariant>
   </div>
   )
   await page.evaluate(() => document.fonts.ready);

package/src/app/Loader/index.tsx

@@ -1,6 +1,6 @@
 export * from '@digigov/react-core/LoaderContainer';
-export * from '@digigov/react-core/CircularProgress';
 export * from '@digigov/react-core/FullPageBackground';
+export * from '@digigov/ui/app/Loader/index.web';
 
 import LoaderContainer from '@digigov/react-core/LoaderContainer';
 export default LoaderContainer;

package/src/app/Loader/index.web.tsx

@@ -0,0 +1 @@
+export * from '@digigov/react-core/CircularProgress';

package/src/app/Masthead/Masthead.stories.js

@@ -9,5 +9,6 @@ export default {
   displayName: 'Masthead',
 };
 export { Default } from '@digigov/ui/app/Masthead/__stories__/Default';
+export { Secondary } from '@digigov/ui/app/Masthead/__stories__/Secondary';
 export { WithLogo } from '@digigov/ui/app/Masthead/__stories__/WithLogo';
 export { WithElements } from '@digigov/ui/app/Masthead/__stories__/WithElements';

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { CallToAction } from '@digigov/ui/form/Button/CallToAction';
 import { Container } from '@digigov/ui/layouts/Basic/Container';
 import { Main } from '@digigov/ui/layouts/Basic/Main';
-import { Masthead, MastheadBody } from '@digigov/ui/layouts/Basic/Masthead';
+import { Masthead, MastheadBody } from '@digigov/ui/app/Masthead';
 import { Heading } from '@digigov/ui/typography/Heading';
 
 export const Default = () => (

package/src/app/Masthead/__stories__/Secondary.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { CallToAction } from '@digigov/ui/form/Button/CallToAction';
+import { Container } from '@digigov/ui/layouts/Basic/Container';
+import { Main } from '@digigov/ui/layouts/Basic/Main';
+import { Masthead, MastheadBody } from '@digigov/ui/app/Masthead';
+import { Heading } from '@digigov/ui/typography/Heading';
+
+export const Secondary = () => (
+  <Masthead color="secondary">
+    <Container>
+      <Main>
+        <Heading>Σχεδιάστε την υπηρεσία σας, με το στυλ του GOV.GR</Heading>
+        <MastheadBody>
+          Χρησιμοποιείστε αυτόν τον οδηγό ώστε να φτιάξετε μια υπηρεσία συνεπή
+          στα πρότυπα του GOV.GR. Αποκτήστε γνώση από την έρευνα και την
+          εμπειρία άλλων ομάδων και αποφύγετε την επανάληψη εργασιών που έχουν
+          ήδη γίνει.
+        </MastheadBody>
+        <CallToAction href="#">Ξεκινήστε εδώ</CallToAction>
+      </Main>
+    </Container>
+  </Masthead>
+);
+
+export default Secondary;

package/src/app/Masthead/__stories__/WithElements.tsx

@@ -4,11 +4,7 @@ import { CallToAction } from '@digigov/ui/form/Button/CallToAction';
 import mineduLogo from '@digigov/ui/govgr/images/minedu-logo-base64';
 import { Container } from '@digigov/ui/layouts/Basic/Container';
 import { Main } from '@digigov/ui/layouts/Basic/Main';
-import {
-  Masthead,
-  MastheadBody,
-  MastheadLogo,
-} from '@digigov/ui/layouts/Basic/Masthead';
+import { Masthead, MastheadBody, MastheadLogo } from '@digigov/ui/app/Masthead';
 import Link from '@digigov/ui/navigation/Link';
 import { Heading } from '@digigov/ui/typography/Heading';
 import Hint from '@digigov/ui/typography/Hint';

package/src/app/Masthead/__stories__/WithLogo.tsx

@@ -4,11 +4,7 @@ import { CallToAction } from '@digigov/ui/form/Button/CallToAction';
 import logo3 from '@digigov/ui/govgr/images/minedu-logo-base64';
 import { Container } from '@digigov/ui/layouts/Basic/Container';
 import { Main } from '@digigov/ui/layouts/Basic/Main';
-import {
-  Masthead,
-  MastheadBody,
-  MastheadLogo,
-} from '@digigov/ui/layouts/Basic/Masthead';
+import { Masthead, MastheadBody, MastheadLogo } from '@digigov/ui/app/Masthead';
 import { Heading } from '@digigov/ui/typography/Heading';
 
 export const WithLogo = () => (

package/src/app/Masthead/{index.mdx → doc.mdx}

@@ -9,7 +9,19 @@ The Masthead component is a set of features or layout that marks the page and de
 
 ## How to use
 
-<Story packageName="@digigov/ui" component="app/Masthead" story="Default.tsx" />
+<code src="@digigov/ui/app/Masthead/__stories__/Default.tsx" />
+
+## With secondary color
+
+<code src="@digigov/ui/app/Masthead/__stories__/Secondary.tsx" />
+
+## With logo
+
+<code src="@digigov/ui/app/Masthead/__stories__/WithLogo.tsx" />
+
+## With elements
+
+<code src="@digigov/ui/app/Masthead/__stories__/WithElements.tsx" />
 
 ## API
 

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

@@ -2,6 +2,7 @@ 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 { Secondary } from '@digigov/ui/app/Masthead/__stories__/Secondary';
 import { WithElements } from '@digigov/ui/app/Masthead/__stories__/WithElements';
 import { WithLogo } from '@digigov/ui/app/Masthead/__stories__/WithLogo';
 
@@ -12,6 +13,9 @@ test('renders the All Masthead variants', async ({ mount, page }) => {
     <TestVariant title="Default">
       <Default />
     </TestVariant>
+    <TestVariant title="Secondary">
+      <Secondary />
+    </TestVariant>
     <TestVariant title="WithElements">
       <WithElements />
     </TestVariant>

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

@@ -1,13 +1,15 @@
 import React from 'react';
 
 import {
-  ModalAuto,
   ModalHeading,
   ModalContent,
   ModalAction,
+} from '@digigov/ui/app/Modal';
+import {
+  ModalAuto,
   ModalButtonAuto,
   ModalProvider,
-} from '@digigov/ui/app/Modal';
+} from '@digigov/ui/app/Modal/auto';
 
 import { Button } from '@digigov/ui/form/Button';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';

package/src/app/Modal/auto.tsx

@@ -1,8 +1,8 @@
 import React, { useContext } from 'react';
 import { Button, ButtonProps } from '@digigov/react-core/Button';
 import { ModalContainerProps } from '@digigov/react-core/ModalContainer';
+import Modal from '@digigov/ui/app/Modal';
 import { ModalId, UseModalReturn, useModal } from '@digigov/ui/app/Modal/hooks';
-import Modal from '@digigov/ui/app/Modal/Modal';
 
 export const ModalContext = React.createContext<UseModalReturn | null>(null);
 

package/src/app/Modal/{index.mdx → doc.mdx}

@@ -3,21 +3,24 @@ id: modal
 title: Modal
 ---
 
+# 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
 
 ### As a Dialog
 
-<Story packageName="@digigov/ui" component="app/Modal" story="Default.tsx" />
+<code src="@digigov/ui/app/Modal/__stories__/Default.tsx" />
+
 
 ### As an Alert Dialog
 
-<Story
-  packageName="@digigov/ui"
-  component="app/Modal"
-  story="AlertDialog.tsx"
-/>
+<code src="@digigov/ui/app/Modal/__stories__/AlertDialog.tsx" />
+
+### With dense style
+
+<code src="@digigov/ui/app/Modal/__stories__/Dense.tsx" />
 
 ## Accessibility
 

package/src/app/Modal/index.native.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Modal as CoreModal } from 'react-native';
+
+export const Modal = ({ children, open, ...props }) => {
+  return (
+    <CoreModal
+      visible={open}
+      transparent={true}
+      animationType="fade"
+      {...props}
+    >
+      {children}
+    </CoreModal>
+  );
+};
+
+export default Modal;

package/src/app/Modal/index.tsx

@@ -4,8 +4,7 @@ export * from '@digigov/react-core/ModalContent';
 export * from '@digigov/react-core/ModalAction';
 export * from '@digigov/ui/app/Modal/hooks';
 export * from '@digigov/ui/app/Modal/hooks';
-export * from '@digigov/ui/app/Modal/auto';
 
-export * from '@digigov/ui/app/Modal/Modal';
-import Modal from '@digigov/ui/app/Modal/Modal';
+export * from '@digigov/ui/app/Modal/index.web';
+import Modal from '@digigov/ui/app/Modal/index.web';
 export default Modal;

package/src/app/NotFound/{index.mdx → doc.mdx}

@@ -3,13 +3,11 @@ id: not-found
 title: NotFound
 ---
 
-```bash
-import NotFound from '@digigov/ui/app/NotFound';
-```
+# NotFound page
 
 ## How to use
 
-<Story packageName="@digigov/ui" component="app/NotFound" story="Default.tsx" />
+<code src="@digigov/ui/app/NotFound/__stories__/Default.tsx" />
 
 ## API
 

package/src/app/Panel/{index.mdx → doc.mdx}

@@ -3,12 +3,14 @@ id: panel
 title: Panel
 ---
 
+# 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
 
-<Story packageName="@digigov/ui" component="app/Panel" story="Default.tsx" />
+<code src="@digigov/ui/app/Panel/__stories__/Default.tsx" />
 
 ## API
 

package/src/app/PhaseBannerHeader/{index.mdx → doc.mdx}

@@ -3,15 +3,13 @@ id: phase-banner-header
 title: PhaseBannerHeader
 ---
 
+# 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
 
-<Story
-  packageName="@digigov/ui"
-  component="app/PhaseBannerHeader"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/app/PhaseBannerHeader/__stories__/Default.tsx" />
 
 ## API
 

package/src/app/QrCodeScanner/__snapshots__/index.spec.tsx.snap

@@ -1,13 +1,9 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the qr code scanner 1`] = `
-<Suspense
-  fallback="<div>loading...</div>"
->
-  <QrCodeScanner
-    onError={[Function]}
-    onScan={[Function]}
-  />
-  &lt;div&gt;loading...&lt;/div&gt;
-</Suspense>
+<body>
+  <div>
+    &lt;div&gt;loading...&lt;/div&gt;
+  </div>
+</body>
 `;

package/src/app/QrCodeScanner/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+// @ts-ignore
 const QrReader = React.lazy(() => import('@uides/react-qr-reader'));
 
 export interface QrCodeScannerProps {

package/src/app/QrCodeViewer/{index.mdx → doc.mdx}

@@ -3,25 +3,17 @@ id: qr-code-viewer
 title: QrCodeViewer
 ---
 
+# QrCodeViewer
+
 QR codes are frequently used to track information and allow the users to access this information instantly.
 
 ## How to use
 
-### Default QrCodeViewer
-
-<Story
-  packageName="@digigov/ui"
-  component="app/QrCodeViewer"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/app/QrCodeViewer/__stories__/Default.tsx" />
 
 ### Custom QrCodeViewer
 
-<Story
-  packageName="@digigov/ui"
-  component="app/QrCodeViewer"
-  story="Custom.tsx"
-/>
+<code src="@digigov/ui/app/QrCodeViewer/__stories__/Custom.tsx" />
 
 ## API
 

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"]} />