Dynamic image width and height and open URL in the same or on a new page (#208)

* Dynamic image width and height and open URL in the same or on a new page

* Upgrade the version number

Co-authored-by: Andrei VASILACHE <andrei.vasilache@assist.ro>

Author: andreivasilache

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code4ro/taskforce-fe-components",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "private": false,
   "sideEffects": false,
   "dependencies": {

src/components/banner-image/baner-image.stories.js

@@ -5,9 +5,10 @@ export default { title: "Banner Image" };
 
 export const Default = () => (
   <BannerImage
-    link="https://code4.ro"
-    image={
-      {src: "https://stirioficiale.ro/storage/imagine principala_ROVACCINARE.png"}
-    }
+    link={{ path: "https://code4.ro", shouldOpenLinkOnNewPage: false }}
+    image={{
+      src:
+        "https://stirioficiale.ro/storage/imagine principala_ROVACCINARE.png"
+    }}
   />
 );

src/components/banner-image/banner-image.js

@@ -1,31 +1,44 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-export const BannerImage = ({ image: {src, alt, title}, link }) => {
-  return (
-    <div>
-      {link ?
-        <a href={link} target="_blank" rel="noopener noreferrer">
-          <img src={src} alt={alt} title={title}/>
-        </a>
-        :
-        <img src={src} alt={alt} title={title}/>
-      }
-    </div>
+const handleClick = ({ path, shouldOpenLinkOnNewPage }) => {
+  const windowInstance = window.open(
+    path,
+    shouldOpenLinkOnNewPage ? "_blank" : "_self"
   );
+  windowInstance.focus();
 };
 
+export const BannerImage = ({
+  image: { src, alt, title, width, height },
+  link
+}) => (
+  <div>
+    <img
+      src={src}
+      alt={alt}
+      title={title}
+      width={width}
+      height={height}
+      {...(!!link && { onClick: () => handleClick(link) })}
+    />
+  </div>
+);
+
 BannerImage.propTypes = {
   image: PropTypes.shape({
     src: PropTypes.string.isRequired,
     alt: PropTypes.string,
-    title: PropTypes.string
+    title: PropTypes.string,
+    width: PropTypes.number,
+    height: PropTypes.number
   }).isRequired,
-  link: PropTypes.string
+  link: PropTypes.shape({
+    path: PropTypes.string.isRequired,
+    shouldOpenLinkOnNewPage: PropTypes.bool
+  })
 };
 
 BannerImage.defaultProps = {
   link: null
-}
-
-
+};