Next release (#135)

* Nr/feat/update (#133) * upgrade packages * fix lint issues * fix eslint errors * Change Shirley to full-step-free in data and map svg (#134) * update logo and ds version * update ds version * footer updates * style updates --------- Co-authored-by: Nathan Rogan <rolorogan@gmail.com>
wmcadigital · Nov 14, 2024 · abdfdaf · abdfdaf
1 parent 2ef474d
commit abdfdaf
Show file tree

Hide file tree

Showing 31 changed files with 29,422 additions and 31,120 deletions.
diff --git a/.env b/.env
@@ -2,7 +2,7 @@
 
 # Version of the WMN Design System you want to use for CSS and icons.
 # Try to use the latest version (https://designsystem.wmnetwork.co.uk/docs/get-started/production/#option-1-include-compiled-files-recommended)
-REACT_APP_WMNDS_VERSION = 1.4.1
+REACT_APP_WMNDS_VERSION = 2.4.0
 
 # Variables that control the site title and meta descriptions
 REACT_APP_TITLE = "Find my rail zones"

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,32 +18,33 @@
     "eject": "react-scripts eject"
   },
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.9",
-    "@testing-library/react": "^11.2.5",
-    "@testing-library/user-event": "^12.7.3",
-    "axios": "^0.21.1",
-    "dompurify": "^2.2.6",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.4.3",
+    "axios": "^1.3.5",
+    "dompurify": "^3.0.2",
+    "eslint": "^8.38.0",
     "lodash": "^4.17.21",
-    "node-sass": "^5.0.0",
-    "prop-types": "^15.7.2",
-    "react": "^17.0.1",
-    "react-app-polyfill": "^2.0.0",
-    "react-debounce-input": "^3.2.3",
-    "react-dom": "^17.0.1",
-    "react-easy-swipe": "0.0.21",
-    "react-scripts": "4.0.3",
-    "react-svg-pan-zoom": "^3.10.0"
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-app-polyfill": "^3.0.0",
+    "react-debounce-input": "^3.3.0",
+    "react-dom": "^18.2.0",
+    "react-easy-swipe": "0.0.23",
+    "react-scripts": "5.0.1",
+    "react-svg-pan-zoom": "^3.12.1",
+    "sass": "^1.62.0"
   },
   "devDependencies": {
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-config-prettier": "^8.0.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-jam3": "^0.2.3",
-    "eslint-plugin-prettier": "^3.3.1",
-    "npm-check-updates": "^11.1.8",
-    "prettier": "^2.2.1",
-    "react-app-rewired": "^2.1.8",
+    "eslint-plugin-prettier": "^4.2.1",
+    "npm-check-updates": "^16.10.8",
+    "prettier": "^2.8.7",
+    "react-app-rewired": "^2.2.1",
     "sass-lint": "^1.13.1",
-    "sass-lint-webpack": "^1.0.3"
+    "sass-lint-webpack": "^1.0.4"
   },
   "browserslist": {
     "production": [

diff --git a/public/index.html b/public/index.html
@@ -73,9 +73,18 @@
     <!-- WMN design system CSS -->
     <link
       rel="stylesheet"
-      href="//unpkg.com/wmn-design-system@%REACT_APP_WMNDS_VERSION%/build/css/wmnds.min.css"
+      href="https://cloudcdn.wmca.org.uk/tfwmassets/ds/2.4.3/css/wmnds.min.css"
     />
 
+    <script src="https://cloudcdn.wmca.org.uk/tfwmassets/js/header-footer.min.js"></script>
+
+    <style>
+      .wmnds-header--mega-menu {display: none !important;}
+      .bgWhite {
+        background-color: #ffffff !important;
+      }
+    </style>
+
     <!-- Google Tag Manager -->
     <script>
       (function (w, d, s, l, i) {
@@ -120,7 +129,7 @@
     </a>
     <!-- Main header section -->
     <header>
-      <div class="bg-white wmnds-p-t-md wmnds-p-b-md wmnds-cookies-banner">
+      <div class="bgWhite wmnds-p-t-md wmnds-p-b-md wmnds-cookies-banner">
         <div class="wmnds-container">
           <div class="wmnds-col-1 wmnds-col-md-3-4 wmnds-col-lg-2-3">
             <h3>Your privacy settings</h3>
@@ -157,20 +166,18 @@ <h3>Your privacy settings</h3>
             <!-- Logo -->
             <a
               class="wmnds-header__logo-link"
-              href="//wmnetwork.co.uk"
-              title="West Midlands Network Design System"
+              href="https://tfwm.org.uk"
+              title="Transport for West Midlands"
             >
               <img
                 class="wmnds-header__logo"
-                alt="West Midlands Network logo"
-                src="//wmnetwork.netlify.com/img/logo.svg"
+                alt="Transport for West Midlands logo"
+                src="https://unpkg.com/wmn-design-system@2.2.0/build/img/logo.svg"
               />
             </a>
           </div>
           <!-- Header title -->
-          <span class="wmnds-header__title h1 wmnds-col-1 wmnds-col-sm-auto"
-            >%REACT_APP_TITLE%</span
-          >
+          <h1 class="wmnds-header__title wmnds-col-1 wmnds-col-sm-auto">%REACT_APP_TITLE%</h1>
         </div>
       </div>
       <div class="wmnds-container wmnds-hide-mobile">
@@ -206,36 +213,36 @@ <h3>Your privacy settings</h3>
     <!-- End app -->
 
     <!-- Footer -->
-    <footer class="wmnds-footer wmnds-footer--v2 wmnds-footer--mobile-app">
+    <!-- <footer class="wmnds-footer wmnds-footer--v2 wmnds-footer--mobile-app">
       <div class="wmnds-container wmnds-grid">
         <div class="wmnds-col-1 wmnds-col-lg-1-3 wmnds-footer__updates-col">
           <h3 class="wmnds-footer__heading">Stay up to date</h3>
           <p>
             Don’t miss out on vital information, subscribe today and be in the know at all times.
           </p>
-          <a href="#" class="wmnds-btn wmnds-footer__btn wmnds-footer__btn--block"
+          <a href="https://confirmsubscription.com/h/d/3D13A23E4E88FD0D" class="wmnds-btn wmnds-footer__btn wmnds-footer__btn--block"
             >Sign up to updates</a
           >
         </div>
         <div class="wmnds-col-1 wmnds-col-lg-1-3">
           <h3 class="wmnds-footer__heading">Social media</h3>
           <ul class="wmnds-footer__social-media">
             <li>
-              <a href="https://www.facebook.com/westmidlandsnetwork/" title="Facebook"
+              <a href="https://facebook.com/TransportForWM" title="Facebook"
                 ><svg>
                   <use xlink:href="#wmnds-social-facebook" href="#wmnds-social-facebook"></use>
                 </svg>
               </a>
             </li>
             <li>
-              <a href="https://twitter.com/WMNetwork" title="Twitter"
+              <a href="https://twitter.com/TransportForWM" title="Twitter"
                 ><svg>
                   <use xlink:href="#wmnds-social-twitter" href="#wmnds-social-twitter"></use>
                 </svg>
               </a>
             </li>
             <li>
-              <a href="https://www.instagram.com/wmnetwork/" title="Instagram"
+              <a href="https://instagram.com/TransportForWM" title="Instagram"
                 ><svg>
                   <use xlink:href="#wmnds-social-instagram" href="#wmnds-social-instagram"></use>
                 </svg>
@@ -247,12 +254,12 @@ <h3 class="wmnds-footer__heading">Social media</h3>
       <div class="wmnds-container">
         <div class="wmnds-footer__bottom wmnds-grid">
           <div class="wmnds-col-1 wmnds-col-md-1-2">
-            <p class="wmnds-footer__copyright">&copy; West Midlands Combined Authority 2021</p>
+            <p class="wmnds-footer__copyright">&copy; West Midlands Combined Authority 2024</p>
           </div>
           <div class="wmnds-col-1 wmnds-col-md-1-2"></div>
         </div>
       </div>
-    </footer>
+    </footer> -->
     <!-- End footer -->
 
     <!-- Ajax SVG in, SVGS are referenced in app (Icon component) -->
@@ -261,7 +268,7 @@ <h3 class="wmnds-footer__heading">Social media</h3>
       const ajax = new XMLHttpRequest();
       ajax.open(
         'GET',
-        '//unpkg.com/wmn-design-system@%REACT_APP_WMNDS_VERSION%/build/img/wmnds-icons.min.svg',
+        'https://cloudcdn.wmca.org.uk/tfwmassets/ds/2.4.2/img/wmnds-icons.min.svg',
         true
       );
       ajax.send();

diff --git a/src/components/App/App.js b/src/components/App/App.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import ContextProvider from 'globalState/ContextProvider';
+import { ContextProvider } from 'globalState/ContextProvider';
 import RailZoneFinder from '../RailZoneFinder/RailZoneFinder';
 
 function App() {

diff --git a/src/components/RailZoneFinder/ListView/ListView.js b/src/components/RailZoneFinder/ListView/ListView.js
@@ -1,15 +1,15 @@
 import React, { useState } from 'react';
-import Button from '../../shared/Button/Button';
-import AccessIcon from '../../shared/Icon/AccessIcon';
-import Icon from '../../shared/Icon/Icon';
-import AccessibilityKey from '../../shared/AccessibilityKey/AccessibilityKey';
-import Accordion from '../../shared/Accordion/Accordion';
-import AutoComplete from '../../shared/AutoComplete/AutoComplete';
+import { Button } from '../../shared/Button/Button';
+import { AccessIcon } from '../../shared/Icon/AccessIcon';
+import { Icon } from '../../shared/Icon/Icon';
+import { AccessibilityKey } from '../../shared/AccessibilityKey/AccessibilityKey';
+import { Accordion } from '../../shared/Accordion/Accordion';
+import { AutoComplete } from '../../shared/AutoComplete/AutoComplete';
 import s from './ListView.module.scss';
 
 import railData from '../RailData.json';
 
-const ListView = () => {
+export function ListView() {
   const [accordions, setAccordions] = useState([
     { name: 'Zone 1', open: false },
     { name: 'Zone 2', open: false },
@@ -37,7 +37,7 @@ const ListView = () => {
     <div className="wmnds-container">
       <div className="wmnds-grid wmnds-grid--spacing-md-2-lg wmnds-p-b-md">
         <div className="wmnds-col-1-1 wmnds-col-md-2-3">
-          <div className={`bg-white wmnds-p-md ${s.trayComponents}`}>
+          <div className={`bgWhite wmnds-p-md ${s.trayComponents}`}>
             <AutoComplete />
           </div>
         </div>
@@ -109,6 +109,7 @@ const ListView = () => {
                       <li key={station.crsCode} className={s.accordionListItem}>
                         {station.stationName}
                         {station.stepFreeAccess && (
+                          // eslint-disable-next-line react/jsx-no-useless-fragment
                           <>
                             {station.stepFreeAccess === 'full' ? (
                               <>
@@ -154,6 +155,6 @@ const ListView = () => {
       </div>
     </div>
   );
-};
+}
 
 export default ListView;
diff --git a/src/components/RailZoneFinder/Map/Map.js b/src/components/RailZoneFinder/Map/Map.js
@@ -1,11 +1,11 @@
 import React, { useContext, useEffect, useRef } from 'react';
 import { MapContext } from 'globalState';
-import RailZoneMap from './RailZoneMap';
-import AccessibilityKey from '../../shared/AccessibilityKey/AccessibilityKey';
+import { RailZoneMap } from './RailZoneMap';
+import { AccessibilityKey } from '../../shared/AccessibilityKey/AccessibilityKey';
 
 import s from './Map.module.scss';
 
-const Map = () => {
+export function Map() {
   const [, mapDispatch] = useContext(MapContext);
   const mapContainer = useRef(null);
 
@@ -24,6 +24,6 @@ const Map = () => {
       </div>
     </div>
   );
-};
+}
 
 export default Map;
diff --git a/src/components/RailZoneFinder/Map/MapControls/MapControls.js b/src/components/RailZoneFinder/Map/MapControls/MapControls.js
@@ -1,9 +1,9 @@
 import React from 'react';
-import Icon from '../../../shared/Icon/Icon';
+import { Icon } from '../../../shared/Icon/Icon';
 import s from './MapControls.module.scss';
 import useMapControls from '../customHooks/useMapControls';
 
-const MapControls = () => {
+export function MapControls() {
   const { fitToViewer, zoomInCenter, zoomOutCenter } = useMapControls();
   return (
     <div className={s.mapControls}>
@@ -18,6 +18,6 @@ const MapControls = () => {
       </button>
     </div>
   );
-};
+}
 
 export default MapControls;
diff --git a/src/components/RailZoneFinder/Map/RailZoneMap.js b/src/components/RailZoneFinder/Map/RailZoneMap.js
diff --git a/src/components/RailZoneFinder/MapView/MapView.js b/src/components/RailZoneFinder/MapView/MapView.js
@@ -1,15 +1,15 @@
 import React from 'react';
 // Rail zone svg component
-import Map from '../Map/Map';
-import AutoComplete from '../../shared/AutoComplete/AutoComplete';
+import { Map } from '../Map/Map';
+import { AutoComplete } from '../../shared/AutoComplete/AutoComplete';
 import s from './MapView.module.scss';
 
-const MapView = () => {
+export function MapView() {
   return (
     <div className={s.mapViewSection}>
       <div className={`${s.container} wmnds-grid wmnds-grid--spacing-md-2-lg`}>
         <div className="wmnds-col-1-1 wmnds-col-md-1-2 wmnds-col-lg-1-3">
-          <div className="bg-white wmnds-p-md">
+          <div className="bgWhite wmnds-p-md">
             <AutoComplete />
           </div>
         </div>
@@ -19,6 +19,6 @@ const MapView = () => {
       </div>
     </div>
   );
-};
+}
 
 export default MapView;
diff --git a/src/components/RailZoneFinder/RailData.json b/src/components/RailZoneFinder/RailData.json
@@ -620,7 +620,7 @@
       "stationName": "Shirley",
       "railZone": 4,
       "parking": true,
-      "stepFreeAccess": "partial"
+      "stepFreeAccess": "full"
     },
     {
       "crsCode": "SHR",

diff --git a/src/components/RailZoneFinder/RailZoneFinder.js b/src/components/RailZoneFinder/RailZoneFinder.js
@@ -1,11 +1,11 @@
 import React, { useContext } from 'react';
 import { MapContext, AutoCompleteContext } from 'globalState';
 // Rail zone svg component
-import Button from '../shared/Button/Button';
-import Icon from '../shared/Icon/Icon';
+import { Button } from '../shared/Button/Button';
+import { Icon } from '../shared/Icon/Icon';
 import Breadcrumbs from '../shared/Breadcrumbs/Breadcrumbs';
-import MapView from './MapView/MapView';
-import ListView from './ListView/ListView';
+import { MapView } from './MapView/MapView';
+import { ListView } from './ListView/ListView';
 import s from './RailZoneFinder.module.scss';
 
 function RailZoneFinder() {

diff --git a/src/components/RailZoneFinder/RailZoneFinder.module.scss b/src/components/RailZoneFinder/RailZoneFinder.module.scss
@@ -32,3 +32,7 @@
     fill: currentColor;
   }
 }
+
+.bgWhite {
+  background-color: $white !important;
+}