From 05fa94a6a5c55443d80431bd6100efbdb33aa10f Mon Sep 17 00:00:00 2001 From: erikhallaraaker Date: Tue, 3 Jul 2018 11:31:25 +0200 Subject: [PATCH] Prepared v.0.7.0 --- CHANGELOG.md | 2 +- dist/0.6.0/scripts/app.js | 7 ------- dist/0.6.0/scripts/app.js.map | 1 - dist/0.6.0/styles/px.css.map | 1 - .../styles/templates/documentation.css.map | 1 - dist/0.7.0/scripts/app.js | 7 +++++++ dist/0.7.0/scripts/app.js.map | 1 + .../scripts/core-libraries.js | 2 +- .../scripts/core-libraries.js.map | 2 +- dist/{0.6.0 => 0.7.0}/scripts/polyfills.js | 2 +- .../{0.6.0 => 0.7.0}/scripts/polyfills.js.map | 2 +- dist/{0.6.0 => 0.7.0}/scripts/px-script.js | 4 ++-- .../{0.6.0 => 0.7.0}/scripts/px-script.js.map | 2 +- .../scripts/react-libraries.js | 2 +- .../scripts/react-libraries.js.map | 2 +- dist/{0.6.0 => 0.7.0}/styles/px.css | 2 +- dist/0.7.0/styles/px.css.map | 1 + .../styles/templates/documentation.css | 0 .../styles/templates/documentation.css.map | 1 + dist/index.html | 4 ++-- package.json | 2 +- .../Card/__snapshots__/index.test.js.snap | 15 ++++++++++++--- .../Documentation/components/Card/index.js | 15 ++++++++++++--- .../__snapshots__/index.test.js.snap | 8 ++++---- src/App/__snapshots__/index.test.js.snap | 8 +++++++- src/App/components/Card/index.js | 14 ++++++++------ src/App/routes/root.js | 12 ++++++------ src/App/routes/root.test.js | 12 ++++++------ src/less/components/card.less | 19 +++++++++++++------ 29 files changed, 92 insertions(+), 59 deletions(-) delete mode 100644 dist/0.6.0/scripts/app.js delete mode 100644 dist/0.6.0/scripts/app.js.map delete mode 100644 dist/0.6.0/styles/px.css.map delete mode 100644 dist/0.6.0/styles/templates/documentation.css.map create mode 100644 dist/0.7.0/scripts/app.js create mode 100644 dist/0.7.0/scripts/app.js.map rename dist/{0.6.0 => 0.7.0}/scripts/core-libraries.js (99%) rename dist/{0.6.0 => 0.7.0}/scripts/core-libraries.js.map (99%) rename dist/{0.6.0 => 0.7.0}/scripts/polyfills.js (96%) rename dist/{0.6.0 => 0.7.0}/scripts/polyfills.js.map (97%) rename dist/{0.6.0 => 0.7.0}/scripts/px-script.js (81%) rename dist/{0.6.0 => 0.7.0}/scripts/px-script.js.map (99%) rename dist/{0.6.0 => 0.7.0}/scripts/react-libraries.js (99%) rename dist/{0.6.0 => 0.7.0}/scripts/react-libraries.js.map (99%) rename dist/{0.6.0 => 0.7.0}/styles/px.css (57%) create mode 100644 dist/0.7.0/styles/px.css.map rename dist/{0.6.0 => 0.7.0}/styles/templates/documentation.css (100%) create mode 100644 dist/0.7.0/styles/templates/documentation.css.map diff --git a/CHANGELOG.md b/CHANGELOG.md index ba5efbfbf..74dcd1f29 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,7 +2,7 @@ All notable changes to this project will be documented in this file. -## [0.7.0] - 2018-06-? +## [0.7.0] - 2018-07-03 ### Added diff --git a/dist/0.6.0/scripts/app.js b/dist/0.6.0/scripts/app.js deleted file mode 100644 index f13812962..000000000 --- a/dist/0.6.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 u(this,t),d(this,i(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")),u=a(l("./src/App/Documentation/utils/DocToc.js")),o=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=o;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(o,null),n.default.createElement(c,null))};t.BadgeText=d;var s=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})))},i=s;t.default=i},"./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")),u=a(l("./src/App/Documentation/utils/ComponentPreview.js")),o=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(u.default,{language:"html",showCasePanel:!0,codeFigure:!0},n.default.createElement(c.default,{items:t})))};t.BasicBreadCrumb=d;var s=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(u.default,{language:"html",showCasePanel:!0,codeFigure:!0},n.default.createElement(c.default,{small:!0,items:t})))};t.SmallBreadCrumb=s;var i=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(u.default,{language:"html",showCasePanel:!0,codeFigure:!0},n.default.createElement(c.default,{small:!0,items:t})))};t.DisabledBreadcrumb=i;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(s,null),n.default.createElement(i,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(o.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 u(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(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 u(this,t),d(this,i(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 u(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(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(u.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=s;var i=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(s,null))};t.ColorText=i;var m=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})))},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")),u=a(l("./src/App/Documentation/utils/DocToc.js")),o=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=o;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 s=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(o,null),n.default.createElement(c,null),n.default.createElement(d,null))};t.GridText=s;var i=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})))},m=i;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")),u=a(l("./src/App/Documentation/utils/ComponentPreview.js")),o=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(u.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 s=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})))},i=s;t.default=i},"./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")),u=a(l("./src/App/Documentation/utils/DocToc.js")),o=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=o;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 s=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=s;var i=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(o,null),n.default.createElement(c,null),n.default.createElement(d,null),n.default.createElement(s,null))};t.ListsText=i;var m=function e(){return n.default.createElement("div",{className:"doc-container"},n.default.createElement("div",{className:"row"},n.default.createElement(i,null),n.default.createElement(u.default,{component:i})))},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")),u=a(l("./src/App/Documentation/utils/DocToc.js")),o=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=o;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 s=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=s;var i=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=i;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(o,null),n.default.createElement(c,null),n.default.createElement(d,null),n.default.createElement(s,null),n.default.createElement(i,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(u.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"),u=a(l("./node_modules/react-prism/lib/index.js")),o=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(o.default,{language:"css",codeFigure:!0},"html {\n font-family: GillSans, Calibri, Trebuchet, sans-serif;\n }"))};t.Fonts=d;var s=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(o.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(o.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=s;var i=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(u.default,{className:"language-html"},"")," tags to create a secondary heading within a heading tag or class."),n.default.createElement(o.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=i;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(o.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(o.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(u.default,{className:"language-html"},"")," and ",n.default.createElement(u.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(u.default,{className:"language-html"},"")," and ",n.default.createElement(u.default,{className:"language-html"},"")," in HTML5. ",n.default.createElement(u.default,{className:"language-html"},"")," is meant to highlight words or phrases without conveying additional importance while ",n.default.createElement(u.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(u.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(o.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(u.default,{className:"language-html"},"
      ")," or ",n.default.createElement("code",{className:"token property"},".blockquote")," around any HTML as the quote."),n.default.createElement(o.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(u.default,{className:"language-html"},"