Merge branch 'advanced-contentful-integration' into develop

Author: birdofpreyru

.exchange-rates.cache

@@ -1 +1 @@
-{"disclaimer":"Usage subject to terms: https://openexchangerates.org/terms","license":"https://openexchangerates.org/license","timestamp":1526050800,"base":"USD","rates":{"AED":3.673281,"AFN":70.710962,"ALL":106.38,"AMD":485.695,"ANG":1.795715,"AOA":231.4755,"ARS":23.1748,"AUD":1.325261,"AWG":1.791244,"AZN":1.7025,"BAM":1.638591,"BBD":2,"BDT":84.75795,"BGN":1.637434,"BHD":0.376964,"BIF":1781,"BMD":1,"BND":1.3209,"BOB":6.912769,"BRL":3.58416,"BSD":1,"BTC":0.000115593037,"BTN":67.304626,"BWP":9.895515,"BYN":2.007408,"BZD":2.010791,"CAD":1.278478,"CDF":1615,"CHF":0.999819,"CLF":0.02261,"CLP":618.14,"CNH":6.328126,"CNY":6.33218,"COP":2801.425,"CRC":566.695059,"CUC":1,"CUP":25.5,"CVE":92.3795,"CZK":21.342439,"DJF":177.75,"DKK":6.237574,"DOP":49.455,"DZD":115.516125,"EGP":17.7,"ERN":14.998767,"ETB":27.5,"EUR":0.837252,"FJD":2.091148,"FKP":0.737843,"GBP":0.737843,"GEL":2.443508,"GGP":0.737843,"GHS":4.53,"GIP":0.737843,"GMD":47.18,"GNF":9030,"GTQ":7.43045,"GYD":209.314534,"HKD":7.849701,"HNL":23.660322,"HRK":6.1871,"HTG":65.244838,"HUF":263.737692,"IDR":13971.725015,"ILS":3.566515,"IMP":0.737843,"INR":67.345,"IQD":1187.5,"IRR":37453.047379,"ISK":102.495,"JEP":0.737843,"JMD":125.24995,"JOD":0.709506,"JPY":109.37981667,"KES":100.395,"KGS":68.700944,"KHR":4061,"KMF":414.725,"KPW":900,"KRW":1068.315,"KWD":0.3015,"KYD":0.833677,"KZT":327.47765,"LAK":8340,"LBP":1513.65,"LKR":157.905232,"LRD":132.18915,"LSL":12.595,"LYD":1.355,"MAD":9.361773,"MDL":16.539963,"MGA":3240,"MKD":51.56,"MMK":1346.55,"MNT":2397.6995,"MOP":8.088592,"MRO":355.5,"MRU":35.7,"MUR":34.446516,"MVR":15.509851,"MWK":721.045,"MXN":19.312336,"MYR":3.99805,"MZN":60.189545,"NAD":12.585,"NGN":360.5,"NIO":31.285,"NOK":7.993116,"NPR":107.702558,"NZD":1.436022,"OMR":0.384975,"PAB":1,"PEN":3.266209,"PGK":3.28825,"PHP":52.45,"PKR":115.568,"PLN":3.568029,"PYG":5606.1,"QAR":3.640999,"RON":3.879955,"RSD":99,"RUB":61.701,"RWF":865,"SAR":3.75035,"SBD":7.80896,"SCR":13.45505,"SDG":18,"SEK":8.590022,"SGD":1.335489,"SHP":0.737843,"SLL":7786.788251,"SOS":575,"SRD":7.468,"SSP":130.2634,"STD":20574.369681,"STN":20.7,"SVC":8.75317,"SYP":514.92499,"SZL":12.401761,"THB":31.90625,"TJS":8.976386,"TMT":3.50998,"TND":2.490696,"TOP":2.218713,"TRY":4.304889,"TTD":6.74255,"TWD":29.7585,"TZS":2283.15,"UAH":26.2125,"UGX":3716.5,"USD":1,"UYU":28.99,"UZS":8055,"VEF":69900,"VND":22771.156217,"VUV":107.747276,"WST":2.544003,"XAF":549.200993,"XAG":0.05965172,"XAU":0.00075625,"XCD":2.70255,"XDR":0.698904,"XOF":549.200993,"XPD":0.00100104,"XPF":99.910682,"XPT":0.00108109,"YER":250.306642,"ZAR":12.25322,"ZMW":9.899,"ZWL":322.355011}}
+{"disclaimer":"Usage subject to terms: https://openexchangerates.org/terms","license":"https://openexchangerates.org/license","timestamp":1526288400,"base":"USD","rates":{"AED":3.673097,"AFN":70.6555,"ALL":106.155845,"AMD":485.278394,"ANG":1.793103,"AOA":230.9215,"ARS":23.01,"AUD":1.32506,"AWG":1.792496,"AZN":1.7025,"BAM":1.636346,"BBD":2,"BDT":84.636041,"BGN":1.6362,"BHD":0.377163,"BIF":1757.538054,"BMD":1,"BND":1.3317,"BOB":6.903239,"BRL":3.59915,"BSD":1,"BTC":0.000118447452,"BTN":67.192106,"BWP":9.793725,"BYN":1.999105,"BZD":2.008054,"CAD":1.277461,"CDF":1613.322925,"CHF":0.999014,"CLF":0.02263,"CLP":622.4,"CNH":6.330216,"CNY":6.3335,"COP":2823.35,"CRC":566.285059,"CUC":1,"CUP":25.5,"CVE":92.65,"CZK":21.2624,"DJF":177.875,"DKK":6.215882,"DOP":49.537915,"DZD":115.371545,"EGP":17.8213,"ERN":15.0003,"ETB":27.489379,"EUR":0.834407,"FJD":2.092548,"FKP":0.735958,"GBP":0.735958,"GEL":2.442467,"GGP":0.735958,"GHS":4.541563,"GIP":0.735958,"GMD":47.17,"GNF":9017.8,"GTQ":7.420059,"GYD":209.056129,"HKD":7.849881,"HNL":23.718815,"HRK":6.157399,"HTG":65.158071,"HUF":262.989333,"IDR":13971.903325,"ILS":3.57397,"IMP":0.735958,"INR":67.455,"IQD":1191.625723,"IRR":42022.25451,"ISK":101.97,"JEP":0.735958,"JMD":125.080418,"JOD":0.709302,"JPY":109.54628125,"KES":100.3505,"KGS":68.657499,"KHR":4067.716667,"KMF":413.340098,"KPW":900,"KRW":1068.03,"KWD":0.301561,"KYD":0.832538,"KZT":327.437082,"LAK":8320.45,"LBP":1508.062443,"LKR":157.767616,"LRD":132.194575,"LSL":12.262429,"LYD":1.353613,"MAD":9.343639,"MDL":16.519464,"MGA":3258.234946,"MKD":51.325,"MMK":1348.149087,"MNT":2398.25,"MOP":8.077536,"MRO":355.5,"MRU":35.7,"MUR":34.4025,"MVR":15.509851,"MWK":724.975367,"MXN":19.33384,"MYR":3.94353,"MZN":60.190699,"NAD":12.262429,"NGN":359.703899,"NIO":31.304787,"NOK":7.987363,"NPR":107.537394,"NZD":1.438528,"OMR":0.38501,"PAB":1,"PEN":3.264445,"PGK":3.28381,"PHP":52.39,"PKR":115.646195,"PLN":3.556005,"PYG":5598.45,"QAR":3.6376,"RON":3.863314,"RSD":98.607808,"RUB":61.804,"RWF":867.028459,"SAR":3.750245,"SBD":7.83904,"SCR":13.4555,"SDG":18.047192,"SEK":8.582513,"SGD":1.332148,"SHP":0.735958,"SLL":7702.650584,"SOS":577.046453,"SRD":7.468,"SSP":130.2634,"STD":20487.974004,"STN":20.55,"SVC":8.741296,"SYP":515.00499,"SZL":12.264844,"THB":31.803,"TJS":8.96425,"TMT":3.50998,"TND":2.485597,"TOP":2.268754,"TRY":4.323958,"TTD":6.733564,"TWD":29.758,"TZS":2276.750904,"UAH":26.175987,"UGX":3711.35,"USD":1,"UYU":30.033862,"UZS":8051.45,"VEF":69915,"VND":22767.59281,"VUV":107.760201,"WST":2.557217,"XAF":547.334811,"XAG":0.05987853,"XAU":0.000757,"XCD":2.70255,"XDR":0.698904,"XOF":547.334811,"XPD":0.00100506,"XPF":99.571186,"XPT":0.00107936,"YER":250.281642,"ZAR":12.258449,"ZMW":9.885504,"ZWL":322.355011}}

__tests__/shared/components/__snapshots__/Content.jsx.snap

@@ -403,6 +403,21 @@ exports[`Matches shallow shapshot 1`] = `
       </Link>
     </li>
   </ul>
+  <h3>
+    Previews of Contentful Components
+  </h3>
+  <ul>
+    <li>
+      <Link
+        replace={false}
+        to="/examples/contentful/banner/5il6oFtWp2Ua6WGs60M2mK"
+      >
+        <code>
+          Banner
+        </code>
+      </Link>
+    </li>
+  </ul>
   <h3>
     Sandbox
   </h3>

src/assets/images/communities/wipro/challenges/banner.jpg

@@ -159,6 +159,15 @@ export default function Content() {
         </li>
       </ul>
 
+      <h3>Previews of Contentful Components</h3>
+      <ul>
+        <li>
+          <Link to="/examples/contentful/banner/5il6oFtWp2Ua6WGs60M2mK">
+            <code>Banner</code>
+          </Link>
+        </li>
+      </ul>
+
       <h3>Sandbox</h3>
       <p>
         The right place to put any experimental and proof-of-concept

src/assets/images/communities/wipro/home/banner.jpg

@@ -0,0 +1,49 @@
+/**
+ * The core banner rendering.
+ */
+
+import _ from 'lodash';
+import md from 'utils/markdown';
+import PT from 'prop-types';
+import React from 'react';
+
+import { themr } from 'react-css-super-themr';
+
+import defaultTheme from './themes/default.scss';
+
+function Banner({
+  background,
+  banner,
+  theme,
+}) {
+  return (
+    <div
+      className={theme.container}
+      style={_.merge({
+        backgroundImage: `url(${background.file.url})`,
+      }, banner.containerStyles)}
+    >
+      <div className={theme.contentWrapper} style={banner.contentWrapperStyles}>
+        <div
+          className={theme.content}
+          /* eslint-disable react/no-danger */
+          dangerouslySetInnerHTML={{ __html: md(banner.text) }}
+          /* eslint-enable react/no-danger */
+          style={banner.contentStyles}
+        />
+      </div>
+    </div>
+  );
+}
+
+Banner.propTypes = {
+  background: PT.shape().isRequired,
+  banner: PT.shape().isRequired,
+  theme: PT.shape({
+    container: PT.string.isRequired,
+    content: PT.string.isRequired,
+    contentWrapper: PT.string.isRequired,
+  }).isRequired,
+};
+
+export default themr('Banner', defaultTheme)(Banner);

src/assets/images/communities/wipro/leaderboard/banner.jpg

@@ -0,0 +1,69 @@
+/**
+ * New Banner component.
+ */
+
+import ContentfulLoader from 'containers/ContentfulLoader';
+import LoadingIndicator from 'components/LoadingIndicator';
+import PT from 'prop-types';
+import React from 'react';
+
+import Banner from './Banner';
+
+/* eslint-disable global-require */
+const THEMES = {
+  TopGear: require('./themes/top_gear.scss'),
+};
+/* eslint-enable global-require */
+
+/* Loads banner background asset. */
+function BackgroundLoader(props) {
+  const { banner, preview } = props;
+  const assetId = banner.backgroundImage.sys.id;
+  return (
+    <ContentfulLoader
+      assetIds={assetId}
+      preview={preview}
+      render={data => (
+        <Banner
+          {...props}
+          background={data.assets.items[assetId].fields}
+          theme={THEMES[banner.baseTheme]}
+        />
+      )}
+      renderPlaceholder={LoadingIndicator}
+    />
+  );
+}
+
+BackgroundLoader.propTypes = {
+  banner: PT.shape().isRequired,
+  id: PT.string.isRequired,
+  preview: PT.bool.isRequired,
+};
+
+/* Loads the main banner entry. */
+export default function BannerLoader(props) {
+  const { id, preview } = props;
+  return (
+    <ContentfulLoader
+      entryIds={id}
+      preview={preview}
+      render={data => (
+        <BackgroundLoader
+          {...props}
+          banner={data.entries.items[id].fields}
+        />
+      )}
+      renderPlaceholder={LoadingIndicator}
+    />
+  );
+}
+
+BannerLoader.defaultProps = {
+  preview: false,
+};
+
+BannerLoader.propTypes = {
+  id: PT.string.isRequired,
+  preview: PT.bool,
+};

src/shared/components/Content/index.jsx

@@ -0,0 +1,30 @@
+/* Default banner styling. */
+
+@import "~styles/mixins";
+
+.container {
+  background-position: 50% 50%;
+  background-size: cover;
+  height: 480px;
+  overflow: hidden;
+  position: relative;
+}
+
+.content {
+  @include roboto-regular;
+
+  color: white;
+
+  h1 { margin-bottom: 10px; }
+  p { margin: 5px 0; }
+}
+
+.contentWrapper {
+  background: black;
+  opacity: 0.6;
+  padding: 30px;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}

src/shared/components/Contentful/Banner/Banner.jsx

@@ -0,0 +1,21 @@
+.content {
+  font-family: "Akkurat mono", monospace;
+  line-height: 150%;
+
+  h1 {
+    font: bold 20px/150% "Akkurat mono", monospace;
+    text-decoration: underline;
+  }
+
+  p { margin: 10px 0; }
+}
+
+.contentWrapper {
+  background: #eb3747;
+  border-radius: 50%;
+  height: 360px;
+  opacity: 1;
+  padding: 60px;
+  width: 360px;
+  top: 480px;
+}

src/shared/components/Contentful/Banner/index.jsx

@@ -0,0 +1,17 @@
+import Banner from 'components/Contentful/Banner';
+import ContentfulLoader from 'containers/ContentfulLoader';
+import LoadingIndicator from 'components/LoadingIndicator';
+import React from 'react';
+
+export default function ChallengeListingBanner() {
+  return (
+    <ContentfulLoader
+      entryQueries={{
+        content_type: 'banner',
+        'fields.name': 'TopGear - Challenge Listing - Banner',
+      }}
+      render={d => d.entries.matches[0].items.map(id => <Banner id={id} />)}
+      renderPlaceholder={LoadingIndicator}
+    />
+  );
+}

src/shared/components/Contentful/Banner/themes/default.scss

@@ -5,10 +5,12 @@
  * thus we disable max-len eslint rule for this file
  */
 
+import Banner from 'components/Contentful/Banner';
+import ContentfulLoader from 'containers/ContentfulLoader';
 import React from 'react';
 import Section from 'components/tc-communities/Section';
-import Banner from 'components/tc-communities/Banner';
 import ImageText from 'components/tc-communities/ImageText';
+import LoadingIndicator from 'components/LoadingIndicator';
 /*
 import ResourceCard from 'components/tc-communities/ResourceCard';
 import NewsletterSignup from 'components/tc-communities/NewsletterSignup';
@@ -25,16 +27,13 @@ import PT from 'prop-types';
 import JoinCommunity from 'containers/tc-communities/JoinCommunity';
 import CommunityStats from 'containers/tc-communities/CommunityStats';
 
-import bannerImage from 'assets/images/communities/wipro/home/banner.jpg';
-
 /*
 import IconRocket from '../../../../../../assets/images/tc-communities/rocket.svg';
 import IconNetwork from '../../../../../../assets/images/tc-communities/network.svg';
 import IconMedal from '../../../../../../assets/images/tc-communities/medal.svg';
 */
 
 import style from './style.scss';
-import bannerStyle from './themes/banner.scss';
 import IconStatStyles from './themes/IconStatStyles.scss';
 // import NewsletterSignupStyle from './themes/newsletter_signup.scss';
 import ImageTextStyles from './themes/imageTextStyle.scss';
@@ -118,20 +117,14 @@ export default function Home(props) {
 
   return (
     <main>
-      <Banner
-        title="Deliver your project&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;requirements faster&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;through crowdsourcing&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;"
-        imageSrc={bannerImage}
-        theme={bannerStyle}
-      >
-        <p>
-          Tap into the Wipro global/account expert pool for your project
-          requirements.
-        </p>
-        <p>
-          Engage TopGear for bringing in velocity, additional bandwidth and
-          capability to meet your project requirements.
-        </p>
-      </Banner>
+      <ContentfulLoader
+        entryQueries={{
+          content_type: 'banner',
+          'fields.name': 'TopGear - Home - Banner',
+        }}
+        render={d => d.entries.matches[0].items.map(id => <Banner id={id} />)}
+        renderPlaceholder={LoadingIndicator}
+      />
 
       <CommunityStats theme={IconStatStyles} icons={COMMUNITY_STATS_ICONS} />