feat(Persistent CTA): add persistent CTA component (#44)

feat(Persistent CTA): add persistent CTA component

Co-authored-by: German Attanasio <[email protected]>

Author: germanattanasio

views/Demo.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import scrollToElement from 'scroll-to-element';
 import Input from './Input.jsx';
 import Output from './Output/Output.jsx';
+import FloatingCta from './FloatingCta.jsx';
 import { analyzeWithAllFeatures } from './utils/request';
 
 // eslint-disable-next-line
@@ -55,7 +56,12 @@ export default React.createClass({
     } = this.state;
 
     return (
-      <div className="_container _container_large">
+      <div className="demo _container _container_large">
+        <FloatingCta
+          link="https://cloud.ibm.com/registration/?target=%2Fcatalog%2Fservices%2Fnatural-language-understanding%3FhideTours%3Dtrue%26cm_mmc%3D-_-Watson%2BCore_Watson%2BCore%2B-%2BPlatform-_-WW_WW-_-wdc-ref%26cm_mmc%3D-_-Watson%2BCore_Watson%2BCore%2B-%2BPlatform-_-WW_WW-_-wdc-ref%26cm_mmca1%3D000000OF%26cm_mmca2%3D10000409"
+          label="Start for free in IBM Cloud"
+          isVisible={(data !== null)}
+        />
         <Input
           text={DEFAULT_TEXT}
           url={DEFAULT_URL}

views/FloatingCta.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { StyleSheet, css } from 'aphrodite/no-important';
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'fixed',
+    bottom: '2rem',
+    right: '2rem',
+    paddingRight: '3em',
+    paddingLeft: '3em',
+    paddingTop: '0.2em',
+    paddingBottom: '0.2em',
+    backgroundColor: '#9855d4',
+    borderColor: '#9855d4',
+    borderRadius: '45px',
+    zIndex: 9999,
+  },
+  hidden: {
+    display: 'none',
+    opacity: 0,
+  },
+  visible: {
+    display: 'block',
+    opacity: 1,
+  },
+  label: {
+    color: '#FFFFFF',
+  },
+});
+
+const FloatingCta = ({
+  link,
+  label,
+  isVisible,
+}) => {
+  const combinedVisibleStyles = (isVisible)
+    ? css(styles.container, styles.visible)
+    : css(styles.container, styles.hidden);
+
+  return (
+    <a className={combinedVisibleStyles} href={link} rel="noreferrer noopener" target="_blank">
+      <p className={css(styles.label)}>{label}</p>
+    </a>
+  );
+};
+
+FloatingCta.propTypes = {
+  isVisible: PropTypes.bool.isRequired,
+  link: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+};
+
+export default FloatingCta;