Merge commit 'cb09c0af83b0f598667e8a0247eca240142c6219'

.eslintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
   root: true,
-  extends: 'airbnb-base',
+  extends: ['airbnb-base', 'prettier'],
   env: {
     browser: true,
   },
@@ -11,11 +11,18 @@ module.exports = {
     requireConfigFile: false,
   },
   rules: {
+    'max-len': [2, 160, 2, { ignoreUrls: true }],
+    'import/no-unresolved': [2, { commonjs: true }],
+    'array-callback-return': 'off', // due to prettier
+    'class-methods-use-this': 'off', // due to prettier
     // allow reassigning param
     'no-param-reassign': [2, { props: false }],
     'linebreak-style': ['error', 'unix'],
-    'import/extensions': ['error', {
-      js: 'always',
-    }],
+    'import/extensions': [
+      'error',
+      {
+        js: 'always',
+      },
+    ],
   },
 };

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run lint

.stylelintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": ["stylelint-config-standard"]
+  "extends": ["stylelint-config-standard"],
+  "rules": {
+    "no-descending-specificity": null
+  }
 }

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)

blocks/accordion/accordion.css

@@ -0,0 +1,78 @@
+raqn-accordion {
+  --scope-icon-size: 1em;
+  --accordion-background: var(--scope-background, black);
+  --accordion-color: var(--scope-color, white);
+
+  background: var(--accordion-background);
+  color: var(--accordion-color);
+  margin: var(--scope-margin, 0);
+  padding: var(--scope-padding, 0);
+  display: grid;
+}
+
+raqn-accordion raqn-icon {
+  align-self: end;
+  transform: rotate(90deg);
+  transition: transform 0.2s ease-in-out;
+}
+
+raqn-accordion accordion-control.active raqn-icon {
+  transform: rotate(270deg);
+}
+
+.accordion-control {
+  border-block-start: var(--scope-border-block-start, none);
+  border-inline-start: var(--scope-border-inline-start, none);
+  border-inline-end: var(--scope-border-inline-end, none);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  width: 100%;
+}
+
+.accordion-control:first-child {
+  border-block-start: none;
+}
+
+.accordion-control > * {
+  --scope-headings-color: var(--scope-color, black);
+  --scope-hover-color: var(--scope-accent-color, gray);
+
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  min-width: 100%;
+}
+
+.accordion-control:hover {
+  --scope-color: var(--scope-headings-color);
+}
+
+.accordion-content {
+  display: grid;
+  max-height: 0;
+  overflow: hidden;
+  opacity: 0;
+  border-block-end: var(--scope-border-block-end, none);
+  border-block-start: var(--scope-border-block-start, none);
+  margin-block-end: -1px;
+  transition:
+    max-height 0.5s ease-in-out,
+    opacity 0.5s ease-in-out;
+}
+
+.accordion-content:last-child {
+  border-block-end: none;
+}
+
+.accordion-content.active {
+  opacity: 1;
+  grid-template-rows: 1fr;
+  max-height: 100vw;
+}
+
+.accordion-content-wrapper {
+  margin-block: 1em;
+  display: grid;
+}

blocks/accordion/accordion.js

@@ -0,0 +1,81 @@
+import Column from '../column/column.js';
+
+export default class Accordion extends Column {
+  dependencies = ['icon'];
+
+  ready() {
+    this.setAttribute('role', 'navigation');
+    let children = Array.from(this.children);
+    children = children.map((child) => {
+      if (child.tagName !== 'DIV') {
+        const div = document.createElement('div');
+        div.append(child);
+        this.append(div);
+        return div;
+      }
+      return child;
+    });
+    // console.log(children)
+    this.setupControls(children.filter((_, ind) => ind % 2 === 0));
+    this.setupContent(children.filter((_, ind) => ind % 2 === 1));
+  }
+
+  setupControls(controls) {
+    controls.forEach((control, index) => {
+      const icon = document.createElement('raqn-icon');
+      icon.setAttribute('icon', 'chevron-right');
+      const children = Array.from(control.children);
+      if (children.length === 0) {
+        const child = document.createElement('span');
+        child.textContent = control.textContent;
+        control.innerHTML = '';
+        control.append(child);
+      }
+      control.children[0].append(icon);
+      control.setAttribute('role', 'button');
+      control.setAttribute('aria-expanded', 'false');
+      control.setAttribute('tabindex', '0');
+      control.classList.add('accordion-control');
+      control.id = `accordion-${this.id}-${index}`;
+      control.addEventListener('click', () => this.toggleControl(control));
+      control.addEventListener('keypress', (e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          this.toggleControl(control);
+        }
+      });
+    });
+  }
+
+  toggleControl(control) {
+    const content = control.nextElementSibling;
+    if (content) {
+      content.classList.toggle('active');
+      control.classList.toggle('active');
+      control.setAttribute(
+        'aria-expanded',
+        content.classList.contains('active'),
+      );
+      content.setAttribute(
+        'aria-hidden',
+        !content.classList.contains('active'),
+      );
+    }
+  }
+
+  setupContent(contents) {
+    contents.forEach((content) => {
+      const internal = content.children;
+      const wrapper = document.createElement('div');
+      wrapper.classList.add('accordion-content-wrapper');
+      wrapper.append(...internal);
+      content.append(wrapper);
+      content.setAttribute('role', 'region');
+      content.setAttribute('aria-hidden', true);
+      content.classList.add('accordion-content');
+      content.setAttribute(
+        'aria-labelledby',
+        content.previousElementSibling.id,
+      );
+    });
+  }
+}

blocks/breadcrumbs/breadcrumbs.css

@@ -0,0 +1,40 @@
+raqn-breadcrumbs {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 10px;
+  align-items: center;
+  padding: 10px 0;
+  background: var(--scope-background, transparent);
+  color: var(--scope-color, #000);
+}
+
+raqn-breadcrumbs ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+}
+
+raqn-breadcrumbs ul li {
+  margin-inline-end: 1em;
+  font-weight: bold;
+}
+
+raqn-breadcrumbs ul li a {
+  color: var(--scope-color);
+  font-weight: normal;
+}
+
+@media screen and (max-width: 768px) {
+  raqn-breadcrumbs ul li {
+    display: none;
+  }
+
+  raqn-breadcrumbs ul li.separator:has(+ li:last-child) {
+    display: block;
+  }
+
+  raqn-breadcrumbs ul li:last-child {
+    display: block;
+  }
+}

blocks/breadcrumbs/breadcrumbs.js

@@ -0,0 +1,31 @@
+import ComponentBase from '../../scripts/component-base.js';
+
+export default class BreadCrumbs extends ComponentBase {
+  capitalize(string) {
+    return string
+      .split('-')
+      .map((str) => str.charAt(0).toUpperCase() + str.slice(1))
+      .join(' ');
+  }
+
+  ready() {
+    this.classList.add('full-width');
+    this.classList.add('breadcrumbs');
+    this.path = window.location.pathname.split('/');
+    this.innerHTML = `
+    <ul>
+        ${this.path
+          .map((path, index) => {
+            if (path === '') {
+              return `<li><a href="/${path}">Home</a></li>`;
+            }
+            if (index === this.path.length - 1) {
+              return `<li>${this.capitalize(path)}</li>`;
+            }
+            const href = this.path.slice(0, index + 1).join('/');
+            return `<li><a href="${href}">${this.capitalize(path)}</a></li>`;
+          })
+          .join('<li class="separator">›</li>')}
+    </ul>`;
+  }
+}

blocks/button/button.css

@@ -0,0 +1,38 @@
+raqn-button {
+  width: 100%;
+  display: grid;
+  align-content: center;
+  justify-content: center;
+  align-items: center;
+  justify-items: var(--scope-justify, start);
+}
+
+raqn-button > * {
+  background: var(--scope-accent-background, #000);
+  color: var(--scope-accent-color, #fff);
+  text-transform: none;
+  border-radius: var(--scope-border-radius, 0);
+  border-block-start: var(--scope-border-block-start, 1px solid transparent);
+  border-block-end: var(--scope-border-block-end, 1px solid transparent);
+  border-inline-start: var(--scope-border-inline-start, 1px solid transparent);
+  border-inline-end: var(--scope-border-inline-end, 1px solid transparent);
+  overflow: hidden;
+}
+
+raqn-button > *:hover {
+  background: var(--scope-accent-background-hover, #fff);
+  color: var(--scope-accent-color-hover, #fff);
+  border-color: currentcolor;
+}
+
+raqn-button a {
+  color: var(--scope-accent-color, currentcolor);
+  padding: 10px 20px;
+  text-decoration: none;
+}
+
+raqn-button a:hover,
+raqn-button a:visited,
+raqn-button a:active {
+  text-decoration: none;
+}

blocks/button/button.js

@@ -0,0 +1,8 @@
+import Column from '../column/column.js';
+
+export default class Button extends Column {
+  render() {
+    this.setAttribute('role', 'button');
+    this.setAttribute('tabindex', '0');
+  }
+}

blocks/card/card.css

@@ -0,0 +1,63 @@
+raqn-card {
+  background: 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 p a {
+  margin-block: 0;
+}
+
+raqn-card > picture {
+  grid-column: span var(--card-columns, 1fr);
+}
+
+raqn-card > div {
+  position: relative;
+  background: var(--scope-inner-background, transparent);
+  padding: var(--scope-inner-padding, 20px);
+  border-block-start: var(--scope-border-block-start, none);
+  border-block-end: var(--scope-border-block-end, none);
+  border-inline-start: var(--scope-border-inline-start, none);
+  border-inline-end: var(--scope-border-inline-end, none);
+}
+
+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;
+  margin: 0;
+  padding: 0;
+}
+
+raqn-card > div:has(raqn-icon) {
+  padding-block-end: 0;
+  padding-block-end: var(--scope-icon-size, 20px);
+}
+
+raqn-card p:has(raqn-icon) {
+  display: inline-grid;
+}
+
+raqn-card raqn-icon {
+  width: 100%;
+  display: flex;
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-end: 0;
+  box-sizing: border-box;
+  padding: var(--scope-inner-padding, 20px);
+}