From a2ada868c4abcd0ece3f85a58c897448b5ccbdaf Mon Sep 17 00:00:00 2001
From: Saugat <saugat@thinkingbox.com>
Date: Thu, 9 May 2024 11:52:14 -0400
Subject: [PATCH] add social block

---
 blocks/social/social.css | 57 ++++++++++++++++++++++++++++++++++++++++
 blocks/social/social.js  | 31 ++++++++++++++++++++++
 2 files changed, 88 insertions(+)
 create mode 100644 blocks/social/social.css
 create mode 100644 blocks/social/social.js

diff --git a/blocks/social/social.css b/blocks/social/social.css
new file mode 100644
index 0000000..3e444ea
--- /dev/null
+++ b/blocks/social/social.css
@@ -0,0 +1,57 @@
+.social {
+  display: flex;
+  gap: 14px;
+  margin: 0 auto;
+  max-width: var(--grid-container-width);
+}
+
+.section.center .social,
+.social.center {
+  justify-content: center;
+}
+
+.social-item img {
+  width: 28px;
+  height: 28px;  
+}
+
+.social-item a {
+  cursor: pointer;
+}
+
+.social-item a:hover {
+  opacity: 0.8;
+}
+
+.social.small,
+.social.sm {
+  gap: 14px;
+}
+
+.social.medium,
+.social.md {
+  gap: 20px;
+}
+
+.social.large,
+.social.lg {
+  gap: 32px;
+}
+
+.social.small .social-item img,
+.social.sm .social-item img {
+  width: 28px;
+  height: 28px;
+}
+
+.social.medium .social-item img,
+.social.md .social-item img {
+  width: 32px;
+  height: 32px;
+}
+
+.social.large .social-item img,
+.social.lg .social-item img {
+  width: 44px;
+  height: 44px;
+}
diff --git a/blocks/social/social.js b/blocks/social/social.js
new file mode 100644
index 0000000..d9e0985
--- /dev/null
+++ b/blocks/social/social.js
@@ -0,0 +1,31 @@
+export default function init(block) {
+  const rows = block.querySelectorAll(':scope > div')
+
+  rows.forEach(row => {
+    row.classList.add('social-item')
+
+    const picture = row.querySelector('picture').cloneNode(true)
+    const link = row.querySelector('a').cloneNode(true)
+
+    row.innerHTML = ''
+
+    if (link) {
+      const hash = link.href.split('#')[1]
+      if (hash &&
+        (hash.toLowerCase() === 'blank' || hash.toLowerCase() === 'self')
+      ) {
+        link.target = `_${hash}`
+        link.href = link.href.split('#')[0]
+      } else {
+        link.target = '_blank'
+      }
+
+      link.textContent = ''
+      link.appendChild(picture)
+
+      row.appendChild(link)
+    } else {
+      row.appendChild(picture)
+    }
+  })
+}