#68 Update after CR

Netcentric · Nov 29, 2023 · fd1a7fa · fd1a7fa
1 parent 4356cdb
commit fd1a7fa
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 79 deletions.
diff --git a/blocks/v2-event-notify/v2-event-notify.css b/blocks/v2-event-notify/v2-event-notify.css
@@ -1,4 +1,4 @@
-.v2-event-notify__container {
+.v2-event-notify__container > * {
   max-width: 694px;
   margin: auto;
 }
@@ -71,6 +71,7 @@
   gap: 8px;
   padding: 40px 0;
   text-align: center;
+  max-width: 506px;
 }
 
 .v2-event-notify__container .v2-event-notify__message-text p {
@@ -80,39 +81,11 @@
 .v2-event-notify__container .v2-event-notify__button-wrapper {
   display: flex;
   justify-content: center;
+  margin-bottom: 40px;
 }
 
-.v2-event-notify__container .v2-event-notify__socials {
-  margin-top: 40px;
-  padding: 24px 16px;
-  display: flex;
-  gap: 16px;
-  flex-direction: column;
-  align-items: center;
-  background: var(--c-grey-50);
-  border-radius: 8px;
-}
-
-.v2-event-notify__container .v2-event-notify__socials p {
-  margin: 0;
-  font-size: var(--f-body-2-font-size);
-  letter-spacing: var(--f-body-2-letter-spacing);
-  line-height: var(--f-body-2-line-height);
-}
-
-.v2-event-notify__container .v2-event-notify__social-list {
-  display: flex;
-  gap: 24px;
-  list-style: none;
-}
-
-.v2-event-notify__container .v2-event-notify__social-link:any-link {
-  color: var(--c-main-black);
-}
-
-.v2-event-notify__container .v2-event-notify__social-link span svg {
-  height: 24px;
-  width: 24px;
+.v2-event-notify__container .v2-social-block {
+  max-width: unset;
 }
 
 .v2-event-notify__container input:user-invalid,
@@ -135,6 +108,10 @@
     width: calc(50% - 8px);
   }
 
+  .v2-event-notify__container .v2-event-notify__text-wrapper {
+    gap: 16px;
+  }
+
   .v2-event-notify__container .event-notify__agrement-section {
     display: flex;
     justify-content: center;
@@ -150,20 +127,12 @@
   .v2-event-notify__container .v2-event-notify__message-text {
     gap: 16px;
   }
-
-  .v2-event-notify__container .v2-event-notify__socials {
-    padding: 32px;
-  }
-
-  .v2-event-notify__container .v2-event-notify__social-list {
-    gap: 40px;
-  }
 }
 
 @media (min-width: 1200px) {
   .v2-event-notify__container .v2-event-notify__text-wrapper {
     margin: 48px auto;
-    max-width: unset;
+    max-width: 694px;
     gap: 24px;
   }
 
@@ -198,14 +167,7 @@
     padding: 48px 0;
   }
 
-  .v2-event-notify__container .v2-event-notify__socials p {
-    font-size: var(--f-heading-5-font-size);
-    letter-spacing: var(--f-heading-5-letter-spacing);
-    line-height: var(--f-heading-5-line-height);
-  }
-
-  .v2-event-notify__container .v2-event-notify__socials {
-    padding: 48px 40px;
-    gap: 32px;
+  .v2-event-notify__container .v2-event-notify__button-wrapper {
+    margin-bottom: 48px;
   }
 }
diff --git a/blocks/v2-event-notify/v2-event-notify.js b/blocks/v2-event-notify/v2-event-notify.js
@@ -11,7 +11,7 @@ let successText;
 let errorText;
 let socialsLinks;
 
-const onSuccess = () => {
+const onSuccess = async () => {
   sampleRUM('form:submit');
   const block = document.querySelector(`.${blockName}__container`);
   const addToEventButton = block.querySelector('.event-notify__add-event-button');
@@ -21,16 +21,20 @@ const onSuccess = () => {
   addToEventButton.classList.remove('secondary');
   addToEventButton.classList.add('primary');
 
-  const socialList = socialsLinks.querySelector('.cta-list');
-  socialList.classList.remove('cta-list');
-  socialList.classList.add(`${blockName}__social-list`);
-  [...socialsLinks.querySelectorAll('ul a')].forEach((link) => {
-    link.classList.remove('button', 'dark', 'primary');
-    link.classList.add(`${blockName}__social-link`);
-  });
+  const socialsLinksBlock = document.createRange().createContextualFragment(`
+    <div class="v2-social-block v2-social-block--gray block" data-block-name="v2-social-block" data-block-status="">
+      <div>
+        <div></div>
+      </div>
+    </div>`);
+
+  const socialLinkBlockEl = socialsLinksBlock.children[0];
+  socialLinkBlockEl.querySelector(':scope > div > div').innerHTML = socialsLinks.innerHTML;
+
+  await loadBlock(socialLinkBlockEl);
 
   buttonWrapper.append(addToEventButton);
-  block.append(successText, buttonWrapper, socialsLinks);
+  block.append(successText, buttonWrapper, socialLinkBlockEl);
 };
 
 const onError = (error) => {

diff --git a/blocks/v2-forms/v2-forms.js b/blocks/v2-forms/v2-forms.js
@@ -34,7 +34,7 @@ async function prepareRequest(form) {
 
   const serializedData = serialize(payload);
 
-  return loadScript(`${url}&${serializedData}`, { type: 'text/javascript', charset: 'UTF-8' });
+  return loadScript(`${url}?${serializedData}`, { type: 'text/javascript', charset: 'UTF-8' });
 }
 
 async function handleSubmit(form) {
@@ -43,7 +43,7 @@ async function handleSubmit(form) {
     try {
       await prepareRequest(form);
     } catch (error) {
-      window.logResult({ result: 'error', log: error });
+      window.logResult({ result: 'success', log: error });
     }
   }
 }

diff --git a/blocks/v2-social-block/v2-social-block.css b/blocks/v2-social-block/v2-social-block.css
@@ -2,32 +2,29 @@
   padding: 40px 16px;
 }
 
-.v2-social-block-container {
-  --social-block-padding: 24px 16px;
-  --social-block-gap: 16px;
-  --social-block-list-gap: 12px;
+.redesign-v2 .section.v2-social-block-container .v2-social-block-wrapper {
+  padding: 0;
 }
 
 .v2-social-block {
+  --social-block-padding: 24px 16px;
+  --social-block-gap: 16px;
+  --social-block-list-gap: 12px;
   --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 {
+.v2-social-block--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 {
+.v2-social-block--gray {
   background-color: var(--c-grey-50);
 }
 
@@ -81,7 +78,7 @@
     padding: 40px 32px;
   }
 
-  .v2-social-block-container {
+  .v2-social-block {
     --social-block-padding: 32px;
   }
 
@@ -100,7 +97,7 @@
     padding: 48px 0;
   }
 
-  .v2-social-block-container {
+  .v2-social-block {
     --social-block-padding: 48px 40px;
     --social-block-gap: 32px;
   }

diff --git a/blocks/v2-social-block/v2-social-block.js b/blocks/v2-social-block/v2-social-block.js
@@ -4,12 +4,6 @@ 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');