Current File : /home/opti/public_html/ezone-accounting.optisoft.com.ng/static/js/91.746b948f.chunk.js
(this["webpackJsonpfuse-react-app"]=this["webpackJsonpfuse-react-app"]||[]).push([[91],{1129:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.FrameContextConsumer=t.FrameContextProvider=t.FrameContext=void 0;var o,a=n(0),i=(o=a)&&o.__esModule?o:{default:o};var r=void 0,s=void 0;"undefined"!==typeof document&&(r=document),"undefined"!==typeof window&&(s=window);var c=t.FrameContext=i.default.createContext({document:r,window:s}),l=c.Provider,u=c.Consumer;t.FrameContextProvider=l,t.FrameContextConsumer=u},1130:function(e,t,n){"use strict";n.d(t,"a",(function(){return N}));var o=n(118),a=n(1100),i=n(1109),r=n(1090),s=n(1117),c=n(1119),l=n(5),u=n(0),d=n(1024),h=n(551),p=n(1087),m=n(1099),b=n(11),f=n(370),y=n(371),j=n(1131),g=n.n(j),x=n(1);const v=Object(d.a)({productionPrefix:"iframe-"});class O extends u.Component{constructor(){super(...arguments),this.state={ready:!1},this.handleRef=e=>{this.contentDocument=e?e.node.contentDocument:null},this.onContentDidMount=()=>{this.setState({ready:!0,jss:Object(f.a)({...Object(h.a)(),plugins:[...Object(h.a)().plugins,Object(y.a)()],insertionPoint:this.contentDocument.querySelector("#jss-demo-insertion-point")}),sheetsManager:new Map,container:this.contentDocument.body})},this.onContentDidUpdate=()=>{this.contentDocument.body.dir=this.props.theme.direction},this.renderHead=()=>Object(x.jsxs)(x.Fragment,{children:[Object(x.jsx)("style",{dangerouslySetInnerHTML:{__html:"\n html {\n font-size: 62.5%;\n font-family: Poppins, Roboto, Helvetica Neue, Arial, sans-serif;\n }\n "}}),Object(x.jsx)("noscript",{id:"jss-demo-insertion-point"})]})}render(){const{children:e,classes:t,theme:n}=this.props;return Object(x.jsx)(g.a,{head:this.renderHead(),ref:this.handleRef,className:Object(l.a)(t.root,"shadow"),contentDidMount:this.onContentDidMount,contentDidUpdate:this.onContentDidUpdate,children:this.state.ready?Object(x.jsx)(p.b,{jss:this.state.jss,generateClassName:v,sheetsManager:this.state.sheetsManager,children:Object(x.jsx)(m.a,{theme:n,children:Object(u.cloneElement)(e,{container:this.state.container})})}):null})}}var w=Object(b.a)((e=>({root:{backgroundColor:e.palette.background.default,flexGrow:1,height:400,border:"none"}})),{withTheme:!0})(O);function T(e){const[t,n]=Object(u.useState)(e.currentTabIndex),{component:d,raw:h,iframe:p,className:m}=e;return Object(x.jsxs)(i.a,{className:Object(l.a)(m,"shadow"),children:[Object(x.jsx)(a.a,{position:"static",color:"default",className:"shadow-0",children:Object(x.jsxs)(c.a,{classes:{root:"border-b-1",flexContainer:"justify-end"},value:t,onChange:function(e,t){n(t)},children:[d&&Object(x.jsx)(s.a,{classes:{root:"min-w-64"},icon:Object(x.jsx)(r.a,{children:"remove_red_eye"})}),h&&Object(x.jsx)(s.a,{classes:{root:"min-w-64"},icon:Object(x.jsx)(r.a,{children:"code"})})]})}),Object(x.jsxs)("div",{className:"flex justify-center max-w-full",children:[Object(x.jsx)("div",{className:0===t?"flex flex-1 max-w-full":"hidden",children:d&&(p?Object(x.jsx)(w,{children:Object(x.jsx)(d,{})}):Object(x.jsx)("div",{className:"p-24 flex flex-1 justify-center max-w-full",children:Object(x.jsx)(d,{})}))}),Object(x.jsx)("div",{className:1===t?"flex flex-1":"hidden",children:h&&Object(x.jsx)("div",{className:"flex flex-1",children:Object(x.jsx)(o.a,{component:"pre",className:"language-javascript w-full",children:h.default})})})]})]})}T.defaultProps={currentTabIndex:0};var N=T},1131:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.FrameContextConsumer=t.FrameContext=void 0;var o=n(1129);Object.defineProperty(t,"FrameContext",{enumerable:!0,get:function(){return o.FrameContext}}),Object.defineProperty(t,"FrameContextConsumer",{enumerable:!0,get:function(){return o.FrameContextConsumer}});var a,i=n(1132),r=(a=i)&&a.__esModule?a:{default:a};t.default=r.default},1132:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},a=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),i=n(0),r=d(i),s=d(n(22)),c=d(n(553)),l=n(1129),u=d(n(1133));function d(e){return e&&e.__esModule?e:{default:e}}var h=function(e){function t(e,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t);var o=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==typeof t&&"function"!==typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).call(this,e,n));return o.handleLoad=function(){o.forceUpdate()},o._isMounted=!1,o}return function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),a(t,[{key:"componentDidMount",value:function(){this._isMounted=!0;var e=this.getDoc();e&&"complete"===e.readyState?this.forceUpdate():this.node.addEventListener("load",this.handleLoad)}},{key:"componentWillUnmount",value:function(){this._isMounted=!1,this.node.removeEventListener("load",this.handleLoad)}},{key:"getDoc",value:function(){return this.node?this.node.contentDocument:null}},{key:"getMountTarget",value:function(){var e=this.getDoc();return this.props.mountTarget?e.querySelector(this.props.mountTarget):e.body.children[0]}},{key:"renderFrameContents",value:function(){if(!this._isMounted)return null;var e=this.getDoc();if(!e)return null;var t=this.props.contentDidMount,n=this.props.contentDidUpdate,o=e.defaultView||e.parentView,a=r.default.createElement(u.default,{contentDidMount:t,contentDidUpdate:n},r.default.createElement(l.FrameContextProvider,{value:{document:e,window:o}},r.default.createElement("div",{className:"frame-content"},this.props.children)));e.body.children.length<1&&(e.open("text/html","replace"),e.write(this.props.initialContent),e.close());var i=this.getMountTarget();return[s.default.createPortal(this.props.head,this.getDoc().head),s.default.createPortal(a,i)]}},{key:"render",value:function(){var e=this,t=o({},this.props,{children:void 0});return delete t.head,delete t.initialContent,delete t.mountTarget,delete t.contentDidMount,delete t.contentDidUpdate,r.default.createElement("iframe",o({},t,{ref:function(t){e.node=t}}),this.renderFrameContents())}}]),t}(i.Component);h.propTypes={style:c.default.object,head:c.default.node,initialContent:c.default.string,mountTarget:c.default.string,contentDidMount:c.default.func,contentDidUpdate:c.default.func,children:c.default.oneOfType([c.default.element,c.default.arrayOf(c.default.element)])},h.defaultProps={style:{},head:null,children:void 0,mountTarget:void 0,contentDidMount:function(){},contentDidUpdate:function(){},initialContent:'<!DOCTYPE html><html><head></head><body><div class="frame-root"></div></body></html>'},t.default=h},1133:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),a=n(0),i=(r(a),r(n(553)));function r(e){return e&&e.__esModule?e:{default:e}}var s=function(e){function t(){return function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!==typeof t&&"function"!==typeof t?e:t}(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return function(e,t){if("function"!==typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}(t,e),o(t,[{key:"componentDidMount",value:function(){this.props.contentDidMount()}},{key:"componentDidUpdate",value:function(){this.props.contentDidUpdate()}},{key:"render",value:function(){return a.Children.only(this.props.children)}}]),t}(a.Component);s.propTypes={children:i.default.element.isRequired,contentDidMount:i.default.func.isRequired,contentDidUpdate:i.default.func.isRequired},t.default=s},2443:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return s}));n(0);var o=n(194),a=n(1072),i=n(1);const r=Object(a.a)({root:{width:"100%",maxWidth:500}});function s(){const e=r();return Object(i.jsxs)("div",{className:e.root,children:[Object(i.jsx)(o.a,{variant:"h1",component:"h2",gutterBottom:!0,children:"h1. Heading"}),Object(i.jsx)(o.a,{variant:"h2",gutterBottom:!0,children:"h2. Heading"}),Object(i.jsx)(o.a,{variant:"h3",gutterBottom:!0,children:"h3. Heading"}),Object(i.jsx)(o.a,{variant:"h4",gutterBottom:!0,children:"h4. Heading"}),Object(i.jsx)(o.a,{variant:"h5",gutterBottom:!0,children:"h5. Heading"}),Object(i.jsx)(o.a,{variant:"h6",gutterBottom:!0,children:"h6. Heading"}),Object(i.jsx)(o.a,{variant:"subtitle1",gutterBottom:!0,children:"subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur"}),Object(i.jsx)(o.a,{variant:"subtitle2",gutterBottom:!0,children:"subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur"}),Object(i.jsx)(o.a,{variant:"body1",gutterBottom:!0,children:"body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam."}),Object(i.jsx)(o.a,{variant:"body2",gutterBottom:!0,children:"body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam."}),Object(i.jsx)(o.a,{variant:"button",display:"block",gutterBottom:!0,children:"button text"}),Object(i.jsx)(o.a,{variant:"caption",display:"block",gutterBottom:!0,children:"caption text"}),Object(i.jsx)(o.a,{variant:"overline",display:"block",gutterBottom:!0,children:"overline text"})]})}},2444:function(e,t,n){"use strict";n.r(t),t.default='import React from \'react\';\nimport Typography from \'@material-ui/core/Typography\';\nimport { makeStyles } from \'@material-ui/core/styles\';\n\nconst useStyles = makeStyles({\n root: {\n width: \'100%\',\n maxWidth: 500,\n },\n});\n\nexport default function Types() {\n const classes = useStyles();\n\n return (\n <div className={classes.root}>\n <Typography variant="h1" component="h2" gutterBottom>\n h1. Heading\n </Typography>\n <Typography variant="h2" gutterBottom>\n h2. Heading\n </Typography>\n <Typography variant="h3" gutterBottom>\n h3. Heading\n </Typography>\n <Typography variant="h4" gutterBottom>\n h4. Heading\n </Typography>\n <Typography variant="h5" gutterBottom>\n h5. Heading\n </Typography>\n <Typography variant="h6" gutterBottom>\n h6. Heading\n </Typography>\n <Typography variant="subtitle1" gutterBottom>\n subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur\n </Typography>\n <Typography variant="subtitle2" gutterBottom>\n subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur\n </Typography>\n <Typography variant="body1" gutterBottom>\n body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur\n unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam\n dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.\n </Typography>\n <Typography variant="body2" gutterBottom>\n body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur\n unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam\n dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.\n </Typography>\n <Typography variant="button" display="block" gutterBottom>\n button text\n </Typography>\n <Typography variant="caption" display="block" gutterBottom>\n caption text\n </Typography>\n <Typography variant="overline" display="block" gutterBottom>\n overline text\n </Typography>\n </div>\n );\n}\n'},2445:function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return r}));n(0);var o=n(1072),a=n(1);const i=Object(o.a)((e=>({root:{...e.typography.button,backgroundColor:e.palette.background.paper,padding:e.spacing(1)}})));function r(){const e=i();return Object(a.jsx)("div",{className:e.root,children:"This div's text looks like that of a button."})}},2446:function(e,t,n){"use strict";n.r(t),t.default="import React from 'react';\nimport { makeStyles } from '@material-ui/core/styles';\n\nconst useStyles = makeStyles((theme) => ({\n root: {\n ...theme.typography.button,\n backgroundColor: theme.palette.background.paper,\n padding: theme.spacing(1),\n },\n}));\n\nexport default function TypographyTheme() {\n const classes = useStyles();\n\n return <div className={classes.root}>{\"This div's text looks like that of a button.\"}</div>;\n}\n"},2628:function(e,t,n){"use strict";n.r(t);var o=n(1130),a=n(118),i=n(1098),r=n(1090),s=n(194),c=n(1072),l=n(1);const u=Object(c.a)((e=>({layoutRoot:{"& .description":{marginBottom:16}}})));t.default=function(e){return u(),Object(l.jsxs)(l.Fragment,{children:[Object(l.jsx)("div",{className:"flex flex-1 flex-grow-0 items-center justify-end",children:Object(l.jsxs)(i.a,{className:"normal-case",variant:"outlined",component:"a",href:"https://material-ui.com/components/typography",target:"_blank",role:"button",children:[Object(l.jsx)(r.a,{children:"link"}),Object(l.jsx)("span",{className:"mx-4",children:"Reference"})]})}),Object(l.jsx)(s.a,{className:"text-44 mt-32 mb-8",component:"h1",children:"Typography"}),Object(l.jsx)(s.a,{className:"description",children:"Use typography to present your design and content as clearly and efficiently as possible."}),Object(l.jsxs)(s.a,{className:"mb-16",component:"div",children:["Too many type sizes and styles at once can spoil any layout. A"," ",Object(l.jsx)("a",{href:"https://material.io/design/typography/#type-scale",children:"typographic scale"})," has a limited set of type sizes that work well together along with the layout grid."]}),Object(l.jsx)(s.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"General"}),Object(l.jsxs)(s.a,{className:"mb-16",component:"div",children:["The ",Object(l.jsx)("em",{children:"Roboto"})," font will ",Object(l.jsx)("strong",{children:"not"})," be automatically loaded by Material-UI. The developer is responsible for loading all fonts used in their application. Roboto Font has a few easy ways to get started. For more advanced configuration, check out",Object(l.jsx)("a",{href:"/customization/typography/",children:"the theme customization section"}),"."]}),Object(l.jsx)(s.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Roboto Font CDN"}),Object(l.jsx)(s.a,{className:"mb-16",component:"div",children:"Shown below is a sample link markup used to load the Roboto font from a CDN:"}),Object(l.jsx)(a.a,{component:"pre",className:"language-html",children:' \n<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />\n'}),Object(l.jsx)(s.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Install with npm"}),Object(l.jsxs)(s.a,{className:"mb-16",component:"div",children:["You can ",Object(l.jsx)("a",{href:"https://www.npmjs.com/package/@fontsource/roboto",children:"install it"})," by typing the below command in your terminal:"]}),Object(l.jsx)(s.a,{className:"mb-16",component:"div",children:Object(l.jsx)("code",{children:"npm install @fontsource/roboto"})}),Object(l.jsx)(s.a,{className:"mb-16",component:"div",children:"Then, you can import it in your entry-point."}),Object(l.jsx)(a.a,{component:"pre",className:"language-js",children:" \nimport '@fontsource/roboto';\n"}),Object(l.jsxs)(s.a,{className:"mb-16",component:"div",children:["For more info check out"," ",Object(l.jsx)("a",{href:"https://github.com/DecliningLotus/fontsource/blob/master/packages/roboto/README.md",children:"Fontsource"}),"."]}),Object(l.jsx)(s.a,{className:"mb-16",component:"div",children:"\u26a0\ufe0f Be careful when using this approach. Make sure your bundler doesn't eager load all the font variations (100/300/400/500/700/900, italic/regular, SVG/woff). Fontsource can be configured to load specific subsets, weights and styles. Inlining all the font files can significantly increase the size of your bundle. Material-UI default typography configuration only relies on 300, 400, 500, and 700 font weights."}),Object(l.jsx)(s.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Component"}),Object(l.jsx)(s.a,{className:"mb-16",component:"div",children:Object(l.jsx)(o.a,{className:"my-24",iframe:!1,component:n(2443).default,raw:n(2444)})}),Object(l.jsx)(s.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Theme"}),Object(l.jsxs)(s.a,{className:"mb-16",component:"div",children:["In some situations you might not be able to use the ",Object(l.jsx)("code",{children:"Typography"})," component. Hopefully, you might be able to take advantage of the"," ",Object(l.jsx)("a",{href:"/customization/default-theme/?expand-path=$.typography",children:Object(l.jsx)("code",{children:"typography"})})," ","keys of the theme."]}),Object(l.jsx)(s.a,{className:"mb-16",component:"div",children:Object(l.jsx)(o.a,{className:"my-24",iframe:!1,component:n(2445).default,raw:n(2446)})}),Object(l.jsx)(s.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Changing the semantic element"}),Object(l.jsxs)(s.a,{className:"mb-16",component:"div",children:["The Typography component uses the ",Object(l.jsx)("code",{children:"variantMapping"})," property to associate a UI variant with a semantic element. It\u2019s important to realize that the style of a typography is independent from the semantic underlying element."]}),Object(l.jsx)("ul",{children:Object(l.jsxs)("li",{children:["You can change the underlying element for a one time occasion with the"," ",Object(l.jsx)("code",{children:"component"})," property:"]})}),Object(l.jsx)(a.a,{component:"pre",className:"language-jsx",children:' \n{/* There is already an h1 in the page, let\'s not duplicate it. */}\n<Typography variant="h1" component="h2">\n h1. Heading\n</Typography>\n'}),Object(l.jsx)("ul",{children:Object(l.jsxs)("li",{children:["You can change the mapping"," ",Object(l.jsx)("a",{href:"/customization/globals/#default-props",children:"globally using the theme"}),":"]})}),Object(l.jsx)(a.a,{component:"pre",className:"language-js",children:" \nconst theme = createTheme({\n props: {\n MuiTypography: {\n variantMapping: {\n h1: 'h2',\n h2: 'h2',\n h3: 'h2',\n h4: 'h2',\n h5: 'h2',\n h6: 'h2',\n subtitle1: 'h2',\n subtitle2: 'h2',\n body1: 'span',\n body2: 'span',\n },\n },\n },\n});\n"}),Object(l.jsx)(s.a,{className:"text-32 mt-32 mb-8",component:"h2",children:"Accessibility"}),Object(l.jsx)(s.a,{className:"mb-16",component:"div",children:"A few key factors to follow for an accessible typography:"}),Object(l.jsxs)("ul",{children:[Object(l.jsxs)("li",{children:[Object(l.jsx)("strong",{children:"Color"}),". Provide enough contrast between text and its background, check out the minimum recommended"," ",Object(l.jsx)("a",{href:"https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html",children:"WCAG 2.0 color contrast ratio"})," ","(4.5:1)."]}),Object(l.jsxs)("li",{children:[Object(l.jsx)("strong",{children:"Font size"}),". Use"," ",Object(l.jsx)("a",{href:"/customization/typography/#font-size",children:"relative units (rem)"})," to accommodate the user's settings."]}),Object(l.jsxs)("li",{children:[Object(l.jsx)("strong",{children:"Heading hierarchy"}),"."," ",Object(l.jsx)("a",{href:"https://www.w3.org/WAI/tutorials/page-structure/headings/",children:"Don't skip"})," ","heading levels. In order to solve this problem, you need to"," ",Object(l.jsx)("a",{href:"#changing-the-semantic-element",children:"separate the semantics from the style"}),"."]})]})]})}}}]);
Mini Shell