From b81535c4def66bc7073a6f85c2b75dc153e7e783 Mon Sep 17 00:00:00 2001 From: Lakshmishri Date: Mon, 27 Nov 2023 19:59:47 +0530 Subject: [PATCH] Social Block #67 (#261) --- blocks/v2-social-block/v2-social-block.css | 107 +++++++++++++++++++++ blocks/v2-social-block/v2-social-block.js | 87 +++++++++++++++++ icons/link.svg | 3 + placeholder.json | 4 + styles/styles.css | 104 ++++++++++++++++++++ 5 files changed, 305 insertions(+) create mode 100644 blocks/v2-social-block/v2-social-block.css create mode 100644 blocks/v2-social-block/v2-social-block.js create mode 100644 icons/link.svg diff --git a/blocks/v2-social-block/v2-social-block.css b/blocks/v2-social-block/v2-social-block.css new file mode 100644 index 00000000..b3f0b6e0 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/blocks/v2-social-block/v2-social-block.js b/blocks/v2-social-block/v2-social-block.js new file mode 100644 index 00000000..3537ee72 --- /dev/null +++ b/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(); + } + }); +} diff --git a/icons/link.svg b/icons/link.svg new file mode 100644 index 00000000..1c454912 --- /dev/null +++ b/icons/link.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/placeholder.json b/placeholder.json index b933674a..dd304528 100644 --- a/placeholder.json +++ b/placeholder.json @@ -142,6 +142,10 @@ { "Key": "vinformat-length", "Text": "Please fill out this field" + }, + { + "Key": "Copied", + "Text": "Copied!" } ], ":type": "sheet" diff --git a/styles/styles.css b/styles/styles.css index 37e2d0bd..00cecfbd 100644 --- a/styles/styles.css +++ b/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 */ \ No newline at end of file