npm - @digigov/ui - Versions diffs - 2.0.0-daaf7bdf → 2.0.0-eaf330f5 - Mend

@digigov/ui 2.0.0-daaf7bdf → 2.0.0-eaf330f5

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 (1290) hide show

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

@@ -0,0 +1,86 @@
+import React from 'react';
+import {
+  Accordion,
+  AccordionSection,
+  AccordionSectionContent,
+  AccordionSectionSummary,
+  AccordionSectionSummaryHeading,
+} from '@digigov/ui/content/Accordion';
+import { Hint } from '@digigov/ui/typography/Hint';
+export default {
+  title: 'Digigov UI/content/Accordion',
+  tags: ['Experimental'],
+  description:
+    'The accordion component lets users show and hide sections of related content on a page.',
+  link: 'https://guide.services.gov.gr/docs/components/accordion',
+  component: Accordion,
+  displayName: 'Accordion',
+};
+export const WithControls = {
+  render: (args) => {
+    return (
+      <Accordion
+        horizontalBorders={args.horizontalBorders}
+        summaryColor={args.summaryColor}
+        dense={args.dense}
+      >
+        <AccordionSection open>
+          <AccordionSectionSummary>
+            <AccordionSectionSummaryHeading aria-controls="content1">
+              {args.title}
+            </AccordionSectionSummaryHeading>
+            {args.hint > 0 && <Hint>{args.hintMessage}</Hint>}
+          </AccordionSectionSummary>
+          <AccordionSectionContent id="content1">
+            {args.content}
+          </AccordionSectionContent>
+        </AccordionSection>
+      </Accordion>
+    );
+  },
+  args: {
+    title: 'Διαφορές με το δημόσιο',
+    hint: true,
+    hintMessage:
+      'Δικαστικές και εξωδικαστικές διαφορές με το Δημόσιο, εκκαθάριση δικαστικών δαπανών κ.ά.',
+    content:
+      'Παρακάτω μπορείτε να δείτε την διαθέσιμη και ενεργή υπηρεσία που αφορά το επιλεγμένο γεγονός ζωής.',
+    horizontalBorders: 'top',
+    summaryColor: 'primary',
+    dense: false,
+  },
+  argTypes: {
+    title: {
+      control: { type: 'text' },
+    },
+    hint: {
+      control: { type: 'boolean' },
+    },
+    hintMessage: {
+      control: { type: 'text' },
+      if: { arg: 'hint', eq: true },
+    },
+    content: {
+      control: { type: 'text' },
+    },
+    horizontalBorders: {
+      options: ['none', 'top', 'bottom'],
+      control: { type: 'select' },
+    },
+    summaryColor: {
+      options: ['primary', 'secondary'],
+      control: { type: 'select' },
+    },
+    dense: {
+      control: { type: 'boolean' },
+    },
+  },
+};
+export { Default } from '@digigov/ui/content/Accordion/__stories__/Default';
+export { WithHints } from '@digigov/ui/content/Accordion/__stories__/WithHints';
+export { WithHook } from '@digigov/ui/content/Accordion/__stories__/WithHook';
+export { Auto } from '@digigov/ui/content/Accordion/__stories__/Auto';

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

@@ -1,157 +1,58 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the Accordion 1`] = `
-<ForwardRef(Accordion)>
-  <ForwardRef(Base)
-    as="div"
-    className="ds-accordion--border-top ds-accordion"
-  >
+<body>
+  <div>
     <div
-      className="ds-accordion--border-top ds-accordion"
+      class="ds-accordion ds-accordion--border-top"
     >
-      <withDeprecationComponent>
-        <ForwardRef(AccordionSection)>
-          <ForwardRef(Base)
-            as="details"
-            className="ds-accordion__section"
+      <details
+        class="ds-accordion__section"
+        open=""
+      >
+        <summary
+          aria-level="2"
+          class="ds-accordion__section-summary"
+          role="heading"
+        >
+          <h2
+            aria-controls="content1"
+            class="ds-accordion__section-heading"
+            role="button"
           >
-            <details
-              className="ds-accordion__section"
+            <span
+              class="ds-accordion__section-button"
             >
-              <withDeprecationComponent>
-                <Component>
-                  <ForwardRef(AccordionSectionSummary)>
-                    <ForwardRef(Base)
-                      aria-level={2}
-                      as="summary"
-                      className="ds-accordion__section-summary"
-                      role="heading"
-                    >
-                      <summary
-                        aria-level={2}
-                        className="ds-accordion__section-summary"
-                        role="heading"
-                      >
-                        <ForwardRef(AccordionSectionSummaryHeading)
-                          aria-expanded={false}
-                          onClick={[Function]}
-                        >
-                          <ForwardRef(Base)
-                            aria-expanded={false}
-                            as="h2"
-                            className="ds-accordion__section-heading"
-                            onClick={[Function]}
-                            role="button"
-                          >
-                            <h2
-                              aria-expanded={false}
-                              className="ds-accordion__section-heading"
-                              onClick={[Function]}
-                              role="button"
-                            >
-                              <span
-                                className="ds-accordion__section-button"
-                              >
-                                Βασικες Ρυθμισεις
-                              </span>
-                            </h2>
-                          </ForwardRef(Base)>
-                        </ForwardRef(AccordionSectionSummaryHeading)>
-                      </summary>
-                    </ForwardRef(Base)>
-                  </ForwardRef(AccordionSectionSummary)>
-                </Component>
-              </withDeprecationComponent>
-              <withDeprecationComponent>
-                <ForwardRef(AccordionSectionContent)>
-                  <ForwardRef(Base)
-                    as="div"
-                    className="ds-accordion__section-content"
-                  >
-                    <div
-                      className="ds-accordion__section-content"
-                    >
-                      Περιεχομενο Βασικων Ρυθμισεων
-                    </div>
-                  </ForwardRef(Base)>
-                </ForwardRef(AccordionSectionContent)>
-              </withDeprecationComponent>
-            </details>
-          </ForwardRef(Base)>
-        </ForwardRef(AccordionSection)>
-      </withDeprecationComponent>
-      <withDeprecationComponent>
-        <ForwardRef(AccordionSection)>
-          <ForwardRef(Base)
-            as="details"
-            className="ds-accordion__section"
+              Διαφορές με το δημόσιο
+            </span>
+          </h2>
+        </summary>
+        <div
+          class="ds-accordion__section-content"
+          id="content1"
+        >
+          <p
+            class="ds-body"
           >
-            <details
-              className="ds-accordion__section"
+            Παρακάτω μπορείτε να δείτε την διαθέσιμη και ενεργή υπηρεσία που αφορά το επιλεγμένο γεγονός ζωής.
+          </p>
+          <ol
+            class="ds-list"
+          >
+            <li
+              class="ds-list__item"
             >
-              <withDeprecationComponent>
-                <Component>
-                  <ForwardRef(AccordionSectionSummary)>
-                    <ForwardRef(Base)
-                      aria-level={2}
-                      as="summary"
-                      className="ds-accordion__section-summary"
-                      role="heading"
-                    >
-                      <summary
-                        aria-level={2}
-                        className="ds-accordion__section-summary"
-                        role="heading"
-                      >
-                        <ForwardRef(AccordionSectionSummaryHeading)
-                          aria-expanded={false}
-                          onClick={[Function]}
-                        >
-                          <ForwardRef(Base)
-                            aria-expanded={false}
-                            as="h2"
-                            className="ds-accordion__section-heading"
-                            onClick={[Function]}
-                            role="button"
-                          >
-                            <h2
-                              aria-expanded={false}
-                              className="ds-accordion__section-heading"
-                              onClick={[Function]}
-                              role="button"
-                            >
-                              <span
-                                className="ds-accordion__section-button"
-                              >
-                                Υπολοιπες Ρυθμισεις
-                              </span>
-                            </h2>
-                          </ForwardRef(Base)>
-                        </ForwardRef(AccordionSectionSummaryHeading)>
-                      </summary>
-                    </ForwardRef(Base)>
-                  </ForwardRef(AccordionSectionSummary)>
-                </Component>
-              </withDeprecationComponent>
-              <withDeprecationComponent>
-                <ForwardRef(AccordionSectionContent)>
-                  <ForwardRef(Base)
-                    as="div"
-                    className="ds-accordion__section-content"
-                  >
-                    <div
-                      className="ds-accordion__section-content"
-                    >
-                      Περιεχομενο Υπολοιπων Ρυθμισεων
-                    </div>
-                  </ForwardRef(Base)>
-                </ForwardRef(AccordionSectionContent)>
-              </withDeprecationComponent>
-            </details>
-          </ForwardRef(Base)>
-        </ForwardRef(AccordionSection)>
-      </withDeprecationComponent>
+              <a
+                class="ds-link"
+                href=""
+              >
+                Αίτηση εξώδικης αναγνώρισης απαιτήσεων / συμβιβαστικής επίλυσης διαφορών με το Δημόσιο
+              </a>
+            </li>
+          </ol>
+        </div>
+      </details>
     </div>
-  </ForwardRef(Base)>
-</ForwardRef(Accordion)>
+  </div>
+</body>
 `;

package/src/content/Accordion/__stories__/Auto.tsx CHANGED Viewed

@@ -6,7 +6,7 @@ import {
   AccordionSectionSummary,
   AccordionSectionSummaryHeading,
 } from '@digigov/ui/content/Accordion';
-import {
+import {
   AccordionAuto,
   AccordionSectionAuto,
   AccordionCloseAllButtonAuto,

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

@@ -8,10 +8,9 @@ import { Button, ButtonProps } from '@digigov/react-core/Button';
 import {
   AccordionItemId,
   useAccordion,
+  UseAccordionReturn,
 } from '@digigov/ui/content/Accordion/hooks';
-import { UseAccordionReturn } from '@digigov/ui/content/Accordion/hooks';
 export interface ButtonAccordionAutoProps extends ButtonProps {}
 export interface AccordionSectionAutoProps extends AccordionSectionProps {
   id: string;

package/src/content/Accordion/{index.mdx → doc.mdx} RENAMED Viewed

@@ -2,12 +2,9 @@
 id: accordion
 title: Accordion
 ---
 # Accordion
 This component is currently experimental because adding a summary line with more than a few short words will likely make the button text too long, particularly for users of screen readers.
 The accordion component lets users show and hide sections of related content on a page.
@@ -16,21 +13,13 @@ The accordion component lets users show and hide sections of related content on
 ### Default Accordion
-<Story
-  packageName="@digigov/ui"
-  component="content/Accordion"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/content/Accordion/__stories__/Default.tsx" />
 ### Accordion with Hints
 Accordions hide content, so the labels need to be clear. If necessary, you can add a summary line to help users understand what is in the section.
-<Story
-  packageName="@digigov/ui"
-  component="content/Accordion"
-  story="WithHints.tsx"
-/>
+<code src="@digigov/ui/content/Accordion/__stories__/WithHints.tsx" />
 ## Accessibility

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

@@ -26,6 +26,10 @@ test('renders the All Accordion 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/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

@@ -1,16 +1,13 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the Blockquote with sample data 1`] = `
-<ForwardRef(Blockquote)>
-  <ForwardRef(Base)
-    as="blockquote"
-    className="ds-blockquote"
-  >
+<body>
+  <div>
     <blockquote
-      className="ds-blockquote"
+      class="ds-blockquote"
     >
       this is some random data
     </blockquote>
-  </ForwardRef(Base)>
-</ForwardRef(Blockquote)>
+  </div>
+</body>
 `;

package/src/content/Blockquote/{index.mdx → doc.mdx} RENAMED Viewed

@@ -11,11 +11,11 @@ The Blockquote component lets users show and hide sections of related content on
 ## How to use
-<Story
-  packageName="@digigov/ui"
-  component="content/Blockquote"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/content/Blockquote/__stories__/Default.tsx" />
+### With dense style
+<code src="@digigov/ui/content/Blockquote/__stories__/Dense.tsx" />
 ## API

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

@@ -0,0 +1,71 @@
+---
+id: card
+title: Card
+---
+# Card
+Cards can be used to divide and organize interface content for better understandability and readability.
+When used correctly, Cards can help users to scan through vast amounts of information quicker.
+## How to use
+<code src="@digigov/ui/content/Card/__stories__/Default.tsx" />
+#### Card with gray border color
+<code src="@digigov/ui/content/Card/__stories__/WithGrayBorder.tsx" />
+#### Card with dark border color
+<code src="@digigov/ui/content/Card/__stories__/WithDarkBorder.tsx" />
+### Card with top border
+You can set the color of the Card's top border. You can choose between dark and grey color respectively. By default the top border color is grey.
+<code src="@digigov/ui/content/Card/__stories__/WithDarkBorder.tsx" />
+#### Card with grey top border
+<code src="@digigov/ui/content/Card/__stories__/WithGrayTopBorder.tsx" />
+#### Card with dark top border
+<code src="@digigov/ui/content/Card/__stories__/WithDarkTopBorder.tsx" />
+### Card with divider
+<code src="@digigov/ui/content/Card/__stories__/WithDivider.tsx" />
+### Card with actions
+<code src="@digigov/ui/content/Card/__stories__/WithGroupButton.tsx" />
+#### Card with title link
+Cards can be used without an action button, but with a clickable title.
+<code src="@digigov/ui/content/Card/__stories__/WithLink.tsx" />
+#### Card with clickable content
+You can expand the clickable area of the link to fill Card's content.
+<code src="@digigov/ui/content/Card/__stories__/WithClickableContent.tsx" />
+#### Card with button or link
+Cards also provides styles for actionable elements such as Buttons or Links.
+<code src="@digigov/ui/content/Card/__stories__/WithClickableLink.tsx" />
+#### Card with a group of actions
+<code src="@digigov/ui/content/Card/__stories__/WithGroupButton.tsx" />
+## API
+See below for a complete reference to all of the props  available to the components mentioned here.
+<ComponentProps componentName={["Card", "CardHeading", "CardContent", "CardAction"]} />

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