@digigov/ui 2.0.0-85c27c19 → 2.0.0-87b6232d

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,11 +9,13 @@ import {
   StepNavAccordionSummaryHeading,
   StepNavAccordionHeadingTitle,
   StepNavAccordionHeadingText,
+} from '@digigov/ui/content/StepNav';
+import {
   StepNavAuto,
   StepNavAccordionAuto,
   StepNavCloseAllButtonAuto,
   StepNavOpenAllButtonAuto,
-} from '@digigov/ui/content/StepNav';
+} from '@digigov/ui/content/StepNav/auto';
 
 import {
   SummaryList,

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

@@ -30,6 +30,10 @@ test('renders the All StepNav 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/content/StepNav/index.tsx

@@ -9,7 +9,6 @@ import StepNavControls from '@digigov/react-core/StepNavControls';
 import StepNavList from '@digigov/react-core/StepNavList';
 import StepNavListItem from '@digigov/react-core/StepNavListItem';
 export * from '@digigov/ui/content/Accordion/hooks';
-export * from '@digigov/ui/content/StepNav/auto';
 export { useAccordion as useStepNav } from '@digigov/ui/content/Accordion/hooks';
 export * from '@digigov/react-core/StepNavAccordion';
 export {

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

@@ -4,15 +4,27 @@ 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();
 
-  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>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',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/content/SummaryList/SummaryList.stories.js

@@ -1,15 +1,22 @@
-import SummaryList from '@digigov/ui/content/SummaryList';
 export default {
   title: 'Digigov UI/content/SummaryList',
-  description: 'Use the summary list to summarise information.',
+  description: 'Use the summary list to summarize information.',
   link: 'https://guide.services.gov.gr/docs/components/summary-list',
-  component: SummaryList,
   displayName: 'SummaryList',
+  component: SummaryListExample,
+};
+import { SummaryListExample } from '@digigov/ui/content/SummaryList/__stories__/SummaryListExample';
+
+export const Default = {
+  args: {
+    sm: 5,
+    md: 4,
+    lg: 3,
+    border: true,
+    noLastBorder: false,
+    itemBorder: true,
+    showKey: true,
+    showValue: true,
+    showActions: true,
+  },
 };
-export { Default } from '@digigov/ui/content/SummaryList/__stories__/Default';
-export { WithActions } from '@digigov/ui/content/SummaryList/__stories__/WithActions';
-export { WithoutActions } from '@digigov/ui/content/SummaryList/__stories__/WithoutActions';
-export { WithNoLastBorder } from '@digigov/ui/content/SummaryList/__stories__/WithNoLastBorder';
-export { WithoutBorders } from '@digigov/ui/content/SummaryList/__stories__/WithoutBorders';
-export { WithKeyAndAction } from '@digigov/ui/content/SummaryList/__stories__/WithKeyAndAction';
-export { RowVariations } from '@digigov/ui/content/SummaryList/__stories__/RowVariations';

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/__stories__/SummaryListExample.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+
+import {
+  SummaryList,
+  SummaryListItem,
+  SummaryListItemAction,
+  SummaryListItemKey,
+  SummaryListItemValue,
+  WidthValues,
+} from '@digigov/ui/content/SummaryList';
+
+import { Link } from '@digigov/ui/navigation/Link';
+
+const data = [
+  {
+    key: 'Όνομα',
+    value: 'Γιώργος Παπαδόπουλος',
+    action: 'Αλλαγή',
+  },
+  {
+    key: 'Ημερομηνία Γέννησης',
+    value: '11 Μαϊου 1990',
+    action: 'Αλλαγή Ημερομηνίας',
+  },
+  {
+    key: 'Κινητό τηλέφωνο επικοινωνίας',
+    value: '6941234567',
+    action: 'Αλλαγή',
+  },
+];
+
+export const SummaryListExample = ({
+  sm,
+  md,
+  lg,
+  border = true,
+  noLastBorder = false,
+  itemBorder = true,
+  showKey = true,
+  showValue = true,
+  showActions = true,
+}: {
+  sm?: WidthValues;
+  md?: WidthValues;
+  lg?: WidthValues;
+  border?: boolean;
+  noLastBorder?: boolean;
+  itemBorder?: boolean;
+  showKey?: boolean;
+  showValue?: boolean;
+  showActions?: boolean;
+}) => (
+  <SummaryList border={border} noLastBorder={noLastBorder}>
+    {data &&
+      data.map((item, index) => (
+        <SummaryListItem key={index} border={itemBorder}>
+          {showKey && (
+            <SummaryListItemKey sm={sm} md={md} lg={lg}>
+              {item.key}
+            </SummaryListItemKey>
+          )}
+          {showValue && (
+            <SummaryListItemValue>{item.value}</SummaryListItemValue>
+          )}
+          {showActions && (
+            <SummaryListItemAction>
+              <Link href="#">{item.action}</Link>
+            </SummaryListItemAction>
+          )}
+        </SummaryListItem>
+      ))}
+  </SummaryList>
+);
+
+export default SummaryListExample;

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

@@ -3,6 +3,7 @@ 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';
 import { WithActions } from '@digigov/ui/content/SummaryList/__stories__/WithActions';
 import { WithKeyAndAction } from '@digigov/ui/content/SummaryList/__stories__/WithKeyAndAction';
 import { WithNoLastBorder } from '@digigov/ui/content/SummaryList/__stories__/WithNoLastBorder';
@@ -19,6 +20,9 @@ test('renders the All SummaryList variants', async ({ mount, page }) => {
     <TestVariant title="RowVariations">
       <RowVariations />
     </TestVariant>
+    <TestVariant title="SummaryListExample">
+      <SummaryListExample />
+    </TestVariant>
     <TestVariant title="WithActions">
       <WithActions />
     </TestVariant>
@@ -38,6 +42,10 @@ test('renders the All SummaryList 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/content/SummaryList/interaction.test.tsx

@@ -3,15 +3,22 @@ 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");
 
-  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.keyboard.press('Tab');
+  await page.keyboard.press('Tab');
+
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-