@digigov/ui 2.0.0-555d1027 → 2.0.0-5701c39b

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/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>

package/src/content/Table/Table.stories.jsx

@@ -94,13 +94,22 @@ export const WithControls = {
                   data.content.map((item, index) => (
                     <TableRow
                       key={index}
-                      highlight={index === 1 && args.tableRowHighlight}
+                      highlight={index === 1 && args.tableRowHighlight === true}
                       color={index === 1 && args.tableRowColor}
                     >
                       <TableDataCell data-label={data.labels.name}>
                         {item.name}
                       </TableDataCell>
-                      <TableDataCell data-label={data.labels.role}>
+                      <TableDataCell
+                        data-label={data.labels.role}
+                        highlight={
+                          index === 2 && args.tableCellHighlight === 'warning'
+                            ? 'warning'
+                            : index === 2 && args.tableCellHighlight === 'error'
+                              ? 'error'
+                              : undefined
+                        }
+                      >
                         {item.role}
                       </TableDataCell>
                       <TableDataCell data-label={data.labels.email}>
@@ -130,6 +139,7 @@ export const WithControls = {
     dense: false,
     tableCaptionSize: 'md',
     tableRowHighlight: false,
+    tableCellHighlight: undefined,
     tableRowColor: 'primary',
     firstTableHeadCellWidth: '25%',
     tableHeadCellDataType: 'text',
@@ -175,6 +185,12 @@ export const WithControls = {
         type: 'boolean',
       },
     },
+    tableCellHighlight: {
+      control: {
+        type: 'select',
+      },
+      options: [undefined, 'warning', 'error'],
+    },
     tableRowColor: {
       control: {
         type: 'inline-radio',
@@ -213,6 +229,7 @@ export { WithLoader } from '@digigov/ui/content/Table/__stories__/WithLoader';
 export { DefinedWidth } from '@digigov/ui/content/Table/__stories__/DefinedWidth';
 export { Dense } from '@digigov/ui/content/Table/__stories__/Dense';
 export { RowColors } from '@digigov/ui/content/Table/__stories__/RowColors';
+export { UsingHighlights } from '@digigov/ui/content/Table/__stories__/UsingHighlights';
 export { MultipleProps } from '@digigov/ui/content/Table/__stories__/MultipleProps';
 export { WithSortFilters } from '@digigov/ui/content/Table/__stories__/WithSortFilters';
 export { WithFloatingScroll } from '@digigov/ui/content/Table/__stories__/WithFloatingScroll';

package/src/content/Table/__stories__/UsingHighlights.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+  TableContainer,
+  Table,
+  TableCaption,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableHeadCell,
+  TableDataCell,
+} from '@digigov/ui/content/Table';
+
+const data = {
+  title: 'Χρήστες',
+  labels: {
+    name: 'Ονοματεπώνυμο',
+    role: 'Ρόλος',
+    email: 'Email',
+  },
+  content: [
+    {
+      name: 'Μάριος Μενεξές',
+      role: 'Χειριστής',
+      email: 'marios@mail.com',
+    },
+    {
+      name: 'Καλλιόπη Παπαδοπούλου',
+      role: 'Χειριστής',
+      email: 'kalliopi@mail.com',
+    },
+    {
+      name: 'Μαρία Φλούπη',
+      role: 'Διαχειριστής',
+      email: 'maria@mail.com',
+    },
+  ],
+};
+
+export const UsingHighlights = (_: any) => {
+  return (
+    <TableContainer>
+      <Table stacked="sm">
+        {data && (
+          <>
+            <TableCaption>{data.title}</TableCaption>
+            <TableHead>
+              <TableRow>
+                {data.labels &&
+                  Object.keys(data.labels).map((key) => (
+                    <TableHeadCell key={key}>{data.labels[key]}</TableHeadCell>
+                  ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {data.content &&
+                data.content.map((item, index) => (
+                  <TableRow key={index}>
+                    <TableDataCell
+                      data-label={data.labels.name}
+                      highlight={index === 2 ? 'error' : undefined}
+                    >
+                      {item.name}
+                    </TableDataCell>
+                    <TableDataCell
+                      data-label={data.labels.role}
+                      highlight={index === 1 ? 'warning' : undefined}
+                    >
+                      {item.role}
+                    </TableDataCell>
+                    <TableDataCell data-label={data.labels.email}>
+                      {item.email}
+                    </TableDataCell>
+                  </TableRow>
+                ))}
+            </TableBody>
+          </>
+        )}
+      </Table>
+    </TableContainer>
+  );
+};
+export default UsingHighlights;

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

@@ -13,6 +13,7 @@ import { NumericDataType } from '@digigov/ui/content/Table/__stories__/NumericDa
 import { RowColors } from '@digigov/ui/content/Table/__stories__/RowColors';
 import { Stacked } from '@digigov/ui/content/Table/__stories__/Stacked';
 import { TableCaptions } from '@digigov/ui/content/Table/__stories__/TableCaptions';
+import { UsingHighlights } from '@digigov/ui/content/Table/__stories__/UsingHighlights';
 import { VerticalBorders } from '@digigov/ui/content/Table/__stories__/VerticalBorders';
 import { VerticalHeaders } from '@digigov/ui/content/Table/__stories__/VerticalHeaders';
 import { WithFloatingScroll } from '@digigov/ui/content/Table/__stories__/WithFloatingScroll';
@@ -62,6 +63,9 @@ test('renders the All Table variants', async ({ mount, page }) => {
     <TestVariant title="TableCaptions">
       <TableCaptions />
     </TestVariant>
+    <TestVariant title="UsingHighlights">
+      <UsingHighlights />
+    </TestVariant>
     <TestVariant title="VerticalBorders">
       <VerticalBorders />
     </TestVariant>

package/src/content/TaskList/doc.mdx

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

package/src/content/Timeline/doc.mdx

@@ -13,7 +13,7 @@ User can better understand what has happened and also understand what the next s
 
 <code src="@digigov/ui/content/Timeline/__stories__/Default.tsx" />
 
-## With dense style
+### With dense style
 
 <code src="@digigov/ui/content/Timeline/__stories__/Dense.tsx" />
 

package/src/feedback/CopyToClipboard/doc.mdx

@@ -21,4 +21,4 @@ title: CopyToClipboard
 
 See below for a complete reference to all of the props available to the components mentioned here.
 
-<ComponentProps componentName={['CopyToClipboardContainer']} />{' '}
+<ComponentProps componentName={['CopyToClipboardContainer']} />

package/src/feedback/ErrorSummary/doc.mdx

@@ -35,4 +35,4 @@ For questions that require a user to select one or more options from a list usin
 
 See below for a complete reference to all of the props  available to the components mentioned here.
 
-{/* <ComponentProps componentName={["ErrorSummary"]} />  */}
+<ComponentProps componentName={["ErrorSummary"]} />