From 910dc61084d290e7226b9408897f48ea8faf9fd1 Mon Sep 17 00:00:00 2001
From: Tomasz Dziezyk <tomasz.dziezyk@netcentric.biz>
Date: Wed, 24 Jul 2024 11:44:52 +0200
Subject: [PATCH 1/2] KAW-7684 Add full width image

---
 blocks/image/image.css | 19 +++++++++++++++++++
 blocks/image/image.js  |  5 +++++
 styles/styles.css      | 20 +++++++++++++++-----
 3 files changed, 39 insertions(+), 5 deletions(-)
 create mode 100644 blocks/image/image.css
 create mode 100644 blocks/image/image.js

diff --git a/blocks/image/image.css b/blocks/image/image.css
new file mode 100644
index 0000000..6c052ad
--- /dev/null
+++ b/blocks/image/image.css
@@ -0,0 +1,19 @@
+.section .image-wrapper-full-width {
+  margin: 0;
+  width: 100%;
+  max-width: 100vw;
+}
+
+.block.image picture {
+  display: flex;
+}
+
+.block.image img {
+  width: 100%;
+  object-fit: cover;
+}
+
+.block.image.full-width {
+  margin-left: calc(-1 * var(--section-x-padding));
+  margin-right: calc(-1 * var(--section-x-padding));
+}
diff --git a/blocks/image/image.js b/blocks/image/image.js
new file mode 100644
index 0000000..b4227b8
--- /dev/null
+++ b/blocks/image/image.js
@@ -0,0 +1,5 @@
+export default async function decorate(block) {
+  if (block.classList.contains('full-width')) {
+    block.parentElement.classList.add('image-wrapper-full-width');
+  }
+}
diff --git a/styles/styles.css b/styles/styles.css
index f9dc8d2..18303c3 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -27,6 +27,10 @@
 
   /* nav height */
   --nav-height: 64px;
+
+  /* section paddings */
+  --section-y-padding: 15px;
+  --section-x-padding: 40px;
 }
 
 body {
@@ -217,18 +221,24 @@ div[class$="-wrapper"]:not(:first-child) {
 
 /* sections */
 main .section {
-  padding: 40px 15px;
+  padding: var(--section-y-padding) var(--section-x-padding);
+}
+
+main .section:last-child {
+  padding-bottom: 0;
 }
 
 @media (width >= 768px) {
-  main .section {
-    padding: 40px 30px;
+  :root {
+    --section-y-padding: 40px;
+    --section-x-padding: 30px;
   }
 }
 
 @media (width >= 960px) {
-  main .section {
-    padding: 70px 40px;
+  :root {
+    --section-y-padding: 70px;
+    --section-x-padding: 40px;
   }
 
   .section > div {

From 5c4000e9ed6b04abacb7fb9cf32d6c0381a9be43 Mon Sep 17 00:00:00 2001
From: Tomasz Dziezyk <tomasz.dziezyk@netcentric.biz>
Date: Wed, 24 Jul 2024 12:14:17 +0200
Subject: [PATCH 2/2] KAW-7684 Refactor full widht to support all of the blocks

---
 blocks/image/image.css | 11 -----------
 blocks/image/image.js  |  6 ++----
 scripts/scripts.js     |  9 +++++++++
 styles/styles.css      | 12 ++++++++++++
 4 files changed, 23 insertions(+), 15 deletions(-)

diff --git a/blocks/image/image.css b/blocks/image/image.css
index 6c052ad..e839ef0 100644
--- a/blocks/image/image.css
+++ b/blocks/image/image.css
@@ -1,9 +1,3 @@
-.section .image-wrapper-full-width {
-  margin: 0;
-  width: 100%;
-  max-width: 100vw;
-}
-
 .block.image picture {
   display: flex;
 }
@@ -12,8 +6,3 @@
   width: 100%;
   object-fit: cover;
 }
-
-.block.image.full-width {
-  margin-left: calc(-1 * var(--section-x-padding));
-  margin-right: calc(-1 * var(--section-x-padding));
-}
diff --git a/blocks/image/image.js b/blocks/image/image.js
index b4227b8..286310b 100644
--- a/blocks/image/image.js
+++ b/blocks/image/image.js
@@ -1,5 +1,3 @@
-export default async function decorate(block) {
-  if (block.classList.contains('full-width')) {
-    block.parentElement.classList.add('image-wrapper-full-width');
-  }
+export default async function decorate() {
+  // JS code
 }
diff --git a/scripts/scripts.js b/scripts/scripts.js
index e1fcdfd..342d9d2 100644
--- a/scripts/scripts.js
+++ b/scripts/scripts.js
@@ -55,6 +55,14 @@ function buildAutoBlocks(main) {
   }
 }
 
+function customDecorateBlocks(main) {
+  main.querySelectorAll('div.section > div > div').forEach((block) => {
+    if (block.classList.contains('full-width')) {
+      block.parentElement.classList.add('wrapper-full-width');
+    }
+  });
+}
+
 /**
  * Decorates the main element.
  * @param {Element} main The main element
@@ -67,6 +75,7 @@ export function decorateMain(main) {
   buildAutoBlocks(main);
   decorateSections(main);
   decorateBlocks(main);
+  customDecorateBlocks(main);
 }
 
 /**
diff --git a/styles/styles.css b/styles/styles.css
index 18303c3..1d0fb9b 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -261,6 +261,18 @@ main .section:last-child {
   }
 }
 
+/* full width styles */
+.section .wrapper-full-width {
+  margin: 0;
+  width: 100%;
+  max-width: 100vw;
+}
+
+.block.full-width {
+  margin-left: calc(-1 * var(--section-x-padding));
+  margin-right: calc(-1 * var(--section-x-padding));
+}
+
 /* section metadata */
 main .section.light,
 main .section.highlight {