Merge branch 'hotfix/bugfixes'

PayEx · Jul 3, 2018 · 76bfd0c · 76bfd0c
2 parents 9b3dd3a + 2c7558a
commit 76bfd0c
Show file tree

Hide file tree

Showing 29 changed files with 59 additions and 47 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,14 @@
 
 All notable changes to this project will be documented in this file.
 
+## [0.7.1] - 2018-07-03
+
+### Fixed
+
+- Fixed issue with modal script crashing when not havng a tag with the attribute `data-modal-close`.
+- Fixed issue with topbar, also added optional parameter to init function to better preview topbar component in documentation.
+- Fixed issue with radio and checkbox components not displaying properly when using longer chunks of text in the label tag.
+
 ## [0.7.0] - 2018-07-03
 
 ### Added

diff --git a/dist/0.7.0/scripts/app.js b/dist/0.7.0/scripts/app.js
diff --git a/dist/0.7.0/scripts/app.js.map b/dist/0.7.0/scripts/app.js.map
diff --git a/dist/0.7.0/scripts/px-script.js.map b/dist/0.7.0/scripts/px-script.js.map
diff --git a/dist/0.7.0/styles/px.css.map b/dist/0.7.0/styles/px.css.map
diff --git a/dist/0.7.0/styles/templates/documentation.css.map b/dist/0.7.0/styles/templates/documentation.css.map
diff --git a/dist/0.7.1/scripts/app.js b/dist/0.7.1/scripts/app.js
diff --git a/dist/0.7.1/scripts/app.js.map b/dist/0.7.1/scripts/app.js.map
diff --git a/dist/0.7.0/scripts/core-libraries.js → dist/0.7.1/scripts/core-libraries.js b/dist/0.7.0/scripts/core-libraries.js → dist/0.7.1/scripts/core-libraries.js
diff --git a/dist/0.7.0/scripts/core-libraries.js.map → dist/0.7.1/scripts/core-libraries.js.map b/dist/0.7.0/scripts/core-libraries.js.map → dist/0.7.1/scripts/core-libraries.js.map
diff --git a/dist/0.7.0/scripts/polyfills.js → dist/0.7.1/scripts/polyfills.js b/dist/0.7.0/scripts/polyfills.js → dist/0.7.1/scripts/polyfills.js
diff --git a/dist/0.7.0/scripts/polyfills.js.map → dist/0.7.1/scripts/polyfills.js.map b/dist/0.7.0/scripts/polyfills.js.map → dist/0.7.1/scripts/polyfills.js.map
diff --git a/dist/0.7.0/scripts/px-script.js → dist/0.7.1/scripts/px-script.js b/dist/0.7.0/scripts/px-script.js → dist/0.7.1/scripts/px-script.js
diff --git a/dist/0.7.1/scripts/px-script.js.map b/dist/0.7.1/scripts/px-script.js.map
diff --git a/dist/0.7.0/scripts/react-libraries.js → dist/0.7.1/scripts/react-libraries.js b/dist/0.7.0/scripts/react-libraries.js → dist/0.7.1/scripts/react-libraries.js
diff --git a/dist/0.7.0/scripts/react-libraries.js.map → dist/0.7.1/scripts/react-libraries.js.map b/dist/0.7.0/scripts/react-libraries.js.map → dist/0.7.1/scripts/react-libraries.js.map
diff --git a/dist/0.7.0/styles/px.css → dist/0.7.1/styles/px.css b/dist/0.7.0/styles/px.css → dist/0.7.1/styles/px.css
diff --git a/dist/0.7.1/styles/px.css.map b/dist/0.7.1/styles/px.css.map
diff --git a/.../0.7.0/styles/templates/documentation.css → .../0.7.1/styles/templates/documentation.css b/.../0.7.0/styles/templates/documentation.css → .../0.7.1/styles/templates/documentation.css
diff --git a/dist/0.7.1/styles/templates/documentation.css.map b/dist/0.7.1/styles/templates/documentation.css.map
diff --git a/dist/index.html b/dist/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>PayEx DesignGuide</title>
-<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png"><link rel="shortcut icon" href="/icons/favicon.ico"><link href="/0.7.0/styles/px.css?349740000a5d6d84e2ca" rel="stylesheet"><link href="/0.7.0/styles/templates/documentation.css?349740000a5d6d84e2ca" rel="stylesheet"><link href="/styles/designguide.css?349740000a5d6d84e2ca" rel="stylesheet"></head>
+<link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png"><link rel="shortcut icon" href="/icons/favicon.ico"><link href="/0.7.1/styles/px.css?9c26174d5bc4a4f7131c" rel="stylesheet"><link href="/0.7.1/styles/templates/documentation.css?9c26174d5bc4a4f7131c" rel="stylesheet"><link href="/styles/designguide.css?9c26174d5bc4a4f7131c" rel="stylesheet"></head>
 <body>
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-3440932-20"></script>
@@ -30,5 +30,5 @@ <h2>Welcome to the PayEx DesignGuide</h2>
     <div id="root"></div>
     <script>window.stopPx=true</script>
     <script src="https://www.gstatic.com/charts/loader.js"></script>
-<script type="text/javascript" src="/0.7.0/scripts/px-script.js?349740000a5d6d84e2ca&349740000a5d6d84e2ca"></script><script type="text/javascript" src="/0.7.0/scripts/polyfills.js?349740000a5d6d84e2ca&349740000a5d6d84e2ca"></script><script type="text/javascript" src="/0.7.0/scripts/core-libraries.js?349740000a5d6d84e2ca&349740000a5d6d84e2ca"></script><script type="text/javascript" src="/0.7.0/scripts/react-libraries.js?349740000a5d6d84e2ca&349740000a5d6d84e2ca"></script><script type="text/javascript" src="/0.7.0/scripts/app.js?349740000a5d6d84e2ca&349740000a5d6d84e2ca"></script></body>
+<script type="text/javascript" src="/0.7.1/scripts/px-script.js?9c26174d5bc4a4f7131c&9c26174d5bc4a4f7131c"></script><script type="text/javascript" src="/0.7.1/scripts/polyfills.js?9c26174d5bc4a4f7131c&9c26174d5bc4a4f7131c"></script><script type="text/javascript" src="/0.7.1/scripts/core-libraries.js?9c26174d5bc4a4f7131c&9c26174d5bc4a4f7131c"></script><script type="text/javascript" src="/0.7.1/scripts/react-libraries.js?9c26174d5bc4a4f7131c&9c26174d5bc4a4f7131c"></script><script type="text/javascript" src="/0.7.1/scripts/app.js?9c26174d5bc4a4f7131c&9c26174d5bc4a4f7131c"></script></body>
 </html>
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "design.payex.com",
-    "version": "0.7.0",
+    "version": "0.7.1",
     "description": "PayEx DesignGuide",
     "main": "index.js",
     "scripts": {

diff --git a/src/App/Documentation/components/Topbar/index.js b/src/App/Documentation/components/Topbar/index.js
@@ -3,6 +3,7 @@ import React, { Component } from "react";
 import ComponentPreview from "../../utils/ComponentPreview";
 import DocToc from "../../utils/DocToc";
 import TopbarComponent from "../../../components/Topbar";
+import { topbar } from "../../../../px-script";
 
 const menu = {
     btn: {
@@ -125,6 +126,9 @@ const TopbarText = () => (
 );
 
 class Topbar extends Component {
+    componentDidMount () {
+        topbar.init(1);
+    }
     render () {
         return (
             <div className="doc-container">

diff --git a/src/App/Documentation/getting-started/Introduction/__snapshots__/index.test.js.snap b/src/App/Documentation/getting-started/Introduction/__snapshots__/index.test.js.snap
@@ -29,7 +29,7 @@ exports[`GettingStarted: Introduction Css renders 1`] = `
     language="html"
   >
     <link
-      href="https://design.payex.com/0.7.0/styles/px.css"
+      href="https://design.payex.com/0.7.1/styles/px.css"
       rel="stylesheet"
     />
   </ComponentPreview>
@@ -80,7 +80,7 @@ exports[`GettingStarted: Introduction JavaScript renders 1`] = `
     language="html"
   >
     <script
-      src="https://design.payex.com/0.7.0/scripts/px-script.js"
+      src="https://design.payex.com/0.7.1/scripts/px-script.js"
     />
   </ComponentPreview>
 </React.Fragment>
@@ -125,7 +125,7 @@ exports[`GettingStarted: Introduction StarterTemplate renders 1`] = `
           name="viewport"
         />
         <link
-          href="https://design.payex.com/0.7.0/styles/px.css"
+          href="https://design.payex.com/0.7.1/styles/px.css"
           rel="stylesheet"
         />
         <title>
@@ -137,7 +137,7 @@ exports[`GettingStarted: Introduction StarterTemplate renders 1`] = `
           Hello, PayEx!
         </h1>
         <script
-          src="https://design.payex.com/0.7.0/scripts/px-script.js"
+          src="https://design.payex.com/0.7.1/scripts/px-script.js"
         />
       </body>
     </html>

diff --git a/src/less/components/card.less b/src/less/components/card.less
@@ -29,7 +29,7 @@
             /* stylelint-disable selector-list-comma-newline-after */
             h1, h2, h3, h4, h5, h6,
             .h1, .h2, .h3, .h4, .h5, .h6 {
-                margin-top: 1rem;
+                margin: 1rem 0;
             }
             /* stylelint-enable selector-list-comma-newline-after */
         }

diff --git a/src/less/components/forms.less b/src/less/components/forms.less
@@ -232,7 +232,6 @@ legend {
             display: block;
             position: absolute;
             visibility: visible;
-            top: -1px;
             left: -31px;
             height: @checkbox-height;
             width: @checkbox-width;
@@ -296,7 +295,6 @@ legend {
             display: block;
             position: absolute;
             visibility: visible;
-            top: -1px;
             left: -31px;
             height: @checkbox-height;
             width: @checkbox-width;

diff --git a/src/px-script/modal/index.js b/src/px-script/modal/index.js
@@ -75,7 +75,9 @@ const modal = (() => {
         document.addEventListener("keydown", e => {
             if (e.keyCode === 27) {
                 const modal = document.querySelector(".modal.d-block");
-                _closeModal(modal);
+                if (modal) {
+                    _closeModal(modal);
+                }
             }
         });
     };

diff --git a/src/px-script/topbar/NavMenu.js b/src/px-script/topbar/NavMenu.js
@@ -9,30 +9,30 @@ const icons = {
 
 export default class NavMenu {
     constructor (btnElement) {
+        this.navMenuElement = document.querySelector(btnElement.dataset.toggleNav);
         this.isOpen = false;
         this.btnElement = btnElement;
         this.iconElement = btnElement.querySelector(".topbar-btn-icon");
         this.userIcon = this.iconElement.innerHTML || icons.default;
-        this.navSlides = this.navMenuElement.querySelectorAll(".topbar-nav-slide");
-        this.currentActive = this.navSlides[0];
         this.history = [];
 
-        if (btnElement.dataset.toggleNav) {
-            this.navMenuElement = document.querySelector(btnElement.dataset.toggleNav);
-        }
+        if (this.navMenuElement) {
+            this.navSlides = this.navMenuElement.querySelectorAll(".topbar-nav-slide");
+            this.currentActive = this.navSlides[0];
+            btnElement.addEventListener("click", e => {
+                e.preventDefault();
+                this.handleClick();
+            });
 
-        btnElement.addEventListener("click", e => {
-            e.preventDefault();
-            this.handleClick();
-        });
+            if (this.navSlides.length) {
+                this._initNavSlides();
+            }
 
-        if (this.navSlides.length) {
-            this._initNavSlides();
+            if (this.navMenuElement) {
+                this._initTargetLinks();
+            }
         }
 
-        if (this.navMenuElement) {
-            this._initTargetLinks();
-        }
     }
 
     _initNavSlides () {

diff --git a/src/px-script/topbar/index.js b/src/px-script/topbar/index.js
@@ -1,8 +1,8 @@
 import NavMenu from "./NavMenu";
 
 const topbar = (() => {
-    const init = () => {
-        const menu = document.querySelector(".topbar");
+    const init = index => {
+        const menu = document.querySelectorAll(".topbar")[index || 0];
 
         let leftNavMenu,
             rightNavMenu;