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

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

@@ -4,15 +4,9 @@ import { ListItem } from '@digigov/ui/content/List/ListItem';
 
 export const Default = () => (
   <List>
-    <ListItem>
-      Αποτελέσματα διαγνωστικών εργαστηριακών εξετάσεων
-    </ListItem>
-    <ListItem>
-      Πτυχία τριτοβάθμιας εκπαίδευσης
-    </ListItem>
-    <ListItem>
-      Υπεύθυνη Δήλωση / Εξουσιοδότηση / Γνήσιο Υπογραφής
-    </ListItem>
+    <ListItem>Αποτελέσματα διαγνωστικών εργαστηριακών εξετάσεων</ListItem>
+    <ListItem>Πτυχία τριτοβάθμιας εκπαίδευσης</ListItem>
+    <ListItem>Υπεύθυνη Δήλωση / Εξουσιοδότηση / Γνήσιο Υπογραφής</ListItem>
   </List>
 );
 

package/src/content/List/doc.mdx

@@ -0,0 +1,28 @@
+---
+id: list
+title: List
+---
+
+# List
+
+## How to use
+
+<code src="@digigov/ui/content/List/__stories__/Default.tsx" />
+
+### List with bullets
+
+<code src="@digigov/ui/content/List/__stories__/BulletList.tsx" />
+
+### List with numbers
+
+<code src="@digigov/ui/content/List/__stories__/NumberedList.tsx" />
+
+### List with extra space
+
+<code src="@digigov/ui/content/List/__stories__/WithExtraSpace.tsx" />
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["List", "ListItem"]} />

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

@@ -1,40 +1,41 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { BulletList } from '@digigov/ui/content/List/__stories__/BulletList';
 import { Default } from '@digigov/ui/content/List/__stories__/Default';
 import { HorizontalList } from '@digigov/ui/content/List/__stories__/HorizontalList';
 import { NestedBulletList } from '@digigov/ui/content/List/__stories__/NestedBulletList';
 import { NumberedList } from '@digigov/ui/content/List/__stories__/NumberedList';
 import { WithExtraSpace } from '@digigov/ui/content/List/__stories__/WithExtraSpace';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All List variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="BulletList">
-      <BulletList />
-    </TestVariant>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="HorizontalList">
-      <HorizontalList />
-    </TestVariant>
-    <TestVariant title="NestedBulletList">
-      <NestedBulletList />
-    </TestVariant>
-    <TestVariant title="NumberedList">
-      <NumberedList />
-    </TestVariant>
-    <TestVariant title="WithExtraSpace">
-      <WithExtraSpace />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="BulletList">
+        <BulletList />
+      </TestVariant>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="HorizontalList">
+        <HorizontalList />
+      </TestVariant>
+      <TestVariant title="NestedBulletList">
+        <NestedBulletList />
+      </TestVariant>
+      <TestVariant title="NumberedList">
+        <NumberedList />
+      </TestVariant>
+      <TestVariant title="WithExtraSpace">
+        <WithExtraSpace />
+      </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/Markdown.stories.js

@@ -0,0 +1,8 @@
+import Markdown from '@digigov/ui/content/Markdown';
+export default {
+  title: 'Digigov UI/content/Markdown',
+  description: 'Display markdown content',
+  component: Markdown,
+  displayName: 'Markdown',
+};
+export { Default } from '@digigov/ui/content/Markdown/__stories__/Default';

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import Markdown from '@digigov/ui/content/Markdown';
+import { SectionBreak } from '@digigov/ui/layouts';
+import Grid from '@digigov/ui/layouts/Grid';
+
+const markdownExamples = [
+  '## Παράδειγμα h2',
+  'Προς:<sup>(1)</sup>',
+  '[εδώ](http://www.astynomia.gr/index.php?option=ozo_content&perform=view&id=139&Itemid=132&lang)',
+  '[https://pki.aped.gov.gr/repository](https://pki.aped.gov.gr/repository)',
+  '**Σημαντικό:**',
+  `Μπορείτε να αιτηθείτε για απόσπασμα Ληξιαρχικής Πράξης που:
+  * εκδόθηκε μετά τις 08/05/2013
+  * μεταβλήθηκε ή εκδόθηκε απόσπασμά της μετά το 2018
+  * εκδόθηκε από το Ειδικό Ληξιαρχείο Αθηνών μετά τις 22/01/2018 και αφορά γεγονότα που τελέστηκαν στο εξωτερικό\n\n`,
+  `Εάν είστε εκπαιδευτική κατηγορία ατόμων που πρέπει να προσκομίσουν δήλωση
+  αποτελέσματος για ευτικός (δημοσίου ή ιδιωτικού σχολείου) ή ανήκετε
+  σε κάποια άλλη κα την πρόσβαση σε σχολική μονάδα,
+  συμπληρώστε το πεδίο <b>Όνομα σχολείου</b>, διαφορετικά αφήστε το κενό.`,
+];
+
+export const Default = () => {
+  return (
+    <>
+      {markdownExamples.map((markdown, index) => (
+        <Grid container key={index} spacing={4}>
+          <Grid item xs={12} sm={6}>
+            {markdown}
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <Markdown content={markdown} />
+          </Grid>
+          <Grid item xs={12}>
+            <SectionBreak />
+          </Grid>
+        </Grid>
+      ))}
+    </>
+  );
+};
+
+export default Default;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+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>
+  );
+  await page.evaluate(() => document.fonts.ready);
+
+  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

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

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

@@ -0,0 +1,42 @@
+import React from 'react';
+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>',
+  'Προς:<sup>(1)</sup>',
+  '<a target="_blank" href="http://www.astynomia.gr/index.php?option=ozo_content&perform=view&id=139&Itemid=132&lang">εδώ</a>',
+  `Μπορείτε να αιτηθείτε για απόσπασμα Ληξιαρχικής Πράξης που:<br/><br/>
+  • εκδόθηκε μετά τις 08/05/2013<br/>
+  • μεταβλήθηκε ή εκδόθηκε απόσπασμά της μετά το 2018<br/>
+  • εκδόθηκε από το Ειδικό Ληξιαρχείο Αθηνών μετά τις 22/01/2018 και αφορά γεγονότα που τελέστηκαν στο εξωτερικό<br/><br/>`,
+  `Εάν είστε εκπαιδευτικός (δημοσίου ή ιδιωτικού σχολείου) ή ανήκετε
+    σε κάποια άλλη κατηγορία ατόμων που πρέπει να προσκομίσουν δήλωση
+    αποτελέσματος για την πρόσβαση σε σχολική μονάδα,
+    συμπληρώστε το πεδίο <b>Όνομα σχολείου</b>, διαφορετικά αφήστε το κενό.`,
+  'Μπορείτε να εκδώσετε τα παρακάτω έγγραφα: <ul><li>Πιστοποιητικό γάμου</li><li>Βεβαίωση οικογενειακής κατάστασης</li></ul>',
+  'Μπορείτε να εκδώσετε τα παρακάτω έγγραφα: <ol><li>Πιστοποιητικό γάμου</li><li>Βεβαίωση οικογενειακής κατάστασης</li></ol>',
+];
+
+export const Default = () => {
+  return (
+    <>
+      {htmlExamples.map((html, index) => (
+        <Grid container key={index} spacing={4}>
+          <Grid item xs={12} sm={6}>
+            {html}
+          </Grid>
+          <Grid item xs={12} sm={6}>
+            <SafeHTML content={html} />
+          </Grid>
+          <Grid item xs={12}>
+            <SectionBreak />
+          </Grid>
+        </Grid>
+      ))}
+    </>
+  );
+};
+
+export default Default;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+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>
+  );
+  await page.evaluate(() => document.fonts.ready);
+
+  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,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

@@ -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/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,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/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>
 `;