diff --git a/_data/components.json b/_data/components.json
index f9d35a58d..4408f1d7c 100644
--- a/_data/components.json
+++ b/_data/components.json
@@ -377,6 +377,354 @@
]
}
}
+,{
+ "@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": "Feeds plugin GC override",
+ "fr": "Application de styles GC au plugiciel de fils de syndication"
+ },
+ "description": {
+ "en": "Overrides the WET ATOM feeds to apply GC design pattern.",
+ "fr": "Remplace les Fils de syndication pour appliquer le modèle de conception GC."
+ },
+ "modified": "2021-06-02",
+ "componentName": "gc-feeds",
+ "status": "provisional",
+ "pages": {
+ "docs": [
+ {
+ "title": "Feeds GC overrides - Documentation and working example.",
+ "language": "en",
+ "path": "gc-feeds-en.html"
+ },
+ {
+ "title": "Fils de syndication remplacement GC - Documentation et exemple pratique",
+ "language": "fr",
+ "path": "gc-feeds-fr.html"
+ }
+ ]
+ }
+}
+,{
+ "@context": {
+ "@version": 2.0,
+ "dct": "http://purl.org/dc/terms/",
+ "title": { "@id": "dct:title", "@container": "@language" },
+ "description": { "@id": "dct:description", "@container": "@language" },
+ "modified": "dct:modified"
+ },
+ "title": {
+ "en": "Social media channels",
+ "fr": "Bloc des réseaux de médias sociaux"
+ },
+ "description": {
+ "en": "The social media channels pattern provides links to official Government of Canada (GC) social media accounts.",
+ "fr": "La configuration de conception des chaînes de médias sociaux fournit des liens vers les comptes de médias sociaux officiels du gouvernement du Canada (GC)."
+ },
+ "modified": "2024-02-05",
+ "componentName": "gc-follow-us",
+ "status": "stable",
+ "version": "2.0",
+ "pages": {
+ "docs": [
+ {
+ "title": "Social media channels - Documentation",
+ "language": "en",
+ "path": "gc-follow-us-doc-en.html"
+ },
+ {
+ "title": "Bloc des réseaux de médias sociaux - Documentation",
+ "language": "fr",
+ "path": "gc-follow-us-doc-fr.html"
+ }
+ ],
+ "examples": [
+ {
+ "title": "Social media channels",
+ "language": "en",
+ "path": "gc-follow-us-en.html"
+ },
+ {
+ "title": "Bloc des réseaux de médias sociaux",
+ "language": "fr",
+ "path": "gc-follow-us-fr.html"
+ }
+ ]
+ },
+ "a11yGuidance": "no accessibility guidance",
+ "dependencies": "no dependency",
+ "variations": [
+ {
+ "name": {
+ "en": "GC Follow us - default",
+ "fr": "GC Suivez-nous - par défaut"
+ },
+ "status": "stable",
+ "description": {
+ "en": "The social media channels pattern provides links to official Government of Canada (GC) social media accounts.",
+ "fr": "La configuration de conception des chaînes de médias sociaux fournit des liens vers les comptes de médias sociaux officiels du gouvernement du Canada (GC)."
+ },
+ "guidance": {
+ "en": "https://design.canada.ca/common-design-patterns/social-media-channels.html",
+ "fr": "https://conception.canada.ca/configurations-conception-communes/bloc-medias-sociaux.html"
+ },
+ "iteration": "_:iteration_gc_follow_1",
+ "example": [
+ {
+ "en": { "href": "gc-follow-us-en.html", "text": "GC Follow us" },
+ "fr": { "href": "gc-follow-us-fr.html", "text": "GC Suivez-nous" }
+ }
+ ],
+ "implementation": [
+ "_:implement_gc_follow"
+ ],
+ "history": [
+ {
+ "en": "February 2024 - Initial implementation of the variation.",
+ "fr": "Février 2024 - Implémentation initiale de la variante."
+ }
+ ]
+ },
+ {
+ "name": {
+ "en": "Follow us",
+ "fr": "Suivez-nous"
+ },
+ "status": "deprecated",
+ "description": {
+ "en": "The social media channels pattern provides links to official Government of Canada (GC) social media accounts.",
+ "fr": "La configuration de conception des chaînes de médias sociaux fournit des liens vers les comptes de médias sociaux officiels du gouvernement du Canada (GC)."
+ },
+ "guidance": {
+ "en": "https://design.canada.ca/common-design-patterns/social-media-channels.html",
+ "fr": "https://conception.canada.ca/configurations-conception-communes/bloc-medias-sociaux.html"
+ },
+ "iteration": "_:iteration_follow_1",
+ "example": [
+ {
+ "en": { "href": "deprecated/follow-us-en.html", "text": "Follow us" },
+ "fr": { "href": "deprecated/follow-us-fr.html", "text": "Suivez-nous" }
+ }
+ ],
+ "implementation": [
+ "_:implement_follow"
+ ],
+ "history": [
+ {
+ "en": "April 2017 - Initial implementation of the variation.",
+ "fr": "Avril 2017 - Implémentation initiale de la variante."
+ }
+ ]
+ }
+ ],
+ "implementation": [
+ {
+ "@id": "_:implement_gc_follow",
+ "iteration": "_:iteration_gc_follow_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 below code sample.",
+ "To display the icons horizontally, add the CSS class \"list-inline
\" to the <ul>
.",
+ "If there is more than one account from a single platform, make them available via an overlay (popup) ."
+ ],
+ "fr": [
+ "Référez-vous à l'exemple de code ci-dessous.",
+ "Pour afficher les icônes horizontalement, ajoutez la classe CSS \"list-inline
\" au <ul>
.",
+ "S’il y a plus d’un compte pour une même plateforme, énumérez-les dans un contenu superposé (popup) ."
+ ]
+ },
+ "sample": {
+ "en": [
+ {
+ "@type": "source-code",
+ "description": "Default layout code sample:",
+ "code": "\n\tOn social media \n\t\n "
+ }
+ ],
+ "fr": [
+ {
+ "@type": "source-code",
+ "description": "Exemple de code pour disposition par défaut :",
+ "code": "\n\tDans les médias sociaux \n\t\n "
+ }
+ ]
+ }
+ },
+ {
+ "@id": "_:implement_follow",
+ "iteration": "_:iteration_follow_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 below code sample."
+ ],
+ "fr": [
+ "Référez-vous à l'exemple de code ci-dessous."
+ ]
+ },
+ "sample": {
+ "en": [
+ {
+ "@type": "source-code",
+ "description": "Code sample:",
+ "code": ""
+ }
+ ],
+ "fr": [
+ {
+ "@type": "source-code",
+ "description": "Exemple de code :",
+ "code": ""
+ }
+ ]
+ }
+ }
+ ],
+ "iteration": [
+ {
+ "@id": "_:iteration_gc_follow_1",
+ "name": "GC Follow us - Iteration 1",
+ "date": "2024-02",
+ "detectableBy": ".gc-followus",
+ "assets": [
+ {
+ "@type": "source-code",
+ "@language": "en",
+ "description": "Code sample",
+ "code": {
+ "@type": [ "rdf:HTML", "@id" ],
+ "@value": "includes/gc-follow-us.html"
+ }
+ }
+ ]
+ },
+ {
+ "@id": "_:iteration_follow_1",
+ "name": "Follow us - Iteration 1",
+ "date": "2017-04",
+ "detectableBy": ".followus",
+ "assets": [
+ {
+ "@type": "source-code",
+ "@language": "en",
+ "description": "Code sample",
+ "code": {
+ "@type": [ "rdf:HTML", "@id" ],
+ "@value": "includes/follow.html"
+ }
+ }
+ ]
+ }
+ ],
+ "changesets": [
+ {
+ "@id": "_:cs_gc_follow",
+ "name": "GC Follow us",
+ "status": "stable",
+ "baseOnIteration": "_:iteration_gc_follow_1",
+ "detectableBy": ".gc-followus",
+ "layout": [
+ "Default: the social media accounts are stacked vertically with each account having the logo on the left and name on the right.",
+ "Inline: the social media accounts are listed horizontally with only the logo visible."
+ ],
+ "semantic": "section.gc-followus > h2 + (ul > li > a)",
+ "static": [
+ "Dans les médias sociaux",
+ "On social media"
+ ],
+ "schema": [
+ "FacebookAccountName",
+ "FacebookAccountURL",
+ "TwitterAccountName",
+ "TwitterAccountURL",
+ "YoutubeAccountName",
+ "YoutubeAccountURL",
+ "InstagramAccountName",
+ "InstagramAccountURL",
+ "LinkedInAccountName",
+ "LinkedInAccountURL"
+ ],
+ "configuration": "isInline: if yes, add class \"list-inline\" to
element.",
+ "include": {
+ "@type": "source-code",
+ "collapsed": true,
+ "description": "Include with logic in Liquid.",
+ "code": {
+ "@type": [ "@id", "rdf:HTML" ],
+ "@value": "includes/gc-follow-us.html"
+ }
+ }
+ },
+ {
+ "@id": "_:cs_follow",
+ "name": "Follow us",
+ "status": "deprecated",
+ "deprecatedOn": "2024-02-02",
+ "baseOnIteration": "_:iteration_follow_1",
+ "detectableBy": ".followus",
+ "layout": [
+ "The social media accounts are listed horizontally. The logo visible. The account name is invisible."
+ ],
+ "semantic": "section.followus > h2 + (ul > li > a)",
+ "static": [
+ "Suivez :",
+ "Follow:"
+ ],
+ "schema": [
+ "FacebookAccountName",
+ "FacebookAccountURL",
+ "TwitterAccountName",
+ "TwitterAccountURL",
+ "YoutubeAccountName",
+ "YoutubeAccountURL",
+ "InstagramAccountName",
+ "InstagramAccountURL",
+ "LinkedInAccountName",
+ "LinkedInAccountURL",
+ "FlickrAccountName",
+ "FlickrAccountURL",
+ "PinterestAccountName",
+ "PinterestAccountURL",
+ "RSSAccountName",
+ "RSSAccountURL",
+ "EmailAccountName",
+ "EmailAccountURL",
+ "PeriscopeAccountName",
+ "PeriscopeAccountURL"
+ ],
+ "include": {
+ "@type": "source-code",
+ "collapsed": true,
+ "description": "Include with logic in Liquid.",
+ "code": {
+ "@type": [ "@id", "rdf:HTML" ],
+ "@value": "includes/follow.html"
+ }
+ }
+ }
+ ]
+}
,{
"@context": {
"@version": 1.1,
diff --git a/components/gc-follow-us/_base.scss b/components/gc-follow-us/_base.scss
index 7fd5f3dd0..c391dcefb 100644
--- a/components/gc-follow-us/_base.scss
+++ b/components/gc-follow-us/_base.scss
@@ -64,108 +64,117 @@
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAWCAYAAABOm/V6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gQVECMqfCsMgwAAAshJREFUSMfF1s9P02AYwPFvyxwbHRuMrYOVVgS2BRNBDfHqxXDxz/Bq4sH/QA+e/B8MR+9e/QcUMk0IMBRho4R1g7LRbmPA6mFuqLAxfj9Jk6bv276fPHnep6+QnJ3xAq+Bl0CEm41PwBsX8AJ4y+3Ec2DYBbwCCClj7O1k6Q3KRO5OXNuqlVKRjVQSr6+PXSMDMCUCIwCylkCJTWHt5smuLV4LYL9ssZFK4g9GUMYnm8/Fvyd5fX1Exx7UIetXC6mWbTLLc/gHBpG1+D9jIuDUb51jyPgklpknu750NYBKifTSVwKhKOHhGCCcQJwIry+AEptizzQw0suXByx+oS+sEFLGEQThxByx1cseyc9w/BHFnSy5zAqO41wYEAgrDERHTwW0RQB4enpRE48pbG+S13/iOLVz1UADEIqOIoitlxLP+li314eWmKaQ09nWV3FqZ0P2Sxbp5TkC4SghZawtoCMEgNsroU1Ms5vTyW+uts1IpVQkk5rHHxxsWQMXQgC4PXVIIaeT11dPrZGKXUBPJekNRpC1eEeAcyGqlRJGOoUUCFHI6+QyKWpHh81xu7CNvvKd7h4fFbuImc10XD+uzgA2RjqFRwoQUkbZL9ts/vjG4UGVbq+PWu0Qy8zROxBBVuNU7CJGJgVAf0S9fCb+B9SLVUK7/wTXHTd2cYdq2SasxpDVeHN7y2qcPdNo/B8unoljgL8JaERXlwtZS9Cuz8hqrN5jgH5ZPX8mGjXgkfwMREcv1C09kp+wGsPaaZ8R8biRH1fywX4ZI71cBwzd67jKW2ZES7BnGpgtICJQBZpN6KBaIbu+hEfyExwaObPRdBLdPT5kLYFlGqfuGhGYB9haW+Do8ICtXwt1wKCGIAg4Tu1KLrenh7AaxzKzZNcWsXZzDUNJSM7OPPtz1nPf0hHvowv4DDwF3gEPAekGFnaADPABeP8bNrJaPIc3C6EAAAAASUVORK5CYII=")
}
-$provisional-social-media-li-margin-bottom: 15px;
-$provisional-social-media-icons-vertical-offset: 6px;
-$provisional-social-media-icons-size: 38px;
+$social-media-li-margin-bottom: 23px;
+$social-media-icons-vertical-offset: 6px;
+$social-media-icons-size: 38px;
-%provisional-social-media-icons-followus-logo-properties {
+%social-media-icons-gc-followus-logo-properties {
background-repeat: no-repeat;
background-size: cover;
content: "";
- height: $provisional-social-media-icons-size;
+ height: $social-media-icons-size;
margin-right: 10px;
- min-width: $provisional-social-media-icons-size;
+ min-width: $social-media-icons-size;
}
-.provisional {
- &.gc-followus {
- h2 {
- font-size: $font-size-h4;
+.gc-followus {
+ h2 {
+ font-size: $font-size-h4;
+ margin-top: 0px;
+ }
+
+ ul {
+ display: block;
+ font-size: $small-size;
+ font-weight: $bold-weight;
+ list-style: none;
+ margin-block-start: 1em;
+ padding-inline-start: calc(1em + #{$social-media-icons-vertical-offset});
+
+ li {
+ margin-bottom: ($social-media-li-margin-bottom + $social-media-icons-vertical-offset);
+
+ &:first-child {
+ margin-top: 34px;
+ }
+
+ &:last-child {
+ margin-bottom: $social-media-li-margin-bottom;
+ }
+
+ a {
+ display: flex;
+ line-height: 1.54;
+ max-width: max-content;
+ text-decoration: none;
+
+ &::before {
+ margin-right: 10px;
+ margin-top: -$social-media-icons-vertical-offset;
+ }
+
+ &:hover,
+ &:focus,
+ &:active {
+ text-decoration: underline;
+ }
+ }
}
- ul {
- display: block;
- font-size: $small-size;
- font-weight: $bold-weight;
- list-style: none;
- margin-block-start: 1em;
- padding-inline-start: calc(1em + #{$provisional-social-media-icons-vertical-offset});
+ &.list-inline {
+ padding-inline-start: 0;
li {
- margin-bottom: ($provisional-social-media-li-margin-bottom + $provisional-social-media-icons-vertical-offset);
+ display: inline-block;
+ padding-right: 0;
- &:last-child {
- margin-bottom: $provisional-social-media-li-margin-bottom;
+ &:first-child {
+ margin-top: 0;
}
-
a {
- display: flex;
- line-height: 1.54;
- max-width: max-content;
- text-decoration: none;
+ border-radius: 100%;
+ height: $social-media-icons-size;
+ overflow: hidden;
+ width: $social-media-icons-size;
&::before {
- margin-right: 10px;
- margin-top: -$provisional-social-media-icons-vertical-offset;
+ margin-top: 0;
}
&:hover,
&:focus,
&:active {
- text-decoration: underline;
- }
- }
- }
-
- &.list-inline {
- padding-inline-start: 0;
-
- li {
- display: inline-block;
- padding-right: 0;
-
- a {
- height: $provisional-social-media-icons-size;
- overflow: hidden;
- width: $provisional-social-media-icons-size;
-
- &::before {
- margin-top: 0;
- }
-
- &:hover,
- &:focus,
- &:active {
- outline: solid 2px #0535d2;
- }
+ outline: solid 2px #0535d2;
+ outline-offset: 1px;
}
}
}
}
+
.facebook::before {
- @extend %provisional-social-media-icons-followus-logo-properties;
+ @extend %social-media-icons-gc-followus-logo-properties;
background-image: url("../assets/gc-follow-us/facebook.svg");
}
.twitter::before {
- @extend %provisional-social-media-icons-followus-logo-properties;
- background-image: url("../assets/gc-follow-us/twitter.svg");
+ @extend %social-media-icons-gc-followus-logo-properties;
+ background-image: url("../assets/gc-follow-us/x.svg");
}
.youtube::before {
- @extend %provisional-social-media-icons-followus-logo-properties;
+ @extend %social-media-icons-gc-followus-logo-properties;
background-image: url("../assets/gc-follow-us/youtube.svg");
}
.instagram::before {
- @extend %provisional-social-media-icons-followus-logo-properties;
+ @extend %social-media-icons-gc-followus-logo-properties;
background-image: url("../assets/gc-follow-us/instagram.svg");
}
.linkedin::before {
- @extend %provisional-social-media-icons-followus-logo-properties;
+ @extend %social-media-icons-gc-followus-logo-properties;
background-image: url("../assets/gc-follow-us/linkedin.svg");
}
}
diff --git a/components/gc-follow-us/assets/x.svg b/components/gc-follow-us/assets/x.svg
new file mode 100644
index 000000000..d87397ccd
--- /dev/null
+++ b/components/gc-follow-us/assets/x.svg
@@ -0,0 +1,9 @@
+
+
+
+
+
+
diff --git a/components/gc-follow-us/deprecated/follow-us-en.html b/components/gc-follow-us/deprecated/follow-us-en.html
new file mode 100644
index 000000000..9f33f2ee5
--- /dev/null
+++ b/components/gc-follow-us/deprecated/follow-us-en.html
@@ -0,0 +1,21 @@
+---
+{
+ "altLangPage": "follow-us-fr.html",
+ "dateModified": "2024-02-02",
+ "description": "Working examples for the Follow us component.",
+ "language": "en",
+ "title": "Follow us",
+ "breadcrumbs": [
+ { "title": "GC Follow us", "link": "components/gc-follow-us/gc-follow-us-doc-en.html" }
+ ]
+}
+---
+
+
+
+{%- include gc-follow-us/follow.html -%}
+
+Code
+{% highlight html %}
+ {%- include gc-follow-us/follow.html -%}
+{% endhighlight %}
diff --git a/components/gc-follow-us/deprecated/follow-us-fr.html b/components/gc-follow-us/deprecated/follow-us-fr.html
new file mode 100644
index 000000000..2aafebb68
--- /dev/null
+++ b/components/gc-follow-us/deprecated/follow-us-fr.html
@@ -0,0 +1,21 @@
+---
+{
+ "altLangPage": "follow-us-en.html",
+ "dateModified": "2024-02-02",
+ "description": "Exemples pratiques pour la composante Suivez-nous.",
+ "language": "fr",
+ "title": "Suivez-nous",
+ "breadcrumbs": [
+ { "title": "GC Suivez-nous", "link": "components/gc-follow-us/gc-follow-us-doc-fr.html" }
+ ]
+}
+---
+
+
+
+{%- include gc-follow-us/follow.html -%}
+
+Code
+{% highlight html %}
+ {%- include gc-follow-us/follow.html -%}
+{% endhighlight %}
diff --git a/components/gc-follow-us/gc-follow-us-doc-en.html b/components/gc-follow-us/gc-follow-us-doc-en.html
new file mode 100644
index 000000000..9166f9e30
--- /dev/null
+++ b/components/gc-follow-us/gc-follow-us-doc-en.html
@@ -0,0 +1,11 @@
+---
+{
+ "layout": "documentation",
+ "altLangPage": "gc-follow-us-doc-fr.html",
+ "dateModified": "2024-01-015",
+ "index_json": "index.json-ld",
+ "description": "Documentation on how to use the social media channels.",
+ "language": "en",
+ "title": "Social media channels - Documentation"
+}
+---
diff --git a/components/gc-follow-us/gc-follow-us-doc-fr.html b/components/gc-follow-us/gc-follow-us-doc-fr.html
new file mode 100644
index 000000000..c8777ee61
--- /dev/null
+++ b/components/gc-follow-us/gc-follow-us-doc-fr.html
@@ -0,0 +1,11 @@
+---
+{
+ "layout": "documentation",
+ "altLangPage": "gc-follow-us-doc-en.html",
+ "dateModified": "2024-01-15",
+ "index_json": "index.json-ld",
+ "description": "Documentation sur l'utilisation des chaînes de médias sociaux.",
+ "language": "fr",
+ "title": "Bloc des réseaux de médias sociaux - Documentation"
+}
+---
diff --git a/components/gc-follow-us/gc-follow-us-en.html b/components/gc-follow-us/gc-follow-us-en.html
new file mode 100644
index 000000000..8b2a52fa7
--- /dev/null
+++ b/components/gc-follow-us/gc-follow-us-en.html
@@ -0,0 +1,30 @@
+---
+{
+ "altLangPage": "gc-follow-us-fr.html",
+ "dateModified": "2024-02-02",
+ "description": "Working examples for the social media channels design pattern.",
+ "language": "en",
+ "title": "Social media channels",
+ "breadcrumbs": [
+ { "title": "Social media channels", "link": "components/gc-follow-us/gc-follow-us-doc-en.html" }
+ ]
+}
+---
+
+
+
+Vertical layout
+{%- include gc-follow-us/gc-follow-us.html isInline=false -%}
+
+
+ Code
+ {% highlight html %}{%- include gc-follow-us/gc-follow-us.html isInline=false -%}{% endhighlight %}
+
+
+Horizontal layout
+{%- include gc-follow-us/gc-follow-us.html isInline=true -%}
+
+
+ Code
+ {% highlight html %}{%- include gc-follow-us/gc-follow-us.html isInline=true -%}{% endhighlight %}
+
diff --git a/components/gc-follow-us/gc-follow-us-fr.html b/components/gc-follow-us/gc-follow-us-fr.html
new file mode 100644
index 000000000..0b100f961
--- /dev/null
+++ b/components/gc-follow-us/gc-follow-us-fr.html
@@ -0,0 +1,30 @@
+---
+{
+ "altLangPage": "gc-follow-us-en.html",
+ "dateModified": "2024-02-02",
+ "description": "Exemples pratiques pour le bloc des réseaux de médias sociaux.",
+ "language": "fr",
+ "title": "Bloc des réseaux de médias sociaux",
+ "breadcrumbs": [
+ { "title": "Bloc des réseaux de médias sociaux", "link": "components/gc-follow-us/gc-follow-us-doc-fr.html" }
+ ]
+}
+---
+
+
+
+Disposition verticale
+{%- include gc-follow-us/gc-follow-us.html isInline=false -%}
+
+
+ Code
+ {% highlight html %}{%- include gc-follow-us/gc-follow-us.html isInline=false -%}{% endhighlight %}
+
+
+Disposition horizontale
+{%- include gc-follow-us/gc-follow-us.html isInline=true -%}
+
+
+ Code
+ {% highlight html %}{%- include gc-follow-us/gc-follow-us.html isInline=true -%}{% endhighlight %}
+
diff --git a/_includes/components/gc-follow-us/follow.html b/components/gc-follow-us/includes/follow.html
similarity index 100%
rename from _includes/components/gc-follow-us/follow.html
rename to components/gc-follow-us/includes/follow.html
diff --git a/_includes/components/gc-follow-us/gc-follow-us.html b/components/gc-follow-us/includes/gc-follow-us.html
similarity index 83%
rename from _includes/components/gc-follow-us/gc-follow-us.html
rename to components/gc-follow-us/includes/gc-follow-us.html
index 90ff18693..70a3d5198 100644
--- a/_includes/components/gc-follow-us/gc-follow-us.html
+++ b/components/gc-follow-us/includes/gc-follow-us.html
@@ -1,19 +1,5 @@
-
-
- {%- if include.isInline -%}
- {%- if page.language == "fr" -%}
- Suivez-nous
- {%- else -%}
- Follow us
- {%- endif -%}
- {%- else -%}
- {%- if page.language == "fr" -%}
- Dans les médias sociaux
- {%- else -%}
- On social media
- {%- endif -%}
- {%- endif -%}
-
+
+ {%- if page.language == "fr" -%}Dans les médias sociaux{%- else -%}On social media{%- endif -%}
@@ -27,9 +13,9 @@
diff --git a/components/gc-follow-us/index.json-ld b/components/gc-follow-us/index.json-ld
new file mode 100644
index 000000000..a515a089b
--- /dev/null
+++ b/components/gc-follow-us/index.json-ld
@@ -0,0 +1,314 @@
+{
+ "@context": {
+ "@version": 2.0,
+ "dct": "http://purl.org/dc/terms/",
+ "title": { "@id": "dct:title", "@container": "@language" },
+ "description": { "@id": "dct:description", "@container": "@language" },
+ "modified": "dct:modified"
+ },
+ "title": {
+ "en": "Social media channels",
+ "fr": "Bloc des réseaux de médias sociaux"
+ },
+ "description": {
+ "en": "The social media channels pattern provides links to official Government of Canada (GC) social media accounts.",
+ "fr": "La configuration de conception des chaînes de médias sociaux fournit des liens vers les comptes de médias sociaux officiels du gouvernement du Canada (GC)."
+ },
+ "modified": "2024-02-05",
+ "componentName": "gc-follow-us",
+ "status": "stable",
+ "version": "2.0",
+ "pages": {
+ "docs": [
+ {
+ "title": "Social media channels - Documentation",
+ "language": "en",
+ "path": "gc-follow-us-doc-en.html"
+ },
+ {
+ "title": "Bloc des réseaux de médias sociaux - Documentation",
+ "language": "fr",
+ "path": "gc-follow-us-doc-fr.html"
+ }
+ ],
+ "examples": [
+ {
+ "title": "Social media channels",
+ "language": "en",
+ "path": "gc-follow-us-en.html"
+ },
+ {
+ "title": "Bloc des réseaux de médias sociaux",
+ "language": "fr",
+ "path": "gc-follow-us-fr.html"
+ }
+ ]
+ },
+ "a11yGuidance": "no accessibility guidance",
+ "dependencies": "no dependency",
+ "variations": [
+ {
+ "name": {
+ "en": "GC Follow us - default",
+ "fr": "GC Suivez-nous - par défaut"
+ },
+ "status": "stable",
+ "description": {
+ "en": "The social media channels pattern provides links to official Government of Canada (GC) social media accounts.",
+ "fr": "La configuration de conception des chaînes de médias sociaux fournit des liens vers les comptes de médias sociaux officiels du gouvernement du Canada (GC)."
+ },
+ "guidance": {
+ "en": "https://design.canada.ca/common-design-patterns/social-media-channels.html",
+ "fr": "https://conception.canada.ca/configurations-conception-communes/bloc-medias-sociaux.html"
+ },
+ "iteration": "_:iteration_gc_follow_1",
+ "example": [
+ {
+ "en": { "href": "gc-follow-us-en.html", "text": "GC Follow us" },
+ "fr": { "href": "gc-follow-us-fr.html", "text": "GC Suivez-nous" }
+ }
+ ],
+ "implementation": [
+ "_:implement_gc_follow"
+ ],
+ "history": [
+ {
+ "en": "February 2024 - Initial implementation of the variation.",
+ "fr": "Février 2024 - Implémentation initiale de la variante."
+ }
+ ]
+ },
+ {
+ "name": {
+ "en": "Follow us",
+ "fr": "Suivez-nous"
+ },
+ "status": "deprecated",
+ "description": {
+ "en": "The social media channels pattern provides links to official Government of Canada (GC) social media accounts.",
+ "fr": "La configuration de conception des chaînes de médias sociaux fournit des liens vers les comptes de médias sociaux officiels du gouvernement du Canada (GC)."
+ },
+ "guidance": {
+ "en": "https://design.canada.ca/common-design-patterns/social-media-channels.html",
+ "fr": "https://conception.canada.ca/configurations-conception-communes/bloc-medias-sociaux.html"
+ },
+ "iteration": "_:iteration_follow_1",
+ "example": [
+ {
+ "en": { "href": "deprecated/follow-us-en.html", "text": "Follow us" },
+ "fr": { "href": "deprecated/follow-us-fr.html", "text": "Suivez-nous" }
+ }
+ ],
+ "implementation": [
+ "_:implement_follow"
+ ],
+ "history": [
+ {
+ "en": "April 2017 - Initial implementation of the variation.",
+ "fr": "Avril 2017 - Implémentation initiale de la variante."
+ }
+ ]
+ }
+ ],
+ "implementation": [
+ {
+ "@id": "_:implement_gc_follow",
+ "iteration": "_:iteration_gc_follow_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 below code sample.",
+ "To display the icons horizontally, add the CSS class \"list-inline
\" to the <ul>
.",
+ "If there is more than one account from a single platform, make them available via an overlay (popup) ."
+ ],
+ "fr": [
+ "Référez-vous à l'exemple de code ci-dessous.",
+ "Pour afficher les icônes horizontalement, ajoutez la classe CSS \"list-inline
\" au <ul>
.",
+ "S’il y a plus d’un compte pour une même plateforme, énumérez-les dans un contenu superposé (popup) ."
+ ]
+ },
+ "sample": {
+ "en": [
+ {
+ "@type": "source-code",
+ "description": "Default layout code sample:",
+ "code": "\n\tOn social media \n\t\n "
+ }
+ ],
+ "fr": [
+ {
+ "@type": "source-code",
+ "description": "Exemple de code pour disposition par défaut :",
+ "code": "\n\tDans les médias sociaux \n\t\n "
+ }
+ ]
+ }
+ },
+ {
+ "@id": "_:implement_follow",
+ "iteration": "_:iteration_follow_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 below code sample."
+ ],
+ "fr": [
+ "Référez-vous à l'exemple de code ci-dessous."
+ ]
+ },
+ "sample": {
+ "en": [
+ {
+ "@type": "source-code",
+ "description": "Code sample:",
+ "code": ""
+ }
+ ],
+ "fr": [
+ {
+ "@type": "source-code",
+ "description": "Exemple de code :",
+ "code": ""
+ }
+ ]
+ }
+ }
+ ],
+ "iteration": [
+ {
+ "@id": "_:iteration_gc_follow_1",
+ "name": "GC Follow us - Iteration 1",
+ "date": "2024-02",
+ "detectableBy": ".gc-followus",
+ "assets": [
+ {
+ "@type": "source-code",
+ "@language": "en",
+ "description": "Code sample",
+ "code": {
+ "@type": [ "rdf:HTML", "@id" ],
+ "@value": "includes/gc-follow-us.html"
+ }
+ }
+ ]
+ },
+ {
+ "@id": "_:iteration_follow_1",
+ "name": "Follow us - Iteration 1",
+ "date": "2017-04",
+ "detectableBy": ".followus",
+ "assets": [
+ {
+ "@type": "source-code",
+ "@language": "en",
+ "description": "Code sample",
+ "code": {
+ "@type": [ "rdf:HTML", "@id" ],
+ "@value": "includes/follow.html"
+ }
+ }
+ ]
+ }
+ ],
+ "changesets": [
+ {
+ "@id": "_:cs_gc_follow",
+ "name": "GC Follow us",
+ "status": "stable",
+ "baseOnIteration": "_:iteration_gc_follow_1",
+ "detectableBy": ".gc-followus",
+ "layout": [
+ "Default: the social media accounts are stacked vertically with each account having the logo on the left and name on the right.",
+ "Inline: the social media accounts are listed horizontally with only the logo visible."
+ ],
+ "semantic": "section.gc-followus > h2 + (ul > li > a)",
+ "static": [
+ "Dans les médias sociaux",
+ "On social media"
+ ],
+ "schema": [
+ "FacebookAccountName",
+ "FacebookAccountURL",
+ "TwitterAccountName",
+ "TwitterAccountURL",
+ "YoutubeAccountName",
+ "YoutubeAccountURL",
+ "InstagramAccountName",
+ "InstagramAccountURL",
+ "LinkedInAccountName",
+ "LinkedInAccountURL"
+ ],
+ "configuration": "isInline: if yes, add class \"list-inline\" to element.",
+ "include": {
+ "@type": "source-code",
+ "collapsed": true,
+ "description": "Include with logic in Liquid.",
+ "code": {
+ "@type": [ "@id", "rdf:HTML" ],
+ "@value": "includes/gc-follow-us.html"
+ }
+ }
+ },
+ {
+ "@id": "_:cs_follow",
+ "name": "Follow us",
+ "status": "deprecated",
+ "deprecatedOn": "2024-02-02",
+ "baseOnIteration": "_:iteration_follow_1",
+ "detectableBy": ".followus",
+ "layout": [
+ "The social media accounts are listed horizontally. The logo visible. The account name is invisible."
+ ],
+ "semantic": "section.followus > h2 + (ul > li > a)",
+ "static": [
+ "Suivez :",
+ "Follow:"
+ ],
+ "schema": [
+ "FacebookAccountName",
+ "FacebookAccountURL",
+ "TwitterAccountName",
+ "TwitterAccountURL",
+ "YoutubeAccountName",
+ "YoutubeAccountURL",
+ "InstagramAccountName",
+ "InstagramAccountURL",
+ "LinkedInAccountName",
+ "LinkedInAccountURL",
+ "FlickrAccountName",
+ "FlickrAccountURL",
+ "PinterestAccountName",
+ "PinterestAccountURL",
+ "RSSAccountName",
+ "RSSAccountURL",
+ "EmailAccountName",
+ "EmailAccountURL",
+ "PeriscopeAccountName",
+ "PeriscopeAccountURL"
+ ],
+ "include": {
+ "@type": "source-code",
+ "collapsed": true,
+ "description": "Include with logic in Liquid.",
+ "code": {
+ "@type": [ "@id", "rdf:HTML" ],
+ "@value": "includes/follow.html"
+ }
+ }
+ }
+ ]
+}
diff --git a/components/gc-follow-us/samples/follow.html b/components/gc-follow-us/samples/follow.html
deleted file mode 100644
index d0f00b639..000000000
--- a/components/gc-follow-us/samples/follow.html
+++ /dev/null
@@ -1,41 +0,0 @@
-{%- comment -%}
-
-++++++++++++++++++++++++++++++++++
-+ List of social media links
-+
-+ Used by organizational and institutional page
-++++++++++++++++++++++++++++++++++
-
-{%- endcomment -%}
-
-
- {%- if page.language == "fr" -%}
- Suivez :
-
- {%- else -%}
- Follow:
-
- {%- endif -%}
-
diff --git a/components/gc-follow-us/samples/gc-follow-us.html b/components/gc-follow-us/samples/gc-follow-us.html
deleted file mode 100644
index 90ff18693..000000000
--- a/components/gc-follow-us/samples/gc-follow-us.html
+++ /dev/null
@@ -1,100 +0,0 @@
-
-
- {%- if include.isInline -%}
- {%- if page.language == "fr" -%}
- Suivez-nous
- {%- else -%}
- Follow us
- {%- endif -%}
- {%- else -%}
- {%- if page.language == "fr" -%}
- Dans les médias sociaux
- {%- else -%}
- On social media
- {%- endif -%}
- {%- endif -%}
-
-
-
-
diff --git a/templates/gc-audience-en.html b/templates/gc-audience-en.html
index 0218c36e8..ea9869e17 100644
--- a/templates/gc-audience-en.html
+++ b/templates/gc-audience-en.html
@@ -12,7 +12,7 @@
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis massa sed libero eleifend, ac iaculis urna tempor. Cras sagittis massa sed libero eleifend, ac iaculis urna tempor.
- {% include components/gc-follow-us/follow.html %}
+ {% include gc-follow-us/follow.html %}
diff --git a/templates/gc-audience-fr.html b/templates/gc-audience-fr.html
index 475cb311b..e3f4c0761 100644
--- a/templates/gc-audience-fr.html
+++ b/templates/gc-audience-fr.html
@@ -12,7 +12,7 @@
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis massa sed libero eleifend, ac iaculis urna tempor. Cras sagittis massa sed libero eleifend, ac iaculis urna tempor.
- {% include components/gc-follow-us/follow.html %}
+ {% include gc-follow-us/follow.html %}
diff --git a/templates/institutional/institution-arms-en.html b/templates/institutional/institution-arms-en.html
index beb2abfb9..ebb2f1b4f 100644
--- a/templates/institutional/institution-arms-en.html
+++ b/templates/institutional/institution-arms-en.html
@@ -23,7 +23,7 @@
[Institution name] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis massa sed libero eleifend, ac iaculis urna tempor. Cras sagittis massa sed libero eleifend, ac iaculis urna tempor.
- {% include components/gc-follow-us/follow.html %}
+ {% include gc-follow-us/follow.html %}
diff --git a/templates/institutional/institution-arms-fr.html b/templates/institutional/institution-arms-fr.html
index 21801f8f0..10fca0379 100644
--- a/templates/institutional/institution-arms-fr.html
+++ b/templates/institutional/institution-arms-fr.html
@@ -23,7 +23,7 @@
[Nom de l’institution] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis massa sed libero eleifend, ac iaculis urna tempor. Cras sagittis massa sed libero eleifend, ac iaculis urna tempor.
- {% include components/gc-follow-us/follow.html %}
+ {% include gc-follow-us/follow.html %}
diff --git a/templates/institutional/institution-contact-en.html b/templates/institutional/institution-contact-en.html
index 7b307b8b8..85fb5355e 100644
--- a/templates/institutional/institution-contact-en.html
+++ b/templates/institutional/institution-contact-en.html
@@ -18,7 +18,7 @@
[Institution name] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis massa sed libero eleifend, ac iaculis urna tempor. Cras sagittis massa sed libero eleifend, ac iaculis urna tempor.
- {% include components/gc-follow-us/follow.html %}
+ {% include gc-follow-us/follow.html %}
diff --git a/templates/institutional/institution-contact-fr.html b/templates/institutional/institution-contact-fr.html
index db5ca2d05..2f08662dd 100644
--- a/templates/institutional/institution-contact-fr.html
+++ b/templates/institutional/institution-contact-fr.html
@@ -18,7 +18,7 @@
[Nom de l’institution] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis massa sed libero eleifend, ac iaculis urna tempor. Cras sagittis massa sed libero eleifend, ac iaculis urna tempor.
- {% include components/gc-follow-us/follow.html %}
+ {% include gc-follow-us/follow.html %}
diff --git a/templates/institutional/institution-en.html b/templates/institutional/institution-en.html
index f06314df3..b9dde069d 100644
--- a/templates/institutional/institution-en.html
+++ b/templates/institutional/institution-en.html
@@ -18,7 +18,7 @@
[Institution name] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis massa sed libero eleifend, ac iaculis urna tempor. Cras sagittis massa sed libero eleifend, ac iaculis urna tempor.
- {% include components/gc-follow-us/follow.html %}
+ {% include gc-follow-us/follow.html %}
diff --git a/templates/institutional/institution-fr.html b/templates/institutional/institution-fr.html
index c83a6a25b..2a1818489 100644
--- a/templates/institutional/institution-fr.html
+++ b/templates/institutional/institution-fr.html
@@ -18,7 +18,7 @@
[Nom de l’institution] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis massa sed libero eleifend, ac iaculis urna tempor. Cras sagittis massa sed libero eleifend, ac iaculis urna tempor.
- {% include components/gc-follow-us/follow.html %}
+ {% include gc-follow-us/follow.html %}
diff --git a/templates/institutional/institution-landing-en.html b/templates/institutional/institution-landing-en.html
index 9ad66e71b..e89284e9b 100644
--- a/templates/institutional/institution-landing-en.html
+++ b/templates/institutional/institution-landing-en.html
@@ -141,7 +141,7 @@ Minister
Minister's official title
- {%- include components/gc-follow-us/gc-follow-us.html isInline=true -%}
+ {%- include gc-follow-us/gc-follow-us.html isInline=true -%}
diff --git a/templates/institutional/institution-landing-fr.html b/templates/institutional/institution-landing-fr.html
index 3caee3c87..c6cf028f3 100644
--- a/templates/institutional/institution-landing-fr.html
+++ b/templates/institutional/institution-landing-fr.html
@@ -141,7 +141,7 @@ Minister
Minister's official title
- {%- include components/gc-follow-us/gc-follow-us.html isInline=true -%}
+ {%- include gc-follow-us/gc-follow-us.html isInline=true -%}
diff --git a/templates/lowest-topic/index-en.html b/templates/lowest-topic/index-en.html
index bc8afaf75..6d99dacf7 100644
--- a/templates/lowest-topic/index-en.html
+++ b/templates/lowest-topic/index-en.html
@@ -18,7 +18,7 @@
{{ page.title }}
This topic page shows child destination pages that have a local left navigation. Click on a task for an example. This would typically happen on a lowest-level topic page.
- {% include components/gc-follow-us/follow.html %}
+ {% include gc-follow-us/follow.html %}
diff --git a/templates/lowest-topic/index-fr.html b/templates/lowest-topic/index-fr.html
index ae8216246..8e26ff462 100644
--- a/templates/lowest-topic/index-fr.html
+++ b/templates/lowest-topic/index-fr.html
@@ -18,7 +18,7 @@
{{ page.title }}
Cette page de sujet comporte des liens vers des pages de destination qui ont une navigation locale. Cliquez sur une tâche pour voir un exemple. Normalement, cette situation devrait arriver sur des pages de sujet de plus bas niveau.
- {% include components/gc-follow-us/follow.html %}
+ {% include gc-follow-us/follow.html %}
diff --git a/templates/news/news-en.html b/templates/news/news-en.html
index 47cc25c62..e73dae50a 100644
--- a/templates/news/news-en.html
+++ b/templates/news/news-en.html
@@ -45,7 +45,7 @@
- {% include components/gc-follow-us/follow.html %}
+ {% include gc-follow-us/follow.html %}
{% include components/gc-features/features.html %}
diff --git a/templates/news/news-fr.html b/templates/news/news-fr.html
index db34d40d5..d12b6386f 100644
--- a/templates/news/news-fr.html
+++ b/templates/news/news-fr.html
@@ -45,7 +45,7 @@
- {% include components/gc-follow-us/follow.html %}
+ {% include gc-follow-us/follow.html %}
{% include components/gc-features/features.html %}
diff --git a/templates/organizational/organizational-arms-en.html b/templates/organizational/organizational-arms-en.html
index 888555a71..acddb77d8 100644
--- a/templates/organizational/organizational-arms-en.html
+++ b/templates/organizational/organizational-arms-en.html
@@ -19,7 +19,7 @@
[Institution name] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis massa sed libero eleifend, ac iaculis urna tempor. Cras sagittis massa sed libero eleifend, ac iaculis urna tempor.
- {% include components/gc-follow-us/follow.html %}
+ {% include gc-follow-us/follow.html %}
diff --git a/templates/organizational/organizational-arms-fr.html b/templates/organizational/organizational-arms-fr.html
index ba541d16f..665ce431f 100644
--- a/templates/organizational/organizational-arms-fr.html
+++ b/templates/organizational/organizational-arms-fr.html
@@ -19,7 +19,7 @@
[Nom de l’institution] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis massa sed libero eleifend, ac iaculis urna tempor. Cras sagittis massa sed libero eleifend, ac iaculis urna tempor.
- {% include components/gc-follow-us/follow.html %}
+ {% include gc-follow-us/follow.html %}
diff --git a/templates/organizational/organizational-en.html b/templates/organizational/organizational-en.html
index bcaa17205..b43bba14e 100644
--- a/templates/organizational/organizational-en.html
+++ b/templates/organizational/organizational-en.html
@@ -18,7 +18,7 @@
[Institution name] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis massa sed libero eleifend, ac iaculis urna tempor. Cras sagittis massa sed libero eleifend, ac iaculis urna tempor.
- {% include components/gc-follow-us/follow.html %}
+ {% include gc-follow-us/follow.html %}
diff --git a/templates/organizational/organizational-fr.html b/templates/organizational/organizational-fr.html
index 6493c47d0..7074d03d6 100644
--- a/templates/organizational/organizational-fr.html
+++ b/templates/organizational/organizational-fr.html
@@ -18,7 +18,7 @@
[Nom de l’institution] Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis massa sed libero eleifend, ac iaculis urna tempor. Cras sagittis massa sed libero eleifend, ac iaculis urna tempor.
- {% include components/gc-follow-us/follow.html %}
+ {% include gc-follow-us/follow.html %}
diff --git a/templates/theme-en.html b/templates/theme-en.html
index aa15bfdfa..5b04f267a 100644
--- a/templates/theme-en.html
+++ b/templates/theme-en.html
@@ -15,7 +15,7 @@
{{ page.title }}
1-2 sentences that describe the topics and top tasks that can be accessed on this page.
- {% include components/gc-follow-us/follow.html %}
+ {% include gc-follow-us/follow.html %}
Promotions
diff --git a/templates/theme-fr.html b/templates/theme-fr.html
index 40190d132..4c77e280e 100644
--- a/templates/theme-fr.html
+++ b/templates/theme-fr.html
@@ -15,7 +15,7 @@
{{ page.title }}
1 ou 2 phrases d’introduction qui définissent les sujets et les tâches principales qui peuvent être consultés sur cette page.
- {% include components/gc-follow-us/follow.html %}
+ {% include gc-follow-us/follow.html %}
Promotions
diff --git a/templates/theme-topic/theme-topic-en.md b/templates/theme-topic/theme-topic-en.md
index 7fd7c3d5d..65b29840b 100644
--- a/templates/theme-topic/theme-topic-en.md
+++ b/templates/theme-topic/theme-topic-en.md
@@ -119,7 +119,7 @@ noMainContainer: true
- {%- include components/gc-follow-us/gc-follow-us.html -%}
+ {%- include gc-follow-us/gc-follow-us.html -%}
diff --git a/templates/theme-topic/theme-topic-fr.md b/templates/theme-topic/theme-topic-fr.md
index 44bb98b04..46c2cde64 100644
--- a/templates/theme-topic/theme-topic-fr.md
+++ b/templates/theme-topic/theme-topic-fr.md
@@ -119,7 +119,7 @@ noMainContainer: true
- {% include components/gc-follow-us/gc-follow-us.html %}
+ {% include gc-follow-us/gc-follow-us.html %}
diff --git a/templates/topic/topic-en.html b/templates/topic/topic-en.html
index f7af3cbf4..f12da2397 100644
--- a/templates/topic/topic-en.html
+++ b/templates/topic/topic-en.html
@@ -17,7 +17,7 @@
{{ page.title }}
1-2 sentences that describe the topics and top tasks that can be accessed on this page.
- {% include components/gc-follow-us/follow.html %}
+ {% include gc-follow-us/follow.html %}
diff --git a/templates/topic/topic-fr.html b/templates/topic/topic-fr.html
index bef127990..7ddd581c3 100644
--- a/templates/topic/topic-fr.html
+++ b/templates/topic/topic-fr.html
@@ -17,7 +17,7 @@
{{ page.title }}
1 ou 2 phrases d’introduction qui définissent les sous-sujets et les tâches principales qui peuvent être consultés sur cette page.
- {% include components/gc-follow-us/follow.html %}
+ {% include gc-follow-us/follow.html %}
diff --git a/templates/topic/topic-testcase-1-en.html b/templates/topic/topic-testcase-1-en.html
index 622829fae..6a1213354 100644
--- a/templates/topic/topic-testcase-1-en.html
+++ b/templates/topic/topic-testcase-1-en.html
@@ -17,7 +17,7 @@
{{ page.title }}
1-2 sentences that describe the topics and top tasks that can be accessed on this page.
- {% include components/gc-follow-us/follow.html %}
+ {% include gc-follow-us/follow.html %}
diff --git a/templates/topic/topic-testcase-1-fr.html b/templates/topic/topic-testcase-1-fr.html
index ff2cd5930..f13de0984 100644
--- a/templates/topic/topic-testcase-1-fr.html
+++ b/templates/topic/topic-testcase-1-fr.html
@@ -17,7 +17,7 @@
{{ page.title }}
1 ou 2 phrases d’introduction qui définissent les sous-sujets et les tâches principales qui peuvent être consultés sur cette page.
- {% include components/gc-follow-us/follow.html %}
+ {% include gc-follow-us/follow.html %}