Add button states (#149)

This adds a demo of how button states could work.

Before pressed:

![Screenshot 2025-01-09 at 14 46
18](https://github.com/user-attachments/assets/ddca4d23-1d85-4b3c-92d8-2ef3971dca74)

When pressed:

![Screenshot 2025-01-09 at 14 46
32](https://github.com/user-attachments/assets/b86783bc-6fbf-4c66-8529-bb93f95478b8)

If there’s an error (message would vary depending on error type):

![Screenshot 2025-01-09 at 14 46
55](https://github.com/user-attachments/assets/fb75944e-af41-45d5-855a-3a41ed7cdfb2)

Author: frankieroberto

app/assets/sass/components/_button.scss

@@ -21,3 +21,58 @@
     }
   }
 }
+
+
+.app-button--loading {
+  position: relative;
+  -webkit-transition: width 5s ease;
+  transition: width 5s ease
+}
+
+.app-button--loading:before {
+    position: relative;
+    display: inline-block;
+    margin-right: 10px;
+    margin-bottom: -9px;
+    height: 25px;
+    width: 25px;
+    background: transparent url('data:image/svg+xml,<svg height="200" viewBox="0 0 200 200" width="200" xmlns="http://www.w3.org/2000/svg">%0A  <g fill="none" fill-rule="evenodd">%0A    <path%0A        d="m100 0v13.0000106c-.0149985-.0000068-.0299979-.0000106-.0449982-.0000106-48.0239214 0-86.9550018 38.9310804-86.9550018 86.9550018 0 48.0239212 38.9310804 86.9550022 86.9550018 86.9550022 48.0089212 0 86.9306812-38.906764 86.9549902-86.910004h13.090008c0 55.228475-44.771525 100-100 100s-100-44.771525-100-100 44.771525-100 100-100z"%0A        fill="%23e5e5e5"/>%0A    <path%0A        d="m0 100h13.0000106zm100 86.909993v13.090007zm100-86.909993h-13.090007c.000007-.0149985.000011-.0299979.000011-.0449982 0-48.0089211-38.906764-86.9306807-86.910004-86.9549904v-13.0000114c55.228475 0 100 44.771525 100 100z"%0A        fill="%23367c42"/>%0A  </g>%0A</svg>') no-repeat;
+    background-size: 25px 25px;
+    -webkit-animation-name: spin;
+    animation-name: spin;
+    -webkit-animation-duration: .75s;
+    animation-duration: .75s;
+    -webkit-animation-iteration-count: infinite;
+    animation-iteration-count: infinite;
+    -webkit-transform-origin: 50% 50%;
+    -ms-transform-origin: 50% 50%;
+    transform-origin: 50% 50%;
+    animation-timing-function: ease;
+
+}
+
+@keyframes spin {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform:rotate(0)
+    }
+
+    to {
+        -webkit-transform: rotate(1turn);
+        transform:rotate(1turn)
+    }
+}
+
+.app-button--loading[disabled],
+.app-button--loading[disabled]:hover {
+    background-color: #44834d;
+    opacity: 1;
+    -webkit-box-shadow: 0 2px 0 #88988c;
+    box-shadow:0 2px #88988c
+}
+
+
+.app-body--error {
+  font-weight: bold;
+  color: $nhsuk-error-color;
+}

app/views/button-states.html

@@ -0,0 +1,113 @@
+{% extends 'layout.html' %}
+
+{% block pageTitle %}
+  Button states
+{% endblock %}
+
+{% block content %}
+  <div class="nhsuk-grid-row">
+    <div class="nhsuk-grid-column-two-thirds">
+
+      <h1 class="nhsuk-heading-l">Button states</h1>
+
+
+      <h2 class="nhsuk-heading-m">Not yet pressed</h2>
+
+      {{ button({
+        text: "Confirm details and save"
+      }) }}
+
+      <h2 class="nhsuk-heading-m">Pressed and being sent</h2>
+
+      {{ button({
+        text: "Saving",
+        classes: "app-button--loading",
+        attributes: {
+          disabled: true,
+          "aria-live": "assertive",
+          "aria-label": "Saving"
+        }
+      }) }}
+
+      <h2 class="nhsuk-heading-m">Example showing internet connection failing or timing out</h2>
+
+      <div class="app-button-group">
+        {{ button({
+          text: "Confirm details and save",
+          attributes: {
+            id: "button-timeout-example"
+          }
+        }) }}
+      </div>
+
+      <h2 class="nhsuk-heading-m">Example showing server error (500)</h2>
+
+      <div class="app-button-group">
+        {{ button({
+          text: "Confirm details and save",
+          attributes: {
+            id: "button-server-error-example"
+          }
+        }) }}
+      </div>
+
+      <h2 class="nhsuk-heading-m">Example showing server down (503)</h2>
+
+      <div class="app-button-group">
+        {{ button({
+          text: "Confirm details and save",
+          attributes: {
+            id: "button-server-down-example"
+          }
+        }) }}
+      </div>
+
+      <script>
+
+        function setButtonAsSaving(button, errorMessage) {
+
+          button.disabled = true
+          button.classList.add('app-button--loading')
+          button.textContent = 'Saving'
+          button.setAttribute('aria-live', 'assertive')
+          button.setAttribute('aria-label', 'Saving')
+
+          let errorMessageElement = button.parentElement.querySelector('.app-body--error')
+
+          if (errorMessageElement) {
+            errorMessageElement.remove()
+          }
+
+          const randomTimeOut = ((1 + (5 * Math.random())) * 1000)
+
+          setTimeout(function() {
+            this.textContent = 'Confirm details and save'
+            this.disabled = false
+            this.classList.remove('app-button--loading')
+            this.removeAttribute('aria-live')
+            this.removeAttribute('aria-label')
+            this.insertAdjacentHTML("beforebegin", '<p class="app-body--error" aria-live="polite">' + errorMessage + '</p>')
+          }.bind(event.target), randomTimeOut)
+
+        }
+
+        document.getElementById('button-server-error-example').addEventListener('click', function(event) {
+          setButtonAsSaving(event.target, "Save failed due to server error. Try again.")
+        })
+
+        document.getElementById('button-timeout-example').addEventListener('click', function(event) {
+          setButtonAsSaving(event.target, "Save failed. Check your internet connection and try again.")
+        })
+
+        document.getElementById('button-server-down-example').addEventListener('click', function(event) {
+          setButtonAsSaving(event.target, "Save failed because of server error. Try again.")
+        })
+
+      </script>
+
+
+    </div>
+  </div>
+
+
+{% endblock %}