@digigov/ui 0.28.2 → 0.29.0

package/src/app/QrCodeScanner/index.tsx

@@ -1,13 +1,20 @@
 import React from 'react';
 
-const QrReader = React.lazy(() => import('react-qr-reader'));
+const QrReader = React.lazy(() => import('@uides/react-qr-reader'));
 
-export interface QrCodeScannerProps extends QrReader.props {
+export interface QrCodeScannerProps {
+  style?: React.CSSProperties;
   dataType?: 'url' | 'text';
   legacyMode?: boolean;
   validate?: (...args) => boolean;
   onScan: (...args) => void;
   onError: (err: any) => void;
+  onLoad?: (...args) => void;
+  onImageLoad?: (...args) => void;
+  delay?: number;
+  facingMode?: 'user' | 'environment';
+  showViewFinder?: boolean;
+  className?: string;
 }
 
 /**
@@ -29,7 +36,6 @@ export interface QrCodeScannerProps extends QrReader.props {
  */
 
 export const QrCodeScanner: React.FC<QrCodeScannerProps> = ({
-  className,
   children,
   validate,
   onScan,
@@ -75,7 +81,6 @@ In order to be safe, you can:
   return (
     <>
       <QrReader
-        className={className}
         delay={100}
         onError={onError}
         onScan={handleOnScan}

package/src/app/QrCodeViewer/QRCode.stories.js

@@ -4,6 +4,7 @@ import QrCodeViewer from '@digigov/ui/app/QrCodeViewer';
 export default {
   title: 'Digigov UI/app/QrCodeViewer',
   component: QrCodeViewer,
+  displayName: 'QrCodeViewer',
 };
 export * from './__stories__/Default';
 export * from './__stories__/Custom';

package/src/app/QrCodeViewer/__stories__/Custom.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import QrCodeViewer from '@digigov/ui/app/QrCodeViewer';
+import { QrCodeViewer } from '@digigov/ui/app/QrCodeViewer';
 import logo from '@digigov/ui/govgr/images/greek-government-base64';
 export const Custom = () => (
   <div>

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import QrCodeViewer from '@digigov/ui/app/QrCodeViewer';
+import { QrCodeViewer } from '@digigov/ui/app/QrCodeViewer';
 export const Default = () => (
   <div>
     <QrCodeViewer value="https://www.gov.gr/"></QrCodeViewer>

package/src/app/QrCodeViewer/index.mdx

@@ -1,21 +1,28 @@
 ---
 id: qr-code
 title: QrCodeViewer
-
 ---
 
 ```bash
 import QrCodeViewer from '@digigov/ui/app/QrCodeViewer';
-``` 
+```
 
 ## How to use
 
 ### Default QrCodeViewer
 
-<Story packageName="@digigov/ui" component="app/QrCodeViewer" story="Default.tsx" />
+<Story
+  packageName="@digigov/ui"
+  component="app/QrCodeViewer"
+  story="Default.tsx"
+/>
 
 ### Custom QrCodeViewer
 
 <Story packageName="@digigov/ui" component="app/QrCodeViewer" story="Custom.tsx" />
 
 
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="QrCodeViewer" />

package/src/app/QrCodeViewer/index.tsx

@@ -6,7 +6,7 @@ import {
   getImageSettings,
   MARGIN_SIZE,
 } from '@digigov/ui/app/QrCodeViewer/utils';
-import { QRPropsCanvas, QRPropsSVG } from '@digigov/ui/app/QrCodeViewer/types';
+import { QRPropsCanvas } from '@digigov/ui/app/QrCodeViewer/types';
 
 const DEFAULT_SIZE = 128;
 const DEFAULT_LEVEL = 'L';
@@ -166,85 +166,10 @@ function QrCodeViewerCanvas(props: QRPropsCanvas) {
   );
 }
 
-function QrCodeViewerSVG(props: QRPropsSVG) {
-  const {
-    value,
-    size = DEFAULT_SIZE,
-    level = DEFAULT_LEVEL,
-    bgColor = DEFAULT_BGCOLOR,
-    fgColor = DEFAULT_FGCOLOR,
-    includeMargin = DEFAULT_INCLUDEMARGIN,
-    imageSettings,
-    ...otherProps
-  } = props;
-
-  let cells = qrcodegen.QrCode.encodeText(
-    value,
-    ERROR_LEVEL_MAP[level]
-  ).getModules();
-
-  const margin = includeMargin ? MARGIN_SIZE : 0;
-  const numCells = cells.length + margin * 2;
-  const calculatedImageSettings = getImageSettings(
-    cells,
-    size,
-    includeMargin,
-    imageSettings
-  );
+export interface QrCodeViewerProps extends QRPropsCanvas {}
 
-  let image;
-  if (imageSettings != null && calculatedImageSettings != null) {
-    if (calculatedImageSettings.excavation != null) {
-      cells = excavateModules(cells, calculatedImageSettings.excavation);
-    }
-
-    image = (
-      <image
-        xlinkHref={imageSettings.src}
-        height={calculatedImageSettings.h}
-        width={calculatedImageSettings.w}
-        x={calculatedImageSettings.x + margin}
-        y={calculatedImageSettings.y + margin}
-        preserveAspectRatio="none"
-      />
-    );
-  }
-
-  // Drawing strategy: instead of a rect per module, we're going to create a
-  // single path for the dark modules and layer that on top of a light rect,
-  // for a total of 2 DOM nodes. We pay a bit more in string concat but that's
-  // way faster than DOM ops.
-  // For level 1, 441 nodes -> 2
-  // For level 40, 31329 -> 2
-  const fgPath = generatePath(cells, margin);
-
-  return (
-    <svg
-      height={size}
-      width={size}
-      viewBox={`0 0 ${numCells} ${numCells}`}
-      {...otherProps}
-    >
-      <path
-        fill={bgColor}
-        d={`M0,0 h${numCells}v${numCells}H0z`}
-        shapeRendering="crispEdges"
-      />
-      <path fill={fgColor} d={fgPath} shapeRendering="crispEdges" />
-      {image}
-    </svg>
-  );
-}
-
-type RootProps =
-  | (QRPropsSVG & { renderAs: 'svg' })
-  | (QRPropsCanvas & { renderAs?: 'canvas' });
-export const QrCodeViewer = (props: RootProps) => {
-  const { renderAs, ...otherProps } = props;
-  if (renderAs === 'svg') {
-    return <QrCodeViewerSVG {...(otherProps as QRPropsSVG)} />;
-  }
-  return <QrCodeViewerCanvas {...(otherProps as QRPropsCanvas)} />;
+export const QrCodeViewer = (props: QrCodeViewerProps): React.ReactElement => {
+  return <QrCodeViewerCanvas {...props} />;
 };
 
 export default QrCodeViewer;

package/src/app/QrCodeViewer/types.ts

@@ -15,7 +15,6 @@ export type QRProps = {
 
 export type QRPropsCanvas = QRProps &
   React.CanvasHTMLAttributes<HTMLCanvasElement>;
-export type QRPropsSVG = QRProps & React.SVGProps<SVGSVGElement>;
 
 export type Modules = ReturnType<qrcodegen.QrCode['getModules']>;
 

package/src/app/index.ts

@@ -1,4 +1,6 @@
 export * from '@digigov/ui/app/App';
+export * from '@digigov/ui/app/Confirmation';
+export * from '@digigov/ui/app/Footer';
 export * from '@digigov/ui/app/PageTitle';
 export * from '@digigov/ui/app/QrCodeScanner';
 export * from '@digigov/ui/app/QrCodeViewer';

package/src/core/Accordion/Accordion.stories.js

@@ -1,9 +1,12 @@
-
-import Accordion from "@digigov/ui/core"
+import Accordion from '@digigov/ui/core/Accordion';
 export default {
   title: 'Digigov UI/core/Accordion',
+  tags: ['Experimental'],
+  description:
+    'The accordion component lets users show and hide sections of related content on a page.',
+  link: 'https://guide.services.gov.gr/docs/components/accordion',
   component: Accordion,
-}
-export * from './__stories__/Default';
-export * from './__stories__/WithHints';
-  
+  displayName: 'Accordion',
+};
+export * from '@digigov/ui/core/Accordion/__stories__/Default';
+export * from '@digigov/ui/core/Accordion/__stories__/WithHints';

package/src/core/Accordion/Accordion.stories.playwright.json

@@ -8,13 +8,7 @@
             {
               "name": "click",
               "args": {
-                "selector": "html>body>div:nth-child(5)>div>details:nth-child(2)>summary"
-              }
-            },
-            {
-              "name": "click",
-              "args": {
-                "selector": "html>body>div:nth-child(5)>div>details:nth-child(2)>div>p"
+                "selector": "text=Δικαστήρια"
               }
             }
           ],

package/src/core/Accordion/__stories__/Default.tsx

@@ -1,113 +1,110 @@
 import React from 'react';
-import Accordion, {
+
+import {
+  Accordion,
   AccordionSection,
   AccordionSectionContent,
   AccordionSectionSummary,
   AccordionSectionSummaryHeading,
 } from '@digigov/ui/core/Accordion';
-import Paragraph from '@digigov/ui/typography/Paragraph';
-import Link from '@digigov/ui/core/Link';
-import List, {ListItem} from '@digigov/ui/core/List';
+
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+import { Link } from '@digigov/ui/core/Link';
+import { List } from '@digigov/ui/core/List/List';
+import { ListItem } from '@digigov/ui/core/List/ListItem';
 
 export const Default = () => (
   <Accordion>
-  <AccordionSection>
-    <AccordionSectionSummary>
-      <AccordionSectionSummaryHeading aria-controls="content1" >
-        Διαφορές με το δημόσιο
-      </AccordionSectionSummaryHeading>
-    </AccordionSectionSummary>
-    <AccordionSectionContent id="content1">
-    <Paragraph>
-      Παρακάτω μπορείτε να δείτε την διαθέσιμη και ενεργή υπηρεσία που αφορά το επιλεγμένο γεγονός ζωής.
-    </Paragraph>
-    <List>
-      <ListItem>
-      <Link>
-        Αίτηση εξώδικης αναγνώρισης απαιτήσεων / συμβιβαστικής επίλυσης διαφορών με το Δημόσιο
-      </Link>
-      </ListItem>
-    </List>
-    </AccordionSectionContent>
-  </AccordionSection>
-  <AccordionSection>
-    <AccordionSectionSummary>
-      <AccordionSectionSummaryHeading aria-controls="content2" >
-        Δικαστήρια
-      </AccordionSectionSummaryHeading>
-    </AccordionSectionSummary>
-    <AccordionSectionContent id="content2">
-      <Paragraph>
-        Στη λίστα παρακάτω μπορείτε να δείτε τις υπηρεσίες που αφορούν το επιλεγμένο γεγονός ζωής, κατηγοριοποιημένες σε ομάδες υπηρεσιών.
-      </Paragraph>
-      <List>
-        <ListItem>
-          <Link>
-            Ενιαίο πιστοποιητικό δικαστικής φερεγγυότητας
-          </Link>
-        </ListItem>
-        <ListItem>
-          <Link>
-            Ηλεκτρονικές δικαστικές αποφάσεις
-          </Link>
-        </ListItem>
-        <ListItem>
-          <Link>
-            Πιστοποιητικά δικαστηρίων
-          </Link>
-        </ListItem>
-      </List>
-    </AccordionSectionContent>
-  </AccordionSection>
-  <AccordionSection>
-    <AccordionSectionSummary>
-      <AccordionSectionSummaryHeading aria-controls="content3" >
-      Δικόγραφα
-      </AccordionSectionSummaryHeading>
-    </AccordionSectionSummary>
-    <AccordionSectionContent id="content3">
-      <Paragraph>
-        Στη λίστα παρακάτω μπορείτε να δείτε τις υπηρεσίες που αφορούν το επιλεγμένο γεγονός ζωής.
-      </Paragraph>
-      <List>
-        <ListItem>
-          <Link>
-            Αντίγραφο πρακτικών υπόθεσης
-          </Link>
-        </ListItem>
-        <ListItem>
-          <Link>
-            Ηλεκτρονική κατάθεση δικογράφων (Πολιτικά / Ποινικά Δικαστήρια)
-          </Link>
-        </ListItem>
-      </List>
-    </AccordionSectionContent>
-  </AccordionSection>
-  <AccordionSection>
-    <AccordionSectionSummary>
-      <AccordionSectionSummaryHeading aria-controls="content4" >
-        Καταστήματα κράτησης
-      </AccordionSectionSummaryHeading>
-    </AccordionSectionSummary>
-    <AccordionSectionContent id="content4">
-      <Paragraph>
-        Στη λίστα παρακάτω μπορείτε να δείτε τις υπηρεσίες που αφορούν το επιλεγμένο γεγονός ζωής.
-      </Paragraph>
-      <List>
-        <ListItem>
-          <Link>
-            Βεβαίωση ηθικού / πειθαρχικού ελέγχου αποφυλακισμένων
-          </Link>
-        </ListItem>
-        <ListItem>
-          <Link>
-            Εκπαίδευση αποφυλακισμένων
-          </Link>
-        </ListItem>
-      </List>
-    </AccordionSectionContent>
-  </AccordionSection>
-</Accordion>
+    <AccordionSection open>
+      <AccordionSectionSummary>
+        <AccordionSectionSummaryHeading aria-controls="content1">
+          Διαφορές με το δημόσιο
+        </AccordionSectionSummaryHeading>
+      </AccordionSectionSummary>
+      <AccordionSectionContent id="content1">
+        <Paragraph>
+          Παρακάτω μπορείτε να δείτε την διαθέσιμη και ενεργή υπηρεσία που αφορά
+          το επιλεγμένο γεγονός ζωής.
+        </Paragraph>
+        <List>
+          <ListItem>
+            <Link>
+              Αίτηση εξώδικης αναγνώρισης απαιτήσεων / συμβιβαστικής επίλυσης
+              διαφορών με το Δημόσιο
+            </Link>
+          </ListItem>
+        </List>
+      </AccordionSectionContent>
+    </AccordionSection>
+    <AccordionSection>
+      <AccordionSectionSummary>
+        <AccordionSectionSummaryHeading aria-controls="content2">
+          Δικαστήρια
+        </AccordionSectionSummaryHeading>
+      </AccordionSectionSummary>
+      <AccordionSectionContent id="content2">
+        <Paragraph>
+          Στη λίστα παρακάτω μπορείτε να δείτε τις υπηρεσίες που αφορούν το
+          επιλεγμένο γεγονός ζωής, κατηγοριοποιημένες σε ομάδες υπηρεσιών.
+        </Paragraph>
+        <List>
+          <ListItem>
+            <Link>Ενιαίο πιστοποιητικό δικαστικής φερεγγυότητας</Link>
+          </ListItem>
+          <ListItem>
+            <Link>Ηλεκτρονικές δικαστικές αποφάσεις</Link>
+          </ListItem>
+          <ListItem>
+            <Link>Πιστοποιητικά δικαστηρίων</Link>
+          </ListItem>
+        </List>
+      </AccordionSectionContent>
+    </AccordionSection>
+    <AccordionSection>
+      <AccordionSectionSummary>
+        <AccordionSectionSummaryHeading aria-controls="content3">
+          Δικόγραφα
+        </AccordionSectionSummaryHeading>
+      </AccordionSectionSummary>
+      <AccordionSectionContent id="content3">
+        <Paragraph>
+          Στη λίστα παρακάτω μπορείτε να δείτε τις υπηρεσίες που αφορούν το
+          επιλεγμένο γεγονός ζωής.
+        </Paragraph>
+        <List>
+          <ListItem>
+            <Link>Αντίγραφο πρακτικών υπόθεσης</Link>
+          </ListItem>
+          <ListItem>
+            <Link>
+              Ηλεκτρονική κατάθεση δικογράφων (Πολιτικά / Ποινικά Δικαστήρια)
+            </Link>
+          </ListItem>
+        </List>
+      </AccordionSectionContent>
+    </AccordionSection>
+    <AccordionSection>
+      <AccordionSectionSummary>
+        <AccordionSectionSummaryHeading aria-controls="content4">
+          Καταστήματα κράτησης
+        </AccordionSectionSummaryHeading>
+      </AccordionSectionSummary>
+      <AccordionSectionContent id="content4">
+        <Paragraph>
+          Στη λίστα παρακάτω μπορείτε να δείτε τις υπηρεσίες που αφορούν το
+          επιλεγμένο γεγονός ζωής.
+        </Paragraph>
+        <List>
+          <ListItem>
+            <Link>Βεβαίωση ηθικού / πειθαρχικού ελέγχου αποφυλακισμένων</Link>
+          </ListItem>
+          <ListItem>
+            <Link>Εκπαίδευση αποφυλακισμένων</Link>
+          </ListItem>
+        </List>
+      </AccordionSectionContent>
+    </AccordionSection>
+  </Accordion>
 );
 
 export default Default;

package/src/core/Accordion/__stories__/WithHints.tsx

@@ -1,37 +1,44 @@
 import React from 'react';
-import Accordion, {
+
+import {
+  Accordion,
   AccordionSection,
   AccordionSectionContent,
   AccordionSectionSummary,
   AccordionSectionSummaryHeading,
 } from '@digigov/ui/core/Accordion';
-import Hint from '@digigov/ui/typography/Hint';
-import Paragraph from '@digigov/ui/typography/Paragraph';
-import Link from '@digigov/ui/core/Link';
-import List, {ListItem} from '@digigov/ui/core/List';
+
+import { Hint } from '@digigov/ui/typography/Hint';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+import { Link } from '@digigov/ui/core/Link';
+import { List } from '@digigov/ui/core/List/List';
+import { ListItem } from '@digigov/ui/core/List/ListItem';
 
 export const WithHints = () => (
   <Accordion>
-    <AccordionSection>
+    <AccordionSection open>
       <AccordionSectionSummary>
         <AccordionSectionSummaryHeading aria-controls="content1">
           Διαφορές με το δημόσιο
         </AccordionSectionSummaryHeading>
         <Hint>
-          Δικαστικές και εξωδικαστικές διαφορές με το Δημόσιο, εκκαθάριση δικαστικών δαπανών κ.ά.
+          Δικαστικές και εξωδικαστικές διαφορές με το Δημόσιο, εκκαθάριση
+          δικαστικών δαπανών κ.ά.
         </Hint>
       </AccordionSectionSummary>
       <AccordionSectionContent id="content1">
-      <Paragraph>
-        Παρακάτω μπορείτε να δείτε την διαθέσιμη και ενεργή υπηρεσία που αφορά το επιλεγμένο γεγονός ζωής.
-      </Paragraph>
-      <List>
-        <ListItem>
-        <Link>
-          Αίτηση εξώδικης αναγνώρισης απαιτήσεων / συμβιβαστικής επίλυσης διαφορών με το Δημόσιο
-        </Link>
-        </ListItem>
-      </List>
+        <Paragraph>
+          Παρακάτω μπορείτε να δείτε την διαθέσιμη και ενεργή υπηρεσία που αφορά
+          το επιλεγμένο γεγονός ζωής.
+        </Paragraph>
+        <List>
+          <ListItem>
+            <Link>
+              Αίτηση εξώδικης αναγνώρισης απαιτήσεων / συμβιβαστικής επίλυσης
+              διαφορών με το Δημόσιο
+            </Link>
+          </ListItem>
+        </List>
       </AccordionSectionContent>
     </AccordionSection>
     <AccordionSection>
@@ -39,29 +46,22 @@ export const WithHints = () => (
         <AccordionSectionSummaryHeading aria-controls="content2">
           Δικαστήρια
         </AccordionSectionSummaryHeading>
-        <Hint>
-          Πιστοποιητικά δικαστηρίων, παρακολούθηση υποθέσεων κ.ά.
-        </Hint>
+        <Hint>Πιστοποιητικά δικαστηρίων, παρακολούθηση υποθέσεων κ.ά.</Hint>
       </AccordionSectionSummary>
       <AccordionSectionContent id="content2">
         <Paragraph>
-          Στη λίστα παρακάτω μπορείτε να δείτε τις υπηρεσίες που αφορούν το επιλεγμένο γεγονός ζωής, κατηγοριοποιημένες σε ομάδες υπηρεσιών.
+          Στη λίστα παρακάτω μπορείτε να δείτε τις υπηρεσίες που αφορούν το
+          επιλεγμένο γεγονός ζωής, κατηγοριοποιημένες σε ομάδες υπηρεσιών.
         </Paragraph>
         <List>
           <ListItem>
-            <Link>
-              Ενιαίο πιστοποιητικό δικαστικής φερεγγυότητας
-            </Link>
+            <Link>Ενιαίο πιστοποιητικό δικαστικής φερεγγυότητας</Link>
           </ListItem>
           <ListItem>
-            <Link>
-              Ηλεκτρονικές δικαστικές αποφάσεις
-            </Link>
+            <Link>Ηλεκτρονικές δικαστικές αποφάσεις</Link>
           </ListItem>
           <ListItem>
-            <Link>
-              Πιστοποιητικά δικαστηρίων
-            </Link>
+            <Link>Πιστοποιητικά δικαστηρίων</Link>
           </ListItem>
         </List>
       </AccordionSectionContent>
@@ -69,19 +69,18 @@ export const WithHints = () => (
     <AccordionSection>
       <AccordionSectionSummary>
         <AccordionSectionSummaryHeading aria-controls="content3">
-        Δικόγραφα
+          Δικόγραφα
         </AccordionSectionSummaryHeading>
         <Hint>Διαδικασίες για την κατάθεση δικογράφων</Hint>
       </AccordionSectionSummary>
       <AccordionSectionContent id="content3">
         <Paragraph>
-          Στη λίστα παρακάτω μπορείτε να δείτε τις υπηρεσίες που αφορούν το επιλεγμένο γεγονός ζωής.
+          Στη λίστα παρακάτω μπορείτε να δείτε τις υπηρεσίες που αφορούν το
+          επιλεγμένο γεγονός ζωής.
         </Paragraph>
         <List>
           <ListItem>
-            <Link>
-              Αντίγραφο πρακτικών υπόθεσης
-            </Link>
+            <Link>Αντίγραφο πρακτικών υπόθεσης</Link>
           </ListItem>
           <ListItem>
             <Link>
@@ -96,22 +95,21 @@ export const WithHints = () => (
         <AccordionSectionSummaryHeading aria-controls="content4">
           Καταστήματα κράτησης
         </AccordionSectionSummaryHeading>
-        <Hint>Επανένταξη αποφυλακισμένων, πιστοποιητικά, επισκεπτήρια κ.ά.</Hint>
+        <Hint>
+          Επανένταξη αποφυλακισμένων, πιστοποιητικά, επισκεπτήρια κ.ά.
+        </Hint>
       </AccordionSectionSummary>
       <AccordionSectionContent id="content4">
         <Paragraph>
-          Στη λίστα παρακάτω μπορείτε να δείτε τις υπηρεσίες που αφορούν το επιλεγμένο γεγονός ζωής.
+          Στη λίστα παρακάτω μπορείτε να δείτε τις υπηρεσίες που αφορούν το
+          επιλεγμένο γεγονός ζωής.
         </Paragraph>
         <List>
           <ListItem>
-            <Link>
-              Βεβαίωση ηθικού / πειθαρχικού ελέγχου αποφυλακισμένων
-            </Link>
+            <Link>Βεβαίωση ηθικού / πειθαρχικού ελέγχου αποφυλακισμένων</Link>
           </ListItem>
           <ListItem>
-            <Link>
-              Εκπαίδευση αποφυλακισμένων
-            </Link>
+            <Link>Εκπαίδευση αποφυλακισμένων</Link>
           </ListItem>
         </List>
       </AccordionSectionContent>