fix(footer): replace twitter with X icon as svg (#1388)

* fix(footer): replace twitter with X icon as svg

* chore(footer): add changeset

* fix(footer): provide textContent for aria-label

.changeset/hungry-experts-design.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-footer-social-link>`: updated twitter logo with X

elements/rh-footer/demo/rh-footer.html

@@ -5,7 +5,7 @@
   <rh-footer-social-link slot="social-links" icon="linkedin"><a href="https://www.linkedin.com/company/red-hat" data-analytics-region="social-links-exit" data-analytics-category="Footer|social-links" data-analytics-text="LinkedIn">LinkedIn</a></rh-footer-social-link>
   <rh-footer-social-link slot="social-links" icon="youtube"><a href="https://www.youtube.com/user/RedHatVideos" data-analytics-region="social-links-exit" data-analytics-category="Footer|social-links" data-analytics-text="YouTube">YouTube</a></rh-footer-social-link>
   <rh-footer-social-link slot="social-links" icon="facebook"><a href="https://www.facebook.com/redhatinc" data-analytics-region="social-links-exit" data-analytics-category="Footer|social-links" data-analytics-text="Facebook">Facebook</a></rh-footer-social-link>
-  <rh-footer-social-link slot="social-links" icon="twitter"><a href="https://twitter.com/RedHat" data-analytics-region="social-links-exit" data-analytics-category="Footer|social-links" data-analytics-text="Twitter">Twitter</a></rh-footer-social-link>
+  <rh-footer-social-link slot="social-links" icon="twitter"><a href="https://twitter.com/RedHat" data-analytics-region="social-links-exit" data-analytics-category="Footer|social-links" data-analytics-text="Twitter">X/Twitter</a></rh-footer-social-link>
   <h3 slot="links" data-analytics-text="Products">Products</h3>
   <ul slot="links">
     <li><a href="https://redhat.com/en/technologies/linux-platforms/enterprise-linux" data-analytics-category="Footer|Products" data-analytics-text="Red Hat Enterprise Linux">Red Hat Enterprise Linux</a></li>

elements/rh-footer/rh-footer-social-link.css

@@ -4,6 +4,10 @@
   --pf-icon--size: var(--rh-footer--social-icon--size, var(--rh-size-icon-02, 24px));
 }
 
+[hidden] {
+  display: none !important;
+}
+
 ::slotted(a) {
   color: var(--_icon-color) !important;
 }

elements/rh-footer/rh-footer-social-link.ts

@@ -29,11 +29,16 @@ export class RhFooterSocialLink extends LitElement {
       const newDiv = oldDiv.cloneNode(true) as Element;
       // remove the _rendered content
       newDiv.querySelectorAll('[_rendered]').forEach(i => i.remove());
-      // NB: icons are restricted to fab set, so as not to require a minor release
-      // rh-icon is slated to deal with this problem in-house
-      newDiv.innerHTML = `<pf-icon icon="${this.icon ?? ''}"
-                                   set="fab"
-                                   loading="eager">${newDiv.innerHTML}</pf-icon>`;
+      /* Temporary fix for x-twitter icon and pf-icon not supporting that icon given font awesome v5 */
+      if (this.icon === 'twitter') {
+        newDiv.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" fill="currentcolor" height="24" width="24" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg><span hidden>${newDiv.innerHTML}</span>`;
+      } else {
+        // NB: icons are restricted to fab set, so as not to require a minor release
+        // rh-icon is slated to deal with this problem in-house
+        newDiv.innerHTML = `<pf-icon icon="${this.icon ?? ''}"
+                                    set="fab"
+                                    loading="eager">${newDiv.innerHTML}</pf-icon>`;
+      }
       // add a11y settings
       newDiv.setAttribute('aria-label', newDiv.textContent || '');
       if (!newDiv.getAttribute('aria-label')) {