@digigov/react-core 1.0.0-079f34f3d → 1.0.0-266e80f3

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,