@digigov/ui 2.0.0-113e6661 → 2.0.0-2177f152

package/src/content/Markdown/__stories__/Default.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import Grid from '@digigov/ui/layouts/Grid';
 import Markdown from '@digigov/ui/content/Markdown';
 import { SectionBreak } from '@digigov/ui/layouts';
+import Grid from '@digigov/ui/layouts/Grid';
 
 const markdownExamples = [
   '## Παράδειγμα h2',
@@ -35,7 +35,8 @@ export const Default = () => {
           </Grid>
         </Grid>
       ))}
-    </>);
+    </>
+  );
 };
 
 export default Default;

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

@@ -1,20 +1,21 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Default } from '@digigov/ui/content/Markdown/__stories__/Default';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All Markdown variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <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/content/Markdown/index.tsx

@@ -2,11 +2,17 @@ import React from 'react';
 import { useMarkdownToHTML } from '@digigov/ui/content/Markdown/useMarkdownToHTML';
 import SafeHTML from '@digigov/ui/content/SafeHTML';
 
-export const Markdown = ({ children, content }: { children?: React.ReactNode; content?: string }) => {
-  content = content || children as string;
+export const Markdown = ({
+  children,
+  content,
+}: {
+  children?: React.ReactNode;
+  content?: string;
+}) => {
+  content = content || (children as string);
 
   const html = useMarkdownToHTML(content);
   return <SafeHTML content={html} />;
 };
 
-export default Markdown;
+export default Markdown;

package/src/content/SafeHTML/SafeHTML.stories.js

@@ -1,8 +1,7 @@
 import SafeHTML from '@digigov/ui/content/SafeHTML';
 export default {
   title: 'Digigov UI/content/SafeHTML',
-  description:
-    'Display html content',
+  description: 'Display html content',
   component: SafeHTML,
   displayName: 'SafeHTML',
 };

package/src/content/SafeHTML/__stories__/Default.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import Grid from '@digigov/ui/layouts/Grid';
 import SafeHTML from '@digigov/ui/content/SafeHTML';
 import { SectionBreak } from '@digigov/ui/layouts';
+import Grid from '@digigov/ui/layouts/Grid';
 
 const htmlExamples = [
   '<h1>Παράδειγμα h1</h1>',
@@ -35,7 +35,8 @@ export const Default = () => {
           </Grid>
         </Grid>
       ))}
-    </>);
+    </>
+  );
 };
 
-export default Default;
+export default Default;

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

@@ -1,20 +1,21 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Default } from '@digigov/ui/content/SafeHTML/__stories__/Default';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All SafeHTML variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <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/content/SafeHTML/index.tsx

@@ -26,7 +26,7 @@ const elementClassNameMapping = {
 };
 
 if (typeof window !== 'undefined') {
-  DomPurify.addHook('afterSanitizeAttributes', function(node) {
+  DomPurify.addHook('afterSanitizeAttributes', function (node) {
     if (node.tagName.toLowerCase() in elementClassNameMapping) {
       node.setAttribute(
         'class',
@@ -43,7 +43,7 @@ if (typeof window !== 'undefined') {
 
 export const getClosingTags = (htmlString) => {
   const tags = htmlString.match(/<[^>]+\/?>/g);
-  const stack: Array<string> = [];
+  const stack: string[] = [];
   if (!tags) {
     return stack;
   }
@@ -64,7 +64,7 @@ export const getClosingTags = (htmlString) => {
 
 export interface SafeHTMLProps {
   content: string;
-  tags?: Array<string>;
+  tags?: string[];
   Tag?: string;
   style?: React.CSSProperties;
 }

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

@@ -9,7 +9,6 @@ import {
   StepNavAccordionSummaryHeading,
   StepNavAccordionHeadingTitle,
   StepNavAccordionHeadingText,
-
 } from '@digigov/ui/content/StepNav';
 import {
   StepNavAuto,

package/src/content/StepNav/auto.tsx

@@ -5,9 +5,11 @@ import {
   StepNavAccordion,
   StepNavAccordionProps,
 } from '@digigov/react-core/StepNavAccordion';
-import { UseAccordionReturn as useStepNavReturn } from '@digigov/ui/content/Accordion/hooks';
-import { AccordionItemId as StepNavItemId } from '@digigov/ui/content/Accordion/hooks';
-import { useAccordion as useStepNav } from '@digigov/ui/content/Accordion/hooks';
+import {
+  UseAccordionReturn as useStepNavReturn,
+  AccordionItemId as StepNavItemId,
+  useAccordion as useStepNav,
+} from '@digigov/ui/content/Accordion/hooks';
 
 export interface ButtonAutoProps extends ButtonProps {}
 export interface StepNavAccordionAutoProps extends StepNavAccordionProps {

package/src/content/StepNav/{index.mdx → doc.mdx}

@@ -9,29 +9,15 @@ StepNav is a component that displays number of steps required to complete a proc
 
 ## How to use
 
-### Default
+<code src="@digigov/ui/content/StepNav/__stories__/Default.tsx" />
 
-<Story
-  packageName="@digigov/ui"
-  component="content/StepNav"
-  story="Default.tsx"
-/>
+### With hints
 
-### StepNav with hints
+<code src="@digigov/ui/content/StepNav/__stories__/WithHints.tsx" />
 
-<Story
-  packageName="@digigov/ui"
-  component="content/StepNav"
-  story="WithHints.tsx"
-/>
+### With dense style
 
-### StepNav with dense
-
-<Story
-  packageName="@digigov/ui"
-  component="content/StepNav"
-  story="Dense.tsx"
-/>
+<code src="@digigov/ui/content/StepNav/__stories__/Dense.tsx" />
 
 ## API
 

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

@@ -1,36 +1,37 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Auto } from '@digigov/ui/content/StepNav/__stories__/Auto';
 import { Default } from '@digigov/ui/content/StepNav/__stories__/Default';
 import { Dense } from '@digigov/ui/content/StepNav/__stories__/Dense';
 import { WithHints } from '@digigov/ui/content/StepNav/__stories__/WithHints';
 import { WithHook } from '@digigov/ui/content/StepNav/__stories__/WithHook';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All StepNav variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Auto">
-      <Auto />
-    </TestVariant>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="Dense">
-      <Dense />
-    </TestVariant>
-    <TestVariant title="WithHints">
-      <WithHints />
-    </TestVariant>
-    <TestVariant title="WithHook">
-      <WithHook />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Auto">
+        <Auto />
+      </TestVariant>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="Dense">
+        <Dense />
+      </TestVariant>
+      <TestVariant title="WithHints">
+        <WithHints />
+      </TestVariant>
+      <TestVariant title="WithHook">
+        <WithHook />
+      </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/content/StepNav/interaction.test.tsx

@@ -4,15 +4,23 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import { Default } from '@digigov/ui/content/StepNav/__stories__/Default';
 
 test('renders the Default Click 1st and all', async ({ mount, page }) => {
-  await mount(
-    <Default />
-  )
+  await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>div>ol>li:nth-child(1)>details>summary>h2>div>span:nth-child(1)").hover();
- await page.locator("#root>div>ol>li:nth-child(1)>details>summary>h2>div>span:nth-child(1)").click();
- await page.locator("#root>div>div>button").click();
+  await page
+    .locator(
+      '#root>div>ol>li:nth-child(1)>details>summary>h2>div>span:nth-child(1)'
+    )
+    .hover();
+  await page
+    .locator(
+      '#root>div>ol>li:nth-child(1)>details>summary>h2>div>span:nth-child(1)'
+    )
+    .click();
+  await page.locator('#root>div>div>button').click();
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/content/SummaryList/__snapshots__/index.spec.tsx.snap

@@ -1,97 +1,45 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders the SummaryList with sample data 1`] = `
-<ForwardRef(SummaryList)>
-  <ForwardRef(Base)
-    as="dl"
-    className="ds-summary-list"
-  >
+<body>
+  <div>
     <dl
-      className="ds-summary-list"
+      class="ds-summary-list"
     >
-      <ForwardRef(SummaryListItem)>
-        <ForwardRef(Base)
-          as="div"
-          className="ds-summary-list__row"
+      <div
+        class="ds-summary-list__row"
+      >
+        <dt
+          class="ds-summary-list__key ds-summary-list__key--sm-3"
         >
-          <div
-            className="ds-summary-list__row"
-          >
-            <ForwardRef(SummaryListItemKey)>
-              <ForwardRef(Base)
-                as="dt"
-                className="ds-summary-list__key"
-              >
-                <dt
-                  className="ds-summary-list__key"
-                >
-                  Όνομα
-                </dt>
-              </ForwardRef(Base)>
-            </ForwardRef(SummaryListItemKey)>
-            <ForwardRef(SummaryListItemValue)>
-              <ForwardRef(Base)
-                as="dd"
-                className="ds-summary-list__value"
-              >
-                <dd
-                  className="ds-summary-list__value"
-                >
-                   Μάριος
-                </dd>
-              </ForwardRef(Base)>
-            </ForwardRef(SummaryListItemValue)>
-            <ForwardRef(SummaryListItemAction)>
-              <ForwardRef(Base)
-                as="dd"
-                className="ds-summary-list__actions"
-              >
-                <dd
-                  className="ds-summary-list__actions"
-                >
-                   Αλλαγή
-                </dd>
-              </ForwardRef(Base)>
-            </ForwardRef(SummaryListItemAction)>
-          </div>
-        </ForwardRef(Base)>
-      </ForwardRef(SummaryListItem)>
-      <ForwardRef(SummaryListItem)>
-        <ForwardRef(Base)
-          as="div"
-          className="ds-summary-list__row"
+          Όνομα
+        </dt>
+        <dd
+          class="ds-summary-list__value"
         >
-          <div
-            className="ds-summary-list__row"
-          >
-            <ForwardRef(SummaryListItemKey)>
-              <ForwardRef(Base)
-                as="dt"
-                className="ds-summary-list__key"
-              >
-                <dt
-                  className="ds-summary-list__key"
-                >
-                  Επώνυμο
-                </dt>
-              </ForwardRef(Base)>
-            </ForwardRef(SummaryListItemKey)>
-            <ForwardRef(SummaryListItemValue)>
-              <ForwardRef(Base)
-                as="dd"
-                className="ds-summary-list__value"
-              >
-                <dd
-                  className="ds-summary-list__value"
-                >
-                  Μενεξές
-                </dd>
-              </ForwardRef(Base)>
-            </ForwardRef(SummaryListItemValue)>
-          </div>
-        </ForwardRef(Base)>
-      </ForwardRef(SummaryListItem)>
+           Μάριος
+        </dd>
+        <dd
+          class="ds-summary-list__actions"
+        >
+           Αλλαγή
+        </dd>
+      </div>
+      <div
+        class="ds-summary-list__row"
+      >
+        <dt
+          class="ds-summary-list__key ds-summary-list__key--sm-3"
+        >
+          Επώνυμο
+        </dt>
+        <dd
+          class="ds-summary-list__value"
+        >
+          Μενεξές
+        </dd>
+      </div>
     </dl>
-  </ForwardRef(Base)>
-</ForwardRef(SummaryList)>
+  </div>
+</body>
 `;

package/src/content/SummaryList/{index.mdx → doc.mdx}

@@ -5,37 +5,25 @@ title: SummaryList
 
 # SummaryList
 
-Use the summary list to summarise information, for example, a user’s responses at the end of a form.
+Use the summary list to summarize information, for example, a user’s responses at the end of a form.
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="content/SummaryList"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/content/SummaryList/__stories__/Default.tsx" />
 
-### Summary list with actions
+### With actions
 
 Assistive technology users, like those who use a screen reader, may hear the links out of context and not know what they do.
 To give more context, add visually hidden text to the links.
 This means a screen reader user will hear a meaningful action, like ‘Αλλαγή ονόματος’ or ‘Αλλαγή ημερομηνίας γέννησης’.
 
-<Story
-  packageName="@digigov/ui"
-  component="content/SummaryList"
-  story="WithActions.tsx"
-/>
+<code src="@digigov/ui/content/SummaryList/__stories__/WithActions.tsx" />
 
-### Summary list without borders
+### Without borders
 
 If you do not include actions in your summary list and it would be better for your design to remove the separating borders, use the `border={false}` prop.
 
-<Story
-  packageName="@digigov/ui"
-  component="content/SummaryList"
-  story="WithoutBorders.tsx"
-/>
+<code src="@digigov/ui/content/SummaryList/__stories__/WithoutBorders.tsx" />
 
 ## API
 

package/src/content/SummaryList/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 { Default } from '@digigov/ui/content/SummaryList/__stories__/Default';
 import { RowVariations } from '@digigov/ui/content/SummaryList/__stories__/RowVariations';
 import { SummaryListExample } from '@digigov/ui/content/SummaryList/__stories__/SummaryListExample';
@@ -9,40 +8,42 @@ import { WithKeyAndAction } from '@digigov/ui/content/SummaryList/__stories__/Wi
 import { WithNoLastBorder } from '@digigov/ui/content/SummaryList/__stories__/WithNoLastBorder';
 import { WithoutActions } from '@digigov/ui/content/SummaryList/__stories__/WithoutActions';
 import { WithoutBorders } from '@digigov/ui/content/SummaryList/__stories__/WithoutBorders';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All SummaryList variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="RowVariations">
-      <RowVariations />
-    </TestVariant>
-    <TestVariant title="SummaryListExample">
-      <SummaryListExample />
-    </TestVariant>
-    <TestVariant title="WithActions">
-      <WithActions />
-    </TestVariant>
-    <TestVariant title="WithKeyAndAction">
-      <WithKeyAndAction />
-    </TestVariant>
-    <TestVariant title="WithNoLastBorder">
-      <WithNoLastBorder />
-    </TestVariant>
-    <TestVariant title="WithoutActions">
-      <WithoutActions />
-    </TestVariant>
-    <TestVariant title="WithoutBorders">
-      <WithoutBorders />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="RowVariations">
+        <RowVariations />
+      </TestVariant>
+      <TestVariant title="SummaryListExample">
+        <SummaryListExample />
+      </TestVariant>
+      <TestVariant title="WithActions">
+        <WithActions />
+      </TestVariant>
+      <TestVariant title="WithKeyAndAction">
+        <WithKeyAndAction />
+      </TestVariant>
+      <TestVariant title="WithNoLastBorder">
+        <WithNoLastBorder />
+      </TestVariant>
+      <TestVariant title="WithoutActions">
+        <WithoutActions />
+      </TestVariant>
+      <TestVariant title="WithoutBorders">
+        <WithoutBorders />
+      </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/content/SummaryList/interaction.test.tsx

@@ -3,15 +3,18 @@ import { test, expect } from '@playwright/experimental-ct-react';
 
 import { WithActions } from '@digigov/ui/content/SummaryList/__stories__/WithActions';
 
-test('renders the WithActions Navigate with keyboard', async ({ mount, page }) => {
-  await mount(
-    <WithActions />
-  )
+test('renders the WithActions Navigate with keyboard', async ({
+  mount,
+  page,
+}) => {
+  await mount(<WithActions />);
   await page.evaluate(() => document.fonts.ready);
- await page.keyboard.press("Tab");
- await page.keyboard.press("Tab");
+  await page.keyboard.press('Tab');
+  await page.keyboard.press('Tab');
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/content/Table/Table.stories.js

@@ -19,7 +19,7 @@ export { DarkVariant } from '@digigov/ui/content/Table/__stories__/DarkVariant';
 export { DarkVariantWithVerticalHeaders } from '@digigov/ui/content/Table/__stories__/DarkVariantWithVerticalHeaders';
 export { WithLoader } from '@digigov/ui/content/Table/__stories__/WithLoader';
 export { DefinedWidth } from '@digigov/ui/content/Table/__stories__/DefinedWidth';
-export { Densed } from '@digigov/ui/content/Table/__stories__/Densed';
+export { Dense } from '@digigov/ui/content/Table/__stories__/Dense';
 export { RowColors } from '@digigov/ui/content/Table/__stories__/RowColors';
 export { MultipleProps } from '@digigov/ui/content/Table/__stories__/MultipleProps';
 export { WithSortFilters } from '@digigov/ui/content/Table/__stories__/WithSortFilters';

package/src/content/Table/TableFloatingScroll.tsx

@@ -42,7 +42,6 @@ export function TableFloatingScroll(props) {
       if (ref.current?.offsetWidth) {
         // @ts-ignore
         setContainerWidth(ref.current.offsetWidth);
-
       }
       if (contentRef.current?.offsetWidth) {
         // @ts-ignore

package/src/content/Table/__stories__/{Densed.tsx → Dense.tsx}

@@ -98,7 +98,7 @@ const data = [
   },
 ];
 
-export const Densed = () => {
+export const Dense = () => {
   return (
     <TableContainer border>
       <Table dense>
@@ -126,4 +126,4 @@ export const Densed = () => {
     </TableContainer>
   );
 };
-export default Densed;
+export default Dense;

package/src/content/Table/__stories__/WithLoader.tsx

@@ -1,9 +1,8 @@
 // @delay-test-snapshot
 import React, { useState } from 'react';
-import { CircularProgress } from '@digigov/ui/app/Loader';
-import { LoaderContainer } from '@digigov/ui/app/Loader';
-import { TableLoaderBackground } from '@digigov/ui/content/Table';
+import { CircularProgress, LoaderContainer } from '@digigov/ui/app/Loader';
 import {
+  TableLoaderBackground,
   TableContainer,
   Table,
   TableCaption,