Merge pull request #31 from codaco/feature/loading-spinner

Feature/loading spinner

Author: jthrilly

bin/dev-server.js

@@ -3,4 +3,4 @@ const server = require('../server/main');
 const debug = require('debug')('app:bin:dev-server');
 
 server.listen(project.server_port);
-debug(`Server is now running at http://localhost:${project.server_port}.`);
+debug(`Server is now running at http://${project.server_host}:${project.server_port}.`);

config/project.config.js

@@ -26,7 +26,7 @@ const config = {
   // ----------------------------------
   // Server Configuration
   // ----------------------------------
-  server_host : 'localhost', // use string 'localhost' to prevent exposure on local network
+  server_host : ip.address(), // use string 'localhost' to prevent exposure on local network
   server_port : process.env.PORT || 8080,
 
   // ----------------------------------

docs/containers/AppLayout.js

@@ -22,24 +22,28 @@ class AppLayout extends Component {
     },
     {
       title: 'Typography',
-      href: 'typography'
+      href: 'typography',
+    },
+    {
+      title: 'Spinners',
+      href: 'spinners',
     },
     {
       title: 'Color',
-      href: 'color'
+      href: 'color',
     },
     {
       title: 'Buttons',
-      href: 'buttons'
+      href: 'buttons',
     },
     {
       title: 'Icons',
-      href: 'icons'
+      href: 'icons',
     },
     {
       title: 'Form',
-      href: 'form'
-    }
+      href: 'form',
+    },
   ];
 
   toggleSideNav = () => {

docs/containers/SpinnerPage.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import { Spinner } from 'Components';
+
+class SpinnerPage extends Component {
+  render() {
+    return (
+      <div className="grid__container">
+        <h1>Network Canvas | Spinners</h1>
+        <div className="grid__container">
+          <h2 className="type--page-divider">Sizes</h2>
+          <h3 className="type--page-title--large">Small</h3>
+          <Spinner small />
+          <h3 className="type--page-title--large">Standard</h3>
+          <Spinner />
+          <h3 className="type--page-title--large">Large</h3>
+          <Spinner large />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default SpinnerPage;

docs/containers/TypographyPage.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { Spinner } from 'Components';
 
 class TypographyPage extends Component {
   render() {
@@ -7,7 +8,7 @@ class TypographyPage extends Component {
         <h1>Network Canvas | Typography</h1>
         <div className="grid__container">
           <h2 className="type--page-divider">Typefaces</h2>
-          <h3 className="type--page-title-large">Primary Typeface</h3>
+          <h3 className="type--page-title--large">Primary Typeface</h3>
           <h3 className="type--page-title--large">Circular Pro</h3>
           <h3 className="type--section-header--large typography__sample">ABCDEFGHIJKLM</h3>
           <h3 className="type--section-header--large typography__sample">abcdefghijklm</h3>

docs/containers/index.js

@@ -6,3 +6,4 @@ export FormPage from './FormPage';
 export HomePage from './HomePage';
 export IconsPage from './IconsPage';
 export TypographyPage from './TypographyPage';
+export SpinnerPage from './SpinnerPage';

docs/routes.js

@@ -7,16 +7,18 @@ import {
   FormPage,
   HomePage,
   IconsPage,
-  TypographyPage
-} from 'containers';
+  TypographyPage,
+  SpinnerPage,
+} from './containers';
 
 export default (
-	<Route path="/" component={AppLayout}>
-		<IndexRoute component={HomePage} />
+  <Route path="/" component={AppLayout}>
+    <IndexRoute component={HomePage} />
     <Route path="/buttons" component={ButtonsPage} />
     <Route path="/color" component={ColorPage} />
     <Route path="/icons" component={IconsPage} />
-		<Route path="/typography" component={TypographyPage} />
+    <Route path="/typography" component={TypographyPage} />
     <Route path="/form" component={FormPage} />
-	</Route>
+    <Route path="/spinners" component={SpinnerPage} />
+  </Route>
 );

docs/styles/main.scss

@@ -89,6 +89,8 @@ $app-content-padding: 70px;
   display: flex;
   overflow: hidden;
   position: relative;
+  color: palette('text');
+  background: palette('background');
 
   &__content {
     position: absolute;