@jumpgroup/jump-design-system NPM

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}"

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!