Pattern Library

Per la gestione della pattern library (e più in generale per la raccolta della documentazione dell’intero Design System) utilizziamo Fractal.

Su Bitbucket è disponibile un boilerplate Tangible che comprende un’installazione di Fractal 1.0 e il collegamento al tema di Fractal personalizzato Tangible.

In Fractal come linguaggio di templating utilizziamo Handlebars.

Spesso potrebbe bastare rimuovere la cartella `node_modules` e reinstallare con `npm-install`

Come istanziare un componente nel config.json

Nel file json:

"context": {
     "items": [
         {
             "componentName": "\\@my-component"
         }
     ]
 }

Nel file .hbs

{{#each items}}
    {{render componentName }}
{{/each}}

Come istanziare un componente tramite @partial-block

Nel file .hbs del “componente principale”

<div class=“c-main-component”>
    {{#> @partial-block }}
        <h1>Bla bla bla</h1>
        <h2>Lorem ipsum</h2>
        <p>Here goes some text</p>
    {{/ @partial-block }}
</div>

Nella pagina/componente che chiamerà il “componente principale”

{{#> @componentName foo }}
    <h1>Title</h1>
    <h2>Subtitle</h2>
    <p>This is the description</p>
{{/@componentName}}

Questo approccio risulta molto utile in casi in cui si voglia poter scrivere all’interno di un componente qualsiasi tipo di contenuto preservando la modularità di esso.

Per capire a pieno il concetto, si noti l’esempio di “componente principale” qui e la sua applicazione in pagina qui.

Scritto da lucasalvini 02/05/2018 - 10:03

---

Modificato da ila 08/11/2019 - 10:39