4 files changed, 77 insertions, 17 deletions
diff --git a/src/js/cms-preview-templates/components/jumbotron.js b/src/js/cms-preview-templates/components/jumbotron.js
new file mode 100644
index 0000000..cb14df9
--- /dev/null
+++ b/src/js/cms-preview-templates/components/jumbotron.js
@@ -0,0 +1,24 @@
+import React from "react";
+
+export default class Jumbotron extends React.Component {
+  render() {
+    const {image, title} = this.props;
+    return <div>
+      <div className="pv5 pv6-l ph3 bg-center cover" style={{
+        backgroundImage: image && `url(${image})`
+      }}>
+        <div className="mw7 center ph3">
+          <div className="db mb3">
+            <div className="mw7 relative bg-fix-primary mb3">
+              <h1 className="f2 f1-l b di lh-title mb3 white mw6 bg-primary">
+                { title }
+              </h1>
+            </div>
+            <div className="mw7 relative bg-fix-primary">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>;
+  }
+}
diff --git a/src/js/cms-preview-templates/products.js b/src/js/cms-preview-templates/products.js
index 547ff33..4316c7d 100644
--- a/src/js/cms-preview-templates/products.js
+++ b/src/js/cms-preview-templates/products.js
@@ -1,9 +1,11 @@
 import React from "react";
 import format from "date-fns/format";
 
+import Jumbotron from "./components/jumbotron";
+
 export default class PostPreview extends React.Component {
   render() {
-    const {entry, getAsset, widgetFor} = this.props;
+    const {entry, getAsset} = this.props;
     let image = getAsset(entry.getIn(["data", "image"]));
 
     // Bit of a nasty hack to make relative paths work as expected as a background image here
@@ -12,21 +14,7 @@ export default class PostPreview extends React.Component {
     }
 
     return <div>
-      <div className="pv5 pv6-l ph3 bg-center cover" style={{
-        backgroundImage: image && `url(${image})`
-      }}>
-        <div className="mw7 center ph3">
-          <div className="db mb3">
-            <div className="mw7 relative bg-fix-primary mb3">
-              <h1 className="f2 f1-l b di lh-title mb3 white mw6 bg-primary">
-                { entry.getIn(["data", "title"]) }
-              </h1>
-            </div>
-            <div className="mw7 relative bg-fix-primary">
-            </div>
-          </div>
-        </div>
-      </div>
+      <Jumbotron image={image} title={entry.getIn(["data", "title"])} />
 
       <div className="bg-off-white pv4">
         <div className="ph3 mw7 center">
@@ -34,7 +22,7 @@ export default class PostPreview extends React.Component {
           <p className="mb4 mw6">{entry.getIn(["data", "intro", "description"])}</p>
 
           <div className="flex-ns flex-wrap mhn2-ns mb3">
-            {(entry.getIn(["data","intro", "blurbs"]) || []).map((blurb, index) => <div className="ph2-ns w-50-ns mb4" key={index}>
+            {(entry.getIn(["data", "intro", "blurbs"]) || []).map((blurb, index) => <div className="ph2-ns w-50-ns mb4" key={index}>
               <img src={blurb.get("image") && getAsset(blurb.get("image"))} alt="" className="center db mb3" style={{width: "240px"}}/>
               <p>{blurb.get("text")}</p>
             </div>)}
diff --git a/src/js/cms-preview-templates/values.js b/src/js/cms-preview-templates/values.js
new file mode 100644
index 0000000..173d0c9
--- /dev/null
+++ b/src/js/cms-preview-templates/values.js
@@ -0,0 +1,46 @@
+import React from "react";
+import { List } from 'immutable';
+
+import Jumbotron from "./components/jumbotron";
+
+const MediaBlock = ({heading, text, imageUrl, reverse}) => {
+  const imageContainerClassName = reverse
+    ? "ph3-m w-50-m"
+    : "ph3-m w-50-m order-last-m";
+  return <div className="flex-m mhn3-m mb4">
+    <div className={imageContainerClassName}>
+      <img src={imageUrl} alt="" className="db mb2" />
+    </div>
+    <div className="ph3-m w-50-m">
+      <h3 className="f3 b lh-title mb1">{heading}</h3>
+      <p>{text}</p>
+    </div>
+  </div>;
+};
+
+export default class ValuesPreview extends React.Component {
+  render() {
+    const {entry, getAsset} = this.props;
+    
+    let image = getAsset(entry.getIn(["data", "image"]));
+
+    // Bit of a nasty hack to make relative paths work as expected as a background image here
+    if (image && !image.fileObj) {
+      image = window.parent.location.protocol + "//" + window.parent.location.host + image;
+    }
+    
+    const entryValues = entry.getIn(["data", "values"]);
+    const values = entryValues ? entryValues.toJS() : [];
+    
+    return <div>
+      <Jumbotron image={image} title={entry.getIn(["data", "title"])} />
+      <div className="bg-off-white pv4">
+        <div className="mw7 center ph3 pt4">
+          {values.map(({text, heading, imageUrl}, i) =>
+            <MediaBlock key={i} text={text} heading={heading} imageUrl={imageUrl} reverse={i % 2 === 0} />
+          )}
+        </div>
+      </div>
+    </div>;
+  }
+}
diff --git a/src/js/cms.js b/src/js/cms.js
index 8502ed0..5bc6e65 100644
--- a/src/js/cms.js
+++ b/src/js/cms.js
@@ -3,6 +3,7 @@ import CMS from "netlify-cms";
 
 import PostPreview from "./cms-preview-templates/post";
 import ProductsPreview from "./cms-preview-templates/products";
+import ValuesPreview from "./cms-preview-templates/values";
 
 
 // Example of creating a custom color widget
@@ -20,4 +21,5 @@ class ColorControl extends React.Component {
 CMS.registerPreviewStyle("/css/main.css");
 CMS.registerPreviewTemplate("post", PostPreview);
 CMS.registerPreviewTemplate("products", ProductsPreview);
+CMS.registerPreviewTemplate("values", ValuesPreview);
 CMS.registerWidget("color", ColorControl);