Improve documentation

Author: markdalgleish

src/components/App.js

@@ -1,11 +1,9 @@
 import React, { Component } from 'react';
 
-import HelloWorld from './HelloWorld/HelloWorld';
-import FooBar from './FooBar/FooBar';
-
+import ScopedSelectors from './ScopedSelectors/ScopedSelectors';
+import ClassInheritance from './ClassInheritance/ClassInheritance';
 import InheritanceOverrides from './InheritanceOverrides/InheritanceOverrides';
-
-import BouncingBall from './BouncingBall/BouncingBall';
+import ScopedAnimations from './ScopedAnimations/ScopedAnimations';
 
 export default class App extends Component {
 
@@ -14,23 +12,27 @@ export default class App extends Component {
       <div>
         <h1>CSS Modules Example</h1>
 
-        <p>Below we have two components: <strong>HelloWorld</strong> and <strong>FooBar</strong>.</p>
-        <p>Both of these components have <strong>locally scoped CSS</strong> that inherit from a common set of CSS Modules.</p>
-        <p>Since CSS Modules can be composed, the resulting markup is optimised by <b>reusing classes between components</b>.</p>
+        <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>
+        <ScopedSelectors />
 
-        <HelloWorld />
-        <br />
-        <FooBar />
+        <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 CSS Modules can be composed, the resulting markup is optimised by <b>reusing classes between components</b>.</p>
+        <ClassInheritance />
 
+        <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 />
 
-        <p>CSS Modules even provide <strong>locally scoped animations</strong>, which are typically defined in the global scope.</p>
-        <p>The following <strong>BouncingBall</strong> component extends a <strong>".bounce"</strong> class from a separate animations module.</p>
-        <p>The <strong>"bounce"</strong> keyframes are private to the animations module, only exposed via the <strong>".bounce"</strong> class to those that either extend from it or import it.</p>
+        <h2>Scoped Animations</h2>
 
-        <BouncingBall />
+        <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 />
 
       </div>
     );

src/components/ClassInheritance/ClassInheritance.js

@@ -0,0 +1,18 @@
+import React, { Component } from 'react';
+
+import StyleVariantA from './StyleVariantA/StyleVariantA';
+import StyleVariantB from './StyleVariantB/StyleVariantB';
+
+export default class ClassInheritance extends Component {
+
+  render() {
+    return (
+      <div>
+        <StyleVariantA />
+        <br />
+        <StyleVariantB />
+      </div>
+    );
+  }
+
+};

src/components/HelloWorld/HelloWorld.css renamed to src/components/ClassInheritance/StyleVariantA/StyleVariantA.css

@@ -0,0 +1,15 @@
+import styles from './StyleVariantA.css';
+
+import React, { Component } from 'react';
+
+export default class StyleVariantA extends Component {
+
+  render() {
+    return (
+      <div className={styles.root}>
+        <p className={styles.text}>Style Variant A</p>
+      </div>
+    );
+  }
+
+};

src/components/ClassInheritance/StyleVariantA/StyleVariantA.js

@@ -0,0 +1,15 @@
+import styles from './StyleVariantB.css';
+
+import React, { Component } from 'react';
+
+export default class StyleVariantB extends Component {
+
+  render() {
+    return (
+      <div className={styles.root}>
+        <p className={styles.text}>Style Variant B</p>
+      </div>
+    );
+  }
+
+};

src/components/FooBar/FooBar.css renamed to src/components/ClassInheritance/StyleVariantB/StyleVariantB.css

@@ -1,8 +1,8 @@
-import styles from './BouncingBall.css';
+import styles from './ScopedAnimations.css';
 
 import React, { Component } from 'react';
 
-export default class BouncingBall extends Component {
+export default class ScopedAnimations extends Component {
 
   render() {
     return (