Added lipsum data support

package.json

@@ -16,6 +16,7 @@
     "react-dom": "^16.5.2",
     "react-faux-dom": "^4.2.0",
     "react-fontawesome": "^1.6.1",
+    "react-load-script": "^0.0.6",
     "react-redux": "^5.0.7",
     "react-router": "^4.3.1",
     "react-router-redux": "^4.0.8",

public/scripts/ipsum-salt/shakespeare-data.js

@@ -0,0 +1,3 @@
+import {
+  Shakespeare
+} from '//cdn.jsdelivr.net/npm/shakespeare-data@3.0.0/lib/shakespeare.js';

src/App.js

@@ -3,7 +3,14 @@ import './App.css';
 import './checkbox.css';
 
 import { library } from '@fortawesome/fontawesome-svg-core';
-import { faHandPointer, faFile } from '@fortawesome/free-solid-svg-icons';
+import {
+  faExclamationTriangle,
+  faFile,
+  faFont,
+  faHandPointer,
+  faSpinner,
+  faThumbsUp,
+} from '@fortawesome/free-solid-svg-icons';
 
 import {
   Navbar,
@@ -19,12 +26,24 @@ import {
 
 import {
   AcidTrailChartsContainer,
+  ClearButtonContainer,
   EnterStringContainer,
   FileChooserContainer,
   HashButtonContainer
 } from './containers';
 
-library.add(faHandPointer, faFile);
+import {
+  IpsumSaltContainer
+} from './containers';
+
+library.add(
+  faExclamationTriangle,
+  faFile,
+  faFont,
+  faHandPointer,
+  faSpinner,
+  faThumbsUp
+);
 
 class App extends Component {
   constructor (props) {
@@ -64,12 +83,16 @@ class App extends Component {
                 <p>An ACID trail is an Associated Color ID for a file or other
                   arbitrary data.</p>
                 <AcidTrailChartsContainer>
-                  <HashButtonContainer/>
+                  <div className="buttons-container">
+                    <HashButtonContainer/>
+                    <ClearButtonContainer/>
+                  </div>
                 </AcidTrailChartsContainer>
                 <div className="data-container">
                   <EnterStringContainer/>
                   <FileChooserContainer/>
                 </div>
+                <IpsumSaltContainer />
               </Col>
             </Row>
           </Container>

src/actions/acid-trail.js

@@ -1,7 +1,9 @@
 const CHANGE_SHOWBARS = Symbol('CHANGE_SHOWBARS');
+const CHANGE_SHOWSHAPE = Symbol('CHANGE_SHOWSHAPE');
 
 export const types = {
-  CHANGE_SHOWBARS
+  CHANGE_SHOWBARS,
+  CHANGE_SHOWSHAPE
 };
 
 export const createChangeShowBarsAction = (bar, checked) => {
@@ -13,8 +15,18 @@ export const createChangeShowBarsAction = (bar, checked) => {
   };
 };
 
+export const createChangeShowShapeAction = (shape) => {
+  return {
+    type:     CHANGE_SHOWSHAPE,
+    payload:  {
+      shape
+    }
+  };
+};
+
 export const actions = {
-  createChangeShowBarsAction
+  createChangeShowBarsAction,
+  createChangeShowShapeAction
 };
 
 export default {

src/actions/hasher.js

@@ -1,11 +1,13 @@
 const CHOOSE_FILES = Symbol('CHOOSE_FILES');
 const ENTER_STRING = Symbol('ENTER_STRING');
+const CLEAR = Symbol('CLEAR');
 const START_HASH = Symbol('START_HASH');
 const FINISH_HASH = Symbol('FINISH_HASH');
 
 export const types = {
   CHOOSE_FILES,
   ENTER_STRING,
+  CLEAR,
   START_HASH,
   FINISH_HASH
 };
@@ -28,6 +30,15 @@ export const createEnterStringAction = (string) => {
   };
 };
 
+export const createClearAction = () => {
+  return {
+    type:     CLEAR,
+    payload: {
+      clear: true
+    }
+  };
+};
+
 export const createStartHashAction = () => {
   return {
     type:     START_HASH,
@@ -47,6 +58,7 @@ export const createFinishHashAction = (payload) => {
 export const actions = {
   createChooseFilesAction,
   createEnterStringAction,
+  createClearAction,
   createStartHashAction,
   createFinishHashAction,
 };

src/checkbox.css

@@ -8,7 +8,7 @@
   width: 30px;
   height: 10px;
   background: #555;
-  margin: 20px 20px;
+  margin: 10px 15px;
   position: relative;
   border-radius: 3px;
 }

src/components/AcidTrailChart/AcidTrailChart.css

@@ -0,0 +1,10 @@
+.color-text {
+  fill: white;
+  stroke: #000;
+  stroke-width: 1;
+  stroke-linejoin: round;
+  paint-order: stroke;
+  font-weight: bold;
+  font-size: 65%;
+  stroke-opacity: 0.3;
+}