PAY-6748: Reverting changes

.gitignore

@@ -66,6 +66,6 @@ stryker.log
 .pnp.*
 
 .angular/*
-/config/local-development.yaml
-/config/local-development.yaml.aat
-/config/local-development.yaml.demo
+config/local-development.yaml
+config/local-development.yaml.aat
+config/local-development.yaml.demo

gulpfile.js

@@ -1,6 +1,6 @@
 const gulp = require('gulp');
 const plumber = require('gulp-plumber');
-const sass = require('gulp-sass');
+const sass = require('gulp-sass')(require('sass'));
 const path = require('path');
 
 
@@ -13,7 +13,7 @@ const stylesheetsDirectory = `${assetsDirectory}/stylesheets`;
 
 
 gulp.task('sass', () => {
-  gulp.src(`${stylesheetsDirectory}/*.scss`)
+  return  gulp.src(`${stylesheetsDirectory}/*.scss`)
     .pipe(plumber())
     .pipe(sass({
       outputStyle: 'compressed',
@@ -26,10 +26,7 @@ gulp.task('sass', () => {
 });
 
 gulp.task('watch', () => {
-  gulp.watch(`${stylesheetsDirectory}/**/*.scss`, ['sass']);
+  gulp.watch(`${stylesheetsDirectory}/**/*.scss`, gulp.series('sass'));
 });
 
-gulp.task('default', [
-  'sass',
-  'watch'
-]);
+gulp.task('default', gulp.series('sass'));

package.json

@@ -21,6 +21,7 @@
     "test": "yarn lint && yarn test:angular && yarn test:coverage",
     "test:a11y": "cross-env node scripts/pa11y",
     "gulp": "gulp",
+    "watch": "gulp watch",
     "lint": "yarn ng-lint && yarn eslint",
     "audit": "yarn audit --groups dependencies",
     "ng-lint": "ng lint",
@@ -66,6 +67,9 @@
     "exceljs": "^4.4.0",
     "express": "^4.19.2",
     "express-session": "^1.17.1",
+    "govuk-elements-sass": "^3.1.3",
+    "govuk-frontend": "^5.2.0",
+    "govuk_frontend_toolkit": "^8.1.0",
     "helmet": "^3.22.0",
     "http-status-codes": "^1.3.0",
     "i": "^0.3.7",
@@ -74,7 +78,7 @@
     "jsdom": "^18.1.1",
     "launchdarkly-node-client-sdk": "^1.4.5",
     "local-storage": "^2.0.0",
-    "minimist": "^1.2.6",
+    "minimist": "^1.2.8",
     "mocha-junit-reporter": "^2.2.0",
     "mochawesome": "^7.0.1",
     "moment": "2.29.4",
@@ -154,6 +158,8 @@
     "govuk_frontend_toolkit": "^8.1.0",
     "govuk_template_jinja": "^0.24.1",
     "gulp": "^4.0.0",
+    "gulp-cleancss": "^0.2.2",
+    "gulp-cli": "^2.3.0",
     "gulp-plumber": "^1.2.1",
     "gulp-sass": "^5.1.0",
     "jasmine-core": "^5.0.0",
@@ -181,7 +187,7 @@
     "playwright": "~1.36.1",
     "protractor": "~7.0.0",
     "pugit": "5.0.2",
-    "sass": "^1.64.1",
+    "sass": "^1.75.0",
     "sass-loader": "^13.2.1",
     "sonar-scanner": "^3.1.0",
     "ts-node": "~8.0.2",
@@ -223,7 +229,8 @@
     "tough-cookie": "^4.1.3",
     "word-wrap": "1.2.4",
     "flat": "5.0.1",
-    "ip": "^2.0.1"
+    "ip": "^2.0.1",
+    "node-gyp": "9.0.0"
   },
   "packageManager": "[email protected]"
 }

src/app/app.component.html

@@ -16,19 +16,4 @@
 
 </div>
 
-<footer class="group js-footer" id="footer" role="contentinfo">
-  <div class="footer-wrapper">
-    <div class="footer-meta">
-      <div class="footer-meta-inner">
-        <div class="open-government-licence">
-          <p class="logo">
-            <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/" rel="license">Open Government Licence</a>
-          </p>
-          <p>All content is available under the
-            <a href="https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/"
-              rel="license">Open Government Licence v3.0</a>, except where otherwise stated</p>
-        </div>
-      </div>
-    </div>
-  </div>
-</footer>
+<ccpay-bubble-app-footer></ccpay-bubble-app-footer>

src/app/app.constants.ts

@@ -0,0 +1,14 @@
+
+const footerDataNavigation = {
+    items: [
+      { internal: true, text: 'Cookies', href: '/cookies', target: '' },
+      { internal: true, text: 'Accessibility Statement', href: '/accessibility', target: '' },
+      { internal: false, text: 'Privacy policy', href: 'https://hmcts-access.service.gov.uk/privacy-policy', target: '_blank' },
+      { internal: false, text: 'Terms and conditions', href: 'https://hmcts-access.service.gov.uk/terms-and-conditions', target: '_blank' },
+      { internal: false, text: 'Contact us', href: 'https://hmcts-access.service.gov.uk/contact-us', target: '_blank' }
+    ]
+};
+
+export class AppConstants {
+    public static FOOTER_DATA_NAVIGATION = footerDataNavigation;
+}

src/app/app.module.ts

@@ -38,7 +38,10 @@ import { CookiePolicyComponent } from './components/cookie-policy/cookie-policy.
 import { CookieDetailsComponent } from './components/cookie-details/cookie-details.component';
 import { windowProvider, windowToken } from '../window';
 import { CookieTableComponent } from './components/cookie-table/cookie-table.component';
+import { HmctsGlobalFooterComponent } from './shared/components/hmcts-global-footer/hmcts-global-footer.component';
+import { FooterComponent } from './shared/components/footer/footer.component';
 import { RpxTranslationModule } from 'rpx-xui-translation';
+import { AccessibilityStatementComponent } from './components/accessibility-statement/accessibility-statement.component';
 
 const nonProductionProviders = [{
   provide: HTTP_INTERCEPTORS,
@@ -66,7 +69,10 @@ const nonProductionProviders = [{
     CookieBannerComponent,
     CookiePolicyComponent,
     CookieDetailsComponent,
-    CookieTableComponent
+    CookieTableComponent,
+    HmctsGlobalFooterComponent,
+    FooterComponent,
+    AccessibilityStatementComponent
     ],
   imports: [
     BrowserModule,

src/app/components/accessibility-statement/accessibility-statement.component.html

@@ -0,0 +1,74 @@
+<div class="govuk-width-container">
+    <div class="govuk-grid-row">
+        <a (click)="backClicked()" class="link-back">Back</a>
+        <h1 class="heading-xlarge">Accessibility statement for PayBubble</h1>
+
+        <p>This accessibility statement applies to Paybubble: <a target="_blank" href="https://paybubble.platform.hmcts.net" rel="noopener">https://paybubble.platform.hmcts.net</a><br/>
+        This website is run by HM Courts and Tribunals Service. We want as many people as possible to be able to use this website. For example, that means you should be able to:</p>
+        <ul class="govuk-list--bullet">
+        <li>change colours, contrast levels and fonts</li>
+        <li>zoom in up to 300% without the text spilling off the screen</li>
+        <li>navigate most of the website using just a keyboard</li>
+        <li>navigate most of the website using speech recognition software</li>
+        <li>listen to most of the website using a screen reader (including the most recent versions of JAWS, NVDA and VoiceOver)</li>
+        </ul>
+        <p>We've also made the website text as simple as possible to understand.</p>
+        <p>Please contact your line manager for advice on making your device easier to use if you have a disability.</p>
+
+        <h2>How accessible this website is</h2>
+
+        <p>We know some parts of this website are not fully accessible:</p>
+        <ul class="govuk-list--bullet">
+        <li>the text will not reflow in a single column when you change the size of the browser window</li>
+        <li>some of our online forms are difficult to navigate using just a keyboard</li>
+        <li>you cannot skip to the main content when using a screen reader.</li>
+        </ul>
+
+        <h2>Reporting accessibility problems with this website</h2>
+
+        <p>We're always looking to improve the accessibility of this website. If you find any problems not listed on this page or think we're not meeting accessibility requirements, contact: <a href="mailto:[email protected]">[email protected]</a> for guidance to raise any issues.</p>
+
+        <h2>Enforcement procedure</h2>
+
+        <p>The Equality and Human Rights Commission (EHRC) is responsible for enforcing the Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018 (the 'accessibility regulations').
+        If you're not happy with how we respond to your complaint, contact the <a href="https://www.equalityadvisoryservice.com/" target="_blank" rel="noopener">Advisory and Support Service (EASS).</a></p>
+
+        <h2>Technical information about this website's accessibility</h2>
+
+        <p>HMCTS is committed to making its website accessible, in accordance with the Public Sector Bodies (Websites and Mobile Applications) (No. 2) Accessibility Regulations 2018.</p>
+
+        <h2>Compliance status</h2>
+
+        <p>This website is partially compliant with the <a href="https://www.w3.org/TR/WCAG21/" target="_blank" rel="noopener">Web Content Accessibility Guidelines version 2.1</a> AA standard, due to the non-compliances, listed below.</p>
+
+        <h2>Non-accessible content</h2>
+
+        <p>The content listed below is non-accessible for the following reasons.</p>
+
+        <h2>Non-compliance with the accessibility regulations</h2>
+
+        <p>A layout table is present but does not contain any header cells. The screen reader users are not able to associate the table data to table headings. This failed to meet 1.1.1 Non-Text Content Level A.<br/>
+        The headings are not hierarchical and heading level 2 is skipped. There are multiple links that are identified as text elements rather than links (This issue pertains only to Safari browser not Google Chrome). A group of radio buttons are not enclosed in a fieldset. This failed to meet 1.3.1 Info and Relationships Level A.
+        Some of the content gets lost or overlaps when the page is zoomed in to 200% on laptops and at actual size on a mobile device. This failed to meet 1.4.4 Resize Text Level AA.<br/>
+        Some content can be lost or overlaps on different smaller devices. This fails to meet 1.4.10 Reflow.<br/>
+        The highlight colour does not meet contrast requirements for links. The skip to main content link overlaps other content and then fails contrast. This failed to meet 1.4.11 Non-Text Contrast Level AA.<br/>
+        There are multiple links that cannot be tabbed to from the keyboard or do not receive keyboard focus. This failed to meet 2.1.1 Keyboard Level A.<br/>
+        The 'skip to main' content link does not skip to main content because the main content region is missing. The navigation landmark is also not present. This failed to meet 2.4.1 Bypass Blocks Level A.<br/>
+        The page titles are not unique and do not describe the page. This failed to meet 2.4.2 Page Titled Level A.<br/>
+        The pages look identical when searching for a case transaction, payment history, or service request. This could be confusing for users who might think they have not moved pages. The page has no h1 headings. This failed to meet 2.4.6 Headings and Labels Level AA.<br/>
+        The language of the document is not identified or the lang attribute value is invalid. This failed to meet 3.1.1 Language of Page Level A.<br/>
+        The keyboard focus is not taken to the error summary and is not announced to screen reader users immediately. This failed to meet 3.3.1 Error Identification Level A.<br/>
+        A form label is not accurate in its description so it would not make sense for screen reader users. Also, the words which visually label a component are not the words read by the screenreader. This failed to meet 3.3.2 Labels or Instructions Level A.<br/>
+        The status message for how many results were found is not announced to screen reader users. This failed to meet 4.1.3 Status Messages Level AA.</p>
+
+        <h2>What we're doing to improve accessibility</h2>
+        <p>We're committed to ensuring our services are accessible to all our users and that they comply with <a target="_blank" href="https://www.w3.org/TR/WCAG22/" rel="noopener">Web Content Accessibility Guidelines (WCAG) 2.2</a> Standard. To demonstrate this, we are going to engage with Digital Accessibility Centre to have a further review on 06/24<br/>
+        We're actively working to improve the identified issues and make them AA-compliant by 31/05/24</p>
+
+        <h2>Preparation of this accessibility statement</h2>
+
+        <p>This statement was published 14/03/24</p>
+        <p>This website was last tested on 15/06/22. The test was carried out by Internal Accessibility Team within HMCTS.</p>
+        <p>The full service was tested.</p>
+    </div>
+</div>

src/app/components/accessibility-statement/accessibility-statement.component.spec.ts

@@ -0,0 +1,33 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { SpyLocation } from '@angular/common/testing';
+import { AccessibilityStatementComponent } from './accessibility-statement.component';
+import { Location } from '@angular/common';
+
+describe('AccessibilityStatementComponent', () => {
+  let component: AccessibilityStatementComponent;
+  let fixture: ComponentFixture<AccessibilityStatementComponent>;
+  let location: SpyLocation;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [AccessibilityStatementComponent],
+      providers: [
+        { provide: Location, useClass: SpyLocation }
+      ]
+    });
+    fixture = TestBed.createComponent(AccessibilityStatementComponent);
+    component = fixture.componentInstance;
+    location = TestBed.get(Location);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should go back to previous page on header button click', () => {
+    spyOn(location, 'back');
+    component.backClicked();
+    expect(location.back).toHaveBeenCalled();
+  });
+});

src/app/components/accessibility-statement/accessibility-statement.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { Location } from '@angular/common';
+
+@Component({
+  selector: 'app-accessibility-statement',
+  templateUrl: './accessibility-statement.component.html',
+  styleUrls: ['./accessibility-statement.component.scss']
+})
+export class AccessibilityStatementComponent {
+  constructor(private _location: Location) 
+  {}
+
+  backClicked() {
+    this._location.back();
+  }
+}

src/app/components/ccd-search/ccd-search.component.html

@@ -120,10 +120,7 @@ <h3 class="form-hint">
         </div>
      </div> 
     </fieldset>
-    <button class="button" type="submit" (click)="searchFees()">Search</button>
+    <button class="govuk-button" type="submit" (click)="searchFees()">Search</button>
     <div class="nocase-message" *ngIf="noCaseFoundInCCD">No matching cases found</div>
   </div>
-
-
-
-  </form>
+</form>

src/app/components/cookie-banner/cookie-banner.component.spec.ts

@@ -38,40 +38,6 @@ describe('CookieBannerComponent', () => {
   it('should be created by angular', () => {
     expect(fixture).not.toBeNull();
   });
-  it ('should make a call all enable function and push', () => {
-    spyOn((windowTestBed as any).dtrum, 'enable').and.callThrough();
-    spyOn((windowTestBed as any).dtrum, 'enableSessionReplay').and.callThrough();
-    spyOn((windowTestBed as any).dataLayer, 'push').and.callThrough();
-
-    const preference = { apm: 'on' };
-
-    appComponent.preferenceFn((windowTestBed as any).dtrum, preference, (windowTestBed as any).dataLayer);
-    expect((windowTestBed as any).dataLayer.push).toHaveBeenCalled();
-    expect((windowTestBed as any).dtrum.enable).toHaveBeenCalled();
-    expect((windowTestBed as any).dtrum.enableSessionReplay).toHaveBeenCalled();
-  });
-  it ('should make a call all disable function and push', () => {
-    spyOn((windowTestBed as any).dtrum, 'disableSessionReplay').and.callThrough();
-    spyOn((windowTestBed as any).dtrum, 'disable').and.callThrough();
-    spyOn((windowTestBed as any).dataLayer, 'push').and.callThrough();
-    const preference = { apm: 'off' };
-
-    appComponent.preferenceFn((windowTestBed as any).dtrum, preference, (windowTestBed as any).dataLayer);
-    expect((windowTestBed as any).dataLayer.push).toHaveBeenCalled();
-    expect((windowTestBed as any).dtrum.disableSessionReplay).toHaveBeenCalled();
-    expect((windowTestBed as any).dtrum.disable).toHaveBeenCalled();
-  });
-  it ('should make a call all disable function', () => {
-    spyOn((windowTestBed as any).dtrum, 'disableSessionReplay').and.callThrough();
-    spyOn((windowTestBed as any).dtrum, 'disable').and.callThrough();
-    spyOn((windowTestBed as any).dataLayer, 'push').and.callThrough();
-    const preference = { apm: 'off' };
-
-    appComponent.preferenceFn(undefined, preference, (windowTestBed as any).dataLayer);
-    expect((windowTestBed as any).dataLayer.push).toHaveBeenCalled();
-    expect((windowTestBed as any).dtrum.disableSessionReplay).not.toHaveBeenCalled();
-    expect((windowTestBed as any).dtrum.disable).not.toHaveBeenCalled();
-  });
 
   afterEach(() => {
     TestBed.resetTestingModule();