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

package/registry.js

@@ -253,7 +253,9 @@ var _digigov_react_core_Hidden = _interopRequireWildcard(require("@digigov/react
 
 var _digigov_react_core_Hint = _interopRequireWildcard(require("@digigov/react-core/Hint"));
 
-var _digigov_react_core_Icon = _interopRequireWildcard(require("@digigov/react-core/Icon"));
+var _digigov_react_core_ImageLogo = _interopRequireWildcard(require("@digigov/react-core/ImageLogo"));
+
+var _digigov_react_core_ImageLogoSet = _interopRequireWildcard(require("@digigov/react-core/ImageLogoSet"));
 
 var _digigov_react_core = _interopRequireWildcard(require("@digigov/react-core"));
 
@@ -644,7 +646,8 @@ var _default = {
   '@digigov/react-core/HellenicRepublicLogo/logo-inverted-en': lazyImport(_digigov_react_core_HellenicRepublicLogo_logo_inverted_en),
   '@digigov/react-core/Hidden': lazyImport(_digigov_react_core_Hidden),
   '@digigov/react-core/Hint': lazyImport(_digigov_react_core_Hint),
-  '@digigov/react-core/Icon': lazyImport(_digigov_react_core_Icon),
+  '@digigov/react-core/ImageLogo': lazyImport(_digigov_react_core_ImageLogo),
+  '@digigov/react-core/ImageLogoSet': lazyImport(_digigov_react_core_ImageLogoSet),
   '@digigov/react-core': lazyImport(_digigov_react_core),
   '@digigov/react-core/KitchenSinkAllComponents': lazyImport(_digigov_react_core_KitchenSinkAllComponents),
   '@digigov/react-core/KitchenSinkCard': lazyImport(_digigov_react_core_KitchenSinkCard),

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

@@ -4,10 +4,10 @@ exports[`renders the Accordion with no props 1`] = `
 <ForwardRef(Accordion)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-accordion"
+    className="govgr-accordion--border-top govgr-accordion"
   >
     <div
-      className="govgr-accordion"
+      className="govgr-accordion--border-top govgr-accordion"
     >
       hello
     </div>

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

@@ -2,19 +2,29 @@
 
 exports[`renders the AdminContainer with no props 1`] = `
 <ForwardRef(AdminContainer)>
-  <ForwardRef(Base)
-    as="div"
-    className="govgr-admin-width-container"
+  <ForwardRef(Container)
+    fullWidth={true}
+    grid={false}
   >
-    <div
-      className="govgr-admin-width-container"
+    <ForwardRef(Grid)
+      className="govgr-container--full-width govgr-container"
+      container={false}
     >
-      <div
-        className="govgr-admin-main-wrapper"
+      <ForwardRef(Base)
+        as="div"
+        className="govgr-container--full-width govgr-container"
       >
-        hello
-      </div>
-    </div>
-  </ForwardRef(Base)>
+        <div
+          className="govgr-container--full-width govgr-container"
+        >
+          <div
+            className="govgr-admin-main-wrapper"
+          >
+            hello
+          </div>
+        </div>
+      </ForwardRef(Base)>
+    </ForwardRef(Grid)>
+  </ForwardRef(Container)>
 </ForwardRef(AdminContainer)>
 `;

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

@@ -2,15 +2,24 @@
 
 exports[`renders the Aside with no props 1`] = `
 <ForwardRef(Aside)>
-  <ForwardRef(Base)
+  <ForwardRef(Grid)
     as="aside"
-    className="govgr-aside govgr-grid-column-one-third"
+    className="govgr-aside"
+    item={true}
+    md={4}
+    spacing={4}
+    xs={12}
   >
-    <aside
-      className="govgr-aside govgr-grid-column-one-third"
+    <ForwardRef(Base)
+      as="aside"
+      className="govgr-aside xs:govgr-grid__col-span-12 md:govgr-grid__col-span-4"
     >
-      hello
-    </aside>
-  </ForwardRef(Base)>
+      <aside
+        className="govgr-aside xs:govgr-grid__col-span-12 md:govgr-grid__col-span-4"
+      >
+        hello
+      </aside>
+    </ForwardRef(Base)>
+  </ForwardRef(Grid)>
 </ForwardRef(Aside)>
 `;

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