-
- {{ page.title }}
- {% assign metadata = site.pages | where: "output", "false" | where: "componentName", "th-canadaday" | first %} -Sponsor: {{ metadata.sponsor }}
-Accessibility statement: {{ metadata.a11yStatement }}
-Progressive enhancement note:
--
- {% for peNote in metadata.peNote %}
-
- {{ peNote }} - {% endfor %} -
On this page
- -Red background and white text
-Use to make text appear white in colour on a red background.
-
-
+
+
+
-
-
- {{ page.title }}
+{% assign metadata = site.pages | where: "output", "false" | where: "componentName", "th-canadaday" | first %} +Sponsor: {{ metadata.sponsor }}
+Accessibility statement: {{ metadata.a11yStatement }}
+Progressive enhancement note:
+-
+ {% for peNote in metadata.peNote %}
+
- {{ peNote }} + {% endfor %} +
On this page
+ +Red background and white text
+Use to make text appear white in colour on a red background.
+
+
- Appearance
This text is styled with .bg-dark, .bg-canadaday and .text-white.
-
-
-
+
+
+
+
-
- Correct use
Compliance point(s):
-
-
- Use to introduce contrast to information -
- Use
.bg-canadadayin combination with.text-whiteto ensure sufficient contrast between text and background
- - Use a fallback colour such as
.bg-darkfor sections and paragraphs,.btn-infofor buttons or.panel-defaultfor panels to accommodate progressive enhancement
- - Wrap text in a <span> tag if a style does not appear as it is meant to, due to specificity reasons +
- Use to introduce contrast to information +
- Use
.bg-canadadayin combination with.text-whiteto ensure sufficient contrast between text and background
+ - Use a fallback colour such as
.bg-darkfor sections and paragraphs,.btn-infofor buttons or.panel-defaultfor panels to accommodate progressive enhancement
+ - Wrap text in a <span> tag if a style does not appear as it is meant to, due to specificity reasons
+
+ Incorrect use
Compliance point(s):
-
-
- Do not use this component in a way that conflicts with the preceding compliance point(s) -
- Do not use as the only way to communicate information or intent, as colour alone is not accessible +
- Do not use this component in a way that conflicts with the preceding compliance point(s) +
- Do not use as the only way to communicate information or intent, as colour alone is not accessible
Code
-<p class="bg-dark bg-canadaday text-white">...</p>CSS classes
--
-
.bg-canadaday
- - Set a background colour to red -
.panel-canadaday
- - Set border colour for panel to red -
hr.brdr-canadaday
- - Set border colour for <hr> to red -
Examples
-Section example
-Example of a heading
-This section is styled with .bg-dark, .bg-canadaday and .text-white.
Code
-<section class="well bg-dark bg-canadaday text-white">
- <h2 class="mrgn-tp-0">Example of a heading</h2>
+Code
+<p class="bg-dark bg-canadaday text-white">...</p>CSS classes
+-
+
.bg-canadaday
+ - Set a background colour to red +
.panel-canadaday
+ - Set border colour for panel to red +
hr.brdr-canadaday
+ - Set border colour for <hr> to red +
Examples
+Section example
+Example of a heading
+This section is styled with .bg-dark, .bg-canadaday and .text-white.
Code
+<section class="well bg-dark bg-canadaday text-white">
+ <h5 class="h3 mrgn-tp-0">Example of a heading</h5>
<p>This section is styled with <code>.bg-dark</code>, <code>.bg-canadaday</code> and <code>.text-white</code>.</p>
<p><a class="text-white" href="#">Link example</a></p>
<button class="btn-info bg-canadaday text-white" type="button">Button example</button>
</section><button> .btn example
- -Code
-<button class="btn btn-info bg-canadaday text-white" type="button">Button</button><a> .btn example
- Button -Code
-<a href="#" class="btn btn-info bg-canadaday text-white" role="button">Button</a><hr> example
--
Code
-<hr class="brdr-canadaday">Standard <hr> for visual comparison reference
--
Panel border example
-
-
-
+
+
+
+<button> .btn example
+ +Code
+<button class="btn btn-info bg-canadaday text-white" type="button">Button</button><a> .btn example
+Button +Code
+<a href="#" class="btn btn-info bg-canadaday text-white" role="button">Button</a><hr> example
++
Code
+<hr class="brdr-canadaday">Standard <hr> for visual comparison reference
++
Panel border example
+
+
- Lorem ipsum dolor sit amet.
-Code
-<div class="panel panel-default panel-canadaday">
+Code
+<div class="panel panel-default panel-canadaday">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet.</p>
</div>
</div>Standard default panel border for visual comparison reference
-
-
+
+
+
diff --git a/templates/search/results-advanced-en.html b/templates/search/results-advanced-en.html
index 9079f9d4a2..efda8d1f73 100644
--- a/templates/search/results-advanced-en.html
+++ b/templates/search/results-advanced-en.html
@@ -29,7 +29,7 @@
+
+
+Standard default panel border for visual comparison reference
+
+
- Lorem ipsum dolor sit amet.
-Beige background
-Use to make text appear on a beige background.
-
-
+
+
-
-
-
-
-
-
+
+
+### Previous iterations
+
+
+
+
+
+
+
+
+Details/summary polyfill example
+ +
+
+
+
+ Correct use
+Compliance point(s):
+-
+
- Use to introduce contrast to information +
- Use only with block elements
<p>,<ol>, and<ul>and inline elements<a>,<strong>and<em>.
+
+
+Incorrect use
+Compliance point(s):
+-
+
- Do not use this component in a way that conflicts with the preceding compliance point(s) +
- Do not use as the only way to communicate information or intent, as colour alone is not accessible +
Code
+<details class="bg-canadaday">
+ <summary>Lorem ipsum</summary>
+ <p>Lorem ipsum <a href="#">dolor sit amet</a>, <strong>consectetur</strong> <em>adipiscing elit</em>.</p>
+ <ul>
+ <li>List item 1</li>
+ </ul>
+</details>Standard default Details/summary polyfill for visual comparison reference
+ +Beige background
+Use to make text appear on a beige background.
+
+
- Appearance
This text is styled with .bg-canadaday-beige.
-
-
-
+
+
+
+
-
+
- Correct use
Compliance point(s):
--
-
- Use to introduce contrast to information -
- Use
.bg-canadaday-beigewith the default text colour to ensure sufficient contrast between text and background
- - Use a fallback colour such as
.btn-defaultfor buttons to accommodate progressive enhancement
- - Wrap text in a <span> tag if a style does not appear as it is meant to, due to specificity reasons +
- Use to introduce contrast to information +
- Use
.bg-canadaday-beigewith the default text colour to ensure sufficient contrast between text and background
+ - Use a fallback colour such as
.btn-defaultfor buttons to accommodate progressive enhancement
+ - Wrap text in a <span> tag if a style does not appear as it is meant to, due to specificity reasons
-
+
+
+ Incorrect use
-Compliance point(s):
--
+
- Do not use this component in a way that conflicts with the preceding compliance point(s)
- Do not use as the only way to communicate information or intent, as colour alone is not accessible -
Compliance point(s):
+Code
-<p class="bg-canadaday-beige">...</p>CSS classes
--
-
.bg-canadaday-beige
- - Set a background colour to beige -
Examples
-Section example
-Example of a heading
-This section is styled with .bg-canadaday-beige.
Code
-<section class="well bg-canadaday-beige">
- <h2 class="mrgn-tp-0">Example of a heading</h2>
+Code
+<p class="bg-canadaday-beige">...</p>CSS classes
+-
+
.bg-canadaday-beige
+ - Set a background colour to beige +
Examples
+Section example
+Example of a heading
+This section is styled with .bg-canadaday-beige.
Code
+<section class="well bg-canadaday-beige">
+ <h5 class="h3 mrgn-tp-0">Example of a heading</h5>
<p>This section is styled with <code>.bg-canadaday-beige</code>.</p>
<p><a href="#">Link example</a></p>
<button class="btn-default bg-canadaday-beige" type="button">Button example</button>
</section><button> .btn example
- -Code
-<button class="btn btn-default bg-canadaday-beige" type="button">Button</button><a> .btn example
- Button -Code
-<a href="#" class="btn btn-default bg-canadaday-beige" role="button">Button</a><button> .btn example
+ +Code
+<button class="btn btn-default bg-canadaday-beige" type="button">Button</button><a> .btn example
+Button +Code
+<a href="#" class="btn btn-default bg-canadaday-beige" role="button">Button</a>Feature tiles using panels
+Appearance
+
+
+
+
+
+ 
+
+
+
+ Title 1 with new CSS
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet turpis sapien. Nam eget blandit tortor, quis lacinia arcu.
+
+
+
+
+
+
+ Title 2 with new CSS
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+
+
+
+
+
+
+Title 3 with new CSS
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet turpis sapien. Nam eget blandit tortor, quis lacinia arcu. Ut sit amet turpis sapien.
+Code
+<div class="col-xs-12 col-sm-4 col-md-4 mrgn-bttm-md">
+ <section class="panel panel-default panel-canadaday-card p-0 hght-inhrt">
+ <header class="panel-heading">
+ <img class="img-responsive full-width" src="https://placehold.co/992x661" alt="">
+ <h4 class="panel-title mrgn-tp-lg mrgn-bttm-0"><a href="#" class="stretched-link">Title 1 with new CSS</a></h4>
+ </header>
+ <div class="panel-body mrgn-bttm-0">
+ <p class="mrgn-bttm-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet turpis sapien. Nam eget blandit tortor, quis lacinia arcu.</p>
+ </div>
+ </section>
+ </div>
+ <div class="col-xs-12 col-sm-4 col-md-4 mrgn-bttm-md">
+ <section class="panel panel-default panel-canadaday-card p-0 hght-inhrt">
+ <header class="panel-heading">
+ <img class="img-responsive full-width" src="https://placehold.co/992x661" alt="">
+ <h4 class="panel-title mrgn-tp-lg mrgn-bttm-0"><a href="#" class="stretched-link">Title 2 with new CSS</a></h4>
+ </header>
+ <div class="panel-body mrgn-bttm-0">
+ <p class="mrgn-bttm-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+ </div>
+ </section>
+ </div>
+ <div class="col-xs-12 col-sm-4 col-md-4 mrgn-bttm-md">
+ <section class="panel panel-default panel-canadaday-card p-0 hght-inhrt">
+ <header class="panel-heading">
+ <img class="img-responsive full-width" src="https://placehold.co/992x661" alt="">
+ <h4 class="panel-title mrgn-tp-lg mrgn-bttm-0"><a href="#" class="stretched-link">Title 3 with new CSS</a></h4>
+ </header>
+ <div class="panel-body mrgn-bttm-0">
+ <p class="mrgn-bttm-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet turpis sapien. Nam eget blandit tortor, quis lacinia arcu. Ut sit amet turpis sapien.</p>
+ </div>
+ </section>
+ </div>CSS classes
+-
+
.panel-canadaday-card
+ - Use
.panel-canadaday-cardto spotlight features
+
bg-canadaday class must be accompagnied with another dark contrast background colour such as bg-dark
- The panel-canadaday class must be accompagnied with a fall back color such as panel-default
diff --git "a/m\303\251li-m\303\251lo/th-canadaday/style.css" "b/m\303\251li-m\303\251lo/th-canadaday/style.css"
index 22adbc3d4c..2785aab3ec 100644
--- "a/m\303\251li-m\303\251lo/th-canadaday/style.css"
+++ "b/m\303\251li-m\303\251lo/th-canadaday/style.css"
@@ -2,12 +2,10 @@
.bg-canadaday {
background-color: #A30D26;
}
-
.panel-canadaday,
hr.brdr-canadaday {
border-color: #A30D26;
}
-
/* Hover and focus state */
a.bg-canadaday:hover,
a.bg-canadaday:focus,
@@ -15,7 +13,6 @@ button.bg-canadaday:hover,
button.bg-canadaday:focus {
background-color: #800613;
}
-
/* Active state */
a.bg-canadaday:active,
a.bg-canadaday:active:focus,
@@ -23,14 +20,40 @@ a.bg-canadaday:active:hover,
button.bg-canadaday:active {
background-color: #680106 !important;
}
-
-/* Force link text to remain white for hover, focus and active states. */
+/* Force link text to remain white for hover,
+focus and active states. */
a.bg-canadaday:hover,
a.bg-canadaday:focus,
-a.bg-canadaday:active {
+a.bg-canadaday:active,
+button.bg-canadaday:hover,
+button.bg-canadaday:focus,
+button.bg-canadaday:active {
color: #fff !important;
}
-
+/** details/summary **/
+details.bg-canadaday {
+ margin: 0;
+}
+details.bg-canadaday * {
+ color: #fff;
+}
+details.bg-canadaday summary {
+ background-color: #A30D26;
+ color: #fff;
+ border: 1px solid #A30D26;
+}
+details.bg-canadaday[open] > summary {
+ border: none;
+ border-bottom: 1px solid #fff;
+}
+details.bg-canadaday[open] {
+ border: 1px solid #A30D26;
+ padding-bottom: 0.35em;
+}
+details.bg-canadaday a:focus,
+details.bg-canadaday a:hover {
+ color: #b3ffff;
+}
/* Thematic beige */
.bg-canadaday-beige {
background-color: #F9F1DE;
@@ -41,17 +64,51 @@ a.bg-canadaday-beige:focus,
button.bg-canadaday-beige:hover,
button.bg-canadaday-beige:focus {
background-color: #F9E0C1;
+ color: #000 !important;
}
/* Active state */
a.bg-canadaday-beige:active,
a.bg-canadaday-beige:active:focus,
a.bg-canadaday-beige:active:hover,
-button.bg-canadaday-beige:active {
+button.bg-canadaday-beige:active,
+button.bg-canadaday-beige:active:focus,
+button.bg-canadaday-beige:active:hover {
background-color: #F6D3B2 !important;
+ color: #000 !important;
}
-/* Force link text to remain black for hover, focus and active states. */
-a.bg-canadaday-beige:hover,
-a.bg-canadaday-beige:focus,
-a.bg-canadaday-beige:active {
- color: #333;
+/*** Thematic Heading 1 ***/
+@media screen and (min-width: 768px) {
+ h1.gc-thickline.canadaday {
+ font-size: 2.4em;
+ }
+}
+@media screen and (min-width: 992px) {
+ h1.gc-thickline.canadaday {
+ font-size: 2.8em;
+ }
+}
+h1.gc-thickline.canadaday::after {
+ border-bottom: 0.18em solid #A30D26;
+ width: 0.95em;
+}
+/* Thematic Card */
+.panel-canadaday-card {
+ border: 0px !important;
+ border-radius: 18px !important;
+ box-shadow: 0px 3px 6px #00000029;
+}
+.panel-canadaday-card header.panel-heading {
+ background-color: transparent;
+ border: none;
+ padding: 0;
+}
+.panel-canadaday-card img {
+ border-radius: 18px 18px 0px 0px;
+}
+.panel-canadaday-card .panel-heading>:not(img) {
+ padding-left: 15px;
+ padding-right: 15px;
+}
+.panel-canadaday-card .panel-body {
+ padding-bottom: 0 !important;
}
diff --git "a/m\303\251li-m\303\251lo/th-zev/meta.md" "b/m\303\251li-m\303\251lo/th-zev/meta.md"
new file mode 100644
index 0000000000..c692fcb55c
--- /dev/null
+++ "b/m\303\251li-m\303\251lo/th-zev/meta.md"
@@ -0,0 +1,33 @@
+---
+feature: thématique
+lang: en
+title: Zero Emission Vehicles (ZEV) Theme
+description: Background colours used for NRCan's ZEV campaign
+componentName: th-zev
+expiry: May 31, 2024
+mainPage: zev.html
+cssClass:
+- bg-zev-purple
+- bg-zev-green
+- btn-zev-purple
+- btn-zev-green
+- panel-zev-green
+- panel-zev-purple
+a11yStatement: >
+ These colours meet the colour contrast requirements as outlined in WCAG 2.1 AA Success Criterion 1.4.3: Contrast (Minimum).
+ Tested by Eric Goodwin, eric.goodwin at nrcan-rncan.gc.ca. 2023-04-18. See the compliance notes regarding the risk of using
+ these colours to convey meaning
+peNote:
+- The bg-zev-purple class must be accompanied with another dark contrast background colour such as bg-dark
+- Use bg-zev-green with standard text colour to ensure sufficient contrast between text and background
+- Use bg-zev-purple with text-white colour to ensure sufficient contrast between text and background
+- The panel-zev-purple or panel-zev-green class must be accompagnied with a fall back colour such as panel-default
+- The btn-zev-purple or btn-zev-green class must be accompagnied with a fall back colour such as btn-default
+pages:
+ examples:
+ - title: Zero Emission Vehicles (ZEV) Theme
+ language: en
+ path: zev.html
+sponsor: NRCan - Eric Goodwin (@auxonic)
+output: false
+---
diff --git "a/m\303\251li-m\303\251lo/th-zev/style.css" "b/m\303\251li-m\303\251lo/th-zev/style.css"
new file mode 100644
index 0000000000..0c9414e541
--- /dev/null
+++ "b/m\303\251li-m\303\251lo/th-zev/style.css"
@@ -0,0 +1,116 @@
+/* ZEV theme */
+/* General Backgrounds */
+.bg-zev-purple {
+ background-color: #7B1964;
+}
+
+.bg-zev-green {
+ background-color: #9AC43F;
+}
+
+/* Buttons */
+.btn-zev-purple {
+ color: #FFFFFF;
+ background-color: #7B1964;
+ border-color: #551145;
+}
+
+.btn-zev-purple:active, .btn-zev-purple:focus, .btn-zev-purple:hover {
+ color: #FFFFFF;
+ background-color: #551145;
+ border-color: #551145;
+}
+
+.btn-zev-purple:visited {
+ color: #FFFFFF;
+}
+
+.btn-zev-green {
+ color: #292929;
+ background-color: #9AC43F;
+ border-color: #7a9c30;
+}
+
+.btn-zev-green:active, .btn-zev-green:focus, .btn-zev-green:hover {
+ color: #292929;
+ background-color: #7a9c30;
+ border-color: #7a9c30;
+}
+
+.btn-zev-green:visited {
+ color: #292929;
+}
+
+/* Wells */
+.well.bg-zev-green, .well.bg-zev-purple {
+ padding: 24px;
+ border-radius: 0;
+ box-shadow: none;
+}
+.well.bg-zev-green .well-link, .well.bg-zev-purple .well-link {
+ font-weight: bold;
+}
+.well.bg-zev-green.well-sm, .well.bg-zev-purple.well-sm {
+ padding: 9px;
+ border-radius: 0;
+}
+.well.bg-zev-green > :first-child, .well.bg-zev-purple > :first-child {
+ margin-top: 0;
+}
+.well.bg-zev-green > :last-child, .well.bg-zev-purple > :last-child {
+ margin-bottom: 0;
+}
+.well.bg-zev-green {
+ background-color: #9AC43F;
+ border: 1px solid #7a9c30;
+ color: #292929;
+}
+.well.bg-zev-green .well-link, .well.bg-zev-green .well-text {
+ color: #1D270C;
+}
+.well.bg-zev-green .well-link:focus, .well.bg-zev-green .well-link:hover {
+ color: #394C15;
+}
+.well.bg-zev-purple {
+ background-color: #7B1964;
+ border: 1px solid #551145;
+ color: #FFFFFF;
+}
+.well.bg-zev-purple .well-link, .well.bg-zev-purple .well-text {
+ color: #F8D3ED;
+}
+.well.bg-zev-purple .well-link:focus, .well.bg-zev-purple .well-link:hover {
+ color: #FD8BD5;
+}
+
+/* Panels */
+.panel-zev-green {
+ border-color: #9AC43F;
+ border-radius: 0;
+ border: 3px solid #9AC43F;
+}
+
+.panel-zev-green > .panel-heading,
+.panel-zev-green > .panel-footer {
+ color: #292929;
+ background-color: #9AC43F;
+ border-radius: 0;
+ border: 1px solid #9AC43F;
+ margin: -1px;
+}
+
+.panel-zev-purple {
+ border-color: #7B1964;
+ border-radius: 0;
+ border: 3px solid #7B1964;
+}
+
+.panel-zev-purple > .panel-heading,
+.panel-zev-purple > .panel-footer {
+ color: #FFFFFF;
+ background-color: #7B1964;
+ border-radius: 0;
+ border: 1px solid #7B1964;
+ margin: -1px;
+}
+
diff --git "a/m\303\251li-m\303\251lo/th-zev/zev.html" "b/m\303\251li-m\303\251lo/th-zev/zev.html"
new file mode 100644
index 0000000000..1877049134
--- /dev/null
+++ "b/m\303\251li-m\303\251lo/th-zev/zev.html"
@@ -0,0 +1,210 @@
+---
+title: Zero Emission Vehicles (ZEV) Theme
+dateModified: 2023-04-20
+description: ZEV CSS styles
+lang: en
+css:
+- style.css
+layout: no-container
+---
+
+
+
+ This is a
+
+
+
+
+ This is a
+
+
+
+
diff --git a/package-lock.json b/package-lock.json
index 02e11c529b..b3fd8b3e3f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "GCWeb",
- "version": "13.0.0",
+ "version": "13.5.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@@ -1573,7 +1573,7 @@
"code-prettify": {
"version": "0.1.0",
"resolved": "https://registry.npmjs.org/code-prettify/-/code-prettify-0.1.0.tgz",
- "integrity": "sha512-tNOWwXoF3ycqtvLCGPLYds2hKekmZfsPWinbRcLk6BBHBaSf+v+HJOvfg33VfVzYzvQ6zmVq+WO88oKweiJSQg=="
+ "integrity": "sha1-RocMyMGlDQm61TmzOpg9vUqjSx4="
},
"coffeescript": {
"version": "2.5.1",
@@ -2362,7 +2362,7 @@
"es5-shim": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/es5-shim/-/es5-shim-2.3.0.tgz",
- "integrity": "sha512-lqeBVvMTAbQwqOSVMJbhE/ykQ2tQm5so3tFsEc9fRsN8sxde/4o74WMDPKF/u9SY/d900D59ccra5PhKZI5hIw=="
+ "integrity": "sha1-kCG8UK1Nmj5TkwjuvTRDcgNVUAM="
},
"es6-iterator": {
"version": "2.0.3",
@@ -5886,7 +5886,7 @@
"html5shiv": {
"version": "3.7.3",
"resolved": "https://registry.npmjs.org/html5shiv/-/html5shiv-3.7.3.tgz",
- "integrity": "sha512-SZwGvLGNtgp8GbgFX7oXEp8OR1aBt5LliX6dG0kdD1kl3KhMonN0QcSa/A3TsTgFewaGCbIryQunjayWDXzxmw=="
+ "integrity": "sha1-14qEo2e8uacQEA1XgCw4ewhGMdI="
},
"htmlparser2": {
"version": "3.10.1",
@@ -6546,7 +6546,7 @@
"jquery": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-2.2.4.tgz",
- "integrity": "sha512-lBHj60ezci2u1v2FqnZIraShGgEXq35qCzMv4lITyHGppTnA13rwR0MgwyNJh9TnDs3aXUvd1xjAotfraMHX/Q=="
+ "integrity": "sha1-LInWiJterFIqfuoywUUhVZxsvwI="
},
"jquery-validation": {
"version": "1.19.5",
@@ -7414,7 +7414,7 @@
"mgrs": {
"version": "0.0.0",
"resolved": "https://registry.npmjs.org/mgrs/-/mgrs-0.0.0.tgz",
- "integrity": "sha512-YQm8HnF5Ty7EH+X+Pn9h8P4tdE7Jcyvm6RJ6Ed8HdyTZIZQ5yMa7apQQF58KMfC7wKFaBbtyGBAcTWBAfeHchw=="
+ "integrity": "sha1-qqK0gpMXv4ERipYNMlbgbdlnS40="
},
"micromatch": {
"version": "3.1.10",
@@ -8719,7 +8719,7 @@
"proj4": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/proj4/-/proj4-2.3.3.tgz",
- "integrity": "sha512-ZmXyIEcq1+fQROkr92rFdXLTPZyBFtcxyagu1cVSFtPfK8MOcctakofmAzHDovut2/UIZpzVqMVX69rAly4/Uw==",
+ "integrity": "sha1-SWp2hXivQ55Gd6CFpjmh8ZjLvc0=",
"requires": {
"mgrs": "0.0.0"
}
@@ -11594,8 +11594,8 @@
}
},
"wet-boew": {
- "version": "github:wet-boew/wet-boew#6f8deecb77f3677470b928b331a7790fc611198f",
- "from": "github:wet-boew/wet-boew#v4.0.60",
+ "version": "github:wet-boew/wet-boew#baeacbbe4c856f6b74094710c38d34bcc8f51bc2",
+ "from": "github:wet-boew/wet-boew#v4.0.65",
"requires": {
"bootstrap-sass": "3.4.1",
"code-prettify": "^0.1.0",
diff --git a/package.json b/package.json
index 802f53726d..1da66ee7ed 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "GCWeb",
- "version": "13.0.0",
+ "version": "13.5.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.61"
+ "wet-boew": "github:wet-boew/wet-boew#v4.0.65"
},
"browserslist": [
"last 2 versions",
diff --git a/sites/authentication/_base.scss b/sites/authentication/_base.scss
index 4aae982325..3cacab0d33 100644
--- a/sites/authentication/_base.scss
+++ b/sites/authentication/_base.scss
@@ -9,7 +9,7 @@
margin-top: 5px;
}
- a.btn:hover {
+ a.btn-primary:hover {
background-color: #444;
}
}
diff --git a/sites/authentication/activeusersession-en.html b/sites/authentication/activeusersession-en.html
new file mode 100644
index 0000000000..70c33e4a04
--- /dev/null
+++ b/sites/authentication/activeusersession-en.html
@@ -0,0 +1,42 @@
+---
+{
+ "altLangPage": "activeusersession-fr.html",
+ "breadcrumb": {
+ "title": "Canada.ca", "link": "https://www.canada.ca/en.html"
+ },
+ "dateModified": "2023-03-28",
+ "description": "Example of a session user with an active session.",
+ "language": "en",
+ "title": "Authentication - User active session",
+ "auth": {
+ "type": "active"
+ },
+ "concerns": [
+ "Need clarification: Context of use is ambiguous (raised by DTO)",
+ "Alignment/Consistency: How does it align with how the major authentication services currently do it? (e.g. CRA MyAccount, Service Canada MSCA) (raised by DTO)",
+ "Alignment/Consistency: Does this align with the direction that TBS OCIO is heading with their Sign in Canada project? (raised by DTO)",
+ "Alignment/Consistency: Does this impact other authentication patterns? (raised by DTO)",
+ "Comment: Concern about the use of the power icon on the sign out button - not sure this makes sense for the action (raised by DTO)"
+ ],
+ "discussionUrl": "https://github.com/wet-boew/GCWeb/pull/2139"
+}
+---
+
+
+{% include alert-community-stable.html %}
+
+{{ page.title }}
+ {% assign metadata = site.pages | where: "output", "false" | where: "componentName", "th-zev" | first %} +Sponsor: {{ metadata.sponsor }}
+Accessibility statement: {{ metadata.a11yStatement }}
+Progressive enhancement note:
+-
+ {% for peNote in metadata.peNote %}
+
- {{ peNote }} + {% endfor %} +
On this page
+-
+
- Coloured Backgrounds +
- Example - Themed Wells +
- Example - Themed Buttons +
- Example - Themed Panels +
Coloured Backgrounds
+Used to theme an element with the green or purple background and text colors
+
+
+
+
+
+ Appearance
+
+
+
+
+
+
+ ZEV Green
+This section is styled with .bg-zev-green.
+
+
+
+ ZEV Purple
+This section is styled with .bg-dark, .bg-zev-purple and .text-white.
+
+
+
+ Normal Well
+This section is styled with .well.
+
+
+
+
+ Correct use
+Compliance point(s):
+-
+
- Use to introduce contrast to information +
- Use
.bg-zev-purplein combination with.text-whiteto ensure sufficient contrast between text and background
+ - In the case of
.bg-zev-purpleuse a fallback colour such as.bg-darkfor sections and paragraphs,.btn-infofor buttons or.panel-defaultfor panels to accommodate progressive enhancement
+ - Wrap text in a
<span>tag if a style does not appear as it is meant to, due to specificity reasons
+ - For buttons using these colours ensure a fallback is provided using the
.btn-defaultclass
+
+
+ Incorrect use
+Compliance point(s):
+-
+
- Do not use this component in a way that conflicts with the preceding compliance point(s) +
- Do not use as the only way to communicate information or intent, as colour alone is not accessible +
- These colours should not be used to convey meaning unless there is also text to support the distinction. Remember that these classes may be removed and some users will not see them. +
CSS classes
+-
+
.bg-zev-green
+ - Set a background colour in an element or well to green +
.bg-zev-purple
+ - Set a background colour in an element or well to purple +
.btn-zev-green
+ - Set a button to the ZEV purple green +
.btn-zev-purple
+ - Set a button to the ZEV purple style +
.panel-zev-green
+ - Set a Panel to the ZEV purple green header, footer, and border. +
.panel-zev-purple
+ - Set a Panel to the ZEV purple purple header, footer, and border. +
Examples
+Well example
+ +
+ This is a
+
+
+ This is a .bg-zev-green well wrapper with .well-text on the header
+
+
+ This is a
+
+
+
+ This is a .bg-zev-purple well
+
+
+
+
+
+
+
+ This is a
+
+ This is a .bg-zev-green with .well-sm for smaller padding
+ Donec at sem in augue accumsan scelerisque.
+
+
+
+ This is a
+
+ This is a .bg-zev-purple with .well-sm for smaller padding
+ Donec at sem in augue accumsan scelerisque.
+Code
+<div class="well mrgn-bttm-0 text-center bg-zev-green">
+ <h4 class="well-text">This is a <code>.bg-zev-green</code> well wrapper with <code>.well-text</code> on the header</h4>
+ <p><a class="btn btn-lg btn-default mrgn-tp-md btn-zev-purple" href="#">Station locator</a></p>
+ </div>
+ <div class="well bg-dark text-white bg-zev-purple">
+ <ul class="list-unstyled lst-spcd mrgn-lft-md mrgn-rght-sm mrgn-bttm-0 text-white">
+ <li><h4 class="text-white mrgn-tp-sm well-text">This is a <code>.bg-zev-purple</code> well</h4></li>
+ <li><a class="text-white well-link" href="#">Incentives for buyers and dealerships</a></li>
+ <li><a class="text-white well-link" href="#">Infrastructure and awareness project funding</a></li>
+ </ul>
+ </div>
+
+ <div class="row">
+ <div class="col-md-6">
+ <div class="well well-sm bg-zev-green">
+ <h4 class="well-text">This is a <code>.bg-zev-green</code> with <code>.well-sm</code> for smaller padding</h4>
+ <p>Donec at sem in augue accumsan scelerisque.</p>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div class="well well-sm bg-dark text-white bg-zev-purple">
+ <h4 class="well-text">This is a <code>.bg-zev-purple</code> with <code>.well-sm</code> for smaller padding</h4>
+ <p>Donec at sem in augue accumsan scelerisque.</p>
+ </div>
+ </div>
+ </div>Button example
+ +Code
+<a href="#" class="btn btn-default btn-zev-green">This is a button in the <code>.btn-zev-green</code> style</a>
+<a href="#" class="btn btn-default btn-zev-purple">This is a button in the <code>.btn-zev-purple</code> style</a>Panels example
+This is a .panel-zev-green panel
+
+
+
+ Integer feugiat scelerisque varius morbi enim nunc faucibus a. Vel eros donec ac odio tempor orci. Morbi tincidunt augue interdum velit euismod in pellentesque massa. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio eu. Non enim praesent elementum facilisis leo vel fringilla est. Amet justo donec enim diam vulputate.
+This is a .panel-zev-purple panel
+
+
+
+ Integer feugiat scelerisque varius morbi enim nunc faucibus a. Vel eros donec ac odio tempor orci. Morbi tincidunt augue interdum velit euismod in pellentesque massa. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio eu. Non enim praesent elementum facilisis leo vel fringilla est. Amet justo donec enim diam vulputate.
+Code
+<section class="panel panel-default panel-zev-green">
+ <header class="panel-heading">
+ <h4 class="panel-title">This is a <code>.panel-zev-green</code> panel </h4>
+ </header>
+ <div class="panel-body">
+ <p>Integer feugiat scelerisque varius morbi enim nunc faucibus a. Vel eros donec ac odio tempor orci. <a class="well-link" href="#">Morbi tincidunt augue interdum </a>velit euismod in pellentesque massa. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio eu. Non enim praesent elementum facilisis leo vel fringilla est. Amet justo donec enim diam vulputate.</p>
+ </div>
+</section>
+
+<section class="panel panel-default panel-zev-purple">
+ <header class="panel-heading">
+ <h4 class="panel-title">This is a <code>.panel-zev-purple</code> panel </h4>
+ </header>
+ <div class="panel-body">
+ <p>Integer feugiat scelerisque varius morbi enim nunc faucibus a. Vel eros donec ac odio tempor orci. <a class="well-link" href="#">Morbi tincidunt augue interdum </a>velit euismod in pellentesque massa. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio eu. Non enim praesent elementum facilisis leo vel fringilla est. Amet justo donec enim diam vulputate.</p>
+ </div>
+</section>Expected output code
+<div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4"> + <section id="wb-so"> + <h2 class="wb-inv">Sign-on information</h2> + <a class="btn btn-sm btn-default" href="#"><span class="glyphicon glyphicon-user"></span> (User name)</a> + <a class="btn btn-sm btn-primary" href="#"><span class="glyphicon glyphicon-off"></span> Sign out</a> + </section> +</div>+ +
Where (User name) is replaced by the user name of the logged user.
+ +GCWeb Jekyll - Front matter example
+"auth": {
+ "type": "active"
+ }Code source attendu
+<div class="col-xs-5 col-xs-offset-7 col-md-offset-0 col-md-4"> + <section id="wb-so"> + <h2 class="wb-inv">Information de l'utilisateur actuel</h2> + <a class="btn btn-sm btn-default" href="#"><span class="glyphicon glyphicon-user"></span> (Nom d'utlisateur)</a> + <a class="btn btn-sm btn-primary" href="#"><span class="glyphicon glyphicon-off"></span> Se déconnecter</a> + </section> +</div>+ +
Où (Nom d'utlisateur) est remplacé par le nom d'utilisateur de la personne connecté.
+ +Exemple de l'initialisation pour GCWeb Jekyll
+"auth": {
+ "type": "active"
+ }This component support the following 3 design pattern variant:
+This component support the following 4 design pattern variant:
- Contextual Sign in button: A link pointing to a dedicated sign in web page
- Signed-off: A pattern that show how the user can sign-on directly from the current page. Note: The prompt sign in dialog and the interaction resulting of the signed-on are currently out-of-scope.
- Signed-on: A pattern that shows that the user is logged in, a way to access user's account and how to disconnect. +
- Active user session: A pattern that show the active user session information (connected), with a personalized user name.
Contextual Sign in button
diff --git a/sites/authentication/authentication-fr.html b/sites/authentication/authentication-fr.html index 282dc3a07a..44796c5c0a 100644 --- a/sites/authentication/authentication-fr.html +++ b/sites/authentication/authentication-fr.html @@ -10,11 +10,13 @@ "title": "Modèles d'authentification" } --- -Ce composant supporte les 3 variants de modèle de conception suivants:
+Ce composant supporte les 4 variants de modèle de conception suivants:
- Bouton contextuel « Se connecter »: Un lien pointant vers une page d'authentification désignée
- Session fermée: Un modèle qui présente un bouton d'inscription et un bouton de connexion.
- Session ouverte: Un modèle qui présente un bouton afin d'acceder au compte de l'utilisateur, un bouton de déconnexion ainsi qu'un texte confirmant que l'utilisateur est bien connecté. Note: La boîte de dialogue d'invite et l'intéraction résultant de la connexion sont actuellement hors de portée. +
- Session utilisateur active: Un modèle affichant l'information de la session d'un utilisateur avec une session active (connecté), personnalisé avec son nom d'utilisateur. +
Bouton contextuel « Se connecter »
diff --git a/sites/authentication/includes/authentication.html b/sites/authentication/includes/authentication.html index 141c9bcc96..9789444cfe 100644 --- a/sites/authentication/includes/authentication.html +++ b/sites/authentication/includes/authentication.html @@ -22,6 +22,9 @@{%- elsif page.auth.type == "signedoff" -%} +{%- elsif page.auth.type == "active" -%} +
{{ i18nText-signUsername }} + {{ i18nText-signOut }}
{% else %} diff --git a/sites/authentication/index.json-ld b/sites/authentication/index.json-ld index ea1a31a94a..96c7f49147 100644 --- a/sites/authentication/index.json-ld +++ b/sites/authentication/index.json-ld @@ -90,6 +90,16 @@ "title": "Page de contenu - Modèle de session ouverte", "language": "fr", "path": "signedon-fr.html" + }, + { + "title": "Active user session", + "language": "en", + "path": "activeusersession-en.html" + }, + { + "title": "Session utilisateur active", + "language": "fr", + "path": "activeusersession-fr.html" } ] } diff --git a/sites/h1/h1-en.md b/sites/h1/h1-en.md deleted file mode 100644 index 108290749e..0000000000 --- a/sites/h1/h1-en.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -{ - "altLangPage": "h1-fr.html", - "breadcrumbs": [ - { - "title": "GCWeb home", - "link": "https://wet-boew.github.io/GCWeb/index-en.html" }, - ], - "dateModified": "2023-06-19", - "description": "Documentation on the default H1 with short bold red underline.", - "language": "en", - "title": "Canada.ca H1" -} ---- - - --
-
- Status -
- Stable -
- Version -
- 1.0.0 -
- Type -
- Canada.ca site style -
Introduction
- -Purpose
-- The purpose of the default H1 with short bold red underline indicates the main heading of the page. -
- -Evaluation and report
-There is no evaluation and report available for this component.
- -Guidance
--
-
- Typography -
Variants
-This component supports only 1 variant:
--
-
- H1 (default) -
H1 (default)
- -Iteration 2
-Here is a list of changes that happened since the previous iteration:
-| Minor | -n/a | -
|---|---|
| Additions | -n/a | -
| Fixes | -
-
|
-
Working example(s)
-Refer to the h1 documentation at the top of this page.
- -How to implement
--
-
- Update the theme.css stylesheet -
Code sample
-Here is the html output the above h1 example:
- - {%- highlight html -%} -Canada.ca
- {%- endhighlight -%} - -Previous iterations
- -
-
diff --git a/sites/h1/h1-fr.md b/sites/h1/h1-fr.md
deleted file mode 100644
index 9569123c45..0000000000
--- a/sites/h1/h1-fr.md
+++ /dev/null
@@ -1,150 +0,0 @@
----
-{
- "altLangPage": "h1-en.html",
- "breadcrumbs": [
- {
- "title": "GCWeb accueil",
- "link": "https://wet-boew.github.io/GCWeb/index-fr.html"
- }
- ],
- "dateModified": "2023-06-19",
- "description": "Documentation à propos du H1 par défaut souligné d'une courte ligne rouge en gras.",
- "language": "fr",
- "title": "Titre de niveau H1 du Canada.ca"
-}
----
-
-
-Iteration 1
-Code sample
-Here is the html output for the above h1 example:
- {%- highlight html -%} -Canada.ca
- {%- endhighlight -%} --
-
- Statut -
- Stable -
- Version -
- 1.0.0 -
- Type -
- Style global de site de Canada.ca -
Introduction
- -Objectif
-- Le but du H1 par défaut souligné d'une courte ligne rouge en gras indique le titre principal de la page. -
- -Évaluation et rapport
-Il n'y a pas d'évaluation ni de rapport disponible pour cette composante.
- -Orientation
--
-
- Typographie -
Variantes
-Ce composant prend en charge 1 variante:
--
-
- H1 (par défaut) -
H1 (par défaut)
- -Itération 2
-Voici une liste des changements qui se sont produits depuis l'itération précédente :
-| Mineur | -n/a | -
|---|---|
| Additions | -n/a | -
| Correctifs | -
-
|
-
Exemple(s) pratique(s)
-Veuillez vous référer au fil d'Ariane au haut de cette page.
- -Comment mettre en œuvre
--
-
- Le fil d'Ariane commence toujours par « Canada.ca », qui est toujours un lien vers la page d'accueil de Canada.ca dans la langue actuelle. -
- La page en cours n’est jamais affichée à la fin de la piste de navigation. -
- Utilisez une icône de chevron à droite () pour séparer les niveaux -
- Les longs titres de page doivent être raccourcis dans la mesure du possible, pour permettre de réduire l’espace horizontal nécessaire pour afficher la piste. -
Le nom de chaque page ou section dans le site Canada.ca doit être associé à une version raccourcie du nom, aux fins du fil d'Ariane et d’autres systèmes de navigation.
-Par exemple, lorsqu'une personne est sur la page « Planification d'entreprise » dans le thème « Entreprises et industrie » le fil d'Ariane sera :
-Canada.ca > Entreprises > Lancer une entreprise
-Note: GCWeb vX.0 n'est plus compatible avec le modèle de mégamenu antérieur à 2019 (GCWEB v4.x) qui prenait toute la largeur de la page.
-Recommendation: Le titre de la page ne dois pas être inclus parmis la liste de fil d'arianne.
- -Exemple de code (identique à l'itération 1)
-Voici la sortie html avec des données structurées au format RDFa pour l'exemple de fil d'Ariane ci-dessus :
- {%- highlight html -%} - - {%- endhighlight -%} - -Itérations précédentes
- -
-
diff --git a/sites/h1/includes/h1.html b/sites/h1/includes/h1.html
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/sites/h1/index.json-ld b/sites/h1/index.json-ld
deleted file mode 100644
index a8bb1969c1..0000000000
--- a/sites/h1/index.json-ld
+++ /dev/null
@@ -1,34 +0,0 @@
-{
- "@context": {
- "@version": 1.0,
- "dct": "http://purl.org/dc/terms/",
- "title": { "@id": "dct:title", "@container": "@language" },
- "description": { "@id": "dct:description", "@container": "@language" },
- "modified": "dct:modified"
- },
- "title": {
- "en": "Canada.ca H1",
- "fr": "Titre de niveau H1 du Canada.ca"
- },
- "description": {
- "en": "Documentation on the default H1 with short bold red underline.",
- "fr": "Documentation à propos du H1 par défaut souligné d'une courte ligne rouge en gras."
- },
- "modified": "2023-07-20",
- "componentName": "h1",
- "status": "stable",
- "pages": {
- "docs": [
- {
- "title": "Canada.ca H1",
- "language": "en",
- "path": "h1-en.html"
- },
- {
- "title": "Titre de niveau H1 du Canada.ca",
- "language": "fr",
- "path": "h1-fr.html"
- }
- ]
- }
-}
diff --git a/sites/includes/i18n-core.liquid b/sites/includes/i18n-core.liquid
index 05babc74b9..c78498cc8d 100644
--- a/sites/includes/i18n-core.liquid
+++ b/sites/includes/i18n-core.liquid
@@ -32,6 +32,7 @@
{% assign i18nText-signAs = "Connecté en tant que" %}
{% assign i18nText-signOut = "Déconnexion" %}
{% assign i18nText-signAccount = "Mon compte" %}
+ {% assign i18nText-signUsername = "(Nom d'utlisateur)" %}
{% assign i18nText-footerSite = "À propos de ce site" %}
@@ -62,6 +63,7 @@
{% assign i18nText-signAs = "Signed in as" %}
{% assign i18nText-signOut = "Sign out" %}
{% assign i18nText-signAccount = "My account" %}
+ {% assign i18nText-signUsername = "(User name)" %}
{% assign i18nText-footerSite = "About this site" %}
diff --git a/sites/h1/_h1.scss b/sites/main-page-title/_main-page-title.scss
similarity index 93%
rename from sites/h1/_h1.scss
rename to sites/main-page-title/_main-page-title.scss
index a01eed55b4..1327c17ccd 100644
--- a/sites/h1/_h1.scss
+++ b/sites/main-page-title/_main-page-title.scss
@@ -1,5 +1,5 @@
/* H1 short bold red underline */
-h1 {
+h1#wb-cont {
border-bottom: none;
&::after {
diff --git a/sites/main-page-title/includes/main-page-title.html b/sites/main-page-title/includes/main-page-title.html
new file mode 100644
index 0000000000..9da2f2911d
--- /dev/null
+++ b/sites/main-page-title/includes/main-page-title.html
@@ -0,0 +1,12 @@
+{% if include %}
+ {% if include.dir == 'ltr' or include.dir == 'rtl' %}
+ Itération 1
-Exemple de code
-Voici la sortie html avec des données structurées au format RDFa pour l'exemple de fil d'Ariane ci-dessus :
- {%- highlight html -%} - - {%- endhighlight -%} -{{ page.title }}
+ {% endif %} +{% endif %} diff --git a/sites/main-page-title/index.json-ld b/sites/main-page-title/index.json-ld new file mode 100644 index 0000000000..c44dec2175 --- /dev/null +++ b/sites/main-page-title/index.json-ld @@ -0,0 +1,273 @@ +{ + "@context": { + "@version": 2.0, + "dct": "http://purl.org/dc/terms/", + "title": { + "@id": "dct:title", + "@container": "@language" + }, + "description": { + "@id": "dct:description", + "@container": "@language" + }, + "modified": "dct:modified" + }, + "title": { + "en": "Main page title", + "fr": "Titre principal" + }, + "description": { + "en": "Documentation on how to use the Main page title component.", + "fr": "Documentation sur l'utilisation du composant Titre principal." + }, + "modified": "2023-07-26", + "componentName": "gc-main-page-title", + "status": "stable", + "version": "1.0.1", + "pages": { + "docs": [ + { + "title": "Main page title", + "language": "en", + "path": "gc-main-page-title-en.html" + }, + { + "title": "Titre principal", + "language": "fr", + "path": "gc-main-page-title-fr.html" + } + ] + }, + "dependencies": [], + "a11yGuidance": "This component respects all WCAG 2.1 guidelines.", + "variations": [ + { + "name": { + "en": "Main page title with [id=wb-cont]", + "fr": "Titre principal avec [id=wb-cont]" + }, + "status": "stable", + "description": { + "en": "This variant should be used when the heading is the main content heading.", + "fr": "Cette variante doit être utilisée lorsque le titre est le titre principal du contenu." + }, + "guidance": { + "en": "https://design.canada.ca/common-design-patterns/gc-h1.html", + "fr": "https://conception.canada.ca/configurations-conception-communes/gc-h1.html" + }, + "revisedFor": "_:iteration_2", + "example": { + "en": [ + { + "href": "", + "text": "" + } + ], + "fr": [ + { + "href": "", + "text": "" + } + ] + }, + "implementation": [ + "_:implement_1_upgrade", + ], + "oldImplementation": [ + "_:implement_1_build" + ], + "history": [ + { + "en": "AAAA-MM-DD - Description 1", + "fr": "AAAA-MM-DD - Description 1" + } + ] + }, + { + "name": { + "en": "Main page title without [id=wb-cont]", + "fr": "Titre principal sans [id=wb-cont]" + }, + "status": "stable", + "description": { + "en": "This variant should be used for other headings.", + "fr": "Cette variante doit être utilisée pour les autres titres." + }, + "guidance": { + "en": "", + "fr": "" + }, + "implementation": { + "sample": { + "rev_code": "Main page title
" + } + }, + "history": [] + }, + { + "name": { + "en": "Main page title enhanced with RDFa + schema.org with [id=wb-cont]", + "fr": "Titre principal enrichi avec RDFa + schema.org avec [id=wb-cont]" + }, + "description": { + "en": "This variant should be used when structured data is required, and its use should be consistent with the overall SEO and data strategy of Canada.ca.", + "fr": "Cette variante doit être utilisée lorsque des données structurées sont nécessaires, et son utilisation doit être cohérente avec la stratégie globale de SEO et de données de Canada.ca." + }, + "status": "stable", + "guidance": { + "en": "", + "fr": "" + }, + "history": [] + }, + { + "name": { + "en": "Main page title enhanced with RDFa + schema.org without [id=wb-cont]", + "fr": "Titre principal enrichi avec RDFa + schema.org sans [id=wb-cont]" + }, + "description": { + "en": "This variant should be used when structured data is required, and its use should be consistent with the overall SEO and data strategy of Canada.ca.", + "fr": "Cette variante doit être utilisée lorsque des données structurées sont nécessaires, et son utilisation doit être cohérente avec la stratégie globale de SEO et de données de Canada.ca." + }, + "status": "stable", + "guidance": { + "en": "", + "fr": "" + }, + "implementation": { + "sample": { + "rev_code": "Your Heading Here
" + } + }, + "history": [] + } + ], + "implementation": [ + { + "@id": "_:implement_1_new", + "status": "", + "iteration": "_:iteration_1", + "name": { + "en": "", + "fr": "" + }, + "sample": { + "@type": "code-compare", + "rev_title": "Version 2.0", + "rev_code": "", + "from_title": "", + "from_code": "" + }, + "introduction": { + "en": "", + "fr": "" + } + } + ], + "changeset": [ + { + "@id": "_:cs_default", + "name": { + "en": "Version 1", + "fr": "Version 1" + }, + "status": "stable", + "baseOnIteration": "_:iteration_1", + "detectableBy": "", + "layout": [ + "" + ], + "style": [ + + ], + "semantic": { + "@type": "", + "description": "", + "code": { + "@type": [ + "@id", + "rdf:HTML" + ], + "@value": "includes/gc-h1.html" + } + }, + "logic": "", + "behaviour": "", + "recognition": "", + "guidance": "", + "context": "", + "configuration":[ + "" + ], + "static": "", + "schema": "", + "dependency": [ + "" + ], + "file": [ + "" + ] + } + ], + "iteration": [ + { + "@id": "_:iteration_1", + "name": { + "en": "v1", + "fr": "v1" + }, + "date": "2018-09", + "detectableBy": "", + "comment": "", + "successor": "_:iteration_2", + "example": { + "en": [ + { + "href": "", + "text": "" + } + ], + "fr": [ + { + "href": "", + "text": "" + } + ] + } + } + { + "@id": "_:iteration_2", + "name": { + "en": "v2", + "fr": "v2" + }, + "date": "2023-08", + "detectableBy": "", + "breaking": { + "semantic": "" + }, + "additions": { + "api": "" + }, + "fixes": { + "api": "" + }, + "predecessor": "_:iteration_1", + "comment": "", + "example": { + "en": [ + { + "href": "", + "text": "" + } + ], + "fr": [ + { + "href": "", + "text": "" + } + ] + } + } + ] +} diff --git a/sites/main-page-title/main-page-title-en.md b/sites/main-page-title/main-page-title-en.md new file mode 100644 index 0000000000..c973328ceb --- /dev/null +++ b/sites/main-page-title/main-page-title-en.md @@ -0,0 +1,145 @@ +--- +altLangPage: "main-page-title-fr.html" +breadcrumbs: + - title: "GCWeb home" + link": "https://wet-boew.github.io/GCWeb/index-en.html" +dateModified: "2023-07-24" +description: "Documentation on the default H1 use as the main title of a page with short bold red underline." +language: "en" +pageclass: "wb-prettify all-pre" +title: "Main page title" +--- + +-
+
- Status +
- Stable +
- Version +
- 1.0.1 +
- Type +
- Canada.ca site style +
Main page title
+{%- endhighlight -%} + +## Main page title without [id=wb-cont] + +### Description +This variant should be used for other headings. + +### Code sample +Here is the html output for the H1 without id=wb-cont example: + +{%- highlight html -%} +Main page title
+{%- endhighlight -%} + +## Main page title enhanced with RDFa + schema.org with [id=wb-cont] + +### Description +This variant should be used when structured data is required, and its use should be consistent with the overall SEO and data strategy of Canada.ca. + +### Working example(s) +Refer to the H1 at the top of this page. + +### How to implement +Use the default H1 style with a short bold red underline. Add the appropriate text for the main heading of the page or section. Add the RDFa and schema.org markup to the H1 element + +### Code sample +Here is the html output for the H1 with id=wb-cont and RDFa example: + +{%- highlight html -%} +Main page title
+{%- endhighlight -%} + +## Main page title enhanced with RDFa + schema.org without [id=wb-cont] + +### Description + +This variant should be used when structured data is required, and its use should be consistent with the overall SEO and data strategy of Canada.ca. + +### Code sample +Here is the html output for the H1 without id=wb-cont and RDFa example: + +{%- highlight html -%} +Main page title
+{%- endhighlight -%} + +## Changesets +Version 1, stable + +## Iteration 3 +Here is a list of changes that happened since the previous iteration: +| Minor | +n/a | +
|---|---|
| Additions | +n/a | +
| Fixes | +
+
|
+
+
+Iteration 2
+Code sample
+Here is the html output for the above h1 example:
+ {%- highlight html -%} +Main page title
+ {%- endhighlight -%} +
+
diff --git a/sites/main-page-title/main-page-title-fr.md b/sites/main-page-title/main-page-title-fr.md
new file mode 100644
index 0000000000..601e99f4c3
--- /dev/null
+++ b/sites/main-page-title/main-page-title-fr.md
@@ -0,0 +1,121 @@
+---
+{
+ "altLangPage": "main-page-title-en.html",
+ "breadcrumbs": [
+ {
+ "title": "GCWeb accueil",
+ "link": "https://wet-boew.github.io/GCWeb/index-fr.html"
+ }
+ ],
+ "dateModified": "2023-07-24",
+ "description": "Documentation à propos du H1 par défaut souligné d'une courte ligne rouge en gras.",
+ "language": "fr",
+ "title": "Titre principal de la page"
+}
+---
+
+
+Iteration 1
+Code sample
+Here is the html output for the above h1 example:
+ {%- highlight html -%} +Main page title
+ {%- endhighlight -%} +-
+
- Statut +
- Stable +
- Version +
- 1.0.1 +
- Type +
- Style global de site de Canada.ca +
Introduction
+ +But
+Le but du composant GC-H1 est de fournir un style H1 par défaut avec une courte ligne rouge en gras pour une utilisation dans les sites Web de Canada.ca. Il est utilisé pour indiquer l'en-tête principal d'une page ou d'une section.
+ +Évaluation et rapport
+Il n'y a pas d'évaluation ni de rapport disponible pour cette composante.
+ +Orientation
+-
+
- Typographie +
Variantes
+Ce composant prend en charge 2 variantes:
+ + +H1 (par défaut)
+ +Exemples fonctionnels
+Reportez-vous à l'en-tête H1 en haut de cette page.
+ +Comment implémenter
+Utilisez le style H1 par défaut avec une courte ligne rouge en gras. Ajoutez le texte approprié pour l'en-tête principal de la page ou de la section
+ +Exemples de code
+Voici le code HTML pour l'exemple de H1 sans id=wb-cont :
+ +{%- highlight html -%} +En-tête principale
+{%- endhighlight -%} + +Voici le code HTML pour ;'exemple de H1 avec id=wb-cont :
+ +{%- highlight html -%} +En-tête principale
+{%- endhighlight -%} + +H1 (avec RDFa + schema.org)
+ +Exemples fonctionnels
+Reportez-vous à l'en-tête H1 en haut de cette page.
+ +Comment implémenter
+Utilisez le style H1 par défaut avec une courte ligne rouge en gras. Ajoutez le texte approprié pour l'en-tête principal de la page ou de la section. Ajoutez la balise RDFa et schema.org à l'élément H1.
+ +Exemples de code
+Voici le code HTML pour l'exemple de H1 sans id=wb-cont et RDFa :
+ +{%- highlight html -%} +En-tête principale
+{%- endhighlight -%} + +Voici le code HTML pour l'exMple de H1 avec id=wb-cont et RDFa :
+ +{%- highlight html -%} +En-tête principale
+{%- endhighlight -%} + +Itération 2
+Voici une liste des changements qui se sont produits depuis l'itération précédente :
+| Mineur | +n/a | +
|---|---|
| Additions | +n/a | +
| Correctifs | +
+
|
+
Itérations précédentes
+ +
+
diff --git a/sites/main-page-title/main-page-title.json b/sites/main-page-title/main-page-title.json
new file mode 100644
index 0000000000..d049fe3ecd
--- /dev/null
+++ b/sites/main-page-title/main-page-title.json
@@ -0,0 +1,68 @@
+{
+ "en": {
+ "Status": "Stable",
+ "Version": "1.0.1",
+ "Type": "Canada.ca site functionality",
+ "Introduction": {
+ "Purpose": "The purpose of the main page title component is to provide a default H1 style with a short bold red underline for use in Canada.ca websites. It is used to indicate the main heading of a page."
+ },
+ "Evaluation and report": "There is no evaluation and report available for this component.",
+ "Guidance": {
+ "Main title": "https://design.canada.ca/common-design-patterns/headings.html#h1"
+ },
+ "Variants": {
+ "Main Title (default)": {
+ "Working example(s)": "Refer to the H1 use as the main page title at the top of a page.",
+ "How to implement": [
+ "Use the default H1 style with a short bold red underline",
+ "Add the appropriate text for the main heading of the page or section"
+ ],
+ "Code sample (without id=wb-cont)": "Itération 1
+Exemple de code
+Voici la sortie html avec des données structurées au format RDFa pour l'exemple de fil d'Ariane ci-dessus :
+ {%- highlight html -%} +Main heading
+ {%- endhighlight -%} +Main Heading
", + "Code sample (with id=wb-cont)": "Main Heading
" + }, + "Main Title with RDFa + schema.org": { + "Working example(s)": "Refer to the H1 use as the main page title at the top of a page.", + "How to implement": [ + "Use the default H1 style with a short bold red underline", + "Add the appropriate text for the main heading of the page or section", + "Add the RDFa and schema.org markup to the H1 element" + ], + "Code sample (without id=wb-cont)": "Main Heading
", + "Code sample (with id=wb-cont)": "Main Heading
" + } + } + }, + "fr": { + "Statut": "Stable", + "Version": "1.0.1", + "Type": "Fonctionnalité du site Canada.ca", + "Introduction": { + "Objectif": "Le but du composant Titre principal est de fournir un style H1 par défaut avec une courte ligne rouge en gras pour une utilisation dans les sites Web de Canada.ca. Il est utilisé pour indiquer l'en-tête principal d'une page." + }, + "Évaluation et rapport": "Il n'y a pas d'évaluation ni de rapport disponible pour ce composant.", + "Orientation": { + "H1": "https://design.canada.ca/fr/patrons-de-conception-communs/titres.html#h1" + }, + "Variantes": { + "Titre principal (par défaut)": { + "Exemple(s) de travail": "Reportez-vous à l'en-tête H1 en haut de cette page.", + "Comment implémenter": [ + "Utilisez le style H1 par défaut avec une courte ligne rouge en gras", + "Ajoutez le texte approprié pour l'en-tête principal de la page ou de la section" + ], + "Exemple de code (sans id=wb-cont)": "En-tête principal
", + "Exemple de code (avec id=wb-cont)": "En-tête principal
" + }, + "Titre principal avec RDFa + schema.org": { + "Exemple(s) de travail": "Reportez-vous à l'en-tête H1 en haut de cette page.", + "Comment implémenter": [ + "Utilisez le style H1 par défaut avec une courte ligne rouge en gras", + "Ajoutez le texte approprié pour l'en-tête principal de la page ou de la section", + "Ajoutez la balise RDFa et schema.org à l'élément H1" + ], + "Exemple de code (sans id=wb-cont)": "En-tête principal
", + "Exemple de code (avec id=wb-cont)": "En-tête principal
" + } + } + } +} diff --git a/sites/theme.scss b/sites/theme.scss index 32b29ef13b..d09ec09ff6 100644 --- a/sites/theme.scss +++ b/sites/theme.scss @@ -33,6 +33,7 @@ @import "bootstrap-sass/assets/stylesheets/bootstrap/type"; @import "wet-boew/src/base/bootstrap-overrides/core-heading"; @import "baseline/heading"; +@import "gc-h1/gc-h1"; @import "wet-boew/src/base/lists/base"; @import "baseline/lists/lists"; @import "wet-boew/src/base/bootstrap-overrides/core"; diff --git a/templates/search/api-en.html b/templates/search/api-en.html index 2ce0deee5e..80ae03907e 100644 --- a/templates/search/api-en.html +++ b/templates/search/api-en.html @@ -7,7 +7,7 @@ ], "secondlevel": false, "altLangPage": "api-fr.html", - "dateModified": "2022-08-02", + "dateModified": "2023-04-18", "share": "true" } --- @@ -65,6 +65,7 @@Usability Research
Version history
-
+
- Version 3.0 - Update search pages with a new disclaimer message to let users know not entering personal information.
- Version 2.3:
- Adding a paragraph with a unique ID in the form to let users know not entering personal information. @@ -124,6 +125,37 @@
Search bar
+ +++Version 3.0
+
+<form> + <label class="wb-inv" for="sch-inp">Search Government of Canada websites</label> + <div class="input-group mrgn-tp-lg"> + <input spellcheck="false" autocomplete="off" id="sch-inp" class="form-control" type="search" data-fusion-query aria-describedby="gc-pi" /> + <span class="input-group-btn"> + <button type="submit" class="btn btn-primary"> <span class="glyphicon-search glyphicon"></span><span class="wb-inv">Search</span></button> + </span> + </div> + <p id="gc-pi" class="mrgn-tp-md">Don't include personal information (telephone, email, SIN, financial, medical, or work details).</p> +</form>++Version 2.3
+
+<form> + <label class="wb-inv" for="sch-inp">Search Government of Canada websites</label> + <div class="input-group mrgn-tp-lg"> + <input spellcheck="false" autocomplete="off" id="sch-inp" class="form-control" type="search" data-fusion-query aria-describedby="gc-pi" /> + <span class="input-group-btn"> + <button type="submit" class="btn btn-primary"> <span class="glyphicon-search glyphicon"></span><span class="wb-inv">Search</span></button> + </span> + </div> + <p id="gc-pi" class="mrgn-tp-md">Please <strong>do not include sensitive personal information</strong> in the search box, such as your social insurance number, personal finance data and medical or work history.</p> +</form>+Version 2.3 Vs Version 2.2
+++Version 2.3
<form> <label class="wb-inv" for="sch-inp">Search Government of Canada websites</label> @@ -149,6 +181,7 @@Version 2.2
</form>Version 2.1
@@ -167,158 +200,335 @@Version 2.2
Search bar contextual
-+-+ <p id="gc-pi" class="mrgn-tp-md">Version 2.3
-<div class="well"> - <form class="mrgn-tp-sm"> - <label class="wb-inv" for="sch-inp">Search Government of Canada websites</label> - <input class="form-control full-width" spellcheck="false" autocomplete="off" dir="ltr" id="sch-inp" name="q" type="search" data-fusion-query aria-describedby="gc-pi" > - <div class="mrgn-tp-md"> - <p class="wb-inv">See results from:</p> - <ul class="radio-inline list-inline mrgn-lft-sm"> - <li><input type="radio" name="resultsfrom" id="opt-allresults" value="allresults" /> <label for="opt-allresults">All Government of Canada websites</label></li> - <li class="mrgn-lft-lg current" aria-current="location"><input type="radio" name="resultsfrom" id="opt-context" value="context" checked="checked" /> <label for="opt-context">Context label</label></li> - </ul> - <div class="pull-right"> - <button type="submit" class="btn btn-primary" name="wb-srch-sub"> <span class="glyphicon-search glyphicon"></span> Search</button> ++-Version 3.0
+
-<div class="well"> + <form class="mrgn-tp-sm"> + <label class="wb-inv" for="sch-inp">Search Government of Canada websites</label> + <input class="form-control full-width" spellcheck="false" autocomplete="off" dir="ltr" id="sch-inp" name="q" type="search" data-fusion-query aria-describedby="gc-pi" > + <div class="mrgn-tp-md"> + <p class="wb-inv">See results from:</p> + <ul class="radio-inline list-inline mrgn-lft-sm"> + <li><input type="radio" name="resultsfrom" id="opt-allresults" value="allresults" /> <label for="opt-allresults">All Government of Canada websites</label></li> + <li class="mrgn-lft-lg current" aria-current="location"><input type="radio" name="resultsfrom" id="opt-context" value="context" checked="checked" /> <label for="opt-context">Context label</label></li> + </ul> + <div class="pull-right"> + <button type="submit" class="btn btn-primary" name="wb-srch-sub"> <span class="glyphicon-search glyphicon"></span> Search</button> + </div> + <div class="clearfix"></div> </div> - <div class="clearfix"></div> - </div> - <p id="gc-pi" class="mrgn-tp-md">Please <strong>do not include sensitive personal information</strong> in the search box, such as your social insurance number, personal finance data and medical or work history.</p> - </form> -</div>-+Version 2.2
-
+<div class="well"> - <form class="mrgn-tp-sm"> + <p id="gc-pi" class="mrgn-tp-md">Don't include personal information (telephone, email, SIN, financial, medical, or work details).</p> + </form> + </div>+-Version 2.3
+
-<div class="well"> + <form class="mrgn-tp-sm"> <label class="wb-inv" for="sch-inp">Search Government of Canada websites</label> - <input class="form-control full-width" spellcheck="false" autocomplete="off" dir="ltr" id="sch-inp" name="q" type="search" data-fusion-query> - <div class="mrgn-tp-md"> - <p class="wb-inv">See results from:</p> - <ul class="radio-inline list-inline mrgn-lft-sm"> - <li><input type="radio" name="resultsfrom" id="opt-allresults" value="allresults" /> <label for="opt-allresults">All Government of Canada websites</label></li> - <li class="mrgn-lft-lg current" aria-current="location"><input type="radio" name="resultsfrom" id="opt-context" value="context" checked="checked" /> <label for="opt-context">Context label</label></li> - </ul> - <div class="pull-right"> - <button type="submit" class="btn btn-primary" name="wb-srch-sub"> <span class="glyphicon-search glyphicon"></span> Search</button> + <input class="form-control full-width" spellcheck="false" autocomplete="off" dir="ltr" id="sch-inp" name="q" type="search" data-fusion-query aria-describedby="gc-pi" > + <div class="mrgn-tp-md"> + <p class="wb-inv">See results from:</p> + <ul class="radio-inline list-inline mrgn-lft-sm"> + <li><input type="radio" name="resultsfrom" id="opt-allresults" value="allresults" /> <label for="opt-allresults">All Government of Canada websites</label></li> + <li class="mrgn-lft-lg current" aria-current="location"><input type="radio" name="resultsfrom" id="opt-context" value="context" checked="checked" /> <label for="opt-context">Context label</label></li> + </ul> + <div class="pull-right"> + <button type="submit" class="btn btn-primary" name="wb-srch-sub"> <span class="glyphicon-search glyphicon"></span> Search</button> + </div> + <div class="clearfix"></div> </div> - <div class="clearfix"></div> - </div> - </form> -</div> -Please <strong>do not include sensitive personal information</strong> in the search box, such as your social insurance number, personal finance data and medical or work history.</p> + </form> + </div> +
-
+ Version 2.1
-
-<div class="well">
- <form class="mrgn-tp-sm">
- <label class="wb-inv" for="sch-inp">Search Government of Canada websites</label>
- <input class="form-control full-width" spellcheck="false" autocomplete="off" dir="ltr" id="sch-inp" name="q" type="search">
- <div class="mrgn-tp-md">
- <p class="wb-inv">See results from:</p>
- <ul class="radio-inline list-inline mrgn-lft-sm">
- <li><input type="radio" name="resultsfrom" id="opt-allresults" value="allresults" /> <label for="opt-allresults">All Government of Canada websites</label></li>
- <li class="mrgn-lft-lg current" aria-current="location"><input type="radio" name="resultsfrom" id="opt-context" value="context" checked="checked" /> <label for="opt-context">Context label</label></li>
- </ul>
- <div class="pull-right">
- <button type="submit" class="btn btn-primary" name="wb-srch-sub"> <span class="glyphicon-search glyphicon"></span> Search</button>
+Version 2.3 Vs Version 2.2
+
+
+Version 2.3
+<div class="well">
+ <form class="mrgn-tp-sm">
+ <label class="wb-inv" for="sch-inp">Search Government of Canada websites</label>
+ <input class="form-control full-width" spellcheck="false" autocomplete="off" dir="ltr" id="sch-inp" name="q" type="search" data-fusion-query aria-describedby="gc-pi" >
+ <div class="mrgn-tp-md">
+ <p class="wb-inv">See results from:</p>
+ <ul class="radio-inline list-inline mrgn-lft-sm">
+ <li><input type="radio" name="resultsfrom" id="opt-allresults" value="allresults" /> <label for="opt-allresults">All Government of Canada websites</label></li>
+ <li class="mrgn-lft-lg current" aria-current="location"><input type="radio" name="resultsfrom" id="opt-context" value="context" checked="checked" /> <label for="opt-context">Context label</label></li>
+ </ul>
+ <div class="pull-right">
+ <button type="submit" class="btn btn-primary" name="wb-srch-sub"> <span class="glyphicon-search glyphicon"></span> Search</button>
+ </div>
+ <div class="clearfix"></div>
</div>
- <div class="clearfix"></div>
- </div>
- </form>
-</div>
-
+<p id="gc-pi" class="mrgn-tp-md">Please <strong>do not include sensitive personal information</strong> in the search box, such as your social insurance number, personal finance data and medical or work history.</p>
+ </form>
+ </div>
+
+
+ Version 2.2
+ <div class="well">
+ <form class="mrgn-tp-sm">
+ <label class="wb-inv" for="sch-inp">Search Government of Canada websites</label>
+ <input class="form-control full-width" spellcheck="false" autocomplete="off" dir="ltr" id="sch-inp" name="q" type="search" data-fusion-query>
+ <div class="mrgn-tp-md">
+ <p class="wb-inv">See results from:</p>
+ <ul class="radio-inline list-inline mrgn-lft-sm">
+ <li><input type="radio" name="resultsfrom" id="opt-allresults" value="allresults" /> <label for="opt-allresults">All Government of Canada websites</label></li>
+ <li class="mrgn-lft-lg current" aria-current="location"><input type="radio" name="resultsfrom" id="opt-context" value="context" checked="checked" /> <label for="opt-context">Context label</label></li>
+ </ul>
+ <div class="pull-right">
+ <button type="submit" class="btn btn-primary" name="wb-srch-sub"> <span class="glyphicon-search glyphicon"></span> Search</button>
+ </div>
+ <div class="clearfix"></div>
+ </div>
+ </form>
+ </div>
+
+
+
+
+
Version 2.1
+<div class="well">
+ <form class="mrgn-tp-sm">
+ <label class="wb-inv" for="sch-inp">Search Government of Canada websites</label>
+ <input class="form-control full-width" spellcheck="false" autocomplete="off" dir="ltr" id="sch-inp" name="q" type="search">
+ <div class="mrgn-tp-md">
+ <p class="wb-inv">See results from:</p>
+ <ul class="radio-inline list-inline mrgn-lft-sm">
+ <li><input type="radio" name="resultsfrom" id="opt-allresults" value="allresults" /> <label for="opt-allresults">All Government of Canada websites</label></li>
+ <li class="mrgn-lft-lg current" aria-current="location"><input type="radio" name="resultsfrom" id="opt-context" value="context" checked="checked" /> <label for="opt-context">Context label</label></li>
+ </ul>
+ <div class="pull-right">
+ <button type="submit" class="btn btn-primary" name="wb-srch-sub"> <span class="glyphicon-search glyphicon"></span> Search</button>
+ </div>
+ <div class="clearfix"></div>
+ </div>
+ </form>
+ </div>
+ Search bar advanced
-
+
+
+
-
+
+Version 2.2
-<form action="#wb-land" method="get" role="form">
- <fieldset>
- <legend class="h3 mrgn-tp-sm">Find pages with...</legend>
- <div class="form-group">
- <label for="advseacon1">all these words:</label>
- <input name="allq" class="form-control" id="advseacon1" maxlength="100" data-fusion-query="safe" aria-describedby="gc-pi" >
- </div>
- <div class="form-group">
- <label for="advseacon2">this exact word or phrase:</label>
- <input name="exctq" class="form-control" id="advseacon2" maxlength="200" data-fusion-query="safe" aria-describedby="gc-pi" >
- </div>
- <div class="form-group">
- <label for="advseacon3">any of these words:</label>
- <input name="anyq" class="form-control" id="advseacon3" maxlength="100" data-fusion-query="safe" aria-describedby="gc-pi" >
- </div>
- <div class="form-group">
- <label for="advseacon4">none of these words:</label>
- <input name="noneq" class="form-control" id="advseacon4" maxlength="100" data-fusion-query="safe" aria-describedby="gc-pi" >
- </div>
+
+ Version 3.0
+ <form action="#wb-land" method="get" role="form">
+ <fieldset>
+ <legend class="h3 mrgn-tp-sm">Find pages with...</legend>
+ <div class="form-group">
+ <label for="advseacon1">all these words:</label>
+ <input name="allq" class="form-control" id="advseacon1" maxlength="100" data-fusion-query="safe" aria-describedby="gc-pi" >
+ </div>
+ <div class="form-group">
+ <label for="advseacon2">this exact word or phrase:</label>
+ <input name="exctq" class="form-control" id="advseacon2" maxlength="200" data-fusion-query="safe" aria-describedby="gc-pi" >
+ </div>
+ <div class="form-group">
+ <label for="advseacon3">any of these words:</label>
+ <input name="anyq" class="form-control" id="advseacon3" maxlength="100" data-fusion-query="safe" aria-describedby="gc-pi" >
+ </div>
+ <div class="form-group">
+ <label for="advseacon4">none of these words:</label>
+ <input name="noneq" class="form-control" id="advseacon4" maxlength="100" data-fusion-query="safe" aria-describedby="gc-pi" >
+ </div>
+ <button type="submit" class="btn btn-md btn-primary">Search</button>
+ <p id="gc-pi" class="mrgn-tp-md">Don't include personal information (telephone, email, SIN, financial, medical, or work details).</p>
+ </fieldset>
+ <fieldset>
+ <legend class="h3 mrgn-tp-sm">Then narrow your results by...</legend>
+ <div class="form-group">
+ <label for="advseacon5">pages updated:</label>
+ <select class="form-control" name="fqupdate" id="advseacon5" data-fusion-query="safe"> <option selected value="">anytime</option> <option value="dateModified_dt:[NOW-1DAY TO NOW]">past 24 hours</option> <option value="dateModified_dt:[NOW-7DAYS TO NOW]">past week</option> <option value="dateModified_dt:[NOW-1MONTH TO NOW]">past month</option> <option value="dateModified_dt:[NOW-1YEAR TO NOW]">past year</option> </select>
+ </div>
+ <div class="form-group">
+ <label for="advseacon7">site or domain:</label>
+ <input name="dmn" class="form-control" id="advseacon7" maxlength="100" data-fusion-query="safe" aria-describedby="gc-pi" >
+ </div>
+ <div class="form-group">
+ <label for="advseacon8">terms appearing:</label>
+ <select class="form-control" name="fqocct" id="advseacon8" data-fusion-query="safe"> <option value="">anywhere in the page</option> <option value="title_t">in the title of the page</option> <option value="url_t">in the URL of the page</option> <option value="body_t">in the body of the page </option></select>
+ </div>
+ </fieldset>
+ </form>
+
+
+ Version 2.2
+ <form action="#wb-land" method="get" role="form">
+ <fieldset>
+ <legend class="h3 mrgn-tp-sm">Find pages with...</legend>
+ <div class="form-group">
+ <label for="advseacon1">all these words:</label>
+ <input name="allq" class="form-control" id="advseacon1" maxlength="100" data-fusion-query="safe" aria-describedby="gc-pi" >
+ </div>
+ <div class="form-group">
+ <label for="advseacon2">this exact word or phrase:</label>
+ <input name="exctq" class="form-control" id="advseacon2" maxlength="200" data-fusion-query="safe" aria-describedby="gc-pi" >
+ </div>
+ <div class="form-group">
+ <label for="advseacon3">any of these words:</label>
+ <input name="anyq" class="form-control" id="advseacon3" maxlength="100" data-fusion-query="safe" aria-describedby="gc-pi" >
+ </div>
+ <div class="form-group">
+ <label for="advseacon4">none of these words:</label>
+ <input name="noneq" class="form-control" id="advseacon4" maxlength="100" data-fusion-query="safe" aria-describedby="gc-pi" >
+ </div>
+ <button type="submit" class="btn btn-md btn-primary">Search</button>
+ <p id="gc-pi" class="mrgn-tp-md">Please <strong>do not include sensitive personal information</strong> in the search box, such as your social insurance number, personal finance data and medical or work history.</p>
+ </fieldset>
+ <fieldset>
+ <legend class="h3 mrgn-tp-sm">Then narrow your results by...</legend>
+ <div class="form-group">
+ <label for="advseacon5">pages updated:</label>
+ <select class="form-control" name="fqupdate" id="advseacon5" data-fusion-query="safe"> <option selected value="">anytime</option> <option value="dateModified_dt:[NOW-1DAY TO NOW]">past 24 hours</option> <option value="dateModified_dt:[NOW-7DAYS TO NOW]">past week</option> <option value="dateModified_dt:[NOW-1MONTH TO NOW]">past month</option> <option value="dateModified_dt:[NOW-1YEAR TO NOW]">past year</option> </select>
+ </div>
+ <div class="form-group">
+ <label for="advseacon7">site or domain:</label>
+ <input name="dmn" class="form-control" id="advseacon7" maxlength="100" data-fusion-query="safe" aria-describedby="gc-pi" >
+ </div>
+ <div class="form-group">
+ <label for="advseacon8">terms appearing:</label>
+ <select class="form-control" name="fqocct" id="advseacon8" data-fusion-query="safe"> <option value="">anywhere in the page</option> <option value="title_t">in the title of the page</option> <option value="url_t">in the URL of the page</option> <option value="body_t">in the body of the page </option></select>
+ </div>
+ </fieldset>
+ </form>
+
+
+
Version 2.2 Vs Version 2.1
+
+
+
+Version 2.2
+<form action="#wb-land" method="get" role="form">
+<fieldset>
+ <legend class="h3 mrgn-tp-sm">Find pages with...</legend>
+ <div class="form-group">
+ <label for="advseacon1">all these words:</label>
+ <input name="allq" class="form-control" id="advseacon1" maxlength="100" data-fusion-query="safe" aria-describedby="gc-pi" >
+ </div>
+ <div class="form-group">
+ <label for="advseacon2">this exact word or phrase:</label>
+ <input name="exctq" class="form-control" id="advseacon2" maxlength="200" data-fusion-query="safe" aria-describedby="gc-pi" >
+ </div>
+ <div class="form-group">
+ <label for="advseacon3">any of these words:</label>
+ <input name="anyq" class="form-control" id="advseacon3" maxlength="100" data-fusion-query="safe" aria-describedby="gc-pi" >
+ </div>
+ <div class="form-group">
+ <label for="advseacon4">none of these words:</label>
+ <input name="noneq" class="form-control" id="advseacon4" maxlength="100" data-fusion-query="safe" aria-describedby="gc-pi" >
+ </div>
+ <button type="submit" class="btn btn-md btn-primary">Search</button>
+ <p id="gc-pi" class="mrgn-tp-md">Please <strong>do not include sensitive personal information</strong> in the search box, such as your social insurance number, personal finance data and medical or work history.</p>
+ </fieldset>
+ <fieldset>
+ <legend class="h3 mrgn-tp-sm">Then narrow your results by...</legend>
+ <div class="form-group">
+ <label for="advseacon5">pages updated:</label>
+ <select class="form-control" name="fqupdate" id="advseacon5" data-fusion-query="safe"> <option selected value="">anytime</option> <option value="dateModified_dt:[NOW-1DAY TO NOW]">past 24 hours</option> <option value="dateModified_dt:[NOW-7DAYS TO NOW]">past week</option> <option value="dateModified_dt:[NOW-1MONTH TO NOW]">past month</option> <option value="dateModified_dt:[NOW-1YEAR TO NOW]">past year</option> </select>
+ </div>
+ <div class="form-group">
+ <label for="advseacon7">site or domain:</label>
+ <input name="dmn" class="form-control" id="advseacon7" maxlength="100" data-fusion-query="safe" aria-describedby="gc-pi" >
+ </div>
+ <div class="form-group">
+ <label for="advseacon8">terms appearing:</label>
+ <select class="form-control" name="fqocct" id="advseacon8" data-fusion-query="safe"> <option value="">anywhere in the page</option> <option value="title_t">in the title of the page</option> <option value="url_t">in the URL of the page</option> <option value="body_t">in the body of the page </option></select>
+ </div>
+ </fieldset>
+ </form>
+
- Version 2.1
+<form action="#wb-land" method="get" role="form">
+ <fieldset>
+ <legend class="h3 mrgn-tp-sm">Find pages with...</legend>
+ <div class="form-group">
+ <label for="advseacon1">all these words:</label>
+ <input name="allq" class="form-control" id="advseacon1" maxlength="100" data-fusion-query="safe" >
+ </div>
+ <div class="form-group">
+ <label for="advseacon2">this exact word or phrase:</label>
+ <input name="exctq" class="form-control" id="advseacon2" maxlength="200" data-fusion-query="safe" >
+ </div>
+ <div class="form-group">
+ <label for="advseacon3">any of these words:</label>
+ <input name="anyq" class="form-control" id="advseacon3" maxlength="100" data-fusion-query="safe" >
+ </div>
+ <div class="form-group">
+ <label for="advseacon4">none of these words:</label>
+ <input name="noneq" class="form-control" id="advseacon4" maxlength="100" data-fusion-query="safe" >
+ </div>
+ </fieldset>
+ <fieldset>
+ <legend class="h3 mrgn-tp-sm">Then narrow your results by...</legend>
+ <div class="form-group">
+ <label for="advseacon5">pages updated:</label>
+ <select class="form-control" name="fqupdate" id="advseacon5" data-fusion-query="safe"> <option selected value="">anytime</option> <option value="dateModified_dt:[NOW-1DAY TO NOW]">past 24 hours</option> <option value="dateModified_dt:[NOW-7DAYS TO NOW]">past week</option> <option value="dateModified_dt:[NOW-1MONTH TO NOW]">past month</option> <option value="dateModified_dt:[NOW-1YEAR TO NOW]">past year</option> </select>
+ </div>
+ <div class="form-group">
+ <label for="advseacon7">site or domain:</label>
+ <input name="dmn" class="form-control" id="advseacon7" maxlength="100" data-fusion-query="safe" aria-describedby="gc-pi" >
+ </div>
+ <div class="form-group">
+ <label for="advseacon8">terms appearing:</label>
+ <select class="form-control" name="fqocct" id="advseacon8" data-fusion-query="safe"> <option value="">anywhere in the page</option> <option value="title_t">in the title of the page</option> <option value="url_t">in the URL of the page</option> <option value="body_t">in the body of the page </option></select>
+ </div>
+ </fieldset>
<button type="submit" class="btn btn-md btn-primary">Search</button>
- <p id="gc-pi" class="mrgn-tp-md">Please <strong>do not include sensitive personal information</strong> in the search box, such as your social insurance number, personal finance data and medical or work history.</p>
- </fieldset>
- <fieldset>
- <legend class="h3 mrgn-tp-sm">Then narrow your results by...</legend>
- <div class="form-group">
- <label for="advseacon5">pages updated:</label>
- <select class="form-control" name="fqupdate" id="advseacon5" data-fusion-query="safe"> <option selected value="">anytime</option> <option value="dateModified_dt:[NOW-1DAY TO NOW]">past 24 hours</option> <option value="dateModified_dt:[NOW-7DAYS TO NOW]">past week</option> <option value="dateModified_dt:[NOW-1MONTH TO NOW]">past month</option> <option value="dateModified_dt:[NOW-1YEAR TO NOW]">past year</option> </select>
- </div>
- <div class="form-group">
- <label for="advseacon7">site or domain:</label>
- <input name="dmn" class="form-control" id="advseacon7" maxlength="100" data-fusion-query="safe" aria-describedby="gc-pi" >
- </div>
- <div class="form-group">
- <label for="advseacon8">terms appearing:</label>
- <select class="form-control" name="fqocct" id="advseacon8" data-fusion-query="safe"> <option value="">anywhere in the page</option> <option value="title_t">in the title of the page</option> <option value="url_t">in the URL of the page</option> <option value="body_t">in the body of the page </option></select>
- </div>
- </fieldset>
-</form>
-
+ </form>
+Version 2.1
-<form action="#wb-land" method="get" role="form">
- <fieldset>
- <legend class="h3 mrgn-tp-sm">Find pages with...</legend>
- <div class="form-group">
- <label for="advseacon1">all these words:</label>
- <input name="allq" class="form-control" id="advseacon1" maxlength="100" data-fusion-query="safe" >
- </div>
- <div class="form-group">
- <label for="advseacon2">this exact word or phrase:</label>
- <input name="exctq" class="form-control" id="advseacon2" maxlength="200" data-fusion-query="safe" >
- </div>
- <div class="form-group">
- <label for="advseacon3">any of these words:</label>
- <input name="anyq" class="form-control" id="advseacon3" maxlength="100" data-fusion-query="safe" >
- </div>
- <div class="form-group">
- <label for="advseacon4">none of these words:</label>
- <input name="noneq" class="form-control" id="advseacon4" maxlength="100" data-fusion-query="safe" >
- </div>
- </fieldset>
- <fieldset>
- <legend class="h3 mrgn-tp-sm">Then narrow your results by...</legend>
- <div class="form-group">
- <label for="advseacon5">pages updated:</label>
- <select class="form-control" name="fqupdate" id="advseacon5" data-fusion-query="safe"> <option selected value="">anytime</option> <option value="dateModified_dt:[NOW-1DAY TO NOW]">past 24 hours</option> <option value="dateModified_dt:[NOW-7DAYS TO NOW]">past week</option> <option value="dateModified_dt:[NOW-1MONTH TO NOW]">past month</option> <option value="dateModified_dt:[NOW-1YEAR TO NOW]">past year</option> </select>
- </div>
- <div class="form-group">
- <label for="advseacon7">site or domain:</label>
- <input name="dmn" class="form-control" id="advseacon7" maxlength="100" data-fusion-query="safe" aria-describedby="gc-pi" >
- </div>
- <div class="form-group">
- <label for="advseacon8">terms appearing:</label>
- <select class="form-control" name="fqocct" id="advseacon8" data-fusion-query="safe"> <option value="">anywhere in the page</option> <option value="title_t">in the title of the page</option> <option value="url_t">in the URL of the page</option> <option value="body_t">in the body of the page </option></select>
- </div>
- </fieldset>
- <button type="submit" class="btn btn-md btn-primary">Search</button>
-</form>
+
+
diff --git a/templates/search/api-fr.html b/templates/search/api-fr.html
index e15998e502..e93f840e86 100644
--- a/templates/search/api-fr.html
+++ b/templates/search/api-fr.html
@@ -7,7 +7,7 @@
],
"secondlevel": false,
"altLangPage": "api-en.html",
- "dateModified": "2022-08-02",
+ "dateModified": "2023-04-18",
"share": "true"
}
---
@@ -68,6 +68,7 @@ Version 2.1
+<form action="#wb-land" method="get" role="form">
+ <fieldset>
+ <legend class="h3 mrgn-tp-sm">Find pages with...</legend>
+ <div class="form-group">
+ <label for="advseacon1">all these words:</label>
+ <input name="allq" class="form-control" id="advseacon1" maxlength="100" data-fusion-query="safe" >
+ </div>
+ <div class="form-group">
+ <label for="advseacon2">this exact word or phrase:</label>
+ <input name="exctq" class="form-control" id="advseacon2" maxlength="200" data-fusion-query="safe" >
+ </div>
+ <div class="form-group">
+ <label for="advseacon3">any of these words:</label>
+ <input name="anyq" class="form-control" id="advseacon3" maxlength="100" data-fusion-query="safe" >
+ </div>
+ <div class="form-group">
+ <label for="advseacon4">none of these words:</label>
+ <input name="noneq" class="form-control" id="advseacon4" maxlength="100" data-fusion-query="safe" >
+ </div>
+ </fieldset>
+ <fieldset>
+ <legend class="h3 mrgn-tp-sm">Then narrow your results by...</legend>
+ <div class="form-group">
+ <label for="advseacon5">pages updated:</label>
+ <select class="form-control" name="fqupdate" id="advseacon5" data-fusion-query="safe"> <option selected value="">anytime</option> <option value="dateModified_dt:[NOW-1DAY TO NOW]">past 24 hours</option> <option value="dateModified_dt:[NOW-7DAYS TO NOW]">past week</option> <option value="dateModified_dt:[NOW-1MONTH TO NOW]">past month</option> <option value="dateModified_dt:[NOW-1YEAR TO NOW]">past year</option> </select>
+ </div>
+ <div class="form-group">
+ <label for="advseacon7">site or domain:</label>
+ <input name="dmn" class="form-control" id="advseacon7" maxlength="100" data-fusion-query="safe" aria-describedby="gc-pi" >
+ </div>
+ <div class="form-group">
+ <label for="advseacon8">terms appearing:</label>
+ <select class="form-control" name="fqocct" id="advseacon8" data-fusion-query="safe"> <option value="">anywhere in the page</option> <option value="title_t">in the title of the page</option> <option value="url_t">in the URL of the page</option> <option value="body_t">in the body of the page </option></select>
+ </div>
+ </fieldset>
+ <button type="submit" class="btn btn-md btn-primary">Search</button>
+ </form>Usability Research
Version history
-
+
- Version 3.0 - Update search pages with a new disclaimer message to let users know not entering personal information.
- Version 2.3:
- Adding a paragraph with a unique ID in the form to let users know not entering personal information. @@ -126,32 +127,64 @@
Template
Search bar
-+-Version 2.3
-
-<form> - <label class="wb-inv" for="sch-inp">Search Government of Canada websites</label> - <div class="input-group mrgn-tp-lg"> - <input spellcheck="false" autocomplete="off" id="sch-inp" class="form-control" type="search" data-fusion-query aria-describedby="gc-pi" /> - <span class="input-group-btn"> - <button type="submit" class="btn btn-primary"> <span class="glyphicon-search glyphicon"></span><span class="wb-inv">Search</span></button> - </span> - </div> - <p id="gc-pi" class="mrgn-tp-md">Please <strong>do not include sensitive personal information</strong> in the search box, such as your social insurance number, personal finance data and medical or work history.</p> - </form>-+Version 2.2
-
-<form> - <label class="wb-inv" for="sch-inp">Search Government of Canada websites</label> - <div class="input-group mrgn-tp-lg"> - <input spellcheck="false" autocomplete="off" id="sch-inp" class="form-control" type="search" data-fusion-query /> - <span class="input-group-btn"> - <button type="submit" class="btn btn-primary"> <span class="glyphicon-search glyphicon"></span><span class="wb-inv">Search</span></button> - </span> - </div> - </form>Version 3.0
+
+<form> + <label class="wb-inv" for="sch-inp">Search Government of Canada websites</label> + <div class="input-group mrgn-tp-lg"> + <input spellcheck="false" autocomplete="off" id="sch-inp" class="form-control" type="search" data-fusion-query aria-describedby="gc-pi" /> + <span class="input-group-btn"> + <button type="submit" class="btn btn-primary"> <span class="glyphicon-search glyphicon"></span><span class="wb-inv">Search</span></button> + </span> + </div> + <p id="gc-pi" class="mrgn-tp-md">Don't include personal information (telephone, email, SIN, financial, medical, or work details).</p> +</form>++Version 2.3
+
+<form> + <label class="wb-inv" for="sch-inp">Search Government of Canada websites</label> + <div class="input-group mrgn-tp-lg"> + <input spellcheck="false" autocomplete="off" id="sch-inp" class="form-control" type="search" data-fusion-query aria-describedby="gc-pi" /> + <span class="input-group-btn"> + <button type="submit" class="btn btn-primary"> <span class="glyphicon-search glyphicon"></span><span class="wb-inv">Search</span></button> + </span> + </div> + <p id="gc-pi" class="mrgn-tp-md">Please <strong>do not include sensitive personal information</strong> in the search box, such as your social insurance number, personal finance data and medical or work history.</p> +</form>
+
Version 2.3 Vs Version 2.2
+
+
+
+
+Version 2.3
+<form>
+ <label class="wb-inv" for="sch-inp">Search Government of Canada websites</label>
+ <div class="input-group mrgn-tp-lg">
+ <input spellcheck="false" autocomplete="off" id="sch-inp" class="form-control" type="search" data-fusion-query aria-describedby="gc-pi" />
+ <span class="input-group-btn">
+ <button type="submit" class="btn btn-primary"> <span class="glyphicon-search glyphicon"></span><span class="wb-inv">Search</span></button>
+ </span>
+ </div>
+ <p id="gc-pi" class="mrgn-tp-md">Please <strong>do not include sensitive personal information</strong> in the search box, such as your social insurance number, personal finance data and medical or work history.</p>
+</form>
+
+Version 2.2
+<form>
+ <label class="wb-inv" for="sch-inp">Search Government of Canada websites</label>
+ <div class="input-group mrgn-tp-lg">
+ <input spellcheck="false" autocomplete="off" id="sch-inp" class="form-control" type="search" data-fusion-query />
+ <span class="input-group-btn">
+ <button type="submit" class="btn btn-primary"> <span class="glyphicon-search glyphicon"></span><span class="wb-inv">Search</span></button>
+ </span>
+ </div>
+</form>Version 2.1
@@ -171,8 +204,55 @@Search bar contextual
-
+Version 2.3
+Version 3.0
<div class="well">
+ <form class="mrgn-tp-sm">
+ <label class="wb-inv" for="sch-inp">Search Government of Canada websites</label>
+ <input class="form-control full-width" spellcheck="false" autocomplete="off" dir="ltr" id="sch-inp" name="q" type="search" data-fusion-query aria-describedby="gc-pi" >
+ <div class="mrgn-tp-md">
+ <p class="wb-inv">See results from:</p>
+ <ul class="radio-inline list-inline mrgn-lft-sm">
+ <li><input type="radio" name="resultsfrom" id="opt-allresults" value="allresults" /> <label for="opt-allresults">All Government of Canada websites</label></li>
+ <li class="mrgn-lft-lg current" aria-current="location"><input type="radio" name="resultsfrom" id="opt-context" value="context" checked="checked" /> <label for="opt-context">Context label</label></li>
+ </ul>
+ <div class="pull-right">
+ <button type="submit" class="btn btn-primary" name="wb-srch-sub"> <span class="glyphicon-search glyphicon"></span> Search</button>
+ </div>
+ <div class="clearfix"></div>
+ </div>
+ <p id="gc-pi" class="mrgn-tp-md">Don't include personal information (telephone, email, SIN, financial, medical, or work details).</p>
+ </form>
+ </div>
+
+Version 2.3
+<div class="well">
+ <form class="mrgn-tp-sm">
+ <label class="wb-inv" for="sch-inp">Search Government of Canada websites</label>
+ <input class="form-control full-width" spellcheck="false" autocomplete="off" dir="ltr" id="sch-inp" name="q" type="search" data-fusion-query aria-describedby="gc-pi" >
+ <div class="mrgn-tp-md">
+ <p class="wb-inv">See results from:</p>
+ <ul class="radio-inline list-inline mrgn-lft-sm">
+ <li><input type="radio" name="resultsfrom" id="opt-allresults" value="allresults" /> <label for="opt-allresults">All Government of Canada websites</label></li>
+ <li class="mrgn-lft-lg current" aria-current="location"><input type="radio" name="resultsfrom" id="opt-context" value="context" checked="checked" /> <label for="opt-context">Context label</label></li>
+ </ul>
+ <div class="pull-right">
+ <button type="submit" class="btn btn-primary" name="wb-srch-sub"> <span class="glyphicon-search glyphicon"></span> Search</button>
+ </div>
+ <div class="clearfix"></div>
+ </div>
+ <p id="gc-pi" class="mrgn-tp-md">Please <strong>do not include sensitive personal information</strong> in the search box, such as your social insurance number, personal finance data and medical or work history.</p>
+ </form>
+ </div>
+
- Version 2.3 Vs Version 2.2
+
+
+
+
- Version 2.3
+<div class="well">
<form class="mrgn-tp-sm">
<label class="wb-inv" for="sch-inp">Search Government of Canada websites</label>
<input class="form-control full-width" spellcheck="false" autocomplete="off" dir="ltr" id="sch-inp" name="q" type="search" data-fusion-query aria-describedby="gc-pi" >
@@ -190,10 +270,10 @@ Version 2.3
<p id="gc-pi" class="mrgn-tp-md">Please <strong>do not include sensitive personal information</strong> in the search box, such as your social insurance number, personal finance data and medical or work history.</p>
</form>
</div>
-
+Version 2.2
-<div class="well">
+
+
Version 2.2
+<div class="well">
<form class="mrgn-tp-sm">
<label class="wb-inv" for="sch-inp">Search Government of Canada websites</label>
<input class="form-control full-width" spellcheck="false" autocomplete="off" dir="ltr" id="sch-inp" name="q" type="search" data-fusion-query>
@@ -213,8 +293,9 @@ Version 2.2
+
Version 2.1
<div class="well">
@@ -239,10 +320,96 @@ Version 2.2
Search bar advanced
-
+
+
+ Version 3.0
+ <form action="#wb-land" method="get" role="form">
+ <fieldset>
+ <legend class="h3 mrgn-tp-sm">Find pages with...</legend>
+ <div class="form-group">
+ <label for="advseacon1">all these words:</label>
+ <input name="allq" class="form-control" id="advseacon1" maxlength="100" data-fusion-query="safe" aria-describedby="gc-pi" >
+ </div>
+ <div class="form-group">
+ <label for="advseacon2">this exact word or phrase:</label>
+ <input name="exctq" class="form-control" id="advseacon2" maxlength="200" data-fusion-query="safe" aria-describedby="gc-pi" >
+ </div>
+ <div class="form-group">
+ <label for="advseacon3">any of these words:</label>
+ <input name="anyq" class="form-control" id="advseacon3" maxlength="100" data-fusion-query="safe" aria-describedby="gc-pi" >
+ </div>
+ <div class="form-group">
+ <label for="advseacon4">none of these words:</label>
+ <input name="noneq" class="form-control" id="advseacon4" maxlength="100" data-fusion-query="safe" aria-describedby="gc-pi" >
+ </div>
+ <button type="submit" class="btn btn-md btn-primary">Search</button>
+ <p id="gc-pi" class="mrgn-tp-md">Don't include personal information (telephone, email, SIN, financial, medical, or work details).</p>
+ </fieldset>
+ <fieldset>
+ <legend class="h3 mrgn-tp-sm">Then narrow your results by...</legend>
+ <div class="form-group">
+ <label for="advseacon5">pages updated:</label>
+ <select class="form-control" name="fqupdate" id="advseacon5" data-fusion-query="safe"> <option selected value="">anytime</option> <option value="dateModified_dt:[NOW-1DAY TO NOW]">past 24 hours</option> <option value="dateModified_dt:[NOW-7DAYS TO NOW]">past week</option> <option value="dateModified_dt:[NOW-1MONTH TO NOW]">past month</option> <option value="dateModified_dt:[NOW-1YEAR TO NOW]">past year</option> </select>
+ </div>
+ <div class="form-group">
+ <label for="advseacon7">site or domain:</label>
+ <input name="dmn" class="form-control" id="advseacon7" maxlength="100" data-fusion-query="safe" aria-describedby="gc-pi" >
+ </div>
+ <div class="form-group">
+ <label for="advseacon8">terms appearing:</label>
+ <select class="form-control" name="fqocct" id="advseacon8" data-fusion-query="safe"> <option value="">anywhere in the page</option> <option value="title_t">in the title of the page</option> <option value="url_t">in the URL of the page</option> <option value="body_t">in the body of the page </option></select>
+ </div>
+ </fieldset>
+ </form>
+
Version 2.2
<form action="#wb-land" method="get" role="form">
+ <fieldset>
+ <legend class="h3 mrgn-tp-sm">Find pages with...</legend>
+ <div class="form-group">
+ <label for="advseacon1">all these words:</label>
+ <input name="allq" class="form-control" id="advseacon1" maxlength="100" data-fusion-query="safe" aria-describedby="gc-pi" >
+ </div>
+ <div class="form-group">
+ <label for="advseacon2">this exact word or phrase:</label>
+ <input name="exctq" class="form-control" id="advseacon2" maxlength="200" data-fusion-query="safe" aria-describedby="gc-pi" >
+ </div>
+ <div class="form-group">
+ <label for="advseacon3">any of these words:</label>
+ <input name="anyq" class="form-control" id="advseacon3" maxlength="100" data-fusion-query="safe" aria-describedby="gc-pi" >
+ </div>
+ <div class="form-group">
+ <label for="advseacon4">none of these words:</label>
+ <input name="noneq" class="form-control" id="advseacon4" maxlength="100" data-fusion-query="safe" aria-describedby="gc-pi" >
+ </div>
+ <button type="submit" class="btn btn-md btn-primary">Search</button>
+ <p id="gc-pi" class="mrgn-tp-md">Please <strong>do not include sensitive personal information</strong> in the search box, such as your social insurance number, personal finance data and medical or work history.</p>
+ </fieldset>
+ <fieldset>
+ <legend class="h3 mrgn-tp-sm">Then narrow your results by...</legend>
+ <div class="form-group">
+ <label for="advseacon5">pages updated:</label>
+ <select class="form-control" name="fqupdate" id="advseacon5" data-fusion-query="safe"> <option selected value="">anytime</option> <option value="dateModified_dt:[NOW-1DAY TO NOW]">past 24 hours</option> <option value="dateModified_dt:[NOW-7DAYS TO NOW]">past week</option> <option value="dateModified_dt:[NOW-1MONTH TO NOW]">past month</option> <option value="dateModified_dt:[NOW-1YEAR TO NOW]">past year</option> </select>
+ </div>
+ <div class="form-group">
+ <label for="advseacon7">site or domain:</label>
+ <input name="dmn" class="form-control" id="advseacon7" maxlength="100" data-fusion-query="safe" aria-describedby="gc-pi" >
+ </div>
+ <div class="form-group">
+ <label for="advseacon8">terms appearing:</label>
+ <select class="form-control" name="fqocct" id="advseacon8" data-fusion-query="safe"> <option value="">anywhere in the page</option> <option value="title_t">in the title of the page</option> <option value="url_t">in the URL of the page</option> <option value="body_t">in the body of the page </option></select>
+ </div>
+ </fieldset>
+ </form>
+
+
+
+Version 2.2 Vs Version 2.1
+
+
+ Version 2.2
+ <form action="#wb-land" method="get" role="form">
<fieldset>
<legend class="h3 mrgn-tp-sm">Find pages with...</legend>
<div class="form-group">
@@ -280,9 +447,52 @@ Version 2.2
</div>
</fieldset>
</form>
-
-
- Version 2.1
+
+
+ Version 2.1
+ <form action="#wb-land" method="get" role="form">
+ <fieldset>
+ <legend class="h3 mrgn-tp-sm">Find pages with...</legend>
+ <div class="form-group">
+ <label for="advseacon1">all these words:</label>
+ <input name="allq" class="form-control" id="advseacon1" maxlength="100" data-fusion-query="safe" >
+ </div>
+ <div class="form-group">
+ <label for="advseacon2">this exact word or phrase:</label>
+ <input name="exctq" class="form-control" id="advseacon2" maxlength="200" data-fusion-query="safe" >
+ </div>
+ <div class="form-group">
+ <label for="advseacon3">any of these words:</label>
+ <input name="anyq" class="form-control" id="advseacon3" maxlength="100" data-fusion-query="safe" >
+ </div>
+ <div class="form-group">
+ <label for="advseacon4">none of these words:</label>
+ <input name="noneq" class="form-control" id="advseacon4" maxlength="100" data-fusion-query="safe" >
+ </div>
+ </fieldset>
+ <fieldset>
+ <legend class="h3 mrgn-tp-sm">Then narrow your results by...</legend>
+ <div class="form-group">
+ <label for="advseacon5">pages updated:</label>
+ <select class="form-control" name="fqupdate" id="advseacon5" data-fusion-query="safe"> <option selected value="">anytime</option> <option value="dateModified_dt:[NOW-1DAY TO NOW]">past 24 hours</option> <option value="dateModified_dt:[NOW-7DAYS TO NOW]">past week</option> <option value="dateModified_dt:[NOW-1MONTH TO NOW]">past month</option> <option value="dateModified_dt:[NOW-1YEAR TO NOW]">past year</option> </select>
+ </div>
+ <div class="form-group">
+ <label for="advseacon7">site or domain:</label>
+ <input name="dmn" class="form-control" id="advseacon7" maxlength="100" data-fusion-query="safe" aria-describedby="gc-pi" >
+ </div>
+ <div class="form-group">
+ <label for="advseacon8">terms appearing:</label>
+ <select class="form-control" name="fqocct" id="advseacon8" data-fusion-query="safe"> <option value="">anywhere in the page</option> <option value="title_t">in the title of the page</option> <option value="url_t">in the URL of the page</option> <option value="body_t">in the body of the page </option></select>
+ </div>
+ </fieldset>
+ <button type="submit" class="btn btn-md btn-primary">Search</button>
+ </form>
+
+
+
+
+
+ Version 2.1
<form action="#wb-land" method="get" role="form">
<fieldset>
<legend class="h3 mrgn-tp-sm">Find pages with...</legend>
@@ -320,8 +530,7 @@ Version 2.1
</fieldset>
<button type="submit" class="btn btn-md btn-primary">Search</button>
</form>
-
- Please do not include sensitive personal information in the search box, such as your social insurance number, personal finance data and medical or work history.
+Don't include personal information (telephone, email, SIN, financial, medical, or work details).
Veuillez ne pas fournir de renseignements personnels de nature délicate dans le champ de recherche, comme votre numéro d'assurance sociale, vos données financières personnelles et vos antécédents médicaux ou professionnels.
+N'incluez pas de renseignements personnels (téléphone, courriel, NAS, renseignements financiers, médicaux ou professionnels).
Please do not include sensitive personal information in the search box, such as your social insurance number, personal finance data and medical or work history.
+Don't include personal information (telephone, email, SIN, financial, medical, or work details).
diff --git a/templates/search/results-contextual-fr.html b/templates/search/results-contextual-fr.html index e5dda8b6c4..f8b6e04507 100644 --- a/templates/search/results-contextual-fr.html +++ b/templates/search/results-contextual-fr.html @@ -29,7 +29,7 @@ -Veuillez ne pas fournir de renseignements personnels de nature délicate dans le champ de recherche, comme votre numéro d'assurance sociale, vos données financières personnelles et vos antécédents médicaux ou professionnels.
+N'incluez pas de renseignements personnels (téléphone, courriel, NAS, renseignements financiers, médicaux ou professionnels).
diff --git a/templates/search/results-en.html b/templates/search/results-en.html index 5ae8f3c7f0..06899595f5 100644 --- a/templates/search/results-en.html +++ b/templates/search/results-en.html @@ -18,7 +18,7 @@ -Please do not include sensitive personal information in the search box, such as your social insurance number, personal finance data and medical or work history.
+Don't include personal information (telephone, email, SIN, financial, medical, or work details).
Please do not include sensitive personal information in the search box, such as your social insurance number, personal finance data and medical or work history.
+Don't include personal information (telephone, email, SIN, financial, medical, or work details).
diff --git a/templates/search/results-filters-fr.html b/templates/search/results-filters-fr.html
index 2a53aeccff..f933bbb831 100644
--- a/templates/search/results-filters-fr.html
+++ b/templates/search/results-filters-fr.html
@@ -18,7 +18,7 @@
- Veuillez ne pas fournir de renseignements personnels de nature délicate dans le champ de recherche, comme votre numéro d'assurance sociale, vos données financières personnelles et vos antécédents médicaux ou professionnels.
+N'incluez pas de renseignements personnels (téléphone, courriel, NAS, renseignements financiers, médicaux ou professionnels).
diff --git a/templates/search/results-fr.html b/templates/search/results-fr.html
index 3ef4d75e5f..df25224282 100644
--- a/templates/search/results-fr.html
+++ b/templates/search/results-fr.html
@@ -18,7 +18,7 @@
- Veuillez ne pas fournir de renseignements personnels de nature délicate dans le champ de recherche, comme votre numéro d'assurance sociale, vos données financières personnelles et vos antécédents médicaux ou professionnels.
+N'incluez pas de renseignements personnels (téléphone, courriel, NAS, renseignements financiers, médicaux ou professionnels).