added banner component (#75)

* added banner component

* trigger new now preview build

* export banner component

* code review fixes

* exported also subscribe component

README.md

@@ -2,7 +2,7 @@
 
 [![GitHub contributors](https://img.shields.io/github/contributors/code4romania/taskforce-fe-components.svg?style=for-the-badge)](https://github.com/code4romania/taskforce-fe-components/graphs/contributors) [![GitHub last commit](https://img.shields.io/github/last-commit/code4romania/taskforce-fe-components.svg?style=for-the-badge)](https://github.com/code4romania/taskforce-fe-components/commits/master) [![License: MPL 2.0](https://img.shields.io/badge/license-MPL%202.0-brightgreen.svg?style=for-the-badge)](https://opensource.org/licenses/MPL-2.0)
 
-A set of reusable components between taskforce react apps.
+A set of reusable components between taskforce react apps. 
 
 [Contributing](#contributing) | [Built with](#built-with) | [Deployment](#deployment) | [Feedback](#feedback) | [License](#license) | [About Code4Ro](#about-code4ro)
 

src/components/banner/banner.js

@@ -0,0 +1,31 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./banner.scss";
+
+export const Banner = ({ color, title, link }) => {
+  return (
+    <div className={`banner-wrapper is-${color}`}>
+      <div className="banner">
+        <div className="title">
+          <a
+            href="${link}"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {title || ""}
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+Banner.propTypes = {
+  color: PropTypes.oneOf(["red", "pink", "green", "yellow"]),
+  title: PropTypes.string.isRequired,
+  link: PropTypes.string.isRequired
+};
+
+Banner.defaultProps = {
+  color: 'yellow'
+};

src/components/banner/banner.scss

@@ -0,0 +1,41 @@
+@import "~bulma/sass/utilities/_all.sass";
+
+$info-card-colors: (
+  'red': #FF1616,
+  'pink': #F5BCD6,
+  'green': #05D6C7,
+  'yellow': #FFDE59);
+
+.banner-wrapper {
+  width: 100%;
+}
+
+.banner {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  min-height:50px;
+}
+
+.title {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+
+  a {
+    font-size: 1rem;
+    font-weight: 400;
+    color: #000;
+    text-decoration: underline;
+
+  }
+}
+
+@each $color-name, $color-value in $info-card-colors{
+  &.is-#{$color-name} {
+    .banner{
+      background-color: $color-value;
+    }
+  }
+}

src/components/banner/banner.stories.js

@@ -0,0 +1,18 @@
+import React from "react";
+import { Banner } from "./banner";
+
+import "./../../styles.scss";
+
+export default { title: "Banner" };
+
+export const defaultColor = () => (
+  <Banner title="15 RECOMANDĂRI privind conduita socială responsabilă în prevenirea răspândirii coronavirus. " link="https://code4.ro" />
+);
+
+export const green = () => (
+  <Banner color="green"  title="15 RECOMANDĂRI privind conduita socială responsabilă în prevenirea răspândirii coronavirus. " link="https://code4.ro" />
+);
+
+export const yellow = () => (
+  <Banner color="yellow"  title="15 RECOMANDĂRI privind conduita socială responsabilă în prevenirea răspândirii coronavirus. " link="https://code4.ro" />
+);

src/index.js

@@ -17,6 +17,8 @@ export * from "./components/hero/hero";
 
 export * from "./components/incubated-by/incubated-by";
 
+export * from "./components/banner/banner";
+
 export * from "./components/instruments/instruments";
 export * from "./components/instruments-item/instruments-item";
 
@@ -30,3 +32,6 @@ export * from "./components/logo/logo";
 
 export * from "./components/search-input/search-input";
 export * from "./components/social-share/social-share";
+
+export * from "./components/subscribe/mailchimp-subscribe";
+export * from "./components/subscribe/subscribe-form";