icons-icon-class-icons-stories-mdx.243bb54a.iframe.bundle.js

"use strict";(self.webpackChunk_freud_ds_web=self.webpackChunk_freud_ds_web||[]).push([[73],{"./stories/icons/icon-class/icons.stories.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{_AllIcons_:()=>_AllIcons_,_Default_i_:()=>_Default_i_,_Default_span_:()=>_Default_span_,_Small_i_:()=>_Small_i_,_Small_span_:()=>_Small_span_,__namedExportsOrder:()=>icons_stories_namedExportsOrder,default:()=>icons_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"),header_component=__webpack_require__("./stories/header/header.component.tsx"),public_api=__webpack_require__("./projects/web-components/src/public-api.ts"),all_icons_component=__webpack_require__("./stories/icons/all-icons/all-icons.component.ts");(0,angular_dist.moduleMetadata)({declarations:[all_icons_component.x]});const AllIcons=()=>({template:'\n      <all-icons copyMode="class"></all-icons>\n     '}),Default_i=()=>({template:'\n      <i class="freud-icon freud-icon-verificated"></i>\n     '}),Small_i=()=>({template:'\n      <i class="freud-icon freud-icon-verificated freud-icon-small"></i>\n     '}),Default_span=()=>({template:'\n      <span class="freud-icon freud-icon-verificated"></span>\n     '}),Small_span=()=>({template:'\n      <span class="freud-icon freud-icon-verificated freud-icon-small"></span>\n     '});var all_icons_module=__webpack_require__("./stories/icons/all-icons/all-icons.module.ts"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js");function _createMdxContent(props){const _components=Object.assign({h2:"h2",h3:"h3",p:"p",h4:"h4",code:"code",pre:"pre",strong:"strong"},(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.Jm,public_api.My,public_api.Jw,all_icons_module.b]})],argTypes:{},parameters:{layout:"centered",backgrounds:{default:"Default",values:[{name:"Default",value:"#FFFFFF"},{name:"BgColor",value:"#6732D1"}]}},title:"@freud-ds/web-components/Icons/Ícone como classe CSS",component:AllIcons}),"\n",(0,jsx_runtime.jsx)(header_component.z,{title:"Icon",description:"Utilizando classe CSS para exibir ícones na tela."}),"\n",(0,jsx_runtime.jsxs)(_components.h2,{id:"import",children:[(0,jsx_runtime.jsx)("a",{id:"importing"}),"Import"]}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"estilo",children:"Estilo"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Importe o arquivo de estilo dos ícones:"}),"\n",(0,jsx_runtime.jsx)(_components.h4,{id:"css-global",children:"CSS Global"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["O arquivo de estilo dos ícones será importado globalmente, ou seja, em toda a aplicação. Para isso, coloque esse código\nno seu arquivo ",(0,jsx_runtime.jsx)(_components.code,{children:".css"})," global:"]}),"\n",(0,jsx_runtime.jsx)(_components.pre,{children:(0,jsx_runtime.jsx)(_components.code,{className:"language-css",children:"@import '@freud-ds/icons/style/style.css';\n"})}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"icon",children:"Icon"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["Para utilizar o componente, basta utilizar a tag ",(0,jsx_runtime.jsx)(_components.code,{children:"<i>"})," ou ",(0,jsx_runtime.jsx)(_components.code,{children:"<span>"})," passando a classe com o nome do ícone (",(0,jsx_runtime.jsx)(_components.code,{children:"freud-icon freud-icon-[icon-name]"}),")\ncomo parâmetro."]}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"exemplo",children:"Exemplo"}),"\n",(0,jsx_runtime.jsxs)(_components.h4,{id:"utilizando-a-tag-i",children:["Utilizando a tag ",(0,jsx_runtime.jsx)(_components.code,{children:"<i>"})]}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{sourceState:dist.sK.OPEN,children:(0,jsx_runtime.jsx)(dist.oG,{story:Default_i})}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{sourceState:dist.sK.OPEN,children:(0,jsx_runtime.jsx)(dist.oG,{story:Small_i})}),"\n",(0,jsx_runtime.jsxs)(_components.h4,{id:"utilizando-a-tag-span",children:["Utilizando a tag ",(0,jsx_runtime.jsx)(_components.code,{children:"<span>"})]}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{sourceState:dist.sK.OPEN,children:(0,jsx_runtime.jsx)(dist.oG,{story:Default_span})}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{sourceState:dist.sK.OPEN,children:(0,jsx_runtime.jsx)(dist.oG,{story:Small_span})}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"lista-de-ícones-disponíveis",children:"Lista de ícones disponíveis"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["Essa é a lista com todos os ícones disponíveis no Freud DS. Selecione um ícone e o parâmetro ",(0,jsx_runtime.jsx)(_components.code,{children:"class"})," será copiado para o seu clipboard."]}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:(0,jsx_runtime.jsx)(_components.strong,{children:"Clique no ícone, ele será enviado para sua área de transferência."})}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{sourceState:dist.sK.NONE,children:(0,jsx_runtime.jsx)(dist.oG,{story:AllIcons})})]})}const _Default_i_=Default_i,_Small_i_=Small_i,_Default_span_=Default_span,_Small_span_=Small_span,_AllIcons_=AllIcons,componentMeta={title:"@freud-ds/web-components/Icons/Ícone como classe CSS",parameters:{layout:"centered",backgrounds:{default:"Default",values:[{name:"Default",value:"#FFFFFF"},{name:"BgColor",value:"#6732D1"}]}},decorators:[(0,angular_dist.moduleMetadata)({imports:[public_api.Jm,public_api.My,public_api.Jw,all_icons_module.b]})],component:AllIcons,argTypes:{},tags:["stories-mdx"],includeStories:["_Default_i_","_Small_i_","_Default_span_","_Small_span_","_AllIcons_"]};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 icons_stories=componentMeta,icons_stories_namedExportsOrder=["_Default_i_","_Small_i_","_Default_span_","_Small_span_","_AllIcons_"]}}]);