Merge pull request #80 from Netcentric/35-specifications

35 specifications
Netcentric · Sep 22, 2023 · 078a888 · 078a888
2 parents 1a9b7f8 + ec00514
commit 078a888
Show file tree

Hide file tree

Showing 5 changed files with 446 additions and 0 deletions.
diff --git a/blocks/v2-accordion/v2-accordion.css b/blocks/v2-accordion/v2-accordion.css
@@ -0,0 +1,95 @@
+.v2-accordion__button {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  color: var(--c-primary-black);
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  margin: 0;
+  padding: 0;
+  text-align: left;
+  width: 100%;
+}
+
+.v2-accordion__button:hover,
+.v2-accordion__button:focus {
+  background: transparent;
+}
+
+.v2-accordion__title {
+  font-family: var(--ff-headline-medium);
+  font-size: var(--headline-1-font-size);
+  letter-spacing: var(--headline-1-letter-spacing);
+  line-height: var(--headline-1-line-height);
+  margin: 0;
+}
+
+.v2-accordion__close {
+  transform: rotate(180deg);
+  transition: transform var(--duration-small) var(--easing-standard);
+}
+
+.v2-accordion__item-close .v2-accordion__close {
+  transform: rotate(0);
+}
+
+.v2-accordion__item-close .v2-accordion__content {
+  height: 0;
+  margin: 0;
+  opacity: 0;
+  overflow: hidden;
+  padding: 0;
+}
+
+.v2-accordion__close svg {
+  display: flex;
+  height: 24px;
+  width: 24px;
+}
+
+.v2-accordion__item {
+  border-bottom: 2px solid var(--c-primary-black);
+  padding: 24px 0;
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.v2-accordion__content {
+  margin-top: 40px;
+}
+
+/* Styles for nested accordion */
+.v2-accordion__content .v2-accordion__title {
+  color: var(--c-secondary-graphite);
+  font-family: var(--ff-subheadings-medium);
+  font-size: 22px;
+  letter-spacing: 0.22px;
+  line-height: 138%;
+}
+
+.v2-accordion__item .v2-accordion__item {
+  border-bottom: 1px solid var(--c-secondary-steel);
+}
+
+.v2-accordion__item .v2-accordion__item:last-child {
+  border-bottom: 0;
+}
+
+/* END Styles for nested accordion */
+
+@media (min-width: 1200px) {
+  .v2-accordion__title {
+    font-size: var(--headline-2-font-size);
+    letter-spacing: var(--headline-2-letter-spacing);
+    line-height: var(--headline-2-line-height);
+  }
+
+  /* Styles for nested accordion */
+  .v2-accordion__content .v2-accordion__title {
+    font-size: var(--headline-4-font-size);
+    letter-spacing: var(--headline-4-letter-spacing);
+    line-height: var(--headline-4-line-height);
+  }
+
+  /* END Styles for nested accordion */
+}
diff --git a/blocks/v2-accordion/v2-accordion.js b/blocks/v2-accordion/v2-accordion.js
@@ -0,0 +1,84 @@
+import { createElement } from '../../scripts/common.js';
+import fragmentBlock from '../fragment/fragment.js';
+
+const blockName = 'v2-accordion';
+
+/* Function checks if the content of the provied element is just a link to other doc */
+function isContentLink(el) {
+  // The assumpions:
+  // 1. The content is just plain text - no HTML inside
+  // 2. The link starts from '/' and doesn't contain any white space character
+  return el.innerHTML === el.textContent && /^\/(\S+)$/g.test(el.innerHTML);
+}
+
+function loaded(element, pointedContent, display) {
+  element.innerHTML = '';
+  element.append(pointedContent.parentElement);
+  pointedContent.parentElement.style.display = display;
+}
+
+export default async function decorate(block) {
+  const rows = [...block.querySelectorAll(':scope > div')];
+  const accordionsPromises = rows.map(async (row) => {
+    const accordionHeader = row.querySelector(
+      ':scope > div > h1, :scope > div > h2, :scope > div > h3, :scope > div > h4, :scope > div > h5, :scope > div > h6',
+    );
+    accordionHeader?.classList.add(`${blockName}__title`);
+    const accordionContent = row.querySelector(
+      ':scope > div:nth-child(2)',
+    );
+
+    const headerButton = createElement('button', { classes: `${blockName}__button` });
+    const arrowEl = createElement('div', { classes: `${blockName}__close` });
+
+    const dropdownArrowIcon = document.createRange().createContextualFragment(`
+      <svg xmlns="http://www.w3.org/2000/svg"><use href="#icons-sprite-dropdown-caret"></use></svg>`);
+    arrowEl.appendChild(...dropdownArrowIcon.children);
+    headerButton.append(accordionHeader, arrowEl);
+
+    const contentEl = createElement('div', { classes: [`${blockName}__content`, `${blockName}__content-close`] });
+
+    if (isContentLink(accordionContent)) {
+      await fragmentBlock(accordionContent);
+    }
+
+    contentEl.innerHTML = accordionContent.innerHTML;
+
+    if (accordionContent.textContent.startsWith('#id-') && accordionContent.innerHTML === accordionContent.textContent) {
+      const pointedContent = document.querySelector(`.${accordionContent.textContent.substring(1)}`);
+      if (pointedContent) {
+        const prevDisplay = pointedContent.parentElement.style.display;
+        pointedContent.parentElement.style.display = 'none';
+
+        if (pointedContent.dataset.blockStatus === 'loaded') {
+          loaded(contentEl, pointedContent, prevDisplay);
+        } else {
+          // lets wait for loading of the content that we want to put inside the accordion
+          new MutationObserver((_, observer) => {
+            if (pointedContent.dataset.blockStatus === 'loaded') {
+              observer.disconnect();
+              loaded(contentEl, pointedContent, prevDisplay);
+            }
+          }).observe(pointedContent, { attributes: true });
+        }
+      }
+    }
+
+    const accordionEl = createElement('div', { classes: [`${blockName}__item`, `${blockName}__item-close`] });
+    accordionEl.append(headerButton);
+    accordionEl.append(contentEl);
+
+    headerButton.addEventListener('click', () => {
+      accordionEl.classList.toggle(`${blockName}__item-close`);
+    });
+
+    return accordionEl;
+  });
+
+  block.innerHTML = '';
+  await Promise.allSettled(accordionsPromises);
+  accordionsPromises.forEach(async (acc) => {
+    const result = await acc;
+    block.append(result);
+  });
+}
diff --git a/blocks/v2-specifications/v2-specifications.css b/blocks/v2-specifications/v2-specifications.css
@@ -0,0 +1,143 @@
+.v2-specifications__list--with-text > div > *:first-child,
+.v2-specifications__list--with-pictures > div > *:first-child,
+.v2-specifications__list--with-downloads > div > *:first-child {
+  margin-top: 0;
+}
+
+.v2-specifications__list--with-text > div > *:last-child,
+.v2-specifications__list--with-pictures > div > *:last-child,
+.v2-specifications__list--with-downloads > div > *:last-child {
+  margin-bottom: 0;
+}
+
+.v2-specifications__list--with-text,
+.v2-specifications__list--with-pictures,
+.v2-specifications__list--with-downloads {
+  color: var(--c-primary-black);
+  display: grid;
+  font-family: var(--ff-body);
+  font-size: var(--body-1-font-size);
+  gap: 16px;
+  line-height: var(--body-1-line-height);
+  margin-top: 16px;
+}
+
+.v2-specifications__list--with-text:first-child,
+.v2-specifications__list--with-pictures:first-child,
+.v2-specifications__list--with-downloads:first-child {
+  margin-top: 0;
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.v2-specifications__list--with-pictures,
+.v2-specifications__list--with-downloads {
+  gap: 40px;
+  grid-template-columns: 1fr;
+}
+
+.v2-specifications__list--with-downloads strong,
+.v2-specifications__list--with-pictures strong {
+  display: block;
+  font-family: var(--ff-subheadings-medium);
+  font-size: var(--headline-5-font-size);
+  font-weight: normal;
+  line-height: var(--headline-5-line-height);
+}
+
+.v2-specifications__list--subtitle {
+  margin-bottom: 24px;
+  margin-top: 24px;
+}
+
+/* With Text */
+/* stylelint-disable-next-line no-descending-specificity */
+.v2-specifications__list--with-text {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.v2-specifications__list--with-text strong {
+  font-family: var(--ff-body-bold);
+  font-size: 12px;
+  letter-spacing: 1.92px;
+  line-height: 16px;
+  text-transform: uppercase;
+}
+
+.v2-specifications__list--with-text p {
+  margin: 0;
+}
+
+/* With images */
+.v2-specifications__list--with-pictures img {
+  display: block;
+  margin-bottom: 24px;
+}
+
+/* With downloads */
+.v2-specifications__list--with-downloads .icon-download svg {
+  height: 16px;
+  width: 16px;
+}
+
+.v2-specifications__list--with-downloads p {
+  margin: 8px 0 0;
+}
+
+@media (min-width: 744px) {
+  .v2-specifications__list--with-pictures,
+  .v2-specifications__list--with-downloads {
+    gap: 40px 16px;
+    grid-template-columns: repeat(2, 1fr);
+    margin-top: 40px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .v2-specifications__list--with-text,
+  .v2-specifications__list--with-downloads {
+    grid-template-columns:repeat(4, 1fr);
+  }
+
+  .v2-specifications__list--with-text {
+    gap: 40px 16px;
+  }
+
+  .v2-specifications__list--with-text:has(> :nth-child(5)) {
+    grid-template-columns: repeat(5, 1fr);
+  }
+
+  .v2-specifications__list--with-text p {
+    margin-top: 8px;
+  }
+
+  .v2-specifications__list--with-pictures {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  /* Rempve accordion in Desktop */
+  .v2-specifications .v2-accordion__button {
+    pointer-events: none;
+  }
+
+  .v2-specifications .v2-accordion__button .v2-accordion__close {
+    display: none;
+  }
+
+  .v2-specifications .v2-accordion__item-close .v2-accordion__content {
+    height: auto;
+    margin-top: 40px;
+    opacity: 1;
+    overflow: auto;
+  }
+
+  .v2-specifications .v2-accordion__item {
+    border-bottom-color: var(--c-primary-black);
+    padding: 72px 0;
+  }
+
+  .v2-specifications .v2-accordion__item:first-child {
+    padding-top: 10px;
+  }
+
+  /* END Rempve accordion in Desktop */
+}