Add support for 'partnerLogos' to IncubatedBy component (#190)

* Add support for 'partnerLogos' to IncubatedBy component

* Update Patria-bank to transparent png

* Compress image

* Bump package version

Author: cipick

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@code4ro/taskforce-fe-components",
-  "version": "1.0.25",
+  "version": "1.0.26",
   "private": false,
   "dependencies": {
     "bulma": "^0.8.0",

src/components/incubated-by/incubated-by.js

@@ -1,17 +1,30 @@
 import React from "react";
+import PropTypes from "prop-types";
 import { Logo } from "../logo/logo";
 import TaskforceLogo from "../../images/code4romania-color.svg";
 import "./incubated-by.scss";
 
-export const IncubatedBy = () => {
+export const IncubatedBy = ({ partnerLogos }) => {
   return (
     <div className="incubated-by-wrapper">
       <div className="incubated-by container">
-        <p className="caption">proiect dezvoltat în programul</p>
-        <Logo url="https://code4.ro">
-          <TaskforceLogo width="102" />
-        </Logo>
+        <div className="row">
+          <p className="caption">proiect dezvoltat în programul</p>
+          <Logo url="https://code4.ro">
+            <TaskforceLogo width="102" />
+          </Logo>
+        </div>
+        {partnerLogos && (
+          <div className="row">
+            <p className="caption">cu sprijinul</p>
+            <div className="logos">{partnerLogos}</div>
+          </div>
+        )}
       </div>
     </div>
   );
 };
+
+IncubatedBy.propTypes = {
+  partnerLogos: PropTypes.arrayOf(PropTypes.node)
+};

src/components/incubated-by/incubated-by.scss

@@ -13,13 +13,26 @@
   align-items: center;
   min-height: 60px;
 
+  .row {
+    display: flex;
+    align-items: center;
+  }
+
+  .row + .row {
+    margin-left: 1.5rem;
+  }
+
   .caption {
     font-size: 14px;
     line-height: 21px;
     color: #000;
     margin-right: 1.5rem;
   }
 
+  .logos {
+    display: flex;
+  }
+
   a {
     display: flex;
   }
@@ -31,6 +44,19 @@
 
 @media (max-width: 768px) {
   .incubated-by {
-    justify-content: space-between;
+    flex-direction: column;
+
+    .row {
+      justify-content: space-between;
+      width: 100%;
+    }
+
+    .row + .row {
+      margin-left: 0;
+    }
+
+    .caption {
+      margin-right: 0.5rem;
+    }
   }
 }

src/components/incubated-by/incubated-by.stories.js

@@ -1,8 +1,39 @@
 import React from "react";
 import { IncubatedBy } from "./incubated-by";
+import { Logo } from "../..";
+import patriaBank from "../../images/patria-bank.png";
 
 import "./../../styles.scss";
 
+const customPartnerLogos = (
+  <Logo url="https://www.patriabank.ro/" key="patria-bank">
+    <img src={patriaBank} alt="Patria Bank" />
+  </Logo>
+);
+
+const customMultiplePartnersLogos = [
+  <Logo url={"https://codeforall.org/"} key="github_3">
+    <img
+      src="https://epf.org.pl/en/wp-content/uploads/sites/3/2015/11/code_for_all_logo.png"
+      alt="Custom Partner"
+    />
+  </Logo>,
+  <Logo url={"https://girlswhocode.com/"} key="github_4">
+    <img
+      src="http://www.bigdreammovement.com/wp-content/uploads/girls-who-code.png"
+      alt="Custom Partner"
+    />
+  </Logo>
+];
+
 export default { title: "Incubated By" };
 
 export const normal = () => <IncubatedBy />;
+
+export const withPartner = () => (
+  <IncubatedBy partnerLogos={customPartnerLogos} />
+);
+
+export const withMultiplePartners = () => (
+  <IncubatedBy partnerLogos={customMultiplePartnersLogos} />
+);