diff --git a/.babelrc b/.babelrc index fd6b16f52..bfc3f9c4f 100644 --- a/.babelrc +++ b/.babelrc @@ -2,5 +2,28 @@ "presets": [ "@babel/preset-env", "@babel/preset-react" + ], + "plugins": [ + ["babel-plugin-root-import", { + "paths": [ + { + "rootPathPrefix": "~", + "rootPathSuffix": "./" + }, + { + "rootPathPrefix": "$", + "rootPathSuffix": "./src" + }, + { + "rootPathPrefix": "@", + "rootPathSuffix": "./src/App/components" + }, + { + "rootPathPrefix": "#", + "rootPathSuffix": "./src/App/Documentation/utils" + + } + ] + }] ] } diff --git a/.eslintrc b/.eslintrc index 65cc6bcd0..ee0963cb2 100644 --- a/.eslintrc +++ b/.eslintrc @@ -20,72 +20,77 @@ "react", "node", "jest", - "testcafe" + "testcafe", + "security" ], "extends": [ "eslint:recommended", "plugin:react/recommended", "plugin:jest/recommended", - "plugin:testcafe/recommended" + "plugin:testcafe/recommended", + "plugin:security/recommended" ], "rules": { - "array-bracket-spacing": ["warn"], - "babel/new-cap": 0, - "babel/no-invalid-this": 1, - "babel/object-curly-spacing": ["warn", "always"], - "babel/quotes": ["error", "double"], - "babel/semi": ["error"], - "block-scoped-var": ["warn"], - "camelcase": ["warn"], - "comma-dangle": ["warn", "never"], - "comma-spacing": ["warn"], - "comma-style": ["warn"], - "computed-property-spacing": ["warn"], - "constructor-super": ["error"], - "eol-last": ["warn"], - "eqeqeq": ["warn"], - "func-call-spacing": ["warn"], - "indent": ["error", 4, { "SwitchCase": 1 }], - "jsx-quotes": ["error", "prefer-double"], - "key-spacing": ["warn"], - "keyword-spacing": ["warn"], - "linebreak-style": 0, - "new-cap": 0, - "newline-per-chained-call": ["warn"], - "no-alert": ["warn"], - "no-console": ["warn", {"allow": ["warn", "error"]}], - "no-const-assign": ["error"], - "no-extra-semi": ["error"], - "no-inner-declarations": 0, - "no-invalid-regexp": ["error"], - "no-irregular-whitespace": ["error"], - "no-mixed-spaces-and-tabs": ["error"], - "no-multi-spaces": ["warn"], - "no-multiple-empty-lines": ["error"], - "no-redeclare": ["warn"], - "no-this-before-super": ["warn"], - "no-trailing-spaces": ["error"], - "no-undef": ["error"], - "no-unneeded-ternary": ["warn"], - "no-unreachable": ["error"], - "no-unused-vars": ["warn"], - "no-var": ["warn"], - "no-whitespace-before-property": ["warn"], - "node/exports-style": ["error", "module.exports"], - "object-curly-newline": ["warn"], - "object-curly-spacing": 0, - "object-property-newline": ["warn"], - "prefer-const": ["warn"], - "prefer-spread": ["warn"], - "quotes": 0, - "react/prop-types": 0, - "semi": 0, - "semi-spacing": ["warn"], - "semi-style": ["warn"], - "space-before-function-paren": ["warn"], - "space-in-parens": ["warn"], - "space-infix-ops": ["warn"], - "spaced-comment": ["warn"], - "wrap-regex": ["error"] + "array-bracket-spacing": ["warn"], + "babel/new-cap": 0, + "babel/no-invalid-this": 1, + "babel/object-curly-spacing": ["warn", "always"], + "babel/quotes": ["error", "double"], + "babel/semi": ["error"], + "block-scoped-var": ["warn"], + "camelcase": ["warn"], + "comma-dangle": ["warn", "never"], + "comma-spacing": ["warn"], + "comma-style": ["warn"], + "computed-property-spacing": ["warn"], + "constructor-super": ["error"], + "eol-last": ["warn"], + "eqeqeq": ["warn"], + "func-call-spacing": ["warn"], + "indent": ["error", 4, { "SwitchCase": 1 }], + "jsx-quotes": ["error", "prefer-double"], + "key-spacing": ["warn"], + "keyword-spacing": ["warn"], + "linebreak-style": 0, + "new-cap": 0, + "newline-per-chained-call": ["warn"], + "no-alert": ["warn"], + "no-console": ["warn", {"allow": ["warn", "error"]}], + "no-const-assign": ["error"], + "no-extra-semi": ["error"], + "no-inner-declarations": 0, + "no-invalid-regexp": ["error"], + "no-irregular-whitespace": ["error"], + "no-mixed-spaces-and-tabs": ["error"], + "no-multi-spaces": ["warn"], + "no-multiple-empty-lines": ["error"], + "no-redeclare": ["warn"], + "no-this-before-super": ["warn"], + "no-trailing-spaces": ["error"], + "no-undef": ["error"], + "no-unneeded-ternary": ["warn"], + "no-unreachable": ["error"], + "no-unused-vars": ["warn"], + "no-var": ["warn"], + "no-whitespace-before-property": ["warn"], + "node/exports-style": ["error", "module.exports"], + "object-curly-newline": ["warn"], + "object-curly-spacing": 0, + "object-property-newline": ["warn"], + "prefer-const": ["warn"], + "prefer-spread": ["warn"], + "quotes": 0, + "react/prop-types": 0, + "security/detect-non-literal-regexp": 0, + "security/detect-object-injection": 0, + "security/detect-unsafe-regex": 0, + "semi": 0, + "semi-spacing": ["warn"], + "semi-style": ["warn"], + "space-before-function-paren": ["warn"], + "space-in-parens": ["warn"], + "space-infix-ops": ["warn"], + "spaced-comment": ["warn"], + "wrap-regex": ["error"] } } diff --git a/.gitignore b/.gitignore index 908025b8f..005073c5a 100644 --- a/.gitignore +++ b/.gitignore @@ -63,3 +63,5 @@ typings/ # dotenv environment variables file .env +# Mac stuff +.DS_Store diff --git a/CHANGELOG.md b/CHANGELOG.md index aa5fabd84..329994ac2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,33 @@ All notable changes to this project will be documented in this file. +## [0.8.0] - 2018-08-15 + +### Added + +- Added section for colors in utilities. +- Added progress tracker component and documentation. +- Added tooltip component. +- Added media object component. +- Added action list component. +- Added toast component prototype. + +### Changed + +- Changed `.background-color` utility class to `.bg-color`. +- Changed breadcrumb component to disable span elements by default, provided they are not within last-child li element. +- Reworked styling of tabs component. +- Reworked alert component. + +### Fixed + +- Fixed issue with hover table. + +### Removed + +- Removed mypayex logo option from topbar. Logo is now defaulted to standard payex logo, class `.logo-default` is no longer needed. +- Removed `.disabled` class styling for pagination component arrows. `span` elements will now act as disabled arrows. + ## [0.7.1] - 2018-07-03 ### Fixed diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 7bb7aeb42..ba16e7e41 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -51,9 +51,9 @@ Create a new file under `./src/App/Documentation/Components/[MyExampleDocumentat import React from "react"; -import ComponentPreview from "../../utils/ComponentPreview"; -import ComponentPreview from "../../utils/DocToc"; -import MyExampleComponent from "../../../components/MyExampleComponent"; +//Read more about the import shortcuts in the readme (#, @, $ etc.) +import { ComponentPreview, DocToc } from "#"; +import MyExampleComponent from "@/MyExampleComponent"; const MyExampleDocumentationComponentText = () => (
diff --git a/README.md b/README.md index a8650c8ec..3ff5ed820 100644 --- a/README.md +++ b/README.md @@ -34,6 +34,17 @@ DesignGuide requires [Node.js](https://nodejs.org/en/) (includes npm). * Running the command `npm start` starts the webpack dev server, (which is configured in `./webpack.config.js`). If any changes is made to this file, or any files directly influencing this file (i.e. any loaders or plugins) you need to restart the server. * The script `npm start` will set the *NODE_ENV* variable to __development__, and start the dev server in development mode. If you wish to run the dev server in production-like environment run the command `npm run start:prod`. +#### Importing components + +When importing different components in the files you create, you can use shortcuts for common paths. The shortcuts are as following: + +* `~` - root of the project (example `import package from "~/package";`). +* `$` - `./src`-folder (example `import px from "$/px-script";`). +* `@` - `./src/App/components`-folder (example `import Alert from "@/Alert";`). +* `#` - `./src/App/Documentation/utils`-folder (example `import { DocToc } from "#";`). + +The shortcuts are specified in the `./.babelrc`-file. Specifying the prefix-shortcuts in the `./jsconfig.json`-file enables path intellisense for the shortcuts (at least in VSCode). + ### Building To start building, run the command `npm run build` to start in dev-mode, or `npm run build:prod` for production-mode. This will make webpack start bundling everything and make static files in the `./dist/`-folder. It will also run through all files in `./src/` with eslint making sure all files are without errors before building. Also make sure all tests pass, or make changes to them accordingly. @@ -48,8 +59,8 @@ Design Guide uses [semantic versioning](http://semver.org/). This means that int 1. Open a terminal and navigate to repo root 1. Run the command `npm test` * Many of the tests are snapshot based, and runs against already created snapshots. If you need to update the snapshots due to changes run the command `npm run test:update`. - * A test coverage report is generated after running the tests. This can be found in `./coverage` or. -> Note: Snapshot testing is pretty unforgiving, so if you make __ANY__ changes to a component which already has a snapshot, the tests __WILL__ crash! So make sure to run `npm test:update` before committing. + * A test coverage report is generated after running the tests. This can be found in `./coverage`. +> Note: Snapshot testing is pretty unforgiving, so if you make __ANY__ changes to how a component is rendered, which already has a snapshot, the tests __WILL__ crash! So make sure to run `npm run test:update` before committing. ## Code style diff --git a/dist/0.7.1/scripts/app.js b/dist/0.7.1/scripts/app.js deleted file mode 100644 index d4759a90e..000000000 --- a/dist/0.7.1/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"},"