Show output inside snippet component

Author: markdalgleish

src/components/1-ScopedSelectors/ScopedSelectorsDemo.js

@@ -9,16 +9,15 @@ import Snippet from 'shared/Snippet/Snippet';
 export default class ScopedSelectorsDemo extends Component {
 
   render() {
+    const files = [
+      { name: 'ScopedSelectors.js', source: js },
+      { name: 'ScopedSelectors.css', source: css }
+    ];
+
     return (
-      <div>
-        <br />
+      <Snippet files={files}>
         <ScopedSelectors />
-        <br />
-        <Snippet files={[
-          { name: 'ScopedSelectors.js', source: js },
-          { name: 'ScopedSelectors.css', source: css }
-        ]} />
-      </div>
+      </Snippet>
     );
   }
 

src/components/2-GlobalSelectors/GlobalSelectorsDemo.js

@@ -9,16 +9,15 @@ import Snippet from 'shared/Snippet/Snippet';
 export default class GlobalSelectorsDemo extends Component {
 
   render() {
+    const files = [
+      { name: 'GlobalSelectors.js', source: js },
+      { name: 'GlobalSelectors.css', source: css }
+    ];
+
     return (
-      <div>
-        <br />
+      <Snippet files={files}>
         <GlobalSelectors />
-        <br />
-        <Snippet files={[
-          { name: 'GlobalSelectors.js', source: js },
-          { name: 'GlobalSelectors.css', source: css }
-        ]} />
-      </div>
+      </Snippet>
     );
   }
 

src/components/3-ClassInheritance/ClassInheritanceDemo.js

@@ -3,24 +3,25 @@ import ClassInheritance from './ClassInheritance';
 import React, { Component } from 'react';
 
 import js from '!!raw!./StyleVariantA/StyleVariantA.js';
-import css_a from '!!raw!./StyleVariantA/StyleVariantA.css';
-import css_b from '!!raw!./StyleVariantB/StyleVariantB.css';
+import css from '!!raw!./StyleVariantA/StyleVariantA.css';
+import layoutCss from '!!raw!shared/styles/layout.css';
+import typographyCss from '!!raw!shared/styles/typography.css';
 import Snippet from 'shared/Snippet/Snippet';
 
 export default class ClassInheritanceDemo extends Component {
 
   render() {
+    const files = [
+      { name: 'StyleVariantA.js', source: js },
+      { name: 'StyleVariantA.css', source: css },
+      { name: 'shared/styles/layout.css', source: layoutCss },
+      { name: 'shared/styles/typography.css', source: typographyCss }
+    ];
+
     return (
-      <div>
-        <br />
+      <Snippet files={files}>
         <ClassInheritance />
-        <br />
-        <Snippet files={[
-          { name: 'StyleVariantA.js', source: js },
-          { name: 'StyleVariantA.css', source: css_a },
-          { name: 'StyleVariantB.css', source: css_b }
-        ]} />
-      </div>
+      </Snippet>
     );
   }
 

src/components/4-InheritanceOverrides/InheritanceOverridesDemo.js

@@ -9,16 +9,15 @@ import Snippet from 'shared/Snippet/Snippet';
 export default class InheritanceOverridesDemo extends Component {
 
   render() {
+    const files = [
+      { name: 'InheritanceOverrides.js', source: js },
+      { name: 'InheritanceOverrides.css', source: css }
+    ];
+
     return (
-      <div>
-        <br />
+      <Snippet files={files}>
         <InheritanceOverrides />
-        <br />
-        <Snippet files={[
-          { name: 'InheritanceOverrides.js', source: js },
-          { name: 'InheritanceOverrides.css', source: css }
-        ]} />
-      </div>
+      </Snippet>
     );
   }
 

src/components/5-ScopedAnimations/ScopedAnimationsDemo.js

@@ -9,16 +9,15 @@ import Snippet from 'shared/Snippet/Snippet';
 export default class ScopedAnimationsDemo extends Component {
 
   render() {
+    const files = [
+      { name: 'ScopedAnimations.js', source: js },
+      { name: 'ScopedAnimations.css', source: css }
+    ];
+
     return (
-      <div>
-        <br />
+      <Snippet files={files}>
         <ScopedAnimations />
-        <br />
-        <Snippet files={[
-          { name: 'ScopedAnimations.js', source: js },
-          { name: 'ScopedAnimations.css', source: css }
-        ]} />
-      </div>
+      </Snippet>
     );
   }
 

src/components/shared/Snippet/Snippet.css

@@ -1,3 +1,21 @@
+.root {
+  margin-top: 32px;
+}
+
+.output {
+  background: white;
+  color: #333;
+  max-width: 700px;
+  border-radius: 10px;
+  margin-bottom: 20px;
+  border: 1px solid #003957;
+  border-top-width: 0;
+}
+
+.outputContent {
+  padding: 40px 30px;
+}
+
 .file {
   background: #003957;
   color: rgba(255, 255, 255, 0.9);

src/components/shared/Snippet/Snippet.js

@@ -6,7 +6,15 @@ export default class Snippet extends Component {
 
   render() {
     return (
-      <div>
+      <div className={styles.root}>
+
+        <div className={styles.output}>
+          <div className={styles.fileName}>Output</div>
+          <div className={styles.outputContent}>
+            { this.props.children }
+          </div>
+        </div>
+
         {
           this.props.files.map(file => (
             <div key={file.name} className={styles.file}>
@@ -15,6 +23,7 @@ export default class Snippet extends Component {
             </div>
           ))
         }
+
       </div>
     );
   }