From 87cd0ad21115053f815f36f567b15142d1de0d58 Mon Sep 17 00:00:00 2001
From: Myles Lewando <myles.lewando@opendataservices.coop>
Date: Mon, 30 Mar 2026 07:47:52 +0100
Subject: [PATCH 1/2] feat: add feedback button to header and footer

---
 src/assets/svg/icon-feedback.svg             |  7 +++++++
 src/scss/components/footer/_footer.scss      |  9 ++++++++-
 src/scss/components/footer/footer.stories.ts |  8 +++++++-
 src/scss/components/header/header.stories.ts | 12 +++++++++++-
 src/scss/components/icon/_icon.scss          |  5 +++++
 5 files changed, 38 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/svg/icon-feedback.svg

diff --git a/src/assets/svg/icon-feedback.svg b/src/assets/svg/icon-feedback.svg
new file mode 100644
index 0000000..79c9b49
--- /dev/null
+++ b/src/assets/svg/icon-feedback.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+ <g transform="translate(2.4375 2.3072)">
+  <path d="m14.635 6.166a8 8 0 0 1 0.01563 0.48438 8 8 0 0 1-0.05469 0.93164c1.8806 0.82235 3.1953 2.6954 3.1953 4.8867 3.32e-4 0.94911-0.25234 1.8825-0.73242 2.7012a0.66672 0.66672 0 0 0-0.07031 0.50195l0.375 1.4629 0.16211 0.63086-0.63867-0.17773-1.5137-0.42188a0.66672 0.66672 0 0 0-0.48242 0.04883c-0.75278 0.38572-1.5859 0.58793-2.4316 0.58789-2.1955 0-4.0724-1.319-4.8926-3.2051a8 8 0 0 1-0.91602 0.05274 8 8 0 0 1-0.49805-0.01563c0.90039 2.6202 3.3891 4.502 6.3066 4.502 0.93425-2.31e-4 1.8363-0.2698 2.6875-0.64844l1.3828 0.38477 1.75 0.48828a0.66672 0.66672 0 0 0 0.82422-0.80859l-0.44922-1.75-0.3418-1.3379c0.47568-0.93526 0.81287-1.9431 0.8125-2.9961 0-2.9136-1.8757-5.3995-4.4902-6.3027z" stop-color="#000000" style="paint-order:markers stroke fill"/>
+  <path transform="translate(-2.4414 -2.3008)" d="m9.1074 2.3008c-3.674 0-6.666 2.992-6.666 6.666-3.663e-4 1.053 0.33682 2.0608 0.8125 2.9961l-0.3418 1.3379-0.44922 1.75a0.66672 0.66672 0 0 0 0.82422 0.80859l1.75-0.48828 1.3828-0.38477c0.85171 0.37884 1.7526 0.64847 2.6875 0.64844 3.674 0 6.668-2.994 6.668-6.668 0-3.674-2.994-6.666-6.668-6.666zm0 1.334c2.9534 0 5.334 2.3786 5.334 5.332s-2.3806 5.334-5.334 5.334c-0.84584 3.2e-5 -1.6789-0.20218-2.4316-0.58789a0.66672 0.66672 0 0 0-0.48242-0.04883l-1.5137 0.42188-0.63867 0.17773 0.16211-0.63086 0.375-1.4629a0.66672 0.66672 0 0 0-0.070312-0.50195c-0.48008-0.8187-0.73275-1.7521-0.73242-2.7012 0-2.9534 2.3786-5.332 5.332-5.332z" stop-color="#000000" style="paint-order:markers stroke fill"/>
+ </g>
+</svg>
diff --git a/src/scss/components/footer/_footer.scss b/src/scss/components/footer/_footer.scss
index ba0a8ef..99570b8 100644
--- a/src/scss/components/footer/_footer.scss
+++ b/src/scss/components/footer/_footer.scss
@@ -45,7 +45,7 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 2rem;
+  gap: 1rem;
   > :first-child {
     margin-inline-end: auto;
   }
@@ -99,3 +99,10 @@
   display: flex;
   gap: 18px;
 }
+
+.iati-footer__actions {
+  display: flex;
+  gap: 1rem;
+  justify-content: flex-end;
+  align-items: flex-start;
+}
diff --git a/src/scss/components/footer/footer.stories.ts b/src/scss/components/footer/footer.stories.ts
index fe06c89..929e574 100644
--- a/src/scss/components/footer/footer.stories.ts
+++ b/src/scss/components/footer/footer.stories.ts
@@ -137,7 +137,13 @@ const legalSectionHtml = html`
           ${legalNavItems.map((i) => html`<li>${i}</li>`)}
         </ul>
       </nav>
-      ${CountrySwitcher.render?.call({})}
+      <div class="iati-footer__actions">
+        ${CountrySwitcher.render?.call({})}
+        <button class="iati-button iati-button--light hide--mobile-nav">
+          <span>Feedback</span>
+          <i class="iati-icon iati-icon--feedback"></i>
+        </button>
+      </div>
       <div class="iati-footer__social">
         <a
           href="https://www.linkedin.com/company/international-aid-transparency-initiative/"
diff --git a/src/scss/components/header/header.stories.ts b/src/scss/components/header/header.stories.ts
index 0d1c7c5..db2d936 100644
--- a/src/scss/components/header/header.stories.ts
+++ b/src/scss/components/header/header.stories.ts
@@ -68,9 +68,13 @@ export const Header: Story = {
           <div class="iati-header__actions">
             ${CountrySwitcher.render?.call({ ...args })}
             <button class="iati-button iati-button--light hide--mobile-nav">
+              <span>Feedback</span>
+              <i class="iati-icon iati-icon--feedback"></i>
+            </button>
+            <a href="#" class="iati-button iati-button--light hide--mobile-nav">
               <span>Help Docs</span>
               <i class="iati-icon iati-icon--info"></i>
-            </button>
+            </a>
             <button class="iati-button iati-button--light">
               <span>Search</span>
               <i class="iati-icon iati-icon--search"></i>
@@ -126,6 +130,12 @@ export const CompactHeader: Story = {
           <div class="iati-header__main-row">
             <div class="iati-header__actions">
               ${CompactCountrySwitcher.render?.call({ ...args })}
+              <button
+                class="iati-button iati-button--light iati-button--compact hide--mobile-nav"
+              >
+                <span>Feedback</span>
+                <i class="iati-icon iati-icon--feedback"></i>
+              </button>
               <button
                 class="iati-button iati-button--light iati-button--compact hide--mobile-nav"
               >
diff --git a/src/scss/components/icon/_icon.scss b/src/scss/components/icon/_icon.scss
index 8b5e5da..3749efe 100644
--- a/src/scss/components/icon/_icon.scss
+++ b/src/scss/components/icon/_icon.scss
@@ -10,6 +10,11 @@
     background-image: url("@assets/svg/icon-info.svg");
   }
 
+  &--feedback {
+    background-image: url("@assets/svg/icon-feedback.svg");
+    background-size: 120%;
+  }
+
   &--search {
     background-image: url("@assets/svg/icon-search.svg");
   }

From 9b3af3eee98f2c06fa4a76773c603b9d91e7613d Mon Sep 17 00:00:00 2001
From: Myles Lewando <myles.lewando@opendataservices.coop>
Date: Tue, 31 Mar 2026 10:02:16 +0100
Subject: [PATCH 2/2] fix: replace buttons with anchors for links

---
 src/scss/components/footer/_footer.scss      |  2 +-
 src/scss/components/footer/footer.stories.ts |  4 ++--
 src/scss/components/header/header.stories.ts | 10 ++++++----
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/scss/components/footer/_footer.scss b/src/scss/components/footer/_footer.scss
index 99570b8..d333c44 100644
--- a/src/scss/components/footer/_footer.scss
+++ b/src/scss/components/footer/_footer.scss
@@ -9,7 +9,7 @@
   font-weight: 600;
   margin-top: auto;
 
-  a {
+  a:not([class]) {
     color: currentColor;
     &:hover {
       color: $color-blue-30;
diff --git a/src/scss/components/footer/footer.stories.ts b/src/scss/components/footer/footer.stories.ts
index 929e574..db3ef72 100644
--- a/src/scss/components/footer/footer.stories.ts
+++ b/src/scss/components/footer/footer.stories.ts
@@ -139,10 +139,10 @@ const legalSectionHtml = html`
       </nav>
       <div class="iati-footer__actions">
         ${CountrySwitcher.render?.call({})}
-        <button class="iati-button iati-button--light hide--mobile-nav">
+        <a href="#" class="iati-button iati-button--light hide--mobile-nav">
           <span>Feedback</span>
           <i class="iati-icon iati-icon--feedback"></i>
-        </button>
+        </a>
       </div>
       <div class="iati-footer__social">
         <a
diff --git a/src/scss/components/header/header.stories.ts b/src/scss/components/header/header.stories.ts
index db2d936..301325a 100644
--- a/src/scss/components/header/header.stories.ts
+++ b/src/scss/components/header/header.stories.ts
@@ -130,18 +130,20 @@ export const CompactHeader: Story = {
           <div class="iati-header__main-row">
             <div class="iati-header__actions">
               ${CompactCountrySwitcher.render?.call({ ...args })}
-              <button
+              <a
                 class="iati-button iati-button--light iati-button--compact hide--mobile-nav"
+                href="#"
               >
                 <span>Feedback</span>
                 <i class="iati-icon iati-icon--feedback"></i>
-              </button>
-              <button
+              </a>
+              <a
                 class="iati-button iati-button--light iati-button--compact hide--mobile-nav"
+                href="#"
               >
                 <span>Help Docs</span>
                 <i class="iati-icon iati-icon--info"></i>
-              </button>
+              </a>
               <button
                 class="iati-button iati-button--light iati-button--compact"
               >