Thematic: Retirement life event

méli-mélo/th-retirement-hub/meta.md

@@ -0,0 +1,47 @@
+---
+feature: thématique
+lang: en
+title: Retirement Hub theme
+description: Background colours used for empathy.
+componentName: th-empathy
+expiry: March 33, 3033
+mainPage: empathy.html
+cssClass:
+- retirement-hub
+- btn-retirement-hub
+- text-retirement-hub
+- bg-retirement-hub
+- (possibly more to come)
+jsFunctions:
+- init - on detection of .provisional.gc-retirement-hub (NOT in place yet)
+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 standards.
+  Tested by @EricDunsworth. 3033-01-33.
+peNote:
+- The <code>btn-retirement-hub</code> class must be accompanied with a fall back button class such as <code>btn-default</code> or <code>btn-primary</code>.
+pages:
+  examples:
+    - title: Retirement Hub theme
+      language: en
+      path: retirement.html
+    - title: anding page layout
+      language: en
+      path: Landing.html
+    - title: Stories page layout
+      language: en
+      path: stories.html
+    - title: Questionnaire layout
+      language: en
+      path: questionnaire.html
+    - title: Checklist layout
+      language: en
+      path: checklist.html
+sponsor: Eric Dunsworth on behalf of ESDC - Portfolio Web
+
+changes:
+  - date: 3033-01-33
+    description: [Stub]
+    publicImpact: [Stub]
+
+output: false
+---

méli-mélo/th-retirement-hub/retirement-hub.html

@@ -0,0 +1,190 @@
+---
+title: Retirement Hub theme
+dateModified: 2033-03-33
+description: Retirement Hub 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="retirement-hub">{{ page.title }}</h1>
+<p>(<strong>NOTE:</strong> Currently a copy of <code>méli-mélo/th-vitality/vitality.html</code> with different intro, replaced class prefixes, CSS files references are wrong)</p>
+<p>The Retirement Hub uses a calming palette of greyish teal, light blue, and grey to convey trust, balance, and clarity. These colors create a professional yet reassuring atmosphere, helping users feel confident and at ease while planning for retirement.</p>
+{% assign metadata = site.pages | where: "output", "false" | where: "componentName", "th-retirement-hub" | 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>.retirement-hub</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 colours to the navigation buttons, the progress bar and to the <code>&lt;legend&gt;</code> text.</dd>
+    <dt><code>.cards</code></dt>
+    <dd>Cards can be used with <code>.light-hover</code> or <code>.dark-hover</code> to change the colours on hover or active states.</dd>
+	<dt><code>.text-retirement-hub</code></dt>
+    <dd>Style the content with the primary thematic color.</dd>
+	<dt><code>.bg-retirement-hub</code></dt>
+    <dd>Style the content's background with the primary thematic color.</dd>
+	<dt><code>.bg-retirement-hub-light</code></dt>
+    <dd>Style the content's background with the secondary thematic color.</dd>
+	<dt><code>.btn-retirement-hub</code></dt>
+    <dd>Along with <code>.btn-primary</code> or <code>.btn-default</code>, set a green colour thematic to buttons.</dd>
+	<dt><code>.printable-checklist</code></dt>
+    <dd>Displays a checkbox besides open summary elements on print media.</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="retirement-hub"&gt;&lt;-- Page title --&gt;&lt;/h1&gt;</code></pre>
+
+<h3>Cards</h3>
+<p>Example of cards used in a grid layout.</p>
+<div class="row retirement-hub">
+	<div class="col-xs-12 col-md-4">
+		<div class="cards">
+			<h4><a href="#" class="stretched-link">Default card title</a></h4>
+			<p>Default card content</p>
+		</div>
+	</div>
+	<div class="col-xs-12 col-md-4">
+		<div class="cards light-hover">
+			<h4><a href="#" class="stretched-link">Light card with hover</a></h4>
+			<p>Default card content</p>
+		</div>
+	</div>
+	<div class="col-xs-12 col-md-4">
+		<div class="cards dark-hover">
+			<h4><a href="#" class="stretched-link">Dark card with hover</a></h4>
+			<p>Default card content</p>
+		</div>
+	</div>
+</div>
+<h4>Code</h4>
+<pre><code>&lt;div class="row retirement-hub"&gt;
+	&lt;div class="col-xs-12 col-md-4"&gt;
+		&lt;div class="cards"&gt;
+			&lt;h4&gt;&lt;a href="#" class="stretched-link"&gt;Default card title&lt;/a&gt;&lt;/h4&gt;
+			&lt;p&gt;Default card content&lt;/p&gt;
+		&lt;/div&gt;
+	&lt;/div&gt;
+	&lt;div class="col-xs-12 col-md-4"&gt;
+		&lt;div class="cards light-hover"&gt;
+			&lt;h4&gt;&lt;a href="#" class="stretched-link"&gt;Light card with hover&lt;/a&gt;&lt;/h4&gt;
+			&lt;p&gt;Default card content&lt;/p&gt;
+		&lt;/div&gt;
+	&lt;/div&gt;
+	&lt;div class="col-xs-12 col-md-4"&gt;
+		&lt;div class="cards dark-hover"&gt;
+			&lt;h4&gt;&lt;a href="#" class="stretched-link"&gt;Dark card with hover&lt;/a&gt;&lt;/h4&gt;
+			&lt;p&gt;Default card content&lt;/p&gt;
+		&lt;/div&gt;
+	&lt;/div&gt;
+&lt;/div&gt;</code></pre>
+
+<h3>Green text</h3>
+<p class="text-retirement-hub">This is green text</p>
+<h4>Code</h4>
+<pre><code>&lt;p class="text-retirement-hub"&gt;This is green text&lt;/p&gt;</code></pre>
+
+<h3>Green background</h3>
+<p class="bg-retirement-hub">This is on a green background</p>
+<h4>Code</h4>
+<pre><code>&lt;p class="bg-retirement-hub"&gt;This is on a green background&lt;/p&gt;</code></pre>
+
+<h3>Light green background</h3>
+<p class="bg-retirement-hub-light">This is on a light green background</p>
+<h4>Code</h4>
+<pre><code>&lt;p class="bg-retirement-hub-light"&gt;This is on a light green background&lt;/p&gt;</code></pre>
+
+<h3>Light Green Button</h3>
+<button class="btn btn-default btn-retirement-hub" type="button">Button</button>
+<h4>Code</h4>
+<pre><code>&lt;button class="btn btn-default btn-retirement-hub" 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 retirement-hub 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 retirement-hub panel-body"&gt;
+    &lt;!-- Steps Form --&gt;
+&lt;/div&gt;</code></pre>
+
+<h3>Open summary elements with checkboxes in print view</h3>
+<ul class="printable-checklist">
+	<li>
+		<details>
+			<summary>Item 1 to do</summary>
+			<p>Description of what needs to be done.</p>
+		</details>
+	</li>
+	<li>
+		<details>
+			<summary>Item 2 to do</summary>
+			<p>The expanded summaries will have a checkbox besides them on print media.</p>
+		</details>
+	</li>
+</ul>
+<h4>Code</h4>
+<pre><code>&lt;ul class="printable-checklist"&gt;
+	&lt;li&gt;
+		&lt;details&gt;
+			&lt;summary&gt;Item 1 to do&lt;/summary&gt;
+			&lt;p&gt;Description of what needs to be done.&lt;/p&gt;
+		&lt;/details&gt;
+	&lt;/li&gt;
+	&lt;li&gt;
+		&lt;details&gt;
+			&lt;summary&gt;Item 2 to do&lt;/summary&gt;
+			&lt;p&gt;The expanded summaries will have a checkbox besides them on print media.&lt;/p&gt;
+		&lt;/details&gt;
+	&lt;/li&gt;
+&lt;/ul&gt;</code></pre>

méli-mélo/th-retirement-hub/retirement-hub.js

@@ -0,0 +1,52 @@
+/**
+ * @title WET-BOEW GC Empathy quiz card mutator
+ * @overview Plugin used to mutate DOM elements depending on viewport size, in order to follow order accessibility criteria while respecting UI
+ * @license wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html
+ * @author @BrahimMahadi
+ */
+( function( $, window, wb ) {
+"use strict";
+
+var $document = wb.doc,
+	componentName = "gc-empathy",
+	selector = ".provisional." + componentName,
+	initEvent = "wb-init " + selector,
+	$quizDiv,
+
+	/**
+	 * @method init
+	 * @param {jQuery Event} event Event that triggered the function call
+	 */
+	init = function( event ) {
+
+		// Start initialization
+		// returns DOM object = proceed with init
+		// returns undefined = do not proceed with init (e.g., already initialized)
+		var elm = wb.init( event, componentName, selector ),
+			$elm;
+
+		if ( elm && event.currentTarget === event.target ) {
+			$elm = $( elm );
+
+			$quizDiv = $( ".quiz-content" );
+
+			if ( $quizDiv ) {
+				$quizDiv.clone().addClass( "hidden-md hidden-lg" ).insertBefore( " .services-and-information " );
+				$quizDiv.addClass( "hidden-xs hidden-sm" );
+			}
+
+			// Prevent on-load blinking on desktop
+			elm.classList.add( "no-blink" );
+
+			// Identify that initialization has completed
+			wb.ready( $elm, componentName );
+		}
+	};
+
+// Bind the init event of the plugin
+$document.on( "timerpoke.wb " + initEvent, selector, init );
+
+// Add the timer poke to initialize the plugin
+wb.add( selector );
+
+} )( jQuery, window, wb );