npm package: @jumpgroup/jump-design-system
Description: Stencil Component Starter
Author: Jumpgroup Srl
Latest version: 1.0.25

[![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)](https://stenciljs.com)

# 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:

```bash
yarn storybook:start
yarn stencil:watch
``` 
Pushing to MASTER deploys the changes to [Jump Design System](https://designsystem.jumpgroup.it/) updating the Storybook.

To update the npm repository in order to use the latest Design System version on your project, do the following steps:
- Update **"version"** on **package.json**
- **Create and push a tag** that match the version on the package.json

### 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

Per utilizzare nel progetto il DS includi il seguente script
`<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/]