feat(buttons): add X social button (#2644)

Co-authored-by: Louis-Maxime Piton <louismaxime.piton@orange.com>
Orange-OpenSource · Jul 26, 2024 · e667c29 · e667c29
1 parent 66dff9e
commit e667c29
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 2 deletions.
diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json
@@ -26,11 +26,11 @@
  },
  {
  "path": "./dist/css/boosted.css",
- "maxSize": "44.5 kB"
+ "maxSize": "44.75 kB"
  },
  {
  "path": "./dist/css/boosted.min.css",
- "maxSize": "41.5 kB"
+ "maxSize": "41.75 kB"
  },
  {
  "path": "./dist/js/boosted.bundle.js",

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1078,6 +1078,10 @@ $btn-social-networks: (
  "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>"
+ ),
+ "x": (
+ "color": #1da1f2,
+ "icon": "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 19'><path d='m15.751 0-5.053 5.776L6.328 0H0l7.561 9.888-7.166 8.19h3.068l5.531-6.32 4.834 6.32H20l-7.883-10.42L18.817 0h-3.066ZM3.581 1.74h1.824l10.97 14.502h-1.7L3.58 1.74Z'/></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
@@ -153,6 +153,7 @@ Use `.btn-social` to get a rounded button meant to display contact points links
 <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>
+<a href="#" class="btn btn-icon btn-social btn-x"><span class="visually-hidden">X</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" >}}).

diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
@@ -2144,6 +2144,7 @@ sitemap:
  <li><a href="#" class="btn btn-icon btn-social btn-pinterest"><span class="visually-hidden">Pinterest</span></a></li>
  <li><a href="#" class="btn btn-icon btn-social btn-mail"><span class="visually-hidden">Mail</span></a></li>
  <li><a href="#" class="btn btn-icon btn-social btn-tiktok"><span class="visually-hidden">TikTok</span></a></li>
+ <li><a href="#" class="btn btn-icon btn-social btn-x"><span class="visually-hidden">X</span></a></li>
  </ul>
  </div>
  <div class="border-bottom border-1 border-dark"></div>
@@ -2284,6 +2285,7 @@ sitemap:
  <li><a href="#" class="btn btn-icon btn-social btn-pinterest"><span class="visually-hidden">Pinterest</span></a></li>
  <li><a href="#" class="btn btn-icon btn-social btn-mail"><span class="visually-hidden">Mail</span></a></li>
  <li><a href="#" class="btn btn-icon btn-social btn-tiktok"><span class="visually-hidden">TikTok</span></a></li>
+ <li><a href="#" class="btn btn-icon btn-social btn-x"><span class="visually-hidden">X</span></a></li>
  </ul>
  </div>
  <div class="border-bottom border-1 border-dark"></div>
@@ -2424,6 +2426,7 @@ sitemap:
  <li><a href="#" class="btn btn-icon btn-social btn-pinterest"><span class="visually-hidden">Pinterest</span></a></li>
  <li><a href="#" class="btn btn-icon btn-social btn-mail"><span class="visually-hidden">Mail</span></a></li>
  <li><a href="#" class="btn btn-icon btn-social btn-tiktok"><span class="visually-hidden">TikTok</span></a></li>
+ <li><a href="#" class="btn btn-icon btn-social btn-x"><span class="visually-hidden">X</span></a></li>
  </ul>
  </div>
  <div class="border-bottom border-1 border-dark"></div>
@@ -2564,6 +2567,7 @@ sitemap:
  <li><a href="#" class="btn btn-icon btn-social btn-pinterest"><span class="visually-hidden">Pinterest</span></a></li>
  <li><a href="#" class="btn btn-icon btn-social btn-mail"><span class="visually-hidden">Mail</span></a></li>
  <li><a href="#" class="btn btn-icon btn-social btn-tiktok"><span class="visually-hidden">TikTok</span></a></li>
+ <li><a href="#" class="btn btn-icon btn-social btn-x"><span class="visually-hidden">X</span></a></li>
  </ul>
  </div>
  <div class="border-bottom border-1 border-dark"></div>
@@ -2704,6 +2708,7 @@ sitemap:
  <li><a href="#" class="btn btn-icon btn-social btn-pinterest"><span class="visually-hidden">Pinterest</span></a></li>
  <li><a href="#" class="btn btn-icon btn-social btn-mail"><span class="visually-hidden">Mail</span></a></li>
  <li><a href="#" class="btn btn-icon btn-social btn-tiktok"><span class="visually-hidden">TikTok</span></a></li>
+ <li><a href="#" class="btn btn-icon btn-social btn-x"><span class="visually-hidden">X</span></a></li>
  </ul>
  </div>
  <div class="border-bottom border-1 border-dark"></div>

diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md
@@ -16,6 +16,11 @@ toc: true
 - **Colors**
  - <span class="badge text-bg-warning">Warning</span> The dark mode red color hexadecimal value has been updated from `#f66` to `#ff4d4d` after a change in the design specifications to enhance the contrast for a better accessibility. This modification should be transparent for you except if you were using an hardcoded hexadecimal value directly in your websites.
 
+### Components
+
+#### Buttons
+ - <span class="badge text-bg-success">New</span> X social button.
+
 ### Docs
 
 - Certain variants of the components and renderings have been omitted from the documentation to help you clearly understand what is available for use, thereby simplifying the connection between [Orange Design System]({{< param ods.web >}}) and the Boosted documentation.

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