Rename custom SCSS class (#526)

https://eaflood.atlassian.net/browse/WATER-4131 When working on [Fix display of credit transactions in bill views](#522) after adding the missing `-` to credit values we found the UI was wrapping it _after_ the sign, for example ``` - £126.74 ``` We knew we could fix this by updating the CSS for the class to include `white-space: nowrap;`. The issue was where do we add it. We wasted a bunch of time trying to find the class `govuk-table__cell--total` in the design system code. Finally, we tracked it now to a custom class we'd added. This change is about not making that mistake again and trying to set a precedent. From now on, if we have to add a custom class we should ***not*** prefix it with `govuk` so we can distinguish between our code and that provided by GDS.
DEFRA · Nov 15, 2023 · c386550 · c386550
1 parent d40480d
commit c386550
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 9 deletions.
diff --git a/app/views/bill-licences/view-presroc.njk b/app/views/bill-licences/view-presroc.njk
@@ -267,13 +267,13 @@
       {% set totalRow = [
         {
           text: 'Total',
-          classes: 'govuk-table__cell--total',
+          classes: 'table__cell--total',
           colspan: tableHeaders | length - 1
         },
         {
           text: transactionsTotal,
           format: 'numeric',
-          classes: 'govuk-table__cell--total govuk-!-font-weight-bold',
+          classes: 'table__cell--total govuk-!-font-weight-bold',
           attributes: { 'data-test': 'total' }
         }
       ] %}

diff --git a/app/views/bill-licences/view-sroc.njk b/app/views/bill-licences/view-sroc.njk
@@ -262,13 +262,13 @@
       {% set totalRow = [
         {
           text: 'Total',
-          classes: 'govuk-table__cell--total',
+          classes: 'table__cell--total',
           colspan: tableHeaders | length - 1
         },
         {
           text: transactionsTotal,
           format: 'numeric',
-          classes: 'govuk-table__cell--total govuk-!-font-weight-bold',
+          classes: 'table__cell--total govuk-!-font-weight-bold',
           attributes: { 'data-test': 'total' }
         }
       ] %}

diff --git a/app/views/bills/view-single-licence-presroc.njk b/app/views/bills/view-single-licence-presroc.njk
@@ -405,13 +405,13 @@
       {% set totalRow = [
         {
           text: 'Total',
-          classes: 'govuk-table__cell--total',
+          classes: 'table__cell--total',
           colspan: tableHeaders | length - 1
         },
         {
           text: transactionsTotal,
           format: 'numeric',
-          classes: 'govuk-table__cell--total govuk-!-font-weight-bold',
+          classes: 'table__cell--total govuk-!-font-weight-bold',
           attributes: { 'data-test': 'total' }
         }
       ] %}

diff --git a/app/views/bills/view-single-licence-sroc.njk b/app/views/bills/view-single-licence-sroc.njk
@@ -400,13 +400,13 @@
       {% set totalRow = [
         {
           text: 'Total',
-          classes: 'govuk-table__cell--total',
+          classes: 'table__cell--total',
           colspan: tableHeaders | length - 1
         },
         {
           text: transactionsTotal,
           format: 'numeric',
-          classes: 'govuk-table__cell--total govuk-!-font-weight-bold',
+          classes: 'table__cell--total govuk-!-font-weight-bold',
           attributes: { 'data-test': 'total' }
         }
       ] %}

diff --git a/client/sass/application.scss b/client/sass/application.scss
@@ -111,7 +111,7 @@ $govuk-global-styles: true;
 // ========== ========== ========== ========== ==========
 // Table additions
 // ========== ========== ========== ========== ==========
-.govuk-table__cell--total {
+.table__cell--total {
   @media (min-width: 768px) {
     border-top: solid 2px #0b0c0c !important;
     border-bottom: none !important;