qc-trousse-sdg 1.3.0-develop.7 → 1.3.0

package/README.md

@@ -183,9 +183,9 @@ L’attribut `full-width` a été ajouté.
 
 ### Thème sombre
 
-Les couleurs de la trousse s'adaptent en cas de choix du thème sombre.
-- un commutateur dans la documentation incluse permet de basculer dans le thème sombre.
-- en cas de thème sombre, la classe `qc-dark-theme` est ajouté à l'élément html (cf `src/sdg/_dark-theme.js`)
+Les couleurs de la trousse s’adaptent en cas de choix du thème sombre par l’internaute ;
+- un commutateur dans la documentation incluse permet de basculer dans le thème sombre ; 
+- en cas de thème sombre, la classe `qc-dark-theme` est ajoutée à l'élément html (cf `src/sdg/_dark-theme.js`) ;
 - des classes et variables css utilitaires permettent de masquer/montrer des éléments selon le thème.
 ```scss
 // src/sdg/scss/utilities/_themes.scss
@@ -209,10 +209,11 @@ Les couleurs de la trousse s'adaptent en cas de choix du thème sombre.
 
 ### Jetons de conception
 
-- pour chaque token de couleur, ajout d'un token `-rgb`, pour pouvoir appliquer une couche alpha avec la fonction css `rgba()`
+- pour chaque jeton de couleur, ajout d'un jeton avec le suffix `-rgb` qui indique la valeur RGB de la couleur, ceci afin de pour pouvoir appliquer une couche alpha avec la fonction css `rgba()`
 Exemple :
 
 ```
+// qc-design-token.css
 --qc-color-blue-piv: #095797;
 --qc-color-blue-piv-rgb: 9, 87, 151;
 
@@ -226,13 +227,15 @@ Exemple :
 ```yaml
 --qc-color-blue-regular_light: #2586d6;
   
-// ces tokens recevront des extra pâles dans de futur version de la trousse
+// ces jetons recevront des valeurs extra pâles dans de futures versions de la trousse
 --qc-color-blue-extra-pale: var(--qc-color-blue-pale);
 --qc-color-grey-extra-pale: var(--qc-color-grey-pale);
 
+// pour des raisons de cohérence, les jetons pale et light du rouge sont ajoutés comme raccourcis des jetons du rose.
 --qc-color-red-pale: var(--qc-color-pink-pale);
 --qc-color-red-light: var(--qc-color-pink-regular);
 
+// nouveau jeton pour les liens
 --qc-color-link-focus-outline: var(--qc-color-blue-light);
 
 // token pour les champs de formulaire
@@ -251,7 +254,7 @@ Exemple :
 ```
 - refontes de jetons :
 ```yaml
-// refonte des tokens box-shadow
+// refonte des jetons d’ombrage
 --qc-color-box_shadow: rgba(var(--qc-color-blue-dark-rgb), 0.24);
 --qc-box_shadow-0-color: var(--qc-color-grey-light);
 --qc-box_shadow-1-blur: 4px;
@@ -263,7 +266,7 @@ Exemple :
 --qc-box_shadow-4-blur: 24px;
 --qc-box_shadow-4-offset: 6px;
 
-// refonte des tokens de la grille
+// refonte des jetons de la grille
 --qc-grid-breakpoint-sm: 768px;
 --qc-grid-breakpoint-md: 992px;
 --qc-grid-breakpoint-lg: 1200px;
@@ -271,15 +274,15 @@ Exemple :
 --qc-grid-container-max-width-md: 992px;
 --qc-grid-container-max-width-lg: 1200px;
 ```
-**NB : le point de rupture 576px a été retiré : la résolution mobile/sm commence donc à 768px**
+**NB : le point de rupture 576px a été retiré : la résolution mobile/sm commence donc à 768px**.
 Tous les autres points de rupture 1.2.5 ont donc été décalés vers le bas.
 
-| résolution    | 1.2.5   | 1.3.0  |
-|---------------|---------|--------|
-| mobile   / sm | 576px   | 768px  |
-| tablet   / md | 768px   | 996px  |
-| desktop  / lg | 996px   | 1200px |
-| desktop  / xl | 1200px  | na     |
+| Résolution          | 1.2.5          | 1.3.0          |
+|---------------------|----------------|----------------|
+| mobile   / sm       | 0 - 576px      | 0 - 768px      |
+| tablet   / md       | 576px - 768px  | 768px - 996px  |
+| desktop  / lg       | 768px - 996px  | 996px - 1200px |
+| large-desktop  / xl | 996px - 1200px | > 1200px    |
 
 ### Import de l'API scss de la trousse
 
@@ -293,11 +296,26 @@ Dans la version 1.3.0, il suffit d'importer `qc-sdg-lib.scss` pour bénéficier
 ```scss
 @use "qc-sdg-lib" as *;
 // donne accés à toutes les fonctions, mixins et variables de la trousse
+// sans générer aucun code css
 ```
 
 ## Historique
 
-- Dernière version : Ajout du helper getImageUrl() et retrait des sprites; Ajout du composants qc-external-link ; Modification de qc-piv-header en lien avec l'accessibilité : retrait de l’inclusion de la recherche par défaut. À la place, le composant qc-search-bar est ajouté à la trousse et peut-être inclus directement en slot ; Refonte des jetons de conception pour les ombrages ; ajout du focus pour les liens ; Ajout d'un attribut `sdg-css-path` à la balise script qui insère le js, pour pouvoir préciser le chemin vers la css du sdg. Refonte de toute la structure des fichiers : suppression du répertoire modules, ajout d'un unique fichier _qc-sdg-lib.scss pour accéder à l'intégralité des variables, fonctions, mixins et classes abstraites (c-à-d. précédées de l'opérateur sass %) du la trousse ; ajout d’un exemple de barre de recherche avec saisie semi-automatique basé sur jQuery UI ; ajout d'un style pour les libellés des champs de formulaire (label).  
+- 1.3.0 : 
+  - Ajout du composant `qc-external-link` ; 
+  - Ajout du composant `qc-search-bar` ; 
+  - Modification de `qc-piv-header` en lien avec l’accessibilité : retrait de l’inclusion de la recherche par défaut. À la place, le composant `qc‑search‑bar` peut être inclus directement en _slot_ ; 
+  - Refonte des jetons de conception pour les ombrages ;
+  - Refonte des jetons de conception pour la grille, avec suppression du point de rupture 576px ;
+  - Ajout et retrait de jetons ;
+  - Ajout du focus pour les liens ; 
+  - Ajout d'un attribut `sdg-css-path` à la balise script qui insère le js, pour pouvoir préciser le chemin vers la css du sdg. 
+  - Refonte de toute la structure des fichiers : suppression du répertoire modules, ajout d'un unique fichier _qc-sdg-lib.scss pour accéder à l'intégralité des variables, fonctions, mixins et classes abstraites (c-à-d. précédées de l'opérateur sass %) de la trousse ;
+  - Ajout du helper getImageUrl() et retrait des sprites ;
+  - ajout d'un style pour les libellés des champs de formulaire (label).
+  - ajout d'un style pour les listes ol ;
+  - ajout de classe css utilitaires : `qc-font-size-sm/md/lg/xl` cf `base/_typography.scss` ;
+  - ajout de la classe utilitaire `qc-sr-only`, pour affichage aux lecteurs d’écran seulement ;
 - 1.2.5 — Ajout/modififcation des instructions concernant l'installation et l'extension de la trousse ;
 - 1.2.4 — Suppression de dépendances npm et réorganisation des répertoires ; Ajout d'un composer.json pour pouvoir installer la trousse par composer ;
 - 1.2.3 — Modification des dépendances npm du projets ;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qc-trousse-sdg",
-  "version": "1.3.0-develop.7",
+  "version": "1.3.0",
   "description": "Trousse de développement du Système de design gouvernemental du Québec",
   "main": "index.js",
   "scripts": {

package/public/js/qc-doc-sdg.js

@@ -69953,7 +69953,7 @@
 	customElements.define("qc-doc-exemple", create_custom_element(Exemple, {"caption":{"attribute":"caption"},"codeTargetId":{"attribute":"code-target-id"},"hideCode":{"attribute":"hide-code","type":"Boolean"},"rawCode":{"attribute":"raw-code"}}, [], [], false));
 
 	if (document.getElementById("version")) {
-	    document.getElementById("version").textContent = `v1.3.0-develop.7`;
+	    document.getElementById("version").textContent = `v1.3.0`;
 	}
 
 	// Show maskable "general alert" component

package/src/sdg/scss/base/_typography.scss

@@ -79,7 +79,6 @@ code, .qc-code {
   }
 }
 
-
 .qc-font-size-sm {
   @include content-font("sm");
 }

package/src/sdg/scss/components/_icons.scss

@@ -5,9 +5,6 @@ qc-icon {
   align-items: stretch;
 }
 
-
-
-
 // TODO retirer une fois toutes les icônes remplacées par Icon dans les composants
 .qc-icon {
   display: inline-block;