@digigov/ui 2.0.0-a402a664 → 2.0.0-a594a958

package/src/content/Accordion/__stories__/SummaryColorSecondary.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+
+import {
+  Accordion,
+  AccordionSection,
+  AccordionSectionContent,
+  AccordionSectionSummary,
+  AccordionSectionSummaryHeading,
+} from '@digigov/ui/content/Accordion';
+
+import { List } from '@digigov/ui/content/List/List';
+import { ListItem } from '@digigov/ui/content/List/ListItem';
+import { Link } from '@digigov/ui/navigation/Link';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+
+export const SummaryColorSecondary = (_: any) => (
+  <Accordion summaryColor="secondary">
+    <AccordionSection open>
+      <AccordionSectionSummary>
+        <AccordionSectionSummaryHeading aria-controls="content1">
+          Διαφορές με το δημόσιο
+        </AccordionSectionSummaryHeading>
+      </AccordionSectionSummary>
+      <AccordionSectionContent id="content1">
+        <Paragraph>
+          Παρακάτω μπορείτε να δείτε την διαθέσιμη και ενεργή υπηρεσία που αφορά
+          το επιλεγμένο γεγονός ζωής.
+        </Paragraph>
+        <List>
+          <ListItem>
+            <Link>
+              Αίτηση εξώδικης αναγνώρισης απαιτήσεων / συμβιβαστικής επίλυσης
+              διαφορών με το Δημόσιο
+            </Link>
+          </ListItem>
+        </List>
+      </AccordionSectionContent>
+    </AccordionSection>
+    <AccordionSection>
+      <AccordionSectionSummary>
+        <AccordionSectionSummaryHeading aria-controls="content2">
+          Δικαστήρια
+        </AccordionSectionSummaryHeading>
+      </AccordionSectionSummary>
+      <AccordionSectionContent id="content2">
+        <Paragraph>
+          Στη λίστα παρακάτω μπορείτε να δείτε τις υπηρεσίες που αφορούν το
+          επιλεγμένο γεγονός ζωής, κατηγοριοποιημένες σε ομάδες υπηρεσιών.
+        </Paragraph>
+        <List>
+          <ListItem>
+            <Link>Ενιαίο πιστοποιητικό δικαστικής φερεγγυότητας</Link>
+          </ListItem>
+          <ListItem>
+            <Link>Ηλεκτρονικές δικαστικές αποφάσεις</Link>
+          </ListItem>
+          <ListItem>
+            <Link>Πιστοποιητικά δικαστηρίων</Link>
+          </ListItem>
+        </List>
+      </AccordionSectionContent>
+    </AccordionSection>
+    <AccordionSection>
+      <AccordionSectionSummary>
+        <AccordionSectionSummaryHeading aria-controls="content3">
+          Δικόγραφα
+        </AccordionSectionSummaryHeading>
+      </AccordionSectionSummary>
+      <AccordionSectionContent id="content3">
+        <Paragraph>
+          Στη λίστα παρακάτω μπορείτε να δείτε τις υπηρεσίες που αφορούν το
+          επιλεγμένο γεγονός ζωής.
+        </Paragraph>
+        <List>
+          <ListItem>
+            <Link>Αντίγραφο πρακτικών υπόθεσης</Link>
+          </ListItem>
+          <ListItem>
+            <Link>
+              Ηλεκτρονική κατάθεση δικογράφων (Πολιτικά / Ποινικά Δικαστήρια)
+            </Link>
+          </ListItem>
+        </List>
+      </AccordionSectionContent>
+    </AccordionSection>
+  </Accordion>
+);
+
+export default SummaryColorSecondary;

package/src/content/Accordion/__stories__/UsingArrowIcons.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+
+import {
+  Accordion,
+  AccordionSection,
+  AccordionSectionContent,
+  AccordionSectionSummary,
+  AccordionSectionSummaryHeading,
+} from '@digigov/ui/content/Accordion';
+
+import { List } from '@digigov/ui/content/List/List';
+import { ListItem } from '@digigov/ui/content/List/ListItem';
+import { Link } from '@digigov/ui/navigation/Link';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+
+export const UsingArrowIcons = (_: any) => (
+  <Accordion>
+    <AccordionSection open>
+      <AccordionSectionSummary>
+        <AccordionSectionSummaryHeading
+          aria-controls="content1"
+          variant="arrows"
+        >
+          Διαφορές με το δημόσιο
+        </AccordionSectionSummaryHeading>
+      </AccordionSectionSummary>
+      <AccordionSectionContent id="content1">
+        <Paragraph>
+          Παρακάτω μπορείτε να δείτε την διαθέσιμη και ενεργή υπηρεσία που αφορά
+          το επιλεγμένο γεγονός ζωής.
+        </Paragraph>
+        <List>
+          <ListItem>
+            <Link>
+              Αίτηση εξώδικης αναγνώρισης απαιτήσεων / συμβιβαστικής επίλυσης
+              διαφορών με το Δημόσιο
+            </Link>
+          </ListItem>
+        </List>
+      </AccordionSectionContent>
+    </AccordionSection>
+    <AccordionSection>
+      <AccordionSectionSummary>
+        <AccordionSectionSummaryHeading
+          aria-controls="content2"
+          variant="arrows"
+        >
+          Δικαστήρια
+        </AccordionSectionSummaryHeading>
+      </AccordionSectionSummary>
+      <AccordionSectionContent id="content2">
+        <Paragraph>
+          Στη λίστα παρακάτω μπορείτε να δείτε τις υπηρεσίες που αφορούν το
+          επιλεγμένο γεγονός ζωής, κατηγοριοποιημένες σε ομάδες υπηρεσιών.
+        </Paragraph>
+        <List>
+          <ListItem>
+            <Link>Ενιαίο πιστοποιητικό δικαστικής φερεγγυότητας</Link>
+          </ListItem>
+          <ListItem>
+            <Link>Ηλεκτρονικές δικαστικές αποφάσεις</Link>
+          </ListItem>
+          <ListItem>
+            <Link>Πιστοποιητικά δικαστηρίων</Link>
+          </ListItem>
+        </List>
+      </AccordionSectionContent>
+    </AccordionSection>
+    <AccordionSection>
+      <AccordionSectionSummary>
+        <AccordionSectionSummaryHeading
+          aria-controls="content3"
+          variant="arrows"
+        >
+          Δικόγραφα
+        </AccordionSectionSummaryHeading>
+      </AccordionSectionSummary>
+      <AccordionSectionContent id="content3">
+        <Paragraph>
+          Στη λίστα παρακάτω μπορείτε να δείτε τις υπηρεσίες που αφορούν το
+          επιλεγμένο γεγονός ζωής.
+        </Paragraph>
+        <List>
+          <ListItem>
+            <Link>Αντίγραφο πρακτικών υπόθεσης</Link>
+          </ListItem>
+          <ListItem>
+            <Link>
+              Ηλεκτρονική κατάθεση δικογράφων (Πολιτικά / Ποινικά Δικαστήρια)
+            </Link>
+          </ListItem>
+        </List>
+      </AccordionSectionContent>
+    </AccordionSection>
+  </Accordion>
+);
+
+export default UsingArrowIcons;

package/src/content/Accordion/__stories__/WithHints.tsx

@@ -90,30 +90,6 @@ export const WithHints = (_: any) => (
         </List>
       </AccordionSectionContent>
     </AccordionSection>
-    <AccordionSection>
-      <AccordionSectionSummary>
-        <AccordionSectionSummaryHeading aria-controls="content4">
-          Καταστήματα κράτησης
-        </AccordionSectionSummaryHeading>
-        <Hint>
-          Επανένταξη αποφυλακισμένων, πιστοποιητικά, επισκεπτήρια κ.ά.
-        </Hint>
-      </AccordionSectionSummary>
-      <AccordionSectionContent id="content4">
-        <Paragraph>
-          Στη λίστα παρακάτω μπορείτε να δείτε τις υπηρεσίες που αφορούν το
-          επιλεγμένο γεγονός ζωής.
-        </Paragraph>
-        <List>
-          <ListItem>
-            <Link>Βεβαίωση ηθικού / πειθαρχικού ελέγχου αποφυλακισμένων</Link>
-          </ListItem>
-          <ListItem>
-            <Link>Εκπαίδευση αποφυλακισμένων</Link>
-          </ListItem>
-        </List>
-      </AccordionSectionContent>
-    </AccordionSection>
   </Accordion>
 );
 

package/src/content/Accordion/__stories__/WithHook.tsx

@@ -109,30 +109,6 @@ export const WithHook = (_: any) => {
           </List>
         </AccordionSectionContent>
       </AccordionSection>
-      <AccordionSection {...section(3)}>
-        <AccordionSectionSummary>
-          <AccordionSectionSummaryHeading aria-controls="content4">
-            Καταστήματα κράτησης
-          </AccordionSectionSummaryHeading>
-          <Hint>
-            Επανένταξη αποφυλακισμένων, πιστοποιητικά, επισκεπτήρια κ.ά.
-          </Hint>
-        </AccordionSectionSummary>
-        <AccordionSectionContent id="content4">
-          <Paragraph>
-            Στη λίστα παρακάτω μπορείτε να δείτε τις υπηρεσίες που αφορούν το
-            επιλεγμένο γεγονός ζωής.
-          </Paragraph>
-          <List>
-            <ListItem>
-              <Link>Βεβαίωση ηθικού / πειθαρχικού ελέγχου αποφυλακισμένων</Link>
-            </ListItem>
-            <ListItem>
-              <Link>Εκπαίδευση αποφυλακισμένων</Link>
-            </ListItem>
-          </List>
-        </AccordionSectionContent>
-      </AccordionSection>
     </Accordion>
   );
 };

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/Accordion/index.test.tsx

@@ -3,6 +3,8 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Auto } from '@digigov/ui/content/Accordion/__stories__/Auto';
 import { Default } from '@digigov/ui/content/Accordion/__stories__/Default';
+import { SummaryColorSecondary } from '@digigov/ui/content/Accordion/__stories__/SummaryColorSecondary';
+import { UsingArrowIcons } from '@digigov/ui/content/Accordion/__stories__/UsingArrowIcons';
 import { WithHints } from '@digigov/ui/content/Accordion/__stories__/WithHints';
 import { WithHook } from '@digigov/ui/content/Accordion/__stories__/WithHook';
 
@@ -16,6 +18,12 @@ test('renders the All Accordion variants', async ({ mount, page }) => {
     <TestVariant title="Default">
       <Default />
     </TestVariant>
+    <TestVariant title="SummaryColorSecondary">
+      <SummaryColorSecondary />
+    </TestVariant>
+    <TestVariant title="UsingArrowIcons">
+      <UsingArrowIcons />
+    </TestVariant>
     <TestVariant title="WithHints">
       <WithHints />
     </TestVariant>

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/{Chip.stories.js → Chip.stories.jsx}

@@ -1,3 +1,4 @@
+import React from 'react';
 import Chip from '@digigov/ui/content/Chip';
 import doc from './doc.mdx?raw';
 export default {
@@ -9,6 +10,16 @@ export default {
 };
 
 export const WithControls = {
+  render: (args) => {
+    return (
+      <Chip
+        onClick={args.onClick ? () => console.log('clicked') : undefined}
+        onDelete={args.onDelete ? () => console.log('remove chip') : undefined}
+      >
+        {args.children}
+      </Chip>
+    );
+  },
   args: {
     children: 'Ετικέτα',
     onClick: true,
@@ -25,10 +36,8 @@ export const WithControls = {
       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/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/SafeHTML/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { type JSX, useMemo } from 'react';
 import DomPurify from 'dompurify';
 
 const defaultTags = [
@@ -33,8 +33,32 @@ if (typeof window !== 'undefined') {
         elementClassNameMapping[node.tagName.toLowerCase()]
       );
     }
-    // set all elements owning target to target=_blank
-    if ('target' in node) {
+    // Anchor tag check for external links
+    if (node.tagName.toLowerCase() === 'a' && node.hasAttribute('href')) {
+      const href = node.getAttribute('href');
+
+      if (href && href.startsWith('#')) {
+        return;
+      }
+
+      if (
+        href &&
+        (href.startsWith('http://') ||
+          href.startsWith('https://') ||
+          href.startsWith('//'))
+      ) {
+        const url = new URL(href, window.location.href);
+        const isInternal = url.origin === window.location.origin;
+
+        if (!isInternal) {
+          node.setAttribute('target', '_blank');
+          node.setAttribute('rel', 'noopener noreferrer');
+        }
+      }
+      // Relative paths are internal, do nothing
+    }
+    // For other elements with target attribute, set to _blank
+    else if (node.hasAttribute('target')) {
       node.setAttribute('target', '_blank');
       node.setAttribute('rel', 'noopener');
     }
@@ -50,8 +74,13 @@ export const getClosingTags = (htmlString) => {
   for (const tag of tags) {
     if (tag.startsWith('</') && tag.endsWith('>')) {
       const tagName = tag.replace('</', '<');
-      // @ts-ignore
-      const openingTag = stack.findLastIndex((element) => element === tagName);
+      let openingTag = -1;
+      for (let i = stack.length - 1; i >= 0; i--) {
+        if (stack[i] === tagName) {
+          openingTag = i;
+          break;
+        }
+      }
       if (openingTag !== -1) {
         stack.splice(openingTag, 1);
       }
@@ -65,7 +94,7 @@ export const getClosingTags = (htmlString) => {
 export interface SafeHTMLProps {
   content: string;
   tags?: string[];
-  Tag?: string;
+  Tag?: keyof JSX.IntrinsicElements;
   style?: React.CSSProperties;
 }
 
@@ -85,10 +114,9 @@ export const SafeHTML = ({
       ALLOWED_TAGS: tags,
       ADD_ATTR: ['target'],
     });
-  }, [content]);
+  }, [content, tags]);
   return (
     <Tag
-      // @ts-ignore
       dangerouslySetInnerHTML={{
         __html: parsedHTML,
       }}

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

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

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import {
+  SummaryList,
+  SummaryListItem,
+  SummaryListItemAction,
+  SummaryListItemKey,
+  SummaryListItemValue,
+} from '@digigov/ui/content/SummaryList';
+
+import { Link } from '@digigov/ui/navigation/Link';
+import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+
+export const WithError = (_: any) => (
+  <SummaryList error>
+    <SummaryListItem>
+      <SummaryListItemKey>Όνομα</SummaryListItemKey>
+      <SummaryListItemValue>Γιώργος Παπαδόπουλος</SummaryListItemValue>
+      <SummaryListItemAction>
+        <Link href="#">
+          Αλλαγή<VisuallyHidden>Διεύθυνσης</VisuallyHidden>
+        </Link>
+      </SummaryListItemAction>
+    </SummaryListItem>
+    <SummaryListItem>
+      <SummaryListItemKey error>Ημερομηνία Γέννησης</SummaryListItemKey>
+      <SummaryListItemValue>11 Μαϊου 1990</SummaryListItemValue>
+      <SummaryListItemAction>
+        <Link href="#">
+          Αλλαγή<VisuallyHidden>Διεύθυνσης</VisuallyHidden>
+        </Link>
+      </SummaryListItemAction>
+    </SummaryListItem>
+    <SummaryListItem>
+      <SummaryListItemKey>Τηλέφωνο επικοινωνίας</SummaryListItemKey>
+      <SummaryListItemValue error errorAssistiveText="το τηλέφωνο δεν βρέθηκε">
+        6941234567
+      </SummaryListItemValue>
+      <SummaryListItemAction>
+        <Link href="#">
+          Αλλαγή<VisuallyHidden>Διεύθυνσης</VisuallyHidden>
+        </Link>
+      </SummaryListItemAction>
+    </SummaryListItem>
+  </SummaryList>
+);
+
+export default WithError;

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

@@ -5,6 +5,7 @@ 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 { WithError } from '@digigov/ui/content/SummaryList/__stories__/WithError';
 import { WithKeyAndAction } from '@digigov/ui/content/SummaryList/__stories__/WithKeyAndAction';
 import { WithNoLastBorder } from '@digigov/ui/content/SummaryList/__stories__/WithNoLastBorder';
 import { WithoutActions } from '@digigov/ui/content/SummaryList/__stories__/WithoutActions';
@@ -26,6 +27,9 @@ test('renders the All SummaryList variants', async ({ mount, page }) => {
     <TestVariant title="WithActions">
       <WithActions />
     </TestVariant>
+    <TestVariant title="WithError">
+      <WithError />
+    </TestVariant>
     <TestVariant title="WithKeyAndAction">
       <WithKeyAndAction />
     </TestVariant>