From 2907cd173bb045677b8f57560b0e0bcb3331d6c4 Mon Sep 17 00:00:00 2001
From: amdomanska <aga@resin.io>
Date: Wed, 12 Sep 2018 09:41:01 +0100
Subject: [PATCH] refactor(GUI): Convert Select Image button to Rendition

Convert Select Image button to Rendition component

Change-type: minor
Signed-off-by: amdomanska <aga@resin.io>
---
 .gitmodules                                   |   2 +-
 .../image-selector/image-selector.jsx         |  99 ++++
 .../app/components/image-selector/index.js    |  34 ++
 lib/gui/app/pages/main/main.js                |   1 +
 .../app/pages/main/templates/main.tpl.html    |  39 +-
 lib/gui/app/styled-components.js              |  41 +-
 npm-shrinkwrap.json                           | 488 ++++++++++--------
 package.json                                  |   2 +-
 8 files changed, 445 insertions(+), 261 deletions(-)
 create mode 100644 lib/gui/app/components/image-selector/image-selector.jsx
 create mode 100644 lib/gui/app/components/image-selector/index.js

diff --git a/.gitmodules b/.gitmodules
index e313652c..a3d773fc 100644
--- a/.gitmodules
+++ b/.gitmodules
@@ -1,3 +1,3 @@
 [submodule "scripts/resin"]
 	path = scripts/resin
-	url = git@github.com:resin-io/scripts.git
+	url = git@github.com:balena-io/scripts.git
diff --git a/lib/gui/app/components/image-selector/image-selector.jsx b/lib/gui/app/components/image-selector/image-selector.jsx
new file mode 100644
index 00000000..63aa8958
--- /dev/null
+++ b/lib/gui/app/components/image-selector/image-selector.jsx
@@ -0,0 +1,99 @@
+/*
+ * Copyright 2016 resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use strict'
+
+/* eslint-disable no-unused-vars */
+const React = require('react')
+const propTypes = require('prop-types')
+
+const middleEllipsis = require('./../../utils/middle-ellipsis')
+
+const { Provider } = require('rendition')
+
+const shared = require('./../../../../shared/units')
+const {
+  StepButton,
+  StepNameButton,
+  StepSelection,
+  Footer,
+  Underline,
+  DetailsText,
+  ChangeButton
+} = require('./../../styled-components')
+
+const SelectImageButton = (props) => {
+  if (props.hasImage) {
+    return (
+      <Provider>
+        <StepNameButton
+          plaintext
+          onClick={props.showSelectedImageDetails}
+          tooltip={props.imageBasename}
+        >
+          {/* eslint-disable no-magic-numbers */}
+          { middleEllipsis(props.imageName || props.imageBasename, 20) }
+        </StepNameButton>
+        <DetailsText>
+          {shared.bytesToClosestUnit(props.imageSize)}
+        </DetailsText>
+        { !props.flashing &&
+          <ChangeButton
+            plaintext
+            onClick={props.reselectImage}
+          >
+            Change
+          </ChangeButton>
+        }
+      </Provider>
+    )
+  }
+  return (
+    <Provider>
+      <StepSelection>
+        <StepButton
+          primary
+          onClick={props.openImageSelector}
+        >
+          Select image
+        </StepButton>
+        <Footer>
+          { props.mainSupportedExtensions.join(', ') }, and{' '}
+          <Underline
+            tooltip={ props.extraSupportedExtensions.join(', ') }
+          >
+            many more
+          </Underline>
+        </Footer>
+      </StepSelection>
+    </Provider>
+  )
+}
+
+SelectImageButton.propTypes = {
+  openImageSelector: propTypes.func,
+  mainSupportedExtensions: propTypes.array,
+  extraSupportedExtensions: propTypes.array,
+  hasImage: propTypes.bool,
+  showSelectedImageDetails: propTypes.func,
+  imageName: propTypes.string,
+  imageBasename: propTypes.string,
+  reselectImage: propTypes.func,
+  flashing: propTypes.bool,
+  imageSize: propTypes.number
+}
+
+module.exports = SelectImageButton
diff --git a/lib/gui/app/components/image-selector/index.js b/lib/gui/app/components/image-selector/index.js
new file mode 100644
index 00000000..facba54a
--- /dev/null
+++ b/lib/gui/app/components/image-selector/index.js
@@ -0,0 +1,34 @@
+/*
+ * Copyright 2016 resin.io
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+'use strict'
+
+/**
+ * @module Etcher.Components.ImageSelector
+ */
+
+const angular = require('angular')
+const { react2angular } = require('react2angular')
+
+const MODULE_NAME = 'Etcher.Components.ImageSelector'
+const SelectImageButton = angular.module(MODULE_NAME, [])
+
+SelectImageButton.component(
+  'imageSelector',
+  react2angular(require('./image-selector.jsx'))
+)
+
+module.exports = MODULE_NAME
diff --git a/lib/gui/app/pages/main/main.js b/lib/gui/app/pages/main/main.js
index fb26f506..97448c19 100644
--- a/lib/gui/app/pages/main/main.js
+++ b/lib/gui/app/pages/main/main.js
@@ -37,6 +37,7 @@ const MainPage = angular.module(MODULE_NAME, [
   require('../../components/tooltip-modal/tooltip-modal'),
   require('../../components/flash-error-modal/flash-error-modal'),
   require('../../components/progress-button'),
+  require('../../components/image-selector'),
   require('../../components/warning-modal/warning-modal'),
   require('../../components/file-selector'),
 
diff --git a/lib/gui/app/pages/main/templates/main.tpl.html b/lib/gui/app/pages/main/templates/main.tpl.html
index 13e15f66..b0f220ae 100644
--- a/lib/gui/app/pages/main/templates/main.tpl.html
+++ b/lib/gui/app/pages/main/templates/main.tpl.html
@@ -7,32 +7,19 @@
       </div>
 
       <div class="space-vertical-large">
-        <div ng-if="!main.selection.hasImage()">
-          <button
-            class="button button-primary button-brick"
-            tabindex="{{ main.selection.hasImage() ? -1 : 1 }}"
-            ng-click="image.openImageSelector()">Select image</button>
-
-          <p class="step-footer">
-            {{ ::image.mainSupportedExtensions.join(', ') }}, and
-            <span class="step-footer-underline"
-              uib-tooltip="{{ image.extraSupportedExtensions.join(', ') }}">others</span>
-          </p>
-        </div>
-        <div ng-if="main.selection.hasImage()">
-          <div class="step-selection-text">
-            <span
-              ng-click="main.showSelectedImageDetails()"
-              class="step-image step-name"
-              ng-bind="main.selection.getImageName() || image.getImageBasename() | middleEllipsis:20"
-              uib-tooltip="{{ image.getImageBasename() }}"></span>
-            <button class="button button-link step-footer"
-              tabindex="1"
-              ng-click="image.reselectImage()"
-              ng-hide="main.state.isFlashing()">Change</button>
-            <span class="step-image step-size">{{ main.selection.getImageSize() | closestUnit }}</span>
-          </div>
-        </div>
+        <image-selector
+          has-image="main.selection.hasImage()"
+          open-image-selector="image.openImageSelector"
+          main-supported-extensions="image.mainSupportedExtensions"
+          extra-supported-extensions="image.extraSupportedExtensions"
+          show-selected-image-details="main.showSelectedImageDetails"
+          image-name="main.selection.getImageName()"
+          image-basename="image.getImageBasename()"
+          reselect-image="image.reselectImage"
+          flashing="main.state.isFlashing()"
+          image-size="main.selection.getImageSize()"
+        >
+        </image-selector>
       </div>
     </div>
   </div>
diff --git a/lib/gui/app/styled-components.js b/lib/gui/app/styled-components.js
index 050339ef..8f4705d3 100644
--- a/lib/gui/app/styled-components.js
+++ b/lib/gui/app/styled-components.js
@@ -19,7 +19,7 @@
 const styled = require('styled-components').default
 const { colors, consts } = require('./theme')
 const {
-  Button, Flex
+  Button, Txt, Flex
 } = require('rendition')
 
 exports.StepButton = styled(Button) `
@@ -27,8 +27,6 @@ exports.StepButton = styled(Button) `
   max-width: ${consts.btnMaxWidth};
   margin: auto;
   overflow: hidden;
-  font-weight: normal;
-  letter-spacing: 0.5px;
 
   &:disabled {
     background-color: ${colors.dark.disabled.background};
@@ -40,8 +38,43 @@ exports.StepButton = styled(Button) `
   }
 `
 
+exports.ChangeButton = styled(Button) `
+  font-size: 12px;
+  color: ${colors.primary.background};
+  padding: 0;
+  width: 100%;
+
+  &:hover, &:focus, &:active {
+    color: ${colors.primary.background};
+  }
+`
+exports.StepNameButton = styled(Button) `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 39px;
+  width: 100%;
+  font-weight: bold;
+  color: ${colors.dark.foreground};
+
+  &:hover, &:focus, &:active{
+    color: ${colors.primary.foreground};
+  }
+`
 exports.StepSelection = styled(Flex) `
   flex-wrap: wrap;
   justify-content: center;
-  color: $palette-theme-dark-foreground;
+`
+exports.Footer = styled(Txt) `
+  margin-top: 10px;
+  color: ${colors.dark.disabled.foreground};
+  font-size: 10px;
+`
+exports.Underline = styled(Txt.span) `
+  border-bottom: 1px dotted;
+  padding-bottom: 2px;
+`
+exports.DetailsText = styled(Txt.p) `
+  color: ${colors.dark.disabled.foreground};
+  margin-bottom: 10px;
 `
diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json
index 7ca0e64b..9826928e 100644
--- a/npm-shrinkwrap.json
+++ b/npm-shrinkwrap.json
@@ -2,16 +2,6 @@
   "name": "etcher",
   "version": "1.4.6",
   "dependencies": {
-    "@babel/runtime": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.1.2.tgz",
-      "dependencies": {
-        "regenerator-runtime": {
-          "version": "0.12.1",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz"
-        }
-      }
-    },
     "@fortawesome/fontawesome-free-webfonts": {
       "version": "1.0.9",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free-webfonts/-/fontawesome-free-webfonts-1.0.9.tgz"
@@ -56,6 +46,10 @@
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/@types/lodash.memoize/-/lodash.memoize-4.1.4.tgz"
     },
+    "@types/marked": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@types/marked/-/marked-0.3.0.tgz"
+    },
     "@types/node": {
       "version": "10.12.0",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-10.12.0.tgz"
@@ -85,8 +79,8 @@
       "resolved": "https://registry.npmjs.org/@types/react-jsonschema-form/-/react-jsonschema-form-1.0.10.tgz"
     },
     "@types/recompose": {
-      "version": "0.24.7",
-      "resolved": "https://registry.npmjs.org/@types/recompose/-/recompose-0.24.7.tgz"
+      "version": "0.26.5",
+      "resolved": "https://registry.npmjs.org/@types/recompose/-/recompose-0.26.5.tgz"
     },
     "@types/semver": {
       "version": "5.5.0",
@@ -1196,10 +1190,6 @@
         "readable-stream": {
           "version": "2.3.6",
           "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz"
-        },
-        "string_decoder": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz"
         }
       }
     },
@@ -1274,16 +1264,6 @@
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
           "dev": true
         },
-        "color-convert": {
-          "version": "1.9.3",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-          "dev": true
-        },
-        "color-name": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "dev": true
-        },
         "has-flag": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -1415,16 +1395,6 @@
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.1.0.tgz",
           "dev": true
         },
-        "color-convert": {
-          "version": "1.9.3",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-          "dev": true
-        },
-        "color-name": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "dev": true
-        },
         "has-flag": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
@@ -1505,8 +1475,8 @@
       "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-2.1.0.tgz"
     },
     "caniuse-lite": {
-      "version": "1.0.30000893",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000893.tgz",
+      "version": "1.0.30000898",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000898.tgz",
       "dev": true
     },
     "capture-stack-trace": {
@@ -1587,7 +1557,13 @@
     },
     "chartjs-color": {
       "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.2.0.tgz"
+      "resolved": "https://registry.npmjs.org/chartjs-color/-/chartjs-color-2.2.0.tgz",
+      "dependencies": {
+        "color-convert": {
+          "version": "0.5.3",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz"
+        }
+      }
     },
     "chartjs-color-string": {
       "version": "0.5.0",
@@ -1692,20 +1668,6 @@
         }
       }
     },
-    "clean-tag": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/clean-tag/-/clean-tag-1.1.0.tgz",
-      "dependencies": {
-        "prop-types": {
-          "version": "15.6.2",
-          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz"
-        },
-        "styled-system": {
-          "version": "3.1.11",
-          "resolved": "https://registry.npmjs.org/styled-system/-/styled-system-3.1.11.tgz"
-        }
-      }
-    },
     "cli-boxes": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/cli-boxes/-/cli-boxes-1.0.0.tgz",
@@ -1774,29 +1736,19 @@
     },
     "color": {
       "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color/-/color-2.0.1.tgz",
-      "dependencies": {
-        "color-convert": {
-          "version": "1.9.3",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
-        },
-        "color-name": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz"
-        }
-      }
+      "resolved": "https://registry.npmjs.org/color/-/color-2.0.1.tgz"
     },
     "color-convert": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz"
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
     },
     "color-hash": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/color-hash/-/color-hash-1.0.3.tgz"
     },
     "color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz"
     },
     "color-string": {
       "version": "1.5.3",
@@ -2020,6 +1972,138 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz"
     },
+    "d3": {
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-4.13.0.tgz"
+    },
+    "d3-array": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-1.2.1.tgz"
+    },
+    "d3-axis": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-1.0.8.tgz"
+    },
+    "d3-brush": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-1.0.4.tgz"
+    },
+    "d3-chord": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-1.0.4.tgz"
+    },
+    "d3-collection": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/d3-collection/-/d3-collection-1.0.4.tgz"
+    },
+    "d3-color": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-1.0.3.tgz"
+    },
+    "d3-dispatch": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-1.0.3.tgz"
+    },
+    "d3-drag": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-1.2.1.tgz"
+    },
+    "d3-dsv": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-1.0.8.tgz"
+    },
+    "d3-ease": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-1.0.3.tgz"
+    },
+    "d3-force": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-1.1.0.tgz"
+    },
+    "d3-format": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.2.2.tgz"
+    },
+    "d3-geo": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-1.9.1.tgz"
+    },
+    "d3-hierarchy": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-1.1.5.tgz"
+    },
+    "d3-interpolate": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-1.1.6.tgz"
+    },
+    "d3-path": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.5.tgz"
+    },
+    "d3-polygon": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-1.0.3.tgz"
+    },
+    "d3-quadtree": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-1.0.3.tgz"
+    },
+    "d3-queue": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/d3-queue/-/d3-queue-3.0.7.tgz"
+    },
+    "d3-random": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-1.1.0.tgz"
+    },
+    "d3-request": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/d3-request/-/d3-request-1.0.6.tgz"
+    },
+    "d3-scale": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-1.0.7.tgz"
+    },
+    "d3-selection": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-1.3.0.tgz"
+    },
+    "d3-shape": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.2.0.tgz"
+    },
+    "d3-time": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.0.8.tgz"
+    },
+    "d3-time-format": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-2.1.1.tgz"
+    },
+    "d3-timer": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-1.0.7.tgz"
+    },
+    "d3-transition": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-1.1.1.tgz"
+    },
+    "d3-voronoi": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/d3-voronoi/-/d3-voronoi-1.1.2.tgz"
+    },
+    "d3-zoom": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-1.7.1.tgz"
+    },
+    "dagre-d3-renderer": {
+      "version": "0.5.8",
+      "resolved": "https://registry.npmjs.org/dagre-d3-renderer/-/dagre-d3-renderer-0.5.8.tgz"
+    },
+    "dagre-layout": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/dagre-layout/-/dagre-layout-0.8.8.tgz"
+    },
     "dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
@@ -2328,16 +2412,6 @@
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.1.0.tgz",
           "dev": true
         },
-        "color-convert": {
-          "version": "1.9.3",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-          "dev": true
-        },
-        "color-name": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "dev": true
-        },
         "electron-download-tf": {
           "version": "4.3.4",
           "resolved": "https://registry.npmjs.org/electron-download-tf/-/electron-download-tf-4.3.4.tgz",
@@ -2531,16 +2605,6 @@
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.1.0.tgz",
           "dev": true
         },
-        "color-convert": {
-          "version": "1.9.3",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-          "dev": true
-        },
-        "color-name": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "dev": true
-        },
         "has-flag": {
           "version": "2.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
@@ -2554,8 +2618,8 @@
       }
     },
     "electron-to-chromium": {
-      "version": "1.3.80",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.80.tgz",
+      "version": "1.3.81",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.81.tgz",
       "dev": true
     },
     "electron-window": {
@@ -2600,8 +2664,8 @@
       "dev": true
     },
     "entities": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.1.tgz"
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz"
     },
     "env-paths": {
       "version": "1.0.0",
@@ -2615,7 +2679,13 @@
     },
     "error-ex": {
       "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz"
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "dependencies": {
+        "is-arrayish": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz"
+        }
+      }
     },
     "es-abstract": {
       "version": "1.12.0",
@@ -2672,6 +2742,10 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz"
     },
+    "escaper": {
+      "version": "2.5.3",
+      "resolved": "https://registry.npmjs.org/escaper/-/escaper-2.5.3.tgz"
+    },
     "escodegen": {
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.11.0.tgz",
@@ -2720,16 +2794,6 @@
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
           "dev": true
         },
-        "color-convert": {
-          "version": "1.9.3",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-          "dev": true
-        },
-        "color-name": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "dev": true
-        },
         "fast-deep-equal": {
           "version": "1.1.0",
           "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
@@ -3456,19 +3520,13 @@
       "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
       "dev": true
     },
+    "graphlibrary": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/graphlibrary/-/graphlibrary-2.2.0.tgz"
+    },
     "grid-styled": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/grid-styled/-/grid-styled-3.2.1.tgz",
-      "dependencies": {
-        "prop-types": {
-          "version": "15.6.2",
-          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz"
-        },
-        "styled-system": {
-          "version": "3.1.11",
-          "resolved": "https://registry.npmjs.org/styled-system/-/styled-system-3.1.11.tgz"
-        }
-      }
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/grid-styled/-/grid-styled-3.1.1.tgz"
     },
     "growl": {
       "version": "1.10.3",
@@ -3582,9 +3640,8 @@
       "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz"
     },
     "he": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz",
-      "dev": true
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz"
     },
     "helper-date": {
       "version": "0.2.3",
@@ -3665,6 +3722,11 @@
           "version": "2.17.1",
           "resolved": "https://registry.npmjs.org/commander/-/commander-2.17.1.tgz",
           "dev": true
+        },
+        "he": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz",
+          "dev": true
         }
       }
     },
@@ -3673,13 +3735,15 @@
       "resolved": "https://registry.npmjs.org/html-tag/-/html-tag-0.2.1.tgz",
       "dev": true
     },
-    "html-tags": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-2.0.0.tgz"
-    },
     "htmlparser2": {
-      "version": "3.9.2",
-      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.9.2.tgz"
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.0.tgz",
+      "dependencies": {
+        "readable-stream": {
+          "version": "3.0.6",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.0.6.tgz"
+        }
+      }
     },
     "http-errors": {
       "version": "1.6.3",
@@ -3894,8 +3958,8 @@
       "dev": true
     },
     "is-arrayish": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz"
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz"
     },
     "is-binary-path": {
       "version": "1.0.1",
@@ -4083,6 +4147,10 @@
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.4.tgz",
       "dev": true
     },
+    "is-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz"
+    },
     "is-relative": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-relative/-/is-relative-0.2.1.tgz",
@@ -4999,6 +5067,10 @@
       "resolved": "https://registry.npmjs.org/markdown-utils/-/markdown-utils-0.7.3.tgz",
       "dev": true
     },
+    "marked": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-0.4.0.tgz"
+    },
     "math-random": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/math-random/-/math-random-1.0.1.tgz",
@@ -5041,6 +5113,10 @@
       "resolved": "https://registry.npmjs.org/merge/-/merge-1.2.0.tgz",
       "dev": true
     },
+    "mermaid": {
+      "version": "8.0.0-rc.8",
+      "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-8.0.0-rc.8.tgz"
+    },
     "methods": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
@@ -5096,8 +5172,8 @@
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz"
     },
     "minipass": {
-      "version": "2.3.4",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.4.tgz",
+      "version": "2.3.5",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.3.5.tgz",
       "dependencies": {
         "yallist": {
           "version": "3.0.2",
@@ -5131,8 +5207,8 @@
       "resolved": "https://registry.npmjs.org/mixpanel/-/mixpanel-0.7.0.tgz"
     },
     "mixpanel-browser": {
-      "version": "2.22.4",
-      "resolved": "https://registry.npmjs.org/mixpanel-browser/-/mixpanel-browser-2.22.4.tgz"
+      "version": "2.23.0",
+      "resolved": "https://registry.npmjs.org/mixpanel-browser/-/mixpanel-browser-2.23.0.tgz"
     },
     "mkdirp": {
       "version": "0.5.1",
@@ -5174,6 +5250,11 @@
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
           "dev": true
         },
+        "he": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/he/-/he-1.1.1.tgz",
+          "dev": true
+        },
         "supports-color": {
           "version": "4.4.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.4.0.tgz",
@@ -5679,7 +5760,14 @@
     "parse-color": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/parse-color/-/parse-color-1.0.0.tgz",
-      "dev": true
+      "dev": true,
+      "dependencies": {
+        "color-convert": {
+          "version": "0.5.3",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz",
+          "dev": true
+        }
+      }
     },
     "parse-git-config": {
       "version": "1.1.1",
@@ -5816,16 +5904,6 @@
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.1.0.tgz",
           "dev": true
         },
-        "color-convert": {
-          "version": "1.9.3",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-          "dev": true
-        },
-        "color-name": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "dev": true
-        },
         "core-js": {
           "version": "2.5.7",
           "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.7.tgz",
@@ -5921,16 +5999,6 @@
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.1.0.tgz",
           "dev": true
         },
-        "color-convert": {
-          "version": "1.9.3",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-          "dev": true
-        },
-        "color-name": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "dev": true
-        },
         "core-js": {
           "version": "2.5.7",
           "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.7.tgz",
@@ -6153,8 +6221,8 @@
       }
     },
     "randomatic": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-3.1.0.tgz",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-3.1.1.tgz",
       "dev": true,
       "dependencies": {
         "is-number": {
@@ -6300,7 +6368,13 @@
     },
     "readable-stream": {
       "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz"
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz",
+      "dependencies": {
+        "string_decoder": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz"
+        }
+      }
     },
     "readdirp": {
       "version": "2.2.1",
@@ -6646,8 +6720,8 @@
       "dev": true
     },
     "rendition": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/rendition/-/rendition-4.6.0.tgz",
+      "version": "4.27.3",
+      "resolved": "https://registry.npmjs.org/rendition/-/rendition-4.27.3.tgz",
       "dependencies": {
         "uuid": {
           "version": "3.3.2",
@@ -6774,14 +6848,6 @@
           "version": "1.1.1",
           "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-1.1.1.tgz"
         },
-        "color-convert": {
-          "version": "1.9.3",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
-        },
-        "color-name": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz"
-        },
         "figures": {
           "version": "1.7.0",
           "resolved": "https://registry.npmjs.org/figures/-/figures-1.7.0.tgz"
@@ -6904,6 +6970,10 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.3.0.tgz"
     },
+    "rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz"
+    },
     "rx": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/rx/-/rx-4.1.0.tgz"
@@ -7105,6 +7175,10 @@
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz"
     },
+    "scope-css": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/scope-css/-/scope-css-1.2.1.tgz"
+    },
     "scss-tokenizer": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
@@ -7239,16 +7313,6 @@
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.2.tgz",
           "dev": true
         },
-        "color-convert": {
-          "version": "1.9.3",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-          "dev": true
-        },
-        "color-name": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "dev": true
-        },
         "has-flag": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -7263,13 +7327,7 @@
     },
     "simple-swizzle": {
       "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
-      "dependencies": {
-        "is-arrayish": {
-          "version": "0.3.2",
-          "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz"
-        }
-      }
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz"
     },
     "single-line-log": {
       "version": "1.1.2",
@@ -7307,6 +7365,10 @@
         }
       }
     },
+    "slugify": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.3.1.tgz"
+    },
     "smart-buffer": {
       "version": "1.1.15",
       "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-1.1.15.tgz",
@@ -7509,11 +7571,6 @@
           "version": "2.3.6",
           "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
           "dev": true
-        },
-        "string_decoder": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-          "dev": true
         }
       }
     },
@@ -7523,8 +7580,8 @@
       "dev": true
     },
     "string_decoder": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz"
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz"
     },
     "string-width": {
       "version": "1.0.2",
@@ -7547,6 +7604,10 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz"
     },
+    "strip-css-comments": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-css-comments/-/strip-css-comments-3.0.0.tgz"
+    },
     "strip-eof": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz"
@@ -7637,11 +7698,6 @@
           "version": "2.3.6",
           "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.6.tgz",
           "dev": true
-        },
-        "string_decoder": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
-          "dev": true
         }
       }
     },
@@ -7678,16 +7734,6 @@
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
           "dev": true
         },
-        "color-convert": {
-          "version": "1.9.3",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-          "dev": true
-        },
-        "color-name": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "dev": true
-        },
         "has-flag": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -8173,16 +8219,6 @@
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
           "dev": true
         },
-        "color-convert": {
-          "version": "1.9.3",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-          "dev": true
-        },
-        "color-name": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "dev": true
-        },
         "has-flag": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -8369,8 +8405,8 @@
       "dev": true
     },
     "webdriverio": {
-      "version": "4.13.2",
-      "resolved": "https://registry.npmjs.org/webdriverio/-/webdriverio-4.13.2.tgz",
+      "version": "4.14.0",
+      "resolved": "https://registry.npmjs.org/webdriverio/-/webdriverio-4.14.0.tgz",
       "dev": true,
       "dependencies": {
         "ajv": {
@@ -8415,16 +8451,6 @@
             }
           }
         },
-        "color-convert": {
-          "version": "1.9.3",
-          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
-          "dev": true
-        },
-        "color-name": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "dev": true
-        },
         "ejs": {
           "version": "2.5.9",
           "resolved": "https://registry.npmjs.org/ejs/-/ejs-2.5.9.tgz",
@@ -8476,13 +8502,13 @@
           "dev": true
         },
         "mime-db": {
-          "version": "1.36.0",
-          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.36.0.tgz",
+          "version": "1.37.0",
+          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.37.0.tgz",
           "dev": true
         },
         "mime-types": {
-          "version": "2.1.20",
-          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.20.tgz",
+          "version": "2.1.21",
+          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.21.tgz",
           "dev": true
         },
         "oauth-sign": {
@@ -8800,6 +8826,10 @@
       "version": "0.1.27",
       "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.27.tgz"
     },
+    "xmlhttprequest": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz"
+    },
     "xregexp": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/xregexp/-/xregexp-2.0.0.tgz",
diff --git a/package.json b/package.json
index a94e2722..01817c6d 100644
--- a/package.json
+++ b/package.json
@@ -83,7 +83,7 @@
     "react2angular": "4.0.2",
     "readable-stream": "2.3.3",
     "redux": "3.5.2",
-    "rendition": "4.6.0",
+    "rendition": "4.27.3",
     "request": "2.81.0",
     "resin-cli-form": "1.4.1",
     "resin-cli-visuals": "1.4.1",