Merge branch 'develop'

.babelrc

@@ -2,5 +2,28 @@
     "presets": [
         "@babel/preset-env",
         "@babel/preset-react"
+    ],
+    "plugins": [
+        ["babel-plugin-root-import", {
+            "paths": [
+                {
+                    "rootPathPrefix": "~",
+                    "rootPathSuffix": "./"
+                },
+                {
+                    "rootPathPrefix": "$",
+                    "rootPathSuffix": "./src"
+                },
+                {
+                    "rootPathPrefix": "@",
+                    "rootPathSuffix": "./src/App/components"
+                },
+                {
+                    "rootPathPrefix": "#",
+                    "rootPathSuffix": "./src/App/Documentation/utils"
+
+                }
+            ]
+        }]
     ]
 }

.eslintrc

@@ -20,72 +20,77 @@
         "react",
         "node",
         "jest",
-        "testcafe"
+        "testcafe",
+        "security"
     ],
     "extends": [
         "eslint:recommended",
         "plugin:react/recommended",
         "plugin:jest/recommended",
-        "plugin:testcafe/recommended"
+        "plugin:testcafe/recommended",
+        "plugin:security/recommended"
     ],
     "rules": {
-        "array-bracket-spacing":            ["warn"],
-        "babel/new-cap":                    0,
-        "babel/no-invalid-this":            1,
-        "babel/object-curly-spacing":       ["warn", "always"],
-        "babel/quotes":                     ["error", "double"],
-        "babel/semi":                       ["error"],
-        "block-scoped-var":                 ["warn"],
-        "camelcase":                        ["warn"],
-        "comma-dangle":                     ["warn", "never"],
-        "comma-spacing":                    ["warn"],
-        "comma-style":                      ["warn"],
-        "computed-property-spacing":        ["warn"],
-        "constructor-super":                ["error"],
-        "eol-last":                         ["warn"],
-        "eqeqeq":                           ["warn"],
-        "func-call-spacing":                ["warn"],
-        "indent":                           ["error", 4, { "SwitchCase": 1 }],
-        "jsx-quotes":                       ["error", "prefer-double"],
-        "key-spacing":                      ["warn"],
-        "keyword-spacing":                  ["warn"],
-        "linebreak-style":                  0,
-        "new-cap":                          0,
-        "newline-per-chained-call":         ["warn"],
-        "no-alert":                         ["warn"],
-        "no-console":                       ["warn", {"allow": ["warn", "error"]}],
-        "no-const-assign":                  ["error"],
-        "no-extra-semi":                    ["error"],
-        "no-inner-declarations":            0,
-        "no-invalid-regexp":                ["error"],
-        "no-irregular-whitespace":          ["error"],
-        "no-mixed-spaces-and-tabs":         ["error"],
-        "no-multi-spaces":                  ["warn"],
-        "no-multiple-empty-lines":          ["error"],
-        "no-redeclare":                     ["warn"],
-        "no-this-before-super":             ["warn"],
-        "no-trailing-spaces":               ["error"],
-        "no-undef":                         ["error"],
-        "no-unneeded-ternary":              ["warn"],
-        "no-unreachable":                   ["error"],
-        "no-unused-vars":                   ["warn"],
-        "no-var":                           ["warn"],
-        "no-whitespace-before-property":    ["warn"],
-        "node/exports-style":               ["error", "module.exports"],
-        "object-curly-newline":             ["warn"],
-        "object-curly-spacing":             0,
-        "object-property-newline":          ["warn"],
-        "prefer-const":                     ["warn"],
-        "prefer-spread":                    ["warn"],
-        "quotes":                           0,
-        "react/prop-types":                 0,
-        "semi":                             0,
-        "semi-spacing":                     ["warn"],
-        "semi-style":                       ["warn"],
-        "space-before-function-paren":      ["warn"],
-        "space-in-parens":                  ["warn"],
-        "space-infix-ops":                  ["warn"],
-        "spaced-comment":                   ["warn"],
-        "wrap-regex":                       ["error"]
+        "array-bracket-spacing":                ["warn"],
+        "babel/new-cap":                        0,
+        "babel/no-invalid-this":                1,
+        "babel/object-curly-spacing":           ["warn", "always"],
+        "babel/quotes":                         ["error", "double"],
+        "babel/semi":                           ["error"],
+        "block-scoped-var":                     ["warn"],
+        "camelcase":                            ["warn"],
+        "comma-dangle":                         ["warn", "never"],
+        "comma-spacing":                        ["warn"],
+        "comma-style":                          ["warn"],
+        "computed-property-spacing":            ["warn"],
+        "constructor-super":                    ["error"],
+        "eol-last":                             ["warn"],
+        "eqeqeq":                               ["warn"],
+        "func-call-spacing":                    ["warn"],
+        "indent":                               ["error", 4, { "SwitchCase": 1 }],
+        "jsx-quotes":                           ["error", "prefer-double"],
+        "key-spacing":                          ["warn"],
+        "keyword-spacing":                      ["warn"],
+        "linebreak-style":                      0,
+        "new-cap":                              0,
+        "newline-per-chained-call":             ["warn"],
+        "no-alert":                             ["warn"],
+        "no-console":                           ["warn", {"allow": ["warn", "error"]}],
+        "no-const-assign":                      ["error"],
+        "no-extra-semi":                        ["error"],
+        "no-inner-declarations":                0,
+        "no-invalid-regexp":                    ["error"],
+        "no-irregular-whitespace":              ["error"],
+        "no-mixed-spaces-and-tabs":             ["error"],
+        "no-multi-spaces":                      ["warn"],
+        "no-multiple-empty-lines":              ["error"],
+        "no-redeclare":                         ["warn"],
+        "no-this-before-super":                 ["warn"],
+        "no-trailing-spaces":                   ["error"],
+        "no-undef":                             ["error"],
+        "no-unneeded-ternary":                  ["warn"],
+        "no-unreachable":                       ["error"],
+        "no-unused-vars":                       ["warn"],
+        "no-var":                               ["warn"],
+        "no-whitespace-before-property":        ["warn"],
+        "node/exports-style":                   ["error", "module.exports"],
+        "object-curly-newline":                 ["warn"],
+        "object-curly-spacing":                 0,
+        "object-property-newline":              ["warn"],
+        "prefer-const":                         ["warn"],
+        "prefer-spread":                        ["warn"],
+        "quotes":                               0,
+        "react/prop-types":                     0,
+        "security/detect-non-literal-regexp":   0,
+        "security/detect-object-injection":     0,
+        "security/detect-unsafe-regex":         0,
+        "semi":                                 0,
+        "semi-spacing":                         ["warn"],
+        "semi-style":                           ["warn"],
+        "space-before-function-paren":          ["warn"],
+        "space-in-parens":                      ["warn"],
+        "space-infix-ops":                      ["warn"],
+        "spaced-comment":                       ["warn"],
+        "wrap-regex":                           ["error"]
     }
 }

.gitignore

@@ -63,3 +63,5 @@ typings/
 # dotenv environment variables file
 .env
 
+# Mac stuff
+.DS_Store

CHANGELOG.md

@@ -2,6 +2,33 @@
 
 All notable changes to this project will be documented in this file.
 
+## [0.8.0] - 2018-08-15
+
+### Added
+
+- Added section for colors in utilities.
+- Added progress tracker component and documentation.
+- Added tooltip component.
+- Added media object component.
+- Added action list component.
+- Added toast component prototype.
+
+### Changed
+
+- Changed `.background-color` utility class to `.bg-color`.
+- Changed breadcrumb component to disable span elements by default, provided they are not within last-child li element.
+- Reworked styling of tabs component.
+- Reworked alert component.
+
+### Fixed
+
+- Fixed issue with hover table.
+
+### Removed
+
+- Removed mypayex logo option from topbar. Logo is now defaulted to standard payex logo, class `.logo-default` is no longer needed.
+- Removed `.disabled` class styling for pagination component arrows. `span` elements will now act as disabled arrows.
+
 ## [0.7.1] - 2018-07-03
 
 ### Fixed

CONTRIBUTING.md

@@ -51,9 +51,9 @@ Create a new file under `./src/App/Documentation/Components/[MyExampleDocumentat
 
 import React from "react";
 
-import ComponentPreview from "../../utils/ComponentPreview";
-import ComponentPreview from "../../utils/DocToc";
-import MyExampleComponent from "../../../components/MyExampleComponent";
+//Read more about the import shortcuts in the readme (#, @, $ etc.)
+import { ComponentPreview, DocToc } from "#";
+import MyExampleComponent from "@/MyExampleComponent";
 
 const MyExampleDocumentationComponentText = () => (
     <div className="col-md-12 col-lg-10 doc-body">

README.md

@@ -34,6 +34,17 @@ DesignGuide requires [Node.js](https://nodejs.org/en/) (includes npm).
 * Running the command `npm start` starts the webpack dev server, (which is configured in `./webpack.config.js`). If any changes is made to this file, or any files directly influencing this file (i.e. any loaders or plugins) you need to restart the server.
 * The script `npm start` will set the *NODE_ENV* variable to __development__, and start the dev server in development mode. If you wish to run the dev server in production-like environment run the command `npm run start:prod`.
 
+#### Importing components
+
+When importing different components in the files you create, you can use shortcuts for common paths. The shortcuts are as following:
+
+* `~` - root of the project (example `import package from "~/package";`).
+* `$` - `./src`-folder (example `import px from "$/px-script";`).
+* `@` - `./src/App/components`-folder (example `import Alert from "@/Alert";`).
+* `#` - `./src/App/Documentation/utils`-folder (example `import { DocToc } from "#";`).
+
+The shortcuts are specified in the `./.babelrc`-file. Specifying the prefix-shortcuts in the `./jsconfig.json`-file enables path intellisense for the shortcuts (at least in VSCode).
+
 ### Building
 
 To start building, run the command `npm run build` to start in dev-mode, or `npm run build:prod` for production-mode. This will make webpack start bundling everything and make static files in the `./dist/`-folder. It will also run through all files in `./src/` with eslint making sure all files are without errors before building. Also make sure all tests pass, or make changes to them accordingly.
@@ -48,8 +59,8 @@ Design Guide uses [semantic versioning](http://semver.org/). This means that int
 1. Open a terminal and navigate to repo root
 1. Run the command `npm test`
     * Many of the tests are snapshot based, and runs against already created snapshots. If you need to update the snapshots due to changes run the command `npm run test:update`.
-    * A test coverage report is generated after running the tests. This can be found in `./coverage` or.
-> Note: Snapshot testing is pretty unforgiving, so if you make __ANY__ changes to a component which already has a snapshot, the tests __WILL__ crash! So make sure to run `npm test:update` before committing.
+    * A test coverage report is generated after running the tests. This can be found in `./coverage`.
+> Note: Snapshot testing is pretty unforgiving, so if you make __ANY__ changes to how a component is rendered, which already has a snapshot, the tests __WILL__ crash! So make sure to run `npm run test:update` before committing.
 
 ## Code style