npm - @digigov/react-core - Versions diffs - 2.0.0-a402a664 → 2.0.0-a594a958 - Mend

@digigov/react-core 2.0.0-a402a664 → 2.0.0-a594a958

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

package/AccordionSection/index.web.d.ts +0 -1
package/AccordionSection/index.web.js.map +2 -2
package/AccordionSectionSummaryHeading/index.d.ts +1 -0
package/AccordionSectionSummaryHeading/index.js +3 -2
package/AccordionSectionSummaryHeading/index.js.map +2 -2
package/BannerContainer/index.js +1 -1
package/BannerContainer/index.js.map +2 -2
package/{CircularProgress → CircularProgressBase}/index.d.ts +5 -5
package/{CircularProgress → CircularProgressBase}/index.js +4 -4
package/CircularProgressBase/index.js.map +7 -0
package/{CircularProgress → CircularProgressBase}/package.json +1 -1
package/DetailsContent/index.d.ts +1 -0
package/DetailsContent/index.js +3 -2
package/DetailsContent/index.js.map +2 -2
package/Grid/index.d.ts +1 -7
package/Grid/index.js.map +2 -2
package/NavListItemActionBase/index.js +2 -2
package/NavListItemActionBase/index.js.map +2 -2
package/SummaryList/index.d.ts +10 -2
package/SummaryList/index.js +10 -2
package/SummaryList/index.js.map +2 -2
package/SummaryListItem/index.js +1 -1
package/SummaryListItem/index.js.map +2 -2
package/SummaryListItemKey/index.d.ts +14 -0
package/SummaryListItemKey/index.js +14 -2
package/SummaryListItemKey/index.js.map +2 -2
package/SummaryListItemValue/index.d.ts +14 -0
package/SummaryListItemValue/index.js +11 -2
package/SummaryListItemValue/index.js.map +2 -2
package/TableDataCell/index.d.ts +9 -0
package/TableDataCell/index.js +8 -1
package/TableDataCell/index.js.map +2 -2
package/cjs/AccordionSection/index.web.js.map +2 -2
package/cjs/AccordionSectionSummaryHeading/index.js +3 -2
package/cjs/AccordionSectionSummaryHeading/index.js.map +2 -2
package/cjs/BannerContainer/index.js +1 -1
package/cjs/BannerContainer/index.js.map +2 -2
package/cjs/{CircularProgress → CircularProgressBase}/index.js +8 -8
package/cjs/CircularProgressBase/index.js.map +7 -0
package/cjs/DetailsContent/index.js +3 -2
package/cjs/DetailsContent/index.js.map +2 -2
package/cjs/Grid/index.js.map +2 -2
package/cjs/NavListItemActionBase/index.js +2 -2
package/cjs/NavListItemActionBase/index.js.map +2 -2
package/cjs/SummaryList/index.js +10 -2
package/cjs/SummaryList/index.js.map +2 -2
package/cjs/SummaryListItem/index.js +1 -1
package/cjs/SummaryListItem/index.js.map +2 -2
package/cjs/SummaryListItemKey/index.js +14 -2
package/cjs/SummaryListItemKey/index.js.map +3 -3
package/cjs/SummaryListItemValue/index.js +11 -2
package/cjs/SummaryListItemValue/index.js.map +3 -3
package/cjs/TableDataCell/index.js +8 -1
package/cjs/TableDataCell/index.js.map +3 -3
package/cjs/index.js +2 -2
package/cjs/index.js.map +2 -2
package/cjs/lazy/index.js +1 -1
package/cjs/lazy.js.map +2 -2
package/cjs/registry/index.js +4 -4
package/cjs/registry.js.map +2 -2
package/index.d.ts +1 -1
package/index.js +2 -2
package/index.js.map +1 -1
package/lazy/index.js +1 -1
package/package.json +3 -3
package/registry/index.js +4 -4
package/src/Accordion/__snapshots__/index.test.tsx.snap +48 -0
package/src/Accordion/index.test.tsx +24 -0
package/src/AccordionSection/index.web.tsx +0 -1
package/src/AccordionSectionSummaryHeading/__snapshots__/index.test.tsx.snap +17 -0
package/src/AccordionSectionSummaryHeading/index.test.tsx +9 -0
package/src/AccordionSectionSummaryHeading/index.tsx +9 -2
package/src/BannerContainer/__snapshots__/index.test.tsx.snap +1 -1
package/src/BannerContainer/index.tsx +1 -1
package/src/{CircularProgress → CircularProgressBase}/__snapshots__/index.test.tsx.snap +6 -6
package/src/CircularProgressBase/index.test.tsx +38 -0
package/src/{CircularProgress → CircularProgressBase}/index.tsx +7 -7
package/src/DetailsContent/index.tsx +11 -2
package/src/Grid/index.tsx +1 -7
package/src/NavListItemActionBase/__snapshots__/index.test.tsx.snap +0 -1
package/src/NavListItemActionBase/index.tsx +2 -2
package/src/SummaryList/__snapshots__/index.test.tsx.snap +36 -0
package/src/SummaryList/index.test.tsx +15 -0
package/src/SummaryList/index.tsx +20 -3
package/src/SummaryListItem/index.tsx +1 -1
package/src/SummaryListItemKey/__snapshots__/index.test.tsx.snap +70 -0
package/src/SummaryListItemKey/index.test.tsx +29 -0
package/src/SummaryListItemKey/index.tsx +29 -1
package/src/SummaryListItemValue/__snapshots__/index.test.tsx.snap +34 -0
package/src/SummaryListItemValue/index.test.tsx +14 -0
package/src/SummaryListItemValue/index.tsx +30 -2
package/src/TableDataCell/__snapshots__/index.test.tsx.snap +77 -0
package/src/TableDataCell/index.test.tsx +42 -0
package/src/TableDataCell/index.tsx +33 -0
package/src/TableRow/__snapshots__/index.test.tsx.snap +1 -1
package/src/TableRow/index.test.tsx +1 -1
package/src/index.ts +1 -1
package/src/lazy.js +1 -1
package/src/registry.js +4 -4
package/CircularProgress/index.js.map +0 -7
package/cjs/CircularProgress/index.js.map +0 -7
package/src/CircularProgress/index.test.tsx +0 -34
/package/{CircularProgress → CircularProgressBase}/index.test.d.ts +0 -0

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

@@ -6,3 +6,27 @@ import Accordion from '@digigov/react-core/Accordion';
 it('renders the Accordion with no props', () => {
   expect(render(<Accordion>hello</Accordion>).baseElement).toMatchSnapshot();
 });
+it('renders the Accordion with horizontalBorders=bottom prop', () => {
+  expect(
+    render(<Accordion horizontalBorders="bottom">hello</Accordion>).baseElement
+  ).toMatchSnapshot();
+});
+it('renders the Accordion with summaryColor=secondary prop', () => {
+  expect(
+    render(<Accordion summaryColor="secondary">hello</Accordion>).baseElement
+  ).toMatchSnapshot();
+});
+it('renders the Accordion with dense=true prop', () => {
+  expect(
+    render(<Accordion dense={true}>hello</Accordion>).baseElement
+  ).toMatchSnapshot();
+});
+it('renders the Accordion with all the props', () => {
+  expect(
+    render(
+      <Accordion horizontalBorders="none" summaryColor="secondary" dense={true}>
+        hello
+      </Accordion>
+    ).baseElement
+  ).toMatchSnapshot();
+});

package/src/AccordionSection/index.web.tsx CHANGED Viewed

@@ -4,7 +4,6 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 export interface AccordionSectionProps extends BaseProps<'details'> {}
 /**
  * AccordionSection should be inside the Accordion component.
- *
  * Inside this component must place the Accordion and the AccordionSectionContent components.
  */
 export const AccordionSection = React.forwardRef<

package/src/AccordionSectionSummaryHeading/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -16,3 +16,20 @@ exports[`renders the AccordionSectionSummaryHeading with no props 1`] = `
   </div>
 </body>
 `;
+exports[`renders the AccordionSectionSummaryHeading with variant=arrows prop 1`] = `
+<body>
+  <div>
+    <h2
+      class="ds-accordion__section-heading"
+      role="button"
+    >
+      <span
+        class="ds-accordion__section-button ds-accordion__section-button--arrows"
+      >
+        hello
+      </span>
+    </h2>
+  </div>
+</body>
+`;

package/src/AccordionSectionSummaryHeading/index.test.tsx CHANGED Viewed

@@ -10,3 +10,12 @@ it('renders the AccordionSectionSummaryHeading with no props', () => {
     ).baseElement
   ).toMatchSnapshot();
 });
+it('renders the AccordionSectionSummaryHeading with variant=arrows prop', () => {
+  expect(
+    render(
+      <AccordionSectionSummaryHeading variant="arrows">
+        hello
+      </AccordionSectionSummaryHeading>
+    ).baseElement
+  ).toMatchSnapshot();
+});

package/src/AccordionSectionSummaryHeading/index.tsx CHANGED Viewed

@@ -2,7 +2,13 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
-export interface AccordionSectionSummaryHeadingProps extends BaseProps<'h2'> {}
+export interface AccordionSectionSummaryHeadingProps extends BaseProps<'h2'> {
+  /*
+   * The type of the icon to be displayed on the right side of the heading.
+   * @default 'default'
+   */
+  variant?: 'default' | 'arrows';
+}
 /**
  * AccordionSectionSummaryHeading should be placed inside AccordionSectionSummary.
  */
@@ -10,7 +16,7 @@ export const AccordionSectionSummaryHeading = React.forwardRef<
   HTMLHeadingElement,
   AccordionSectionSummaryHeadingProps
 >(function AccordionSectionSummaryHeading(
-  { className, children, ...props },
+  { variant, className, children, ...props },
   ref
 ) {
   return (
@@ -27,6 +33,7 @@ export const AccordionSectionSummaryHeading = React.forwardRef<
         as="span"
         className={clsx({
           'ds-accordion__section-button': true,
+          'ds-accordion__section-button--arrows': variant === 'arrows',
         })}
       >
         {children}

package/src/BannerContainer/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -4,7 +4,7 @@ exports[`renders the BannerContainer with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-cookie-banner"
+      class="ds-banner-container"
     >
       hello
     </div>

package/src/BannerContainer/index.tsx CHANGED Viewed

@@ -13,7 +13,7 @@ export const BannerContainer = React.forwardRef<
       as="div"
       ref={ref}
       className={clsx(className, {
-        'ds-cookie-banner': true,
+        'ds-banner-container': true,
       })}
       {...props}
     >

package/src/{CircularProgress → CircularProgressBase}/__snapshots__/index.test.tsx.snap RENAMED Viewed

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`renders the CircularProgress 1`] = `
+exports[`renders the CircularProgressBase 1`] = `
 <body>
   <div>
     <svg
@@ -22,7 +22,7 @@ exports[`renders the CircularProgress 1`] = `
 </body>
 `;
-exports[`renders the CircularProgress with color=secondary and size lg props 1`] = `
+exports[`renders the CircularProgressBase with color=secondary and size lg props 1`] = `
 <body>
   <div>
     <svg
@@ -44,7 +44,7 @@ exports[`renders the CircularProgress with color=secondary and size lg props 1`]
 </body>
 `;
-exports[`renders the CircularProgress with color=secondary and size sm props 1`] = `
+exports[`renders the CircularProgressBase with color=secondary and size sm props 1`] = `
 <body>
   <div>
     <svg
@@ -66,7 +66,7 @@ exports[`renders the CircularProgress with color=secondary and size sm props 1`]
 </body>
 `;
-exports[`renders the CircularProgress with color=secondary prop 1`] = `
+exports[`renders the CircularProgressBase with color=secondary prop 1`] = `
 <body>
   <div>
     <svg
@@ -88,7 +88,7 @@ exports[`renders the CircularProgress with color=secondary prop 1`] = `
 </body>
 `;
-exports[`renders the CircularProgress with size lg 1`] = `
+exports[`renders the CircularProgressBase with size lg 1`] = `
 <body>
   <div>
     <svg
@@ -110,7 +110,7 @@ exports[`renders the CircularProgress with size lg 1`] = `
 </body>
 `;
-exports[`renders the CircularProgress with size sm 1`] = `
+exports[`renders the CircularProgressBase with size sm 1`] = `
 <body>
   <div>
     <svg

package/src/CircularProgressBase/index.test.tsx ADDED Viewed

@@ -0,0 +1,38 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import CircularProgressBase from '@digigov/react-core/CircularProgressBase';
+it('renders the CircularProgressBase', () => {
+  expect(render(<CircularProgressBase />).baseElement).toMatchSnapshot();
+});
+it('renders the CircularProgressBase with size sm', () => {
+  expect(
+    render(<CircularProgressBase size="sm" />).baseElement
+  ).toMatchSnapshot();
+});
+it('renders the CircularProgressBase with size lg', () => {
+  expect(
+    render(<CircularProgressBase size="lg" />).baseElement
+  ).toMatchSnapshot();
+});
+it('renders the CircularProgressBase with color=secondary prop', () => {
+  expect(
+    render(<CircularProgressBase color={'secondary'} />).baseElement
+  ).toMatchSnapshot();
+});
+it('renders the CircularProgressBase with color=secondary and size sm props', () => {
+  expect(
+    render(<CircularProgressBase color={'secondary'} size="sm" />).baseElement
+  ).toMatchSnapshot();
+});
+it('renders the CircularProgressBase with color=secondary and size lg props', () => {
+  expect(
+    render(<CircularProgressBase color={'secondary'} size="lg" />).baseElement
+  ).toMatchSnapshot();
+});

package/src/{CircularProgress → CircularProgressBase}/index.tsx RENAMED Viewed

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
-export interface CircularProgressProps extends BaseProps<'svg'> {
+export interface CircularProgressBaseProps extends BaseProps<'svg'> {
   /**
    * color prop is optional.
    * color prop is used to change the color of the loader.
@@ -22,12 +22,12 @@ export interface CircularProgressProps extends BaseProps<'svg'> {
   size?: 'sm' | 'md' | 'lg';
 }
 /**
- * Use CircularProgress component as an animated loader.
- *  CircularProgress can be used inside LoaderContainer component.
+ * Use CircularProgressBase component as an animated loader.
+ *  CircularProgressBase can be used inside LoaderContainer component.
  */
-export const CircularProgress = React.forwardRef<
-  SVGSVGElement,
-  CircularProgressProps
+export const CircularProgressBase = React.forwardRef<
+  SVGElement,
+  CircularProgressBaseProps
 >(function CircularProgress(
   { color = 'primary', size = 'md', className, ...props },
   ref
@@ -60,4 +60,4 @@ export const CircularProgress = React.forwardRef<
   );
 });
-export default CircularProgress;
+export default CircularProgressBase;

package/src/DetailsContent/index.tsx CHANGED Viewed

@@ -2,7 +2,15 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
-export interface DetailsContentProps extends BaseProps<'div'> {}
+export interface DetailsContentProps extends BaseProps<'div'> {
+  /*
+   ** color is optional. Default value is 'primary'.
+   * @value 'primary'
+   * @value 'secondary'
+   * @default 'primary'
+   * */
+  color?: 'primary' | 'secondary';
+}
 /**
  *DetailsContent component wraps the content text.
  *It is used inside Details component as children
@@ -10,13 +18,14 @@ export interface DetailsContentProps extends BaseProps<'div'> {}
 export const DetailsContent = React.forwardRef<
   HTMLDivElement,
   DetailsContentProps
->(function DetailsContent({ className, children, ...props }, ref) {
+>(function DetailsContent({ color, className, children, ...props }, ref) {
   return (
     <Base
       as="div"
       ref={ref}
       className={clsx(className, {
         'ds-details__content': true,
+        'ds-details__content--secondary': color === 'secondary',
       })}
       {...props}
     >

package/src/Grid/index.tsx CHANGED Viewed

@@ -32,13 +32,7 @@ export interface GridProps extends BaseProps<'div' | 'aside' | 'main'> {
   inline?: boolean;
   /**
    * Defines the space between the type item components. It can only be used on a type container component.
-   * @value 1
-   * @value 2
-   * @value 4
-   * @value 6
-   * @value 8
-   * @value 10
-   * @value 12
+   * @value 1 - 12
    * @value object
    * @default undefined
    */

package/src/NavListItemActionBase/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -36,7 +36,6 @@ exports[`renders the NavListItemActionBase with arrow, badgeText and label props
       class="ds-nav__list-item"
     >
       <button
-        badgetext="hello"
         class="ds-print-hidden ds-nav__list-item-btn ds-link"
       >
         hello

package/src/NavListItemActionBase/index.tsx CHANGED Viewed

@@ -35,7 +35,7 @@ export const NavListItemActionBase = React.forwardRef<
   HTMLButtonElement | HTMLAnchorElement,
   NavListItemActionBaseProps
 >(function NavListItemActionBase(
-  { label, arrow = false, href, className, children, ...props },
+  { label, arrow = false, href, className, children, badgeText, ...props },
   ref
 ) {
   return (
@@ -59,7 +59,7 @@ export const NavListItemActionBase = React.forwardRef<
           {children || label}
         </NavListItemButton>
       )}
-      {props.badgeText && <NavListItemBadge text={props.badgeText} />}
+      {badgeText && <NavListItemBadge text={badgeText} />}
     </NavListItemActionContainer>
   );
 });

package/src/SummaryList/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,5 +1,29 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+exports[`renders the SummaryList with border="true" 1`] = `
+<body>
+  <div>
+    <dl
+      class="ds-summary-list"
+    >
+      hello
+    </dl>
+  </div>
+</body>
+`;
+exports[`renders the SummaryList with error="true 1`] = `
+<body>
+  <div>
+    <dl
+      class="ds-summary-list ds-summary-list--error"
+    >
+      hello
+    </dl>
+  </div>
+</body>
+`;
 exports[`renders the SummaryList with no props 1`] = `
 <body>
   <div>
@@ -11,3 +35,15 @@ exports[`renders the SummaryList with no props 1`] = `
   </div>
 </body>
 `;
+exports[`renders the SummaryList with noLastBorder="true 1`] = `
+<body>
+  <div>
+    <dl
+      class="ds-summary-list ds-summary-list--no-last-border"
+    >
+      hello
+    </dl>
+  </div>
+</body>
+`;

package/src/SummaryList/index.test.tsx CHANGED Viewed

@@ -8,3 +8,18 @@ it('renders the SummaryList with no props', () => {
     render(<SummaryList>hello</SummaryList>).baseElement
   ).toMatchSnapshot();
 });
+it('renders the SummaryList with border="true"', () => {
+  expect(
+    render(<SummaryList border>hello</SummaryList>).baseElement
+  ).toMatchSnapshot();
+});
+it('renders the SummaryList with noLastBorder="true', () => {
+  expect(
+    render(<SummaryList noLastBorder>hello</SummaryList>).baseElement
+  ).toMatchSnapshot();
+});
+it('renders the SummaryList with error="true', () => {
+  expect(
+    render(<SummaryList error>hello</SummaryList>).baseElement
+  ).toMatchSnapshot();
+});

package/src/SummaryList/index.tsx CHANGED Viewed

@@ -6,7 +6,7 @@ export interface SummaryListProps extends BaseProps<'dl'> {
   /**
    * border is optional.
    * By default, SummaryList has borders. You can remove borders by using border prop.
-   * By default is true
+   * By default is true.
    * @value true
    * @value false
    * @default true
@@ -15,12 +15,21 @@ export interface SummaryListProps extends BaseProps<'dl'> {
   /**
    * noLastBorder is optional.
    * By default, SummaryList has borders. You can remove last border by using noLastBorder prop.
-   * By default is true
+   * By default is false.
    * @value true
    * @value false
    * @default false
    */
   noLastBorder?: boolean;
+  /**
+   * error is optional.
+   * If true, the SummaryList will be styled to indicate an error state.
+   * @value true
+   * @value false
+   * @default false
+   */
+  error?: boolean;
 }
 /**
  * SummaryList used as a table with summary information.
@@ -28,7 +37,14 @@ export interface SummaryListProps extends BaseProps<'dl'> {
  */
 export const SummaryList = React.forwardRef<HTMLDListElement, SummaryListProps>(
   function SummaryList(
-    { className, noLastBorder = false, border = true, children, ...props },
+    {
+      border = true,
+      noLastBorder = false,
+      error = false,
+      className,
+      children,
+      ...props
+    },
     ref
   ) {
     return (
@@ -39,6 +55,7 @@ export const SummaryList = React.forwardRef<HTMLDListElement, SummaryListProps>(
           'ds-summary-list': true,
           'ds-summary-list--no-border': !border,
           'ds-summary-list--no-last-border': noLastBorder,
+          'ds-summary-list--error': error === true,
         })}
         {...props}
       >

package/src/SummaryListItem/index.tsx CHANGED Viewed

@@ -21,7 +21,7 @@ export const SummaryListItem = React.forwardRef<
   HTMLDivElement,
   SummaryListItemProps
 >(function SummaryListItem(
-  { className, children, border = true, ...props },
+  { border = true, className, children, ...props },
   ref
 ) {
   return (

package/src/SummaryListItemKey/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,5 +1,63 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+exports[`renders the SummaryListItemKey with error="true" 1`] = `
+<body>
+  <div>
+    <dt
+      class="ds-summary-list__key ds-summary-list__key--sm-3 ds-summary-list__key--error"
+    >
+      <span
+        class="ds-visually-hidden"
+      >
+        Λανθασμένο πεδίο
+      </span>
+      hello
+    </dt>
+  </div>
+</body>
+`;
+exports[`renders the SummaryListItemKey with error="true" and errorAssistiveText="wrong" 1`] = `
+<body>
+  <div>
+    <dt
+      class="ds-summary-list__key ds-summary-list__key--sm-3 ds-summary-list__key--error"
+    >
+      <span
+        class="ds-visually-hidden"
+      >
+        wrong
+      </span>
+      hello
+    </dt>
+  </div>
+</body>
+`;
+exports[`renders the SummaryListItemKey with lg=9 1`] = `
+<body>
+  <div>
+    <dt
+      class="ds-summary-list__key ds-summary-list__key--sm-3 ds-summary-list__key--lg-9"
+    >
+      hello
+    </dt>
+  </div>
+</body>
+`;
+exports[`renders the SummaryListItemKey with md=6 1`] = `
+<body>
+  <div>
+    <dt
+      class="ds-summary-list__key ds-summary-list__key--sm-3 ds-summary-list__key--md-6"
+    >
+      hello
+    </dt>
+  </div>
+</body>
+`;
 exports[`renders the SummaryListItemKey with no props 1`] = `
 <body>
   <div>
@@ -11,3 +69,15 @@ exports[`renders the SummaryListItemKey with no props 1`] = `
   </div>
 </body>
 `;
+exports[`renders the SummaryListItemKey with sm=4 1`] = `
+<body>
+  <div>
+    <dt
+      class="ds-summary-list__key ds-summary-list__key--sm-4"
+    >
+      hello
+    </dt>
+  </div>
+</body>
+`;

package/src/SummaryListItemKey/index.test.tsx CHANGED Viewed

@@ -8,3 +8,32 @@ it('renders the SummaryListItemKey with no props', () => {
     render(<SummaryListItemKey>hello</SummaryListItemKey>).baseElement
   ).toMatchSnapshot();
 });
+it('renders the SummaryListItemKey with sm=4', () => {
+  expect(
+    render(<SummaryListItemKey sm={4}>hello</SummaryListItemKey>).baseElement
+  ).toMatchSnapshot();
+});
+it('renders the SummaryListItemKey with md=6', () => {
+  expect(
+    render(<SummaryListItemKey md={6}>hello</SummaryListItemKey>).baseElement
+  ).toMatchSnapshot();
+});
+it('renders the SummaryListItemKey with lg=9', () => {
+  expect(
+    render(<SummaryListItemKey lg={9}>hello</SummaryListItemKey>).baseElement
+  ).toMatchSnapshot();
+});
+it('renders the SummaryListItemKey with error="true"', () => {
+  expect(
+    render(<SummaryListItemKey error>hello</SummaryListItemKey>).baseElement
+  ).toMatchSnapshot();
+});
+it('renders the SummaryListItemKey with error="true" and errorAssistiveText="wrong"', () => {
+  expect(
+    render(
+      <SummaryListItemKey error errorAssistiveText="wrong">
+        hello
+      </SummaryListItemKey>
+    ).baseElement
+  ).toMatchSnapshot();
+});

package/src/SummaryListItemKey/index.tsx CHANGED Viewed

@@ -1,6 +1,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import VisuallyHidden from '@digigov/react-core/VisuallyHidden';
 export interface SummaryListItemKeyProps extends BaseProps<'dt'> {
   /**
@@ -16,6 +17,22 @@ export interface SummaryListItemKeyProps extends BaseProps<'dt'> {
    * lg shows the width of the key column for large screens.
    */
   lg?: WidthValues;
+  /**
+   * error is optional.
+   * Use error prop to highlight the SummaryListItemKey when there is an error in the corresponding field.
+   * @value true
+   * @value false
+   * @default false
+   */
+  error?: boolean;
+  /**
+   * errorAssistiveText is optional.
+   * Default value is "Λανθασμένο πεδίο".
+   * errorAssistiveText is used to provide a textual warning for assistive technologies like screen readers.
+   */
+  errorAssistiveText?: string;
 }
 export type WidthValues = 3 | 4 | 5 | 6 | 7 | 8 | 9;
@@ -27,7 +44,16 @@ export const SummaryListItemKey = React.forwardRef<
   HTMLElement,
   SummaryListItemKeyProps
 >(function SummaryListItemKey(
-  { sm = 3, md, lg, className, children, ...props },
+  {
+    sm = 3,
+    md,
+    lg,
+    error,
+    errorAssistiveText = 'Λανθασμένο πεδίο',
+    className,
+    children,
+    ...props
+  },
   ref
 ) {
   return (
@@ -39,9 +65,11 @@ export const SummaryListItemKey = React.forwardRef<
         [`ds-summary-list__key--sm-${sm}`]: sm !== undefined,
         [`ds-summary-list__key--md-${md}`]: md !== undefined,
         [`ds-summary-list__key--lg-${lg}`]: lg !== undefined,
+        'ds-summary-list__key--error': error === true,
       })}
       {...props}
     >
+      {error === true && <VisuallyHidden>{errorAssistiveText}</VisuallyHidden>}
       {children}
     </Base>
   );

package/src/SummaryListItemValue/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,5 +1,39 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+exports[`renders the SummaryListItemValue with error="true 1`] = `
+<body>
+  <div>
+    <dd
+      class="ds-summary-list__value ds-summary-list__value--error"
+    >
+      <span
+        class="ds-visually-hidden"
+      >
+        Λανθασμένο πεδίο
+      </span>
+      hello
+    </dd>
+  </div>
+</body>
+`;
+exports[`renders the SummaryListItemValue with error="true and errorAssistiveText="wrong 1`] = `
+<body>
+  <div>
+    <dd
+      class="ds-summary-list__value ds-summary-list__value--error"
+    >
+      <span
+        class="ds-visually-hidden"
+      >
+        wrong
+      </span>
+      hello
+    </dd>
+  </div>
+</body>
+`;
 exports[`renders the SummaryListItemValue with no props 1`] = `
 <body>
   <div>