@digigov/react-core 2.0.0-d0adc9fb → 2.0.0-d2ffc726

package/src/NotificationBannerContent/index.tsx

@@ -1,8 +1,32 @@
 import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import { WarningTextAssistive } from '@digigov/react-core/WarningTextAssistive';
 
-export interface NotificationBannerContentProps extends BaseProps<'div'> {}
+export interface NotificationBannerContentProps extends BaseProps<'div'> {
+  /**
+   * assistiveText is optional.
+   * Default value is "Προσοχή".
+   * assistiveText is used to provide a textual warning for assistive technologies like screen readers.
+   */
+  assistiveText?: string;
+  /**
+   * variant is optional.
+   * variant is used to display red line on the left side of the component and exclamation mark icon with light red as background.
+   * @value 'error'
+   * @value 'error-group'
+   * @default 'error'.
+   */
+  /**
+   * variant is optional.
+   * variant error is used to change the color of the NotificationBannerContainer.
+   * variant error-group is used to display red line on the left side of the component and exclamation mark icon with light red as background.
+   * @value 'error'
+   * @value 'error-group'
+   * @default 'error'.
+   */
+  variant?: 'error' | 'error-group';
+}
 /**
  * Details for the NotificationBannerContent.
  * NotificationBannerContent component is used as a content for
@@ -12,17 +36,39 @@ export interface NotificationBannerContentProps extends BaseProps<'div'> {}
 export const NotificationBannerContent = React.forwardRef<
   HTMLDivElement,
   NotificationBannerContentProps
->(function NotificationBannerContent({ className, children, ...props }, ref) {
+>(function NotificationBannerContent(
+  { className, assistiveText, variant, children, ...props },
+  ref
+) {
   return (
     <Base
       as="div"
       ref={ref}
       className={clsx(className, {
-        'ds-notification-banner__content': true,
+        'ds-notification-banner__content': variant !== 'error-group',
+        'ds-notification-error-group-banner__content':
+          variant === 'error-group',
       })}
       {...props}
     >
-      {children}
+      {variant === 'error-group' ? (
+        <>
+          <Base
+            as="div"
+            className={clsx({
+              'ds-notification-banner__icon--error-group': true,
+            })}
+          >
+            !
+          </Base>
+          <WarningTextAssistive>{assistiveText}</WarningTextAssistive>
+          <Base as="div" className="ds-notification-banner__text-error-group">
+            {children}
+          </Base>
+        </>
+      ) : (
+        children
+      )}
     </Base>
   );
 });

package/src/NotificationBannerLink/index.native.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import CoreNotificationBannerLink, {
   NotificationBannerLinkProps,
 } from '@digigov/react-core/NotificationBannerLink/index.web';
-import { extend } from '@digigov/react-core/utils/extend.native';
+import { extend } from '@digigov/react-core/utils/index.native';
 
 interface AdditionalProps {
   variant?: 'error' | 'success';

package/src/RadioConditional/__snapshots__/index.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`renders the Blockquote with no props 1`] = `
       class="ds-radios__conditional"
     >
       <div
-        class="ds-field xs:ds-grid__col-span-12"
+        class="ds-field ds-grid-item xs:ds-grid__col-span-12"
       >
         <label
           class="ds-label"

package/src/RadioItem/__snapshots__/index.test.tsx.snap

@@ -18,7 +18,6 @@ exports[`renders the RadioItem  \`dividerText\` props 1`] = `
         <input
           class="ds-radios__input"
           type="radio"
-          value=""
         />
       </label>
     </div>
@@ -89,7 +88,6 @@ exports[`renders the RadioItem with disabled prop 1`] = `
           class="ds-radios__input"
           disabled=""
           type="radio"
-          value=""
         />
       </label>
     </div>
@@ -111,7 +109,6 @@ exports[`renders the RadioItem with name  props 1`] = `
           class="ds-radios__input"
           name="name"
           type="radio"
-          value=""
         />
       </label>
     </div>
@@ -177,7 +174,6 @@ exports[`renders the RadioItem with no props 1`] = `
         <input
           class="ds-radios__input"
           type="radio"
-          value=""
         />
       </label>
     </div>

package/src/Skeleton/index.tsx

@@ -90,13 +90,14 @@ export const Skeleton = React.forwardRef<HTMLSpanElement, SkeletonProps>(
         }}
       >
         {variant === 'button' && (
-          <span
+          <Base
+            as="span"
             className={clsx({
               'ds-skeleton__line': true,
               'ds-skeleton__line--size-default':
                 width === undefined && height === undefined,
             })}
-          ></span>
+          ></Base>
         )}
         {typeof children != 'string' && children}
       </Base>

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

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

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

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

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

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

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

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

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

package/src/SummaryListItemValue/index.test.tsx

@@ -8,3 +8,17 @@ it('renders the SummaryListItemValue with no props', () => {
     render(<SummaryListItemValue>hello</SummaryListItemValue>).baseElement
   ).toMatchSnapshot();
 });
+it('renders the SummaryListItemValue with error="true', () => {
+  expect(
+    render(<SummaryListItemValue error>hello</SummaryListItemValue>).baseElement
+  ).toMatchSnapshot();
+});
+it('renders the SummaryListItemValue with error="true and errorAssistiveText="wrong', () => {
+  expect(
+    render(
+      <SummaryListItemValue error errorAssistiveText="wrong">
+        hello
+      </SummaryListItemValue>
+    ).baseElement
+  ).toMatchSnapshot();
+});

package/src/SummaryListItemValue/index.tsx

@@ -1,24 +1,52 @@
 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 SummaryListItemValueProps extends BaseProps<'dd'> {}
+export interface SummaryListItemValueProps extends BaseProps<'dd'> {
+  /**
+   * 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;
+}
 /**
  * Details for the SummaryListItemValue.
  */
 export const SummaryListItemValue = React.forwardRef<
   HTMLElement,
   SummaryListItemValueProps
->(function SummaryListItemValue({ className, children, ...props }, ref) {
+>(function SummaryListItemValue(
+  {
+    error,
+    errorAssistiveText = 'Λανθασμένο πεδίο',
+    className,
+    children,
+    ...props
+  },
+  ref
+) {
   return (
     <Base
       as="dd"
       ref={ref}
       className={clsx(className, {
         'ds-summary-list__value': true,
+        'ds-summary-list__value--error': error === true,
       })}
       {...props}
     >
+      {error === true && <VisuallyHidden>{errorAssistiveText}</VisuallyHidden>}
       {children}
     </Base>
   );

package/src/Table/index.tsx

@@ -47,6 +47,15 @@ export interface TableProps extends BaseProps<'table'> {
    * @default 'default'
    */
   variant?: 'zebra' | 'default';
+  /**
+   * verticalAlign is optional.
+   * The verticalAlign property sets vertical alignment of the table-cells.
+   * @value 'top'
+   * @value 'middle'
+   * @value 'bottom'
+   * @default 'middle'
+   */
+  verticalAlign?: 'top' | 'middle' | 'bottom';
 }
 /**
  * Table component is used to wrap the sub components of a table
@@ -59,6 +68,7 @@ export const Table = React.forwardRef<HTMLTableElement, TableProps>(
       dense = false,
       verticalBorders = false,
       stacked = 'never',
+      verticalAlign = 'middle',
       className,
       children,
       ...props
@@ -79,6 +89,8 @@ export const Table = React.forwardRef<HTMLTableElement, TableProps>(
           'ds-table--dense': dense,
           'ds-table--zebra': variant === 'zebra',
           'ds-table--vertical-lines': verticalBorders,
+          'ds-table--align-top': verticalAlign === 'top',
+          'ds-table--align-bottom': verticalAlign === 'bottom',
         })}
         {...props}
       >