diff --git a/CHANGELOG.md b/CHANGELOG.md index 2e7bb5af3..ba5efbfbf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,33 @@ All notable changes to this project will be documented in this file. +## [0.7.0] - 2018-06-? + +### Added + +- Added well component. +- Added a styling for using `text-muted` within a text-color modifyer class (i.e. `color-brand`). +- Added section about breakpoints. +- Added section about display classes. +- Added table with supported browsers in browser-support section. +- Added card component. + +### Changed + +- Changed the name of the alert class `alert-error` to `alert-danger` to match the other components. +- Changed alert component to `display: block` by default, no longer requiring class `in`. Close-buttons for the alert component now adds class `d-none` instead. +- Changed modal component to use class `d-block` instead of class `in`. Open/close-buttons for the modal component now toggles class `d-block` instead. +- Optimized `px-script` code for rangeslider component. It no longer triggers eventlistener for chrome-related styling in other browsers. + +### Removed + +- Removed class `fade` from modal for now. + +### Fixed + +- Fixed form components for other browsers than chrome. +- Fixed bug with breadcrumb component not rendering correctly if using spaces between `
  • `-elements. + ## [0.6.0] - 2018-06-08 ### Added diff --git a/dist/0.6.0/scripts/app.js b/dist/0.6.0/scripts/app.js index 6228f3663..f13812962 100644 --- a/dist/0.6.0/scripts/app.js +++ b/dist/0.6.0/scripts/app.js @@ -3,5 +3,5 @@ var payex=webpackJsonppayex(["app"],{"./node_modules/classnames/index.js":functi 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(b.default,{language:"html",showCasePanel:!0,codeFigure:!0},p.default.createElement(y.default,{type:"success",display:!0,text:"This is a success alert with an icon!",close:!0,icon:"check_circle"}),"\n\n",p.default.createElement(y.default,{type:"neutral",display:!0,text:"This is a neutral alert with an icon!",close:!0,icon:"info"}),"\n\n",p.default.createElement(y.default,{type:"warning",display:!0,text:"This is a warning alert with an icon!",close:!0,icon:"warning"}),"\n\n",p.default.createElement(y.default,{type:"error",display:!0,text:"This is a error alert with an icon!",close:!0,icon:"error"}),"\n\n",p.default.createElement(y.default,{type:"light",display:!0,text:"This is a light alert with an icon!",close:!0,icon:"info_outline"}),"\n\n",p.default.createElement(y.default,{type:"default",display:!0,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(b.Attribute,{data:!0,name:"alert-close",value:"[alert ID]"})," to the button element."),p.default.createElement(b.default,{language:"html",showCasePanel:!0,codeFigure:!0},p.default.createElement(y.default,{id:"alert-success-1",type:"success",display:!0,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 _=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(b.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=_;var k=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(b.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(b.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(b.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(b.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(b.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(b.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(b.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=k;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(j,null),p.default.createElement(N,null),p.default.createElement(_,null))};t.AlertsText=P;var O=function(e){function t(){return o(this,t),d(this,s(t).apply(this,arguments))}return f(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(g.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 f=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=f;var m=function e(){return n.default.createElement("div",{className:"doc-container"},n.default.createElement("div",{className:"row"},n.default.createElement(f,null),n.default.createElement(u.default,{component:f})))},p=m;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(b.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 j=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(b.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=j;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(b.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(b.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(b.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(b.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 _=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(b.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=_;var k=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(b.Attribute,{name:"disabled",value:"true"}),"..."),p.default.createElement(b.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=k;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(b.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(b.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(b.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(b.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(b.Attribute,{data:!0,name:"button-loader",value:"true"})," to a button component will produce the following html:"),p.default.createElement(b.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(b.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(b.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(b.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(b.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(b.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(b.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(b.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(b.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(b.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 D=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(j,null),p.default.createElement(N,null),p.default.createElement(_,null),p.default.createElement(k,null),p.default.createElement(P,null),p.default.createElement(O,null))};t.ButtonsText=D;var C=function(e){function t(){return o(this,t),d(this,s(t).apply(this,arguments))}return f(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(D,null),p.default.createElement(g.default,{component:D})))}}]),t}(p.Component),M=C;t.default=M},"./src/App/Documentation/components/Datepickers/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[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 f=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})))},m=f;t.default=m},"./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 f=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=f;var m=function e(){return n.default.createElement("div",{className:"doc-container"},n.default.createElement("div",{className:"row"},n.default.createElement(f,null),n.default.createElement(o.default,{component:f})))},p=m;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 f=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=f;var m=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=m;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"},"