updated js and removed provisional

Author: BrahimMahadi

site/pages/docs/ref/stepsform/stepsform-en.hbs

@@ -6,18 +6,11 @@
 	"categoryfile": "plugins",
 	"description": "Automatically converts a form into steps.",
 	"altLangPrefix": "stepsform",
-	"dateModified": "2020-04-16"
+	"dateModified": "2025-06-02"
 }
 ---
 <span class="wb-prettify all-pre hide"></span>
 
-<div class="alert alert-warning">
-	<h2>Unstable feature</h2>
-	<p>To be used at <strong>your own risk</strong>. This feature described below can be removed in any subsequent minor/major release</p>
-	<p><small><a href="https://wet-boew.github.io/wet-boew-documentation/decision/7.html">Learn more about the design decision around provisional features.</a></small></p>
-	<p><small><a href="../provisional-en.html">Check other provisional features available.</a></small></p>
-</div>
-
 <section>
 	<h2>Purpose</h2>
 	<p>This component provides the ability to break a form into steps.</p>
@@ -63,7 +56,7 @@
 			<small>These will become your steps</small>
 			<pre><code>&lt;fieldset&gt;<br>&lt;legend&gt;Client Information&lt;/legend&gt;<br>&lt;div&gt;(Any content in the div will be hidden.)&lt;/div&gt;<br>&lt;/fieldset&gt;</code></pre>
 		</li>
-		<li>(Optional) Add the class <code>quiz</code> to the div with the class <code>wb-steps</code> to add a progress bar to the steps form.
+		<li>(Optional) Add the class <code>quiz</code> to the div with the class <code>wb-steps</code> to convert into a steps quiz format.
 			<pre><code>&lt;div class=&quot;wb-frmvld wb-steps quiz&quot;&gt;&lt;/div&gt;</code></pre>
 		</li>
 	</ol>

site/pages/docs/ref/stepsform/stepsform-fr.hbs

@@ -6,18 +6,11 @@
 	"categoryfile": "plugins",
 	"description": "Converti automatiquement un formulaire en étapes.",
 	"altLangPrefix": "stepsform",
-	"dateModified": "2020-04-16"
+	"dateModified": "2025-06-02"
 }
 ---
 <div lang="en">
 <span class="wb-prettify all-pre hide"></span>
-<p><strong>Needs translation</strong></p>
-<div class="alert alert-warning">
-	<h2>Unstable feature</h2>
-	<p>To be used at <strong>your own risk</strong>. This feature described below can be removed in any subsequent minor/major release</p>
-	<p><small><a href="https://wet-boew.github.io/wet-boew-documentation/decision/7.html">Learn more about the design decision around provisional features.</a></small></p>
-	<p><small><a href="../provisional-fr.html">Check other provisional features available.</a></small></p>
-</div>
 
 <section>
 	<h2>But</h2>
@@ -64,7 +57,7 @@
 			<small>Ces éléments <code>&lt;fieldset&gt;</code> deviendront les étapes de votre formulaire</small>
 			<pre><code>&lt;fieldset&gt;<br>&lt;legend&gt;Informations du client&lt;/legend&gt;<br>&lt;div&gt;(Tout contenu situé à l'intérieur du div sera caché.)&lt;/div&gt;<br>&lt;/fieldset&gt;</code></pre>
 		</li>
-		<li>(Facultatif) Ajouter la classe <code>quiz</code> au div avec la classe <code>wb-steps</code> pour ajouter une barre de progression au formulaire d'étapes.
+		<li>(Facultatif) Ajoutez la classe <code>quiz</code> au div avec la classe <code>wb-steps</code> pour convertir en un format de quiz par étapes.
 				<pre><code>&lt;div class=&quot;wb-frmvld wb-steps quiz&quot;&gt;&lt;/div&gt;</code></pre>
 			</li>
 	</ol>

src/i18n/base.js

@@ -257,7 +257,11 @@ wb.i18nDict = {
 	"pii-view-more-info": "@pii-view-more-info@",
 	"pii-yes-btn": "@pii-yes-btn@",
 	"pii-cancel-btn": "@pii-cancel-btn@",
-	"redacted": "@redacted@"
+	"redacted": "@redacted@",
+
+	/* Steps form */
+	"rel-preposition": "@rel-preposition@",
+	"progress-label": "@progress-label@"
 };
 
 } )( wb );

src/i18n/i18n.csv

@@ -406,3 +406,5 @@ Data-scrub,pii-header,Remove Personal information,Supprimer les informations per
 ,pii-yes-btn,Remove personal information and submit,Supprimer les informations personnelles et soumettre,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
 ,pii-cancel-btn,Go back and edit fields,Retourner et modifier les champs,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
 ,redacted,redacted,caviardé,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
+,rel-preposition, of , de ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
+,progress-label,Questionnaire progress:,Progression du questionnaire : ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,

src/plugins/stepsform/_base.scss

@@ -2,7 +2,7 @@
 * Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)
 * wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html
 */
-.provisional.wb-steps {
+.wb-steps {
 	counter-reset: fieldset_counter;
 
 	.wb-tggle-fildst {
@@ -29,67 +29,68 @@
 	.subfields {
 		border: 0;
 	}
-}
 
-.provisional.wb-steps.quiz {
-	.steps-wrapper {
-		border-bottom: none;
+	&.quiz {
+		.steps-wrapper {
+			border-bottom: none;
 
-		.buttons {
-			.btn {
-				display: inline-block;
-				margin: 10px 1%;
-				width: 48%;
+			.buttons {
+				.btn {
+					display: inline-block;
+					margin: 10px 1%;
+					width: 48%;
 
+				}
 			}
 		}
-	}
 
-	fieldset:not(:first-child):has(legend) legend {
-		border-top: 1px solid #e5e5e5;
-		padding-top: 10px;
-	}
 
-	fieldset:not(:first-child):not(:has(legend)) {
-		border-top: 1px solid #e5e5e5;
-		padding-top: 10px;
-	}
+		fieldset {
+			&:not(:first-child) legend {
+				border-top: 1px solid #e5e5e5;
+				padding-top: 10px;
+			}
 
-	fieldset {
-		legend {
-			float: none;
-		}
-	}
+			&:not(:first-child):not(:has(legend)) {
+				border-top: 1px solid #e5e5e5;
+				padding-top: 10px;
+			}
 
-	.wb-tggle-fildst {
-		> legend:before {
-			content: "";
-			counter-increment: none;
+			legend {
+				float: none;
+			}
 		}
 
-		ul {
-			list-style: none;
-			padding-left: 20px;
+		.wb-tggle-fildst {
+			> legend:before {
+				content: "";
+				counter-increment: none;
+			}
+
+			ul {
+				list-style: none;
+				padding-left: 20px;
+			}
 		}
-	}
 
-	label {
-		display: block;
-	}
+		label {
+			display: block;
+		}
 
-	progress.progressBar {
-		width: 100%;
-	}
+		progress.progressBar {
+			width: 100%;
+		}
 
-	.progressText {
-		text-align: center;
-	}
+		.progressText {
+			text-align: center;
+		}
 
-	p {
-		font-size: 20px;
+		p {
+			font-size: 20px;
+		}
 	}
 }
 
-.cnt-wdth-lmtd main .panel.stepsquiz:has( .provisional.wb-steps.quiz ) {
+.cnt-wdth-lmtd main .panel.stepsquiz:has( .wb-steps.quiz ) {
 	max-width: 65ch;
 }