[generator-emakinacee-react] adapt sample components to use css-modules

packages/generator-emakinacee-react/generators/app/templates/static/src/components/App/App.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Home from '../Home/Home';
 import logo from './logo.svg';
-import './App.scss';
+import styles from './App.module.scss';
 
 /**
  * APP
@@ -10,9 +10,9 @@ import './App.scss';
  */
 const App = () => {
     return (
-        <div className="c-app">
-            <div className="c-app__header">
-                <img src={logo} className="c-app__logo" alt="logo" />
+        <div className={styles.app}>
+            <div className={styles.header}>
+                <img src={logo} className={styles.logo} alt="logo" />
                 <h2>Welcome to React</h2>
             </div>
 

packages/generator-emakinacee-react/generators/app/templates/static/src/components/App/App.module.scss

@@ -0,0 +1,28 @@
+@import "../../scss/base-imports";
+
+.app {
+    @include mq($from: tablet) {
+        text-align: center;
+    }
+}
+
+.logo {
+    animation: app-logo-spin infinite 20s linear;
+    height: rem(80);
+}
+
+.header {
+    background-color: map_get($color-greyscale, darkest);
+    height: rem(150);
+    padding: rem(20);
+    color: map_get($color-greyscale, white);
+}
+
+.intro {
+    font-size: large;
+}
+
+@keyframes app-logo-spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}

packages/generator-emakinacee-react/generators/app/templates/static/src/components/Home/Home.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from '@cerebral/react';
 import { state } from 'cerebral/tags';
-import './Home.scss';
+import styles from './Home.scss';
 
 /**
  * HOME
@@ -10,9 +10,9 @@ import './Home.scss';
  */
 const Home = ({ title }) => {
     return (
-        <div className="c-home">
+        <div>
             <h1>{title}</h1>
-            <p className="c-home__intro">
+            <p className={styles.intro}>
                 To get started, edit <code>src/App.js</code> and save to reload.
             </p>
         </div>

packages/generator-emakinacee-react/generators/app/templates/static/src/components/Home/Home.module.scss

@@ -0,0 +1,3 @@
+.intro {
+    font-size: large;
+}