-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathelements-skeleton-loader-stories.2a0cecde.iframe.bundle.js
2 lines (2 loc) · 10 KB
/
elements-skeleton-loader-stories.2a0cecde.iframe.bundle.js
1
2
/*! For license information please see elements-skeleton-loader-stories.2a0cecde.iframe.bundle.js.LICENSE.txt */
(globalThis.webpackChunk_yoast_ui_library=globalThis.webpackChunk_yoast_ui_library||[]).push([[8880],{"../../node_modules/@storybook/addon-docs/dist/index.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{H2:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.H2,Hl:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.Hl,Pd:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.Pd,Tn:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.Tn,VY:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.VY,W8:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.W8,fy:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.fy,gG:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.gG,hE:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.hE,oz:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.oz});__webpack_require__("../../node_modules/@storybook/addon-docs/dist/chunk-HLWAVYOI.mjs");var _storybook_blocks__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/@storybook/blocks/dist/index.mjs")},"./.storybook/interactive-docs-page.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{f:()=>InteractiveDocsPage});var _storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/index.mjs"),prop_types__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/prop-types/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_3___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_3__),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=(__webpack_require__("../../node_modules/react/index.js"),__webpack_require__("../../node_modules/react/jsx-runtime.js"));const InteractiveDocsPage=({stories})=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.hE,{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.Pd,{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.VY,{of:"meta"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.VY,{of:"story"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.Tn,{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.H2,{}),stories.map(((story,index)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.fy,{of:story},(null==story?void 0:story.name)||`story-${index}`)))]});InteractiveDocsPage.propTypes={stories:prop_types__WEBPACK_IMPORTED_MODULE_3___default().arrayOf(prop_types__WEBPACK_IMPORTED_MODULE_3___default().oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_3___default().object,prop_types__WEBPACK_IMPORTED_MODULE_3___default().func]))},InteractiveDocsPage.defaultProps={stories:[]},InteractiveDocsPage.__docgenInfo={description:"An alternative version of the Storybook DocsPage component.\n\nReplacing the Stories component with individual DocsStory components.\nThis prevents Stories from passing `__forceInitialArgs` to the DocsStory components.\nWhich makes the stories are interactive on the docs page, making the `args` more like initial values.\n\n@param {(Object|function)[]} [stories] The stories to display.\n@returns {JSX.Element} The DocsPage component without stories.",methods:[],displayName:"InteractiveDocsPage",props:{stories:{defaultValue:{value:"[]",computed:!1},description:"",type:{name:"arrayOf",value:{name:"union",value:[{name:"object"},{name:"func"}]}},required:!1}}}},"./src/elements/skeleton-loader/stories.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Circular:()=>Circular,Color:()=>Color,Factory:()=>Factory,FontSize:()=>FontSize,Profile:()=>Profile,Size:()=>Size,default:()=>stories});__webpack_require__("../../node_modules/react/index.js");var classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),prop_types=__webpack_require__("./node_modules/prop-types/index.js"),prop_types_default=__webpack_require__.n(prop_types),jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js");const SkeletonLoader=({as:Component,className,children})=>(0,jsx_runtime.jsx)(Component,{className:classnames_default()("yst-skeleton-loader",className),children:children&&(0,jsx_runtime.jsx)("div",{className:"yst-pointer-events-none yst-invisible",children})});SkeletonLoader.displayName="SkeletonLoader",SkeletonLoader.propTypes={as:prop_types_default().elementType,className:prop_types_default().string,children:prop_types_default().node},SkeletonLoader.defaultProps={as:"span",className:"",children:null};const skeleton_loader=SkeletonLoader;SkeletonLoader.__docgenInfo={description:"@param {string|JSX.Element} [as] Base component.\n@param {string} [className] Extra class.\n@param {JSX.node} [children] Content to determine the size.\n@returns {JSX.Element} The element.",methods:[],displayName:"SkeletonLoader",props:{as:{defaultValue:{value:'"span"',computed:!1},description:"",type:{name:"elementType"},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},children:{defaultValue:{value:"null",computed:!1},description:"",type:{name:"node"},required:!1}}};var interactive_docs_page=__webpack_require__("./.storybook/interactive-docs-page.js");const Factory={parameters:{controls:{disable:!1}},args:{children:"Some content to determine the size"}},Profile={render:args=>(0,jsx_runtime.jsx)("div",{className:"yst-w-full yst-max-w-sm yst-p-4 yst-border yst-bg-white yst-rounded-md yst-shadow",children:(0,jsx_runtime.jsxs)("div",{className:"yst-flex yst-space-x-4 rtl:yst-space-x-reverse",children:[(0,jsx_runtime.jsx)(skeleton_loader,{className:"yst-h-10 yst-w-10 yst-rounded-full"}),(0,jsx_runtime.jsxs)("div",{className:"yst-flex-1 yst-space-y-6 yst-py-1",children:[(0,jsx_runtime.jsx)(skeleton_loader,{className:"yst-h-3 yst-w-full"}),(0,jsx_runtime.jsxs)("div",{className:"yst-space-y-3",children:[(0,jsx_runtime.jsxs)("div",{className:"yst-grid yst-grid-cols-3 yst-gap-4",children:[(0,jsx_runtime.jsx)(skeleton_loader,{className:"yst-h-3 yst-w-full yst-col-span-2"}),(0,jsx_runtime.jsx)(skeleton_loader,{className:"yst-h-3 yst-w-full yst-col-span-1"})]}),(0,jsx_runtime.jsx)(skeleton_loader,{className:"yst-h-3 yst-w-full"})]})]})]})}),parameters:{controls:{disable:!0},docs:{description:{story:"You need to create your own layout for more complicated structures.\n"}}}},Circular={parameters:{controls:{disable:!1},docs:{description:{story:"By specifying a className that changes the border radius. Be sure to have the width and height the same, or it is not much of a circle.\n"}}},args:{className:"yst-h-10 yst-w-10 yst-rounded-full"}},Size={parameters:{controls:{disable:!1},docs:{description:{story:"By specifying a className that changes the width and/or height.\n"}}},args:{className:"yst-h-8 yst-w-96"}},Color={parameters:{controls:{disable:!1},docs:{description:{story:"By specifying a className that changes the background color. Be sure the color is light enough for the effect.\n"}}},args:{className:"yst-bg-blue-200",children:"Some content"}},FontSize={name:"Font size",parameters:{controls:{disable:!1},docs:{description:{story:"By specifying a className that changes the font size. Be sure to include some text in the children too.\n"}}},args:{className:"yst-text-3xl",children:"Some other content"}},stories={title:"1) Elements/Skeleton loader",component:skeleton_loader,argTypes:{children:{control:"text"},as:{control:{type:"select"},options:["span","div"]}},parameters:{docs:{description:{component:"Skeleton loaders are designed to enhance user experience and minimize perceived loading times. They serve as a placeholder animation that replicates the structure of actual content while data is being fetched. It's an effective visual cue that reassures users that their interaction is acknowledged, even during loading processes. Whether utilized in lists, cards, or any other dynamic content, the skeleton loader maintains engagement by preventing a blank screen and conveying a sense of responsiveness. Skeleton loaders create a smoother and more polished experience for users, reducing frustration and maintaining user satisfaction while data is loading.\n"},page:()=>(0,jsx_runtime.jsx)(interactive_docs_page.f,{stories:[Profile,Circular,Size,Color,FontSize]})}}}},"../../node_modules/memoizerific sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="../../node_modules/memoizerific sync recursive",module.exports=webpackEmptyContext},"./node_modules/classnames/index.js":(module,exports)=>{var __WEBPACK_AMD_DEFINE_RESULT__;!function(){"use strict";var hasOwn={}.hasOwnProperty;function classNames(){for(var classes=[],i=0;i<arguments.length;i++){var arg=arguments[i];if(arg){var argType=typeof arg;if("string"===argType||"number"===argType)classes.push(arg);else if(Array.isArray(arg)){if(arg.length){var inner=classNames.apply(null,arg);inner&&classes.push(inner)}}else if("object"===argType){if(arg.toString!==Object.prototype.toString&&!arg.toString.toString().includes("[native code]")){classes.push(arg.toString());continue}for(var key in arg)hasOwn.call(arg,key)&&arg[key]&&classes.push(key)}}}return classes.join(" ")}module.exports?(classNames.default=classNames,module.exports=classNames):void 0===(__WEBPACK_AMD_DEFINE_RESULT__=function(){return classNames}.apply(exports,[]))||(module.exports=__WEBPACK_AMD_DEFINE_RESULT__)}()}}]);