Skip to content

Commit

Permalink
Minor - Main page title: adding stacked header variant (#2412)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Garneauma
Garneauma authored Aug 27, 2024
1 parent fb61643 commit d5d73d7
Show file tree
Hide file tree
Showing 10 changed files with 487 additions and 61 deletions.
6 changes: 4 additions & 2 deletions _data/design-patterns.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,10 +178,12 @@
},
"dependencies": {
"en": [
{ "title": "Background image", "url": "https://wet-boew.github.io/wet-boew/docs/ref/bgimg/bgimg-en.html", "component": "bgimg" }
{ "title": "Background image", "url": "https://wet-boew.github.io/wet-boew/docs/ref/bgimg/bgimg-en.html", "component": "bgimg" },
{ "title": "Main page title", "url": "https://wet-boew.github.io/GCWeb/sites/main-page-title/main-page-title-en.html", "component": "main-page-title" }
],
"fr": [
{ "title": "Image d'arrière plan", "url": "https://wet-boew.github.io/wet-boew/docs/ref/bgimg/bgimg-fr.html", "component": "bgimg" }
{ "title": "Image d'arrière plan", "url": "https://wet-boew.github.io/wet-boew/docs/ref/bgimg/bgimg-fr.html", "component": "bgimg" },
{ "title": "Titre principal", "url": "https://wet-boew.github.io/GCWeb/sites/main-page-title/main-page-title-fr.html", "component": "main-page-title" }
]
},
"a11yGuidance": "No accessibility guidance.",
Expand Down
234 changes: 207 additions & 27 deletions _data/sites.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2195,6 +2195,28 @@
"language": "fr",
"path": "main-page-title-fr.html"
}
],
"examples": [
{
"title": "Content page with default main page title",
"language": "en",
"path": "../../templates/content-page/content-en.html"
},
{
"title": "Page de contenu avec titre principal par défaut",
"language": "fr",
"path": "../../templates/content-page/content-fr.html"
},
{
"title": "Stacked main page title",
"language": "en",
"path": "main-page-title-stacked-en.html"
},
{
"title": "Titre principal superposé",
"language": "fr",
"path": "main-page-title-stacked-fr.html"
}
]
},
"a11yGuidance": "This component respects all WCAG 2.1 guidelines.",
Expand All @@ -2216,19 +2238,52 @@
"iteration": "_:iteration_mpt_2",
"example": [
{
"en": { "href": "../../content-page/content-en.html", "text": "Content page (main page title)" },
"fr": { "href": "../../content-page/content-fr.html", "text": "Page de contenu (titre principal)" }
"en": { "href": "../../templates/content-page/content-en.html", "text": "Content page (main page title)" },
"fr": { "href": "../../templates/content-page/content-fr.html", "text": "Page de contenu (titre principal)" }
}
],
"implementation": [
"_:implement_mpt"
"_:implement_mpt",
"_:implement_mpt_gcweb"
],
"history": [
{
"en": "2024-01 - Visual update",
"fr": "2024-01 - Mise à jour visuelle"
}
]
},
{
"name": {
"en": "Stacked main page title",
"fr": "Titre principal superposé"
},
"status": "stable",
"description": {
"en": "Use the stacked main page title to display the page's section title as well as the page title.",
"fr": "Utilisez le titre de la page principale superposé pour afficher le titre de la section de la page ainsi que le titre de la page."
},
"guidance": {
"en": "https://design.canada.ca/styles/typography.html",
"fr": "https://conception.canada.ca/styles/typographie.html"
},
"iteration": "_:iteration_smpt_1",
"example": [
{
"en": { "href": "main-page-title-stacked-en.html", "text": "Stacked main page title" },
"fr": { "href": "main-page-title-stacked-fr.html", "text": "Titre principal superposé" }
}
],
"implementation": [
"_:implement_smpt",
"_:implement_smpt_gcweb"
],
"history": [
{
"en": "2024-08 - Initial implementation of the variant.",
"fr": "2024-01 - Implémentation initiale de la variation."
}
]
}
],
"implementation": [
Expand All @@ -2240,8 +2295,16 @@
"fr": "Standard"
},
"introduction": {
"en": "The purpose of the main page title component is to provide a default style for the first H1 in the main element with a short bold red rule for use in Canada.ca websites. It is used to indicate the main heading of a page.",
"fr": "Le but du composant du titre principal de la page est de fournir un style par défaut pour le premier H1 de l'élément main avec une ligne rouge épaisse et courte pour utilisation sur les sites web de Canada.ca. Il est utilisé pour indiquer le titre principal d'une page"
"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": [
"Refer to the following code sample."
],
"fr": [
"Référez-vous au code qui suit."
]
},
"notes": {
"en": [
Expand All @@ -2267,29 +2330,124 @@
}
]
}
},
{
"@id": "_:implement_mpt_gcweb",
"iteration": "_:iteration_mpt_2",
"name": {
"en": "GCWeb Jekyll",
"fr": "GCWeb Jekyll"
},
"introduction": {
"en": "This implementation is meant for developers trying to implement this component within a GCWeb Jekyll site.",
"fr": "Cette implémentation est destinée aux développeurs essayant d'implémenter ce composant dans un site GCWeb Jekyll."
},
"instructions": {
"en": [
"In the page's front-matter set the variable <code>title</code> to the main title of the page."
],
"fr": [
"Dans l'en-tête de la page définissez la variable <code>title</code> au titre principal de la page."
]
},
"sample": {
"en": [
{
"@type": "source-code",
"description": "Code sample:",
"code": "---\n{\n\t...\n\t\"title\": \"My page title\"\n\t...\n}\n---"
}
],
"fr": [
{
"@type": "source-code",
"description": "Exemple de code :",
"code": "---\n{\n\t...\n\t\"title\": \"Titre de la page\"\n\t...\n}\n---"
}
]
}
},
{
"@id": "_:implement_smpt",
"iteration": "_:iteration_smpt_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": [
"Refer to the following code sample."
],
"fr": [
"Référez-vous au code qui suit."
]
},
"sample": {
"en": [
{
"@type": "source-code",
"description": "HTML sample",
"code": "<hgroup id=\"wb-cont\">\n\t<p>GCWeb technical documentation</p>\n\t<h1>Stacked main page title</h1>\n</hgroup>"
}
],
"fr": [
{
"@type": "source-code",
"description": "Exemple HTML",
"code": "<hgroup id=\"wb-cont\">\n\t<p>Documentation technique GCWeb</p>\n\t<h1>Titre principal superposé</h1>\n</hgroup>"
}
]
}
},
{
"@id": "_:implement_smpt_gcweb",
"iteration": "_:iteration_smpt_1",
"name": {
"en": "GCWeb Jekyll",
"fr": "GCWeb Jekyll"
},
"introduction": {
"en": "This implementation is meant for developers trying to implement this component within a GCWeb Jekyll site.",
"fr": "Cette implémentation est destinée aux développeurs essayant d'implémenter ce composant dans un site GCWeb Jekyll."
},
"instructions": {
"en": [
"In the page's front-matter do the following:<ul><li>set the variable <code>title</code> to the main title of the page.</li><li>set the variable <code>sectionTitle</code> to the title of the section where this page resides.</li></ul>"
],
"fr": [
"Dans l'en-tête de la page faites ce qui suit&nbsp;:<ul><li>définissez la variable <code>title</code> au titre principal de la page.</li><li>définissez la variable <code>sectionTitle</code> au titre de la section où réside cette page.</li></ul>"
]
},
"sample": {
"en": [
{
"@type": "source-code",
"description": "Code sample:",
"code": "---\n{\n\t...\n\t\"title\": \"My page title\", \n\t\"sectionTitle\": \"My section title\"\n\t...\n}\n---"
}
],
"fr": [
{
"@type": "source-code",
"description": "Exemple de code :",
"code": "---\n{\n\t...\n\t\"title\": \"Titre de la page\", \n\t\"sectionTitle\": \"Titre de la section\"\n\t...\n}\n---"
}
]
}
}
],
"changeset": [
"changesets": [
{
"@id": "_:cs_mpt",
"name": {
"en": "Default h1",
"fr": "H1 par default"
},
"name": "Default h1",
"baseOnIteration": "_:iteration_mpt_2",
"detectableBy": "Visual inspection can be used to detect the size of the line. The width of the line should be 71px (3.55em) long and the thickness should be 3.6px (0.18em), with the color #af3c43.",
"layout": "The line is positioned below the text.",
"semantic": {
"@type": "h1",
"description": "Level 1 heading",
"code": {
"@type": [
"@id",
"rdf:HTML"
],
"@value": "includes/main-page-title.html"
}
},
"semantic": "h1",
"static": "none",
"schema": "dct:title",
"include": {
Expand All @@ -2302,14 +2460,30 @@
}
},
"style": "The line has a width of 3.55em (71px) and a thickness of 0.18em (3.6px) with the color #af3c43. Optionally, include a byline, tagline, or subtitle.",
"logic": "none",
"behaviour": "none",
"perceptible": "The thin hairline has been replaced with a shorter and thicker line.",
"guidance": "https://design.canada.ca/styles/typography.html",
"context": "First semantic element inside the main",
"configuration": "none",
"dependency": "none",
"file": "none"
"context": "First semantic element inside the main"
},
{
"@id": "_:cs_smpt",
"name": "Stacked main page title",
"baseOnIteration": "_:iteration_smpt_1",
"detectableBy": "hgroup > h1#wb-cont",
"layout": "The section page title is above the page title. The line is positioned below the page title.",
"semantic": "hgroup > p + h1",
"schema": "dct:title, sectionTitle",
"include": {
"@type": "source-code",
"collapsed": true,
"description": "Include with logic in Liquid.",
"code": {
"@type": [ "@id", "rdf:HTML" ],
"@value": "includes/main-page-title.html"
}
},
"style": "The line has a width of 3.55em (71px) and a thickness of 0.18em (3.6px) with the color #af3c43. Optionally, include a byline, tagline, or subtitle. The section page title has a font-size of 26px and has a color of #555.",
"guidance": "https://design.canada.ca/styles/typography.html",
"context": "First semantic element inside the main"
}
],
"iteration": [
Expand All @@ -2329,6 +2503,12 @@
"Style: Width of the line should 70px and the thickness .18em #af3c43. Followed by optional byline, tagline or subtitle"
],
"predecessor": "_:iteration_mpt_1"
},
{
"@id": "_:iteration_smpt_1",
"name": "Stacked main page title - Iteration 1",
"date": "2024-08",
"detectableBy": "hgroup > h1#wb-cont"
}
]
}
Expand Down
6 changes: 4 additions & 2 deletions design-patterns/gc-intro/index.json-ld
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,10 +64,12 @@
},
"dependencies": {
"en": [
{ "title": "Background image", "url": "https://wet-boew.github.io/wet-boew/docs/ref/bgimg/bgimg-en.html", "component": "bgimg" }
{ "title": "Background image", "url": "https://wet-boew.github.io/wet-boew/docs/ref/bgimg/bgimg-en.html", "component": "bgimg" },
{ "title": "Main page title", "url": "https://wet-boew.github.io/GCWeb/sites/main-page-title/main-page-title-en.html", "component": "main-page-title" }
],
"fr": [
{ "title": "Image d'arrière plan", "url": "https://wet-boew.github.io/wet-boew/docs/ref/bgimg/bgimg-fr.html", "component": "bgimg" }
{ "title": "Image d'arrière plan", "url": "https://wet-boew.github.io/wet-boew/docs/ref/bgimg/bgimg-fr.html", "component": "bgimg" },
{ "title": "Titre principal", "url": "https://wet-boew.github.io/GCWeb/sites/main-page-title/main-page-title-fr.html", "component": "main-page-title" }
]
},
"a11yGuidance": "No accessibility guidance.",
Expand Down
2 changes: 1 addition & 1 deletion sites/layouts/default.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
<main class="container" property="mainContentOfPage" resource="#wb-main" typeof="WebPageElement">
{%- endif -%}

<h1 id="wb-cont" property="name">{{ page-title }}</h1>
{% include main-page-title/main-page-title.html %}
{{ content }}
{% include page-details/footer.html %}
</main>
Expand Down
2 changes: 1 addition & 1 deletion sites/layouts/fluid.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
{%- endcapture -%}
<main property="mainContentOfPage" resource="#wb-main" typeof="WebPageElement">
<div class="container-fluid">
<h1 id="wb-cont" property="name">{{ page-title }}</h1>
{% include main-page-title/main-page-title.html %}
{{ content }}
</div>
{% include page-details/footer.html addContainer=true %}
Expand Down
17 changes: 16 additions & 1 deletion sites/main-page-title/_base.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,22 @@
/* H1 short bold red underline */

h1#wb-cont {
h1#wb-cont, hgroup#wb-cont h1 {
border-bottom: $main-page-title-rule-thickness solid $main-page-title-rule-color;
border-image: linear-gradient(to right, $main-page-title-rule-color $main-page-title-rule-width, transparent $main-page-title-rule-width);
border-image-slice: 1;
}

hgroup#wb-cont {
margin-top: 1em;

p {
color: #555;
font-size: 26px;
font-weight: 500;
margin-bottom: .17em;
}

h1 {
margin-top: 0;
}
}
7 changes: 7 additions & 0 deletions sites/main-page-title/includes/main-page-title.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1,8 @@
{%- if page.sectionTitle -%}
<hgroup id="wb-cont">
<p>{{ page.sectionTitle }}</p>
<h1 property="name">{{ page.title }}</h1>
</hgroup>
{%- else -%}
<h1 property="name" id="wb-cont">{{ page.title }}</h1>
{%- endif -%}
Loading

0 comments on commit d5d73d7

Please sign in to comment.