@digigov/ui 2.0.0-2445d5cb → 2.0.0-298cfc51

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

@@ -0,0 +1,20 @@
+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';
+
+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/SafeHTML/SafeHTML.stories.js

@@ -0,0 +1,9 @@
+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,41 @@
+import React from 'react';
+import Grid from '@digigov/ui/layouts/Grid';
+import SafeHTML from '@digigov/ui/content/SafeHTML';
+import { SectionBreak } from '@digigov/ui/layouts';
+
+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,20 @@
+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';
+
+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/StepNav/__stories__/Auto.tsx

@@ -9,11 +9,14 @@ 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/{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.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/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>

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/__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/doc.mdx

@@ -0,0 +1,81 @@
+---
+id: table
+title: Table
+---
+
+# Table
+
+## How to use
+
+<code src="@digigov/ui/content/Table/__stories__/Default.tsx" />
+
+### With dark header
+
+<code src="@digigov/ui/content/Table/__stories__/DarkVariant.tsx" />
+
+### With captions
+
+Use the `<TableCaption>` element to describe a table in the same way you would use a heading. A caption helps users find, navigate and understand tables.
+
+<code src="@digigov/ui/content/Table/__stories__/TableCaptions.tsx" />
+
+### With numeric values
+
+<code src="@digigov/ui/content/Table/__stories__/NumericDataType.tsx" />
+
+### With zebra rows
+
+<code src="@digigov/ui/content/Table/__stories__/ZebraProp.tsx" />
+
+### With primary or secondary colored rows
+
+The prop `color='primary'` or `color='secondary'` is only functional when Table component has `variant='default'`.
+
+<code src="@digigov/ui/content/Table/__stories__/RowColors.tsx" />
+
+### With vertical lines
+
+<code src="@digigov/ui/content/Table/__stories__/VerticalBorders.tsx" />
+
+### With dense style
+
+<code src="@digigov/ui/content/Table/__stories__/Dense.tsx" />
+
+### Custom column widths
+
+<code src="@digigov/ui/content/Table/__stories__/DefinedWidth.tsx" />
+
+### Without data (empty table)
+
+<code src="@digigov/ui/content/Table/__stories__/NoData.tsx" />
+
+### With loader
+
+<code src="@digigov/ui/content/Table/__stories__/WithLoader.tsx" />
+
+### With stack style
+
+Use this prop when you want to display a more user friendly table for small screens.
+
+<code src="@digigov/ui/content/Table/__stories__/Stacked.tsx" />
+
+## Accessibility
+
+You can read more about the accessibility patterns used in our Table
+implementation in the ARIA Authoring Practices Guide (APG) at [Table](https://www.w3.org/WAI/ARIA/apg/patterns/table/) section.
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "TableContainer",
+  "Table",
+  "TableCaption",
+  "TableHead",
+  "TableRow",
+  "TableBody",
+  "TableHeadCell",
+  "TableDataCell"
+  ]
+} />

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

@@ -5,7 +5,7 @@ import { DarkVariant } from '@digigov/ui/content/Table/__stories__/DarkVariant';
 import { DarkVariantWithVerticalHeaders } from '@digigov/ui/content/Table/__stories__/DarkVariantWithVerticalHeaders';
 import { Default } from '@digigov/ui/content/Table/__stories__/Default';
 import { DefinedWidth } from '@digigov/ui/content/Table/__stories__/DefinedWidth';
-import { Densed } from '@digigov/ui/content/Table/__stories__/Densed';
+import { Dense } from '@digigov/ui/content/Table/__stories__/Dense';
 import { Full } from '@digigov/ui/content/Table/__stories__/Full';
 import { MultipleProps } from '@digigov/ui/content/Table/__stories__/MultipleProps';
 import { NoData } from '@digigov/ui/content/Table/__stories__/NoData';
@@ -38,8 +38,8 @@ test('renders the All Table variants', async ({ mount, page }) => {
     <TestVariant title="DefinedWidth">
       <DefinedWidth />
     </TestVariant>
-    <TestVariant title="Densed">
-      <Densed />
+    <TestVariant title="Dense">
+      <Dense />
     </TestVariant>
     <TestVariant title="Full">
       <Full />

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
 
 import { WithLoader } from '@digigov/ui/content/Table/__stories__/WithLoader';
+import { WithSortFilters } from '@digigov/ui/content/Table/__stories__/WithSortFilters';
 const SCREENSHOT_DELAY = 2_000;
 const delay = ms => new Promise(resolve => setTimeout(resolve, ms));
 
@@ -16,3 +17,16 @@ test('renders the WithLoader Toggle Loading', async ({ mount, page }) => {
   expect(screenshot).toMatchSnapshot();
 });
   
+
+
+test('renders the WithSortFilters Click on header cell', async ({ mount, page }) => {
+  await mount(
+    <WithSortFilters />
+  )
+  await page.evaluate(() => document.fonts.ready);
+  await delay(SCREENSHOT_DELAY);
+ await page.locator("#root>div>table>thead>tr>th:nth-child(1)>details>summary").click();
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

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

@@ -9,13 +9,11 @@ TaskList is a component that displays number of steps required to complete a pro
 
 ## How to use
 
-### Default
+<code src="@digigov/ui/content/TaskList/__stories__/Default.tsx" />
 
-<Story
-  packageName="@digigov/ui"
-  component="content/TaskList"
-  story="Default.tsx"
-/>
+## With dense style
+
+<code src="@digigov/ui/content/TaskList/__stories__/Dense.tsx" />
 
 ## API
 

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

@@ -11,13 +11,11 @@ User can better understand what has happened and also understand what the next s
 
 ## How to use
 
-### Default
+<code src="@digigov/ui/content/Timeline/__stories__/Default.tsx" />
 
-<Story
-  packageName="@digigov/ui"
-  component="content/Timeline"
-  story="Default.tsx"
-/>
+## With dense style
+
+<code src="@digigov/ui/content/Timeline/__stories__/Dense.tsx" />
 
 ## API
 

package/src/feedback/CopyToClipboard/__stories__/Default.tsx

@@ -11,7 +11,7 @@ export const Default = () => {
       message="Αντιγράφηκε στο πρόχειρο"
       id="copy-to-clipboard"
       onCopy={() => {
-        console.log('yess copied');
+        console.log('content copied!');
       }}
     >
       <Button color="secondary" aria-describedby="copy-to-clipboard">