feat(quick-links): Add POC LinkTree/Bitly template for showing quick links

blocks/blog-home/blog-home.css

@@ -716,9 +716,9 @@ h5 {
 
 /* Desktop styles */
 @media only screen and (min-width: 1200px) {
-    .thought-leadership-home.main,
-    .blog-home.main {
-    padding-top: calc(var(--nav-height) + 37px);
+  .thought-leadership-home.main,
+  .blog-home.main {
+    padding-top: var(--nav-height-desktop);
   }
 
   main .section.thought-leadership-home-container,

blocks/header/header.css

@@ -471,7 +471,7 @@ header nav .nav-sections > ul > li {
   header nav .nav-sections > ul > li[aria-expanded='true']::after {
     content: '';
     position: fixed;
-    top: calc(var(--nav-height) + 37px);
+    top: var(--nav-height-desktop);
     bottom: 0;
     left: 0;
     right: 0;
@@ -486,7 +486,7 @@ header nav .nav-sections > ul > li {
     grid-template-columns: repeat(3, 1fr);
     gap: 3.5rem 5.937rem;
     justify-content: space-between;
-    top: calc(var(--nav-height) + 37px);
+    top: var(--nav-height-desktop);
     left: 0;
     width: 100vw;
     height: auto;

blocks/pdf-viewer/pdf-viewer.css

@@ -15,7 +15,7 @@ body.document .section.leadspace-container > div:first-child > .leadspace.docume
   border-radius: 10px;
   overflow: hidden;
   background-color: var(--neutral-white);
-  box-shadow: 0 var(--spacer-element-03) var(--spacer-element-07) rgba(0 0 0 / 15%);
+  box-shadow: var(--box-shadow-large);
 }
 
 .pdf-viewer.embed-mode--full-window {

blocks/quick-links-buttons/quick-links-buttons.css

@@ -0,0 +1,103 @@
+/* Block - Quick Links Buttons */
+.quick-links-buttons .quick-links-buttons__item {
+  padding: 0 var(--spacer-element-07);
+  margin-bottom: var(--spacer-element-05);
+}
+
+.quick-links-buttons .quick-links-buttons__item:last-child {
+  margin-bottom: 0;
+}
+
+/* Brand - Base Button */
+.quick-links-buttons .quick-links-buttons__item a {
+  width: 100%;
+  display: block;
+  text-align: center;
+  text-decoration: none;
+  font-family: var(--sans-serif-font-medium);
+  font-size: var(--font-size-14);
+  font-weight: 500;
+  letter-spacing: var(--letter-spacing-1);
+  padding: var(--spacer-element-04) var(--spacer-element-07);
+  border-radius: 40px;
+  color: var(--primary-purple);
+  border-width: 2px;
+  border-color: var(--primary-purple);
+  border-style: solid;
+  background-color: transparent;
+  transition: all .25s ease-in;
+}
+
+.quick-links-buttons .quick-links-buttons__item a:hover {
+  color: var(--neutral-white) !important;
+  background-color: var(--primary-purple);
+}
+
+/* Brand - Curam */
+.quick-links-buttons.color-curam .quick-links-buttons__item a {
+  color: var(--secondary-orange);
+  border-color: var(--secondary-orange);
+}
+
+/* Brand - Health Insights */
+.quick-links-buttons.color-health-insights .quick-links-buttons__item a {
+  color: var(--primary-purple);
+  border-color: var(--primary-purple);
+}
+
+/* Brand - Merge */
+.quick-links-buttons.color-merge .quick-links-buttons__item a {
+  color: var(--secondary-magenta);
+  border-color: var(--secondary-magenta);
+}
+
+/* Brand - MarketScan */
+.quick-links-buttons.color-marketscan .quick-links-buttons__item a {
+  color: var(--secondary-red);
+  border-color: var(--secondary-red);
+}
+
+/* Brand - Micromedex */
+.quick-links-buttons.color-micromedex .quick-links-buttons__item a {
+  color: var(--secondary-blue);
+  border-color: var(--secondary-blue);
+}
+
+/* Brand - Base Button Hover */
+.quick-links-buttons.color-curam .quick-links-buttons__item a:hover {
+  background-color: var(--secondary-orange);
+}
+
+.quick-links-buttons.color-health-insights .quick-links-buttons__item a:hover {
+  background-color: var(--primary-purple);
+}
+
+.quick-links-buttons.color-merge .quick-links-buttons__item a:hover {
+  background-color: var(--secondary-magenta);
+}
+
+.quick-links-buttons.color-marketscan .quick-links-buttons__item a:hover {
+  background-color: var(--secondary-red);
+}
+
+.quick-links-buttons.color-micromedex .quick-links-buttons__item a:hover {
+  background-color: var(--secondary-blue);
+}
+
+.quick-links-buttons.color-zelta .quick-links-buttons__item a:hover {
+  background-color: var(--secondary-green);
+}
+
+/* Tablet */
+@media only screen and (min-width: 768px) {
+  /* Block - Quick Links Buttons */
+  .quick-links-buttons .quick-links-buttons__item {
+    padding: 0 var(--spacer-element-10);
+    margin-bottom: var(--spacer-element-07);
+  }
+
+  /* Brand - Base Button */
+  .quick-links-buttons .quick-links-buttons__item a {
+    font-size: var(--font-size-16);
+  }
+}

blocks/quick-links-buttons/quick-links-buttons.js

@@ -0,0 +1,10 @@
+export default function decorate(block) {
+  const blockName = block.getAttribute('data-block-name');
+  if (!blockName) {
+    return;
+  }
+
+  [...block.children].forEach((element) => {
+    element.classList.add(`${blockName}__item`);
+  });
+}

blocks/quick-links-header/quick-links-header.css

@@ -0,0 +1,54 @@
+/* Section - Quick Links Header */
+main > .section.quick-links-header-container {
+  border-bottom: 1px solid var(--neutral-sand);
+}
+
+main > .section.quick-links-header-container > div {
+  padding: 0;
+}
+
+/* Block - Quick Links Header */
+.quick-links-header .quick-links-header__inner {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 var(--spacer-element-07) !important;
+  height: var(--gap-84);
+}
+
+.quick-links-header .quick-links-header__col {
+  width: 50%;
+  line-height: 75%;
+}
+
+.quick-links-header .quick-links-header__col-2 {
+  text-align: right;
+  margin-left: auto;
+}
+
+.quick-links-header a {
+  display: inline-block;
+}
+
+.quick-links-header .icon {
+  display: block;
+}
+
+.quick-links-header .icon svg {
+  width: auto;
+  height: var(--spacer-element-07);
+}
+
+/* Tablet */
+@media only screen and (min-width: 768px) {
+  /* Block - Quick Links Header */
+  .quick-links-header .quick-links-header__inner {
+    padding: 0 var(--spacer-element-10) !important;
+    height: var(--gap-120);
+  }
+
+  .quick-links-header .icon svg {
+    width: auto;
+    height: var(--spacer-element-09);
+  }
+}

blocks/quick-links-header/quick-links-header.js

@@ -0,0 +1,21 @@
+export default function decorate(block) {
+  const blockName = block.getAttribute('data-block-name');
+  if (!blockName) {
+    return;
+  }
+
+  [...block.children].forEach((element) => {
+    element.classList.add(`${blockName}__inner`);
+
+    // Find all the div elements within the inner content class
+    const innerElements = element.querySelectorAll(`.${blockName}__inner div`);
+
+    // Add the class to column and append a number to each of these div elements
+    let counter = 1;
+    innerElements.forEach((divElement) => {
+      const newClass = `${blockName}__col-${counter}`;
+      divElement.classList.add(`${blockName}__col`, newClass);
+      counter += 1; // Use prefix notation to increment the counter
+    });
+  });
+}

blocks/quick-links-socials/quick-links-socials.css

@@ -0,0 +1,64 @@
+/* Section - Quick Links Socials */
+main .section .quick-links-socials-wrapper,
+main .section > .quick-links-socials-wrapper:last-child {
+  margin-top: var(--spacer-layout-05);
+}
+
+/* Block - Quick Links Socials */
+.quick-links-socials {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gap-16)
+}
+
+.quick-links-socials .quick-links-socials__item {
+  text-align: center;
+  width: var(--spacer-element-10);
+}
+
+.quick-links-socials .quick-links-socials__item a {
+  display: inline-block;
+  width: var(--spacer-element-10);
+  height: var(--spacer-element-10);
+  border-radius: 50%;
+  text-align: center;
+  border: 2px solid var(--neutral-sand);
+  background-image: var(--gradient-to-right-white);
+  background-position: 0 0;
+  background-size: 200% auto;
+  transition: all .3s ease-in-out;
+}
+
+.quick-links-socials .quick-links-socials__item a:hover {
+  background-image: var(--gradient-to-right);
+  background-position: 100% 0;
+}
+
+.quick-links-socials .quick-links-socials__item a span {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+}
+
+.quick-links-socials .quick-links-socials__item a span svg {
+  height: 16px;
+}
+
+.quick-links-socials .quick-links-socials__item a:hover span svg path {
+  fill: var(--neutral-white);
+}
+
+/* Tablet */
+@media only screen and (min-width: 768px) {
+  /* Block - Quick Links Socials */
+  .quick-links-socials {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+  }
+}

blocks/quick-links-socials/quick-links-socials.js

@@ -0,0 +1,10 @@
+export default function decorate(block) {
+  const blockName = block.getAttribute('data-block-name');
+  if (!blockName) {
+    return;
+  }
+
+  [...block.children].forEach((element) => {
+    element.classList.add(`${blockName}__item`);
+  });
+}

scripts/lib-franklin.js

@@ -600,6 +600,8 @@ export function loadHeader(header) {
   const headerBlock = buildBlock('header', '');
   header.append(headerBlock);
   decorateBlock(headerBlock);
+  document.querySelector('body').classList.add('header-visible');
+
   return loadBlock(headerBlock);
 }
 

scripts/scripts.js

@@ -19,11 +19,12 @@ const LCP_BLOCKS = ['leadspace', 'blog-home']; // add your LCP blocks to the lis
 window.hlx.RUM_GENERATION = 'merative'; // add your RUM generation information here
 
 /**
- * Determine if we are serving content for the block-library, if so don't load the header or footer
- * @returns {boolean} True if we are loading block library content
+ * Determine if we are serving content for a specific keyword
+ * @param {string} keyword - The keyword to check in the URL path
+ * @returns {boolean} True if we are loading content for the specified keyword
  */
-export function isBlockLibrary() {
-  return window.location.pathname.includes('block-library');
+export function locationCheck(keyword) {
+  return window.location.pathname.includes(keyword);
 }
 
 /**
@@ -884,7 +885,7 @@ async function loadLazy(doc) {
   const element = hash ? main.querySelector(hash) : false;
   if (hash && element) element.scrollIntoView();
 
-  if (!isBlockLibrary()) {
+  if (!locationCheck('block-library') && !locationCheck('quick-links')) {
     loadHeader(doc.querySelector('header'));
     loadFooter(doc.querySelector('footer'));
   }