@digigov/react-core 2.0.0-aefd0709 → 2.0.0-b15d5d44

package/src/ErrorSummary/index.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { BaseProps } from '@digigov/react-core/Base';
 import NotificationBannerContainer from '@digigov/react-core/NotificationBannerContainer';
 import NotificationBannerContent from '@digigov/react-core/NotificationBannerContent';
-
 export interface ErrorSummaryProps extends BaseProps<'div'> {
   /**
    * dense is optional.
@@ -11,21 +10,35 @@ export interface ErrorSummaryProps extends BaseProps<'div'> {
    * @default false
    * */
   dense?: boolean;
+  /**
+   * 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';
 }
 /**
  * Use this component at the top of a page to summarize any errors a user has made.
  */
 export const ErrorSummary = React.forwardRef<HTMLDivElement, ErrorSummaryProps>(
-  function ErrorSummary({ className, dense, children, ...props }, ref) {
+  function ErrorSummary(
+    { className, dense, children, variant = 'error', ...props },
+    ref
+  ) {
     return (
       <NotificationBannerContainer
-        variant={'error'}
+        variant={variant}
         className={className}
         ref={ref}
         dense={dense}
         {...props}
       >
-        <NotificationBannerContent>{children}</NotificationBannerContent>
+        <NotificationBannerContent variant={variant}>
+          {children}
+        </NotificationBannerContent>
       </NotificationBannerContainer>
     );
   }

package/src/NotificationBannerContainer/index.tsx

@@ -9,9 +9,10 @@ export interface NotificationBannerContainerProps extends BaseProps<'div'> {
    * @value 'info'
    * @value 'success'
    * @value 'error'
+   * @value 'error-group'
    * @default 'info'.
    */
-  variant?: 'info' | 'success' | 'error';
+  variant?: 'info' | 'success' | 'error' | 'error-group';
   /**
    * dense is optional.
    * @value true NotificationBannerContainer will be dense.

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/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/TimelineHeading/__snapshots__/index.test.tsx.snap

@@ -16,7 +16,7 @@ exports[`renders the TimelineHeading with size = "md" prop 1`] = `
 <body>
   <div>
     <h3
-      class="ds-timeline__heading ds-timeline__heading--md"
+      class="ds-timeline__heading ds-timeline__heading-md"
     >
       hello
     </h3>
@@ -28,7 +28,7 @@ exports[`renders the TimelineHeading with size = "sm" prop 1`] = `
 <body>
   <div>
     <h4
-      class="ds-timeline__heading ds-timeline__heading--sm"
+      class="ds-timeline__heading ds-timeline__heading-sm"
     >
       hello
     </h4>