Merge pull request #36 from wmcadigital/next-release

fix: show correct rail zone names and mobile key styling

public/index.html

@@ -196,27 +196,6 @@ <h3>Your privacy settings</h3>
           </div>
         </div>
         <!-- End feedback form -->
-        <!-- Breadcrumbs -->
-        <nav aria-label="Breadcrumb" class="wmnds-breadcrumb">
-          <ol class="wmnds-breadcrumb__list">
-            <li class="wmnds-breadcrumb__list-item">
-              <a href="//wmnetwork.co.uk" class="wmnds-breadcrumb__link">Home</a>
-            </li>
-            <!-- <li class="wmnds-breadcrumb__list-item">
-              <a href="//wmnetwork.co.uk/sub-page/" class="wmnds-breadcrumb__link"> Sub page </a>
-            </li> -->
-            <li class="wmnds-breadcrumb__list-item">
-              <a
-                href="/"
-                class="wmnds-breadcrumb__link wmnds-breadcrumb__link--current"
-                aria-current="page"
-              >
-                %REACT_APP_TITLE%
-              </a>
-            </li>
-          </ol>
-        </nav>
-        <!-- End Breadcrumbs -->
       </div>
     </header>
 

src/components/RailZoneFinder/ListView/ListView.js

@@ -1,11 +1,10 @@
 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 TrayComponents from '../../shared/SearchComponents/SearchComponents';
+import AutoComplete from '../../shared/AutoComplete/AutoComplete';
 import s from './ListView.module.scss';
 
 import railData from '../RailData.json';
@@ -39,7 +38,7 @@ const ListView = () => {
       <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}`}>
-            <TrayComponents />
+            <AutoComplete />
           </div>
         </div>
       </div>

src/components/RailZoneFinder/MapView/MapView.js

@@ -1,7 +1,7 @@
 import React from 'react';
 // Rail zone svg component
 import Map from '../Map/Map';
-import TrayComponents from '../../shared/SearchComponents/SearchComponents';
+import AutoComplete from '../../shared/AutoComplete/AutoComplete';
 import s from './MapView.module.scss';
 
 const MapView = () => {
@@ -10,7 +10,7 @@ const MapView = () => {
       <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">
-            <TrayComponents />
+            <AutoComplete />
           </div>
         </div>
         <div className="wmnds-col-1-1 wmnds-col-md-1-2 wmnds-col-lg-2-3">

src/components/RailZoneFinder/RailZoneFinder.js

@@ -1,12 +1,15 @@
 import React, { useContext } from 'react';
-import { MapContext } from 'globalState';
+import { MapContext, AutoCompleteContext } from 'globalState';
 // Rail zone svg component
 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 s from './RailZoneFinder.module.scss';
 
 function RailZoneFinder() {
+  const [autoCompleteState] = useContext(AutoCompleteContext);
   const [mapState, mapDispatch] = useContext(MapContext);
   const { mapView } = mapState;
   // Toggle between map and list view
@@ -16,9 +19,22 @@ function RailZoneFinder() {
       payload: !mapView,
     });
   };
+
   return (
     <>
       <div className="wmnds-container">
+        {autoCompleteState.ticketMode ? (
+          <div className="wmnds-m-b-lg wmnds-m-t-md">
+            <a
+              href="https://find-a-ticket.wmnetwork.co.uk/"
+              className={`wmnds-btn wmnds-btn--link ${s.backLink}`}
+            >
+              <Icon iconName="general-chevron-right" /> Back to ticket finder
+            </a>
+          </div>
+        ) : (
+          <Breadcrumbs />
+        )}
         <div className={`wmnds-grid wmnds-grid--justify-between ${s.mainHeading}`}>
           <div className="wmnds-col-auto">
             <h1>Find my rail zones</h1>

src/components/RailZoneFinder/RailZoneFinder.module.scss

@@ -21,3 +21,14 @@
     white-space: nowrap;
   }
 }
+
+.backLink {
+  display: inline-flex;
+  align-items: center;
+
+  svg {
+    margin-right: $size-xsm;
+    transform: rotate(180deg);
+    fill: currentColor;
+  }
+}

src/components/shared/AccessibilityKey/AccessibilityKey.js

@@ -87,7 +87,7 @@ const AccessibilityKey = ({ mapView }) => {
         />
       ) : (
         <div className={`wmnds-p-md bg-white ${s.accessMenu} ${s.mapKey}`}>
-          <div className="wmnds-grid wmnds-grid--justify-between">
+          <div className={`wmnds-grid wmnds-grid--justify-between ${s.keyHeader}`}>
             <h3 className="wmnds-col-auto">Show parking and accessibility</h3>
             <div className="wmnds-col-auto">
               <Button

src/components/shared/AccessibilityKey/AccessibilityKey.module.scss

@@ -39,6 +39,19 @@
   text-align: right;
 }
 
+.keyHeader {
+  flex-wrap: nowrap;
+
+  & > h3 {
+    text-align: left;
+  }
+
+  & > .hideKeyBtn {
+    display: inline-flex;
+    flex-wrap: nowrap;
+  }
+}
+
 @media (min-width: $breakpoint-md) and (min-height: $breakpoint-sm) {
   .mapKeyContainer {
     position: sticky;

src/components/shared/SearchComponents/SearchComponents.js → src/components/shared/AutoComplete/AutoComplete.js

@@ -3,13 +3,14 @@ import React, { useContext } from 'react';
 import { AutoCompleteContext } from 'globalState';
 // Import components
 import Button from '../Button/Button';
+import Icon from '../Icon/Icon';
 import Result from '../Result/Result';
 import TrainAutoComplete from './TrainAutoComplete/TrainAutocomplete';
-import s from './SearchComponents.module.scss';
+import s from './AutoComplete.module.scss';
 // Import custom hook
 import useMapControls from '../../RailZoneFinder/Map/customHooks/useMapControls';
 
-const TrayComponents = () => {
+const AutoComplete = () => {
   const [autoCompleteState, autoCompleteDispatch] = useContext(AutoCompleteContext);
   const { selectedStations } = autoCompleteState;
   const { resetMap } = useMapControls();
@@ -23,6 +24,22 @@ const TrayComponents = () => {
     autoCompleteDispatch({ type: 'RESET_SELECTED_SERVICES' });
   };
 
+  // Spread ids of selected stations into an array
+  const selectedStationIds = [...selectedStations.map((stn) => stn.id)];
+  let linkParams = '';
+  // Loop through station ids and append a selected station id param to string
+  selectedStationIds.forEach((id, i) => {
+    if (id) {
+      linkParams += `${i === 0 ? '?' : '&'}selectedStation${i}=${id}`;
+    }
+  });
+
+  // Show continue button if:
+  // - ticket search mode is true
+  // - more than one station is selected
+  const continueBtn =
+    autoCompleteState.ticketMode && selectedStations.filter((stn) => stn.id).length > 1;
+
   return (
     <>
       <div className={`${s.trayHeader}`}>
@@ -59,8 +76,20 @@ const TrayComponents = () => {
         />
       </div>
       <Result />
+      {continueBtn && (
+        <a
+          href={`https://find-a-ticket.wmnetwork.co.uk/${linkParams}`}
+          className="wmnds-btn wmnds-btn--icon wmnds-col-1 wmnds-col-sm-auto"
+        >
+          Continue
+          <Icon
+            className="wmnds-btn__icon wmnds-btn__icon--right"
+            iconName="general-chevron-right"
+          />
+        </a>
+      )}
     </>
   );
 };
 
-export default TrayComponents;
+export default AutoComplete;

src/components/shared/SearchComponents/customHooks/useAutoCompleteAPI.js → src/components/shared/AutoComplete/customHooks/useAutoCompleteAPI.js

@@ -73,7 +73,7 @@ const useAutoCompleteAPI = (queryId) => {
       ? railData.railStationAccess.filter((station) => {
           return station.stationName.toLowerCase().includes(query.trim().toLowerCase());
         })
-      : [];
+      : railData.railStationAccess;
     handleAutoCompleteApiResponse(response);
   }, [handleAutoCompleteApiResponse, query]);
 

src/components/shared/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,28 @@
+import React from 'react';
+
+const { REACT_APP_TITLE } = process.env;
+
+function Breadcrumbs() {
+  return (
+    <nav ariaLabel="Breadcrumb" className="wmnds-breadcrumb">
+      <ol className="wmnds-breadcrumb__list">
+        <li className="wmnds-breadcrumb__list-item">
+          <a href="//wmnetwork.co.uk" className="wmnds-breadcrumb__link">
+            Home
+          </a>
+        </li>
+        <li className="wmnds-breadcrumb__list-item">
+          <a
+            href="/"
+            className="wmnds-breadcrumb__link wmnds-breadcrumb__link--current"
+            ariaCurrent="page"
+          >
+            {REACT_APP_TITLE}
+          </a>
+        </li>
+      </ol>
+    </nav>
+  );
+}
+
+export default Breadcrumbs;

src/components/shared/Radios/Radio/Radio.js

@@ -0,0 +1,54 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import dompurify from 'dompurify';
+
+// Import contexts
+import { FormContext } from 'globalState';
+
+import s from './Radio.module.scss';
+
+const { sanitize } = dompurify;
+
+const Radio = ({ name = '', onChange, text, value, info }) => {
+  const [formState] = useContext(FormContext); // Get the state/dispatch of form data from FormContext
+
+  return (
+    <>
+      <label className={`${s.radioContainer} wmnds-fe-radios__container`}>
+        <div className={s.text} dangerouslySetInnerHTML={{ __html: sanitize(text) }} />
+        <input
+          className={`${s.radio} wmnds-fe-radios__input`}
+          value={value}
+          name={name}
+          type="radio"
+          onChange={onChange}
+          defaultChecked={formState[name] && formState[name] === value}
+        />
+        {info && (
+          <div
+            className={`${s.insetText} wmnds-inset-text wmnds-m-t-xs`}
+            dangerouslySetInnerHTML={{ __html: sanitize(info) }}
+          />
+        )}
+        <span className="wmnds-fe-radios__checkmark" />
+      </label>
+    </>
+  );
+};
+
+Radio.propTypes = {
+  name: PropTypes.string,
+  onChange: PropTypes.func,
+  text: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  info: PropTypes.string,
+};
+
+Radio.defaultProps = {
+  name: '',
+  onChange: null,
+  info: null,
+};
+
+export default Radio;

src/components/shared/Radios/Radio/Radio.module.scss

@@ -0,0 +1,34 @@
+// Refer to https://create-react-app.dev/docs/adding-a-css-modules-stylesheet
+// On how to use scss modules with React
+
+// Import WMN Design System scss for use in this scss file
+// Tilde (~) represents the root folder(src)
+@import '~assets/wmnds/vars';
+@import '~assets/wmnds/mixins';
+
+.text {
+  display: inline-flex;
+  min-height: 35px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+
+  strong {
+    display: block;
+  }
+}
+
+.radioContainer {
+  flex-wrap: wrap;
+}
+
+.insetText {
+  display: none;
+  flex: 0 0 100%;
+}
+
+.radio {
+  &:checked + .insetText {
+    display: block;
+  }
+}