@digigov/ui 2.0.0-6e3977bc → 2.0.0-834daea4

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/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.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__/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/layouts/Basic/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/{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/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

@@ -5,6 +5,6 @@ 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/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"]} />

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>
 `;