diff --git a/404.html b/404.html index 2e3bb84..fcb78b8 100644 --- a/404.html +++ b/404.html @@ -4,13 +4,13 @@ Page Not Found | Newfold UI - +
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

Hello From Root

- + \ No newline at end of file diff --git a/assets/js/c34ea626.290ec141.js b/assets/js/c34ea626.290ec141.js new file mode 100644 index 0000000..72e6f49 --- /dev/null +++ b/assets/js/c34ea626.290ec141.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunknewfold_ui_docs=self.webpackChunknewfold_ui_docs||[]).push([[519],{3905:(e,t,n)=>{n.d(t,{Zo:()=>d,kt:()=>f});var r=n(7294);function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function i(e){for(var t=1;t=0||(a[n]=e[n]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(a[n]=e[n])}return a}var s=r.createContext({}),c=function(e){var t=r.useContext(s),n=t;return e&&(n="function"==typeof e?e(t):i(i({},t),e)),n},d=function(e){var t=c(e.components);return r.createElement(s.Provider,{value:t},e.children)},p="mdxType",u={inlineCode:"code",wrapper:function(e){var t=e.children;return r.createElement(r.Fragment,{},t)}},m=r.forwardRef((function(e,t){var n=e.components,a=e.mdxType,o=e.originalType,s=e.parentName,d=l(e,["components","mdxType","originalType","parentName"]),p=c(n),m=a,f=p["".concat(s,".").concat(m)]||p[m]||u[m]||o;return n?r.createElement(f,i(i({ref:t},d),{},{components:n})):r.createElement(f,i({ref:t},d))}));function f(e,t){var n=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var o=n.length,i=new Array(o);i[0]=m;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l[p]="string"==typeof e?e:a,i[1]=l;for(var c=2;c{n.d(t,{Z:()=>f});var r=n(7294),a=n(3933),o=n(4184),i=n.n(o),l=n(5697),s=n.n(l),c=n(5667),d=n(1346);const p=(0,r.forwardRef)((({id:e,children:t,label:n,labelSuffix:o,description:l,checked:s,disabled:p,onChange:u,className:m,"aria-label":f,...g},y)=>(0,r.createElement)(a.r.Group,{as:"div",className:i()("nfd-toggle-field",p&&"nfd-toggle-field--disabled",m)},(0,r.createElement)("div",{className:"nfd-toggle-field__header"},n&&(0,r.createElement)("div",{className:"nfd-toggle-field__label-wrapper"},(0,r.createElement)(c.Z,{as:a.r.Label,className:"nfd-toggle-field__label",label:n,"aria-label":f}),o),(0,r.createElement)(d.Z,{id:e,ref:y,checked:s,onChange:u,screenReaderLabel:n,disabled:p,...g})),(l||t)&&(0,r.createElement)(a.r.Description,{as:"div",className:"nfd-toggle-field__description"},l||t)))),u={id:s().string.isRequired,children:s().node,label:s().string.isRequired,labelSuffix:s().node,description:s().node,checked:s().bool.isRequired,disabled:s().bool,onChange:s().func.isRequired,className:s().string,"aria-label":s().string};p.propTypes=u,p.defaultProps={children:null,labelSuffix:null,description:null,disabled:!1,className:""};const m=e=>(0,r.createElement)(p,{...e});m.propTypes=u,m.defaultProps=p.defaultProps,m.displayName="ToggleField";const f=p},5667:(e,t,n)=>{n.d(t,{Z:()=>p});var r=n(7294),a=n(4184),o=n.n(a),i=n(5697),l=n.n(i);const s=(0,r.forwardRef)((({as:e,className:t,label:n,children:a,...i},l)=>(0,r.createElement)(e,{ref:l,className:o()("nfd-label",t),...i},n||a||null))),c={label:l().string,children:l().string,as:l().elementType,className:l().string};s.propTypes=c,s.defaultProps={label:"",children:"",as:"label",className:""};const d=e=>(0,r.createElement)(s,{...e});d.propTypes=c,d.defaultProps=s.defaultProps,d.displayName="Label";const p=s},7768:(e,t,n)=>{n.d(t,{S7:()=>s,ZP:()=>u});var r=n(7294),a=n(5697),o=n.n(a),i=n(4184),l=n.n(i);const s={size:{1:"nfd-title--1",2:"nfd-title--2",3:"nfd-title--3",4:"nfd-title--4",5:"nfd-title--5"}},c=(0,r.forwardRef)((({children:e,as:t,size:n,className:a,...o},i)=>(0,r.createElement)(t,{ref:i,className:l()("nfd-title",s.size[n||t[1]],a),...o},e))),d={children:o().node.isRequired,as:o().elementType,size:o().oneOf(Object.keys(s.size)),className:o().string};c.propTypes=d,c.defaultProps={as:"h1",size:void 0,className:""};const p=e=>(0,r.createElement)(c,{...e});p.propTypes=d,p.defaultProps=c.defaultProps,p.displayName="Title";const u=c},1346:(e,t,n)=>{n.d(t,{Z:()=>h});var r=n(7294),a=n(3933),o=n(4080),i=n(8057),l=n(8163),s=n(4184),c=n.n(s),d=n(6486),p=n(5697),u=n.n(p),m=n(7201);const f=(0,r.forwardRef)((({id:e,as:t,checked:n,screenReaderLabel:s,onChange:p,disabled:u,className:f,type:g,...y},h)=>{const b=(0,m.Z)();return(0,r.createElement)(a.r,{ref:h,as:t,checked:n,disabled:u,onChange:u?d.noop:p,className:c()("nfd-toggle",n&&"nfd-toggle--checked",u&&"nfd-toggle--disabled",f),"data-id":e,...y,type:"button"===t?"button":g},(0,r.createElement)("span",{className:"nfd-sr-only"},s),(0,r.createElement)("span",{className:"nfd-toggle__handle"},(0,r.createElement)(o.u,{show:n,unmount:!1,as:"span","aria-hidden":!n,enter:"",enterFrom:"nfd-opacity-0 nfd-hidden",enterTo:"nfd-opacity-100",leaveFrom:"nfd-opacity-100",leaveTo:"nfd-opacity-0 nfd-hidden"},(0,r.createElement)(i.Z,{className:"nfd-toggle__icon nfd-toggle__icon--check",...b})),(0,r.createElement)(o.u,{show:!n,unmount:!1,as:"span","aria-hidden":n,enterFrom:"nfd-opacity-0 nfd-hidden",enterTo:"nfd-opacity-100",leaveFrom:"nfd-opacity-100",leaveTo:"nfd-opacity-0 nfd-hidden"},(0,r.createElement)(l.Z,{className:"nfd-toggle__icon nfd-toggle__icon--x",...b}))))})),g={as:u().elementType,id:u().string.isRequired,checked:u().bool,screenReaderLabel:u().string.isRequired,onChange:u().func.isRequired,disabled:u().bool,type:u().string,className:u().string};f.propTypes=g,f.defaultProps={as:"button",checked:!1,disabled:!1,type:"",className:""};const y=e=>(0,r.createElement)(f,{...e});y.propTypes=g,y.defaultProps=f.defaultProps,y.displayName="Toggle";const h=f},2279:(e,t,n)=>{n.d(t,{n:()=>o,y:()=>i});var r=n(7294),a=n(3047);const o=e=>{let{id:t="toggle-field-demo",label:n="A toggle field",description:o,checked:i=!1,disabled:l=!1,className:s}=e;const[c,d]=(0,r.useState)(i);return r.createElement(a.Z,{id:t,label:n,description:o,checked:c,disabled:l,onChange:d,className:s})},i={id:{type:"string",description:"The id for the toggle field.",isRequired:!0},label:{type:"string",description:"The label for the toggle field.",isRequired:!0},checked:{type:"bool",description:"Toggle field checked state",defaultValue:"false",isRequired:!0},onChange:{type:"function",description:"Fired when changed. The function will receive the new value as an argument.",isRequired:!0},labelSuffix:{type:"string",description:"Content to display after the label."},description:{type:"node",description:"The description for the toggle field."},disabled:{type:"bool",description:"If true, the toggle will be disabled.",defaultValue:"false"},ariaLabel:{type:"string"},className:{type:"string"}}},2504:(e,t,n)=>{n.d(t,{Z:()=>o});var r=n(7294);const a={Table:e=>{let{children:t,docs:n}=e;const o=[],i=()=>!!(n&&"object"==typeof n&&Object.keys(n).length>0);return r.createElement("div",{className:"props-table"},r.createElement("table",null,r.createElement("thead",null,r.createElement("tr",null,r.createElement("th",null,"Attribute"),r.createElement("th",null,"Type"),r.createElement("th",null,"Description"),r.createElement("th",null,"Default"))),r.createElement("tbody",null,!t&&!i()&&r.createElement("div",{className:"empty-props"},"This component has no props."),(()=>{if(i())for(const e in n)if(n.hasOwnProperty(e)){const t=n[e];t.name=e,void 0===t.type&&(t.type=[]),void 0===t.description&&(t.description=""),void 0===t.defaultValue&&(t.defaultValue=""),void 0===t.isRequired&&(t.isRequired=!1),o.push(r.createElement(a.Row,{key:t.name,name:t.name,type:t.type,description:t.description,defaultValue:t.defaultValue,isRequired:t.isRequired}))}return o})(),t)))}};a.Row=e=>{let{name:t,type:n=[],description:a="-",defaultValue:o="-",isRequired:i=!1}=e;return t&&"string"==typeof t?r.createElement("tr",null,r.createElement("td",{className:"props-table-name-col"},"boolean"==typeof i&&i?r.createElement("span",{className:"required-prop"},t,r.createElement("sup",null,"*")):r.createElement("span",null,t)),r.createElement("td",{className:"props-table-types-col"},(()=>{let e=n;return"string"==typeof e&&(e=[e]),e.length>0?r.createElement(r.Fragment,null,e.map(((e,t)=>r.createElement(r.Fragment,{key:t},r.createElement("code",null,e),r.createElement("span",null," | "))))):r.createElement("span",null,"-")})()),r.createElement("td",{className:"props-table-description-col"},a&&"string"==typeof a&&""!==a?r.createElement("span",null,a):r.createElement("span",null,"-")),r.createElement("td",{className:"props-table-default-col"},o&&"string"==typeof o&&""!==o&&"-"!==o?r.createElement("code",null,o):r.createElement("span",null,"-"))):(console.warn("From: PropsTable.Row. Invalid prop name or missing required props: name."),null)};const o=a},3515:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>_,contentTitle:()=>j,default:()=>Z,frontMatter:()=>F,metadata:()=>D,toc:()=>B});var r=n(7462),a=n(7294),o=n(3905),i=n(2504),l=n(1629),s=n(5697),c=n(4184),d=n.n(c),p=n(7768);const u=({as:e="div",children:t,className:n="",title:r,description:o,...i})=>(0,a.createElement)(e,{...i,className:d()("nfd-container__header",n)},r&&(0,a.createElement)(p.ZP,{as:"h2",className:"nfd-text-2xl nfd-font-medium nfd-text-title"},r),o&&(0,a.createElement)("p",null,o),t);u.propTypes={as:s.PropTypes.element,children:s.PropTypes.node,className:s.PropTypes.string,title:s.PropTypes.string,description:s.PropTypes.string};const m=({as:e="div",children:t,className:n="",id:r="",separator:o=!1,...i})=>(0,a.createElement)(e,{...i,id:r,className:d()("nfd-container__block",n)},(0,a.createElement)("div",{className:d()("nfd-pb-8",o&&"nfd-border-b nfd-border-[#CBD5E1]")},t));m.propTypes={as:s.PropTypes.element,children:s.PropTypes.node.isRequired,className:s.PropTypes.string,id:s.PropTypes.string,separator:s.PropTypes.bool};const f=({as:e="div",children:t,className:n="",description:r="",title:o,...i})=>(0,a.createElement)(e,{...i,className:d()("nfd-container__settings-field",n)},(0,a.createElement)("div",{className:"nfd-col-span-1"},(0,a.createElement)("div",{className:"nfd-max-w-screen-sm"},(0,a.createElement)(p.ZP,{as:"h3",size:"4"},o),r&&(0,a.createElement)("div",{className:"nfd-mt-2"},r))),(0,a.createElement)("fieldset",{className:"nfd-min-w-0 nfd-mt-8 xl:nfd-mt-0 xl:nfd-col-span-2"},(0,a.createElement)("legend",{className:"nfd-sr-only"},o),(0,a.createElement)("div",{className:"st-space-y-8"},t)));f.propTypes={as:s.PropTypes.element,children:s.PropTypes.node.isRequired,className:s.PropTypes.string,description:s.PropTypes.string,title:s.PropTypes.string};const g=(0,a.forwardRef)((({as:e="div",children:t,className:n="",...r},o)=>(0,a.createElement)(e,{...r,className:d()("nfd-container",n),ref:o},t)));g.propTypes={as:s.PropTypes.element,children:s.PropTypes.node.isRequired,className:s.PropTypes.string},g.Header=u,g.Block=m,g.SettingsField=f;const y=g,h={toc:[]},b="wrapper";function k(e){let{components:t,...n}=e;return(0,o.kt)(b,(0,r.Z)({},h,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-jsx"},'import { Container } from "@newfold/ui-component-library";\n\n\n \n\n')))}k.isMDXComponent=!0;const v={toc:[]},T="wrapper";function C(e){let{components:t,...n}=e;return(0,o.kt)(T,(0,r.Z)({},v,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-jsx"},'import { Container } from "@newfold/ui-component-library";\n\n\n \n
\n Random Block Content\n

\n Container can pass any content in here.\n

\n
\n \n\n')))}C.isMDXComponent=!0;const E={toc:[]},N="wrapper";function P(e){let{components:t,...n}=e;return(0,o.kt)(N,(0,r.Z)({},E,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-jsx"},'import { Container } from "@newfold/ui-component-library";\n\n\n \n \n ...Performance settings fields\n \n \n\n')))}P.isMDXComponent=!0;const w={as:{type:"string",description:"The HTML element to render.",defaultValue:"div"},children:{type:"node",description:"The content of this container."},className:{type:"string"}},x={as:{type:"string",description:"The HTML element to render.",defaultValue:"div"},title:{type:"string"},description:{type:"string"},children:{type:"node",description:"The content of the header to render after the title and description."},className:{type:"string"}},S={as:{type:"string",description:"The HTML element to render.",defaultValue:"div"},children:{type:"node",description:"The content of this block."},separator:{type:"bool",description:"Whether to render a separator after the block.",defaultValue:"false"},id:{type:"string"},className:{type:"string"}},R={as:{type:"string",description:"The HTML element to render.",defaultValue:"div"},title:{type:"string",description:"The title of the settings field."},description:{type:"string",description:"The description of the settings field."},children:{type:"node",description:"The content of this block."},className:{type:"string"}};var O=n(2279);const F={},j="Container",D={unversionedId:"components/container",id:"components/container",title:"Container",description:"The Container component is used to group content and elements in a section-like layout.",source:"@site/docs/components/container.mdx",sourceDirName:"components",slug:"/components/container",permalink:"/npm-ui-component-library/docs/components/container",draft:!1,editUrl:"https://github.com/newfold-labs/npm-ui-component-library/docs/docs/components/container.mdx",tags:[],version:"current",frontMatter:{},sidebar:"docsSidebar",previous:{title:"Children Limiter",permalink:"/npm-ui-component-library/docs/components/children-limiter"},next:{title:"Feature Upsell",permalink:"/npm-ui-component-library/docs/components/feature-upsell"}},_={},B=[{value:"Usage",id:"usage",level:3},{value:"Container Props",id:"container-props",level:3},{value:"Sub-components",id:"sub-components",level:2},{value:"Container.Header",id:"containerheader",level:3},{value:"Container.Header Props",id:"containerheader-props",level:3},{value:"Container.Block",id:"containerblock",level:3},{value:"Container.Block Props",id:"containerblock-props",level:3},{value:"Container.SettingsField",id:"containersettingsfield",level:3},{value:"Container.SettingsField Props",id:"containersettingsfield-props",level:3}],M={toc:B},L="wrapper";function Z(e){let{components:t,...n}=e;return(0,o.kt)(L,(0,r.Z)({},M,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"container"},"Container"),(0,o.kt)("p",null,"The ",(0,o.kt)("inlineCode",{parentName:"p"},"Container")," component is used to group content and elements in a section-like layout."),(0,o.kt)("p",null,"The ",(0,o.kt)("inlineCode",{parentName:"p"},"Container")," contains 3 sub-components you can use to help you create WordPress settings\npages layouts faster, ",(0,o.kt)("a",{parentName:"p",href:"#containerheader"},(0,o.kt)("inlineCode",{parentName:"a"},"Container.Header")),", ",(0,o.kt)("a",{parentName:"p",href:"#containerblock"},(0,o.kt)("inlineCode",{parentName:"a"},"Container.Block")),", and ",(0,o.kt)("a",{parentName:"p",href:"#containersettingsfield"},(0,o.kt)("inlineCode",{parentName:"a"},"Container.SettingsField")),"."),(0,o.kt)(l.Z,{mdxType:"NewfoldRoot"},(0,o.kt)(y,{mdxType:"Container"},(0,o.kt)(y.Header,{title:"Settings",description:"This is a description of the settings page."}),(0,o.kt)(y.Block,{separator:!0},(0,o.kt)("div",null,(0,o.kt)(p.ZP,{as:"h4",className:"nfd-mb-2",mdxType:"Title"},"Random Block Content"),(0,o.kt)("p",null,"You can pass any content in here."))),(0,o.kt)(y.Block,null,(0,o.kt)(y.SettingsField,{title:"Performance Settings",description:"Boost speed and performance by storing a copy of your website content, files,and images online so the pages of your website load faster for your visitors."},(0,o.kt)(O.n,{id:"toggle-field-description",label:"Enable Cache",description:"Activate the cache to boost your website speed and performance.",className:"nfd-mb-6",mdxType:"ToggleFieldDemo"}),(0,o.kt)(O.n,{id:"toggle-field-description",label:"Minify Assets",description:"Minify your website assets to reduce the size of your website files.",checked:!0,mdxType:"ToggleFieldDemo"}))))),(0,o.kt)("hr",null),(0,o.kt)("h3",{id:"usage"},"Usage"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-jsx"},'import { Container } from "@newfold/ui-component-library";\n\n\n \n \n
\n Random Block Content\n

\n Container can pass any content in here.\n

\n
\n \n \n \n ...Performance settings fields\n \n \n\n')),(0,o.kt)("hr",null),(0,o.kt)("h3",{id:"container-props"},"Container Props"),(0,o.kt)(i.Z.Table,{docs:w}),(0,o.kt)("hr",null),(0,o.kt)("h2",{id:"sub-components"},"Sub-components"),(0,o.kt)("p",null,"The ",(0,o.kt)("inlineCode",{parentName:"p"},"Container")," component contains 3 sub-components you can use to help you create WordPress settings\npages layouts faster."),(0,o.kt)("h3",{id:"containerheader"},"Container.Header"),(0,o.kt)("p",null,"The ",(0,o.kt)("inlineCode",{parentName:"p"},"Container.Header")," component is used to display a title and description for this instance of the container."),(0,o.kt)(k,{mdxType:"HeaderUsage"}),(0,o.kt)("h3",{id:"containerheader-props"},"Container.Header Props"),(0,o.kt)(i.Z.Table,{docs:x}),(0,o.kt)("hr",null),(0,o.kt)("h3",{id:"containerblock"},"Container.Block"),(0,o.kt)("p",null,"The ",(0,o.kt)("inlineCode",{parentName:"p"},"Container.Block")," component is used to group content and elements together."),(0,o.kt)(C,{mdxType:"BlockUsage"}),(0,o.kt)("h3",{id:"containerblock-props"},"Container.Block Props"),(0,o.kt)(i.Z.Table,{docs:S}),(0,o.kt)("hr",null),(0,o.kt)("h3",{id:"containersettingsfield"},"Container.SettingsField"),(0,o.kt)("p",null,"The ",(0,o.kt)("inlineCode",{parentName:"p"},"Container.SettingsField")," can be used to generate settings layouts."),(0,o.kt)(P,{mdxType:"SettingsFieldUsage"}),(0,o.kt)("h3",{id:"containersettingsfield-props"},"Container.SettingsField Props"),(0,o.kt)(i.Z.Table,{docs:R}))}Z.isMDXComponent=!0},9516:(e,t,n)=>{n.d(t,{d:()=>m,f:()=>p});var r=n(7294),a=n(9946),o=n(2351),i=n(6723),l=n(3784),s=n(3781);let c=(0,r.createContext)(null);function d(){let e=(0,r.useContext)(c);if(null===e){let e=new Error("You used a component, but it is not inside a relevant parent.");throw Error.captureStackTrace&&Error.captureStackTrace(e,d),e}return e}function p(){let[e,t]=(0,r.useState)([]);return[e.length>0?e.join(" "):void 0,(0,r.useMemo)((()=>function(e){let n=(0,s.z)((e=>(t((t=>[...t,e])),()=>t((t=>{let n=t.slice(),r=n.indexOf(e);return-1!==r&&n.splice(r,1),n}))))),a=(0,r.useMemo)((()=>({register:n,slot:e.slot,name:e.name,props:e.props})),[n,e.slot,e.name,e.props]);return r.createElement(c.Provider,{value:a},e.children)}),[t])]}let u=(0,o.yV)((function(e,t){let n=(0,a.M)(),{id:r=`headlessui-description-${n}`,...s}=e,c=d(),p=(0,l.T)(t);(0,i.e)((()=>c.register(r)),[r,c.register]);let u={ref:p,...c.props,id:r};return(0,o.sY)({ourProps:u,theirProps:s,slot:c.slot||{},defaultTag:"p",name:c.name||"Description"})})),m=Object.assign(u,{})},3933:(e,t,n)=>{n.d(t,{r:()=>w});var r=n(7294),a=n(2351),o=n(9946),i=n(1363),l=n(4103),s=n(6723),c=n(3784),d=n(3781);let p=(0,r.createContext)(null);function u(){let e=(0,r.useContext)(p);if(null===e){let e=new Error("You used a