Adds tutorial videos to the TopGear's FAQ page

Author: birdofpreyru

package-lock.json

@@ -78,6 +78,7 @@
     "react-dom": "^15.6.1",
     "react-dropdown": "^1.2.1",
     "react-hot-loader": "^3.0.0-beta.6",
+    "react-player": "^0.20.0",
     "react-redux": "^5.0.3",
     "react-router-dom": "^4.0.0",
     "react-select": "^1.0.0-rc.3",

package.json

@@ -0,0 +1,34 @@
+/**
+ * ArticleCard component
+ */
+
+import Player from 'react-player';
+import PT from 'prop-types';
+import React from 'react';
+import { themr } from 'react-css-themr';
+import defaultStyle from './style.scss';
+
+function ArticleCard(props) {
+  const { title, theme, url } = props;
+  return (
+    <div className={theme.container}>
+      <Player className={theme.video} url={url} controls />
+      <div className={theme.content}>
+        <h3 className={theme.title}>{title}</h3>
+      </div>
+    </div>
+  );
+}
+
+ArticleCard.propTypes = {
+  title: PT.string.isRequired,
+  theme: PT.shape({
+    container: PT.string,
+    content: PT.string,
+    title: PT.string,
+    video: PT.string,
+  }).isRequired,
+  url: PT.string.isRequired,
+};
+
+export default themr('tcCommunities-ArticleCard', defaultStyle)(ArticleCard);

src/shared/components/tc-communities/VideoCard/index.jsx

@@ -0,0 +1,49 @@
+@import '~styles/tc-styles';
+
+.container {
+  display: block;
+  background: #fff;
+  border-radius: 4px;
+  box-shadow: 0 6px 20px 0 rgba(101, 101, 112, 0.2);
+  margin: 0 6px 24px;
+  padding-bottom: 24px;
+  width: 300px;
+
+  @include sm {
+    width: 220px;
+  }
+
+  @include xxs-to-xs {
+    height: auto;
+    margin: 0 15px;
+    padding-bottom: 30px;
+    width: auto;
+
+    & + & {
+      margin-top: 30px;
+    }
+  }
+}
+
+.content {
+  padding: 0 12px;
+  text-align: center;
+}
+
+.title {
+  color: #394146;
+  font: 600 20px/150% 'Open Sans';
+  margin-top: 20px;
+  max-height: 64px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  @include sm {
+    font-size: 16px;
+  }
+}
+
+.video {
+  height: auto !important;
+  width: 100% !important;
+}

src/shared/components/tc-communities/VideoCard/style.scss

@@ -9,6 +9,7 @@
 import React from 'react';
 // import { Link } from 'react-router-dom';
 import Section from 'components/tc-communities/Section';
+import VideoCard from 'components/tc-communities/VideoCard';
 /*
 import Accordion from 'components/tc-communities/Accordion/Accordion';
 import AccordionItem from 'components/tc-communities/Accordion/AccordionItem';
@@ -67,6 +68,34 @@ export default function Learn() {
             </AccordionItem>
           </Accordion>
         </Section>
+        <Section
+          title="Tutorials"
+          theme={{
+            content: style.tutorialsContent,
+            title: style.tutorialsTitle,
+          }}
+        >
+          <VideoCard
+            title="Introduction"
+            url="https://drive.google.com/uc?id=0B3y3SEA9cIEkWmZVb2pCcFB4emM"
+          />
+          <VideoCard
+            title="Registration"
+            url="https://drive.google.com/uc?id=0B3y3SEA9cIEkNExxVlhnQ0ZNT2c"
+          />
+          <VideoCard
+            title="Challenge Navigation"
+            url="https://drive.google.com/uc?id=0B3y3SEA9cIEkcjNvUnV1ajN2clE"
+          />
+          <VideoCard
+            title="Joining a Challenge"
+            url="https://drive.google.com/uc?id=0B3y3SEA9cIEkYzA1U0RhN2Rscnc"
+          />
+          <VideoCard
+            title="Submission"
+            url="https://drive.google.com/uc?id=0B3y3SEA9cIEkdm9maXpZQ3FGa00"
+          />
+        </Section>
       </main>
     </ThemeProvider>
   );

src/shared/components/tc-communities/communities/wipro/FAQ/index.jsx

@@ -132,3 +132,12 @@
     font-weight: bold;
   }
 }
+
+.tutorialsTitle {
+  padding-top: 0;
+}
+
+.tutorialsContent {
+  flex-wrap: wrap;
+  justify-content: center;
+}

src/shared/components/tc-communities/communities/wipro/FAQ/style.scss

@@ -1 +1 @@
-{"disclaimer":"Usage subject to terms: https://openexchangerates.org/terms","license":"https://openexchangerates.org/license","timestamp":1503496800,"base":"USD","rates":{"AED":3.672973,"AFN":68.8825,"ALL":112.25,"AMD":478.572298,"ANG":1.7795,"AOA":165.9205,"ARS":17.1851,"AUD":1.267203,"AWG":1.795504,"AZN":1.7,"BAM":1.6581,"BBD":2,"BDT":81.228683,"BGN":1.658254,"BHD":0.37704,"BIF":1725,"BMD":1,"BND":1.362404,"BOB":6.972833,"BRL":3.160475,"BSD":1,"BTC":0.000236411194,"BTN":64.116224,"BWP":10.222107,"BYN":1.930945,"BZD":2.015086,"CAD":1.257895,"CDF":1600,"CHF":0.965674,"CLF":0.02387,"CLP":641.4,"CNH":6.66656,"CNY":6.6611,"COP":2989.79,"CRC":576.22,"CUC":1,"CUP":25.5,"CVE":94.1,"CZK":22.152921,"DJF":178.57,"DKK":6.304009,"DOP":47.131,"DZD":109.95,"EGP":17.74,"ERN":15.345659,"ETB":23.258364,"EUR":0.847586,"FJD":2.022499,"FKP":0.781767,"GBP":0.781767,"GEL":2.394275,"GGP":0.781767,"GHS":4.41,"GIP":0.781767,"GMD":46.125,"GNF":8887.6,"GTQ":7.27135,"GYD":207.830851,"HKD":7.826028,"HNL":23.375691,"HRK":6.2792,"HTG":64.461254,"HUF":256.078333,"IDR":13350.75345,"ILS":3.614304,"IMP":0.781767,"INR":64.0644,"IQD":1167.65,"IRR":32859,"ISK":107.41125,"JEP":0.781767,"JMD":127.802183,"JOD":0.709001,"JPY":109.1921,"KES":103.195,"KGS":68.632592,"KHR":4095.75,"KMF":419.219527,"KPW":900,"KRW":1130.94,"KWD":0.301912,"KYD":0.833082,"KZT":333.779041,"LAK":8285.55,"LBP":1507.75,"LKR":152.731919,"LRD":115.005853,"LSL":13.23556,"LYD":1.368765,"MAD":9.424201,"MDL":17.915302,"MGA":2952.5,"MKD":52.2585,"MMK":1366.36006,"MNT":2437.670874,"MOP":8.058161,"MRO":364.9,"MUR":33.226,"MVR":15.450233,"MWK":725.61,"MXN":17.74495,"MYR":4.278534,"MZN":60.994761,"NAD":13.26125,"NGN":361.5,"NIO":29.915408,"NOK":7.888925,"NPR":102.55,"NZD":1.386174,"OMR":0.384985,"PAB":1,"PEN":3.238987,"PGK":3.180999,"PHP":51.160667,"PKR":105.325922,"PLN":3.62883,"PYG":5595.8,"QAR":3.672501,"RON":3.886665,"RSD":101.130779,"RUB":59.148,"RWF":828.81,"SAR":3.7502,"SBD":7.754399,"SCR":13.673139,"SDG":6.68,"SEK":8.090595,"SGD":1.36202,"SHP":0.781767,"SLL":7550,"SOS":578.345,"SRD":7.438,"SSP":125.2166,"STD":20781.898308,"SVC":8.747434,"SYP":514.98499,"SZL":13.241279,"THB":33.35,"TJS":8.807589,"TMT":3.499986,"TND":2.448652,"TOP":2.222702,"TRY":3.497701,"TTD":6.775398,"TWD":30.281549,"TZS":2238.3,"UAH":25.571451,"UGX":3599,"USD":1,"UYU":28.715422,"UZS":4181.1,"VEF":10.01295,"VND":22714.153233,"VUV":105.166488,"WST":2.503962,"XAF":555.980076,"XAG":0.05882873,"XAU":0.00077661,"XCD":2.70255,"XDR":0.709645,"XOF":555.980076,"XPD":0.00107142,"XPF":101.143933,"XPT":0.00102042,"YER":250.325,"ZAR":13.25142,"ZMW":9.03,"ZWL":322.355011}}
+{"disclaimer":"Usage subject to terms: https://openexchangerates.org/terms","license":"https://openexchangerates.org/license","timestamp":1503720005,"base":"USD","rates":{"AED":3.673097,"AFN":68.593617,"ALL":111.35,"AMD":478.825,"ANG":1.779302,"AOA":165.9205,"ARS":17.2255,"AUD":1.260549,"AWG":1.795249,"AZN":1.7,"BAM":1.6543,"BBD":2,"BDT":80.478539,"BGN":1.641206,"BHD":0.377278,"BIF":1740,"BMD":1,"BND":1.356042,"BOB":6.910011,"BRL":3.1586,"BSD":1,"BTC":0.000230652686,"BTN":64.01782,"BWP":10.184278,"BYN":1.931799,"BZD":2.015013,"CAD":1.24795,"CDF":1538.825758,"CHF":0.956435,"CLF":0.02361,"CLP":634.4,"CNH":6.642532,"CNY":6.6478,"COP":2924.25,"CRC":577.445,"CUC":1,"CUP":25.5,"CVE":93.55,"CZK":21.8879,"DJF":178.97,"DKK":6.2367,"DOP":47.575,"DZD":109.584,"EGP":17.705,"ERN":15.340791,"ETB":23.186557,"EUR":0.838574,"FJD":2.036695,"FKP":0.776452,"GBP":0.776452,"GEL":2.41168,"GGP":0.776452,"GHS":4.403276,"GIP":0.776452,"GMD":46.1,"GNF":8970,"GTQ":7.273772,"GYD":207.982754,"HKD":7.818095,"HNL":23.185416,"HRK":6.220699,"HTG":64.949009,"HUF":255.264,"IDR":13338.527156,"ILS":3.5834,"IMP":0.776452,"INR":63.856,"IQD":1156.7,"IRR":32876.5,"ISK":105.1,"JEP":0.776452,"JMD":127.899589,"JOD":0.709001,"JPY":109.445,"KES":103.183661,"KGS":68.465363,"KHR":4070,"KMF":416.95,"KPW":900,"KRW":1121.55,"KWD":0.302108,"KYD":0.833054,"KZT":330.578046,"LAK":8301,"LBP":1494.65,"LKR":151.667257,"LRD":114.925,"LSL":13.033945,"LYD":1.369587,"MAD":9.42867,"MDL":17.906796,"MGA":2931.45,"MKD":51.929662,"MMK":1351.274087,"MNT":2431.919885,"MOP":8.054724,"MRO":363.5,"MUR":33.165667,"MVR":15.450233,"MWK":725.475,"MXN":17.6163,"MYR":4.2725,"MZN":60.994761,"NAD":13.005,"NGN":356.05161,"NIO":29.905,"NOK":7.753115,"NPR":102.425565,"NZD":1.381502,"OMR":0.385088,"PAB":1,"PEN":3.2385,"PGK":3.153907,"PHP":51.086,"PKR":104.456445,"PLN":3.573922,"PYG":5589.75,"QAR":3.680008,"RON":3.856526,"RSD":99.917,"RUB":58.615,"RWF":820.996237,"SAR":3.7502,"SBD":7.807077,"SCR":13.6395,"SDG":6.68,"SEK":7.965985,"SGD":1.3558,"SHP":0.776452,"SLL":7539.799473,"SOS":573.300573,"SRD":7.438,"SSP":125.4582,"STD":20666.68041,"SVC":8.747084,"SYP":514.95499,"SZL":13.037455,"THB":33.2615,"TJS":8.811894,"TMT":3.50998,"TND":2.4274,"TOP":2.232294,"TRY":3.43891,"TTD":6.722321,"TWD":30.158,"TZS":2240.15,"UAH":25.329054,"UGX":3619.658069,"USD":1,"UYU":28.649937,"UZS":4202.5,"VEF":10.099404,"VND":22724.232876,"VUV":105.465864,"WST":2.514233,"XAF":550.068767,"XAG":0.05863408,"XAU":0.00077447,"XCD":2.70255,"XDR":0.708581,"XOF":550.068767,"XPD":0.0010783,"XPF":100.068548,"XPT":0.00102517,"YER":250.325,"ZAR":13.019645,"ZMW":8.970282,"ZWL":322.355011}}