@digigov/react-core 1.0.0-6b93ebf2 → 1.0.0-88820b1e

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

@@ -2,53 +2,74 @@
 
 exports[`renders the DrawerHeading with no props 1`] = `
 <ForwardRef(DrawerHeading)>
-  <ForwardRef(Base)
-    as="div"
+  <ForwardRef(Stack)
+    alignItems="baseline"
     className="govgr-drawer__heading"
+    direction="row"
   >
-    <div
-      className="govgr-drawer__heading"
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-drawer__heading govgr-stack--align-baseline govgr-stack--row govgr-stack"
     >
-      Menu
-      <ForwardRef(LinkBase)
-        className="govgr-drawer__close-icon"
+      <div
+        className="govgr-drawer__heading govgr-stack--align-baseline govgr-stack--row govgr-stack"
       >
-        <ForwardRef(Base)
-          as="a"
-          className="govgr-drawer__close-icon govgr-link"
+        Menu
+        <ForwardRef(CloseButton)
+          onClick={[Function]}
         >
-          <a
-            className="govgr-drawer__close-icon govgr-link"
+          <ForwardRef(Button)
+            className="govgr-close-btn"
+            onClick={[Function]}
+            variant="link"
           >
-            Κλείσιμο
-            <ForwardRef(CloseIcon)>
-              <ForwardRef(SvgIcon)
-                className="govgr-svg-icon--close"
+            <ForwardRef(Base)
+              as="button"
+              className="govgr-close-btn govgr-link"
+              onClick={[Function]}
+              printHidden={true}
+            >
+              <button
+                className="govgr-close-btn govgr-link govgr-print-hidden"
+                onClick={[Function]}
               >
-                <ForwardRef(Base)
-                  aria-hidden="true"
-                  as="svg"
-                  className="govgr-svg-icon--close govgr-svg-icon"
-                  focusable="false"
-                  viewBox="0 0 24 24"
-                >
-                  <svg
-                    aria-hidden="true"
-                    className="govgr-svg-icon--close govgr-svg-icon"
-                    focusable="false"
-                    viewBox="0 0 24 24"
+                Κλείσιμο
+                <CloseIcon>
+                  <ForwardRef(Icon)
+                    icon="close"
                   >
-                    <polygon
-                      points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 "
-                    />
-                  </svg>
-                </ForwardRef(Base)>
-              </ForwardRef(SvgIcon)>
-            </ForwardRef(CloseIcon)>
-          </a>
-        </ForwardRef(Base)>
-      </ForwardRef(LinkBase)>
-    </div>
-  </ForwardRef(Base)>
+                    <ForwardRef(SvgIcon)
+                      className="govgr-svg-icon--close"
+                    >
+                      <ForwardRef(Base)
+                        aria-hidden="true"
+                        as="svg"
+                        className="govgr-svg-icon--close govgr-svg-icon"
+                        focusable="false"
+                        viewBox="0 0 24 24"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          className="govgr-svg-icon--close govgr-svg-icon"
+                          focusable="false"
+                          viewBox="0 0 24 24"
+                        >
+                          <close>
+                            <polygon
+                              points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 "
+                            />
+                          </close>
+                        </svg>
+                      </ForwardRef(Base)>
+                    </ForwardRef(SvgIcon)>
+                  </ForwardRef(Icon)>
+                </CloseIcon>
+              </button>
+            </ForwardRef(Base)>
+          </ForwardRef(Button)>
+        </ForwardRef(CloseButton)>
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(Stack)>
 </ForwardRef(DrawerHeading)>
 `;

package/src/DrawerHeading/index.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
 import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
-import { CloseIcon } from '@digigov/react-icons';
-import Button from '@digigov/react-core/Button';
-
-export interface DrawerHeadingProps extends BaseProps<'div'> {
+import Stack, { StackProps } from '@digigov/react-core/Stack';
+import CloseButton from '@digigov/react-core/CloseButton';
 
+export interface DrawerHeadingProps extends StackProps {
   /**
   * closeLabel is optional.
   * This declares the label of the close icon.
@@ -25,32 +23,29 @@ export const DrawerHeading = React.forwardRef<
   {
     className,
     children,
+    onClick,
     closeLabel = 'Κλείσιμο',
     ...props
   },
   ref
 ) {
   return (
-    <Base
-      as="div"
-      ref={ref}
+    <Stack
+      direction="row"
+      alignItems='baseline'
       className={clsx(className, {
         'govgr-drawer__heading': true,
       })}
+      ref={ref}
       {...props}
     >
       {children}
-      <div
-        className={clsx(className, {
-          'govgr-drawer__close-container': true,
-        })}
-      >
-        <Button className="govgr-drawer__close-icon" variant='link'>
-          {closeLabel}
-          <CloseIcon />
-        </Button>
-      </div>
-    </Base>
+      <CloseButton onClick={(e) => {
+        onClick && onClick(e as any);
+      }}>
+        {closeLabel}
+      </CloseButton>
+    </Stack>
   );
 });
 

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

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the ErrorSummary with no props 1`] = `
+<ForwardRef(ErrorSummary)>
+  <ForwardRef(NotificationBannerContainer)
+    variant="error"
+  >
+    <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"
+    >
+      <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/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

@@ -17,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/FileUploadContainer/__snapshots__/index.test.tsx.snap

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the FileUpload with hasUploadedFile prop 1`] = `
+exports[`renders the FileUpload with hasFiles prop 1`] = `
 <ForwardRef(FileUploadContainer)
-  hasUploadedFile={true}
+  hasFiles={true}
 >
   <ForwardRef(Base)
     as="div"

package/src/FileUploadContainer/index.test.tsx

@@ -7,6 +7,6 @@ it('renders the FileUpload with no props', () => {
   expect(mount(<FileUploadContainer />)).toMatchSnapshot();
 });
 
-it('renders the FileUpload with hasUploadedFile prop', () => {
-  expect(mount(<FileUploadContainer hasUploadedFile />)).toMatchSnapshot();
+it('renders the FileUpload with hasFiles prop', () => {
+  expect(mount(<FileUploadContainer hasFiles />)).toMatchSnapshot();
 });