Add remaining code snippets, tweak styling

Author: markdalgleish

src/components/1-ScopedSelectors/ScopedSelectorsDemo.js

@@ -11,7 +11,9 @@ export default class ScopedSelectorsDemo extends Component {
   render() {
     return (
       <div>
+        <br />
         <ScopedSelectors />
+        <br />
         <Snippet js={js} css={css} />
       </div>
     );

src/components/2-GlobalSelectors/GlobalSelectorsDemo.js

@@ -11,7 +11,9 @@ export default class GlobalSelectorsDemo extends Component {
   render() {
     return (
       <div>
+        <br />
         <GlobalSelectors />
+        <br />
         <Snippet js={js} css={css} />
       </div>
     );

src/components/3-ClassInheritance/ClassInheritanceDemo.js

@@ -0,0 +1,22 @@
+import ClassInheritance from './ClassInheritance';
+
+import React, { Component } from 'react';
+
+import js from '!!raw!./StyleVariantA/StyleVariantA.js';
+import css from '!!raw!./StyleVariantA/StyleVariantA.css';
+import Snippet from 'shared/Snippet/Snippet';
+
+export default class ClassInheritanceDemo extends Component {
+
+  render() {
+    return (
+      <div>
+        <br />
+        <ClassInheritance />
+        <br />
+        <Snippet js={js} css={css} />
+      </div>
+    );
+  }
+
+};

src/components/4-InheritanceOverrides/InheritanceOverridesDemo.js

@@ -0,0 +1,22 @@
+import InheritanceOverrides from './InheritanceOverrides';
+
+import React, { Component } from 'react';
+
+import js from '!!raw!./InheritanceOverrides.js';
+import css from '!!raw!./InheritanceOverrides.css';
+import Snippet from 'shared/Snippet/Snippet';
+
+export default class InheritanceOverridesDemo extends Component {
+
+  render() {
+    return (
+      <div>
+        <br />
+        <InheritanceOverrides />
+        <br />
+        <Snippet js={js} css={css} />
+      </div>
+    );
+  }
+
+};

src/components/5-ScopedAnimations/ScopedAnimationsDemo.js

@@ -0,0 +1,22 @@
+import ScopedAnimations from './ScopedAnimations';
+
+import React, { Component } from 'react';
+
+import js from '!!raw!./ScopedAnimations.js';
+import css from '!!raw!./ScopedAnimations.css';
+import Snippet from 'shared/Snippet/Snippet';
+
+export default class ScopedAnimationsDemo extends Component {
+
+  render() {
+    return (
+      <div>
+        <br />
+        <ScopedAnimations />
+        <br />
+        <Snippet js={js} css={css} />
+      </div>
+    );
+  }
+
+};

src/components/App.css

@@ -4,3 +4,10 @@
   line-height: 24px;
   padding: 6px 20px 30px;
 }
+
+.hr {
+  margin: 40px 0;
+  height: 1px;
+  border: 0;
+  background: #ccc;
+}

src/components/App.js

@@ -5,9 +5,9 @@ import React, { Component } from 'react';
 import Logo from './0-Logo/Logo';
 import ScopedSelectorsDemo from './1-ScopedSelectors/ScopedSelectorsDemo';
 import GlobalSelectorsDemo from './2-GlobalSelectors/GlobalSelectorsDemo';
-import ClassInheritance from './3-ClassInheritance/ClassInheritance';
-import InheritanceOverrides from './4-InheritanceOverrides/InheritanceOverrides';
-import ScopedAnimations from './5-ScopedAnimations/ScopedAnimations';
+import ClassInheritanceDemo from './3-ClassInheritance/ClassInheritanceDemo';
+import InheritanceOverridesDemo from './4-InheritanceOverrides/InheritanceOverridesDemo';
+import ScopedAnimationsDemo from './5-ScopedAnimations/ScopedAnimationsDemo';
 
 export default class App extends Component {
 
@@ -17,31 +17,41 @@ export default class App extends Component {
         <Logo />
         <h1>CSS Modules Webpack Demo</h1>
 
+        <hr className={styles.hr} />
+
         <h2>Scoped Selectors</h2>
         <p>In CSS Modules, selectors are scoped by default.</p>
         <p>The following component uses two classes, <strong>.root</strong> and <strong>.text</strong>, both of which would typically be too vague in a larger project.</p>
         <p>CSS Module semantics ensure that these <strong>classes are locally scoped</strong> to the component and don't collide with other classes in the global scope.</p>
         <ScopedSelectorsDemo />
 
+        <hr className={styles.hr} />
+
         <h2>Global Selectors</h2>
         <p>Although they should be used as sparingly as possible, <strong>global selectors are still available when required.</strong></p>
         <p>The following component styles all <strong>&lt;p&gt;</strong> tags nested inside it.</p>
         <GlobalSelectorsDemo />
 
+        <hr className={styles.hr} />
+
         <h2>Class Inheritance</h2>
         <p>Both of the components below have <strong>locally scoped CSS</strong> that <strong>inherits from a common set of CSS Modules.</strong></p>
         <p>Since <strong>CSS Modules can be composed</strong>, the resulting markup is optimised by <b>reusing classes between components</b>.</p>
-        <ClassInheritance />
+        <ClassInheritanceDemo />
+
+        <hr className={styles.hr} />
 
         <h2>Inheritance Overrides</h2>
         <p>When extending classes, <strong>inherited style properties can be overridden</strong> as you'd expect.</p>
         <p>The following component extends two different classes, but provides overrides which then take precedence.</p>
-        <InheritanceOverrides />
+        <InheritanceOverridesDemo />
+
+        <hr className={styles.hr} />
 
         <h2>Scoped Animations</h2>
         <p>CSS Modules even provide <strong>locally scoped animations</strong>, which are typically defined in the global scope.</p>
         <p>The animation's keyframes are private to the animations module, only exposed publicly via a class which this component inherits from.</p>
-        <ScopedAnimations />
+        <ScopedAnimationsDemo />
 
       </div>
     );

src/components/shared/Snippet/Snippet.css

@@ -1,6 +1,11 @@
 .pre {
-  background: #222;
-  color: white;
+  background: #003957;
+  color: rgba(255, 255, 255, 0.9);
   padding: 20px;
-  max-width: 600px;
+  max-width: 700px;
+  border-radius: 10px;
+  overflow: auto;
+  font-family: menlo, consolas, monospace;
+  font-size: 14px;
+  line-height: 20px;
 }