@digigov/react-core 1.0.0-6b93ebf2 → 1.0.0-77ee23d9

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

@@ -2,15 +2,25 @@
 
 exports[`renders the ChipHeading with no props 1`] = `
 <ForwardRef(ChipHeading)>
-  <ForwardRef(Base)
-    as="h4"
-    className="govgr-chip--heading"
+  <ForwardRef(Heading)
+    element="h2"
+    size="xs"
   >
-    <h4
-      className="govgr-chip--heading"
+    <ForwardRef(Typography)
+      as="h2"
+      className="govgr-heading-xs"
     >
-      hello
-    </h4>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="h2"
+        className="govgr-heading-xs"
+      >
+        <h2
+          className="govgr-heading-xs"
+        >
+          hello
+        </h2>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(Heading)>
 </ForwardRef(ChipHeading)>
 `;

package/src/ChipHeading/index.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
+import Heading, { HeadingProps } from '@digigov/react-core/Heading';
 
-export interface ChipHeadingProps extends BaseProps<'h4'> {}
+export interface ChipHeadingProps extends HeadingProps {}
 /**
  * ChipHeading is used to provide header title above chips.
  * ChipHeading component must be wrapped inside FilterSelectedSection component.
@@ -10,18 +9,11 @@ export interface ChipHeadingProps extends BaseProps<'h4'> {}
 export const ChipHeading = React.forwardRef<
   HTMLHeadingElement,
   ChipHeadingProps
->(function ChipHeading({ className, children, ...props }, ref) {
+>(function ChipHeading({ children, ...props }, ref) {
   return (
-    <Base
-      as="h4"
-      ref={ref}
-      className={clsx(className, {
-        'govgr-chip--heading': true,
-      })}
-      {...props}
-    >
+    <Heading ref={ref} element="h2" size="xs" {...props}>
       {children}
-    </Base>
+    </Heading>
   );
 });
 

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

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the ChipKeyValue with no props 1`] = `
+<ForwardRef(ChipKeyValue)>
+  <ForwardRef(Base)
+    as="span"
+    className="govgr-chip__key-value"
+  >
+    <span
+      className="govgr-chip__key-value"
+    >
+      hello
+    </span>
+  </ForwardRef(Base)>
+</ForwardRef(ChipKeyValue)>
+`;

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

@@ -16,11 +16,11 @@ exports[`renders the CircularProgress 1`] = `
       viewBox="0 0 200 200"
     >
       <path
-        className="govgr-loader__circle govgr-loader__circle--1"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--1"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
       <path
-        className="govgr-loader__circle govgr-loader__circle--2"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--2"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
     </svg>
@@ -47,11 +47,11 @@ exports[`renders the CircularProgress with color=secondary and size lg props 1`]
       viewBox="0 0 200 200"
     >
       <path
-        className="govgr-loader__circle govgr-loader__circle--1"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--1"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
       <path
-        className="govgr-loader__circle govgr-loader__circle--2"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--2"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
     </svg>
@@ -78,11 +78,11 @@ exports[`renders the CircularProgress with color=secondary and size sm props 1`]
       viewBox="0 0 200 200"
     >
       <path
-        className="govgr-loader__circle govgr-loader__circle--1"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--1"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
       <path
-        className="govgr-loader__circle govgr-loader__circle--2"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--2"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
     </svg>
@@ -108,11 +108,11 @@ exports[`renders the CircularProgress with color=secondary prop 1`] = `
       viewBox="0 0 200 200"
     >
       <path
-        className="govgr-loader__circle govgr-loader__circle--1"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--1"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
       <path
-        className="govgr-loader__circle govgr-loader__circle--2"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--2"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
     </svg>
@@ -138,11 +138,11 @@ exports[`renders the CircularProgress with size lg 1`] = `
       viewBox="0 0 200 200"
     >
       <path
-        className="govgr-loader__circle govgr-loader__circle--1"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--1"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
       <path
-        className="govgr-loader__circle govgr-loader__circle--2"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--2"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
     </svg>
@@ -168,11 +168,11 @@ exports[`renders the CircularProgress with size sm 1`] = `
       viewBox="0 0 200 200"
     >
       <path
-        className="govgr-loader__circle govgr-loader__circle--1"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--1"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
       <path
-        className="govgr-loader__circle govgr-loader__circle--2"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--2"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
     </svg>

package/src/CircularProgress/index.tsx

@@ -49,11 +49,11 @@ export const CircularProgress = React.forwardRef<
       {...props}
     >
       <path
-        className="govgr-loader__circle govgr-loader__circle--1"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--1"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
       <path
-        className="govgr-loader__circle govgr-loader__circle--2"
+        className="govgr-circular-progress__circle govgr-circular-progress__circle--2"
         d="M26,99.551C26,55.478,60.246,27.5,99.85,27.5S174,55.478,174,99.551,139.455,172.5,99.85,172.5C60.273,172.473,26,143.6,26,99.551Z"
       />
     </Base>

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

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the CloseButton 1`] = `
+<ForwardRef(CloseButton)>
+  <ForwardRef(Button)
+    className="govgr-close-btn"
+    variant="link"
+  >
+    <ForwardRef(Base)
+      as="button"
+      className="govgr-close-btn govgr-link"
+      printHidden={true}
+    >
+      <button
+        className="govgr-close-btn govgr-link govgr-print-hidden"
+      >
+        <CloseIcon>
+          <ForwardRef(Icon)
+            icon="close"
+          >
+            <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)>
+`;

package/src/CloseButton/index.test.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import CloseButton from '@digigov/react-core/CloseButton';
+
+it('renders the CloseButton', () => {
+    expect(mount(<CloseButton />)).toMatchSnapshot();
+});

package/src/CloseButton/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import clsx from 'clsx';
+import Button, { ButtonProps } from '@digigov/react-core/Button';
+import { CloseIcon } from '@digigov/react-icons/CloseIcon';
+
+export interface CloseButtonProps extends ButtonProps {}
+/**
+ * CloseButton is an <button> element. It can be used be inside the FilterSection component.
+ */
+export const CloseButton = React.forwardRef<
+  HTMLButtonElement,
+  CloseButtonProps
+>(function CloseButton({ className, children, ...props }, ref) {
+  return (
+    <Button
+      variant="link"
+      className={clsx(className, {
+        'govgr-close-btn': true,
+      })}
+      ref={ref}
+      {...props}
+    >
+      {children}
+      <CloseIcon />
+    </Button>
+  );
+});
+
+export default CloseButton;

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

@@ -2,28 +2,24 @@
 
 exports[`renders the Container with cols={false} prop 1`] = `
 <ForwardRef(Container)
-  cols={false}
   fullWidth={true}
+  grid={false}
 >
-  <ForwardRef(Base)
-    as="div"
-    className="govgr-container--full-width"
+  <ForwardRef(Grid)
+    className="govgr-container--full-width govgr-container"
+    container={false}
   >
-    <div
-      className="govgr-container--full-width"
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-container--full-width govgr-container"
     >
-      <ForwardRef(Base)
-        as="div"
-        className=""
+      <div
+        className="govgr-container--full-width govgr-container"
       >
-        <div
-          className=""
-        >
-          hello
-        </div>
-      </ForwardRef(Base)>
-    </div>
-  </ForwardRef(Base)>
+        hello
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(Grid)>
 </ForwardRef(Container)>
 `;
 
@@ -31,48 +27,40 @@ exports[`renders the Container with fullWidth prop 1`] = `
 <ForwardRef(Container)
   fullWidth={true}
 >
-  <ForwardRef(Base)
-    as="div"
-    className="govgr-container--full-width"
+  <ForwardRef(Grid)
+    className="govgr-container--full-width govgr-container"
+    container={true}
   >
-    <div
-      className="govgr-container--full-width"
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-container--full-width govgr-container govgr-grid"
     >
-      <ForwardRef(Base)
-        as="div"
-        className="govgr-main-wrapper"
+      <div
+        className="govgr-container--full-width govgr-container govgr-grid"
       >
-        <div
-          className="govgr-main-wrapper"
-        >
-          hello
-        </div>
-      </ForwardRef(Base)>
-    </div>
-  </ForwardRef(Base)>
+        hello
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(Grid)>
 </ForwardRef(Container)>
 `;
 
 exports[`renders the Container with no props 1`] = `
 <ForwardRef(Container)>
-  <ForwardRef(Base)
-    as="div"
+  <ForwardRef(Grid)
     className="govgr-container"
+    container={true}
   >
-    <div
-      className="govgr-container"
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-container govgr-grid"
     >
-      <ForwardRef(Base)
-        as="div"
-        className="govgr-main-wrapper"
+      <div
+        className="govgr-container govgr-grid"
       >
-        <div
-          className="govgr-main-wrapper"
-        >
-          hello
-        </div>
-      </ForwardRef(Base)>
-    </div>
-  </ForwardRef(Base)>
+        hello
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(Grid)>
 </ForwardRef(Container)>
 `;

package/src/Container/index.tsx

@@ -1,21 +1,21 @@
 import React from 'react';
 import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
+import Grid, { GridProps } from '@digigov/react-core/Grid';
 
-export interface ContainerProps extends BaseProps<'div'> {
+export interface ContainerProps extends GridProps {
   /**
-   * grid is optional. Set to false if you don't need 3 columns layout.
-  * @value true
-  * @value false
-  * @default true
+   * grid is optional. Set to false if you don't need grid layout.
+   * @value true
+   * @value false
+   * @default true
    */
   grid?: boolean;
   /**
-  * fullWidth is optional. Set to true if you need a full width layout.
-  * @value true
-  * @value false
-  * @default false
-  */
+   * fullWidth is optional. Set to true if you need a full width layout.
+   * @value true
+   * @value false
+   * @default false
+   */
   fullWidth?: boolean;
 }
 /**
@@ -27,8 +27,9 @@ export const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
     ref
   ) {
     return (
-      <Base
-        as="div"
+      <Grid
+        container={grid}
+        spacing={grid ? {sm:12}: undefined}
         ref={ref}
         className={clsx(className, {
           'govgr-container': true,
@@ -36,15 +37,8 @@ export const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
         })}
         {...props}
       >
-        <Base
-          as="div"
-          className={clsx({
-            'govgr-main-wrapper': grid,
-          })}
-        >
-          {children}
-        </Base>
-      </Base>
+        {children}
+      </Grid>
     );
   }
 );

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

@@ -14,14 +14,14 @@ exports[`renders the DateInputItem with name and width===4 props 1`] = `
       hello
       <ForwardRef(Base)
         as="input"
-        className="govgr-input--width-4 govgr-input"
+        className="govgr-input--width-4-char govgr-input"
         inputMode="numeric"
         name="date-input"
         pattern="[0-9]*"
         type="text"
       >
         <input
-          className="govgr-input--width-4 govgr-input"
+          className="govgr-input--width-4-char govgr-input"
           inputMode="numeric"
           name="date-input"
           pattern="[0-9]*"
@@ -46,14 +46,14 @@ exports[`renders the DateInputItem with name prop 1`] = `
       hello
       <ForwardRef(Base)
         as="input"
-        className="govgr-input--width-2 govgr-input"
+        className="govgr-input--width-2-char govgr-input"
         inputMode="numeric"
         name="date-input"
         pattern="[0-9]*"
         type="text"
       >
         <input
-          className="govgr-input--width-2 govgr-input"
+          className="govgr-input--width-2-char govgr-input"
           inputMode="numeric"
           name="date-input"
           pattern="[0-9]*"
@@ -76,13 +76,13 @@ exports[`renders the DateInputItem with no props 1`] = `
       hello
       <ForwardRef(Base)
         as="input"
-        className="govgr-input--width-2 govgr-input"
+        className="govgr-input--width-2-char govgr-input"
         inputMode="numeric"
         pattern="[0-9]*"
         type="text"
       >
         <input
-          className="govgr-input--width-2 govgr-input"
+          className="govgr-input--width-2-char govgr-input"
           inputMode="numeric"
           pattern="[0-9]*"
           type="text"

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,13 +12,12 @@ 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)>
+      <div>
+        <ForwardRef(Heading)>
+          <ForwardRef(Typography)
+            as="h1"
+            className="govgr-heading-xl"
+          >
             <ForwardRef(Base)
               as="h1"
               className="govgr-heading-xl"
@@ -29,9 +28,14 @@ exports[`renders the Drawer with \`open=true\` \`left=true\` props 1`] = `
                 Menu
               </h1>
             </ForwardRef(Base)>
-          </ForwardRef(Heading)>
-          <ForwardRef(CloseIcon)
+          </ForwardRef(Typography)>
+        </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 +53,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)>