From ed33e065234864744f115ad7b10394b126bfbdbd Mon Sep 17 00:00:00 2001
From: Thomas JUND <tjund@entrouvert.com>
Date: Mon, 14 Oct 2019 13:05:20 +0200
Subject: [PATCH] core: refactorisation of wcs steps component (#36765)

---
 help/fr/misc-scss.page                  | 155 ++++++++
 static/includes/_wcs.scss               |   3 +-
 static/includes/wcs/_bulk.scss          |  98 +----
 static/includes/wcs/_steps.scss         | 474 ++++++++++++++++++++++++
 templates/theme.html                    |   2 +-
 templates/wcs/front/formdata_steps.html |  30 ++
 6 files changed, 663 insertions(+), 99 deletions(-)
 create mode 100644 static/includes/wcs/_steps.scss
 create mode 100644 templates/wcs/front/formdata_steps.html

diff --git a/help/fr/misc-scss.page b/help/fr/misc-scss.page
index 4757a820..2935b53b 100644
--- a/help/fr/misc-scss.page
+++ b/help/fr/misc-scss.page
@@ -519,6 +519,161 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
 </table>
 </section>
 
+<section>
+  <title>Bloc étapes d'une démarche</title>
+
+  <p>
+    Ces paramètres contrôlent le rendu du bloc présentant les étapes ou pages d'une démarche.
+  </p>
+  <p>
+    Le rendu de ce bloc diffère automatiquement en fonction de la taille de l'écran et de la position de la <em>sidebar</em> <code>$form-sidebar-position</code> pour s'adapter aux différents terminaux :
+  </p>
+  <ul>
+    <li><em>rendu mobile :</em> seul l'étape courante est affichée avec une indication du nombre totale d'étapes ;</li>
+    <li><em>rendu horizontal :</em>Les marqueurs d'étapes (chiffres) s'affichent côte à côte et sur plusieurs lignes s'il le faut. Seul le label de l'étape en cours s'affiche ;</li>
+    <li><em>rendu vertical :</em> (s'affiche uniquement si la variable <code>$form-sidebar-position</code> a la valeur <var>left</var> ou <var>right</var>) dispose les étapes les unes au dessous des autres avec chacune leur numéro et leur label</li>. 
+  </ul>
+  <p>
+    Plusieurs options sont également disponibles pour gérer le rendu du <em>marqueur d'étape</em> (chiffre).
+  </p>
+
+  <table shade="row">
+    <tr>
+      <td><p><code>$wcs-steps-background</code></p></td>
+      <td><p>Couleur de fond du bloc</p></td>
+      <td><var>transparent</var></td>
+    </tr>
+    <tr>
+      <td><p><code>$wcs-steps-spacing</code></p></td>
+      <td>
+        <p>Fixe la taille des espacements entre les différents blocs, mais également entre les marqueurs chiffres et leur label</p>
+      </td>
+      <td><var>0.35rem</var></td>
+    </tr>
+    <tr>
+      <td><p><code>$wcs-step-color</code></p></td>
+      <td><p>Couleur du texte des étapes non courantes</p></td>
+      <td><var>#868686</var></td>
+    </tr>
+    <tr>
+      <td><p><code>$wcs-step-current-color</code></p></td>
+      <td><p>Couleur du texte de l'étape courantes</p></td>
+      <td><var>$primary-color</var></td>
+    </tr>
+    <tr>
+      <td><p><code>$wcs-step-background</code></p></td>
+      <td><p>Couleur de fond des étapes</p></td>
+      <td><var>transparent</var></td>
+    </tr>
+    <tr>
+      <td><p><code>$wcs-step-current-background</code></p></td>
+      <td><p>Couleur de fond de l'étape courante</p></td>
+      <td><var>$wcs-step-background</var></td>
+    </tr>
+    <tr>
+      <td><p><code>$wcs-step-border-bottom</code></p></td>
+      <td>
+        <p>
+          Épaisseur et couleur du filet qui sépare les étapes en mode vertical et du filet présent sous les marqueurs en mode horizontal.
+          la valeur <var>none</var> supprimera les filets.
+        </p>
+      </td>
+      <td><var>1px solid $wcs-step-color</var></td>
+    </tr>
+    <tr>
+      <td><p><code>$wcs-step-current-border-bottom</code></p></td>
+      <td>
+        <p>
+          Épaisseur et couleur du filet de l'étape courante.
+          Si <code>$wcs-step-border-bottom</code> est à <var>none</var>, ce filet sera automatiquement <var>none</var> également.
+        </p>
+      </td>
+      <td><var>3px solid $wcs-step-current-color</var></td>
+    </tr>
+    <tr>
+      <td><p><code>$wsc-step-before-piled</code></p></td>
+      <td>
+        <p>
+          Cette option n'est valable qu'en mode vertical et si <code>$wcs-step-background</code> a une valeur différente de <var>transparent</var>.
+          Avec la valeur <var>true</var>, elle va superposer les étapes passée les unes sur les autres pour gagner de la place.
+        </p>
+      </td>
+      <td><var>false</var></td>
+    </tr>
+    <tr>
+      <td><p><code>$wcs-step-marker-color</code></p></td>
+      <td><p>Couleur du chiffre des marqueurs d'étapes non courantes</p></td>
+      <td><var>$wcs-step-color</var></td>
+    </tr>
+    <tr>
+      <td><p><code>$wcs-step-current-marker-color</code></p></td>
+      <td><p>Couleur du chiffre du marqueur d'étape courante</p></td>
+      <td><var>$wcs-step-current-color</var></td>
+    </tr>
+    <tr>
+      <td><p><code>$wcs-step-marker-background</code></p></td>
+      <td><p>Couleur de fond des marqueurs d'étapes non courantes</p></td>
+      <td><var>$wcs-step-background</var></td>
+    </tr>
+    <tr>
+      <td><p><code>$wcs-step-current-marker-background</code></p></td>
+      <td><p>Couleur de fond du marqueur d'étape courante</p></td>
+      <td><var>$wcs-step-current-background</var></td>
+    </tr>
+    <tr>
+      <td><p><code>$wcs-step-marker-size</code></p></td>
+      <td><p>Taille du marqueur. La taille du marquer n'influe pas sur la taille du chiffre</p></td>
+      <td><var>2.1em</var></td>
+    </tr>
+    <tr>
+      <td><p><code>$wcs-step-current-marker-enlarge</code></p></td>
+      <td><p>Facteur d'agrandissement de la taille du marqueur courant. Une valeur de <var>1.1</var> agrandira le marqueur de 110%</p></td>
+      <td><var>1</var></td>
+    </tr>
+    <tr>
+      <td><p><code>$wcs-step-marker-type</code></p></td>
+      <td>
+        <p>
+          Défini le style des marqueurs. Les marqueurs peuvent être sous forme de carrés (par défaut), de cercles mais également liés entre eux (par une ligne).
+          Valeurs possibles: <var>tied</var>, <var>disc</var>, <var>disc tied</var>.
+          Il est possible de gérer le rendu de la ligne avec les variables <code>$wcs-step-marker-tie-color</code> et <code>$wcs-step-marker-tie-width</code>
+        </p>
+      </td>
+      <td><var>square</var></td>
+    </tr>
+    <tr>
+      <td><p><code>$wcs-step-marker-background-type</code></p></td>
+      <td>
+        <p>
+          Cette option ne fonctionnera que si <code>$wcs-step-marker-background</code> est une couleur pleine.
+          Avec la valeur <var>gradient</var>, elle permet de générer un dégradé en fond des marqueurs non courant permettant de souligner visuellement la progression.
+        </p>
+      </td>
+      <td><var>solid</var></td>
+    </tr>
+    <tr>
+      <td><p><code>$wcs-step-current-label-color</code></p></td>
+      <td>
+        <p>
+          Cette option ne fonctionnera que si <code>$wcs-step-marker-background</code> est une couleur pleine.
+          Avec la valeur <var>gradient</var>, elle permet de générer un dégradé en fond des marqueurs non courant permettant de souligner visuellement la progression.
+        </p>
+      </td>
+      <td><var>$wcs-step-current-color</var></td>
+    </tr>
+    <tr>
+      <td><var>$wcs-step-current-color</var></td>
+      <td><p>Couleur du label de l'étape courante</p></td>
+      <td><var>solid</var></td>
+    </tr>
+    <tr>
+      <td><code>$wcs-steps-small-layout-limit</code></td>
+      <td><p>Fixe la valeur du point de rupture entre le rendu mobile et horizontal</p></td>
+      <td><var>$very-small-limit</var></td>
+    </tr>
+  </table>
+</section>
+
 <section>
  <title>Cellules</title>
 
diff --git a/static/includes/_wcs.scss b/static/includes/_wcs.scss
index c7cd9c21..c1165401 100644
--- a/static/includes/_wcs.scss
+++ b/static/includes/_wcs.scss
@@ -1,3 +1,4 @@
 @import 'grid';
 @import 'wcs/bulk';
-@import 'wcs/nearby-form';
\ No newline at end of file
+@import 'wcs/steps';
+@import 'wcs/nearby-form';
diff --git a/static/includes/wcs/_bulk.scss b/static/includes/wcs/_bulk.scss
index 442f999e..da0e34a2 100644
--- a/static/includes/wcs/_bulk.scss
+++ b/static/includes/wcs/_bulk.scss
@@ -2,12 +2,9 @@
 // possible values are: left, right, top
 $form-sidebar-position: left !default;
 
-$responsive-steps: horizontal !default;
-
 // hide a bunch of elements
 div#droite,
 div#services > h3,
-div#steps h2,
 div#sidebox div#links {
 	display: none;
 }
@@ -133,51 +130,10 @@ div#services div.block-custom-text {
 	margin: 1em;
 }
 
-// steps
-div#steps ol {
-	margin: 0;
-	padding: 0;
-	list-style: none;
-	color: #868686;
-
-	& li {
-		border: 0;
-		border-bottom: 1px solid #ccc;
-		margin-bottom: 1.5em;
-		border-radius: $border-radius;
-		padding: 0.7em;
-		letter-spacing: 1px;
-	}
-	& li.current {
-		border: 0;
-		background: $title-background;
-		color: $title-color;
-		& span.label {
-			font-weight: bold;
-		}
-	}
-	& li span.marker {
-		font-size: 250%;
-		display: block;
-	}
-}
 
 
-@if ($form-sidebar-position == top) {
-	div#steps ol {
-		text-align: center;
-		li {
-			display: inline-block;
-			min-width: 7rem;
-			max-width: 11rem;
-			vertical-align: top;
-			border-bottom: none;
-		}
-	}
-}
-
-@if ($responsive-steps == horizontal) {
 @media screen and (max-width: $mobile-limit) {
+	// move #gauche on top and tracking code after steps
 	div#gauche {
 		float: none;
 		width: 100%;
@@ -193,59 +149,7 @@ div#steps ol {
 		h3 { display: inline-block; }
 		.text-tracking-code-short-text { display: none; }
 	}
-	div#steps {
-		position: static;
-		margin: 0;
-		color: #aaa;
-		white-space: nowrap;
-		overflow: hidden;
-		width: 100%;
-		& ol {
-			list-style: none;
-			padding: 0 0;
-			margin: 0;
-			text-align: left;
-			& li {
-				border: none;
-				display: inline-block;
-				margin: 0;
-				padding: 0 1em 0.7em 0;
-				list-style: none;
-				min-width: auto;
-				border-radius: 0;
-				& span.marker {
-					float: none;
-					display: inline;
-					font-size: 26px;
-					position: static;
-					padding: 2px 9px;
-					font-weight: bold;
-					color: white;
-					text-align: center;
-					background: #ddd;
-					border-radius: $border-radius;
-					border: 1px solid #ddd;
-				}
-			}
-			& li.current {
-				background: inherit;
-				color: inherit;
-				& span.label {
-					font-weight: normal;
-				}
-				& span.marker {
-					background: $title-background;
-					color: $title-color;
-					border-radius: $border-radius;
-				}
-			}
-			& li.step-before .label {
-				display: none;
-			}
-		}
-	}
 }
-}  // @endif ($responsive-steps == horizontal)
 
 @media screen and (max-width: $mobile-limit) {
 	div#gauche + div#rub_service,
diff --git a/static/includes/wcs/_steps.scss b/static/includes/wcs/_steps.scss
new file mode 100644
index 00000000..6dbf6613
--- /dev/null
+++ b/static/includes/wcs/_steps.scss
@@ -0,0 +1,474 @@
+/*
+ *	WCS Steps
+ *
+ *	Affiche les étapes/pages d'un formulaire
+ *
+ *	Template : wcs/front/formdata_steps.html
+ *
+ *	$form-sidebar-position define Steps orientation
+ *
+ */
+
+//
+//	 Config
+//
+
+// Steps Bloc
+$wcs-steps-background: transparent !default;
+$wcs-steps-spacing: 0.35rem !default; // half of default 0.7rem used in publik
+
+// Step
+$wcs-step-color: #868686 !default; // color for default marker & label
+$wcs-step-current-color: $primary-color !default;
+$wcs-step-background: transparent !default;
+$wcs-step-current-background: $wcs-step-background !default;
+$wcs-step-border-bottom: 1px solid $wcs-step-color !default;
+$wcs-step-current-border-bottom: 3px solid $wcs-step-current-color !default;
+@if ($wcs-step-border-bottom == none) {
+	$wcs-step-current-border-bottom: none;
+}
+// Step option
+$wsc-step-before-piled: false !default;
+
+// marker
+$wcs-step-marker-color: $wcs-step-color !default;
+$wcs-step-current-marker-color: $wcs-step-current-color !default;
+$wcs-step-marker-background: $wcs-step-background !default;
+$wcs-step-current-marker-background: $wcs-step-current-background !default;
+// marker options
+$wcs-step-marker-size: 2.1em !default;
+$wcs-step-current-marker-enlarge: 1 !default;
+$wcs-step-marker-type: square !default; // square || tied || disc || disc tied
+$wcs-step-marker-tie-color: $wcs-step-color !default;
+$wcs-step-marker-tie-width: 5px !default;
+$wcs-step-marker-background-type: solid !default;
+
+// Label
+$wcs-step-current-label-color: $wcs-step-current-color !default;
+
+// Breakpoints between small & horizontal layout
+$wcs-steps-small-layout-limit: $very-small-limit !default;
+
+// UTILS for custom code
+// media queries between small & horizontal layout
+$mq-max--wcs-steps-small-layout: "max-width: #{$wcs-steps-small-layout-limit}";
+$mq-min--wcs-steps-horizontal-layout: "min-width: #{$wcs-steps-small-layout-limit+1}";
+//  Desktop Steps orientation sass mixins
+//	Steps orientations depend on media-queries & $form-sidebar-position
+@mixin desktop-horizontal-steps() {
+	@if ($form-sidebar-position == top) {
+		@media (min-width: $mobile-limit + 1) {
+			@content;
+		}
+	}
+}
+@mixin desktop-vertical-steps() {
+	@if ($form-sidebar-position == left or $form-sidebar-position == right) {
+		@media (min-width: $mobile-limit + 1) {
+			@content;
+		}
+	}
+}
+
+
+
+/*
+ *	Default Steps (with SQUARES markers)
+ */
+
+/* Steps bloc */
+.wcs-steps {
+	background: $wcs-steps-background;
+	margin-bottom: 0.7rem;
+	border-radius: $border-radius;
+
+	@if $wcs-steps-background != transparent {
+		padding: $wcs-steps-spacing;
+	}
+
+	// hide injected h2
+	h2 {
+		display: none;
+	}
+
+	// hide if only one step
+	&.steps-1 {
+		display: none;
+	}
+
+	&--list {
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		color: $wcs-step-color;
+	}
+}
+
+/* Step item */
+.wcs-step {
+	border-radius: $border-radius;
+	background-color: $wcs-step-background;
+	display: -ms-flexbox;
+	display: flex;
+
+	&--marker {
+		// marker is abbr tag
+		text-decoration: none;
+		box-sizing: border-box;
+
+		font-size: 1em;
+		text-align: center;
+
+		display: -ms-flexbox;
+		display: flex;
+
+		color: $wcs-step-marker-color;
+		background: $wcs-step-marker-background;
+		border-radius: $border-radius;
+
+		width: $wcs-step-marker-size;
+		height: $wcs-step-marker-size;
+		-ms-flex: 0 0 $wcs-step-marker-size;
+		flex: 0 0 $wcs-step-marker-size;
+		
+		&-nb {
+			margin: auto;
+		}
+
+		&-total {
+			display: none;
+		}
+	}
+
+	&--label {
+		display: block;
+		-ms-grid-row-align: center;
+		align-self: center;
+		letter-spacing: 1px;
+		line-height: 1.25;
+	}
+
+
+	// If step is current
+	&.current {
+		font-weight: bold;
+		background: $wcs-step-current-background;
+	}
+
+	&.current & {
+		&--marker {
+			background: $wcs-step-current-marker-background;
+			color: $wcs-step-current-marker-color;
+			@if ($wcs-step-current-marker-enlarge != 1) {
+				transform: scale($wcs-step-current-marker-enlarge);		
+			}
+		}
+		&--label {
+			color: $wcs-step-current-label-color;
+		}
+	}
+
+	// If step is NOT current
+	&:not(.current) & {
+		&--label {
+			display: none;
+		}
+	}
+}
+
+/*	Sidebar on TOP, SMALL LAYOUT (very-small viewport)
+ *	Display only current step with nb and total in marker
+ */
+@media ($mq-max--wcs-steps-small-layout) {
+	.wcs-step {
+		@if ($wcs-step-background != transparent or $wcs-step-current-background != transparent) {
+			padding: $wcs-steps-spacing;
+		}
+
+		&--marker {
+
+			$size: $wcs-step-marker-size + 0.8;
+
+			width: $size;
+			height: $size;
+			-ms-flex: 0 0 auto;
+			flex: 0 0 auto;
+			-ms-flex-align: center;
+			align-items: center;
+			-ms-flex-pack: center;
+			justify-content: center;
+
+			&-nb {
+				margin: 0;
+				transform: translateY(-0.5em);
+				-ms-flex-order: 1;
+				order: 1;
+			}
+
+			&-total {
+				display: block;
+				transform: translateY(0.5em);
+				font-size: 0.75em;
+				font-weight: normal;
+				-ms-flex-order: 3;
+				order: 3;
+			}
+
+			// add slash
+			&::before {
+				content: "";
+				display: block;
+				-ms-flex: 0 0 0.1em;
+				flex: 0 0 0.1em;
+				height: 2em;
+				margin: 0 0.1em;
+				background: currentColor;
+				transform: rotate(30deg);
+				-ms-flex-order: 2;
+				order: 2;
+			}
+		}
+
+		&--label {
+			margin-left: $wcs-steps-spacing*2;
+		}
+
+		// If step is NOT current
+		&:not(.current) {
+			display: none;
+		}
+	}
+}
+
+/*	Horizontal Layout
+ *	Sidebar on TOP, SMALL and more viewport
+ *	Diplay all marker, but only current Label
+ */
+@media ($mq-min--wcs-steps-horizontal-layout) {
+
+	.wcs-steps {
+		&--list {
+			position: relative;
+			display: -ms-flexbox;
+			display: flex;
+			-ms-flex-wrap: wrap;
+			flex-wrap: wrap;
+
+			// keep space for label
+			margin-bottom: 2em;
+		}
+	}
+
+	.wcs-step {
+		margin-bottom: $wcs-steps-spacing;
+		margin-right: $wcs-steps-spacing*2;
+		border-bottom: $wcs-step-border-bottom;
+		&:last-child {
+			margin-right: 0;
+		}
+
+		&--label {
+			position: absolute;
+			top: 100%;
+			left: 0;
+			width: 100%;
+			padding-bottom: $wcs-steps-spacing;
+			text-align: left;
+		}
+
+		&.current {
+			border-bottom: $wcs-step-current-border-bottom;
+		}
+	}
+
+
+}
+
+
+@include desktop-horizontal-steps() {
+	.wcs-steps {	
+		font-size: 1.25em;
+		&--list {
+			justify-content: center;
+		}
+	}
+	.wcs-step {
+		margin-bottom: $wcs-steps-spacing*3;
+		margin-right: $wcs-steps-spacing*3;
+		&--label {
+			text-align: center;
+		}
+	}
+}
+
+/*	Vertical Steps
+ *	Sidebar on LEFT or RIGHT, DESKTOP only
+ *	Display All steps with marker and label. One below the other.
+ */
+@include desktop-vertical-steps() {
+	.wcs-steps {
+		font-size: 1.25em;
+
+		// display even if only one step
+		&.steps-1 {
+			display: block;
+		}
+
+		&--list {
+			-ms-flex-wrap: nowrap;
+			flex-wrap: nowrap;
+			-ms-flex-direction: column;
+			flex-direction: column;
+			// remove keep space for label
+			padding-bottom: 0;
+		}
+	}
+
+	.wcs-step {
+		margin-bottom: $wcs-steps-spacing;
+		
+		@if $wcs-step-border-bottom != none {
+			padding-bottom: $wcs-steps-spacing;
+		}
+		@if ($wcs-step-background != transparent or $wcs-step-current-background != transparent) {
+			padding: $wcs-steps-spacing;
+		}
+
+		margin-right: 0;
+
+		&--label {
+			position: static;
+			font-size: 0.7em;
+			margin-left: $wcs-steps-spacing;
+			padding-bottom: 0;
+		}
+
+		// If step is NOT current
+		&:not(.current) & {
+			&--label {
+				display: block;
+			}
+		}
+	}
+}
+
+
+/*
+ *	OPTION marker-background-type: gradient.
+ *	Generate automatically a gradient based on background-color
+ */
+
+@if $wcs-step-marker-background-type == gradient {
+	.wcs-step {
+		&--marker {
+			background-attachment: fixed;
+			@media (min-width: $very-small-limit + 1) {			
+				background-image: linear-gradient(to right, lighten($wcs-step-marker-background, 10%), darken($wcs-step-marker-background, 10%));
+			}
+
+			@include desktop-vertical-steps() {
+				background-image: linear-gradient(to bottom, lighten($wcs-step_marker-background, 10%), darken($wcs-step_marker-background, 10%));
+			}
+		}
+	}
+}
+
+/*
+ *	OPTION Pile Step Before
+ *	Work only for
+ *		* horizontal mode: desktop breakpoint and sidebar on left or right
+ *		* with background-color on step
+ */
+@if ($wsc-step-before-piled ) {
+	@include desktop-vertical-steps() {
+		.wcs-step {	
+			&:not(:first-child) {
+				&.step-before, 
+				&.current {
+					box-shadow: 0 -4px 4px -4px darken($wcs-step-background, 40%);
+				}
+			}
+
+			&.step-before, 
+			&.current {
+				z-index: 1;
+				transition: margin 400ms, box-shadow 400ms;
+			}
+			
+			&.step-before {
+				margin-bottom: calc( (#{$wcs-step-marker-size} + #{$wcs-steps-spacing * 2}) / 2 * -1);
+
+				&:hover {
+					margin-bottom: $wcs-steps-spacing;
+
+					& + .wcs-step {
+						box-shadow: 0 0 0 0 darken($wcs-step-background, 40%);
+					}
+				}
+			}
+		}
+	}
+}
+
+
+/*
+ *	OPTION marker type DISC
+ */
+@if (str-index(quote($wcs-step-marker-type), 'disc')) {
+	.wcs-step {
+		&--marker {
+			border-radius: 50% !important;
+
+			@media ($mq-max--wcs-steps-small-layout) {
+				$size: $wcs-step-marker-size + 1.4;
+				width: $size;
+				height: $size;
+			}
+		}
+	}
+}
+
+/*
+ *	OPTION marker type TIED
+ */
+@if (str-index(quote($wcs-step-marker-type), 'tied')) {
+	
+	.wcs-step {
+		&:not(:last-child) {
+			@media ($mq-min--wcs-steps-horizontal-layout) {
+				&::after {
+					content: "";
+					display: block;
+					height: $wcs-step-marker-tie-width;
+					-ms-flex: 0 0 calc(100% + #{$wcs-steps-spacing});
+					flex: 0 0 calc(100% + #{$wcs-steps-spacing});
+					background-color: $wcs-step-marker-tie-color;
+					margin: auto;
+				}
+			}
+
+			@include desktop-vertical-steps() {
+				position: relative;
+
+				&::after {
+					height: calc(100% + #{$wcs-steps-spacing});
+					width: $wcs-step-marker-tie-width;
+
+					position: absolute;
+					z-index: 1;
+					top: $wcs-steps-spacing;
+					left: calc( (#{$wcs-step-marker-size} - #{$wcs-step-marker-tie-width}) / 2 );
+
+					@if $wcs-step-background != transparent {
+						left: calc( (#{$wcs-step-marker-size} - #{$wcs-step-marker-tie-width}) / 2 + #{$wcs-steps-spacing});
+					} 
+				}
+			}	
+		}
+
+		&--marker {
+			position: relative;
+			z-index: 2;
+		}
+	}
+}
diff --git a/templates/theme.html b/templates/theme.html
index 78969643..49515329 100644
--- a/templates/theme.html
+++ b/templates/theme.html
@@ -49,7 +49,7 @@
    </div>
 
    <div id="page" {% block page-args %}{% endblock %}>
-    <header role="banner">
+    <header role="banner" class="site-header">
     <div id="header-wrapper" >
     {% block header-pre %}{% endblock %}
     <div id="header">
diff --git a/templates/wcs/front/formdata_steps.html b/templates/wcs/front/formdata_steps.html
new file mode 100644
index 00000000..d0a5f8cb
--- /dev/null
+++ b/templates/wcs/front/formdata_steps.html
@@ -0,0 +1,30 @@
+<header id="steps" class="wcs-steps steps-{{page_labels|length}}">
+<ol class="wcs-steps--list">
+{% for page_label in page_labels %}
+{% spaceless %}
+<li {% if forloop.counter != current_page_no %}aria-hidden="true"{% endif %}
+	class="wcs-step
+           {% if forloop.first %}first{% endif %}
+           {% if forloop.last %}last{% endif %}
+           {% if forloop.counter == current_page_no %}current{% endif %}
+           {% if forloop.counter < current_page_no %}step-before{% endif %}
+           {% if forloop.counter > current_page_no %}step-after{% endif %}" >
+	<abbr 
+		{% if forloop.counter == current_page_no %}
+			aria-label="Étape {{ forloop.counter }} sur {{ page_labels|length }}:"
+			title="Étape {{ forloop.counter }} sur {{ page_labels|length }}"
+		{% endif %}
+			class="marker wcs-step--marker">
+		<span class="wcs-step--marker-nb">
+			{{ forloop.counter }}			
+		</span>
+		<span class="wcs-step--marker-total">
+			{{ page_labels|length }}
+		</span>
+	</abbr>
+	<span class="label wcs-step--label">{{ page_label }}</span>
+</li>
+{% endspaceless %}
+{% endfor %}
+</ol>
+</header>
-- 
2.20.1

