Add feedback loop logo

src/components/ProductsLogos/FeedbackLoopLogo/index.js

@@ -0,0 +1,33 @@
+import React from "react";
+import { S3_FOLDER } from "../../../utils/constants";
+import ProductLogo from "./../../ProductLogo";
+
+const FeedbackLoopLogo = props => {
+  const FeedbackLoopVerticalColored = `${S3_FOLDER}/products-logos/FeedbackLoop_vertical_colored.svg`;
+  const FeedbackLoopHorizontalColored = `${S3_FOLDER}/products-logos/FeedbackLoop_horizontal_colored.svg`;
+  const FeedbackLoopHorizontalWhite = `${S3_FOLDER}/products-logos/FeedbackLoop_horizontal_white.svg`;
+  const FeedbackLoopVerticalWhite = `${S3_FOLDER}/products-logos/FeedbackLoop_vertical_white.svg`;
+  if (!props.white && props.variant == "horizontal") {
+    return <ProductLogo {...props} src={FeedbackLoopHorizontalColored} />;
+  }
+
+  if (props.white && props.variant == "horizontal") {
+    return <ProductLogo {...props} src={FeedbackLoopHorizontalWhite} />;
+  }
+
+  if (!props.white && props.variant == "vertical") {
+    return <ProductLogo {...props} src={FeedbackLoopVerticalColored} />;
+  }
+
+  if (props.white && props.variant == "vertical") {
+    return <ProductLogo {...props} src={FeedbackLoopVerticalWhite} />;
+  }
+};
+
+FeedbackLoopLogo.defaultProps = {
+  white: false,
+  variant: "horizontal",
+  alt: "FeedbackLoop Logo",
+};
+
+export default FeedbackLoopLogo;

src/components/ProductsLogos/FeedbackLoopLogo/index.stories.js

@@ -0,0 +1,19 @@
+import React, { Fragment } from "react";
+import { storiesOf } from "@storybook/react";
+import FeedbackLoopLogo from "./index";
+
+const stories = storiesOf("Branding|Logos.FeedbackLoop logo", FeedbackLoopLogo);
+const storyStyle = {
+  width: 200,
+};
+
+stories.add("Horizontal colored", () => <FeedbackLoopLogo style={storyStyle} />);
+stories.add("Horizontal white", () => (
+  <FeedbackLoopLogo white style={storyStyle} />
+));
+stories.add("Vertical colored", () => (
+  <FeedbackLoopLogo variant="vertical" style={storyStyle} />
+));
+stories.add("Vertical white", () => (
+  <FeedbackLoopLogo white variant="vertical" style={storyStyle} />
+));

src/index.js

@@ -8,6 +8,7 @@ import HelpAvatarComponent from "./components/HelpAvatar";
 import HesabuLogoComponent from "./components/ProductsLogos/HesabuLogo";
 import HorizontalBulletListComponent from "./components/HorizontalBulletList";
 import IasoLogoComponent from "./components/ProductsLogos/IasoLogo";
+import FeedbackLoopLogoComponent from "./components/ProductsLogos/FeedbackLoopLogo";
 import InfoBoxComponent from "./components/InfoBox";
 import KeyNumberBlockComponent from "./components/KeyNumberBlock";
 import ProgressButtonComponent from "./components/ProgressButton";
@@ -24,6 +25,7 @@ export const HelpAvatar = HelpAvatarComponent;
 export const HesabuLogo = HesabuLogoComponent;
 export const HorizontalBulletList = HorizontalBulletListComponent;
 export const IasoLogo = IasoLogoComponent;
+export const FeedbackLoopLogo = FeedbackLoopLogoComponent
 export const InfoBox = InfoBoxComponent;
 export const KeyNumberBlock = KeyNumberBlockComponent;
 export const ProgressButton = ProgressButtonComponent;