New thematic for starting or expanding a family.

méli-mélo/2024-04-stepsquiz/js/stepsquiz.js

@@ -15,25 +15,25 @@ progressLabel = "Questionnaire progress:";
 if ( wb.lang === "fr" ) {
 	relpreposition = " de ";
 	progressLabel = "Progression du questionnaire : ";
-
 }
 
-
 //Detect the enhancement of the quiz
-var quizSelector = ".provisional.wb-steps.quiz",
-	instances = document.querySelectorAll( quizSelector );
+var quizSelector = ".provisional.wb-steps.quiz";
 
-//How many quiz instances in the page
-instances.forEach ( ( instance ) => {
-	let $instance = $( instance );
+//Initialize all instances
+var init = function( e ) {
+	let $instance = $( e.currentTarget );
 
 	// Calculate number of questions
-	let numQuestion = $( "fieldset", $instance ).length;
+	let numQuestion = $( ".steps-wrapper", $instance ).length;
 
 	// Addition to UI (Ex: progress bar)
-	( "form", $instance ).prepend( "<label><span class='wb-inv'>" + progressLabel + "</span><progress class='progressBar' max='" + numQuestion + "'></progress><p class='progressText' role='status'></p></label>" );
+	if ( !$.contains( $instance, "progress" ) ) {
+		$( "form", $instance ).prepend( "<label class='full-width'><span class='wb-inv'>" + progressLabel + "</span><progress class='progressBar' max='" + numQuestion + "'></progress><p class='progressText' role='status'></p></label>" );
+	}
 
-});
+	hideOtherSteps( e );
+}
 
 var hideOtherSteps = function( e ) {
 	// Get wb-steps component
@@ -42,7 +42,6 @@ var hideOtherSteps = function( e ) {
 
 	if ( currentElement.classList.contains( "quiz" ) && currentElement.classList.contains( "wb-steps" ) ) {
 		steps = currentElement;
-
 	} else {
 		steps = $( currentElement ).parentsUntil( quizSelector ).parent().get( 0 );
 	}
@@ -77,6 +76,6 @@ var hideOtherSteps = function( e ) {
 $( document ).on( "click", quizSelector + " .steps-wrapper div.buttons > :button", hideOtherSteps );
 
 //Init
-$( quizSelector ).on( "wb-ready.wb-steps", hideOtherSteps );
+$( quizSelector ).on( "wb-ready.wb-steps", init );
 
 } )( jQuery, document );

méli-mélo/2024-04-stepsquiz/stepsquiz.css

@@ -9,8 +9,7 @@
 }
 
 /* Customisation for the progress bar and text */
-.provisional.wb-steps.quiz progress.progressBar,
-.provisional.wb-steps.quiz label {
+.provisional.wb-steps.quiz progress.progressBar {
 	/*-webkit-appearance: progress-bar;*/
 	width: 100%;
 }

méli-mélo/th-vitality/meta.md

@@ -0,0 +1,24 @@
+---
+feature: thématique
+lang: en
+title: Vitality theme
+description: Background colours used for vitality.
+componentName: th-vitality
+expiry: November 30, 2025
+mainPage: vitality.html
+cssClass:
+- vitality
+- btn-vitality
+a11yStatement: >
+  These colours meet the colour contrast requirements as outlined in WCAG 2.1 AA Success Criterion 1.4.3: Contrast (Minimum). After validation using webaim online contrast checker, I can certified that the color matches used in this thematic are meeting a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and also a contrast ratio of at least 3:1 for graphics and user interface components. I did my due diligence and to knowledge and from my understanding, all elements of this thematic are meeting WCAG 2.1 AA standrds.
+  Tested by Francis Snoddy, [email protected]. 2025-01-17.
+peNote:
+- The <code>btn-vitality</code> class must be accompagnied with a fall back button class such as <code>btn-default</code> or <code>btn-primary</code>.
+pages:
+  examples:
+    - title: Vitality theme
+      language: en
+      path: vitality.html
+sponsor: ESDC - Portfolio web
+output: false
+---

méli-mélo/th-vitality/style.css

@@ -0,0 +1,175 @@
+@charset "UTF-8";
+
+@media print {
+
+  .printable-checklist details[open] > summary::marker {
+
+    content: "\2B1C\0020";
+
+    display: none;
+
+  }
+
+}
+
+/*
+
+            Set Thematic colours
+
+*/
+
+h1#wb-cont.vitality {
+
+  border-bottom: 0.18em solid #1b6c1c;
+
+  border-image: linear-gradient(to right, #1b6c1c 71px, transparent 71px);
+
+  border-image-slice: 1;
+
+}
+
+.text-vitality {
+
+  color: #1b6c1c;
+
+}
+
+.bg-vitality {
+
+  background-color: #1b6c1c;
+
+  color: #fff;
+
+}
+
+.bg-vitality-light {
+
+  background-color: #d8eeca;
+
+}
+
+.cards {
+
+  padding: 20px;
+
+  box-shadow: 0px 2px 3px 0px #cccccc;
+
+  border-radius: 10px;
+
+}
+
+.btn-vitality.btn-primary, .vitality.wb-steps.quiz .btn-primary {
+
+  background-color: #1b6c1c;
+
+}
+
+.btn-vitality.btn-primary:active, .btn-vitality.btn-primary:focus, .btn-vitality.btn-primary:hover, .vitality.wb-steps.quiz .btn-primary:active, .vitality.wb-steps.quiz .btn-primary:focus, .vitality.wb-steps.quiz .btn-primary:hover {
+
+  background-color: #d8eeca;
+
+  color: #1b6c1c;
+
+}
+
+.btn-vitality.btn-default, .vitality.wb-steps.quiz .btn-default {
+
+  background-color: #fff;
+
+  border-color: #1b6c1c;
+
+  color: #1b6c1c;
+
+}
+
+.btn-vitality.btn-default:active, .btn-vitality.btn-default:focus, .btn-vitality.btn-default:hover, .vitality.wb-steps.quiz .btn-default:active, .vitality.wb-steps.quiz .btn-default:focus, .vitality.wb-steps.quiz .btn-default:hover {
+
+  background-color: #d8eeca;
+
+  border-color: #1b6c1c;
+
+  color: #1b6c1c;
+
+}
+
+.vitality .cards.dark-hover:hover {
+
+  background-color: #1b6c1c;
+
+  color: white;
+
+}
+
+.vitality .cards.dark-hover:hover a {
+
+  background-color: #1b6c1c;
+
+  color: white;
+
+}
+
+.vitality .cards.light-hover:hover {
+
+  background-color: #d8eeca;
+
+  color: black;
+
+}
+
+.vitality .cards.light-hover:hover a {
+
+  color: black;
+
+}
+
+.vitality.wb-steps.quiz progress {
+
+  -webkit-appearance: none;
+
+  -moz-appearance: none;
+
+  appearance: none;
+
+  border: #1b6c1c solid 1px;
+
+  background-color: #777;
+
+  color: #d8eeca;
+
+}
+
+.vitality.wb-steps.quiz progress::-webkit-progress-bar {
+
+  background-color: #777;
+
+}
+
+.vitality.wb-steps.quiz progress::-webkit-progress-value {
+
+  background-color: #d8eeca;
+
+}
+
+.vitality.wb-steps.quiz progress::-moz-progress-bar {
+
+  background-color: #d8eeca;
+
+}
+
+.vitality.wb-steps.quiz .gc-chckbxrdio input[type=radio]:checked + label::before {
+
+  background: #1b6c1c;
+
+}
+
+.vitality.wb-steps.quiz .gc-chckbxrdio input[type=checkbox]:checked + label::after {
+
+  border-color: #1b6c1c;
+
+}
+
+.vitality.provisional.wb-steps.quiz .wb-tggle-fildst > legend.wb-steps-active {
+
+  color: #1b6c1c;
+
+}

méli-mélo/th-vitality/vitality.html

@@ -0,0 +1,94 @@
+---
+title: Vitality theme
+dateModified: 2025-01-17
+description: Vitality CSS styles
+lang: en
+pageclass: cnt-wdth-lmtd
+css:
+- style.css
+- https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/méli-mélo/2025-04-nahanni.css
+script:
+- https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/méli-mélo/2025-04-nahanni.js
+layout: without-h1
+---
+<h1 property="name" id="wb-cont" class="vitality">{{ page.title }}</h1>
+<p>The colors offered by this theme aim to evoke a sense of vitality for the user during certain life events, such as the addition of a child to your family.</p>
+{% assign metadata = site.pages | where: "output", "false" | where: "componentName", "th-vitality" | first %}
+<p>Sponsor: {{ metadata.sponsor }}</p>
+<p>Accessibility statement: {{ metadata.a11yStatement }}</p>
+<p>Progressive enhancement note:</p>
+<ul>
+    {% for peNote in metadata.peNote %}
+    <li>{{ peNote }}</li>
+    {% endfor %}
+</ul>
+
+<h2>CSS classes</h2>
+<dl>
+    <dt><code>.vitality</code></dt>
+    <dd>When applied to the <code>&lt;h1&gt;</code> element it sets a green underline to the title element of the page.</dd>
+    <dd>When applied to the Steps Quiz along with the <code>wb-steps</code> and <code>quiz</code> it set the thematic colors to the navigation buttons, the progress bar and to the <code>&lt;legend&gt;</code> text.</dd>
+    <dt><code>.btn-vitality</code></dt>
+    <dd>Along with <code>.btn-primary</code> or <code>.btn-default</code>, set a green colour thematic to buttons.</dd>
+</dl>
+
+<h2>Examples</h2>
+<h3>Green Underline to the <code>&lt;h1&gt;</code> </h3>
+<p>The example has been applied to the <code>&lt;h1&gt;</code> element of this page.</p>
+<h4>Code</h4>
+<pre><code>&lt;h1 property="name" id="wb-cont" class="vitality"&gt;&lt;-- Page title --&gt;&lt;/h1&gt;</code></pre>
+
+<h3>Green Button</h3>
+<button class="btn btn-primary btn-vitality" type="button">Button</button>
+<h4>Code</h4>
+<pre><code>&lt;button class="btn btn-primary btn-vitality" type="button"&gt;Button&lt;/button&gt;</code></pre>
+
+<h3>Light Green Button</h3>
+<button class="btn btn-default btn-vitality" type="button">Button</button>
+<h4>Code</h4>
+<pre><code>&lt;button class="btn btn-default btn-vitality" type="button"&gt;Button&lt;/button&gt;</code></pre>
+
+<h3>Steps Form with progress bar</h3>
+<div class="panel panel-default stepsquiz">
+    <div class="wb-frmvld provisional wb-steps quiz vitality panel-body">
+        <form action="#" id="progress-example">
+            <fieldset>
+                <legend>Which is your favorite fruit?</legend>
+                <div>
+                    <p>My favorite fruit is:</p>
+                    <ul class="list-unstyled lst-spcd-2 gc-chckbxrdio">
+                        <li class="radio">
+                            <input type="radio" name="fruit" id="apple-1" value="apple">
+                            <label for="apple-1">Apple</label>
+                        </li>
+                        <li class="radio">
+                            <input type="radio" name="fruit" id="orange-1" value="orange">
+                            <label for="orange-1">Orange</label>
+                        </li>
+                    </ul>
+                </div>
+            </fieldset>
+            <fieldset>
+                <legend>Condiments</legend>
+                <div>
+                    <p>Choose your condiments:</p>
+                    <ul class="list-unstyled lst-spcd-2 gc-chckbxrdio">
+                        <li class="checkbox">
+                            <input type="checkbox" id="ketchup-1" value="ketchup" name="condiments">
+                            <label for="ketchup-1">Ketchup</label>
+                        </li>
+                        <li class="checkbox">
+                            <input type="checkbox" id="relish-1"  value="relish" name="condiments">
+                            <label for="relish-1">Relish</label>
+                        </li>
+                    </ul>
+                </div>
+            </fieldset>
+            <input type="submit" class="btn btn-primary" />
+        </form>
+    </div>
+</div>
+<h4>Code</h4>
+<pre><code>&lt;div class="wb-frmvld provisional wb-steps quiz vitality panel-body"&gt;
+    &lt;!-- Steps Form --&gt;
+&lt;/div&gt;</code></pre>