Merge branch 'master' of https://github.com/wet-boew/GCWeb

SebastianBurke · Oct 27, 2023 · 2897dd2 · 2897dd2
2 parents c7df732 + c524e37
commit 2897dd2
Show file tree

Hide file tree

Showing 8 changed files with 415 additions and 844 deletions.
diff --git a/_data/méli-mélo.json b/_data/méli-mélo.json
@@ -18,7 +18,8 @@
 				"2021-05-conjunction",
 				"2023-09-menu",
 				"2023-09-distance-calculator",
-				"2023-09-collection-sort"
+				"2023-09-collection-sort",
+				"2021-05-steps"
 			]
 		},
 		{

diff --git a/index-en.md b/index-en.md
@@ -1,7 +1,7 @@
 ---
 title: GCWeb, the WET-BOEW Canada.ca theme
 altLangPage: index-fr.html
-dateModified: 2023-09-26
+dateModified: 2023-10-25
 description: "Home page describing all the components of the Canada.ca theme, named GCWeb."
 layout: no-container
 language: en
@@ -19,7 +19,7 @@ css:
 			<p>The page templates and design patterns below comprise a reference implementation of the <a href="https://design.canada.ca">Canada.ca design system</a>, including the mandatory requirement of the Content and Information Architecture (C&amp;IA) Specification. Government of Canada departments and agencies can contribute additional patterns and templates via <a href="https://github.com/wet-boew/GCWeb">GCWeb github repository</a>.</p>
 		</div>
 		<div class="col-xs-12 col-md-auto pull-right">
-			<p><a href="https://github.com/wet-boew/GCWeb/archive/v13.9.1.zip" class="btn btn-primary">Download GCWeb theme <strong>v13.9.1</strong></a><br />
+			<p><a href="https://github.com/wet-boew/GCWeb/archive/v13.10.0.zip" class="btn btn-primary">Download GCWeb theme <strong>v13.10.0</strong></a><br />
 				<small>(<time>{{ page.dateModified | date: '%F' }}</time> - <a href="https://github.com/wet-boew/gcweb/releases/latest">Release notes</a>)</small></p>
 		</div>
 	</div>

diff --git a/index-fr.md b/index-fr.md
@@ -1,7 +1,7 @@
 ---
 title: GCWeb, le thème WET-BOEW de Canada.ca
 altLangPage: index-en.html
-dateModified: 2023-09-26
+dateModified: 2023-10-25
 description: "Page d'accueil décrivant l'ensemble des composants du thème de Canada.ca, nommé GCWeb."
 layout: no-container
 language: fr
@@ -19,7 +19,7 @@ css:
 			<p>Les gabarits et les conceptions communes si dessous sont une référence d'implémentation du <a href="https://conception.canada.ca">Système de conception de Canada.ca</a>, incluant les exigences obligatoire de la spécifications du contenu et de l’architecture de l'information (C&amp;AI) pour Canada.ca. Les ministères et organisme du gouvernement du Canada peuvent y contribuer en publiant leur modèle et leur conception commune via le <a href="https://github.com/wet-boew/GCWeb">dépôt github de GCWeb</a>.</p>
 		</div>
 		<div class="col-xs-12 col-md-auto pull-right">
-			<p><a href="https://github.com/wet-boew/GCWeb/archive/v13.9.1.zip" class="btn btn-primary">Télécharger le thème <strong>GCWeb v13.9.1</strong></a><br />
+			<p><a href="https://github.com/wet-boew/GCWeb/archive/v13.10.0.zip" class="btn btn-primary">Télécharger le thème <strong>GCWeb v13.10.0</strong></a><br />
 				<small>(<time>{{ page.dateModified | date: '%F' }}</time> - <a href="https://github.com/wet-boew/gcweb/releases/latest">Note de version</a>)</small></p>
 		</div>
 	</div>

diff --git a/méli-mélo/2021-05-steps/index.html b/méli-mélo/2021-05-steps/index.html
diff --git a/méli-mélo/2021-05-steps/meta.md b/méli-mélo/2021-05-steps/meta.md
@@ -36,11 +36,10 @@ implementationPlan:
     what: Produce accessibility and usability report on its usage on Canada.ca
   - due: 2022-02
     what: Have this feature as provisional feature in GCWeb and get TBS to publish guidance on how to use it.
-  - due: 2022-11
-    what: added possible alternative design (lead zero) as a more minimalist pattern. 
-
+  - due: 2023-12
+    what: review updated CSS and governance added to validate usability toward stable
 todos:
-  - Write governance and rationale for the use of both designs
+  - Review governance and rationale for the use of both designs
 
 output: false
 ---
diff --git a/méli-mélo/2021-05-steps/steps.css b/méli-mélo/2021-05-steps/steps.css
@@ -1,168 +1,109 @@
-ol.lst-stps, .lst-stps {
-	counter-reset: item;
-	margin-bottom: 30px;
-	padding-left: 0;
-}
-ol.lst-stps, ol.lst-stps-sub, .lst-stps, .lst-stps-sub {
-	list-style-type: none;
-}
-ol.lst-stps>li, .lst-stps>.lst-stps-itm {
-	content: counter(item);
-	counter-increment: item;
-}
-ol.lst-stps>li, ol.lst-stps-sub>li, .lst-stps .lst-stps-itm {
-	min-height: 3em;
-	padding-left: 3.6em;
-	padding-right: 15px;
-}
-ol.lst-stps-sub>li, .lst-stps-sub .lst-stps-itm {
-	padding-left: 2.8em;
-}
-ol.lst-stps.ld-zr ol.lst-stps-sub>li, .lst-stps.ld-zr .lst-stps-itm {
-	padding-left: 4em;
-}
-ol.lst-stps.ld-zr>li, ol.lst-stps.ld-zr ol.lst-stps-sub>li, .lst-stps.ld-zr .lst-stps-itm {
-	min-height: 4em;
-}
-ol.lst-stps>li:not(:first-child), ol.lst-stps-sub>li:not(:first-child), .lst-stps .lst-stps-itm:not(:first-child) {
-	margin-top: 20px;
-}
-ol.lst-stps.ld-zr>li:not(:first-child), .lst-stps.ld-zr .lst-stps-itm:not(:first-child) {
-	margin-top: 40px;
-}
-ol.lst-stps>li:before, .lst-stps .lst-stps-itm:before {
-	content: counter(item);
-}
-ol.lst-stps.ld-zr>li:before, .lst-stps.ld-zr .lst-stps-itm:before {
-	content: counter(item, decimal-leading-zero);
-	counter-increment: li;
-	font-size: 1.6em;
-	margin-left: -2.4em;
-	min-width: 2em;
-}
-ol.lst-stps.ld-zr ol.lst-stps-sub>li:before, .lst-stps.ld-zr .lst-stps-sub .lst-stps-itm:before {
-	margin-left: -3.4em;
-	min-width: 2.8em;
-}
-ol.lst-stps-sub, .lst-stps-sub {
-	clear: both;
-	counter-reset: subitem;
-	margin-top: 15px;
-	padding-left: 0px;
-}
-ol.lst-stps>li:before, ol.lst-stps ol.lst-stps-sub>li:before, .lst-stps .lst-stps-itm:before, .lst-stps-sub .lst-stps-itm:before {
-	border-color: #26374a;
-	border-style: solid;
-	border-width: 3px;
-	float: left;
-	font-family: Lato, sans-serif;
-	font-weight: 600;
-	margin-right: 10px;
-	position: relative;
-	text-align: center;
-}
-ol.lst-stps:not(.ld-zr)>li:before, ol.lst-stps:not(.ld-zr) ol.lst-stps-sub>li:before, .lst-stps:not(.ld-zr) .lst-stps-itm:before, .lst-stps:not(.ld-zr) .lst-stps-sub .lst-stps-itm:before {
-	background-color: #fff;
-	-webkit-border-radius: 50%;
-	-moz-border-radius: 50%;
-	border-radius: 50%;
-	box-sizing: content-box;
-	line-height: 2;
-	margin-left: -3.2em;
-	margin-top: -8px;
-	text-align: center;
-	width: 2em;
-}
-ol.lst-stps.ld-zr>li:before, ol.lst-stps.ld-zr>li ol.lst-stps-sub>li:before, .lst-stps.ld-zr .lst-stps-itm:before, .lst-stps.ld-zr .lst-stps-sub .lst-stps-itm:before {
-	border-bottom-width: 0px;
-	border-left-width: 0px;
-	border-top-width: 0px;
-	line-height: 1.4;
-	padding-bottom: 0.8em;
-	padding-right: 8px;
-}
-ol.lst-stps-sub>li:before, .lst-stps .lst-stps-sub .lst-stps-itm:before {
-	counter-increment: subitem;
-}
-ol.lst-stps:not(.ld-zr)>li ol.lst-stps-sub>li:before, .lst-stps:not(.ld-zr) .lst-stps-sub .lst-stps-itm:before {
-	content: counter(item) "" counter(subitem, lower-alpha) "";
-	font-size: 0.8em;
-	margin-top: -2px;
-}
-ol.lst-stps.ld-zr>li ol.lst-stps-sub>li:before, .lst-stps.ld-zr .lst-stps-sub .lst-stps-itm:before {
-	content: counter(item, decimal-leading-zero) "" counter(subitem, lower-alpha) "";
-	font-size: 1.2em;
-}
- ol.lst-stps li :first-of-type:is(h2, h3, h4, h5, h6, p), .lst-stps .lst-stps-itm :first-of-type:is(h2, h3, h4, h5, h6, p) {
- margin-top: auto;
-}
-ol.lst-stps.stps-strpd>li, ol.lst-stps.stps-strpd>li ol.lst-stps-sub.stps-strpd>li, .lst-stps.stps-strpd .lst-stps-itm, .lst-stps.stps-strpd .lst-stps-sub.stps-strpd .lst-stps-itm {
-	padding-bottom: 20px;
-	padding-top: 20px;
-}
-ol.lst-stps.stps-strpd>li>:last-child, ol.lst-stps.stps-strpd ol.lst-stps-sub.stps-strpd>li>:last-child, .lst-stps.stps-strpd .lst-stps-itm>:last-child, .lst-stps.stps-strpd .lst-stps-sub.stps-strpd .lst-stps-itm>:last-child {
-	margin-bottom: 0px;
-}
-ol.lst-stps.stps-strpd>li:not(:first-child), ol.lst-stps.stps-strpd ol.lst-stps-sub.stps-strpd>li:not(:first-child), .lst-stps.stps-strpd .lst-stps-itm:not(:first-child), .lst-stps.stps-strpd .lst-stps-sub.stps-strpd .lst-stps-itm:not(:first-child) {
-	margin-top: 0px;
-}
-ol.lst-stps.stps-strpd>li:nth-child(odd), ol.lst-stps.stps-strpd>li:nth-child(even)>ol.lst-stps-sub.stps-strpd>li:nth-child(odd), ol.lst-stps.stps-strpd>li:nth-child(odd)>ol.lst-stps-sub.stps-strpd>li:nth-child(even), .lst-stps.stps-strpd>.lst-stps-itm:nth-child(odd), .lst-stps.stps-strpd>.lst-stps-itm:nth-child(even)>.lst-stps-sub.stps-strpd>.lst-stps-itm:nth-child(odd), .lst-stps.stps-strpd>.lst-stps-itm:nth-child(odd)>.lst-stps-sub.stps-strpd>.lst-stps-itm:nth-child(even).lst-stps.stps-strpd>.lst-stps-itm:nth-child(odd), .lst-stps.stps-strpd>.lst-stps-itm:nth-child(even)>.lst-stps-sub.stps-strpd>.lst-stps-itm:nth-child(odd), .lst-stps.stps-strpd>.lst-stps-itm:nth-child(odd)>.lst-stps-sub.stps-strpd>.lst-stps-itm:nth-child(even) {
-	background-color: #f5f5f5;
-}
-ol.lst-stps.stps-strpd>li:nth-child(odd)>ol.lst-stps-sub.stps-strpd>li:nth-child(odd), .lst-stps.stps-strpd>.lst-stps-itm:nth-child(odd)>.lst-stps-sub.stps-strpd>.lst-stps-itm:nth-child(odd) {
-	background-color: #fff!important;
-}
-ol.lst-stps:not(.ld-zr).stps-strpd ol.lst-stps-sub.stps-strpd>li, .lst-stps:not(.ld-zr).stps-strpd .lst-stps-sub.stps-strpd .lst-stps-itm {
-	padding-left: 3.4em;
-}
-ol.lst-stps.ld-zr.stps-strpd>li, .lst-stps.ld-zr.stps-strpd>.lst-stps-itm {
-	padding-left: 4em;
-}
-ol.lst-stps.ld-zr.stps-strpd>li, ol.ld-zr ol.lst-stps-sub.stps-strpd>li, .lst-stps.ld-zr.stps-strpd .lst-stps-itm, .lst-stps-sub.stps-strpd .lst-stps-itm {
-	min-height: 5em;
-	padding-left: 4.4em;
-}
-
-@media all and (max-width: 767px) {
-ol.lst-stps.ld-zr>li:before, ol.lst-stps.ld-zr>li ol.lst-stps-sub>li:before, .lst-stps.ld-zr .lst-stps-itm:before, .lst-stps.ld-zr .lst-stps-sub .lst-stps-itm:before {
-	left: 5px;
-}
-ol.lst-stps:not(.ld-zr)>li:before, .lst-stps:not(.ld-zr) .lst-stps-itm:before {
-	font-size: 0.8em;
-	margin-top: -5px;
-}
-ol.lst-stps:not(.ld-zr)>li ol.lst-stps-sub>li:before, .lst-stps:not(.ld-zr) .lst-stps-sub .lst-stps-itm:before {
-	font-size: 0.7em;
-	margin-top: -3px;
-}
-ol.lst-stps>li, ol.lst-stps>li ol.lst-stps-sub>li, .lst-stps .lst-stps-itm, .lst-stps .lst-stps-sub .lst-stps-itm {
-	padding-left: 2.6em;
-}
-ol.lst-stps.ld-zr>li ol.lst-stps-sub>li, .lst-stps.ld-zr .lst-stps-sub .lst-stps-itm {
-	padding-left: 3em;
+ol.lst-stps {
+    counter-reset: item;
+    padding-left: 0;
+}
+ol.lst-stps, ol.lst-stps-sub {
+    list-style-type: none;
+}
+ol.lst-stps>li {
+    content: counter(item);
+    counter-increment: item;
+}
+ol.lst-stps>li:before {
+    content: counter(item);
+}
+ol.lst-stps.ld-zr>li:before {
+    content: counter(item, decimal-leading-zero);
+    font-size: 1.4em;
+    padding-left: 0.5em;
+}
+ol.lst-stps>li ol.lst-stps-sub {
+    clear: both;
+    counter-reset: subitem;
+    padding-left: 0px;
+}
+ol.lst-stps>li ol.lst-stps-sub>li:before {
+    counter-increment: subitem;
+    content: counter(item) "" counter(subitem, lower-alpha) "";
+    margin-left: -3em;
+    margin-top: -6px;
+}
+ol.lst-stps:not(.stps-strpd)>li, ol.lst-stps-sub:not(.stps-strpd)>li {
+    margin-top: 20px;
+    min-height: 4em;
+    padding-left: 3.2em;
+    padding-right: 15px;
+}
+ol.lst-stps-sub:not(.stps-strpd)>li {
+    min-height: 3em;
+    padding-left: 2.6em;
+}
+ol.lst-stps>li:before, ol.lst-stps>li ol.lst-stps-sub>li:before {
+    border-style: solid;
+    border-width: 3px;
+    box-sizing: content-box;
+    float: left;
+    font-family: Lato, sans-serif;
+    font-weight: 600;
+    line-height: 2;
+    margin-left: -3.2em;
+    margin-right: 10px;
+    margin-top: -8px;
+    position: relative;
+    text-align: center;
+    width: 2em;
+}
+ol.lst-stps:not(.ld-zr)>li:before, ol.lst-stps:not(.ld-zr)>li ol.lst-stps-sub>li:before {
+    background-color: #fff;
+    -webkit-border-radius: 50%;
+    -moz-border-radius: 50%;
+    border-radius: 50%;
+}
+ol.lst-stps:not(.ld-zr) ol.lst-stps-sub>li:before {
+    font-size: 0.8em;
+}
+ol.lst-stps.ld-zr>li:before, ol.lst-stps.ld-zr>li ol.lst-stps-sub>li:before {
+    border-width: 0 3px 0 0;
+    line-height: 1.4;
+    margin-top: 0px;
+    padding-bottom: 0.8em;
+}
+ol.lst-stps>li :first-of-type:is(h2, h3, h4, h5, h6, p), ol.lst-stps>li ol.lst-stps-sub>li :first-of-type:is(h2, h3, h4, h5, h6, p) {
+margin-top: auto;
+}
+/*striped design */	
+ol.lst-stps.stps-strpd>li, ol.lst-stps-sub.stps-strpd>li {
+    min-height: 4em;
+    padding-left: 3.6em;
+    padding-right: 15px;
+}
+ol.lst-stps.ld-zr.stps-strpd>li, ol.lst-stps.ld-zr>li ol.lst-stps-sub.stps-strpd>li {
+    min-height: 5em;
+}
+ol.lst-stps>li ol.lst-stps-sub.stps-strpd>li {
+    padding-left: 3em;
+}
+ol.lst-stps.stps-strpd>li:nth-child(odd), ol.lst-stps.stps-strpd>li:nth-child(even) ol.lst-stps-sub.stps-strpd>li:nth-child(odd), ol.lst-stps.stps-strpd>li:nth-child(odd) ol.lst-stps-sub.stps-strpd>li:nth-child(even) {
+    background-color: #f5f5f5;
+}
+ol.lst-stps.stps-strpd>li:nth-child(odd) ol.lst-stps-sub.stps-strpd>li:nth-child(odd) {
+    background-color: #fff!important;
+}
+ol.lst-stps.stps-strpd>li, ol.lst-stps.stps-strpd>li ol.lst-stps-sub.stps-strpd>li {
+    padding-bottom: 20px;
+    padding-top: 20px;
 }
-ol.lst-stps.ld-zr>li:before, .lst-stps.ld-zr .lst-stps-itm:before {
-	font-size: 1.2em;
-	padding-bottom: 25px;
-}
-ol.lst-stps.ld-zr>li, .lst-stps.ld-zr .lst-stps-itm {
-	min-height: 5em;
-}
-ol.lst-stps.ld-zr>li ol.lst-stps-sub>li:before, .lst-stps.ld-zr .lst-stps-sub .lst-stps-itm:before {
-	font-size: 1em;
-}
-ol.lst-stps.stps-strpd>li, ol.lst-stps.stps-strpd>li ol.lst-stps-sub.stps-strpd>li, .lst-stps.stps-strpd .lst-stps-itm, .lst-stps.stps-strpd .lst-stps-sub.stps-strpd .lst-stps-itm {
-	margin-top: 0px;
-	padding-bottom: 0.8em;
-	padding-top: 0.8em;
+@media all and (max-width: 767px) {
+ol.lst-stps:not(.stps-strpd)>li, ol.lst-stps-sub:not(.stps-strpd)>li {
+    padding-left: 2.6em;
 }
-ol.lst-stps.stps-strpd>li, .lst-stps.stps-strpd .lst-stps-itm {
-	padding-left: 3em;
+ol.lst-stps>li:before {
+    font-size: 0.8em;
 }
-ol.lst-stps.stps-strpd.ld-zr>li, .lst-stps.stps-strpd.ld-zr .lst-stps-itm {
-	padding-left: 3.4em;
+ol.lst-stps.ld-zr>li:before {
+    font-size: 1.2em;
 }
-ol.lst-stps.stps-strpd>li ol.lst-stps-sub.stps-strpd>li, .lst-stps.stps-strpd .lst-stps-sub .lst-stps-itm {
-	padding-left: 3.5em;
+ol.lst-stps.stps-strpd>li, ol.lst-stps-sub.stps-strpd>li {
+    padding-left: 3em;
 }
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "GCWeb",
-  "version": "13.9.1",
+  "version": "13.10.0",
   "description": "Web Experience Toolkit (WET): Canada.ca Theme Reorg",
   "main": "index.html",
   "scripts": {
@@ -13,7 +13,7 @@
   "license": "MIT",
   "dependencies": {
     "bootstrap-sass": "3.4.1",
-    "wet-boew": "github:wet-boew/wet-boew#v4.0.69"
+    "wet-boew": "github:wet-boew/wet-boew#v4.0.70"
   },
   "browserslist": [
     "last 2 versions",