Rename secondary white button to secondary solid (#1295)

Author: frankieroberto

app/components/all-buttons.njk

@@ -260,7 +260,7 @@
             <div class="nhsuk-form-group">
               {{ button({
                 "text": "Find my location",
-                "classes": "nhsuk-button--secondary-white-background nhsuk-u-margin-bottom-0"
+                "classes": "nhsuk-button--secondary-solid nhsuk-u-margin-bottom-0"
               }) }}
             </div>
           </div>
@@ -271,7 +271,7 @@
             <div class="nhsuk-form-group">
               {{ button({
                 "text": "Find my location",
-                "classes": "nhsuk-button--secondary-white-background nhsuk-u-margin-bottom-0",
+                "classes": "nhsuk-button--secondary-solid nhsuk-u-margin-bottom-0",
                 "href": "#"
               }) }}
             </div>
@@ -283,7 +283,7 @@
             <div class="nhsuk-form-group">
               {{ button({
                 "text": "Find my location",
-                "classes": "nhsuk-button--secondary-white-background nhsuk-u-margin-bottom-0",
+                "classes": "nhsuk-button--secondary-solid nhsuk-u-margin-bottom-0",
                 "disabled": true
               }) }}
             </div>

app/components/button/secondary-white-disabled.njk renamed to app/components/button/secondary-solid-disabled.njk

@@ -1,4 +1,4 @@
-{% set title = 'Button secondary white disabled' %}
+{% set title = 'Button secondary solid disabled' %}
 {% from 'components/button/macro.njk' import button %}
 {% extends 'example.njk' %}
 
@@ -12,7 +12,7 @@
         <div class="nhsuk-grid-column-two-thirds">
           {{ button({
             "text": "Find my location",
-            "classes": "nhsuk-button--secondary-white-background",
+            "classes": "nhsuk-button--secondary-solid",
             "disabled": true
           }) }}
         </div>

app/components/button/secondary-white-link.njk renamed to app/components/button/secondary-solid-link.njk

@@ -1,4 +1,4 @@
-{% set title = 'Button secondary white as a link' %}
+{% set title = 'Button secondary solid as a link' %}
 {% from 'components/button/macro.njk' import button %}
 {% extends 'example.njk' %}
 
@@ -12,7 +12,7 @@
         <div class="nhsuk-grid-column-two-thirds">
           {{ button({
             "text": "Find my location",
-            "classes": "nhsuk-button--secondary-white-background",
+            "classes": "nhsuk-button--secondary-solid",
             "href": "#"
           }) }}
         </div>

app/components/button/secondary-white.njk renamed to app/components/button/secondary-solid.njk

@@ -1,4 +1,4 @@
-{% set title = 'Button secondary white' %}
+{% set title = 'Button secondary solid' %}
 {% from 'components/button/macro.njk' import button %}
 {% extends 'example.njk' %}
 
@@ -12,7 +12,7 @@
         <div class="nhsuk-grid-column-two-thirds">
           {{ button({
             "text": "Find my location",
-            "classes": "nhsuk-button--secondary-white-background"
+            "classes": "nhsuk-button--secondary-solid"
           }) }}
         </div>
       </div>

app/index.njk

@@ -34,9 +34,9 @@
         <li><a href="components/button/secondary.html">Button secondary</a></li>
         <li><a href="components/button/secondary-disabled.html">Button secondary disabled</a></li>
         <li><a href="components/button/secondary-link.html">Button secondary as a link</a></li>
-        <li><a href="components/button/secondary-white.html">Button secondary – white background</a></li>
-        <li><a href="components/button/secondary-white-disabled.html">Button secondary disabled – white background</a></li>
-        <li><a href="components/button/secondary-white-link.html">Button secondary as a link – white background</a></li>
+        <li><a href="components/button/secondary-solid.html">Button secondary – solid background</a></li>
+        <li><a href="components/button/secondary-solid-disabled.html">Button secondary disabled – solid background</a></li>
+        <li><a href="components/button/secondary-solid-link.html">Button secondary as a link – solid background</a></li>
         <li><a href="components/button/reverse.html">Button reverse</a></li>
         <li><a href="components/button/reverse-disabled.html">Button reverse disabled</a></li>
         <li><a href="components/button/reverse-link.html">Button reverse as a link</a></li>

backstop.config.js

@@ -164,36 +164,36 @@ module.exports = {
       url: `${BASE_URL}/components/button/secondary-link.html`
     },
     {
-      label: 'Button secondary, white background',
-      url: `${BASE_URL}/components/button/secondary-white.html`
+      label: 'Button secondary, solid background',
+      url: `${BASE_URL}/components/button/secondary-solid.html`
     },
     {
       clickSelector: '.nhsuk-button',
-      label: 'Button secondary click, white background',
-      url: `${BASE_URL}/components/button/secondary-white.html`
+      label: 'Button secondary click, solid background',
+      url: `${BASE_URL}/components/button/secondary-solid.html`
     },
     {
       hoverSelector: '.nhsuk-button',
-      label: 'Button secondary hover, white background',
-      url: `${BASE_URL}/components/button/secondary-white.html`
+      label: 'Button secondary hover, solid background',
+      url: `${BASE_URL}/components/button/secondary-solid.html`
     },
     {
-      label: 'Button secondary disabled, white background',
-      url: `${BASE_URL}/components/button/secondary-white-disabled.html`
+      label: 'Button secondary disabled, solid background',
+      url: `${BASE_URL}/components/button/secondary-solid-disabled.html`
     },
     {
-      label: 'Button secondary as a link, white background',
-      url: `${BASE_URL}/components/button/secondary-white-link.html`
+      label: 'Button secondary as a link, solid background',
+      url: `${BASE_URL}/components/button/secondary-solid-link.html`
     },
     {
       clickSelector: '.nhsuk-button',
-      label: 'Button secondary as a link click, white background',
-      url: `${BASE_URL}/components/button/secondary-white-link.html`
+      label: 'Button secondary as a link click, solid background',
+      url: `${BASE_URL}/components/button/secondary-solid-link.html`
     },
     {
       hoverSelector: '.nhsuk-button',
-      label: 'Button secondary as a link hover, white background',
-      url: `${BASE_URL}/components/button/secondary-white-link.html`
+      label: 'Button secondary as a link hover, solid background',
+      url: `${BASE_URL}/components/button/secondary-solid-link.html`
     },
     {
       label: 'Button reverse',

packages/components/button/_index.scss

@@ -143,7 +143,7 @@ $button-padding-left-right: 16px;
 /// Button variations
 
 .nhsuk-button--secondary,
-.nhsuk-button--secondary-white-background {
+.nhsuk-button--secondary-solid {
   &,
   &:link,
   &:visited,
@@ -182,8 +182,8 @@ $button-padding-left-right: 16px;
   background-color: $nhsuk-secondary-button-color;
 }
 
-.nhsuk-button--secondary-white-background {
-  background-color: $nhsuk-secondary-button-white-background-color;
+.nhsuk-button--secondary-solid {
+  background-color: $nhsuk-secondary-button-solid-background-color;
 }
 
 .nhsuk-button--reverse {

packages/core/settings/_colours.scss

@@ -137,7 +137,7 @@ $nhsuk-button-active-color: shade($nhsuk-button-color, 50%);
 $nhsuk-button-shadow-color: shade($nhsuk-button-color, 50%);
 
 $nhsuk-secondary-button-color: transparent;
-$nhsuk-secondary-button-white-background-color: $color_nhsuk-white;
+$nhsuk-secondary-button-solid-background-color: $color_nhsuk-white;
 $nhsuk-secondary-button-border-color: $color_nhsuk-blue;
 $nhsuk-secondary-button-text-color: $color_nhsuk-blue;
 $nhsuk-secondary-button-hover-color: tint($nhsuk-secondary-button-border-color, 85%);