Merge pull request #1 from Netcentric/demo

Demo

.editorconfig

@@ -2,4 +2,4 @@
 indent_size = 2
 
 [*.css]
-indent_size = 4
+indent_size = 2

blocks/breadcrumb/breadcrumb.css

@@ -0,0 +1,43 @@
+.breadcrumb {
+  color: rgb(0 161 159);
+  font-size: 16px;
+}
+
+.breadcrumb a:any-link {
+  color: rgb(0 161 159);
+  font-family: rwe-light, Arial, Helvetica, sans-serif;
+}
+
+.breadcrumb a:hover,
+.breadcrumb a:active {
+  text-decoration: none;
+}
+
+.breadcrumb ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+  margin: 0;
+}
+
+.breadcrumb ul li:last-of-type {
+  font-weight: 600;
+}
+
+.breadcrumb li span {
+  font-size: 14px;
+  margin-left: 4px;
+  font-weight: 700;
+}
+
+.breadcrumb.dark {
+  background: #1d4477;
+  color: var(--white);
+  padding: 16px;
+}
+
+.breadcrumb.dark a:any-link {
+  color: var(--white);
+}

blocks/breadcrumb/breadcrumb.js

@@ -0,0 +1,8 @@
+export default function decorate(block) {
+  block.querySelectorAll('ul li:not(:last-of-type)').forEach((el) => {
+    const iconEl = document.createElement('span');
+    iconEl.classList.add('icon-rwe-anchor-right');
+
+    el.append(iconEl);
+  });
+}

blocks/cards/cards.css

@@ -1,19 +1,34 @@
+.cards {
+  padding: 16px 0;
+}
+
 .cards > ul {
   list-style: none;
   margin: 0;
   padding: 0;
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(257px, 1fr));
-  grid-gap: 24px;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-gap: 16px;
 }
 
 .cards > ul > li {
-  border: 1px solid #dadada;
   background-color: var(--background-color);
 }
 
+.cards > ul > li h1,
+.cards > ul > li h2,
+.cards > ul > li h3 {
+  font-family: rwe-medium, Arial, Helvetica, sans-serif;
+}
+
 .cards .cards-card-body {
-  margin: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.cards .cards-card-body p {
+  margin: 0;
 }
 
 .cards .cards-card-image {
@@ -25,3 +40,128 @@
   aspect-ratio: 4 / 3;
   object-fit: cover;
 }
+
+.cards .paragraphs-wrapper {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: all 300ms ease-in-out;
+  overflow: hidden;
+}
+
+.cards .paragraphs-wrapper * {
+  overflow: hidden;
+}
+
+.cards .show .paragraphs-wrapper {
+  grid-template-rows: 1fr;
+}
+
+.cards .show .paragraphs-wrapper + a span:first-child::before {
+  display: inline-block;
+  transform: rotate(180deg);
+}
+
+.cards .paragraphs-wrapper + a {
+  color: #00a19f;
+  cursor: pointer;
+}
+
+.cards .paragraphs-wrapper + a:hover,
+.cards .paragraphs-wrapper + a:active {
+  text-decoration: none;
+}
+
+/* with-gradient variant */
+.cards.with-gradient .cards-card-body {
+  height: 100%;
+  justify-content: space-between;
+}
+
+.cards.with-gradient li {
+  padding: 16px;
+  background-color: #e8e8e4;
+  transition: transform 300ms ease-in-out;
+}
+
+.cards.with-gradient li:hover {
+  transform: scale(1.05);
+}
+
+.cards.with-gradient li:nth-child(2n + 1) {
+  background: url("/images/combined-energy.png"),
+    linear-gradient(225deg, #00a19f, #1d4477);
+  background-size: 240px 200px, auto;
+  background-repeat: no-repeat, repeat;
+  background-position: 100% 100%, 0 0;
+  color: var(--white);
+}
+
+.cards.with-gradient li p:has(picture) {
+  margin: -16px -16px 0;
+}
+
+.cards.with-gradient .cards-card-body a:any-link {
+  background-color: transparent;
+  color: #00a19f;
+  border-color: #00a19f;
+}
+
+.cards.with-gradient li:nth-child(2n + 1) a:any-link {
+  color: var(--white);
+}
+
+.cards.with-gradient .cards-card-body a:any-link:hover {
+  background-color: #00a19f;
+  color: var(--white);
+}
+
+/* with-gradient-version-2 */
+/* stylelint-disable-next-line no-descending-specificity */
+.cards.with-gradient-version-2 li {
+  aspect-ratio: 3/2;
+  background-color: var(--white);
+  padding: 16px;
+  transition: transform 300ms ease-in-out;
+}
+
+.cards.with-gradient-version-2 li:hover {
+  transform: scale(1.05);
+}
+
+.cards.with-gradient-version-2 li:nth-child(2n + 1) {
+  background: url("/images/combined-energy.png"),
+    linear-gradient(225deg, #00a19f, #1d4477);
+  background-size: 240px 200px, auto;
+  background-repeat: no-repeat, repeat;
+  background-position: 100% 100%, 0 0;
+  color: var(--white);
+}
+
+.cards.with-gradient-version-2 .cards-card-body {
+  height: 100%;
+  justify-content: space-between;
+}
+
+.cards.with-gradient-version-2 .cards-card-body h3 + p {
+  flex-grow: 1;
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.cards.with-gradient-version-2 .cards-card-body a:any-link {
+  color: var(--white);
+}
+
+.cards.with-gradient-version-2 .cards-card-body a:any-link:hover,
+.cards.with-gradient-version-2 .cards-card-body a:any-link:active {
+  text-decoration: none;
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+.cards.with-gradient-version-2 li:nth-child(2n) a:any-link {
+  color: #00a19f;
+}
+
+.cards.with-gradient-version-2 .cards-card-body a span {
+  margin-left: 4px;
+  font-size: 15px;
+}

blocks/cards/cards.js

@@ -13,6 +13,34 @@ export default function decorate(block) {
     ul.append(li);
   });
   ul.querySelectorAll('picture > img').forEach((img) => img.closest('picture').replaceWith(createOptimizedPicture(img.src, img.alt, false, [{ width: '750' }])));
+
   block.textContent = '';
   block.append(ul);
+
+  if (block.classList.contains('show-more')) {
+    block.querySelectorAll('.cards-card-body').forEach((cardBody) => {
+      const textParagraphs = cardBody.querySelectorAll('p:not(:has(picture))');
+      const paragraphsWrapper = document.createElement('div');
+      paragraphsWrapper.classList.add('paragraphs-wrapper');
+      paragraphsWrapper.append(...textParagraphs);
+      cardBody.append(paragraphsWrapper);
+
+      const learnMoreButton = document.createElement('a');
+      let showMore = true;
+      learnMoreButton.innerHTML = '<span class="icon-rwe-anchor-down"></span> <span class="label">Show more</span>';
+      learnMoreButton.classList.add('card-button');
+      learnMoreButton.addEventListener('click', () => {
+        showMore = !showMore;
+        learnMoreButton.querySelector('span.label').textContent = showMore ? 'Show more' : 'Show less';
+        cardBody.classList.toggle('show');
+      });
+      cardBody.append(learnMoreButton);
+    });
+  }
+
+  if (block.classList.contains('with-gradient-version-2')) {
+    block.querySelectorAll('.button').forEach((el) => {
+      el.classList.remove('button');
+    });
+  }
 }