Skip to content

Commit a95bcd1

Browse files
committed
Contentful banner. Almost ready.
1 parent 18c3796 commit a95bcd1

File tree

9 files changed

+213
-1
lines changed

9 files changed

+213
-1
lines changed

.exchange-rates.cache

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff 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}}

src/shared/components/Content/index.jsx

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,15 @@ export default function Content() {
159159
</li>
160160
</ul>
161161

162+
<h3>Previews of Contentful Components</h3>
163+
<ul>
164+
<li>
165+
<Link to="/examples/contentful/banner/5il6oFtWp2Ua6WGs60M2mK">
166+
<code>Banner</code>
167+
</Link>
168+
</li>
169+
</ul>
170+
162171
<h3>Sandbox</h3>
163172
<p>
164173
The right place to put any experimental and proof-of-concept
Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
/**
2+
* The core banner rendering.
3+
*/
4+
5+
import _ from 'lodash';
6+
import md from 'utils/markdown';
7+
import PT from 'prop-types';
8+
import React from 'react';
9+
10+
import { themr } from 'react-css-super-themr';
11+
12+
import defaultTheme from './themes/default.scss';
13+
14+
function Banner({
15+
background,
16+
banner,
17+
theme,
18+
}) {
19+
return (
20+
<div
21+
className={theme.container}
22+
style={_.merge({
23+
backgroundImage: `url(${background.file.url})`,
24+
}, banner.containerStyles)}
25+
>
26+
<div className={theme.contentWrapper} style={banner.contentWrapperStyles}>
27+
<div
28+
className={theme.content}
29+
/* eslint-disable react/no-danger */
30+
dangerouslySetInnerHTML={{ __html: md(banner.text) }}
31+
/* eslint-enable react/no-danger */
32+
style={banner.contentStyles}
33+
/>
34+
</div>
35+
</div>
36+
);
37+
}
38+
39+
Banner.propTypes = {
40+
background: PT.shape().isRequired,
41+
banner: PT.shape().isRequired,
42+
theme: PT.shape({
43+
container: PT.string.isRequired,
44+
content: PT.string.isRequired,
45+
contentWrapper: PT.string.isRequired,
46+
}).isRequired,
47+
};
48+
49+
export default themr('Banner', defaultTheme)(Banner);
Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/**
2+
* New Banner component.
3+
*/
4+
5+
import ContentfulLoader from 'containers/ContentfulLoader';
6+
import LoadingIndicator from 'components/LoadingIndicator';
7+
import PT from 'prop-types';
8+
import React from 'react';
9+
10+
import Banner from './Banner';
11+
12+
/* eslint-disable global-require */
13+
const THEMES = {
14+
TopGear: require('./themes/top_gear.scss'),
15+
};
16+
/* eslint-enable global-require */
17+
18+
/* Loads banner background asset. */
19+
function BackgroundLoader(props) {
20+
const { banner, preview } = props;
21+
const assetId = banner.backgroundImage.sys.id;
22+
return (
23+
<ContentfulLoader
24+
assetIds={assetId}
25+
preview={preview}
26+
render={data => (
27+
<Banner
28+
{...props}
29+
background={data.assets.items[assetId].fields}
30+
theme={THEMES[banner.baseTheme]}
31+
/>
32+
)}
33+
renderPlaceholder={LoadingIndicator}
34+
/>
35+
);
36+
}
37+
38+
BackgroundLoader.propTypes = {
39+
banner: PT.shape().isRequired,
40+
id: PT.string.isRequired,
41+
preview: PT.bool.isRequired,
42+
};
43+
44+
/* Loads the main banner entry. */
45+
export default function BannerLoader(props) {
46+
const { id, preview } = props;
47+
return (
48+
<ContentfulLoader
49+
entryIds={id}
50+
preview={preview}
51+
render={data => (
52+
<BackgroundLoader
53+
{...props}
54+
banner={data.entries.items[id].fields}
55+
/>
56+
)}
57+
renderPlaceholder={LoadingIndicator}
58+
/>
59+
);
60+
}
61+
62+
BannerLoader.defaultProps = {
63+
preview: false,
64+
};
65+
66+
BannerLoader.propTypes = {
67+
id: PT.string.isRequired,
68+
preview: PT.bool,
69+
};
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
/* Default banner styling. */
2+
3+
@import "~styles/mixins";
4+
5+
.container {
6+
background-position: 50% 50%;
7+
background-size: cover;
8+
height: 480px;
9+
overflow: hidden;
10+
position: relative;
11+
}
12+
13+
.content {
14+
@include roboto-regular;
15+
16+
color: white;
17+
18+
h1 { margin-bottom: 10px; }
19+
p { margin: 5px 0; }
20+
}
21+
22+
.contentWrapper {
23+
background: black;
24+
opacity: 0.6;
25+
padding: 30px;
26+
position: absolute;
27+
left: 50%;
28+
top: 50%;
29+
transform: translate(-50%, -50%);
30+
}
Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.content {
2+
font-family: "Akkurat mono", monospace;
3+
4+
h1 {
5+
font: bold 20px/150% "Akkurat mono", monospace;
6+
text-decoration: underline;
7+
}
8+
}
9+
10+
.contentWrapper {
11+
background: #eb3747;
12+
border-radius: 50%;
13+
height: 360px;
14+
opacity: 1;
15+
padding: 60px;
16+
width: 360px;
17+
top: 480px;
18+
}
Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
/**
2+
* Routes for previews of different Contentful components.
3+
*/
4+
5+
import PT from 'prop-types';
6+
import React from 'react';
7+
8+
import Banner from 'components/Contentful/Banner';
9+
10+
import { Route, Switch } from 'react-router-dom';
11+
12+
export default function Contentful({ match }) {
13+
const base = match.url;
14+
return (
15+
<Switch>
16+
<Route
17+
path={`${base}/banner/:id`}
18+
component={p => <Banner id={p.match.params.id} preview />}
19+
/>
20+
</Switch>
21+
);
22+
}
23+
24+
Contentful.propTypes = {
25+
match: PT.shape({
26+
url: PT.string.isRequired,
27+
}).isRequired,
28+
};

src/shared/routes/Examples/Examples.jsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import {
3030
} from 'react-router-dom';
3131
import { AppChunk, webpack } from 'topcoder-react-utils';
3232

33+
import Contentful from './Contentful';
3334
import DataFetch from './DataFetch';
3435

3536
export default function Examples(props) {
@@ -54,6 +55,7 @@ export default function Examples(props) {
5455
}}
5556
/>
5657
<Route path={`${base}/color-mixins`} component={ColorMixins} />
58+
<Route path={`${base}/contentful`} component={Contentful} />
5759
<Route path={`${base}/css-modules`} component={CssModules} />
5860
<Route path={`${base}/data-fetch`} component={DataFetch} />
5961
<Route path={`${base}/editor`} component={Editor} />

src/shared/utils/markdown.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import MarkdownIt from 'markdown-it';
2+
3+
const md = new MarkdownIt();
4+
5+
export default function render(text) {
6+
return md.render(text);
7+
}

0 commit comments

Comments
 (0)