@digigov/ui 2.0.0-834daea4 → 2.0.0-87b6232d

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

@@ -1,14 +1,10 @@
 import React from 'react';
 
+import { Masthead, MastheadBody, MastheadLogo } from '@digigov/ui/app/Masthead';
 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 { Heading } from '@digigov/ui/typography/Heading';
 
 export const WithLogo = () => (

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

@@ -26,6 +26,10 @@ test('renders the All Masthead variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

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

@@ -4,12 +4,16 @@ 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 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' });
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+  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

@@ -3,8 +3,7 @@ export default {
   title: 'Digigov UI/app/Modal',
   description:
     'Use the modal component with caution when you need to provide critical information or ask for a decision.',
-  link:
-    'https://guide.services.gov.gr/docs/patterns/admin-pages/components/modal',
+  link: 'https://guide.services.gov.gr/docs/patterns/admin-pages/components/modal',
   component: Modal,
   displayName: 'Modal',
 };

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

@@ -1,10 +1,6 @@
 import React from 'react';
 
-import {
-  ModalHeading,
-  ModalContent,
-  ModalAction,
-} from '@digigov/ui/app/Modal';
+import { ModalHeading, ModalContent, ModalAction } from '@digigov/ui/app/Modal';
 import {
   ModalAuto,
   ModalButtonAuto,

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

@@ -34,6 +34,10 @@ test('renders the All Modal variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

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

@@ -6,36 +6,49 @@ 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 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' });
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+  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 mount(<Dense />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>div>button").click();
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+  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 />
-  )
+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' });
+
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+  await page.locator('#root>div>button').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

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

@@ -14,6 +14,10 @@ test('renders the All NotFound variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/app/OutdatedBrowserBanner/hooks/evaluateBrowserVersion.ts

@@ -29,8 +29,8 @@ function strMapper(str, map) {
   for (const i in map) {
     // check if current value is array
     if (typeof map[i] === OBJ_TYPE && map[i].length > 0) {
-      for (let j = 0; j < map[i].length; j++) {
-        if (map[i][j].includes(str)) {
+      for (const j in map[i]) {
+        if (j.includes(str)) {
           return i === UNKNOWN ? undefined : i;
         }
       }

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

@@ -14,6 +14,10 @@ test('renders the All Panel variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

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

@@ -14,6 +14,10 @@ test('renders the All PhaseBannerHeader variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

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

@@ -10,7 +10,7 @@ export const Default = () => {
       const url = new URL(rawData);
       return url.origin === window.location.origin;
     } else {
-      return false
+      return false;
     }
   };
   const handleScan = (data) => {

package/src/app/QrCodeScanner/index.tsx

@@ -62,7 +62,7 @@ In order to be safe, you can:
       if (dataType === 'url') {
         try {
           new URL(data);
-        } catch (e) {
+        } catch {
           return onError(
             new Error(
               '@digigov-ui XSS Validation failed: qr code payload should follow the pattern `https://dilosi.services.gov.gr/show/:reference_code`'

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

@@ -18,6 +18,10 @@ test('renders the All QrCodeViewer variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/app/QrCodeViewer/index.tsx

@@ -17,12 +17,12 @@ const DEFAULT_INCLUDEMARGIN = false;
 const SUPPORTS_PATH2D = (function () {
   try {
     new Path2D().addPath(new Path2D());
-  } catch (e) {
+  } catch {
     return false;
   }
   return true;
 })();
-const ERROR_LEVEL_MAP: { [index: string]: qrcodegen.QrCode.Ecc } = {
+const ERROR_LEVEL_MAP: Record<string, qrcodegen.QrCode.Ecc> = {
   L: qrcodegen.QrCode.Ecc.LOW,
   M: qrcodegen.QrCode.Ecc.MEDIUM,
   Q: qrcodegen.QrCode.Ecc.QUARTILE,
@@ -50,7 +50,7 @@ const QrCodeViewerCanvas = React.forwardRef(function QrCodeViewerCanvas(
   // We're just using this state to trigger rerenders when images load. We
   // Don't actually read the value anywhere. A smarter use of useEffect would
   // depend on this value.
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
   const [isImgLoaded, setIsImageLoaded] = useState(false);
 
   useEffect(() => {
@@ -177,4 +177,4 @@ export const QrCodeViewer = React.forwardRef(function QrCodeViewer(
   return <QrCodeViewerCanvas {...props} ref={ref} />;
 });
 
-export default QrCodeViewer;
+export default QrCodeViewer;

package/src/app/QrCodeViewer/qrcodegen.ts

@@ -6,7 +6,7 @@
  */
 
 'use strict';
-// eslint-disable-next-line @typescript-eslint/no-namespace
+ 
 namespace qrcodegen {
   type bit = number;
   type byte = number;
@@ -1302,7 +1302,7 @@ namespace qrcodegen {
 }
 
 /*---- Public helper enumeration ----*/
-// eslint-disable-next-line @typescript-eslint/no-namespace
+ 
 namespace qrcodegen.QrCode {
   type int = number;
 
@@ -1336,7 +1336,7 @@ namespace qrcodegen.QrCode {
 }
 
 /*---- Public helper enumeration ----*/
-// eslint-disable-next-line @typescript-eslint/no-namespace
+ 
 namespace qrcodegen.QrSegment {
   type int = number;
 

package/src/app/QrCodeViewer/types.ts

@@ -1,7 +1,7 @@
 import type { CSSProperties } from 'react';
 import qrcodegen from '@digigov/ui/app/QrCodeViewer/qrcodegen';
 
-export type QRProps = {
+export interface QRProps {
   value: string;
   size?: number;
   // Should be a real enum, but doesn't seem to be compatible with real code.
@@ -11,20 +11,25 @@ export type QRProps = {
   style?: CSSProperties;
   includeMargin?: boolean;
   imageSettings?: ImageSettings;
-};
+}
 
 export type QRPropsCanvas = QRProps &
   React.CanvasHTMLAttributes<HTMLCanvasElement>;
 
 export type Modules = ReturnType<qrcodegen.QrCode['getModules']>;
 
-export type Excavation = { x: number; y: number; w: number; h: number };
+export interface Excavation {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
 
-export type ImageSettings = {
+export interface ImageSettings {
   src: string;
   height: number;
   width: number;
   excavate: boolean;
   x?: number;
   y?: number;
-};
+}

package/src/app/QrCodeViewer/utils.ts

@@ -7,7 +7,7 @@ import {
 const DEFAULT_IMG_SCALE = 0.1;
 export const MARGIN_SIZE = 4;
 export function generatePath(modules: Modules, margin = 0): string {
-  const ops: Array<string> = [];
+  const ops: string[] = [];
   modules.forEach(function (row, y) {
     let start: number | null = null;
     row.forEach(function (cell, x) {

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

@@ -7,6 +7,36 @@ export default {
   component: Skeleton,
   displayName: 'Skeleton',
 };
+
+export const WithControls = {
+  args: {
+    variant: 'text',
+    fontSize: 'sm',
+    animation: false,
+  },
+
+  argTypes: {
+    variant: {
+      options: ['circular', 'rectangular', 'text', 'button'],
+      control: { type: 'radio' },
+    },
+    fontSize: {
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      control: { type: 'select' },
+      if: { arg: 'variant', eq: 'text' },
+    },
+    width: {
+      control: { type: 'number', min: 0 },
+    },
+    height: {
+      control: { type: 'number', min: 0 },
+    },
+    animation: {
+      control: { type: 'boolean' },
+    },
+  },
+};
+
 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';

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { Skeleton } from '@digigov/ui/app/Skeleton';
 
 export const SpecificWidthAndHeight = () => (
-    <Skeleton width={200} height={200}/>
+  <Skeleton width={200} height={200} />
 );
 
 export default SpecificWidthAndHeight;

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

@@ -46,6 +46,10 @@ test('renders the All Skeleton variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });

package/src/app/ThemeOptions/index.tsx

@@ -66,13 +66,7 @@ export const ThemeOptions = React.forwardRef<
     lineHeightOption = true,
     letterSpacingOption = true,
     highlightLinksOption = true,
-
     colorsOptionTitleSize = 'sm',
-    fontSizeOptionTitleSize = 'sm',
-    lineHeightOptionTitleSize = 'sm',
-    letterSpacingOptionTitleSize = 'sm',
-    highlightLinksOptionTitleSize = 'sm',
-
     className,
     ...props
   },
@@ -87,18 +81,15 @@ export const ThemeOptions = React.forwardRef<
     fontSize || 'default'
   );
   const [lineHeight, changeLineHeight] = useLineHeight();
-  const [selectedLineHeight, setSelectedLineHeight] = useState<
-    LineHeightOptions
-  >(lineHeight || 'default');
+  const [selectedLineHeight, setSelectedLineHeight] =
+    useState<LineHeightOptions>(lineHeight || 'default');
   const [letterSpacing, changeLetterSpacing] = useLetterSpacing();
-  const [selectedLetterSpacing, setSelectedLetterSpacing] = useState<
-    LetterSpacingOptions
-  >(letterSpacing || 'default');
+  const [selectedLetterSpacing, setSelectedLetterSpacing] =
+    useState<LetterSpacingOptions>(letterSpacing || 'default');
 
   const [highlightLinks, changeHighlightLinks] = useHighlightLinks();
-  const [selectedHighlightLinks, setSelectedHighlightLinks] = useState<
-    HighlightLinksOptions
-  >(highlightLinks || 'default');
+  const [selectedHighlightLinks, setSelectedHighlightLinks] =
+    useState<HighlightLinksOptions>(highlightLinks || 'default');
 
   function handleOptions() {
     changeTheme(selectedTheme);

package/src/app/hooks/useHighlightLinks.ts

@@ -5,7 +5,7 @@ export type StoredHighlightLinksOptions = HighlightLinksOptions | null;
 
 export type UseHighlightLinksResult = [
   HighlightLinksOptions,
-  (selectedHighlightLinks: HighlightLinksOptions) => void
+  (selectedHighlightLinks: HighlightLinksOptions) => void,
 ];
 
 export const useHighlightLinks = (): UseHighlightLinksResult => {
@@ -13,9 +13,8 @@ export const useHighlightLinks = (): UseHighlightLinksResult => {
     '--theme-highlight-links'
   ) as StoredHighlightLinksOptions;
 
-  const [highlightLinks, changeHighlightLinks] = useState<
-    HighlightLinksOptions
-  >(storedHighlightLinks || 'default');
+  const [highlightLinks, changeHighlightLinks] =
+    useState<HighlightLinksOptions>(storedHighlightLinks || 'default');
 
   useEffect(() => {
     if (highlightLinks === 'highlight') {

package/src/app/hooks/useTheme.ts

@@ -5,12 +5,13 @@ export type StoredThemeOptions = ThemeSelectOptions | null;
 
 export type UseThemeResult = [
   ThemeSelectOptions,
-  (selectedTheme: ThemeSelectOptions) => void
+  (selectedTheme: ThemeSelectOptions) => void,
 ];
 
 export const useTheme = (): UseThemeResult => {
-  const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)')
-    .matches;
+  const prefersDarkScheme = window.matchMedia(
+    '(prefers-color-scheme: dark)'
+  ).matches;
   const storedTheme = localStorage.getItem(
     '--theme-palette'
   ) as StoredThemeOptions;

package/src/content/Accordion/Accordion.stories.jsx

@@ -0,0 +1,86 @@
+import React from 'react';
+
+import {
+  Accordion,
+  AccordionSection,
+  AccordionSectionContent,
+  AccordionSectionSummary,
+  AccordionSectionSummaryHeading,
+} from '@digigov/ui/content/Accordion';
+import { Hint } from '@digigov/ui/typography/Hint';
+
+export default {
+  title: 'Digigov UI/content/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,
+  displayName: 'Accordion',
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <Accordion
+        horizontalBorders={args.horizontalBorders}
+        summaryColor={args.summaryColor}
+        dense={args.dense}
+      >
+        <AccordionSection open>
+          <AccordionSectionSummary>
+            <AccordionSectionSummaryHeading aria-controls="content1">
+              {args.title}
+            </AccordionSectionSummaryHeading>
+            {args.hint > 0 && <Hint>{args.hintMessage}</Hint>}
+          </AccordionSectionSummary>
+          <AccordionSectionContent id="content1">
+            {args.content}
+          </AccordionSectionContent>
+        </AccordionSection>
+      </Accordion>
+    );
+  },
+  args: {
+    title: 'Διαφορές με το δημόσιο',
+    hint: true,
+    hintMessage:
+      'Δικαστικές και εξωδικαστικές διαφορές με το Δημόσιο, εκκαθάριση δικαστικών δαπανών κ.ά.',
+    content:
+      'Παρακάτω μπορείτε να δείτε την διαθέσιμη και ενεργή υπηρεσία που αφορά το επιλεγμένο γεγονός ζωής.',
+    horizontalBorders: 'top',
+    summaryColor: 'primary',
+    dense: false,
+  },
+  argTypes: {
+    title: {
+      control: { type: 'text' },
+    },
+    hint: {
+      control: { type: 'boolean' },
+    },
+    hintMessage: {
+      control: { type: 'text' },
+      if: { arg: 'hint', eq: true },
+    },
+    content: {
+      control: { type: 'text' },
+    },
+    horizontalBorders: {
+      options: ['none', 'top', 'bottom'],
+      control: { type: 'select' },
+    },
+    summaryColor: {
+      options: ['primary', 'secondary'],
+      control: { type: 'select' },
+    },
+    dense: {
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+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

@@ -4,20 +4,20 @@ exports[`renders the Accordion 1`] = `
 <body>
   <div>
     <div
-      class=" ds-accordion ds-accordion--border-top"
+      class="ds-accordion ds-accordion--border-top"
     >
       <details
-        class=" ds-accordion__section"
+        class="ds-accordion__section"
         open=""
       >
         <summary
           aria-level="2"
-          class=" ds-accordion__section-summary"
+          class="ds-accordion__section-summary"
           role="heading"
         >
           <h2
             aria-controls="content1"
-            class=" ds-accordion__section-heading"
+            class="ds-accordion__section-heading"
             role="button"
           >
             <span
@@ -28,22 +28,22 @@ exports[`renders the Accordion 1`] = `
           </h2>
         </summary>
         <div
-          class=" ds-accordion__section-content"
+          class="ds-accordion__section-content"
           id="content1"
         >
           <p
-            class=" ds-body"
+            class="ds-body"
           >
             Παρακάτω μπορείτε να δείτε την διαθέσιμη και ενεργή υπηρεσία που αφορά το επιλεγμένο γεγονός ζωής.
           </p>
           <ol
-            class=" ds-list"
+            class="ds-list"
           >
             <li
-              class=" ds-list__item"
+              class="ds-list__item"
             >
               <a
-                class=" ds-link"
+                class="ds-link"
                 href=""
               >
                 Αίτηση εξώδικης αναγνώρισης απαιτήσεων / συμβιβαστικής επίλυσης διαφορών με το Δημόσιο

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

@@ -6,7 +6,7 @@ import {
   AccordionSectionSummary,
   AccordionSectionSummaryHeading,
 } from '@digigov/ui/content/Accordion';
-import { 
+import {
   AccordionAuto,
   AccordionSectionAuto,
   AccordionCloseAllButtonAuto,

package/src/content/Accordion/auto.tsx

@@ -8,10 +8,9 @@ import { Button, ButtonProps } from '@digigov/react-core/Button';
 import {
   AccordionItemId,
   useAccordion,
+  UseAccordionReturn,
 } from '@digigov/ui/content/Accordion/hooks';
 
-import { UseAccordionReturn } from '@digigov/ui/content/Accordion/hooks';
-
 export interface ButtonAccordionAutoProps extends ButtonProps {}
 export interface AccordionSectionAutoProps extends AccordionSectionProps {
   id: string;

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

@@ -26,6 +26,10 @@ test('renders the All Accordion variants', async ({ mount, page }) => {
   )
   await page.evaluate(() => document.fonts.ready);
 
+  // Move the mouse to the top-left corner to avoid random hover issues
+  await page.mouse.move(0, 0);
+
+
   const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
   expect(screenshot).toMatchSnapshot();
 });