@digigov/react-core 1.0.0-871b6be5 → 1.0.0-8ae63a77

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

@@ -5,25 +5,21 @@ exports[`renders the Container with cols={false} prop 1`] = `
   fullWidth={true}
   grid={false}
 >
-  <ForwardRef(Base)
-    as="div"
+  <ForwardRef(Grid)
     className="govgr-container--full-width govgr-container"
+    container={false}
   >
-    <div
+    <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"
+  <ForwardRef(Grid)
     className="govgr-container--full-width govgr-container"
+    container={true}
   >
-    <div
-      className="govgr-container--full-width govgr-container"
+    <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,16 +37,8 @@ export const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
         })}
         {...props}
       >
-        {grid === true ?
-          <div
-            className={clsx({
-              'govgr-main-wrapper': grid,
-            })}
-          >
-            {children}
-          </div> :
-          <>{children}</>}
-      </Base>
+        {children}
+      </Grid>
     );
   }
 );

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

@@ -14,16 +14,21 @@ exports[`renders the Drawer with \`open=true\` \`left=true\` props 1`] = `
     >
       <div>
         <ForwardRef(Heading)>
-          <ForwardRef(Base)
+          <ForwardRef(Typography)
             as="h1"
             className="govgr-heading-xl"
           >
-            <h1
+            <ForwardRef(Base)
+              as="h1"
               className="govgr-heading-xl"
             >
-              Menu
-            </h1>
-          </ForwardRef(Base)>
+              <h1
+                className="govgr-heading-xl"
+              >
+                Menu
+              </h1>
+            </ForwardRef(Base)>
+          </ForwardRef(Typography)>
         </ForwardRef(Heading)>
         <CloseIcon
           className="govgr--drawer__close-icon"

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

@@ -4,10 +4,10 @@ exports[`renders the DropdownContent with no props 1`] = `
 <ForwardRef(DropdownContent)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-dropdown__content"
+    className="govgr-dropdown__content--full-width govgr-dropdown__content"
   >
     <div
-      className="govgr-dropdown__content"
+      className="govgr-dropdown__content--full-width govgr-dropdown__content"
     >
       hello
     </div>

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

@@ -5,25 +5,21 @@ exports[`renders the FooterContainer with no props 1`] = `
   <ForwardRef(Container)
     grid={false}
   >
-    <ForwardRef(Base)
-      as="div"
+    <ForwardRef(Grid)
       className="govgr-container"
+      container={false}
     >
-      <div
+      <ForwardRef(Base)
+        as="div"
         className="govgr-container"
       >
-        <ForwardRef(Base)
-          as="div"
-          className=""
+        <div
+          className="govgr-container"
         >
-          <div
-            className=""
-          >
-            hello
-          </div>
-        </ForwardRef(Base)>
-      </div>
-    </ForwardRef(Base)>
+          hello
+        </div>
+      </ForwardRef(Base)>
+    </ForwardRef(Grid)>
   </ForwardRef(Container)>
 </ForwardRef(FooterContainer)>
 `;

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

@@ -7,16 +7,21 @@ exports[`renders the FooterHeading with no props 1`] = `
     element="h2"
     size="sm"
   >
-    <ForwardRef(Base)
+    <ForwardRef(Typography)
       as="h2"
       className="govgr-footer__heading govgr-heading-sm"
     >
-      <h2
+      <ForwardRef(Base)
+        as="h2"
         className="govgr-footer__heading govgr-heading-sm"
       >
-        hello
-      </h2>
-    </ForwardRef(Base)>
+        <h2
+          className="govgr-footer__heading govgr-heading-sm"
+        >
+          hello
+        </h2>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
   </ForwardRef(Heading)>
 </ForwardRef(FooterHeading)>
 `;
@@ -30,16 +35,21 @@ exports[`renders the FooterHeading with size=m 1`] = `
     element="h2"
     size="md"
   >
-    <ForwardRef(Base)
+    <ForwardRef(Typography)
       as="h2"
       className="govgr-footer__heading govgr-heading-md"
     >
-      <h2
+      <ForwardRef(Base)
+        as="h2"
         className="govgr-footer__heading govgr-heading-md"
       >
-        hello
-      </h2>
-    </ForwardRef(Base)>
+        <h2
+          className="govgr-footer__heading govgr-heading-md"
+        >
+          hello
+        </h2>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
   </ForwardRef(Heading)>
 </ForwardRef(FooterHeading)>
 `;
@@ -53,16 +63,21 @@ exports[`renders the FooterHeading with size=s 1`] = `
     element="h2"
     size="sm"
   >
-    <ForwardRef(Base)
+    <ForwardRef(Typography)
       as="h2"
       className="govgr-footer__heading govgr-heading-sm"
     >
-      <h2
+      <ForwardRef(Base)
+        as="h2"
         className="govgr-footer__heading govgr-heading-sm"
       >
-        hello
-      </h2>
-    </ForwardRef(Base)>
+        <h2
+          className="govgr-footer__heading govgr-heading-sm"
+        >
+          hello
+        </h2>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
   </ForwardRef(Heading)>
 </ForwardRef(FooterHeading)>
 `;

package/src/Grid/index.tsx

@@ -3,54 +3,87 @@ import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
 type GridValues = 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type SpacingValues = 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 11 | 12;
+type SpacingMediaValues = {
+  xs?: SpacingValues;
+  sm?: SpacingValues;
+  md?: SpacingValues;
+  lg?: SpacingValues;
+  xl?: SpacingValues;
+};
 export interface GridProps extends BaseProps<'div' | 'aside' | 'main'> {
   /**
-  * @value true
-  * @value false
-  * @default false
-  */
-  container?: boolean
+   * If true, the component will have the flex container behavior. You should be wrapping items with a container.
+   * @value true
+   * @value false
+   * @default false
+   */
+  container?: boolean;
   /**
-  * @value true
-  * @value false
-  * @default true
-  */
-  item?: boolean
+   * @value true
+   * @value false
+   * @default true
+   */
+  item?: boolean;
   /**
-  * @value true
-  * @value false
-  */
-  inline?: boolean
-  /**
-  * @value 1
-  * @value 2
-  * @value 4
-  * @value 6
-  * @value 8
-  * @value 10
-  * @value 12
-  */
-  spacing?: 1 | 2 | 4 | 6 | 8 | 10 | 12
+   * @value true
+   * @value false
+   */
+  inline?: boolean;
   /**
+   * Defines the space between the type item components. It can only be used on a type container component.
+   * @value 1
+   * @value 2
+   * @value 4
+   * @value 6
+   * @value 8
+   * @value 10
+   * @value 12
+   * @value object
+   * @default undefined
+   */
+  spacing?: SpacingValues | SpacingMediaValues;
 
-  */
-  xs?: GridValues
   /**
-
-  */
-  sm?: GridValues
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12).
+   * If 'auto', the grid item's width matches its content.
+   * If it's not set, the prop is ignored.
+   * The value is applied for all the screen sizes with the lowest priority.
+   */
+  xs?: GridValues;
   /**
-
-  */
-  md?: GridValues
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12).
+   * If 'auto', the grid item's width matches its content.
+   * If it's not set, the prop is ignored.
+   * The value is applied for the sm breakpoint and wider screens if not overridden.
+   */
+  sm?: GridValues;
   /**
-
-  */
-  lg?: GridValues
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12).
+   * If 'auto', the grid item's width matches its content.
+   * If it's not set, the prop is ignored.
+   * The value is applied for the md breakpoint and wider screens if not overridden.
+   */
+  md?: GridValues;
   /**
-
-  */
-  xl?: GridValues
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12).
+   * If 'auto', the grid item's width matches its content.
+   * If it's not set, the prop is ignored.
+   * The value is applied for the lg breakpoint and wider screens if not overridden.
+   */
+  lg?: GridValues;
+  /**
+   * If a number, it sets the number of columns the grid item uses.
+   * It can't be greater than the total number of columns of the container (12).
+   * If 'auto', the grid item's width matches its content.
+   * If it's not set, the prop is ignored.
+   * The value is applied for the xl breakpoint and wider screens.
+   */
+  xl?: GridValues;
 }
 /**
  * Grid is used to arrange other components in complex grid configurations of rows and columns.
@@ -80,7 +113,17 @@ export const Grid = React.forwardRef<HTMLElement, GridProps>(function Grid(
       className={clsx(className, {
         'govgr-grid': container,
         'govgr-grid-inline': container && inline,
-        [`govgr-gap-${spacing}`]: container &&  spacing !== undefined,
+        [`govgr-gap-${spacing}`]: container && typeof spacing === 'number',
+        [`govgr-gap-xs-${(spacing as SpacingMediaValues)?.xs}`]:
+          container && (spacing as SpacingMediaValues)?.xs !== undefined,
+        [`govgr-gap-sm-${(spacing as SpacingMediaValues)?.sm}`]:
+          container && (spacing as SpacingMediaValues)?.sm !== undefined,
+        [`govgr-gap-md-${(spacing as SpacingMediaValues)?.md}`]:
+          container && (spacing as SpacingMediaValues)?.md !== undefined,
+        [`govgr-gap-lg-${(spacing as SpacingMediaValues)?.lg}`]:
+          container && (spacing as SpacingMediaValues)?.lg !== undefined,
+        [`govgr-gap-xl-${(spacing as SpacingMediaValues)?.xl}`]:
+          container && (spacing as SpacingMediaValues)?.xl !== undefined,
         [`xs:govgr-grid__col-span-${xs}`]: item && xs !== undefined,
         [`sm:govgr-grid__col-span-${sm}`]: item && sm !== undefined,
         [`md:govgr-grid__col-span-${md}`]: item && md !== undefined,