From ae7556d8d0100bd50c90bca1df056b4224c0300d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Jove=CC=81?= <laura.jove@netcentric.biz>
Date: Tue, 3 Dec 2024 20:03:57 +0100
Subject: [PATCH 1/4] Include new icons and use SVG as icons instead of image

---
 icons/arrow-right.svg   |  4 ++++
 icons/calendar.svg      |  1 +
 icons/chevron-right.svg |  1 +
 icons/download.svg      |  1 +
 scripts/aem.js          | 25 ++++++++++++++++---------
 5 files changed, 23 insertions(+), 9 deletions(-)
 create mode 100644 icons/arrow-right.svg
 create mode 100644 icons/calendar.svg
 create mode 100644 icons/chevron-right.svg
 create mode 100644 icons/download.svg

diff --git a/icons/arrow-right.svg b/icons/arrow-right.svg
new file mode 100644
index 0000000..96f7e2d
--- /dev/null
+++ b/icons/arrow-right.svg
@@ -0,0 +1,4 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M21 12L12.1023 20L11 19.0089L18.7954 12L11 4.99106L12.1023 4L21 12Z" fill="var(--icon-base-color, currentcolor)"/>
+  <path d="M19 11.25H3V12.75H19V11.25Z" fill="var(--icon-base-color, currentcolor)"/>
+</svg>
diff --git a/icons/calendar.svg b/icons/calendar.svg
new file mode 100644
index 0000000..5f88313
--- /dev/null
+++ b/icons/calendar.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 16 17" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M13 2.5v-2h-1v2H4v-2H3v2H0v14h16v-14h-3Zm2 13H1v-9h14v9Zm0-10H1v-2h14v2Zm-8 5.1-.7-.7L8 8.5h1v5H8V9.8l-1 .8Z" fill="var(--icon-base-color, currentcolor)"/></svg>
\ No newline at end of file
diff --git a/icons/chevron-right.svg b/icons/chevron-right.svg
new file mode 100644
index 0000000..0c2bf7a
--- /dev/null
+++ b/icons/chevron-right.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M15.898 11.009 17 12l-8.898 8L7 19.009 14.795 12 7 4.991 8.102 4l7.796 7.009Z" fill="var(--icon-base-color, currentcolor)"/></svg>
\ No newline at end of file
diff --git a/icons/download.svg b/icons/download.svg
new file mode 100644
index 0000000..db03e46
--- /dev/null
+++ b/icons/download.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.699 16.4v2.25H6.35V16.4H5V20h14.049v-3.6h-1.35Z" fill="var(--icon-base-color, currentcolor)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12.15 15.188 6.016 8.952l-.867.88 7 7.12 7-7.12-.868-.88-6.133 6.236Z" fill="var(--icon-base-color, currentcolor)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M11.51 16h1.35V4h-1.35v12Z" fill="var(--icon-base-color, currentcolor)"/></svg>
\ No newline at end of file
diff --git a/scripts/aem.js b/scripts/aem.js
index 40662e6..0ba253a 100644
--- a/scripts/aem.js
+++ b/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;
+    }
+  }
 }
 
 /**

From bb0c8c89a2980379e7a5b767b045180e72fb8f7c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Jove=CC=81?= <laura.jove@netcentric.biz>
Date: Tue, 3 Dec 2024 20:04:05 +0100
Subject: [PATCH 2/4] Style buttons

---
 styles/styles.css | 121 +++++++++++++++++++++++++++++++++++-----------
 1 file changed, 92 insertions(+), 29 deletions(-)

diff --git a/styles/styles.css b/styles/styles.css
index 1bb5d80..2d4b63c 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -41,7 +41,7 @@
   --hl22-line-height: 160%;
   --txt150-font-size: 14px;
   --txt150-line-height: 114%;
-  --txt150-font-weight: bold;
+  --txt150-font-weight: 700;
   --txt201-font-size: 16px;
   --txt201-line-height: 160%;
   --txt204-font-size: 14px;
@@ -244,66 +244,129 @@ a:hover {
   text-decoration: underline;
 }
 
+.icon {
+  display: inline-block;
+}
+
+.icon svg {
+  fill: currentcolor;
+}
+
 /* buttons */
 a.button:any-link,
 button {
+  --button-bg-color: var(--col-brand30);
+  --button-border-color: var(--col-brand30);
+  --button-text-color: var(--col-white);
+  --button-icon-color: var(--button-text-color);
+  --button-vertical-padding: 12px;
+  --button-horitzontal-padding: 16px;
+
   box-sizing: border-box;
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
   max-width: 100%;
   margin: 12px 0;
-  border: 2px solid transparent;
-  border-radius: 2.4em;
-  padding: 0.5em 1.2em;
-  font-family: var(--body-font-family);
-  font-style: normal;
-  font-weight: 500;
-  line-height: 1.25;
+  font-size: var(--txt150-font-size);
+  line-height: var(--txt150-line-height);
+  font-weight: var(--txt150-font-weight);
   text-align: center;
   text-decoration: none;
-  background-color: var(--link-color);
-  color: var(--background-color);
+  color: var(--button-text-color);
   cursor: pointer;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+
+  /* stylelint-disable-next-line no-descending-specificity */
+  .icon {
+    color: var(--button-icon-color);
+  }
 }
 
 a.button:hover,
 a.button:focus,
 button:hover,
 button:focus {
-  background-color: var(--link-hover-color);
+  --button-bg-color: var(--col-brand50);
+  --button-border-color: var(--col-brand50);
+
   cursor: pointer;
 }
 
+a.button:any-link:not(.button--tertiary),
+button:not(.button--tertiary) {
+  border-radius: 2px;
+  border: 1px solid var(--button-border-color);
+  padding: var(--button-vertical-padding) var(--button-horitzontal-padding);
+  background-color: var(--button-bg-color);
+  min-height: 48px;
+}
+
 button:disabled,
 button:disabled:hover {
-  background-color: var(--light-neutral-color);
+  --button-bg-color: var(--col-neutral30);
+  --button-border-color: var(--col-neutral30);
+  --button-text-color: var(--col-white);
+
   cursor: unset;
 }
 
-a.button.secondary,
-button.secondary {
-  background-color: unset;
-  border: 2px solid currentcolor;
-  color: var(--text-color);
+a.button.button--secondary,
+button.button--secondary {
+  --button-bg-color: var(--col-white);
+  --button-border-color: var(--col-neutral90);
+  --button-text-color: var(--col-neutral90);
+  --button-icon-color: var(--col-brand40);
+
+  &:hover,
+  &:focus {
+    border-width: 2px;
+
+    --button-vertical-padding: 11px;
+    --button-horitzontal-padding: 15px;
+  }
 }
 
-main img {
-  max-width: 100%;
-  width: auto;
-  height: auto;
+button.button--secondary:disabled,
+button.button--secondary:disabled:hover {
+  --button-border-color: var(--col-neutral30);
+  --button-text-color: var(--col-neutral30);
+  --button-icon-color: var(--col-neutral30);
 }
 
-.icon {
-  display: inline-block;
-  height: 24px;
-  width: 24px;
+a.button.button--tertiary,
+button.button--tertiary {
+  --button-bg-color: var(--col-white);
+  --button-border-color: var(--col-neutral90);
+  --button-text-color: var(--col-neutral90);
+  --button-icon-color: var(--col-brand40);
+
+  font-style: normal;
+  padding-block-end: 3px;
+
+  &:hover,
+  &:focus {
+    --button-vertical-padding: 11px;
+    --button-horitzontal-padding: 15px;
+
+    border-width: 2px;
+    text-decoration: underline;
+    text-underline-offset: 5px;
+  }
+}
+
+button.button--tertiary:disabled,
+button.button--tertiary:disabled:hover {
+  --button-text-color: var(--col-neutral30);
+  --button-icon-color: var(--col-neutral30);
 }
 
-.icon img {
-  height: 100%;
-  width: 100%;
+main img {
+  max-width: 100%;
+  width: auto;
+  height: auto;
 }
 
 main {

From 06e2b7abd5648aea1f9c80f2a7fccb8d49debf9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Jove=CC=81?= <laura.jove@netcentric.biz>
Date: Mon, 9 Dec 2024 11:31:17 +0100
Subject: [PATCH 3/4] add border width variable

---
 styles/styles.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/styles/styles.css b/styles/styles.css
index 8c39f0d..55cb7ef 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -257,6 +257,7 @@ a.button:any-link,
 button {
   --button-bg-color: var(--col-brand30);
   --button-border-color: var(--col-brand30);
+  --button-border-width: 1px;
   --button-text-color: var(--col-white);
   --button-icon-color: var(--button-text-color);
   --button-vertical-padding: 12px;
@@ -298,7 +299,7 @@ button:focus {
 a.button:any-link:not(.button--tertiary),
 button:not(.button--tertiary) {
   border-radius: 2px;
-  border: 1px solid var(--button-border-color);
+  border: var(--button-border-width) solid var(--button-border-color);
   padding: var(--button-vertical-padding) var(--button-horitzontal-padding);
   background-color: var(--button-bg-color);
   min-height: 48px;
@@ -322,7 +323,7 @@ button.button--secondary {
 
   &:hover,
   &:focus {
-    border-width: 2px;
+    --button-border-width: 2px;
 
     --button-vertical-padding: 11px;
     --button-horitzontal-padding: 15px;

From b1485cf0f30440da26d44636c1358175fd679df6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laura=20Jove=CC=81?= <laura.jove@netcentric.biz>
Date: Mon, 9 Dec 2024 11:32:57 +0100
Subject: [PATCH 4/4] fix linter

---
 styles/styles.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/styles/styles.css b/styles/styles.css
index 55cb7ef..5987b50 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -324,7 +324,6 @@ button.button--secondary {
   &:hover,
   &:focus {
     --button-border-width: 2px;
-
     --button-vertical-padding: 11px;
     --button-horitzontal-padding: 15px;
   }