Merge pull request #9 from hlxsites/414986-theme-readme

[READY] correct readme
hlxsites · Jan 15, 2024 · a798cca · a798cca
2 parents 5980b0e + 5687799
commit a798cca
Show file tree

Hide file tree

Showing 40 changed files with 705 additions and 385 deletions.
diff --git a/README.md b/README.md
@@ -23,3 +23,7 @@ npm run lint:fix
 1. Install the [AEM CLI](https://github.com/adobe/helix-cli): `npm install -g @adobe/aem-cli`
 1. Start AEM EDS Proxy: `aem up` (opens your browser at `http://localhost:3000`)
 1. Open the `henkel-raqn-guide` directory in your favorite IDE and start coding :)
+
+## Documentation
+
+[Documentation](docs/readme.md)
diff --git a/blocks/button/button.css b/blocks/button/button.css
@@ -31,6 +31,5 @@ raqn-button a {
 raqn-button a:hover,
 raqn-button a:visited,
 raqn-button a:active {
-  color: currentcolor;
   text-decoration: none;
 }
diff --git a/blocks/card/card.css b/blocks/card/card.css
@@ -1,41 +1,43 @@
 raqn-card {
-  background-color: var(--scope-background, red);
+  background-color: var(--scope-background, transparent);
+  color: var(--scope-color, #fff);
   display: grid;
   position: relative;
   grid-template-columns: var(--card-columns, 1fr);
   gap: var(--scope-gap, 20px);
   padding: var(--scope-padding, 20px 0);
-}
-
-raqn-card a {
-  font-size: var(--raqn-font-size-3, 1.2em);
-  font-weight: bold;
-}
 
-raqn-card > picture {
-  grid-column: span var(--card-columns, 1fr);
-}
+  & a {
+    font-size: var(--raqn-font-size-3, 1.2em);
+    font-weight: bold;
+  }
 
-raqn-card > div {
-  position: relative;
-}
+  & > picture {
+    grid-column: span var(--card-columns, 1fr);
+  }
 
-raqn-card:not(.inner-background) > div {
-  background-color: var(--scope-background, #fff);
-  color: var(--scope-color, #000);
-}
+  & > div {
+    position: relative;
+    background-color: var(--scope-inner-background, transparent);
+    padding: var(--scope-inner-padding, 20px);
+    padding-block-end: var(--scope-icon-size, 20px);
+  }
 
-raqn-card > div div:last-child > a {
-  position: absolute;
-  inset-inline-start: 0;
-  inset-block-start: 0;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-  text-indent: -10000px;
-}
+  & > div div:last-child > a {
+    position: absolute;
+    inset-inline-start: 0;
+    inset-block-start: 0;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+    text-indent: -10000px;
+  }
 
-raqn-card raqn-icon {
-  width: 100%;
-  display: flex;
+  & raqn-icon {
+    width: 100%;
+    display: flex;
+    position: absolute;
+    inset-block-end: calc(var(--scope-inner-padding, 20px));
+    inset-inline-end: var(--scope-inner-padding, 20px);
+  }
 }
diff --git a/blocks/footer/footer.css b/blocks/footer/footer.css
@@ -20,7 +20,7 @@ raqn-footer {
     }
   }
 
-  ul {
+  & ul {
     list-style: none;
     padding: 0;
     margin: 20px 0;
@@ -30,12 +30,12 @@ raqn-footer {
       margin: 0;
     }
 
-    li {
+    & li {
       @media screen and (min-width: 1024px) {
         margin: 2em 0;
       }
 
-      a {
+      & a {
         color: var(--scope-color);
 
         @media screen and (min-width: 1024px) {

diff --git a/blocks/icon/icon.css b/blocks/icon/icon.css
@@ -14,8 +14,8 @@ raqn-icon {
 
 raqn-icon svg {
   display: inline-block;
-  max-width: var(--scope-icon-size, 1em);
-  max-height: var(--scope-icon-size, 1em);
+  width: var(--scope-icon-size, 1em);
+  height: var(--scope-icon-size, 1em);
   fill: currentcolor;
   overflow: hidden;
   vertical-align: middle;

diff --git a/blocks/navigation/navigation.css b/blocks/navigation/navigation.css
@@ -12,13 +12,13 @@ raqn-navigation {
 
   /* mobile */
   & > nav {
-    ul,
-    p {
+    & ul,
+    & p {
       display: none;
     }
   }
 
-  a {
+  & a {
     display: inline-flex;
     align-items: center;
     text-decoration: none;
@@ -28,15 +28,15 @@ raqn-navigation {
     font-size: var(--raqn-navigation-level-1);
   }
 
-  .level-2 a {
+  & .level-2 a {
     font-size: var(--raqn-navigation-level-2);
   }
 
-  div {
+  & div {
     display: flex;
   }
 
-  button {
+  & button {
     display: inline-flex;
     justify-self: end;
     align-items: center;
@@ -68,7 +68,7 @@ raqn-navigation {
       margin: 0 auto;
       padding: 0;
 
-      li {
+      & li {
         padding-block: 1.2em;
         max-width: var(--scope-max-width, 100%);
         margin: 0 auto;
@@ -78,11 +78,11 @@ raqn-navigation {
 
   /* desktop */
   &:not([compact='true']) > nav {
-    a {
+    & a {
       line-height: var(--scope-icon-size, 24px);
     }
 
-    ul {
+    & ul {
       list-style: none;
       display: flex;
     }
@@ -96,26 +96,26 @@ raqn-navigation {
       display: inline-flex;
     }
 
-    [icon='chevron-right'] {
+    & [icon='chevron-right'] {
       transform: rotate(90deg);
     }
 
-    .level-1 a {
+    & .level-1 a {
       padding: var(--padding-vertical, 20px) var(--padding-horizontal, 20px);
     }
 
-    .level-2,
-    .level-2 > ul {
+    & .level-2,
+    & .level-2 > ul {
       display: inline-flex;
       flex-direction: column;
     }
 
-    .level-2 > ul {
+    & .level-2 > ul {
       list-style: none;
       padding: 0;
     }
 
-    .level-1 > ul {
+    & .level-1 > ul {
       display: flex;
       clip-path: inset(0% -100vw 100% -100vw);
       position: absolute;
@@ -125,7 +125,7 @@ raqn-navigation {
       transition: clip-path 0.4s ease-in-out;
       overflow: visible;
 
-      .level-2 {
+      & .level-2 {
         padding-block: 1.2em;
         opacity: 0;
         transition: opacity 0.4s ease;
@@ -146,7 +146,7 @@ raqn-navigation {
       }
     }
 
-    .level-1:hover > ul {
+    & .level-1:hover > ul {
       display: flex;
       clip-path: inset(0 -100vw -100% -100vw);
 

diff --git a/blocks/navigation/navigation.js b/blocks/navigation/navigation.js
@@ -18,6 +18,7 @@ export default class Navigation extends Column {
   }
 
   ready() {
+    this.active = {};
     this.list = this.querySelector('ul');
     this.nav = document.createElement('nav');
     this.nav.append(this.list);
@@ -29,13 +30,16 @@ export default class Navigation extends Column {
     }
     this.append(this.nav);
     this.setupClasses(this.list);
-    this.addEventListener('click', (e) => this.activate(e));
+    if (this.compact) {
+      this.addEventListener('click', (e) => this.activate(e));
+    }
   }
 
   setupClasses(ul, level = 1) {
     const children = Array.from(ul.children);
     children.forEach((child) => {
       child.classList.add(`level-${level}`);
+      child.dataset.level = level;
       const hasChildren = child.querySelector('ul');
       if (hasChildren) {
         const anchor = child.querySelector('a');
@@ -49,13 +53,16 @@ export default class Navigation extends Column {
   }
 
   activate(e) {
+    e.preventDefault();
     if (e.target.tagName.toLowerCase() === 'a') {
       const current = e.target.closest('li');
-      if (this.active && this.active !== current) {
-        this.active.classList.remove('active');
+      const { level } = current.dataset;
+      if (this.active[level] && this.active[level] !== current) {
+        this.active[level].classList.remove('active');
       }
-      this.active = current;
-      this.active.classList.toggle('active');
+      this.active[level] = current;
+      this.setAttribute('active', level)
+      this.active[level].classList.toggle('active');
     }
   }
 }