@digigov/react-core 1.0.0-6b93ebf2 → 1.0.0-871b6be5

package/src/DateInputItem/index.tsx

@@ -52,8 +52,8 @@ export const DateInputItem = React.forwardRef<
           name={name}
           className={clsx({
             'govgr-input': true,
-            'govgr-input--width-2': width === 2,
-            'govgr-input--width-4': width === 4,
+            'govgr-input--width-2-char': width === 2,
+            'govgr-input--width-4-char': width === 4,
             'govgr-input--error': error,
           })}
           {...props}

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

@@ -12,26 +12,25 @@ exports[`renders the Drawer with \`open=true\` \`left=true\` props 1`] = `
     <div
       className="govgr-drawer--left govgr-drawer"
     >
-      <div
-        className="govgr-drawer__content"
-      >
-        <div
-          className="govgr--drawer__header-container"
-        >
-          <ForwardRef(Heading)>
-            <ForwardRef(Base)
-              as="h1"
+      <div>
+        <ForwardRef(Heading)>
+          <ForwardRef(Base)
+            as="h1"
+            className="govgr-heading-xl"
+          >
+            <h1
               className="govgr-heading-xl"
             >
-              <h1
-                className="govgr-heading-xl"
-              >
-                Menu
-              </h1>
-            </ForwardRef(Base)>
-          </ForwardRef(Heading)>
-          <ForwardRef(CloseIcon)
+              Menu
+            </h1>
+          </ForwardRef(Base)>
+        </ForwardRef(Heading)>
+        <CloseIcon
+          className="govgr--drawer__close-icon"
+        >
+          <ForwardRef(Icon)
             className="govgr--drawer__close-icon"
+            icon="close"
           >
             <ForwardRef(SvgIcon)
               className="govgr--drawer__close-icon govgr-svg-icon--close"
@@ -49,50 +48,52 @@ exports[`renders the Drawer with \`open=true\` \`left=true\` props 1`] = `
                   focusable="false"
                   viewBox="0 0 24 24"
                 >
-                  <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>
+                    <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(CloseIcon)>
-        </div>
-        <ForwardRef(List)>
-          <ForwardRef(Base)
-            as="ol"
+          </ForwardRef(Icon)>
+        </CloseIcon>
+      </div>
+      <ForwardRef(List)>
+        <ForwardRef(Base)
+          as="ol"
+          className="govgr-list"
+        >
+          <ol
             className="govgr-list"
           >
-            <ol
-              className="govgr-list"
-            >
-              <ForwardRef(ListItem)>
-                <ForwardRef(Base)
-                  as="li"
+            <ForwardRef(ListItem)>
+              <ForwardRef(Base)
+                as="li"
+                className="govgr-list__item"
+              >
+                <li
                   className="govgr-list__item"
                 >
-                  <li
-                    className="govgr-list__item"
-                  >
-                    Menu option 1
-                  </li>
-                </ForwardRef(Base)>
-              </ForwardRef(ListItem)>
-              <ForwardRef(ListItem)>
-                <ForwardRef(Base)
-                  as="li"
+                  Menu option 1
+                </li>
+              </ForwardRef(Base)>
+            </ForwardRef(ListItem)>
+            <ForwardRef(ListItem)>
+              <ForwardRef(Base)
+                as="li"
+                className="govgr-list__item"
+              >
+                <li
                   className="govgr-list__item"
                 >
-                  <li
-                    className="govgr-list__item"
-                  >
-                    Menu option 2
-                  </li>
-                </ForwardRef(Base)>
-              </ForwardRef(ListItem)>
-            </ol>
-          </ForwardRef(Base)>
-        </ForwardRef(List)>
-      </div>
+                  Menu option 2
+                </li>
+              </ForwardRef(Base)>
+            </ForwardRef(ListItem)>
+          </ol>
+        </ForwardRef(Base)>
+      </ForwardRef(List)>
     </div>
   </ForwardRef(Base)>
 </ForwardRef(Drawer)>

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>
   );
 });