@digigov/react-core 1.0.0-758a1807 → 1.0.0-77ee23d9

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

@@ -310,6 +310,8 @@ function Unpurge() {
     govgr-heading-md
     govgr-heading-lg
     govgr-heading-xl
+    govgr-image-logo--light
+    govgr-image-logo--dark
     `}
     ></div>
   );

package/src/index.ts

@@ -117,6 +117,8 @@ export * from '@digigov/react-core/SummaryListItemAction';
 export * from '@digigov/react-core/SummaryListItemKey';
 export * from '@digigov/react-core/SummaryListItemValue';
 export * from '@digigov/react-core/SvgIcon';
+export * from '@digigov/react-core/ImageLogo';
+export * from '@digigov/react-core/ImageLogoSet';
 export * from '@digigov/react-core/Table';
 export * from '@digigov/react-core/TableBody';
 export * from '@digigov/react-core/TableCaption';

package/src/registry.js

@@ -122,6 +122,8 @@ import * as _digigov_react_core_HellenicRepublicLogo_logo_inverted_el from '@dig
 import * as _digigov_react_core_HellenicRepublicLogo_logo_inverted_en from '@digigov/react-core/HellenicRepublicLogo/logo-inverted-en';
 import * as _digigov_react_core_Hidden from '@digigov/react-core/Hidden';
 import * as _digigov_react_core_Hint from '@digigov/react-core/Hint';
+import * as _digigov_react_core_ImageLogo from '@digigov/react-core/ImageLogo';
+import * as _digigov_react_core_ImageLogoSet from '@digigov/react-core/ImageLogoSet';
 import * as _digigov_react_core from '@digigov/react-core';
 import * as _digigov_react_core_KitchenSinkAllComponents from '@digigov/react-core/KitchenSinkAllComponents';
 import * as _digigov_react_core_KitchenSinkCard from '@digigov/react-core/KitchenSinkCard';
@@ -253,7 +255,7 @@ function lazyImport(pkgImport) {
       get: (_target, name) => {
         if (name === '__esModule' || name === 'default') {
           return pkgImport.default;
-        } else if(
+        } else if (
           name === '*'
         ) {
           return pkgImport;
@@ -388,6 +390,8 @@ export 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/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),
@@ -512,4 +516,3 @@ export default {
   '@digigov/react-core/VisuallyHidden': lazyImport(_digigov_react_core_VisuallyHidden),
   '@digigov/react-core/WarningText': lazyImport(_digigov_react_core_WarningText)
 };
-