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

package/src/Aside/index.tsx

@@ -1,28 +1,31 @@
 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 AsideProps extends BaseProps<'aside'> {}
+export interface AsideProps extends GridProps {}
 /**
- * Use this inside the Content component for additional content
- * that will be shown on the left one third of the page
+ * Use this inside the Container component for additional content.
+ * that will be shown on the left one third of the page.
  */
 export const Aside = React.forwardRef<HTMLElement, AsideProps>(function Aside(
   { className, children, ...props },
   ref
 ) {
   return (
-    <Base
+    <Grid
+      item
+      xs={12}
+      md={4}
+      spacing={4}
       as="aside"
       ref={ref}
       className={clsx(className, {
         'govgr-aside': true,
-        'govgr-grid-column-one-third': true,
       })}
       {...props}
     >
       {children}
-    </Base>
+    </Grid>
   );
 });
 

package/src/Base/index.tsx

@@ -57,6 +57,8 @@ export type BaseProps<
     printHidden?: boolean;
     /**  printVisible is optional. When block, the component is displayed as block. When inline, the component is displayed as inline.*/
     printVisible?: 'block' | 'inline';
+    /** Components will be hidden at all screen sizes. */
+    hidden?: boolean;
     /** Components will be hidden from 'xs' screen size and up. */
     xsUpHidden?: boolean;
     /** Components will be hidden from 'sm' screen size and up. */
@@ -104,6 +106,7 @@ export const Base: BaseComponent = React.forwardRef(function Base<
     paddingRight,
     printHidden,
     printVisible,
+    hidden,
     xsUpHidden,
     smUpHidden,
     mdUpHidden,
@@ -143,6 +146,7 @@ export const Base: BaseComponent = React.forwardRef(function Base<
         'govgr-print-hidden': !!printHidden,
         'govgr-print-visible-block': printVisible === 'block',
         'govgr-print-visible-inline': printVisible === 'inline',
+        'govgr-hidden': !!hidden,
         'govgr-hidden-xs--up': !!xsUpHidden,
         'govgr-hidden-sm--up': !!smUpHidden,
         'govgr-hidden-md--up': !!mdUpHidden,

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,26 @@ 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}
+      spacing={
+        Object {
+          "sm": 12,
+        }
+      }
     >
-      <div
-        className="govgr-bottom-info govgr-container"
+      <ForwardRef(Base)
+        as="div"
+        className="govgr-bottom-info govgr-container govgr-gap-sm-12 govgr-grid"
       >
-        <ForwardRef(Base)
-          as="div"
-          className="govgr-main-wrapper"
+        <div
+          className="govgr-bottom-info govgr-container govgr-gap-sm-12 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,26 @@ 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}
+      spacing={
+        Object {
+          "sm": 12,
+        }
+      }
     >
-      <div
-        className="govgr-bottom-info__container govgr-container"
+      <ForwardRef(Base)
+        as="div"
+        className="govgr-bottom-info__container govgr-container govgr-gap-sm-12 govgr-grid"
       >
-        <ForwardRef(Base)
-          as="div"
-          className="govgr-main-wrapper"
+        <div
+          className="govgr-bottom-info__container govgr-container govgr-gap-sm-12 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/Button/__snapshots__/index.test.tsx.snap

@@ -137,6 +137,24 @@ exports[`renders the Button with color=warning with disabled=true 1`] = `
 </ForwardRef(Button)>
 `;
 
+exports[`renders the Button with dense=true 1`] = `
+<ForwardRef(Button)
+  dense={true}
+>
+  <ForwardRef(Base)
+    as="button"
+    className="govgr-btn-primary govgr-btn govgr-btn--dense"
+    printHidden={true}
+  >
+    <button
+      className="govgr-btn-primary govgr-btn govgr-btn--dense govgr-print-hidden"
+    >
+      hello
+    </button>
+  </ForwardRef(Base)>
+</ForwardRef(Button)>
+`;
+
 exports[`renders the Button with disabled=false 1`] = `
 <ForwardRef(Button)
   disabled={false}

package/src/Button/index.test.tsx

@@ -21,6 +21,9 @@ it('renders the Button with disabled=true', () => {
 it('renders the Button with disabled=false', () => {
   expect(mount(<Button disabled={false}>hello</Button>)).toMatchSnapshot();
 });
+it('renders the Button with dense=true', () => {
+  expect(mount(<Button dense={true}>hello</Button>)).toMatchSnapshot();
+});
 it('renders the Button with color=primary with disabled=true', () => {
   expect(
     mount(

package/src/Button/index.tsx

@@ -22,6 +22,13 @@ export interface ButtonProps extends BaseProps<'button'> {
   * @default 'button'
   */
   variant?: 'link' | 'button';
+  /**
+   * dense is optional.
+   * @value true Button will be dense.
+   * @value false
+   * @default false
+   */
+  dense?: boolean;
 }
 /**
  * Use the Button component to help users carry out an action.
@@ -31,6 +38,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     {
       color = 'primary',
       variant = 'button',
+      dense,
       disabled,
       printHidden = true,
       className,
@@ -48,6 +56,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         className={clsx(className, {
           'govgr-link': variant === 'link',
           'govgr-btn': variant === 'button',
+          'govgr-btn--dense': dense,
           'govgr-btn-primary': variant === 'button' && color === 'primary',
           'govgr-btn-secondary': variant === 'button' && color === 'secondary',
           'govgr-btn-warning': variant === 'button' && color === 'warning',

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/Checkbox/__snapshots__/index.test.tsx.snap

@@ -1,5 +1,81 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders the Checkbox with dense prop and CheckboxItems 1`] = `
+<ForwardRef(Checkbox)
+  dense={true}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-checkboxes--dense govgr-checkboxes"
+  >
+    <div
+      className="govgr-checkboxes--dense govgr-checkboxes"
+    >
+      <ForwardRef(CheckboxItem)>
+        <div
+          className="govgr-checkboxes__item"
+        >
+          <ForwardRef(LabelContainer)
+            className="govgr-checkboxes__label"
+          >
+            <ForwardRef(Base)
+              as="label"
+              className="govgr-checkboxes__label govgr-label"
+            >
+              <label
+                className="govgr-checkboxes__label govgr-label"
+              >
+                This is item 1
+                <ForwardRef(Base)
+                  as="input"
+                  className="govgr-checkboxes__input"
+                  type="checkbox"
+                >
+                  <input
+                    className="govgr-checkboxes__input"
+                    type="checkbox"
+                  />
+                </ForwardRef(Base)>
+              </label>
+            </ForwardRef(Base)>
+          </ForwardRef(LabelContainer)>
+        </div>
+      </ForwardRef(CheckboxItem)>
+      <ForwardRef(CheckboxItem)>
+        <div
+          className="govgr-checkboxes__item"
+        >
+          <ForwardRef(LabelContainer)
+            className="govgr-checkboxes__label"
+          >
+            <ForwardRef(Base)
+              as="label"
+              className="govgr-checkboxes__label govgr-label"
+            >
+              <label
+                className="govgr-checkboxes__label govgr-label"
+              >
+                This is item 2
+                <ForwardRef(Base)
+                  as="input"
+                  className="govgr-checkboxes__input"
+                  type="checkbox"
+                >
+                  <input
+                    className="govgr-checkboxes__input"
+                    type="checkbox"
+                  />
+                </ForwardRef(Base)>
+              </label>
+            </ForwardRef(Base)>
+          </ForwardRef(LabelContainer)>
+        </div>
+      </ForwardRef(CheckboxItem)>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Checkbox)>
+`;
+
 exports[`renders the Checkbox with layout=horizontal and CheckboxItems 1`] = `
 <ForwardRef(Checkbox)
   layout="horizontal"

package/src/Checkbox/index.test.tsx

@@ -27,3 +27,13 @@ it('renders the Checkbox with layout=horizontal and CheckboxItems', () => {
     )
   ).toMatchSnapshot();
 });
+it('renders the Checkbox with dense prop and CheckboxItems', () => {
+  expect(
+    mount(
+      <Checkbox dense>
+        <CheckboxItem>This is item 1</CheckboxItem>
+        <CheckboxItem>This is item 2</CheckboxItem>
+      </Checkbox>
+    )
+  ).toMatchSnapshot();
+});

package/src/Checkbox/index.tsx

@@ -12,6 +12,13 @@ export interface CheckboxProps extends BaseProps<'div'> {
    * @default 'vertical'
    */
   layout?: 'horizontal' | 'vertical';
+  /**
+   * dense is optional.
+   * @value true Checkboxes will be dense.
+   * @value false
+   * @default false
+   */
+  dense?: boolean;
 }
 /**
  * Details for the Checkbox.
@@ -19,7 +26,7 @@ export interface CheckboxProps extends BaseProps<'div'> {
  * It takes CheckboxItem as children
  */
 export const Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(
-  function Checkbox({ layout, className, children, ...props }, ref) {
+  function Checkbox({ layout, dense, className, children, ...props }, ref) {
     return (
       <Base
         as="div"
@@ -27,6 +34,7 @@ export const Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(
         className={clsx(className, {
           'govgr-checkboxes': true,
           'govgr-checkboxes--horizontal': layout=== 'horizontal',
+          'govgr-checkboxes--dense': dense,
         })}
         {...props}
       >

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>