Contentful banner. Almost ready.

birdofpreyru · birdofpreyru · commit a95bcd1facab · 2018-05-14T00:17:40.000+02:00
diff --git a/.exchange-rates.cache b/.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":1526241600,"base":"USD","rates":{"AED":3.672956,"AFN":70.6075,"ALL":106.120845,"AMD":484.582419,"ANG":1.792089,"AOA":230.9215,"ARS":23.0045,"AUD":1.324651,"AWG":1.792496,"AZN":1.7025,"BAM":1.635248,"BBD":2,"BDT":84.57175,"BGN":1.637485,"BHD":0.376492,"BIF":1758.95,"BMD":1,"BND":1.330798,"BOB":6.898532,"BRL":3.604331,"BSD":1,"BTC":0.0001158352,"BTN":67.170104,"BWP":9.787973,"BYN":1.997751,"BZD":2.006694,"CAD":1.278221,"CDF":1616,"CHF":0.999845,"CLF":0.02263,"CLP":621.975,"CNH":6.33423,"CNY":6.335,"COP":2821.45,"CRC":565.352717,"CUC":1,"CUP":25.5,"CVE":92.65,"CZK":21.335267,"DJF":177.875,"DKK":6.235672,"DOP":49.502935,"DZD":115.523,"EGP":17.6925,"ERN":14.999067,"ETB":27.473827,"EUR":0.836995,"FJD":2.063653,"FKP":0.73828,"GBP":0.73828,"GEL":2.44445,"GGP":0.73828,"GHS":4.538467,"GIP":0.73828,"GMD":47.17,"GNF":9011.65,"GTQ":7.415301,"GYD":208.883026,"HKD":7.84968,"HNL":23.70619,"HRK":6.1836,"HTG":65.114603,"HUF":263.915,"IDR":13956.3575,"ILS":3.56775,"IMP":0.73828,"INR":67.3605,"IQD":1191.25,"IRR":42019.086667,"ISK":102.30123,"JEP":0.73828,"JMD":124.96726,"JOD":0.709503,"JPY":109.32868566,"KES":100.306647,"KGS":68.657499,"KHR":4049.3,"KMF":413.45,"KPW":900,"KRW":1067.55,"KWD":0.30114,"KYD":0.831981,"KZT":327.327082,"LAK":8314.8,"LBP":1507.537443,"LKR":157.648101,"LRD":132.194575,"LSL":12.254913,"LYD":1.352701,"MAD":9.346284,"MDL":16.5125,"MGA":3234.7,"MKD":51.57,"MMK":1343.8,"MNT":2397.583333,"MOP":8.072177,"MRO":355.5,"MRU":35.7,"MUR":34.42325,"MVR":15.509851,"MWK":724.760367,"MXN":19.41937,"MYR":3.95052,"MZN":60.319248,"NAD":12.254913,"NGN":359.41,"NIO":31.284492,"NOK":8.000005,"NPR":107.47925,"NZD":1.4349,"OMR":0.384405,"PAB":1,"PEN":3.262254,"PGK":3.281553,"PHP":52.424643,"PKR":115.606195,"PLN":3.568061,"PYG":5594.7,"QAR":3.63505,"RON":3.880422,"RSD":98.926426,"RUB":61.97895,"RWF":866.733459,"SAR":3.75035,"SBD":7.83867,"SCR":13.435,"SDG":18.037059,"SEK":8.59263,"SGD":1.335131,"SHP":0.73828,"SLL":7787.5,"SOS":576.933119,"SRD":7.468,"SSP":130.2634,"STD":20516.09961,"STN":20.55,"SVC":8.735315,"SYP":514.94499,"SZL":12.25647,"THB":31.9055,"TJS":8.958193,"TMT":3.50998,"TND":2.488902,"TOP":2.218713,"TRY":4.310572,"TTD":6.728889,"TWD":29.684,"TZS":2278.25,"UAH":26.159709,"UGX":3708.9,"USD":1,"UYU":29.988815,"UZS":8046,"VEF":69915,"VND":22768.6525,"VUV":107.760001,"WST":2.554433,"XAF":549.032729,"XAG":0.05999529,"XAU":0.0007586,"XCD":2.70255,"XDR":0.698904,"XOF":549.032729,"XPD":0.0010057,"XPF":99.880072,"XPT":0.00108225,"YER":250.25,"ZAR":12.269035,"ZMW":9.878736,"ZWL":322.355011}}
diff --git a/src/shared/components/Content/index.jsx b/src/shared/components/Content/index.jsx
@@ -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
diff --git a/src/shared/components/Contentful/Banner/Banner.jsx b/src/shared/components/Contentful/Banner/Banner.jsx
@@ -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);
diff --git a/src/shared/components/Contentful/Banner/index.jsx b/src/shared/components/Contentful/Banner/index.jsx
@@ -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,
+};
diff --git a/src/shared/components/Contentful/Banner/themes/default.scss b/src/shared/components/Contentful/Banner/themes/default.scss
@@ -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%);
+}
diff --git a/src/shared/components/Contentful/Banner/themes/top_gear.scss b/src/shared/components/Contentful/Banner/themes/top_gear.scss
@@ -0,0 +1,18 @@
+.content {
+  font-family: "Akkurat mono", monospace;
+
+  h1 {
+    font: bold 20px/150% "Akkurat mono", monospace;
+    text-decoration: underline;
+  }
+}
+
+.contentWrapper {
+  background: #eb3747;
+  border-radius: 50%;
+  height: 360px;
+  opacity: 1;
+  padding: 60px;
+  width: 360px;
+  top: 480px;
+}
diff --git a/src/shared/routes/Examples/Contentful.jsx b/src/shared/routes/Examples/Contentful.jsx
@@ -0,0 +1,28 @@
+/**
+ * Routes for previews of different Contentful components.
+ */
+
+import PT from 'prop-types';
+import React from 'react';
+
+import Banner from 'components/Contentful/Banner';
+
+import { Route, Switch } from 'react-router-dom';
+
+export default function Contentful({ match }) {
+  const base = match.url;
+  return (
+    <Switch>
+      <Route
+        path={`${base}/banner/:id`}
+        component={p => <Banner id={p.match.params.id} preview />}
+      />
+    </Switch>
+  );
+}
+
+Contentful.propTypes = {
+  match: PT.shape({
+    url: PT.string.isRequired,
+  }).isRequired,
+};
diff --git a/src/shared/routes/Examples/Examples.jsx b/src/shared/routes/Examples/Examples.jsx
@@ -30,6 +30,7 @@ import {
 } from 'react-router-dom';
 import { AppChunk, webpack } from 'topcoder-react-utils';
 
+import Contentful from './Contentful';
 import DataFetch from './DataFetch';
 
 export default function Examples(props) {
@@ -54,6 +55,7 @@ export default function Examples(props) {
         }}
       />
       <Route path={`${base}/color-mixins`} component={ColorMixins} />
+      <Route path={`${base}/contentful`} component={Contentful} />
       <Route path={`${base}/css-modules`} component={CssModules} />
       <Route path={`${base}/data-fetch`} component={DataFetch} />
       <Route path={`${base}/editor`} component={Editor} />
diff --git a/src/shared/utils/markdown.js b/src/shared/utils/markdown.js
@@ -0,0 +1,7 @@
+import MarkdownIt from 'markdown-it';
+
+const md = new MarkdownIt();
+
+export default function render(text) {
+  return md.render(text);
+}

Original file line number	Diff line number	Diff line change
`@@ -1 +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}}
	`1`	+{"disclaimer":"Usage subject to terms: https://openexchangerates.org/terms","license":"https://openexchangerates.org/license","timestamp":1526241600,"base":"USD","rates":{"AED":3.672956,"AFN":70.6075,"ALL":106.120845,"AMD":484.582419,"ANG":1.792089,"AOA":230.9215,"ARS":23.0045,"AUD":1.324651,"AWG":1.792496,"AZN":1.7025,"BAM":1.635248,"BBD":2,"BDT":84.57175,"BGN":1.637485,"BHD":0.376492,"BIF":1758.95,"BMD":1,"BND":1.330798,"BOB":6.898532,"BRL":3.604331,"BSD":1,"BTC":0.0001158352,"BTN":67.170104,"BWP":9.787973,"BYN":1.997751,"BZD":2.006694,"CAD":1.278221,"CDF":1616,"CHF":0.999845,"CLF":0.02263,"CLP":621.975,"CNH":6.33423,"CNY":6.335,"COP":2821.45,"CRC":565.352717,"CUC":1,"CUP":25.5,"CVE":92.65,"CZK":21.335267,"DJF":177.875,"DKK":6.235672,"DOP":49.502935,"DZD":115.523,"EGP":17.6925,"ERN":14.999067,"ETB":27.473827,"EUR":0.836995,"FJD":2.063653,"FKP":0.73828,"GBP":0.73828,"GEL":2.44445,"GGP":0.73828,"GHS":4.538467,"GIP":0.73828,"GMD":47.17,"GNF":9011.65,"GTQ":7.415301,"GYD":208.883026,"HKD":7.84968,"HNL":23.70619,"HRK":6.1836,"HTG":65.114603,"HUF":263.915,"IDR":13956.3575,"ILS":3.56775,"IMP":0.73828,"INR":67.3605,"IQD":1191.25,"IRR":42019.086667,"ISK":102.30123,"JEP":0.73828,"JMD":124.96726,"JOD":0.709503,"JPY":109.32868566,"KES":100.306647,"KGS":68.657499,"KHR":4049.3,"KMF":413.45,"KPW":900,"KRW":1067.55,"KWD":0.30114,"KYD":0.831981,"KZT":327.327082,"LAK":8314.8,"LBP":1507.537443,"LKR":157.648101,"LRD":132.194575,"LSL":12.254913,"LYD":1.352701,"MAD":9.346284,"MDL":16.5125,"MGA":3234.7,"MKD":51.57,"MMK":1343.8,"MNT":2397.583333,"MOP":8.072177,"MRO":355.5,"MRU":35.7,"MUR":34.42325,"MVR":15.509851,"MWK":724.760367,"MXN":19.41937,"MYR":3.95052,"MZN":60.319248,"NAD":12.254913,"NGN":359.41,"NIO":31.284492,"NOK":8.000005,"NPR":107.47925,"NZD":1.4349,"OMR":0.384405,"PAB":1,"PEN":3.262254,"PGK":3.281553,"PHP":52.424643,"PKR":115.606195,"PLN":3.568061,"PYG":5594.7,"QAR":3.63505,"RON":3.880422,"RSD":98.926426,"RUB":61.97895,"RWF":866.733459,"SAR":3.75035,"SBD":7.83867,"SCR":13.435,"SDG":18.037059,"SEK":8.59263,"SGD":1.335131,"SHP":0.73828,"SLL":7787.5,"SOS":576.933119,"SRD":7.468,"SSP":130.2634,"STD":20516.09961,"STN":20.55,"SVC":8.735315,"SYP":514.94499,"SZL":12.25647,"THB":31.9055,"TJS":8.958193,"TMT":3.50998,"TND":2.488902,"TOP":2.218713,"TRY":4.310572,"TTD":6.728889,"TWD":29.684,"TZS":2278.25,"UAH":26.159709,"UGX":3708.9,"USD":1,"UYU":29.988815,"UZS":8046,"VEF":69915,"VND":22768.6525,"VUV":107.760001,"WST":2.554433,"XAF":549.032729,"XAG":0.05999529,"XAU":0.0007586,"XCD":2.70255,"XDR":0.698904,"XOF":549.032729,"XPD":0.0010057,"XPF":99.880072,"XPT":0.00108225,"YER":250.25,"ZAR":12.269035,"ZMW":9.878736,"ZWL":322.355011}}