Add file names to code snippets

Author: markdalgleish

src/components/1-ScopedSelectors/ScopedSelectorsDemo.js

@@ -14,7 +14,10 @@ export default class ScopedSelectorsDemo extends Component {
         <br />
         <ScopedSelectors />
         <br />
-        <Snippet js={js} css={css} />
+        <Snippet files={[
+          { name: 'ScopedSelectors.js', source: js },
+          { name: 'ScopedSelectors.css', source: css }
+        ]} />
       </div>
     );
   }

src/components/2-GlobalSelectors/GlobalSelectorsDemo.js

@@ -14,7 +14,10 @@ export default class GlobalSelectorsDemo extends Component {
         <br />
         <GlobalSelectors />
         <br />
-        <Snippet js={js} css={css} />
+        <Snippet files={[
+          { name: 'GlobalSelectors.js', source: js },
+          { name: 'GlobalSelectors.css', source: css }
+        ]} />
       </div>
     );
   }

src/components/3-ClassInheritance/ClassInheritanceDemo.js

@@ -3,7 +3,8 @@ import ClassInheritance from './ClassInheritance';
 import React, { Component } from 'react';
 
 import js from '!!raw!./StyleVariantA/StyleVariantA.js';
-import css from '!!raw!./StyleVariantA/StyleVariantA.css';
+import css_a from '!!raw!./StyleVariantA/StyleVariantA.css';
+import css_b from '!!raw!./StyleVariantB/StyleVariantB.css';
 import Snippet from 'shared/Snippet/Snippet';
 
 export default class ClassInheritanceDemo extends Component {
@@ -14,7 +15,11 @@ export default class ClassInheritanceDemo extends Component {
         <br />
         <ClassInheritance />
         <br />
-        <Snippet js={js} css={css} />
+        <Snippet files={[
+          { name: 'StyleVariantA.js', source: js },
+          { name: 'StyleVariantA.css', source: css_a },
+          { name: 'StyleVariantB.css', source: css_b }
+        ]} />
       </div>
     );
   }

src/components/4-InheritanceOverrides/InheritanceOverridesDemo.js

@@ -14,7 +14,10 @@ export default class InheritanceOverridesDemo extends Component {
         <br />
         <InheritanceOverrides />
         <br />
-        <Snippet js={js} css={css} />
+        <Snippet files={[
+          { name: 'InheritanceOverrides.js', source: js },
+          { name: 'InheritanceOverrides.css', source: css }
+        ]} />
       </div>
     );
   }

src/components/5-ScopedAnimations/ScopedAnimationsDemo.js

@@ -14,7 +14,10 @@ export default class ScopedAnimationsDemo extends Component {
         <br />
         <ScopedAnimations />
         <br />
-        <Snippet js={js} css={css} />
+        <Snippet files={[
+          { name: 'ScopedAnimations.js', source: js },
+          { name: 'ScopedAnimations.css', source: css }
+        ]} />
       </div>
     );
   }

src/components/App.css

@@ -1,7 +1,6 @@
 .app {
   font-family: helvetica, arial, sans-serif;
-  font-size: 16px;
-  line-height: 24px;
+  line-height: 200%;
   padding: 6px 20px 30px;
 }
 

src/components/shared/Snippet/Snippet.css

@@ -1,11 +1,22 @@
-.pre {
+.file {
   background: #003957;
   color: rgba(255, 255, 255, 0.9);
-  padding: 20px;
   max-width: 700px;
   border-radius: 10px;
+  margin-bottom: 20px;
+}
+
+.fileName {
+  background: #011E2D;
+  color: #00B37D;
+  padding: 10px 20px;
+  border-radius: 10px 10px 0 0;
+}
+
+.pre {
   overflow: auto;
   font-family: menlo, consolas, monospace;
   font-size: 14px;
   line-height: 20px;
+  padding: 5px 20px 20px;
 }

src/components/shared/Snippet/Snippet.js

@@ -7,8 +7,14 @@ export default class Snippet extends Component {
   render() {
     return (
       <div>
-        <pre className={styles.pre}>{ this.props.js }</pre>
-        <pre className={styles.pre}>{ this.props.css }</pre>
+        {
+          this.props.files.map(file => (
+            <div key={file.name} className={styles.file}>
+              <div className={styles.fileName}>{ file.name }</div>
+              <pre className={styles.pre}>{ file.source }</pre>
+            </div>
+          ))
+        }
       </div>
     );
   }