Merge branch 'main' into 239-sidekickupgrade

hlxsites · Sep 30, 2023 · a14c4f5 · a14c4f5
2 parents 4d5b627 + 917489b
commit a14c4f5
Show file tree

Hide file tree

Showing 30 changed files with 1,234 additions and 181 deletions.
diff --git a/blocks/accordion/accordion.css b/blocks/accordion/accordion.css
@@ -8,7 +8,6 @@ main .section.accordion-container > .default-content-wrapper h2,
 main .section.accordion-container > .default-content-wrapper h3,
 main .section.accordion-container > .default-content-wrapper p {
   max-width: var(--text-max-container);
-  margin: 0;
 }
 
 main .section.accordion-container > .default-content-wrapper h2,
@@ -17,11 +16,12 @@ main .section.accordion-container > .default-content-wrapper h3 {
   font-family: var(--serif-font);
   font-style: normal;
   font-weight: 300;
+  margin: 0;
 }
 
 main .section.accordion-container > .default-content-wrapper p {
   font-size: var(--font-size-16);
-  margin-top: var(--spacer-element-08);
+  margin: var(--spacer-element-08) 0;
 }
 
 main .section.accordion-container blockquote {
@@ -31,7 +31,6 @@ main .section.accordion-container blockquote {
 /* Block - Accordion */
 .accordion {
   padding: 0;
-  margin-top: var(--spacer-element-10);
 }
 
 .accordion .accordion-item {
@@ -102,8 +101,10 @@ main .section.accordion-container blockquote {
 
 .accordion .accordion-arrow-down {
   display: block;
+  flex-shrink: 0;
   width: 32px;
-  height: 19px;
+  height: 20px;
+  margin-left: var(--spacer-element-08);
   transition: all .5s ease-out;
   background: url('../../icons/caret-down-accordion-purple.svg') no-repeat center/contain;
 }

diff --git a/blocks/author-bio/author-bio.css b/blocks/author-bio/author-bio.css
@@ -8,6 +8,11 @@
   margin: var(--spacer-element-08) 0;
 }
 
+.author-bio .author-container {
+  display: flex;
+  align-items: flex-start;
+}
+
 .author-bio .author-container+.author-container {
   margin-top: var(--spacer-element-08);
 }
@@ -35,15 +40,18 @@
   }
 
   .author-bio .author-container {
-    display: flex;
-    align-items: center;
     flex-basis: calc((100% - var(--spacer-element-08)) / 2);
     flex-shrink: 0;
+    min-width: 336px;
   }
 
   .author-bio .author-container+.author-container {
     margin-top: 0;
   }
+
+  .author-bio .author-name {
+    padding-right: var(--spacer-element-03);
+  }
 }
 
 /* Desktop */
@@ -52,6 +60,14 @@
     margin: var(--spacer-element-10) 0;
   }
 
+  .author-bio .author-container {
+    min-width: 360px;
+  }
+
+  .author-bio .author-name {
+    padding-right: 0;
+  }
+
   main .author-bio img.author-img {
     width: 64px;
     height: 64px;

diff --git a/blocks/author-bio/author-bio.js b/blocks/author-bio/author-bio.js
@@ -1,34 +1,73 @@
-import { createTag, getMetadata } from '../../scripts/scripts.js';
+import { createTag, getMetadata, lookupPeople } from '../../scripts/scripts.js';
 import authorsParser from '../../scripts/authors-parser.js';
 
-export default function decorate(block) {
+export default async function decorate(block) {
   const defaultAuthorImageSrc = '../../styles/images/AuthorPlaceholder.svg';
   const defaultAuthor = 'Merative';
 
-  let authors = getMetadata('authors');
+  let authors = [];
   const nameField = 'name';
   const titleField = 'title';
   const imageField = 'image';
   const content = [];
 
-  if (!authors) {
+  // get author details from people/query-index
+  const pathnames = [...block.querySelectorAll('a')].map((a) => {
+    const url = new URL(a.href);
+    if (url.hostname.endsWith('.page') || url.hostname.endsWith('.live') || url.hostname.endsWith('merative.com') || url.hostname.startsWith('localhost')) return url.pathname;
+    return a.href;
+  });
+
+  const peopleList = await lookupPeople(pathnames);
+  if (peopleList.length) {
+    peopleList.forEach((people) => {
+      const author = {};
+      let isAuthorFlag = false;
+
+      // Add name
+      if (people.title && people.title !== '0') {
+        author[nameField] = people.title;
+        isAuthorFlag = true;
+      }
+      // Add image
+      if (people.image !== '0' && people.title !== '0') {
+        const url = new URL(people.image, window.location.href);
+        author[imageField] = url.pathname;
+        isAuthorFlag = true;
+      }
+      // Add title
+      if (people['display-title'] && people['display-title'] !== '0') {
+        author[titleField] = people['display-title'];
+        isAuthorFlag = true;
+      }
+
+      if (isAuthorFlag) {
+        authors.push(author);
+      }
+    });
+  }
+
+  // get author details from meta-data
+  if (authors.length === 0) {
+    const authorMetaData = getMetadata('authors');
+    authors = authorsParser(authorMetaData);
+  }
+
+  // set default author details if authors are not fetched
+  if (!authors || authors.length === 0) {
     authors = [{
       [nameField]: defaultAuthor,
       [imageField]: defaultAuthorImageSrc,
     }];
   }
 
-  const authorsQuantity = authors.length;
-  authors = authorsParser(authors);
-  block.innerHTML = authorsQuantity > 1 ? '' : '';
+  block.innerHTML = '';
 
   authors.forEach((author) => {
     const authorContainer = createTag('div', { class: 'author-container' });
     const authorImageTag = createTag('img', { class: 'author-img', alt: 'author-image' });
     authorImageTag.setAttribute('src', author[imageField] || defaultAuthorImageSrc);
-    authorImageTag.setAttribute('alt', 'author-image');
     const authorNameTag = createTag('div', { class: 'author-name' });
-    authorNameTag.innerHTML = authorsQuantity === 1 ? '' : '';
     const authorNameHighlight = createTag('span', { class: 'author-name-highlight' });
     const authorTitleHighlight = createTag('span', { class: 'author-title-highlight' });
     authorNameHighlight.innerHTML = author[titleField] ? `${author[nameField]},` : author[nameField];

diff --git a/blocks/carousel/carousel.css b/blocks/carousel/carousel.css
@@ -94,10 +94,22 @@ main .section.stat-container.carousel-container div.carousel-wrapper {
     width: fit-content;
 }
 
+.carousel.image-carousel-full-width .carousel-slide img {
+    max-width: inherit;
+    width: 90px;
+    height: 90px;
+}
+
 .carousel.testimonial .carousel-slide div .figure {
     flex-direction: column;
     margin: 0 auto;
     padding-top: var(--spacer-layout-03);
+    max-width: calc(var(--spacer-layout-06) * 5);
+}
+
+.carousel.testimonial .carousel-slide div .figure img {
+    width: var(--spacer-layout-05);
+    height: var(--spacer-layout-05);
 }
 
 .carousel .carousel-slide > div {
@@ -143,20 +155,6 @@ main .section.stat-container.carousel-container div.carousel-wrapper {
     position: relative;
 }
 
-.carousel .carousel-slide > .figure img {
-    border-radius: 50%;
-    height: 64px;
-    width: 64px;
-    margin-bottom: 0;
-    margin-right: var(--spacer-layout-02);
-}
-
-.carousel.image-carousel-full-width .carousel-slide img {
-    max-width: inherit;
-    width: 90px;
-    height: 90px;
-}
-
 .carousel.image-carousel-full-width .carousel-slide-container {
     max-width: 100%;
     display: flex;
@@ -329,7 +327,6 @@ main .section.stat-container.carousel-container div.carousel-wrapper {
 
     main .section div.carousel-wrapper {
         padding-top: var(--spacer-layout-07);
-        padding-bottom: var(--spacer-layout-07);
     }
 
     .section.carousel-container .default-content-wrapper {

diff --git a/blocks/carousel/carousel.js b/blocks/carousel/carousel.js
@@ -105,8 +105,9 @@ function calculateSlideHeight(carousel, slide) {
           textOptions,
         );
         const bodyHeight = parseFloat(bodyStyle.lineHeight) * lineCount;
-        const figureStyle = window.getComputedStyle(slide.querySelector('.figure'));
-        const figureHeight = (figureStyle && figureStyle.height !== 'auto') ? parseFloat(figureStyle.height) : SLIDE_CAPTION_SIZE_WITH_ICON;
+        const figure = slide.querySelector('.figure');
+        const figureStyle = window.getComputedStyle(figure);
+        const figureHeight = (figureStyle && figureStyle.height !== 'auto') ? parseFloat(figure.offsetHeight) : SLIDE_CAPTION_SIZE_WITH_ICON;
         carousel.style.height = `${bodyHeight + figureHeight}px`;
       }
     });

diff --git a/blocks/columns/columns.css b/blocks/columns/columns.css
@@ -22,7 +22,7 @@ main .columns-container h4 {
 
 .columns.terms > div {
   margin-bottom: var(--spacer-layout-04);
-  column-gap: 13px;
+  column-gap: var(--spacer-element-04);
 }
 
 .columns > div:last-of-type {
@@ -290,15 +290,14 @@ main .columns > div > div > h4:first-child {
 
 .section-bottom .columns-2-cols > div > :nth-child(2) h1 {
   font-family: var(--serif-font);
-  margin: var(--spacer-element-09) 0 0;
+  margin: 0;
   font-size: 90px;
   -webkit-text-fill-color: transparent;
   background: var(--gradient-diagonal-up);
   background-clip: text;
   -webkit-background-clip: text; /* stylelint-disable-line */
   border-image-slice: 1;
   border-image-source: var(--gradient-diagonal-up);
-  border-top: 1px solid var(--neutral-sand);
 }
 
 .section-bottom.columns-container {
@@ -313,8 +312,20 @@ main .columns > div > div > h4:first-child {
 }
 
 .section-bottom .columns-2-cols > div > :nth-child(2) {
+  position: relative;
   flex: 1 1 40%;
-  margin: 0 0 0 var(--spacer-layout-05);
+  margin: var(--spacer-element-10) 0 0 calc(42px + var(--spacer-element-05));
+  padding-inline-end: calc(42px + var(--spacer-element-05));
+}
+
+.section-bottom .columns-2-cols > div > :nth-child(2)::before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 1px;
+  background-image: var(--gradient-vertical);
 }
 
 .section-bottom .columns-2-cols {
@@ -385,15 +396,20 @@ main .columns > div > div > h4:first-child {
 
   .section-bottom .columns-2-cols > div {
     flex-flow: row nowrap;
-    gap: 84px;
+    gap: var(--gap-84);
+  }
+
+  .section-bottom .columns-2-cols > div > :nth-child(2) {
+    margin: 0;
+    padding-inline-end: 0;
   }
 
   .columns.quarter-circle > div {
-    gap: 80px;
+    gap: var(--gap-80);
   }
 
   .columns.stretch-last > div {
-    gap: 25px;
+    gap: var(--gap-24);
   }
 
   .columns.stretch-last > div > div,
@@ -415,7 +431,7 @@ main .columns > div > div > h4:first-child {
   }
 
   .section.promo .columns > div {
-    gap: 41px;
+    gap: var(--gap-42);
   }
 
   .columns.terms > div > div:nth-of-type(even) {
@@ -529,7 +545,7 @@ main .columns > div > div > h4:first-child {
   .section.promo .columns.image-end > div > div:last-child {
     display: flex;
     justify-content: flex-end;
-    gap: 20px;
+    gap: var(--spacer-element-06);
   }
 
   .news .columns.quarter-circle.image-start img {
@@ -612,12 +628,12 @@ main .columns > div > div > h4:first-child {
 
   .columns.terms div {
     margin: var(--spacer-element-05) 0 var(--spacer-element-07);
-    column-gap: 120px;
+    column-gap: var(--gap-120);
   }
 
   .columns.stretch-last > div,
   .columns.quarter-circle > div {
-    gap: 120px;
+    gap: var(--gap-120);
   }
 
   .content-band.columns > div > div {