Trousses npm

Apprenez à utiliser les trousses npm pour votre site Web ou votre application.

Trousses

L’utilisation du npm permet à notre équipe de créer, de mettre à jour et de lancer des artefacts avec des numéros de version qui sont les mêmes pour tous les utilisateurs.

Le npm facilite l’installation, la gestion et la mise à niveau des styles, des polices et des composantes du Système de conception pour l’Ontario.

Choisir la bonne trousse pour votre projet

Le Système de conception pour l’Ontario offre quatre trousses regroupant différents éléments du Système de conception :

• des jetons de conception
• des styles globaux
• des styles complets
• une bibliothèque de composantes pour le Web

Jetons de conception

La trousse de jetons de conception comprend tous les jetons de conception représentant les valeurs brutes employées dans l’ensemble du Système de conception, par exemple les couleurs, les polices, ainsi que les éléments et les plans génériques.

Elle constitue la base des trousses npm du Système de conception pour l’Ontario. Elle peut également être utilisée pour accéder aux jetons de conception directement dans les projets si vous ne voulez pas utiliser la trousse de styles globaux.

Styles globaux

La trousse des styles globaux est la trousse de base partagée contenant les styles du Système de conception pour l’Ontario.

Elle renferme les polices et les styles globaux du Système de conception pour l’Ontario et d’autres actifs pour les éléments et les plans génériques, mais ne comprend pas les styles propres à certaines composantes. Elle peut être utilisée pour accéder aux styles de base et fabriquer des composantes supplémentaires.

La plupart des utilisateurs devraient utiliser la trousse des styles complets ou l’une des bibliothèques de composantes pour le Web dans leurs applications pour avoir accès à tous les styles et à tous les actifs disponibles.

Styles complets

La trousse des styles complets est une collection de tous les styles et de tous les actifs du Système de conception pour l’Ontario.

Elle renferme les styles globaux, les polices, les logos et les icônes du Système de conception pour l’Ontario, ainsi que les styles propres aux composantes.

Si vous souhaitez mettre à niveaux les trousses npm à partir de la trousse de distribution, commencez par la trousse des styles complets. Cette trousse vous fournira les polices, les actifs et les styles à utiliser avec les composantes HTML existantes de la trousse de distribution.

Bibliothèques de composantes pour le Web

Les web component libraries contiennent les composantes pour le Web du Système de conception pour l’Ontario. Chacune d’entre elles vise une structure JavaScript différente, et comprend les composantes HTML, React et Angular ordinaires.

Trousses de bibliothèque de composantes disponibles :

• Bibliothèque de composantes pour le Web
  • Utilisez cette trousse si vous travaillez avec du langage HTML ordinaire ou tout outil ou structure qui n’utilise pas React ou Angular. Elle contient les versions de composantes Web préfabriquées des composantes de notre système de conception.
• Bibliothèque des composantes pour React
  • Utilisez cette trousse si vous travaillez avec React pour créer votre application, y compris avec des chaînes d’outils comme Gatsby ou NextJS.
• Bibliothèque de composantes pour Angular
  • Utilisez cette trousse si vous travaillez avec Angular pour créer votre application.