Change snippet anchor to button element

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"}'

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

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);
   }

core/assets/styles/components/form/_all.scss

@@ -5,3 +5,4 @@
 @import "email";
 @import "file-upload";
 @import "optional";
+@import "canned-snippets";

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;
+    }
+}

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>