feat(support-pages): Add a new import script

blocks/breadcrumb/breadcrumb.css

@@ -0,0 +1,54 @@
+/* Breadcrumb CSS */
+
+.section.breadcrumb-container > div.breadcrumb-wrapper {
+  padding: unset;
+  width: 100%;
+  background-color: #F3F1ED;
+}
+
+.breadcrumb.block {
+  display: flex;
+  flex-direction: row;
+  margin: 0 auto;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 0 24px;
+}
+
+.breadcrumb.block .breadcrumb-links {
+  padding: 19px 0 !important;
+  font-family: var(--sans-serif-font-regular);
+  font-size: var(--font-size-16);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--line-height-160);
+  letter-spacing: var(--letter-spacing-001-em);
+}
+
+.breadcrumb.block .breadcrumb-links span.breadcrumb-link {
+  margin-right: 10px;
+}
+
+.breadcrumb.block .breadcrumb-links span.breadcrumb-link:not(.active) a {
+  text-decoration: none;
+  color: var(--neutral-carbon);
+}
+
+.breadcrumb.block .breadcrumb-links span.breadcrumb-link:hover, 
+.breadcrumb.block .breadcrumb-links span.breadcrumb-link.active {
+  color: var(--primary-purple);
+}
+
+.breadcrumb.block .breadcrumb-links span.breadcrumb-link:hover a,
+.breadcrumb.block .breadcrumb-links span.breadcrumb-link.active a {
+  color: var(--primary-purple);
+  text-decoration: underline;
+}
+
+@media only screen and (min-width: 1200px) {
+  .breadcrumb.block {
+    margin: 0 auto;
+    padding: unset;
+    width: var(--section-width-desktop);
+  }
+}

blocks/breadcrumb/breadcrumb.js

@@ -0,0 +1,18 @@
+import { createTag } from '../../scripts/scripts.js';
+
+export default async function decorate(block) {
+  const breadcrumbLinks = createTag('div', { class: 'breadcrumb-links' });
+  const links = block.querySelectorAll('a');
+  links.forEach((link) => {
+    link.parentElement.remove();
+    const newLink = createTag('span', { class: 'breadcrumb-link' }, link);
+    const linkUrl = new URL(link.href);
+    if (linkUrl.pathname === window.location.pathname) newLink.classList.add('active');
+    breadcrumbLinks.appendChild(newLink);
+    newLink.innerHTML += ' > ';
+  });
+  block.prepend(breadcrumbLinks);
+  const icon = block.querySelector('span.icon');
+  icon.parentElement.parentElement.remove();
+  block.append(icon);
+}

blocks/header/header.js

@@ -2,31 +2,18 @@ import {
   readBlockConfig,
   decorateButtons,
   decorateIcons,
-  loadBlocks,
 } from '../../scripts/lib-franklin.js';
 
 import {
   createTag,
-  decorateMain,
+  fetchFragment,
 } from '../../scripts/scripts.js';
 
 const KEY_ENTER = 'Enter';
 
 const mobileMedia = window.matchMedia('(max-width: 1199px)');
 const desktopMedia = window.matchMedia('(min-width: 1200px)');
 
-async function fetchFragment(path) {
-  const resp = await fetch(`${path}.plain.html`);
-  if (resp.ok) {
-    const container = document.createElement('main');
-    container.innerHTML = await resp.text();
-    decorateMain(container);
-    await loadBlocks(container);
-    return container.querySelector(':scope .section');
-  }
-  return null;
-}
-
 /**
  * collapses all open nav sections
  * @param {Element} sections The container element

blocks/right-nav/right-nav.css

@@ -0,0 +1,26 @@
+/* Right Nav CSS */
+
+@media only screen and (min-width: 1200px) {
+  main .section.right-nav-container > div {
+    width: unset;
+  }
+
+  .section.right-nav-container {
+    position: relative;
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+    width: var(--section-width-desktop);
+    margin: 0 auto;
+  }
+
+  .section.right-nav-container > *:not(.right-nav-wrapper) {
+    grid-column-start: 1;
+  }
+
+  .section.right-nav-container > .right-nav-wrapper {
+    grid-column-start: 2;
+    grid-row-start: 1;
+    padding-top: var(--spacer-layout-07);
+    margin-left: 8%;
+  }
+}

blocks/search/search.css

@@ -0,0 +1,76 @@
+/* Search Block CSS */
+.search.block {
+  width: 100%;
+  font-family: var(--sans-serif-font-light);
+  font-size: var(--font-size-16);
+  letter-spacing: var(--letter-spacing-001-em);
+  line-height: var(--line-height-160);
+  font-weight: var(--font-weight-light);
+  color: var(--neutral-carbon);
+}
+
+.search.block form {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 44px;
+  background-color: var(--neutral-bone);
+  border-bottom: 1px solid var(--neutral-carbon);
+}
+
+.search.block form input {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  background-position: 14px 12px;
+  background-repeat: no-repeat;
+  padding: 8px 16px;
+  border: 0;
+  background-color: var(--neutral-bone);
+}
+
+.search.block form span.search-icon {
+  display: block;
+  position: relative;
+  background: url('../../icons/search.svg') no-repeat;
+  color: #000;
+  height: 24px;
+  width: 24px;
+  margin: 13px 13px 0 0;
+  padding: 0 23px 0 0;
+  min-width: 14px;
+}
+
+.search.block div.results ul {
+  max-height: 280px;
+  overflow-y: auto;
+  padding: unset;
+}
+
+.search.block div.results ul li {
+  padding: 15px 16px;
+  text-decoration: none;
+  display: block;
+  border-bottom: 1px solid #e7e2da;
+}
+
+.search.block div.results ul li:hover {
+  background-color: #ebccff;
+}
+
+.search.block div.results ul li a {
+  text-decoration: none;
+  border: unset;
+  color: var(--neutral-carbon);
+}
+
+@media only screen and (min-width: 768px) {
+  /* Tablet styles */
+  .search.block {
+    width: 700px;
+  }
+}
+
+@media only screen and (min-width: 1200px) {
+  /* Desktop styles */
+}

blocks/search/search.js

@@ -0,0 +1,47 @@
+import { createTag, getSearchIndex } from '../../scripts/scripts.js';
+import { readBlockConfig } from '../../scripts/lib-franklin.js';
+
+let index;
+let searchTerm = '';
+let results;
+
+async function showResults() {
+  // clear the results
+  results.innerHTML = '';
+  // filter and redraw the results
+  const ul = createTag('ul');
+  index
+    .filter((row) => (row.title.toLowerCase().includes(searchTerm.toLowerCase())
+      || row.description.toLowerCase().includes(searchTerm.toLowerCase())))
+    .forEach((row) => {
+      const link = createTag('a', { href: row.path, 'aria-label': row.title }, row.title);
+      const li = createTag('li', { class: 'search-result' }, link);
+      ul.append(li);
+    });
+  results.append(ul);
+}
+
+export default async function decorate(block) {
+  const cfg = await readBlockConfig(block);
+  block.textContent = '';
+  const filter = cfg.filter || '';
+  index = await getSearchIndex(filter);
+  const input = createTag('input', {
+    type: 'text',
+    placeholder: 'Type a search term or article type, such as release notes or news.',
+  });
+  const form = createTag('form', { onsubmit: 'event.preventDefault();' }, input);
+  const searchIcon = createTag('span', { class: 'search-icon' });
+  results = createTag('div', { class: 'results' });
+  form.append(searchIcon);
+  block.append(form);
+  block.append(results);
+
+  // Search input listener
+  input.addEventListener('input', async (e) => {
+    // saving the input value
+    searchTerm = e.target.value;
+    // re-displaying results based on the new search_term
+    await showResults();
+  });
+}