Merge pull request #24 from qlik-oss/QPE-622-visible-scrollbar

[QPE 622] show scrollbar for easier scrolling

.eslintrc.js

@@ -15,6 +15,7 @@ module.exports = {
   },
   globals: {
     angular: false,
+    beforeEach: false,
     define: false,
     describe: false,
     document: false,
@@ -116,7 +117,7 @@ module.exports = {
     "max-params": ["warn"],
     "brace-style": ["warn", "1tbs", { "allowSingleLine": true }],
     "prefer-const": ["warn"],
-
+    "class-methods-use-this":["warn"],
     // plugin:react
     "react/jsx-indent": ["warn", 2],
     "react/jsx-indent-props": ["warn", 2],
@@ -129,7 +130,8 @@ module.exports = {
     "react/jsx-no-literals": ["off"],
     "react/jsx-max-depth": ["off"], // rule throws exception in single-dimension-measure
     "react/jsx-filename-extension": ["warn"],
-    "react/prefer-stateless-function": ["warn"]
+    "react/prefer-stateless-function": ["warn"],
+    "react/no-set-state": ["warn"]
   },
   extends: [
     "eslint:all",

karma.conf.js

@@ -1,3 +1,4 @@
+const path = require('path');
 const settings = require('./settings');
 
 module.exports = (config) => {
@@ -6,37 +7,62 @@ module.exports = (config) => {
     customLaunchers: {
       SlimChromeHeadless: {
         base: 'ChromeHeadless',
-        flags: ['--headless', '--disable-gpu', '--disable-translate', '--disable-extensions']
+        flags: [
+          '--headless',
+          '--disable-gpu',
+          '--disable-translate',
+          '--disable-extensions'
+        ]
       }
     },
     files: [
-      { pattern: 'src/*.spec.js', watched: false }
+      {
+        pattern: 'src/**/*.spec.js',
+        watched: true
+      }
     ],
     frameworks: ['jasmine'],
     preprocessors: {
-      'src/*.spec.js': ['webpack', 'sourcemap']
+      'src/**/*.spec.{js, jsx}': [
+        'webpack',
+        'sourcemap'
+      ]
     },
     webpack: {
       devtool: 'source-map',
-      mode: settings.mode,
       externals: {
         jquery: {
           amd: 'jquery',
           commonjs: 'jquery',
           commonjs2: 'jquery',
           root: '_'
-        },
+        }
       },
+      mode: settings.mode,
       module: {
         rules: [
           {
-            test: /\.js$/,
             exclude: [/node_modules/],
-            loaders: ['babel-loader']
+            loader: 'babel-loader',
+            options: {
+              plugins: [
+                '@babel/plugin-transform-async-to-generator',
+                '@babel/plugin-proposal-class-properties'],
+              presets: ['@babel/preset-react']
+            },
+            test: /\.(js|jsx)$/
           },
-          { test: /\.less$/, loader: 'ignore-loader' },
-          { test: /\.json$/, loader: 'ignore-loader' }
+          {
+            loader: 'ignore-loader',
+            test: /\.less$/
+          }
         ]
+      },
+      resolve: {
+        alias: {
+          'test-utilities': path.resolve('test/test-utilities')
+        },
+        modules: ['node_modules']
       }
     }
   });

package-lock.json

@@ -1440,6 +1440,17 @@
       "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg=",
       "dev": true
     },
+    "array.prototype.flat": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.2.1.tgz",
+      "integrity": "sha512-rVqIs330nLJvfC7JqYvEWwqVr5QjYF1ib02i3YJtR/fICO6527Tjpc/e4Mvmxh3GIePPreRXMdaGyC99YphWEw==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.2",
+        "es-abstract": "^1.10.0",
+        "function-bind": "^1.1.1"
+      }
+    },
     "arraybuffer.slice": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz",
@@ -1934,6 +1945,12 @@
         "multicast-dns-service-types": "^1.1.0"
       }
     },
+    "boolbase": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
+      "dev": true
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -2286,6 +2303,20 @@
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==",
       "dev": true
     },
+    "cheerio": {
+      "version": "1.0.0-rc.2",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.2.tgz",
+      "integrity": "sha1-S59TqBsn5NXawxwP/Qz6A8xoMNs=",
+      "dev": true,
+      "requires": {
+        "css-select": "~1.2.0",
+        "dom-serializer": "~0.1.0",
+        "entities": "~1.1.1",
+        "htmlparser2": "^3.9.1",
+        "lodash": "^4.15.0",
+        "parse5": "^3.0.1"
+      }
+    },
     "chokidar": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.0.4.tgz",
@@ -2338,6 +2369,12 @@
       "integrity": "sha512-UZK3NBx2Mca+b5LsG7bY183pHWt5Y1xts4P3Pz7ENTwGVnJOUWbRb3ocjvX7hx9tq/yTAdclXm9sZ38gNuem4A==",
       "dev": true
     },
+    "circular-json-es6": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/circular-json-es6/-/circular-json-es6-2.0.2.tgz",
+      "integrity": "sha512-ODYONMMNb3p658Zv+Pp+/XPa5s6q7afhz3Tzyvo+VRh9WIrJ64J76ZC4GQxnlye/NesTn09jvOiuE8+xxfpwhQ==",
+      "dev": true
+    },
     "class-utils": {
       "version": "0.3.6",
       "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
@@ -2878,6 +2915,30 @@
         "source-list-map": "^2.0.0"
       }
     },
+    "css-select": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
+      "integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=",
+      "dev": true,
+      "requires": {
+        "boolbase": "~1.0.0",
+        "css-what": "2.1",
+        "domutils": "1.5.1",
+        "nth-check": "~1.0.1"
+      },
+      "dependencies": {
+        "domutils": {
+          "version": "1.5.1",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
+          "integrity": "sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=",
+          "dev": true,
+          "requires": {
+            "dom-serializer": "0",
+            "domelementtype": "1"
+          }
+        }
+      }
+    },
     "css-selector-tokenizer": {
       "version": "0.7.1",
       "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.7.1.tgz",
@@ -2923,6 +2984,12 @@
         }
       }
     },
+    "css-what": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.2.tgz",
+      "integrity": "sha512-wan8dMWQ0GUeF7DGEPVjhHemVW/vy6xUYmFzRY8RYqgA0JtXC9rJmbScBjqSu6dg9q0lwPQy6ZAmJVr3PPTvqQ==",
+      "dev": true
+    },
     "cssesc": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz",
@@ -3032,6 +3099,27 @@
       "integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU=",
       "dev": true
     },
+    "deep-equal-ident": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/deep-equal-ident/-/deep-equal-ident-1.1.1.tgz",
+      "integrity": "sha1-BvS4nlNxDNbOpKd4HHqVZkLejck=",
+      "dev": true,
+      "requires": {
+        "lodash.isequal": "^3.0"
+      },
+      "dependencies": {
+        "lodash.isequal": {
+          "version": "3.0.4",
+          "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-3.0.4.tgz",
+          "integrity": "sha1-HDXrO27wzR/1F0Pj6jz3/f/ay2Q=",
+          "dev": true,
+          "requires": {
+            "lodash._baseisequal": "^3.0.0",
+            "lodash._bindcallback": "^3.0.0"
+          }
+        }
+      }
+    },
     "deep-is": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
@@ -3250,6 +3338,12 @@
         "path-type": "^3.0.0"
       }
     },
+    "discontinuous-range": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/discontinuous-range/-/discontinuous-range-1.0.0.tgz",
+      "integrity": "sha1-44Mx8IRLukm5qctxx3FYWqsbxlo=",
+      "dev": true
+    },
     "dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -3587,6 +3681,79 @@
       "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==",
       "dev": true
     },
+    "enzyme": {
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/enzyme/-/enzyme-3.8.0.tgz",
+      "integrity": "sha512-bfsWo5nHyZm1O1vnIsbwdfhU989jk+squU9NKvB+Puwo5j6/Wg9pN5CO0YJelm98Dao3NPjkDZk+vvgwpMwYxw==",
+      "dev": true,
+      "requires": {
+        "array.prototype.flat": "^1.2.1",
+        "cheerio": "^1.0.0-rc.2",
+        "function.prototype.name": "^1.1.0",
+        "has": "^1.0.3",
+        "is-boolean-object": "^1.0.0",
+        "is-callable": "^1.1.4",
+        "is-number-object": "^1.0.3",
+        "is-string": "^1.0.4",
+        "is-subset": "^0.1.1",
+        "lodash.escape": "^4.0.1",
+        "lodash.isequal": "^4.5.0",
+        "object-inspect": "^1.6.0",
+        "object-is": "^1.0.1",
+        "object.assign": "^4.1.0",
+        "object.entries": "^1.0.4",
+        "object.values": "^1.0.4",
+        "raf": "^3.4.0",
+        "rst-selector-parser": "^2.2.3",
+        "string.prototype.trim": "^1.1.2"
+      },
+      "dependencies": {
+        "lodash.escape": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/lodash.escape/-/lodash.escape-4.0.1.tgz",
+          "integrity": "sha1-yQRGkMIeBClL6qUXcS/e0fqI3pg=",
+          "dev": true
+        }
+      }
+    },
+    "enzyme-adapter-react-16": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.9.1.tgz",
+      "integrity": "sha512-Egzogv1y77DUxdnq/CyHxLHaNxmSSKDDSDNNB/EiAXCZVFXdFibaNy2uUuRQ1n24T2m6KH/1Rw16XDRq+1yVEg==",
+      "dev": true,
+      "requires": {
+        "enzyme-adapter-utils": "^1.10.0",
+        "function.prototype.name": "^1.1.0",
+        "object.assign": "^4.1.0",
+        "object.values": "^1.1.0",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.7.0",
+        "react-test-renderer": "^16.0.0-0"
+      }
+    },
+    "enzyme-adapter-utils": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/enzyme-adapter-utils/-/enzyme-adapter-utils-1.10.0.tgz",
+      "integrity": "sha512-VnIXJDYVTzKGbdW+lgK8MQmYHJquTQZiGzu/AseCZ7eHtOMAj4Rtvk8ZRopodkfPves0EXaHkXBDkVhPa3t0jA==",
+      "dev": true,
+      "requires": {
+        "function.prototype.name": "^1.1.0",
+        "object.assign": "^4.1.0",
+        "object.fromentries": "^2.0.0",
+        "prop-types": "^15.6.2",
+        "semver": "^5.6.0"
+      }
+    },
+    "enzyme-matchers": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/enzyme-matchers/-/enzyme-matchers-7.0.1.tgz",
+      "integrity": "sha512-1HmUK3frVSt7kim8icdx5LimuQm+DlklBRfy+dSlKd4SRxwlDGEM1LYTxL21/2kUZNl1XVUT5k5mec/D3k5jWw==",
+      "dev": true,
+      "requires": {
+        "circular-json-es6": "^2.0.1",
+        "deep-equal-ident": "^1.1.1"
+      }
+    },
     "errno": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
@@ -5115,6 +5282,17 @@
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
       "dev": true
     },
+    "function.prototype.name": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.0.tgz",
+      "integrity": "sha512-Bs0VRrTz4ghD8pTmbJQD1mZ8A/mN0ur/jGz+A6FBxPDUPkm1tNfF6bhTYPA7i7aF4lZJVr+OXTNNrnnIl58Wfg==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.2",
+        "function-bind": "^1.1.1",
+        "is-callable": "^1.1.3"
+      }
+    },
     "functional-red-black-tree": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
@@ -6181,6 +6359,12 @@
         "binary-extensions": "^1.0.0"
       }
     },
+    "is-boolean-object": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.0.0.tgz",
+      "integrity": "sha1-mPiygDBoQhmpXzdc+9iM40Bd/5M=",
+      "dev": true
+    },
     "is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
@@ -6333,6 +6517,12 @@
         }
       }
     },
+    "is-number-object": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.3.tgz",
+      "integrity": "sha1-8mWrian0RQNO9q/xWo8AsA9VF5k=",
+      "dev": true
+    },
     "is-obj": {
       "version": "1.0.1",
       "resolved": "http://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
@@ -6432,6 +6622,18 @@
       "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
       "dev": true
     },
+    "is-string": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.4.tgz",
+      "integrity": "sha1-zDqbaYV9Yh6WNyWiTK7shzuCbmQ=",
+      "dev": true
+    },
+    "is-subset": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-subset/-/is-subset-0.1.1.tgz",
+      "integrity": "sha1-ilkRfZMt4d4A8kX83TnOQ/HpOaY=",
+      "dev": true
+    },
     "is-supported-regexp-flag": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-supported-regexp-flag/-/is-supported-regexp-flag-1.0.1.tgz",
@@ -6539,6 +6741,15 @@
       "integrity": "sha512-pa9tbBWgU0EE4SWgc85T4sa886ufuQdsgruQANhECYjwqgV4z7Vw/499aCaP8ZH79JDS4vhm8doDG9HO4+e4sA==",
       "dev": true
     },
+    "jasmine-enzyme": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/jasmine-enzyme/-/jasmine-enzyme-7.0.1.tgz",
+      "integrity": "sha512-baCBO74WUy1pA0xow7FYBETvsEHpCekdOCEL8IB/yQzY1ulvxQqTYjRhCX7K4QRfY2jrsdef9DyQ3QmwBbgTnQ==",
+      "dev": true,
+      "requires": {
+        "enzyme-matchers": "^7.0.1"
+      }
+    },
     "js-base64": {
       "version": "2.4.9",
       "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.9.tgz",
@@ -7026,6 +7237,17 @@
       "integrity": "sha1-jaDmqHbPNEwK2KVIghEd08XHyjY=",
       "dev": true
     },
+    "lodash._baseisequal": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/lodash._baseisequal/-/lodash._baseisequal-3.0.7.tgz",
+      "integrity": "sha1-2AJfdjOdKTQnZ9zIh85cuVpbUfE=",
+      "dev": true,
+      "requires": {
+        "lodash.isarray": "^3.0.0",
+        "lodash.istypedarray": "^3.0.0",
+        "lodash.keys": "^3.0.0"
+      }
+    },
     "lodash._basetostring": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/lodash._basetostring/-/lodash._basetostring-3.0.1.tgz",
@@ -7038,6 +7260,12 @@
       "integrity": "sha1-W3dXYoAr3j0yl1A+JjAIIP32Ybc=",
       "dev": true
     },
+    "lodash._bindcallback": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz",
+      "integrity": "sha1-5THCdkTPi1epnhftlbNcdIeJOS4=",
+      "dev": true
+    },
     "lodash._getnative": {
       "version": "3.9.1",
       "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
@@ -7095,6 +7323,12 @@
         "lodash._root": "^3.0.0"
       }
     },
+    "lodash.flattendeep": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz",
+      "integrity": "sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=",
+      "dev": true
+    },
     "lodash.isarguments": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
@@ -7107,6 +7341,18 @@
       "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=",
       "dev": true
     },
+    "lodash.isequal": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=",
+      "dev": true
+    },
+    "lodash.istypedarray": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/lodash.istypedarray/-/lodash.istypedarray-3.0.6.tgz",
+      "integrity": "sha1-yaR3SYYHUB2OhJTSg7h8OSgc72I=",
+      "dev": true
+    },
     "lodash.keys": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
@@ -7118,6 +7364,12 @@
         "lodash.isarray": "^3.0.0"
       }
     },
+    "lodash.merge": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.1.tgz",
+      "integrity": "sha512-AOYza4+Hf5z1/0Hztxpm2/xiPZgi/cjMqdnKTUWTBSKchJlxXXuUSxCCl8rJlf4g6yww/j6mA8nC8Hw/EZWxKQ==",
+      "dev": true
+    },
     "lodash.restparam": {
       "version": "3.6.1",
       "resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz",
@@ -7591,6 +7843,12 @@
         "minimist": "0.0.8"
       }
     },
+    "moo": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/moo/-/moo-0.4.3.tgz",
+      "integrity": "sha512-gFD2xGCl8YFgGHsqJ9NKRVdwlioeW3mI1iqfLNYQOv0+6JRwG58Zk9DIGQgyIaffSYaO1xsKnMaYzzNr1KyIAw==",
+      "dev": true
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -7680,6 +7938,19 @@
       "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
       "dev": true
     },
+    "nearley": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/nearley/-/nearley-2.16.0.tgz",
+      "integrity": "sha512-Tr9XD3Vt/EujXbZBv6UAHYoLUSMQAxSsTnm9K3koXzjzNWY195NqALeyrzLZBKzAkL3gl92BcSogqrHjD8QuUg==",
+      "dev": true,
+      "requires": {
+        "commander": "^2.19.0",
+        "moo": "^0.4.3",
+        "railroad-diagrams": "^1.0.0",
+        "randexp": "0.4.6",
+        "semver": "^5.4.1"
+      }
+    },
     "negotiator": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz",
@@ -7819,6 +8090,15 @@
         "path-key": "^2.0.0"
       }
     },
+    "nth-check": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
+      "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
+      "dev": true,
+      "requires": {
+        "boolbase": "~1.0.0"
+      }
+    },
     "null-check": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/null-check/-/null-check-1.0.0.tgz",
@@ -7892,6 +8172,18 @@
       "integrity": "sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA==",
       "dev": true
     },
+    "object-inspect": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.6.0.tgz",
+      "integrity": "sha512-GJzfBZ6DgDAmnuaM3104jR4s1Myxr3Y3zfIyN4z3UdqN69oSRacNK8UhnobDdC+7J2AHCjGwxQubNJfE70SXXQ==",
+      "dev": true
+    },
+    "object-is": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.0.1.tgz",
+      "integrity": "sha1-CqYOyZiaCz7Xlc9NBvYs8a1lObY=",
+      "dev": true
+    },
     "object-keys": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.0.12.tgz",
@@ -7931,6 +8223,30 @@
         "isobject": "^3.0.0"
       }
     },
+    "object.entries": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.0.tgz",
+      "integrity": "sha512-l+H6EQ8qzGRxbkHOd5I/aHRhHDKoQXQ8g0BYt4uSweQU1/J6dZUOyWh9a2Vky35YCKjzmgxOzta2hH6kf9HuXA==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.12.0",
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3"
+      }
+    },
+    "object.fromentries": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.0.tgz",
+      "integrity": "sha512-9iLiI6H083uiqUuvzyY6qrlmc/Gz8hLQFOcb/Ri/0xXFkSNS3ctV+CbE6yM2+AnkYfOB3dGjdzC0wrMLIhQICA==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.2",
+        "es-abstract": "^1.11.0",
+        "function-bind": "^1.1.1",
+        "has": "^1.0.1"
+      }
+    },
     "object.getownpropertydescriptors": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz",
@@ -7991,6 +8307,18 @@
         "make-iterator": "^1.0.0"
       }
     },
+    "object.values": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.0.tgz",
+      "integrity": "sha512-8mf0nKLAoFX6VlNVdhGj31SVYpaNFtUnuoOXWyFEstsWRgU837AK+JYM0iAxwkSzGRbwn8cbFmgbyxj1j4VbXg==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.12.0",
+        "function-bind": "^1.1.1",
+        "has": "^1.0.3"
+      }
+    },
     "obuf": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
@@ -8279,6 +8607,15 @@
       "integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=",
       "dev": true
     },
+    "parse5": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.3.tgz",
+      "integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "parseqs": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.5.tgz",
@@ -8398,8 +8735,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
       "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "pify": {
       "version": "3.0.0",
@@ -8871,12 +9207,37 @@
       "integrity": "sha1-Q2CxfGETatOAeDl/8RQW4Ybc+7g=",
       "dev": true
     },
+    "raf": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz",
+      "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==",
+      "dev": true,
+      "requires": {
+        "performance-now": "^2.1.0"
+      }
+    },
+    "railroad-diagrams": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz",
+      "integrity": "sha1-635iZ1SN3t+4mcG5Dlc3RVnN234=",
+      "dev": true
+    },
     "ramda": {
       "version": "0.25.0",
       "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.25.0.tgz",
       "integrity": "sha512-GXpfrYVPwx3K7RQ6aYT8KPS8XViSXUVJT1ONhoKPE9VAleW42YE+U+8VEyGWt41EnEQW7gwecYJriTI0pKoecQ==",
       "dev": true
     },
+    "randexp": {
+      "version": "0.4.6",
+      "resolved": "https://registry.npmjs.org/randexp/-/randexp-0.4.6.tgz",
+      "integrity": "sha512-80WNmd9DA0tmZrw9qQa62GPPWfuXJknrmVmLcxvq4uZBdYqb1wYoKTmnlGUchvVWe0XiLupYkBoXVOxz3C8DYQ==",
+      "dev": true,
+      "requires": {
+        "discontinuous-range": "1.0.0",
+        "ret": "~0.1.10"
+      }
+    },
     "randomatic": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-3.1.1.tgz",
@@ -8966,6 +9327,36 @@
         "scheduler": "^0.12.0"
       }
     },
+    "react-is": {
+      "version": "16.8.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.8.1.tgz",
+      "integrity": "sha512-ioMCzVDWvCvKD8eeT+iukyWrBGrA3DiFYkXfBsVYIRdaREZuBjENG+KjrikavCLasozqRWTwFUagU/O4vPpRMA==",
+      "dev": true
+    },
+    "react-test-renderer": {
+      "version": "16.8.1",
+      "resolved": "https://registry.npmjs.org/react-test-renderer/-/react-test-renderer-16.8.1.tgz",
+      "integrity": "sha512-Bd21TN3+YVl6GZwav6O0T6m5UwGfOj+2+xZH5VH93ToD6M5uclN/c+R1DGX49ueG413KZPUx7Kw3sOYz2aJgfg==",
+      "dev": true,
+      "requires": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "react-is": "^16.8.1",
+        "scheduler": "^0.13.1"
+      },
+      "dependencies": {
+        "scheduler": {
+          "version": "0.13.1",
+          "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.1.tgz",
+          "integrity": "sha512-VJKOkiKIN2/6NOoexuypwSrybx13MY7NSy9RNt8wPvZDMRT1CW6qlpF5jXRToXNHz3uWzbm2elNpZfXfGPqP9A==",
+          "dev": true,
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1"
+          }
+        }
+      }
+    },
     "read-pkg": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@@ -9467,6 +9858,16 @@
         "inherits": "^2.0.1"
       }
     },
+    "rst-selector-parser": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz",
+      "integrity": "sha1-gbIw6i/MYGbInjRy3nlChdmwPZE=",
+      "dev": true,
+      "requires": {
+        "lodash.flattendeep": "^4.4.0",
+        "nearley": "^2.7.10"
+      }
+    },
     "run-async": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.3.0.tgz",
@@ -10330,6 +10731,17 @@
         }
       }
     },
+    "string.prototype.trim": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.1.2.tgz",
+      "integrity": "sha1-0E3iyJ4Tf019IG8Ia17S+ua+jOo=",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.2",
+        "es-abstract": "^1.5.0",
+        "function-bind": "^1.0.2"
+      }
+    },
     "string_decoder": {
       "version": "1.1.1",
       "resolved": "http://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",

package.json

@@ -27,6 +27,8 @@
     "copy-webpack-plugin": "4.5.3",
     "css-loader": "1.0.0",
     "del": "2.0.2",
+    "enzyme": "3.8.0",
+    "enzyme-adapter-react-16": "1.9.1",
     "eslint": "5.7.0",
     "eslint-loader": "2.1.1",
     "eslint-plugin-react": "7.11.1",
@@ -34,6 +36,7 @@
     "gulp-json-editor": "2.4.3",
     "gulp-zip": "3.0.2",
     "jasmine-core": "3.2.1",
+    "jasmine-enzyme": "7.0.1",
     "karma": "3.0.0",
     "karma-chrome-launcher": "2.2.0",
     "karma-jasmine": "1.1.2",
@@ -41,6 +44,7 @@
     "karma-webpack": "3.0.5",
     "less": "3.8.1",
     "less-loader": "4.1.0",
+    "lodash.merge": "4.6.1",
     "style-loader": "0.23.1",
     "stylelint": "8.4.0",
     "stylelint-webpack-plugin": "0.10.5",

resources/Accounts.csv

@@ -2,7 +2,7 @@
 Revenues;;rgb(183, 219, 255);<italic>;;<center>;;<comment>
 Gross sales revenues;;;;;;;
 Less return & allowances;;;;;;;
-Net sales revenues;<bold>;<soft>;;;;;
+Net sales revenues;<bold>;#efefef;;;;;
 Cost of goods sold;<bold>;;;;;;
 Direct materials;;;;;;;
 Direct labor;;;;;;;
@@ -10,35 +10,35 @@ Manufacturing overhead;;#b7dbff;<italic>;;<center>;;<comment>
 Indirect labor;;;;;;;
 Depreciation, manufacturing equip;;;;;;;
 Other mfr overhead;;;;;;;
-Net mfr overhead;<bold>;<violete>;;;;;
-Net costs of goods sold;<bold>;<violete>;;;;;
-Gross profit;<bold>;<dark>;;;<center>;<large>;
+Net mfr overhead;<bold>;#CCC0FF;;;;;
+Net costs of goods sold;<bold>;#CCC0FF;;;;;
+Gross profit;<bold>;#C4C4C4;;;<center>;<large>;
 Operating expenses;<bold>;;<italic>;;;;
 Selling expenses;;;;;;;
 Sales salaries;;;;;;;
 Warranty expenses;;;;;;;
 Depreciation, store equipment;;;;;;;
 Other selling expenses3;;;;;;;
-Total selling expenses;<bold>;<violete>;;;;;
+Total selling expenses;<bold>;#CCC0FF;;;;;
 General & administrative expenses;;#b7dbff;<italic>;;<center>;;<comment>
 Administration salaries;;;;;;;
 Rent expenses;;;;;;;
 Depreciation, computers;;;;;;;
 Other general & admin expenses;;;;;;;
-total general & admin expenses;<bold>;<soft>;;;;;
-total operating expenses;<bold>;<violete>;;;;;
-Operating income before taxes;<bold>;<dark>;;<white>;;<large>;
+total general & admin expenses;<bold>;#efefef;;;;;
+total operating expenses;<bold>;#CCC0FF;;;;;
+Operating income before taxes;<bold>;#C4C4C4;;<white>;;<large>;
 Financial revenue & expenses;;#b7dbff;<italic>;;<center>;;<comment>
 Revenue from investments;;;;;;;
 Less interest expenses;;;;;;;
 Net financial gain (expense);;;;;;;
-Income before tax & extraordinary items;<bold>;<dark>;;<white>;;<large>;
+Income before tax & extraordinary items;<bold>;#C4C4C4;;<white>;;<large>;
 Less income tax on operations;;;;;;;
 Income before extraordinary items;;;;;;;
 Extraordinary items;;#b7dbff;<italic>;;<center>;;<comment>
 Sale of land;;;;;;;
 Less initial cost;;;;;;;
-Net gain on sale of land;<bold>;<soft>;;;;;
+Net gain on sale of land;<bold>;#efefef;;;;;
 Less income tax on gain;;;;;;;
-Extraordinary items after tax;<bold>;<soft>;;;;;
-Net Income (Profit);<bold>;<dark>;;<white>;<center>;<large>;
+Extraordinary items after tax;<bold>;#efefef;;;;;
+Net Income (Profit);<bold>;#C4C4C4;;<white>;<center>;<large>;

resources/Accounts2.csv

@@ -10,7 +10,7 @@ Operating expenses;<bold>;;<italic>;;;;
 Total selling expenses;<bold>;rgb(128, 191, 255);;;;;
 General & administrative expenses;<bold>;;<italic>;;<center>;;<comment>
 Other general & admin expenses;<bold>;rgb(128, 191, 255);<white>;;<center>;<large>;
-total general & admin expenses;<bold>;<soft>;;;;;
+total general & admin expenses;<bold>;#efefef;;;;;
 total operating expenses;<bold>;rgb(128, 191, 255);;;;;
 Operating income before taxes;<bold>;rgb(0, 102, 204);;<white>;;<large>;
 Financial revenue & expenses;<bold>;;<italic>;;<center>;;<comment>
@@ -18,4 +18,4 @@ Income before tax & extraordinary items;<bold>;rgb(0, 102, 204);;<white>;;<large
 Extraordinary items;<bold>;;<italic>;;<center>;;<comment>
 Net gain on sale of land;<bold>;rgb(0, 102, 204);<white>;;<center>;<large>;
 Extraordinary items after tax;<bold>;rgb(0, 102, 204);<white>;;<center>;<large>;
-Net Income (Profit);<bold>;<night>;;<white>;<center>;<large>;
+Net Income (Profit);<bold>;#191970;;<white>;<center>;<large>;

resources/QlikLook.csv

@@ -10,7 +10,7 @@ Operating expenses;<bold>;;<italic>;;;;
 Total selling expenses;<bold>;RGB(225,226,226);;;;;
 General & administrative expenses;<bold>;;<italic>;;<center>;;<comment>
 Other general & admin expenses;<bold>;rgb(128, 191, 255);<white>;;<center>;<large>;
-total general & admin expenses;<bold>;<soft>;;;;;
+total general & admin expenses;<bold>;#efefef;;;;;
 total operating expenses;<bold>;rgb(128, 191, 255);<white>;;;;
 Operating income before taxes;<bold>;RGB(193,216,47);;;;<large>;
 Financial revenue & expenses;<bold>;;<italic>;;<center>;;<comment>
@@ -18,4 +18,4 @@ Income before tax & extraordinary items;<bold>;RGB(193,216,47);;;;<large>;
 Extraordinary items;<bold>;;<italic>;;<center>;;<comment>
 Net gain on sale of land;<bold>;RGB(193,216,47);;;<center>;<large>;
 Extraordinary items after tax;<bold>;RGB(193,216,47);;;<center>;<large>;
-Net Income (Profit);<bold>;<night>;;<white>;<center>;<large>;
+Net Income (Profit);<bold>;#191970;;<white>;<center>;<large>;

src/data-table/data-cell.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ApplyPreMask } from '../masking';
 import { addSeparators } from '../utilities';
-
+import Tooltip from '../tooltip/index.jsx';
 function formatMeasurementValue (measurement, styling) {
   // TODO: measurement.name is a horrible propertyname, it's actually the column header
   const isColumnPercentageBased = measurement.parents.measurement.header.substring(0, 1) === '%';
@@ -53,19 +53,17 @@ function formatMeasurementValue (measurement, styling) {
 }
 
 function getSemaphoreColors (measurement, semaphoreColors) {
-  if (measurement < semaphoreColors.status.critical) {
+  if (measurement.value < semaphoreColors.status.critical) {
     return semaphoreColors.statusColors.critical;
   }
-  if (measurement < semaphoreColors.status.medium) {
+  if (measurement.value < semaphoreColors.status.medium) {
     return semaphoreColors.statusColors.medium;
   }
   return semaphoreColors.statusColors.normal;
 }
-
 class DataCell extends React.PureComponent {
   constructor (props) {
     super(props);
-
     this.handleSelect = this.handleSelect.bind(this);
   }
 
@@ -84,7 +82,14 @@ class DataCell extends React.PureComponent {
   }
 
   render () {
-    const { data, general, measurement, styleBuilder, styling } = this.props;
+    const {
+      data,
+      general,
+      measurement,
+      styleBuilder,
+      styling
+    } = this.props;
+
     const isColumnPercentageBased = measurement.name.substring(0, 1) === '%';
     let formattedMeasurementValue = formatMeasurementValue(measurement, styling);
     if (styleBuilder.hasComments()) {
@@ -99,27 +104,31 @@ class DataCell extends React.PureComponent {
     let cellStyle = {
       fontFamily: styling.options.fontFamily,
       ...styleBuilder.getStyle(),
-      paddingLeft: '4px',
+      paddingLeft: '5px',
       textAlign: textAlignment
 
     };
-    const { semaphoreColors } = styling;
+
+    const { semaphoreColors, semaphoreColors: { fieldsToApplyTo } } = styling;
     const isValidSemaphoreValue = !styleBuilder.hasComments() && !isNaN(measurement.value);
-    const shouldHaveSemaphoreColors = semaphoreColors.fieldsToApplyTo.applyToAll || semaphoreColors.fieldsToApplyTo.specificFields.indexOf(measurement.parents.dimension1.header) !== -1;
+    const dimension1Row = measurement.parents.dimension1.elementNumber;
+    const isSpecifiedMetricField = fieldsToApplyTo.metricsSpecificFields.indexOf(dimension1Row) !== -1;
+    const shouldHaveSemaphoreColors = (fieldsToApplyTo.applyToMetric || isSpecifiedMetricField);
     if (isValidSemaphoreValue && shouldHaveSemaphoreColors) {
       const { backgroundColor, color } = getSemaphoreColors(measurement, semaphoreColors);
       cellStyle = {
+        ...styleBuilder.getStyle(),
         backgroundColor,
         color,
         fontFamily: styling.options.fontFamily,
-        fontSize: styleBuilder.getStyle().fontSize,
-        paddingLeft: '4px',
+        paddingLeft: '5px',
         textAlign: textAlignment
       };
     }
 
     let cellClass = 'grid-cells';
-    const shouldUseSmallCells = isColumnPercentageBased && data.headers.measurements.length > 1;
+    const hasTwoDimensions = data.headers.dimension2 && data.headers.dimension2.length > 0;
+    const shouldUseSmallCells = isColumnPercentageBased && data.headers.measurements.length > 1 && hasTwoDimensions;
     if (shouldUseSmallCells) {
       cellClass = 'grid-cells-small';
     }
@@ -130,7 +139,11 @@ class DataCell extends React.PureComponent {
         onClick={this.handleSelect}
         style={cellStyle}
       >
-        {formattedMeasurementValue}
+        <Tooltip
+          tooltipText={formattedMeasurementValue}
+        >
+          {formattedMeasurementValue}
+        </Tooltip>
       </td>
     );
   }

src/definition/color-library.js

@@ -1,68 +0,0 @@
-const colorLibrary = {
-  type: 'items',
-  label: 'Primary Colors Library',
-  items: {
-    ColLibClean: {
-      ref: 'collibclean',
-      translation: 'Clean',
-      type: 'string',
-      defaultValue: '#ffffff'
-    },
-    ColLibSoft: {
-      ref: 'collibsoft',
-      translation: 'Soft',
-      type: 'string',
-      defaultValue: '#efefef'
-    },
-    ColLibDark: {
-      ref: 'collibdark',
-      translation: 'Dark',
-      type: 'string',
-      defaultValue: '#c4c4c4'
-    },
-    ColLibNight: {
-      ref: 'collibnight',
-      translation: 'Night',
-      type: 'string',
-      defaultValue: '#808080'
-    },
-    ColLibRed: {
-      ref: 'collibred',
-      translation: 'Red',
-      type: 'string',
-      defaultValue: '#d58b94'
-    },
-    ColLibOrange: {
-      ref: 'colliborange',
-      translation: 'Orange',
-      type: 'string',
-      defaultValue: '#fd6600'
-    },
-    ColLibViolete: {
-      ref: 'collibviolete',
-      translation: 'Violete',
-      type: 'string',
-      defaultValue: '#ccc0ff'
-    },
-    ColLibBlue: {
-      ref: 'collibblue',
-      translation: 'Blue',
-      type: 'string',
-      defaultValue: '#4575b4'
-    },
-    ColLibGreen: {
-      ref: 'collibgreen',
-      translation: 'Green',
-      type: 'string',
-      defaultValue: '#7bb51c'
-    },
-    ColLibCustom: {
-      ref: 'collibcustom',
-      label: 'Custom',
-      type: 'string',
-      defaultValue: '#ffcccc'
-    }
-  }
-};
-
-export default colorLibrary;

src/definition/formatted.js

@@ -29,57 +29,27 @@ const formatted = {
         return data.customfilebool;
       }
     },
-    colors: {
-      ref: 'ColorSchema',
-      type: 'string',
-      component: 'dropdown',
-      label: 'BackGround Style',
-      options: [
-        {
-          value: 'Clean',
-          label: 'Clean'
-        },
-        {
-          value: 'Soft',
-          label: 'Soft'
-        },
-        {
-          value: 'Dark',
-          label: 'Dark'
-        },
-        {
-          value: 'Night',
-          label: 'Night'
-        },
-        {
-          value: 'Blue',
-          label: 'Blue'
-        },
-        {
-          value: 'Orange',
-          label: 'Orange'
-        },
-        {
-          value: 'Red',
-          label: 'Red'
-        },
-        {
-          value: 'Green',
-          label: 'Green'
-        },
-        {
-          value: 'Violete',
-          label: 'Violete'
-        },
-        {
-          value: 'Custom',
-          label: 'Custom'
-        }
-      ],
-      defaultValue: 'Clean',
-      show (data) {
-        return !data.customfilebool;
-      }
+    rowEvenBGColor: {
+      component: 'color-picker',
+      defaultValue: {
+        color: '#fff',
+        index: 1
+      },
+      dualOutput: true,
+      label: 'Even row background color',
+      ref: 'rowEvenBGColor',
+      type: 'object'
+    },
+    rowOddBGColor: {
+      component: 'color-picker',
+      defaultValue: {
+        color: '#b6d7ea',
+        index: 4
+      },
+      dualOutput: true,
+      label: 'Odd row background color',
+      ref: 'rowOddBGColor',
+      type: 'object'
     },
     BodyTextColor: {
       ref: 'BodyTextColorSchema',

src/definition/header.js

@@ -24,102 +24,26 @@ const header = {
       defaultValue: 2
     },
     headercolors: {
+      component: 'color-picker',
+      defaultValue: {
+        index: 6,
+        color: "#4477aa"
+      },
+      dualOutput: true,
+      label: 'BackGround Header Color',
       ref: 'HeaderColorSchema',
-      type: 'string',
-      component: 'dropdown',
-      label: 'Background Header Color',
-      options: [
-        {
-          value: 'Clean',
-          label: 'Clean'
-        },
-        {
-          value: 'Soft',
-          label: 'Soft'
-        },
-        {
-          value: 'Dark',
-          label: 'Dark'
-        },
-        {
-          value: 'Night',
-          label: 'Night'
-        },
-        {
-          value: 'Blue',
-          label: 'Blue'
-        },
-        {
-          value: 'Orange',
-          label: 'Orange'
-        },
-        {
-          value: 'Red',
-          label: 'Red'
-        },
-        {
-          value: 'Green',
-          label: 'Green'
-        },
-        {
-          value: 'Violete',
-          label: 'Violete'
-        },
-        {
-          value: 'Custom',
-          label: 'Custom'
-        }
-      ],
-      defaultValue: 'Night'
+      type: 'object'
     },
     HeaderTextColor: {
       ref: 'HeaderTextColorSchema',
-      type: 'string',
-      component: 'dropdown',
       label: 'Text Header Color',
-      options: [
-        {
-          value: 'Black',
-          label: 'Black'
-        },
-        {
-          value: 'DimGray',
-          label: 'DimGray'
-        },
-        {
-          value: 'ForestGreen',
-          label: 'ForestGreen'
-        },
-        {
-          value: 'Gainsboro',
-          label: 'Gainsboro'
-        },
-        {
-          value: 'Indigo',
-          label: 'Indigo'
-        },
-        {
-          value: 'Navy',
-          label: 'Navy'
-        },
-        {
-          value: 'Purple',
-          label: 'Purple'
-        },
-        {
-          value: 'WhiteSmoke',
-          label: 'WhiteSmoke'
-        },
-        {
-          value: 'White',
-          label: 'White'
-        },
-        {
-          value: 'YellowGreen',
-          label: 'YellowGreen'
-        }
-      ],
-      defaultValue: 'WhiteSmoke'
+      component: 'color-picker',
+      dualOutput: true,
+      defaultValue: {
+        index: 1,
+        color: "#ffffff"
+      },
+      type: 'object'
     },
     HeaderFontSize: {
       ref: 'lettersizeheader',

src/definition/index.js

@@ -3,8 +3,6 @@ import header from './header';
 import formatted from './formatted';
 import conceptSemaphores from './concept-semaphores';
 import metricSemaphores from './metric-semaphores';
-import colorLibrary from './color-library';
-import pijamaColorLibrary from './pijama-color-library';
 
 const definition = {
   component: 'accordion',
@@ -22,13 +20,11 @@ const definition = {
     },
     settings: {
       items: {
-        ColorLibrary: colorLibrary,
         ConceptSemaphores: conceptSemaphores,
         Formatted: formatted,
         Header: header,
         MetricSemaphores: metricSemaphores,
-        Pagination: pagination,
-        PijamaColorLibrary: pijamaColorLibrary
+        Pagination: pagination
       },
       uses: 'settings'
     },

src/definition/metric-semaphores.js

@@ -40,7 +40,7 @@ const metricSemaphores = {
       type: 'object',
       component: 'color-picker',
       defaultValue: {
-        index: 7,
+        index: 8,
         color: '#f93f17'
       }
     },
@@ -50,7 +50,7 @@ const metricSemaphores = {
       type: 'object',
       component: 'color-picker',
       defaultValue: {
-        index: 10,
+        index: 11,
         color: '#ffffff'
       }
     },
@@ -66,7 +66,7 @@ const metricSemaphores = {
       type: 'object',
       component: 'color-picker',
       defaultValue: {
-        index: 8,
+        index: 9,
         color: '#ffcf02'
       }
     },
@@ -76,7 +76,7 @@ const metricSemaphores = {
       type: 'object',
       component: 'color-picker',
       defaultValue: {
-        index: 11,
+        index: 12,
         color: '#000000'
       }
     },
@@ -86,7 +86,7 @@ const metricSemaphores = {
       type: 'object',
       component: 'color-picker',
       defaultValue: {
-        index: 9,
+        index: 10,
         color: '#276e27'
       }
     },
@@ -96,7 +96,7 @@ const metricSemaphores = {
       type: 'object',
       component: 'color-picker',
       defaultValue: {
-        index: 10,
+        index: 11,
         color: '#ffffff'
       }
     }

src/definition/pijama-color-library.js

@@ -1,68 +0,0 @@
-const pijamaColorLibrary = {
-  type: 'items',
-  label: 'Pijama Colors Library',
-  items: {
-    ColLibCleanP: {
-      ref: 'collibcleanp',
-      translation: 'Clean',
-      type: 'string',
-      defaultValue: '#ffffff'
-    },
-    ColLibSoftP: {
-      ref: 'collibsoftp',
-      translation: 'Soft',
-      type: 'string',
-      defaultValue: '#ffffff'
-    },
-    ColLibDarkP: {
-      ref: 'collibdarkp',
-      translation: 'Dark',
-      type: 'string',
-      defaultValue: '#efefef'
-    },
-    ColLibNightP: {
-      ref: 'collibnightp',
-      translation: 'Night',
-      type: 'string',
-      defaultValue: '#c4c4c4'
-    },
-    ColLibRedP: {
-      ref: 'collibredp',
-      translation: 'Red',
-      type: 'string',
-      defaultValue: '#ffcccc'
-    },
-    ColLibOrangeP: {
-      ref: 'colliborangep',
-      translation: 'Orange',
-      type: 'string',
-      defaultValue: '#ffcc66'
-    },
-    ColLibVioleteP: {
-      ref: 'collibvioletep',
-      translation: 'Violete',
-      type: 'string',
-      defaultValue: '#e6e6ff'
-    },
-    ColLibBlueP: {
-      ref: 'collibbluep',
-      translation: 'Blue',
-      type: 'string',
-      defaultValue: '#b3d9ff'
-    },
-    ColLibGreenP: {
-      ref: 'collibgreenp',
-      translation: 'Green',
-      type: 'string',
-      defaultValue: '#98fb98'
-    },
-    ColLibCustomP: {
-      ref: 'collibcustomp',
-      label: 'Custom',
-      type: 'string',
-      defaultValue: '#ffffff'
-    }
-  }
-};
-
-export default pijamaColorLibrary;

src/haiku.spec.js

@@ -1,9 +0,0 @@
-/* https://randomhaiku.com */
-
-describe('behind the money', () => {
-  describe('Canada and Panda work.', () => {
-    it('Tiger starts blowing.', () => {
-      expect(true).toBeTruthy();
-    });
-  });
-});

src/headers-table/column-header.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Tooltip from '../tooltip/index.jsx';
 
 class ColumnHeader extends React.PureComponent {
   constructor (props) {
     super(props);
-
     this.handleSelect = this.handleSelect.bind(this);
   }
 
@@ -14,7 +14,9 @@ class ColumnHeader extends React.PureComponent {
   }
 
   render () {
-    const { baseCSS, cellSuffix, colSpan, entry, styling } = this.props;
+    const { baseCSS, cellSuffix, colSpan, entry, styling, qlik } = this.props;
+    const inEditState = qlik.inEditState();
+
     const style = {
       ...baseCSS,
       fontSize: `${14 + styling.headerOptions.fontSizeAdjustment} px`,
@@ -29,7 +31,12 @@ class ColumnHeader extends React.PureComponent {
         onClick={this.handleSelect}
         style={style}
       >
-        {entry.displayValue}
+        <Tooltip
+          isTooltipActive={!inEditState}
+          tooltipText={entry.displayValue}
+        >
+          {entry.displayValue}
+        </Tooltip>
       </th>
     );
   }

src/headers-table/index.componentModel.js

@@ -0,0 +1,5 @@
+function Model (component) {
+  this.component = component;
+}
+
+export default Model;

src/headers-table/index.spec.js

@@ -0,0 +1,43 @@
+import merge from 'lodash.merge';
+import Model from './index.componentModel';
+import Component from './index.jsx';
+import { mountedComponent } from 'test-utilities';
+import sampleState from 'test-utilities/capex-sample-state';
+
+
+describe('<HeadersTable />', () => {
+  const { data, general, styling } = sampleState;
+  const defaultProps = {
+    data,
+    general,
+    qlik: {
+      backendApi: {
+        selectValues: () => {}
+      },
+      inEditState: () => {}
+    },
+    styling
+  };
+
+  function setup (otherProps = {}) {
+    const props = merge(defaultProps, otherProps);
+
+    return mountedComponent(Model, Component, props);
+  }
+
+  it('should render without exploding when 2 dimensions', () => {
+    const model = setup();
+    expect(model.component).toBeDefined();
+  });
+
+  it('should render without exploding when 1 dimension', () => {
+    const noSecondDimensionProps = {
+      data: {
+        ...defaultProps.data.headers,
+        dimension2: []
+      }
+    };
+    const model = setup(noSecondDimensionProps);
+    expect(model.component).toBeDefined();
+  });
+});

src/headers-table/measurement-column-header.jsx

@@ -36,7 +36,7 @@ const MeasurementColumnHeader = ({ baseCSS, general, hasSecondDimension, measure
     ...baseCSS,
     cursor: 'default',
     fontSize: `${15 + fontSizeAdjustment} px`,
-    height: '70px',
+    height: '80px',
     verticalAlign: 'middle'
   };
   return (

src/initialize-transformed.js

@@ -1,32 +1,6 @@
 import jQuery from 'jquery';
 import { distinctArray } from './utilities';
 
-// TODO: rename colors
-function initializeColors ({ layout }) {
-  return {
-    vColLibBlue: layout.collibblue,
-    vColLibBlueP: layout.collibbluep,
-    vColLibClean: layout.collibclean,
-    vColLibCleanP: layout.collibcleanp,
-    vColLibCustom: layout.collibcustom,
-    vColLibCustomP: layout.collibcustomp,
-    vColLibDark: layout.collibdark,
-    vColLibDarkP: layout.collibdarkp,
-    vColLibGreen: layout.collibgreen,
-    vColLibGreenP: layout.collibgreenp,
-    vColLibNight: layout.collibnight,
-    vColLibNightP: layout.collibnightp,
-    vColLibOrange: layout.colliborange,
-    vColLibOrangeP: layout.colliborangep,
-    vColLibRed: layout.collibred,
-    vColLibRedP: layout.collibredp,
-    vColLibSoft: layout.collibsoft,
-    vColLibSoftP: layout.collibsoftp,
-    vColLibViolete: layout.collibviolete,
-    vColLibVioleteP: layout.collibvioletep
-  };
-}
-
 function getAlignment (option) {
   const alignmentOptions = {
     1: 'left',
@@ -194,7 +168,6 @@ function generateDataSet (component, dimensionsInformation, measurementsInformat
 }
 
 async function initializeTransformed ({ $element, layout, component }) {
-  const colors = initializeColors({ layout });
   const dimensionsInformation = component.backendApi.getDimensionInfos();
   const measurementsInformation = component.backendApi.getMeasureInfos();
   const dimensionCount = layout.qHyperCube.qDimensionInfo.length;
@@ -264,7 +237,6 @@ async function initializeTransformed ({ $element, layout, component }) {
       dimensionSelectionCounts: dimensionsInformation.map(dimensionInfo => dimensionInfo.qStateCounts.qSelected)
     },
     styling: {
-      colors,
       customCSV: {
         basic: customSchemaBasic,
         count: customHeadersCount,
@@ -273,13 +245,13 @@ async function initializeTransformed ({ $element, layout, component }) {
       hasCustomFileStyle: layout.customfilebool,
       headerOptions: {
         alignment: getAlignment(layout.HeaderAlign),
-        colorSchema: colors[`vColLib${layout.HeaderColorSchema}`],
+        colorSchema: layout.HeaderColorSchema.color,
         fontSizeAdjustment: getFontSizeAdjustment(layout.lettersizeheader),
-        textColor: layout.HeaderTextColorSchema
+        textColor: layout.HeaderTextColorSchema.color
       },
       options: {
-        backgroundColor: colors[`vColLib${layout.ColorSchema}`],
-        backgroundColorOdd: colors[`vColLib${layout.ColorSchemaP}`],
+        backgroundColor: layout.rowEvenBGColor,
+        backgroundColorOdd: layout.rowOddBGColor,
         color: layout.BodyTextColorSchema,
         fontFamily: layout.FontFamily,
         fontSizeAdjustment: getFontSizeAdjustment(layout.lettersize),
@@ -288,6 +260,7 @@ async function initializeTransformed ({ $element, layout, component }) {
       semaphoreColors: {
         fieldsToApplyTo: {
           applyToAll: layout.allsemaphores,
+          applyToMetric: layout.allmetrics,
           specificFields: [
             layout.conceptsemaphore1,
             layout.conceptsemaphore2,
@@ -298,11 +271,12 @@ async function initializeTransformed ({ $element, layout, component }) {
             layout.conceptsemaphore7,
             layout.conceptsemaphore9,
             layout.conceptsemaphore10
-          ]
+          ],
+          metricsSpecificFields: layout.metricssemaphore.split(',').map(entry => Number(entry))
         },
         status: {
-          critical: layout.metricstatus1,
-          medium: layout.metricstatus2
+          critical: layout.metricsstatus1,
+          medium: layout.metricsstatus2
         },
         statusColors: {
           critical: {

src/main.less

@@ -3,6 +3,12 @@
   @TableBorder: 1px solid #d3d3d3;
   @KpiTableWidth: 230px;
 
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
   .edit-mode {
     pointer-events: none;
   }
@@ -18,6 +24,38 @@
     z-index: 110;
   }
 
+  .tooltip-wrapper {
+    min-width: 25px;
+    position: fixed;
+    padding: 5px;
+    padding-top: 15px;
+    background-color: #404040;
+    z-index: 100;
+    pointer-events: none;
+    border-radius: 5px;
+    height: 30px;
+    width: auto;
+    opacity: 0.9;
+    text-align: center;
+    transform: translate(-50%, -110%);
+
+    > p {
+      color: #fff;
+    }
+  }
+
+  .tooltip-wrapper::after {
+    content: "";
+    position: absolute;
+    bottom: -10px;
+    left: 50%;
+    border-width: 10px 10px 0;
+    border-style: solid;
+    border-color: #404040 transparent;
+    margin-left: -10px;
+    pointer-events: none;
+  }
+
   .icon-xls {
     text-align: left;
   }
@@ -38,8 +76,8 @@
   td,
   th {
     border: 1px solid #fff;
-    padding: 5px;
     border-collapse: collapse;
+    padding: 5px !important; // prevent overwriting from single object
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -102,6 +140,7 @@
   /* ***************** */
 
   .grid-cells {
+    position: relative;
     ._cell(70px);
   }
 
@@ -189,22 +228,11 @@
     min-width: 522px;
   }
 
-  .grid-cells::before {
-    content: "\00a0";
-  }
-
   .grid {
     height: 50px;
     width: 350px;
   }
 
-  /* popups for headers */
-  .header-wrapper {
-    position: absolute;
-    top: 0;
-    z-index: 1;
-  }
-
   .tooltip {
     position: fixed !important;
     color: rgb(70, 70, 70);
@@ -213,12 +241,6 @@
     border: groove;
   }
 
-  .row-wrapper {
-    height: calc(~"100% - 97px");
-    padding: 0;
-    margin-top: 0;
-  }
-
   .kpi-table .fdim-cells,
   .data-table td {
     line-height: 1em !important;
@@ -271,9 +293,9 @@
 
   // hide scrollbars
   .kpi-table .header-wrapper,
-  .kpi-table .row-wrapper,
-  .data-table .header-wrapper,
-  .data-table .row-wrapper {
+  .data-table .header-wrapper {
+    /* stylelint-disable-next-line property-no-unknown */
+    scrollbar-width: none;
     -ms-overflow-style: none; // IE 10+
     -moz-overflow: -moz-scrollbars-none; // Firefox
 

src/paint.jsx

@@ -1,10 +1,7 @@
-import $ from 'jquery'; // eslint-disable-line id-length
 import initializeStore from './store';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import HeadersTable from './headers-table/index.jsx';
-import DataTable from './data-table/index.jsx';
-import { LinkedScrollWrapper, LinkedScrollSection } from './linked-scroll';
+import Root from './root.jsx';
 
 export default async function paint ($element, layout, component) {
   const state = await initializeStore({
@@ -14,70 +11,12 @@ export default async function paint ($element, layout, component) {
   });
   const editmodeClass = component.inAnalysisState() ? '' : 'edit-mode';
   const jsx = (
-    <LinkedScrollWrapper>
-      <div className={`kpi-table ${editmodeClass}`}>
-        <HeadersTable
-          data={state.data}
-          general={state.general}
-          qlik={component}
-          styling={state.styling}
-        />
-        <LinkedScrollSection linkVertical>
-          <DataTable
-            data={state.data}
-            general={state.general}
-            qlik={component}
-            renderData={false}
-            styling={state.styling}
-          />
-        </LinkedScrollSection>
-      </div>
-      <div className={`data-table ${editmodeClass}`}>
-        <LinkedScrollSection linkHorizontal>
-          <HeadersTable
-            data={state.data}
-            general={state.general}
-            qlik={component}
-            styling={state.styling}
-          />
-        </LinkedScrollSection>
-        <LinkedScrollSection
-          linkHorizontal
-          linkVertical
-        >
-          <DataTable
-            data={state.data}
-            general={state.general}
-            qlik={component}
-            styling={state.styling}
-          />
-        </LinkedScrollSection>
-      </div>
-    </LinkedScrollWrapper>
+    <Root
+      qlik={component}
+      state={state}
+      editmodeClass={editmodeClass}
+    />
   );
 
   ReactDOM.render(jsx, $element[0]);
-
-  // TODO: fixing tooltips has a seperate issue, make sure to remove this as part of that issue
-  $(`[tid="${layout.qInfo.qId}"] .header-wrapper th`).hover(function () {
-    $(`[tid="${layout.qInfo.qId}"] .tooltip`).delay(500)
-      .show(0);
-    $(`[tid="${layout.qInfo.qId}"] .header-wrapper th`).children(`[tid="${layout.qInfo.qId}"] .tooltip`)
-      .remove();
-
-    const element = $(this);
-    const offset = element.offset();
-    const toolTip = $('<div class="tooltip"></div>');
-
-    toolTip.css({
-      left: offset.left,
-      top: offset.top
-    });
-
-    toolTip.text(element.text());
-    $(`[tid="${layout.qInfo.qId}"] .header-wrapper th`).append(toolTip);
-  }, () => {
-    $(`[tid="${layout.qInfo.qId}"] .tooltip`).delay(0)
-      .hide(0);
-  });
 }

src/root.componentModel.js

@@ -0,0 +1,5 @@
+function Model (component) {
+  this.component = component;
+}
+
+export default Model;

src/root.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import HeadersTable from './headers-table/index.jsx';
+import DataTable from './data-table/index.jsx';
+import { LinkedScrollWrapper, LinkedScrollSection } from './linked-scroll';
+
+const Root = ({ state, qlik, editmodeClass }) => (
+  <LinkedScrollWrapper>
+    <div className={`kpi-table ${editmodeClass}`}>
+      <HeadersTable
+        data={state.data}
+        general={state.general}
+        qlik={qlik}
+        styling={state.styling}
+      />
+      <LinkedScrollSection linkVertical>
+        <DataTable
+          data={state.data}
+          general={state.general}
+          qlik={qlik}
+          renderData={false}
+          styling={state.styling}
+        />
+      </LinkedScrollSection>
+    </div>
+    <div className={`data-table ${editmodeClass}`}>
+      <LinkedScrollSection linkHorizontal>
+        <HeadersTable
+          data={state.data}
+          general={state.general}
+          qlik={qlik}
+          styling={state.styling}
+        />
+      </LinkedScrollSection>
+      <LinkedScrollSection
+        linkHorizontal
+        linkVertical
+      >
+        <DataTable
+          data={state.data}
+          general={state.general}
+          qlik={qlik}
+          styling={state.styling}
+        />
+      </LinkedScrollSection>
+    </div>
+  </LinkedScrollWrapper>
+);
+
+Root.propTypes = {
+  qlik: PropTypes.shape({}).isRequired,
+  state: PropTypes.shape({
+    data: PropTypes.object.isRequired,
+    general: PropTypes.object.isRequired,
+    styling: PropTypes.object.isRequired
+  }).isRequired,
+  editmodeClass: PropTypes.string.isRequired
+};
+
+export default Root;

src/root.spec.js

@@ -0,0 +1,29 @@
+import merge from 'lodash.merge';
+import Model from './root.componentModel';
+import Component from './root.jsx';
+import { mountedComponent } from 'test-utilities';
+import sampleState from 'test-utilities/capex-sample-state';
+
+describe('<Root />', () => {
+  const state = sampleState;
+  const defaultProps = {
+    qlik: {
+      backendApi: {
+        selectValues: () => {}
+      },
+      inEditState: () => {}
+    },
+    state
+  };
+
+  function setup (otherProps = {}) {
+    const props = merge(defaultProps, otherProps);
+
+    return mountedComponent(Model, Component, props);
+  }
+
+  it('should render without exploding', () => {
+    const model = setup();
+    expect(model.component).toBeDefined();
+  });
+});

src/style-builder.js

@@ -1,6 +1,5 @@
 function StyleBuilder (styling) {
   const {
-    colors,
     customCSV,
     options
   } = styling;
@@ -12,9 +11,13 @@ function StyleBuilder (styling) {
   let hasCustomFileStyle = false;
 
   function applyStandardAttributes (rowNumber) {
-    const isEven = rowNumber % 2 === 0;
-    style.backgroundColor = isEven ? options.backgroundColor : options.backgroundColorOdd;
-    style.color = options.color;
+    const hasBackgroundColor = options.backgroundColor && options.backgroundColor.color;
+    const hasOddBackgroundColor = options.backgroundColorOdd && options.backgroundColorOdd.color;
+    if (hasBackgroundColor && hasOddBackgroundColor) {
+      const isEven = rowNumber % 2 === 0;
+      style.backgroundColor = isEven ? options.backgroundColor.color : options.backgroundColorOdd.color;
+      style.color = options.color;
+    }
     style.fontSize = `${13 + options.fontSizeAdjustment}px`;
   }
 
@@ -30,16 +33,7 @@ function StyleBuilder (styling) {
     '<bold>': () => { style.fontWeight = 'bold'; },
     '<italic>': () => { style.fontStyle = 'italic'; },
     '<oblique>': () => { style.fontStyle = 'oblique'; },
-    // background and comment color
-    '<dark>': () => applyColor(colors.vColLibDark),
-    '<night>': () => applyColor(colors.vColLibNight),
-    '<soft>': () => applyColor(colors.vColLibSoft),
-    '<red>': () => applyColor(colors.vColLibRed),
-    '<orange>': () => applyColor(colors.vColLibOrange),
-    '<violete>': () => applyColor(colors.vColLibViolete),
-    '<blue>': () => applyColor(colors.vColLibBlue),
-    '<green>': () => applyColor(colors.vColLibGreen),
-    // font color TODO: this is a color just like the others, but it applies to text instead.. any way to make it less weird?
+    // font color
     '<white>': () => { style.color = 'white'; },
     // font size
     '<large>': () => { style.fontSize = `${15 + options.fontSizeAdjustment}px`; },

src/tooltip/index.jsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const handleCalculateTooltipPosition = (event) => {
+  const tooltipClassName = 'tooltip-wrapper';
+  const tooltip = document.getElementsByClassName(tooltipClassName);
+
+  tooltip[0].style.left = event.clientX + 'px';
+  tooltip[0].style.top = event.clientY + 'px';
+};
+class Tooltip extends React.Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      showTooltip: false
+    };
+    this.handleRenderTooltip = this.handleRenderTooltip.bind(this);
+  }
+
+  shouldComponentUpdate (nextProps, nextState) {
+    const { showTooltip } = this.state;
+    if (nextState.showTooltip === showTooltip) {
+      return false;
+    }
+    return true;
+  }
+
+  handleRenderTooltip () {
+    const { showTooltip } = this.state;
+    this.setState({ showTooltip: !showTooltip });
+  }
+
+
+  render () {
+    const { children, tooltipText } = this.props;
+    const { showTooltip } = this.state;
+
+    return (
+      <div
+        onMouseMove={handleCalculateTooltipPosition}
+        onMouseOut={this.handleRenderTooltip}
+        onMouseOver={this.handleRenderTooltip}
+      >
+        {children}
+
+        {showTooltip
+          ? (
+            <div
+              className="tooltip-wrapper"
+            >
+              <p>
+                {tooltipText}
+              </p>
+            </div>
+          ) : null}
+      </div>
+    );
+  }
+}
+
+Tooltip.propTypes = {
+  children: PropTypes.string.isRequired,
+  tooltipText: PropTypes.string.isRequired
+};
+export default Tooltip;

test/test-utilities/enzyme-setup.js

@@ -0,0 +1,10 @@
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import jasmineEnzyme from 'jasmine-enzyme';
+Enzyme.configure({ adapter: new Adapter() });
+
+beforeEach(() => {
+  jasmineEnzyme();
+});
+
+export * from 'enzyme';

test/test-utilities/index.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { mount } from 'test-utilities/enzyme-setup';
+
+export function mountedComponent (Model, Component, props = {}) {
+  const component = mount((
+    <Component {...props} />
+  )).find(Component);
+  return new Model(component);
+}