From cf4a6ac7f8f0fa2a62f3946c40c489ea764e3fc4 Mon Sep 17 00:00:00 2001
From: Brendan Smith <brendan.smith@digital.trade.gov.uk>
Date: Wed, 11 Dec 2024 14:40:58 +0000
Subject: [PATCH] Change snippet anchor to button element

---
 .../advice/views/tests/test_consolidate_advice.py    |  2 +-
 .../__tests__/canned-snippets-textarea.test.js       | 12 ++++++++----
 core/assets/javascripts/canned-snippets-textarea.js  |  2 +-
 core/assets/styles/components/form/_all.scss         |  1 +
 .../styles/components/form/_canned-snippets.scss     | 12 ++++++++++++
 core/forms/templates/gds/layout/canned_snippets.html |  7 ++++---
 6 files changed, 27 insertions(+), 9 deletions(-)
 create mode 100644 core/assets/styles/components/form/_canned-snippets.scss

diff --git a/caseworker/advice/views/tests/test_consolidate_advice.py b/caseworker/advice/views/tests/test_consolidate_advice.py
index 49b9c19e3a..f0bc4924f9 100644
--- a/caseworker/advice/views/tests/test_consolidate_advice.py
+++ b/caseworker/advice/views/tests/test_consolidate_advice.py
@@ -400,7 +400,7 @@ def test_ConsolidateApproveView_GET_canned_snippets(
     assert response.status_code == 200
     soup = BeautifulSoup(response.content, "html.parser")
     assert "firearm serial numbers" in soup.find("div", {"id": "div_id_proviso_snippets"}).text
-    assert soup.find("a", attrs={"data-snippet-key": "firearm_serial_numbers"}).text == "Add licence condition"
+    assert soup.find("button", attrs={"data-snippet-key": "firearm_serial_numbers"}).text == "Add licence condition"
     assert (
         soup.find("script", {"id": "proviso"}).text
         == '{"other": "", "firearm_serial_numbers": "Firearm serial numbers text"}'
diff --git a/core/assets/javascripts/__tests__/canned-snippets-textarea.test.js b/core/assets/javascripts/__tests__/canned-snippets-textarea.test.js
index d6a24f96c7..434b64f59d 100644
--- a/core/assets/javascripts/__tests__/canned-snippets-textarea.test.js
+++ b/core/assets/javascripts/__tests__/canned-snippets-textarea.test.js
@@ -14,11 +14,11 @@ describe("Canned snippets textarea", () => {
       <textarea name="text">Some starting text</textarea>
       <p>
         Snippet 1
-        <a data-snippet-key="snippet_1">Add</a>
+        <button data-snippet-key="snippet_1">Add</button>
       </p>
       <p>
         Snippet 2
-        <a data-snippet-key="snippet_2">Add</a>
+        <button data-snippet-key="snippet_2">Add</button>
       </p>
       <script type="application/json">{"snippet_1": "snippet 1 text", "snippet_2": "snippet 2 text"}</script>
     </div>
@@ -29,8 +29,12 @@ describe("Canned snippets textarea", () => {
     const component = createComponent($div);
 
     component.init();
-    const addSnippet1 = document.querySelector("a[data-snippet-key=snippet_1]");
-    const addSnippet2 = document.querySelector("a[data-snippet-key=snippet_2]");
+    const addSnippet1 = document.querySelector(
+      "button[data-snippet-key=snippet_1]",
+    );
+    const addSnippet2 = document.querySelector(
+      "button[data-snippet-key=snippet_2]",
+    );
     await userEvent.click(addSnippet1);
     expect($textarea).toHaveDisplayValue(
       `snippet 1 text
diff --git a/core/assets/javascripts/canned-snippets-textarea.js b/core/assets/javascripts/canned-snippets-textarea.js
index 161efa6959..174c509313 100644
--- a/core/assets/javascripts/canned-snippets-textarea.js
+++ b/core/assets/javascripts/canned-snippets-textarea.js
@@ -1,6 +1,6 @@
 class CannedSnippetsTextArea {
   constructor($el) {
-    this.$addButtons = $el.querySelectorAll("a[data-snippet-key]");
+    this.$addButtons = $el.querySelectorAll("button[data-snippet-key]");
     this.$textArea = $el.querySelector("textarea");
     this.$lookup = JSON.parse($el.querySelector("script").textContent);
   }
diff --git a/core/assets/styles/components/form/_all.scss b/core/assets/styles/components/form/_all.scss
index d9dbeec959..1c562bd899 100644
--- a/core/assets/styles/components/form/_all.scss
+++ b/core/assets/styles/components/form/_all.scss
@@ -5,3 +5,4 @@
 @import "email";
 @import "file-upload";
 @import "optional";
+@import "canned-snippets";
diff --git a/core/assets/styles/components/form/_canned-snippets.scss b/core/assets/styles/components/form/_canned-snippets.scss
new file mode 100644
index 0000000000..be157b5960
--- /dev/null
+++ b/core/assets/styles/components/form/_canned-snippets.scss
@@ -0,0 +1,12 @@
+div.canned-snippets__snippet {
+    display: flex;
+    align-items: center;
+
+    span {
+        flex: 0 0 50%;
+    }
+    button {
+        display: flex;
+        margin: 0;
+    }
+}
diff --git a/core/forms/templates/gds/layout/canned_snippets.html b/core/forms/templates/gds/layout/canned_snippets.html
index ab01a079a7..43d132080f 100644
--- a/core/forms/templates/gds/layout/canned_snippets.html
+++ b/core/forms/templates/gds/layout/canned_snippets.html
@@ -13,9 +13,10 @@
 
   <div>
     {% for choice in field.field.choices %}
-        <p>
-            {{ choice.1|unlocalize }} <a href="#" class="govuk-link govuk-link--no-visited-state" data-snippet-key="{{ choice.0|unlocalize }}">{{add_label}}</a>
-        </p>
+        <div class="canned-snippets__snippet">
+            <span>{{ choice.1|unlocalize }}</span>
+            <button class="govuk-button govuk-button--secondary" data-snippet-key="{{ choice.0|unlocalize }}">{{add_label}}</button>
+        </div>
     {% endfor %}
   </div>