feedback-skeleton-skeleton-stories-mdx.696547e7.iframe.bundle.js

"use strict";(self.webpackChunk_freud_ds_web=self.webpackChunk_freud_ds_web||[]).push([[7392],{"./stories/feedback/skeleton/skeleton.stories.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{_BGColor_:()=>_BGColor_,_Default_:()=>_Default_,__namedExportsOrder:()=>skeleton_stories_namedExportsOrder,default:()=>skeleton_stories});__webpack_require__("./node_modules/react/index.js");var lib=__webpack_require__("./node_modules/@storybook/addon-docs/node_modules/@mdx-js/react/lib/index.js"),dist=__webpack_require__("./node_modules/@storybook/addon-docs/dist/index.mjs"),angular_dist=__webpack_require__("./node_modules/@storybook/angular/dist/index.mjs"),public_api=__webpack_require__("./projects/web-components/src/public-api.ts"),header_component=__webpack_require__("./stories/header/header.component.tsx"),animations=__webpack_require__("./node_modules/@angular/platform-browser/fesm2022/animations.mjs"),core=__webpack_require__("./node_modules/@angular/core/fesm2022/core.mjs");const Template=args=>({props:{...args},template:'\n  <div style="width: 350px">\n      <freud-skeleton\n        [width]="\'100%\'"\n        [height]="\'15px\'"\n        [bgColor]="bgColor">\n      </freud-skeleton>\n      <br>\n      <freud-skeleton\n        [width]="\'100%\'"\n        [height]="\'15px\'"\n        [bgColor]="bgColor">\n      </freud-skeleton>\n      <br>\n      <freud-skeleton\n        [width]="\'350px\'"\n        [height]="\'70px\'"\n        [bgColor]="bgColor">\n      </freud-skeleton>\n      <br>\n      <div style="display: flex">\n        <freud-skeleton style="margin-right: 10px"\n          [width]="\'170px\'"\n          [height]="\'70px\'"\n          [bgColor]="bgColor">\n        </freud-skeleton>\n        <freud-skeleton\n          [width]="\'170px\'"\n          [height]="\'70px\'"\n          [bgColor]="bgColor">\n        </freud-skeleton>\n      </div>\n  </div>\n  '}),Default=Template.bind({});Default.args={bgColor:!1};const BGColor=Template.bind({});BGColor.args={bgColor:!0};(0,angular_dist.applicationConfig)({providers:[(0,core.importProvidersFrom)(animations.BrowserAnimationsModule)]});var jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");function _createMdxContent(props){const _components=Object.assign({h2:"h2",pre:"pre",code:"code",h3:"h3"},(0,lib.ah)(),props.components);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(dist.h_,{decorators:[(0,angular_dist.moduleMetadata)({imports:[public_api.Kn]})],parameters:{layout:"centered",viewMode:"docs",previewTabs:{canvas:{hidden:!0}},backgrounds:{default:"Default",values:[{name:"Default",value:"#FFFFFF"},{name:"BgColor",value:"#6732D1"}]}},title:"@freud-ds/web-components/Feedback/Skeleton",component:public_api.ml}),"\n",(0,jsx_runtime.jsx)(header_component.z,{title:"Skeleton",description:"Exibe uma visualização do espaço reservado de seu conteúdo antes que os dados sejam carregados, reduzindo a sensação de lentidão do tempo de carregamento."}),"\n",(0,jsx_runtime.jsxs)(_components.h2,{id:"import",children:[(0,jsx_runtime.jsx)("a",{id:"importing"}),"Import"]}),"\n",(0,jsx_runtime.jsx)(_components.pre,{children:(0,jsx_runtime.jsx)(_components.code,{className:"language-ts",children:"import { FreudSkeletonComponent } from '@freud-ds/web-components';\n"})}),"\n",(0,jsx_runtime.jsxs)(_components.h2,{id:"exemplos",children:[(0,jsx_runtime.jsx)("a",{id:"exemplos"}),"Exemplos"]}),"\n",(0,jsx_runtime.jsx)("br",{}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"default",children:"Default"}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{children:(0,jsx_runtime.jsx)(dist.oG,{story:Default})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"bg-color",children:"BG Color"}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{style:{backgroundColor:"#241249"},children:(0,jsx_runtime.jsx)(dist.oG,{story:BGColor})}),"\n",(0,jsx_runtime.jsxs)(_components.h2,{id:"api",children:[(0,jsx_runtime.jsx)("a",{id:"api"}),"API"]}),"\n",(0,jsx_runtime.jsx)(dist.Ed,{of:public_api.ml})]})}const _Default_=Default,_BGColor_=BGColor,componentMeta={title:"@freud-ds/web-components/Feedback/Skeleton",parameters:{layout:"centered",viewMode:"docs",previewTabs:{canvas:{hidden:!0}},backgrounds:{default:"Default",values:[{name:"Default",value:"#FFFFFF"},{name:"BgColor",value:"#6732D1"}]}},decorators:[(0,angular_dist.moduleMetadata)({imports:[public_api.Kn]})],component:public_api.ml,tags:["stories-mdx"],includeStories:["_Default_","_BGColor_"]};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:function MDXContent(props={}){const{wrapper:MDXLayout}=Object.assign({},(0,lib.ah)(),props.components);return MDXLayout?(0,jsx_runtime.jsx)(MDXLayout,{...props,children:(0,jsx_runtime.jsx)(_createMdxContent,{...props})}):_createMdxContent(props)}};const skeleton_stories=componentMeta,skeleton_stories_namedExportsOrder=["_Default_","_BGColor_"]}}]);