Skip to content

Commit 1b0846f

Browse files
wet-boew-botwet-boew-bot
committed
CD 19870707947: Update GCWeb compiled demos files
1 parent 19fb0c9 commit 1b0846f

File tree

6 files changed

+294
-1
lines changed

6 files changed

+294
-1
lines changed

‎_data/méli-mélo.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@
1818
"th-winterlude",
1919
"th-zev",
2020
"th-empathy",
21-
"th-choose-canada"
21+
"th-choose-canada",
22+
"th-ai-answers"
2223
]
2324
}
2425
],
@@ -93,6 +94,10 @@
9394
"nom": "2024-10-datatable-utilities",
9495
"mainpage": "index-en.html"
9596
},
97+
{
98+
"nom": "th-ai-answers",
99+
"mainpage": "index-en.html"
100+
},
96101
{
97102
"nom": "th-choose-canada",
98103
"mainpage": "index.html"

‎méli-mélo-demos/gc-thématique/gc-thématique.css‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,77 @@
1+
/* AI answers components styles */
2+
.aia-banner {
3+
background: #1a2838;
4+
color: #fff;
5+
position: sticky;
6+
top: 0;
7+
z-index: 2;
8+
}
9+
10+
.aia-banner p {
11+
font-size: 1.125rem;
12+
margin: 0;
13+
padding: .875rem 2rem .875rem .75rem;
14+
}
15+
16+
.aia-banner p a {
17+
color: #fff;
18+
}
19+
20+
.aia-banner p a:hover, .aia-banner p a:focus {
21+
color: #b3ffff;
22+
}
23+
24+
.aia-banner .aia-close {
25+
background: none;
26+
border: none;
27+
border-radius: 50%;
28+
color: white;
29+
cursor: pointer;
30+
font-family: Arial, sans-serif;
31+
font-size: 2rem;
32+
font-weight: normal;
33+
height: 45px;
34+
line-height: 1;
35+
padding: 0;
36+
position: absolute;
37+
right: 2px;
38+
top: 50%;
39+
transform: translateY(-50%);
40+
transition: background-color 0.2s ease;
41+
width: 45px;
42+
}
43+
44+
.aia-banner .aia-close:hover {
45+
background-color: rgb(255, 255, 255, 0.1);
46+
}
47+
48+
.aia-banner .aia-close:focus {
49+
background-color: rgb(255, 255, 255, 0.1);
50+
box-shadow: 0 0 0 2px white;
51+
outline: none;
52+
}
53+
54+
/* Rescue link */
55+
.aia-rescue {
56+
margin: 1rem 0;
57+
}
58+
59+
.aia-rescue p {
60+
margin: 0;
61+
padding: .5rem 0 .5rem .75rem;
62+
}
63+
64+
@media screen and (max-width: 767px) {
65+
.aia-banner p {
66+
font-size: 1rem;
67+
padding-left: .5rem;
68+
}
69+
70+
.aia-banner p a {
71+
display: block;
72+
}
73+
}
74+
175
/* Thematic red */
276
.bg-canadaday {
377
background-color: #A30D26;

‎méli-mélo-demos/gc-thématique/gc-thématique.js‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,113 @@
1+
/**
2+
* @title WET-BOEW GC AI answers thematic
3+
* @overview AI answers thematic
4+
* @license wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html
5+
* @author @garneauma
6+
*/
7+
8+
(function () {
9+
const trigger = document.querySelector(".ai-answers-trigger");
10+
if (!trigger) return; // exit if no trigger
11+
12+
const lang = document.documentElement.lang;
13+
const pageHeader = document.querySelector("header");
14+
const dateModifiedElm = document.querySelector(".pagedetails > h2");
15+
const closed = sessionStorage.getItem("aiaClosed") === "true";
16+
const banners = {
17+
main: {
18+
fr: `
19+
<aside class="aia-banner">
20+
<h2 class="wb-inv">Bannière Réponses IA</h2>
21+
<div class="container">
22+
<div class="d-flex align-items-center">
23+
<img src="https://canada.ca/content/dam/canada/ai-stars.png" alt="">
24+
<p><strong>Besoin d'aide?</strong>
25+
<a href="https://reponses-ia.alpha.canada.ca" referrerpolicy="unsafe-url" data-gc-analytics-customclick=”ESDC-EDSC:AI Answers Banner Click:Essayez une version bêta de Réponses IA”>
26+
Essayez une version bêta de Réponses IA</a></p>
27+
</div>
28+
</div>
29+
<button class="aia-close" type="button" aria-label="Essayez une version bêta de Réponses IA">×</button>
30+
</aside>`,
31+
en: `
32+
<aside class="aia-banner">
33+
<h2 class="wb-inv">AI answers banner</h2>
34+
<div class="container">
35+
<div class="d-flex align-items-center">
36+
<img src="https://canada.ca/content/dam/canada/ai-stars.png" alt="">
37+
<p><strong>Need help?</strong>
38+
<a href="https://ai-answers.alpha.canada.ca" referrerpolicy="unsafe-url" data-gc-analytics-customclick=”ESDC-EDSC:AI Answers Banner Click:Try a beta test of AI Answers”>
39+
Try a beta test of AI Answers</a></p>
40+
</div>
41+
</div>
42+
<button class="aia-close" type="button" aria-label="Close AI answers banner">×</button>
43+
</aside>`
44+
},
45+
rescue: {
46+
fr: `
47+
<section class="aia-rescue">
48+
<h3 class="wb-inv">Bannière Réponses IA</h3>
49+
<div class="d-flex align-items-center">
50+
<img src="https://canada.ca/content/dam/canada/ai-stars-blue.png" alt="">
51+
<p><strong>Besoin d'aide?</strong>
52+
<a href="https://reponses-ia.alpha.canada.ca" referrerpolicy="unsafe-url" data-gc-analytics-customclick=”ESDC-EDSC:AI Answers Banner Click:Try a beta test of AI Answers”>
53+
Essayez une version bêta de Réponses IA</a></p>
54+
</div>
55+
</section>`,
56+
en: `
57+
<section class="aia-rescue">
58+
<h3 class="wb-inv">AI answers banner</h3>
59+
<div class="d-flex align-items-center">
60+
<img src="https://canada.ca/content/dam/canada/ai-stars-blue.png" alt="">
61+
<p><strong>Need help?</strong>
62+
<a href="https://ai-answers.alpha.canada.ca" referrerpolicy="unsafe-url" data-gc-analytics-customclick=”ESDC-EDSC:AI Answers Banner Click:Try a beta test of AI Answers”>
63+
Try a beta test of AI Answers</a></p>
64+
</div>
65+
</section>`
66+
}
67+
};
68+
69+
dateModifiedElm.insertAdjacentHTML("afterend", banners.rescue[lang]);
70+
71+
if (!closed) {
72+
pageHeader.insertAdjacentHTML("beforebegin", banners.main[lang]);
73+
74+
const closeBtn = document.querySelector(".aia-close");
75+
76+
closeBtn.addEventListener("click", () => {
77+
closeBtn.parentElement.remove();
78+
sessionStorage.setItem("aiaClosed", "true");
79+
});
80+
}
81+
82+
aiAnswersAvailabilityCheck();
83+
})();
84+
85+
// Check if chat service is available
86+
async function aiAnswersAvailabilityCheck() {
87+
const banners = document.querySelectorAll(".aia-banner, .aia-rescue");
88+
const hideBanner = () => banners.forEach(el => el.remove());
89+
const AVAILABILITY_ENDPOINT = "https://ai-answers.alpha.canada.ca/api/chat/chat-session-availability";
90+
91+
try {
92+
const res = await fetch(AVAILABILITY_ENDPOINT);
93+
94+
if (!res?.ok) {
95+
hideBanner();
96+
return;
97+
}
98+
99+
const data = await res.json();
100+
101+
// If the required flags are absent or false → hide the banner
102+
if (!data?.siteStatus || !data?.sessionAvailable) {
103+
hideBanner();
104+
}
105+
} catch {
106+
// Any error (network, parse, CORS)
107+
hideBanner();
108+
}
109+
}
110+
1111
/**
2112
* @title WET-BOEW GC Empathy quiz card mutator
3113
* @overview Plugin used to mutate DOM elements depending on viewport size, in order to follow order accessibility criteria while respecting UI

‎méli-mélo-demos/gc-thématique/th-ai-answers/index-en.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
title: AI answers thematic
3+
dateModified: '2025-11-27'
4+
description: AI answers thematic documentation and working example
5+
lang: en
6+
altLangPage: index-fr.html
7+
css: https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/méli-mélo/gc-thématique.css
8+
script: https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/méli-mélo/gc-thématique.js
9+
---
10+
11+
<p>This page serves as an example of for AI answers beta testing top banner.</p>
12+
13+
<div class="ai-answers-trigger"></div>
14+
15+
<h2>Instructions</h2>
16+
<p>Insert the following code snippet in your page to activate the AI Answers banner.</p>
17+
<pre><code>&lt;div class="ai-answers-trigger">&lt;/div></code></pre>

‎méli-mélo-demos/gc-thématique/th-ai-answers/index-fr.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
title: Thématique Réponses IA
3+
dateModified: '2025-11-27'
4+
description: Documentation et exemple pratique de Réponses IA
5+
lang: fr
6+
altLangPage: index-en.html
7+
css: https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/méli-mélo/gc-thématique.css
8+
script: https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/méli-mélo/gc-thématique.js
9+
---
10+
11+
<p>Cette page sert d'exemple pour la bannière supérieure du test bêta de Réponses IA.</p>
12+
13+
<div class="ai-answers-trigger"></div>
14+
15+
<h2>Instructions</h2>
16+
<p>Insérez le bout de code suivant dans votre page pour activer la bannière Réponses IA.</p>
17+
<pre><code>&lt;div class="ai-answers-trigger">&lt;/div></code></pre>

‎méli-mélo-demos/gc-thématique/th-ai-answers/meta.md‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
---
2+
feature: thématique
3+
lang: en
4+
title: AI Answers theme
5+
description: Top banner for AI answers beta testing
6+
componentName: th-ai-answers
7+
expiry: February 28th, 2026
8+
mainPage: index-en.html
9+
cssClass:
10+
- aia-banner
11+
- aia-rescue
12+
- aia-close
13+
jsFunctions:
14+
- aiAnswersAvailabilityCheck
15+
a11yStatement: >
16+
These colours meet the colour contrast requirements as outlined in WCAG 2.1 AA
17+
Success Criterion 1.4.3: Contrast (Minimum). After validation using WebAIM
18+
online contrast checker, I certify that the colours used in this thematic are
19+
meeting a contrast ratio of at least 4.5:1 for normal text and 3:1 for large
20+
text and also a contrast ratio of at least 3:1 for graphics and user interface
21+
components. Furthermore, the meaningful sequence is respected, meeting WCAG
22+
2.1 AA Success Criterion 1.3.2. I did my due diligence and, to the best of my
23+
knowledge and understanding, all elements of this thematic are meeting WCAG
24+
2.1 AA standards. Tested by Marc-André Garneau,
25+
marcandre.garneau@servicecanada.gc.ca. 2025-12-01.
26+
pages:
27+
examples:
28+
- title: AI answers thematic
29+
language: en
30+
path: index-en.html
31+
- title: Thématique réponses IA
32+
language: fr
33+
path: index-fr.html
34+
sponsor: >-
35+
Marc-André Garneau, Principal Publisher on behalf of Digital Transformation
36+
Office (DTO)
37+
changes:
38+
- date: 2025-12-01T00:00:00.000Z
39+
description: >-
40+
This thematic provides a top banner to invite users to the beta testing of
41+
AI Answers. The banner includes a close button to dismiss the banner. The
42+
thematic also includes a rescue link at the bottom of the page for users
43+
who missed the banner or dismissed it by mistake. The intent of this
44+
thematic is to inform users about the AI Answers beta testing and to
45+
provide them with a way to access the beta testing page. It is meant to be
46+
temporary and used on around 100 pages (EN and FR) during the testing
47+
period.
48+
departmentImpact: >-
49+
This banner is necessary in order to provide our partner departments (TBS,
50+
ESDC EI, HC) with a link and message to try a beta test of AI Answers. The
51+
vision for AI Answers is that in 2026, it will be displayed on more and
52+
more pages on Canada.ca to provide help to visitors. The beta test this
53+
December provides DTO and our partner departments with a consistent method
54+
of offering access to AI Answers across a set of pages. By January, we
55+
hope that partner departments like IRCC and ESDC can offer access on
56+
larger sets of pages, rather than adding one by one.
57+
publicImpact: >-
58+
Previous DTO trials in summer and fall were displayed on a very limited
59+
set of pages through the PP inviter. Inviters are unwelcome interruptions
60+
to many users – some click them away without reading them, and were a
61+
temporary stage. We now seek to deploy a familiar sticky banner style
62+
invitation to use AI Answers. The impact on the public for those who wish
63+
to get help with their questions is positive – they can see the offer of
64+
AI Answers immediately. For those not seeking help, the impact is
65+
negligible. It does make their view of the page slightly shorter – but
66+
they can still click the X to remove the banner.
67+
output: false
68+
script: https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/méli-mélo/gc-thématique.js
69+
css: https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/méli-mélo/gc-thématique.css
70+
---

0 commit comments

Comments
 (0)