"use strict";(self.webpackChunkangular_storybook_project=self.webpackChunkangular_storybook_project||[]).push([[9565],{"./src/stories/Icons.mdx"(__unused_webpack_module,__webpack_exports__,__webpack_require__){__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{default:()=>MDXContent});var react=__webpack_require__("./node_modules/react/index.js"),jsx_runtime=__webpack_require__("./node_modules/react/jsx-runtime.js"),lib=__webpack_require__("./node_modules/@mdx-js/react/lib/index.js"),dist=__webpack_require__("./node_modules/@storybook/blocks/dist/index.mjs");const ShowIcons={trash:{class:"i-trash icon",functionality:"Rimuovi elemento"},pencil:{class:"i-pencil icon",functionality:"Modifica elemento"},question:{class:"i-question-circle icon",functionality:"Visualizza informazioni"},eye:{class:"i-eye icon",functionality:"Visualizza nel dettaglio l'elemento"},chevronDown:{class:"i-chevron-down icon",functionality:"Espandi/Riduci la riga"},plus:{class:"i-plus icon",functionality:"Aggiungi elementi"},plusCircle:{class:"i-plus-circle icon",functionality:"Espandi elemento"},download:{class:"i-download icon",functionality:"Scarica elemento"},triangle:{class:"i-exclamation-triangle icon",functionality:"Attenzione (warning). Il conflitto/errore è visualizzabile tramite tooltip al click sull'icona"},euro:{class:"i-eur icon",functionality:"Visualizza pagamenti"},fileText:{class:"i-file-text-o icon",functionality:"Visualizza provvedimenti"},filePdf:{class:"i-file-pdf-o icon",functionality:"Scarica .PDF"},fileDoc:{class:"i-file-word-o icon",functionality:"Scarica .DOC"},fileExcel:{class:"i-file-excel-o icon",functionality:"Scarica .XLS"},filePowerpoint:{class:"i-file-powerpoint-o icon",functionality:"Scarica .PPT"},star:{class:"i-star icon",functionality:"Aggiungi/rimuovi dai preferiti. Selezionabile e deselezionabile come una checkbox"},paperclip:{class:"i-paperclip icon",functionality:"Presenza di allegati"}},graphicStyles_Icons=()=>react.createElement(dist.yt,null,Object.entries(ShowIcons).map((element,index)=>react.createElement(dist.xz,{name:element[1].class},react.createElement("i",{className:element[1].class,title:element[1].functionality}))));function _createMdxContent(props){const _components={code:"code",h1:"h1",p:"p",...(0,lib.R)(),...props.components};return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(dist.W8,{title:"Foundation/Icons"}),"\n",(0,jsx_runtime.jsx)(_components.h1,{id:"icone",children:"Icone"}),"\n",(0,jsx_runtime.jsxs)(_components.p,{children:["Gli elementi iconici esprimono funzionalità e collegamenti che potrebbero richiedere un supporto testuale. Le icone scelte sono progettate ",(0,jsx_runtime.jsx)("br",{})," per\navere un family look tra loro in modo da aumentarne l'unità visiva. La coerenza iconografica è possibile grazie a ",(0,jsx_runtime.jsx)("a",{href:"http://fontawesome.io/",target:"_blank",children:"FontAwesome"}),": uno ",(0,jsx_runtime.jsx)("br",{})," speciale tipo di\nfont composto esclusivamente da icone vettoriali, accessibili e customizzabili tramite CSS. Questo set di icone è molto ricco e ",(0,jsx_runtime.jsx)("br",{}),"per utilizzarlo è necessario aggiungere all'elemento ",(0,jsx_runtime.jsx)(_components.code,{children:"<span></span>"})," l'attributo\n",(0,jsx_runtime.jsx)(_components.code,{children:'class="fa"'})," e la classe identificativa dell'icona stessa.",(0,jsx_runtime.jsx)("br",{})," Esempio: ",(0,jsx_runtime.jsx)(_components.code,{children:'<span class="fa fa-pencil"></span>'})," mostrerà l'icona di una matita."]}),"\n",(0,jsx_runtime.jsx)("br",{}),"\n",(0,jsx_runtime.jsx)(_components.h1,{id:"icone-più-utilizzate",children:"Icone più utilizzate"}),"\n",(0,jsx_runtime.jsx)(graphicStyles_Icons,{})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={...(0,lib.R)(),...props.components};return MDXLayout?(0,jsx_runtime.jsx)(MDXLayout,{...props,children:(0,jsx_runtime.jsx)(_createMdxContent,{...props})}):_createMdxContent(props)}}}]);