@digigov/ui 2.0.0-85c27c19 → 2.0.0-aefd0709

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

@@ -1,24 +1,25 @@
 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';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All QrCodeViewer variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Custom">
-      <Custom />
-    </TestVariant>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-  </div>
-  )
+    <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' });
+  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/__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/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/app/Skeleton/index.test.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Button } from '@digigov/ui/app/Skeleton/__stories__/Button';
 import { Circular } from '@digigov/ui/app/Skeleton/__stories__/Circular';
 import { Default } from '@digigov/ui/app/Skeleton/__stories__/Default';
@@ -10,43 +9,45 @@ import { SpecificWidthAndHeight } from '@digigov/ui/app/Skeleton/__stories__/Spe
 import { TextSizes } from '@digigov/ui/app/Skeleton/__stories__/TextSizes';
 import { UnderTypography } from '@digigov/ui/app/Skeleton/__stories__/UnderTypography';
 import { WithChildren } from '@digigov/ui/app/Skeleton/__stories__/WithChildren';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All Skeleton variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Button">
-      <Button />
-    </TestVariant>
-    <TestVariant title="Circular">
-      <Circular />
-    </TestVariant>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="NoAnimation">
-      <NoAnimation />
-    </TestVariant>
-    <TestVariant title="Rectangular">
-      <Rectangular />
-    </TestVariant>
-    <TestVariant title="SpecificWidthAndHeight">
-      <SpecificWidthAndHeight />
-    </TestVariant>
-    <TestVariant title="TextSizes">
-      <TextSizes />
-    </TestVariant>
-    <TestVariant title="UnderTypography">
-      <UnderTypography />
-    </TestVariant>
-    <TestVariant title="WithChildren">
-      <WithChildren />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Button">
+        <Button />
+      </TestVariant>
+      <TestVariant title="Circular">
+        <Circular />
+      </TestVariant>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="NoAnimation">
+        <NoAnimation />
+      </TestVariant>
+      <TestVariant title="Rectangular">
+        <Rectangular />
+      </TestVariant>
+      <TestVariant title="SpecificWidthAndHeight">
+        <SpecificWidthAndHeight />
+      </TestVariant>
+      <TestVariant title="TextSizes">
+        <TextSizes />
+      </TestVariant>
+      <TestVariant title="UnderTypography">
+        <UnderTypography />
+      </TestVariant>
+      <TestVariant title="WithChildren">
+        <WithChildren />
+      </TestVariant>
+    </div>
+  );
   await page.evaluate(() => document.fonts.ready);
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  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/__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>
 `;

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

@@ -1,15 +1,17 @@
 import React from 'react';
 
 import {
-  AccordionAuto,
   AccordionControls,
-  AccordionSectionAuto,
   AccordionSectionContent,
   AccordionSectionSummary,
   AccordionSectionSummaryHeading,
+} from '@digigov/ui/content/Accordion';
+import {
+  AccordionAuto,
+  AccordionSectionAuto,
   AccordionCloseAllButtonAuto,
   AccordionOpenAllButtonAuto,
-} from '@digigov/ui/content/Accordion';
+} from '@digigov/ui/content/Accordion/auto';
 
 import { List } from '@digigov/ui/content/List/List';
 import { ListItem } from '@digigov/ui/content/List/ListItem';

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.mdx → doc.mdx}

@@ -2,12 +2,9 @@
 id: accordion
 title: Accordion
 ---
-
  
 # Accordion
 
-
-
 This component is currently experimental because adding a summary line with more than a few short words will likely make the button text too long, particularly for users of screen readers.
 
 The accordion component lets users show and hide sections of related content on a page.
@@ -16,21 +13,13 @@ The accordion component lets users show and hide sections of related content on
 
 ### Default Accordion
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Accordion"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/content/Accordion/__stories__/Default.tsx" />
 
 ### Accordion with Hints
 
 Accordions hide content, so the labels need to be clear. If necessary, you can add a summary line to help users understand what is in the section.
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Accordion"
-  story="WithHints.tsx"
-/>
+<code src="@digigov/ui/content/Accordion/__stories__/WithHints.tsx" />
 
 ## Accessibility