Jump Group Design System

To start the project

Remember: before start set .env file from env.example!

To start the Stencil + Storybook project, run the following commands in two separate terminals in this order:

yarn storybook:start
yarn stencil:watch

Pushing to MASTER deploys the changes to Jump Design System If you want to propagate the modifications to the npm repository in order to install the design system components on a project, it is necessary to tag the npm repository by incrementing the version, while adhering to versioning rules.

Effettuando un push su master viene automaticamente deployato lo storybook con le modifiche.

Caricare gli stili

Per visualizzare il design system con i colori correttamente configurati, seguire i passaggi:

• Da storybook andare alla voce (nella barra sx) "Introduction".
• Nella schermata "Design system attivi" ci sono tutte le configurazioni di colori disponibili. Scegliere quello di interesse e cliccare sul link presente alla colonna "Url" della tabella.
• Copiare nell'url appena aperto il percorso a partire da ?path= e incollarlo nell'url del locale. es: http://localhost/?path=/docs/tokens-colori--documentation&figma-board=rdyLtvCq162n61XTXFAmWe Se non si vedono correttamente gli stili, controllare la sezione Troubleshooting.

Naming Components

When creating new component tags, use jump as component name prefix (ex: <jump-button>)

Notes about component stories

When passing a @Prop() to the component within nomecomponente.stories.ts, it is necessary to do so using the notation with -. So, if the prop inside nomecomponente.tsx is currentPage, in the story, it should be passed as follows: current-page="${args.currentPage}"

Info utili sulle storie

Associare un default nella tabella degli argomenti

Per associare un default nella tabella degli argomenti associata alla storia, inserire all'interno della Prop, il seguente codice

table: {
    type: { summary: 'string' },
    defaultValue: { summary: 'inline' },
},

Es:

argTypes: {
        ….
        variant: {
            name: 'variant',
            control: 'select',
            options: ['inline', 'boxed', 'sheet', 'rounded'],
            description: 'Stile del tab e di tutti i suoi item',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: 'inline' },
            },
        },
….
}

La riga type fa apparire la tipologia di variabile sotto la colonna della descrizione. La riga defaultValue popola la colonna Default.

Using this component

Script tag

unpkg

• This tag <script type='module' src='https://unpkg.com/@jumpgroup/jump-design-system/dist/jump-design-system/jump-design-system.esm.js'></script> in the head of your index.html.
• To include also the style, add <style src='https://unpkg.com/@jumpgroup/jump-design-system/dist/jump-design-system/jump-design-system.css'></style>in the head of your index.html.
• Then you can use the element anywhere in your template, JSX, html etc

jsdeliver

• Includi i seguenti tag <script type='module' src='https://cdn.jsdelivr.net/npm/@jumpgroup/jump-design-system/dist/jump-design-system/jump-design-system.esm.js'></script>

Node Modules

• Run npm install my-component --save
• Put a script tag similar to this <script type='module' src='node_modules/my-component/dist/my-component.esm.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Troubleshooting

Non si vedono gli stili

Se in locale non si vedono gli stili una volta configurato l'url con il path corretto, potrebbero esserci diversi problemi:

1. L'api di figma impostata nel file env alla voce FIGMA_API_KEY non è corretta. Ad oggi chiedere a Fabio di verificare la chiave. Una volta inserita nel file env, rilanciare i comandi di start del progetto e andare nel local storage del browser e cancellare figmaBoard e figmaBoardList. Infinite rifare la procedura indicata in Caricare gli stili. Eliminare la cache!

Link utili

• [Storybook repository](https://designsystem.jumpgroup.it/]