Removed false parameters, added custom styling

Added 'display: block' to .more-ways class
wet-boew · Jul 12, 2024 · ec91fd5 · ec91fd5
1 parent 6e4a488
commit ec91fd5
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 13 deletions.
diff --git a/components/gc-follow-us/_base.scss b/components/gc-follow-us/_base.scss
@@ -125,7 +125,7 @@ $social-media-icons-size: 38px;
 		&.list-inline {
 			padding-inline-start: 0;
 
-			li {
+			li:not(.more-ways) {
 				display: inline-block;
 				padding-right: 0;
 
@@ -182,6 +182,10 @@ $social-media-icons-size: 38px;
 			@extend %social-media-icons-gc-followus-logo-properties;
 			background-image: url("../assets/gc-follow-us/linkedin.svg");
 		}
+
+		.more-ways {
+			display: block;
+		}
 	}
 }
 
@@ -299,6 +303,7 @@ $social-media-icons-size: 38px;
 		@extend %social-media-icons-followus-logo-properties;
 		@extend %social-media-icons-logo-email;
 	}
+
 }
 
 // Added social media icons

diff --git a/components/gc-follow-us/gc-follow-us-en.html b/components/gc-follow-us/gc-follow-us-en.html
@@ -1,7 +1,7 @@
 ---
 {
 	"altLangPage": "gc-follow-us-fr.html",
-	"dateModified": "2024-02-02",
+	"dateModified": "2024-07-11",
 	"description": "Working examples for the social media channels design pattern.",
 	"language": "en",
 	"title": "Social media channels",
@@ -14,11 +14,11 @@
 <div class="wb-prettify all-pre hide"></div>
 
 <h2 class="mrgn-bttm-lg">Vertical layout</h2>
-{%- include gc-follow-us/gc-follow-us.html isInline=false -%}
+{%- include gc-follow-us/gc-follow-us.html -%}
 
 <details>
 	<summary>Code</summary>
-	{% highlight html %}{%- include gc-follow-us/gc-follow-us.html isInline=false -%}{% endhighlight %}
+	{% highlight html %}{%- include gc-follow-us/gc-follow-us.html -%}{% endhighlight %}
 </details>
 
 <h2 class="mrgn-bttm-lg">Horizontal layout</h2>
@@ -28,3 +28,19 @@ <h2 class="mrgn-bttm-lg">Horizontal layout</h2>
 	<summary>Code</summary>
 	{% highlight html %}{%- include gc-follow-us/gc-follow-us.html isInline=true -%}{% endhighlight %}
 </details>
+
+<h2 class="mrgn-bttm-lg">Vertical layout with 'More ways to connect'</h2>
+{%- include gc-follow-us/gc-follow-us.html moreWays=true -%}
+
+<details>
+	<summary>Code</summary>
+	{% highlight html %}{%- include gc-follow-us/gc-follow-us.html moreWays=true -%}{% endhighlight %}
+</details>
+
+<h2 class="mrgn-bttm-lg">Horizontal layout with 'More ways to connect'</h2>
+{%- include gc-follow-us/gc-follow-us.html isInline=true moreWays=true -%}
+
+<details>
+	<summary>Code</summary>
+	{% highlight html %}{%- include gc-follow-us/gc-follow-us.html isInline=true moreWays=true -%}{% endhighlight %}
+</details>
diff --git a/components/gc-follow-us/gc-follow-us-fr.html b/components/gc-follow-us/gc-follow-us-fr.html
@@ -1,7 +1,7 @@
 ---
 {
 	"altLangPage": "gc-follow-us-en.html",
-	"dateModified": "2024-02-02",
+	"dateModified": "2024-07-11",
 	"description": "Exemples pratiques pour le bloc des réseaux de médias sociaux.",
 	"language": "fr",
 	"title": "Bloc des réseaux de médias sociaux",
@@ -14,17 +14,33 @@
 <div class="wb-prettify all-pre hide"></div>
 
 <h2 class="mrgn-bttm-lg">Disposition verticale</h2>
-{%- include gc-follow-us/gc-follow-us.html isInline=false -%}
+{%- include gc-follow-us/gc-follow-us.html isInline=false moreWays=false -%}
 
 <details>
 	<summary>Code</summary>
-	{% highlight html %}{%- include gc-follow-us/gc-follow-us.html isInline=false -%}{% endhighlight %}
+	{% highlight html %}{%- include gc-follow-us/gc-follow-us.html isInline=false moreWays=false -%}{% endhighlight %}
 </details>
 
 <h2 class="mrgn-bttm-lg">Disposition horizontale</h2>
-{%- include gc-follow-us/gc-follow-us.html isInline=true -%}
+{%- include gc-follow-us/gc-follow-us.html isInline=true moreWays=false -%}
 
 <details>
 	<summary>Code</summary>
-	{% highlight html %}{%- include gc-follow-us/gc-follow-us.html isInline=true -%}{% endhighlight %}
+	{% highlight html %}{%- include gc-follow-us/gc-follow-us.html isInline=true moreWays=false -%}{% endhighlight %}
+</details>
+
+<h2 class="mrgn-bttm-lg">Disposition verticale avec « D'autres moyens de rester en contact »</h2>
+{%- include gc-follow-us/gc-follow-us.html isInline=false moreWays=true -%}
+
+<details>
+	<summary>Code</summary>
+	{% highlight html %}{%- include gc-follow-us/gc-follow-us.html isInline=false moreWays=true -%}{% endhighlight %}
+</details>
+
+<h2 class="mrgn-bttm-lg">Disposition horizontale avec « D'autres moyens de rester en contact »</h2>
+{%- include gc-follow-us/gc-follow-us.html isInline=true moreWays=true -%}
+
+<details>
+	<summary>Code</summary>
+	{% highlight html %}{%- include gc-follow-us/gc-follow-us.html isInline=true moreWays=true -%}{% endhighlight %}
 </details>
diff --git a/components/gc-follow-us/includes/gc-follow-us.html b/components/gc-follow-us/includes/gc-follow-us.html
@@ -46,6 +46,17 @@ <h2>{%- if page.language == "fr" -%}Dans les médias sociaux{%- else -%}On socia
 				{%- endif -%}
 			</a>
 		</li>
+		{% if include.moreWays %}
+		<li class="more-ways">
+			<a href="#">
+				{%- if page.language == "fr" -%}
+					D'autres moyens de rester en contact
+				{%- else -%}
+					More ways to connect
+				{%- endif -%}
+			</a>
+		</li>
+		{% endif %}
 	</ul>
 </section>
 <section id="facebook" class="modal-dialog modal-content overlay-def mfp-hide">

diff --git a/components/gc-follow-us/index.json-ld b/components/gc-follow-us/index.json-ld
@@ -1,6 +1,6 @@
 {
 	"@context": {
-		"@version": 2.0,
+		"@version": 2.1,
 		"dct": "http://purl.org/dc/terms/",
 		"title": { "@id": "dct:title", "@container": "@language" },
 		"description": { "@id": "dct:description", "@container": "@language" },
@@ -17,7 +17,7 @@
 	"modified": "2024-02-05",
 	"componentName": "gc-follow-us",
 	"status": "stable",
-	"version": "2.0",
+	"version": "2.1",
 	"pages": {
 		"docs": [
 			{
@@ -72,6 +72,8 @@
 			],
 			"history": [
 				{
+					"en": "July 2024 - Removed all occurences of parameters defined to false in the include commands.",
+					"fr": "Juillet 2024 - Suppression de toutes les occurrences des paramètres définis sur false dans les commandes include.",
 					"en": "February 2024 - Initial implementation of the variation.",
 					"fr": "Février 2024 - Implémentation initiale de la variante."
 				}
@@ -125,12 +127,14 @@
 				"en": [
 					"Refer to the below code sample.",
 					"To display the icons horizontally, add the CSS class \"<code>list-inline</code>\" to the <code>&lt;ul></code>.",
-					"If there is more than one account from a single platform, make them available via an <a href=\"https://wet-boew.github.io/wet-boew/demos/overlay/overlay-en.html\">overlay (popup)</a>."
+					"If there is more than one account from a single platform, make them available via an <a href=\"https://wet-boew.github.io/wet-boew/demos/overlay/overlay-en.html\">overlay (popup)</a>.",
+					"Information on how to display the 'More ways to connect' link will be available soon."
 				],
 				"fr": [
 					"Référez-vous à l'exemple de code ci-dessous.",
 					"Pour afficher les icônes horizontalement, ajoutez la classe CSS \"<code>list-inline</code>\" au <code>&lt;ul></code>.",
-					"S’il y a plus d’un compte pour une même plateforme, énumérez-les dans un <a href=\"https://wet-boew.github.io/wet-boew/demos/overlay/overlay-fr.html\">contenu superposé (popup)</a>."
+					"S’il y a plus d’un compte pour une même plateforme, énumérez-les dans un <a href=\"https://wet-boew.github.io/wet-boew/demos/overlay/overlay-fr.html\">contenu superposé (popup)</a>.",
+					"Des informations sur la façon d'afficher le lien « D'autres moyens de rester en contact » seront disponibles bientôt."
 				]
 			},
 			"sample": {
@@ -188,6 +192,15 @@
 		}
 	],
 	"iteration": [
+		{
+			"@id": "_:iteration_gc_follow_3",
+			"name": "GC Follow us - Iteration 3",
+			"date": "2024-07",
+			"detectableBy": ".gc-followus",
+			"additions": [
+				"New link for more ways to connect."
+			]
+		},
 		{
 			"@id": "_:iteration_gc_follow_2",
 			"name": "GC Follow us - Iteration 2",