From 7b9c31a9de03eecc23390e30ad5d1d0f6e8f0d63 Mon Sep 17 00:00:00 2001 From: Jennifer Mealing Date: Wed, 16 Aug 2023 19:58:31 -0400 Subject: [PATCH 01/14] intro block --- components/gc-intro/gc-intro-block-en.html | 82 ++++++++++++++++++++++ components/gc-intro/gc-intro-block-fr.html | 82 ++++++++++++++++++++++ components/gc-intro/index.json-ld | 34 +++++++++ 3 files changed, 198 insertions(+) create mode 100644 components/gc-intro/gc-intro-block-en.html create mode 100644 components/gc-intro/gc-intro-block-fr.html create mode 100644 components/gc-intro/index.json-ld diff --git a/components/gc-intro/gc-intro-block-en.html b/components/gc-intro/gc-intro-block-en.html new file mode 100644 index 0000000000..d9068a608f --- /dev/null +++ b/components/gc-intro/gc-intro-block-en.html @@ -0,0 +1,82 @@ +--- +breadcrumbs: [ + { "title": "GCWeb home", "link": "https://wet-boew.github.io/GCWeb/home.html" } +] +dateModified: "2021-05-21" +description: "Documentation and working example for most requested" +language: "en" +altLangPage: "gc-intro-block-fr.html" +title: "Introduction block" +--- +{% include alert-provisional.html siteroot="../../" %} + + + +
+
Status
+
Provisional
+
Type
+
Canada.ca design pattern
+
Last review
+
2021-05-21
+
Conforming to
+
n/a
+
Guidance
+
Most requested - Canada.ca design pattern (to be updated)
+
Technical name
+
gc-most-requested
+
+ +

Purpose

+

This adds a most requested section that features top tasks related to the page it is on.

+ +

Working example

+ +

Most requested (provisional v1.0)

+
+
+
+
+

Most requested

+
+
+ +
+
+
+
+ +

Code

+

+<section class="well well-sm provisional gc-most-requested">
+	<div class="container">
+		<div class="row">
+			<div class="col-md-2">
+				<h2>Most requested</h2>
+			</div>
+			<div class="col-md-10">
+				<ul class="colcount-md-2">
+					<li><a href="#">[Top task hyperlink]</a></li>
+					<li><a href="#">[Top task hyperlink]</a></li>
+					<li><a href="#">[Top task hyperlink]</a></li>
+					<li><a href="#">[Top task hyperlink]</a></li>
+					<li><a href="#">[Top task hyperlink]</a></li>
+					<li><a href="#">[Top task hyperlink]</a></li>
+					<li><a href="#">[Top task hyperlink]</a></li>
+				</ul>
+			</div>
+		</div>
+	</div>
+</section>
+
+ +

Evaluation and report

+

There is no evaluation and report available for this component.

diff --git a/components/gc-intro/gc-intro-block-fr.html b/components/gc-intro/gc-intro-block-fr.html new file mode 100644 index 0000000000..208628dd2a --- /dev/null +++ b/components/gc-intro/gc-intro-block-fr.html @@ -0,0 +1,82 @@ +--- +breadcrumbs: [ + { "title": "GCWeb home", "link": "https://wet-boew.github.io/GCWeb/accueil.html" } +] +dateModified: "2021-05-21" +description: "Documentation et exemple pratique de en demande- fonctionnalité provisoire" +language: "fr" +altLangPage: "gc-most-requested-en.html" +title: "En demande - fonctionnalité provisoire" +--- +{% include alert-provisional.html siteroot="../../" %} + + + +
+
Statut
+
Provisiore
+
Type
+
Conception de Canada.ca
+
Dernière revue
+
2021-05-21
+
Est conforme à
+
n/a
+
Directives
+
En demande - Système de conception de Canada.ca (à mettre à jour)
+
Nom technique
+
gc-most-requested
+
+ +

Objectif

+

Ceci ajoute une section en vedette qui comprend des tâches principales liées à la page sur laquelle elles se trouvent.

+ +

Exemple pratique

+ +

En demande (provisoire v1.0)

+
+
+
+
+

En demande

+
+
+ +
+
+
+
+ +

Code

+

+<section class="well well-sm provisional gc-most-requested">
+	<div class="container">
+		<div class="row">
+			<div class="col-md-2">
+				<h2>En demande</h2>
+			</div>
+			<div class="col-md-10">
+				<ul class="colcount-md-2">
+					<li><a href="#">[Tâches principale]</a></li>
+					<li><a href="#">[Tâches principale]</a></li>
+					<li><a href="#">[Tâches principale]</a></li>
+					<li><a href="#">[Tâches principale]</a></li>
+					<li><a href="#">[Tâches principale]</a></li>
+					<li><a href="#">[Tâches principale]</a></li>
+					<li><a href="#">[Tâches principale]</a></li>
+				</ul>
+			</div>
+		</div>
+	</div>
+</section>
+
+ +

Évaluation et rapport

+

Il n'y a pas d'évaluation et de rapport disponibles pour ce composant.

diff --git a/components/gc-intro/index.json-ld b/components/gc-intro/index.json-ld new file mode 100644 index 0000000000..df7929976b --- /dev/null +++ b/components/gc-intro/index.json-ld @@ -0,0 +1,34 @@ +{ + "@context": { + "@version": 1.1, + "dct": "http://purl.org/dc/terms/", + "title": { "@id": "dct:title", "@container": "@language" }, + "description": { "@id": "dct:description", "@container": "@language" }, + "modified": "dct:modified" + }, + "title": { + "en": "Introduction block - Documentation and working example", + "fr": "X - Documentation et example pratique" + }, + "description": { + "en": "Features top tasks related to the page it is on.", + "fr": "X." + }, + "modified": "2023-08-16", + "componentName": "gc-intro", + "status": "stable", + "pages": { + "examples": [ + { + "title": "Introduction block - Documentation and working example", + "language": "en", + "path": "gc-intro-block-en.html" + }, + { + "title": "En demande", + "language": "fr", + "path": "gc-intro-block-fr.html - Documentation et example pratique" + } + ] + } +} From ee2e39995fafae18b858125ec3b80f705fcc9de4 Mon Sep 17 00:00:00 2001 From: Jennifer Mealing Date: Wed, 16 Aug 2023 20:08:28 -0400 Subject: [PATCH 02/14] Update gc-intro-block-en.html --- components/gc-intro/gc-intro-block-en.html | 167 ++++++++++++--------- 1 file changed, 94 insertions(+), 73 deletions(-) diff --git a/components/gc-intro/gc-intro-block-en.html b/components/gc-intro/gc-intro-block-en.html index d9068a608f..83fafe9fd8 100644 --- a/components/gc-intro/gc-intro-block-en.html +++ b/components/gc-intro/gc-intro-block-en.html @@ -1,82 +1,103 @@ --- -breadcrumbs: [ - { "title": "GCWeb home", "link": "https://wet-boew.github.io/GCWeb/home.html" } -] -dateModified: "2021-05-21" -description: "Documentation and working example for most requested" -language: "en" -altLangPage: "gc-intro-block-fr.html" -title: "Introduction block" +title: Introduction block pattern +description: Documentation and working example for the introduction block pattern +language: en +altLangPage: gc-intro-block-fr.html +dateModified: 2023-08-09 +layout: no-container --- -{% include alert-provisional.html siteroot="../../" %} +
+

{{ page.title }}

- + +

The introduction block pattern introduces the content of a landing page.

-
-
Status
-
Provisional
-
Type
-
Canada.ca design pattern
-
Last review
-
2021-05-21
-
Conforming to
-
n/a
-
Guidance
-
Most requested - Canada.ca design pattern (to be updated)
-
Technical name
-
gc-most-requested
-
+

On this page

+ + +

Before you start

+

The introduction block pattern is a mandatory element for institutional landing pages and topic pages. It’s optional for other landing pages.

+ + -

Purpose

-

This adds a most requested section that features top tasks related to the page it is on.

+

Accessibility guidance

-

Working example

+

List of accessibility guidances to be followed to ensure component is used in respect of the accessibility guideline and EN 301 549 standard (including WCAG 2.1 Level AA).

+ +

There is no accessibility guidance defined.

-

Most requested (provisional v1.0)

-
-
-
-
-

Most requested

-
-
- -
-
-
-
-

Code

-

-<section class="well well-sm provisional gc-most-requested">
-	<div class="container">
-		<div class="row">
-			<div class="col-md-2">
-				<h2>Most requested</h2>
-			</div>
-			<div class="col-md-10">
-				<ul class="colcount-md-2">
-					<li><a href="#">[Top task hyperlink]</a></li>
-					<li><a href="#">[Top task hyperlink]</a></li>
-					<li><a href="#">[Top task hyperlink]</a></li>
-					<li><a href="#">[Top task hyperlink]</a></li>
-					<li><a href="#">[Top task hyperlink]</a></li>
-					<li><a href="#">[Top task hyperlink]</a></li>
-					<li><a href="#">[Top task hyperlink]</a></li>
-				</ul>
-			</div>
-		</div>
-	</div>
-</section>
-
+

Variations

-

Evaluation and report

-

There is no evaluation and report available for this component.

+

The introduction block pattern consists of:

+
    +
  • title
    • +
  • short description
    • +
+ +

It can also include:

+
    +
  • image
    • +
  • supertask button
    • +
+ + +

Introduction block

+
+

About the [Institution]

+ +
+ +
+

Code

+ 

+		<section class="col-md-8 pull-left bold">
+			<h2 class="h3 mrgn-tp-md">About the [Institution]</h2>
+			<ul class="list-unstyled mrgn-tp-lg lst-spcd-2 colcount-md-2">
+				<li><a href="#">Mandate</a></li>
+				<li><a href="#">Organizational structure</a></li>
+				<li><a href="#">Transparency</a></li>
+				<li><a href="#">Accessibility</a></li>
+				<li><a href="#">Job opportunities</a></li>
+				<li><a href="#">Reports</a></li>
+				<li><a href="#">Compliance</a></li>
+				<li><a href="#">Enforcement notifications</a></li>
+				<li><a href="#">[Institutional link]</a></li>
+				<li>More: <a href="#">About the [Institution]</a></li>
+			</ul>
+		</section>
+
+
+ +

Evaluation and report

+

There is no accessibility report.

+ +

There is no accessibility conformance report.

+ +

Technical documentation

+
+
Status:
stable
+
+ +
From 00210485cdc6fb2fc6133dfddca53aa80dc3ede4 Mon Sep 17 00:00:00 2001 From: Jennifer Mealing Date: Wed, 16 Aug 2023 20:12:57 -0400 Subject: [PATCH 03/14] Update gc-intro-block-en.html --- components/gc-intro/gc-intro-block-en.html | 52 +++++++++------------- 1 file changed, 22 insertions(+), 30 deletions(-) diff --git a/components/gc-intro/gc-intro-block-en.html b/components/gc-intro/gc-intro-block-en.html index 83fafe9fd8..d921aa9820 100644 --- a/components/gc-intro/gc-intro-block-en.html +++ b/components/gc-intro/gc-intro-block-en.html @@ -53,40 +53,32 @@

Variations

Introduction block

-
-

About the [Institution]

- -
+
+
+
+
+

[Institution name]

+

Short description of the institution’s mandate.

+ Super task button [optional] +
+
+
+

Code


-		<section class="col-md-8 pull-left bold">
-			<h2 class="h3 mrgn-tp-md">About the [Institution]</h2>
-			<ul class="list-unstyled mrgn-tp-lg lst-spcd-2 colcount-md-2">
-				<li><a href="#">Mandate</a></li>
-				<li><a href="#">Organizational structure</a></li>
-				<li><a href="#">Transparency</a></li>
-				<li><a href="#">Accessibility</a></li>
-				<li><a href="#">Job opportunities</a></li>
-				<li><a href="#">Reports</a></li>
-				<li><a href="#">Compliance</a></li>
-				<li><a href="#">Enforcement notifications</a></li>
-				<li><a href="#">[Institutional link]</a></li>
-				<li>More: <a href="#">About the [Institution]</a></li>
-			</ul>
-		</section>
+		<div class="bg-center bg-cover" data-bgimg-srcset="img/1x1.png 991w, img/ip-cover-image-1200x726.jpg 992w">
+	<div class="container">
+		<div class="row mrgn-bttm-md">
+			<div class="col-md-7">
+				<h1 property="name" id="wb-cont">[Institution name]</h1>
+				<p>Short description of the institution’s mandate.</p>
+				<a class="btn btn-call-to-action" href="#">Super task button [optional]</a>
+			</div>
+		</div>
+	</div>
+</div>
From 709d96a395aeed09666091d1a773a4f709714f5b Mon Sep 17 00:00:00 2001 From: Jennifer Mealing Date: Thu, 7 Sep 2023 15:44:39 -0400 Subject: [PATCH 04/14] run html formatter, add property, etc to h1 --- components/gc-intro/gc-intro-block-en.html | 116 ++++++++++----------- 1 file changed, 57 insertions(+), 59 deletions(-) diff --git a/components/gc-intro/gc-intro-block-en.html b/components/gc-intro/gc-intro-block-en.html index d921aa9820..b2e84c17f5 100644 --- a/components/gc-intro/gc-intro-block-en.html +++ b/components/gc-intro/gc-intro-block-en.html @@ -7,67 +7,65 @@ layout: no-container ---
-

{{ page.title }}

+

{{ page.title }}

- -

The introduction block pattern introduces the content of a landing page.

+ +

The introduction block pattern introduces the content of a landing page.

-

On this page

- - -

Before you start

-

The introduction block pattern is a mandatory element for institutional landing pages and topic pages. It’s optional for other landing pages.

- - +

On this page

+ -

Accessibility guidance

+

Before you start

+

The introduction block pattern is a mandatory element for institutional landing pages and topic pages. It’s optional for other landing pages.

-

List of accessibility guidances to be followed to ensure component is used in respect of the accessibility guideline and EN 301 549 standard (including WCAG 2.1 Level AA).

- -

There is no accessibility guidance defined.

+ +

Accessibility guidance

-

Variations

+

List of accessibility guidances to be followed to ensure component is used in respect of the accessibility guideline and EN 301 549 standard (including WCAG 2.1 Level AA).

-

The introduction block pattern consists of:

-
    -
  • title
    • -
  • short description
    • -
+

There is no accessibility guidance defined.

-

It can also include:

-
    -
  • image
    • -
  • supertask button
    • -
+

Variations

+

The introduction block pattern consists of:

+
    +
  • title
    • +
  • short description
    • +
-

Introduction block

-
-
-
-
-

[Institution name]

-

Short description of the institution’s mandate.

- Super task button [optional] -
-
-
-
+

It can also include:

+
    +
  • image
    • +
  • supertask button
    • +
-
-

Code

- 

+    
Introduction block

+    

+        

+            

+                

+                    
[Institution name]

+                    
Short description of the institution’s mandate.

+                    Super task button [optional]
+                

+            

+        

+    

+
+    

+        
Code

+        

 		<div class="bg-center bg-cover" data-bgimg-srcset="img/1x1.png 991w, img/ip-cover-image-1200x726.jpg 992w">
 	<div class="container">
 		<div class="row mrgn-bttm-md">
@@ -80,16 +78,16 @@ 
Code

 	</div>
 </div>
 	

-

-
-	
Evaluation and report

-		
There is no accessibility report.

+
-

There is no accessibility conformance report.

+

Evaluation and report

+

There is no accessibility report.

-

Technical documentation

-
-
Status:
stable
-
+

There is no accessibility conformance report.

+

Technical documentation

+
+
Status:
+
stable
+
From bb965d969f7031eee519ad3e7c51cbbe95220fa2 Mon Sep 17 00:00:00 2001 From: Jennifer Mealing Date: Fri, 8 Sep 2023 11:52:36 -0400 Subject: [PATCH 05/14] manually fix indents --- components/gc-intro/gc-intro-block-en.html | 117 ++++++++++----------- 1 file changed, 56 insertions(+), 61 deletions(-) diff --git a/components/gc-intro/gc-intro-block-en.html b/components/gc-intro/gc-intro-block-en.html index b2e84c17f5..46cca41fa6 100644 --- a/components/gc-intro/gc-intro-block-en.html +++ b/components/gc-intro/gc-intro-block-en.html @@ -7,65 +7,61 @@ layout: no-container ---
-

{{ page.title }}

+

{{ page.title }}

- -

The introduction block pattern introduces the content of a landing page.

+ +

The introduction block pattern introduces the content of a landing page.

-

On this page

- +

On this page

+ -

Before you start

-

The introduction block pattern is a mandatory element for institutional landing pages and topic pages. It’s optional for other landing pages.

+

Before you start

+

The introduction block pattern is a mandatory element for institutional landing pages and topic pages. It’s optional for other landing pages.

- + -

Accessibility guidance

+

Accessibility guidance

+

List of accessibility guidances to be followed to ensure component is used in respect of the accessibility guideline and EN 301 549 standard (including WCAG 2.1 Level AA).

+

There is no accessibility guidance defined.

-

List of accessibility guidances to be followed to ensure component is used in respect of the accessibility guideline and EN 301 549 standard (including WCAG 2.1 Level AA).

+

Variations

+

The introduction block pattern consists of:

+
    +
  • title
    • +
  • short description
    • +
+

It can also include:

+
    +
  • image
    • +
  • supertask button
    • +
-

There is no accessibility guidance defined.

+

Introduction block

+
+
+
+
+

[Institution name]

+

Short description of the institution’s mandate.

+ Super task button [optional] +
+
+
+
-

Variations

- -

The introduction block pattern consists of:

-
    -
  • title
    • -
  • short description
    • -
- -

It can also include:

-
    -
  • image
    • -
  • supertask button
    • -
- -

Introduction block

-
-
-
-
-

[Institution name]

-

Short description of the institution’s mandate.

- Super task button [optional] -
-
-
-
- -
-

Code

- 

+	

+		
Code

+		

 		<div class="bg-center bg-cover" data-bgimg-srcset="img/1x1.png 991w, img/ip-cover-image-1200x726.jpg 992w">
 	<div class="container">
 		<div class="row mrgn-bttm-md">
@@ -78,16 +74,15 @@ 
Code

 	</div>
 </div>
 	

-    

-
-    
Evaluation and report

-    
There is no accessibility report.

+
-

There is no accessibility conformance report.

+

Evaluation and report

+

There is no accessibility report.

-

Technical documentation

-
-
Status:
-
stable
-
+

There is no accessibility conformance report.

+

Technical documentation

+
+
Status:
+
stable
+
From 216f204f57df096d393850df3b538902127bd49c Mon Sep 17 00:00:00 2001 From: Jennifer Mealing Date: Mon, 11 Sep 2023 10:45:27 -0400 Subject: [PATCH 06/14] add fr to json file --- components/gc-intro/index.json-ld | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/components/gc-intro/index.json-ld b/components/gc-intro/index.json-ld index df7929976b..38f31d49c1 100644 --- a/components/gc-intro/index.json-ld +++ b/components/gc-intro/index.json-ld @@ -8,11 +8,11 @@ }, "title": { "en": "Introduction block - Documentation and working example", - "fr": "X - Documentation et example pratique" + "fr": "Bloc d’introduction - Documentation et example pratique" }, "description": { - "en": "Features top tasks related to the page it is on.", - "fr": "X." + "en": "Guidance about using the introduction block pattern on Canada.ca.", + "fr": "Orientation sur l’utilisation de la configuration de conception du bloc d’introduction sur Canada.ca." }, "modified": "2023-08-16", "componentName": "gc-intro", @@ -25,9 +25,9 @@ "path": "gc-intro-block-en.html" }, { - "title": "En demande", + "title": "Bloc d’introduction - - Documentation et example pratique", "language": "fr", - "path": "gc-intro-block-fr.html - Documentation et example pratique" + "path": "gc-intro-block-fr.html" } ] } From ca63b37764c37dab15369bcd084eaf8d5b8f804e Mon Sep 17 00:00:00 2001 From: Jennifer Mealing Date: Mon, 11 Sep 2023 10:52:18 -0400 Subject: [PATCH 07/14] add available FR content --- components/gc-intro/gc-intro-block-fr.html | 138 +++++++++++---------- 1 file changed, 72 insertions(+), 66 deletions(-) diff --git a/components/gc-intro/gc-intro-block-fr.html b/components/gc-intro/gc-intro-block-fr.html index 208628dd2a..f078aefb6d 100644 --- a/components/gc-intro/gc-intro-block-fr.html +++ b/components/gc-intro/gc-intro-block-fr.html @@ -1,82 +1,88 @@ --- -breadcrumbs: [ - { "title": "GCWeb home", "link": "https://wet-boew.github.io/GCWeb/accueil.html" } -] -dateModified: "2021-05-21" -description: "Documentation et exemple pratique de en demande- fonctionnalité provisoire" -language: "fr" -altLangPage: "gc-most-requested-en.html" -title: "En demande - fonctionnalité provisoire" +title: Bloc d’introduction +description: Documentation et exemple pratique de bloc d’introduction +language: fr +altLangPage: gc-intro-block-en.html +dateModified: 2023-08-09 +layout: no-container --- -{% include alert-provisional.html siteroot="../../" %} +
+

{{ page.title }}

- + +

La configuration de conception du bloc d’introduction introduit le contenu d’une page d’accueil.

-
-
Statut
-
Provisiore
-
Type
-
Conception de Canada.ca
-
Dernière revue
-
2021-05-21
-
Est conforme à
-
n/a
-
Directives
-
En demande - Système de conception de Canada.ca (à mettre à jour)
-
Nom technique
-
gc-most-requested
-
+

Sur cette page

+ -

Objectif

-

Ceci ajoute une section en vedette qui comprend des tâches principales liées à la page sur laquelle elles se trouvent.

+

Before you start

+

La configuration de conception du bloc d’introduction est un élément obligatoire pour les pages d’accueil institutionnelles et les pages de sujet. Elle est facultative pour les autres pages d’accueil.

-

Exemple pratique

+ -

En demande (provisoire v1.0)

-
-
-
-
-

En demande

-
-
- +

Accessibility guidance

+

List of accessibility guidances to be followed to ensure component is used in respect of the accessibility guideline and EN 301 549 standard (including WCAG 2.1 Level AA).

+

There is no accessibility guidance defined.

+ +

Variations

+

La configuration de conception du bloc d’introduction consiste en ce qui suit :

+
    +
  • titre
    • +
  • description courte
    • +
+

Elle peut également inclure ces éléments :

+
    +
  • image
    • +
  • bouton de super-tâche
    • +
+ +

Bloc d’introduction

+
+
+
+
+

[Nom de l’institution]

+

Description courte du mandat de l’institution.

+ Bouton de super-tâche [facultatif] +
-
-

Code

-

-<section class="well well-sm provisional gc-most-requested">
+	

+		
Code

+		

+		<div class="bg-center bg-cover" data-bgimg-srcset="img/1x1.png 991w, img/ip-cover-image-1200x726.jpg 992w">
 	<div class="container">
-		<div class="row">
-			<div class="col-md-2">
-				<h2>En demande</h2>
-			</div>
-			<div class="col-md-10">
-				<ul class="colcount-md-2">
-					<li><a href="#">[Tâches principale]</a></li>
-					<li><a href="#">[Tâches principale]</a></li>
-					<li><a href="#">[Tâches principale]</a></li>
-					<li><a href="#">[Tâches principale]</a></li>
-					<li><a href="#">[Tâches principale]</a></li>
-					<li><a href="#">[Tâches principale]</a></li>
-					<li><a href="#">[Tâches principale]</a></li>
-				</ul>
+		<div class="row mrgn-bttm-md">
+			<div class="col-md-7">
+				<h1 property="name" id="wb-cont">[Nom de l’institution]</h1>
+				<p>Description courte du mandat de l’institution</p>
+				<a class="btn btn-call-to-action" href="#">Bouton de super-tâche [facultatif]</a>
 			</div>
 		</div>
 	</div>
-</section>
-

+</div>
+
+
+ +

Evaluation and report

+

There is no accessibility report.

-

Évaluation et rapport

-

Il n'y a pas d'évaluation et de rapport disponibles pour ce composant.

+

There is no accessibility conformance report.

+

Technical documentation

+
+
Status:
+
stable
+
+ From c4c23c1b471e814c4b83235b07b39b0eb894ebb7 Mon Sep 17 00:00:00 2001 From: Jennifer Mealing Date: Tue, 19 Sep 2023 13:49:39 -0400 Subject: [PATCH 08/14] create and link demo page --- .../gc-intro/gc-intro-block-demos-en.html | 37 +++++++++++++++++++ components/gc-intro/gc-intro-block-en.html | 34 ++--------------- 2 files changed, 41 insertions(+), 30 deletions(-) create mode 100644 components/gc-intro/gc-intro-block-demos-en.html diff --git a/components/gc-intro/gc-intro-block-demos-en.html b/components/gc-intro/gc-intro-block-demos-en.html new file mode 100644 index 0000000000..2baa90a14f --- /dev/null +++ b/components/gc-intro/gc-intro-block-demos-en.html @@ -0,0 +1,37 @@ +--- +{ + "title": "GC intro block working examples", + "language": "en", + "altLangPage": "intro-block-demos-fr.html", + "layout": "no-container", + "dateModified": "2023-09-13" +} +--- +
+
+
+
+

[Institution name]

+

Short description of the institution’s mandate.

+

Super task button [optional]

+
+
+
+
+ +
<div class="bg-center bg-cover" data-bgimg-srcset="img/1x1.png 991w, img/ip-cover-image-1200x726.jpg 992w">
+	<div class="container">
+		<div class="row mrgn-bttm-md">
+			<div class="col-md-7">
+			<h1 property="name" id="wb-cont">[Institution name]</h1>
+				<p>Short description of the institution’s mandate.</p>
+				<p><a class="btn btn-call-to-action" href="#">Super task button [optional]</a></p>
+			</div>
+		</div>
+	</div>
+</div>
+ +

+	<h1 property="name" id="wb-cont" dir="ltr">Introduction block pattern</h1>
+	<p>The introduction block pattern introduces the content of a landing page.</p>
+
\ No newline at end of file diff --git a/components/gc-intro/gc-intro-block-en.html b/components/gc-intro/gc-intro-block-en.html index 46cca41fa6..a54bd121ab 100644 --- a/components/gc-intro/gc-intro-block-en.html +++ b/components/gc-intro/gc-intro-block-en.html @@ -14,7 +14,6 @@

{{ page.title }}

On this page

Introduction block

-
-
-
-
-

[Institution name]

-

Short description of the institution’s mandate.

- Super task button [optional] -
-
-
-
- -
-

Code

- 

-		<div class="bg-center bg-cover" data-bgimg-srcset="img/1x1.png 991w, img/ip-cover-image-1200x726.jpg 992w">
-	<div class="container">
-		<div class="row mrgn-bttm-md">
-			<div class="col-md-7">
-				<h1 property="name" id="wb-cont">[Institution name]</h1>
-				<p>Short description of the institution’s mandate.</p>
-				<a class="btn btn-call-to-action" href="#">Super task button [optional]</a>
-			</div>
-		</div>
-	</div>
-</div>
-
-
+

Evaluation and report

There is no accessibility report.

From 1849295ff252fbdc00b0c7134374fe91be01d295 Mon Sep 17 00:00:00 2001 From: Jennifer Mealing Date: Mon, 18 Dec 2023 11:14:21 -0500 Subject: [PATCH 09/14] move to folder --- .../gc-intro/gc-intro-block-demos-en.html | 0 {components => design-patterns}/gc-intro/gc-intro-block-en.html | 0 {components => design-patterns}/gc-intro/gc-intro-block-fr.html | 0 {components => design-patterns}/gc-intro/index.json-ld | 0 4 files changed, 0 insertions(+), 0 deletions(-) rename {components => design-patterns}/gc-intro/gc-intro-block-demos-en.html (100%) rename {components => design-patterns}/gc-intro/gc-intro-block-en.html (100%) rename {components => design-patterns}/gc-intro/gc-intro-block-fr.html (100%) rename {components => design-patterns}/gc-intro/index.json-ld (100%) diff --git a/components/gc-intro/gc-intro-block-demos-en.html b/design-patterns/gc-intro/gc-intro-block-demos-en.html similarity index 100% rename from components/gc-intro/gc-intro-block-demos-en.html rename to design-patterns/gc-intro/gc-intro-block-demos-en.html diff --git a/components/gc-intro/gc-intro-block-en.html b/design-patterns/gc-intro/gc-intro-block-en.html similarity index 100% rename from components/gc-intro/gc-intro-block-en.html rename to design-patterns/gc-intro/gc-intro-block-en.html diff --git a/components/gc-intro/gc-intro-block-fr.html b/design-patterns/gc-intro/gc-intro-block-fr.html similarity index 100% rename from components/gc-intro/gc-intro-block-fr.html rename to design-patterns/gc-intro/gc-intro-block-fr.html diff --git a/components/gc-intro/index.json-ld b/design-patterns/gc-intro/index.json-ld similarity index 100% rename from components/gc-intro/index.json-ld rename to design-patterns/gc-intro/index.json-ld From 962f4fc3b78acd7b924a13515c8ff1c9f55c3895 Mon Sep 17 00:00:00 2001 From: Jennifer Mealing Date: Wed, 20 Dec 2023 14:30:30 -0500 Subject: [PATCH 10/14] fr text available --- .../gc-intro/gc-intro-block-demos-en.html | 28 +++++++------- .../gc-intro/gc-intro-block-demos-fr.html | 37 +++++++++++++++++++ 2 files changed, 51 insertions(+), 14 deletions(-) create mode 100644 design-patterns/gc-intro/gc-intro-block-demos-fr.html diff --git a/design-patterns/gc-intro/gc-intro-block-demos-en.html b/design-patterns/gc-intro/gc-intro-block-demos-en.html index 2baa90a14f..6d230e4a15 100644 --- a/design-patterns/gc-intro/gc-intro-block-demos-en.html +++ b/design-patterns/gc-intro/gc-intro-block-demos-en.html @@ -19,19 +19,19 @@

[Institution name]

-
<div class="bg-center bg-cover" data-bgimg-srcset="img/1x1.png 991w, img/ip-cover-image-1200x726.jpg 992w">
-	<div class="container">
-		<div class="row mrgn-bttm-md">
-			<div class="col-md-7">
-			<h1 property="name" id="wb-cont">[Institution name]</h1>
-				<p>Short description of the institution’s mandate.</p>
-				<p><a class="btn btn-call-to-action" href="#">Super task button [optional]</a></p>
-			</div>
-		</div>
-	</div>
-</div>
+
<div class="bg-center bg-cover" data-bgimg-srcset="img/1x1.png 991w, img/ip-cover-image-1200x726.jpg 992w">
+	<div class="container">
+		<div class="row mrgn-bttm-md">
+			<div class="col-md-7">
+			<h1 property="name" id="wb-cont">[Institution name]</h1>
+				<p>Short description of the institution’s mandate.</p>
+				<p><a class="btn btn-call-to-action" href="#">Super task button [optional]</a></p>
+			</div>
+		</div>
+	</div>
+</div>

-	<h1 property="name" id="wb-cont" dir="ltr">Introduction block pattern</h1>
-	<p>The introduction block pattern introduces the content of a landing page.</p>
-
\ No newline at end of file + <h1 property="name" id="wb-cont" dir="ltr">Introduction block pattern</h1> + <p>The introduction block pattern introduces the content of a landing page.</p> + diff --git a/design-patterns/gc-intro/gc-intro-block-demos-fr.html b/design-patterns/gc-intro/gc-intro-block-demos-fr.html new file mode 100644 index 0000000000..6623f09237 --- /dev/null +++ b/design-patterns/gc-intro/gc-intro-block-demos-fr.html @@ -0,0 +1,37 @@ +--- +{ + "title": "GC intro block working examples", + "language": "fr", + "altLangPage": "intro-block-demos-en.html", + "layout": "no-container", + "dateModified": "2023-09-13" +} +--- +
+
+
+
+

[Nom de l’institution]

+

Description courte du mandat de d’institution.

+

Bouton de super-tâche [facultatif]

+
+
+
+
+ +
<div class="bg-center bg-cover" data-bgimg-srcset="img/1x1.png 991w, img/ip-cover-image-1200x726.jpg 992w">
+	<div class="container">
+		<div class="row mrgn-bttm-md">
+			<div class="col-md-7">
+			<h1 property="name" id="wb-cont">[Nom de l’institution]</h1>
+				<p>Description courte du mandat de d’institution.</p>
+				<p><a class="btn btn-call-to-action" href="#">Super task button [optional]</a></p>
+			</div>
+		</div>
+	</div>
+</div>
+ +

+	<h1 property="name" id="wb-cont" dir="ltr">Introduction block pattern</h1>
+	<p>La configuration de conception du bloc d’introduction introduit le contenu d’une page de renvoi.</p>
+
From 2952bb779c7357637b4b6cd17989b49e67f560c1 Mon Sep 17 00:00:00 2001 From: Jennifer Mealing Date: Wed, 20 Dec 2023 14:39:30 -0500 Subject: [PATCH 11/14] Create ip-cover-image-1200x726.jpg --- .../gc-intro/img/ip-cover-image-1200x726.jpg | Bin 0 -> 20702 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 design-patterns/gc-intro/img/ip-cover-image-1200x726.jpg diff --git a/design-patterns/gc-intro/img/ip-cover-image-1200x726.jpg b/design-patterns/gc-intro/img/ip-cover-image-1200x726.jpg new file mode 100644 index 0000000000000000000000000000000000000000..a1e1f75fea32d018e0459dbce7e830fa253d25e2 GIT binary patch literal 20702 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 WX(tt{qm;I|UfpE>qw)4~*M9&h#m*c6 literal 0 HcmV?d00001 From 6bf52ff588ee0441a31b96bf59e00ee62b095535 Mon Sep 17 00:00:00 2001 From: Jennifer Mealing Date: Wed, 24 Jan 2024 13:11:12 -0500 Subject: [PATCH 12/14] Update design-patterns/gc-intro/gc-intro-block-demos-en.html Co-authored-by: Garneauma Update design-patterns/gc-intro/gc-intro-block-demos-en.html Co-authored-by: Garneauma Update design-patterns/gc-intro/gc-intro-block-demos-fr.html Co-authored-by: Garneauma Update design-patterns/gc-intro/gc-intro-block-demos-fr.html Co-authored-by: Garneauma --- design-patterns/gc-intro/gc-intro-block-demos-en.html | 5 +++-- design-patterns/gc-intro/gc-intro-block-demos-fr.html | 5 +++-- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/design-patterns/gc-intro/gc-intro-block-demos-en.html b/design-patterns/gc-intro/gc-intro-block-demos-en.html index 6d230e4a15..4a14636d22 100644 --- a/design-patterns/gc-intro/gc-intro-block-demos-en.html +++ b/design-patterns/gc-intro/gc-intro-block-demos-en.html @@ -18,7 +18,8 @@

[Institution name]

- +
+

Code sample

<div class="bg-center bg-cover" data-bgimg-srcset="img/1x1.png 991w, img/ip-cover-image-1200x726.jpg 992w">
 	<div class="container">
 		<div class="row mrgn-bttm-md">
@@ -34,4 +35,4 @@ 
[Institution name]

 

 	<h1 property="name" id="wb-cont" dir="ltr">Introduction block pattern</h1>
 	<p>The introduction block pattern introduces the content of a landing page.</p>
-

+
diff --git a/design-patterns/gc-intro/gc-intro-block-demos-fr.html b/design-patterns/gc-intro/gc-intro-block-demos-fr.html index 6623f09237..71d2ec058e 100644 --- a/design-patterns/gc-intro/gc-intro-block-demos-fr.html +++ b/design-patterns/gc-intro/gc-intro-block-demos-fr.html @@ -18,7 +18,8 @@

[Nom de l’institution]

- +
+

Code source

<div class="bg-center bg-cover" data-bgimg-srcset="img/1x1.png 991w, img/ip-cover-image-1200x726.jpg 992w">
 	<div class="container">
 		<div class="row mrgn-bttm-md">
@@ -34,4 +35,4 @@ 
[Nom de l’institution]

 

 	<h1 property="name" id="wb-cont" dir="ltr">Introduction block pattern</h1>
 	<p>La configuration de conception du bloc d’introduction introduit le contenu d’une page de renvoi.</p>
-

+
From f4ace44e682280685c74639d64d417266f05b130 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Garneau?= Date: Thu, 14 Mar 2024 10:44:12 -0400 Subject: [PATCH 13/14] Intro block: converting to data-first documentation --- _data/design-patterns.json | 270 +++++++++++++++++- .../gc-intro/gc-intro-image.html | 11 + .../design-patterns/gc-intro/gc-intro.html | 3 + .../gc-intro/gc-intro-block-demos-en.html | 38 --- .../gc-intro/gc-intro-block-demos-fr.html | 38 --- .../gc-intro/gc-intro-block-en.html | 62 ---- .../gc-intro/gc-intro-block-fr.html | 88 ------ design-patterns/gc-intro/gc-intro-doc-en.html | 9 + design-patterns/gc-intro/gc-intro-doc-fr.html | 9 + design-patterns/gc-intro/gc-intro-en.html | 20 ++ design-patterns/gc-intro/gc-intro-fr.html | 20 ++ .../gc-intro/gc-intro-image-en.html | 20 ++ .../gc-intro/gc-intro-image-fr.html | 21 ++ design-patterns/gc-intro/index.json-ld | 246 +++++++++++++++- .../gc-intro/samples/gc-intro-image.html | 11 + .../gc-intro/samples/gc-intro.html | 3 + 16 files changed, 636 insertions(+), 233 deletions(-) create mode 100644 _includes/design-patterns/gc-intro/gc-intro-image.html create mode 100644 _includes/design-patterns/gc-intro/gc-intro.html delete mode 100644 design-patterns/gc-intro/gc-intro-block-demos-en.html delete mode 100644 design-patterns/gc-intro/gc-intro-block-demos-fr.html delete mode 100644 design-patterns/gc-intro/gc-intro-block-en.html delete mode 100644 design-patterns/gc-intro/gc-intro-block-fr.html create mode 100644 design-patterns/gc-intro/gc-intro-doc-en.html create mode 100644 design-patterns/gc-intro/gc-intro-doc-fr.html create mode 100644 design-patterns/gc-intro/gc-intro-en.html create mode 100644 design-patterns/gc-intro/gc-intro-fr.html create mode 100644 design-patterns/gc-intro/gc-intro-image-en.html create mode 100644 design-patterns/gc-intro/gc-intro-image-fr.html create mode 100644 design-patterns/gc-intro/samples/gc-intro-image.html create mode 100644 design-patterns/gc-intro/samples/gc-intro.html diff --git a/_data/design-patterns.json b/_data/design-patterns.json index fe51488c70..b555072072 100644 --- a/_data/design-patterns.json +++ b/_data/design-patterns.json @@ -1 +1,269 @@ -[] +[{ + "@context": { + "@version": 1.1, + "dct": "http://purl.org/dc/terms/", + "title": { "@id": "dct:title", "@container": "@language" }, + "description": { "@id": "dct:description", "@container": "@language" }, + "modified": "dct:modified" + }, + "title": { + "en": "Introduction block - Documentation and working example", + "fr": "Bloc d’introduction - Documentation et example pratique" + }, + "description": { + "en": "Guidance about using the introduction block pattern on Canada.ca.", + "fr": "Orientation sur l’utilisation de la configuration de conception du bloc d’introduction sur Canada.ca." + }, + "modified": "2023-08-16", + "componentName": "gc-intro", + "status": "stable", + "version": "1.0", + "pages": { + "docs": [ + { + "title": "Introduction block", + "language": "en", + "path": "gc-intro-doc-en.html" + }, + { + "title": "Bloc d’introduction", + "language": "fr", + "path": "gc-intro-doc-fr.html" + } + ], + "examples": [ + { + "title": "Introduction block", + "language": "en", + "path": "gc-intro-en.html" + }, + { + "title": "Bloc d’introduction", + "language": "fr", + "path": "gc-intro-fr.html" + }, + { + "title": "Introduction block with image", + "language": "en", + "path": "gc-intro-image-en.html" + }, + { + "title": "Bloc d’introduction avec image", + "language": "fr", + "path": "gc-intro-image-fr.html" + } + ] + }, + "dependencies": "No dependency.", + "a11yGuidance": "No accessibility guidance.", + "variations": [ + { + "name": { + "en": "Introduction block - default", + "fr": "Bloc d'introduction - par défaut" + }, + "status": "stable", + "description": { + "en": "The introduction block pattern introduces the content of a landing page.", + "fr": "La configuration de conception du bloc d’introduction introduit le contenu d’une page d’accueil." + }, + "guidance": { + "en": "https://design.canada.ca/common-design-patterns/intro-block.html", + "fr": "https://conception.canada.ca/configurations-conception-communes/block-introduction.html" + }, + "iteration": "_:iteration_intro_1", + "example": [ + { + "en": { "href": "gc-intro-en.html", "text": "Introduction block" }, + "fr": { "href": "gc-intro-fr.html", "text": "Bloc d'introduction" } + } + ], + "implementation": [ + "_:implement_intro" + ], + "history": [ + { + "en": "March 2024 - Initial implementation of the variation.", + "fr": "Mars 2024 - Implémentation initiale de la variante." + } + ] + }, + { + "name": { + "en": "Introduction block with image", + "fr": "Bloc d'introduction avec image" + }, + "status": "stable", + "description": { + "en": "The introduction block pattern introduces the content of a landing page. This variation can contain an image and a super task button.", + "fr": "La configuration de conception du bloc d’introduction introduit le contenu d’une page d’accueil. Cette variation peur contenir une image." + }, + "guidance": { + "en": "https://design.canada.ca/common-design-patterns/intro-block.html", + "fr": "https://conception.canada.ca/configurations-conception-communes/block-introduction.html" + }, + "iteration": "_:iteration_intro_image_1", + "example": [ + { + "en": { "href": "gc-intro-image-en.html", "text": "Introduction block with image" }, + "fr": { "href": "gc-intro-image-fr.html", "text": "Bloc d'introduction avec image" } + } + ], + "implementation": [ + "_:implement_intro_image" + ], + "history": [ + { + "en": "March 2024 - Initial implementation of the variation.", + "fr": "Mars 2024 - Implémentation initiale de la variante." + } + ] + } + ], + "implementation": [ + { + "@id": "_:implement_intro", + "iteration": "_:iteration_intro_1", + "name": { + "en": "Standard", + "fr": "Standard" + }, + "introduction": { + "en": "This implementation is meant for developers/publishers adding the component manually.", + "fr": "Cette implémentation est destinée aux développeurs/éditeurs qui ajoutent le composant manuellement." + }, + "instructions": { + "en": [ + "The introduction block pattern is a mandatory element for institutional landing pages and topic pages. It’s optional for other landing pages.", + "The introduction block with image contains the following elements:
  • title (mandatory)
  • short description (mandatory)
  • supertask button (optional)
", + "Refer to the code sample below." + ], + "fr": [ + "La configuration de conception du bloc d’introduction est un élément obligatoire pour les pages d’accueil institutionnelles et les pages de sujet. Elle est facultative pour les autres pages d’accueil.", + "Le bloc d'introduction avec image contient les éléments suivants :
  • titre (obligatoire)
  • description courte (obligatoire)
  • bouton de super-tâche (facultatif)
", + "Référez-vous au code qui suit." + ] + }, + "sample": { + "en": [ + { + "@type": "source-code", + "description": "Code sample:", + "code": "

Introduction block

\n

The introduction block pattern introduces the content of a landing page.

\n

Super task button

" + } + ], + "fr": [ + { + "@type": "source-code", + "description": "Exemple de code :", + "code": "

Bloc d'introduction

\n

La configuration de conception du bloc d’introduction introduit le contenu d’une page d’accueil.

\n

Bouton de super-tâche

" + } + ] + } + }, + { + "@id": "_:implement_intro_image", + "iteration": "_:iteration_intro_image_1", + "name": { + "en": "Standard", + "fr": "Standard" + }, + "introduction": { + "en": "This implementation is meant for developers/publishers adding the component manually.", + "fr": "Cette implémentation est destinée aux développeurs/éditeurs qui ajoutent le composant manuellement." + }, + "instructions": { + "en": [ + "The introduction block pattern is a mandatory element for institutional landing pages and topic pages. It’s optional for other landing pages.", + "The introduction block with image contains the following elements:
  • title (mandatory)
  • short description (mandatory)
  • image (mandatory)
  • supertask button (optional)
", + "Refer to the code sample below." + ], + "fr": [ + "La configuration de conception du bloc d’introduction est un élément obligatoire pour les pages d’accueil institutionnelles et les pages de sujet. Elle est facultative pour les autres pages d’accueil.", + "Le bloc d'introduction avec image contient les éléments suivants :
  • titre (obligatoire)
  • description courte (obligatoire)
  • image (obligatoire)
  • bouton de super-tâche (facultatif)
", + "Référez-vous au code qui suit." + ] + }, + "sample": { + "en": [ + { + "@type": "source-code", + "description": "Code sample:", + "code": "
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t

[Institution name]

\n\t\t\t\t

Short description of the institution’s mandate.

\n\t\t\t\t

Super task button

\n\t\t\t
\n\t\t
\n\t
\n
" + } + ], + "fr": [ + { + "@type": "source-code", + "description": "Exemple de code :", + "code": "
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t

[Nom de l’institution]

\n\t\t\t\t

Description courte du mandat de d’institution.

\n\t\t\t\t

Bouton de super-tâche

\n\t\t\t
\n\t\t
\n\t
\n
" + } + ] + } + } + ], + "iteration": [ + { + "@id": "_:iteration_intro_1", + "name": "Introduction block - Iteration 1", + "date": "2024-03", + "detectableBy": "h1#wb-cont+p", + "assets": [ + { + "@type": "source-code", + "@language": "en", + "description": "Code sample", + "code": "

Introduction block

\n

The introduction block pattern introduces the content of a landing page.

\n

Super task button

" + } + ] + }, + { + "@id": "_:iteration_intro_image_1", + "name": "Introduction block with image - Iteration 1", + "date": "2024-03", + "detectableBy": ".bg-cover h1#wb-cont + p", + "assets": [ + { + "@type": "source-code", + "@language": "en", + "description": "Code sample", + "code": "
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t

[Institution name]

\n\t\t\t\t

Short description of the institution’s mandate.

\n\t\t\t\t

Super task button [optional]

\n\t\t\t
\n\t\t
\n\t
\n
" + } + ] + } + ], + "changesets": [ + { + "@id": "_:cs_intro", + "name": "Introduction block", + "status": "stable", + "baseOnIteration": "_:iteration_intro_1", + "detectableBy": "h1#wb-cont + p", + "semantic": "h1 + p", + "schema": [ + "Page title", + "Page description", + "Page supertask (optional)" + ], + "context": "The introduction block pattern is a mandatory element for institutional landing pages and topic pages. It’s optional for other landing pages." + }, + { + "@id": "_:cs_intro_image", + "name": "Introduction block with image", + "status": "stable", + "baseOnIteration": "_:iteration_intro_image_1", + "detectableBy": ".bg-cover h1#wb-cont + p", + "semantic": "h1 + p", + "layout": "Title, short description, and supertask button on the left. Image in the background.", + "schema": [ + "Page title", + "Page description", + "Image URL", + "Page supertask (optional)" + ], + "context": "The introduction block pattern is a mandatory element for institutional landing pages and topic pages. It’s optional for other landing pages.", + "accessibility": "It is the responsibility of the author to make sure the whole text has a minimum contrast ratio of 4:1 on every breakpoint and with a zoom of up to 400% on desktop." + } + ] +} +] diff --git a/_includes/design-patterns/gc-intro/gc-intro-image.html b/_includes/design-patterns/gc-intro/gc-intro-image.html new file mode 100644 index 0000000000..772d249ed9 --- /dev/null +++ b/_includes/design-patterns/gc-intro/gc-intro-image.html @@ -0,0 +1,11 @@ +
+
+
+
+

{{ page.title }}

+

{% if page.language == "en" %}The introduction block pattern introduces the content of a landing page.{% else %}La configuration de conception du bloc d'introduction introduit le contenu d'une page de destination.{% endif %}

+

{% if page.language == "en" %}Supertask button{% else %}Bouton de super-tâche{% endif %}

+
+
+
+
diff --git a/_includes/design-patterns/gc-intro/gc-intro.html b/_includes/design-patterns/gc-intro/gc-intro.html new file mode 100644 index 0000000000..9f754c4995 --- /dev/null +++ b/_includes/design-patterns/gc-intro/gc-intro.html @@ -0,0 +1,3 @@ +

{{ page.title }}

+

{% if page.language == "en" %}The introduction block pattern introduces the content of a landing page.{% else %}La configuration de conception du bloc d'introduction introduit le contenu d'une page de destination.{% endif %}

+

{% if page.language == "en" %}Supertask button{% else %}Bouton de super-tâche{% endif %}

diff --git a/design-patterns/gc-intro/gc-intro-block-demos-en.html b/design-patterns/gc-intro/gc-intro-block-demos-en.html deleted file mode 100644 index 4a14636d22..0000000000 --- a/design-patterns/gc-intro/gc-intro-block-demos-en.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -{ - "title": "GC intro block working examples", - "language": "en", - "altLangPage": "intro-block-demos-fr.html", - "layout": "no-container", - "dateModified": "2023-09-13" -} ---- -
-
-
-
-

[Institution name]

-

Short description of the institution’s mandate.

-

Super task button [optional]

-
-
-
-
-
-

Code sample

-
<div class="bg-center bg-cover" data-bgimg-srcset="img/1x1.png 991w, img/ip-cover-image-1200x726.jpg 992w">
-	<div class="container">
-		<div class="row mrgn-bttm-md">
-			<div class="col-md-7">
-			<h1 property="name" id="wb-cont">[Institution name]</h1>
-				<p>Short description of the institution’s mandate.</p>
-				<p><a class="btn btn-call-to-action" href="#">Super task button [optional]</a></p>
-			</div>
-		</div>
-	</div>
-</div>
- -

-	<h1 property="name" id="wb-cont" dir="ltr">Introduction block pattern</h1>
-	<p>The introduction block pattern introduces the content of a landing page.</p>
-
diff --git a/design-patterns/gc-intro/gc-intro-block-demos-fr.html b/design-patterns/gc-intro/gc-intro-block-demos-fr.html deleted file mode 100644 index 71d2ec058e..0000000000 --- a/design-patterns/gc-intro/gc-intro-block-demos-fr.html +++ /dev/null @@ -1,38 +0,0 @@ ---- -{ - "title": "GC intro block working examples", - "language": "fr", - "altLangPage": "intro-block-demos-en.html", - "layout": "no-container", - "dateModified": "2023-09-13" -} ---- -
-
-
-
-

[Nom de l’institution]

-

Description courte du mandat de d’institution.

-

Bouton de super-tâche [facultatif]

-
-
-
-
-
-

Code source

-
<div class="bg-center bg-cover" data-bgimg-srcset="img/1x1.png 991w, img/ip-cover-image-1200x726.jpg 992w">
-	<div class="container">
-		<div class="row mrgn-bttm-md">
-			<div class="col-md-7">
-			<h1 property="name" id="wb-cont">[Nom de l’institution]</h1>
-				<p>Description courte du mandat de d’institution.</p>
-				<p><a class="btn btn-call-to-action" href="#">Super task button [optional]</a></p>
-			</div>
-		</div>
-	</div>
-</div>
- -

-	<h1 property="name" id="wb-cont" dir="ltr">Introduction block pattern</h1>
-	<p>La configuration de conception du bloc d’introduction introduit le contenu d’une page de renvoi.</p>
-
diff --git a/design-patterns/gc-intro/gc-intro-block-en.html b/design-patterns/gc-intro/gc-intro-block-en.html deleted file mode 100644 index a54bd121ab..0000000000 --- a/design-patterns/gc-intro/gc-intro-block-en.html +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: Introduction block pattern -description: Documentation and working example for the introduction block pattern -language: en -altLangPage: gc-intro-block-fr.html -dateModified: 2023-08-09 -layout: no-container ---- -
-

{{ page.title }}

- - -

The introduction block pattern introduces the content of a landing page.

- -

On this page

- - -

Before you start

-

The introduction block pattern is a mandatory element for institutional landing pages and topic pages. It’s optional for other landing pages.

- - - -

Accessibility guidance

-

List of accessibility guidances to be followed to ensure component is used in respect of the accessibility guideline and EN 301 549 standard (including WCAG 2.1 Level AA).

-

There is no accessibility guidance defined.

- -

Variations

-

The introduction block pattern consists of:

-
    -
  • title
    • -
  • short description
    • -
-

It can also include:

-
    -
  • image
    • -
  • supertask button
    • -
- -

Introduction block

- - -

Evaluation and report

-

There is no accessibility report.

- -

There is no accessibility conformance report.

-

Technical documentation

-
-
Status:
-
stable
-
-
diff --git a/design-patterns/gc-intro/gc-intro-block-fr.html b/design-patterns/gc-intro/gc-intro-block-fr.html deleted file mode 100644 index f078aefb6d..0000000000 --- a/design-patterns/gc-intro/gc-intro-block-fr.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Bloc d’introduction -description: Documentation et exemple pratique de bloc d’introduction -language: fr -altLangPage: gc-intro-block-en.html -dateModified: 2023-08-09 -layout: no-container ---- -
-

{{ page.title }}

- - -

La configuration de conception du bloc d’introduction introduit le contenu d’une page d’accueil.

- -

Sur cette page

- - -

Before you start

-

La configuration de conception du bloc d’introduction est un élément obligatoire pour les pages d’accueil institutionnelles et les pages de sujet. Elle est facultative pour les autres pages d’accueil.

- - - -

Accessibility guidance

-

List of accessibility guidances to be followed to ensure component is used in respect of the accessibility guideline and EN 301 549 standard (including WCAG 2.1 Level AA).

-

There is no accessibility guidance defined.

- -

Variations

-

La configuration de conception du bloc d’introduction consiste en ce qui suit :

-
    -
  • titre
    • -
  • description courte
    • -
-

Elle peut également inclure ces éléments :

-
    -
  • image
    • -
  • bouton de super-tâche
    • -
- -

Bloc d’introduction

-
-
-
-
-

[Nom de l’institution]

-

Description courte du mandat de l’institution.

- Bouton de super-tâche [facultatif] -
-
-
-
- -
-

Code

- 

-		<div class="bg-center bg-cover" data-bgimg-srcset="img/1x1.png 991w, img/ip-cover-image-1200x726.jpg 992w">
-	<div class="container">
-		<div class="row mrgn-bttm-md">
-			<div class="col-md-7">
-				<h1 property="name" id="wb-cont">[Nom de l’institution]</h1>
-				<p>Description courte du mandat de l’institution</p>
-				<a class="btn btn-call-to-action" href="#">Bouton de super-tâche [facultatif]</a>
-			</div>
-		</div>
-	</div>
-</div>
-
-
- -

Evaluation and report

-

There is no accessibility report.

- -

There is no accessibility conformance report.

-

Technical documentation

-
-
Status:
-
stable
-
-
diff --git a/design-patterns/gc-intro/gc-intro-doc-en.html b/design-patterns/gc-intro/gc-intro-doc-en.html new file mode 100644 index 0000000000..9ec143fbf8 --- /dev/null +++ b/design-patterns/gc-intro/gc-intro-doc-en.html @@ -0,0 +1,9 @@ +--- +title: Introduction block +description: Documentation for the introduction block design pattern. +language: en +altLangPage: gc-intro-fr.html +dateModified: 2024-03-14 +layout: documentation +index_json: index.json-ld +--- diff --git a/design-patterns/gc-intro/gc-intro-doc-fr.html b/design-patterns/gc-intro/gc-intro-doc-fr.html new file mode 100644 index 0000000000..fa42c868be --- /dev/null +++ b/design-patterns/gc-intro/gc-intro-doc-fr.html @@ -0,0 +1,9 @@ +--- +title: Bloc d’introduction +description: Documentation de la configuration de conception du bloc d’introduction. +language: fr +altLangPage: gc-intro-en.html +dateModified: 2024-03-14 +layout: documentation +index_json: index.json-ld +--- diff --git a/design-patterns/gc-intro/gc-intro-en.html b/design-patterns/gc-intro/gc-intro-en.html new file mode 100644 index 0000000000..91aefb69bc --- /dev/null +++ b/design-patterns/gc-intro/gc-intro-en.html @@ -0,0 +1,20 @@ +--- +{ + "title": "Introduction block", + "language": "en", + "altLangPage": "gc-intro-fr.html", + "dateModified": "2024-03-14", + "breadcrumbs": [ + { "title": "Introduction block - documentation", "link": "design-patterns/gc-intro/gc-intro-doc-en.html" } + ], + "layout": "without-h1", +} +--- +
+ +
+ {% include_relative samples/gc-intro.html %} + +

Code sample

+ {% highlight html %}{% include_relative samples/gc-intro.html %}{% endhighlight %} +
diff --git a/design-patterns/gc-intro/gc-intro-fr.html b/design-patterns/gc-intro/gc-intro-fr.html new file mode 100644 index 0000000000..d8b784a768 --- /dev/null +++ b/design-patterns/gc-intro/gc-intro-fr.html @@ -0,0 +1,20 @@ +--- +{ + "title": "Bloc d'introduction", + "language": "fr", + "altLangPage": "gc-intro-en.html", + "dateModified": "2024-03-14", + "breadcrumbs": [ + { "title": "Bloc d'introduction - documentation", "link": "design-patterns/gc-intro/gc-intro-doc-fr.html" } + ], + "layout": "without-h1", +} +--- +
+ +
+ {% include_relative samples/gc-intro.html %} + +

Code

+ {% highlight html %}{% include_relative samples/gc-intro.html %}{% endhighlight %} +
diff --git a/design-patterns/gc-intro/gc-intro-image-en.html b/design-patterns/gc-intro/gc-intro-image-en.html new file mode 100644 index 0000000000..9340af1070 --- /dev/null +++ b/design-patterns/gc-intro/gc-intro-image-en.html @@ -0,0 +1,20 @@ +--- +{ + "title": "Introduction block with image", + "language": "en", + "altLangPage": "gc-intro-image-fr.html", + "dateModified": "2024-03-14", + "breadcrumbs": [ + { "title": "Introduction block - documentation", "link": "design-patterns/gc-intro/gc-intro-doc-en.html" } + ], + "layout": "no-container" +} +--- +
+ +{% include_relative samples/gc-intro-image.html %} + +
+

Code sample

+ {% highlight html %}{% include_relative samples/gc-intro-image.html %}{% endhighlight %} +
diff --git a/design-patterns/gc-intro/gc-intro-image-fr.html b/design-patterns/gc-intro/gc-intro-image-fr.html new file mode 100644 index 0000000000..4751dcc3c1 --- /dev/null +++ b/design-patterns/gc-intro/gc-intro-image-fr.html @@ -0,0 +1,21 @@ +--- +{ + "title": "Bloc d'introduction avec image", + "language": "fr", + "altLangPage": "gc-intro-image-en.html", + "layout": "no-container", + "dateModified": "2024-03-14", + "breadcrumbs": [ + { "title": "Bloc d'introduction - documentation", "link": "design-patterns/gc-intro/gc-intro-doc-fr.html" } + ], + "layout": "no-container" +} +--- +
+ +{% include_relative samples/gc-intro-image.html %} + +
+

Code

+ {% highlight html %}{% include_relative samples/gc-intro-image.html %}{% endhighlight %} +
diff --git a/design-patterns/gc-intro/index.json-ld b/design-patterns/gc-intro/index.json-ld index 38f31d49c1..4518b54c1d 100644 --- a/design-patterns/gc-intro/index.json-ld +++ b/design-patterns/gc-intro/index.json-ld @@ -17,18 +17,252 @@ "modified": "2023-08-16", "componentName": "gc-intro", "status": "stable", + "version": "1.0", "pages": { - "examples": [ + "docs": [ { - "title": "Introduction block - Documentation and working example", + "title": "Introduction block", "language": "en", - "path": "gc-intro-block-en.html" + "path": "gc-intro-doc-en.html" }, { - "title": "Bloc d’introduction - - Documentation et example pratique", + "title": "Bloc d’introduction", "language": "fr", - "path": "gc-intro-block-fr.html" + "path": "gc-intro-doc-fr.html" + } + ], + "examples": [ + { + "title": "Introduction block", + "language": "en", + "path": "gc-intro-en.html" + }, + { + "title": "Bloc d’introduction", + "language": "fr", + "path": "gc-intro-fr.html" + }, + { + "title": "Introduction block with image", + "language": "en", + "path": "gc-intro-image-en.html" + }, + { + "title": "Bloc d’introduction avec image", + "language": "fr", + "path": "gc-intro-image-fr.html" } ] - } + }, + "dependencies": "No dependency.", + "a11yGuidance": "No accessibility guidance.", + "variations": [ + { + "name": { + "en": "Introduction block - default", + "fr": "Bloc d'introduction - par défaut" + }, + "status": "stable", + "description": { + "en": "The introduction block pattern introduces the content of a landing page.", + "fr": "La configuration de conception du bloc d’introduction introduit le contenu d’une page d’accueil." + }, + "guidance": { + "en": "https://design.canada.ca/common-design-patterns/intro-block.html", + "fr": "https://conception.canada.ca/configurations-conception-communes/block-introduction.html" + }, + "iteration": "_:iteration_intro_1", + "example": [ + { + "en": { "href": "gc-intro-en.html", "text": "Introduction block" }, + "fr": { "href": "gc-intro-fr.html", "text": "Bloc d'introduction" } + } + ], + "implementation": [ + "_:implement_intro" + ], + "history": [ + { + "en": "March 2024 - Initial implementation of the variation.", + "fr": "Mars 2024 - Implémentation initiale de la variante." + } + ] + }, + { + "name": { + "en": "Introduction block with image", + "fr": "Bloc d'introduction avec image" + }, + "status": "stable", + "description": { + "en": "The introduction block pattern introduces the content of a landing page. This variation can contain an image and a super task button.", + "fr": "La configuration de conception du bloc d’introduction introduit le contenu d’une page d’accueil. Cette variation peur contenir une image." + }, + "guidance": { + "en": "https://design.canada.ca/common-design-patterns/intro-block.html", + "fr": "https://conception.canada.ca/configurations-conception-communes/block-introduction.html" + }, + "iteration": "_:iteration_intro_image_1", + "example": [ + { + "en": { "href": "gc-intro-image-en.html", "text": "Introduction block with image" }, + "fr": { "href": "gc-intro-image-fr.html", "text": "Bloc d'introduction avec image" } + } + ], + "implementation": [ + "_:implement_intro_image" + ], + "history": [ + { + "en": "March 2024 - Initial implementation of the variation.", + "fr": "Mars 2024 - Implémentation initiale de la variante." + } + ] + } + ], + "implementation": [ + { + "@id": "_:implement_intro", + "iteration": "_:iteration_intro_1", + "name": { + "en": "Standard", + "fr": "Standard" + }, + "introduction": { + "en": "This implementation is meant for developers/publishers adding the component manually.", + "fr": "Cette implémentation est destinée aux développeurs/éditeurs qui ajoutent le composant manuellement." + }, + "instructions": { + "en": [ + "The introduction block pattern is a mandatory element for institutional landing pages and topic pages. It’s optional for other landing pages.", + "The introduction block with image contains the following elements:
  • title (mandatory)
  • short description (mandatory)
  • supertask button (optional)
", + "Refer to the code sample below." + ], + "fr": [ + "La configuration de conception du bloc d’introduction est un élément obligatoire pour les pages d’accueil institutionnelles et les pages de sujet. Elle est facultative pour les autres pages d’accueil.", + "Le bloc d'introduction avec image contient les éléments suivants :
  • titre (obligatoire)
  • description courte (obligatoire)
  • bouton de super-tâche (facultatif)
", + "Référez-vous au code qui suit." + ] + }, + "sample": { + "en": [ + { + "@type": "source-code", + "description": "Code sample:", + "code": "

Introduction block

\n

The introduction block pattern introduces the content of a landing page.

\n

Super task button

" + } + ], + "fr": [ + { + "@type": "source-code", + "description": "Exemple de code :", + "code": "

Bloc d'introduction

\n

La configuration de conception du bloc d’introduction introduit le contenu d’une page d’accueil.

\n

Bouton de super-tâche

" + } + ] + } + }, + { + "@id": "_:implement_intro_image", + "iteration": "_:iteration_intro_image_1", + "name": { + "en": "Standard", + "fr": "Standard" + }, + "introduction": { + "en": "This implementation is meant for developers/publishers adding the component manually.", + "fr": "Cette implémentation est destinée aux développeurs/éditeurs qui ajoutent le composant manuellement." + }, + "instructions": { + "en": [ + "The introduction block pattern is a mandatory element for institutional landing pages and topic pages. It’s optional for other landing pages.", + "The introduction block with image contains the following elements:
  • title (mandatory)
  • short description (mandatory)
  • image (mandatory)
  • supertask button (optional)
", + "Refer to the code sample below." + ], + "fr": [ + "La configuration de conception du bloc d’introduction est un élément obligatoire pour les pages d’accueil institutionnelles et les pages de sujet. Elle est facultative pour les autres pages d’accueil.", + "Le bloc d'introduction avec image contient les éléments suivants :
  • titre (obligatoire)
  • description courte (obligatoire)
  • image (obligatoire)
  • bouton de super-tâche (facultatif)
", + "Référez-vous au code qui suit." + ] + }, + "sample": { + "en": [ + { + "@type": "source-code", + "description": "Code sample:", + "code": "
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t

[Institution name]

\n\t\t\t\t

Short description of the institution’s mandate.

\n\t\t\t\t

Super task button

\n\t\t\t
\n\t\t
\n\t
\n
" + } + ], + "fr": [ + { + "@type": "source-code", + "description": "Exemple de code :", + "code": "
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t

[Nom de l’institution]

\n\t\t\t\t

Description courte du mandat de d’institution.

\n\t\t\t\t

Bouton de super-tâche

\n\t\t\t
\n\t\t
\n\t
\n
" + } + ] + } + } + ], + "iteration": [ + { + "@id": "_:iteration_intro_1", + "name": "Introduction block - Iteration 1", + "date": "2024-03", + "detectableBy": "h1#wb-cont+p", + "assets": [ + { + "@type": "source-code", + "@language": "en", + "description": "Code sample", + "code": "

Introduction block

\n

The introduction block pattern introduces the content of a landing page.

\n

Super task button

" + } + ] + }, + { + "@id": "_:iteration_intro_image_1", + "name": "Introduction block with image - Iteration 1", + "date": "2024-03", + "detectableBy": ".bg-cover h1#wb-cont + p", + "assets": [ + { + "@type": "source-code", + "@language": "en", + "description": "Code sample", + "code": "
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t

[Institution name]

\n\t\t\t\t

Short description of the institution’s mandate.

\n\t\t\t\t

Super task button [optional]

\n\t\t\t
\n\t\t
\n\t
\n
" + } + ] + } + ], + "changesets": [ + { + "@id": "_:cs_intro", + "name": "Introduction block", + "status": "stable", + "baseOnIteration": "_:iteration_intro_1", + "detectableBy": "h1#wb-cont + p", + "semantic": "h1 + p", + "schema": [ + "Page title", + "Page description", + "Page supertask (optional)" + ], + "context": "The introduction block pattern is a mandatory element for institutional landing pages and topic pages. It’s optional for other landing pages." + }, + { + "@id": "_:cs_intro_image", + "name": "Introduction block with image", + "status": "stable", + "baseOnIteration": "_:iteration_intro_image_1", + "detectableBy": ".bg-cover h1#wb-cont + p", + "semantic": "h1 + p", + "layout": "Title, short description, and supertask button on the left. Image in the background.", + "schema": [ + "Page title", + "Page description", + "Image URL", + "Page supertask (optional)" + ], + "context": "The introduction block pattern is a mandatory element for institutional landing pages and topic pages. It’s optional for other landing pages.", + "accessibility": "It is the responsibility of the author to make sure the whole text has a minimum contrast ratio of 4:1 on every breakpoint and with a zoom of up to 400% on desktop." + } + ] } diff --git a/design-patterns/gc-intro/samples/gc-intro-image.html b/design-patterns/gc-intro/samples/gc-intro-image.html new file mode 100644 index 0000000000..772d249ed9 --- /dev/null +++ b/design-patterns/gc-intro/samples/gc-intro-image.html @@ -0,0 +1,11 @@ +
+
+
+
+

{{ page.title }}

+

{% if page.language == "en" %}The introduction block pattern introduces the content of a landing page.{% else %}La configuration de conception du bloc d'introduction introduit le contenu d'une page de destination.{% endif %}

+

{% if page.language == "en" %}Supertask button{% else %}Bouton de super-tâche{% endif %}

+
+
+
+
diff --git a/design-patterns/gc-intro/samples/gc-intro.html b/design-patterns/gc-intro/samples/gc-intro.html new file mode 100644 index 0000000000..9f754c4995 --- /dev/null +++ b/design-patterns/gc-intro/samples/gc-intro.html @@ -0,0 +1,3 @@ +

{{ page.title }}

+

{% if page.language == "en" %}The introduction block pattern introduces the content of a landing page.{% else %}La configuration de conception du bloc d'introduction introduit le contenu d'une page de destination.{% endif %}

+

{% if page.language == "en" %}Supertask button{% else %}Bouton de super-tâche{% endif %}

From ca2b39c5c10483cac92b696af840a4db61e909d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Garneau?= Date: Mon, 18 Mar 2024 14:07:29 -0400 Subject: [PATCH 14/14] Intro block: new doc template, small doc edits --- _data/design-patterns.json | 106 +-- .../gc-intro/gc-intro-image.html | 6 +- .../design-patterns/gc-intro/gc-intro.html | 2 +- design-patterns/gc-intro/gc-intro-doc-en.html | 4 +- design-patterns/gc-intro/gc-intro-doc-fr.html | 4 +- design-patterns/gc-intro/index.json-ld | 106 +-- .../gc-intro/samples/gc-intro-image.html | 6 +- .../gc-intro/samples/gc-intro.html | 2 +- sites/layouts/documentation_pattern.html | 652 ++++++++++++++++++ 9 files changed, 722 insertions(+), 166 deletions(-) create mode 100644 sites/layouts/documentation_pattern.html diff --git a/_data/design-patterns.json b/_data/design-patterns.json index b555072072..2f6b5f8d7f 100644 --- a/_data/design-patterns.json +++ b/_data/design-patterns.json @@ -16,8 +16,6 @@ }, "modified": "2023-08-16", "componentName": "gc-intro", - "status": "stable", - "version": "1.0", "pages": { "docs": [ { @@ -54,7 +52,9 @@ } ] }, - "dependencies": "No dependency.", + "dependencies": [ + "bgimg" + ], "a11yGuidance": "No accessibility guidance.", "variations": [ { @@ -62,7 +62,6 @@ "en": "Introduction block - default", "fr": "Bloc d'introduction - par défaut" }, - "status": "stable", "description": { "en": "The introduction block pattern introduces the content of a landing page.", "fr": "La configuration de conception du bloc d’introduction introduit le contenu d’une page d’accueil." @@ -93,7 +92,6 @@ "en": "Introduction block with image", "fr": "Bloc d'introduction avec image" }, - "status": "stable", "description": { "en": "The introduction block pattern introduces the content of a landing page. This variation can contain an image and a super task button.", "fr": "La configuration de conception du bloc d’introduction introduit le contenu d’une page d’accueil. Cette variation peur contenir une image." @@ -102,7 +100,6 @@ "en": "https://design.canada.ca/common-design-patterns/intro-block.html", "fr": "https://conception.canada.ca/configurations-conception-communes/block-introduction.html" }, - "iteration": "_:iteration_intro_image_1", "example": [ { "en": { "href": "gc-intro-image-en.html", "text": "Introduction block with image" }, @@ -135,12 +132,12 @@ "instructions": { "en": [ "The introduction block pattern is a mandatory element for institutional landing pages and topic pages. It’s optional for other landing pages.", - "The introduction block with image contains the following elements:
  • title (mandatory)
  • short description (mandatory)
  • supertask button (optional)
", + "According to the Canada.ca design system guidance, the introduction block with image contains the following elements:
  • title (mandatory)
  • short description (mandatory)
  • supertask button (optional)
", "Refer to the code sample below." ], "fr": [ "La configuration de conception du bloc d’introduction est un élément obligatoire pour les pages d’accueil institutionnelles et les pages de sujet. Elle est facultative pour les autres pages d’accueil.", - "Le bloc d'introduction avec image contient les éléments suivants :
  • titre (obligatoire)
  • description courte (obligatoire)
  • bouton de super-tâche (facultatif)
", + "Selon les directives du système de conception Canada.ca, le bloc d'introduction avec image contient les éléments suivants :
  • titre (obligatoire)
  • description courte (obligatoire)
  • bouton de super-tâche (facultatif)
", "Référez-vous au code qui suit." ] }, @@ -149,14 +146,14 @@ { "@type": "source-code", "description": "Code sample:", - "code": "

Introduction block

\n

The introduction block pattern introduces the content of a landing page.

\n

Super task button

" + "code": "

Introduction block

\n

The introduction block pattern introduces the content of a landing page.

\n

Super task button

" } ], "fr": [ { "@type": "source-code", "description": "Exemple de code :", - "code": "

Bloc d'introduction

\n

La configuration de conception du bloc d’introduction introduit le contenu d’une page d’accueil.

\n

Bouton de super-tâche

" + "code": "

Bloc d'introduction

\n

La configuration de conception du bloc d’introduction introduit le contenu d’une page d’accueil.

\n

Bouton de super-tâche

" } ] } @@ -175,95 +172,50 @@ "instructions": { "en": [ "The introduction block pattern is a mandatory element for institutional landing pages and topic pages. It’s optional for other landing pages.", - "The introduction block with image contains the following elements:
  • title (mandatory)
  • short description (mandatory)
  • image (mandatory)
  • supertask button (optional)
", + "According to the Canada.ca design system guidance, the introduction block with image contains the following elements:
  • title (mandatory)
  • short description (mandatory)
  • image (mandatory)
  • supertask button (optional)
", "Refer to the code sample below." ], "fr": [ "La configuration de conception du bloc d’introduction est un élément obligatoire pour les pages d’accueil institutionnelles et les pages de sujet. Elle est facultative pour les autres pages d’accueil.", - "Le bloc d'introduction avec image contient les éléments suivants :
  • titre (obligatoire)
  • description courte (obligatoire)
  • image (obligatoire)
  • bouton de super-tâche (facultatif)
", + "Selon les directives du système de conception Canada.ca, le bloc d'introduction avec image contient les éléments suivants :
  • titre (obligatoire)
  • description courte (obligatoire)
  • image (obligatoire)
  • bouton de super-tâche (facultatif)
", "Référez-vous au code qui suit." ] }, + "techConsiderations": { + "en": [ + "It is the responsibility of the author to make sure the whole text has a minimum contrast ratio of 4:1 with the background image on every breakpoint and with a zoom of up to 400%.", + "The background image size recommended is 1200px by 726px. For more information on the background image, please consult the official guidelines." + ], + "fr": [ + "Il est de la responsabilité de l'auteur de s'assurer que l'ensemble du texte présente un rapport de contraste minimum de 4:1 avec l'image d'arrière-plan sur chaque point d'arrêt et avec un zoom allant jusqu'à 400 %.", + "La taille de l’image d’arrière-plan recommandée est de 1200px par 726px. Pour plus d'information sur l'image d'arrière-plan, veuillez consulter les directives officielles." + ] + }, + "notes": { + "en": [ + "The introduction block pattern with image must be located outside of the default page container (or any element with the class .container)." + ], + "fr": [ + "La configuration de conception du bloc d’introduction avec image doit être située en dehors du conteneur de page par défaut (ou de tout élément avec la classe .container)." + ] + }, "sample": { "en": [ { "@type": "source-code", "description": "Code sample:", - "code": "
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t

[Institution name]

\n\t\t\t\t

Short description of the institution’s mandate.

\n\t\t\t\t

Super task button

\n\t\t\t
\n\t\t
\n\t
\n
" + "code": "
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t

[Institution name]

\n\t\t\t\t

Short description of the institution’s mandate.

\n\t\t\t\t

Super task button

\n\t\t\t
\n\t\t
\n\t
\n
" } ], "fr": [ { "@type": "source-code", "description": "Exemple de code :", - "code": "
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t

[Nom de l’institution]

\n\t\t\t\t

Description courte du mandat de d’institution.

\n\t\t\t\t

Bouton de super-tâche

\n\t\t\t
\n\t\t
\n\t
\n
" + "code": "
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t

[Nom de l’institution]

\n\t\t\t\t

Description courte du mandat de d’institution.

\n\t\t\t\t

Bouton de super-tâche

\n\t\t\t
\n\t\t
\n\t
\n
" } ] } } - ], - "iteration": [ - { - "@id": "_:iteration_intro_1", - "name": "Introduction block - Iteration 1", - "date": "2024-03", - "detectableBy": "h1#wb-cont+p", - "assets": [ - { - "@type": "source-code", - "@language": "en", - "description": "Code sample", - "code": "

Introduction block

\n

The introduction block pattern introduces the content of a landing page.

\n

Super task button

" - } - ] - }, - { - "@id": "_:iteration_intro_image_1", - "name": "Introduction block with image - Iteration 1", - "date": "2024-03", - "detectableBy": ".bg-cover h1#wb-cont + p", - "assets": [ - { - "@type": "source-code", - "@language": "en", - "description": "Code sample", - "code": "
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t

[Institution name]

\n\t\t\t\t

Short description of the institution’s mandate.

\n\t\t\t\t

Super task button [optional]

\n\t\t\t
\n\t\t
\n\t
\n
" - } - ] - } - ], - "changesets": [ - { - "@id": "_:cs_intro", - "name": "Introduction block", - "status": "stable", - "baseOnIteration": "_:iteration_intro_1", - "detectableBy": "h1#wb-cont + p", - "semantic": "h1 + p", - "schema": [ - "Page title", - "Page description", - "Page supertask (optional)" - ], - "context": "The introduction block pattern is a mandatory element for institutional landing pages and topic pages. It’s optional for other landing pages." - }, - { - "@id": "_:cs_intro_image", - "name": "Introduction block with image", - "status": "stable", - "baseOnIteration": "_:iteration_intro_image_1", - "detectableBy": ".bg-cover h1#wb-cont + p", - "semantic": "h1 + p", - "layout": "Title, short description, and supertask button on the left. Image in the background.", - "schema": [ - "Page title", - "Page description", - "Image URL", - "Page supertask (optional)" - ], - "context": "The introduction block pattern is a mandatory element for institutional landing pages and topic pages. It’s optional for other landing pages.", - "accessibility": "It is the responsibility of the author to make sure the whole text has a minimum contrast ratio of 4:1 on every breakpoint and with a zoom of up to 400% on desktop." - } ] } ] diff --git a/_includes/design-patterns/gc-intro/gc-intro-image.html b/_includes/design-patterns/gc-intro/gc-intro-image.html index 772d249ed9..2fddb5f8e6 100644 --- a/_includes/design-patterns/gc-intro/gc-intro-image.html +++ b/_includes/design-patterns/gc-intro/gc-intro-image.html @@ -1,8 +1,8 @@ -
+
-
+
-

{{ page.title }}

+

{{ page.title }}

{% if page.language == "en" %}The introduction block pattern introduces the content of a landing page.{% else %}La configuration de conception du bloc d'introduction introduit le contenu d'une page de destination.{% endif %}

{% if page.language == "en" %}Supertask button{% else %}Bouton de super-tâche{% endif %}

diff --git a/_includes/design-patterns/gc-intro/gc-intro.html b/_includes/design-patterns/gc-intro/gc-intro.html index 9f754c4995..40434a06ea 100644 --- a/_includes/design-patterns/gc-intro/gc-intro.html +++ b/_includes/design-patterns/gc-intro/gc-intro.html @@ -1,3 +1,3 @@ -

{{ page.title }}

+

{{ page.title }}

{% if page.language == "en" %}The introduction block pattern introduces the content of a landing page.{% else %}La configuration de conception du bloc d'introduction introduit le contenu d'une page de destination.{% endif %}

{% if page.language == "en" %}Supertask button{% else %}Bouton de super-tâche{% endif %}

diff --git a/design-patterns/gc-intro/gc-intro-doc-en.html b/design-patterns/gc-intro/gc-intro-doc-en.html index 9ec143fbf8..e857f19897 100644 --- a/design-patterns/gc-intro/gc-intro-doc-en.html +++ b/design-patterns/gc-intro/gc-intro-doc-en.html @@ -2,8 +2,8 @@ title: Introduction block description: Documentation for the introduction block design pattern. language: en -altLangPage: gc-intro-fr.html +altLangPage: gc-intro-doc-fr.html dateModified: 2024-03-14 -layout: documentation +layout: documentation_pattern index_json: index.json-ld --- diff --git a/design-patterns/gc-intro/gc-intro-doc-fr.html b/design-patterns/gc-intro/gc-intro-doc-fr.html index fa42c868be..0af014ea83 100644 --- a/design-patterns/gc-intro/gc-intro-doc-fr.html +++ b/design-patterns/gc-intro/gc-intro-doc-fr.html @@ -2,8 +2,8 @@ title: Bloc d’introduction description: Documentation de la configuration de conception du bloc d’introduction. language: fr -altLangPage: gc-intro-en.html +altLangPage: gc-intro-doc-en.html dateModified: 2024-03-14 -layout: documentation +layout: documentation_pattern index_json: index.json-ld --- diff --git a/design-patterns/gc-intro/index.json-ld b/design-patterns/gc-intro/index.json-ld index 4518b54c1d..661eeba6ac 100644 --- a/design-patterns/gc-intro/index.json-ld +++ b/design-patterns/gc-intro/index.json-ld @@ -16,8 +16,6 @@ }, "modified": "2023-08-16", "componentName": "gc-intro", - "status": "stable", - "version": "1.0", "pages": { "docs": [ { @@ -54,7 +52,9 @@ } ] }, - "dependencies": "No dependency.", + "dependencies": [ + "bgimg" + ], "a11yGuidance": "No accessibility guidance.", "variations": [ { @@ -62,7 +62,6 @@ "en": "Introduction block - default", "fr": "Bloc d'introduction - par défaut" }, - "status": "stable", "description": { "en": "The introduction block pattern introduces the content of a landing page.", "fr": "La configuration de conception du bloc d’introduction introduit le contenu d’une page d’accueil." @@ -93,7 +92,6 @@ "en": "Introduction block with image", "fr": "Bloc d'introduction avec image" }, - "status": "stable", "description": { "en": "The introduction block pattern introduces the content of a landing page. This variation can contain an image and a super task button.", "fr": "La configuration de conception du bloc d’introduction introduit le contenu d’une page d’accueil. Cette variation peur contenir une image." @@ -102,7 +100,6 @@ "en": "https://design.canada.ca/common-design-patterns/intro-block.html", "fr": "https://conception.canada.ca/configurations-conception-communes/block-introduction.html" }, - "iteration": "_:iteration_intro_image_1", "example": [ { "en": { "href": "gc-intro-image-en.html", "text": "Introduction block with image" }, @@ -135,12 +132,12 @@ "instructions": { "en": [ "The introduction block pattern is a mandatory element for institutional landing pages and topic pages. It’s optional for other landing pages.", - "The introduction block with image contains the following elements:
  • title (mandatory)
  • short description (mandatory)
  • supertask button (optional)
", + "According to the Canada.ca design system guidance, the introduction block with image contains the following elements:
  • title (mandatory)
  • short description (mandatory)
  • supertask button (optional)
", "Refer to the code sample below." ], "fr": [ "La configuration de conception du bloc d’introduction est un élément obligatoire pour les pages d’accueil institutionnelles et les pages de sujet. Elle est facultative pour les autres pages d’accueil.", - "Le bloc d'introduction avec image contient les éléments suivants :
  • titre (obligatoire)
  • description courte (obligatoire)
  • bouton de super-tâche (facultatif)
", + "Selon les directives du système de conception Canada.ca, le bloc d'introduction avec image contient les éléments suivants :
  • titre (obligatoire)
  • description courte (obligatoire)
  • bouton de super-tâche (facultatif)
", "Référez-vous au code qui suit." ] }, @@ -149,14 +146,14 @@ { "@type": "source-code", "description": "Code sample:", - "code": "

Introduction block

\n

The introduction block pattern introduces the content of a landing page.

\n

Super task button

" + "code": "

Introduction block

\n

The introduction block pattern introduces the content of a landing page.

\n

Super task button

" } ], "fr": [ { "@type": "source-code", "description": "Exemple de code :", - "code": "

Bloc d'introduction

\n

La configuration de conception du bloc d’introduction introduit le contenu d’une page d’accueil.

\n

Bouton de super-tâche

" + "code": "

Bloc d'introduction

\n

La configuration de conception du bloc d’introduction introduit le contenu d’une page d’accueil.

\n

Bouton de super-tâche

" } ] } @@ -175,94 +172,49 @@ "instructions": { "en": [ "The introduction block pattern is a mandatory element for institutional landing pages and topic pages. It’s optional for other landing pages.", - "The introduction block with image contains the following elements:
  • title (mandatory)
  • short description (mandatory)
  • image (mandatory)
  • supertask button (optional)
", + "According to the Canada.ca design system guidance, the introduction block with image contains the following elements:
  • title (mandatory)
  • short description (mandatory)
  • image (mandatory)
  • supertask button (optional)
", "Refer to the code sample below." ], "fr": [ "La configuration de conception du bloc d’introduction est un élément obligatoire pour les pages d’accueil institutionnelles et les pages de sujet. Elle est facultative pour les autres pages d’accueil.", - "Le bloc d'introduction avec image contient les éléments suivants :
  • titre (obligatoire)
  • description courte (obligatoire)
  • image (obligatoire)
  • bouton de super-tâche (facultatif)
", + "Selon les directives du système de conception Canada.ca, le bloc d'introduction avec image contient les éléments suivants :
  • titre (obligatoire)
  • description courte (obligatoire)
  • image (obligatoire)
  • bouton de super-tâche (facultatif)
", "Référez-vous au code qui suit." ] }, + "techConsiderations": { + "en": [ + "It is the responsibility of the author to make sure the whole text has a minimum contrast ratio of 4:1 with the background image on every breakpoint and with a zoom of up to 400%.", + "The background image size recommended is 1200px by 726px. For more information on the background image, please consult the official guidelines." + ], + "fr": [ + "Il est de la responsabilité de l'auteur de s'assurer que l'ensemble du texte présente un rapport de contraste minimum de 4:1 avec l'image d'arrière-plan sur chaque point d'arrêt et avec un zoom allant jusqu'à 400 %.", + "La taille de l’image d’arrière-plan recommandée est de 1200px par 726px. Pour plus d'information sur l'image d'arrière-plan, veuillez consulter les directives officielles." + ] + }, + "notes": { + "en": [ + "The introduction block pattern with image must be located outside of the default page container (or any element with the class .container)." + ], + "fr": [ + "La configuration de conception du bloc d’introduction avec image doit être située en dehors du conteneur de page par défaut (ou de tout élément avec la classe .container)." + ] + }, "sample": { "en": [ { "@type": "source-code", "description": "Code sample:", - "code": "
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t

[Institution name]

\n\t\t\t\t

Short description of the institution’s mandate.

\n\t\t\t\t

Super task button

\n\t\t\t
\n\t\t
\n\t
\n
" + "code": "
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t

[Institution name]

\n\t\t\t\t

Short description of the institution’s mandate.

\n\t\t\t\t

Super task button

\n\t\t\t
\n\t\t
\n\t
\n
" } ], "fr": [ { "@type": "source-code", "description": "Exemple de code :", - "code": "
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t

[Nom de l’institution]

\n\t\t\t\t

Description courte du mandat de d’institution.

\n\t\t\t\t

Bouton de super-tâche

\n\t\t\t
\n\t\t
\n\t
\n
" + "code": "
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t

[Nom de l’institution]

\n\t\t\t\t

Description courte du mandat de d’institution.

\n\t\t\t\t

Bouton de super-tâche

\n\t\t\t
\n\t\t
\n\t
\n
" } ] } } - ], - "iteration": [ - { - "@id": "_:iteration_intro_1", - "name": "Introduction block - Iteration 1", - "date": "2024-03", - "detectableBy": "h1#wb-cont+p", - "assets": [ - { - "@type": "source-code", - "@language": "en", - "description": "Code sample", - "code": "

Introduction block

\n

The introduction block pattern introduces the content of a landing page.

\n

Super task button

" - } - ] - }, - { - "@id": "_:iteration_intro_image_1", - "name": "Introduction block with image - Iteration 1", - "date": "2024-03", - "detectableBy": ".bg-cover h1#wb-cont + p", - "assets": [ - { - "@type": "source-code", - "@language": "en", - "description": "Code sample", - "code": "
\n\t
\n\t\t
\n\t\t\t
\n\t\t\t\t

[Institution name]

\n\t\t\t\t

Short description of the institution’s mandate.

\n\t\t\t\t

Super task button [optional]

\n\t\t\t
\n\t\t
\n\t
\n
" - } - ] - } - ], - "changesets": [ - { - "@id": "_:cs_intro", - "name": "Introduction block", - "status": "stable", - "baseOnIteration": "_:iteration_intro_1", - "detectableBy": "h1#wb-cont + p", - "semantic": "h1 + p", - "schema": [ - "Page title", - "Page description", - "Page supertask (optional)" - ], - "context": "The introduction block pattern is a mandatory element for institutional landing pages and topic pages. It’s optional for other landing pages." - }, - { - "@id": "_:cs_intro_image", - "name": "Introduction block with image", - "status": "stable", - "baseOnIteration": "_:iteration_intro_image_1", - "detectableBy": ".bg-cover h1#wb-cont + p", - "semantic": "h1 + p", - "layout": "Title, short description, and supertask button on the left. Image in the background.", - "schema": [ - "Page title", - "Page description", - "Image URL", - "Page supertask (optional)" - ], - "context": "The introduction block pattern is a mandatory element for institutional landing pages and topic pages. It’s optional for other landing pages.", - "accessibility": "It is the responsibility of the author to make sure the whole text has a minimum contrast ratio of 4:1 on every breakpoint and with a zoom of up to 400% on desktop." - } ] } diff --git a/design-patterns/gc-intro/samples/gc-intro-image.html b/design-patterns/gc-intro/samples/gc-intro-image.html index 772d249ed9..2fddb5f8e6 100644 --- a/design-patterns/gc-intro/samples/gc-intro-image.html +++ b/design-patterns/gc-intro/samples/gc-intro-image.html @@ -1,8 +1,8 @@ -
+
-
+
-

{{ page.title }}

+

{{ page.title }}

{% if page.language == "en" %}The introduction block pattern introduces the content of a landing page.{% else %}La configuration de conception du bloc d'introduction introduit le contenu d'une page de destination.{% endif %}

{% if page.language == "en" %}Supertask button{% else %}Bouton de super-tâche{% endif %}

diff --git a/design-patterns/gc-intro/samples/gc-intro.html b/design-patterns/gc-intro/samples/gc-intro.html index 9f754c4995..40434a06ea 100644 --- a/design-patterns/gc-intro/samples/gc-intro.html +++ b/design-patterns/gc-intro/samples/gc-intro.html @@ -1,3 +1,3 @@ -

{{ page.title }}

+

{{ page.title }}

{% if page.language == "en" %}The introduction block pattern introduces the content of a landing page.{% else %}La configuration de conception du bloc d'introduction introduit le contenu d'une page de destination.{% endif %}

{% if page.language == "en" %}Supertask button{% else %}Bouton de super-tâche{% endif %}

diff --git a/sites/layouts/documentation_pattern.html b/sites/layouts/documentation_pattern.html new file mode 100644 index 0000000000..ce6060b1fd --- /dev/null +++ b/sites/layouts/documentation_pattern.html @@ -0,0 +1,652 @@ +--- +layout: default +--- +{%- include variable-core.liquid -%} +{%- assign lng = page.language -%} +{%- if page.description -%} +

{{ page.description }}

+{%- endif -%} + +{{ content }} + +

({% if lng == "fr" %}Consultez cette documentation en format JSON{% else %}Consult this documentation in a data format noted in JSON{% endif %})

+ +
+ +{%- if page.short_rationale_ajax_url -%} +
+{%- endif -%} + + +
+ + +
+ + +

{% if lng == "fr" %}Sur cette page{% else %}On this page{% endif %}

+ + + +

{% if lng == "fr" %}Composants inclus{% else %}Included components{% endif %}

+ +
+ + + +
+ + +{%- if page.before_start_ajax_url -%} +

{% if lng == "fr" %}Avant de commencer{% else %}Before you start{% endif %}

+
+{%- endif -%} + + +

{% if lng == "fr" %}Conseils en matière d'accessibilité{% else %}Accessibility guidance{% endif %}

+ +{%- if lng == "fr" -%} +

Liste des directives d'accessibilité à suivre pour garantir que le composant est utilisé dans le respect de la directive d'accessibilité et de la norme EN 301 549 (y compris WCAG 2.1 niveau AA).

+{%- else -%} +

List of accessibility guidances to be followed to ensure component is used in respect of the accessibility guideline and EN 301 549 standard (including WCAG 2.1 Level AA).

+{%- endif -%} + +
+ + + +
+ + + +

{% if lng == "fr" %}Variantes{% else %}Variations{% endif %}

+ +{%- if lng == "fr" -%} +

Voici quelques exemples populaires. Il ne s’agit pas d’une liste exhaustive des variantes possibles. Configurez votre page en fonction du type de page, des besoins des utilisateurs et des conseils du système de conception.

+{%- else -%} +

Here are some popular examples. This isn’t an exhaustive list of possible variations. Configure your page based on page type, user needs and design system guidance.

+{%- endif -%} + +
+ + +
+ +

{% if lng == "fr" %}Évaluation et rapport{% else %}Evaluation and report{% endif %}

+ + +
+ + + +
+ + + +
+ + + +