icons-icon-component-icon-stories-mdx.4a45bdbb.iframe.bundle.js

"use strict";(self.webpackChunk_freud_ds_web=self.webpackChunk_freud_ds_web||[]).push([[4685],{"./stories/icons/icon-component/icon.stories.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{_AllIcons_:()=>_AllIcons_,_IconLG_:()=>_IconLG_,_IconMD_:()=>_IconMD_,_IconSM_:()=>_IconSM_,_IconTest_:()=>_IconTest_,_IconXL_:()=>_IconXL_,_IconXXL_:()=>_IconXXL_,__namedExportsOrder:()=>icon_stories_namedExportsOrder,default:()=>icon_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"),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="component"></all-icons>\n     '}),IconSM=()=>({template:'<freud-icon icon="award" size="sm"></freud-icon>'}),IconMD=()=>({template:'<freud-icon icon="award"></freud-icon>'}),IconLG=()=>({template:'<freud-icon icon="award" size="lg"></freud-icon>'}),IconXL=()=>({template:'<freud-icon icon="award" size="xl"></freud-icon>'}),IconXXL=()=>({template:'<freud-icon icon="award" size="xxl"></freud-icon>'}),IconTest=(args=>({props:{...args},template:'<freud-icon [icon]="icon" [size]="size"></freud-icon>'})).bind({});IconTest.args={icon:"award"};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",pre:"pre",code:"code",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:{size:{control:{type:"select",options:[...public_api.Z_]}}},parameters:{layout:"centered",backgrounds:{default:"Default",values:[{name:"Default",value:"#FFFFFF"},{name:"BgColor",value:"#6732D1"}]}},title:"@freud-ds/web-components/Icons/Ícone como componente",component:public_api.Bj}),"\n",(0,jsx_runtime.jsx)(header_component.z,{title:"Freud Icon",description:"Componente próprio do Freud DS, utilizado para exibir ícones na tela."}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"pré-requisitos",children:"Pré-requisitos"}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"libs",children:"Libs"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"É necessário instalar algumas libs do Freud DS para utilizar este componente. Para instalar, rode os comandos abaixo\nno terminal do seu projeto:"}),"\n",(0,jsx_runtime.jsx)(_components.h4,{id:"web-components",children:"Web Components"}),"\n",(0,jsx_runtime.jsx)(_components.pre,{children:(0,jsx_runtime.jsx)(_components.code,{className:"language-bash",children:"npm i @freud-ds/web-components\n"})}),"\n",(0,jsx_runtime.jsx)(_components.h4,{id:"icons",children:"Icons"}),"\n",(0,jsx_runtime.jsx)(_components.pre,{children:(0,jsx_runtime.jsx)(_components.code,{className:"language-bash",children:"npm i @freud-ds/icons\n"})}),"\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:"módulo",children:"Módulo"}),"\n",(0,jsx_runtime.jsx)(_components.p,{children:"Importe o FreudIconModule em cada módulo que for utilizar o FreudIconComponent. Utilizando o código:"}),"\n",(0,jsx_runtime.jsx)(_components.pre,{children:(0,jsx_runtime.jsx)(_components.code,{className:"language-ts",children:"import { FreudIconModule } from '@freud-ds/web-components';\n\n@NgModule({\n  imports: [\n    FreudIconModule\n    //e outros imports...\n  ]\n})\n"})}),"\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. Há duas formas de fazer isso:"}),"\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.h4,{id:"arquivo-json",children:"Arquivo JSON"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["O arquivo de estilo dos ícones será colocado no arquivo ",(0,jsx_runtime.jsx)(_components.code,{children:"angular.json"})," do seu projeto. Para isso, coloque o arquivo ",(0,jsx_runtime.jsx)(_components.code,{children:".css"}),"\nna lista de ",(0,jsx_runtime.jsx)(_components.code,{children:"styles []"})," do arquivo ",(0,jsx_runtime.jsx)(_components.code,{children:"angular.json"})," do seu projeto, como no exemplo abaixo:"]}),"\n",(0,jsx_runtime.jsx)(_components.pre,{children:(0,jsx_runtime.jsx)(_components.code,{className:"language-json",children:'{\n  // ...\n  "architect": {\n    "build": {\n      "options": {\n        "styles": [\n          // ...\n          "node_modules/@freud-ds/icons/style/style.css"\n        ]\n      }\n    }\n  }\n}\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:"<freud-icon>"}),"passando o nome do ícone (e, caso seja necessário, o tamanho)\ncomo parâmetro."]}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"teste-os-ícones",children:"Teste os ícones"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["Clique em ",(0,jsx_runtime.jsx)(_components.code,{children:"Icon Test"})," (na lista de componentes no canto esquerdo) e depois em ",(0,jsx_runtime.jsx)(_components.code,{children:"Canvas"})," (no canto superior esquerdo dessa página)\npara ter acesso a área de testes, onde você pode colocar os ícones da lista para ver sua exibição e tamanho."]}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{sourceState:dist.sK.NONE,children:(0,jsx_runtime.jsx)(dist.oG,{story:IconTest})}),"\n",(0,jsx_runtime.jsx)(_components.h3,{id:"exemplo",children:"Exemplo"}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{sourceState:dist.sK.OPEN,children:(0,jsx_runtime.jsx)(dist.oG,{story:IconSM})}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{sourceState:dist.sK.OPEN,children:(0,jsx_runtime.jsx)(dist.oG,{story:IconMD})}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{sourceState:dist.sK.OPEN,children:(0,jsx_runtime.jsx)(dist.oG,{story:IconLG})}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{sourceState:dist.sK.OPEN,children:(0,jsx_runtime.jsx)(dist.oG,{story:IconXL})}),"\n",(0,jsx_runtime.jsx)(dist.Xz,{sourceState:dist.sK.OPEN,children:(0,jsx_runtime.jsx)(dist.oG,{story:IconXXL})}),"\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 código para utilizar o componente ",(0,jsx_runtime.jsx)(_components.code,{children:"freud-icon"})," 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})}),"\n",(0,jsx_runtime.jsx)(_components.h2,{id:"api",children:"API"}),"\n",(0,jsx_runtime.jsx)(dist.Ed,{of:public_api.Bj})]})}const _IconTest_=IconTest,_IconSM_=IconSM,_IconMD_=IconMD,_IconLG_=IconLG,_IconXL_=IconXL,_IconXXL_=IconXXL,_AllIcons_=AllIcons,componentMeta={title:"@freud-ds/web-components/Icons/Ícone como componente",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:public_api.Bj,argTypes:{size:{control:{type:"select",options:[...public_api.Z_]}}},tags:["stories-mdx"],includeStories:["_IconTest_","_IconSM_","_IconMD_","_IconLG_","_IconXL_","_IconXXL_","_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 icon_stories=componentMeta,icon_stories_namedExportsOrder=["_IconTest_","_IconSM_","_IconMD_","_IconLG_","_IconXL_","_IconXXL_","_AllIcons_"]}}]);