Merge branch 'phase-two-redo' of https://github.com/hlxsites/takeda-ihs…

… into phase-two-redo

blocks/cards/icon.css

@@ -13,7 +13,6 @@
   gap: 24px;
 }
 
-
 .cards.icon.block .card {
   display: flex;
   padding-right:20px;
@@ -52,7 +51,6 @@
 
 .cards.icon.block .card h3 {
   margin-bottom: 1em;
-  mar
   font-size: var(--heading-font-size-xs);
   font-weight: var(--font-weight-bold);
   line-height: var(--line-height-s);
@@ -72,11 +70,13 @@
   .cards.icon.block .row {
     grid-template-columns: repeat(2, 1fr);
   }
+
   .cards.icon.block .card {
     border-right: 1px solid grey;
     border-bottom:0;
 
   }
+
   main .section[data-layout] .cards.icon.block .row {
     grid-template-columns: 1fr;
   }
@@ -87,7 +87,5 @@
   main .section[data-layout] .cards.icon.block .row {
     grid-template-columns: repeat(3, 1fr);
   }
-  .cards.icon.block .card {
 
-  }
 }

blocks/floating-images/floating-images.css

@@ -2,7 +2,6 @@
 
 .section.floating-images-container.grey > div {
   background-color: var(--brand--secondary-subtle);
-
 }
 
 .block.floating-images > div {

blocks/floating-images/floating-images.js

@@ -2,8 +2,6 @@ export default function decorate(block) {
   const container = block.querySelector(':scope > div');
   container.children[0].classList.add('content');
   container.children[1].classList.add('image');
-  const kids = block.children[1];
-  console.log(kids);
   const picture = block.querySelector('picture');
   const img = block.querySelector('img');
 

blocks/footer/footer.css

@@ -1,61 +1,89 @@
 footer {
   margin: 0;
-  padding: 2rem;
+  padding: 0 2rem 2rem;
   text-align: center;
-  background-color: var(--bright-gray);
+  background: linear-gradient(to top, var(--bright-gray) 75%, white 0%);
 }
 
-
 footer .footer.block {
   max-width: 1200px;
   margin: auto;
 }
 
-footer .footer.block > div {
+.footer.block .content-wrapper {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
   gap: 20px;
 }
 
-footer .footer.block > div > div:has(picture) {
-  border-bottom: 2px solid var(--silver);
-  padding-bottom: 20px;
+.footer.block .content-wrapper p {
+  font-size: var(--body-font-size-xs);
+  margin-bottom: 14px;
+  text-align: left;
   width: 100%;
 }
 
-footer .footer.block > div > div:has(p>a) {
+.footer.block .content-wrapper .footer-contact-us {
+  background-color: var(--gray-neutral-80);
+  border-radius: 0 0 10px 10px;
+  padding: 40px 60px;
+}
+
+.footer.block .content-wrapper .footer-contact-us * {
+  color: var(--white);
+}
+
+.footer.block .content-wrapper .footer-contact-us h3 {
+  color: var(--white);
+  font-size: var(--heading-font-size-l);
+  padding-bottom: 30px;
+}
+
+.footer.block .content-wrapper .footer-contact-us p {
+  font-weight: var(--font-weight-semibold);
+  font-size: var(--body-font-size-l);
+  text-align: center;
+  padding-bottom: 30px;
+}
+
+.footer.block .content-wrapper .footer-contact-us a {
+  display: inline-block;
+  padding: 8px 42px;
+  font-weight: normal;
+  line-height: var(--line-height-l);
+  text-decoration: none;
+  color: var(--white);
+  background-color: var(--dark-red);
+  border-bottom-left-radius: 20px;
+}
+
+.footer.block .content-wrapper .footer-logo {
   display: flex;
-  flex-direction: column;
   align-items: flex-start;
-  gap: 0;
+  flex-direction: column;
 }
 
-.footer.block picture {
+.footer.block .content-wrapper .footer-logo p:has(picture) {
+  border-bottom: 2px solid var(--silver);
+}
+
+.footer.block .content-wrapper .footer-logo img {
+  width: 105px;
+  height: auto;
+}
+
+.footer.block .content-wrapper .footer-links {
   display: flex;
-  height: 36px;
-  width: auto;
+  flex-direction: column;
 }
 
-.footer.block a {
+.footer.block .content-wrapper .footer-links p > a {
   color: inherit;
   text-decoration: none;
 }
 
-.footer.block a:hover {
+.footer.block .content-wrapper .footer-links p > a:hover {
   text-decoration: underline;
   opacity: 0.8;
 }
 
-.footer.block > div > div > p {
-  font-size: var(--body-font-size-xs);
-  margin-bottom: 14px;
-  text-align: left;
-}
-
-@media screen and (min-width: 600px) {
-  footer .footer.block > div > div:has(p>a){
-    flex-direction: row;
-    gap: 30px;
-  }
-}

blocks/footer/footer.js

@@ -1,12 +1,13 @@
-import { decorateIcons, getMetadata } from '../../scripts/lib-franklin.js';
+import { decorateSections, getMetadata } from '../../scripts/lib-franklin.js';
+import { createElemWithClass } from '../../scripts/utils.js';
 
 /**
  * loads and decorates the footer
  * @param {Element} block The footer block element
  */
 export default async function decorate(block) {
   const footerMeta = getMetadata('footer');
-  const footerPath = footerMeta ? new URL(footerMeta).pathname : '/footer';
+  const footerPath = footerMeta ? new URL(footerMeta).pathname : '/drafts/phase-two-redo/footer';
   const resp = await fetch(
     `${footerPath}.plain.html`,
     window.location.pathname.endsWith('/footer') ? { cache: 'reload' } : {},
@@ -16,13 +17,14 @@ export default async function decorate(block) {
     const footer = document.createElement('div');
     // decorate footer DOM
     footer.innerHTML = await resp.text();
-
-    // size the footer image
-    const image = footer.querySelector('picture img');
-    image.width = '100';
-    image.height = '36';
-
-    decorateIcons(footer);
-    block.append(footer);
+    decorateSections(footer);
+    const contentWrapper = createElemWithClass('div', 'content-wrapper');
+    footer.querySelectorAll('.section[data-section]').forEach((section) => {
+      const clazz = section.getAttribute('data-section');
+      const wrapper = section.children[0];
+      wrapper.classList.replace('default-content-wrapper', `footer-${clazz}`);
+      contentWrapper.append(wrapper);
+    });
+    block.replaceChildren(contentWrapper);
   }
 }

blocks/form/form.js

@@ -32,19 +32,16 @@ function constructPayload(form) {
 }
 
 async function submissionFailure(error, form) {
-  alert(error); // TODO define error mechansim
   form.setAttribute('data-submitting', 'false');
   form.querySelector('button[type="submit"]').disabled = false;
 }
 
 async function prepareRequest(form, transformer) {
   const { payload } = constructPayload(form);
-  console.log(payload);
   const headers = {
     'Content-Type': 'application/json',
   };
   const body = JSON.stringify({ data: payload });
-  console.log(body);
   const url = form.dataset.submit || form.dataset.action;
   if (typeof transformer === 'function') {
     return transformer({ headers, body, url }, form);
@@ -61,7 +58,6 @@ async function submitForm(form, transformer) {
       headers,
       body,
     });
-    console.log(response);
     if (response.ok) {
       /* window.location.href = form.dataset?.redirect || 'thankyou'; */
     } else {
@@ -336,7 +332,6 @@ async function fetchData(url) {
 async function fetchForm(pathname) {
   // get the main form
   const jsonData = await fetchData(pathname);
-  console.log(jsonData);
   return jsonData;
 }
 
@@ -379,7 +374,6 @@ async function createForm(formURL) {
 
 export default async function decorate(block) {
   const formLink = block.querySelector('a[href$=".json"]');
-  console.log(formLink);
   if (formLink) {
     const form = await createForm(formLink.href);
     formLink.replaceWith(form);