Correctly style disabled warning button

CHANGELOG.md

@@ -16,6 +16,7 @@
 
 :wrench: **Fixes**
 
+- Fix appearance of disabled warning buttons ([Issue 1034]([https://github.com/nhsuk/nhsuk-service-manual-community-backlog/issues/1034]))
 - Fix layout bug where breadcrumb component was changing height when more than one link shown
 - Fix print styling bug with emergency care card ([Issue 533]([https://github.com/nhsuk/nhsuk-service-manual-community-backlog/issues/533]))
 

app/components/button/disabled.njk

@@ -7,14 +7,34 @@
 
   <div class="nhsuk-width-container">
     <main class="nhsuk-main-wrapper" id="maincontent">
-
       <div class="nhsuk-grid-row">
-        <div class="nhsuk-grid-column-two-thirds">
+        <div class="nhsuk-grid-column-full">
           {{ button({
             "text": "Disabled button",
             "disabled": true
           }) }}
         </div>
+        <div class="nhsuk-grid-column-full">
+          {{ button({
+            "text": "Disabled secondary button",
+            "classes": "nhsuk-button--secondary",
+            "disabled": true
+          }) }}
+        </div>
+        <div class="nhsuk-grid-column-full">
+          {{ button({
+            "text": "Disabled reversed button",
+            "classes": "nhsuk-button--reverse",
+            "disabled": true
+          }) }}
+        </div>
+        <div class="nhsuk-grid-column-full">
+          {{ button({
+            "text": "Disabled warning button",
+            "classes": "nhsuk-button--warning",
+            "disabled": true
+          }) }}
+        </div>
       </div>
     </main>
   </div>

packages/components/button/_button.scss

@@ -133,10 +133,6 @@ $button-shadow-size: 4px;
     color: $nhsuk-button-text-color;
     top: $button-shadow-size;
   }
-
-  &.nhsuk-button--disabled {
-    background-color: $nhsuk-secondary-button-color;
-  }
 }
 
 .nhsuk-button--reverse {
@@ -170,14 +166,6 @@ $button-shadow-size: 4px;
       color: $color_nhsuk-white;
     }
   }
-
-  &.nhsuk-button--disabled {
-    background-color: $nhsuk-reverse-button-color;
-
-    &:focus {
-      background-color: $nhsuk-reverse-button-color;
-    }
-  }
 }
 
 .nhsuk-button--warning {
@@ -201,75 +189,13 @@ $button-shadow-size: 4px;
     color: $nhsuk-button-text-color;
     top: $button-shadow-size;
   }
-
-  &.nhsuk-button--disabled {
-    background-color: $nhsuk-warning-button-color;
-  }
 }
 
 /**
  * Button disabled states
  */
-/* stylelint-disable string-quotes */
 .nhsuk-button--disabled,
-.nhsuk-button[disabled="disabled"],
-.nhsuk-button[disabled] {
-  background-color: $nhsuk-button-color;
+.nhsuk-button:disabled {
   opacity: (0.5);
   pointer-events: none;
-
-  &:hover {
-    background-color: $nhsuk-button-color;
-    cursor: default;
-  }
-
-  &:focus {
-    background-color: $nhsuk-button-color;
-    outline: none;
-  }
-
-  &:active {
-    box-shadow: 0 $button-shadow-size 0 $nhsuk-button-shadow-color; // s0
-    top: 0;
-  }
-}
-
-.nhsuk-button--secondary[disabled="disabled"],
-.nhsuk-button--secondary[disabled] {
-  background-color: $nhsuk-secondary-button-color;
-  opacity: (0.5);
-
-  &:hover {
-    background-color: $nhsuk-secondary-button-color;
-    cursor: default;
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &:active {
-    box-shadow: 0 $button-shadow-size 0 $nhsuk-secondary-button-shadow-color; // s0
-    top: 0;
-  }
-}
-
-.nhsuk-button--reverse[disabled="disabled"],
-.nhsuk-button--reverse[disabled] {
-  background-color: $nhsuk-reverse-button-color;
-  opacity: (0.5);
-
-  &:hover {
-    background-color: $nhsuk-reverse-button-color;
-    cursor: default;
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &:active {
-    box-shadow: 0 $button-shadow-size 0 $nhsuk-reverse-button-shadow-color; // s0
-    top: 0;
-  }
 }