From 3da0c3aa4e5b8960da59f9791a33e2daaa598d63 Mon Sep 17 00:00:00 2001 From: erikhallaraaker Date: Tue, 3 Jul 2018 14:57:29 +0200 Subject: [PATCH 1/6] Fixing issue: https://github.com/PayEx/design.payex.com/issues/6 --- src/px-script/topbar/NavMenu.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/px-script/topbar/NavMenu.js b/src/px-script/topbar/NavMenu.js index 37598d0ad..b1bc9d4ae 100644 --- a/src/px-script/topbar/NavMenu.js +++ b/src/px-script/topbar/NavMenu.js @@ -19,20 +19,20 @@ export default class NavMenu { if (btnElement.dataset.toggleNav) { this.navMenuElement = document.querySelector(btnElement.dataset.toggleNav); - } + 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 () { From 0bbc6e68fd438e2a3c436287736eb17fb2d80882 Mon Sep 17 00:00:00 2001 From: erikhallaraaker Date: Tue, 3 Jul 2018 15:50:42 +0200 Subject: [PATCH 2/6] Slightly changed margin on card headings --- src/less/components/card.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/less/components/card.less b/src/less/components/card.less index e08b4f2ba..94224ccd1 100644 --- 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 */ } From 4a34fd0fba51ce7604f86dfe4e53e53eb8a57cd8 Mon Sep 17 00:00:00 2001 From: erikhallaraaker Date: Tue, 3 Jul 2018 16:41:58 +0200 Subject: [PATCH 3/6] Added another safetynet for modal script --- src/px-script/modal/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/px-script/modal/index.js b/src/px-script/modal/index.js index 8481bc1da..e8f2c0be6 100644 --- 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); + } } }); }; From 09c10fc008046e652702a5d84f7167b2e48cbe6f Mon Sep 17 00:00:00 2001 From: erikhallaraaker Date: Tue, 3 Jul 2018 16:44:37 +0200 Subject: [PATCH 4/6] Fixed issue with topbar, also added optional parameter to init function to better preview topbar component in documentation --- src/App/Documentation/components/Topbar/index.js | 4 ++++ src/px-script/topbar/NavMenu.js | 8 ++++---- src/px-script/topbar/index.js | 4 ++-- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/App/Documentation/components/Topbar/index.js b/src/App/Documentation/components/Topbar/index.js index 3d8e7ae55..9efa085bf 100644 --- 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 (
diff --git a/src/px-script/topbar/NavMenu.js b/src/px-script/topbar/NavMenu.js index b1bc9d4ae..80de8faec 100644 --- a/src/px-script/topbar/NavMenu.js +++ b/src/px-script/topbar/NavMenu.js @@ -9,16 +9,16 @@ 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(); diff --git a/src/px-script/topbar/index.js b/src/px-script/topbar/index.js index 17db13754..a7cc8ad40 100644 --- 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; From d545dd91fd7bdf37911d3e07ca25a297d09b0819 Mon Sep 17 00:00:00 2001 From: erikhallaraaker Date: Tue, 3 Jul 2018 16:45:25 +0200 Subject: [PATCH 5/6] Fixed issue with radio and checkbox components not displaying properly when using longer chunks of text in the label tag --- src/less/components/forms.less | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/less/components/forms.less b/src/less/components/forms.less index 3b71d968d..34509339c 100644 --- 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; From 2c7558aca8ed26cb166ddb98e4aec3419ebed654 Mon Sep 17 00:00:00 2001 From: erikhallaraaker Date: Tue, 3 Jul 2018 16:53:14 +0200 Subject: [PATCH 6/6] Prepared 0.7.1 --- CHANGELOG.md | 8 ++++++++ dist/0.7.0/scripts/app.js | 7 ------- dist/0.7.0/scripts/app.js.map | 1 - dist/0.7.0/scripts/px-script.js.map | 1 - dist/0.7.0/styles/px.css.map | 1 - dist/0.7.0/styles/templates/documentation.css.map | 1 - dist/0.7.1/scripts/app.js | 7 +++++++ dist/0.7.1/scripts/app.js.map | 1 + dist/{0.7.0 => 0.7.1}/scripts/core-libraries.js | 2 +- dist/{0.7.0 => 0.7.1}/scripts/core-libraries.js.map | 2 +- dist/{0.7.0 => 0.7.1}/scripts/polyfills.js | 2 +- dist/{0.7.0 => 0.7.1}/scripts/polyfills.js.map | 2 +- dist/{0.7.0 => 0.7.1}/scripts/px-script.js | 4 ++-- dist/0.7.1/scripts/px-script.js.map | 1 + dist/{0.7.0 => 0.7.1}/scripts/react-libraries.js | 2 +- dist/{0.7.0 => 0.7.1}/scripts/react-libraries.js.map | 2 +- dist/{0.7.0 => 0.7.1}/styles/px.css | 2 +- dist/0.7.1/styles/px.css.map | 1 + dist/{0.7.0 => 0.7.1}/styles/templates/documentation.css | 0 dist/0.7.1/styles/templates/documentation.css.map | 1 + dist/index.html | 4 ++-- package.json | 2 +- .../Introduction/__snapshots__/index.test.js.snap | 8 ++++---- 23 files changed, 35 insertions(+), 27 deletions(-) delete mode 100644 dist/0.7.0/scripts/app.js delete mode 100644 dist/0.7.0/scripts/app.js.map delete mode 100644 dist/0.7.0/scripts/px-script.js.map delete mode 100644 dist/0.7.0/styles/px.css.map delete mode 100644 dist/0.7.0/styles/templates/documentation.css.map create mode 100644 dist/0.7.1/scripts/app.js create mode 100644 dist/0.7.1/scripts/app.js.map rename dist/{0.7.0 => 0.7.1}/scripts/core-libraries.js (99%) rename dist/{0.7.0 => 0.7.1}/scripts/core-libraries.js.map (99%) rename dist/{0.7.0 => 0.7.1}/scripts/polyfills.js (96%) rename dist/{0.7.0 => 0.7.1}/scripts/polyfills.js.map (97%) rename dist/{0.7.0 => 0.7.1}/scripts/px-script.js (91%) create mode 100644 dist/0.7.1/scripts/px-script.js.map rename dist/{0.7.0 => 0.7.1}/scripts/react-libraries.js (99%) rename dist/{0.7.0 => 0.7.1}/scripts/react-libraries.js.map (99%) rename dist/{0.7.0 => 0.7.1}/styles/px.css (57%) create mode 100644 dist/0.7.1/styles/px.css.map rename dist/{0.7.0 => 0.7.1}/styles/templates/documentation.css (100%) create mode 100644 dist/0.7.1/styles/templates/documentation.css.map diff --git a/CHANGELOG.md b/CHANGELOG.md index 74dcd1f29..aa5fabd84 100644 --- 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 deleted file mode 100644 index db3e178de..000000000 --- a/dist/0.7.0/scripts/app.js +++ /dev/null @@ -1,7 +0,0 @@ -var payex=webpackJsonppayex(["app"],{"./node_modules/classnames/index.js":function(e,t,l){var a,n;/*! - Copyright (c) 2016 Jed Watson. - Licensed under the MIT License (MIT), see - http://jedwatson.github.io/classnames -*/ -!function(){"use strict";function l(){for(var e=[],t=0;tclose')),p.default.createElement(g.default,{language:"html",showCasePanel:!0,codeFigure:!0},p.default.createElement(y.default,{type:"success",text:"This is a success alert with an icon!",close:!0,icon:"check_circle"}),"\n\n",p.default.createElement(y.default,{type:"neutral",text:"This is a neutral alert with an icon!",close:!0,icon:"info"}),"\n\n",p.default.createElement(y.default,{type:"warning",text:"This is a warning alert with an icon!",close:!0,icon:"warning"}),"\n\n",p.default.createElement(y.default,{type:"danger",text:"This is a danger alert with an icon!",close:!0,icon:"error"}),"\n\n",p.default.createElement(y.default,{type:"light",text:"This is a light alert with an icon!",close:!0,icon:"info_outline"}),"\n\n",p.default.createElement(y.default,{type:"default",text:"This is a default alert with an icon!",close:!0,icon:"info_outline"})),p.default.createElement("h3",null,"External close button"),p.default.createElement("p",null,"To add an external close-button for your alert add the attribute ",p.default.createElement(g.Attribute,{data:!0,name:"alert-close",value:"[alert ID]"})," to the button element."),p.default.createElement(g.default,{language:"html",showCasePanel:!0,codeFigure:!0},p.default.createElement(y.default,{id:"alert-success-1",type:"success",text:"Press the button below to close me",icon:"check_circle"}),"\n\n",p.default.createElement("button",{type:"button",className:"btn btn-neutral","data-alert-close":"alert-success-1"},"Close alert")))};t.ClosingTheAlert=N;var j=function e(){return p.default.createElement(p.default.Fragment,null,p.default.createElement("h2",{id:"extended-usage"},"Extended usage"),p.default.createElement("p",null,"Alerts can also contain additional HTML elements like headings, paragraphs and dividers."),p.default.createElement(g.default,{language:"html",showCasePanel:!0,codeFigure:!0},p.default.createElement("div",{className:"alert alert-success alert-with-icon in"},"\n",p.default.createElement("i",{className:"material-icons","data-alert-close":""},"close"),"\n",p.default.createElement("i",{className:"material-icons alert-icon"},"check_circle"),p.default.createElement("h3",{className:"alert-heading"},"Success!"),p.default.createElement("p",{className:"alert-text"},"You successfully saw the code example under the Extended usage section."),p.default.createElement("p",{className:"alert-text"},"This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content."),p.default.createElement("hr",null),p.default.createElement("p",{className:"alert-text"},"By the way, great job!"))))};t.ExtendedUsage=j;var _=function e(){return p.default.createElement(p.default.Fragment,null,p.default.createElement("h2",{id:"usage-with-javascript"},"Usage with javascript"),p.default.createElement("p",null,"To interact with the alert-component with javascript..."),p.default.createElement("h3",null,"Show alerts"),p.default.createElement(g.default,{language:"javascript",codeFigure:!0},"px.alert.show();","\n","// OR","\n","px.alert.show(id);"),p.default.createElement("h3",null,"Hide alerts"),p.default.createElement(g.default,{language:"javascript",codeFigure:!0},"px.alert.hide();","\n","// OR","\n","px.alert.hide(id);"),p.default.createElement("h3",null,"Methods"),p.default.createElement("table",{className:"table table-striped"},p.default.createElement("thead",null,p.default.createElement("tr",null,p.default.createElement("th",null,"Method"),p.default.createElement("th",null,"Description"))),p.default.createElement("tbody",null,p.default.createElement("tr",null,p.default.createElement("td",null,p.default.createElement(g.PxScript,{component:"alert",func:"init"})),p.default.createElement("td",null,"Initializes all rendered close-buttons. This is done automatically when the ",p.default.createElement("code",{className:"token property"},"px-script.js")," loads, but might have to be used if you are not rendering your alerts right away. For instance, in react, you might want to call this function within the ",p.default.createElement(h.default,{className:"language-javascript"},"componentDidMount()")," method.")),p.default.createElement("tr",null,p.default.createElement("td",null,p.default.createElement(g.PxScript,{component:"alert",func:"show"})),p.default.createElement("td",null,"Gives all rendered alerts the class ",p.default.createElement("code",{className:"token property"},".in"),", effectively giving them the css property ",p.default.createElement(h.default,{className:"language-css"},"display: block;"),".")),p.default.createElement("tr",null,p.default.createElement("td",null,p.default.createElement(g.PxScript,{component:"alert",func:"show",params:["id"]})),p.default.createElement("td",null,"Gives the specified alert the class ",p.default.createElement("code",{className:"token property"},".in"),", giving it the css property ",p.default.createElement(h.default,{className:"language-css"},"display: block;"),". If no alert with the specified id is rendered to the DOM, the method does nothing.")),p.default.createElement("tr",null,p.default.createElement("td",null,p.default.createElement(g.PxScript,{component:"alert",func:"hide"})),p.default.createElement("td",null,"Removes the class ",p.default.createElement("code",{className:"token property"},".in")," from all rendered alerts, effectively giving them the css property ",p.default.createElement(h.default,{className:"language-css"},"display: none;"))),p.default.createElement("tr",null,p.default.createElement("td",null,p.default.createElement(g.PxScript,{component:"alert",func:"hide",params:["id"]})),p.default.createElement("td",null,"Removes the class ",p.default.createElement("code",{className:"token property"},".in")," from the alert specified by id, giving it the css property ",p.default.createElement(h.default,{className:"language-css"},"display: none;"),". If no alert with the specified id is rendered to the DOM, the method does nothing.")))))};t.UsageWithJavascript=_;var P=function e(){return p.default.createElement("div",{className:"col-md-12 col-lg-10 doc-body"},p.default.createElement("p",{className:"lead"},"Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages."),p.default.createElement(x,null),p.default.createElement(w,null),p.default.createElement(k,null),p.default.createElement(N,null),p.default.createElement(j,null))};t.AlertsText=P;var O=function(e){function t(){return o(this,t),d(this,s(t).apply(this,arguments))}return m(t,e),c(t,[{key:"componentDidMount",value:function e(){v.alert.init()}},{key:"render",value:function e(){return p.default.createElement("div",{className:"doc-container"},p.default.createElement("div",{className:"row"},p.default.createElement(P,null),p.default.createElement(b.default,{component:P})))}}]),t}(p.Component),T=O;t.default=T},"./src/App/Documentation/components/Badge/index.js":function(e,t,l){"use strict";function a(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.BadgeText=t.FurtherUsage=t.Overview=t.default=void 0;var n=a(l("./node_modules/react/index.js")),r=a(l("./src/App/Documentation/utils/ComponentPreview.js")),o=a(l("./src/App/Documentation/utils/DocToc.js")),u=function e(){return n.default.createElement(n.default.Fragment,null,n.default.createElement("h2",{id:"overview"},"Overview"),n.default.createElement("p",null,"Overview... ",n.default.createElement("code",{className:"token property"},".badge"),"..."),n.default.createElement(r.default,{language:"html",showCasePanel:!0,codeFigure:!0},n.default.createElement("p",null,"Badge ",n.default.createElement("span",{className:"badge badge-default"},"default")),n.default.createElement("p",null,"Badge ",n.default.createElement("span",{className:"badge badge-brand"},"brand")),n.default.createElement("p",null,"Badge ",n.default.createElement("span",{className:"badge badge-blue"},"blue")),n.default.createElement("p",null,"Badge ",n.default.createElement("span",{className:"badge badge-purple"},"purple")),n.default.createElement("p",null,"Badge ",n.default.createElement("span",{className:"badge badge-yellow"},"yellow")),n.default.createElement("p",null,"Badge ",n.default.createElement("span",{className:"badge badge-red"},"red"))))};t.Overview=u;var c=function e(){return n.default.createElement(n.default.Fragment,null,n.default.createElement("h2",{id:"further-usage"},"Further usage"),n.default.createElement("p",null,"Further usage... ",n.default.createElement("code",{className:"token property"},".badge"),"..."),n.default.createElement(r.default,{language:"html",showCasePanel:!0,codeFigure:!0},n.default.createElement("h1",null,"Badge ",n.default.createElement("small",{className:"badge badge-default"},"default")),n.default.createElement("h2",null,"Badge ",n.default.createElement("small",{className:"badge badge-brand"},"brand")),n.default.createElement("h3",null,"Badge ",n.default.createElement("small",{className:"badge badge-blue"},"blue")),n.default.createElement("h4",null,"Badge ",n.default.createElement("small",{className:"badge badge-purple"},"purple")),n.default.createElement("h5",null,"Badge ",n.default.createElement("small",{className:"badge badge-yellow"},"yellow")),n.default.createElement("h6",null,"Badge ",n.default.createElement("small",{className:"badge badge-red"},"red"))))};t.FurtherUsage=c;var d=function e(){return n.default.createElement("div",{className:"col-md-12 col-lg-10 doc-body"},n.default.createElement("p",{className:"lead"},"Badge..."),n.default.createElement(u,null),n.default.createElement(c,null))};t.BadgeText=d;var i=function e(){return n.default.createElement("div",{className:"doc-container"},n.default.createElement("div",{className:"row"},n.default.createElement(d,null),n.default.createElement(o.default,{component:d})))},s=i;t.default=s},"./src/App/Documentation/components/Breadcrumb/index.js":function(e,t,l){"use strict";function a(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.BreadcrumbText=t.DisabledBreadcrumb=t.SmallBreadCrumb=t.BasicBreadCrumb=t.default=void 0;var n=a(l("./node_modules/react/index.js")),r=a(l("./node_modules/react-prism/lib/index.js")),o=a(l("./src/App/Documentation/utils/ComponentPreview.js")),u=a(l("./src/App/Documentation/utils/DocToc.js")),c=a(l("./src/App/components/Breadcrumb/index.js")),d=function e(){var t=[{title:"Home",href:"#"},{title:"Products",href:"#"},{title:"Gadgets",href:"#"},{title:"Gadgets #1"}];return n.default.createElement(n.default.Fragment,null,n.default.createElement("h2",{id:"basic-usage"},"Basic usage"),n.default.createElement("p",null,"Add class ",n.default.createElement("code",{className:"token property"},".breadcrumb")," to a containing ",n.default.createElement(r.default,{className:"language-html"},"
    ")," element and nest a ",n.default.createElement(r.default,{className:"language-html"},"")," or ",n.default.createElement(r.default,{className:"language-html"},"")," element inside the ",n.default.createElement(r.default,{className:"language-html"},"
  1. ")," elements."),n.default.createElement(o.default,{language:"html",showCasePanel:!0,codeFigure:!0},n.default.createElement(c.default,{items:t})))};t.BasicBreadCrumb=d;var i=function e(){var t=[{title:"Home"},{title:"Products"},{title:"Gadgets"},{title:"Gadgets #1"}];return n.default.createElement(n.default.Fragment,null,n.default.createElement("h2",{id:"small-breadcrumb"},"Small breadcrumb"),n.default.createElement("p",null,"Add class ",n.default.createElement("code",{className:"token property"},".breadcrumb-sm")," to the containing ",n.default.createElement(r.default,{className:"language-html"},"
      ")," element for a smaller version of the breadcrumb component."),n.default.createElement(o.default,{language:"html",showCasePanel:!0,codeFigure:!0},n.default.createElement(c.default,{small:!0,items:t})))};t.SmallBreadCrumb=i;var s=function e(){var t=[{title:"Home",href:"#"},{title:"Products",href:"#",disabled:!0},{title:"Gadgets",href:"#"},{title:"Gadgets #1",href:"#"}];return n.default.createElement(n.default.Fragment,null,n.default.createElement("h2",{id:"disable-a-breadcrumb"},"Disable a breadcrumb"),n.default.createElement("p",null,"To disable a breadcrumb element, add class ",n.default.createElement("code",{className:"token property"},".disabled")," to the ",n.default.createElement(r.default,{className:"language-html"},"
    1. ")," element."),n.default.createElement(o.default,{language:"html",showCasePanel:!0,codeFigure:!0},n.default.createElement(c.default,{small:!0,items:t})))};t.DisabledBreadcrumb=s;var m=function e(){return n.default.createElement("div",{className:"col-md-12 col-lg-10 doc-body"},n.default.createElement("p",{className:"lead"},"Breadcrumbs are a good way to display your current location. This is usually used when you have multiple layers of content."),n.default.createElement(d,null),n.default.createElement(i,null),n.default.createElement(s,null))};t.BreadcrumbText=m;var f=function e(){return n.default.createElement("div",{className:"doc-container"},n.default.createElement("div",{className:"row"},n.default.createElement(m,null),n.default.createElement(u.default,{component:m})))},p=f;t.default=p},"./src/App/Documentation/components/Buttons/index.js":function(e,t,l){"use strict";function a(e){return e&&e.__esModule?e:{default:e}}function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var l in e)if(Object.prototype.hasOwnProperty.call(e,l)){var a=Object.defineProperty&&Object.getOwnPropertyDescriptor?Object.getOwnPropertyDescriptor(e,l):{};a.get||a.set?Object.defineProperty(t,l,a):t[l]=e[l]}return t.default=e,t}function r(e){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function e(t){return typeof t}:function e(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(e)}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){for(var l=0;l")," or ",p.default.createElement(h.default,{className:"language-html"},""),"."),p.default.createElement(g.default,{language:"html",showCasePanel:!0,codeFigure:!0},p.default.createElement(y.default,{type:"brand",label:"Anchor",href:"#"}),"\n",p.default.createElement(y.default,{type:"brand",label:"Button"}),"\n",p.default.createElement(y.default,{type:"brand",input:!0,value:"Input",btnType:"button"}),"\n",p.default.createElement(y.default,{type:"brand",input:!0,value:"Submit",btnType:"submit"}),"\n",p.default.createElement(y.default,{type:"brand",input:!0,value:"Reset",btnType:"reset"}),"\n"))};t.UsageWithOtherTags=w;var k=function e(){return p.default.createElement(p.default.Fragment,null,p.default.createElement("h2",{id:"outline-buttons"},"Outline buttons"),p.default.createElement("p",null,"Several button styles etc..."),p.default.createElement(g.default,{language:"html",showCasePanel:!0,codeFigure:!0},p.default.createElement(y.default,{outline:!0,type:"default",label:"Default"}),"\n",p.default.createElement(y.default,{outline:!0,type:"brand",label:"Brand"}),"\n",p.default.createElement(y.default,{outline:!0,type:"neutral",label:"Neutral"}),"\n",p.default.createElement(y.default,{outline:!0,type:"success",label:"Success"}),"\n",p.default.createElement(y.default,{outline:!0,type:"warning",label:"Warning"}),"\n",p.default.createElement(y.default,{outline:!0,type:"danger",label:"Danger"}),"\n",p.default.createElement(y.default,{outline:!0,type:"light",label:"Light"}),"\n"))};t.OutlineButtons=k;var N=function e(){return p.default.createElement(p.default.Fragment,null,p.default.createElement("h2",{id:"sizes"},"Sizes"),p.default.createElement("p",null,"Several button sizes etc..."),p.default.createElement("h3",null,"Large buttons"),p.default.createElement("p",null,"...",p.default.createElement("code",{className:"token property"},".btn-lg")),p.default.createElement(g.default,{language:"html",showCasePanel:!0,codeFigure:!0},p.default.createElement(y.default,{size:"lg",type:"default",label:"Large button"}),"\n",p.default.createElement(y.default,{size:"lg",type:"brand",label:"Large button"}),"\n"),p.default.createElement("h3",null,"Small buttons"),p.default.createElement("p",null,"...",p.default.createElement("code",{className:"token property"},".btn-sm")),p.default.createElement(g.default,{language:"html",showCasePanel:!0,codeFigure:!0},p.default.createElement(y.default,{size:"sm",type:"default",label:"Small button"}),"\n",p.default.createElement(y.default,{size:"sm",type:"brand",label:"Small button"}),"\n"),p.default.createElement("h3",null,"Extra small buttons"),p.default.createElement("p",null,"...",p.default.createElement("code",{className:"token property"},".btn-xs")),p.default.createElement(g.default,{language:"html",showCasePanel:!0,codeFigure:!0},p.default.createElement(y.default,{size:"xs",type:"default",label:"Extra small button"}),"\n",p.default.createElement(y.default,{size:"xs",type:"brand",label:"Extra small button"}),"\n"),p.default.createElement("h3",null,"Block level"),p.default.createElement("p",null,"...",p.default.createElement("code",{className:"token property"},".btn-block")),p.default.createElement(g.default,{language:"html",showCasePanel:!0,codeFigure:!0},p.default.createElement(y.default,{fullWidth:!0,type:"default",label:"Block level button"}),"\n",p.default.createElement(y.default,{fullWidth:!0,type:"brand",label:"Block level button"}),"\n"))};t.Sizes=N;var j=function e(){return p.default.createElement(p.default.Fragment,null,p.default.createElement("h2",{id:"active-state"},"Active state"),p.default.createElement("p",null,"Active state with ",p.default.createElement("code",{className:"token property"},".active"),"..."),p.default.createElement(g.default,{language:"html",showCasePanel:!0,codeFigure:!0},p.default.createElement(y.default,{active:!0,type:"default",label:"Default"}),"\n",p.default.createElement(y.default,{active:!0,type:"brand",label:"Brand"}),"\n",p.default.createElement(y.default,{active:!0,type:"neutral",label:"Neutral"}),"\n",p.default.createElement(y.default,{active:!0,type:"success",label:"Success"}),"\n",p.default.createElement(y.default,{active:!0,type:"warning",label:"Warning"}),"\n",p.default.createElement(y.default,{active:!0,type:"danger",label:"Danger"}),"\n",p.default.createElement(y.default,{active:!0,type:"light",label:"Light"}),"\n"))};t.ActiveState=j;var _=function e(){return p.default.createElement(p.default.Fragment,null,p.default.createElement("h2",{id:"disabled-state"},"Disabled state"),p.default.createElement("p",null,"Disabled state with ",p.default.createElement(g.Attribute,{name:"disabled",value:"true"}),"..."),p.default.createElement(g.default,{language:"html",showCasePanel:!0,codeFigure:!0},p.default.createElement(y.default,{disabled:!0,type:"default",label:"Default"}),"\n",p.default.createElement(y.default,{disabled:!0,type:"brand",label:"Brand"}),"\n",p.default.createElement(y.default,{disabled:!0,type:"neutral",label:"Neutral"}),"\n",p.default.createElement(y.default,{disabled:!0,type:"success",label:"Success"}),"\n",p.default.createElement(y.default,{disabled:!0,type:"warning",label:"Warning"}),"\n",p.default.createElement(y.default,{disabled:!0,type:"danger",label:"Danger"}),"\n",p.default.createElement(y.default,{disabled:!0,type:"light",label:"Light"}),"\n"))};t.DisabledState=_;var P=function e(){return p.default.createElement(p.default.Fragment,null,p.default.createElement("h2",{id:"usage-with-icons"},"Usage with icons"),p.default.createElement("p",null,"To use a button with an icon... Read more about icon usage here ",p.default.createElement(E.Link,{to:"/docs/core/icons"},"here"),"."),p.default.createElement(g.default,{language:"html",showCasePanel:!0,codeFigure:!0},p.default.createElement(y.default,{icon:"cloud",type:"default",label:"Default"}),"\n\n",p.default.createElement(y.default,{icon:"cloud",type:"brand",label:"Brand"}),"\n"))};t.UsageWithIcons=P;var O=function e(){return p.default.createElement(p.default.Fragment,null,p.default.createElement("h2",{id:"button-loader"},"Button loader"),p.default.createElement("p",null,"To use a button with a loader simply add the attribute ",p.default.createElement(g.Attribute,{data:!0,name:"button-loader",value:"true"})," to add the required markup for the loader component. Add class ",p.default.createElement("code",{className:"token property"},".loading")," to display the loader."),p.default.createElement(g.default,{language:"html",showCasePanel:!0,codeFigure:!0},p.default.createElement(y.default,{id:"test",type:"default",label:"Default",loader:!0,loading:!0}),"\n",p.default.createElement(y.default,{type:"brand",label:"Brand",loader:!0,loading:!0}),"\n"),p.default.createElement(g.default,{language:"html",showCasePanel:!0,codeFigure:!0},p.default.createElement(y.default,{loader:!0,loading:!0,outline:!0,type:"default",label:"Default"}),"\n",p.default.createElement(y.default,{loader:!0,loading:!0,outline:!0,type:"brand",label:"Brand"}),"\n",p.default.createElement(y.default,{loader:!0,loading:!0,outline:!0,type:"neutral",label:"Neutral"}),"\n",p.default.createElement(y.default,{loader:!0,loading:!0,outline:!0,type:"success",label:"Success"}),"\n",p.default.createElement(y.default,{loader:!0,loading:!0,outline:!0,type:"warning",label:"Warning"}),"\n",p.default.createElement(y.default,{loader:!0,loading:!0,outline:!0,type:"danger",label:"Danger"}),"\n",p.default.createElement(y.default,{loader:!0,loading:!0,outline:!0,type:"light",label:"Light"}),"\n"),p.default.createElement("p",null,"Adding the attribute ",p.default.createElement(g.Attribute,{data:!0,name:"button-loader",value:"true"})," to a button component will produce the following html:"),p.default.createElement(g.default,{language:"html",showCasePanel:!1,codeFigure:!0},p.default.createElement("button",{className:"btn btn-default loading",type:"button","data-px-loader":"true"},"\n\t",p.default.createElement("div",{className:"btn-loader-label"},"Default"),"\n\t",p.default.createElement("div",{className:"loader"},"\n\t\t",p.default.createElement("ul",{className:"loader-icon"},"\n\t\t\t",p.default.createElement("li",null),"\n\t\t\t",p.default.createElement("li",null),"\n\t\t\t",p.default.createElement("li",null),"\n\t\t"),"\n\t"),"\n")),p.default.createElement("p",null,"If you want more control over the loader component you can include the html yourself (e.g. for server-side rendering), just make sure you ",p.default.createElement("b",null,"don","'","t")," add the attribute ",p.default.createElement(g.Attribute,{data:!0,name:"button-loader",value:"true"}),"."))};t.ButtonLoader=O;var T=function e(){return p.default.createElement(p.default.Fragment,null,p.default.createElement("h2",{id:"usage-with-javascript"},"Usage with javascript"),p.default.createElement("p",null,"To interact with the alert-component with javascript..."),p.default.createElement("h3",null,"Show loader"),p.default.createElement(g.default,{language:"javascript",codeFigure:!0},"px.button.loader.show();","\n","// OR","\n","px.button.loader.show(id);"),p.default.createElement("h3",null,"Hide loader"),p.default.createElement(g.default,{language:"javascript",codeFigure:!0},"px.button.loader.hide();","\n","// OR","\n","px.button.loader.hide(id);"),p.default.createElement("h3",null,"Methods"),p.default.createElement("table",{className:"table table-striped"},p.default.createElement("thead",null,p.default.createElement("tr",null,p.default.createElement("th",null,"Method"),p.default.createElement("th",null,"Description"))),p.default.createElement("tbody",null,p.default.createElement("tr",null,p.default.createElement("td",null,p.default.createElement(g.PxScript,{component:"button",func:"init"})),p.default.createElement("td",null,"Renders the HTML for the loader component for buttons that has the attribute ",p.default.createElement(g.Attribute,{data:!0,name:"loader",value:"true"}),". This is done automatically when the ",p.default.createElement("code",{className:"token property"},"px-script.js")," loads, but might have to be used if you are not rendering your buttons right away. For instance, in react, you might want to call this function within the ",p.default.createElement(h.default,{className:"language-javascript"},"componentDidMount()")," method.")),p.default.createElement("tr",null,p.default.createElement("td",null,p.default.createElement(g.PxScript,{component:"button",subComponents:["loader"],func:"show"})),p.default.createElement("td",null,"Gives all rendered buttons the class ",p.default.createElement("code",{className:"token property"},".loading"),", displaying the loader component within the buttons (",p.default.createElement("b",null,"if present"),").")),p.default.createElement("tr",null,p.default.createElement("td",null,p.default.createElement(g.PxScript,{component:"button",subComponents:["loader"],func:"show",params:["id"]})),p.default.createElement("td",null,"Gives the specified button the class ",p.default.createElement("code",{className:"token property"},".loading"),". If no alert with the specified id is rendered to the DOM, the method does nothing.")),p.default.createElement("tr",null,p.default.createElement("td",null,p.default.createElement(g.PxScript,{component:"button",subComponents:["loader"],func:"hide"})),p.default.createElement("td",null,"Removes the class ",p.default.createElement("code",{className:"token property"},".loading")," from all rendered buttons, hiding the loader component.")),p.default.createElement("tr",null,p.default.createElement("td",null,p.default.createElement(g.PxScript,{component:"button",subComponents:["loader"],func:"hide",params:["id"]})),p.default.createElement("td",null,"Removes the class ",p.default.createElement("code",{className:"token property"},".loading")," from the button specified by id, hiding the loader component within the button. If no button with the specified id is rendered to the DOM, the method does nothing.")))))};t.UsageWithJavascript=T;var C=function e(){return p.default.createElement("div",{className:"col-md-12 col-lg-10 doc-body"},p.default.createElement("p",{className:"lead"},"Use buttons..."),p.default.createElement(x,null),p.default.createElement(w,null),p.default.createElement(k,null),p.default.createElement(N,null),p.default.createElement(j,null),p.default.createElement(_,null),p.default.createElement(P,null),p.default.createElement(O,null))};t.ButtonsText=C;var D=function(e){function t(){return o(this,t),d(this,s(t).apply(this,arguments))}return m(t,e),c(t,[{key:"componentDidMount",value:function e(){v.button.init()}},{key:"render",value:function e(){return p.default.createElement("div",{className:"doc-container"},p.default.createElement("div",{className:"row"},p.default.createElement(C,null),p.default.createElement(b.default,{component:C})))}}]),t}(p.Component),M=D;t.default=M},"./src/App/Documentation/components/Card/index.js":function(e,t,l){"use strict";function a(e){return e&&e.__esModule?e:{default:e}}function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var l in e)if(Object.prototype.hasOwnProperty.call(e,l)){var a=Object.defineProperty&&Object.getOwnPropertyDescriptor?Object.getOwnPropertyDescriptor(e,l):{};a.get||a.set?Object.defineProperty(t,l,a):t[l]=e[l]}return t.default=e,t}function r(e){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function e(t){return typeof t}:function e(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(e)}function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){for(var l=0;l"),"-element with the class ",n.default.createElement("code",{className:"token property"},".text-muted")," to the desired element."),n.default.createElement(o.default,{language:"html",showCasePanel:!0,codeFigure:!0},n.default.createElement("p",{className:"color-brand"},"This text is color-brand, ",n.default.createElement("span",{className:"text-muted"},"with a muted ending.")),n.default.createElement("p",{className:"color-default"},"This text is color-default, ",n.default.createElement("span",{className:"text-muted"},"with a muted ending.")),n.default.createElement("p",{className:"color-neutral"},"This text is color-neutral, ",n.default.createElement("span",{className:"text-muted"},"with a muted ending.")),n.default.createElement("p",{className:"color-success"},"This text is color-success, ",n.default.createElement("span",{className:"text-muted"},"with a muted ending.")),n.default.createElement("p",{className:"color-warning"},"This text is color-warning, ",n.default.createElement("span",{className:"text-muted"},"with a muted ending.")),n.default.createElement("p",{className:"color-danger"},"This text is color-danger, ",n.default.createElement("span",{className:"text-muted"},"with a muted ending."))))};t.Usage=i;var s=function e(){return n.default.createElement("div",{className:"col-md-12 col-lg-10 doc-body"},n.default.createElement("p",{className:"lead"},"Here there be colors..."),n.default.createElement(d,null),n.default.createElement(i,null))};t.ColorText=s;var m=function e(){return n.default.createElement("div",{className:"doc-container"},n.default.createElement("div",{className:"row"},n.default.createElement(s,null),n.default.createElement(u.default,{component:s})))},f=m;t.default=f},"./src/App/Documentation/core/Grid/index.js":function(e,t,l){"use strict";function a(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.GridText=t.AutoLayoutColumns=t.GridOptions=t.HowItWorks=t.default=void 0;var n=a(l("./node_modules/react/index.js")),r=a(l("./src/App/Documentation/utils/ComponentPreview.js")),o=a(l("./src/App/Documentation/utils/DocToc.js")),u=function e(){return n.default.createElement(n.default.Fragment,null,n.default.createElement("h2",{id:"how-it-works"},"How it works"),n.default.createElement("p",null,"The grid system is heavily based on Bootstrap","'","s grid from v.4."),n.default.createElement("p",null,"Most classes from Bootstrap is available. Click ",n.default.createElement("a",{href:"http://getbootstrap.com/docs/4.1/layout/grid/"},"here")," to read more about it."),n.default.createElement(r.default,{language:"html",showCasePanel:!0,codeFigure:!0,removeOuterTag:!0},n.default.createElement("div",{className:"showcase-grid"},n.default.createElement("div",{className:"container"},n.default.createElement("div",{className:"row"},n.default.createElement("div",{className:"col-sm"},"One of three columns"),n.default.createElement("div",{className:"col-sm"},"One of three columns"),n.default.createElement("div",{className:"col-sm"},"One of three columns"))))),n.default.createElement("p",null,"The above example creates three equal-width columns on small, medium, large, extra large, and extra extra large devices using our predefined grid classes. Those columns are centered in the page with the parent ",n.default.createElement("code",{className:"token property"},".container"),"."))};t.HowItWorks=u;var c=function e(){return n.default.createElement(n.default.Fragment,null,n.default.createElement("h2",{id:"grid-options"},"Grid options"),n.default.createElement("p",null,"Most sizes in the PayEx DesignGuide is defined using ",n.default.createElement("code",{className:"token property"},"em"),"s or ",n.default.createElement("code",{className:"token property"},"rem"),"s, ",n.default.createElement("code",{className:"token property"},"px"),"s are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size."),n.default.createElement("table",{className:"table table-striped"},n.default.createElement("thead",null,n.default.createElement("tr",null,n.default.createElement("th",null),n.default.createElement("th",{scope:"col"},"Extra small",n.default.createElement("p",null,n.default.createElement("small",null,"<","576px"))),n.default.createElement("th",{scope:"col"},"Small",n.default.createElement("p",null,n.default.createElement("small",null,"≥","576px"))),n.default.createElement("th",{scope:"col"},"Medium",n.default.createElement("p",null,n.default.createElement("small",null,"≥","768px"))),n.default.createElement("th",{scope:"col"},"Large",n.default.createElement("p",null,n.default.createElement("small",null,"≥","992px"))),n.default.createElement("th",{scope:"col"},"Extra large",n.default.createElement("p",null,n.default.createElement("small",null,"≥","1200px"))),n.default.createElement("th",{scope:"col"},"Extra extra large",n.default.createElement("p",null,n.default.createElement("small",null,"≥","1600px"))))),n.default.createElement("tbody",null,n.default.createElement("tr",null,n.default.createElement("th",{scope:"row"},"Max container width"),n.default.createElement("td",null,"None (auto)"),n.default.createElement("td",null,"540px"),n.default.createElement("td",null,"720px"),n.default.createElement("td",null,"960px"),n.default.createElement("td",null,"1140px"),n.default.createElement("td",null,"1460px")),n.default.createElement("tr",null,n.default.createElement("th",{scope:"row"},"Class prefix"),n.default.createElement("td",null,n.default.createElement("code",{className:"token property"},".col-")),n.default.createElement("td",null,n.default.createElement("code",{className:"token property"},".col-sm-")),n.default.createElement("td",null,n.default.createElement("code",{className:"token property"},".col-md-")),n.default.createElement("td",null,n.default.createElement("code",{className:"token property"},".col-lg-")),n.default.createElement("td",null,n.default.createElement("code",{className:"token property"},".col-xl-")),n.default.createElement("td",null,n.default.createElement("code",{className:"token property"},".col-xxl-"))),n.default.createElement("tr",null,n.default.createElement("th",{scope:"row"},"# of columns"),n.default.createElement("td",{colSpan:"6"},"12")),n.default.createElement("tr",null,n.default.createElement("th",{scope:"row"},"Gutter width"),n.default.createElement("td",{colSpan:"6"},"30px (15px on each side of a column)")),n.default.createElement("tr",null,n.default.createElement("th",{scope:"row"},"Nestable"),n.default.createElement("td",{colSpan:"6"},"Yes")),n.default.createElement("tr",null,n.default.createElement("th",{scope:"row"},"Column ordering"),n.default.createElement("td",{colSpan:"6"},"Yes")))))};t.GridOptions=c;var d=function e(){return n.default.createElement(n.default.Fragment,null,n.default.createElement("h2",{id:"auto-layout-columns"},"Auto-layout columns"),n.default.createElement("p",null,"Utilize breakpoint-specific column classes for easy column sizing without an explicit numbered class like ",n.default.createElement("code",{className:"token property"},".col-sm-6"),"."),n.default.createElement(r.default,{language:"html",showCasePanel:!0,codeFigure:!0,removeOuterTag:!0},n.default.createElement("div",{className:"showcase-grid"},n.default.createElement("div",{className:"container"},n.default.createElement("div",{className:"row"},n.default.createElement("div",{className:"col"},"1 of 2"),n.default.createElement("div",{className:"col"},"2 of 2")),n.default.createElement("div",{className:"row"},n.default.createElement("div",{className:"col"},"1 of 3"),n.default.createElement("div",{className:"col"},"2 of 3"),n.default.createElement("div",{className:"col"},"3 of 3"))))))};t.AutoLayoutColumns=d;var i=function e(){return n.default.createElement("div",{className:"col-md-12 col-lg-10 doc-body"},n.default.createElement("p",{className:"lead"},"Use our grid system..."),n.default.createElement(u,null),n.default.createElement(c,null),n.default.createElement(d,null))};t.GridText=i;var s=function e(){return n.default.createElement("div",{className:"doc-container"},n.default.createElement("div",{className:"row"},n.default.createElement(i,null),n.default.createElement(o.default,{component:i})))},m=s;t.default=m},"./src/App/Documentation/core/Icons/index.js":function(e,t,l){"use strict";function a(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.IconsText=t.Usage=t.default=void 0;var n=a(l("./node_modules/react/index.js")),r=a(l("./node_modules/react-prism/lib/index.js")),o=a(l("./src/App/Documentation/utils/ComponentPreview.js")),u=a(l("./src/App/Documentation/utils/DocToc.js")),c=function e(){return n.default.createElement(n.default.Fragment,null,n.default.createElement("h2",{id:"usage"},"Usage"),n.default.createElement("p",null,"To use an icon, provide the following markup: ",n.default.createElement(r.default,{className:"language-html"},'[ICON NAME]'),"."),n.default.createElement(o.default,{language:"html",showCasePanel:!0,codeFigure:!0},n.default.createElement("i",{className:"material-icons"},"android"),"\n",n.default.createElement("i",{className:"material-icons"},"contact_support"),"\n",n.default.createElement("i",{className:"material-icons"},"face"),"\n",n.default.createElement("i",{className:"material-icons"},"star"),"\n",n.default.createElement("i",{className:"material-icons"},"warning"),"\n"))};t.Usage=c;var d=function e(){return n.default.createElement("div",{className:"col-md-12 col-lg-10 doc-body"},n.default.createElement("p",{className:"lead"},"The PayEx DesignGuide includes Google","'","s material icons. For a full overview of the available icons please visit ",n.default.createElement("a",{href:"https://material.io/tools/icons/"},"this site"),"."),n.default.createElement(c,null))};t.IconsText=d;var i=function e(){return n.default.createElement("div",{className:"doc-container"},n.default.createElement("div",{className:"row"},n.default.createElement(d,null),n.default.createElement(u.default,{component:d})))},s=i;t.default=s},"./src/App/Documentation/core/Lists/index.js":function(e,t,l){"use strict";function a(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.ListsText=t.SettingsList=t.DescriptionList=t.InlineList=t.BasicList=t.default=void 0;var n=a(l("./node_modules/react/index.js")),r=a(l("./src/App/Documentation/utils/ComponentPreview.js")),o=a(l("./src/App/Documentation/utils/DocToc.js")),u=function e(){return n.default.createElement(n.default.Fragment,null,n.default.createElement("h2",{id:"basic-list"},"Basic list"),n.default.createElement("p",null,"Basic lists info...",n.default.createElement("code",{className:"token property"},".list")),n.default.createElement(r.default,{language:"html",showCasePanel:!0,codeFigure:!0},n.default.createElement("ul",{className:"list"},n.default.createElement("li",null,"Bread"),n.default.createElement("li",null,"Coffee beans"),n.default.createElement("li",null,"Milk"),n.default.createElement("li",null,"Butter"))),n.default.createElement("h3",null,"Nested list"),n.default.createElement("p",null,"Nested lists are also pretty sweet..."),n.default.createElement(r.default,{language:"html",showCasePanel:!0,codeFigure:!0},n.default.createElement("ul",{className:"list"},n.default.createElement("li",null,"Coffee"),n.default.createElement("li",null,"Tea",n.default.createElement("ul",null,n.default.createElement("li",null,"Black tea"),n.default.createElement("li",null,"Green tea"),n.default.createElement("li",null,"Ice tea"))),n.default.createElement("li",null,"Milk"))))};t.BasicList=u;var c=function e(){return n.default.createElement(n.default.Fragment,null,n.default.createElement("h2",{id:"inline-list"},"Inline list"),n.default.createElement("p",null,"Inline lists info...",n.default.createElement("code",{className:"token property"},".list-inline")),n.default.createElement(r.default,{language:"html",showCasePanel:!0,codeFigure:!0},n.default.createElement("ul",{className:"list list-inline"},n.default.createElement("li",null,"Coffee"),n.default.createElement("li",null,"Tea"),n.default.createElement("li",null,"Milk"))))};t.InlineList=c;var d=function e(){return n.default.createElement(n.default.Fragment,null,n.default.createElement("h2",{id:"description-list"},"Description list"),n.default.createElement("p",null,"Description lists info...",n.default.createElement("code",{className:"token property"},".description-list")),n.default.createElement(r.default,{language:"html",showCasePanel:!0,codeFigure:!0},n.default.createElement("dl",{className:"description-list"},"\n",n.default.createElement("dt",null,"Frog"),n.default.createElement("dd",null,"Wet green thing that croaks."),"\n",n.default.createElement("dt",null,"Rabbit"),n.default.createElement("dd",null,"Warm fluffy thing that jumps."),"\n",n.default.createElement("dt",null,"Color"),n.default.createElement("dd",null,"Any hue except white or black."),"\n")))};t.DescriptionList=d;var i=function e(){return n.default.createElement(n.default.Fragment,null,n.default.createElement("h2",{id:"settings-list"},"Settings list"),n.default.createElement("p",null,"Settings lists info...",n.default.createElement("code",{className:"token property"},".settings-list")),n.default.createElement(r.default,{language:"html",showCasePanel:!0,codeFigure:!0},n.default.createElement("ul",{className:"settings-list"},n.default.createElement("li",null,"\n",n.default.createElement("i",{className:"material-icons color-success"},"check"),"Shovels and tapestry newsletter","\n"),n.default.createElement("li",null,"\n",n.default.createElement("i",{className:"material-icons color-warning"},"remove"),"Spoon collectors weekly newsletter","\n"),n.default.createElement("li",null,"\n",n.default.createElement("i",{className:"material-icons color-danger"},"clear"),"Energetic squirrels newsletter","\n"))))};t.SettingsList=i;var s=function e(){return n.default.createElement("div",{className:"col-md-12 col-lg-10 doc-body"},n.default.createElement("p",{className:"lead"},"Lots of cool info about lists will be here..."),n.default.createElement(u,null),n.default.createElement(c,null),n.default.createElement(d,null),n.default.createElement(i,null))};t.ListsText=s;var m=function e(){return n.default.createElement("div",{className:"doc-container"},n.default.createElement("div",{className:"row"},n.default.createElement(s,null),n.default.createElement(o.default,{component:s})))},f=m;t.default=f},"./src/App/Documentation/core/Tables/index.js":function(e,t,l){"use strict";function a(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.TablesText=t.DescriptionTable=t.HoverStripedTable=t.HoverTable=t.StripedTable=t.BasicTable=t.default=void 0;var n=a(l("./node_modules/react/index.js")),r=a(l("./src/App/Documentation/utils/ComponentPreview.js")),o=a(l("./src/App/Documentation/utils/DocToc.js")),u=function e(){return n.default.createElement(n.default.Fragment,null,n.default.createElement("h2",{id:"basic-table"},"Basic table"),n.default.createElement("p",null,"Basic tables info..."),n.default.createElement(r.default,{language:"html",showCasePanel:!0,codeFigure:!0},n.default.createElement("table",{className:"table"},n.default.createElement("thead",null,n.default.createElement("tr",null,n.default.createElement("th",{scope:"col"},"#"),n.default.createElement("th",{scope:"col"},"First Name"),n.default.createElement("th",{scope:"col"},"Last Name"),n.default.createElement("th",{scope:"col"},"Location"))),n.default.createElement("tbody",null,n.default.createElement("tr",null,n.default.createElement("th",{scope:"row"},"1"),n.default.createElement("td",null,"Sven"),n.default.createElement("td",null,"Svensson"),n.default.createElement("td",null,"Visby")),n.default.createElement("tr",null,n.default.createElement("th",{scope:"row"},"2"),n.default.createElement("td",null,"Sara"),n.default.createElement("td",null,"Svensson"),n.default.createElement("td",null,"Stockholm")),n.default.createElement("tr",null,n.default.createElement("th",{scope:"row"},"3"),n.default.createElement("td",null,"Ola"),n.default.createElement("td",null,"Nordmann"),n.default.createElement("td",null,"Oslo")),n.default.createElement("tr",null,n.default.createElement("th",{scope:"row"},"4"),n.default.createElement("td",null,"Holger"),n.default.createElement("td",null,"Danske"),n.default.createElement("td",null,"Copenhagen")),n.default.createElement("tr",null,n.default.createElement("th",{scope:"row"},"5"),n.default.createElement("td",null,"Matti"),n.default.createElement("td",null,"Meikäläinen"),n.default.createElement("td",null,"Lahti"))))))};t.BasicTable=u;var c=function e(){return n.default.createElement(n.default.Fragment,null,n.default.createElement("h2",{id:"striped-table"},"Striped table"),n.default.createElement("p",null,"Striped tables info..."),n.default.createElement(r.default,{language:"html",showCasePanel:!0,codeFigure:!0},n.default.createElement("table",{className:"table table-striped"},n.default.createElement("thead",null,n.default.createElement("tr",null,n.default.createElement("th",{scope:"col"},"#"),n.default.createElement("th",{scope:"col"},"First Name"),n.default.createElement("th",{scope:"col"},"Last Name"),n.default.createElement("th",{scope:"col"},"Location"))),n.default.createElement("tbody",null,n.default.createElement("tr",null,n.default.createElement("th",{scope:"row"},"1"),n.default.createElement("td",null,"Sven"),n.default.createElement("td",null,"Svensson"),n.default.createElement("td",null,"Visby")),n.default.createElement("tr",null,n.default.createElement("th",{scope:"row"},"2"),n.default.createElement("td",null,"Sara"),n.default.createElement("td",null,"Svensson"),n.default.createElement("td",null,"Stockholm")),n.default.createElement("tr",null,n.default.createElement("th",{scope:"row"},"3"),n.default.createElement("td",null,"Ola"),n.default.createElement("td",null,"Nordmann"),n.default.createElement("td",null,"Oslo")),n.default.createElement("tr",null,n.default.createElement("th",{scope:"row"},"4"),n.default.createElement("td",null,"Holger"),n.default.createElement("td",null,"Danske"),n.default.createElement("td",null,"Copenhagen")),n.default.createElement("tr",null,n.default.createElement("th",{scope:"row"},"5"),n.default.createElement("td",null,"Matti"),n.default.createElement("td",null,"Meikäläinen"),n.default.createElement("td",null,"Lahti"))))))};t.StripedTable=c;var d=function e(){return n.default.createElement(n.default.Fragment,null,n.default.createElement("h2",{id:"hover-table"},"Hover table"),n.default.createElement("p",null,"Hover tables info..."),n.default.createElement(r.default,{language:"html",showCasePanel:!0,codeFigure:!0},n.default.createElement("table",{className:"table table-hover"},n.default.createElement("thead",null,n.default.createElement("tr",null,n.default.createElement("th",{scope:"col"},"#"),n.default.createElement("th",{scope:"col"},"First Name"),n.default.createElement("th",{scope:"col"},"Last Name"),n.default.createElement("th",{scope:"col"},"Location"))),n.default.createElement("tbody",null,n.default.createElement("tr",null,n.default.createElement("th",{scope:"row"},"1"),n.default.createElement("td",null,"Sven"),n.default.createElement("td",null,"Svensson"),n.default.createElement("td",null,"Visby")),n.default.createElement("tr",null,n.default.createElement("th",{scope:"row"},"2"),n.default.createElement("td",null,"Sara"),n.default.createElement("td",null,"Svensson"),n.default.createElement("td",null,"Stockholm")),n.default.createElement("tr",null,n.default.createElement("th",{scope:"row"},"3"),n.default.createElement("td",null,"Ola"),n.default.createElement("td",null,"Nordmann"),n.default.createElement("td",null,"Oslo")),n.default.createElement("tr",null,n.default.createElement("th",{scope:"row"},"4"),n.default.createElement("td",null,"Holger"),n.default.createElement("td",null,"Danske"),n.default.createElement("td",null,"Copenhagen")),n.default.createElement("tr",null,n.default.createElement("th",{scope:"row"},"5"),n.default.createElement("td",null,"Matti"),n.default.createElement("td",null,"Meikäläinen"),n.default.createElement("td",null,"Lahti"))))))};t.HoverTable=d;var i=function e(){return n.default.createElement(n.default.Fragment,null,n.default.createElement("h2",{id:"hover-striped-table"},"Hover striped table"),n.default.createElement("p",null,"Hover striped tables info..."),n.default.createElement(r.default,{language:"html",showCasePanel:!0,codeFigure:!0},n.default.createElement("table",{className:"table table-hover table-striped"},n.default.createElement("thead",null,n.default.createElement("tr",null,n.default.createElement("th",{scope:"col"},"#"),n.default.createElement("th",{scope:"col"},"First Name"),n.default.createElement("th",{scope:"col"},"Last Name"),n.default.createElement("th",{scope:"col"},"Location"))),n.default.createElement("tbody",null,n.default.createElement("tr",null,n.default.createElement("th",{scope:"row"},"1"),n.default.createElement("td",null,"Sven"),n.default.createElement("td",null,"Svensson"),n.default.createElement("td",null,"Visby")),n.default.createElement("tr",null,n.default.createElement("th",{scope:"row"},"2"),n.default.createElement("td",null,"Sara"),n.default.createElement("td",null,"Svensson"),n.default.createElement("td",null,"Stockholm")),n.default.createElement("tr",null,n.default.createElement("th",{scope:"row"},"3"),n.default.createElement("td",null,"Ola"),n.default.createElement("td",null,"Nordmann"),n.default.createElement("td",null,"Oslo")),n.default.createElement("tr",null,n.default.createElement("th",{scope:"row"},"4"),n.default.createElement("td",null,"Holger"),n.default.createElement("td",null,"Danske"),n.default.createElement("td",null,"Copenhagen")),n.default.createElement("tr",null,n.default.createElement("th",{scope:"row"},"5"),n.default.createElement("td",null,"Matti"),n.default.createElement("td",null,"Meikäläinen"),n.default.createElement("td",null,"Lahti"))))))};t.HoverStripedTable=i;var s=function e(){return n.default.createElement(n.default.Fragment,null,n.default.createElement("h2",{id:"description-table"},"Description table"),n.default.createElement("p",null,"Description tables info..."),n.default.createElement(r.default,{language:"html",showCasePanel:!0,codeFigure:!0},n.default.createElement("table",{className:"table table-description table-striped"},n.default.createElement("thead",null,n.default.createElement("tr",null,n.default.createElement("th",{scope:"col"},"Key"),n.default.createElement("th",{scope:"col"},"Value"))),n.default.createElement("tbody",null,n.default.createElement("tr",null,n.default.createElement("td",null,"Name"),n.default.createElement("td",null,"John Doe")),n.default.createElement("tr",null,n.default.createElement("td",null,"Occupation"),n.default.createElement("td",null,"Unknown")),n.default.createElement("tr",null,n.default.createElement("td",null,"Skills"),n.default.createElement("td",null,"Unknown"))))))};t.DescriptionTable=s;var m=function e(){return n.default.createElement("div",{className:"col-md-12 col-lg-10 doc-body"},n.default.createElement("p",{className:"lead"},"Lots of nice info about tables will be here..."),n.default.createElement(u,null),n.default.createElement(c,null),n.default.createElement(d,null),n.default.createElement(i,null),n.default.createElement(s,null))};t.TablesText=m;var f=function e(){return n.default.createElement("div",{className:"doc-container"},n.default.createElement("div",{className:"row"},n.default.createElement(m,null),n.default.createElement(o.default,{component:m})))},p=f;t.default=p},"./src/App/Documentation/core/Typography/index.js":function(e,t,l){"use strict";function a(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.TypographyText=t.Blockquotes=t.Abbreviations=t.TextUtilities=t.Inline=t.Lead=t.Small=t.Headings=t.Fonts=t.default=void 0;var n=a(l("./node_modules/react/index.js")),r=l("./node_modules/react-router-dom/es/index.js"),o=a(l("./node_modules/react-prism/lib/index.js")),u=a(l("./src/App/Documentation/utils/ComponentPreview.js")),c=a(l("./src/App/Documentation/utils/DocToc.js")),d=function e(){return n.default.createElement(n.default.Fragment,null,n.default.createElement("h2",{id:"font"},"Font"),n.default.createElement("p",null,"The standard font PayEx DesignGuide uses is Roboto. It is included in the stylesheet. The included font weights you can use are: 300, 400, 500, 700 & 900. Both normal and italicized is available."),n.default.createElement("h3",null,"Removing Roboto"),n.default.createElement("p",null,"In case your site is not going to use Roboto, you can modify your font stack by modifying the snippet below to your preferance and add it to your custom stylesheet."),n.default.createElement(u.default,{language:"css",codeFigure:!0},"html {\n font-family: GillSans, Calibri, Trebuchet, sans-serif;\n }"))};t.Fonts=d;var i=function e(){return n.default.createElement(n.default.Fragment,null,n.default.createElement("h2",{id:"headings"},"Headings"),n.default.createElement("p",null,"PayEx DesignGuide provides basic styling on all headings (h1-h6)."),n.default.createElement(u.default,{language:"html",showCasePanel:!0,codeFigure:!0},n.default.createElement("h1",null,"Heading h1"),n.default.createElement("h2",null,"Heading h2"),n.default.createElement("h3",null,"Heading h3"),n.default.createElement("h4",null,"Heading h4"),n.default.createElement("h5",null,"Heading h5"),n.default.createElement("h6",null,"Heading h6")),n.default.createElement("p",null,"The classes ",n.default.createElement("code",{className:"token property"},".h1")," through ",n.default.createElement("code",{className:"token property"},".h6")," are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element."),n.default.createElement(u.default,{language:"html",showCasePanel:!0,codeFigure:!0},n.default.createElement("p",{className:"h1"},".h1 heading"),n.default.createElement("p",{className:"h2"},".h2 heading"),n.default.createElement("p",{className:"h3"},".h3 heading"),n.default.createElement("p",{className:"h4"},".h4 heading"),n.default.createElement("p",{className:"h5"},".h5 heading"),n.default.createElement("p",{className:"h6"},".h6 heading")))};t.Headings=i;var s=function e(){return n.default.createElement(n.default.Fragment,null,n.default.createElement("h2",{id:"small"},"Small"),n.default.createElement("p",null,"Use the ",n.default.createElement(o.default,{className:"language-html"},"")," tags to create a secondary heading within a heading tag or class."),n.default.createElement(u.default,{language:"html",showCasePanel:!0,codeFigure:!0},n.default.createElement("h2",null,"Main heading ",n.default.createElement("small",null,"with a faded secondary heading"))))};t.Small=s;var m=function e(){return n.default.createElement(n.default.Fragment,null,n.default.createElement("h2",{id:"lead"},"Lead"),n.default.createElement("p",null,"Make a paragraph stand out by using ",n.default.createElement("code",{className:"token property"},".lead"),"."),n.default.createElement(u.default,{language:"html",showCasePanel:!0,codeFigure:!0},n.default.createElement("p",{className:"lead"},"This is a leading paragraph which for instance can be used as an introduction.")))};t.Lead=m;var f=function e(){return n.default.createElement(n.default.Fragment,null,n.default.createElement("h2",{id:"inline-text-elements"},"Inline text elements"),n.default.createElement("p",null,"Styling for common inline HTML5 elements."),n.default.createElement(u.default,{language:"html",showCasePanel:!0,codeFigure:!0},n.default.createElement("p",null,"You can use the mark tag to ",n.default.createElement("mark",null,"highlight")," text."),n.default.createElement("p",null,n.default.createElement("del",null,"This line of text is meant to be treated as deleted text.")),n.default.createElement("p",null,n.default.createElement("s",null,"This line of text is meant to be treated as no longer accurate.")),n.default.createElement("p",null,n.default.createElement("ins",null,"This line of text is meant to be treated as an addition to the document.")),n.default.createElement("p",null,n.default.createElement("u",null,"This line of text will render as underlined")),n.default.createElement("p",null,n.default.createElement("small",null,"This line of text is meant to be treated as fine print.")),n.default.createElement("p",null,n.default.createElement("strong",null,"This line rendered as bold text.")),n.default.createElement("p",null,n.default.createElement("b",null,"This line really stands out.")),n.default.createElement("p",null,n.default.createElement("em",null,"This line rendered as italicized text.")),n.default.createElement("p",null,n.default.createElement("i",null,"This is the last line, it too will render as italicized text."))),n.default.createElement("p",null,"The ",n.default.createElement("code",{className:"token property"},".mark")," and ",n.default.createElement("code",{className:"token property"},".small")," classes are also available to apply the same styles as ",n.default.createElement(o.default,{className:"language-html"},"")," and ",n.default.createElement(o.default,{className:"language-html"},"")," while avoiding any unwanted semantic implications that the tags would bring."),n.default.createElement("p",null,"While not shown above, feel free to use ",n.default.createElement(o.default,{className:"language-html"},"")," and ",n.default.createElement(o.default,{className:"language-html"},"")," in HTML5. ",n.default.createElement(o.default,{className:"language-html"},"")," is meant to highlight words or phrases without conveying additional importance while ",n.default.createElement(o.default,{className:"language-html"},"")," is mostly for voice, technical terms, etc."))};t.Inline=f;var p=function e(){return n.default.createElement(n.default.Fragment,null,n.default.createElement("h2",{id:"text-utilities"},"Text utilities"),n.default.createElement("p",null,"Change text alignment, transform, style, weight, and color with our ",n.default.createElement(r.Link,{to:"/docs/utilities/text"},"text utilities")," ",n.default.createElement("b",null,"(NOT YET IMPLEMENTED)")," and ",n.default.createElement(r.Link,{to:"/docs/utilities/color"},"color utilities")," ",n.default.createElement("b",null,"(NOT YET IMPLEMENTED)"),"."))};t.TextUtilities=p;var E=function e(){return n.default.createElement(n.default.Fragment,null,n.default.createElement("h2",{id:"abbreviations"},"Abbreviations"),n.default.createElement("p",null,"Stylized implementation of HTML’s ",n.default.createElement(o.default,{className:"language-html"},"")," element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies."),n.default.createElement("p",null,"Add ",n.default.createElement("code",{className:"token property"},".initialism")," to an abbreviation for a slightly smaller font-size."),n.default.createElement(u.default,{language:"html",showCasePanel:!0,codeFigure:!0},n.default.createElement("p",null,n.default.createElement("abbr",{title:"Laugh Out Loud"},"LOL")),n.default.createElement("p",null,n.default.createElement("abbr",{title:"HyperText Markup Language",className:"initialism"},"HTML"))),n.default.createElement("p",null,n.default.createElement("a",{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr",target:"_blank",rel:"noopener noreferrer"},"Read more")," about abbreviations."))};t.Abbreviations=E;var h=function e(){var t=function e(){return n.default.createElement(n.default.Fragment,null,n.default.createElement("h2",{id:"blockquotes"},"Blockquotes"),n.default.createElement("p",null,"For quoting blocks of content from another source within your document. Wrap ",n.default.createElement(o.default,{className:"language-html"},"
      ")," or ",n.default.createElement("code",{className:"token property"},".blockquote")," around any HTML as the quote."),n.default.createElement(u.default,{language:"html",showCasePanel:!0,codeFigure:!0},n.default.createElement("blockquote",{className:"blockquote"},n.default.createElement("p",null,"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante."))))},l=function e(){return n.default.createElement(n.default.Fragment,null,n.default.createElement("h3",null,"Naming a source"),n.default.createElement("p",null,"Add a ",n.default.createElement(o.default,{className:"language-html"},"