CD 10375722851: Update GCWeb compiled demos files

wet-boew · Aug 13, 2024 · 14ee504 · 14ee504
1 parent 392ddce
commit 14ee504
Show file tree

Hide file tree

Showing 8 changed files with 162 additions and 46 deletions.
diff --git a/méli-mélo-demos/2024-09-kejimkujik/2021-05-conjunction/index.html b/méli-mélo-demos/2024-09-kejimkujik/2021-05-conjunction/index.html
@@ -20,27 +20,23 @@ <h2 class="h5">Table of content</h2>
 </nav>
 
 <h2>GCWeb implementation plan</h2>
+
+{% assign implPlan = site.pages | where: "output", "false" | where: "componentName", "2021-05-conjunction" | first %}
+
 <ul>
-	<li>2021-06 - Engage with TBS to show them this design pattern</li>
-  <li>2021-06 - Provide UX research and analysis to describe how pattern helps usability</li>
-	<li>2021-10 - Review and identify requirement to make this functionality enterprise ready</li>
-	<li>2021-11 - Produce accessibility and usability report on its usage on Canada.ca</li>
-	<li>2022-02 - Have this feature as provisional feature in GCWeb and get TBS to publish guidance on how to use it.</li>
-	<li>2022-05 - updated to focus more on using as list items (with or without headers)</li>
-	<li>2022-09 - updated CSS to allow nested decision points</li>
-	<li>2022-11 - updated CSS to allow no border on always stacked items</li>
-	<li>2023-07 - updated CRA to allow no border on all resolutions when stacked</li>
-	<li>2023-08 - allow for zoom text resolution of 200%
-    <li>2023-10 - have this feature as provisional/stable feature in GCWeb and get TBS to publish guidance on how to use it.</li>
-	<li>2024-04 - updated to fix design when text is smaller, make border visible in high contrast mode</li>
+{% for deliverable in implPlan.implementationPlan %}
+	<li>{{ deliverable.due }} - {{ deliverable.what }}</li>
+{% endfor %}
 </ul>
 
 <p>Todo and for future consideration</p>
 <ul>
-	<li>>Finalize documentation and examples to be merged into GCWeb library.</li>
+{% for todo in implPlan.todos %}
+	<li>{{ todo }}</li>
+{% endfor %}
 </ul>
 
-<p>Lead: CRA - Christopher Oakes (@christopher-o)</p>
+<p>Sponsor: {{ implPlan.sponsor }}</p>
   <ul class="list-inline">
     <li><a class="btn btn-primary" href="conjunction-doc-en.html">Documentation</a></li>
     <li><a class="btn btn-primary" href="https://github.com/wet-boew/GCWeb/issues/new?title=Conjunction">Questions or comments?</a></li>

diff --git a/méli-mélo-demos/2024-09-kejimkujik/2021-05-conjunction/meta.md b/méli-mélo-demos/2024-09-kejimkujik/2021-05-conjunction/meta.md
@@ -6,13 +6,17 @@ feature: méli-mélo
   title:
     '@id': dct:title
     '@container': '@language'
-  description: dct:description
+  description:
+    '@id': dct:description
+    '@container': '@language'
   modified: dct:modified
 title:
   en: Conjunctions (and/or)
   fr: Conjonction (et/ou)
-description: Conjunctions for stacked or side by side decision points, and/or
-modified: 2024-05-30T00:00:00.000Z
+description:
+  en: Conjunctions for stacked or side by side decision points, and/or
+  fr: Conjonctions pour des points de décision empilés ou côte à côte, et/ou
+modified: 2024-08-07T00:00:00.000Z
 componentName: 2021-05-conjunction
 sponsor: CRA - Christopher Oakes (@christopher-o)
 pages:
@@ -27,9 +31,7 @@ implementationPlan:
   - due: 2021-06
     what: Engage with TBS to show them this design pattern
   - due: 2021-06
-    what: >-
-      Provide UX research and analysis to describe how pattern helps
-      usability</li>
+    what: Provide UX research and analysis to describe how pattern helps usability
   - due: 2021-10
     what: >-
       Review and identify requirement to make this functionality enterprise
@@ -40,10 +42,26 @@ implementationPlan:
     what: >-
       Have this feature as provisional feature in GCWeb and get TBS to publish
       guidance on how to use it.
+  - due: 2022-05
+    what: updated to focus more on using as list items (with or without headers)
+  - due: 2022-09
+    what: updated CSS to allow nested decision points
+  - due: 2022-11
+    what: updated CSS to allow no border on always stacked items
+  - due: 2023-07
+    what: updated CRA to allow no border on all resolutions when stacked
+  - due: 2023-08
+    what: allow for zoom text resolution of 200%
+  - due: 2023-10
+    what: >-
+      have this feature as provisional/stable feature in GCWeb and get TBS to
+      publish guidance on how to use it.
+  - due: 2024-04
+    what: >-
+      updated to fix design when text is smaller, make border visible in high
+      contrast mode
 todos:
-  - >-
-    Review code and governance to balance optimal accessibility and ease of
-    implimentation by users.
+  - Finalize design
 changes:
   - date: 2024-06-20T00:00:00.000Z
     description: >-
@@ -57,6 +75,18 @@ changes:
       Allows border to be shown in high contrast (could require additional
       adjustment for FF and MacOS browsers). Fixed issue of using design in font
       sizes other than 20px (GCWeb standard)
+  - date: 2024-08-07T00:00:00.000Z
+    description: >-
+      Change was to remove the side-by-side line separator in Firefox (but keep
+      the shape and text) when in High contrast mode. The previous pattern had
+      the line separator "cut" through the words (and/or) which could make it
+      slightly illegible.
+    departmentImpact: >-
+      There is minimal impact, as we do not normally use Firefox as a browser,
+      nor does the majority of users use high contrast mode on their devices.
+    publicImpact: >-
+      Only those who use high contrast mode with the Firefox browser, and will
+      be a slight improvement on readability of the text.
 output: false
 script: >-
   https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/méli-mélo/2024-09-kejimkujik.js

diff --git a/méli-mélo-demos/2024-09-kejimkujik/2021-05-steps/meta.md b/méli-mélo-demos/2024-09-kejimkujik/2021-05-steps/meta.md
@@ -62,6 +62,10 @@ changes:
       Created a cleaner look for items using list steps with a smaller amount of
       content. Made the numbers more visible for edge case scenarios of print
       and high contrast.
+  - date: 2024-08-07T00:00:00.000Z
+    description: Fixed issue with printing pages as some text would be cut off
+    departmentImpact: No change from a departmental perspective.
+    publicImpact: Improved look of print document
 output: false
 script: >-
   https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/méli-mélo/2024-09-kejimkujik.js

diff --git a/méli-mélo-demos/2024-09-kejimkujik/2024-09-kejimkujik.css b/méli-mélo-demos/2024-09-kejimkujik/2024-09-kejimkujik.css
@@ -120,6 +120,11 @@ html:lang(fr) .cnjnctn-type-or > [class*=cnjnctn-col]:not(:first-child):before {
   [class*=cnjnctn-type-].cnjnctn-xs > [class*=cnjnctn-col]:not(:first-child):after {
     border-image: linear-gradient(to bottom, #ffffff 0.3em, #ffffff 0.3em, transparent 0.3em, transparent 2.35em, #ffffff 2.35em, #ffffff 2.35em) 1 100%;
   }
+	@-moz-document url-prefix() {
+       [class*=cnjnctn-type-].cnjnctn-xs > [class*=cnjnctn-col]:not(:first-child):after {
+        border-left: none;
+      }
+    }
 }
 [class*=cnjnctn-type-].cnjnctn-xs > [class*=cnjnctn-col]:not(:first-child) {
   margin-left: 1.4em;
@@ -183,6 +188,11 @@ html:lang(fr) .cnjnctn-type-or > [class*=cnjnctn-col]:not(:first-child):before {
   @media (prefers-contrast: more) {
     [class*=cnjnctn-type-].cnjnctn-sm > [class*=cnjnctn-col]:not(:first-child):after {
       border-image: linear-gradient(to bottom, #ffffff 0.3em, #ffffff 0.3em, transparent 0.3em, transparent 2.35em, #ffffff 2.35em, #ffffff 2.35em) 1 100%;
+    }
+	  @-moz-document url-prefix() {
+      [class*=cnjnctn-type-].cnjnctn-sm > [class*=cnjnctn-col]:not(:first-child):after {
+        border-left: none;
+      }
     }
   }
   .cnjnctn-type-and.cnjnctn-sm > [class*=cnjnctn-col]:not(:first-child):before {
@@ -228,6 +238,11 @@ html:lang(fr) .cnjnctn-type-or > [class*=cnjnctn-col]:not(:first-child):before {
   @media (prefers-contrast: more) {
     [class*=cnjnctn-type-].cnjnctn-md > [class*=cnjnctn-col]:not(:first-child):after {
       border-image: linear-gradient(to bottom, #ffffff 0.3em, #ffffff 0.3em, transparent 0.3em, transparent 2.35em, #ffffff 2.35em, #ffffff 2.35em) 1 100%;
+    }
+	  @-moz-document url-prefix() {
+      [class*=cnjnctn-type-].cnjnctn-md > [class*=cnjnctn-col]:not(:first-child):after {
+        border-left: none;
+      }
     }
   }
   .cnjnctn-type-and.cnjnctn-md > [class*=cnjnctn-col]:not(:first-child):before {
@@ -273,6 +288,11 @@ html:lang(fr) .cnjnctn-type-or > [class*=cnjnctn-col]:not(:first-child):before {
   @media (prefers-contrast: more) {
     [class*=cnjnctn-type-].cnjnctn-lg > [class*=cnjnctn-col]:not(:first-child):after {
       border-image: linear-gradient(to bottom, #ffffff 0.3em, #ffffff 0.3em, transparent 0.3em, transparent 2.35em, #ffffff 2.35em, #ffffff 2.35em) 1 100%;
+    }
+	  @-moz-document url-prefix() {
+      [class*=cnjnctn-type-].cnjnctn-lg > [class*=cnjnctn-col]:not(:first-child):after {
+        border-left: none;
+      }
     }
   }
   .cnjnctn-type-and.cnjnctn-lg > [class*=cnjnctn-col]:not(:first-child):before {
@@ -398,6 +418,14 @@ ol.lst-stps.stps-strpd:not(.ld-zr) > li:before, ol.lst-stps.stps-strpd:not(.ld-z
     padding-left: 3em;
   }
 }
+@media print {
+	ol.lst-stps>li {
+		-webkit-break-inside: avoid;
+		-moz-break-inside: avoid;
+		break-inside: avoid;
+		padding-top:1em;
+	}
+}
 
 /*** Mega Menu ***/
 /* add background and text color for menu */

diff --git a/méli-mélo-demos/2025-04-nahanni/2021-05-conjunction/index.html b/méli-mélo-demos/2025-04-nahanni/2021-05-conjunction/index.html
@@ -20,27 +20,23 @@ <h2 class="h5">Table of content</h2>
 </nav>
 
 <h2>GCWeb implementation plan</h2>
+
+{% assign implPlan = site.pages | where: "output", "false" | where: "componentName", "2021-05-conjunction" | first %}
+
 <ul>
-	<li>2021-06 - Engage with TBS to show them this design pattern</li>
-  <li>2021-06 - Provide UX research and analysis to describe how pattern helps usability</li>
-	<li>2021-10 - Review and identify requirement to make this functionality enterprise ready</li>
-	<li>2021-11 - Produce accessibility and usability report on its usage on Canada.ca</li>
-	<li>2022-02 - Have this feature as provisional feature in GCWeb and get TBS to publish guidance on how to use it.</li>
-	<li>2022-05 - updated to focus more on using as list items (with or without headers)</li>
-	<li>2022-09 - updated CSS to allow nested decision points</li>
-	<li>2022-11 - updated CSS to allow no border on always stacked items</li>
-	<li>2023-07 - updated CRA to allow no border on all resolutions when stacked</li>
-	<li>2023-08 - allow for zoom text resolution of 200%
-    <li>2023-10 - have this feature as provisional/stable feature in GCWeb and get TBS to publish guidance on how to use it.</li>
-	<li>2024-04 - updated to fix design when text is smaller, make border visible in high contrast mode</li>
+{% for deliverable in implPlan.implementationPlan %}
+	<li>{{ deliverable.due }} - {{ deliverable.what }}</li>
+{% endfor %}
 </ul>
 
 <p>Todo and for future consideration</p>
 <ul>
-	<li>>Finalize documentation and examples to be merged into GCWeb library.</li>
+{% for todo in implPlan.todos %}
+	<li>{{ todo }}</li>
+{% endfor %}
 </ul>
 
-<p>Lead: CRA - Christopher Oakes (@christopher-o)</p>
+<p>Sponsor: {{ implPlan.sponsor }}</p>
   <ul class="list-inline">
     <li><a class="btn btn-primary" href="conjunction-doc-en.html">Documentation</a></li>
     <li><a class="btn btn-primary" href="https://github.com/wet-boew/GCWeb/issues/new?title=Conjunction">Questions or comments?</a></li>

diff --git a/méli-mélo-demos/2025-04-nahanni/2021-05-conjunction/meta.md b/méli-mélo-demos/2025-04-nahanni/2021-05-conjunction/meta.md
@@ -6,13 +6,17 @@ feature: méli-mélo
   title:
     '@id': dct:title
     '@container': '@language'
-  description: dct:description
+  description:
+    '@id': dct:description
+    '@container': '@language'
   modified: dct:modified
 title:
   en: Conjunctions (and/or)
   fr: Conjonction (et/ou)
-description: Conjunctions for stacked or side by side decision points, and/or
-modified: 2024-05-30T00:00:00.000Z
+description:
+  en: Conjunctions for stacked or side by side decision points, and/or
+  fr: Conjonctions pour des points de décision empilés ou côte à côte, et/ou
+modified: 2024-08-07T00:00:00.000Z
 componentName: 2021-05-conjunction
 sponsor: CRA - Christopher Oakes (@christopher-o)
 pages:
@@ -27,9 +31,7 @@ implementationPlan:
   - due: 2021-06
     what: Engage with TBS to show them this design pattern
   - due: 2021-06
-    what: >-
-      Provide UX research and analysis to describe how pattern helps
-      usability</li>
+    what: Provide UX research and analysis to describe how pattern helps usability
   - due: 2021-10
     what: >-
       Review and identify requirement to make this functionality enterprise
@@ -40,10 +42,26 @@ implementationPlan:
     what: >-
       Have this feature as provisional feature in GCWeb and get TBS to publish
       guidance on how to use it.
+  - due: 2022-05
+    what: updated to focus more on using as list items (with or without headers)
+  - due: 2022-09
+    what: updated CSS to allow nested decision points
+  - due: 2022-11
+    what: updated CSS to allow no border on always stacked items
+  - due: 2023-07
+    what: updated CRA to allow no border on all resolutions when stacked
+  - due: 2023-08
+    what: allow for zoom text resolution of 200%
+  - due: 2023-10
+    what: >-
+      have this feature as provisional/stable feature in GCWeb and get TBS to
+      publish guidance on how to use it.
+  - due: 2024-04
+    what: >-
+      updated to fix design when text is smaller, make border visible in high
+      contrast mode
 todos:
-  - >-
-    Review code and governance to balance optimal accessibility and ease of
-    implimentation by users.
+  - Finalize design
 changes:
   - date: 2024-06-20T00:00:00.000Z
     description: >-
@@ -57,6 +75,18 @@ changes:
       Allows border to be shown in high contrast (could require additional
       adjustment for FF and MacOS browsers). Fixed issue of using design in font
       sizes other than 20px (GCWeb standard)
+  - date: 2024-08-07T00:00:00.000Z
+    description: >-
+      Change was to remove the side-by-side line separator in Firefox (but keep
+      the shape and text) when in High contrast mode. The previous pattern had
+      the line separator "cut" through the words (and/or) which could make it
+      slightly illegible.
+    departmentImpact: >-
+      There is minimal impact, as we do not normally use Firefox as a browser,
+      nor does the majority of users use high contrast mode on their devices.
+    publicImpact: >-
+      Only those who use high contrast mode with the Firefox browser, and will
+      be a slight improvement on readability of the text.
 output: false
 script: >-
   https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/méli-mélo/2025-04-nahanni.js

diff --git a/méli-mélo-demos/2025-04-nahanni/2021-05-steps/meta.md b/méli-mélo-demos/2025-04-nahanni/2021-05-steps/meta.md
@@ -62,6 +62,10 @@ changes:
       Created a cleaner look for items using list steps with a smaller amount of
       content. Made the numbers more visible for edge case scenarios of print
       and high contrast.
+  - date: 2024-08-07T00:00:00.000Z
+    description: Fixed issue with printing pages as some text would be cut off
+    departmentImpact: No change from a departmental perspective.
+    publicImpact: Improved look of print document
 output: false
 script: >-
   https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/méli-mélo/2025-04-nahanni.js

diff --git a/méli-mélo-demos/2025-04-nahanni/2025-04-nahanni.css b/méli-mélo-demos/2025-04-nahanni/2025-04-nahanni.css
@@ -120,6 +120,11 @@ html:lang(fr) .cnjnctn-type-or > [class*=cnjnctn-col]:not(:first-child):before {
   [class*=cnjnctn-type-].cnjnctn-xs > [class*=cnjnctn-col]:not(:first-child):after {
     border-image: linear-gradient(to bottom, #ffffff 0.3em, #ffffff 0.3em, transparent 0.3em, transparent 2.35em, #ffffff 2.35em, #ffffff 2.35em) 1 100%;
   }
+	@-moz-document url-prefix() {
+       [class*=cnjnctn-type-].cnjnctn-xs > [class*=cnjnctn-col]:not(:first-child):after {
+        border-left: none;
+      }
+    }
 }
 [class*=cnjnctn-type-].cnjnctn-xs > [class*=cnjnctn-col]:not(:first-child) {
   margin-left: 1.4em;
@@ -183,6 +188,11 @@ html:lang(fr) .cnjnctn-type-or > [class*=cnjnctn-col]:not(:first-child):before {
   @media (prefers-contrast: more) {
     [class*=cnjnctn-type-].cnjnctn-sm > [class*=cnjnctn-col]:not(:first-child):after {
       border-image: linear-gradient(to bottom, #ffffff 0.3em, #ffffff 0.3em, transparent 0.3em, transparent 2.35em, #ffffff 2.35em, #ffffff 2.35em) 1 100%;
+    }
+	  @-moz-document url-prefix() {
+      [class*=cnjnctn-type-].cnjnctn-sm > [class*=cnjnctn-col]:not(:first-child):after {
+        border-left: none;
+      }
     }
   }
   .cnjnctn-type-and.cnjnctn-sm > [class*=cnjnctn-col]:not(:first-child):before {
@@ -228,6 +238,11 @@ html:lang(fr) .cnjnctn-type-or > [class*=cnjnctn-col]:not(:first-child):before {
   @media (prefers-contrast: more) {
     [class*=cnjnctn-type-].cnjnctn-md > [class*=cnjnctn-col]:not(:first-child):after {
       border-image: linear-gradient(to bottom, #ffffff 0.3em, #ffffff 0.3em, transparent 0.3em, transparent 2.35em, #ffffff 2.35em, #ffffff 2.35em) 1 100%;
+    }
+	  @-moz-document url-prefix() {
+      [class*=cnjnctn-type-].cnjnctn-md > [class*=cnjnctn-col]:not(:first-child):after {
+        border-left: none;
+      }
     }
   }
   .cnjnctn-type-and.cnjnctn-md > [class*=cnjnctn-col]:not(:first-child):before {
@@ -273,6 +288,11 @@ html:lang(fr) .cnjnctn-type-or > [class*=cnjnctn-col]:not(:first-child):before {
   @media (prefers-contrast: more) {
     [class*=cnjnctn-type-].cnjnctn-lg > [class*=cnjnctn-col]:not(:first-child):after {
       border-image: linear-gradient(to bottom, #ffffff 0.3em, #ffffff 0.3em, transparent 0.3em, transparent 2.35em, #ffffff 2.35em, #ffffff 2.35em) 1 100%;
+    }
+	  @-moz-document url-prefix() {
+      [class*=cnjnctn-type-].cnjnctn-lg > [class*=cnjnctn-col]:not(:first-child):after {
+        border-left: none;
+      }
     }
   }
   .cnjnctn-type-and.cnjnctn-lg > [class*=cnjnctn-col]:not(:first-child):before {
@@ -398,6 +418,14 @@ ol.lst-stps.stps-strpd:not(.ld-zr) > li:before, ol.lst-stps.stps-strpd:not(.ld-z
     padding-left: 3em;
   }
 }
+@media print {
+	ol.lst-stps>li {
+		-webkit-break-inside: avoid;
+		-moz-break-inside: avoid;
+		break-inside: avoid;
+		padding-top:1em;
+	}
+}
 
 /* Remove default bottom border for each questions of the Steps Form  */
 .provisional.wb-steps.quiz .steps-wrapper {