Merge branch 'main' into 33-two-column-layouts

cigars-for-beginners/blocks/terms-accordion/terms-accordion.css

@@ -0,0 +1,39 @@
+/* stylelint-disable-next-line no-descending-specificity */
+.terms-accordion details + details {
+  margin-top: 16px;
+}
+
+.terms-accordion details summary {
+  position: relative;
+  padding: 0 16px;
+  padding-right: 48px;
+  cursor: pointer;
+  list-style: none;
+  overflow: auto;
+}
+
+.terms-accordion details summary::-webkit-details-marker {
+  display: none;
+}
+
+.terms-accordion details summary::before {
+  content: "+";
+  margin-right: 10px;
+}
+
+.terms-accordion details[open] summary::before {
+  content: "-"
+}
+
+.terms-accordion details .accordion-item-body {
+  padding: 0 40px;
+  color: white;
+}
+
+.terms-accordion details[open] .accordion-item-body {
+  background-color: transparent;
+}
+
+.terms-accordion .accordion-item-label {
+  color: white;
+}

cigars-for-beginners/blocks/terms-accordion/terms-accordion.js

@@ -0,0 +1,33 @@
+/*
+ * Accordion Block
+ * Recreate an accordion
+ * https://www.hlx.live/developer/block-collection/accordion
+ */
+
+function hasWrapper(el) {
+  return !!el.firstElementChild && window.getComputedStyle(el.firstElementChild).display === 'block';
+}
+
+export default function decorate(block) {
+  [...block.children].forEach((row) => {
+    // decorate accordion item label
+    const label = row.children[0];
+    const summary = document.createElement('summary');
+    summary.className = 'accordion-item-label';
+    summary.append(...label.childNodes);
+    if (!hasWrapper(summary)) {
+      summary.innerHTML = `${summary.textContent}`;
+    }
+    // decorate accordion item body
+    const body = row.children[1];
+    body.className = 'accordion-item-body';
+    if (!hasWrapper(body)) {
+      body.innerHTML = `<p>${body.innerHTML}</p>`;
+    }
+    // decorate accordion item
+    const details = document.createElement('details');
+    details.className = 'accordion-item';
+    details.append(summary, body);
+    row.replaceWith(details);
+  });
+}

cigars-for-beginners/blocks/terms-tabs/terms-tabs.css

@@ -0,0 +1,47 @@
+.terms-tabs .tabs-list {
+  gap: 8px;
+  max-width: 100%;
+  overflow-x: auto;
+  text-align: center;
+  margin-bottom: 10px;
+  border-radius: 0;
+}
+
+.terms-tabs .tabs-list button {
+  margin: 0;
+  border-radius: 0;
+  background-color: var(--light-color);
+  color: white;
+  font-size: unset;
+  font-weight: bold;
+  line-height: unset;
+  text-align: initial;
+  text-overflow: unset;
+  overflow: unset;
+  white-space: unset;
+  transition: background-color 0.2s;
+}
+
+.terms-tabs .tabs-list button[aria-selected="false"] {
+  background-color: #745e44;
+}
+
+.terms-tabs .tabs-list button[aria-selected="true"] {
+  background-color: #1d1d1d;
+  cursor: initial;
+}
+
+.terms-tabs .tabs-list button[aria-selected="false"]:hover,
+.terms-tabs .tabs-list button[aria-selected="false"]:focus {
+  background-color: #745e44;
+}
+
+.terms-tabs .tabs-panel {
+  margin-top: -1px;
+  padding: 0 16px;
+  overflow: auto;
+}
+
+.terms-tabs .tabs-panel[aria-hidden="true"] {
+  display: none;
+}

cigars-for-beginners/blocks/terms-tabs/terms-tabs.js

@@ -0,0 +1,79 @@
+// eslint-disable-next-line import/no-unresolved
+import { toClassName } from '../../scripts/aem.js';
+import { loadFragment } from '../fragment/fragment.js';
+
+function hasWrapper(el) {
+  return !!el.firstElementChild && window.getComputedStyle(el.firstElementChild).display === 'block';
+}
+
+async function loadTerms(letter) {
+  if (!letter) {
+    return null;
+  }
+
+  const url = `/cigars-for-beginners/fragments/terms/${letter}`;
+
+  let path = url;
+  if (!(path.charAt(0) === '/')) {
+    path = new URL(url).pathname;
+  }
+
+  const fragment = await loadFragment(path);
+  const tabcontent = document.createElement('p');
+  tabcontent.appendChild(fragment);
+  return tabcontent ? tabcontent.querySelector('main > .section .block') : null;
+}
+
+export default async function decorate(block) {
+  // build tablist
+  const tablist = document.createElement('div');
+  tablist.className = 'tabs-list';
+  tablist.setAttribute('role', 'tablist');
+
+  // decorate tabs and tabpanels
+  const tabs = [...block.children].map((child) => child.firstElementChild);
+
+  tabs.forEach((tab, i) => {
+    const id = toClassName(tab.textContent);
+
+    // decorate tabpanel
+    const tabpanel = block.children[i];
+    tabpanel.className = 'tabs-panel';
+    tabpanel.id = `tabpanel-${id}`;
+    tabpanel.setAttribute('aria-hidden', !!i);
+    tabpanel.setAttribute('aria-labelledby', `tab-${id}`);
+    tabpanel.setAttribute('role', 'tabpanel');
+
+    const terms = loadTerms(id);
+
+    if (!hasWrapper(tabpanel.lastElementChild)) {
+      terms.then((content) => {
+        if (content) tabpanel.lastElementChild.replaceWith(content);
+      });
+    }
+
+    // build tab button
+    const button = document.createElement('button');
+    button.className = 'tabs-tab';
+    button.id = `tab-${id}`;
+    button.innerHTML = tab.textContent;
+    button.setAttribute('aria-controls', `tabpanel-${id}`);
+    button.setAttribute('aria-selected', !i);
+    button.setAttribute('role', 'tab');
+    button.setAttribute('type', 'button');
+    button.addEventListener('click', () => {
+      block.querySelectorAll('[role=tabpanel]').forEach((panel) => {
+        panel.setAttribute('aria-hidden', true);
+      });
+      tablist.querySelectorAll('button').forEach((btn) => {
+        btn.setAttribute('aria-selected', false);
+      });
+      tabpanel.setAttribute('aria-hidden', false);
+      button.setAttribute('aria-selected', true);
+    });
+    tablist.append(button);
+    tab.remove();
+  });
+
+  block.prepend(tablist);
+}

cigars-for-beginners/blocks/video-list/video-list.css

@@ -81,6 +81,8 @@
     padding: 0;
     border: solid 3px #fff;
     border-radius: 100%;
+    font-size: 1rem;
+    font-weight: 500;
 }
 
 .video-modal iframe {

cigars-for-beginners/styles/styles.css

@@ -14,6 +14,8 @@
   /* colors */
   --link-color: #035fe6;
   --link-hover-color: #136ff6;
+  --button-color: #007aff;
+  --button-hover-color: #3892ff;
   --background-color: white;
   --light-color: #eee;
   --dark-color: #ccc;
@@ -161,25 +163,36 @@ button {
   box-sizing: border-box;
   text-decoration: none;
   border: 2px solid transparent;
-  padding: 5px 30px;
+  padding: 16px 40px;
   text-align: center;
+  font-size: 1.25em;
   font-style: normal;
-  font-weight: 600;
+  font-weight: 700;
   cursor: pointer;
   color: var(--background-color);
-  background-color: var(--link-color);
-  margin: 16px 0;
+  background-color: var(--button-color);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  border-radius: 30px;
+  transition: background .2s;
+}
+
+a.button:any-link::after {
+  content: '';
+  width: 14px;
+  height: 14px;
+  background-image: url('/cigars-for-beginners/icons/icon-next.png');
+  background-position: left center;
+  background-size: contain;
+  display: inline-block;
+  margin-left: 0.8em;
 }
 
 a.button:hover,
 a.button:focus,
 button:hover,
 button:focus {
-  background-color: var(--link-hover-color);
+  background-color: var(--button-hover-color);
   cursor: pointer;
 }
 
@@ -189,13 +202,37 @@ button:disabled:hover {
   cursor: unset;
 }
 
+a.button.secondary:any-link::after {
+  filter: invert(1);
+}
+
 a.button.secondary,
 button.secondary {
   background-color: unset;
   border: 2px solid currentcolor;
   color: var(--text-color);
 }
 
+a.button.secondary:hover,
+a.button.secondary:focus,
+button.secondary:hover
+button.secondary:focus {
+  background-color: var(--text-color);
+  border-color: var(--text-color);
+  color: var(--background-color);
+}
+
+a.button.secondary:any-link:hover::after,
+a.button.secondary:any-link:focus::after {
+  filter: invert(0);
+}
+
+.button-container {
+  text-align: center;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
 main img {
   max-width: 100%;
   width: auto;
@@ -332,3 +369,14 @@ main .section:empty {
 .key-characteristics .columns > div {
   align-items: start;
 }
+
+main .section.cigar-terminology {
+  background: url("/cigars-for-beginners/images/terms-tabs/media_11c9563b2b00d3c3f59376737971c9a720c9689a6.jpeg");
+  color: white;
+  width: 100%;
+}
+
+#cigar-terminology {
+  text-align: center;
+  text-transform: uppercase;
+}