Merge pull request #444 from LuccaSA/rc

[Upd] Mise en ligne doc à jour et LF à jour de Prisme

Jenkinsfile

@@ -63,20 +63,9 @@ node {
 			}
 
 			stage('Prepare') {
-
-				parallel (
-					node: {
-						env.NODEJS_HOME = "${tool 'Node LTS v10.13.x'}"
-						env.PATH="${env.NODEJS_HOME};${env.PATH}"
-						bat "node --version"
-						bat "npm --version"
-					},
-					checkout: {
-						scmVars = checkout scm
-					},
-					failFast: true,
-				)
+				scmVars = checkout scm
 			}
+
 			stage('Restore') {
 				parallel (
 					prisme: {

applications/prisme/src/app/components/feedback/boxes/killable/killable.example.html

@@ -1,7 +1,7 @@
 <div class="box">
 	<div class="box-close">
 		<button class="actionIcon">
-			<span aria-hidden="true" class="lucca-icon">cross</span>
+			<span aria-hidden="true" class="lucca-icon icon-cross"></span>
 		</button>
 	</div>
 	Jujubes toppin gvueoat cake cake lemon drops chupa chups sweet roll. Macaroon icing tootsie roll bonbon dragée carrot cake

applications/prisme/src/app/components/feedback/callouts/icons/icons.example.html

@@ -1,16 +1,24 @@
 <div class="callout mod-icon">
-	<div class="callout-icon"><span aria-hidden="true" class="lucca-icon">help</span></div>
+	<div class="callout-icon">
+		<span aria-hidden="true" class="lucca-icon icon-help"></span>
+	</div>
 	<strong class="callout-title">Besoin d'aide ? </strong> Je suis un callout standard
 </div>
 <div class="callout mod-icon palette-success">
-	<div class="callout-icon"><span aria-hidden="true" class="lucca-icon">tick_bold</span></div>
+	<div class="callout-icon">
+		<span aria-hidden="true" class="lucca-icon icon-tick"></span>
+	</div>
 	<strong class="callout-title">Cool!</strong> Je suis un callout de succès :)
 </div>
 <div class="callout mod-icon palette-warning">
-	<div class="callout-icon"><span aria-hidden="true" class="lucca-icon">warning</span></div>
+	<div class="callout-icon">
+		<span aria-hidden="true" class="lucca-icon icon-warning"></span>
+	</div>
 	<strong class="callout-title">Hmmm...</strong> Je suis un callout d'alarme :|
 </div>
 <div class="callout mod-icon palette-error">
-	<div class="callout-icon"><span aria-hidden="true" class="lucca-icon">error</span></div>
+	<div class="callout-icon">
+		<span aria-hidden="true" class="lucca-icon icon-error"></span>
+	</div>
 	<strong class="callout-title">Oops!</strong> Je suis un callout d'erreur :(
-</div>
+</div>

applications/prisme/src/app/components/form/textfields/clear/clear.example.html

@@ -2,6 +2,6 @@
   <label class="textfield mod-clearable">
     <input class="textfield-input" type="text" placeholder="placeholder">
     <span class="textfield-label">Label textfield</span>
-    <a href="#" role="button" class="actionIcon textfield-actionClear"><span aria-hidden="true" class="lucca-icon">thin_cross</span></a>
+    <a href="#" role="button" class="actionIcon textfield-actionClear"><span aria-hidden="true" class="lucca-icon icon-cross"></span></a>
   </label>
 </div>

applications/prisme/src/app/components/listings/lists/basic/basic.example.html

@@ -5,8 +5,10 @@ <h3 class="list-item-content-title">Titre</h3>
 			<p class="list-item-content-description">Description</p>
 		</div>
 		<div class="list-item-actions">
-			<button class="actionIcon"><span aria-hidden="true" class="lucca-icon">edit</span></button>
-			<button class="actionIcon"><span aria-hidden="true" class="lucca-icon">trash</span></button>
+			<button class="actionIcon">
+				<span aria-hidden="true" class="lucca-icon icon-edit"></span>
+			</button>
+			<button class="actionIcon"><span aria-hidden="true" class="lucca-icon icon-trash"></span></button>
 		</div>
 	</li>
 	<li class="list-item">
@@ -15,8 +17,12 @@ <h3 class="list-item-content-title">Titre</h3>
 			<p class="list-item-content-description">Description</p>
 		</div>
 		<div class="list-item-actions">
-			<button class="actionIcon"><span aria-hidden="true" class="lucca-icon">edit</span></button>
-			<button class="actionIcon"><span aria-hidden="true" class="lucca-icon">trash</span></button>
+			<button class="actionIcon">
+				<span aria-hidden="true" class="lucca-icon icon-edit"></span>
+			</button>
+			<button class="actionIcon">
+				<span aria-hidden="true" class="lucca-icon icon-trash"></span>
+			</button>
 		</div>
 	</li>
-</ul>
+</ul>

applications/prisme/src/app/components/listings/lists/clickable/clickable.example.html

@@ -5,8 +5,8 @@ <h3 class="list-item-content-title">Titre</h3>
 			<p class="list-item-content-description">Description</p>
 		</div>
 		<div class="list-item-actions">
-			<button class="actionIcon"><span aria-hidden="true" class="lucca-icon">edit</span></button>
-			<button class="actionIcon"><span aria-hidden="true" class="lucca-icon">trash</span></button>
+			<button class="actionIcon"><span aria-hidden="true" class="lucca-icon icon-edit"></span></button>
+			<button class="actionIcon"><span aria-hidden="true" class="lucca-icon icon-trash"></span></button>
 		</div>
 	</li>
 	<li class="list-item mod-clickable">
@@ -15,8 +15,8 @@ <h3 class="list-item-content-title">Titre</h3>
 			<p class="list-item-content-description">Description</p>
 		</div>
 		<div class="list-item-actions">
-			<button class="actionIcon"><span aria-hidden="true" class="lucca-icon">edit</span></button>
-			<button class="actionIcon"><span aria-hidden="true" class="lucca-icon">trash</span></button>
+			<button class="actionIcon"><span aria-hidden="true" class="lucca-icon icon-edit"></span></button>
+			<button class="actionIcon"><span aria-hidden="true" class="lucca-icon icon-trash"></span></button>
 		</div>
 	</li>
 </ul>

applications/prisme/src/app/components/listings/tables/actions/actions.component.html

@@ -13,27 +13,31 @@
 			<td class="table-body-row-cell">Contenu</td>
 			<td class="table-body-row-cell">Contenu</td>
 			<td class="table-body-row-cell mod-actions">
-				<button class="actionIcon"><span aria-hidden="true" class="lucca-icon">edit</span></button>
-				<button class="actionIcon"><span aria-hidden="true" class="lucca-icon">trash</span></button>
+				<button class="actionIcon">
+					<span aria-hidden="true" class="lucca-icon icon-edit"></span>
+				</button>
+				<button class="actionIcon">
+					<span aria-hidden="true" class="lucca-icon icon-trash"></span>
+				</button>
 			</td>
 		</tr>
 		<tr class="table-body-row">
 			<td class="table-body-row-cell">Contenu</td>
 			<td class="table-body-row-cell">Contenu</td>
 			<td class="table-body-row-cell">Contenu</td>
 			<td class="table-body-row-cell mod-actions">
-				<button class="actionIcon"><span aria-hidden="true" class="lucca-icon">edit</span></button>
-				<button class="actionIcon"><span aria-hidden="true" class="lucca-icon">trash</span></button>
+				<button class="actionIcon"><span aria-hidden="true" class="lucca-icon icon-edit"></span></button>
+				<button class="actionIcon"><span aria-hidden="true" class="lucca-icon icon-trash"></span></button>
 			</td>
 		</tr>
 		<tr class="table-body-row">
 			<td class="table-body-row-cell">Contenu</td>
 			<td class="table-body-row-cell">Contenu</td>
 			<td class="table-body-row-cell">Contenu</td>
 			<td class="table-body-row-cell mod-actions">
-				<button class="actionIcon"><span aria-hidden="true" class="lucca-icon">edit</span></button>
-				<button class="actionIcon"><span aria-hidden="true" class="lucca-icon">trash</span></button>
+				<button class="actionIcon"><span aria-hidden="true" class="lucca-icon icon-edit"></span></button>
+				<button class="actionIcon"><span aria-hidden="true" class="lucca-icon icon-trash"></span></button>
 			</td>
 		</tr>
 	</tbody>
-</table>
+</table>

applications/prisme/src/app/components/misc/functions/functions.feature.html

@@ -2,7 +2,7 @@
 
 <section class="page-content u-animatedFadeIn">
 	<div class="callout mod-icon palette-info">
-		<div class="callout-icon"><span aria-hidden="true" class="lucca-icon">info</span></div>
+		<div class="callout-icon"><span aria-hidden="true" class="lucca-icon icon-info"></span></div>
 		Les fonctions sont accessibles en ajoutant <code class="code">@import "~@lucca-front/scss/src/theming.overridable"</code> à votre composant.<br>
 		Elles retournent des objets dont la notation est <code class="code">parent.child.[...]</code>.
 	</div>

applications/prisme/src/app/components/misc/mixins/mixins.feature.html

@@ -11,7 +11,7 @@ <h2>Icônes</h2>
 
 <div class="callout mod-icon palette-info">
 	<div class="callout-icon">
-		<span aria-hidden="true" class="lucca-icon">info</span>
+		<span aria-hidden="true" class="lucca-icon icon-info"></span>
 	</div>
 	Il est très souvent utile d'utiliser la mixin makeIcon dans un ::before
 </div>
@@ -55,7 +55,7 @@ <h2>Masquage</h2>
 </pre></code>
 <div class="callout mod-icon palette-info">
 	<div class="callout-icon">
-		<span aria-hidden="true" class="lucca-icon">info</span>
+		<span aria-hidden="true" class="lucca-icon icon-info"></span>
 	</div>
 	La classe .u-mask fait directement appel à cette mixin.
 </div>

applications/prisme/src/app/components/misc/number/number.feature.ts

@@ -11,6 +11,7 @@ declare var require: any;
 export class NumberFeature {
 	infos: IFeatureInfos = {
 		title: 'Nombre',
+		guidelines: 'guidelines/components/misc/number/number.guidelines.md',
 		description: `luNumber permet de réaliser l'alignement de nombres sur les décimales en gérant l'arrondi et internationalisation.`,
 		examples: [
 			{

applications/prisme/src/app/components/misc/utilities/utilities.feature.html

@@ -313,7 +313,7 @@ <h2>Couleur de texte</h2>
 			<code class="code">u-textError</code>
 		</p>
 		<div class="callout mod-icon palette-info">
-			<div class="callout-icon"><span aria-hidden="true" class="lucca-icon">info</span></div>
+			<div class="callout-icon"><span aria-hidden="true" class="lucca-icon icon-info"></span></div>
 			Les couleurs de votre palette sont éditables via votre <a href="https://github.com/LuccaSA/lucca-front/#palettes" target="_blank">thème</a>
 		</div>
 	</section>

applications/prisme/src/app/components/navigation/menu/menu.feature.ts

@@ -11,6 +11,7 @@ export class MenuFeature {
 	infos: IFeatureInfos = {
 		title: 'Menu',
 		packages: ['SCSS'],
+		guidelines: 'guidelines/components/navigation/menu/menu.guidelines.md',
 		description: "Le menu sert à subdiviser du contenu en plusieurs pages ou sections afin de limiter la quantité d'information affichée.",
 		examples: [
 			{

applications/prisme/src/app/components/templates/guidelines/guidelines.feature.html

@@ -66,7 +66,7 @@ <h3>Sans menu vertical</h3>
 		</div>
 	</div>
 	<div class="callout mod-icon palette-info u-marginTopStandard">
-		<div class="callout-icon"><span aria-hidden="true" class="lucca-icon">info</span></div>
+		<div class="callout-icon"><span aria-hidden="true" class="lucca-icon icon-info"></span></div>
 		Par défaut, le layout est automatiquement géré grâce aux sélecteurs de proximité entre <code class="code">.navSide</code> et <code class="code">.mainContent</code>. En cas d'impossibilité de placer ces deux composants côte à côte, il est possible d'utiliser les classes <code class="code">.mod-withMenu</code> et <code class="code">.mod-withMenuCompact</code> sur un parent de <code class="code">.main-content</code> pour lui donner la bonne mise en forme.
 	</div>
 </section>

applications/prisme/src/app/components/text/titles/titles.feature.ts

@@ -11,6 +11,7 @@ export class TitlesFeature {
 	infos: IFeatureInfos = {
 		title: 'Titres',
 		packages: ['SCSS'],
+		guidelines: 'guidelines/components/texte/titres/titres.guidelines.md',
 		examples: [
 			{
 				title: 'Basique',

applications/prisme/src/app/home/home-splash/home-splash.component.html

@@ -15,7 +15,7 @@ <h1 class="splash-title mod-headline">Prisme, le design façon Lucca</h1>
 		<div class="grid-lg4">
 			<a routerLink="/principles" class="card mod-clickable mod-principles">
 				<div class="card-content">
-					<div class="splash-card-icon"><span aria-hidden="true" class="lucca-icon">heart</span></div>
+					<div class="splash-card-icon"><span aria-hidden="true" class="lucca-icon icon-heart"></span></div>
 					<h3>Principes</h3>
 					<div class="u-textLight u-textSmall">Découvrez les lignes directrices de notre vision du design chez Lucca.</div>
 				</div>
@@ -24,7 +24,7 @@ <h3>Principes</h3>
 		<div class="grid-lg4">
 			<a routerLink="/identity" class="card mod-clickable mod-identity">
 				<div class="card-content">
-					<div class="splash-card-icon"><span aria-hidden="true" class="lucca-icon">palette</span></div>
+					<div class="splash-card-icon"><span aria-hidden="true" class="lucca-icon icon-palette"></span></div>
 					<h3>Identité graphique</h3>
 					<div class="u-textLight u-textSmall">Comprenez les éléments de notre charte et apprenez à communiquer par l'image.</div>
 				</div>
@@ -33,7 +33,7 @@ <h3>Identité graphique</h3>
 		<div class="grid-lg4">
 			<a routerLink="/components" class="card mod-clickable mod-components">
 				<div class="card-content">
-					<div class="splash-card-icon"><span aria-hidden="true" class="lucca-icon">puzzle</span></div>
+					<div class="splash-card-icon"><span aria-hidden="true" class="lucca-icon icon-puzzle"></span></div>
 					<h3>Composants</h3>
 					<div class="u-textLight u-textSmall">Parcourez nos composants SASS et Angular et apprenez à les utiliser dans vos applications.</div>
 				</div>

applications/prisme/src/guidelines/components/listings/tables/tables.guidelines.md

@@ -1,3 +1,73 @@
+# Accessibilité
+## Tableaux simples
+
+- Si on a un tableau sans fusion de cellules ou de sous-contexte (pas de changement du header en cours de lecture) : il est recommandé par le RGAA d'ajouer l'attribut "scope=col" ou "scope=row" sur les th des en-tête de lignes ou colonnes.
+<br/>
+<a href="https://www.w3.org/WAI/tutorials/tables/irregular/" target="_blank">Exemples de tableaux validés en RGAA</a>
+<br/>
+
+```mod-code
+&lt;thead&gt;
+    &lt;tr&gt;
+      &lt;th&gt; scope="col"&gt;Équipements&lt;/th&gt;
+      &lt;th&gt; scope="col"&gt;Nombre de lignes&lt;/th&gt;
+      &lt;th&gt; scope="col"&gt;Pourcentage du total de lignes&lt;/th&gt;
+    &lt;/tr&gt;
+&lt;/thead&gt;
+&lt;tbody&gt;
+   &lt;tr&gt;
+      &lt;td&gt;Rampe d'accès&lt;/td&gt;
+      &lt;td&gt;260&lt;/td&gt;
+      &lt;td&gt;70,46 %&lt;/td&gt;
+   &lt;/tr&gt;
+&lt;/tbody&gt;
+```
+```mod-code
+   &lt;tr&gt;
+      &lt;td&gt;&nbsp;&lt;/td&gt;
+      &lt;th scope="col"&gt;Paris&lt;/th&gt;
+      &lt;th scope="col"&gt;Marseille&lt;/th&gt;
+      &lt;th scope="col"&gt;Lyon&lt;/th&gt;
+   &lt;/tr&gt;
+   &lt;tr&gt;
+      &lt;th scope="row"&gt;Juin&lt;/th&gt;
+      &lt;td&gt;22°C&lt;/td&gt;
+      &lt;td&gt;28°C&lt;/td&gt;
+      &lt;td&gt;26°C&lt;/td&gt;
+   &lt;/tr&gt;
+   &lt;tr&gt;
+      &lt;th scope="row"&gt;Juillet&lt;/th&gt;
+      &lt;td&gt;24°C&lt;/td&gt;
+      &lt;td&gt;30°C&lt;/td&gt;
+      &lt;td&gt;28°C&lt;/td&gt;
+   &lt;/tr&gt;
+```
+## Tableaux complexes
+
+- Si on a un tableau avec une fusion de cellules ou un collapse par exemple (changement du header en cours de lecture) : il est recommandé par le RGAA de lier les en-tête des colonnes par l'attribut "headers=id de l'en-tête"
+<br/>
+<a href="https://www.w3.org/WAI/tutorials/tables/multi-level/" target="_blank">Exemples de tableaux validés en RGAA</a>
+<br/>
+
+```mod-code
+&lt;tr&gt;
+    &lt;th id="malvoyant" colspan="2"&gt;Malvoyants&lt;/th&gt;
+    &lt;th id="aveugle" colspan="2"&gt;Aveugles&lt;/th&gt;
+&lt;/tr&gt;
+&lt;tr&gt;
+    &lt;th id="data1" headers="malvoyant"&gt;Obstacles contrastés&lt;/th&gt;
+    &lt;th id="data2" headers="malvoyant"&gt;Portes contrastées&lt;/th&gt;
+    &lt;th id="data3" headers="aveugle"&gt;Obstacles détectables à la canne&lt;/th&gt;
+    &lt;th id="data4" headers="aveugle"&gt;Guidage en braille&lt;/th&gt;
+&lt;/tr&gt;
+&lt;tr&gt;
+    &lt;td headers="malvoyant data1"&gt;73&lt;/td&gt;
+    &lt;td headers="malvoyant data2"&gt;65&lt;/td&gt;
+    &lt;td headers="aveugle data3"&gt;103&lt;/td&gt;
+    &lt;td headers="aveugle data4"&gt;0&lt;/td&gt;
+&lt;/tr>
+```
+
 # Alignement
 ## Horizontal
 

applications/prisme/src/guidelines/components/misc/number/number.guidelines.md

@@ -0,0 +1,11 @@
+# Accessibilité
+
+- Pour que les lecteurs d'écran lisent correctement les opérateurs mathématiques, il faut commencer par utiliser les bons signes typographiques, que vous pouvez retrouver ici :
+<br>
+<a href="https://unicode-table.com/fr/blocks/mathematical-operators/" target="_blank">Unicode table</a>
+
+```mod-code
+Signe négatif : &#8722;  (<code>&amp;#8722;</code>)
+Signe positif : &#43; (<code>&amp;#43;</code>)
+Signe égal : &#61; (<code>&amp;#61;</code>)
+```

applications/prisme/src/guidelines/components/navigation/menu/menu.guidelines.md

@@ -0,0 +1,22 @@
+# Accessibilité
+
+- Si vous devez ajouter un titre sémantique HTML à votre menu d'onglets, préférez d'ajouter ce titre directement dans la section de chaque panneau en utilisant la class 'u-mask'.
+<br/>Ne mélangez pas la navigation et la sémantique de titres
+
+Ma navigation :
+
+```mod-code
+  &lt;nav class="page-nav menu"&gt;
+    &lt;a class="menu-link"&gt;
+      My link
+    &lt;/a&gt;
+  &lt;/nav&gt;
+```
+
+Dans le composant :
+
+```mod-code
+  &lt;h2 class="u-mask"&gt;
+    The title of my link 1 section
+  &lt;/h2&gt;
+```

applications/prisme/src/guidelines/components/texte/titres/titres.guidelines.md

@@ -0,0 +1,4 @@
+# Accessibilité
+
+- Si on souhaite faciliter le travail de construction de plans de documents pour nos pages, il faut proposer une mécanique qui permette d’utiliser n’importe quel niveau de titre en lui appliquant facilement n'importe quel style graphique. <br/>
+Prisme dispose de classes utilitaires `.u-hx` qui peuvent être appliquées soit sur des paragraphes, soit sur des balises `<hx>`