Release 0.16.0

CHANGELOG.md

@@ -1,7 +1,31 @@
 # Changelog
 
-## [0.15.1] - 2018-12-11
+## [0.16.0] - 2019-01-31
+
+### Added
+
+- Added alternative way to display dates to users.
+- Added range selector for datepicker.
+- Added multiple date selector for datepicker.
+
+### Changed
+
+- Replaced rome datepicker with flatpickr as rome is no longer maintained, as a result moment is no longer available through the designguide.
+- Changed cards so it is no longer required to wrap cards in the `.cards` container for them to work.
+- Text color utility class `.color-{name}` has been replaced with `.text-{name}`, and is deprecated.
+- Renamed icons to iconography under core, and moved payment icons under material icons.
+- Replaced b64 images with SVGs for `<select>`, checkbox and radio buttons.
+- Changed icon classes naming so they are more consistent. Icon class names without the correct prefix (.small..) are deprecated.
+- Changed how toasts are displayed in combination with sheet. They now appear to the left of sheet.
 
 ### Fixed
 
-- Fixed issue with flag icons not being generated properly.
+- Fixed issue with negative margin utility classes not being generated.
+- Fixed issue with panel not taking full width on mobile screens.
+- Fixed issue with gap between body and arrow in tooltips on larger screens.
+- Fixed issue with documentation header not appearing on refresh.
+- Fixed issue with wrong spacing in step items with anchor elements (#183).
+- Fixed issue with button loaders displaying button name when clicked.
+- Fixed issue with disabled button loaders being clickable.
+- Fixed issue with tooltip not displaying correctly with icons.
+- Fixed issue with open dialog and sheet padding for mobile.

README.md

@@ -2,7 +2,7 @@
 
 # PayEx DesignGuide
 
-[![Version](https://img.shields.io/badge/Version-0.15.1-blue.svg)](https://github.com/PayEx/design.payex.com/releases/tag/0.15.1)
+[![Version](https://img.shields.io/badge/Version-0.16.0-blue.svg)](https://github.com/PayEx/design.payex.com/releases/tag/0.16.0)
 [![Build status](https://ci.appveyor.com/api/projects/status/1dii19sqw1m7xtsn/branch/master?svg=true)](https://ci.appveyor.com/project/PayEx/design-payex-com/branch/master)
 [![Code Coverage](https://codecov.io/gh/payex/design.payex.com/branch/master/graph/badge.svg)](https://codecov.io/gh/payex/design.payex.com)
 [![Dependabot Status](https://api.dependabot.com/badges/status?host=github&repo=PayEx/design.payex.com)](https://dependabot.com)

package.json

@@ -1,6 +1,6 @@
 {
     "name": "design.payex.com",
-    "version": "0.15.1",
+    "version": "0.16.0",
     "description": "PayEx DesignGuide",
     "main": "index.js",
     "scripts": {
@@ -29,49 +29,49 @@
     },
     "homepage": "https://github.com/PayEx/design.payex.com#readme",
     "dependencies": {
-        "@babel/polyfill": "^7.0.0",
+        "@babel/polyfill": "^7.2.5",
         "chart.js": "^2.7.3",
         "classnames": "^2.2.6",
+        "flatpickr": "^4.5.2",
         "js-beautify": "^1.8.9",
         "normalize.css": "^8.0.1",
         "prism-react-renderer": "^0.1.5",
         "prismjs": "^1.15.0",
-        "react": "^16.6.3",
-        "react-dom": "^16.6.3",
+        "react": "^16.7.0",
+        "react-dom": "^16.7.0",
         "react-loadable": "^5.5.0",
         "react-prism": "^4.3.2",
         "react-router-dom": "^4.3.1",
-        "react-router-hash-link": "^1.2.1",
-        "rome": "^2.1.22"
+        "react-router-hash-link": "^1.2.1"
     },
     "devDependencies": {
-        "@babel/cli": "^7.2.0",
-        "@babel/core": "^7.2.0",
+        "@babel/cli": "^7.2.3",
+        "@babel/core": "^7.2.2",
         "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-        "@babel/preset-env": "^7.2.0",
+        "@babel/preset-env": "^7.3.1",
         "@babel/preset-react": "^7.0.0",
-        "@sentry/browser": "^4.4.1",
+        "@sentry/browser": "^4.5.3",
         "@sentry/webpack-plugin": "^1.6.2",
         "app-manifest-webpack-plugin": "^1.1.3",
-        "autoprefixer": "^9.4.2",
+        "autoprefixer": "^9.4.6",
         "babel-core": "^7.0.0-bridge.0",
         "babel-eslint": "^10.0.1",
         "babel-jest": "^23.6.0",
-        "babel-loader": "^8.0.4",
+        "babel-loader": "^8.0.5",
         "babel-plugin-root-import": "^6.1.0",
         "babel-plugin-transform-dynamic-import": "^2.1.0",
-        "css-loader": "^2.0.0",
+        "css-loader": "^2.1.0",
         "enzyme": "^3.8.0",
         "enzyme-adapter-react-16": "^1.7.1",
         "enzyme-to-json": "^3.3.5",
-        "eslint": "^5.10.0",
+        "eslint": "^5.12.1",
         "eslint-plugin-babel": "^5.3.0",
-        "eslint-plugin-jest": "^22.1.2",
-        "eslint-plugin-node": "^8.0.0",
-        "eslint-plugin-react": "^7.11.1",
+        "eslint-plugin-jest": "^22.1.3",
+        "eslint-plugin-node": "^8.0.1",
+        "eslint-plugin-react": "^7.12.4",
         "eslint-plugin-security": "^1.4.0",
         "eslint-plugin-testcafe": "^0.2.1",
-        "file-loader": "^2.0.0",
+        "file-loader": "^3.0.1",
         "filemanager-webpack-plugin": "^2.0.5",
         "html-webpack-plugin": "^3.2.0",
         "jest": "^23.6.0",
@@ -82,14 +82,14 @@
         "optimize-css-assets-webpack-plugin": "^5.0.1",
         "postcss-loader": "^3.0.0",
         "style-loader": "^0.23.1",
-        "stylelint": "^9.9.0",
+        "stylelint": "^9.10.1",
         "stylelint-config-standard": "^18.2.0",
         "stylelint-declaration-block-no-ignored-properties": "^1.1.0",
-        "testcafe": "^0.23.2",
-        "uglifyjs-webpack-plugin": "^2.0.1",
-        "webpack": "^4.27.1",
+        "testcafe": "^0.23.3",
+        "uglifyjs-webpack-plugin": "^2.1.1",
+        "webpack": "^4.28.4",
         "webpack-bundle-analyzer": "^3.0.3",
-        "webpack-cli": "^3.1.2",
-        "webpack-dev-server": "^3.1.10"
+        "webpack-cli": "^3.2.1",
+        "webpack-dev-server": "^3.1.14"
     }
 }

src/App/Documentation/SelectPanel.js

@@ -40,7 +40,7 @@ class NavGroup extends Component {
 }
 
 const SelectPanel = () => (
-    <div className="doc-sidebar col-xxl-2 col-md-3">
+    <div className="doc-sidebar">
         <SearchBox routes={routes} />
         <nav className="documentation-nav">
             {routes.map((route, i) => {

src/App/Documentation/__snapshots__/index.test.js.snap

@@ -23,7 +23,11 @@ exports[`Documentation: index renders 1`] = `
   <div
     className="row"
   >
-    <withRouter(SelectPanel) />
+    <div
+      className="col-xxl-2 col-md-3 p-0"
+    >
+      <withRouter(SelectPanel) />
+    </div>
     <main
       className="doc-view col-xxl-10 col-md-9"
     >

src/App/Documentation/components/Card/__snapshots__/index.test.js.snap

@@ -123,6 +123,10 @@ exports[`Documentation: Card DefaultBehaviour renders 1`] = `
           textSmall={true}
         />
       </Card>
+    </div>
+    <div
+      className="cards"
+    >
       <Card
         btnTxt="Button"
         footerLinkTxt="You wanna click this link?"
@@ -142,6 +146,10 @@ exports[`Documentation: Card DefaultBehaviour renders 1`] = `
           textSmall={true}
         />
       </Card>
+    </div>
+    <div
+      className="cards"
+    >
       <Card
         btnTxt="Button"
         footerLinkTxt="You wanna click this link?"

src/App/Documentation/components/Card/index.js

@@ -29,7 +29,8 @@ const DefaultBehaviour = () => (
                 >
                     <MediaObject size="sm" icon="account_circle" heading="Bob Corlsan" text="[email protected]" textSmall muted />
                 </CardComponent>
-
+            </div>
+            <div className="cards">
                 <CardComponent
                     type="brand"
                     title="Card brand"
@@ -42,7 +43,8 @@ const DefaultBehaviour = () => (
                 >
                     <MediaObject size="sm" icon="account_balance" heading="725 NOK" text="Outstanding balance" textSmall muted />
                 </CardComponent>
-
+            </div>
+            <div className="cards">
                 <CardComponent
                     type="light"
                     title="Card light"