Merge pull request #67 from adobe/latest-boilerplate

feat: latest boilerplate

Author: fkakatie

blocks/accordion/accordion.css

@@ -1,16 +1,20 @@
 .accordion details {
-  border: 1px solid var(--dark-color);
+  border: 1px solid #dadada;
 }
 
 /* stylelint-disable-next-line no-descending-specificity */
 .accordion details + details {
-  margin-top: 16px;
+  margin-top: 24px;
+}
+
+.accordion details p {
+  margin-bottom: 0.8em;
 }
 
 .accordion details summary {
   position: relative;
   padding: 0 16px;
-  padding-right: 48px;
+  padding-right: 46px;
   cursor: pointer;
   list-style: none;
   overflow: auto;
@@ -23,21 +27,21 @@
 
 .accordion details summary:focus,
 .accordion details summary:hover {
-  background-color: var(--dark-color);
+  background-color: var(--light-color);
 }
 
 .accordion details summary::-webkit-details-marker {
   display: none;
 }
 
 .accordion details summary::after {
-  content: "";
+  content: '';
   position: absolute;
   top: 50%;
   right: 18px;
   transform: translateY(-50%) rotate(135deg);
-  width: 9px;
-  height: 9px;
+  width: 6px;
+  height: 6px;
   border: 2px solid;
   border-width: 2px 2px 0 0;
   transition: transform 0.2s;
@@ -52,6 +56,6 @@
 }
 
 .accordion details[open] .accordion-item-body {
-  border-top: 1px solid var(--dark-color);
+  border-top: 1px solid #dadada;
   background-color: var(--background-color);
 }

blocks/accordion/accordion.js

@@ -4,26 +4,16 @@
  * 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 = `<p>${summary.innerHTML}</p>`;
-    }
     // 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';

blocks/cards/cards.css

@@ -3,12 +3,12 @@
   margin: 0;
   padding: 0;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(278px, 1fr));
-  grid-gap: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(257px, 1fr));
+  grid-gap: 24px;
 }
 
 .cards > ul > li {
-  border: 1px solid var(--dark-color);
+  border: 1px solid #dadada;
   background-color: var(--background-color);
 }
 
@@ -20,10 +20,6 @@
   line-height: 0;
 }
 
-.cards .cards-card-body > *:first-child {
-  margin-top: 0;
-}
-
 .cards > ul > li img {
   width: 100%;
   aspect-ratio: 4 / 3;

blocks/cards/cards.js

@@ -12,7 +12,7 @@ export default function decorate(block) {
     });
     ul.append(li);
   });
-  ul.querySelectorAll('img').forEach((img) => img.closest('picture').replaceWith(createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }])));
+  ul.querySelectorAll('picture > img').forEach((img) => img.closest('picture').replaceWith(createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }])));
   block.textContent = '';
   block.append(ul);
 }

blocks/carousel/carousel.css

@@ -29,14 +29,14 @@
   justify-content: center;
   position: relative;
   width: 100%;
-  min-height: min(40rem, calc(100svh - var(--nav-height)));
+  min-height: min(50vw, calc(100dvh - var(--header-height)));
 }
 
-.carousel .carousel-slide:has(.carousel-slide-content[data-align="center"]) {
+.carousel .carousel-slide:has(.carousel-slide-content[data-align='center']) {
   align-items: center;
 }
 
-.carousel .carousel-slide:has(.carousel-slide-content[data-align="right"]) {
+.carousel .carousel-slide:has(.carousel-slide-content[data-align='right']) {
   align-items: flex-end;
 }
 
@@ -53,54 +53,46 @@
 
 .carousel .carousel-slide .carousel-slide-content {
   z-index: 1;
-  padding: 1rem;
-  margin: 1.5rem 3rem;
+  margin: 68px;
+  padding: 16px;
   color: white;
-  background-color: rgba(0 0 0 / 50%);
+  background-color: rgba(19 19 19 / 75%);
   position: relative;
   width: var(--slide-content-width, auto);
 }
 
 .carousel .carousel-slide-indicators {
   display: flex;
+  flex-wrap: wrap;
   justify-content: center;
-  gap: 0.5rem;
+  gap: 6px 12px;
+  padding: 12px;
+  background-color: var(--light-color);
+  line-height: 0;
 }
 
 .carousel .carousel-slide-indicator button {
-  width: 1rem;
-  height: 1rem;
+  width: 24px;
+  height: 24px;
+  margin: 0;
   padding: 0;
-  border-radius: 1rem;
-  background-color: rgba(0 0 0 / 25%);
+  border-radius: 50%;
+  background-color: #dadada;
+  transition: background-color 0.2s;
 }
 
 .carousel .carousel-slide-indicator button:disabled,
 .carousel .carousel-slide-indicator button:hover,
 .carousel .carousel-slide-indicator button:focus-visible {
-  background-color: rgba(0 0 0 / 80%);
-}
-
-.carousel .carousel-slide-indicator span,
-.carousel .carousel-navigation-buttons span {
-  border: 0;
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-  white-space: nowrap;
+  background-color: var(--text-color);
 }
 
 .carousel .carousel-navigation-buttons {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  left: 0.5rem;
-  right: 0.5rem;
+  left: 12px;
+  right: 12px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -109,62 +101,53 @@
 
 /* stylelint-disable-next-line no-descending-specificity */
 .carousel .carousel-navigation-buttons button {
-  border-radius: 8px;
+  position: relative;
+  width: 44px;
+  height: 44px;
   margin: 0;
+  border-radius: 50%;
   padding: 0;
-  width: 2rem;
-  height: 2rem;
-  position: relative;
-  background-color: rgba(0 0 0 / 25%);
+  background-color: rgba(19 19 19 / 25%);
+  transition: background-color 0.2s;
 }
 
 .carousel .carousel-navigation-buttons button:hover,
 .carousel .carousel-navigation-buttons button:focus-visible {
-  background-color: rgba(0 0 0 / 80%);
+  background-color: rgba(19 19 19 / 75%);
 }
 
 .carousel .carousel-navigation-buttons button::after {
   display: block;
-  content: "";
-  border: 3px white solid;
+  content: '';
+  border: 2px solid;
   border-bottom: 0;
   border-left: 0;
-  height: 0.75rem;
-  width: 0.75rem;
+  height: 12px;
+  width: 12px;
   position: absolute;
   top: 50%;
-  left: calc(50% + 3px);
+  left: calc(50% + 2px);
   transform: translate(-50%, -50%) rotate(-135deg);
 }
 
 .carousel .carousel-navigation-buttons button.slide-next::after {
-  transform: translate(-50%, -50%)  rotate(45deg);
-  left: calc(50% - 3px);
+  transform: translate(-50%, -50%) rotate(45deg);
+  left: calc(50% - 2px);
 }
 
 @media (width >= 600px) {
   .carousel .carousel-navigation-buttons {
-    left: 1rem;
-    right: 1rem;
-  }
-
-  .carousel .carousel-navigation-buttons button {
-    width: 3rem;
-    height: 3rem;
-  }
-
-  .carousel .carousel-navigation-buttons button::after {
-    width: 1rem;
-    height: 1rem;
+    left: 24px;
+    right: 24px;
   }
 
   .carousel .carousel-slide .carousel-slide-content {
-    --slide-content-width: 50%;
+    --slide-content-width: calc((100% - 184px) / 2);
 
-    margin: 2.5rem 5rem;
+    margin: 92px;
   }
 
-  .carousel .carousel-slide .carousel-slide-content[data-align="justify"] {
+  .carousel .carousel-slide .carousel-slide-content[data-align='justify'] {
     --slide-content-width: auto;
   }
 }

blocks/carousel/carousel.js

@@ -135,7 +135,7 @@ export default async function decorate(block) {
       const indicator = document.createElement('li');
       indicator.classList.add('carousel-slide-indicator');
       indicator.dataset.targetSlide = idx;
-      indicator.innerHTML = `<button type="button"><span>${placeholders.showSlide || 'Show Slide'} ${idx + 1} ${placeholders.of || 'of'} ${rows.length}</span></button>`;
+      indicator.innerHTML = `<button type="button" aria-label="${placeholders.showSlide || 'Show Slide'} ${idx + 1} ${placeholders.of || 'of'} ${rows.length}"></button>`;
       slideIndicators.append(indicator);
     }
     row.remove();

blocks/columns/columns.css

@@ -23,7 +23,7 @@
   .columns > div {
     align-items: center;
     flex-direction: unset;
-    gap: 32px;
+    gap: 24px;
   }
 
   .columns > div > div {

blocks/footer/footer.css

@@ -1,14 +1,20 @@
 footer {
-  padding: 2rem;
   background-color: var(--light-color);
-  font-size: var(--body-font-size-s);
+  font-size: var(--body-font-size-xs);
 }
 
-footer .footer {
-  max-width: 1200px;
+footer .footer > div {
   margin: auto;
+  max-width: 1200px;
+  padding: 40px 24px 24px;
 }
 
 footer .footer p {
   margin: 0;
 }
+
+@media (width >= 900px) {
+  footer .footer > div {
+    padding: 40px 32px 24px;
+  }
+}

blocks/footer/footer.js

@@ -6,14 +6,13 @@ import { loadFragment } from '../fragment/fragment.js';
  * @param {Element} block The footer block element
  */
 export default async function decorate(block) {
+  // load footer as fragment
   const footerMeta = getMetadata('footer');
-  block.textContent = '';
-
-  // load footer fragment
-  const footerPath = footerMeta.footer || '/footer';
+  const footerPath = footerMeta ? new URL(footerMeta, window.location).pathname : '/footer';
   const fragment = await loadFragment(footerPath);
 
   // decorate footer DOM
+  block.textContent = '';
   const footer = document.createElement('div');
   while (fragment.firstElementChild) footer.append(fragment.firstElementChild);
 

blocks/form/form-fields.js

@@ -24,6 +24,9 @@ function createLabel(fd) {
   label.id = generateFieldId(fd, '-label');
   label.textContent = fd.Label || fd.Name;
   label.setAttribute('for', fd.Id);
+  if (fd.Mandatory.toLowerCase() === 'true' || fd.Mandatory.toLowerCase() === 'x') {
+    label.dataset.required = true;
+  }
   return label;
 }
 
@@ -103,7 +106,7 @@ const createSelect = async (fd) => {
 
   const fieldWrapper = createFieldWrapper(fd);
   fieldWrapper.append(select);
-  fieldWrapper.append(createLabel(fd));
+  fieldWrapper.prepend(createLabel(fd));
 
   return { field: select, fieldWrapper };
 };
@@ -133,7 +136,7 @@ const createTextArea = (fd) => {
   const label = createLabel(fd);
   field.setAttribute('aria-labelledby', label.id);
   fieldWrapper.append(field);
-  fieldWrapper.append(label);
+  fieldWrapper.prepend(label);
 
   return { field, fieldWrapper };
 };
@@ -147,7 +150,11 @@ const createInput = (fd) => {
   const label = createLabel(fd);
   field.setAttribute('aria-labelledby', label.id);
   fieldWrapper.append(field);
-  fieldWrapper.append(label);
+  if (fd.Type === 'radio' || fd.Type === 'checkbox') {
+    fieldWrapper.append(label);
+  } else {
+    fieldWrapper.prepend(label);
+  }
 
   return { field, fieldWrapper };
 };