@digigov/react-core 1.0.0-7c9716da → 1.0.0-88820b1e

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

@@ -52,32 +52,41 @@ exports[`renders the DropdownButton with arrow=true 1`] = `
       tabIndex={0}
     >
       hello
-      <ForwardRef(ArrowIcon)
+      <ArrowIcon
         direction="down"
       >
-        <ForwardRef(SvgIcon)
-          className="govgr-svg-icon--arrow--down"
+        <ForwardRef(Icon)
+          direction="down"
+          icon="arrow"
         >
-          <ForwardRef(Base)
-            aria-hidden="true"
-            as="svg"
-            className="govgr-svg-icon--arrow--down govgr-svg-icon"
-            focusable="false"
-            viewBox="0 0 24 24"
+          <ForwardRef(SvgIcon)
+            className="govgr-svg-icon--arrow"
           >
-            <svg
+            <ForwardRef(Base)
               aria-hidden="true"
-              className="govgr-svg-icon--arrow--down govgr-svg-icon"
+              as="svg"
+              className="govgr-svg-icon--arrow govgr-svg-icon"
               focusable="false"
               viewBox="0 0 24 24"
             >
-              <path
-                d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
-              />
-            </svg>
-          </ForwardRef(Base)>
-        </ForwardRef(SvgIcon)>
-      </ForwardRef(ArrowIcon)>
+              <svg
+                aria-hidden="true"
+                className="govgr-svg-icon--arrow govgr-svg-icon"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <arrow
+                  direction="down"
+                >
+                  <path
+                    d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
+                  />
+                </arrow>
+              </svg>
+            </ForwardRef(Base)>
+          </ForwardRef(SvgIcon)>
+        </ForwardRef(Icon)>
+      </ArrowIcon>
     </summary>
   </ForwardRef(Base)>
 </ForwardRef(DropdownButton)>
@@ -136,32 +145,41 @@ exports[`renders the DropdownButton with color=primary and arrow={true} 1`] = `
       className="govgr-btn-primary govgr-btn govgr-dropdown__button--arrow govgr-dropdown__button"
       tabIndex={0}
     >
-      <ForwardRef(ArrowIcon)
+      <ArrowIcon
         direction="down"
       >
-        <ForwardRef(SvgIcon)
-          className="govgr-svg-icon--arrow--down"
+        <ForwardRef(Icon)
+          direction="down"
+          icon="arrow"
         >
-          <ForwardRef(Base)
-            aria-hidden="true"
-            as="svg"
-            className="govgr-svg-icon--arrow--down govgr-svg-icon"
-            focusable="false"
-            viewBox="0 0 24 24"
+          <ForwardRef(SvgIcon)
+            className="govgr-svg-icon--arrow"
           >
-            <svg
+            <ForwardRef(Base)
               aria-hidden="true"
-              className="govgr-svg-icon--arrow--down govgr-svg-icon"
+              as="svg"
+              className="govgr-svg-icon--arrow govgr-svg-icon"
               focusable="false"
               viewBox="0 0 24 24"
             >
-              <path
-                d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
-              />
-            </svg>
-          </ForwardRef(Base)>
-        </ForwardRef(SvgIcon)>
-      </ForwardRef(ArrowIcon)>
+              <svg
+                aria-hidden="true"
+                className="govgr-svg-icon--arrow govgr-svg-icon"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <arrow
+                  direction="down"
+                >
+                  <path
+                    d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
+                  />
+                </arrow>
+              </svg>
+            </ForwardRef(Base)>
+          </ForwardRef(SvgIcon)>
+        </ForwardRef(Icon)>
+      </ArrowIcon>
     </summary>
   </ForwardRef(Base)>
 </ForwardRef(DropdownButton)>
@@ -263,32 +281,41 @@ exports[`renders the DropdownButton with color=primary variant="button" arrow={t
       className="govgr-btn-primary govgr-btn govgr-dropdown__button--arrow govgr-dropdown__button"
       tabIndex={0}
     >
-      <ForwardRef(ArrowIcon)
+      <ArrowIcon
         direction="down"
       >
-        <ForwardRef(SvgIcon)
-          className="govgr-svg-icon--arrow--down"
+        <ForwardRef(Icon)
+          direction="down"
+          icon="arrow"
         >
-          <ForwardRef(Base)
-            aria-hidden="true"
-            as="svg"
-            className="govgr-svg-icon--arrow--down govgr-svg-icon"
-            focusable="false"
-            viewBox="0 0 24 24"
+          <ForwardRef(SvgIcon)
+            className="govgr-svg-icon--arrow"
           >
-            <svg
+            <ForwardRef(Base)
               aria-hidden="true"
-              className="govgr-svg-icon--arrow--down govgr-svg-icon"
+              as="svg"
+              className="govgr-svg-icon--arrow govgr-svg-icon"
               focusable="false"
               viewBox="0 0 24 24"
             >
-              <path
-                d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
-              />
-            </svg>
-          </ForwardRef(Base)>
-        </ForwardRef(SvgIcon)>
-      </ForwardRef(ArrowIcon)>
+              <svg
+                aria-hidden="true"
+                className="govgr-svg-icon--arrow govgr-svg-icon"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <arrow
+                  direction="down"
+                >
+                  <path
+                    d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
+                  />
+                </arrow>
+              </svg>
+            </ForwardRef(Base)>
+          </ForwardRef(SvgIcon)>
+        </ForwardRef(Icon)>
+      </ArrowIcon>
     </summary>
   </ForwardRef(Base)>
 </ForwardRef(DropdownButton)>
@@ -330,32 +357,41 @@ exports[`renders the DropdownButton with color=primary variant="link" arrow={tru
       className="govgr-link govgr-dropdown__button--arrow govgr-dropdown__button"
       tabIndex={0}
     >
-      <ForwardRef(ArrowIcon)
+      <ArrowIcon
         direction="down"
       >
-        <ForwardRef(SvgIcon)
-          className="govgr-svg-icon--arrow--down"
+        <ForwardRef(Icon)
+          direction="down"
+          icon="arrow"
         >
-          <ForwardRef(Base)
-            aria-hidden="true"
-            as="svg"
-            className="govgr-svg-icon--arrow--down govgr-svg-icon"
-            focusable="false"
-            viewBox="0 0 24 24"
+          <ForwardRef(SvgIcon)
+            className="govgr-svg-icon--arrow"
           >
-            <svg
+            <ForwardRef(Base)
               aria-hidden="true"
-              className="govgr-svg-icon--arrow--down govgr-svg-icon"
+              as="svg"
+              className="govgr-svg-icon--arrow govgr-svg-icon"
               focusable="false"
               viewBox="0 0 24 24"
             >
-              <path
-                d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
-              />
-            </svg>
-          </ForwardRef(Base)>
-        </ForwardRef(SvgIcon)>
-      </ForwardRef(ArrowIcon)>
+              <svg
+                aria-hidden="true"
+                className="govgr-svg-icon--arrow govgr-svg-icon"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <arrow
+                  direction="down"
+                >
+                  <path
+                    d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
+                  />
+                </arrow>
+              </svg>
+            </ForwardRef(Base)>
+          </ForwardRef(SvgIcon)>
+        </ForwardRef(Icon)>
+      </ArrowIcon>
     </summary>
   </ForwardRef(Base)>
 </ForwardRef(DropdownButton)>
@@ -414,32 +450,41 @@ exports[`renders the DropdownButton with color=secondary and arrow={true} 1`] =
       className="govgr-btn-secondary govgr-btn govgr-dropdown__button--arrow govgr-dropdown__button"
       tabIndex={0}
     >
-      <ForwardRef(ArrowIcon)
+      <ArrowIcon
         direction="down"
       >
-        <ForwardRef(SvgIcon)
-          className="govgr-svg-icon--arrow--down"
+        <ForwardRef(Icon)
+          direction="down"
+          icon="arrow"
         >
-          <ForwardRef(Base)
-            aria-hidden="true"
-            as="svg"
-            className="govgr-svg-icon--arrow--down govgr-svg-icon"
-            focusable="false"
-            viewBox="0 0 24 24"
+          <ForwardRef(SvgIcon)
+            className="govgr-svg-icon--arrow"
           >
-            <svg
+            <ForwardRef(Base)
               aria-hidden="true"
-              className="govgr-svg-icon--arrow--down govgr-svg-icon"
+              as="svg"
+              className="govgr-svg-icon--arrow govgr-svg-icon"
               focusable="false"
               viewBox="0 0 24 24"
             >
-              <path
-                d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
-              />
-            </svg>
-          </ForwardRef(Base)>
-        </ForwardRef(SvgIcon)>
-      </ForwardRef(ArrowIcon)>
+              <svg
+                aria-hidden="true"
+                className="govgr-svg-icon--arrow govgr-svg-icon"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <arrow
+                  direction="down"
+                >
+                  <path
+                    d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
+                  />
+                </arrow>
+              </svg>
+            </ForwardRef(Base)>
+          </ForwardRef(SvgIcon)>
+        </ForwardRef(Icon)>
+      </ArrowIcon>
     </summary>
   </ForwardRef(Base)>
 </ForwardRef(DropdownButton)>
@@ -502,32 +547,41 @@ exports[`renders the DropdownButton with color=warning variant="button" arrow={t
       tabIndex={0}
     >
       hello
-      <ForwardRef(ArrowIcon)
+      <ArrowIcon
         direction="down"
       >
-        <ForwardRef(SvgIcon)
-          className="govgr-svg-icon--arrow--down"
+        <ForwardRef(Icon)
+          direction="down"
+          icon="arrow"
         >
-          <ForwardRef(Base)
-            aria-hidden="true"
-            as="svg"
-            className="govgr-svg-icon--arrow--down govgr-svg-icon"
-            focusable="false"
-            viewBox="0 0 24 24"
+          <ForwardRef(SvgIcon)
+            className="govgr-svg-icon--arrow"
           >
-            <svg
+            <ForwardRef(Base)
               aria-hidden="true"
-              className="govgr-svg-icon--arrow--down govgr-svg-icon"
+              as="svg"
+              className="govgr-svg-icon--arrow govgr-svg-icon"
               focusable="false"
               viewBox="0 0 24 24"
             >
-              <path
-                d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
-              />
-            </svg>
-          </ForwardRef(Base)>
-        </ForwardRef(SvgIcon)>
-      </ForwardRef(ArrowIcon)>
+              <svg
+                aria-hidden="true"
+                className="govgr-svg-icon--arrow govgr-svg-icon"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <arrow
+                  direction="down"
+                >
+                  <path
+                    d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
+                  />
+                </arrow>
+              </svg>
+            </ForwardRef(Base)>
+          </ForwardRef(SvgIcon)>
+        </ForwardRef(Icon)>
+      </ArrowIcon>
     </summary>
   </ForwardRef(Base)>
 </ForwardRef(DropdownButton)>

package/src/DropdownButton/index.tsx

@@ -4,28 +4,40 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 import { ArrowIcon } from '@digigov/react-icons';
 export interface DropdownButtonProps extends BaseProps<'summary'> {
   /**
-   * color is optional.
-   * 'primary' color gives DropdownButton the primary green color.
-   * 'secondary' color gives DropdownButton the secondary gray color.
-   * 'warning' color gives DropdownButton the warning red color.
-   * The default value is 'primary'.
-   */
+  * color is optional.
+  * 'primary' color gives DropdownButton the primary green color.
+  * 'secondary' color gives DropdownButton the secondary gray color.
+  * 'warning' color gives DropdownButton the warning red color.
+  * The default value is 'primary'.
+  * @value 'primary'
+  * @value 'secondary'
+  * @value 'warning'
+  * @default 'primary'
+  */
   color?: 'primary' | 'secondary' | 'warning';
   /**
-   * variant is optional.
-   * variant prop changes DropdownButton to button or link.
-   */
+  * variant is optional.
+  * variant prop changes DropdownButton to button or link.
+  * @value 'link'
+  * @value 'button'
+  * @default 'button'
+  */
   variant?: 'link' | 'button';
   /**
-   * arrow is optional.
-   * arrow prop adds checkIcon component inside DropdownButton.
-   * arrow prop is false by default
-   */
+  * arrow is optional.
+  * arrow prop adds checkIcon component inside DropdownButton.
+  * arrow prop is false by default
+  * @value true
+  * @value false
+  * @default false
+  */
   arrow?: boolean;
   /**
-   * underline is optional.
-   * Use this prop when you want to use Dropdown button as <th> header in sorted table.
-   */
+  * underline is optional.
+  * Use this prop when you want to use Dropdown button as <th> header in sorted table.
+  * @value true
+  * @value false
+  */
   underline?: boolean;
 }
 /**

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

@@ -2,15 +2,36 @@
 
 exports[`renders the ErrorSummary with no props 1`] = `
 <ForwardRef(ErrorSummary)>
-  <ForwardRef(Base)
-    as="div"
-    className="govgr-error-summary"
+  <ForwardRef(NotificationBannerContainer)
+    variant="error"
   >
-    <div
-      className="govgr-error-summary"
+    <ForwardRef(Base)
+      aria-labelledby="govgr-notification-banner-title"
+      as="div"
+      className="govgr-notification-banner--error govgr-notification-banner"
+      data-module="govgr-notification-banner"
+      role="region"
     >
-      hello
-    </div>
-  </ForwardRef(Base)>
+      <div
+        aria-labelledby="govgr-notification-banner-title"
+        className="govgr-notification-banner--error govgr-notification-banner"
+        data-module="govgr-notification-banner"
+        role="region"
+      >
+        <ForwardRef(NotificationBannerContent)>
+          <ForwardRef(Base)
+            as="div"
+            className="govgr-notification-banner__content"
+          >
+            <div
+              className="govgr-notification-banner__content"
+            >
+              hello
+            </div>
+          </ForwardRef(Base)>
+        </ForwardRef(NotificationBannerContent)>
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(NotificationBannerContainer)>
 </ForwardRef(ErrorSummary)>
 `;

package/src/ErrorSummary/index.tsx

@@ -1,24 +1,25 @@
 import React from 'react';
-import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
+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'> {}
+export interface ErrorSummaryProps extends BaseProps<'div'> { }
 /**
- * Use this component at the top of a page to summarise any errors a user has made.
+ * 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, children, ...props }, ref) {
     return (
-      <Base
-        as="div"
+      <NotificationBannerContainer
+        variant={'error'}
+        className={className}
         ref={ref}
-        className={clsx(className, {
-          'govgr-error-summary': true,
-        })}
         {...props}
       >
-        {children}
-      </Base>
+        <NotificationBannerContent>
+          {children}
+        </NotificationBannerContent>
+      </NotificationBannerContainer>
     );
   }
 );

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

@@ -7,17 +7,14 @@ exports[`renders the FieldContainer with error=false 1`] = `
   <ForwardRef(Grid)
     className="govgr-field"
     item={true}
-    lg={12}
-    md={12}
-    xl={12}
     xs={12}
   >
     <ForwardRef(Base)
       as="div"
-      className="govgr-field xs:govgr-grid__col-span-12 md:govgr-grid__col-span-12 lg:govgr-grid__col-span-12 xl:govgr-grid__col-span-12"
+      className="govgr-field xs:govgr-grid__col-span-12"
     >
       <div
-        className="govgr-field xs:govgr-grid__col-span-12 md:govgr-grid__col-span-12 lg:govgr-grid__col-span-12 xl:govgr-grid__col-span-12"
+        className="govgr-field xs:govgr-grid__col-span-12"
       >
         hello
       </div>
@@ -33,17 +30,14 @@ exports[`renders the FieldContainer with error=true 1`] = `
   <ForwardRef(Grid)
     className="govgr-field--error govgr-field"
     item={true}
-    lg={12}
-    md={12}
-    xl={12}
     xs={12}
   >
     <ForwardRef(Base)
       as="div"
-      className="govgr-field--error govgr-field xs:govgr-grid__col-span-12 md:govgr-grid__col-span-12 lg:govgr-grid__col-span-12 xl:govgr-grid__col-span-12"
+      className="govgr-field--error govgr-field xs:govgr-grid__col-span-12"
     >
       <div
-        className="govgr-field--error govgr-field xs:govgr-grid__col-span-12 md:govgr-grid__col-span-12 lg:govgr-grid__col-span-12 xl:govgr-grid__col-span-12"
+        className="govgr-field--error govgr-field xs:govgr-grid__col-span-12"
       >
         hello
       </div>
@@ -57,17 +51,14 @@ exports[`renders the FieldContainer with no props 1`] = `
   <ForwardRef(Grid)
     className="govgr-field"
     item={true}
-    lg={12}
-    md={12}
-    xl={12}
     xs={12}
   >
     <ForwardRef(Base)
       as="div"
-      className="govgr-field xs:govgr-grid__col-span-12 md:govgr-grid__col-span-12 lg:govgr-grid__col-span-12 xl:govgr-grid__col-span-12"
+      className="govgr-field xs:govgr-grid__col-span-12"
     >
       <div
-        className="govgr-field xs:govgr-grid__col-span-12 md:govgr-grid__col-span-12 lg:govgr-grid__col-span-12 xl:govgr-grid__col-span-12"
+        className="govgr-field xs:govgr-grid__col-span-12"
       >
         hello
       </div>

package/src/FieldContainer/index.tsx

@@ -4,8 +4,10 @@ import Grid, { GridProps } from '@digigov/react-core/Grid';
 
 export interface FieldContainerProps extends GridProps {
   /**
-   * error is optional.
-   */
+  * error is optional.
+  * @value true
+  * @value false
+  */
   error?: boolean;
 }
 /**
@@ -15,7 +17,7 @@ export const FieldContainer = React.forwardRef<
   HTMLDivElement,
   FieldContainerProps
 >(function FieldContainer(
-  { error, className, children, xs = 12, md = 12, lg = 12, xl = 12, ...props },
+  { error, className, children, xs = 12, md, lg, xl, ...props },
   ref
 ) {
   return (

package/src/FieldsetLegend/index.tsx

@@ -4,15 +4,23 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface FieldsetLegendProps extends BaseProps<'legend'> {
   /**
-   * size is optional. The default value is 'lg'
-   */
+  * size is optional. The default value is 'lg'
+  * @value 'xl'
+  * @value 'lg'
+  * @value 'md'
+  * @value 'sm'
+  * @default 'lg'
+  */
   size?: 'xl' | 'lg' | 'md' | 'sm';
 
   /**
-   * heading is optional.
-   * Add this prop if this Fieldset component is the only one in this page.
-   * The default value is false.
-   */
+  * heading is optional.
+  * Add this prop if this Fieldset component is the only one in this page.
+  * The default value is false.
+  * @value true
+  * @value false
+  * @default false
+  */
   heading?: boolean;
 }
 /**
@@ -26,23 +34,21 @@ export const FieldsetLegend = React.forwardRef<
   ref
 ) {
   return (
-    <>
-      <Base
-        as="legend"
-        ref={ref}
-        className={clsx(className, {
-          'govgr-fieldset__legend': true,
-          'govgr-heading-xl': size === 'xl',
-          'govgr-heading-lg': size === 'lg',
-          'govgr-heading-md': size === 'md',
-          'govgr-heading-sm': size === 'sm',
-        })}
-        {...(heading && { role: 'heading', 'aria-level': 1 })}
-        {...props}
-      >
-        {children}
-      </Base>
-    </>
+    <Base
+      as="legend"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-fieldset__legend': true,
+        'govgr-heading-xl': size === 'xl',
+        'govgr-heading-lg': size === 'lg',
+        'govgr-heading-md': size === 'md',
+        'govgr-heading-sm': size === 'sm',
+      })}
+      {...(heading && { role: 'heading', 'aria-level': 1 })}
+      {...props}
+    >
+      {children}
+    </Base>
   );
 });
 

package/src/FileUpload/index.tsx

@@ -4,8 +4,11 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface FileUploadProps extends BaseProps<'input'> {
   /**
-   * hasFiles is optional.
-   */
+  * hasFiles is optional.
+  * @value true
+  * @value false
+  * @default false
+  */
   hasFiles?: boolean;
 }
 /**