Merge branch 'main' of https://github.com/Netcentric/edge-delivery-ub…

…s-faweb-demo into 6-footer

.stylelintrc.json

@@ -1,6 +1,12 @@
 {
   "extends": ["stylelint-config-standard"],
   "rules": {
+    "selector-class-pattern": [
+      "^[a-z]([-]?[a-z0-9]+)*(__[a-z0-9]([-]?[a-z0-9]+)*)?(--[a-z0-9]([-|_]?[a-z0-9]+)*)?$",
+      {
+        "message": "Expected class \"%s\" to be in kebab-case or BEM-style naming."
+      }
+    ],
     "media-feature-range-notation": "prefix"
   }
 }

blocks/columns/columns.css

@@ -19,7 +19,7 @@
   display: block;
 }
 
-@media (min-width: 900px) {
+@media (min-width: 768px) {
   .columns > div {
     align-items: center;
     flex-direction: unset;

blocks/footer/footer.css

@@ -12,11 +12,8 @@ footer {
   > div {
     margin: auto;
     max-width: var(--content-max-width);
-    padding: 40px 24px 24px;
-
-    @media (min-width: 768px) {
-      padding: 40px 32px 24px;
-    }
+    padding-block: 40px;
+    padding-inline: var(--content-padding-inline);
   }
 
   a {
@@ -50,13 +47,13 @@ footer {
     position: relative;
 
     &::after {
-      position: absolute;
-      content: '';
-      width: 1px;
       background-color: var(--footer-text-color);
+      content: '';
       height: 15px;
+      position: absolute;
       right: -11px;
       top: 2px;
+      width: 1px;
     }
   }
 }

blocks/header/header.css

@@ -7,17 +7,16 @@ header .nav-wrapper {
 }
 
 header nav {
-  box-sizing: border-box;
   display: grid;
   grid-template:
     'hamburger brand tools' var(--nav-height)
     'sections sections sections' 1fr / auto 1fr auto;
   align-items: center;
   gap: 0 24px;
   margin: auto;
-  max-width: 1248px;
+  max-width: var(--content-max-width);
   height: var(--nav-height);
-  padding: 0 24px;
+  padding-inline: var(--content-padding-inline);
   font-family: var(--body-font-family);
 }
 
@@ -30,13 +29,11 @@ header nav[aria-expanded='true'] {
   min-height: 100dvh;
 }
 
-@media (min-width: 900px) {
+@media (min-width: 1280px) {
   header nav {
     display: flex;
     justify-content: space-between;
     gap: 0 32px;
-    max-width: 1264px;
-    padding: 0 32px;
   }
 
   header nav[aria-expanded='true'] {
@@ -128,7 +125,7 @@ header nav[aria-expanded='true'] .nav-hamburger-icon::after {
   transform: rotate(-45deg);
 }
 
-@media (min-width: 900px) {
+@media (min-width: 1280px) {
   header nav .nav-hamburger {
     display: none;
     visibility: hidden;
@@ -182,7 +179,7 @@ header nav .nav-sections ul > li > ul > li {
   font-weight: 400;
 }
 
-@media (min-width: 900px) {
+@media (min-width: 1280px) {
   header nav .nav-sections {
     display: block;
     visibility: visible;

blocks/header/header.js

@@ -1,8 +1,8 @@
 import { getMetadata } from '../../scripts/aem.js';
 import { loadFragment } from '../fragment/fragment.js';
 
-// media query match that indicates mobile/tablet width
-const isDesktop = window.matchMedia('(min-width: 900px)');
+// media query match that indicates desktop width
+const isDesktop = window.matchMedia('(min-width: 1280px)');
 
 function closeOnEscape(e) {
   if (e.code === 'Escape') {

blocks/hero/hero.css

@@ -5,7 +5,8 @@
 
 .hero {
   position: relative;
-  padding: 40px 24px;
+  padding-block: 40px;
+  padding-inline: var(--content-padding-inline);
   min-height: 300px;
 }
 
@@ -29,9 +30,3 @@
   width: 100%;
   height: 100%;
 }
-
-@media (min-width: 900px) {
-  .hero {
-    padding: 40px 32px;
-  }
-}

blocks/text-image/text-image.css

@@ -0,0 +1,46 @@
+.text-image__container {
+  --image-width: 50%;
+
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+
+  @media (min-width: 768px) {
+    flex-direction: row;
+  }
+
+  .text-image--h-center & {
+    text-align: center;
+  }
+
+  .text-image--v-center & {
+    align-items: center;
+  }
+
+  > div:not(.text-image__image-container) {
+    order: 1;
+    flex-grow: 1;
+
+    @media (min-width: 768px) {
+      order: initial;
+      width: calc(100% - var(--image-width));
+    }
+  }
+}
+
+.text-image__image-container {
+  order: 0;
+
+  @media (min-width: 768px) {
+    order: initial;
+    width: var(--image-width);
+
+    .text-image--bigimage & {
+      --image-width: 70%;
+    }
+
+    .text-image--smallimage & {
+      --image-width: 30%;
+    }
+  }
+}

blocks/text-image/text-image.js

@@ -0,0 +1,13 @@
+import { variantsClassesToBEM } from '../../scripts/common.js';
+
+const variantClasses = ['bigimage', 'smallimage', 'v-center', 'h-center'];
+
+export default function decorate(block) {
+  const blockName = 'text-image';
+  // add variant classnames
+  variantsClassesToBEM(block.classList, variantClasses, blockName);
+
+  block.firstElementChild.classList.add(`${blockName}__container`);
+  const pictureParent = block.querySelector('picture').parentElement;
+  pictureParent?.classList.add(`${blockName}__image-container`);
+}

scripts/aem.js

@@ -403,7 +403,7 @@ function decorateButtons(element) {
           && twoup.childNodes.length === 1
           && twoup.tagName === 'P'
         ) {
-          a.className = 'button primary';
+          a.className = 'button button--secondary';
           twoup.classList.add('button-container');
         }
         if (
@@ -412,7 +412,7 @@ function decorateButtons(element) {
           && twoup.childNodes.length === 1
           && twoup.tagName === 'P'
         ) {
-          a.className = 'button secondary';
+          a.className = 'button button--tertiary';
           twoup.classList.add('button-container');
         }
       }
@@ -426,16 +426,23 @@ function decorateButtons(element) {
  * @param {string} [prefix] prefix to be added to icon src
  * @param {string} [alt] alt text to be added to icon
  */
-function decorateIcon(span, prefix = '', alt = '') {
+async function decorateIcon(span, prefix = '', alt = '') {
   const iconName = Array.from(span.classList)
     .find((c) => c.startsWith('icon-'))
     .substring(5);
-  const img = document.createElement('img');
-  img.dataset.iconName = iconName;
-  img.src = `${window.hlx.codeBasePath}${prefix}/icons/${iconName}.svg`;
-  img.alt = alt;
-  img.loading = 'lazy';
-  span.append(img);
+
+  const resp = await fetch(`${window.hlx.codeBasePath}${prefix}/icons/${iconName}.svg`);
+  if (resp.ok) {
+    const iconHTML = await resp.text();
+    if (iconHTML.match(/<style/i)) {
+      const img = document.createElement('img');
+      img.alt = alt;
+      img.src = `data:image/svg+xml,${encodeURIComponent(iconHTML)}`;
+      span.appendChild(img);
+    } else {
+      span.innerHTML = iconHTML;
+    }
+  }
 }
 
 /**