PP-12055 Update validation styling for transactions search filter

- Use design system guidelines for validation styling. - When searching for transactions and the end date < start date: - Display an error summary - Display an error message around the `end date` field. - Highlight the `end date` field. - The code to carry out the validation was done previously. - This PR is to only update the design / styling.
alphagov · Jan 24, 2024 · e183c02 · e183c02
1 parent 43b586a
commit e183c02
Show file tree

Hide file tree

Showing 5 changed files with 157 additions and 95 deletions.
diff --git a/.secrets.baseline b/.secrets.baseline
@@ -297,28 +297,28 @@
         "filename": "app/views/transactions/index.njk",
         "hashed_secret": "c12ec67dcf1e1939e1039d414d56a59c2c49cc87",
         "is_verified": false,
-        "line_number": 21
+        "line_number": 23
       },
       {
         "type": "Base64 High Entropy String",
         "filename": "app/views/transactions/index.njk",
         "hashed_secret": "e0eb70ddc8098d113dc566a9dc85c0e6a44de8d8",
         "is_verified": false,
-        "line_number": 22
+        "line_number": 24
       },
       {
         "type": "Base64 High Entropy String",
         "filename": "app/views/transactions/index.njk",
         "hashed_secret": "6ee3b2a2f5eaeadb06c1dda26270cd1032420e79",
         "is_verified": false,
-        "line_number": 23
+        "line_number": 25
       },
       {
         "type": "Base64 High Entropy String",
         "filename": "app/views/transactions/index.njk",
         "hashed_secret": "2568e4443a80c3aaed753e6eecfa9dc742187ad9",
         "is_verified": false,
-        "line_number": 24
+        "line_number": 26
       }
     ],
     "test/cypress/integration/all-service-transactions/all-service-transactions.cy.js": [
@@ -903,5 +903,5 @@
       }
     ]
   },
-  "generated_at": "2023-11-27T13:23:06Z"
+  "generated_at": "2024-01-17T17:13:09Z"
 }
diff --git a/app/assets/sass/components/transaction-filter.scss b/app/assets/sass/components/transaction-filter.scss
@@ -19,29 +19,40 @@
     width: 50%;
   }
 
-  .govuk-form-group {
+  &__input-container {
     float: left;
 
     width: 50%;
     box-sizing: border-box;
 
-    &:first-of-type {
+
+    &--date-input,
+    .govuk-form-group--error &--date-input {
       padding-right: govuk-spacing(1);
+      margin-bottom: govuk-spacing(2);
     }
 
-    &:last-of-type {
-      padding-left: govuk-spacing(1);
+    &--time-input,
+    .govuk-form-group--error &--time-input {
+      padding-right: govuk-spacing(1);
     }
   }
 }
 
+
+
 .datetime-filter-from {
   padding-right: govuk-spacing(3);
 }
 
 .datetime-filter-to {
   position: relative;
   padding-left: govuk-spacing(3);
+
+  &__container {
+    width: auto;
+    padding: 0;
+  }
 }
 
 .datetime-separator {
@@ -51,9 +62,8 @@
   @include govuk-media-query(tablet) {
     @include govuk-font($size: 14);
     position: absolute;
-    top: 50%;
     left: -8px;
-    transform: translateY(-50%);
+    margin-top: govuk-spacing(7);
   }
 }
 

diff --git a/app/views/transactions/filter.njk b/app/views/transactions/filter.njk
@@ -28,7 +28,7 @@
           })
         }}
       </div>
-      <div class="govuk-grid-column-one-quarter inputs-less-margin">
+            <div class="govuk-grid-column-one-quarter inputs-less-margin">
         {{
           govukInput({
             id: 'email',
@@ -54,7 +54,7 @@
         }}
       </div>
       <div class="govuk-grid-column-one-quarter inputs-less-margin">
-        {{
+          {{
           govukInput({
             id: 'cardholderName',
             name: 'cardholderName',
@@ -65,9 +65,9 @@
               text: 'Name on card',
               classes: 'govuk-label--s govuk-!-font-size-16 govuk-!-margin-bottom-0'
             },
-            hint: {
-              text: 'Enter full or partial name',
-              classes: 'govuk-!-font-size-14'
+                    hint: {
+                    text: 'Enter full or partial name',
+                    classes: 'govuk-!-font-size-14'
             }
           })
         }}
@@ -153,81 +153,116 @@
           </fieldset>
       </div>
       <div class="govuk-grid-column-one-half">
-        <fieldset class="govuk-fieldset">
-          <legend class="govuk-fieldset__legend govuk-!-font-weight-bold govuk-!-font-size-16 govuk-!-margin-bottom-0 govuk-!-display-block">
-            Date range
-          </legend>
-          <fieldset class="govuk-fieldset datetime-filter datetime-filter-from">
-            <legend class="govuk-visually-hidden">
-              From this date and time
-            </legend>
-            {{
-              govukInput({
-                id: 'fromDate',
-                name: 'fromDate',
-                value: filters.fromDate,
-                classes: 'date-picker start govuk-!-font-size-16',
-                label: {
-                  text: 'Start date',
-                  classes: 'govuk-!-font-size-14 govuk-!-margin-bottom-2'
-                },
-                attributes: {
-                  autocomplete: 'off'
-                }
-              })
-            }}
-            {{
-              govukInput({
-                id: 'fromTime',
-                name: 'fromTime',
-                value: filters.fromTime,
-                classes: 'time-picker start govuk-!-font-size-16',
-                label: {
-                  text: 'Start time',
-                  classes: 'govuk-!-font-size-14 govuk-!-margin-bottom-2'
-                },
-                attributes: {
-                  autocomplete: 'off'
-                }
-              })
-            }}
-          </fieldset>
-          <fieldset class="govuk-fieldset datetime-filter datetime-filter-to">
-            <legend class="datetime-separator">
-              to<span class="govuk-visually-hidden"> this date and time</span>
+        <div class="govuk-form-group govuk-!-margin-bottom-0">
+          <fieldset class="govuk-fieldset">
+            <legend class="govuk-fieldset__legend govuk-!-font-weight-bold govuk-!-font-size-16 govuk-!-display-block govuk-!-margin-bottom-0">
+              Date range
             </legend>
-            {{
-              govukInput({
-                id: 'toDate',
-                name: 'toDate',
-                value: filters.toDate,
-                classes: 'date-picker end govuk-!-font-size-16',
-                label: {
-                  text: 'End date',
-                  classes: 'govuk-!-font-size-14 govuk-!-margin-bottom-2'
-                },
-                attributes: {
-                  autocomplete: 'off'
-                }
-              })
-            }}
-            {{
-              govukInput({
-                id: 'toTime',
-                name: 'toTime',
-                value: filters.toTime,
-                classes: 'time-picker end govuk-!-font-size-16',
-                label: {
-                  text: 'End time',
-                  classes: 'govuk-!-font-size-14 govuk-!-margin-bottom-2'
-                },
-                attributes: {
-                  autocomplete: 'off'
-                }
-              })
-            }}
+            <fieldset class="govuk-fieldset datetime-filter datetime-filter-from">
+              <legend class="govuk-visually-hidden">
+                From this date and time
+              </legend>
+              {{
+                govukInput({
+                  id: 'fromDate',
+                  name: 'fromDate',
+                  value: filters.fromDate,
+                  classes: 'date-picker start govuk-!-font-size-16',
+                  label: {
+                    text: 'Start date',
+                    classes: 'govuk-!-font-size-14 govuk-!-margin-bottom-2'
+                  },
+                  attributes: {
+                    autocomplete: 'off'
+                  },
+                  formGroup: {
+                    classes: 'datetime-filter__input-container datetime-filter__input-container--date-input'
+                  }
+                })
+              }}
+              {{
+                govukInput({
+                  id: 'fromTime',
+                  name: 'fromTime',
+                  value: filters.fromTime,
+                  classes: 'time-picker start govuk-!-font-size-16',
+                  label: {
+                    text: 'Start time',
+                    classes: 'govuk-!-font-size-14 govuk-!-margin-bottom-2'
+                  },
+                  attributes: {
+                    autocomplete: 'off'
+                  },
+                  formGroup: {
+                    classes: 'datetime-filter__input-container datetime-filter__input-container--time-input'
+                  }
+                })
+              }}
+            </fieldset>
+              <fieldset class="govuk-fieldset datetime-filter datetime-filter-to">
+                <div class="govuk-form-group datetime-filter-to__container">
+                  <legend class="datetime-separator">
+                    to<span class="govuk-visually-hidden"> this date and time</span>
+                  </legend>
+
+                  <div class="govuk-form-group govuk-!-margin-bottom-0 datetime-filter-to__container {% if isInvalidDateRange %}govuk-!-padding-left-3 govuk-!-margin-bottom-2 govuk-form-group--error{% endif %}">
+                    {% if isInvalidDateRange %}
+                      <p class="govuk-error-message govuk-!-font-size-16 end-date-error-message" data-cy="from-date-error-message">
+                        <span class="govuk-visually-hidden">Error:</span> End date must be after start date
+                      </p>
+                    {% endif %}
+
+                    {% set cssClassesForToDateInput = 'date-picker end govuk-!-font-size-16 ' %}
+                    {% set cssClassesForToDateFormGroup = 'datetime-filter__input-container datetime-filter__input-container--date-input filter-date-input' %}
+
+                    {% if isInvalidDateRange %}
+                      {% set cssClassesForToDateInput =  cssClassesForToDateInput + ' govuk-input--error govuk-!-margin-bottom-0 govuk-!-padding-right-1' %}
+                      {% set cssClassesForToDateFormGroup = cssClassesForToDateFormGroup + ' govuk-!-margin-bottom-0' %}
+                    {% endif %}
+
+                    {{
+                      govukInput({
+                        id: 'toDate',
+                        name: 'toDate',
+                        value: filters.toDate,
+                        classes: cssClassesForToDateInput,
+                        label: {
+                          text: 'End date',
+                          classes: 'govuk-!-font-size-14 govuk-!-margin-bottom-2'
+                        },
+                        attributes: {
+                          autocomplete: 'off',
+                          'data-cy': 'to-date-field'
+                        },
+                        formGroup: {
+                          classes: cssClassesForToDateFormGroup
+                        }
+                      })
+                    }}
+
+                    {{
+                      govukInput({
+                        id: 'toTime',
+                        name: 'toTime',
+                        value: filters.toTime,
+                        classes: 'time-picker end govuk-!-font-size-16',
+                        label: {
+                          text: 'End time',
+                          classes: 'govuk-!-font-size-14 govuk-!-margin-bottom-2'
+                        },
+                        attributes: {
+                          autocomplete: 'off'
+                        },
+                        formGroup: {
+                          classes: 'datetime-filter__input-container datetime-filter__input-container--time-input'
+                        }
+                      })
+                    }}
+                  </div>
+                </div>
+              </fieldset>
           </fieldset>
-        </fieldset>
+        </div>
       </div>
     </div>
     {% if filters.metadataValue or filters.agreementId %}

diff --git a/app/views/transactions/index.njk b/app/views/transactions/index.njk
@@ -1,4 +1,6 @@
 {% from "../macro/breadcrumbs.njk" import breadcrumbs %}
+{% from "govuk/components/error-summary/macro.njk" import govukErrorSummary %}
+
 {% extends "../layout.njk" %}
 
 {% block pageTitle %}
@@ -42,6 +44,22 @@
 
 {% block mainContent %}
 <div class="govuk-grid-column-full">
+
+  {% if (isInvalidDateRange) %}
+    {{ govukErrorSummary({
+      titleText: "There is a problem",
+      attributes: {
+        'data-cy': 'error-summary'
+      },
+      errorList: [
+        {
+          text: "End date must be after start date",
+          href: "#toDate"
+        }
+      ]
+    }) }}
+  {% endif %}
+
   <h1 class="govuk-heading-l">
     {% if allServiceTransactions %}
        Transactions for all services
@@ -66,17 +84,13 @@
   {% include "transactions/display-size.njk" %}
 
   <h3 class="govuk-heading-s govuk-!-font-weight-regular govuk-!-margin-top-3" id="total-results">
-  {% if (isInvalidDateRange) %}
-      <p> End date must be after start date </p>
-      <p> The from date entered is <span class="govuk-body govuk-!-font-weight-bold">{{fromDateParam}}</span> and the to date entered is <span class="govuk-body govuk-!-font-weight-bold">{{toDateParam}}</span></p>
-   {% else %}
     {% if totalOverLimit %}
       Over {{maxLimitFormatted}} transactions
     {% else %}
       {{totalFormatted}} transactions
     {% endif %}
     {{ filtersDescription | safe }}
-  {% endif %}
+
   </h3>
 
   {% if allServiceTransactions or permissions.transactions_download_read %}

diff --git a/test/cypress/integration/transactions/transaction-search.cy.js b/test/cypress/integration/transactions/transaction-search.cy.js
@@ -377,7 +377,10 @@ describe('Transactions List', () => {
 
       cy.get('#transactions-list tbody').should('not.exist')
 
-      cy.get('h3').contains('End date must be after start date' )
+      cy.get('[data-cy=error-summary]').contains('End date must be after start date')
+      cy.get('[data-cy=from-date-error-message]').contains('End date must be after start date')
+      cy.get('[data-cy=from-date-error-message]').parent().should('have.class', 'govuk-form-group--error')
+      cy.get('[data-cy=to-date-field]').should('have.class', 'govuk-input--error')
     })
   })
   describe('Transactions are displayed correctly', () => {