npm - @digigov/ui - Versions diffs - 2.0.0-834daea4 → 2.0.0-87b6232d - Mend

@digigov/ui 2.0.0-834daea4 → 2.0.0-87b6232d

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1044) hide show

package/src/content/Accordion/index.tsx CHANGED Viewed

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 import Accordion from '@digigov/react-core/Accordion';
 export * from '@digigov/react-core/Accordion';

package/src/content/Accordion/interaction.test.tsx CHANGED Viewed

@@ -4,12 +4,16 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import { Default } from '@digigov/ui/content/Accordion/__stories__/Default';
 test('renders the Default Mouse navigation', async ({ mount, page }) => {
-  await mount(
-    <Default />
-  )
+  await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>div>details:nth-child(2)>summary").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>details:nth-child(2)>summary').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });

package/src/content/Blockquote/Blockquote.stories.js CHANGED Viewed

@@ -7,5 +7,25 @@ export default {
   component: Blockquote,
   displayName: 'Blockquote',
 };
+export const WithControls = {
+  args: {
+    children:
+      'Οι προσωπικές πληροφορίες που συμπληρώνετε στην αίτησή σας θα χρησιμοποιηθούν αποκλειστικά για την εξυπηρέτησή σας.',
+    dense: false,
+  },
+  argTypes: {
+    children: {
+      control: { type: 'text' },
+    },
+    dense: {
+      control: { type: 'boolean' },
+    },
+  },
+  parameters: {
+    controls: { exclude: ['ref'] },
+  },
+};
 export { Default } from '@digigov/ui/content/Blockquote/__stories__/Default';
 export { Dense } from '@digigov/ui/content/Blockquote/__stories__/Dense';

package/src/content/Blockquote/__snapshots__/index.spec.tsx.snap CHANGED Viewed

@@ -4,7 +4,7 @@ exports[`renders the Blockquote with sample data 1`] = `
 <body>
   <div>
     <blockquote
-      class=" ds-blockquote"
+      class="ds-blockquote"
     >
       this is some random data
     </blockquote>

package/src/content/Blockquote/index.test.tsx CHANGED Viewed

@@ -18,6 +18,10 @@ test('renders the All Blockquote 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/Card/Card.stories.jsx ADDED Viewed

@@ -0,0 +1,118 @@
+import React from 'react';
+import {
+  Card,
+  CardHeading,
+  CardContent,
+  CardAction,
+} from '@digigov/ui/content/Card';
+import { Button } from '@digigov/ui/form/Button';
+import { LinkBase } from '@digigov/ui/navigation/Link';
+export default {
+  title: 'Digigov UI/content/Card',
+  tags: ['Experimental'],
+  description:
+    'Cards can be used to divide and organise interface content for better understandability and readability',
+  link: 'https://guide.services.gov.gr/docs/components/card',
+  component: Card,
+  displayName: 'Card',
+};
+export const WithControls = {
+  render: (args) => {
+    return (
+      <Card
+        variant={args.variant}
+        borderColor={args.borderColor}
+        callToAction={args.callToAction}
+        dense={args.dense}
+        fullHeight={args.fullHeight}
+      >
+        <CardHeading>
+          {args.callToAction || args.action === 'title' ? (
+            <LinkBase href="#">{args.title} </LinkBase>
+          ) : (
+            args.title
+          )}
+        </CardHeading>
+        <CardContent>{args.content}</CardContent>
+        {args.action === 'button' && (
+          <CardAction>
+            <Button>Είσοδος</Button>
+          </CardAction>
+        )}
+        {args.action === 'link' && (
+          <CardAction>
+            <LinkBase href="#">Περισσότερα</LinkBase>
+          </CardAction>
+        )}
+      </Card>
+    );
+  },
+  args: {
+    title: 'Γεωργία και κτηνοτροφία',
+    content:
+      'Διαδικασίες, επιδοτήσεις και αποζημιώσεις για την γεωργική, κτηνοτροφική ή αλιευτική σας δραστηριότητα.',
+    action: 'button',
+    actionButtonText: 'Συνέχεια',
+    actionButtonLink: 'Συνέχεια',
+    variant: 'default',
+    borderColor: 'light',
+    callToAction: false,
+    dense: false,
+    fullHeight: false,
+  },
+  argTypes: {
+    title: {
+      control: { type: 'text' },
+    },
+    content: {
+      control: { type: 'text' },
+    },
+    action: {
+      options: ['button', 'link', 'title'],
+      control: { type: 'select' },
+    },
+    actionButtonText: {
+      control: { type: 'text' },
+      if: { arg: 'action', eq: 'button' },
+    },
+    actionButtonLink: {
+      control: { type: 'text' },
+      if: { arg: 'action', eq: 'link' },
+    },
+    variant: {
+      options: ['border', 'divider', 'border-top', 'default'],
+      control: { type: 'select' },
+    },
+    borderColor: {
+      options: ['light', 'dark'],
+      control: { type: 'inline-radio' },
+      if: { arg: 'variant', neq: 'default' },
+    },
+    callToAction: {
+      control: { type: 'boolean' },
+    },
+    dense: {
+      control: { type: 'boolean' },
+    },
+    fullHeight: {
+      control: { type: 'boolean' },
+    },
+  },
+  parameters: {
+    controls: { exclude: ['ref'] },
+  },
+};
+export { Default } from '@digigov/ui/content/Card/__stories__/Default';
+export { WithGrayBorder } from '@digigov/ui/content/Card/__stories__/WithGrayBorder';
+export { WithDarkBorder } from '@digigov/ui/content/Card/__stories__/WithDarkBorder';
+export { WithGrayTopBorder } from '@digigov/ui/content/Card/__stories__/WithGrayTopBorder';
+export { WithDarkTopBorder } from '@digigov/ui/content/Card/__stories__/WithDarkTopBorder';
+export { WithDivider } from '@digigov/ui/content/Card/__stories__/WithDivider';
+export { WithClickableContent } from '@digigov/ui/content/Card/__stories__/WithClickableContent';
+export { WithClickableLink } from '@digigov/ui/content/Card/__stories__/WithClickableLink';
+export { WithGroupButton } from '@digigov/ui/content/Card/__stories__/WithGroupButton';
+export { WithLink } from '@digigov/ui/content/Card/__stories__/WithLink';
+export { Dense } from '@digigov/ui/content/Card/__stories__/Dense';

package/src/content/Card/index.test.tsx CHANGED Viewed

@@ -54,6 +54,10 @@ test('renders the All Card 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/Card/interaction.test.tsx CHANGED Viewed

@@ -4,12 +4,16 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import { WithClickableContent } from '@digigov/ui/content/Card/__stories__/WithClickableContent';
 test('renders the WithClickableContent Click card', async ({ mount, page }) => {
-  await mount(
-    <WithClickableContent />
-  )
+  await mount(<WithClickableContent />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>div>div>div:nth-child(1)>a").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>div>div:nth-child(1)>a').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });

package/src/content/Chip/Chip.stories.js CHANGED Viewed

@@ -4,6 +4,28 @@ export default {
   component: Chip,
   displayName: 'Chip',
 };
+export const WithControls = {
+  args: {
+    children: 'Ετικέτα',
+    onClick: true,
+    onDelete: true,
+  },
+  argTypes: {
+    children: {
+      control: { type: 'text' },
+    },
+    onClick: {
+      control: { type: 'boolean' },
+    },
+    onDelete: {
+      control: { type: 'boolean' },
+    },
+  },
+  parameters: {
+    controls: { exclude: ['ref'] },
+  },
+};
 export { Default } from '@digigov/ui/content/Chip/__stories__/Default';
 export { ClickableChip } from '@digigov/ui/content/Chip/__stories__/ClickableChip';
 export { DeletableChip } from '@digigov/ui/content/Chip/__stories__/DeletableChip';

package/src/content/Chip/index.test.tsx CHANGED Viewed

@@ -30,6 +30,10 @@ test('renders the All Chip 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/Details/__snapshots__/index.spec.tsx.snap CHANGED Viewed

@@ -4,15 +4,15 @@ exports[`renders the closed Details component 1`] = `
 <body>
   <div>
     <details
-      class=" ds-details"
+      class="ds-details"
     >
       <summary
-        class=" ds-details__summary"
+        class="ds-details__summary"
       >
         Help with nationality
       </summary>
       <div
-        class=" ds-details__content"
+        class="ds-details__content"
       >
         We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
       </div>
@@ -25,16 +25,16 @@ exports[`renders the open Details component 1`] = `
 <body>
   <div>
     <details
-      class=" ds-details"
+      class="ds-details"
       open=""
     >
       <summary
-        class=" ds-details__summary"
+        class="ds-details__summary"
       >
         Help with nationality
       </summary>
       <div
-        class=" ds-details__content"
+        class="ds-details__content"
       >
         We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
       </div>

package/src/content/Details/index.test.tsx CHANGED Viewed

@@ -14,6 +14,10 @@ test('renders the All Details 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/Details/interaction.test.tsx CHANGED Viewed

@@ -4,12 +4,16 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import { Default } from '@digigov/ui/content/Details/__stories__/Default';
 test('renders the Default Open Details', async ({ mount, page }) => {
-  await mount(
-    <Default />
-  )
+  await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>details>summary").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>details>summary').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });

package/src/content/List/List.stories.jsx ADDED Viewed

@@ -0,0 +1,60 @@
+import React from 'react';
+import { List } from '@digigov/ui/content/List/List';
+import { ListItem } from '@digigov/ui/content/List/ListItem';
+export default {
+  title: 'Digigov UI/content/List',
+  description:
+    'Use lists to make blocks of text easier to read, and to break information into manageable chunks.',
+  link: 'https://guide.services.gov.gr/docs/styles/typography#lists',
+  component: List,
+  displayName: 'List',
+};
+export const WithControls = {
+  render: (args) => {
+    return (
+      <List listStyle={args.listStyle} dense={args.dense} layout={args.layout}>
+        {args.listItems.map((item, index) => (
+          <ListItem key={index}>{item}</ListItem>
+        ))}
+      </List>
+    );
+  },
+  args: {
+    listStyle: 'none',
+    layout: 'vertical',
+    dense: false,
+    listItems: [
+      'Αποτελέσματα διαγνωστικών εργαστηριακών εξετάσεων',
+      'Πτυχία τριτοβάθμιας εκπαίδευσης',
+      'Υπεύθυνη Δήλωση / Εξουσιοδότηση / Γνήσιο Υπογραφής',
+    ],
+  },
+  argTypes: {
+    listStyle: {
+      options: ['none', 'bullet', 'number'],
+      control: { type: 'select' },
+    },
+    layout: {
+      options: ['vertical', 'horizontal'],
+      control: { type: 'select' },
+    },
+    dense: {
+      control: { type: 'boolean' },
+    },
+    listItems: {
+      control: { type: 'object' },
+    },
+  },
+  parameters: {
+    controls: { exclude: ['ref'] },
+  },
+};
+export { Default } from '@digigov/ui/content/List/__stories__/Default';
+export { BulletList } from '@digigov/ui/content/List/__stories__/BulletList';
+export { NumberedList } from '@digigov/ui/content/List/__stories__/NumberedList';
+export { HorizontalList } from '@digigov/ui/content/List/__stories__/HorizontalList';
+export { WithExtraSpace } from '@digigov/ui/content/List/__stories__/WithExtraSpace';
+export { NestedBulletList } from '@digigov/ui/content/List/__stories__/NestedBulletList';

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

@@ -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/index.test.tsx CHANGED Viewed

@@ -34,6 +34,10 @@ test('renders the All List 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/Markdown/Markdown.stories.js CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -14,6 +14,10 @@ test('renders the All Markdown 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/Markdown/index.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -14,6 +14,10 @@ test('renders the All SafeHTML 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/SafeHTML/index.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/src/content/StepNav/auto.tsx CHANGED Viewed

@@ -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.test.tsx CHANGED Viewed

@@ -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/interaction.test.tsx CHANGED Viewed

@@ -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();
 });