Merge pull request #34 from adobecom/MWPW-142259-socialIcons

MWPW-142259 decorate social icons on a block level
adobecom · Jul 9, 2024 · 5b9c2b7 · 5b9c2b7
2 parents 7e70f40 + 2d42937
commit 5b9c2b7
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 56 deletions.
diff --git a/express/blocks/ax-columns/ax-columns.js b/express/blocks/ax-columns/ax-columns.js
@@ -6,7 +6,7 @@ import {
   transformLinkToAnimation,
 } from '../../scripts/utils/media.js';
 
-import { getIconElementDeprecated } from '../../scripts/utils/icons.js';
+import { decorateSocialIcons, getIconElementDeprecated } from '../../scripts/utils/icons.js';
 import { addHeaderSizing } from '../../scripts/utils/location-utils.js';
 import {
   decorateButtonsDeprecated,
@@ -155,6 +155,7 @@ const handleVideos = (cell, a, block, thumbnail) => {
 
 export default async function decorate(block) {
   splitAndAddVariantsWithDash(block);
+  decorateSocialIcons(block);
   decorateButtonsDeprecated(block, 'button-xxl');
 
   const rows = Array.from(block.children);

diff --git a/express/blocks/image-list/image-list.js b/express/blocks/image-list/image-list.js
@@ -1,8 +1,10 @@
 // eslint-disable-next-line import/no-unresolved
 import { toClassName } from '../../scripts/utils.js';
 import { decorateButtonsDeprecated } from '../../scripts/utils/decorate.js';
+import { decorateSocialIcons } from '../../scripts/utils/icons.js';
 
 export default function decorate(block) {
+  decorateSocialIcons(block);
   decorateButtonsDeprecated(block);
   const rows = Array.from(block.children);
   rows.forEach((row) => {

diff --git a/express/blocks/template-list/template-list.js b/express/blocks/template-list/template-list.js
@@ -9,8 +9,8 @@ import {
 import { addAnimationToggle, createOptimizedPicture, linkImage } from '../../scripts/utils/media.js';
 import { fetchRelevantRows } from '../../scripts/utils/relevant.js';
 
-import { fixIcons, getIconElementDeprecated } from '../../scripts/utils/icons.js';
-import { addTempWrapperDeprecated, decorateButtonsDeprecated, decorateSocialIcons } from '../../scripts/utils/decorate.js';
+import { decorateSocialIcons, fixIcons, getIconElementDeprecated } from '../../scripts/utils/icons.js';
+import { addTempWrapperDeprecated, decorateButtonsDeprecated } from '../../scripts/utils/decorate.js';
 
 import { Masonry } from '../../scripts/widgets/masonry.js';
 

diff --git a/express/scripts/utils/decorate.js b/express/scripts/utils/decorate.js
@@ -1,12 +1,12 @@
-import { getIconDeprecated, getIconElementDeprecated } from './icons.js';
+import { getIconDeprecated } from './icons.js';
 import { getLibs } from '../utils.js';
 
 const { decorateButtons } = await import(`${getLibs()}/utils/decorate.js`);
 
 // This was only added for the blocks premigration. It is not to be used for new blocks.
 export function decorateButtonsDeprecated(el, size) {
   decorateButtons(el, size);
-  el.querySelectorAll(':scope a:not(.con-button)').forEach(($a) => {
+  el.querySelectorAll(':scope a:not(.con-button, .social-link)').forEach(($a) => {
     const originalHref = $a.href;
     const linkText = $a.textContent.trim();
     if ($a.children.length > 0) {
@@ -100,54 +100,3 @@ export function normalizeHeadings(block, allowedHeadings) {
     }
   });
 }
-
-export function decorateSocialIcons($main) {
-  $main.querySelectorAll(':scope a').forEach(($a) => {
-    const urlObject = new URL($a.href);
-
-    if (urlObject.hash === '#embed-video') return;
-    if ($a.closest('.block')?.dataset.blockName === 'embed') return;
-
-    if ($a.href === $a.textContent.trim()) {
-      let icon = '';
-      if (urlObject.hostname === 'www.instagram.com') {
-        icon = 'instagram';
-      }
-      if (urlObject.hostname === 'www.twitter.com') {
-        icon = 'twitter';
-      }
-      if (urlObject.hostname.split('.')[1] === 'pinterest') {
-        icon = 'pinterest';
-      }
-      if (urlObject.hostname.split('.')[1] === 'facebook') {
-        icon = 'facebook';
-      }
-      if (urlObject.hostname === 'www.linkedin.com') {
-        icon = 'linkedin';
-      }
-      if (urlObject.hostname === 'www.youtube.com') {
-        icon = 'youtube';
-      }
-      if (urlObject.hostname === 'www.tiktok.com') {
-        icon = 'tiktok';
-      }
-      const $parent = $a.parentElement;
-      if (!icon && $parent.previousElementSibling && $parent.previousElementSibling.classList.contains('social-links')) {
-        icon = 'globe';
-      }
-
-      if (icon) {
-        $a.innerHTML = '';
-        const $icon = getIconElementDeprecated(icon, 22);
-        $icon.classList.add('social.is-visible');
-        $a.appendChild($icon);
-        if ($parent.previousElementSibling && $parent.previousElementSibling.classList.contains('social-links')) {
-          $parent.previousElementSibling.appendChild($a);
-          $parent.remove();
-        } else {
-          $parent.classList.add('social-links');
-        }
-      }
-    }
-  });
-}
diff --git a/express/scripts/utils/icons.js b/express/scripts/utils/icons.js
@@ -193,3 +193,56 @@ export async function fixIcons(el = document) {
     }
   });
 }
+
+export function decorateSocialIcons(block) {
+  block.querySelectorAll(':scope a').forEach(($a) => {
+    const urlObject = new URL($a.href);
+    if (urlObject.hash === '#embed-video') return;
+    if ($a.closest('.embed')?.dataset.blockName === 'embed') return;
+    if ($a.href === $a.textContent.trim()) {
+      let icon = '';
+      switch (urlObject.hostname) {
+        case 'www.instagram.com':
+          icon = 'instagram';
+          break;
+        case 'www.twitter.com':
+          icon = 'twitter';
+          break;
+        case 'www.linkedin.com':
+          icon = 'linkedin';
+          break;
+        case 'www.youtube.com':
+          icon = 'youtube';
+          break;
+        case 'www.tiktok.com':
+          icon = 'tiktok';
+          break;
+        default: {
+          const secondLevelDomain = urlObject.hostname.split('.')[1];
+          if (secondLevelDomain === 'pinterest') {
+            icon = 'pinterest';
+          } else if (secondLevelDomain === 'facebook') {
+            icon = 'facebook';
+          }
+        }
+      }
+      const $parent = $a.parentElement;
+      if (!icon && $parent.previousElementSibling && $parent.previousElementSibling.classList.contains('social-links')) {
+        icon = 'globe';
+      }
+      if (icon) {
+        $a.textContent = '';
+        const $icon = getIconElementDeprecated(icon, 22);
+        $icon.classList.add('social', 'is-visible');
+        $a.appendChild($icon);
+        $a.classList.add('social-link');
+        if ($parent.previousElementSibling && $parent.previousElementSibling.classList.contains('social-links')) {
+          $parent.previousElementSibling.appendChild($a);
+          $parent.remove();
+        } else {
+          $parent.classList.add('social-links');
+        }
+      }
+    }
+  });
+}