Updated and tested all buttons

app/assets/javascripts/collapsibleCheckboxes.js

@@ -65,7 +65,7 @@
 
     return $(`<div class="selection-footer${stickyClass} margin-top-2">
               <button
-                class="govuk-button govuk-button--secondary selection-footer__button usa-button usa-button--outline"
+                class="usa-button usa-button--outline selection-footer__button"
                 aria-expanded="${expanded ? 'true' : 'false'}"
                 aria-controls="${this.fieldsetId}">
               ${buttonContent}
@@ -214,7 +214,7 @@
   CollapsibleCheckboxes.prototype.bindEvents = function() {
     const self = this;
 
-    this.$formGroup.on('click', '.govuk-button', this.handleClick.bind(this));
+    this.$formGroup.on('click', '.usa-button', this.handleClick.bind(this));
     this.$checkboxes.on('click', this.handleSelection.bind(this));
 
     this.summary.bindEvents(this);

app/assets/javascripts/copyToClipboard.js

@@ -80,14 +80,14 @@
               $('.copy-to-clipboard__value', component)[0], () =>
                 $component
                   .html(states.valueCopied(stateOptions))
-                  .find('.govuk-button').focus()
+                  .find('.usa-button').focus()
             )
         )
         .on(
           'click', '.copy-to-clipboard__button--show', () =>
             $component
               .html(states.valueVisible(stateOptions))
-              .find('.govuk-button').focus()
+              .find('.usa-button').focus()
         );
 
       if ('stickAtBottomWhenScrolling' in GOVUK) {

app/assets/javascripts/listEntry.js

@@ -37,14 +37,14 @@
         ' {{{sharedAttributes}}}' +
       '/>' +
       '{{#button}}' +
-        '<button type="button" class="govuk-button govuk-button--secondary input-list__button--remove">' +
+        '<button type="button" class="usa-button input-list__button--remove">' +
           'Remove<span class="usa-sr-only"> {{listItemName}} number {{number}}</span>' +
         '</button>' +
       '{{/button}}' +
     '</div>'
   );
   ListEntry.prototype.addButtonTemplate = Hogan.compile(
-    '<button type="button" class="govuk-button govuk-button--secondary input-list__button--add">Add another {{listItemName}} ({{entriesLeft}} remaining)</button>'
+    '<button type="button" class="usa-button input-list__button--add">Add another {{listItemName}} ({{entriesLeft}} remaining)</button>'
   );
   ListEntry.prototype.getSharedAttributes = function () {
     var $inputs = this.$wrapper.find('input'),

app/templates/components/page-footer.html

@@ -17,7 +17,7 @@
       <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
 
       {% set button_data = {"text": button_text} %}
-      {% if destructive %}{% set _ = button_data.update({"classes": "govuk-button--warning page-footer__button"}) %}{% endif %}
+      {% if destructive %}{% set _ = button_data.update({"classes": "usa-button usa-button--secondary page-footer__button"}) %}{% endif %}
       {% if centered_button %}{% set _ = button_data.update({"classes": "page-footer__button--centred"}) %}{% endif %}
       {% if button_name %}{% set _ = button_data.update({"name": button_name}) %}{% endif %}
       {% if button_value %}{% set _ = button_data.update({"value": button_value}) %}{% endif %}

app/templates/views/api/keys.html

@@ -61,7 +61,7 @@
       "element": "a",
       "text": "Create an API key",
       "href": url_for('.create_api_key', service_id=current_service.id),
-      "classes": "govuk-button--secondary"
+      "classes": "usa-button"
     }) }}
   </div>
 

app/templates/views/organizations/index.html

@@ -34,7 +34,7 @@
       "element": "a",
       "text": "New organization",
       "href": url_for('main.add_organization'),
-      "classes": "govuk-button--secondary"
+      "classes": "usa-button"
     }) }}
   </div>
 

app/templates/views/organizations/organization/users/index.html

@@ -68,7 +68,7 @@
       "element": "a",
       "text": "Invite team member",
       "href": url_for('.invite_org_user', org_id=current_org.id),
-      "classes": "govuk-button--secondary"
+      "classes": "usa-button"
     }) }}
   </div>
 

tests/app/main/views/organizations/test_organizations.py

@@ -64,7 +64,7 @@ def test_organization_page_shows_all_organizations(
     assert normalize_spaces(archived.parent.text) == "Test 2 - archived 2 live services"
 
     assert (
-        normalize_spaces(page.select_one("a.govuk-button--secondary").text)
+        normalize_spaces(page.select_one("a.usa-button").text)
         == "New organization"
     )
     get_organizations.assert_called_once_with()

tests/javascripts/collapsibleCheckboxes.test.js

@@ -122,7 +122,7 @@ describe('Collapsible fieldset', () => {
 
     test("has a button to expand the fieldset", () => {
 
-      const button = formGroup.querySelector('.govuk-button');
+      const button = formGroup.querySelector('.usa-button');
 
       expect(button).not.toBeNull();
       expect(button.textContent.trim()).toEqual('Choose folders');
@@ -131,7 +131,7 @@ describe('Collapsible fieldset', () => {
 
     test("has the correct aria attributes on the button", () => {
 
-      expect(helpers.element(formGroup.querySelector('.govuk-button')).hasAttributesSetTo({
+      expect(helpers.element(formGroup.querySelector('.usa-button')).hasAttributesSetTo({
         'aria-controls': fieldset.getAttribute('id'),
         'aria-expanded': 'false'
       })).toBe(true);
@@ -231,7 +231,7 @@ describe('Collapsible fieldset', () => {
       // start module
       window.GOVUK.modules.start();
 
-      helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
+      helpers.triggerEvent(formGroup.querySelector('.usa-button'), 'click');
 
     });
 
@@ -249,13 +249,13 @@ describe('Collapsible fieldset', () => {
 
     test("it uses ARIA to mark the checkboxes as expanded", () => {
 
-      expect(formGroup.querySelector('.govuk-button').getAttribute('aria-expanded')).toEqual('true');
+      expect(formGroup.querySelector('.usa-button').getAttribute('aria-expanded')).toEqual('true');
 
     });
 
     test("it changes it's text to indicate it's new action", () => {
 
-      expect(formGroup.querySelector('.govuk-button').textContent.trim()).toEqual("Done choosing folders");
+      expect(formGroup.querySelector('.usa-button').textContent.trim()).toEqual("Done choosing folders");
 
     });
 
@@ -269,10 +269,10 @@ describe('Collapsible fieldset', () => {
       window.GOVUK.modules.start();
 
       // show the checkboxes
-      helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
+      helpers.triggerEvent(formGroup.querySelector('.usa-button'), 'click');
 
       // click the button
-      helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
+      helpers.triggerEvent(formGroup.querySelector('.usa-button'), 'click');
 
     });
 
@@ -290,13 +290,13 @@ describe('Collapsible fieldset', () => {
 
     test("it uses ARIA to mark the checkboxes as collapsed", () => {
 
-      expect(formGroup.querySelector('.govuk-button').getAttribute('aria-expanded')).toEqual('false');
+      expect(formGroup.querySelector('.usa-button').getAttribute('aria-expanded')).toEqual('false');
 
     });
 
     test("it changes it's text to indicate it's new action", () => {
 
-      expect(formGroup.querySelector('.govuk-button').textContent.trim()).toEqual("Choose folders");
+      expect(formGroup.querySelector('.usa-button').textContent.trim()).toEqual("Choose folders");
 
     });
   });
@@ -311,7 +311,7 @@ describe('Collapsible fieldset', () => {
         window.GOVUK.modules.start();
 
         // show the checkboxes
-        helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
+        helpers.triggerEvent(formGroup.querySelector('.usa-button'), 'click');
 
         expect(formGroup.querySelector('.selection-footer').previousElementSibling.nodeName).toBe('FIELDSET');
 
@@ -329,7 +329,7 @@ describe('Collapsible fieldset', () => {
         window.GOVUK.modules.start();
 
         // show the checkboxes
-        helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
+        helpers.triggerEvent(formGroup.querySelector('.usa-button'), 'click');
 
         expect(formGroup.querySelector('.selection-footer').previousElementSibling.nodeName).toBe('FIELDSET');
 
@@ -348,7 +348,7 @@ describe('Collapsible fieldset', () => {
         window.GOVUK.modules.start();
 
         // show the checkboxes
-        helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
+        helpers.triggerEvent(formGroup.querySelector('.usa-button'), 'click');
 
       });
 
@@ -361,7 +361,7 @@ describe('Collapsible fieldset', () => {
       test("is removed when the fieldset is collapsed", () => {
 
         // click the button to collapse the fieldset
-        helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
+        helpers.triggerEvent(formGroup.querySelector('.usa-button'), 'click');
 
         expect(formGroup.querySelector('.selection-footer').classList.contains('js-stick-at-bottom-when-scrolling')).toBe(false);
 
@@ -376,7 +376,7 @@ describe('Collapsible fieldset', () => {
     beforeEach(() => {
       window.GOVUK.modules.start();
 
-      helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
+      helpers.triggerEvent(formGroup.querySelector('.usa-button'), 'click');
     });
 
     test("adds a 'Select all' button when checkboxes are shown", () => {
@@ -420,7 +420,7 @@ describe('Collapsible fieldset', () => {
 
     test("button is hidden when fieldset is collapsed", () => {
       const toggleButton = document.querySelector('.usa-button--small');
-      const doneButton = formGroup.querySelector('.govuk-button');
+      const doneButton = formGroup.querySelector('.usa-button');
 
       expect(toggleButton.parentElement.style.display).not.toEqual('none');
 
@@ -436,13 +436,13 @@ describe('Collapsible fieldset', () => {
     test("shows toggle button again when fieldset is re-opened", () => {
       window.GOVUK.modules.start();
 
-      helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
+      helpers.triggerEvent(formGroup.querySelector('.usa-button'), 'click');
       const toggleButton = document.querySelector('.usa-button--small');
       expect(toggleButton).not.toBeNull();
 
-      helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
+      helpers.triggerEvent(formGroup.querySelector('.usa-button'), 'click');
 
-      helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
+      helpers.triggerEvent(formGroup.querySelector('.usa-button'), 'click');
 
       const toggleButtonAfter = document.querySelector('.usa-button--small');
       expect(toggleButtonAfter).not.toBeNull();
@@ -454,7 +454,7 @@ describe('Collapsible fieldset', () => {
   describe("when the selection changes", () => {
 
     const showCheckboxes = () => {
-      helpers.triggerEvent(formGroup.querySelector('.govuk-button'), 'click');
+      helpers.triggerEvent(formGroup.querySelector('.usa-button'), 'click');
     };
 
     const checkFirstCheckbox = () => {

tests/javascripts/fileUpload.test.js

@@ -25,7 +25,7 @@ describe('File upload', () => {
           Upload logo
         </label>
         <label class="file-upload-filename" for="file"></label>
-        <button type="submit" class="govuk-button file-upload-submit">Submit</button>
+        <button type="submit" class="usa-button file-upload-submit">Submit</button>
       </form>`;
 
     form = document.querySelector('form');

tests/javascripts/preventDuplicateFormSubmissions.test.js

@@ -19,7 +19,7 @@ describe('Prevent duplicate form submissions', () => {
     // set up DOM
     document.body.innerHTML = `
       <form action="/" method="post">
-        <button class="govuk-button" type="submit">Continue</button>
+        <button class="usa-button" type="submit">Continue</button>
       </form>`;
 
     form = document.querySelector('form');

tests/javascripts/stick-to-window-when-scrolling.test.js

@@ -91,7 +91,7 @@ describe("Stick to top/bottom of window when scrolling", () => {
                 </div>
               </div>
               <div class="page-footer">
-                <button type="submit" class="govuk-button">Continue</button>
+                <button type="submit" class="usa-button">Continue</button>
               </div>
             </form>
           </main>
@@ -756,7 +756,7 @@ describe("Stick to top/bottom of window when scrolling", () => {
             </div>
             <div class="page-footer js-stick-at-bottom-when-scrolling">
               <form method="post" action="">
-                  <button type="submit" class="govuk-button">Send 1 email </button>
+                  <button type="submit" class="usa-button">Send 1 email </button>
               </form>
             </div>
           </div>