Social Block #67 (#261)

blocks/v2-social-block/v2-social-block.css

@@ -0,0 +1,107 @@
+.redesign-v2 .section.v2-social-block-container {
+  padding: 40px 16px;
+}
+
+.v2-social-block-container {
+  --social-block-padding: 24px 16px;
+  --social-block-gap: 16px;
+  --social-block-list-gap: 12px;
+}
+
+.v2-social-block {
+  --social-link-color: var(--c-main-black);
+  --social-text-color: var(--c-main-black);
+}
+
+.redesign-v2 .section .v2-social-block-wrapper {
+  padding: var(--social-block-padding);
+  border-radius: 8px;
+}
+
+.v2-social-block-wrapper--black {
+  background-color: var(--c-main-black);
+}
+
+.v2-social-block--black {
+  --social-link-color: var(--c-white);
+  --social-text-color: var(--c-grey-2);
+}
+
+.v2-social-block-wrapper--gray {
+  background-color: var(--c-grey-50);
+}
+
+.v2-social-block__list-wrapper {
+  display: flex;
+  flex-flow: column;
+  gap: var(--social-block-gap);
+  align-items: center;
+}
+
+.v2-social-block__title {
+  font-family: var(--font-family-body);
+  font-size: var(--f-heading-5-font-size);
+  letter-spacing: var(--f-heading-5-letter-spacing);
+  line-height: var(--f-heading-5-line-height);
+  margin-bottom: 0;
+  color: var(--social-text-color);
+}
+
+.v2-social-block__list {
+  list-style-type: none;
+  display: flex;
+}
+
+.v2-social-block__button:any-link {
+  color: var(--social-link-color);
+  background-color: transparent;
+  align-items: center;
+  display: inline-flex;
+  font: var(--f-caption-font-size) / var(--f-caption-line-height) var(--font-family-body);
+  letter-spacing: 0.4px;
+  justify-content: center;
+  max-width: 21.5em;
+  height: 48px;
+  padding: 0 var(--social-block-gap);
+  border-radius: 4px;
+}
+
+.v2-social-block__button:focus-visible {
+  outline: 2px solid var(--light-border-focus);
+  outline-offset: 1px;
+}
+
+.v2-social-block__button .icon svg {
+  height: 24px;
+  width: 24px;
+}
+
+@media screen and (min-width: 744px) {
+  .redesign-v2 .section.v2-social-block-container {
+    padding: 40px 32px;
+  }
+
+  .v2-social-block-container {
+    --social-block-padding: 32px;
+  }
+
+  .v2-social-block__list-wrapper {
+    max-width: 680px;
+    margin: auto;
+  }
+
+  .v2-social-block__list {
+    gap: 16px;
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .redesign-v2 .section.v2-social-block-container {
+    padding: 48px 0;
+  }
+
+  .v2-social-block-container {
+    --social-block-padding: 48px 40px;
+    --social-block-gap: 32px;
+  }  
+}

blocks/v2-social-block/v2-social-block.js

@@ -0,0 +1,87 @@
+import { getTextLabel, unwrapDivs, variantsClassesToBEM } from '../../scripts/common.js';
+
+export default async function decorate(block) {
+  const blockName = 'v2-social-block';
+  const variantClasses = ['black', 'gray'];
+
+  if (block.classList.contains('black')) {
+    block.parentElement.classList.add('v2-social-block-wrapper--black');
+  } else if (block.classList.contains('gray')) {
+    block.parentElement.classList.add('v2-social-block-wrapper--gray');
+  }
+
+  variantsClassesToBEM(block.classList, variantClasses, blockName);
+
+  const headings = block.querySelectorAll('h1, h2, h3, h4, h5, h6');
+  [...headings].forEach((heading) => heading.classList.add(`${blockName}__title`));
+
+  const socialWrapper = block.querySelector(':scope > div');
+  socialWrapper.classList.add(`${blockName}__list-wrapper`);
+
+  const list = socialWrapper.querySelector('ul');
+  let copyAnchor;
+
+  list.classList.add(`${blockName}__list`);
+  list.classList.remove('cta-list');
+
+  [...list.children].forEach((item) => {
+    item.className = '';
+
+    const anchor = item.querySelector('a');
+    if (anchor) {
+      anchor.className = `${blockName}__button`;
+    }
+
+    const copyLink = item.querySelector('.icon-link');
+    if (copyLink) {
+      copyAnchor = anchor;
+      anchor.dataset.tooltip = getTextLabel('Copied');
+
+      anchor.addEventListener('click', async (e) => {
+        e.preventDefault();
+        try {
+          await navigator.clipboard.writeText(`${anchor.href}`);
+          anchor.classList.add('show');
+
+          setTimeout(() => {
+            anchor.classList.remove('show');
+          }, 1000);
+        } catch (err) {
+          /* eslint-disable-next-line no-console */
+          console.error('Failed to copy: ', err);
+        }
+      });
+      anchor.classList.add('tooltip', 'tooltip--top');
+    }
+  });
+  unwrapDivs(block);
+
+  const mobileMQ = window.matchMedia('(max-width: 743px)');
+  const tabletMQ = window.matchMedia('(min-width: 744px)');
+
+  function onMobileChange() {
+    copyAnchor.classList.remove('tooltip--right');
+    copyAnchor.classList.add('tooltip--top');
+  }
+
+  function onTabletChange() {
+    copyAnchor.classList.remove('tooltip--top');
+    copyAnchor.classList.add('tooltip--right');
+  }
+
+  if (mobileMQ.matches) {
+    onMobileChange(mobileMQ);
+  }
+
+  if (tabletMQ.matches) {
+    onTabletChange(tabletMQ);
+  }
+
+  window.addEventListener('resize', () => {
+    if (mobileMQ.matches) {
+      onMobileChange();
+    } else if (tabletMQ.matches) {
+      onTabletChange();
+    }
+  });
+}

placeholder.json

@@ -142,6 +142,10 @@
     {
       "Key": "vinformat-length",
       "Text": "Please fill out this field"
+    },
+    {
+      "Key": "Copied",
+      "Text": "Copied!"
     }
   ],
   ":type": "sheet"

styles/styles.css

@@ -1490,3 +1490,107 @@ main.blue-contract .section.section-with-title p {
   width: 1px;
   white-space: nowrap;
 }
+
+/* generic tooltip styles  starts here */
+.redesign-v2 .tooltip {
+  position: relative;
+}
+
+.redesign-v2 .tooltip::before,
+.redesign-v2 .tooltip::after {
+  position: absolute;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--duration-small) linear, visibility var(--duration-small) linear;
+}
+
+.redesign-v2 .tooltip.show::before,
+.redesign-v2 .tooltip.show::after {
+  opacity: 1;
+  visibility: visible;
+}
+
+.redesign-v2 .tooltip::before {
+  content: attr(data-tooltip);
+  z-index: 2;
+  padding: 4px 8px 5px;
+  white-space: nowrap;
+  color: var(--c-main-black);
+  background: var(--c-white);
+  border-radius: 4px;
+  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 20%), 0 0.3px 0.5px 0 rgb(0 0 0 / 10%);
+}
+
+.redesign-v2 .tooltip::after {
+  content: "";
+  width: 0;
+  height: 0;
+  z-index: 4;
+  filter: drop-shadow(0 6px 4px rgb(0 0 0 / 10%));
+}
+
+/* tooltip position top */
+.redesign-v2 .tooltip--top::before,
+.redesign-v2 .tooltip--top::after {
+  bottom: 60%;
+  left: 50%;
+  transform: translate(-50%);
+  margin-bottom: 15px;
+}
+
+.redesign-v2 .tooltip--top::after {
+  margin-bottom: 8.5px;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 7px solid var(--c-white);
+}
+
+/* tooltip position right */
+.redesign-v2 .tooltip--right::before,
+.redesign-v2 .tooltip--right::after {
+  top: 50%;
+  left: 60%;
+  transform: translate(0, -50%);
+  margin-left: 15px;
+}
+
+.redesign-v2 .tooltip--right::after {
+  margin-left: 8.5px;
+  border-top: 5px solid transparent;
+  border-right: 7px solid var(--c-white);
+  border-bottom: 5px solid transparent;
+}
+
+/* tooltip position left */
+.redesign-v2 .tooltip--left::before,
+.redesign-v2 .tooltip--left::after {
+  top: 50%;
+  right: 60%;
+  transform: translate(0, -50%);
+  margin-right: 15px;
+}
+
+.redesign-v2 .tooltip--left::after {
+  margin-right: 8.5px;
+  border-top: 5px solid transparent;
+  border-left: 7px solid var(--c-white);
+  border-bottom: 5px solid transparent;
+}
+
+/* tooltip position bottom */
+.redesign-v2 .tooltip--bottom::before,
+.redesign-v2 .tooltip--bottom::after {
+  top: 60%;
+  left: 50%;
+  transform: translate(-50%);
+  margin-top: 15px;
+}
+
+.redesign-v2 .tooltip--bottom::after {
+  margin-top: 8.5px;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 7px solid var(--c-white);
+}
+
+/* generic tooltip styles  ends here */