@digigov/react-core 1.0.0-079f34f3d → 1.0.0-21c8c3dc

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

@@ -0,0 +1,118 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Hint with  variants=[light, dark] and src props 1`] = `
+<ForwardRef(ImageLogoSet)
+  src="logo.png"
+  variants={
+    Array [
+      "light",
+      "dark",
+    ]
+  }
+>
+  <ForwardRef(ImageLogo)
+    key="light"
+    src="logo--light.png"
+    variant="light"
+  >
+    <ForwardRef(Base)
+      as="img"
+      className="govgr-image-logo--light"
+      printHidden={true}
+      src="logo--light.png"
+    >
+      <img
+        className="govgr-image-logo--light govgr-print-hidden"
+        src="logo--light.png"
+      />
+    </ForwardRef(Base)>
+  </ForwardRef(ImageLogo)>
+  <ForwardRef(ImageLogo)
+    key="dark"
+    src="logo--dark.png"
+    variant="dark"
+  >
+    <ForwardRef(Base)
+      as="img"
+      className="govgr-image-logo--dark"
+      printHidden={true}
+      src="logo--dark.png"
+    >
+      <img
+        className="govgr-image-logo--dark govgr-print-hidden"
+        src="logo--dark.png"
+      />
+    </ForwardRef(Base)>
+  </ForwardRef(ImageLogo)>
+</ForwardRef(ImageLogoSet)>
+`;
+
+exports[`renders the Hint with  variants=[light] and src props 1`] = `
+<ForwardRef(ImageLogoSet)
+  src="logo.png"
+  variants={
+    Array [
+      "light",
+    ]
+  }
+>
+  <ForwardRef(ImageLogo)
+    key="light"
+    src="logo--light.png"
+    variant="light"
+  >
+    <ForwardRef(Base)
+      as="img"
+      className="govgr-image-logo--light"
+      printHidden={true}
+      src="logo--light.png"
+    >
+      <img
+        className="govgr-image-logo--light govgr-print-hidden"
+        src="logo--light.png"
+      />
+    </ForwardRef(Base)>
+  </ForwardRef(ImageLogo)>
+</ForwardRef(ImageLogoSet)>
+`;
+
+exports[`renders the Hint with src prop 1`] = `
+<ForwardRef(ImageLogoSet)
+  src="logo.png"
+>
+  <ForwardRef(ImageLogo)
+    key="dark"
+    src="logo--dark.png"
+    variant="dark"
+  >
+    <ForwardRef(Base)
+      as="img"
+      className="govgr-image-logo--dark"
+      printHidden={true}
+      src="logo--dark.png"
+    >
+      <img
+        className="govgr-image-logo--dark govgr-print-hidden"
+        src="logo--dark.png"
+      />
+    </ForwardRef(Base)>
+  </ForwardRef(ImageLogo)>
+  <ForwardRef(ImageLogo)
+    key="light"
+    src="logo--light.png"
+    variant="light"
+  >
+    <ForwardRef(Base)
+      as="img"
+      className="govgr-image-logo--light"
+      printHidden={true}
+      src="logo--light.png"
+    >
+      <img
+        className="govgr-image-logo--light govgr-print-hidden"
+        src="logo--light.png"
+      />
+    </ForwardRef(Base)>
+  </ForwardRef(ImageLogo)>
+</ForwardRef(ImageLogoSet)>
+`;

package/src/ImageLogoSet/index.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import ImageLogoSet from '@digigov/react-core/ImageLogoSet';
+
+it('renders the Hint with src prop', () => {
+  expect(mount(<ImageLogoSet src='logo.png' />)).toMatchSnapshot();
+});
+
+
+it('renders the Hint with  variants=[light] and src props', () => {
+  expect(mount(<ImageLogoSet variants={['light']} src='logo.png' />)).toMatchSnapshot();
+});
+
+it('renders the Hint with  variants=[light, dark] and src props', () => {
+  expect(mount(<ImageLogoSet variants={['light', 'dark']} src='logo.png' />)).toMatchSnapshot();
+});

package/src/ImageLogoSet/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { BaseProps } from '@digigov/react-core/Base';
+import ImageLogo from '@digigov/react-core/ImageLogo';
+
+export interface ImageLogoSet extends BaseProps<'img'> {
+  /**
+   * src is optional.
+   * src is used to display images.
+   */
+  src?: string;
+  /**
+   * variant is optional.
+   * variant is used to display images depending the theme (dark, light).
+   */
+  variants?: Array<"dark" | "light">;
+}
+/**
+ * ImageLogoSet is used as image inverter depending the theme (dark, light).
+ * This component can't have children.
+ */
+export const ImageLogoSet = React.forwardRef<
+  HTMLImageElement,
+  ImageLogoSet
+>(function ImageLogoSet({ lang, src, variants = ['dark', 'light'], className, children, ...props }, ref) {
+  return (
+    <>
+      {variants.map((variant) => {
+        const imageSrc = src?.replace(/(\.[^\.]+)$/, `--${variant}$1`);
+        return <ImageLogo key={variant} ref={ref} variant={variant} src={imageSrc} {...props} />
+      })}
+    </>
+  )
+    ;
+});
+
+export default ImageLogoSet;

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

@@ -2,17 +2,26 @@
 
 exports[`renders the Main with no props 1`] = `
 <ForwardRef(Main)>
-  <ForwardRef(Base)
+  <ForwardRef(Grid)
     as="main"
-    className="govgr-grid-column-two-thirds"
+    className="govgr-main"
     id="main-content"
+    item={true}
+    md={8}
+    xs={12}
   >
-    <main
-      className="govgr-grid-column-two-thirds"
+    <ForwardRef(Base)
+      as="main"
+      className="govgr-main xs:govgr-grid__col-span-12 md:govgr-grid__col-span-8"
       id="main-content"
     >
-      hello
-    </main>
-  </ForwardRef(Base)>
+      <main
+        className="govgr-main xs:govgr-grid__col-span-12 md:govgr-grid__col-span-8"
+        id="main-content"
+      >
+        hello
+      </main>
+    </ForwardRef(Base)>
+  </ForwardRef(Grid)>
 </ForwardRef(Main)>
 `;

package/src/Main/index.tsx

@@ -1,27 +1,30 @@
 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 MainProps extends BaseProps<'main'> {}
+export interface MainProps extends GridProps {}
 /**
- * Use this inside Content component for placing the main content of the page
+ * Use this inside Container component for placing the main content of the page.
  */
 export const Main = React.forwardRef<HTMLElement, MainProps>(function Main(
   { className, children, id = 'main-content', ...props },
   ref
 ) {
   return (
-    <Base
+    <Grid
+      item
+      xs={12}
+      md={8}
       as="main"
       id={id}
       ref={ref}
       className={clsx(className, {
-        'govgr-grid-column-two-thirds': true,
+        'govgr-main': true,
       })}
       {...props}
     >
       {children}
-    </Base>
+    </Grid>
   );
 });
 

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

@@ -7,17 +7,23 @@ exports[`renders the ModalHeading with no props 1`] = `
     marginBottom={0}
     size="md"
   >
-    <ForwardRef(Base)
+    <ForwardRef(Typography)
       as="h2"
       className="govgr-heading-md"
       marginBottom={0}
     >
-      <h2
-        className="govgr-heading-md govgr-mb-0"
+      <ForwardRef(Base)
+        as="h2"
+        className="govgr-heading-md"
+        marginBottom={0}
       >
-        hello
-      </h2>
-    </ForwardRef(Base)>
+        <h2
+          className="govgr-heading-md govgr-mb-0"
+        >
+          hello
+        </h2>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
   </ForwardRef(Heading)>
 </ForwardRef(ModalHeading)>
 `;

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

@@ -13,26 +13,24 @@ exports[`renders the NavMenuContainer with no props 1`] = `
     >
       <ForwardRef(Container)
         grid={true}
+        spacing={4}
       >
-        <ForwardRef(Base)
-          as="div"
+        <ForwardRef(Grid)
           className="govgr-container"
+          container={true}
+          spacing={4}
         >
-          <div
-            className="govgr-container"
+          <ForwardRef(Base)
+            as="div"
+            className="govgr-container govgr-gap-4 govgr-grid"
           >
-            <ForwardRef(Base)
-              as="div"
-              className="govgr-main-wrapper"
+            <div
+              className="govgr-container govgr-gap-4 govgr-grid"
             >
-              <div
-                className="govgr-main-wrapper"
-              >
-                hello
-              </div>
-            </ForwardRef(Base)>
-          </div>
-        </ForwardRef(Base)>
+              hello
+            </div>
+          </ForwardRef(Base)>
+        </ForwardRef(Grid)>
       </ForwardRef(Container)>
     </div>
   </ForwardRef(Base)>

package/src/NavMenuContainer/index.tsx

@@ -45,6 +45,7 @@ export const NavMenuContainer = React.forwardRef<
     >
       <Container
         grid={layout === 'horizontal'}
+        spacing={4}
         ref={ref}
         className={className}
         {...props}

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

@@ -5,14 +5,16 @@ exports[`renders the NavMenuContainerContent with no props 1`] = `
   <ForwardRef(Grid)
     className="govgr-nav-menu__content"
     item={true}
-    md={2}
+    sm={8}
+    spacing={2}
+    xs={12}
   >
     <ForwardRef(Base)
       as="div"
-      className="govgr-nav-menu__content md:govgr-grid__col-span-2"
+      className="govgr-nav-menu__content xs:govgr-grid__col-span-12 sm:govgr-grid__col-span-8"
     >
       <div
-        className="govgr-nav-menu__content md:govgr-grid__col-span-2"
+        className="govgr-nav-menu__content xs:govgr-grid__col-span-12 sm:govgr-grid__col-span-8"
       >
         hello
       </div>

package/src/NavMenuContent/index.tsx

@@ -14,7 +14,7 @@ export const NavMenuContent = React.forwardRef<
   NavMenuContentProps
 >(function NavMenuContent({ className, children, ...props }, ref) {
   return (
-    <Grid item md={2} ref={ref} className={clsx(className, {
+    <Grid item xs={12} sm={8} spacing={2} ref={ref} className={clsx(className, {
       'govgr-nav-menu__content': true
     })} {...props}>
       {children}

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

@@ -5,14 +5,15 @@ exports[`renders the NavMenuTitle with no props 1`] = `
   <ForwardRef(Grid)
     className="govgr-nav-menu__title"
     item={true}
-    md={1}
+    sm={4}
+    xs={12}
   >
     <ForwardRef(Base)
       as="div"
-      className="govgr-nav-menu__title md:govgr-grid__col-span-1"
+      className="govgr-nav-menu__title xs:govgr-grid__col-span-12 sm:govgr-grid__col-span-4"
     >
       <div
-        className="govgr-nav-menu__title md:govgr-grid__col-span-1"
+        className="govgr-nav-menu__title xs:govgr-grid__col-span-12 sm:govgr-grid__col-span-4"
       >
         <ForwardRef(Heading)
           className="govgr-nav-menu__title-heading"

package/src/NavMenuTitle/index.tsx

@@ -17,7 +17,8 @@ export const NavMenuTitle = React.forwardRef<
   return (
     <Grid
       item
-      md={1}
+      xs={12}
+      sm={4}
       ref={ref}
       className={clsx(className, {
         'govgr-nav-menu__title': true,

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

@@ -15,17 +15,23 @@ exports[`renders the NotificationBannerHeader with no props 1`] = `
         marginBottom={0}
         size="sm"
       >
-        <ForwardRef(Base)
+        <ForwardRef(Typography)
           as="h2"
           className="govgr-notification-banner__title govgr-heading-sm"
           marginBottom={0}
         >
-          <h2
-            className="govgr-notification-banner__title govgr-heading-sm govgr-mb-0"
+          <ForwardRef(Base)
+            as="h2"
+            className="govgr-notification-banner__title govgr-heading-sm"
+            marginBottom={0}
           >
-            hello
-          </h2>
-        </ForwardRef(Base)>
+            <h2
+              className="govgr-notification-banner__title govgr-heading-sm govgr-mb-0"
+            >
+              hello
+            </h2>
+          </ForwardRef(Base)>
+        </ForwardRef(Typography)>
       </ForwardRef(Heading)>
     </div>
   </ForwardRef(Base)>

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

@@ -7,16 +7,21 @@ exports[`renders the NotificationBannerHeading with no props 1`] = `
     element="h3"
     size="md"
   >
-    <ForwardRef(Base)
+    <ForwardRef(Typography)
       as="h3"
       className="govgr-notification-banner__heading govgr-heading-md"
     >
-      <h3
+      <ForwardRef(Base)
+        as="h3"
         className="govgr-notification-banner__heading govgr-heading-md"
       >
-        hello
-      </h3>
-    </ForwardRef(Base)>
+        <h3
+          className="govgr-notification-banner__heading govgr-heading-md"
+        >
+          hello
+        </h3>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
   </ForwardRef(Heading)>
 </ForwardRef(NotificationBannerHeading)>
 `;

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

@@ -3,16 +3,21 @@
 exports[`renders the PageTitleHeading with no props 1`] = `
 <ForwardRef(PageTitleHeading)>
   <ForwardRef(Heading)>
-    <ForwardRef(Base)
+    <ForwardRef(Typography)
       as="h1"
       className="govgr-heading-xl"
     >
-      <h1
+      <ForwardRef(Base)
+        as="h1"
         className="govgr-heading-xl"
       >
-        hello
-      </h1>
-    </ForwardRef(Base)>
+        <h1
+          className="govgr-heading-xl"
+        >
+          hello
+        </h1>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
   </ForwardRef(Heading)>
 </ForwardRef(PageTitleHeading)>
 `;
@@ -24,16 +29,21 @@ exports[`renders the PageTitleHeading with size=l 1`] = `
   <ForwardRef(Heading)
     size="lg"
   >
-    <ForwardRef(Base)
+    <ForwardRef(Typography)
       as="h2"
       className="govgr-heading-lg"
     >
-      <h2
+      <ForwardRef(Base)
+        as="h2"
         className="govgr-heading-lg"
       >
-        hello
-      </h2>
-    </ForwardRef(Base)>
+        <h2
+          className="govgr-heading-lg"
+        >
+          hello
+        </h2>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
   </ForwardRef(Heading)>
 </ForwardRef(PageTitleHeading)>
 `;
@@ -45,16 +55,21 @@ exports[`renders the PageTitleHeading with size=m 1`] = `
   <ForwardRef(Heading)
     size="md"
   >
-    <ForwardRef(Base)
+    <ForwardRef(Typography)
       as="h3"
       className="govgr-heading-md"
     >
-      <h3
+      <ForwardRef(Base)
+        as="h3"
         className="govgr-heading-md"
       >
-        hello
-      </h3>
-    </ForwardRef(Base)>
+        <h3
+          className="govgr-heading-md"
+        >
+          hello
+        </h3>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
   </ForwardRef(Heading)>
 </ForwardRef(PageTitleHeading)>
 `;
@@ -66,16 +81,21 @@ exports[`renders the PageTitleHeading with size=s 1`] = `
   <ForwardRef(Heading)
     size="sm"
   >
-    <ForwardRef(Base)
+    <ForwardRef(Typography)
       as="h4"
       className="govgr-heading-sm"
     >
-      <h4
+      <ForwardRef(Base)
+        as="h4"
         className="govgr-heading-sm"
       >
-        hello
-      </h4>
-    </ForwardRef(Base)>
+        <h4
+          className="govgr-heading-sm"
+        >
+          hello
+        </h4>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
   </ForwardRef(Heading)>
 </ForwardRef(PageTitleHeading)>
 `;
@@ -87,16 +107,21 @@ exports[`renders the PageTitleHeading with size=xl 1`] = `
   <ForwardRef(Heading)
     size="xl"
   >
-    <ForwardRef(Base)
+    <ForwardRef(Typography)
       as="h1"
       className="govgr-heading-xl"
     >
-      <h1
+      <ForwardRef(Base)
+        as="h1"
         className="govgr-heading-xl"
       >
-        hello
-      </h1>
-    </ForwardRef(Base)>
+        <h1
+          className="govgr-heading-xl"
+        >
+          hello
+        </h1>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
   </ForwardRef(Heading)>
 </ForwardRef(PageTitleHeading)>
 `;