Show code snippets for scoped and global selectors

Author: markdalgleish

package.json

@@ -28,6 +28,7 @@
     "node-libs-browser": "^0.5.0",
     "postcss-color-rebeccapurple": "^1.1.0",
     "postcss-loader": "^0.4.3",
+    "raw-loader": "^0.5.1",
     "react": "^0.13.3",
     "react-to-html-webpack-plugin": "^2.1.0",
     "style-loader": "^0.12.3",

src/components/1-ScopedSelectors/ScopedSelectors.js

@@ -6,8 +6,8 @@ export default class ScopedSelectors extends Component {
 
   render() {
     return (
-      <div className={styles.root}>
-        <p className={styles.text}>Scoped Selectors</p>
+      <div className={ styles.root }>
+        <p className={ styles.text }>Scoped Selectors</p>
       </div>
     );
   }

src/components/1-ScopedSelectors/ScopedSelectorsDemo.js

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

src/components/2-GlobalSelectors/GlobalSelectors.js

@@ -6,7 +6,7 @@ export default class GlobalSelectors extends Component {
 
   render() {
     return (
-      <div className={styles.root}>
+      <div className={ styles.root }>
         <p>Global Selectors</p>
       </div>
     );

src/components/2-GlobalSelectors/GlobalSelectorsDemo.js

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

src/components/3-ClassInheritance/StyleVariantA/StyleVariantA.css

@@ -1,9 +1,9 @@
 .root {
-  extends: box from "styles/layout.css";
+  extends: box from "shared/styles/layout.css";
   border-color: red;
 }
 
 .text {
-  extends: heading from "styles/typography.css";
+  extends: heading from "shared/styles/typography.css";
   color: red;
 }

src/components/3-ClassInheritance/StyleVariantB/StyleVariantB.css

@@ -1,9 +1,9 @@
 .root {
-  extends: box from "styles/layout.css";
+  extends: box from "shared/styles/layout.css";
   border-color: blue;
 }
 
 .text {
-  extends: heading from "styles/typography.css";
+  extends: heading from "shared/styles/typography.css";
   color: blue;
 }

src/components/4-InheritanceOverrides/InheritanceOverrides.css

@@ -1,11 +1,11 @@
 .root {
-  extends: box from "styles/layout.css";
+  extends: box from "shared/styles/layout.css";
   border-style: dotted;
   border-color: green;
 }
 
 .text {
-  extends: heading from "styles/typography.css";
+  extends: heading from "shared/styles/typography.css";
   font-weight: 200;
   color: green;
 }

src/components/5-ScopedAnimations/ScopedAnimations.css

@@ -3,7 +3,7 @@
 }
 
 .ball {
-  extends: bounce from "styles/animations.css";
+  extends: bounce from "shared/styles/animations.css";
   width: 40px;
   height: 40px;
   border-radius: 20px;

src/components/App.css

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