Add banner image (#206)

* Add banner image

* Export BannerImage

Author: cipick

package-lock.json

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

package.json

@@ -0,0 +1,13 @@
+import React from "react";
+import { BannerImage } from "./banner-image";
+
+export default { title: "Banner Image" };
+
+export const Default = () => (
+  <BannerImage
+    link="https://code4.ro"
+    image={
+      {src: "https://stirioficiale.ro/storage/imagine principala_ROVACCINARE.png"}
+    }
+  />
+);

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

@@ -0,0 +1,31 @@
+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>
+  );
+};
+
+BannerImage.propTypes = {
+  image: PropTypes.shape({
+    src: PropTypes.string.isRequired,
+    alt: PropTypes.string,
+    title: PropTypes.string
+  }).isRequired,
+  link: PropTypes.string
+};
+
+BannerImage.defaultProps = {
+  link: null
+}
+
+

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

@@ -1,6 +1,7 @@
 import React from "react";
 import { Instruments } from "./instruments";
 import { InstrumentsItem } from "../instruments-item/instruments-item";
+import { BannerImage } from "../banner-image/banner-image";
 
 export default { title: "Instruments" };
 
@@ -9,6 +10,15 @@ const showMessage = () => alert("Hello, friend.");
 export const grid = () => (
   <Instruments layout="grid">
     <section>
+      <BannerImage
+        link="https://vaccinare-covid.gov.ro/"
+        image={{
+          src:
+            "https://stirioficiale.ro/storage/imagine principala_ROVACCINARE.png",
+          alt: "#ROVACCINARE",
+          title: "#ROVACCINARE"
+        }}
+      />
       <InstrumentsItem
         color="yellow"
         title="Instalează-ți add-on-ul de depistat știrile false"
@@ -17,15 +27,15 @@ export const grid = () => (
         color="blue"
         title="Instalează-ți add-on-ul de depistat știrile false"
       />
+    </section>
+    <section>
       <InstrumentsItem
         color="green"
         title="Stiri oficiale si informații la zi"
         content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Elit, duis pretium."
         ctaText="Cele mai noi informații oficiale"
         onClick={showMessage}
       />
-    </section>
-    <section>
       <InstrumentsItem
         color="red"
         title="Vrei să ajuți. Intră aici"
@@ -55,6 +65,15 @@ export const grid = () => (
 
 export const oneColumn = () => (
   <Instruments layout="column">
+    <BannerImage
+      link="https://vaccinare-covid.gov.ro/"
+      image={{
+        src:
+            "https://stirioficiale.ro/storage/imagine principala_ROVACCINARE.png",
+        alt: "#ROVACCINARE",
+        title: "#ROVACCINARE"
+      }}
+    />
     <InstrumentsItem
       color="green"
       title="Instalează-ți add-on-ul de depistat știrile false"

src/components/instruments/instruments.stories.js

@@ -22,6 +22,7 @@ export { Hero } from "./components/hero/hero";
 export { IncubatedBy } from "./components/incubated-by/incubated-by";
 
 export { Banner } from "./components/banner/banner";
+export { BannerImage } from "./components/banner-image/banner-image";
 
 export { Instruments } from "./components/instruments/instruments";
 export { InstrumentsItem } from "./components/instruments-item/instruments-item";