Merge pull request #36 from ansforge/main-klee

Main klee

Author: mfaurel

.gitignore

@@ -3,5 +3,5 @@
 node_modules
 
 # Generated folders by gulp compilation
-./site
-./styleguide
+/site
+/styleguide

README.md

@@ -1,13 +1,18 @@
-# S.K.E.L.E.T.O.R
+# ANS - RESSOURCES
+### Design System de l'ANS
+
+---
 
 Framework CSS créé par les équipes front d'Alterway.
+Maintenu par Klee Interactive.
 - BEM pour le nommage des class et id
 - SASS pour le CSS
 - jQuery ou Vanilla JS selon le besoin
 - Accessibilité : RGAA (AA) exigé
 - GULP 4.x.x
+- Docksal
 
-# Génération du projet
+## Génération du projet
 
 Pour la première fois
 ```
@@ -29,30 +34,32 @@ Pour lancer avec le watcher
 fin watch
 ```
 
-## Si le GULP plante
+### Si le GULP plante
 
 Faire :
-- rm -rf node_modules
-- rm -rf package-lock.json
-- fin npm cache clean --force
-- fin npm install
-
+```
+rm -rf node_modules
+rm -rf package-lock.json
+fin npm cache clean --force
+fin npm install
+```
+---
 # Les grands principes
 
-## Base
+### Base
 - Héritage de Boostrap 4.x.x
 - OOCSS et BEM
 - Architecture en Atomic Design
 - Compilation via Gulp 4.x.x
 
-## Javascript
+### Javascript
 Les plugins JS sont en jQuery pour la majorité d'entre eux.
 Ils respectent les patterns d'accessibilité.
 
-## Accessibilité
+### Accessibilité
 Respecter le RGAA, coder de façon accessible tant en HTML (twig), en CSS et en JS.
 
-## Composants
+### Composants
 - dossier TWIG des composants : `web/twig/site/component`.
 - dossier CSS des composants : `web/style/site/5-component`.
 
@@ -62,12 +69,21 @@ Ex. du composant qui a pour class `.a-info` :
 - création du .twig : `web/twig/site/component/1-atom/a-info.twig`
 - création du .scss : `web/style/site/5-component/1-atom/_a-info.scss`
 
-# Mise à jour de version
+---
+
+# Mise à jour de version officiel du projet
 
 A chaque mise à jour de version :
+- Modèle : X:Y:Z (ex: 1.9.0)
 - Mettre à jour la date de livraison et le numéro de version sur la page `index.twig`
 - Lister tous les nouveaux éléments et les modifications apportées par la version sur la page `sg-versions.twig`
 - Lancer la commande `fin gulp` pour générer tous les fichiers puis zipper la version (les éléments du dossier `web/styleguide`) **en retirant les .zip des anciennes versions du dossier /zip**
 - Placer le nouveau fichier .zip dans le dossier `web/src/zip`
 - Vérifier le poids noté dans les twig de tous les fichiers zip. Vous obtiendrez ces informations dans la console en lançant la commande `fin gulp` (fonction zipSizes)
-- Taguer la branch `develop` à chaque livraison de version
+- Taguer la branch `develop` à chaque livraison de version
+
+# Déploiement vers le GitHub ANS
+
+Après que le tag ai été validé par l'ANS sur les environnement OVH (préprod ou prod)
+- Créer une MR de develop au niveau du tag vers la branche "synchro-github-ans"
+- Le push vers github se fait via un job "synchro_github" manuel.

src/img/blocs/menu-slide-bar.jpg

@@ -278,6 +278,10 @@
                           <a class="nav-link" href="sg-c-messages.html">Messages de statut</a>
                         </li>
 
+                        <li class="nav-item common-nav-item">
+                          <a class="nav-link" href="sg-c-messages-cta.html">Messages avec CTA</a>
+                        </li>
+                        
                         <li class="nav-item common-nav-item">
                           <a class="nav-link" href="sg-c-progress-bar.html">Barre de progression</a>
                         </li>

src/img/footer/Footer-mobile.png

@@ -15,7 +15,9 @@
         }
 
         .wysiwyg {
-            ul, ol {
+
+            ul,
+            ol {
                 margin-left: 0;
             }
 
@@ -56,13 +58,17 @@
     [data-contrast="high-c"] & {
         color: var(--gray-700);
     }
+
+    .svg-x {
+        font-size: 1.7rem;
+    }
 }
 
 .o-banner__content {
     padding-top: var(--banner-padding-top);
     max-width: var(--banner-content-width);
 
-    [data-contrast="high-c"] & > * {
+    [data-contrast="high-c"] &>* {
         background-color: var(--white);
     }
 }
@@ -108,7 +114,8 @@
             right: 0;
             bottom: 0;
             background-repeat: no-repeat;
-            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 85 91'%3E%3Cpath fill='#{$primary}' d='M42.364 90.817h-.003C19.235 90.817.488 72.088.488 48.984V.198C3.762 3.84 10.336 6.94 23.68 7.15h18.684c23.126 0 41.872 18.73 41.872 41.834 0 23.104-18.746 41.833-41.872 41.833' /%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 153'%3E%3Cpath fill='%23D20050' d='M69.996 152.198h.005c38.616 0 69.919-31.274 69.919-69.853V.88c-5.467 6.081-16.443 11.259-38.726 11.61H69.996C31.38 12.49.076 43.762.076 82.344c0 38.579 31.304 69.853 69.92 69.853'/%3E%3C/svg%3E");
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 85 91'%3E%3Cpath fill='#{$primary}' d='M42.364 90.817h-.003C19.235 90.817.488 72.088.488 48.984V.198C3.762 3.84 10.336 6.94 23.68 7.15h18.684c23.126 0 41.872 18.73 41.872 41.834 0 23.104-18.746 41.833-41.872 41.833' /%3E%3C/svg%3E"),
+            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 153'%3E%3Cpath fill='%23D20050' d='M69.996 152.198h.005c38.616 0 69.919-31.274 69.919-69.853V.88c-5.467 6.081-16.443 11.259-38.726 11.61H69.996C31.38 12.49.076 43.762.076 82.344c0 38.579 31.304 69.853 69.92 69.853'/%3E%3C/svg%3E");
             background-size: 9rem, 14.2rem;
             background-position: top 9.2rem left 0, top 100% right 13rem;
         }
@@ -145,24 +152,24 @@
 
             &::after {
                 left: 0;
-                background-image:   url("data:image/svg+xml,%3Csvg width='71' height='75' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M35.696 75h.003c19.367 0 35.066-15.5 35.066-34.622V0c-2.742 3.014-8.247 5.58-19.422 5.754H35.696C16.33 5.754.63 21.254.63 40.378.63 59.499 16.33 75 35.696 75' fill='%231D71B8'/%3E%3C/svg%3E"),
-                                    url("data:image/svg+xml,%3Csvg width='137' height='146' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M68.506.303h.004c37.443 0 67.796 29.968 67.796 66.936v78.064c-5.301-5.828-15.944-10.789-37.55-11.125h-30.25C31.063 134.178.711 104.21.711 67.239.711 30.271 31.063.303 68.506.303' fill='%23D20050'/%3E%3C/svg%3E"),
-                                    url("data:image/svg+xml,%3Csvg width='129' height='94' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.14 93.346H.626c20.29-12.733 32.123-33.39 35.739-51.209 5.452-26.912 20.89-41.3 45.448-41.3 25.853 0 46.813 20.708 46.813 46.256 0 25.545-20.96 46.253-46.813 46.253H17.14z' fill='%231E70B7'/%3E%3C/svg%3E"),
-                                    url("data:image/svg+xml,%3Csvg width='241' height='168' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.394 83.975C.394 38.087 37.636.89 83.578.89h156.816v10.137c0 86.171-69.936 156.035-156.219 156.035h-.597c-45.942 0-83.184-37.198-83.184-83.086' fill='%23DEE0EA'/%3E%3C/svg%3E"),
-                                    url("data:image/svg+xml,%3Csvg width='49' height='71' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.394 70.828c13.384 0 24.233-10.862 24.233-24.262V.828h-2.956C20.538.828.161 21.226.161 46.392v.174c0 13.4 10.849 24.262 24.233 24.262' fill='%23D20050'/%3E%3C/svg%3E"),
-                                    url("data:image/svg+xml,%3Csvg width='153' height='77' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M91.444 76.101H-.097c32.615-20.469 66.516-40.706 95.502-64.273C157.823-34.687 186 76.267 91.445 76.1z' fill='%231E70B7'/%3E%3C/svg%3E");
-                background-size:    7.1rem 7.5rem,
-                                    13.7rem 14.6rem,
-                                    12.9rem 9.4rem,
-                                    24.1rem 16.8rem,
-                                    4.9rem 7.1rem,
-                                    15.3rem 7.7rem;
-                background-position:top 49.5rem left 0,
-                                    top 20.7rem left 13.1rem,
-                                    top 8.4rem left 53.5rem,
-                                    top -10rem left 57.8rem,
-                                    top 50.5rem left 61.6rem,
-                                    top 49.2rem left 88.5rem;
+                background-image: url("data:image/svg+xml,%3Csvg width='71' height='75' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M35.696 75h.003c19.367 0 35.066-15.5 35.066-34.622V0c-2.742 3.014-8.247 5.58-19.422 5.754H35.696C16.33 5.754.63 21.254.63 40.378.63 59.499 16.33 75 35.696 75' fill='%231D71B8'/%3E%3C/svg%3E"),
+                    url("data:image/svg+xml,%3Csvg width='137' height='146' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M68.506.303h.004c37.443 0 67.796 29.968 67.796 66.936v78.064c-5.301-5.828-15.944-10.789-37.55-11.125h-30.25C31.063 134.178.711 104.21.711 67.239.711 30.271 31.063.303 68.506.303' fill='%23D20050'/%3E%3C/svg%3E"),
+                    url("data:image/svg+xml,%3Csvg width='129' height='94' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.14 93.346H.626c20.29-12.733 32.123-33.39 35.739-51.209 5.452-26.912 20.89-41.3 45.448-41.3 25.853 0 46.813 20.708 46.813 46.256 0 25.545-20.96 46.253-46.813 46.253H17.14z' fill='%231E70B7'/%3E%3C/svg%3E"),
+                    url("data:image/svg+xml,%3Csvg width='241' height='168' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M.394 83.975C.394 38.087 37.636.89 83.578.89h156.816v10.137c0 86.171-69.936 156.035-156.219 156.035h-.597c-45.942 0-83.184-37.198-83.184-83.086' fill='%23DEE0EA'/%3E%3C/svg%3E"),
+                    url("data:image/svg+xml,%3Csvg width='49' height='71' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.394 70.828c13.384 0 24.233-10.862 24.233-24.262V.828h-2.956C20.538.828.161 21.226.161 46.392v.174c0 13.4 10.849 24.262 24.233 24.262' fill='%23D20050'/%3E%3C/svg%3E"),
+                    url("data:image/svg+xml,%3Csvg width='153' height='77' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M91.444 76.101H-.097c32.615-20.469 66.516-40.706 95.502-64.273C157.823-34.687 186 76.267 91.445 76.1z' fill='%231E70B7'/%3E%3C/svg%3E");
+                background-size: 7.1rem 7.5rem,
+                    13.7rem 14.6rem,
+                    12.9rem 9.4rem,
+                    24.1rem 16.8rem,
+                    4.9rem 7.1rem,
+                    15.3rem 7.7rem;
+                background-position: top 49.5rem left 0,
+                    top 20.7rem left 13.1rem,
+                    top 8.4rem left 53.5rem,
+                    top -10rem left 57.8rem,
+                    top 50.5rem left 61.6rem,
+                    top 49.2rem left 88.5rem;
             }
         }