Add checklist funcitonality

wet-boew · Dec 13, 2023 · c9784f8 · c9784f8
1 parent fd6eca3
commit c9784f8
Show file tree

Hide file tree

Showing 3 changed files with 232 additions and 0 deletions.
diff --git a/méli-mélo/2023-05-checklist/checklist.js b/méli-mélo/2023-05-checklist/checklist.js
@@ -0,0 +1,65 @@
+/**
+ * @title GCWeb Checklist plugin
+ * @overview Plugin contained to show an example of a custom GCWeb checklist plugin
+ * @license wet-boew.github.io/gcweb/License-en.html / wet-boew.github.io/gcweb/Licence-fr.html
+ * @author @delisma
+ */
+window.addEventListener( "DOMContentLoaded", function( event ) {
+( function( $, window, wb ) {
+"use strict";
+
+/*
+ * Variable and function definitions.
+ * These are global to the plugin - meaning that they will be initialized once per page,
+ * not once per instance of plugin on the page. So, this is a good place to define
+ * variables that are common to all instances of the plugin on a page.
+ */
+var componentName = "gc-checklist",
+	selector = ".provisional." + componentName,
+	initEvent = "wb-init" + selector,
+	$document = wb.doc,
+
+	/**
+	 * @method init
+	 * @param {jQuery Event} event Event that triggered the function call
+	 */
+	init = function( event ) {
+		var elm = wb.init( event, componentName, selector ),
+			$elm;
+
+			// settings;
+
+		if ( elm ) {
+			var $elm = $( elm );
+
+			$elm.trigger( "click", function() {
+			} );
+			wb.ready( $elm, componentName );
+		}
+	};
+
+	// Add your plugin event handler
+$document.on( "click", selector + " input[type=checkbox]", function( event ) {
+	var parent = $( event.target ).parentsUntil( selector ).parent(),
+		$parent = $( parent );
+
+	if ( $parent.find( "input[type=checkbox]:not(:checked)" ).filter( "[required]" ).length ) {
+
+		// Failure state
+		$parent.find( ".output .success-message" ).addClass( "hidden" );
+		$parent.find( ".output .failure-message" ).removeClass( "hidden" );
+	} else {
+
+		// Success state
+		$parent.find( ".output .success-message" ).removeClass( "hidden" );
+		$parent.find( ".output .failure-message" ).addClass( "hidden" );
+	};
+} );
+
+// 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 );
+});
diff --git a/méli-mélo/2023-05-checklist/index.html b/méli-mélo/2023-05-checklist/index.html
@@ -0,0 +1,121 @@
+---
+title: Checklist
+dateModified: 2023-04-12
+description: "Allows users to get feedback when completing a checklist"
+lang: en
+---
+<p>Allows users to get feedback when completing a checklist</p>
+
+<h2>GCWeb implementation plan</h2>
+
+{% assign implPlan = site.pages | where: "output", "false" | where: "componentName", "2023-05-checklist" | first %}
+
+<ul>
+{% for deliverable in implPlan.implementationPlan %}
+	<li>{{ deliverable.due }} - {{ deliverable.what }}</li>
+{% endfor %}
+</ul>
+
+<p>Todo and for future consideration</p>
+<ul>
+{% for todo in implPlan.todos %}
+	<li>{{ todo }}</li>
+{% endfor %}
+</ul>
+
+<p>Sponsor: {{ implPlan.sponsor }}</p>
+
+		 <h2>Classes used</h2>
+		 <ul class="colcount-sm-2 colcount-md-4">
+			<li><code>wb-checklist</code></li>
+		 </ul>
+   <h2>Use of the checklist feature</h2>
+  <div class="row">
+    <div class="col-md-6">
+      <h3>Default design</h3>
+      <span class="wb-prettify all-pre"></span>
+      <div class="provisional gc-checklist">
+		<fieldset class="gc-chckbxrdio">
+		  <legend>
+		  <h3>Review this checklist:</h3>
+		  </legend>
+		  <ul class="list-unstyled lst-spcd-2">
+			<li class="checkbox">
+			  <input type="checkbox" id="cond1" required>
+			  <label for="cond1">Determine if you need a Labour Market Impact Assessment (LMIA)</label>
+			</li>
+			<li class="checkbox">
+			  <input type="checkbox" id="cond2" required>
+			  <label for="cond2">Determine if your application cannot be processed due to specific condition or circumstances</label>
+			</li>
+			<li class="checkbox">
+			  <input type="checkbox" id="cond3" required>
+			  <label for="cond3">Make sure you know about the program requirements for agricultural positions, for example: </label>
+			</li>
+			<li class="checkbox">
+			  <input type="checkbox" id="cond4" required>
+			  <label for="cond4">Gather documents that support your business legitimacy and LMIA application. Examples:</label>
+			</li>
+			<li class="checkbox">
+			  <input type="checkbox" id="cond5" required>
+			  <label for="cond5">View the LMIA Online Portal resources page for helpful hints</label>
+			</li>
+		  </ul>
+		</fieldset>
+		<div class="output nojs-hide" aria-live="polite">
+			<div class="alert alert-success success-message hidden">
+			<h3>You're ready!</h3>
+			<p>You’ve reviewed the checklist and you're ready to start your application.</p>
+			</div>
+
+			<div class="alert alert-warning failure-message">
+			<h3>Don’t forget</h3>
+			<p>Review the checklist before starting your application.</p>
+			</div>
+		</div>
+		</div>
+      <details>
+        <summary>View code</summary>
+        <pre><code>&lt;div class="provisional gc-checklist"&gt;
+		&lt;fieldset class="gc-chckbxrdio"&gt;
+		  &lt;legend&gt;
+		  &lt;h3&gt;Review this checklist:&lt;/h3&gt;
+		  &lt;/legend&gt;
+		  &lt;ul class="list-unstyled lst-spcd-2"&gt;
+			&lt;li class="checkbox"&gt;
+			  &lt;input type="checkbox" id="cond1" required&gt;
+			  &lt;label for="cond1"&gt;Determine if you need a Labour Market Impact Assessment (LMIA)&lt;/label&gt;
+			&lt;/li&gt;
+			&lt;li class="checkbox"&gt;
+			  &lt;input type="checkbox" id="cond2" required&gt;
+			  &lt;label for="cond2"&gt;Determine if your application cannot be processed due to specific condition or circumstances&lt;/label&gt;
+			&lt;/li&gt;
+			&lt;li class="checkbox"&gt;
+			  &lt;input type="checkbox" id="cond3" required&gt;
+			  &lt;label for="cond3"&gt;Make sure you know about the program requirements for agricultural positions, for example: &lt;/label&gt;
+			&lt;/li&gt;
+			&lt;li class="checkbox"&gt;
+			  &lt;input type="checkbox" id="cond4" required&gt;
+			  &lt;label for="cond4"&gt;Gather documents that support your business legitimacy and LMIA application. Examples:&lt;/label&gt;
+			&lt;/li&gt;
+			&lt;li class="checkbox"&gt;
+			  &lt;input type="checkbox" id="cond5" required&gt;
+			  &lt;label for="cond5"&gt;View the LMIA Online Portal resources page for helpful hints&lt;/label&gt;
+			&lt;/li&gt;
+		  &lt;/ul&gt;
+		&lt;/fieldset&gt;
+		&lt;div class="output nojs-hide" aria-live="polite"&gt;
+			&lt;div class="alert alert-success success-message hidden"&gt;
+			&lt;h3&gt;You're ready!&lt;/h3&gt;
+			&lt;p&gt;You’ve reviewed the checklist and you're ready to start your application.&lt;/p&gt;
+			&lt;/div&gt;
+
+			&lt;div class="alert alert-warning failure-message"&gt;
+			&lt;h3&gt;Don’t forget&lt;/h3&gt;
+			&lt;p&gt;Review the checklist before starting your application.&lt;/p&gt;
+			&lt;/div&gt;
+		&lt;/div&gt;
+		&lt;/div&gt;</code></pre>
+      </details>
+    </div>
+</div>
diff --git a/méli-mélo/2023-05-checklist/meta.md b/méli-mélo/2023-05-checklist/meta.md
@@ -0,0 +1,46 @@
+---
+feature: méli-mélo
+"@context":
+  "@version": 1.1
+  dct: http://purl.org/dc/terms/
+  title:
+    "@id": dct:title
+    "@container": "@language"
+  description:
+    "@id": dct:description
+    "@container": "@language"
+  modified: dct:modified
+
+title:
+  en: Checklist
+  fr: Liste à cocher
+description:
+  en: Allows users to get feedback when completing a checklist
+  fr: Permet aux utilisateurs d'obtenir une rétroaction alors qu'ils complètent une liste à cocher
+modified: 2023-04-12
+componentName: 2023-05-checklist
+sponsor: ESDC - Francis Snoddy (@fsnoddy)
+
+pages:
+  examples:
+    - title: Checklist
+      language: en
+      path: index.html
+
+implementationPlan:
+  - due: 2023-06
+    what: Engage with TBS to show them this design pattern
+  - due: 2023-10
+    what: Review and identify requirement to make this functionality enterprise ready
+  - due: 2023-11
+    what: Produce accessibility and usability report on its usage on Canada.ca
+  - due: 2023-02
+    what: Have this feature as provisional feature in GCWeb and get TBS to publish guidance on how to use it.
+  - due: 2023-11
+    what: added possible alternative design (lead zero) as a more minimalist pattern. 
+
+todos:
+  - Write governance and rationale for use
+
+output: false
+---