feat(buttons): add TikTok (#1778)

Co-authored-by: Julien Déramond <julien.deramond@orange.com> Co-authored-by: Louis-Maxime Piton <louismaxime.piton@orange.com>
Orange-OpenSource · Jul 4, 2023 · cf565d4 · cf565d4
1 parent 6b76109
commit cf565d4
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 2 deletions.
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
@@ -30,7 +30,7 @@
     },
     {
       "path": "./dist/css/boosted.min.css",
-      "maxSize": "39.25 kB"
+      "maxSize": "39.5 kB"
     },
     {
       "path": "./dist/js/boosted.bundle.js",

diff --git a/.cspell.json b/.cspell.json
@@ -121,6 +121,7 @@
     "tabbable",
     "tarteaucitron",
     "textareas",
+    "tiktok",
     "toggleable",
     "topbar",
     "touchend",

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1041,6 +1041,10 @@ $btn-social-networks: (
     "color": red,
     "icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M16 2a14 14 0 00-5 27v-4l2-7-1-2c0-2 1-3 3-3l1 2-1 4c0 2 1 3 2 3 3 0 5-3 5-7 0-3-3-5-6-5-4 0-6 3-6 6l1 3a302 302 0 01-1 2c-2-1-3-3-3-5 0-5 3-9 9-9 5 0 9 4 9 8 0 5-3 9-7 9l-4-2v4l-2 3a14 14 0 0018-13c0-8-6-14-14-14z'/></svg>",
     "size": 1.375rem
+  ),
+  "tiktok": (
+    "color": #ff2c55,
+    "icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path d='M7.024 30.054C4.584 28.212 3 25.235 3 21.876c0-5.59 4.39-10.123 9.805-10.123.45 0 .899.031 1.345.094v5.6a4.363 4.363 0 0 0-1.361-.218c-2.477 0-4.485 2.074-4.485 4.631 0 1.809 1.003 3.374 2.467 4.137l.31.146a4.348 4.348 0 0 0 1.708.348c2.471 0 4.476-2.065 4.484-4.615V0h5.335v.704c.02.211.046.42.082.63l.08.404a7.668 7.668 0 0 0 3.306 4.769A7.22 7.22 0 0 0 30 7.665V8.83l-.199-.047-.182-.047.381.094v4.312a12.4 12.4 0 0 1-7.392-2.443v11.177c0 5.591-4.39 10.124-9.804 10.124-2.02 0-3.898-.63-5.458-1.712l-.322-.234Z'/></svg>"
   )
 ) !default;
 // scss-docs-end social-buttons

diff --git a/site/content/docs/5.3/components/buttons.md b/site/content/docs/5.3/components/buttons.md
@@ -133,6 +133,7 @@ Use `.btn-social` to get a rounded button meant to display contact points links
 <a href="#" class="btn btn-icon btn-social btn-snapchat"><span class="visually-hidden">Snapchat</span></a>
 <a href="#" class="btn btn-icon btn-social btn-pinterest"><span class="visually-hidden">Pinterest</span></a>
 <a href="#" class="btn btn-icon btn-social btn-mail"><span class="visually-hidden">Mail</span></a>
+<a href="#" class="btn btn-icon btn-social btn-tiktok"><span class="visually-hidden">TikTok</span></a>
 {{< /example >}}
 
 Supported social networks are declared in a dedicated Sass map—meaning you're able to [add or remove a network from the following map]({{< docsref "/customize/sass#maps-and-loops" >}}).
@@ -186,6 +187,7 @@ Add `.btn-inverse` to the `.btn` for a dark variant.
 <a href="#" class="btn btn-icon btn-inverse btn-social btn-snapchat"><span class="visually-hidden">Snapchat</span></a>
 <a href="#" class="btn btn-icon btn-inverse btn-social btn-pinterest"><span class="visually-hidden">Pinterest</span></a>
 <a href="#" class="btn btn-icon btn-inverse btn-social btn-mail"><span class="visually-hidden">Mail</span></a>
+<a href="#" class="btn btn-icon btn-inverse btn-social btn-tiktok"><span class="visually-hidden">TikTok</span></a>
 {{< /example >}}
 <!-- End mod -->
 

diff --git a/site/content/docs/5.3/components/footer.md b/site/content/docs/5.3/components/footer.md
@@ -54,7 +54,11 @@ This footer bar is a container with a `.footer-title-content` class. This contai
 
 ### Follow us bar
 
-This footer bar is a container with `.footer-social` class into which a list of social media icons can be added:
+This footer bar is a container with `.footer-social` class into which a list of social media icons can be added.
+
+{{< callout info >}}
+Other social media are available. See the full list of our [Social buttons]({{< docsref "/components/buttons#social-buttons" >}}).
+{{< /callout >}}
 
 {{< example class="p-0" >}}
 {{< orange-footer follow=true >}}

diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md
@@ -66,6 +66,7 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz
 
 - **Buttons**
   - <span class="badge bg-success">New</span> Outlined button `.btn-outline-secondary` is now provided. It is basically `.btn-secondary` with default transparent background.
+  - <span class="badge bg-success">New</span> TikTok social button.
 
 - **Cards**
   - Cards now have a `color` set on them to improve rendering across color modes.

diff --git a/site/layouts/shortcodes/orange-footer.html b/site/layouts/shortcodes/orange-footer.html
@@ -53,6 +53,7 @@ <h3 class="footer-heading me-md-3">Follow us</h3>
         <li><a href="#" class="btn btn-icon btn-social btn-snapchat btn-inverse"><span class="visually-hidden">Snapchat</span></a></li>
         <li><a href="#" class="btn btn-icon btn-social btn-pinterest btn-inverse"><span class="visually-hidden">Pinterest</span></a></li>
         <li><a href="#" class="btn btn-icon btn-social btn-mail btn-inverse"><span class="visually-hidden">Mail</span></a></li>
+        <li><a href="#" class="btn btn-icon btn-social btn-tiktok btn-inverse"><span class="visually-hidden">TikTok</span></a></li>
       {{- end }}
     </ul>
   </div>