From f16b4190fbda03fee6db3ecbb68ad6da82f25698 Mon Sep 17 00:00:00 2001
From: danji_ma90 <daniel.marsh-hunn@geops.com>
Date: Wed, 14 Aug 2024 14:16:56 +0200
Subject: [PATCH] feat(RouteSchedule): add getDelayString prop for custom delay
 string (#728)

* feat(RouteSchedule): add getDelayString prop for custom delay string generation

* chore(release): 1.12.0-beta.0
---
 package.json                                       |  2 +-
 src/components/RouteSchedule/RouteSchedule.js      | 11 ++++++++++-
 src/components/RouteSchedule/RouteSchedule.test.js |  1 +
 src/styleguidist/StyleGuide.js                     | 10 +++++-----
 4 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index b95e0a4f..382590a8 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "react-spatial",
   "license": "MIT",
   "description": "Components to build React map apps.",
-  "version": "1.11.6",
+  "version": "1.12.0-beta.0",
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
diff --git a/src/components/RouteSchedule/RouteSchedule.js b/src/components/RouteSchedule/RouteSchedule.js
index 8851a5cf..4b71ee84 100644
--- a/src/components/RouteSchedule/RouteSchedule.js
+++ b/src/components/RouteSchedule/RouteSchedule.js
@@ -6,7 +6,10 @@ import {
   RealtimeLayer as TrackerLayer,
   realtimeConfig,
 } from "mobility-toolbox-js/ol";
-import { getHoursAndMinutes, getDelayString } from "../../utils/timeUtils";
+import {
+  getHoursAndMinutes,
+  getDelayString as defaultGetDelayString,
+} from "../../utils/timeUtils";
 import ReactTransitPropTypes from "../../propTypes";
 import firstStation from "../../images/RouteSchedule/firstStation.png";
 import station from "../../images/RouteSchedule/station.png";
@@ -118,6 +121,7 @@ function RouteStop({
   trackerLayer,
   renderStationImg = defaultRenderStationImg,
   renderStationName = defaultRenderStationName,
+  getDelayString = defaultGetDelayString,
   stop,
   idx,
 }) {
@@ -387,6 +391,11 @@ const propTypes = {
    * Function to render header buttons.
    */
   renderHeaderButtons: PropTypes.func,
+
+  /**
+   * Function to get the delay string for stations.
+   */
+  getDelayString: PropTypes.func,
 };
 
 /**
diff --git a/src/components/RouteSchedule/RouteSchedule.test.js b/src/components/RouteSchedule/RouteSchedule.test.js
index c8d89486..ba59ba07 100644
--- a/src/components/RouteSchedule/RouteSchedule.test.js
+++ b/src/components/RouteSchedule/RouteSchedule.test.js
@@ -110,4 +110,5 @@ describe("RouteSchedule", () => {
   // to test: no departure delay on last station
   // to test: no departure date on last station
   // to test: font bold on first and last station
+  // to test: custom getDelayString prop
 });
diff --git a/src/styleguidist/StyleGuide.js b/src/styleguidist/StyleGuide.js
index 5c88a423..39c86e73 100644
--- a/src/styleguidist/StyleGuide.js
+++ b/src/styleguidist/StyleGuide.js
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import { geopsTheme, Header, Footer } from "@geops/geops-ui";
 import {
-  Hidden,
+  Paper,
   ClickAwayListener,
   Collapse,
   List,
@@ -147,7 +147,7 @@ export function StyleGuideRenderer({
           ]}
         />
         <div className={classes.content}>
-          <Hidden smUp>
+          <Paper sx={{ display: { xs: "block", sm: "none" } }}>
             <div
               role="button"
               type="button"
@@ -236,16 +236,16 @@ export function StyleGuideRenderer({
                 </List>
               </ClickAwayListener>
             </Collapse>
-          </Hidden>
+          </Paper>
           <div className={classes.scrollable} ref={(nodee) => setNode(nodee)}>
-            <Hidden xsDown>
+            <Paper sx={{ display: { xs: "none", sm: "block" } }}>
               <div className={classes.sidebar}>
                 <header className={classes.version}>
                   {version && <Version>{version}</Version>}
                 </header>
                 {hasSidebar ? toc : null}
               </div>
-            </Hidden>
+            </Paper>
             <main className={classes.main}>{children}</main>
             <div className={classes.footerWrapper}>
               <Footer