@digigov/ui 2.0.0-a402a664 → 2.0.0-aa380ec7

package/src/app/Loader/doc.mdx

@@ -0,0 +1,39 @@
+---
+id: loader
+title: Loader
+---
+
+# Loader
+
+Loading spinner is used for notifying users that their action is being processed or data retrieved from server.
+
+## How to use
+
+
+<code src="@digigov/ui/app/Loader/__stories__/Default.tsx" />
+
+
+### Secondary color
+
+<code src="@digigov/ui/app/Loader/__stories__/Secondary.tsx" />
+
+
+### Different sizes
+
+<code src="@digigov/ui/app/Loader/__stories__/Sizes.tsx" />
+
+### Full page loader
+
+<code src="@digigov/ui/app/Loader/__stories__/FullPageLoader.tsx" />
+
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={[
+  "CircularProgress",
+  "Loader",
+]} 
+/> 
+

package/src/app/Loader/index.native.tsx

@@ -1,9 +1,9 @@
 import React, { useRef, useEffect } from 'react';
 import { Animated, Easing } from 'react-native';
 import Svg, { Circle } from 'react-native-svg';
-import { CircularProgressProps } from '@digigov/react-core/CircularProgress';
+import { CircularProgressBaseProps } from '@digigov/react-core/CircularProgressBase';
 
-export const CircularProgress: React.FC<CircularProgressProps> = ({
+export const CircularProgress: React.FC<CircularProgressBaseProps> = ({
   size = 'md',
   color = 'primary',
 }) => {

package/src/app/Loader/index.test.tsx

@@ -1,19 +1,31 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
 import TestVariant from '@digigov/ui/utils/TestVariant'
+import { AccessibilityLoader } from '@digigov/ui/app/Loader/__stories__/AccessibilityLoader';
 import { Default } from '@digigov/ui/app/Loader/__stories__/Default';
 import { FullPageLoader } from '@digigov/ui/app/Loader/__stories__/FullPageLoader';
+import { Secondary } from '@digigov/ui/app/Loader/__stories__/Secondary';
+import { Sizes } from '@digigov/ui/app/Loader/__stories__/Sizes';
 
 test('renders the All Loader variants', async ({ mount, page }) => {
   await mount(
     
   <div>
+    <TestVariant title="AccessibilityLoader">
+      <AccessibilityLoader />
+    </TestVariant>
     <TestVariant title="Default">
       <Default />
     </TestVariant>
     <TestVariant title="FullPageLoader">
       <FullPageLoader />
     </TestVariant>
+    <TestVariant title="Secondary">
+      <Secondary />
+    </TestVariant>
+    <TestVariant title="Sizes">
+      <Sizes />
+    </TestVariant>
   </div>
   )
   await page.evaluate(() => document.fonts.ready);

package/src/app/Loader/index.web.tsx

@@ -1 +1,39 @@
-export * from '@digigov/react-core/CircularProgress';
+import React from 'react';
+export * from '@digigov/react-core/CircularProgressBase';
+import CircularProgressBase, {
+  CircularProgressBaseProps,
+} from '@digigov/react-core/CircularProgressBase';
+import { useNotificationArea } from '@digigov/ui/app/hooks/useNotificationArea';
+
+export interface CircularProgressProps extends CircularProgressBaseProps {
+  /**
+   * loadingText prop is optional
+   * Text for screen readers when loading starts
+   * @default "Γίνεται φόρτωση..."
+   */
+  loadingText?: string;
+  /**
+   * loadingFinishedText prop is optional
+   * Text for screen readers when loading finishes
+   * @default "Η φόρτωση ολοκληρώθηκε."
+   */
+  loadingFinishedText?: string;
+}
+
+export const CircularProgress = React.forwardRef<
+  SVGElement,
+  CircularProgressProps
+>(function CircularProgress(
+  {
+    loadingText = 'Γίνεται φόρτωση...',
+    loadingFinishedText = 'Η φόρτωση ολοκληρώθηκε.',
+    ...props
+  },
+  ref
+) {
+  useNotificationArea(loadingText, loadingFinishedText);
+
+  return <CircularProgressBase ref={ref} {...props} />;
+});
+
+export default CircularProgress;

package/src/app/Masthead/Masthead.stories.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import doc from './doc.mdx?raw';
+
+import { Masthead, MastheadBody } from '@digigov/ui/app/Masthead';
+import { CallToAction } from '@digigov/ui/form/Button/CallToAction';
+import { Container } from '@digigov/ui/layouts/Basic/Container';
+import { Main } from '@digigov/ui/layouts/Basic/Main';
+import { Heading } from '@digigov/ui/typography/Heading';
+import { Hint } from '@digigov/ui/typography/Hint';
+
+export default {
+  title: 'Digigov UI/app/Masthead',
+  description:
+    'You can use the masthead at the top of the first page of a GOV.GR service, not at internal pages.',
+  link: 'https://guide.services.gov.gr/docs/components/masthead',
+  defaultWidth: 'lg',
+  component: Masthead,
+  tags: ['autodocs'],
+  markdown: doc,
+  displayName: 'Masthead',
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <Masthead color={args.color}>
+        <Container>
+          <Main as="div">
+            <Heading>Σχεδιάστε την υπηρεσία σας, με το στυλ του GOV.GR</Heading>
+            <MastheadBody>
+              Χρησιμοποιείστε αυτόν τον οδηγό ώστε να φτιάξετε μια υπηρεσία
+              συνεπή στα πρότυπα του GOV.GR. Αποκτήστε γνώση από την έρευνα και
+              την εμπειρία άλλων ομάδων και αποφύγετε την επανάληψη εργασιών που
+              έχουν ήδη γίνει.
+            </MastheadBody>
+            {args.showHint && <Hint>Τελευταία ενημέρωση: 08/12/2021</Hint>}
+            <CallToAction href="#">Ξεκινήστε εδώ</CallToAction>
+          </Main>
+        </Container>
+      </Masthead>
+    );
+  },
+  args: {
+    color: 'primary',
+    showHint: false,
+  },
+  argTypes: {
+    color: {
+      control: {
+        type: 'inline-radio',
+      },
+      options: ['primary', 'secondary'],
+    },
+    showHint: {
+      control: 'boolean',
+    },
+  },
+  parameters: {
+    controls: { exclude: ['ref'] },
+  },
+};
+
+export { Default } from '@digigov/ui/app/Masthead/__stories__/Default';
+export { Secondary } from '@digigov/ui/app/Masthead/__stories__/Secondary';
+export { WithLogo } from '@digigov/ui/app/Masthead/__stories__/WithLogo';
+export { WithElements } from '@digigov/ui/app/Masthead/__stories__/WithElements';

package/src/app/Masthead/doc.mdx

@@ -11,15 +11,15 @@ The Masthead component is a set of features or layout that marks the page and de
 
 <code src="@digigov/ui/app/Masthead/__stories__/Default.tsx" />
 
-## With secondary color
+### With secondary color
 
 <code src="@digigov/ui/app/Masthead/__stories__/Secondary.tsx" />
 
-## With logo
+### With logo
 
 <code src="@digigov/ui/app/Masthead/__stories__/WithLogo.tsx" />
 
-## With elements
+### With elements
 
 <code src="@digigov/ui/app/Masthead/__stories__/WithElements.tsx" />
 

package/src/app/Modal/Modal.stories.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import doc from './doc.mdx?raw';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+import {
+  Modal,
+  ModalHeading,
+  ModalContent,
+  ModalAction,
+} from '@digigov/ui/app/Modal';
+import Button from '@digigov/ui/form/Button';
+
+export default {
+  title: 'Digigov UI/app/Modal',
+  description:
+    'Use the modal component with caution when you need to provide critical information or ask for a decision.',
+  link: 'https://guide.services.gov.gr/docs/patterns/admin-pages/components/modal',
+  component: Modal,
+  tags: ['autodocs'],
+  markdown: doc,
+  displayName: 'Modal',
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <Modal
+        open={true}
+        aria-labelledby="modal-label"
+        dense={args.dense}
+        gaps={args.gaps}
+      >
+        <ModalHeading id="modal-label">Διαγραφή τηλεφώνου</ModalHeading>
+        <ModalContent>
+          <Paragraph mb={args.gaps ? 0 : 4}>
+            Είστε σίγουροι ότι θέλετε να διαγράψετε τον αριθμό τηλεφώνου; Αυτή η
+            ενέργεια είναι οριστική.
+          </Paragraph>
+        </ModalContent>
+        <ModalAction>
+          <Button>Διαγραφή</Button>
+          <Button variant="link">Ακύρωση</Button>
+        </ModalAction>
+      </Modal>
+    );
+  },
+  args: {
+    dense: false,
+    gaps: true,
+  },
+  argsTypes: {
+    dense: {
+      control: 'boolean',
+    },
+    gaps: {
+      control: 'boolean',
+    },
+  },
+};
+export { Default } from '@digigov/ui/app/Modal/__stories__/Default';
+export { AlertDialog } from '@digigov/ui/app/Modal/__stories__/AlertDialog';
+export { Dense } from '@digigov/ui/app/Modal/__stories__/Dense';
+export { WithHooks } from '@digigov/ui/app/Modal/__stories__/WithHooks';
+export { Auto } from '@digigov/ui/app/Modal/__stories__/Auto';
+export { WithoutModalGaps } from '@digigov/ui/app/Modal/__stories__/WithoutModalGaps';

package/src/app/Modal/__stories__/AlertDialog.tsx

@@ -13,7 +13,7 @@ import { Paragraph } from '@digigov/ui/typography/Paragraph';
 export const AlertDialog = (_: any) => {
   const [open, setOpen] = useState(false);
   return (
-    <div>
+    <div style={{ minHeight: '300px' }}>
       <Button
         color="warning"
         onClick={() => {

package/src/app/Modal/__stories__/Auto.tsx

@@ -13,7 +13,7 @@ import { LabelContainer } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 export const Auto = (_: any) => {
   return (
-    <div>
+    <div style={{ minHeight: '300px' }}>
       <ModalProvider>
         <ModalButtonAuto open modal="modal-1">
           Προσθήκη τηλεφώνου

package/src/app/Modal/__stories__/Default.tsx

@@ -15,7 +15,7 @@ import { TextInput } from '@digigov/ui/form/TextInput';
 export const Default = (_: any) => {
   const [open, setOpen] = useState(false);
   return (
-    <div>
+    <div style={{ minHeight: '300px' }}>
       <Button
         onClick={() => {
           setOpen(!open);

package/src/app/Modal/__stories__/Dense.tsx

@@ -15,7 +15,7 @@ import { TextInput } from '@digigov/ui/form/TextInput';
 export const Dense = (_: any) => {
   const [open, setOpen] = useState(false);
   return (
-    <div>
+    <div style={{ minHeight: '300px' }}>
       <Button
         onClick={() => {
           setOpen(!open);

package/src/app/Modal/__stories__/WithHooks.tsx

@@ -14,7 +14,7 @@ import { TextInput } from '@digigov/ui/form/TextInput';
 export const WithHooks = (_: any) => {
   const { registerModal, registerAction } = useModal();
   return (
-    <div>
+    <div style={{ minHeight: '300px' }}>
       <Button {...registerAction('modal-1', 'open')}>Προσθήκη τηλεφώνου</Button>
       <Modal
         {...registerModal('modal-1', {

package/src/app/Modal/__stories__/WithoutModalGaps.tsx

@@ -15,7 +15,7 @@ import { TextInput } from '@digigov/ui/form/TextInput';
 export const WithoutModalGaps = (_: any) => {
   const [open, setOpen] = useState(false);
   return (
-    <div>
+    <div style={{ minHeight: '300px' }}>
       <Button
         onClick={() => {
           setOpen(!open);

package/src/app/hooks/useNotificationArea.tsx

@@ -0,0 +1,105 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+// Unique ID for the aria-live notification area element.
+const notificationAreaId = 'loader-notification-area';
+// Custom attribute to track active spinners
+const activeSpinnersAttr = 'data-active-spinners';
+
+// Generates a random unique ID for each spinner instance.
+function generateUniqueId() {
+  return `spinner-${Math.random().toString(36).substring(2, 9)}`;
+}
+
+// Finds or creates the notification area element in the DOM.
+const getOrCreateNotificationArea = (): HTMLElement => {
+  let element = document.getElementById(notificationAreaId);
+
+  // Create and append it to the DOM.
+  if (!element) {
+    element = document.createElement('div');
+    element.id = notificationAreaId;
+    element.setAttribute('role', 'status');
+    element.setAttribute('aria-live', 'polite');
+    element.className = 'ds-visually-hidden';
+    document.body.appendChild(element);
+  }
+
+  return element;
+};
+
+export const useNotificationArea = (
+  loadingText = 'Γίνεται φόρτωση...',
+  finishedText = 'Η φόρτωση ολοκληρώθηκε.'
+) => {
+  // Unique ID for this spinner.
+  const spinnerId = useRef(generateUniqueId());
+  // Reference to the notification area DOM element.
+  const notificationRef = useRef<HTMLElement | null>(null);
+
+  // Returns an array of active spinner IDs.
+  const getActiveIds = useCallback(() => {
+    const current = notificationRef.current;
+    const value = current?.getAttribute(activeSpinnersAttr) || '';
+    return value.split(',').filter(Boolean);
+  }, [notificationRef]);
+
+  // Adds this spinner's ID to the active list.
+  const setActiveSpinnerId = useCallback(() => {
+    const current = notificationRef.current;
+    if (current) {
+      const ids = new Set(getActiveIds());
+      ids.add(spinnerId.current);
+      current.setAttribute(activeSpinnersAttr, Array.from(ids).join(','));
+    }
+  }, [notificationRef, getActiveIds, spinnerId]);
+
+  // Removes this spinner's ID from the active list.
+  const unsetActiveSpinnerId = useCallback(() => {
+    const current = notificationRef.current;
+    if (current) {
+      const ids = getActiveIds().filter((id) => id !== spinnerId.current);
+      current.setAttribute(activeSpinnersAttr, ids.join(','));
+    }
+  }, [notificationRef, getActiveIds, spinnerId]);
+
+  // Updates the text content of the aria-live region.
+  const setTextContent = (text: string) => {
+    if (notificationRef.current) {
+      notificationRef.current.textContent = text;
+    }
+  };
+
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+
+    // Set up notification area and mark this spinner as active.
+    notificationRef.current = getOrCreateNotificationArea();
+    setActiveSpinnerId();
+    setTextContent(loadingText);
+
+    // Cleanup when component unmounts.
+    return () => {
+      unsetActiveSpinnerId();
+
+      // If no active spinners remain, announce "finished" and clear the text.
+      if (getActiveIds().length === 0) {
+        setTextContent(finishedText);
+
+        // Give screen readers a chance to announce "finished" before clearing.
+        setTimeout(() => {
+          const el = notificationRef.current;
+          if (el && getActiveIds().length === 0) {
+            el.removeAttribute(activeSpinnersAttr);
+            el.textContent = '';
+          }
+        }, 1000);
+      }
+    };
+  }, [
+    loadingText,
+    finishedText,
+    setActiveSpinnerId,
+    unsetActiveSpinnerId,
+    getActiveIds,
+  ]);
+};

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

@@ -31,7 +31,10 @@ export const WithControls = {
       >
         <AccordionSection open>
           <AccordionSectionSummary>
-            <AccordionSectionSummaryHeading aria-controls="content1">
+            <AccordionSectionSummaryHeading
+              aria-controls="content1"
+              variant={args.variant}
+            >
               {args.title}
             </AccordionSectionSummaryHeading>
             {args.hint > 0 && <Hint>{args.hintMessage}</Hint>}
@@ -45,6 +48,7 @@ export const WithControls = {
   },
   args: {
     title: 'Διαφορές με το δημόσιο',
+    variant: 'default',
     hint: true,
     hintMessage:
       'Δικαστικές και εξωδικαστικές διαφορές με το Δημόσιο, εκκαθάριση δικαστικών δαπανών κ.ά.',
@@ -58,6 +62,10 @@ export const WithControls = {
     title: {
       control: { type: 'text' },
     },
+    variant: {
+      options: ['default', 'arrows'],
+      control: { type: 'select' },
+    },
     hint: {
       control: { type: 'boolean' },
     },

package/src/content/Accordion/doc.mdx

@@ -11,11 +11,10 @@ The accordion component lets users show and hide sections of related content on
 
 ## How to use
 
-### Default Accordion
 
 <code src="@digigov/ui/content/Accordion/__stories__/Default.tsx" />
 
-### Accordion with Hints
+### 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.
 

package/src/content/Card/doc.mdx

@@ -12,55 +12,55 @@ When used correctly, Cards can help users to scan through vast amounts of inform
 
 <code src="@digigov/ui/content/Card/__stories__/Default.tsx" />
 
-#### Card with gray border color
+### With gray border color
 
 <code src="@digigov/ui/content/Card/__stories__/WithGrayBorder.tsx" />
 
-#### Card with dark border color
+### With dark border color
 
 <code src="@digigov/ui/content/Card/__stories__/WithDarkBorder.tsx" />
 
-### Card with top border
+### 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
+### With grey top border
 
 <code src="@digigov/ui/content/Card/__stories__/WithGrayTopBorder.tsx" />
 
-#### Card with dark top border
+### With dark top border
 
 <code src="@digigov/ui/content/Card/__stories__/WithDarkTopBorder.tsx" />
 
-### Card with divider
+### With divider
 
 <code src="@digigov/ui/content/Card/__stories__/WithDivider.tsx" />
 
-### Card with actions
+### With actions
 
 <code src="@digigov/ui/content/Card/__stories__/WithGroupButton.tsx" />
 
-#### Card with title link
+### 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
+### 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
+### 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
+### With a group of actions
 
 <code src="@digigov/ui/content/Card/__stories__/WithGroupButton.tsx" />
 

package/src/content/Chip/doc.mdx

@@ -11,19 +11,19 @@ The Chip component can be used to represent small blocks of information.
 
 <code src="@digigov/ui/content/Chip/__stories__/Default.tsx" />
 
-### ClickableChip
+### Clickable Chip
 
 <code src="@digigov/ui/content/Chip/__stories__/ClickableChip.tsx" />
 
-### ClickableDeletableChip
+### Clickable and Deletable
 
 <code src="@digigov/ui/content/Chip/__stories__/ClickableDeletableChip.tsx" />
 
-### DeletableChip
+### Deletable Chip
 
 <code src="@digigov/ui/content/Chip/__stories__/DeletableChip.tsx" />
 
-### GroupOfChips
+### Group of Chips
 
 <code src="@digigov/ui/content/Chip/__stories__/GroupOfChips.tsx" />
 

package/src/content/List/doc.mdx

@@ -9,15 +9,15 @@ title: List
 
 <code src="@digigov/ui/content/List/__stories__/Default.tsx" />
 
-### List with bullets
+### With bullets
 
 <code src="@digigov/ui/content/List/__stories__/BulletList.tsx" />
 
-### List with numbers
+### With numbers
 
 <code src="@digigov/ui/content/List/__stories__/NumberedList.tsx" />
 
-### List with extra space
+### With extra space
 
 <code src="@digigov/ui/content/List/__stories__/WithExtraSpace.tsx" />
 

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

@@ -10,12 +10,13 @@ export default {
 import { SummaryListExample } from '@digigov/ui/content/SummaryList/__stories__/SummaryListExample';
 import doc from './doc.mdx?raw';
 
-export const Default = {
+export const WithControls = {
   args: {
     sm: 5,
     md: 4,
     lg: 3,
     border: true,
+    error: false,
     noLastBorder: false,
     itemBorder: true,
     showKey: true,
@@ -23,3 +24,8 @@ export const Default = {
     showActions: true,
   },
 };
+
+export { Default } from '@digigov/ui/content/SummaryList/__stories__/Default';
+export { WithActions } from '@digigov/ui/content/SummaryList/__stories__/WithActions';
+export { WithoutBorders } from '@digigov/ui/content/SummaryList/__stories__/WithoutBorders';
+export { WithError } from '@digigov/ui/content/SummaryList/__stories__/WithError';

package/src/content/SummaryList/__stories__/SummaryListExample.tsx

@@ -34,6 +34,7 @@ export const SummaryListExample = ({
   md,
   lg,
   border = true,
+  error = false,
   noLastBorder = false,
   itemBorder = true,
   showKey = true,
@@ -44,18 +45,24 @@ export const SummaryListExample = ({
   md?: WidthValues;
   lg?: WidthValues;
   border?: boolean;
+  error?: boolean;
   noLastBorder?: boolean;
   itemBorder?: boolean;
   showKey?: boolean;
   showValue?: boolean;
   showActions?: boolean;
 }) => (
-  <SummaryList border={border} noLastBorder={noLastBorder}>
+  <SummaryList border={border} noLastBorder={noLastBorder} error={error}>
     {data &&
       data.map((item, index) => (
         <SummaryListItem key={index} border={itemBorder}>
           {showKey && (
-            <SummaryListItemKey sm={sm} md={md} lg={lg}>
+            <SummaryListItemKey
+              sm={sm}
+              md={md}
+              lg={lg}
+              error={error && index === 1}
+            >
               {item.key}
             </SummaryListItemKey>
           )}