@digigov/react-core 1.0.0-88820b1e → 1.0.0-8ae63a77

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

@@ -1,5 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders the Blockquote with dense props 1`] = `
+<ForwardRef(Blockquote)
+  dense={true}
+>
+  <ForwardRef(Base)
+    as="blockquote"
+    className="govgr-blockquote--dense govgr-blockquote"
+  >
+    <blockquote
+      className="govgr-blockquote--dense govgr-blockquote"
+    >
+      hello
+    </blockquote>
+  </ForwardRef(Base)>
+</ForwardRef(Blockquote)>
+`;
+
 exports[`renders the Blockquote with no props 1`] = `
 <ForwardRef(Blockquote)>
   <ForwardRef(Base)

package/src/Blockquote/index.test.tsx

@@ -6,3 +6,7 @@ import Blockquote from '@digigov/react-core/Blockquote';
 it('renders the Blockquote with no props', () => {
   expect(mount(<Blockquote>hello</Blockquote>)).toMatchSnapshot();
 });
+
+it('renders the Blockquote with dense props', () => {
+  expect(mount(<Blockquote dense>hello</Blockquote>)).toMatchSnapshot();
+});

package/src/Blockquote/index.tsx

@@ -2,18 +2,27 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface BlockquoteProps extends BaseProps<'blockquote'> {}
+export interface BlockquoteProps extends BaseProps<'blockquote'> {
+  /**
+   * dense is optional.
+   * @value true Blockquote will be dense.
+   * @value false
+   * @default false
+   * */
+  dense?: boolean;
+}
 /**
  * Use Blockquote to differentiate a block of text from the content that surrounds it.
  */
 export const Blockquote = React.forwardRef<HTMLElement, BlockquoteProps>(
-  function Blockquote({ className, children, ...props }, ref) {
+  function Blockquote({ className, dense, children, ...props }, ref) {
     return (
       <Base
         as="blockquote"
         ref={ref}
         className={clsx(className, {
           'govgr-blockquote': true,
+          'govgr-blockquote--dense': dense,
         })}
         {...props}
       >

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

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

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

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

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

@@ -5,17 +5,14 @@ exports[`renders the BottomInfoContent with no props 1`] = `
   <ForwardRef(Grid)
     className="govgr-bottom-info__content"
     item={true}
-    lg={3}
-    md={3}
-    xl={3}
-    xs={3}
+    xs={12}
   >
     <ForwardRef(Base)
       as="div"
-      className="govgr-bottom-info__content xs:govgr-grid__col-span-3 md:govgr-grid__col-span-3 lg:govgr-grid__col-span-3 xl:govgr-grid__col-span-3"
+      className="govgr-bottom-info__content xs:govgr-grid__col-span-12"
     >
       <div
-        className="govgr-bottom-info__content xs:govgr-grid__col-span-3 md:govgr-grid__col-span-3 lg:govgr-grid__col-span-3 xl:govgr-grid__col-span-3"
+        className="govgr-bottom-info__content xs:govgr-grid__col-span-12"
       >
         hello
       </div>

package/src/BottomInfoContent/index.tsx

@@ -11,16 +11,13 @@ export const BottomInfoContent = React.forwardRef<
   HTMLDivElement,
   BottomInfoContentProps
 >(function BottomInfoContent(
-  { className, xs = 3, md = 3, lg = 3, xl = 3, children, ...props },
+  { className, xs = 12, children, ...props },
   ref
 ) {
   return (
     <Grid
       item
       xs={xs}
-      md={md}
-      lg={lg}
-      xl={xl}
       ref={ref}
       className={clsx(className, {
         'govgr-bottom-info__content': true,

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

@@ -21,6 +21,27 @@ exports[`renders the Card with callToActon props 1`] = `
 </ForwardRef(Card)>
 `;
 
+exports[`renders the Card with dense props 1`] = `
+<ForwardRef(Card)
+  dense={true}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-card--dense govgr-card"
+  >
+    <div
+      className="govgr-card--dense govgr-card"
+    >
+      <div
+        className="govgr-card__body"
+      >
+        hello
+      </div>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Card)>
+`;
+
 exports[`renders the Card with no props 1`] = `
 <ForwardRef(Card)>
   <ForwardRef(Base)

package/src/Card/index.test.tsx

@@ -10,6 +10,9 @@ it('renders the Card with no props', () => {
 it('renders the Card with callToActon props', () => {
   expect(mount(<Card callToAction>hello</Card>)).toMatchSnapshot();
 });
+it('renders the Card with dense props', () => {
+  expect(mount(<Card dense>hello</Card>)).toMatchSnapshot();
+});
 it('renders the Card with variant="border" props', () => {
   expect(mount(<Card variant="border">hello</Card>)).toMatchSnapshot();
 });

package/src/Card/index.tsx

@@ -30,6 +30,13 @@ export interface CardProps extends BaseProps<'div'> {
   * @value false
   */
   callToAction?: boolean;
+  /**
+   * dense is optional.
+   * @value true Card will be dense.
+   * @value false
+   * @default false
+   * */
+  dense?: boolean;
 }
 /**
  * Cards can be used to divide and organise interface content for better understandability and readability.
@@ -37,7 +44,7 @@ export interface CardProps extends BaseProps<'div'> {
  * Use Card as parent component to wrap CardHeading, CardContent and CartAction components
  */
 export const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(
-  { variant, borderColor, callToAction, className, children, ...props },
+  { variant, borderColor, callToAction, dense, className, children, ...props },
   ref
 ) {
   return (
@@ -46,6 +53,7 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(
       ref={ref}
       className={clsx(className, {
         'govgr-card': true,
+        'govgr-card--dense': dense,
         'govgr-card--border': variant === 'border',
         'govgr-card--border-top': variant === 'border-top',
         'govgr-card--divider': variant === 'divider',

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

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

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/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,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/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/DropdownContent/index.tsx

@@ -2,20 +2,33 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface DropdownContentProps extends BaseProps<'div'> {}
+export interface DropdownContentProps extends BaseProps<'div'> {
+  /**
+   * fullWidth is optional.
+   * If true, the dropdown content will be full width.
+   * @value true
+   * @value false
+   * @default true
+   */
+  fullWidth?: boolean;
+}
 /**
  * You should use DropdownContent component inside Dropdown component.
  */
 export const DropdownContent = React.forwardRef<
   HTMLDivElement,
   DropdownContentProps
->(function DropdownContent({ className, children, ...props }, ref) {
+>(function DropdownContent(
+  { className, children, fullWidth = true, ...props },
+  ref
+) {
   return (
     <Base
       as="div"
       ref={ref}
       className={clsx(className, {
         'govgr-dropdown__content': true,
+        'govgr-dropdown__content--full-width': fullWidth,
       })}
       {...props}
     >

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