From 29d9707b7dd36d956511356cb7a98b8babec9e01 Mon Sep 17 00:00:00 2001 From: juhomakkonen Date: Wed, 10 Apr 2024 12:02:40 +0300 Subject: [PATCH 01/52] Add components that render school accessibility areas --- package-lock.json | 13 +++ package.json | 1 + .../AccessibilityAreas/AccessibilityAreas.js | 66 +++++++++++++ .../AccessibilityAreas/index.js | 3 + src/context/MobilityPlatformContext.js | 3 + src/i18n/en.js | 3 +- src/i18n/fi.js | 3 +- src/i18n/sv.js | 3 +- .../MobilityPlatformMapView.js | 2 + .../MobilityToggleButton.js | 1 - src/views/UnitView/UnitView.js | 18 +++- .../AccessibilityAreasInfo.js | 67 +++++++++++++ .../AccessibilityAreasToggle.js | 93 +++++++++++++++++++ .../AccessibilityAreasToggle/index.js | 3 + .../AccessibilityAreasInfo/index.js | 3 + 15 files changed, 273 insertions(+), 9 deletions(-) create mode 100644 src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js create mode 100644 src/components/MobilityPlatform/AccessibilityAreas/index.js create mode 100644 src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js create mode 100644 src/views/UnitView/components/AccessibilityAreasInfo/components/AccessibilityAreasToggle/AccessibilityAreasToggle.js create mode 100644 src/views/UnitView/components/AccessibilityAreasInfo/components/AccessibilityAreasToggle/index.js create mode 100644 src/views/UnitView/components/AccessibilityAreasInfo/index.js diff --git a/package-lock.json b/package-lock.json index 32fda84c2..d6a4f52e9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.1.0", "dependencies": { "@datapunt/matomo-tracker-js": "^0.5.1", + "@emotion/css": "^11.11.2", "@emotion/react": "^11.10.8", "@emotion/styled": "^11.10.8", "@formatjs/intl-pluralrules": "^1.5.9", @@ -2312,6 +2313,18 @@ "stylis": "4.2.0" } }, + "node_modules/@emotion/css": { + "version": "11.11.2", + "resolved": "https://registry.npmjs.org/@emotion/css/-/css-11.11.2.tgz", + "integrity": "sha512-VJxe1ucoMYMS7DkiMdC2T7PWNbrEI0a39YRiyDvK2qq4lXwjRbVP/z4lpG+odCsRzadlR+1ywwrTzhdm5HNdew==", + "dependencies": { + "@emotion/babel-plugin": "^11.11.0", + "@emotion/cache": "^11.11.0", + "@emotion/serialize": "^1.1.2", + "@emotion/sheet": "^1.2.2", + "@emotion/utils": "^1.2.1" + } + }, "node_modules/@emotion/hash": { "version": "0.9.1", "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", diff --git a/package.json b/package.json index 05f703c6c..759e91263 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "@datapunt/matomo-tracker-js": "^0.5.1", + "@emotion/css": "^11.11.2", "@emotion/react": "^11.10.8", "@emotion/styled": "^11.10.8", "@formatjs/intl-pluralrules": "^1.5.9", diff --git a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js new file mode 100644 index 000000000..89faf3680 --- /dev/null +++ b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js @@ -0,0 +1,66 @@ +/* eslint-disable react-hooks/exhaustive-deps */ +import React, { useEffect } from 'react'; +import { useSelector } from 'react-redux'; +import { useMap } from 'react-leaflet'; +import { useMobilityPlatformContext } from '../../../context/MobilityPlatformContext'; +import { useAccessibleMap } from '../../../redux/selectors/settings'; +import useMobilityDataFetch from '../utils/useMobilityDataFetch'; +import { + isDataValid, fitPolygonsToBounds, blueOptionsBase, whiteOptionsBase, +} from '../utils/utils'; +import PolygonComponent from '../PolygonComponent'; + +/** + * Displays school accessibility areas on the map in polygon format. + */ + +const AccessibilityAreas = () => { + const options = { + type_name: 'SchoolAndKindergartenAccessibilityArea', + latlon: true, + page_size: 150, + }; + const { showAccessibilityAreas } = useMobilityPlatformContext(); + + const selectedUnit = useSelector(state => state.selectedUnit?.unit?.data); + const unitName = selectedUnit?.name?.fi; + const useContrast = useSelector(useAccessibleMap); + + const map = useMap(); + + const blueOptions = blueOptionsBase({ weight: 5 }); + const whiteOptions = whiteOptionsBase({ + fillOpacity: 0.3, + weight: 5, + dashArray: '12', + }); + const pathOptions = useContrast ? whiteOptions : blueOptions; + + const { data } = useMobilityDataFetch(options, showAccessibilityAreas); + + const filteredAreas = data.filter(item => item.name === unitName); + const renderData = isDataValid(showAccessibilityAreas, filteredAreas); + + useEffect(() => { + fitPolygonsToBounds(renderData, filteredAreas, map); + }, [showAccessibilityAreas, filteredAreas]); + + return ( + renderData + ? filteredAreas.map(item => ( + +

{item.name}

+

{item.extra.Kulkumuoto}

+

{item.extra.Minuutit}

+
+ )) + : null + ); +}; + +export default AccessibilityAreas; diff --git a/src/components/MobilityPlatform/AccessibilityAreas/index.js b/src/components/MobilityPlatform/AccessibilityAreas/index.js new file mode 100644 index 000000000..7ec4f14f7 --- /dev/null +++ b/src/components/MobilityPlatform/AccessibilityAreas/index.js @@ -0,0 +1,3 @@ +import AccessibilityAreas from './AccessibilityAreas'; + +export default AccessibilityAreas; diff --git a/src/context/MobilityPlatformContext.js b/src/context/MobilityPlatformContext.js index aa9de8073..043bb81a6 100644 --- a/src/context/MobilityPlatformContext.js +++ b/src/context/MobilityPlatformContext.js @@ -103,6 +103,7 @@ const MobilityPlatformContextProvider = ({ children }) => { const [showUnderpasses, setShowUnderpasses] = useState(false); const [showPublicBenches, setShowPublicBenches] = useState(false); const [showRoadworks, setShowRoadworks] = useState(false); + const [showAccessibilityAreas, setShowAccessibilityAreas] = useState(false); const getters = { openMobilityPlatform, @@ -172,6 +173,7 @@ const MobilityPlatformContextProvider = ({ children }) => { showUnderpasses, showPublicBenches, showRoadworks, + showAccessibilityAreas, }; const setters = { @@ -242,6 +244,7 @@ const MobilityPlatformContextProvider = ({ children }) => { setShowOverpasses, setShowPublicBenches, setShowRoadworks, + setShowAccessibilityAreas, }; const contextValues = { ...getters, ...setters }; diff --git a/src/i18n/en.js b/src/i18n/en.js index 4717311c5..d6c093e72 100644 --- a/src/i18n/en.js +++ b/src/i18n/en.js @@ -461,7 +461,7 @@ const translations = { 'unit.details.notFound': 'Service point info not available.', 'unit.plural': 'Service points', 'unit.distance': 'Distance', - + 'unit.accessibilityAreas': 'Accessibility areas', 'unit.contact.info': 'Contact information', 'unit.links': 'Web sites', 'unit.eServices': 'Electronic services', @@ -526,6 +526,7 @@ const translations = { 'unit.outdoorLink': 'Check the condition of an exercise location in the ulkoliikunta.fi service', 'unit.seo.description': 'View service point on the map', 'unit.seo.description.accessibility': 'View accessibility info and service point on the map', + 'unit.accessibilityAreas.all.label': 'All accessibility areas', // Search 'search': 'Search', diff --git a/src/i18n/fi.js b/src/i18n/fi.js index 83a5c7a15..aea7ab3a4 100644 --- a/src/i18n/fi.js +++ b/src/i18n/fi.js @@ -464,7 +464,7 @@ const translations = { 'unit.details.notFound': 'Toimipisteen tietoja ei saatavilla.', 'unit.plural': 'Toimipisteet', 'unit.distance': 'Etäisyys: ', - + 'unit.accessibilityAreas': 'Lähestymisalueet', 'unit.contact.info': 'Yhteystiedot', 'unit.links': 'Verkossa', 'unit.eServices': 'Sähköinen asiointi', @@ -530,6 +530,7 @@ const translations = { 'unit.outdoorLink': 'Katso liikuntapaikan kunto ulkoliikunta.fi palvelusta', 'unit.seo.description': 'Katso sijainti kartalla', 'unit.seo.description.accessibility': 'Katso esteettömyystiedot ja sijainti kartalla', + 'unit.accessibilityAreas.all.label': 'Kaikki lähestymisalueet', // Search 'search': 'Hae', diff --git a/src/i18n/sv.js b/src/i18n/sv.js index eb942f088..cc33d50bb 100644 --- a/src/i18n/sv.js +++ b/src/i18n/sv.js @@ -465,7 +465,7 @@ const translations = { 'unit.details.notFound': 'Verksamhetsställets uppgifter finns inte att tillgå.', 'unit.plural': 'Verksamhetsställen', 'unit.distance': 'Avstånd', - + 'unit.accessibilityAreas': 'Tillgänglighetsområden', 'unit.contact.info': 'Kontaktuppgifter', 'unit.links': 'På webben', 'unit.eServices': 'E-tjänster', @@ -530,6 +530,7 @@ const translations = { 'unit.outdoorLink': 'Kolla skicket på en motionsplats i tjänsten ulkoliikunta.fi', 'unit.seo.description': 'Se läget på kartan', 'unit.seo.description.accessibility': 'Se tillgänglighetsuppgifterna och läget på kartan', + 'unit.accessibilityAreas.all.label': 'Alla tillgänglighetsområden', // Search 'search': 'Sök', diff --git a/src/views/MobilityPlatformMapView/MobilityPlatformMapView.js b/src/views/MobilityPlatformMapView/MobilityPlatformMapView.js index 918e8c499..4e63ef4a3 100644 --- a/src/views/MobilityPlatformMapView/MobilityPlatformMapView.js +++ b/src/views/MobilityPlatformMapView/MobilityPlatformMapView.js @@ -38,6 +38,7 @@ import Roadworks from '../../components/MobilityPlatform/Roadworks'; import RailwayStations from '../../components/MobilityPlatform/RailwayStations'; import AirMonitoring from '../../components/MobilityPlatform/EnvironmentObservations/AirMonitoring'; import ParkAndRideBikes from '../../components/MobilityPlatform/ParkAndRideStops/ParkAndRideBikes'; +import AccessibilityAreas from '../../components/MobilityPlatform/AccessibilityAreas'; const MobilityPlatformMapView = ({ mapObject }) => ( <> @@ -79,6 +80,7 @@ const MobilityPlatformMapView = ({ mapObject }) => ( + ); diff --git a/src/views/MobilitySettingsView/components/MobilityToggleButton/MobilityToggleButton.js b/src/views/MobilitySettingsView/components/MobilityToggleButton/MobilityToggleButton.js index 42c651943..707e45e72 100644 --- a/src/views/MobilitySettingsView/components/MobilityToggleButton/MobilityToggleButton.js +++ b/src/views/MobilitySettingsView/components/MobilityToggleButton/MobilityToggleButton.js @@ -29,7 +29,6 @@ const MobilityToggleButton = ({ role: 'button', 'aria-setsize': selectionSize ? selectionSize.toString() : null, 'aria-pressed': checkedValue, - 'aria-labelledby': msgId, }} onChange={(e) => onChangeValue(e)} checked={checkedValue} diff --git a/src/views/UnitView/UnitView.js b/src/views/UnitView/UnitView.js index 4ba2ac8d5..b2e24f9d2 100644 --- a/src/views/UnitView/UnitView.js +++ b/src/views/UnitView/UnitView.js @@ -43,8 +43,9 @@ import { parseSearchParams } from '../../utils'; import { fetchServiceUnits } from '../../redux/actions/services'; import MapView from '../MapView'; import Util from '../../utils/mapUtility'; +import AccessibilityAreasInfo from './components/AccessibilityAreasInfo'; -const UnitView = (props) => { +const UnitView = props => { const { distance, stateUnit, @@ -98,7 +99,7 @@ const UnitView = (props) => { const initializePTVAccessibilitySentences = () => { if (unit) { - unit.identifiers.forEach((element) => { + unit.identifiers.forEach(element => { if (element.namespace === 'ptv') { const ptvId = element.value; fetchAccessibilitySentences(ptvId); @@ -112,7 +113,7 @@ const UnitView = (props) => { const unitId = params.unit; // If no selected unit data, or selected unit data is old, fetch new data if (!stateUnit || !checkCorrectUnit(stateUnit) || !stateUnit.complete) { - fetchSelectedUnit(unitId, (unit) => { + fetchSelectedUnit(unitId, unit => { setUnit(unit); if (unit?.keywords?.fi?.includes('kuuluvuuskartta')) { fetchHearingMaps(unitId); @@ -392,7 +393,7 @@ const UnitView = (props) => { className={classes.mapButton} aria-label={intl.formatMessage({ id: 'map.button.expand.aria' })} icon={} - onClick={(e) => { + onClick={e => { e.preventDefault(); if (navigator) { navigator.openMap(); @@ -409,7 +410,6 @@ const UnitView = (props) => { ); - const render = () => { const title = unit && unit.name ? getLocaleText(unit.name) : ''; const onLinkOpenClick = () => { @@ -486,6 +486,14 @@ const UnitView = (props) => { itemsPerPage: null, title: intl.formatMessage({ id: 'service.tab' }), }, + { + id: 'accessibilityAreas', + ariaLabel: intl.formatMessage({ id: 'unit.accessibilityAreas' }), + component: , + data: null, + itemsPerPage: null, + title: intl.formatMessage({ id: 'unit.accessibilityAreas' }), + }, ]; return (
diff --git a/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js b/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js new file mode 100644 index 000000000..716a3e001 --- /dev/null +++ b/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js @@ -0,0 +1,67 @@ +import React from 'react'; +import { Typography } from '@mui/material'; +import styled from '@emotion/styled'; +import { useMobilityPlatformContext } from '../../../../context/MobilityPlatformContext'; +import AccessibilityAreasToggle from './components/AccessibilityAreasToggle'; +import { Container } from '../../../../components'; + +const AccessibilityAreasInfo = () => { + const { showAccessibilityAreas, setShowAccessibilityAreas } = useMobilityPlatformContext(); + + const accessibilityAreasToggle = () => { + setShowAccessibilityAreas(current => !current); + }; + + const settingsData = [ + { + type: 'allAccessibilityAreas', + msgId: 'unit.accessibilityAreas.all.label', + checkedValue: showAccessibilityAreas, + onChangeValue: accessibilityAreasToggle, + }, + ]; + + const renderSettings = () => settingsData.map(item => ( + + + + )); + + return ( + + + + Lähestymisalueet + + + + + Lähestymisalueet ovat... + + + + {renderSettings()} + + + ); +}; + +const StyledContent = styled.div(({ theme }) => ({ + paddingLeft: theme.spacing(2), + paddingRight: theme.spacing(2), + paddingBottom: theme.spacing(2), +})); + +const StyledCheckBoxContainer = styled.div(({ theme }) => ({ + width: '100%', + backgroundColor: 'rgb(250, 250, 250)', + paddingTop: theme.spacing(1.5), + paddingBottom: theme.spacing(1.5), +})); + +export default AccessibilityAreasInfo; diff --git a/src/views/UnitView/components/AccessibilityAreasInfo/components/AccessibilityAreasToggle/AccessibilityAreasToggle.js b/src/views/UnitView/components/AccessibilityAreasInfo/components/AccessibilityAreasToggle/AccessibilityAreasToggle.js new file mode 100644 index 000000000..61f876663 --- /dev/null +++ b/src/views/UnitView/components/AccessibilityAreasInfo/components/AccessibilityAreasToggle/AccessibilityAreasToggle.js @@ -0,0 +1,93 @@ +/* eslint-disable react/jsx-props-no-spreading */ +import { Typography } from '@mui/material'; +import PropTypes from 'prop-types'; +import React from 'react'; +import { useIntl } from 'react-intl'; +import styled from '@emotion/styled'; +import { css } from '@emotion/css'; +import { SMSwitch } from '../../../../../../components'; + +/** + * Render 1 or more switches. + * @property {string} msgId + * @property {boolean} checkedValue + * @property {Function} onChangeValue + * @return {JSX Element} + */ + +const AccessibilityAreasToggle = ({ + msgId, checkedValue, onChangeValue, selectionSize, inputProps, ...rest +}) => { + const intl = useIntl(); + + const switchBorderClass = css({ + border: '1px solid #949494', + }); + + return ( + + onChangeValue(e)} + checked={checkedValue} + {...rest} + /> + + + {intl.formatMessage({ + id: msgId, + })} + + + + ); +}; + +const StyledContainer = styled.div(({ theme }) => ({ + paddingLeft: theme.spacing(2), + display: 'inline-flex', + alignItems: 'center', + marginLeft: theme.spacing(2), + verticalAlign: 'middle', +})); + +const StyledLabelContainer = styled.div(({ theme }) => ({ + marginLeft: theme.spacing(2), +})); + +const StyledSMSwitch = styled(SMSwitch)(() => ({ + overflow: 'visible', +})); + +AccessibilityAreasToggle.propTypes = { + msgId: PropTypes.string, + checkedValue: PropTypes.bool, + onChangeValue: PropTypes.func.isRequired, + selectionSize: PropTypes.number, + inputProps: PropTypes.shape({ + tabindex: PropTypes.string, + }), +}; + +AccessibilityAreasToggle.defaultProps = { + msgId: '', + checkedValue: false, + selectionSize: null, + inputProps: {}, +}; + +export default AccessibilityAreasToggle; diff --git a/src/views/UnitView/components/AccessibilityAreasInfo/components/AccessibilityAreasToggle/index.js b/src/views/UnitView/components/AccessibilityAreasInfo/components/AccessibilityAreasToggle/index.js new file mode 100644 index 000000000..982638667 --- /dev/null +++ b/src/views/UnitView/components/AccessibilityAreasInfo/components/AccessibilityAreasToggle/index.js @@ -0,0 +1,3 @@ +import AccessibilityAreasToggle from './AccessibilityAreasToggle'; + +export default AccessibilityAreasToggle; diff --git a/src/views/UnitView/components/AccessibilityAreasInfo/index.js b/src/views/UnitView/components/AccessibilityAreasInfo/index.js new file mode 100644 index 000000000..e18c4e25a --- /dev/null +++ b/src/views/UnitView/components/AccessibilityAreasInfo/index.js @@ -0,0 +1,3 @@ +import AccessibilityAreasInfo from './AccessibilityAreasInfo'; + +export default AccessibilityAreasInfo; From c43291f6575423901a82cd7a29ea3f25c5c64db9 Mon Sep 17 00:00:00 2001 From: juhomakkonen Date: Wed, 10 Apr 2024 12:54:27 +0300 Subject: [PATCH 02/52] Update render tab function & remove color --- src/views/UnitView/UnitView.js | 12 +++++++++++- .../AccessibilityAreasInfo/AccessibilityAreasInfo.js | 1 - 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/views/UnitView/UnitView.js b/src/views/UnitView/UnitView.js index b2e24f9d2..c9133e5c3 100644 --- a/src/views/UnitView/UnitView.js +++ b/src/views/UnitView/UnitView.js @@ -356,6 +356,16 @@ const UnitView = props => { ); }; + const renderAccessibilityAreasTab = () => { + if (!unit || !unit.complete) { + return null; + } + + return ( + + ); + }; + const renderHead = () => { if (!unit || !unit.complete) { return null; @@ -489,7 +499,7 @@ const UnitView = props => { { id: 'accessibilityAreas', ariaLabel: intl.formatMessage({ id: 'unit.accessibilityAreas' }), - component: , + component: renderAccessibilityAreasTab(), data: null, itemsPerPage: null, title: intl.formatMessage({ id: 'unit.accessibilityAreas' }), diff --git a/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js b/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js index 716a3e001..8be43efbd 100644 --- a/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js +++ b/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js @@ -59,7 +59,6 @@ const StyledContent = styled.div(({ theme }) => ({ const StyledCheckBoxContainer = styled.div(({ theme }) => ({ width: '100%', - backgroundColor: 'rgb(250, 250, 250)', paddingTop: theme.spacing(1.5), paddingBottom: theme.spacing(1.5), })); From 692974cc2b25a17d867262758f4bd6490f66c34e Mon Sep 17 00:00:00 2001 From: juhomakkonen Date: Wed, 10 Apr 2024 14:54:42 +0300 Subject: [PATCH 03/52] Filter & render areas by transport type --- .../AccessibilityAreas/AccessibilityAreas.js | 32 +++++++++++++++---- src/context/MobilityPlatformContext.js | 8 ++++- src/i18n/en.js | 2 ++ src/i18n/fi.js | 2 ++ src/i18n/sv.js | 2 ++ src/views/MapView/utils/updateObject.js | 14 ++++++++ .../AccessibilityAreasInfo.js | 25 +++++++++++++-- 7 files changed, 76 insertions(+), 9 deletions(-) create mode 100644 src/views/MapView/utils/updateObject.js diff --git a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js index 89faf3680..7e2586fdd 100644 --- a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js +++ b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js @@ -39,15 +39,27 @@ const AccessibilityAreas = () => { const { data } = useMobilityDataFetch(options, showAccessibilityAreas); const filteredAreas = data.filter(item => item.name === unitName); - const renderData = isDataValid(showAccessibilityAreas, filteredAreas); + const filteredAreasWalking = data.filter(item => item.name === unitName && item.extra.Kulkumuoto.includes('kävely')); + const filteredAreasCycling = data.filter(item => item.name === unitName && item.extra.Kulkumuoto.includes('pyöräily')); + const renderAll = isDataValid(showAccessibilityAreas.all, filteredAreas); + const renderWalking = isDataValid(showAccessibilityAreas.walking, filteredAreasWalking); + const renderCycling = isDataValid(showAccessibilityAreas.cycling, filteredAreasCycling); useEffect(() => { - fitPolygonsToBounds(renderData, filteredAreas, map); - }, [showAccessibilityAreas, filteredAreas]); + fitPolygonsToBounds(renderAll, filteredAreas, map); + }, [showAccessibilityAreas.all, filteredAreas]); - return ( - renderData - ? filteredAreas.map(item => ( + useEffect(() => { + fitPolygonsToBounds(renderWalking, filteredAreasWalking, map); + }, [showAccessibilityAreas.walking, filteredAreasWalking]); + + useEffect(() => { + fitPolygonsToBounds(renderCycling, filteredAreasCycling, map); + }, [showAccessibilityAreas.cycling, filteredAreasCycling]); + + const renderPolygons = (showData, data) => ( + showData + ? data.map(item => ( { )) : null ); + + return ( + <> + {renderPolygons(renderAll, filteredAreas)} + {renderPolygons(renderWalking, filteredAreasWalking)} + {renderPolygons(renderCycling, filteredAreasCycling)} + + ); }; export default AccessibilityAreas; diff --git a/src/context/MobilityPlatformContext.js b/src/context/MobilityPlatformContext.js index 043bb81a6..8a5720f5a 100644 --- a/src/context/MobilityPlatformContext.js +++ b/src/context/MobilityPlatformContext.js @@ -22,6 +22,12 @@ const trafficCountersInitial = { driving: false, }; +const accessibilityAreasInitial = { + all: false, + walking: false, + cycling: false, +}; + const MobilityPlatformContextProvider = ({ children }) => { // Check if mobility platform is open or not const [openMobilityPlatform, setOpenMobilityPlatform] = useState(false); @@ -103,7 +109,7 @@ const MobilityPlatformContextProvider = ({ children }) => { const [showUnderpasses, setShowUnderpasses] = useState(false); const [showPublicBenches, setShowPublicBenches] = useState(false); const [showRoadworks, setShowRoadworks] = useState(false); - const [showAccessibilityAreas, setShowAccessibilityAreas] = useState(false); + const [showAccessibilityAreas, setShowAccessibilityAreas] = useState(accessibilityAreasInitial); const getters = { openMobilityPlatform, diff --git a/src/i18n/en.js b/src/i18n/en.js index d6c093e72..daa0f1958 100644 --- a/src/i18n/en.js +++ b/src/i18n/en.js @@ -527,6 +527,8 @@ const translations = { 'unit.seo.description': 'View service point on the map', 'unit.seo.description.accessibility': 'View accessibility info and service point on the map', 'unit.accessibilityAreas.all.label': 'All accessibility areas', + 'unit.accessibilityAreas.walking.label': 'Accessibility areas (walking)', + 'unit.accessibilityAreas.cycling.label': 'Accessibility areas (cycling)', // Search 'search': 'Search', diff --git a/src/i18n/fi.js b/src/i18n/fi.js index aea7ab3a4..324c6ce82 100644 --- a/src/i18n/fi.js +++ b/src/i18n/fi.js @@ -531,6 +531,8 @@ const translations = { 'unit.seo.description': 'Katso sijainti kartalla', 'unit.seo.description.accessibility': 'Katso esteettömyystiedot ja sijainti kartalla', 'unit.accessibilityAreas.all.label': 'Kaikki lähestymisalueet', + 'unit.accessibilityAreas.walking.label': 'Lähestymisalueet (kävely)', + 'unit.accessibilityAreas.cycling.label': 'Lähestymisalueet (pyöräily)', // Search 'search': 'Hae', diff --git a/src/i18n/sv.js b/src/i18n/sv.js index cc33d50bb..8fa74a7f5 100644 --- a/src/i18n/sv.js +++ b/src/i18n/sv.js @@ -531,6 +531,8 @@ const translations = { 'unit.seo.description': 'Se läget på kartan', 'unit.seo.description.accessibility': 'Se tillgänglighetsuppgifterna och läget på kartan', 'unit.accessibilityAreas.all.label': 'Alla tillgänglighetsområden', + 'unit.accessibilityAreas.walking.label': 'Tillgänglighetsområden (promenad)', + 'unit.accessibilityAreas.cycling.label': 'Tillgänglighetsområden (cykling)', // Search 'search': 'Sök', diff --git a/src/views/MapView/utils/updateObject.js b/src/views/MapView/utils/updateObject.js new file mode 100644 index 000000000..9f87083c9 --- /dev/null +++ b/src/views/MapView/utils/updateObject.js @@ -0,0 +1,14 @@ +/** + * General function to update object values into state + * @param {*string} key + * @param {*Object} state + * @param {*function} setState + */ +const toggleObjectValue = (key, state, setState) => { + setState(prevState => ({ + ...prevState, + [key]: !prevState[key], + })); +}; + +export default toggleObjectValue; diff --git a/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js b/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js index 8be43efbd..5058bceff 100644 --- a/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js +++ b/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js @@ -3,22 +3,43 @@ import { Typography } from '@mui/material'; import styled from '@emotion/styled'; import { useMobilityPlatformContext } from '../../../../context/MobilityPlatformContext'; import AccessibilityAreasToggle from './components/AccessibilityAreasToggle'; +import toggleObjectValue from '../../../MapView/utils/updateObject'; import { Container } from '../../../../components'; const AccessibilityAreasInfo = () => { const { showAccessibilityAreas, setShowAccessibilityAreas } = useMobilityPlatformContext(); const accessibilityAreasToggle = () => { - setShowAccessibilityAreas(current => !current); + toggleObjectValue('all', showAccessibilityAreas, setShowAccessibilityAreas); + }; + + const accessibilityAreasWalkingToggle = () => { + toggleObjectValue('walking', showAccessibilityAreas, setShowAccessibilityAreas); + }; + + const accessibilityAreasCyclingToggle = () => { + toggleObjectValue('cycling', showAccessibilityAreas, setShowAccessibilityAreas); }; const settingsData = [ { type: 'allAccessibilityAreas', msgId: 'unit.accessibilityAreas.all.label', - checkedValue: showAccessibilityAreas, + checkedValue: showAccessibilityAreas.all, onChangeValue: accessibilityAreasToggle, }, + { + type: 'accessibilityAreasWalking', + msgId: 'unit.accessibilityAreas.walking.label', + checkedValue: showAccessibilityAreas.walking, + onChangeValue: accessibilityAreasWalkingToggle, + }, + { + type: 'accessibilityAreasCycling', + msgId: 'unit.accessibilityAreas.cycling.label', + checkedValue: showAccessibilityAreas.cycling, + onChangeValue: accessibilityAreasCyclingToggle, + }, ]; const renderSettings = () => settingsData.map(item => ( From 696c404b236fd51d6da76168f5ef3fb84b4c5456 Mon Sep 17 00:00:00 2001 From: juhomakkonen Date: Wed, 10 Apr 2024 15:36:44 +0300 Subject: [PATCH 04/52] Set polygon color based on transport type --- .../AccessibilityAreas/AccessibilityAreas.js | 23 ++++++++++++++++--- .../MobilityPlatform/utils/utils.js | 8 ++++--- 2 files changed, 25 insertions(+), 6 deletions(-) diff --git a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js index 7e2586fdd..a58eb412e 100644 --- a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js +++ b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js @@ -6,7 +6,8 @@ import { useMobilityPlatformContext } from '../../../context/MobilityPlatformCon import { useAccessibleMap } from '../../../redux/selectors/settings'; import useMobilityDataFetch from '../utils/useMobilityDataFetch'; import { - isDataValid, fitPolygonsToBounds, blueOptionsBase, whiteOptionsBase, + isDataValid, fitPolygonsToBounds, blueOptionsBase, whiteOptionsBase, greenOptionsBase, + blackOptionsBase, } from '../utils/utils'; import PolygonComponent from '../PolygonComponent'; @@ -29,12 +30,28 @@ const AccessibilityAreas = () => { const map = useMap(); const blueOptions = blueOptionsBase({ weight: 5 }); + const greenOptions = greenOptionsBase({ weight: 5 }); + const blackOptions = blackOptionsBase({ weight: 5 }); const whiteOptions = whiteOptionsBase({ fillOpacity: 0.3, weight: 5, dashArray: '12', }); - const pathOptions = useContrast ? whiteOptions : blueOptions; + + const getPathOptions = transportType => { + if (transportType.includes('kävely')) { + return blueOptions; + } + if (transportType.includes('pyöräily')) { + return greenOptions; + } + if (useContrast) { + return whiteOptions; + } + return blackOptions; + }; + + // const pathOptions = useContrast ? whiteOptions : blueOptions; const { data } = useMobilityDataFetch(options, showAccessibilityAreas); @@ -64,7 +81,7 @@ const AccessibilityAreas = () => { key={item.id} item={item} useContrast={useContrast} - pathOptions={pathOptions} + pathOptions={getPathOptions(item.extra.Kulkumuoto)} >

{item.name}

{item.extra.Kulkumuoto}

diff --git a/src/components/MobilityPlatform/utils/utils.js b/src/components/MobilityPlatform/utils/utils.js index b16ab830d..6e0d4d9c9 100644 --- a/src/components/MobilityPlatform/utils/utils.js +++ b/src/components/MobilityPlatform/utils/utils.js @@ -14,7 +14,7 @@ const isDataValid = (visibilityValue, data) => visibilityValue && data && data.l */ const isObjValid = (visibilityValue, obj) => visibilityValue && obj && Object.entries(obj).length > 0; -const createIcon = (icon) => ({ +const createIcon = icon => ({ iconUrl: icon, iconSize: [45, 45], }); @@ -24,6 +24,7 @@ const blackOptionsBase = (attrs = {}) => ({ color: 'rgba(0, 0, 0, 255)', ...attr const blueOptionsBase = (attrs = {}) => ({ color: 'rgba(7, 44, 115, 255)', ...attrs }); const redOptionsBase = (attrs = {}) => ({ color: 'rgba(251, 5, 21, 255)', ...attrs }); const grayOptionsBase = (attrs = {}) => ({ color: 'rgba(64, 64, 64, 255)', ...attrs }); +const greenOptionsBase = (attrs = {}) => ({ color: 'rgba(15, 115, 6, 255)', ...attrs }); /** * Return arrays of coordinates that fit markers inside map bounds @@ -35,7 +36,7 @@ const grayOptionsBase = (attrs = {}) => ({ color: 'rgba(64, 64, 64, 255)', ...at const fitToMapBounds = (renderData, data, map) => { if (renderData) { const bounds = []; - data.forEach((item) => { + data.forEach(item => { bounds.push([item.geometry_coords.lat, item.geometry_coords.lon]); }); map.fitBounds(bounds); @@ -52,7 +53,7 @@ const fitToMapBounds = (renderData, data, map) => { const fitPolygonsToBounds = (renderData, data, map) => { if (renderData) { const bounds = []; - data.forEach((item) => { + data.forEach(item => { bounds.push(item.geometry_coords); }); map.fitBounds(bounds); @@ -100,6 +101,7 @@ export { blueOptionsBase, redOptionsBase, grayOptionsBase, + greenOptionsBase, fitToMapBounds, fitPolygonsToBounds, setRender, From 04f0a433d563c298bf5eabca98e3ce3cc1f2763e Mon Sep 17 00:00:00 2001 From: juhomakkonen Date: Thu, 11 Apr 2024 09:54:58 +0300 Subject: [PATCH 05/52] Add dash array values --- .../MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js index a58eb412e..3e2cecf90 100644 --- a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js +++ b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js @@ -29,8 +29,8 @@ const AccessibilityAreas = () => { const map = useMap(); - const blueOptions = blueOptionsBase({ weight: 5 }); - const greenOptions = greenOptionsBase({ weight: 5 }); + const blueOptions = blueOptionsBase({ weight: 5, dashArray: '12 6 3' }); + const greenOptions = greenOptionsBase({ weight: 5, dashArray: '4 6 8' }); const blackOptions = blackOptionsBase({ weight: 5 }); const whiteOptions = whiteOptionsBase({ fillOpacity: 0.3, From ac253dceb5a38fd6dd0a93acdbdfa6235d7501ff Mon Sep 17 00:00:00 2001 From: juhomakkonen Date: Thu, 11 Apr 2024 11:18:51 +0300 Subject: [PATCH 06/52] Move content of accessibility areas into component --- .../AccessibilityAreas/AccessibilityAreas.js | 5 +- .../AccessibilityAreasContent.js | 70 +++++++++++++++++++ .../AccessibilityAreasContent/index.js | 3 + src/i18n/en.js | 3 + src/i18n/fi.js | 3 + src/i18n/sv.js | 3 + .../AccessibilityAreasInfo.js | 2 +- 7 files changed, 85 insertions(+), 4 deletions(-) create mode 100644 src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/AccessibilityAreasContent.js create mode 100644 src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/index.js diff --git a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js index 3e2cecf90..40ab25b05 100644 --- a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js +++ b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js @@ -10,6 +10,7 @@ import { blackOptionsBase, } from '../utils/utils'; import PolygonComponent from '../PolygonComponent'; +import AccessibilityAreasContent from './components/AccessibilityAreasContent'; /** * Displays school accessibility areas on the map in polygon format. @@ -83,9 +84,7 @@ const AccessibilityAreas = () => { useContrast={useContrast} pathOptions={getPathOptions(item.extra.Kulkumuoto)} > -

{item.name}

-

{item.extra.Kulkumuoto}

-

{item.extra.Minuutit}

+
)) : null diff --git a/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/AccessibilityAreasContent.js b/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/AccessibilityAreasContent.js new file mode 100644 index 000000000..cecdabb75 --- /dev/null +++ b/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/AccessibilityAreasContent.js @@ -0,0 +1,70 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import styled from '@emotion/styled'; +import { Typography } from '@mui/material'; +import { useIntl } from 'react-intl'; + +const AccessibilityAreasContent = ({ item }) => { + const intl = useIntl(); + + const contentInfo = ( + + + + {item.name_fi} + + + + + + {intl.formatMessage({ id: 'unit.accessibilityAreas.content.subtitle' })} + + + + + {intl.formatMessage({ id: 'unit.accessibilityAreas.content.transport' }, { value: item.extra.Kulkumuoto })} + + + {intl.formatMessage({ id: 'unit.accessibilityAreas.content.duration' }, { value: item.extra.Minuutit })} + + + + + ); + + return {contentInfo}; +}; + +const StyledContainer = styled.div(({ theme }) => ({ + margin: theme.spacing(1), +})); + +const StyledHeaderContainer = styled.div(({ theme }) => ({ + width: '85%', + borderBottom: '1px solid #000', + paddingBottom: theme.spacing(0.5), +})); + +const StyledTextContainer = styled.div(({ theme }) => ({ + marginTop: theme.spacing(0.5), +})); + +const StyledMargin = styled.div(({ theme }) => ({ + margin: theme.spacing(0.4), +})); + +AccessibilityAreasContent.propTypes = { + item: PropTypes.shape({ + name_fi: PropTypes.string, + extra: PropTypes.shape({ + Kulkumuoto: PropTypes.string, + Minuutit: PropTypes.number, + }), + }), +}; + +AccessibilityAreasContent.defaultProps = { + item: {}, +}; + +export default AccessibilityAreasContent; diff --git a/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/index.js b/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/index.js new file mode 100644 index 000000000..2d5f73b4b --- /dev/null +++ b/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/index.js @@ -0,0 +1,3 @@ +import AccessibilityAreasContent from './AccessibilityAreasContent'; + +export default AccessibilityAreasContent; diff --git a/src/i18n/en.js b/src/i18n/en.js index daa0f1958..8b97a867b 100644 --- a/src/i18n/en.js +++ b/src/i18n/en.js @@ -529,6 +529,9 @@ const translations = { 'unit.accessibilityAreas.all.label': 'All accessibility areas', 'unit.accessibilityAreas.walking.label': 'Accessibility areas (walking)', 'unit.accessibilityAreas.cycling.label': 'Accessibility areas (cycling)', + 'unit.accessibilityAreas.content.subtitle': 'Accessibility area:', + 'unit.accessibilityAreas.content.transport': 'Mode of transport: {value}', // TODO verify + 'unit.accessibilityAreas.content.duration': 'Estimated duration: {value} minutes', // TODO verify // Search 'search': 'Search', diff --git a/src/i18n/fi.js b/src/i18n/fi.js index 324c6ce82..c4ab84d48 100644 --- a/src/i18n/fi.js +++ b/src/i18n/fi.js @@ -533,6 +533,9 @@ const translations = { 'unit.accessibilityAreas.all.label': 'Kaikki lähestymisalueet', 'unit.accessibilityAreas.walking.label': 'Lähestymisalueet (kävely)', 'unit.accessibilityAreas.cycling.label': 'Lähestymisalueet (pyöräily)', + 'unit.accessibilityAreas.content.subtitle': 'Lähestymisalue:', + 'unit.accessibilityAreas.content.transport': 'Kulkumuto: {value}', // TODO verify + 'unit.accessibilityAreas.content.duration': 'Arvioitu aika: {value} minuuttia', // TODO verify // Search 'search': 'Hae', diff --git a/src/i18n/sv.js b/src/i18n/sv.js index 8fa74a7f5..83a352f05 100644 --- a/src/i18n/sv.js +++ b/src/i18n/sv.js @@ -533,6 +533,9 @@ const translations = { 'unit.accessibilityAreas.all.label': 'Alla tillgänglighetsområden', 'unit.accessibilityAreas.walking.label': 'Tillgänglighetsområden (promenad)', 'unit.accessibilityAreas.cycling.label': 'Tillgänglighetsområden (cykling)', + 'unit.accessibilityAreas.content.subtitle': 'Tillgänglighetsområd:', + 'unit.accessibilityAreas.content.transport': 'Transportsätt: {value}', // TODO verify + 'unit.accessibilityAreas.content.duration': 'beräknad varaktighet: {value} minuter', // TODO verify // Search 'search': 'Sök', diff --git a/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js b/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js index 5058bceff..e7c60eaec 100644 --- a/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js +++ b/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js @@ -56,7 +56,7 @@ const AccessibilityAreasInfo = () => { return ( - + Lähestymisalueet From 4056ad2ca6fb7dca4686ff8434805ddbade6d648 Mon Sep 17 00:00:00 2001 From: juhomakkonen Date: Fri, 12 Apr 2024 12:11:47 +0300 Subject: [PATCH 07/52] Update styles & add new texts --- src/i18n/en.js | 2 ++ src/i18n/fi.js | 2 ++ src/i18n/sv.js | 2 ++ .../AccessibilityAreasInfo.js | 20 ++++++++++++------- .../AccessibilityAreasToggle.js | 4 ++-- 5 files changed, 21 insertions(+), 9 deletions(-) diff --git a/src/i18n/en.js b/src/i18n/en.js index 891b6105b..576a1dd0a 100644 --- a/src/i18n/en.js +++ b/src/i18n/en.js @@ -526,6 +526,8 @@ const translations = { 'unit.outdoorLink': 'Check the condition of an exercise location in the ulkoliikunta.fi service', 'unit.seo.description': 'View service point on the map', 'unit.seo.description.accessibility': 'View accessibility info and service point on the map', + 'unit.accessibilityAreas.title': 'Accessibility areas', + 'unit.accessibilityAreas.description': 'Lähestymisalueet ovat...', // TODO replace placeholder text 'unit.accessibilityAreas.all.label': 'All accessibility areas', 'unit.accessibilityAreas.walking.label': 'Accessibility areas (walking)', 'unit.accessibilityAreas.cycling.label': 'Accessibility areas (cycling)', diff --git a/src/i18n/fi.js b/src/i18n/fi.js index 5ccdbaed7..2bb65d7cf 100644 --- a/src/i18n/fi.js +++ b/src/i18n/fi.js @@ -530,6 +530,8 @@ const translations = { 'unit.outdoorLink': 'Katso liikuntapaikan kunto ulkoliikunta.fi palvelusta', 'unit.seo.description': 'Katso sijainti kartalla', 'unit.seo.description.accessibility': 'Katso esteettömyystiedot ja sijainti kartalla', + 'unit.accessibilityAreas.title': 'Lähestymisalueet', + 'unit.accessibilityAreas.description': 'Lähestymisalueet ovat...', // TODO replace placeholder text 'unit.accessibilityAreas.all.label': 'Kaikki lähestymisalueet', 'unit.accessibilityAreas.walking.label': 'Lähestymisalueet (kävely)', 'unit.accessibilityAreas.cycling.label': 'Lähestymisalueet (pyöräily)', diff --git a/src/i18n/sv.js b/src/i18n/sv.js index 0353c2c4a..3c1d06182 100644 --- a/src/i18n/sv.js +++ b/src/i18n/sv.js @@ -530,6 +530,8 @@ const translations = { 'unit.outdoorLink': 'Kolla skicket på en motionsplats i tjänsten ulkoliikunta.fi', 'unit.seo.description': 'Se läget på kartan', 'unit.seo.description.accessibility': 'Se tillgänglighetsuppgifterna och läget på kartan', + 'unit.accessibilityAreas.title': 'Tillgänglighetsområden', + 'unit.accessibilityAreas.description': 'Lähestymisalueet ovat...', // TODO replace placeholder text 'unit.accessibilityAreas.all.label': 'Alla tillgänglighetsområden', 'unit.accessibilityAreas.walking.label': 'Tillgänglighetsområden (promenad)', 'unit.accessibilityAreas.cycling.label': 'Tillgänglighetsområden (cykling)', diff --git a/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js b/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js index e7c60eaec..55476a546 100644 --- a/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js +++ b/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js @@ -1,6 +1,7 @@ import React from 'react'; import { Typography } from '@mui/material'; import styled from '@emotion/styled'; +import { useIntl } from 'react-intl'; import { useMobilityPlatformContext } from '../../../../context/MobilityPlatformContext'; import AccessibilityAreasToggle from './components/AccessibilityAreasToggle'; import toggleObjectValue from '../../../MapView/utils/updateObject'; @@ -9,6 +10,8 @@ import { Container } from '../../../../components'; const AccessibilityAreasInfo = () => { const { showAccessibilityAreas, setShowAccessibilityAreas } = useMobilityPlatformContext(); + const intl = useIntl(); + const accessibilityAreasToggle = () => { toggleObjectValue('all', showAccessibilityAreas, setShowAccessibilityAreas); }; @@ -57,17 +60,15 @@ const AccessibilityAreasInfo = () => { - Lähestymisalueet + {intl.formatMessage({ id: 'unit.accessibilityAreas.title' })} - + - Lähestymisalueet ovat... + {intl.formatMessage({ id: 'unit.accessibilityAreas.description' })} - - - {renderSettings()} - + + {renderSettings()} ); }; @@ -78,10 +79,15 @@ const StyledContent = styled.div(({ theme }) => ({ paddingBottom: theme.spacing(2), })); +const StyledContainer = styled(Container)(() => ({ + alignItems: 'flex-start', +})); + const StyledCheckBoxContainer = styled.div(({ theme }) => ({ width: '100%', paddingTop: theme.spacing(1.5), paddingBottom: theme.spacing(1.5), + textAlign: 'left', })); export default AccessibilityAreasInfo; diff --git a/src/views/UnitView/components/AccessibilityAreasInfo/components/AccessibilityAreasToggle/AccessibilityAreasToggle.js b/src/views/UnitView/components/AccessibilityAreasInfo/components/AccessibilityAreasToggle/AccessibilityAreasToggle.js index 61f876663..10aa0c9ea 100644 --- a/src/views/UnitView/components/AccessibilityAreasInfo/components/AccessibilityAreasToggle/AccessibilityAreasToggle.js +++ b/src/views/UnitView/components/AccessibilityAreasInfo/components/AccessibilityAreasToggle/AccessibilityAreasToggle.js @@ -58,10 +58,10 @@ const AccessibilityAreasToggle = ({ }; const StyledContainer = styled.div(({ theme }) => ({ - paddingLeft: theme.spacing(2), + paddingLeft: theme.spacing(1), display: 'inline-flex', alignItems: 'center', - marginLeft: theme.spacing(2), + marginLeft: theme.spacing(1), verticalAlign: 'middle', })); From 8f425621c709949448ed89d89c7cb1f053654c7c Mon Sep 17 00:00:00 2001 From: juhomakkonen Date: Fri, 12 Apr 2024 13:00:07 +0300 Subject: [PATCH 08/52] Remove dash array value --- .../MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js index 40ab25b05..1b82f8bc6 100644 --- a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js +++ b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js @@ -31,7 +31,7 @@ const AccessibilityAreas = () => { const map = useMap(); const blueOptions = blueOptionsBase({ weight: 5, dashArray: '12 6 3' }); - const greenOptions = greenOptionsBase({ weight: 5, dashArray: '4 6 8' }); + const greenOptions = greenOptionsBase({ weight: 5 }); const blackOptions = blackOptionsBase({ weight: 5 }); const whiteOptions = whiteOptionsBase({ fillOpacity: 0.3, From de55ab41a9fb262caa444959f69922b984fa3bcb Mon Sep 17 00:00:00 2001 From: juhomakkonen Date: Fri, 12 Apr 2024 14:23:18 +0300 Subject: [PATCH 09/52] Render markers as well when all areas will be shown --- .../AccessibilityAreas/AccessibilityAreas.js | 68 ++++++++++++++----- 1 file changed, 51 insertions(+), 17 deletions(-) diff --git a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js index 1b82f8bc6..7cef00625 100644 --- a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js +++ b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js @@ -2,11 +2,20 @@ import React, { useEffect } from 'react'; import { useSelector } from 'react-redux'; import { useMap } from 'react-leaflet'; +import walkingIcon from 'servicemap-ui-turku/assets/icons/icons-icon_walking_area.svg'; +import walkingIconBw from 'servicemap-ui-turku/assets/icons/contrast/icons-icon_walking_area-bw.svg'; +import cyclingIcon from 'servicemap-ui-turku/assets/icons/icons-icon_cycling_area.svg'; +import cyclingIconBw from 'servicemap-ui-turku/assets/icons/contrast/icons-icon_cycling_area-bw.svg'; import { useMobilityPlatformContext } from '../../../context/MobilityPlatformContext'; import { useAccessibleMap } from '../../../redux/selectors/settings'; import useMobilityDataFetch from '../utils/useMobilityDataFetch'; import { - isDataValid, fitPolygonsToBounds, blueOptionsBase, whiteOptionsBase, greenOptionsBase, + isDataValid, + createIcon, + fitPolygonsToBounds, + blueOptionsBase, + whiteOptionsBase, + greenOptionsBase, blackOptionsBase, } from '../utils/utils'; import PolygonComponent from '../PolygonComponent'; @@ -29,6 +38,8 @@ const AccessibilityAreas = () => { const useContrast = useSelector(useAccessibleMap); const map = useMap(); + const { Marker, Popup } = global.rL; + const { icon } = global.L; const blueOptions = blueOptionsBase({ weight: 5, dashArray: '12 6 3' }); const greenOptions = greenOptionsBase({ weight: 5 }); @@ -52,13 +63,23 @@ const AccessibilityAreas = () => { return blackOptions; }; - // const pathOptions = useContrast ? whiteOptions : blueOptions; + const walkingAreaIcon = icon(createIcon(useContrast ? walkingIconBw : walkingIcon)); + const cyclingAreaIcon = icon(createIcon(useContrast ? cyclingIconBw : cyclingIcon)); + + const getCorrectIcon = transportType => { + if (transportType.includes('kävely')) { + return walkingAreaIcon; + } + return cyclingAreaIcon; + }; const { data } = useMobilityDataFetch(options, showAccessibilityAreas); const filteredAreas = data.filter(item => item.name === unitName); const filteredAreasWalking = data.filter(item => item.name === unitName && item.extra.Kulkumuoto.includes('kävely')); - const filteredAreasCycling = data.filter(item => item.name === unitName && item.extra.Kulkumuoto.includes('pyöräily')); + const filteredAreasCycling = data.filter( + item => item.name === unitName && item.extra.Kulkumuoto.includes('pyöräily'), + ); const renderAll = isDataValid(showAccessibilityAreas.all, filteredAreas); const renderWalking = isDataValid(showAccessibilityAreas.walking, filteredAreasWalking); const renderCycling = isDataValid(showAccessibilityAreas.cycling, filteredAreasCycling); @@ -75,23 +96,36 @@ const AccessibilityAreas = () => { fitPolygonsToBounds(renderCycling, filteredAreasCycling, map); }, [showAccessibilityAreas.cycling, filteredAreasCycling]); - const renderPolygons = (showData, data) => ( - showData - ? data.map(item => ( - - - - )) - : null - ); + const getSingleCoordinates = data => data[0][0]; + + const renderMarkers = (showData, data) => (showData + ? data.map(item => ( +
+ + + + + +
+ )) + : null); + + const renderPolygons = (showData, data) => (showData + ? data.map(item => ( + + + + )) + : null); return ( <> + {renderMarkers(renderAll, filteredAreas)} {renderPolygons(renderAll, filteredAreas)} {renderPolygons(renderWalking, filteredAreasWalking)} {renderPolygons(renderCycling, filteredAreasCycling)} From 6e7afeccd0e431bed867df56660c3013799e2ef2 Mon Sep 17 00:00:00 2001 From: juhomakkonen Date: Fri, 12 Apr 2024 15:11:07 +0300 Subject: [PATCH 10/52] Render default tabs if isExternalTheme is false --- src/views/UnitView/UnitView.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/src/views/UnitView/UnitView.js b/src/views/UnitView/UnitView.js index c9133e5c3..98682d03f 100644 --- a/src/views/UnitView/UnitView.js +++ b/src/views/UnitView/UnitView.js @@ -78,6 +78,10 @@ const UnitView = props => { const getLocaleText = useLocaleText(); const dispatch = useDispatch(); + // If external theme (by Turku) is true, then can be used to select which content to render + const externalTheme = config.themePKG; + const isExternalTheme = !externalTheme || externalTheme === 'undefined' ? null : externalTheme; + const map = useSelector(state => state.mapRef); const getImageAlt = () => `${intl.formatMessage({ id: 'unit.picture' })}${getLocaleText(unit.name)}`; @@ -420,6 +424,18 @@ const UnitView = props => {
); + /** + * Filter out the accessibility areas object from tabs if isExternalTheme is false. + * @param {*} tabsData + * @returns array + */ + const getTabsData = tabsData => { + if (isExternalTheme) { + return tabsData; + } + return tabsData.filter(item => item.id !== 'accessibilityAreas'); + }; + const render = () => { const title = unit && unit.name ? getLocaleText(unit.name) : ''; const onLinkOpenClick = () => { @@ -524,7 +540,7 @@ const UnitView = props => { renderHead() } {TopArea} From 4cf13577d95549ae0364f37f143b15ec55ad3ca1 Mon Sep 17 00:00:00 2001 From: juhomakkonen Date: Fri, 12 Apr 2024 15:22:43 +0300 Subject: [PATCH 11/52] Align title text to left --- .../AccessibilityAreasInfo/AccessibilityAreasInfo.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js b/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js index 55476a546..db8fe9e1b 100644 --- a/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js +++ b/src/views/UnitView/components/AccessibilityAreasInfo/AccessibilityAreasInfo.js @@ -58,11 +58,11 @@ const AccessibilityAreasInfo = () => { return ( - + {intl.formatMessage({ id: 'unit.accessibilityAreas.title' })} - + {intl.formatMessage({ id: 'unit.accessibilityAreas.description' })} From d0df43308bff748022c6a4fb92c1f9248e337e9f Mon Sep 17 00:00:00 2001 From: juhomakkonen Date: Thu, 18 Apr 2024 15:49:49 +0300 Subject: [PATCH 12/52] Update CodeQL to use actions v3 --- .github/workflows/{codeql-analysis.yml => codeql.yml} | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) rename .github/workflows/{codeql-analysis.yml => codeql.yml} (91%) diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql.yml similarity index 91% rename from .github/workflows/codeql-analysis.yml rename to .github/workflows/codeql.yml index 0ac640741..f7a7e5f91 100644 --- a/.github/workflows/codeql-analysis.yml +++ b/.github/workflows/codeql.yml @@ -18,7 +18,7 @@ on: # The branches below must be a subset of the branches above branches: [ develop ] schedule: - - cron: '29 10 * * 6' + - cron: '39 16 * * 1' jobs: analyze: @@ -38,11 +38,11 @@ jobs: steps: - name: Checkout repository - uses: actions/checkout@v2 + uses: actions/checkout@v3 # Initializes the CodeQL tools for scanning. - name: Initialize CodeQL - uses: github/codeql-action/init@v1 + uses: github/codeql-action/init@v3 with: languages: ${{ matrix.language }} # If you wish to specify custom queries, you can do so here or in a config file. @@ -53,7 +53,7 @@ jobs: # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). # If this step fails, then you should remove it and run the build manually (see below) - name: Autobuild - uses: github/codeql-action/autobuild@v1 + uses: github/codeql-action/autobuild@v3 # ℹ️ Command-line programs to run using the OS shell. # 📚 https://git.io/JvXDl @@ -67,4 +67,4 @@ jobs: # make release - name: Perform CodeQL Analysis - uses: github/codeql-action/analyze@v1 + uses: github/codeql-action/analyze@v3 From fbe2a272ab98a948d53dfbe76c4d0f6ca4482b89 Mon Sep 17 00:00:00 2001 From: juhomakkonen Date: Thu, 18 Apr 2024 16:18:34 +0300 Subject: [PATCH 13/52] Rename file --- .github/workflows/{codeql.yml => codeql-analysis.yml} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename .github/workflows/{codeql.yml => codeql-analysis.yml} (100%) diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql-analysis.yml similarity index 100% rename from .github/workflows/codeql.yml rename to .github/workflows/codeql-analysis.yml From 13cde4aebae2ee0987c53e7f3c9fbe3a2d36429b Mon Sep 17 00:00:00 2001 From: juhomakkonen Date: Fri, 19 Apr 2024 09:55:28 +0300 Subject: [PATCH 14/52] Update code to match data & use updated icons --- .../AccessibilityAreas/AccessibilityAreas.js | 18 +++++++++--------- .../AccessibilityAreasContent.js | 8 ++++---- src/components/MobilityPlatform/utils/utils.js | 4 ++-- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js index 7cef00625..503b77997 100644 --- a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js +++ b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js @@ -51,10 +51,10 @@ const AccessibilityAreas = () => { }); const getPathOptions = transportType => { - if (transportType.includes('kävely')) { + if (transportType?.includes('kävely')) { return blueOptions; } - if (transportType.includes('pyöräily')) { + if (transportType?.includes('pyöräily')) { return greenOptions; } if (useContrast) { @@ -63,11 +63,11 @@ const AccessibilityAreas = () => { return blackOptions; }; - const walkingAreaIcon = icon(createIcon(useContrast ? walkingIconBw : walkingIcon)); - const cyclingAreaIcon = icon(createIcon(useContrast ? cyclingIconBw : cyclingIcon)); + const walkingAreaIcon = icon(createIcon(useContrast ? walkingIconBw : walkingIcon, true)); + const cyclingAreaIcon = icon(createIcon(useContrast ? cyclingIconBw : cyclingIcon, true)); const getCorrectIcon = transportType => { - if (transportType.includes('kävely')) { + if (transportType?.includes('kävely')) { return walkingAreaIcon; } return cyclingAreaIcon; @@ -76,9 +76,9 @@ const AccessibilityAreas = () => { const { data } = useMobilityDataFetch(options, showAccessibilityAreas); const filteredAreas = data.filter(item => item.name === unitName); - const filteredAreasWalking = data.filter(item => item.name === unitName && item.extra.Kulkumuoto.includes('kävely')); + const filteredAreasWalking = data.filter(item => item.name === unitName && item?.extra?.kulkumuoto?.includes('kävely')); const filteredAreasCycling = data.filter( - item => item.name === unitName && item.extra.Kulkumuoto.includes('pyöräily'), + item => item.name === unitName && item?.extra?.kulkumuoto?.includes('pyöräily'), ); const renderAll = isDataValid(showAccessibilityAreas.all, filteredAreas); const renderWalking = isDataValid(showAccessibilityAreas.walking, filteredAreasWalking); @@ -101,7 +101,7 @@ const AccessibilityAreas = () => { const renderMarkers = (showData, data) => (showData ? data.map(item => (
- + @@ -116,7 +116,7 @@ const AccessibilityAreas = () => { key={item.id} item={item} useContrast={useContrast} - pathOptions={getPathOptions(item.extra.Kulkumuoto)} + pathOptions={getPathOptions(item.extra.kulkumuoto)} > diff --git a/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/AccessibilityAreasContent.js b/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/AccessibilityAreasContent.js index cecdabb75..3b4eb7b4a 100644 --- a/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/AccessibilityAreasContent.js +++ b/src/components/MobilityPlatform/AccessibilityAreas/components/AccessibilityAreasContent/AccessibilityAreasContent.js @@ -22,10 +22,10 @@ const AccessibilityAreasContent = ({ item }) => { - {intl.formatMessage({ id: 'unit.accessibilityAreas.content.transport' }, { value: item.extra.Kulkumuoto })} + {intl.formatMessage({ id: 'unit.accessibilityAreas.content.transport' }, { value: item?.extra?.kulkumuoto })} - {intl.formatMessage({ id: 'unit.accessibilityAreas.content.duration' }, { value: item.extra.Minuutit })} + {intl.formatMessage({ id: 'unit.accessibilityAreas.content.duration' }, { value: item?.extra?.minuutit })} @@ -57,8 +57,8 @@ AccessibilityAreasContent.propTypes = { item: PropTypes.shape({ name_fi: PropTypes.string, extra: PropTypes.shape({ - Kulkumuoto: PropTypes.string, - Minuutit: PropTypes.number, + kulkumuoto: PropTypes.string, + minuutit: PropTypes.number, }), }), }; diff --git a/src/components/MobilityPlatform/utils/utils.js b/src/components/MobilityPlatform/utils/utils.js index 6e0d4d9c9..1e26a51d7 100644 --- a/src/components/MobilityPlatform/utils/utils.js +++ b/src/components/MobilityPlatform/utils/utils.js @@ -14,9 +14,9 @@ const isDataValid = (visibilityValue, data) => visibilityValue && data && data.l */ const isObjValid = (visibilityValue, obj) => visibilityValue && obj && Object.entries(obj).length > 0; -const createIcon = icon => ({ +const createIcon = (icon, isSmall) => ({ iconUrl: icon, - iconSize: [45, 45], + iconSize: isSmall ? [35, 35] : [45, 45], }); const whiteOptionsBase = (attrs = {}) => ({ color: 'rgba(255, 255, 255, 255)', ...attrs }); From caecc17f6ffae93785ee2310b7191e706da1cd5b Mon Sep 17 00:00:00 2001 From: juhomakkonen Date: Fri, 19 Apr 2024 10:16:26 +0300 Subject: [PATCH 15/52] Use id to filter areas --- .../AccessibilityAreas/AccessibilityAreas.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js index 503b77997..c375be836 100644 --- a/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js +++ b/src/components/MobilityPlatform/AccessibilityAreas/AccessibilityAreas.js @@ -34,7 +34,7 @@ const AccessibilityAreas = () => { const { showAccessibilityAreas } = useMobilityPlatformContext(); const selectedUnit = useSelector(state => state.selectedUnit?.unit?.data); - const unitName = selectedUnit?.name?.fi; + const unitId = selectedUnit?.id; const useContrast = useSelector(useAccessibleMap); const map = useMap(); @@ -75,10 +75,10 @@ const AccessibilityAreas = () => { const { data } = useMobilityDataFetch(options, showAccessibilityAreas); - const filteredAreas = data.filter(item => item.name === unitName); - const filteredAreasWalking = data.filter(item => item.name === unitName && item?.extra?.kulkumuoto?.includes('kävely')); + const filteredAreas = data.filter(item => item.extra?.kohde_ID === unitId); + const filteredAreasWalking = data.filter(item => item.extra?.kohde_ID === unitId && item?.extra?.kulkumuoto?.includes('kävely')); const filteredAreasCycling = data.filter( - item => item.name === unitName && item?.extra?.kulkumuoto?.includes('pyöräily'), + item => item.extra?.kohde_ID === unitId && item?.extra?.kulkumuoto?.includes('pyöräily'), ); const renderAll = isDataValid(showAccessibilityAreas.all, filteredAreas); const renderWalking = isDataValid(showAccessibilityAreas.walking, filteredAreasWalking); From b00bd78524638b937190018eb328c4543dd5dd62 Mon Sep 17 00:00:00 2001 From: juhomakkonen Date: Fri, 19 Apr 2024 10:53:55 +0300 Subject: [PATCH 16/52] Update function that filters tabs' data --- src/views/UnitView/UnitView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/UnitView/UnitView.js b/src/views/UnitView/UnitView.js index 98682d03f..e0deb75ba 100644 --- a/src/views/UnitView/UnitView.js +++ b/src/views/UnitView/UnitView.js @@ -430,7 +430,7 @@ const UnitView = props => { * @returns array */ const getTabsData = tabsData => { - if (isExternalTheme) { + if (isExternalTheme && unit.service_names_fi.includes('Perusopetus')) { return tabsData; } return tabsData.filter(item => item.id !== 'accessibilityAreas'); From f888c292c58c27a836181d16f8ce461e5f3da87d Mon Sep 17 00:00:00 2001 From: juhomakkonen Date: Tue, 23 Apr 2024 10:24:31 +0300 Subject: [PATCH 17/52] Update content of barbecue places & add tests --- .../BarbecuePlacesContent.js | 16 ++++++- .../__tests__/BarbecuePlacesContent.test.js | 42 +++++++++++++++++++ .../BarbecuePlacesContent.test.js.snap | 37 ++++++++++++++++ src/i18n/en.js | 2 + src/i18n/fi.js | 2 + src/i18n/sv.js | 2 + 6 files changed, 99 insertions(+), 2 deletions(-) create mode 100644 src/components/MobilityPlatform/BarbecuePlaces/components/BarbecuePlacesContent/__tests__/BarbecuePlacesContent.test.js create mode 100644 src/components/MobilityPlatform/BarbecuePlaces/components/BarbecuePlacesContent/__tests__/__snapshots__/BarbecuePlacesContent.test.js.snap diff --git a/src/components/MobilityPlatform/BarbecuePlaces/components/BarbecuePlacesContent/BarbecuePlacesContent.js b/src/components/MobilityPlatform/BarbecuePlaces/components/BarbecuePlacesContent/BarbecuePlacesContent.js index e71f1d8d6..61d5284be 100644 --- a/src/components/MobilityPlatform/BarbecuePlaces/components/BarbecuePlacesContent/BarbecuePlacesContent.js +++ b/src/components/MobilityPlatform/BarbecuePlaces/components/BarbecuePlacesContent/BarbecuePlacesContent.js @@ -6,16 +6,28 @@ import styled from '@emotion/styled'; const BarbecuePlacesContent = ({ item }) => { const intl = useIntl(); + return ( - + {intl.formatMessage({ id: 'mobilityPlatform.content.barbecuePlace.title' })} - {`${item.extra.malli.trim()} (${item.extra.valmistaja})`} + {intl.formatMessage( + { id: 'mobilityPlatform.content.barbecuePlace.manufacturer' }, + { value: item.extra.valmistaja }, + )} + + + + + {intl.formatMessage( + { id: 'mobilityPlatform.content.barbecuePlace.model' }, + { value: item.extra.malli.trim() }, + )} diff --git a/src/components/MobilityPlatform/BarbecuePlaces/components/BarbecuePlacesContent/__tests__/BarbecuePlacesContent.test.js b/src/components/MobilityPlatform/BarbecuePlaces/components/BarbecuePlacesContent/__tests__/BarbecuePlacesContent.test.js new file mode 100644 index 000000000..2df378443 --- /dev/null +++ b/src/components/MobilityPlatform/BarbecuePlaces/components/BarbecuePlacesContent/__tests__/BarbecuePlacesContent.test.js @@ -0,0 +1,42 @@ +// Link.react.test.js +import React from 'react'; +import BarbecuePlacesContent from '../BarbecuePlacesContent'; +import { getRenderWithProviders } from '../../../../../../../jestUtils'; +import finnishTranslations from '../../../../../../i18n/fi'; + +const mockProps = { + item: { + extra: { + valmistaja: 'Testi', + malli: 'Testigrilli', + }, + }, +}; + +const renderWithProviders = getRenderWithProviders({}); + +describe('', () => { + it('should work', () => { + const { container } = renderWithProviders(); + expect(container).toMatchSnapshot(); + }); + + it('does show text correctly', () => { + const { container } = renderWithProviders(); + + const p = container.querySelectorAll('p'); + expect(p[0].textContent).toContain(`${finnishTranslations['mobilityPlatform.content.barbecuePlace.title']}`); + expect(p[1].textContent).toContain( + `${finnishTranslations['mobilityPlatform.content.barbecuePlace.manufacturer'].replace( + '{value}', + `${mockProps.item.extra.valmistaja}`, + )}`, + ); + expect(p[2].textContent).toContain( + `${finnishTranslations['mobilityPlatform.content.barbecuePlace.model'].replace( + '{value}', + `${mockProps.item.extra.malli}`, + )}`, + ); + }); +}); diff --git a/src/components/MobilityPlatform/BarbecuePlaces/components/BarbecuePlacesContent/__tests__/__snapshots__/BarbecuePlacesContent.test.js.snap b/src/components/MobilityPlatform/BarbecuePlaces/components/BarbecuePlacesContent/__tests__/__snapshots__/BarbecuePlacesContent.test.js.snap new file mode 100644 index 000000000..1285a19e4 --- /dev/null +++ b/src/components/MobilityPlatform/BarbecuePlaces/components/BarbecuePlacesContent/__tests__/__snapshots__/BarbecuePlacesContent.test.js.snap @@ -0,0 +1,37 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` should work 1`] = ` +
+
+
+

+ Grillaus- ja tulentekopaikka +

+
+
+

+ Valmistaja: Testi +

+
+
+

+ Malli: Testigrilli +

+
+
+
+`; diff --git a/src/i18n/en.js b/src/i18n/en.js index 3efcd5543..4cc83ec92 100644 --- a/src/i18n/en.js +++ b/src/i18n/en.js @@ -910,6 +910,8 @@ const translations = { 'mobilityPlatform.content.arrivingTrains.empty': 'No incoming trains', 'mobilityPlatform.parkAndRide.content.subtitle': 'Park and ride stop for bicycles', 'mobilityPlatform.content.barbecuePlace.title': 'Site for barbequing or making fire', + 'mobilityPlatform.content.barbecuePlace.manufacturer': 'Manufacturer: {value}', + 'mobilityPlatform.content.barbecuePlace.model': 'Model: {value}', // Info text 'mobilityPlatform.info.description.title': 'Route description', diff --git a/src/i18n/fi.js b/src/i18n/fi.js index c80337b96..6a17d4a0a 100644 --- a/src/i18n/fi.js +++ b/src/i18n/fi.js @@ -905,6 +905,8 @@ const translations = { 'mobilityPlatform.content.arrivingTrains.empty': 'Ei saapuvia junia', 'mobilityPlatform.parkAndRide.content.subtitle': 'Liityntäpysäkki pyörille', 'mobilityPlatform.content.barbecuePlace.title': 'Grillaus- ja tulentekopaikka', + 'mobilityPlatform.content.barbecuePlace.manufacturer': 'Valmistaja: {value}', + 'mobilityPlatform.content.barbecuePlace.model': 'Malli: {value}', // Info text 'mobilityPlatform.info.description.title': 'Tietoja reitistä', diff --git a/src/i18n/sv.js b/src/i18n/sv.js index 44f034757..c9ea47b12 100644 --- a/src/i18n/sv.js +++ b/src/i18n/sv.js @@ -914,6 +914,8 @@ const translations = { 'mobilityPlatform.content.arrivingTrains.empty': 'Inga inkommande tåg', 'mobilityPlatform.parkAndRide.content.subtitle': 'Infartspark for cyklarna', 'mobilityPlatform.content.barbecuePlace.title': 'Grill- och eldningplats', + 'mobilityPlatform.content.barbecuePlace.manufacturer': 'Tillverkare: {value}', + 'mobilityPlatform.content.barbecuePlace.model': 'Modell: {value}', // Info text 'mobilityPlatform.info.description.title': 'Beskrivning av rutten', From 072c801868c6813d6d948906061b0978d61f2c09 Mon Sep 17 00:00:00 2001 From: juhomakkonen <69158965+juhomakkonen@users.noreply.github.com> Date: Wed, 24 Apr 2024 14:03:29 +0300 Subject: [PATCH 18/52] Update/remove withstyles (#238) * Remove withStyles & use styled components * Remove withStyles from other components * Update styles of marina's content * Update styles of city & cargo bike stations * Update styles of loading places * Update styles of outdoor gym devices view * Update styles for more components * Update styles of parking view components & update margins & snapshots * Remove withStyles from more components * Update styles of InfoTextBox * Update styles of culture route units * Update styles of TextContent * Update more components & tests * Update styles & props of marker & polygon components * Update components used in MobilitySettingsView * Update component of culture route unit descriptions * Update additional components * Update styles & prop types. Add optional chaining * Update styles of trail list and info view * Update list components * Remove withStyles from route length component * Update styles of pagination button * Update styles for mobility map settings -view * Update styles of ListItem * Remove withStyles from eco-counters * Remove withStyles from remaining traffic counters * Remove redundant styles files & update remaining component * Update structure of components --- package-lock.json | 13 ++ package.json | 1 + .../CounterMarkers/CounterMarkers.js | 32 ++- .../EcoCounter/CounterMarkers/index.js | 4 +- .../EcoCounter/CounterMarkers/styles.js | 17 -- src/components/EcoCounter/InputDate/styles.js | 14 -- .../EcoCounterContent/EcoCounterContent.js | 99 +++++---- .../EcoCounterContent/index.js | 5 +- .../LamCounterContent/LamCounterContent.js | 92 +++++---- .../LamCounterContent/index.js | 5 +- .../EcoCounter/TrafficCounters/styles.js | 122 ----------- src/components/EcoCounter/styled/styled.js | 88 ++++++++ .../__snapshots__/AddressItem.test.js.snap | 11 +- .../__snapshots__/ServiceItem.test.js.snap | 9 +- .../SimpleListItem/SimpleListItem.js | 106 +++++++--- .../__snapshots__/SimpleListItem.test.js.snap | 4 +- .../ListItems/SimpleListItem/index.js | 4 +- .../ListItems/SimpleListItem/styles.js | 40 ---- .../BarbecuePlacesContent.js | 54 ++--- .../BarbecuePlacesContent.test.js.snap | 32 +-- .../BicycleStandContent.js | 66 +++--- .../BicycleStandContent.test.js.snap | 18 +- .../components/BicycleStandContent/index.js | 5 +- .../components/BicycleStandContent/styles.js | 16 -- .../MobilityPlatform/BicycleStands/index.js | 5 +- .../MobilityPlatform/BicycleStands/styles.js | 7 - .../BikeServiceStationContent.js | 33 +-- .../BikeServiceStationContent.test.js.snap | 12 +- .../BikeServiceStationContent/index.js | 4 +- .../BikeServiceStationContent/styles.js | 20 -- .../MarinasContent/MarinasContent.js | 89 ++++++--- .../__snapshots__/MarinasContent.test.js.snap | 112 +++++++---- .../components/MarinasContent/index.js | 5 +- .../components/MarinasContent/styles.js | 21 -- .../ChargerStationContent.js | 83 +++++--- .../ChargerStationContent.test.js.snap | 28 +-- .../components/ChargerStationContent/index.js | 5 +- .../ChargerStationContent/styles.js | 20 -- .../CityBikesContent/CityBikesContent.js | 51 ++--- .../CityBikesContent.test.js.snap | 24 +-- .../components/CityBikesContent/index.js | 5 +- .../components/CityBikesContent/styles.js | 21 -- .../CultureRouteUnits/CultureRouteUnits.js | 100 ++++++--- .../components/CultureRouteUnits/index.js | 5 +- .../components/CultureRouteUnits/styles.js | 28 --- .../GasFillingStationContent.js | 41 ++-- .../GasFillingStationContent.test.js.snap | 14 +- .../GasFillingStationContent/index.js | 5 +- .../GasFillingStationContent/styles.js | 20 -- .../InfoTextBox/InfoTextBox.js | 63 +++--- .../__snapshots__/InfoTextBox.test.js.snap | 2 +- .../MobilityPlatform/InfoTextBox/index.js | 5 +- .../MobilityPlatform/InfoTextBox/styles.js | 17 -- .../LoadingPlacesContent.js | 45 +++-- .../LoadingPlacesContent.test.js.snap | 84 ++++---- .../components/LoadingPlacesContent/index.js | 4 +- .../components/LoadingPlacesContent/styles.js | 23 --- .../MarkerComponent/MarkerComponent.js | 21 +- .../MobilityPlatform/MarkerComponent/index.js | 4 +- .../MarkerComponent/styles.js | 17 -- .../OutdoorGymDevicesContent.js | 26 ++- .../OutdoorGymDevicesContent.test.js.snap | 14 +- .../OutdoorGymDevicesContent/index.js | 4 +- .../OutdoorGymDevicesContent/styles.js | 23 --- .../ParkAndRideBikesContent.js | 28 +-- .../ParkAndRideBikesContent.test.js.snap | 10 +- .../DisabledParkingContent.js | 64 +++--- .../DisabledParkingContent.test.js.snap | 16 +- .../DisabledParkingContent/index.js | 5 +- .../DisabledParkingContent/styles.js | 16 -- .../PublicParkingContent.js | 40 ++-- .../PublicParkingContent.test.js.snap | 22 +- .../components/PublicParkingContent/index.js | 5 +- .../components/PublicParkingContent/styles.js | 16 -- .../RentalCarParkingContent.js | 39 ++-- .../RentalCarParkingContent.test.js.snap | 20 +- .../RentalCarParkingContent/index.js | 5 +- .../RentalCarParkingContent/styles.js | 16 -- .../ParkingChargeZoneContent.js | 81 ++++++-- .../ParkingChargeZoneContent.test.js | 25 ++- .../ParkingChargeZoneContent.test.js.snap | 45 ++--- .../ParkingChargeZoneContent/index.js | 5 +- .../ParkingChargeZoneContent/styles.js | 11 - .../ParkingMachinesContent.js | 36 ++-- .../ParkingMachinesContent.test.js.snap | 24 +-- .../ParkingMachinesContent/index.js | 5 +- .../ParkingMachinesContent/styles.js | 16 -- .../ParkingSpacesContent.js | 76 +++---- .../ParkingSpacesContent.test.js.snap | 10 +- .../components/ParkingSpacesContent/index.js | 5 +- .../components/ParkingSpacesContent/styles.js | 14 -- .../PolygonComponent/PolygonComponent.js | 26 ++- .../PolygonComponent/index.js | 4 +- .../PolygonComponent/styles.js | 17 -- .../PublicToiletsContent.js | 36 ++-- .../PublicToiletsContent.test.js.snap | 34 ++-- .../components/PublicToiletsContent/index.js | 5 +- .../components/PublicToiletsContent/styles.js | 20 -- .../RailwayStationsContent.js | 7 +- .../RailwayStationsContent/index.js | 3 +- .../MobilityPlatform/RentalCars/RentalCars.js | 50 ++--- .../RentalCarsContent/RentalCarsContent.js | 63 ++++-- .../RentalCarsContent.test.js.snap | 16 +- .../components/RentalCarsContent/index.js | 5 +- .../components/RentalCarsContent/styles.js | 21 -- .../MobilityPlatform/RentalCars/index.js | 5 +- .../MobilityPlatform/RentalCars/styles.js | 5 - .../components/ScooterInfo/ScooterInfo.js | 66 +++--- .../__snapshots__/ScooterInfo.test.js.snap | 38 ++-- .../components/ScooterInfo/index.js | 5 +- .../components/ScooterInfo/styles.js | 26 --- .../SnowPlowsContent/SnowPlowsContent.js | 62 +++--- .../components/SnowPlowsContent/index.js | 5 +- .../components/SnowPlowsContent/styles.js | 13 -- .../SpeedLimitZonesContent.js | 51 +++-- .../SpeedLimitZonesContent.test.js.snap | 20 +- .../SpeedLimitZonesContent/index.js | 5 +- .../SpeedLimitZonesContent/styles.js | 11 - .../TextComponent/TextComponent.js | 2 +- .../__snapshots__/TextComponent.test.js.snap | 2 +- .../TextContent/TextContent.js | 34 ++-- .../__snapshots__/TextContent.test.js.snap | 30 ++- .../MobilityPlatform/TextContent/index.js | 5 +- .../MobilityPlatform/TextContent/styles.js | 20 -- .../MobilityPlatform/styled/styled.js | 51 ++++- src/i18n/en.js | 12 +- src/i18n/fi.js | 12 +- src/i18n/sv.js | 12 +- .../MobilitySettingsView.js | 189 +++++++++--------- .../components/ButtonMain/ButtonMain.js | 57 ------ .../ButtonMain/__tests__/ButtonMain.test.js | 44 ---- .../__snapshots__/ButtonMain.test.js.snap | 28 --- .../components/ButtonMain/index.js | 6 - .../components/ButtonMain/styles.js | 42 ---- .../components/CityBikeInfo/CityBikeInfo.js | 69 +++---- .../__tests__/CityBikeInfo.test.js | 11 - .../__snapshots__/CityBikeInfo.test.js.snap | 67 ++++--- .../components/CityBikeInfo/index.js | 5 +- .../components/CityBikeInfo/styles.js | 12 -- .../components/Description/Description.js | 58 +++--- .../Description/__tests__/Description.test.js | 12 +- .../__snapshots__/Description.test.js.snap | 17 +- .../components/Description/index.js | 5 +- .../components/Description/styles.js | 15 -- .../EmptyRouteList/EmptyRouteList.js | 28 +-- .../__tests__/EmptyRouteList.test.js | 7 - .../__snapshots__/EmptyRouteList.test.js.snap | 3 +- .../components/EmptyRouteList/index.js | 5 +- .../components/EmptyRouteList/styles.js | 8 - .../components/ExtendedInfo/ExtendedInfo.js | 62 ++++-- .../__tests__/ExtendedInfo.test.js | 12 -- .../__snapshots__/ExtendedInfo.test.js.snap | 82 +++++--- .../components/ExtendedInfo/index.js | 5 +- .../components/ExtendedInfo/styles.js | 14 -- .../components/FormLabel/FormLabel.js | 73 ------- .../FormLabel/__tests__/FormLabel.test.js | 33 --- .../__snapshots__/FormLabel.test.js.snap | 36 ---- .../components/FormLabel/index.js | 6 - .../components/FormLabel/styles.js | 15 -- .../MobilityToggleButton.js | 100 +++++---- .../components/MobilityToggleButton/index.js | 5 +- .../components/MobilityToggleButton/styles.js | 20 -- .../components/Pagination/Pagination.js | 49 +++-- .../components/Pagination/index.js | 5 +- .../components/Pagination/styles.js | 26 --- .../ParkingChargeZoneList.js | 20 +- .../components/ParkingChargeZoneList/index.js | 5 +- .../ParkingChargeZoneList/styles.js | 11 - .../components/RouteLength/RouteLength.js | 93 ++++----- .../RouteLength/__tests__/RouteLength.test.js | 10 +- .../__snapshots__/RouteLength.test.js.snap | 32 ++- .../components/RouteLength/index.js | 5 +- .../components/RouteLength/styles.js | 13 -- .../components/RouteList/RouteList.js | 21 +- .../components/RouteList/index.js | 4 +- .../components/RouteList/styles.js | 11 - .../ScooterProviderList.js | 36 +++- .../components/ScooterProviderList/index.js | 5 +- .../components/ScooterProviderList/styles.js | 18 -- .../SpeedLimitZonesList.js | 128 +++++++----- .../__tests__/SpeedLimitZonesList.test.js | 10 - .../SpeedLimitZonesList.test.js.snap | 16 +- .../components/SpeedLimitZonesList/index.js | 5 +- .../components/SpeedLimitZonesList/styles.js | 27 --- .../StreetMaintenanceList.js | 128 ++++++++++++ .../components/StreetMaintenanceList/index.js | 3 + .../components/TrailInfo/TrailInfo.js | 29 ++- .../TrailInfo/__tests__/TrailInfo.test.js | 7 - .../__snapshots__/TrailInfo.test.js.snap | 3 +- .../components/TrailInfo/index.js | 5 +- .../components/TrailInfo/styles.js | 13 -- .../components/TrailList/TrailList.js | 21 +- .../components/TrailList/index.js | 4 +- .../components/TrailList/styles.js | 11 - .../components/styled/styled.js | 17 ++ src/views/MobilitySettingsView/index.js | 9 +- src/views/MobilitySettingsView/styles.js | 128 ------------ 197 files changed, 2413 insertions(+), 3087 deletions(-) delete mode 100644 src/components/EcoCounter/CounterMarkers/styles.js delete mode 100644 src/components/EcoCounter/InputDate/styles.js delete mode 100644 src/components/EcoCounter/TrafficCounters/styles.js create mode 100644 src/components/EcoCounter/styled/styled.js delete mode 100644 src/components/ListItems/SimpleListItem/styles.js delete mode 100644 src/components/MobilityPlatform/BicycleStands/components/BicycleStandContent/styles.js delete mode 100644 src/components/MobilityPlatform/BicycleStands/styles.js delete mode 100644 src/components/MobilityPlatform/BikeServiceStations/components/BikeServiceStationContent/styles.js delete mode 100644 src/components/MobilityPlatform/Boating/Marinas/components/MarinasContent/styles.js delete mode 100644 src/components/MobilityPlatform/ChargerStationMarkers/components/ChargerStationContent/styles.js delete mode 100644 src/components/MobilityPlatform/CityBikes/components/CityBikesContent/styles.js delete mode 100644 src/components/MobilityPlatform/CultureRoutes/components/CultureRouteUnits/styles.js delete mode 100644 src/components/MobilityPlatform/GasFillingStationMarkers/components/GasFillingStationContent/styles.js delete mode 100644 src/components/MobilityPlatform/InfoTextBox/styles.js delete mode 100644 src/components/MobilityPlatform/LoadingPlaces/components/LoadingPlacesContent/styles.js delete mode 100644 src/components/MobilityPlatform/MarkerComponent/styles.js delete mode 100644 src/components/MobilityPlatform/OutdoorGymDevices/components/OutdoorGymDevicesContent/styles.js delete mode 100644 src/components/MobilityPlatform/Parking/DisabledParking/components/DisabledParkingContent/styles.js delete mode 100644 src/components/MobilityPlatform/Parking/PublicParking/components/PublicParkingContent/styles.js delete mode 100644 src/components/MobilityPlatform/Parking/RentalCarParking/components/RentalCarParkingContent/styles.js delete mode 100644 src/components/MobilityPlatform/ParkingChargeZones/components/ParkingChargeZoneContent/styles.js delete mode 100644 src/components/MobilityPlatform/ParkingMachines/components/ParkingMachinesContent/styles.js delete mode 100644 src/components/MobilityPlatform/ParkingSpaces/components/ParkingSpacesContent/styles.js delete mode 100644 src/components/MobilityPlatform/PolygonComponent/styles.js delete mode 100644 src/components/MobilityPlatform/PublicToilets/components/PublicToiletsContent/styles.js delete mode 100644 src/components/MobilityPlatform/RentalCars/components/RentalCarsContent/styles.js delete mode 100644 src/components/MobilityPlatform/RentalCars/styles.js delete mode 100644 src/components/MobilityPlatform/Scooters/components/ScooterMarkers/components/ScooterInfo/styles.js delete mode 100644 src/components/MobilityPlatform/SnowPlows/components/SnowPlowsContent/styles.js delete mode 100644 src/components/MobilityPlatform/SpeedLimitZones/components/SpeedLimitZonesContent/styles.js delete mode 100644 src/components/MobilityPlatform/TextContent/styles.js delete mode 100644 src/views/MobilitySettingsView/components/ButtonMain/ButtonMain.js delete mode 100644 src/views/MobilitySettingsView/components/ButtonMain/__tests__/ButtonMain.test.js delete mode 100644 src/views/MobilitySettingsView/components/ButtonMain/__tests__/__snapshots__/ButtonMain.test.js.snap delete mode 100644 src/views/MobilitySettingsView/components/ButtonMain/index.js delete mode 100644 src/views/MobilitySettingsView/components/ButtonMain/styles.js delete mode 100644 src/views/MobilitySettingsView/components/CityBikeInfo/styles.js delete mode 100644 src/views/MobilitySettingsView/components/Description/styles.js delete mode 100644 src/views/MobilitySettingsView/components/EmptyRouteList/styles.js delete mode 100644 src/views/MobilitySettingsView/components/ExtendedInfo/styles.js delete mode 100644 src/views/MobilitySettingsView/components/FormLabel/FormLabel.js delete mode 100644 src/views/MobilitySettingsView/components/FormLabel/__tests__/FormLabel.test.js delete mode 100644 src/views/MobilitySettingsView/components/FormLabel/__tests__/__snapshots__/FormLabel.test.js.snap delete mode 100644 src/views/MobilitySettingsView/components/FormLabel/index.js delete mode 100644 src/views/MobilitySettingsView/components/FormLabel/styles.js delete mode 100644 src/views/MobilitySettingsView/components/MobilityToggleButton/styles.js delete mode 100644 src/views/MobilitySettingsView/components/Pagination/styles.js delete mode 100644 src/views/MobilitySettingsView/components/ParkingChargeZoneList/styles.js delete mode 100644 src/views/MobilitySettingsView/components/RouteLength/styles.js delete mode 100644 src/views/MobilitySettingsView/components/RouteList/styles.js delete mode 100644 src/views/MobilitySettingsView/components/ScooterProviderList/styles.js delete mode 100644 src/views/MobilitySettingsView/components/SpeedLimitZonesList/styles.js create mode 100644 src/views/MobilitySettingsView/components/StreetMaintenanceList/StreetMaintenanceList.js create mode 100644 src/views/MobilitySettingsView/components/StreetMaintenanceList/index.js delete mode 100644 src/views/MobilitySettingsView/components/TrailInfo/styles.js delete mode 100644 src/views/MobilitySettingsView/components/TrailList/styles.js create mode 100644 src/views/MobilitySettingsView/components/styled/styled.js delete mode 100644 src/views/MobilitySettingsView/styles.js diff --git a/package-lock.json b/package-lock.json index 32fda84c2..d6a4f52e9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.1.0", "dependencies": { "@datapunt/matomo-tracker-js": "^0.5.1", + "@emotion/css": "^11.11.2", "@emotion/react": "^11.10.8", "@emotion/styled": "^11.10.8", "@formatjs/intl-pluralrules": "^1.5.9", @@ -2312,6 +2313,18 @@ "stylis": "4.2.0" } }, + "node_modules/@emotion/css": { + "version": "11.11.2", + "resolved": "https://registry.npmjs.org/@emotion/css/-/css-11.11.2.tgz", + "integrity": "sha512-VJxe1ucoMYMS7DkiMdC2T7PWNbrEI0a39YRiyDvK2qq4lXwjRbVP/z4lpG+odCsRzadlR+1ywwrTzhdm5HNdew==", + "dependencies": { + "@emotion/babel-plugin": "^11.11.0", + "@emotion/cache": "^11.11.0", + "@emotion/serialize": "^1.1.2", + "@emotion/sheet": "^1.2.2", + "@emotion/utils": "^1.2.1" + } + }, "node_modules/@emotion/hash": { "version": "0.9.1", "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", diff --git a/package.json b/package.json index 05f703c6c..759e91263 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "@datapunt/matomo-tracker-js": "^0.5.1", + "@emotion/css": "^11.11.2", "@emotion/react": "^11.10.8", "@emotion/styled": "^11.10.8", "@formatjs/intl-pluralrules": "^1.5.9", diff --git a/src/components/EcoCounter/CounterMarkers/CounterMarkers.js b/src/components/EcoCounter/CounterMarkers/CounterMarkers.js index 85ec6cae5..870977f8c 100644 --- a/src/components/EcoCounter/CounterMarkers/CounterMarkers.js +++ b/src/components/EcoCounter/CounterMarkers/CounterMarkers.js @@ -1,14 +1,13 @@ import { PropTypes } from 'prop-types'; import React from 'react'; import { useSelector } from 'react-redux'; +import styled from '@emotion/styled'; import ecoCounterIcon from 'servicemap-ui-turku/assets/icons/icons-icon_ecocounter.svg'; import ecoCounterIconBw from 'servicemap-ui-turku/assets/icons/contrast/icons-icon_ecocounter-bw.svg'; import { useAccessibleMap } from '../../../redux/selectors/settings'; import { createIcon } from '../../MobilityPlatform/utils/utils'; -const CounterMarkers = ({ - classes, counterStation, children, -}) => { +const CounterMarkers = ({ counterStation, children }) => { const useContrast = useSelector(useAccessibleMap); const { Marker, Popup } = global.rL; @@ -18,22 +17,33 @@ const CounterMarkers = ({ return ( -
+ -
+ {children} -
+
-
+
); }; +const StyledWrapper = styled.div(({ theme }) => ({ + position: 'absolute', + textAlign: 'center', + marginBottom: theme.spacing(2), + width: '429px', +})); + +const StyledContentInner = styled.div(({ theme }) => ({ + borderRadius: '3px', + marginBottom: theme.spacing(1), + marginLeft: theme.spacing(1.2), + lineHeight: 1.2, + overflowX: 'hidden', +})); + CounterMarkers.propTypes = { - classes: PropTypes.shape({ - popupWrapper: PropTypes.string, - popupInner: PropTypes.string, - }).isRequired, counterStation: PropTypes.shape({ lat: PropTypes.number, lon: PropTypes.number, diff --git a/src/components/EcoCounter/CounterMarkers/index.js b/src/components/EcoCounter/CounterMarkers/index.js index 49e3af6e8..81c1fbcf9 100644 --- a/src/components/EcoCounter/CounterMarkers/index.js +++ b/src/components/EcoCounter/CounterMarkers/index.js @@ -1,5 +1,3 @@ -import { withStyles } from '@mui/styles'; import CounterMarkers from './CounterMarkers'; -import styles from './styles'; -export default withStyles(styles)(CounterMarkers); +export default CounterMarkers; diff --git a/src/components/EcoCounter/CounterMarkers/styles.js b/src/components/EcoCounter/CounterMarkers/styles.js deleted file mode 100644 index 89665557d..000000000 --- a/src/components/EcoCounter/CounterMarkers/styles.js +++ /dev/null @@ -1,17 +0,0 @@ -const styles = { - popupWrapper: { - position: 'absolute', - textAlign: 'center', - marginBottom: '20px', - width: '429px', - }, - popupInner: { - borderRadius: '3px', - marginBottom: '0.4rem', - marginLeft: '0.6rem', - lineHeight: 1.2, - overflowX: 'hidden', - }, -}; - -export default styles; diff --git a/src/components/EcoCounter/InputDate/styles.js b/src/components/EcoCounter/InputDate/styles.js deleted file mode 100644 index bb0f9e7d6..000000000 --- a/src/components/EcoCounter/InputDate/styles.js +++ /dev/null @@ -1,14 +0,0 @@ -const styles = (theme) => ({ - input: { - border: 'none', - textAlign: 'end', - paddingRight: theme.spacing(0.7), - ...theme.typography.body2, - '&:hover': { - cursor: 'pointer', - border: 'none', - }, - }, -}); - -export default styles; diff --git a/src/components/EcoCounter/TrafficCounters/EcoCounterContent/EcoCounterContent.js b/src/components/EcoCounter/TrafficCounters/EcoCounterContent/EcoCounterContent.js index 62551e386..1740eeab2 100644 --- a/src/components/EcoCounter/TrafficCounters/EcoCounterContent/EcoCounterContent.js +++ b/src/components/EcoCounter/TrafficCounters/EcoCounterContent/EcoCounterContent.js @@ -1,11 +1,13 @@ /* eslint-disable react/jsx-props-no-spreading */ /* eslint-disable react-hooks/exhaustive-deps */ -import { ButtonBase, Typography, useMediaQuery } from '@mui/material'; +import { Typography, useMediaQuery } from '@mui/material'; import PropTypes from 'prop-types'; import React, { useEffect, useState, useRef, forwardRef, } from 'react'; import { useSelector } from 'react-redux'; +import { useIntl } from 'react-intl'; +import { css } from '@emotion/css'; import DatePicker, { registerLocale } from 'react-datepicker'; import { endOfMonth, @@ -34,13 +36,24 @@ import { fetchSelectedYearData, } from '../../EcoCounterRequests/ecoCounterRequests'; import { formatDates, formatMonths } from '../../utils'; +import { + StyledButtonText, + StyledChartContainer, + StyledContentHeader, + StyledDateContainer, + StyledHeaderSubtitle, + StyledUserTypeText, + StyledStepsContainer, + StyledUserTypesContainer, + StyledButtonBase, +} from '../../styled/styled'; import LineChart from '../../LineChart'; import InputDate from '../../InputDate'; import CounterActiveText from '../CounterActiveText'; const CustomInput = forwardRef((props, ref) => ); -const EcoCounterContent = ({ classes, intl, station }) => { +const EcoCounterContent = ({ station }) => { const [ecoCounterHour, setEcoCounterHour] = useState([]); const [ecoCounterDay, setEcoCounterDay] = useState([]); const [ecoCounterWeek, setEcoCounterWeek] = useState([]); @@ -54,6 +67,7 @@ const EcoCounterContent = ({ classes, intl, station }) => { const [currentTime, setCurrentTime] = useState('hour'); const [activeStep, setActiveStep] = useState(0); + const intl = useIntl(); const locale = useSelector(state => state.user.locale); const inputRef = useRef(null); @@ -68,6 +82,18 @@ const EcoCounterContent = ({ classes, intl, station }) => { const [selectedDate, setSelectedDate] = useState(subDays(new Date(dataUntil), 1)); + const iconClass = css({ + fill: 'rgba(0, 0, 0, 255)', + width: '40px', + height: '40px', + }); + + const iconActiveClass = css({ + fill: 'rgba(255, 255, 255, 255)', + width: '40px', + height: '40px', + }); + /** When all 3 user types are rendered, a reverse order is required where 'at' is placed last */ const reverseUserTypes = () => { if (station.sensor_types.includes('at')) { @@ -144,10 +170,8 @@ const EcoCounterContent = ({ classes, intl, station }) => { * @returns JSX element */ const userTypeText = translationId => ( -
- - {intl.formatMessage({ id: translationId })} - +
+ {intl.formatMessage({ id: translationId })}
); @@ -177,16 +201,19 @@ const EcoCounterContent = ({ classes, intl, station }) => { * @returns JSX Element */ const userTypeButton = (userType, iconValue, i) => ( - setUserTypes(userType, i)} >
- +
-
+ ); /** @@ -500,11 +527,11 @@ const EcoCounterContent = ({ classes, intl, station }) => { return ( <> -
- + + {stationSource === 'TR' ? 'Telraam' : renderStationName(stationName)} - -
+ + changeDate(newDate)} @@ -516,19 +543,19 @@ const EcoCounterContent = ({ classes, intl, station }) => { maxDate={new Date(dataUntil)} customInput={} /> -
-
-
-
+ + +
+ {userTypes?.map((userType, i) => ( -
+ {renderUserTypeIcon(userType, i)} {renderUserTypeText(userType)} -
+ ))} -
+ -
+ { channel1Data={channel1Counts} channel2Data={channel2Counts} /> -
-
+ + {buttonSteps .filter(item => item.step.visible) .map((timing, i) => ( - handleClick(timing.step.type, i)} > - + {timing.step.text} - + ))} -
+
); }; EcoCounterContent.propTypes = { - classes: PropTypes.objectOf(PropTypes.string).isRequired, - intl: PropTypes.shape({ - formatMessage: PropTypes.func, - }).isRequired, station: PropTypes.shape({ id: PropTypes.number, name: PropTypes.string, diff --git a/src/components/EcoCounter/TrafficCounters/EcoCounterContent/index.js b/src/components/EcoCounter/TrafficCounters/EcoCounterContent/index.js index e0ddb831f..9f51169c7 100644 --- a/src/components/EcoCounter/TrafficCounters/EcoCounterContent/index.js +++ b/src/components/EcoCounter/TrafficCounters/EcoCounterContent/index.js @@ -1,6 +1,3 @@ -import { withStyles } from '@mui/styles'; -import { injectIntl } from 'react-intl'; import EcoCounterContent from './EcoCounterContent'; -import styles from '../styles'; -export default withStyles(styles)(injectIntl(EcoCounterContent)); +export default EcoCounterContent; diff --git a/src/components/EcoCounter/TrafficCounters/LamCounterContent/LamCounterContent.js b/src/components/EcoCounter/TrafficCounters/LamCounterContent/LamCounterContent.js index 91568901b..9b33a56ea 100644 --- a/src/components/EcoCounter/TrafficCounters/LamCounterContent/LamCounterContent.js +++ b/src/components/EcoCounter/TrafficCounters/LamCounterContent/LamCounterContent.js @@ -4,8 +4,11 @@ import React, { useEffect, useState, forwardRef, useRef, } from 'react'; import { useSelector } from 'react-redux'; -import { ButtonBase, Typography, useMediaQuery } from '@mui/material'; +import { Typography, useMediaQuery } from '@mui/material'; import PropTypes from 'prop-types'; +import { useIntl } from 'react-intl'; +import { css } from '@emotion/css'; +import styled from '@emotion/styled'; import DatePicker, { registerLocale } from 'react-datepicker'; import { endOfMonth, @@ -34,10 +37,21 @@ import { formatDates, formatMonths } from '../../utils'; import LineChart from '../../LineChart'; import InputDate from '../../InputDate'; import CounterActiveText from '../CounterActiveText'; +import { + StyledButtonBase, + StyledChartContainer, + StyledContentHeader, + StyledDateContainer, + StyledHeaderSubtitle, + StyledIconContainer, + StyledStepsContainer, + StyledUserTypeText, + StyledUserTypesContainer, +} from '../../styled/styled'; const CustomInput = forwardRef((props, ref) => ); -const LamCounterContent = ({ classes, intl, station }) => { +const LamCounterContent = ({ station }) => { const [lamCounterHour, setLamCounterHour] = useState([]); const [lamCounterDay, setLamCounterDay] = useState([]); const [lamCounterWeek, setLamCounterWeek] = useState([]); @@ -51,6 +65,7 @@ const LamCounterContent = ({ classes, intl, station }) => { const [currentTime, setCurrentTime] = useState('hour'); const [activeStep, setActiveStep] = useState(0); + const intl = useIntl(); const locale = useSelector(state => state.user.locale); const inputRef = useRef(null); @@ -66,6 +81,12 @@ const LamCounterContent = ({ classes, intl, station }) => { const [selectedDate, setSelectedDate] = useState(subDays(new Date(dataUntil), 1)); + const iconClass = css({ + fill: 'rgb(255, 255, 255)', + width: '40px', + height: '40px', + }); + // steps that determine which data is shown on the chart const buttonSteps = [ { @@ -103,10 +124,10 @@ const LamCounterContent = ({ classes, intl, station }) => { const renderUserTypeText = userType => { if (userType === 'at') { return ( -
- +
+ {intl.formatMessage({ id: 'ecocounter.car' })} - +
); } @@ -116,9 +137,9 @@ const LamCounterContent = ({ classes, intl, station }) => { const renderUserTypeIcon = userType => { if (userType === 'at') { return ( -
- -
+ + + ); } return null; @@ -383,11 +404,11 @@ const LamCounterContent = ({ classes, intl, station }) => { return ( <> -
- + + {stationSource === 'LC' ? formatCounterName(stationName) : stationName} - -
+ + changeDate(newDate)} @@ -399,26 +420,26 @@ const LamCounterContent = ({ classes, intl, station }) => { maxDate={new Date(dataUntil)} customInput={} /> -
-
-
-
+ + +
+ {userTypes?.map(userType => ( -
+
{renderUserTypeIcon(userType)} {renderUserTypeText(userType)}
))} -
+
{lamCounterYear?.value_at === 0 ? ( -
+ {intl.formatMessage({ id: 'trafficCounter.year.warning.text' }, { value: selectedYear })} -
+ ) : null} -
+ { channel1Data={channel1Counts} channel2Data={channel2Counts} /> -
-
+ + {buttonSteps.map((timing, i) => ( - handleClick(timing.step.type, i)} > - + {timing.step.text} - + ))} -
+
); }; +const StyledMissingDataText = styled.div(({ theme }) => ({ + textAlign: 'center', + margin: `${theme.spacing(1)} 0`, +})); + LamCounterContent.propTypes = { - classes: PropTypes.objectOf(PropTypes.string).isRequired, - intl: PropTypes.shape({ - formatMessage: PropTypes.func, - }).isRequired, station: PropTypes.shape({ id: PropTypes.number, name: PropTypes.string, diff --git a/src/components/EcoCounter/TrafficCounters/LamCounterContent/index.js b/src/components/EcoCounter/TrafficCounters/LamCounterContent/index.js index 978bfbb83..e5dc3441f 100644 --- a/src/components/EcoCounter/TrafficCounters/LamCounterContent/index.js +++ b/src/components/EcoCounter/TrafficCounters/LamCounterContent/index.js @@ -1,6 +1,3 @@ -import { withStyles } from '@mui/styles'; -import { injectIntl } from 'react-intl'; import LamCounterContent from './LamCounterContent'; -import styles from '../styles'; -export default withStyles(styles)(injectIntl(LamCounterContent)); +export default LamCounterContent; diff --git a/src/components/EcoCounter/TrafficCounters/styles.js b/src/components/EcoCounter/TrafficCounters/styles.js deleted file mode 100644 index b90904946..000000000 --- a/src/components/EcoCounter/TrafficCounters/styles.js +++ /dev/null @@ -1,122 +0,0 @@ -const styles = (theme) => ({ - buttonTransparent: { - backgroundColor: '#fff', - border: 'none', - cursor: 'pointer', - '&:hover': { - color: 'rgba(84, 84, 84, 255)', - }, - }, - button: { - border: '1px solid gray', - borderRadius: '5px', - cursor: 'pointer', - marginRight: theme.spacing(1.5), - }, - buttonGray: { - backgroundColor: '#ddd', - border: 'none', - borderRadius: '5px', - color: '#fff', - cursor: 'pointer', - padding: theme.spacing(1), - }, - buttonWhite: { - backgroundColor: '#fff', - }, - buttonActive: { - backgroundColor: 'rgba(7, 44, 115, 255)', - color: '#fff', - }, - paddingWide: { - padding: `${theme.spacing(0.5)} ${theme.spacing(1)}`, - }, - paddingNarrow: { - padding: theme.spacing(0.5), - }, - widthMd: { - width: '95%', - }, - widthSm: { - width: '87%', - }, - trafficCounterHeader: { - display: 'flex', - flexDirection: 'row', - marginTop: theme.spacing(0.5), - marginBottom: theme.spacing(1.5), - alignItems: 'flex-end', - borderBottom: '2px solid gray', - justifyContent: 'space-between', - }, - headerSubtitle: { - padding: '4px 0 5px', - fontWeight: 'bold', - marginBlockStart: theme.spacing(2), - marginBlockEnd: theme.spacing(0.2), - }, - dateContainer: { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - maxWidth: '32%', - }, - trafficCounterUserTypes: { - display: 'flex', - justifyContent: 'flex-end', - marginBottom: theme.spacing(0.5), - }, - buttonAndTextContainer: { - display: 'flex', - flexDirection: 'column', - marginRight: '0.7rem', - alignItems: 'center', - }, - userTypeText: { - fontWeight: 'bold', - paddingTop: theme.spacing(0.5), - paddingRight: theme.spacing(1), - fontSize: '0.8rem', - }, - buttonText: { - fontSize: '0.75rem', - }, - missingDataText: { - textAlign: 'center', - margin: `${theme.spacing(1)} 0`, - }, - iconWrapper: { - backgroundColor: 'rgba(7, 44, 115, 255)', - color: '#fff', - border: '1px solid gray', - borderRadius: '5px', - marginRight: theme.spacing(1.5), - padding: theme.spacing(0.5), - }, - iconActive: { - fill: '#ffffff', - width: '40px', - height: '40px', - }, - icon: { - fill: '#000000', - width: '40px', - height: '40px', - }, - trafficCounterSteps: { - display: 'flex', - flexDirection: 'row', - justifyContent: 'space-evenly', - alignItems: 'center', - padding: '1rem 0', - }, - trafficCounterChart: { - margin: 0, - }, - iconContainer: { - marginRight: theme.spacing(0.5), - paddingTop: theme.spacing(1), - }, -}); - -export default styles; diff --git a/src/components/EcoCounter/styled/styled.js b/src/components/EcoCounter/styled/styled.js new file mode 100644 index 000000000..88ad3fc66 --- /dev/null +++ b/src/components/EcoCounter/styled/styled.js @@ -0,0 +1,88 @@ +import styled from '@emotion/styled'; +import { ButtonBase, Typography } from '@mui/material'; + +const StyledContentHeader = styled.div(({ theme, isNarrow }) => ({ + display: 'flex', + flexDirection: 'row', + marginTop: theme.spacing(0.5), + marginBottom: theme.spacing(1.5), + alignItems: 'flex-end', + borderBottom: '2px solid gray', + justifyContent: 'space-between', + width: isNarrow ? '87%' : '95%', +})); + +const StyledHeaderSubtitle = styled(Typography)(({ theme }) => ({ + padding: '4px 0 5px', + fontWeight: 'bold', + marginBlockStart: theme.spacing(2), + marginBlockEnd: theme.spacing(0.2), +})); + +const StyledUserTypeText = styled(Typography)(({ theme }) => ({ + fontWeight: 'bold', + paddingTop: theme.spacing(0.5), + paddingRight: theme.spacing(1), + fontSize: '0.8rem', +})); + +const StyledButtonBase = styled(ButtonBase)(({ theme }) => ({ + border: '1px solid gray', + borderRadius: '5px', + cursor: 'pointer', + marginRight: theme.spacing(1.5), +})); + +const StyledDateContainer = styled.div(() => ({ + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + maxWidth: '32%', +})); + +const StyledUserTypesContainer = styled.div(({ theme }) => ({ + display: 'flex', + justifyContent: 'flex-end', + marginBottom: theme.spacing(0.5), +})); + +const StyledButtonText = styled.div(() => ({ + display: 'flex', + flexDirection: 'column', + marginRight: '0.7rem', + alignItems: 'center', +})); + +const StyledChartContainer = styled.div(() => ({ + margin: 0, +})); + +const StyledStepsContainer = styled.div(() => ({ + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-evenly', + alignItems: 'center', + padding: '1rem 0', +})); + +const StyledIconContainer = styled.div(({ theme }) => ({ + backgroundColor: 'rgba(7, 44, 115, 255)', + color: 'rgba(255, 255, 255, 255)', + border: '1px solid gray', + borderRadius: '5px', + marginRight: theme.spacing(1.5), + padding: theme.spacing(0.5), +})); + +export { + StyledContentHeader, + StyledHeaderSubtitle, + StyledUserTypeText, + StyledButtonBase, + StyledDateContainer, + StyledUserTypesContainer, + StyledButtonText, + StyledChartContainer, + StyledStepsContainer, + StyledIconContainer, +}; diff --git a/src/components/ListItems/AddressItem/__tests__/__snapshots__/AddressItem.test.js.snap b/src/components/ListItems/AddressItem/__tests__/__snapshots__/AddressItem.test.js.snap index 8be57bd3f..a1d438a18 100644 --- a/src/components/ListItems/AddressItem/__tests__/__snapshots__/AddressItem.test.js.snap +++ b/src/components/ListItems/AddressItem/__tests__/__snapshots__/AddressItem.test.js.snap @@ -3,21 +3,22 @@ exports[` should work 1`] = `
  • should work 1`] = ` aria-hidden="true" >
  • diff --git a/src/components/ListItems/ServiceItem/__tests__/__snapshots__/ServiceItem.test.js.snap b/src/components/ListItems/ServiceItem/__tests__/__snapshots__/ServiceItem.test.js.snap index 8760fb63c..0fba4c124 100644 --- a/src/components/ListItems/ServiceItem/__tests__/__snapshots__/ServiceItem.test.js.snap +++ b/src/components/ListItems/ServiceItem/__tests__/__snapshots__/ServiceItem.test.js.snap @@ -3,13 +3,14 @@ exports[` should work 1`] = `
  • should work 1`] = ` aria-hidden="true" >
  • diff --git a/src/components/ListItems/SimpleListItem/SimpleListItem.js b/src/components/ListItems/SimpleListItem/SimpleListItem.js index 377bd7dfb..5cdf10f8b 100644 --- a/src/components/ListItems/SimpleListItem/SimpleListItem.js +++ b/src/components/ListItems/SimpleListItem/SimpleListItem.js @@ -1,31 +1,56 @@ import PropTypes from 'prop-types'; import React from 'react'; import { Divider, Typography } from '@mui/material'; +import { useTheme } from '@mui/styles'; +import { css } from '@emotion/css'; +import styled from '@emotion/styled'; import ListItem from '@mui/material/ListItem'; import ListItemIcon from '@mui/material/ListItemIcon'; import ListItemText from '@mui/material/ListItemText'; import { visuallyHidden } from '@mui/utils'; import { keyboardHandler } from '../../../utils'; -const SimpleListItem = (props) => { +const SimpleListItem = props => { const { - button, - dark, - text, - classes, - link, - icon, - handleItemClick, - role, - divider, - selected, - srText, - className, - id, + button, dark, text, link, icon, handleItemClick, role, divider, selected, srText, className, id, } = props; + const isLinkOrButton = button || link; + const theme = useTheme(); + + const listItemRootClass = css({ + minHeight: '3.5rem', + padding: theme.spacing(0), + color: '#000', + '&.dark': { + paddingLeft: 26, + color: '#fff', + }, + }); + + const listItemSelectedClass = css({ + outline: '2px solid transparent', + boxShadow: `0 0 0 4px ${theme.palette.focusBorder.main}`, + }); + + const listItemTextClass = css({ + padding: theme.spacing(1, 0), + marginLeft: theme.spacing(2), + marginRight: theme.spacing(2), + whiteSpace: 'pre-line', + }); + + const linkClass = css({ + color: theme.palette.link.main, + textDecoration: 'underline', + }); + + const whiteTextClass = css({ + color: '#fff', + }); + return ( - + <> { onClick={isLinkOrButton ? handleItemClick : null} onKeyDown={isLinkOrButton ? keyboardHandler(handleItemClick, ['enter', 'space']) : null} classes={{ - root: classes.listItem, - selected: classes.itemFocus, + root: listItemRootClass, + selected: listItemSelectedClass, }} selected={selected} id={id} > - { - icon - && ( - - {icon} - - ) - } + {icon && ( + + {icon} + + )} - + {text} @@ -65,18 +85,40 @@ const SimpleListItem = (props) => { {divider && (
  • - +
  • )} -
    + ); }; +const StyledListItemIcon = styled(ListItemIcon)(({ theme, link }) => { + const styles = { + width: '1.5rem', + height: '1.5rem', + margin: theme.spacing(1), + marginRight: theme.spacing(2), + minWidth: 0, + color: 'inherit', + }; + if (link) { + Object.assign(styles, { + color: theme.palette.link.main, + textDecoration: 'underline', + }); + } + return styles; +}); + +const StyledDivider = styled(Divider)(({ theme }) => ({ + marginLeft: theme.spacing(9), + marginRight: theme.spacing(-2), +})); + export default SimpleListItem; SimpleListItem.propTypes = { button: PropTypes.bool, - classes: PropTypes.objectOf(PropTypes.any).isRequired, dark: PropTypes.bool, text: PropTypes.string.isRequired, srText: PropTypes.string, diff --git a/src/components/ListItems/SimpleListItem/__tests__/__snapshots__/SimpleListItem.test.js.snap b/src/components/ListItems/SimpleListItem/__tests__/__snapshots__/SimpleListItem.test.js.snap index 08696eb8a..9a120cbae 100644 --- a/src/components/ListItems/SimpleListItem/__tests__/__snapshots__/SimpleListItem.test.js.snap +++ b/src/components/ListItems/SimpleListItem/__tests__/__snapshots__/SimpleListItem.test.js.snap @@ -3,11 +3,11 @@ exports[` should work 1`] = `
  • ({ - listItem: { - minHeight: '3.5rem', - padding: theme.spacing(1), - color: '#000', - '&.dark': { - paddingLeft: 26, - color: '#fff', - }, - }, - textContainer: { - padding: theme.spacing(1, 0), - marginLeft: theme.spacing(2), - marginRight: theme.spacing(2), - whiteSpace: 'pre-line', - }, - link: { - color: theme.palette.link.main, - textDecoration: 'underline', - }, - whiteText: { - color: '#fff', - }, - listIcon: { - width: '1.5rem', - height: '1.5rem', - margin: theme.spacing(1), - marginRight: theme.spacing(2), - minWidth: 0, - color: 'inherit', - }, - divider: { - marginLeft: theme.spacing(9), - marginRight: theme.spacing(-2), - }, - itemFocus: { - outline: '2px solid transparent', - boxShadow: `0 0 0 4px ${theme.palette.focusBorder.main}`, - }, -}); diff --git a/src/components/MobilityPlatform/BarbecuePlaces/components/BarbecuePlacesContent/BarbecuePlacesContent.js b/src/components/MobilityPlatform/BarbecuePlaces/components/BarbecuePlacesContent/BarbecuePlacesContent.js index 61d5284be..2e9e2533c 100644 --- a/src/components/MobilityPlatform/BarbecuePlaces/components/BarbecuePlacesContent/BarbecuePlacesContent.js +++ b/src/components/MobilityPlatform/BarbecuePlaces/components/BarbecuePlacesContent/BarbecuePlacesContent.js @@ -2,52 +2,40 @@ import PropTypes from 'prop-types'; import React from 'react'; import { Typography } from '@mui/material'; import { useIntl } from 'react-intl'; -import styled from '@emotion/styled'; +import { StyledContainer, StyledHeaderContainer, StyledTextContainer } from '../../../styled/styled'; const BarbecuePlacesContent = ({ item }) => { const intl = useIntl(); return ( - + {intl.formatMessage({ id: 'mobilityPlatform.content.barbecuePlace.title' })} - - - - {intl.formatMessage( - { id: 'mobilityPlatform.content.barbecuePlace.manufacturer' }, - { value: item.extra.valmistaja }, - )} - - - - - {intl.formatMessage( - { id: 'mobilityPlatform.content.barbecuePlace.model' }, - { value: item.extra.malli.trim() }, - )} - - + +
    + + + {intl.formatMessage( + { id: 'mobilityPlatform.content.barbecuePlace.manufacturer' }, + { value: item.extra.valmistaja }, + )} + + + + + {intl.formatMessage( + { id: 'mobilityPlatform.content.barbecuePlace.model' }, + { value: item.extra.malli.trim() }, + )} + + +
    ); }; -const StyledContainer = styled.div(({ theme }) => ({ - margin: theme.spacing(1), -})); - -const StyledHeader = styled.div(({ theme }) => ({ - width: '85%', - borderBottom: '1px solid #000', - paddingBottom: theme.spacing(0.5), -})); - -const StyledText = styled.div(({ theme }) => ({ - marginTop: theme.spacing(0.5), -})); - BarbecuePlacesContent.propTypes = { item: PropTypes.shape({ extra: PropTypes.shape({ diff --git a/src/components/MobilityPlatform/BarbecuePlaces/components/BarbecuePlacesContent/__tests__/__snapshots__/BarbecuePlacesContent.test.js.snap b/src/components/MobilityPlatform/BarbecuePlaces/components/BarbecuePlacesContent/__tests__/__snapshots__/BarbecuePlacesContent.test.js.snap index 1285a19e4..d8dd727eb 100644 --- a/src/components/MobilityPlatform/BarbecuePlaces/components/BarbecuePlacesContent/__tests__/__snapshots__/BarbecuePlacesContent.test.js.snap +++ b/src/components/MobilityPlatform/BarbecuePlaces/components/BarbecuePlacesContent/__tests__/__snapshots__/BarbecuePlacesContent.test.js.snap @@ -14,23 +14,25 @@ exports[` should work 1`] = ` Grillaus- ja tulentekopaikka

    -
    -

    +

    - Valmistaja: Testi -

    -
    -
    -

    + Valmistaja: Testi +

    +
    +
    - Malli: Testigrilli -

    +

    + Malli: Testigrilli +

    +
  • diff --git a/src/components/MobilityPlatform/BicycleStands/components/BicycleStandContent/BicycleStandContent.js b/src/components/MobilityPlatform/BicycleStands/components/BicycleStandContent/BicycleStandContent.js index e4c9db772..7e6a81c88 100644 --- a/src/components/MobilityPlatform/BicycleStands/components/BicycleStandContent/BicycleStandContent.js +++ b/src/components/MobilityPlatform/BicycleStands/components/BicycleStandContent/BicycleStandContent.js @@ -1,10 +1,12 @@ import { Typography } from '@mui/material'; import PropTypes from 'prop-types'; import React from 'react'; +import { useIntl } from 'react-intl'; +import { StyledContainer, StyledHeaderContainer, StyledTextContainer } from '../../../styled/styled'; + +const BicycleStandContent = ({ bicycleStand }) => { + const intl = useIntl(); -const BicycleStandContent = ({ - classes, bicycleStand, intl, -}) => { const messageIds = { model: 'mobilityPlatform.content.bicycleStands.model', places: 'mobilityPlatform.content.bicycleStands.numOfPlaces', @@ -17,96 +19,104 @@ const BicycleStandContent = ({ }; const titleTypo = () => ( -
    - + + {bicycleStand.name} -
    + ); const multiValueTypo = messages => ( -
    +
    {bicycleStand.extra.model ? ( -
    + {intl.formatMessage({ id: messages.model, }, { value: bicycleStand.extra.model })} -
    + ) : null} -
    + {intl.formatMessage({ id: messages.places, }, { value: bicycleStand.extra.number_of_places })} -
    -
    + + {intl.formatMessage({ id: messages.stands, }, { value: bicycleStand.extra.number_of_stands })} -
    + {bicycleStand.extra.covered ? ( -
    + {intl.formatMessage({ id: messages.covered, })} -
    + ) : ( -
    + {intl.formatMessage({ id: messages.notCovered, })} -
    + )} {bicycleStand.extra.hull_lockable ? ( -
    + {intl.formatMessage({ id: messages.lockable, })} -
    + ) : ( -
    + {intl.formatMessage({ id: messages.notLockable, })} -
    + )} {bicycleStand.extra.maintained_by_turku ? ( -
    + {intl.formatMessage({ id: messages.maintained, })} -
    + ) : null}
    ); return ( -
    + {titleTypo()} {multiValueTypo(messageIds)} -
    + ); }; BicycleStandContent.propTypes = { - classes: PropTypes.objectOf(PropTypes.any).isRequired, - bicycleStand: PropTypes.objectOf(PropTypes.any), - intl: PropTypes.objectOf(PropTypes.any).isRequired, + bicycleStand: PropTypes.shape({ + name: PropTypes.string, + extra: PropTypes.shape({ + model: PropTypes.string, + number_of_places: PropTypes.number, + number_of_stands: PropTypes.number, + covered: PropTypes.bool, + hull_lockable: PropTypes.bool, + maintained_by_turku: PropTypes.bool, + }), + }), }; BicycleStandContent.defaultProps = { diff --git a/src/components/MobilityPlatform/BicycleStands/components/BicycleStandContent/__tests__/__snapshots__/BicycleStandContent.test.js.snap b/src/components/MobilityPlatform/BicycleStands/components/BicycleStandContent/__tests__/__snapshots__/BicycleStandContent.test.js.snap index 1935e4d12..b2b27f225 100644 --- a/src/components/MobilityPlatform/BicycleStands/components/BicycleStandContent/__tests__/__snapshots__/BicycleStandContent.test.js.snap +++ b/src/components/MobilityPlatform/BicycleStands/components/BicycleStandContent/__tests__/__snapshots__/BicycleStandContent.test.js.snap @@ -3,20 +3,20 @@ exports[` should work 1`] = `

    Testinimi

    should work 1`] = `

    should work 1`] = `

    should work 1`] = `

    should work 1`] = `

    should work 1`] = `

    ({ - title: { - marginBottom: theme.spacing(1), - width: '85%', - borderBottom: '1px solid #000000', - }, - titleText: { - fontSize: '0.9rem', - }, - paragraph: { - marginBottom: theme.spacing(0.5), - }, - padding: { - padding: theme.spacing(1), - }, -}); diff --git a/src/components/MobilityPlatform/BicycleStands/index.js b/src/components/MobilityPlatform/BicycleStands/index.js index 8c9a86d52..3235dfe69 100644 --- a/src/components/MobilityPlatform/BicycleStands/index.js +++ b/src/components/MobilityPlatform/BicycleStands/index.js @@ -1,6 +1,3 @@ -import { withStyles } from '@mui/styles'; -import { injectIntl } from 'react-intl'; import BicycleStands from './BicycleStands'; -import styles from './styles'; -export default withStyles(styles)(injectIntl(BicycleStands)); +export default BicycleStands; diff --git a/src/components/MobilityPlatform/BicycleStands/styles.js b/src/components/MobilityPlatform/BicycleStands/styles.js deleted file mode 100644 index bed7a8e7a..000000000 --- a/src/components/MobilityPlatform/BicycleStands/styles.js +++ /dev/null @@ -1,7 +0,0 @@ -const styles = { - popupInner: { - margin: '0.8rem', - }, -}; - -export default styles; diff --git a/src/components/MobilityPlatform/BikeServiceStations/components/BikeServiceStationContent/BikeServiceStationContent.js b/src/components/MobilityPlatform/BikeServiceStations/components/BikeServiceStationContent/BikeServiceStationContent.js index 7e65bc257..a6e1cb985 100644 --- a/src/components/MobilityPlatform/BikeServiceStations/components/BikeServiceStationContent/BikeServiceStationContent.js +++ b/src/components/MobilityPlatform/BikeServiceStations/components/BikeServiceStationContent/BikeServiceStationContent.js @@ -1,8 +1,9 @@ import PropTypes from 'prop-types'; import React from 'react'; +import { StyledContainer, StyledHeaderContainer, StyledTextContainer } from '../../../styled/styled'; import TextComponent from '../../../TextComponent'; -const BikeServiceStationContent = ({ classes, station }) => { +const BikeServiceStationContent = ({ station }) => { const stationName = { fi: station.name, en: station.name_en, @@ -22,27 +23,35 @@ const BikeServiceStationContent = ({ classes, station }) => { }; const bikeServiceStationInfo = ( -

    -
    + + -
    -
    + + {station.address ? : null} -
    -
    + + ); return ( - <> - {bikeServiceStationInfo} - + bikeServiceStationInfo ); }; BikeServiceStationContent.propTypes = { - classes: PropTypes.objectOf(PropTypes.any).isRequired, - station: PropTypes.objectOf(PropTypes.any), + station: PropTypes.shape({ + address: PropTypes.string, + address_fi: PropTypes.string, + address_en: PropTypes.string, + address_sv: PropTypes.string, + name: PropTypes.string, + name_en: PropTypes.string, + name_sv: PropTypes.string, + description: PropTypes.string, + description_en: PropTypes.string, + description_sv: PropTypes.string, + }), }; BikeServiceStationContent.defaultProps = { diff --git a/src/components/MobilityPlatform/BikeServiceStations/components/BikeServiceStationContent/__tests__/__snapshots__/BikeServiceStationContent.test.js.snap b/src/components/MobilityPlatform/BikeServiceStations/components/BikeServiceStationContent/__tests__/__snapshots__/BikeServiceStationContent.test.js.snap index a3a279cc9..df4075008 100644 --- a/src/components/MobilityPlatform/BikeServiceStations/components/BikeServiceStationContent/__tests__/__snapshots__/BikeServiceStationContent.test.js.snap +++ b/src/components/MobilityPlatform/BikeServiceStations/components/BikeServiceStationContent/__tests__/__snapshots__/BikeServiceStationContent.test.js.snap @@ -3,13 +3,13 @@ exports[` should match snapshot 1`] = `

    should match snapshot 1`] = `

    should match snapshot 1`] = `

    ({ - container: { - margin: theme.spacing(1), - }, - headerContainer: { - width: '85%', - borderBottom: '1px solid #000', - paddingBottom: theme.spacing(0.5), - }, - textContainer: { - marginTop: theme.spacing(0.5), - }, - contentInner: { - marginLeft: theme.spacing(1), - marginBottom: theme.spacing(1), - }, - margin: { - margin: theme.spacing(0.4), - }, -}); diff --git a/src/components/MobilityPlatform/Boating/Marinas/components/MarinasContent/MarinasContent.js b/src/components/MobilityPlatform/Boating/Marinas/components/MarinasContent/MarinasContent.js index 963a9a224..3d06a9420 100644 --- a/src/components/MobilityPlatform/Boating/Marinas/components/MarinasContent/MarinasContent.js +++ b/src/components/MobilityPlatform/Boating/Marinas/components/MarinasContent/MarinasContent.js @@ -1,14 +1,19 @@ import { Link, Typography } from '@mui/material'; import PropTypes from 'prop-types'; import React from 'react'; +import { useIntl } from 'react-intl'; +import styled from '@emotion/styled'; +import { StyledContainer, StyledHeaderContainer, StyledTextContainer } from '../../../../styled/styled'; + +const MarinasContent = ({ berthItem }) => { + const intl = useIntl(); -const MarinasContent = ({ - classes, intl, berthItem, -}) => { const renderText = (translationId, value) => ( - - {intl.formatMessage({ id: translationId }, { value })} - + + + {intl.formatMessage({ id: translationId }, { value })} + + ); const renderTypePrice = (price, berthType) => { @@ -16,20 +21,22 @@ const MarinasContent = ({ const fullPrice = price * alvTax; return ( <> - - - {intl.formatMessage({ id: 'mobilityPlatform.content.marinas.typeTitle' })} - - + + + + {intl.formatMessage({ id: 'mobilityPlatform.content.marinas.typeTitle' })} + + + {renderText('mobilityPlatform.content.marinas.type', berthType)} {renderText('mobilityPlatform.content.marinas.price', Math.round(fullPrice))} ); }; - const countBerths = (berthsData) => { + const countBerths = berthsData => { let count = 0; - berthsData.forEach((item) => { + berthsData.forEach(item => { if (item.Varaustyyppi === 'Venepaikat' || item.Varaustyyppi === 'Soutuvenepaikka') { count += 1; } @@ -39,9 +46,9 @@ const MarinasContent = ({ ); }; - const countWinterStorage = (berthsData) => { + const countWinterStorage = berthsData => { let count = 0; - berthsData.forEach((item) => { + berthsData.forEach(item => { if (item.Varaustyyppi === 'Soutuveneiden talvisäilytyspaikat' || item.Varaustyyppi === 'Talvisäilytyspaikat') { count += 1; } @@ -52,40 +59,56 @@ const MarinasContent = ({ }; const renderLink = (linkUrl, translationId) => ( - - - {intl.formatMessage({ - id: translationId, - })} - - + + + + {intl.formatMessage({ + id: translationId, + })} + + + ); return ( -

    -
    + + {berthItem.name} -
    -
    + +
    {countBerths(berthItem.extra.berths)} {berthItem.name === 'Satama: Lauttaranta' ? countWinterStorage(berthItem.extra.berths) : null} {renderTypePrice(berthItem.extra.berths[0].HintaAlv0, berthItem.extra.berths[0].Kohdetyyppi)} - - {intl.formatMessage({ id: 'mobilityPlatform.content.marinas.reservationInfo' })} - + + + {intl.formatMessage({ id: 'mobilityPlatform.content.marinas.reservationInfo' })} + + {renderLink('https://opaskartta.turku.fi/ePermit/fi/Reservation/', 'mobilityPlatform.info.marinas.link')} {renderLink('https://www.turku.fi/venepaikat', 'mobilityPlatform.content.marinas.infoLink')}
    -
    + ); }; +const StyledLinkText = styled(Typography)(({ theme }) => ({ + marginTop: theme.spacing(0.7), + color: theme.palette.link.main, + textDecoration: 'underline', +})); + MarinasContent.propTypes = { - classes: PropTypes.objectOf(PropTypes.any).isRequired, - intl: PropTypes.objectOf(PropTypes.any).isRequired, - berthItem: PropTypes.objectOf(PropTypes.any).isRequired, + berthItem: PropTypes.shape({ + name: PropTypes.string, + extra: PropTypes.shape({ + berths: PropTypes.arrayOf(PropTypes.shape({ + Kohdetyyppi: PropTypes.string, + HintaAlv0: PropTypes.number, + })), + }), + }).isRequired, }; export default MarinasContent; diff --git a/src/components/MobilityPlatform/Boating/Marinas/components/MarinasContent/__tests__/__snapshots__/MarinasContent.test.js.snap b/src/components/MobilityPlatform/Boating/Marinas/components/MarinasContent/__tests__/__snapshots__/MarinasContent.test.js.snap index 1ffd9ca3f..0f491f3b6 100644 --- a/src/components/MobilityPlatform/Boating/Marinas/components/MarinasContent/__tests__/__snapshots__/MarinasContent.test.js.snap +++ b/src/components/MobilityPlatform/Boating/Marinas/components/MarinasContent/__tests__/__snapshots__/MarinasContent.test.js.snap @@ -3,10 +3,10 @@ exports[` should work 1`] = `

    should work 1`] = ` Satama: Marina

    -
    -

    - Venepaikkojen määrä: 1 -

    -

    +

    - - Venetyyppi (esimerkki): - -

    -

    - Tyyppi: Aisapaikka -

    -

    + Venepaikkojen määrä: 1 +

    +
    +
    - Hinta: 124 € -

    -

    + + Venetyyppi (esimerkki): + +

    +
    +
    - Tiedot vapaista venepaikoista löytyvät varauspalvelusta. -

    - + Tyyppi: Aisapaikka +

    +
    +
    diff --git a/src/components/MobilityPlatform/Boating/Marinas/components/MarinasContent/index.js b/src/components/MobilityPlatform/Boating/Marinas/components/MarinasContent/index.js index 7603785d5..ef5d826b4 100644 --- a/src/components/MobilityPlatform/Boating/Marinas/components/MarinasContent/index.js +++ b/src/components/MobilityPlatform/Boating/Marinas/components/MarinasContent/index.js @@ -1,6 +1,3 @@ -import { withStyles } from '@mui/styles'; -import { injectIntl } from 'react-intl'; import MarinasContent from './MarinasContent'; -import styles from './styles'; -export default withStyles(styles)(injectIntl(MarinasContent)); +export default MarinasContent; diff --git a/src/components/MobilityPlatform/Boating/Marinas/components/MarinasContent/styles.js b/src/components/MobilityPlatform/Boating/Marinas/components/MarinasContent/styles.js deleted file mode 100644 index b7a71c8f1..000000000 --- a/src/components/MobilityPlatform/Boating/Marinas/components/MarinasContent/styles.js +++ /dev/null @@ -1,21 +0,0 @@ -export default theme => ({ - container: { - margin: theme.spacing(1), - }, - headerContainer: { - width: '85%', - borderBottom: '1px solid #000', - paddingBottom: theme.spacing(0.5), - }, - textContainer: { - marginTop: theme.spacing(0.5), - }, - margin: { - marginTop: theme.spacing(0.7), - }, - link: { - marginTop: theme.spacing(0.7), - color: theme.palette.link.main, - textDecoration: 'underline', - }, -}); diff --git a/src/components/MobilityPlatform/ChargerStationMarkers/components/ChargerStationContent/ChargerStationContent.js b/src/components/MobilityPlatform/ChargerStationMarkers/components/ChargerStationContent/ChargerStationContent.js index eeafc03f6..52f87dad5 100644 --- a/src/components/MobilityPlatform/ChargerStationMarkers/components/ChargerStationContent/ChargerStationContent.js +++ b/src/components/MobilityPlatform/ChargerStationMarkers/components/ChargerStationContent/ChargerStationContent.js @@ -1,26 +1,31 @@ import { Typography } from '@mui/material'; import PropTypes from 'prop-types'; import React from 'react'; +import styled from '@emotion/styled'; +import { useIntl } from 'react-intl'; +import { + StyledContainer, StyledHeaderContainer, StyledTextContainer, +} from '../../../styled/styled'; import TextComponent from '../../../TextComponent'; -const ChargerStationContent = ({ classes, intl, station }) => { - const titleTypo = (messageId, props = {}) => ( -
    +const ChargerStationContent = ({ station }) => { + const intl = useIntl(); + + const titleTypo = messageId => ( + {intl.formatMessage({ id: messageId, })} : -
    + ); - const singleValTypo = (messageId, value, props = {}) => ( -
    - - {intl.formatMessage({ id: messageId }, { value })} - -
    + const singleValTypo = (messageId, value) => ( + + {intl.formatMessage({ id: messageId }, { value })} + ); const stationName = { @@ -35,7 +40,7 @@ const ChargerStationContent = ({ classes, intl, station }) => { sv: station.address_sv, }; - const renderAdministrator = (item) => { + const renderAdministrator = item => { const stationAdmin = { fi: item.fi, en: item.en, @@ -45,10 +50,10 @@ const ChargerStationContent = ({ classes, intl, station }) => { return ; }; - const renderPayment = (paymentType, props = {}) => { + const renderPayment = paymentType => { const toLower = paymentType.toLowerCase(); return ( -
    + {intl.formatMessage({ id: @@ -57,7 +62,7 @@ const ChargerStationContent = ({ classes, intl, station }) => { : 'mobilityPlatform.chargerStations.content.free', })} -
    + ); }; @@ -66,38 +71,60 @@ const ChargerStationContent = ({ classes, intl, station }) => { <> {station.address ? : null} {station.extra.administrator.fi !== '' ? renderAdministrator(station.extra.administrator) : null} - {renderPayment(station.extra.payment, { className: classes.margin })} - {titleTypo('mobilityPlatform.content.chargersTitle', { className: classes.margin })} + {renderPayment(station.extra.payment)} + {titleTypo('mobilityPlatform.content.chargersTitle')} {station.extra.chargers && station.extra.chargers.length > 0 ? station.extra.chargers.map(charger => ( -
    + {singleValTypo('mobilityPlatform.content.cgsType', charger.plug)} {singleValTypo('mobilityPlatform.content.count', charger.number)} {intl.formatMessage({ id: 'mobilityPlatform.content.power' }, { value: charger.power })} -
    + )) : null} ); return ( -
    -
    + + -
    -
    - {chargerStationInfo} -
    -
    + +
    {chargerStationInfo}
    + ); }; +const StyledContentInner = styled.div(({ theme }) => ({ + marginLeft: theme.spacing(1), + marginBottom: theme.spacing(1), +})); + ChargerStationContent.propTypes = { - classes: PropTypes.objectOf(PropTypes.any).isRequired, - intl: PropTypes.objectOf(PropTypes.any).isRequired, - station: PropTypes.objectOf(PropTypes.any), + station: PropTypes.shape({ + address: PropTypes.string, + address_fi: PropTypes.string, + address_en: PropTypes.string, + address_sv: PropTypes.string, + name: PropTypes.string, + name_en: PropTypes.string, + name_sv: PropTypes.string, + extra: PropTypes.shape({ + payment: PropTypes.string, + administrator: PropTypes.shape({ + fi: PropTypes.string, + }), + chargers: PropTypes.arrayOf( + PropTypes.shape({ + plug: PropTypes.string, + number: PropTypes.string, + power: PropTypes.string, + }), + ), + }), + }), }; ChargerStationContent.defaultProps = { diff --git a/src/components/MobilityPlatform/ChargerStationMarkers/components/ChargerStationContent/__tests__/__snapshots__/ChargerStationContent.test.js.snap b/src/components/MobilityPlatform/ChargerStationMarkers/components/ChargerStationContent/__tests__/__snapshots__/ChargerStationContent.test.js.snap index a0375f274..1b3ce8c58 100644 --- a/src/components/MobilityPlatform/ChargerStationMarkers/components/ChargerStationContent/__tests__/__snapshots__/ChargerStationContent.test.js.snap +++ b/src/components/MobilityPlatform/ChargerStationMarkers/components/ChargerStationContent/__tests__/__snapshots__/ChargerStationContent.test.js.snap @@ -3,13 +3,13 @@ exports[` should match snapshot 1`] = `

    should match snapshot 1`] = `

    -
    +

    should match snapshot 1`] = `

    should match snapshot 1`] = `

    should match snapshot 1`] = `

    should match snapshot 1`] = `

    -
    +

    Sähkölatausaseman tyyppi: CCS

    -
    +

    diff --git a/src/components/MobilityPlatform/ChargerStationMarkers/components/ChargerStationContent/index.js b/src/components/MobilityPlatform/ChargerStationMarkers/components/ChargerStationContent/index.js index df2828ca2..9f82ac180 100644 --- a/src/components/MobilityPlatform/ChargerStationMarkers/components/ChargerStationContent/index.js +++ b/src/components/MobilityPlatform/ChargerStationMarkers/components/ChargerStationContent/index.js @@ -1,6 +1,3 @@ -import { withStyles } from '@mui/styles'; -import { injectIntl } from 'react-intl'; import ChargerStationContent from './ChargerStationContent'; -import styles from './styles'; -export default withStyles(styles)(injectIntl(ChargerStationContent)); +export default ChargerStationContent; diff --git a/src/components/MobilityPlatform/ChargerStationMarkers/components/ChargerStationContent/styles.js b/src/components/MobilityPlatform/ChargerStationMarkers/components/ChargerStationContent/styles.js deleted file mode 100644 index 6818cfb53..000000000 --- a/src/components/MobilityPlatform/ChargerStationMarkers/components/ChargerStationContent/styles.js +++ /dev/null @@ -1,20 +0,0 @@ -export default theme => ({ - container: { - margin: theme.spacing(1), - }, - headerContainer: { - width: '85%', - borderBottom: '1px solid #000', - paddingBottom: theme.spacing(0.5), - }, - textContainer: { - marginTop: theme.spacing(0.5), - }, - contentInner: { - marginLeft: theme.spacing(1), - marginBottom: theme.spacing(1), - }, - margin: { - margin: theme.spacing(0.4), - }, -}); diff --git a/src/components/MobilityPlatform/CityBikes/components/CityBikesContent/CityBikesContent.js b/src/components/MobilityPlatform/CityBikes/components/CityBikesContent/CityBikesContent.js index 3e238fc14..6b7c91fee 100644 --- a/src/components/MobilityPlatform/CityBikes/components/CityBikesContent/CityBikesContent.js +++ b/src/components/MobilityPlatform/CityBikes/components/CityBikesContent/CityBikesContent.js @@ -1,10 +1,14 @@ import { Link, Typography } from '@mui/material'; import PropTypes from 'prop-types'; import React from 'react'; +import { useIntl } from 'react-intl'; +import styled from '@emotion/styled'; +import { + StyledContainer, StyledHeaderContainer, StyledTextContainer, StyledBoldText, +} from '../../../styled/styled'; -const CityBikesContent = ({ - classes, intl, bikeStation, cityBikeStatistics, -}) => { +const CityBikesContent = ({ bikeStation, cityBikeStatistics }) => { + const intl = useIntl(); const getStationType = () => bikeStation.name.includes('eCargo bikes'); const isCargoBike = getStationType(); @@ -19,9 +23,9 @@ const CityBikesContent = ({ const stationItem = getStation(cityBikeStatistics); const renderText = (translationId, value) => ( -

    + {intl.formatMessage({ id: translationId }, { value })} -
    + ); /** Remove 'eCargo bikes' from station name before render */ @@ -31,21 +35,21 @@ const CityBikesContent = ({ }; const renderLink = (linkUrl, text) => ( -
    + - + {text} - + -
    + ); const renderStationType = (isVirtual, translationId) => { if (isVirtual) { return ( -
    + {intl.formatMessage({ id: translationId })} -
    + ); } return null; @@ -54,14 +58,14 @@ const CityBikesContent = ({ const getNumberOfVacantPlaces = (capacity, numberOfBikes) => capacity - numberOfBikes; return ( -
    -
    + + {intl.formatMessage({ id: isCargoBike ? 'mobilityPlatform.content.cargoBikes.title' : 'mobilityPlatform.content.cityBikes.title', })} -
    + {isCargoBike ? renderText('mobilityPlatform.content.cityBikes.name', formatStationName(bikeStation.name)) : renderText('mobilityPlatform.content.cityBikes.name', bikeStation.name)} @@ -86,23 +90,24 @@ const CityBikesContent = ({ )) : null}
    -
    - + + {intl.formatMessage({ id: 'mobilityPlatform.content.general.rentalUris' })} : - -
    + + {renderLink(bikeStation.rental_uris.android, 'Android')} {renderLink(bikeStation.rental_uris.ios, 'iOS')} -
    + ); }; +const StyledLinkText = styled(Typography)(({ theme }) => ({ + color: theme.palette.link.main, + textDecoration: 'underline', +})); + CityBikesContent.propTypes = { - intl: PropTypes.shape({ - formatMessage: PropTypes.func, - }).isRequired, - classes: PropTypes.objectOf(PropTypes.string).isRequired, bikeStation: PropTypes.shape({ station_id: PropTypes.string, name: PropTypes.string, diff --git a/src/components/MobilityPlatform/CityBikes/components/CityBikesContent/__tests__/__snapshots__/CityBikesContent.test.js.snap b/src/components/MobilityPlatform/CityBikes/components/CityBikesContent/__tests__/__snapshots__/CityBikesContent.test.js.snap index 3dd153c4c..f6fb4e386 100644 --- a/src/components/MobilityPlatform/CityBikes/components/CityBikesContent/__tests__/__snapshots__/CityBikesContent.test.js.snap +++ b/src/components/MobilityPlatform/CityBikes/components/CityBikesContent/__tests__/__snapshots__/CityBikesContent.test.js.snap @@ -3,10 +3,10 @@ exports[` should work 1`] = `

    should work 1`] = `

    should work 1`] = `

    should work 1`] = `

    should work 1`] = `

    should work 1`] = `

    Varauslinkit :

    should work 1`] = ` target="_blank" > diff --git a/src/components/MobilityPlatform/CityBikes/components/CityBikesContent/index.js b/src/components/MobilityPlatform/CityBikes/components/CityBikesContent/index.js index 02e8bbfb7..7b70b4508 100644 --- a/src/components/MobilityPlatform/CityBikes/components/CityBikesContent/index.js +++ b/src/components/MobilityPlatform/CityBikes/components/CityBikesContent/index.js @@ -1,6 +1,3 @@ -import { withStyles } from '@mui/styles'; -import { injectIntl } from 'react-intl'; import CityBikesContent from './CityBikesContent'; -import styles from './styles'; -export default withStyles(styles)(injectIntl(CityBikesContent)); +export default CityBikesContent; diff --git a/src/components/MobilityPlatform/CityBikes/components/CityBikesContent/styles.js b/src/components/MobilityPlatform/CityBikes/components/CityBikesContent/styles.js deleted file mode 100644 index ce800f972..000000000 --- a/src/components/MobilityPlatform/CityBikes/components/CityBikesContent/styles.js +++ /dev/null @@ -1,21 +0,0 @@ -export default theme => ({ - popupInner: { - margin: theme.spacing(2), - }, - subtitle: { - marginBottom: theme.spacing(1), - paddingBottom: theme.spacing(0.5), - borderBottom: '1px solid #000000', - width: '88%', - }, - paragraph: { - marginBottom: theme.spacing(0.4), - }, - bold: { - fontWeight: 'bold', - }, - link: { - color: theme.palette.link.main, - textDecoration: 'underline', - }, -}); diff --git a/src/components/MobilityPlatform/CultureRoutes/components/CultureRouteUnits/CultureRouteUnits.js b/src/components/MobilityPlatform/CultureRoutes/components/CultureRouteUnits/CultureRouteUnits.js index 73031c6e2..92ea6375e 100644 --- a/src/components/MobilityPlatform/CultureRoutes/components/CultureRouteUnits/CultureRouteUnits.js +++ b/src/components/MobilityPlatform/CultureRoutes/components/CultureRouteUnits/CultureRouteUnits.js @@ -5,6 +5,7 @@ import React from 'react'; import { useIntl } from 'react-intl'; import { useMap } from 'react-leaflet'; import { useSelector } from 'react-redux'; +import styled from '@emotion/styled'; import routeUnitIcon from 'servicemap-ui-turku/assets/icons/icons-icon_culture_route.svg'; import routeUnitIconBw from 'servicemap-ui-turku/assets/icons/contrast/icons-icon_culture_route-bw.svg'; import { useMobilityPlatformContext } from '../../../../../context/MobilityPlatformContext'; @@ -12,7 +13,7 @@ import { useAccessibleMap } from '../../../../../redux/selectors/settings'; import { createIcon } from '../../../utils/utils'; import useLocaleText from '../../../../../utils/useLocaleText'; -const CultureRouteUnits = ({ classes, cultureRouteUnits }) => { +const CultureRouteUnits = ({ cultureRouteUnits }) => { const { cultureRouteId } = useMobilityPlatformContext(); const intl = useIntl(); @@ -34,7 +35,7 @@ const CultureRouteUnits = ({ classes, cultureRouteUnits }) => { } }; - const filterRouteUnits = (data) => { + const filterRouteUnits = data => { if (data && data.length > 0) { return data.filter(item => item.mobile_unit_group.id === cultureRouteId); } @@ -91,41 +92,76 @@ const CultureRouteUnits = ({ classes, cultureRouteUnits }) => { * It is easier to make a custom close button than to edit the default close button */ - return ( - <> - {activeCultureRouteUnits + return (activeCultureRouteUnits && activeCultureRouteUnits.length > 0 ? ( - activeCultureRouteUnits.map(item => ( - - -
    -
    - - {getRouteUnitName(item.name, item.name_en, item.name_sv)} - - closePopup()} className={classes.popupCloseButton}> - - -
    -
    - {renderDescription( - item.description, - item.description_en, - item.description_sv, - )} -
    -
    -
    -
    - )) - ) : null} - + activeCultureRouteUnits.map(item => ( + + + + + + {getRouteUnitName(item.name, item.name_en, item.name_sv)} + + closePopup()}> + + + +
    + {renderDescription( + item.description, + item.description_en, + item.description_sv, + )} +
    +
    +
    +
    + )) + ) : null ); }; +const StyledContent = styled.div(({ theme }) => ({ + padding: theme.spacing(1.5), +})); + +const StyledHeader = styled.div(({ theme }) => ({ + width: '98%', + marginBottom: theme.spacing(1), + borderBottom: '1px solid rgba(0, 0, 0, 255)', + display: 'flex', + flexDirection: 'row', + justifyContent: 'space-between', + alignItems: 'center', +})); + +const StyledButton = styled(ButtonBase)(({ theme }) => ({ + padding: theme.spacing(1), + '&:hover': { + cursor: 'pointer', + borderRadius: '5px', + border: '1px solid rgba(0, 0, 0, 255)', + }, +})); + +const StyledCloseIcon = styled(Close)(() => ({ + fontSize: '1.25rem', + width: '1.25rem', + height: '1.25rem', + lineHeight: '1.4rem', +})); + CultureRouteUnits.propTypes = { - classes: PropTypes.objectOf(PropTypes.any).isRequired, - cultureRouteUnits: PropTypes.arrayOf(PropTypes.any), + cultureRouteUnits: PropTypes.arrayOf(PropTypes.shape({ + id: PropTypes.string, + name_fi: PropTypes.string, + name_en: PropTypes.string, + name_sv: PropTypes.string, + description: PropTypes.string, + description_en: PropTypes.string, + description_sv: PropTypes.string, + geometry_coords: PropTypes.objectOf(PropTypes.number), + })), }; CultureRouteUnits.defaultProps = { diff --git a/src/components/MobilityPlatform/CultureRoutes/components/CultureRouteUnits/index.js b/src/components/MobilityPlatform/CultureRoutes/components/CultureRouteUnits/index.js index ee8fd8413..f7a18e99a 100644 --- a/src/components/MobilityPlatform/CultureRoutes/components/CultureRouteUnits/index.js +++ b/src/components/MobilityPlatform/CultureRoutes/components/CultureRouteUnits/index.js @@ -1,6 +1,3 @@ -import { withStyles } from '@mui/styles'; -import { injectIntl } from 'react-intl'; import CultureRouteUnits from './CultureRouteUnits'; -import styles from './styles'; -export default injectIntl(withStyles(styles)(CultureRouteUnits)); +export default CultureRouteUnits; diff --git a/src/components/MobilityPlatform/CultureRoutes/components/CultureRouteUnits/styles.js b/src/components/MobilityPlatform/CultureRoutes/components/CultureRouteUnits/styles.js deleted file mode 100644 index 0614ca5df..000000000 --- a/src/components/MobilityPlatform/CultureRoutes/components/CultureRouteUnits/styles.js +++ /dev/null @@ -1,28 +0,0 @@ -export default theme => ({ - popupInner: { - padding: theme.spacing(1.5), - }, - header: { - width: '98%', - marginBottom: theme.spacing(1), - borderBottom: '1px solid rgba(0, 0, 0, 255)', - display: 'flex', - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - }, - popupCloseButton: { - padding: theme.spacing(1), - '&:hover': { - cursor: 'pointer', - borderRadius: '5px', - border: '1px solid rgba(0, 0, 0, 255)', - }, - }, - closeIcon: { - fontSize: '1.25rem', - width: '1.25rem', - height: '1.25rem', - lineHeight: '1.4rem', - }, -}); diff --git a/src/components/MobilityPlatform/GasFillingStationMarkers/components/GasFillingStationContent/GasFillingStationContent.js b/src/components/MobilityPlatform/GasFillingStationMarkers/components/GasFillingStationContent/GasFillingStationContent.js index 66cc420ef..c2dd3f5a2 100644 --- a/src/components/MobilityPlatform/GasFillingStationMarkers/components/GasFillingStationContent/GasFillingStationContent.js +++ b/src/components/MobilityPlatform/GasFillingStationMarkers/components/GasFillingStationContent/GasFillingStationContent.js @@ -1,42 +1,53 @@ import { Typography } from '@mui/material'; import PropTypes from 'prop-types'; import React from 'react'; +import { useIntl } from 'react-intl'; +import { + StyledContainer, StyledHeaderContainer, StyledTextContainer, +} from '../../../styled/styled'; -const GasFillingStationContent = ({ classes, intl, station }) => { - const singleValTypo = (messageId, value, props = {}) => ( -
    +const GasFillingStationContent = ({ station }) => { + const intl = useIntl(); + + const singleValTypo = (messageId, value) => ( + {intl.formatMessage({ id: messageId }, { value })} -
    + ); const gasFillingStationInfo = ( <> - {singleValTypo('mobilityPlatform.content.address', station.address, { className: classes.margin })} - {singleValTypo('mobilityPlatform.content.gfsType', station.extra.lng_cng, { className: classes.margin })} - {singleValTypo('mobilityPlatform.content.operator', station.extra.operator, { className: classes.margin })} + {singleValTypo('mobilityPlatform.content.address', station.address)} + {singleValTypo('mobilityPlatform.content.gfsType', station.extra.lng_cng)} + {singleValTypo('mobilityPlatform.content.operator', station.extra.operator)} ); return ( -
    -
    + + {station.name} -
    -
    + +
    {gasFillingStationInfo}
    -
    + ); }; GasFillingStationContent.propTypes = { - classes: PropTypes.objectOf(PropTypes.any).isRequired, - intl: PropTypes.objectOf(PropTypes.any).isRequired, - station: PropTypes.objectOf(PropTypes.any), + station: PropTypes.shape({ + name: PropTypes.string, + address: PropTypes.string, + extra: PropTypes.shape({ + operator: PropTypes.string, + lng_cng: PropTypes.string, + }), + }), }; GasFillingStationContent.defaultProps = { diff --git a/src/components/MobilityPlatform/GasFillingStationMarkers/components/GasFillingStationContent/__tests__/__snapshots__/GasFillingStationContent.test.js.snap b/src/components/MobilityPlatform/GasFillingStationMarkers/components/GasFillingStationContent/__tests__/__snapshots__/GasFillingStationContent.test.js.snap index d47f24580..c4267d6bb 100644 --- a/src/components/MobilityPlatform/GasFillingStationMarkers/components/GasFillingStationContent/__tests__/__snapshots__/GasFillingStationContent.test.js.snap +++ b/src/components/MobilityPlatform/GasFillingStationMarkers/components/GasFillingStationContent/__tests__/__snapshots__/GasFillingStationContent.test.js.snap @@ -3,10 +3,10 @@ exports[` should match snapshot 1`] = `

    should match snapshot 1`] = ` Testinimi

    -
    +

    should match snapshot 1`] = `

    should match snapshot 1`] = `

    ({ - container: { - margin: theme.spacing(1), - }, - headerContainer: { - width: '85%', - borderBottom: '1px solid #000', - paddingBottom: theme.spacing(0.5), - }, - textContainer: { - marginTop: theme.spacing(0.5), - }, - contentInner: { - marginLeft: theme.spacing(1), - marginBottom: theme.spacing(1), - }, - margin: { - margin: theme.spacing(0.4), - }, -}); diff --git a/src/components/MobilityPlatform/InfoTextBox/InfoTextBox.js b/src/components/MobilityPlatform/InfoTextBox/InfoTextBox.js index 9dea299ce..cc65dd73b 100644 --- a/src/components/MobilityPlatform/InfoTextBox/InfoTextBox.js +++ b/src/components/MobilityPlatform/InfoTextBox/InfoTextBox.js @@ -1,36 +1,47 @@ import { Link, Typography } from '@mui/material'; import PropTypes from 'prop-types'; import React from 'react'; +import { useIntl } from 'react-intl'; +import styled from '@emotion/styled'; +import { StyledLinkText } from '../styled/styled'; const InfoTextBox = ({ - classes, intl, infoText, linkUrl, linkText, reducePadding, -}) => ( -

    - - {intl.formatMessage({ - id: infoText, - })} - - {linkUrl ? ( - - - {intl.formatMessage({ - id: linkText, - })} - - - ) : null} -
    -); + infoText, linkUrl, linkText, reducePadding, +}) => { + const intl = useIntl(); + + return ( + + + {intl.formatMessage({ + id: infoText, + })} + + {linkUrl ? ( + + + {intl.formatMessage({ + id: linkText, + })} + + + ) : null} + + ); +}; + +const StyledContainer = styled.div(({ reducePadding }) => ({ + textAlign: 'left', + borderTop: '1px solid rgb(193, 193, 193)', + padding: reducePadding ? '0.5rem 0.5rem 0.5rem 0' : '1rem', +})); InfoTextBox.propTypes = { - classes: PropTypes.objectOf(PropTypes.any).isRequired, - intl: PropTypes.objectOf(PropTypes.any).isRequired, infoText: PropTypes.string, linkUrl: PropTypes.string, linkText: PropTypes.string, diff --git a/src/components/MobilityPlatform/InfoTextBox/__tests__/__snapshots__/InfoTextBox.test.js.snap b/src/components/MobilityPlatform/InfoTextBox/__tests__/__snapshots__/InfoTextBox.test.js.snap index d29f9467f..82ecb8774 100644 --- a/src/components/MobilityPlatform/InfoTextBox/__tests__/__snapshots__/InfoTextBox.test.js.snap +++ b/src/components/MobilityPlatform/InfoTextBox/__tests__/__snapshots__/InfoTextBox.test.js.snap @@ -3,7 +3,7 @@ exports[` should work 1`] = `

    ({ - container: { - textAlign: 'left', - borderTop: 'rgb(193, 193, 193)', - }, - link: { - marginTop: theme.spacing(0.5), - color: theme.palette.link.main, - textDecoration: 'underline', - }, - padding: { - padding: theme.spacing(2), - }, - paddingSm: { - padding: '1rem 0.5rem 0.5rem 0', - }, -}); diff --git a/src/components/MobilityPlatform/LoadingPlaces/components/LoadingPlacesContent/LoadingPlacesContent.js b/src/components/MobilityPlatform/LoadingPlaces/components/LoadingPlacesContent/LoadingPlacesContent.js index c6c73ed21..cee4e16d0 100644 --- a/src/components/MobilityPlatform/LoadingPlaces/components/LoadingPlacesContent/LoadingPlacesContent.js +++ b/src/components/MobilityPlatform/LoadingPlaces/components/LoadingPlacesContent/LoadingPlacesContent.js @@ -1,8 +1,10 @@ import PropTypes from 'prop-types'; import React from 'react'; +import styled from '@emotion/styled'; import TextComponent from '../../../TextComponent'; +import { StyledContainer, StyledHeaderContainer } from '../../../styled/styled'; -const LoadingPlacesContent = ({ classes, item }) => { +const LoadingPlacesContent = ({ item }) => { const loadingPlaceName = { fi: item.name_fi, en: item.name_en, @@ -16,29 +18,42 @@ const LoadingPlacesContent = ({ classes, item }) => { }; const loadingPlaceInfo = ( -

    -
    + + -
    -
    - {item.address_fi !== '' ? : null} + + + {item.address_fi !== '' ? ( + + ) : null} -
    -
    + + ); - return ( -
    - {loadingPlaceInfo} -
    - ); + return loadingPlaceInfo; }; +const StyledMargin = styled.div(({ theme }) => ({ + marginTop: theme.spacing(0.5), +})); + LoadingPlacesContent.propTypes = { - classes: PropTypes.objectOf(PropTypes.any).isRequired, - item: PropTypes.objectOf(PropTypes.any), + item: PropTypes.shape({ + address_fi: PropTypes.string, + address_en: PropTypes.string, + address_sv: PropTypes.string, + name_fi: PropTypes.string, + name_en: PropTypes.string, + name_sv: PropTypes.string, + extra: PropTypes.shape({ + lastauspiste: PropTypes.objectOf(PropTypes.string), + Saavutettavuus: PropTypes.objectOf(PropTypes.string), + rajoitustyyppi: PropTypes.objectOf(PropTypes.string), + }), + }), }; LoadingPlacesContent.defaultProps = { diff --git a/src/components/MobilityPlatform/LoadingPlaces/components/LoadingPlacesContent/__tests__/__snapshots__/LoadingPlacesContent.test.js.snap b/src/components/MobilityPlatform/LoadingPlaces/components/LoadingPlacesContent/__tests__/__snapshots__/LoadingPlacesContent.test.js.snap index 6255fb781..9331cc177 100644 --- a/src/components/MobilityPlatform/LoadingPlaces/components/LoadingPlacesContent/__tests__/__snapshots__/LoadingPlacesContent.test.js.snap +++ b/src/components/MobilityPlatform/LoadingPlaces/components/LoadingPlacesContent/__tests__/__snapshots__/LoadingPlacesContent.test.js.snap @@ -3,63 +3,59 @@ exports[` should match snapshot 1`] = `
    -
    -

    - Testi -

    -
    + Testi +

    +
    +
    -
    -

    - Osoite: Testikatu -

    -
    -
    +
    +
    +

    -

    - Testi -

    -
    -
    +
    +
    +

    -

    - Testitieto -

    -
    -
    +
    +
    +

    -

    - Testitieto -

    -
    + Testitieto +

    diff --git a/src/components/MobilityPlatform/LoadingPlaces/components/LoadingPlacesContent/index.js b/src/components/MobilityPlatform/LoadingPlaces/components/LoadingPlacesContent/index.js index 912db4a7b..e18b49684 100644 --- a/src/components/MobilityPlatform/LoadingPlaces/components/LoadingPlacesContent/index.js +++ b/src/components/MobilityPlatform/LoadingPlaces/components/LoadingPlacesContent/index.js @@ -1,5 +1,3 @@ -import { withStyles } from '@mui/styles'; import LoadingPlacesContent from './LoadingPlacesContent'; -import styles from './styles'; -export default withStyles(styles)(LoadingPlacesContent); +export default LoadingPlacesContent; diff --git a/src/components/MobilityPlatform/LoadingPlaces/components/LoadingPlacesContent/styles.js b/src/components/MobilityPlatform/LoadingPlaces/components/LoadingPlacesContent/styles.js deleted file mode 100644 index a3d8089ef..000000000 --- a/src/components/MobilityPlatform/LoadingPlaces/components/LoadingPlacesContent/styles.js +++ /dev/null @@ -1,23 +0,0 @@ -export default theme => ({ - container: { - margin: theme.spacing(1), - }, - headerContainer: { - width: '85%', - borderBottom: '1px solid #000', - paddingBottom: theme.spacing(0.5), - }, - textContainer: { - marginTop: theme.spacing(0.5), - }, - contentInner: { - marginLeft: theme.spacing(1), - marginBottom: theme.spacing(1), - }, - margin: { - margin: theme.spacing(0.4), - }, - marginTop: { - marginTop: theme.spacing(0.4), - }, -}); diff --git a/src/components/MobilityPlatform/MarkerComponent/MarkerComponent.js b/src/components/MobilityPlatform/MarkerComponent/MarkerComponent.js index 0ea38cf7d..4b09be32a 100644 --- a/src/components/MobilityPlatform/MarkerComponent/MarkerComponent.js +++ b/src/components/MobilityPlatform/MarkerComponent/MarkerComponent.js @@ -1,26 +1,29 @@ import React from 'react'; import { PropTypes } from 'prop-types'; +import { StyledPopupWrapper, StyledPopupInner } from '../styled/styled'; -const MarkerComponent = ({ - classes, item, icon, children, -}) => { +const MarkerComponent = ({ item, icon, children }) => { const { Marker, Popup } = global.rL; return ( -
    + -
    {children}
    + {children}
    -
    +
    ); }; MarkerComponent.propTypes = { - classes: PropTypes.objectOf(PropTypes.any).isRequired, - item: PropTypes.objectOf(PropTypes.any), - icon: PropTypes.objectOf(PropTypes.any).isRequired, + item: PropTypes.shape({ + geometry_coords: PropTypes.objectOf(PropTypes.number), + }), + icon: PropTypes.shape({ + path: PropTypes.string, + viewBox: PropTypes.string, + }).isRequired, children: PropTypes.node, }; diff --git a/src/components/MobilityPlatform/MarkerComponent/index.js b/src/components/MobilityPlatform/MarkerComponent/index.js index 7582480e2..a5c880fab 100644 --- a/src/components/MobilityPlatform/MarkerComponent/index.js +++ b/src/components/MobilityPlatform/MarkerComponent/index.js @@ -1,5 +1,3 @@ -import { withStyles } from '@mui/styles'; import MarkerComponent from './MarkerComponent'; -import styles from './styles'; -export default withStyles(styles)(MarkerComponent); +export default MarkerComponent; diff --git a/src/components/MobilityPlatform/MarkerComponent/styles.js b/src/components/MobilityPlatform/MarkerComponent/styles.js deleted file mode 100644 index de9de2381..000000000 --- a/src/components/MobilityPlatform/MarkerComponent/styles.js +++ /dev/null @@ -1,17 +0,0 @@ -const styles = theme => ({ - popupWrapper: { - position: 'absolute', - textAlign: 'center', - marginBottom: theme.spacing(2), - width: '429px', - }, - popupInner: { - borderRadius: '3px', - marginBottom: theme.spacing(0.5), - marginLeft: theme.spacing(0.8), - lineHeight: 1.2, - overflowX: 'hidden', - }, -}); - -export default styles; diff --git a/src/components/MobilityPlatform/OutdoorGymDevices/components/OutdoorGymDevicesContent/OutdoorGymDevicesContent.js b/src/components/MobilityPlatform/OutdoorGymDevices/components/OutdoorGymDevicesContent/OutdoorGymDevicesContent.js index f79a6068f..55d5ca764 100644 --- a/src/components/MobilityPlatform/OutdoorGymDevices/components/OutdoorGymDevicesContent/OutdoorGymDevicesContent.js +++ b/src/components/MobilityPlatform/OutdoorGymDevices/components/OutdoorGymDevicesContent/OutdoorGymDevicesContent.js @@ -1,8 +1,9 @@ import PropTypes from 'prop-types'; import React from 'react'; +import { StyledContainer, StyledHeaderContainer } from '../../../styled/styled'; import TextComponent from '../../../TextComponent'; -const OutdoorGymDevicesContent = ({ classes, item }) => { +const OutdoorGymDevicesContent = ({ item }) => { const deviceName = { fi: item.name_fi, en: item.name_en, @@ -22,21 +23,30 @@ const OutdoorGymDevicesContent = ({ classes, item }) => { }; return ( -
    -
    + + -
    -
    + +
    {item.address_fi !== '' ? : null}
    -
    + ); }; OutdoorGymDevicesContent.propTypes = { - classes: PropTypes.objectOf(PropTypes.any).isRequired, - item: PropTypes.objectOf(PropTypes.any), + item: PropTypes.shape({ + address_fi: PropTypes.string, + address_en: PropTypes.string, + address_sv: PropTypes.string, + name_fi: PropTypes.string, + name_en: PropTypes.string, + name_sv: PropTypes.string, + description_fi: PropTypes.string, + description_en: PropTypes.string, + description_sv: PropTypes.string, + }), }; OutdoorGymDevicesContent.defaultProps = { diff --git a/src/components/MobilityPlatform/OutdoorGymDevices/components/OutdoorGymDevicesContent/__tests__/__snapshots__/OutdoorGymDevicesContent.test.js.snap b/src/components/MobilityPlatform/OutdoorGymDevices/components/OutdoorGymDevicesContent/__tests__/__snapshots__/OutdoorGymDevicesContent.test.js.snap index c75d55db3..82495c953 100644 --- a/src/components/MobilityPlatform/OutdoorGymDevices/components/OutdoorGymDevicesContent/__tests__/__snapshots__/OutdoorGymDevicesContent.test.js.snap +++ b/src/components/MobilityPlatform/OutdoorGymDevices/components/OutdoorGymDevicesContent/__tests__/__snapshots__/OutdoorGymDevicesContent.test.js.snap @@ -3,13 +3,13 @@ exports[` should match snapshot 1`] = `

    should match snapshot 1`] = `

    -
    +

    should match snapshot 1`] = `

    ({ - container: { - margin: theme.spacing(1), - }, - headerContainer: { - width: '85%', - borderBottom: '1px solid #000', - paddingBottom: theme.spacing(0.5), - }, - textContainer: { - marginTop: theme.spacing(0.5), - }, - contentInner: { - marginLeft: theme.spacing(1), - marginBottom: theme.spacing(1), - }, - margin: { - margin: theme.spacing(0.4), - }, - marginTop: { - marginTop: theme.spacing(0.4), - }, -}); diff --git a/src/components/MobilityPlatform/ParkAndRideStops/ParkAndRideBikes/components/ParkAndRideBikesContent/ParkAndRideBikesContent.js b/src/components/MobilityPlatform/ParkAndRideStops/ParkAndRideBikes/components/ParkAndRideBikesContent/ParkAndRideBikesContent.js index 1f8c0e682..32405b8e1 100644 --- a/src/components/MobilityPlatform/ParkAndRideStops/ParkAndRideBikes/components/ParkAndRideBikesContent/ParkAndRideBikesContent.js +++ b/src/components/MobilityPlatform/ParkAndRideStops/ParkAndRideBikes/components/ParkAndRideBikesContent/ParkAndRideBikesContent.js @@ -1,8 +1,8 @@ import PropTypes from 'prop-types'; import React from 'react'; -import styled from '@emotion/styled'; import { Typography } from '@mui/material'; import { useIntl } from 'react-intl'; +import { StyledContainer, StyledHeaderContainer, StyledTextContainer } from '../../../../styled/styled'; import TextComponent from '../../../../TextComponent'; const ParkAndRideBikesContent = ({ item }) => { @@ -36,40 +36,22 @@ const ParkAndRideBikesContent = ({ item }) => { - - +

    + {intl.formatMessage({ id: 'mobilityPlatform.parkAndRide.content.subtitle' })} - + {item.address_fi !== '' ? ( ) : null} - +
    ); return {parkAndRideInfo}; }; -const StyledContainer = styled.div(({ theme }) => ({ - margin: theme.spacing(1), -})); - -const StyledHeaderContainer = styled.div(({ theme }) => ({ - width: '85%', - borderBottom: '1px solid #000', - paddingBottom: theme.spacing(0.5), -})); - -const StyledTextContainer = styled.div(({ theme }) => ({ - marginTop: theme.spacing(0.5), -})); - -const StyledMargin = styled.div(({ theme }) => ({ - margin: theme.spacing(0.4), -})); - ParkAndRideBikesContent.propTypes = { item: PropTypes.shape({ name_fi: PropTypes.string, diff --git a/src/components/MobilityPlatform/ParkAndRideStops/ParkAndRideBikes/components/ParkAndRideBikesContent/__tests__/__snapshots__/ParkAndRideBikesContent.test.js.snap b/src/components/MobilityPlatform/ParkAndRideStops/ParkAndRideBikes/components/ParkAndRideBikesContent/__tests__/__snapshots__/ParkAndRideBikesContent.test.js.snap index 2cfb04334..7fefbc7b6 100644 --- a/src/components/MobilityPlatform/ParkAndRideStops/ParkAndRideBikes/components/ParkAndRideBikesContent/__tests__/__snapshots__/ParkAndRideBikesContent.test.js.snap +++ b/src/components/MobilityPlatform/ParkAndRideStops/ParkAndRideBikes/components/ParkAndRideBikesContent/__tests__/__snapshots__/ParkAndRideBikesContent.test.js.snap @@ -12,7 +12,7 @@ exports[` should work 1`] = ` class="css-1dznbe2" >

    should work 1`] = `

    -
    +

    should work 1`] = `

    { +const DisabledParkingContent = ({ item }) => { + const intl = useIntl(); const getLocaleText = useLocaleText(); - const renderAccessInfo = (accessValue) => { + const renderAccessInfo = accessValue => { const accessValueLower = accessValue.toLowerCase(); if (accessValueLower === 'vapaa paasy') { return ( - - {intl.formatMessage({ id: 'mobilityPlatform.content.publicParking.access' })} - + + + {intl.formatMessage({ id: 'mobilityPlatform.content.publicParking.access' })} + + ); } if (accessValueLower === 'portti') { return ( - - {intl.formatMessage({ id: 'mobilityPlatform.content.publicParking.access.gate' })} - + + + {intl.formatMessage({ id: 'mobilityPlatform.content.publicParking.access.gate' })} + + ); } return null; }; - const renderText = (msgId, value, props = {}) => ( -

    + const renderText = (msgId, value) => ( + {intl.formatMessage({ id: msgId }, { value })} -
    + ); const parkingAreaAddress = { @@ -37,33 +44,38 @@ const DisabledParkingContent = ({ classes, intl, item }) => { sv: item.address_sv, }; - const renderAddress = () => renderText('mobilityPlatform.content.address', getLocaleText(parkingAreaAddress), { className: classes.margin }); + const renderAddress = () => renderText('mobilityPlatform.content.address', getLocaleText(parkingAreaAddress)); return ( -
    -
    + + {intl.formatMessage({ id: 'mobilityPlatform.content.disabledParking.title' })} -
    -
    + +
    {renderAddress()} - {renderText('mobilityPlatform.content.disabledParking.amount', item.extra.invapaikkoja, { - className: classes.margin, - })} -
    + {renderText('mobilityPlatform.content.disabledParking.amount', item.extra.invapaikkoja)} + {getLocaleText(item.extra.rajoitustyyppi)} -
    -
    {renderAccessInfo(item.extra.saavutettavuus.fi)}
    + + {renderAccessInfo(item.extra.saavutettavuus.fi)}
    -
    + ); }; DisabledParkingContent.propTypes = { - classes: PropTypes.objectOf(PropTypes.any).isRequired, - intl: PropTypes.objectOf(PropTypes.any).isRequired, - item: PropTypes.objectOf(PropTypes.any), + item: PropTypes.shape({ + address_fi: PropTypes.string, + address_en: PropTypes.string, + address_sv: PropTypes.string, + extra: PropTypes.shape({ + invapaikkoja: PropTypes.number, + rajoitustyyppi: PropTypes.objectOf(PropTypes.string), + saavutettavuus: PropTypes.objectOf(PropTypes.string), + }), + }), }; DisabledParkingContent.defaultProps = { diff --git a/src/components/MobilityPlatform/Parking/DisabledParking/components/DisabledParkingContent/__tests__/__snapshots__/DisabledParkingContent.test.js.snap b/src/components/MobilityPlatform/Parking/DisabledParking/components/DisabledParkingContent/__tests__/__snapshots__/DisabledParkingContent.test.js.snap index 4da4f4016..a9816bdef 100644 --- a/src/components/MobilityPlatform/Parking/DisabledParking/components/DisabledParkingContent/__tests__/__snapshots__/DisabledParkingContent.test.js.snap +++ b/src/components/MobilityPlatform/Parking/DisabledParking/components/DisabledParkingContent/__tests__/__snapshots__/DisabledParkingContent.test.js.snap @@ -3,10 +3,10 @@ exports[` does match snapshot 1`] = `

    does match snapshot 1`] = ` Pysäköintialue liikkumisesteisille

    -
    +

    does match snapshot 1`] = `

    does match snapshot 1`] = `

    does match snapshot 1`] = `

    ({ - container: { - margin: theme.spacing(1), - }, - headerContainer: { - width: '85%', - borderBottom: '1px solid #000', - paddingBottom: theme.spacing(0.5), - }, - textContainer: { - marginTop: theme.spacing(0.5), - }, - margin: { - margin: theme.spacing(0.4), - }, -}); diff --git a/src/components/MobilityPlatform/Parking/PublicParking/components/PublicParkingContent/PublicParkingContent.js b/src/components/MobilityPlatform/Parking/PublicParking/components/PublicParkingContent/PublicParkingContent.js index f4480ebcb..654c865dc 100644 --- a/src/components/MobilityPlatform/Parking/PublicParking/components/PublicParkingContent/PublicParkingContent.js +++ b/src/components/MobilityPlatform/Parking/PublicParking/components/PublicParkingContent/PublicParkingContent.js @@ -1,18 +1,22 @@ import { Typography } from '@mui/material'; import PropTypes from 'prop-types'; import React from 'react'; +import { useIntl } from 'react-intl'; +import { StyledContainer, StyledHeaderContainer, StyledTextContainer } from '../../../../styled/styled'; import TextComponent from '../../../../TextComponent'; -const PublicParkingContent = ({ classes, intl, item }) => { +const PublicParkingContent = ({ item }) => { + const intl = useIntl(); + const renderText = (msgId, value) => ( -

    + {value ? intl.formatMessage({ id: msgId }, { value }) : intl.formatMessage({ id: msgId })} -
    + ); - const renderAccessInfo = (accessValue) => { + const renderAccessInfo = accessValue => { const accessValueLower = accessValue.toLowerCase(); if (accessValueLower === 'vapaa paasy') { return renderText('mobilityPlatform.content.publicParking.access'); @@ -44,11 +48,11 @@ const PublicParkingContent = ({ classes, intl, item }) => { }; return ( -
    -
    + + -
    -
    + +
    {renderText(translations.placesTotal, item.extra.paikkoja_y)} {item.extra.max_aika_h ? renderText(translations.totalTime, item.extra.max_aika_h) : null} @@ -56,14 +60,26 @@ const PublicParkingContent = ({ classes, intl, item }) => { {item.extra.rajoit_lisat ? : null} {renderAccessInfo(item.extra.saavutettavuus.fi)}
    -
    + ); }; PublicParkingContent.propTypes = { - classes: PropTypes.objectOf(PropTypes.any).isRequired, - intl: PropTypes.objectOf(PropTypes.any).isRequired, - item: PropTypes.objectOf(PropTypes.any), + item: PropTypes.shape({ + address_fi: PropTypes.string, + address_en: PropTypes.string, + address_sv: PropTypes.string, + name_fi: PropTypes.string, + name_en: PropTypes.string, + name_sv: PropTypes.string, + extra: PropTypes.shape({ + paikkoja_y: PropTypes.number, + max_aika_h: PropTypes.number, + rajoitustyyppi: PropTypes.objectOf(PropTypes.string), + rajoit_lisat: PropTypes.objectOf(PropTypes.string), + saavutettavuus: PropTypes.objectOf(PropTypes.string), + }), + }), }; PublicParkingContent.defaultProps = { diff --git a/src/components/MobilityPlatform/Parking/PublicParking/components/PublicParkingContent/__tests__/__snapshots__/PublicParkingContent.test.js.snap b/src/components/MobilityPlatform/Parking/PublicParking/components/PublicParkingContent/__tests__/__snapshots__/PublicParkingContent.test.js.snap index 4577ed7d5..68b8a3928 100644 --- a/src/components/MobilityPlatform/Parking/PublicParking/components/PublicParkingContent/__tests__/__snapshots__/PublicParkingContent.test.js.snap +++ b/src/components/MobilityPlatform/Parking/PublicParking/components/PublicParkingContent/__tests__/__snapshots__/PublicParkingContent.test.js.snap @@ -3,13 +3,13 @@ exports[` does match snapshot 1`] = `

    does match snapshot 1`] = `

    -
    +

    does match snapshot 1`] = `

    does match snapshot 1`] = `

    does match snapshot 1`] = `

    does match snapshot 1`] = `

    does match snapshot 1`] = `

    ({ - container: { - margin: theme.spacing(1), - }, - headerContainer: { - width: '85%', - borderBottom: '1px solid #000', - paddingBottom: theme.spacing(0.5), - }, - textContainer: { - marginTop: theme.spacing(0.5), - }, - margin: { - margin: theme.spacing(0.4), - }, -}); diff --git a/src/components/MobilityPlatform/Parking/RentalCarParking/components/RentalCarParkingContent/RentalCarParkingContent.js b/src/components/MobilityPlatform/Parking/RentalCarParking/components/RentalCarParkingContent/RentalCarParkingContent.js index 7c68228dd..5027db54e 100644 --- a/src/components/MobilityPlatform/Parking/RentalCarParking/components/RentalCarParkingContent/RentalCarParkingContent.js +++ b/src/components/MobilityPlatform/Parking/RentalCarParking/components/RentalCarParkingContent/RentalCarParkingContent.js @@ -1,20 +1,24 @@ import { Typography } from '@mui/material'; import PropTypes from 'prop-types'; import React from 'react'; +import { useIntl } from 'react-intl'; +import { StyledContainer, StyledHeaderContainer, StyledTextContainer } from '../../../../styled/styled'; import TextComponent from '../../../../TextComponent'; -const RentalCarParkingContent = ({ classes, intl, item }) => { +const RentalCarParkingContent = ({ item }) => { + const intl = useIntl(); + const renderText = (msgId, value) => ( -

    + {value ? intl.formatMessage({ id: msgId }, { value }) : intl.formatMessage({ id: msgId })} -
    + ); const formatName = name => name?.split(',')[0]; - const renderAccessInfo = (accessValue) => { + const renderAccessInfo = accessValue => { const accessValueLower = accessValue.toLowerCase(); if (accessValueLower === 'vapaa pääsy') { return renderText('mobilityPlatform.content.publicParking.access'); @@ -40,25 +44,36 @@ const RentalCarParkingContent = ({ classes, intl, item }) => { }; return ( -
    -
    + + -
    -
    + +
    {renderText(translations.placesTotal, item.extra.Paikkoja_y)} {item.extra.Max_aika_h ? renderText(translations.totalTime, item.extra.Max_aika_h) : null} {item.extra.Rajoit_lis ? : null} {renderAccessInfo(item.extra.Saavutetta)}
    -
    + ); }; RentalCarParkingContent.propTypes = { - classes: PropTypes.objectOf(PropTypes.any).isRequired, - intl: PropTypes.objectOf(PropTypes.any).isRequired, - item: PropTypes.objectOf(PropTypes.any), + item: PropTypes.shape({ + address_fi: PropTypes.string, + address_en: PropTypes.string, + address_sv: PropTypes.string, + name_fi: PropTypes.string, + name_en: PropTypes.string, + name_sv: PropTypes.string, + extra: PropTypes.shape({ + Paikkoja_y: PropTypes.string, + Max_aika_h: PropTypes.number, + Rajoit_lis: PropTypes.objectOf(PropTypes.string), + Saavutetta: PropTypes.objectOf(PropTypes.string), + }), + }), }; RentalCarParkingContent.defaultProps = { diff --git a/src/components/MobilityPlatform/Parking/RentalCarParking/components/RentalCarParkingContent/__tests__/__snapshots__/RentalCarParkingContent.test.js.snap b/src/components/MobilityPlatform/Parking/RentalCarParking/components/RentalCarParkingContent/__tests__/__snapshots__/RentalCarParkingContent.test.js.snap index 4e5c2f643..f2d554f7a 100644 --- a/src/components/MobilityPlatform/Parking/RentalCarParking/components/RentalCarParkingContent/__tests__/__snapshots__/RentalCarParkingContent.test.js.snap +++ b/src/components/MobilityPlatform/Parking/RentalCarParking/components/RentalCarParkingContent/__tests__/__snapshots__/RentalCarParkingContent.test.js.snap @@ -3,13 +3,13 @@ exports[` does match snapshot 1`] = `

    does match snapshot 1`] = `

    -
    +

    does match snapshot 1`] = `

    does match snapshot 1`] = `

    does match snapshot 1`] = `

    does match snapshot 1`] = `

    ({ - container: { - margin: theme.spacing(1), - }, - headerContainer: { - width: '85%', - borderBottom: '1px solid #000', - paddingBottom: theme.spacing(0.5), - }, - textContainer: { - marginTop: theme.spacing(0.5), - }, - margin: { - margin: theme.spacing(0.4), - }, -}); diff --git a/src/components/MobilityPlatform/ParkingChargeZones/components/ParkingChargeZoneContent/ParkingChargeZoneContent.js b/src/components/MobilityPlatform/ParkingChargeZones/components/ParkingChargeZoneContent/ParkingChargeZoneContent.js index f5429c2fa..851b82646 100644 --- a/src/components/MobilityPlatform/ParkingChargeZones/components/ParkingChargeZoneContent/ParkingChargeZoneContent.js +++ b/src/components/MobilityPlatform/ParkingChargeZones/components/ParkingChargeZoneContent/ParkingChargeZoneContent.js @@ -1,40 +1,77 @@ import { Typography } from '@mui/material'; import PropTypes from 'prop-types'; import React from 'react'; +import { useIntl } from 'react-intl'; +import styled from '@emotion/styled'; +import { StyledHeaderContainer, StyledTextContainer } from '../../../styled/styled'; -const ParkingChargeZoneContent = ({ classes, intl, parkingChargeZone }) => { - const renderText = (msgId, objValue, isTitle) => ( -

    - - {intl.formatMessage({ - id: msgId, - })} - : - {' '} - {objValue} +const ParkingChargeZoneContent = ({ parkingChargeZone }) => { + const intl = useIntl(); + + const renderTitle = (msgId, objValue) => ( + + + {intl.formatMessage( + { + id: msgId, + }, + { value: objValue }, + )} -
    + + ); + + const renderText = (msgId, objValue) => ( + + + {intl.formatMessage( + { + id: msgId, + }, + { value: objValue }, + )} + + ); return ( -
    - {renderText('mobilityPlatform.content.parkingChargeZones.zone', parkingChargeZone.extra.maksuvyohyke, true)} - {renderText('mobilityPlatform.content.parkingChargeZones.price.weekDays', parkingChargeZone.extra.maksullisuus_arki, false)} - {renderText('mobilityPlatform.content.parkingChargeZones.price.saturday', parkingChargeZone.extra.maksullisuus_lauantai, false)} - {renderText('mobilityPlatform.content.parkingChargeZones.price.sunday', parkingChargeZone.extra.maksullisuus_sunnuntai, false)} - {renderText('mobilityPlatform.content.parkingChargeZones.price', parkingChargeZone.extra.maksuvyohykehinta, false)} -
    + + {renderTitle('mobilityPlatform.content.parkingChargeZones.zone', parkingChargeZone.extra.maksuvyohyke)} + {renderText( + 'mobilityPlatform.content.parkingChargeZones.price.weekDays', + parkingChargeZone.extra.maksullisuus_arki, + )} + {renderText( + 'mobilityPlatform.content.parkingChargeZones.price.saturday', + parkingChargeZone.extra.maksullisuus_lauantai, + )} + {renderText( + 'mobilityPlatform.content.parkingChargeZones.price.sunday', + parkingChargeZone.extra.maksullisuus_sunnuntai, + )} + {renderText('mobilityPlatform.content.parkingChargeZones.price', parkingChargeZone.extra.maksuvyohykehinta)} + ); }; +const StyledPadding = styled.div(({ theme }) => ({ + padding: theme.spacing(1), +})); + ParkingChargeZoneContent.propTypes = { - classes: PropTypes.objectOf(PropTypes.any).isRequired, - intl: PropTypes.objectOf(PropTypes.any).isRequired, - parkingChargeZone: PropTypes.objectOf(PropTypes.any), + parkingChargeZone: PropTypes.shape({ + extra: PropTypes.shape({ + maksuvyohyke: PropTypes.string, + maksullisuus_arki: PropTypes.string, + maksullisuus_lauantai: PropTypes.string, + maksullisuus_sunnuntai: PropTypes.string, + maksuvyohykehinta: PropTypes.string, + }), + }), }; ParkingChargeZoneContent.defaultProps = { - parkingChargeZone: null, + parkingChargeZone: {}, }; export default ParkingChargeZoneContent; diff --git a/src/components/MobilityPlatform/ParkingChargeZones/components/ParkingChargeZoneContent/__tests__/ParkingChargeZoneContent.test.js b/src/components/MobilityPlatform/ParkingChargeZones/components/ParkingChargeZoneContent/__tests__/ParkingChargeZoneContent.test.js index 5b4810fb0..2af5e1b55 100644 --- a/src/components/MobilityPlatform/ParkingChargeZones/components/ParkingChargeZoneContent/__tests__/ParkingChargeZoneContent.test.js +++ b/src/components/MobilityPlatform/ParkingChargeZones/components/ParkingChargeZoneContent/__tests__/ParkingChargeZoneContent.test.js @@ -31,19 +31,34 @@ describe('', () => { const p = container.querySelectorAll('p'); const h3 = container.querySelector('h3'); expect(h3.textContent).toContain( - `${finnishTranslations['mobilityPlatform.content.parkingChargeZones.zone']}: ${mockProps.parkingChargeZone.extra.maksuvyohyke}`, + `${finnishTranslations['mobilityPlatform.content.parkingChargeZones.zone'].replace( + '{value}', + mockProps.parkingChargeZone.extra.maksuvyohyke, + )}`, ); expect(p[0].textContent).toContain( - `${finnishTranslations['mobilityPlatform.content.parkingChargeZones.price.weekDays']}: ${mockProps.parkingChargeZone.extra.maksullisuus_arki}`, + `${finnishTranslations['mobilityPlatform.content.parkingChargeZones.price.weekDays'].replace( + '{value}', + mockProps.parkingChargeZone.extra.maksullisuus_arki, + )}`, ); expect(p[1].textContent).toContain( - `${finnishTranslations['mobilityPlatform.content.parkingChargeZones.price.saturday']}: ${mockProps.parkingChargeZone.extra.maksullisuus_lauantai}`, + `${finnishTranslations['mobilityPlatform.content.parkingChargeZones.price.saturday'].replace( + '{value}', + mockProps.parkingChargeZone.extra.maksullisuus_lauantai, + )}`, ); expect(p[2].textContent).toContain( - `${finnishTranslations['mobilityPlatform.content.parkingChargeZones.price.sunday']}: ${mockProps.parkingChargeZone.extra.maksullisuus_sunnuntai}`, + `${finnishTranslations['mobilityPlatform.content.parkingChargeZones.price.sunday'].replace( + '{value}', + mockProps.parkingChargeZone.extra.maksullisuus_sunnuntai, + )}`, ); expect(p[3].textContent).toContain( - `${finnishTranslations['mobilityPlatform.content.parkingChargeZones.price']}: ${mockProps.parkingChargeZone.extra.maksuvyohykehinta}`, + `${finnishTranslations['mobilityPlatform.content.parkingChargeZones.price'].replace( + '{value}', + mockProps.parkingChargeZone.extra.maksuvyohykehinta, + )}`, ); }); }); diff --git a/src/components/MobilityPlatform/ParkingChargeZones/components/ParkingChargeZoneContent/__tests__/__snapshots__/ParkingChargeZoneContent.test.js.snap b/src/components/MobilityPlatform/ParkingChargeZones/components/ParkingChargeZoneContent/__tests__/__snapshots__/ParkingChargeZoneContent.test.js.snap index b1bad6106..7665c9ef9 100644 --- a/src/components/MobilityPlatform/ParkingChargeZones/components/ParkingChargeZoneContent/__tests__/__snapshots__/ParkingChargeZoneContent.test.js.snap +++ b/src/components/MobilityPlatform/ParkingChargeZones/components/ParkingChargeZoneContent/__tests__/__snapshots__/ParkingChargeZoneContent.test.js.snap @@ -3,58 +3,51 @@ exports[` should work 1`] = `

    - Vyöhyke - : - - 1 + Vyöhyke: 1

    -
    +

    - Maksullisuus arkisin - : - - 9 - 18 + Maksullisuus arkisin: 9 - 18

    -
    +

    - Maksullisuus lauantaisin - : - - 9 - 15 + Maksullisuus lauantaisin: 9 - 15

    -
    +

    - Maksullisuus sunnuntaisin - : - - Maksuton + Maksullisuus sunnuntaisin: Maksuton

    -
    +

    - Hinta - : - - 3 €/h + Hinta: 3 €/h

    diff --git a/src/components/MobilityPlatform/ParkingChargeZones/components/ParkingChargeZoneContent/index.js b/src/components/MobilityPlatform/ParkingChargeZones/components/ParkingChargeZoneContent/index.js index 106ef9f89..284290832 100644 --- a/src/components/MobilityPlatform/ParkingChargeZones/components/ParkingChargeZoneContent/index.js +++ b/src/components/MobilityPlatform/ParkingChargeZones/components/ParkingChargeZoneContent/index.js @@ -1,6 +1,3 @@ -import { withStyles } from '@mui/styles'; -import { injectIntl } from 'react-intl'; import ParkingChargeZoneContent from './ParkingChargeZoneContent'; -import styles from './styles'; -export default withStyles(styles)(injectIntl(ParkingChargeZoneContent)); +export default ParkingChargeZoneContent; diff --git a/src/components/MobilityPlatform/ParkingChargeZones/components/ParkingChargeZoneContent/styles.js b/src/components/MobilityPlatform/ParkingChargeZones/components/ParkingChargeZoneContent/styles.js deleted file mode 100644 index dcbb11119..000000000 --- a/src/components/MobilityPlatform/ParkingChargeZones/components/ParkingChargeZoneContent/styles.js +++ /dev/null @@ -1,11 +0,0 @@ -export default theme => ({ - padding: { - padding: theme.spacing(1), - }, - subtitle: { - marginBottom: theme.spacing(1), - paddingBottom: theme.spacing(0.5), - borderBottom: '1px solid #000000', - width: '88%', - }, -}); diff --git a/src/components/MobilityPlatform/ParkingMachines/components/ParkingMachinesContent/ParkingMachinesContent.js b/src/components/MobilityPlatform/ParkingMachines/components/ParkingMachinesContent/ParkingMachinesContent.js index 666332dc9..c14130454 100644 --- a/src/components/MobilityPlatform/ParkingMachines/components/ParkingMachinesContent/ParkingMachinesContent.js +++ b/src/components/MobilityPlatform/ParkingMachines/components/ParkingMachinesContent/ParkingMachinesContent.js @@ -1,16 +1,20 @@ import { Typography } from '@mui/material'; import PropTypes from 'prop-types'; import React from 'react'; +import { useIntl } from 'react-intl'; +import { StyledContainer, StyledHeaderContainer, StyledTextContainer } from '../../../styled/styled'; import TextComponent from '../../../TextComponent'; -const ParkingMachinesContent = ({ classes, intl, item }) => { +const ParkingMachinesContent = ({ item }) => { + const intl = useIntl(); + /** For values that are not objects and do not contain localized strings */ const singleValText = (messageId, value) => ( -
    + {intl.formatMessage({ id: messageId }, { value })} -
    + ); const machineAddress = { @@ -22,33 +26,41 @@ const ParkingMachinesContent = ({ classes, intl, item }) => { const formatPrice = price => price.toString().replace('.', ','); const parkingMachineInfo = ( -
    -
    + + {intl.formatMessage({ id: 'mobilityPlatform.content.parkingMachine.title' })} -
    -
    + +
    {item.address_fi ? : null} {singleValText('mobilityPlatform.content.parkingMachine.payment', formatPrice(item.extra['Taksa/h']))} {item.extra.Muuta ? singleValText('mobilityPlatform.content.parkingMachine.otherInfo', item.extra.Muuta) : null}
    -
    + ); return ( -
    +
    {parkingMachineInfo}
    ); }; ParkingMachinesContent.propTypes = { - classes: PropTypes.objectOf(PropTypes.any).isRequired, - intl: PropTypes.objectOf(PropTypes.any).isRequired, - item: PropTypes.objectOf(PropTypes.any), + item: PropTypes.shape({ + address_fi: PropTypes.string, + address_en: PropTypes.string, + address_sv: PropTypes.string, + extra: PropTypes.shape({ + Sijainti: PropTypes.objectOf(PropTypes.string), + Maksutapa: PropTypes.objectOf(PropTypes.string), + 'Taksa/h': PropTypes.number, + Muuta: PropTypes.string, + }), + }), }; ParkingMachinesContent.defaultProps = { diff --git a/src/components/MobilityPlatform/ParkingMachines/components/ParkingMachinesContent/__tests__/__snapshots__/ParkingMachinesContent.test.js.snap b/src/components/MobilityPlatform/ParkingMachines/components/ParkingMachinesContent/__tests__/__snapshots__/ParkingMachinesContent.test.js.snap index b13588729..7a6a8a277 100644 --- a/src/components/MobilityPlatform/ParkingMachines/components/ParkingMachinesContent/__tests__/__snapshots__/ParkingMachinesContent.test.js.snap +++ b/src/components/MobilityPlatform/ParkingMachines/components/ParkingMachinesContent/__tests__/__snapshots__/ParkingMachinesContent.test.js.snap @@ -2,12 +2,12 @@ exports[` should match snapshot 1`] = `
    -
    -
    +
    +

    should match snapshot 1`] = ` Pysäköintiautomaatti

    -
    +

    should match snapshot 1`] = `

    should match snapshot 1`] = `

    should match snapshot 1`] = `

    should match snapshot 1`] = `

    ({ - padding: { - padding: theme.spacing(0.7), - }, - headerContainer: { - width: '85%', - borderBottom: '1px solid #000', - paddingBottom: theme.spacing(0.5), - }, - textContainer: { - marginTop: theme.spacing(0.5), - }, - margin: { - margin: theme.spacing(0.4), - }, -}); diff --git a/src/components/MobilityPlatform/ParkingSpaces/components/ParkingSpacesContent/ParkingSpacesContent.js b/src/components/MobilityPlatform/ParkingSpaces/components/ParkingSpacesContent/ParkingSpacesContent.js index 01bcf1762..14c7aa83b 100644 --- a/src/components/MobilityPlatform/ParkingSpaces/components/ParkingSpacesContent/ParkingSpacesContent.js +++ b/src/components/MobilityPlatform/ParkingSpaces/components/ParkingSpacesContent/ParkingSpacesContent.js @@ -1,37 +1,38 @@ import { Typography } from '@mui/material'; import PropTypes from 'prop-types'; import React from 'react'; +import { useIntl } from 'react-intl'; +import { StyledContainer, StyledHeaderContainer, StyledTextContainer } from '../../../styled/styled'; -const ParkingSpacesContent = ({ - classes, intl, parkingSpace, parkingStatistics, -}) => { - let freeParkingSpaces = 0; +const ParkingSpacesContent = ({ parkingSpace, parkingStatistics }) => { + const intl = useIntl(); + let freeParkingSpaces = 0; const parkingSpaceStats = parkingStatistics.filter(item => item.id === parkingSpace.id); - const renderText = (isTitle, translationId, text) => ( -

    - {isTitle ? ( - - {intl.formatMessage({ - id: translationId, - })} - - ) : ( - - {intl.formatMessage({ - id: translationId, - })} - : - {' '} - {text} - - )} -
    - ); + const renderText = (isTitle, translationId, text) => (isTitle ? ( + + + {intl.formatMessage({ + id: translationId, + })} + + + ) : ( + + + {intl.formatMessage({ + id: translationId, + })} + : + {' '} + {text} + + + )); const renderPaymentType = (translationId1, translationId2) => ( -
    + {intl.formatMessage({ id: translationId1, @@ -42,14 +43,14 @@ const ParkingSpacesContent = ({ id: translationId2, })} -
    + ); const renderParkingCount = (capacity, parkingCount) => { freeParkingSpaces = capacity - parkingCount; return ( -
    + {freeParkingSpaces > 0 ? ( {intl.formatMessage( @@ -62,27 +63,34 @@ const ParkingSpacesContent = ({ {intl.formatMessage({ id: 'mobilityPlatform.content.parkingSpaces.empty' })} )} -
    + ); }; return ( -
    + {renderText(true, 'mobilityPlatform.content.parkingSpaces.title')} {renderPaymentType('mobilityPlatform.content.parkingSpaces.type', 'mobilityPlatform.content.parkingSpaces.paid')} {renderText(false, 'mobilityPlatform.content.parkingSpaces.capacity', parkingSpace.properties.capacity_estimate)} {parkingSpaceStats && parkingSpaceStats.length > 0 && parkingSpaceStats.map(parking => renderParkingCount(parkingSpace.properties.capacity_estimate, parking.current_parking_count))} -
    + ); }; ParkingSpacesContent.propTypes = { - classes: PropTypes.objectOf(PropTypes.any).isRequired, - intl: PropTypes.objectOf(PropTypes.any).isRequired, - parkingSpace: PropTypes.objectOf(PropTypes.any), - parkingStatistics: PropTypes.arrayOf(PropTypes.any), + parkingSpace: PropTypes.shape({ + id: PropTypes.string, + properties: PropTypes.shape({ + capacity_estimate: PropTypes.number, + }), + }), + parkingStatistics: PropTypes.arrayOf( + PropTypes.shape({ + current_parking_count: PropTypes.number, + }), + ), }; ParkingSpacesContent.defaultProps = { diff --git a/src/components/MobilityPlatform/ParkingSpaces/components/ParkingSpacesContent/__tests__/__snapshots__/ParkingSpacesContent.test.js.snap b/src/components/MobilityPlatform/ParkingSpaces/components/ParkingSpacesContent/__tests__/__snapshots__/ParkingSpacesContent.test.js.snap index ac79a52d4..62ff2887d 100644 --- a/src/components/MobilityPlatform/ParkingSpaces/components/ParkingSpacesContent/__tests__/__snapshots__/ParkingSpacesContent.test.js.snap +++ b/src/components/MobilityPlatform/ParkingSpaces/components/ParkingSpacesContent/__tests__/__snapshots__/ParkingSpacesContent.test.js.snap @@ -3,10 +3,10 @@ exports[` should work 1`] = `

    should work 1`] = `

    should work 1`] = `

    should work 1`] = `

    ({ - container: { - margin: theme.spacing(1.25), - }, - title: { - width: '85%', - borderBottom: '1px solid #000000', - marginBottom: theme.spacing(1), - paddingBottom: theme.spacing(0.8), - }, - text: { - paddingBottom: theme.spacing(1), - }, -}); diff --git a/src/components/MobilityPlatform/PolygonComponent/PolygonComponent.js b/src/components/MobilityPlatform/PolygonComponent/PolygonComponent.js index f63d31f60..3d27c08a9 100644 --- a/src/components/MobilityPlatform/PolygonComponent/PolygonComponent.js +++ b/src/components/MobilityPlatform/PolygonComponent/PolygonComponent.js @@ -1,8 +1,9 @@ import React from 'react'; import { PropTypes } from 'prop-types'; +import { StyledPopupWrapper, StyledPopupInner } from '../styled/styled'; const PolygonComponent = ({ - classes, item, useContrast, pathOptions, children, + item, useContrast, pathOptions, children, }) => { const { Polygon, Popup } = global.rL; @@ -12,30 +13,33 @@ const PolygonComponent = ({ pathOptions={pathOptions} positions={item.geometry_coords} eventHandlers={{ - mouseover: (e) => { + mouseover: e => { e.target.setStyle({ fillOpacity: useContrast ? '0.6' : '0.2' }); }, - mouseout: (e) => { + mouseout: e => { e.target.setStyle({ fillOpacity: useContrast ? '0.3' : '0.2' }); }, }} > -

    + -
    - {children} -
    + {children}
    -
    + ); }; PolygonComponent.propTypes = { - classes: PropTypes.objectOf(PropTypes.any).isRequired, - item: PropTypes.objectOf(PropTypes.any).isRequired, + item: PropTypes.shape({ + id: PropTypes.string, + geometry_coords: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number))), + }).isRequired, useContrast: PropTypes.bool, - pathOptions: PropTypes.objectOf(PropTypes.any).isRequired, + pathOptions: PropTypes.shape({ + color: PropTypes.string, + weight: PropTypes.number, + }).isRequired, children: PropTypes.node, }; diff --git a/src/components/MobilityPlatform/PolygonComponent/index.js b/src/components/MobilityPlatform/PolygonComponent/index.js index 3ebc90d80..37deaa711 100644 --- a/src/components/MobilityPlatform/PolygonComponent/index.js +++ b/src/components/MobilityPlatform/PolygonComponent/index.js @@ -1,5 +1,3 @@ -import { withStyles } from '@mui/styles'; import PolygonComponent from './PolygonComponent'; -import styles from './styles'; -export default withStyles(styles)(PolygonComponent); +export default PolygonComponent; diff --git a/src/components/MobilityPlatform/PolygonComponent/styles.js b/src/components/MobilityPlatform/PolygonComponent/styles.js deleted file mode 100644 index de9de2381..000000000 --- a/src/components/MobilityPlatform/PolygonComponent/styles.js +++ /dev/null @@ -1,17 +0,0 @@ -const styles = theme => ({ - popupWrapper: { - position: 'absolute', - textAlign: 'center', - marginBottom: theme.spacing(2), - width: '429px', - }, - popupInner: { - borderRadius: '3px', - marginBottom: theme.spacing(0.5), - marginLeft: theme.spacing(0.8), - lineHeight: 1.2, - overflowX: 'hidden', - }, -}); - -export default styles; diff --git a/src/components/MobilityPlatform/PublicToilets/components/PublicToiletsContent/PublicToiletsContent.js b/src/components/MobilityPlatform/PublicToilets/components/PublicToiletsContent/PublicToiletsContent.js index 7dd38ac1a..e53c8940a 100644 --- a/src/components/MobilityPlatform/PublicToilets/components/PublicToiletsContent/PublicToiletsContent.js +++ b/src/components/MobilityPlatform/PublicToilets/components/PublicToiletsContent/PublicToiletsContent.js @@ -1,48 +1,44 @@ import { Typography } from '@mui/material'; -import PropTypes from 'prop-types'; import React from 'react'; +import { useIntl } from 'react-intl'; +import { StyledContainer, StyledHeaderContainer, StyledTextContainer } from '../../../styled/styled'; -const PublicToiletsContent = ({ classes, intl }) => { - const titleTypo = (messageId, props = {}) => ( -
    +const PublicToiletsContent = () => { + const intl = useIntl(); + + const titleTypo = messageId => ( + {intl.formatMessage({ id: messageId, })} -
    + ); - const singleValTypo = (messageId, isSubtitle, props = {}) => ( -
    + const singleValTypo = (messageId, isSubtitle) => ( + {intl.formatMessage({ id: messageId, })} -
    + ); return ( -
    -
    {titleTypo('mobilityPlatform.content.publicToilets.title')}
    -
    + + {titleTypo('mobilityPlatform.content.publicToilets.title')} +
    {singleValTypo('mobilityPlatform.content.publicToilets.openNormalTitle', true)} {singleValTypo('mobilityPlatform.content.publicToilets.openNormalDate')} {singleValTypo('mobilityPlatform.content.publicToilets.openNormal')} - {singleValTypo('mobilityPlatform.content.publicToilets.openSummerTitle', true, { - className: classes.marginTop, - })} + {singleValTypo('mobilityPlatform.content.publicToilets.openSummerTitle', true)} {singleValTypo('mobilityPlatform.content.publicToilets.openSummerDate')} {singleValTypo('mobilityPlatform.content.publicToilets.openSummer')}
    -
    + ); }; -PublicToiletsContent.propTypes = { - classes: PropTypes.objectOf(PropTypes.any).isRequired, - intl: PropTypes.objectOf(PropTypes.any).isRequired, -}; - export default PublicToiletsContent; diff --git a/src/components/MobilityPlatform/PublicToilets/components/PublicToiletsContent/__tests__/__snapshots__/PublicToiletsContent.test.js.snap b/src/components/MobilityPlatform/PublicToilets/components/PublicToiletsContent/__tests__/__snapshots__/PublicToiletsContent.test.js.snap index a24bc22df..eefb894e2 100644 --- a/src/components/MobilityPlatform/PublicToilets/components/PublicToiletsContent/__tests__/__snapshots__/PublicToiletsContent.test.js.snap +++ b/src/components/MobilityPlatform/PublicToilets/components/PublicToiletsContent/__tests__/__snapshots__/PublicToiletsContent.test.js.snap @@ -3,12 +3,14 @@ exports[` should work 1`] = `
    -
    +

    @@ -16,24 +18,28 @@ exports[` should work 1`] = `

    -
    -
    +
    +

    Aukioloajat:

    -
    +

    Välillä: 1.10 - 30.4

    -
    +

    @@ -41,7 +47,7 @@ exports[` should work 1`] = `

    should work 1`] = ` Erityisaukioloajat:

    -
    +

    Välillä: 1.5 - 30.9

    -
    +

    diff --git a/src/components/MobilityPlatform/PublicToilets/components/PublicToiletsContent/index.js b/src/components/MobilityPlatform/PublicToilets/components/PublicToiletsContent/index.js index 3e8973508..c844c64bc 100644 --- a/src/components/MobilityPlatform/PublicToilets/components/PublicToiletsContent/index.js +++ b/src/components/MobilityPlatform/PublicToilets/components/PublicToiletsContent/index.js @@ -1,6 +1,3 @@ -import { withStyles } from '@mui/styles'; -import { injectIntl } from 'react-intl'; import PublicToiletsContent from './PublicToiletsContent'; -import styles from './styles'; -export default withStyles(styles)(injectIntl(PublicToiletsContent)); +export default PublicToiletsContent; diff --git a/src/components/MobilityPlatform/PublicToilets/components/PublicToiletsContent/styles.js b/src/components/MobilityPlatform/PublicToilets/components/PublicToiletsContent/styles.js deleted file mode 100644 index 9251213f1..000000000 --- a/src/components/MobilityPlatform/PublicToilets/components/PublicToiletsContent/styles.js +++ /dev/null @@ -1,20 +0,0 @@ -export default theme => ({ - container: { - margin: theme.spacing(1), - }, - headerContainer: { - width: '85%', - borderBottom: '1px solid #000', - paddingBottom: theme.spacing(0.5), - }, - textContainer: { - marginTop: theme.spacing(0.5), - }, - contentInner: { - marginLeft: theme.spacing(1), - marginBottom: theme.spacing(1), - }, - marginTop: { - marginTop: theme.spacing(0.5), - }, -}); diff --git a/src/components/MobilityPlatform/RailwayStations/components/RailwayStationsContent/RailwayStationsContent.js b/src/components/MobilityPlatform/RailwayStations/components/RailwayStationsContent/RailwayStationsContent.js index c36a5c1e7..efe786c93 100644 --- a/src/components/MobilityPlatform/RailwayStations/components/RailwayStationsContent/RailwayStationsContent.js +++ b/src/components/MobilityPlatform/RailwayStations/components/RailwayStationsContent/RailwayStationsContent.js @@ -3,11 +3,13 @@ import PropTypes from 'prop-types'; import { Typography } from '@mui/material'; import styled from '@emotion/styled'; import { format } from 'date-fns'; +import { useIntl } from 'react-intl'; import { fetchRailwaysData } from '../../../mobilityPlatformRequests/mobilityPlatformRequests'; -const RailwayStationsContent = ({ intl, item, stationsData }) => { +const RailwayStationsContent = ({ item, stationsData }) => { const [stationTrainsData, setStationTrainsData] = useState([]); + const intl = useIntl(); const formatDateTime = timeValue => format(new Date(timeValue), 'HH:mm'); const optionsToParams = options => { @@ -172,9 +174,6 @@ const StyledHeader = styled.div(({ theme }) => ({ })); RailwayStationsContent.propTypes = { - intl: PropTypes.shape({ - formatMessage: PropTypes.func, - }).isRequired, item: PropTypes.shape({ stationShortCode: PropTypes.string, stationName: PropTypes.string, diff --git a/src/components/MobilityPlatform/RailwayStations/components/RailwayStationsContent/index.js b/src/components/MobilityPlatform/RailwayStations/components/RailwayStationsContent/index.js index 40c76cd7f..4c40dd131 100644 --- a/src/components/MobilityPlatform/RailwayStations/components/RailwayStationsContent/index.js +++ b/src/components/MobilityPlatform/RailwayStations/components/RailwayStationsContent/index.js @@ -1,4 +1,3 @@ -import { injectIntl } from 'react-intl'; import RailwayStationsContent from './RailwayStationsContent'; -export default injectIntl(RailwayStationsContent); +export default RailwayStationsContent; diff --git a/src/components/MobilityPlatform/RentalCars/RentalCars.js b/src/components/MobilityPlatform/RentalCars/RentalCars.js index 1618b5ebe..e543ec915 100644 --- a/src/components/MobilityPlatform/RentalCars/RentalCars.js +++ b/src/components/MobilityPlatform/RentalCars/RentalCars.js @@ -1,5 +1,4 @@ /* eslint-disable react-hooks/exhaustive-deps */ -import { PropTypes } from 'prop-types'; import React, { useEffect, useState } from 'react'; import { useMap, useMapEvents } from 'react-leaflet'; import { useSelector } from 'react-redux'; @@ -11,9 +10,10 @@ import { useAccessibleMap } from '../../../redux/selectors/settings'; import { fetchIotData } from '../mobilityPlatformRequests/mobilityPlatformRequests'; import { isDataValid, setRender, checkMapType } from '../utils/utils'; import { isEmbed } from '../../../utils/path'; +import { StyledPopupInner } from '../styled/styled'; import RentalCarsContent from './components/RentalCarsContent'; -const RentalCars = ({ classes }) => { +const RentalCars = () => { const [rentalCarsData, setRentalCarsData] = useState([]); const [zoomLevel, setZoomLevel] = useState(13); @@ -54,7 +54,7 @@ const RentalCars = ({ classes }) => { useEffect(() => { if (renderData && !embedded) { const bounds = []; - rentalCarsData.forEach((item) => { + rentalCarsData.forEach(item => { bounds.push([item.homeLocationData.coordinates.latitude, item.homeLocationData.coordinates.longitude]); }); map.fitBounds(bounds); @@ -62,32 +62,26 @@ const RentalCars = ({ classes }) => { }, [showRentalCars, rentalCarsData]); return ( - <> - {renderData ? ( - rentalCarsData.filter(item => item.availabilityData.available).map(item => ( - -

    - -
    - -
    -
    -
    - - )) - ) : null} - + renderData ? ( + rentalCarsData.filter(item => item.availabilityData.available).map(item => ( + +
    + + + + + +
    +
    + )) + ) : null ); }; -RentalCars.propTypes = { - classes: PropTypes.objectOf(PropTypes.any).isRequired, -}; - export default RentalCars; diff --git a/src/components/MobilityPlatform/RentalCars/components/RentalCarsContent/RentalCarsContent.js b/src/components/MobilityPlatform/RentalCars/components/RentalCarsContent/RentalCarsContent.js index 2fb495dad..780a64bc8 100644 --- a/src/components/MobilityPlatform/RentalCars/components/RentalCarsContent/RentalCarsContent.js +++ b/src/components/MobilityPlatform/RentalCars/components/RentalCarsContent/RentalCarsContent.js @@ -2,30 +2,36 @@ import { Link, Typography } from '@mui/material'; import PropTypes from 'prop-types'; import React from 'react'; import { useSelector } from 'react-redux'; +import { useIntl } from 'react-intl'; +import styled from '@emotion/styled'; +import { + StyledContainer, StyledHeaderContainer, StyledTextContainer, StyledLinkText, +} from '../../../styled/styled'; -const RentalCarsContent = ({ classes, intl, car }) => { +const RentalCarsContent = ({ car }) => { + const intl = useIntl(); const locale = useSelector(state => state.user.locale); - const titleText = (messageId, props = {}) => ( -
    - + const titleText = messageId => ( + + {intl.formatMessage({ id: messageId, })} -
    + ); const contentText = (messageId, value) => ( -
    + {intl.formatMessage({ id: messageId }, { value })} -
    + ); const renderCarInfo = (messageId, manufacturer, model) => ( -
    + {intl.formatMessage({ id: messageId, @@ -36,12 +42,12 @@ const RentalCarsContent = ({ classes, intl, car }) => { {' '} {model} -
    + ); const serviceProvider = '24Rent'; - const getLink = (address) => { + const getLink = address => { if (locale === 'en') { return `https://www.24rent.fi/en/#/?city=${address}`; } @@ -49,46 +55,59 @@ const RentalCarsContent = ({ classes, intl, car }) => { }; return ( -
    + {titleText('mobilityPlatform.content.rentalCars.title')} {contentText('mobilityPlatform.content.general.provider', serviceProvider)} -
    + - + {intl.formatMessage({ id: 'mobilityPlatform.content.rentalCars.link', })} - + -
    + {renderCarInfo( 'mobilityPlatform.content.rentalCars.carInfo', car.vehicleModelData.manufacturer, car.vehicleModelData.name, )} -
    + {car.availabilityData.available ? intl.formatMessage({ id: 'mobilityPlatform.content.rentalCars.available' }) : intl.formatMessage({ id: 'mobilityPlatform.content.rentalCars.reserved' })} -
    + {contentText('mobilityPlatform.content.rentalCars.address', car.homeLocationData.fullAddress)}
    shared use car
    -
    + ); }; +const StyledLinkContainer = styled.div(({ theme }) => ({ + marginTop: theme.spacing(0.4), + width: '55%', +})); + RentalCarsContent.propTypes = { - classes: PropTypes.objectOf(PropTypes.any).isRequired, - intl: PropTypes.objectOf(PropTypes.any).isRequired, - car: PropTypes.objectOf(PropTypes.any), + car: PropTypes.shape({ + id: PropTypes.string, + homeLocationData: PropTypes.shape({ + fullAddress: PropTypes.string, + }), + vehicleModelData: PropTypes.shape({ + manufacturer: PropTypes.string, + name: PropTypes.string, + }), + availabilityData: PropTypes.objectOf(PropTypes.bool), + }), }; RentalCarsContent.defaultProps = { - car: null, + car: {}, }; export default RentalCarsContent; diff --git a/src/components/MobilityPlatform/RentalCars/components/RentalCarsContent/__tests__/__snapshots__/RentalCarsContent.test.js.snap b/src/components/MobilityPlatform/RentalCars/components/RentalCarsContent/__tests__/__snapshots__/RentalCarsContent.test.js.snap index 08e139af6..edb9b367d 100644 --- a/src/components/MobilityPlatform/RentalCars/components/RentalCarsContent/__tests__/__snapshots__/RentalCarsContent.test.js.snap +++ b/src/components/MobilityPlatform/RentalCars/components/RentalCarsContent/__tests__/__snapshots__/RentalCarsContent.test.js.snap @@ -3,10 +3,10 @@ exports[` should work 1`] = `

    should work 1`] = `

    should work 1`] = `

    should work 1`] = `

    should work 1`] = `

    ({ - container: { - margin: theme.spacing(1), - }, - title: { - width: '94%', - borderBottom: '1px solid #000000', - marginBottom: theme.spacing(1), - }, - text: { - paddingBottom: theme.spacing(1), - }, - linkContainer: { - paddingBottom: theme.spacing(1), - width: '55%', - }, - link: { - color: theme.palette.link.main, - textDecoration: 'underline', - }, -}); diff --git a/src/components/MobilityPlatform/RentalCars/index.js b/src/components/MobilityPlatform/RentalCars/index.js index 750f28c9b..45d73d1b0 100644 --- a/src/components/MobilityPlatform/RentalCars/index.js +++ b/src/components/MobilityPlatform/RentalCars/index.js @@ -1,6 +1,3 @@ -import { withStyles } from '@mui/styles'; -import { injectIntl } from 'react-intl'; import RentalCars from './RentalCars'; -import styles from './styles'; -export default withStyles(styles)(injectIntl(RentalCars)); +export default RentalCars; diff --git a/src/components/MobilityPlatform/RentalCars/styles.js b/src/components/MobilityPlatform/RentalCars/styles.js deleted file mode 100644 index f89a68ef2..000000000 --- a/src/components/MobilityPlatform/RentalCars/styles.js +++ /dev/null @@ -1,5 +0,0 @@ -export default theme => ({ - popupInner: { - padding: theme.spacing(1.5), - }, -}); diff --git a/src/components/MobilityPlatform/Scooters/components/ScooterMarkers/components/ScooterInfo/ScooterInfo.js b/src/components/MobilityPlatform/Scooters/components/ScooterMarkers/components/ScooterInfo/ScooterInfo.js index 89fab0bd0..af86b17a6 100644 --- a/src/components/MobilityPlatform/Scooters/components/ScooterMarkers/components/ScooterInfo/ScooterInfo.js +++ b/src/components/MobilityPlatform/Scooters/components/ScooterMarkers/components/ScooterInfo/ScooterInfo.js @@ -1,79 +1,85 @@ import { Link, Typography } from '@mui/material'; import PropTypes from 'prop-types'; import React from 'react'; +import { useIntl } from 'react-intl'; +import { + StyledContainer, StyledHeaderContainer, StyledTextContainer, StyledBoldText, StyledLinkText, +} from '../../../../../styled/styled'; + +const ScooterInfo = ({ item }) => { + const intl = useIntl(); -const ScooterInfo = ({ classes, intl, item }) => { const titleTypo = messageId => ( -

    - - {intl.formatMessage({ - id: messageId, - })} - -
    + + {intl.formatMessage({ + id: messageId, + })} + ); const singleValTypo = (messageId, value) => ( -
    + {intl.formatMessage({ id: messageId }, { value })} -
    + ); - const renderStatus = (scooterStatus) => { + const renderStatus = scooterStatus => { if (!scooterStatus) { return ( -
    + {intl.formatMessage({ id: 'mobilityPlatform.content.scooter.notReserved' })} -
    + ); } return null; }; const renderLink = (linkUrl, text) => ( -
    + - + {text} - + -
    + ); - const formatRange = (range) => { + const formatRange = range => { const rangeKm = (range / 1000).toFixed(2); return `${rangeKm} km`; }; return ( -
    -
    + + {titleTypo('mobilityPlatform.content.scooter.title')} -
    -
    + +
    {singleValTypo('mobilityPlatform.content.general.provider', 'Ryde')} {renderStatus(item.is_reserved)} {singleValTypo('mobilityPlatform.content.scooter.range', formatRange(item.current_range_meters))} -
    - + + {intl.formatMessage({ id: 'mobilityPlatform.content.general.rentalUris' })} : - -
    + + {renderLink(item.rental_uris.android, 'Android')} {renderLink(item.rental_uris.ios, 'iOS')}
    -
    + ); }; ScooterInfo.propTypes = { - classes: PropTypes.objectOf(PropTypes.any).isRequired, - intl: PropTypes.objectOf(PropTypes.any).isRequired, - item: PropTypes.objectOf(PropTypes.any), + item: PropTypes.shape({ + is_reserved: PropTypes.bool, + current_range_meters: PropTypes.number, + rental_uris: PropTypes.objectOf(PropTypes.string), + }), }; ScooterInfo.defaultProps = { diff --git a/src/components/MobilityPlatform/Scooters/components/ScooterMarkers/components/ScooterInfo/__tests__/__snapshots__/ScooterInfo.test.js.snap b/src/components/MobilityPlatform/Scooters/components/ScooterMarkers/components/ScooterInfo/__tests__/__snapshots__/ScooterInfo.test.js.snap index 13721ccf1..78e23e8d7 100644 --- a/src/components/MobilityPlatform/Scooters/components/ScooterMarkers/components/ScooterInfo/__tests__/__snapshots__/ScooterInfo.test.js.snap +++ b/src/components/MobilityPlatform/Scooters/components/ScooterMarkers/components/ScooterInfo/__tests__/__snapshots__/ScooterInfo.test.js.snap @@ -3,24 +3,20 @@ exports[` should work 1`] = `
    -
    -

    - Sähköpotkulauta -

    -
    +

    + Sähköpotkulauta +

    -
    +

    should work 1`] = `

    should work 1`] = `

    should work 1`] = `

    Varauslinkit :

    should work 1`] = ` target="_blank" > diff --git a/src/components/MobilityPlatform/Scooters/components/ScooterMarkers/components/ScooterInfo/index.js b/src/components/MobilityPlatform/Scooters/components/ScooterMarkers/components/ScooterInfo/index.js index 7691081d7..a757fb947 100644 --- a/src/components/MobilityPlatform/Scooters/components/ScooterMarkers/components/ScooterInfo/index.js +++ b/src/components/MobilityPlatform/Scooters/components/ScooterMarkers/components/ScooterInfo/index.js @@ -1,6 +1,3 @@ -import { withStyles } from '@mui/styles'; -import { injectIntl } from 'react-intl'; import ScooterInfo from './ScooterInfo'; -import styles from './styles'; -export default withStyles(styles)(injectIntl(ScooterInfo)); +export default ScooterInfo; diff --git a/src/components/MobilityPlatform/Scooters/components/ScooterMarkers/components/ScooterInfo/styles.js b/src/components/MobilityPlatform/Scooters/components/ScooterMarkers/components/ScooterInfo/styles.js deleted file mode 100644 index de7e0cae1..000000000 --- a/src/components/MobilityPlatform/Scooters/components/ScooterMarkers/components/ScooterInfo/styles.js +++ /dev/null @@ -1,26 +0,0 @@ -export default theme => ({ - container: { - margin: theme.spacing(1), - }, - headerContainer: { - width: '85%', - borderBottom: '1px solid #000', - paddingBottom: theme.spacing(0.5), - }, - textContainer: { - marginTop: theme.spacing(0.5), - }, - paragraph: { - marginTop: theme.spacing(0.4), - }, - marginTop: { - marginTop: theme.spacing(0.5), - }, - bold: { - fontWeight: 'bold', - }, - link: { - color: theme.palette.link.main, - textDecoration: 'underline', - }, -}); diff --git a/src/components/MobilityPlatform/SnowPlows/components/SnowPlowsContent/SnowPlowsContent.js b/src/components/MobilityPlatform/SnowPlows/components/SnowPlowsContent/SnowPlowsContent.js index 7c5f7052f..ff592128f 100644 --- a/src/components/MobilityPlatform/SnowPlows/components/SnowPlowsContent/SnowPlowsContent.js +++ b/src/components/MobilityPlatform/SnowPlows/components/SnowPlowsContent/SnowPlowsContent.js @@ -1,36 +1,46 @@ import { Typography } from '@mui/material'; import PropTypes from 'prop-types'; import React from 'react'; +import { useIntl } from 'react-intl'; +import { StyledContainer, StyledHeaderContainer, StyledTextContainer } from '../../../styled/styled'; const SnowPlowsContent = ({ - classes, intl, formatOperation, operation, formatTime, timestamp, -}) => ( -
    -
    - - {intl.formatMessage({ - id: 'mobilityPlatform.content.streetMaintenance.title', - })} - -
    - - {intl.formatMessage({ id: 'mobilityPlatform.content.streetMaintenance' })} - : - {' '} - {formatOperation(operation)} - - - {intl.formatMessage({ id: 'mobilityPlatform.content.streetMaintenance.time' })} - : - {' '} - {formatTime(timestamp)} - -
    -); + formatOperation, operation, formatTime, timestamp, +}) => { + const intl = useIntl(); + + return ( + + + + {intl.formatMessage({ + id: 'mobilityPlatform.content.streetMaintenance.title', + })} + + +
    + + + {intl.formatMessage({ id: 'mobilityPlatform.content.streetMaintenance' })} + : + {' '} + {formatOperation(operation)} + + + + + {intl.formatMessage({ id: 'mobilityPlatform.content.streetMaintenance.time' })} + : + {' '} + {formatTime(timestamp)} + + +
    +
    + ); +}; SnowPlowsContent.propTypes = { - classes: PropTypes.objectOf(PropTypes.any).isRequired, - intl: PropTypes.objectOf(PropTypes.any).isRequired, formatOperation: PropTypes.func.isRequired, operation: PropTypes.string, formatTime: PropTypes.func.isRequired, diff --git a/src/components/MobilityPlatform/SnowPlows/components/SnowPlowsContent/index.js b/src/components/MobilityPlatform/SnowPlows/components/SnowPlowsContent/index.js index 5ea63d0b2..4bf936c7a 100644 --- a/src/components/MobilityPlatform/SnowPlows/components/SnowPlowsContent/index.js +++ b/src/components/MobilityPlatform/SnowPlows/components/SnowPlowsContent/index.js @@ -1,6 +1,3 @@ -import { withStyles } from '@mui/styles'; -import { injectIntl } from 'react-intl'; import SnowPlowsContent from './SnowPlowsContent'; -import styles from './styles'; -export default withStyles(styles)(injectIntl(SnowPlowsContent)); +export default SnowPlowsContent; diff --git a/src/components/MobilityPlatform/SnowPlows/components/SnowPlowsContent/styles.js b/src/components/MobilityPlatform/SnowPlows/components/SnowPlowsContent/styles.js deleted file mode 100644 index ba18e09ad..000000000 --- a/src/components/MobilityPlatform/SnowPlows/components/SnowPlowsContent/styles.js +++ /dev/null @@ -1,13 +0,0 @@ -const styles = theme => ({ - popupInner: { - margin: theme.spacing(2), - }, - subtitle: { - marginBottom: theme.spacing(1), - paddingBottom: theme.spacing(0.5), - borderBottom: '1px solid #000000', - width: '88%', - }, -}); - -export default styles; diff --git a/src/components/MobilityPlatform/SpeedLimitZones/components/SpeedLimitZonesContent/SpeedLimitZonesContent.js b/src/components/MobilityPlatform/SpeedLimitZones/components/SpeedLimitZonesContent/SpeedLimitZonesContent.js index 97469b6f5..33e177a98 100644 --- a/src/components/MobilityPlatform/SpeedLimitZones/components/SpeedLimitZonesContent/SpeedLimitZonesContent.js +++ b/src/components/MobilityPlatform/SpeedLimitZones/components/SpeedLimitZonesContent/SpeedLimitZonesContent.js @@ -1,28 +1,41 @@ import React from 'react'; import { PropTypes } from 'prop-types'; import { Typography } from '@mui/material'; +import { useIntl } from 'react-intl'; +import { StyledContainer, StyledHeaderContainer, StyledTextContainer } from '../../../styled/styled'; -const SpeedLimitZonesContent = ({ classes, intl, item }) => ( -
    -
    - - {intl.formatMessage({ - id: 'mobilityPlatform.content.speedLimitZones.area', - })} - -
    - - {intl.formatMessage({ - id: 'mobilityPlatform.content.speedLimitZones.limit', - }, { item: item.extra.speed_limit })} - -
    -); +const SpeedLimitZonesContent = ({ item }) => { + const intl = useIntl(); + + return ( + + + + {intl.formatMessage({ + id: 'mobilityPlatform.content.speedLimitZones.area', + })} + + +
    + + + {intl.formatMessage( + { + id: 'mobilityPlatform.content.speedLimitZones.limit', + }, + { item: item.extra.speed_limit }, + )} + + +
    +
    + ); +}; SpeedLimitZonesContent.propTypes = { - classes: PropTypes.objectOf(PropTypes.any).isRequired, - intl: PropTypes.objectOf(PropTypes.any).isRequired, - item: PropTypes.objectOf(PropTypes.any).isRequired, + item: PropTypes.shape({ + extra: PropTypes.objectOf(PropTypes.number), + }).isRequired, }; export default SpeedLimitZonesContent; diff --git a/src/components/MobilityPlatform/SpeedLimitZones/components/SpeedLimitZonesContent/__tests__/__snapshots__/SpeedLimitZonesContent.test.js.snap b/src/components/MobilityPlatform/SpeedLimitZones/components/SpeedLimitZonesContent/__tests__/__snapshots__/SpeedLimitZonesContent.test.js.snap index 3fec407d0..dd4bfea2c 100644 --- a/src/components/MobilityPlatform/SpeedLimitZones/components/SpeedLimitZonesContent/__tests__/__snapshots__/SpeedLimitZonesContent.test.js.snap +++ b/src/components/MobilityPlatform/SpeedLimitZones/components/SpeedLimitZonesContent/__tests__/__snapshots__/SpeedLimitZonesContent.test.js.snap @@ -3,10 +3,10 @@ exports[` should match snapshot 1`] = `

    should match snapshot 1`] = ` Nopeusrajoitusalue

    -

    - Nopeusrajoitus: 40 km/t -

    +
    +
    +

    + Nopeusrajoitus: 40 km/t +

    +
    +
    `; diff --git a/src/components/MobilityPlatform/SpeedLimitZones/components/SpeedLimitZonesContent/index.js b/src/components/MobilityPlatform/SpeedLimitZones/components/SpeedLimitZonesContent/index.js index 51c236f0f..8ac680b35 100644 --- a/src/components/MobilityPlatform/SpeedLimitZones/components/SpeedLimitZonesContent/index.js +++ b/src/components/MobilityPlatform/SpeedLimitZones/components/SpeedLimitZonesContent/index.js @@ -1,6 +1,3 @@ -import { withStyles } from '@mui/styles'; -import { injectIntl } from 'react-intl'; import SpeedLimitZonesContent from './SpeedLimitZonesContent'; -import styles from './styles'; -export default withStyles(styles)(injectIntl(SpeedLimitZonesContent)); +export default SpeedLimitZonesContent; diff --git a/src/components/MobilityPlatform/SpeedLimitZones/components/SpeedLimitZonesContent/styles.js b/src/components/MobilityPlatform/SpeedLimitZones/components/SpeedLimitZonesContent/styles.js deleted file mode 100644 index dcbb11119..000000000 --- a/src/components/MobilityPlatform/SpeedLimitZones/components/SpeedLimitZonesContent/styles.js +++ /dev/null @@ -1,11 +0,0 @@ -export default theme => ({ - padding: { - padding: theme.spacing(1), - }, - subtitle: { - marginBottom: theme.spacing(1), - paddingBottom: theme.spacing(0.5), - borderBottom: '1px solid #000000', - width: '88%', - }, -}); diff --git a/src/components/MobilityPlatform/TextComponent/TextComponent.js b/src/components/MobilityPlatform/TextComponent/TextComponent.js index b828fe30b..c221f2ff2 100644 --- a/src/components/MobilityPlatform/TextComponent/TextComponent.js +++ b/src/components/MobilityPlatform/TextComponent/TextComponent.js @@ -21,7 +21,7 @@ const TextComponent = ({ }; const StyledContainer = styled.div(({ theme }) => ({ - margin: theme.spacing(0.4), + marginTop: theme.spacing(0.5), })); TextComponent.propTypes = { diff --git a/src/components/MobilityPlatform/TextComponent/__tests__/__snapshots__/TextComponent.test.js.snap b/src/components/MobilityPlatform/TextComponent/__tests__/__snapshots__/TextComponent.test.js.snap index b3e11906f..73fd4c70b 100644 --- a/src/components/MobilityPlatform/TextComponent/__tests__/__snapshots__/TextComponent.test.js.snap +++ b/src/components/MobilityPlatform/TextComponent/__tests__/__snapshots__/TextComponent.test.js.snap @@ -3,7 +3,7 @@ exports[` should match snapshot 1`] = `

    { + const intl = useIntl(); -const TextContent = ({ - classes, intl, titleId, translationId, -}) => { const singleValTypo = (messageId, isTitle) => ( -

    - - {intl.formatMessage({ - id: messageId, - })} - -
    + + {intl.formatMessage({ + id: messageId, + })} + ); return ( -
    -
    + + {singleValTypo(titleId, true)} -
    -
    + + {singleValTypo(translationId, false)} -
    -
    + + ); }; TextContent.propTypes = { - classes: PropTypes.objectOf(PropTypes.any).isRequired, - intl: PropTypes.objectOf(PropTypes.any).isRequired, titleId: PropTypes.string, translationId: PropTypes.string, }; diff --git a/src/components/MobilityPlatform/TextContent/__tests__/__snapshots__/TextContent.test.js.snap b/src/components/MobilityPlatform/TextContent/__tests__/__snapshots__/TextContent.test.js.snap index 09af7b574..52229d5af 100644 --- a/src/components/MobilityPlatform/TextContent/__tests__/__snapshots__/TextContent.test.js.snap +++ b/src/components/MobilityPlatform/TextContent/__tests__/__snapshots__/TextContent.test.js.snap @@ -3,29 +3,25 @@ exports[` should work 1`] = `
    -
    -

    - Pysäköintikieltoalue -

    -
    +

    + Pysäköintikieltoalue +

    -
    -

    - Sähköpotkulautojen pysäköinti kartalla näkyville alueille on kielletty. -

    -
    +

    + Sähköpotkulautojen pysäköinti kartalla näkyville alueille on kielletty. +

    diff --git a/src/components/MobilityPlatform/TextContent/index.js b/src/components/MobilityPlatform/TextContent/index.js index 0ceb0933e..e03bb9b65 100644 --- a/src/components/MobilityPlatform/TextContent/index.js +++ b/src/components/MobilityPlatform/TextContent/index.js @@ -1,6 +1,3 @@ -import { withStyles } from '@mui/styles'; -import { injectIntl } from 'react-intl'; -import styles from './styles'; import TextContent from './TextContent'; -export default withStyles(styles)(injectIntl(TextContent)); +export default TextContent; diff --git a/src/components/MobilityPlatform/TextContent/styles.js b/src/components/MobilityPlatform/TextContent/styles.js deleted file mode 100644 index 6818cfb53..000000000 --- a/src/components/MobilityPlatform/TextContent/styles.js +++ /dev/null @@ -1,20 +0,0 @@ -export default theme => ({ - container: { - margin: theme.spacing(1), - }, - headerContainer: { - width: '85%', - borderBottom: '1px solid #000', - paddingBottom: theme.spacing(0.5), - }, - textContainer: { - marginTop: theme.spacing(0.5), - }, - contentInner: { - marginLeft: theme.spacing(1), - marginBottom: theme.spacing(1), - }, - margin: { - margin: theme.spacing(0.4), - }, -}); diff --git a/src/components/MobilityPlatform/styled/styled.js b/src/components/MobilityPlatform/styled/styled.js index 73440a6c3..8a56c8f92 100644 --- a/src/components/MobilityPlatform/styled/styled.js +++ b/src/components/MobilityPlatform/styled/styled.js @@ -1,9 +1,17 @@ import styled from '@emotion/styled'; +import { Typography } from '@mui/material'; + +const StyledPopupWrapper = styled.div(({ theme }) => ({ + position: 'absolute', + textAlign: 'center', + marginBottom: theme.spacing(2), + width: '429px', +})); const StyledPopupInner = styled.div(({ theme }) => ({ borderRadius: '3px', - marginBottom: theme.spacing(1), - marginLeft: theme.spacing(1.2), + marginBottom: theme.spacing(0.5), + marginLeft: theme.spacing(0.8), lineHeight: 1.2, overflowX: 'hidden', })); @@ -19,4 +27,41 @@ const StyledContentHeader = styled.div(({ theme }) => ({ width: '95%', })); -export { StyledPopupInner, StyledContentHeader }; +const StyledContainer = styled.div(({ theme }) => ({ + margin: theme.spacing(1), +})); + +const StyledHeaderContainer = styled.div(({ theme }) => ({ + width: '85%', + borderBottom: '1px solid #000', + paddingBottom: theme.spacing(0.5), +})); + +const StyledTextContainer = styled.div(({ theme }) => ({ + marginTop: theme.spacing(0.5), +})); + +const StyledMargin = styled.div(({ theme }) => ({ + margin: theme.spacing(0.4), +})); + +const StyledLinkText = styled(Typography)(({ theme }) => ({ + color: theme.palette.link.main, + textDecoration: 'underline', +})); + +const StyledBoldText = styled(Typography)(() => ({ + fontWeight: 'bold', +})); + +export { + StyledPopupWrapper, + StyledPopupInner, + StyledContentHeader, + StyledContainer, + StyledHeaderContainer, + StyledTextContainer, + StyledMargin, + StyledLinkText, + StyledBoldText, +}; diff --git a/src/i18n/en.js b/src/i18n/en.js index 4cc83ec92..b9d473866 100644 --- a/src/i18n/en.js +++ b/src/i18n/en.js @@ -744,7 +744,7 @@ const translations = { 'mobilityPlatform.menu.routes.info': 'You can select a route from the list below.', 'mobilityPlatform.menu.routes.emptyList': 'Routes are loading.', 'mobilityPlatform.menu.bicycleRoutes.title': 'Info about the route.', - 'mobilityPlatform.menu.bicycleRoutes.length': 'Route length:', + 'mobilityPlatform.menu.bicycleRoutes.length': 'Route length: {value} km.', 'mobilityPlatform.menu.routes.name': 'Route name', 'mobilityPlatform.menu.showRentalCars': 'Shared use cars', 'mobilityPlatform.menu.showParkingSpaces': 'Parking spaces', @@ -852,11 +852,11 @@ const translations = { 'mobilityPlatform.content.parkingSpaces.type': 'Payment type', 'mobilityPlatform.content.parkingSpaces.paid': 'Toll parking', 'mobilityPlatform.content.parkingSpaces.empty': 'No vacant spaces left', - 'mobilityPlatform.content.parkingChargeZones.zone': 'Zone', - 'mobilityPlatform.content.parkingChargeZones.price': 'Charge', - 'mobilityPlatform.content.parkingChargeZones.price.weekDays': 'Toll charge on workdays', - 'mobilityPlatform.content.parkingChargeZones.price.saturday': 'Toll charge on saturdays', - 'mobilityPlatform.content.parkingChargeZones.price.sunday': 'Toll charge on sundays', + 'mobilityPlatform.content.parkingChargeZones.zone': 'Zone: {value}', + 'mobilityPlatform.content.parkingChargeZones.price': 'Charge: {value}', + 'mobilityPlatform.content.parkingChargeZones.price.weekDays': 'Toll charge on workdays: {value}', + 'mobilityPlatform.content.parkingChargeZones.price.saturday': 'Toll charge on saturdays: {value}', + 'mobilityPlatform.content.parkingChargeZones.price.sunday': 'Toll charge on sundays: {value}', 'mobilityPlatform.content.description.notAvailable': 'Description text is not available.', 'mobilityPlatform.content.cityBikes.title': 'City bike station', 'mobilityPlatform.content.cityBikes.name': 'Station: {value}', diff --git a/src/i18n/fi.js b/src/i18n/fi.js index 6a17d4a0a..c118e734e 100644 --- a/src/i18n/fi.js +++ b/src/i18n/fi.js @@ -749,7 +749,7 @@ const translations = { 'mobilityPlatform.menu.routes.info': 'Valitse reitti oheisesta listasta.', 'mobilityPlatform.menu.routes.emptyList': 'Reittejä ladataan.', 'mobilityPlatform.menu.bicycleRoutes.title': 'Tietoja reitistä.', - 'mobilityPlatform.menu.bicycleRoutes.length': 'Reitin pituus:', + 'mobilityPlatform.menu.bicycleRoutes.length': 'Reitin pituus: {value} km.', 'mobilityPlatform.menu.routes.name': 'Reitti', 'mobilityPlatform.menu.showRentalCars': 'Yhteiskäyttöautot', 'mobilityPlatform.menu.showParkingSpaces': 'Pysäköintialueet', @@ -847,11 +847,11 @@ const translations = { 'mobilityPlatform.content.parkingSpaces.type': 'Maksutyyppi', 'mobilityPlatform.content.parkingSpaces.paid': 'Maksullinen', 'mobilityPlatform.content.parkingSpaces.empty': 'Ei vapaita paikkoja jäljellä', - 'mobilityPlatform.content.parkingChargeZones.zone': 'Vyöhyke', - 'mobilityPlatform.content.parkingChargeZones.price': 'Hinta', - 'mobilityPlatform.content.parkingChargeZones.price.weekDays': 'Maksullisuus arkisin', - 'mobilityPlatform.content.parkingChargeZones.price.saturday': 'Maksullisuus lauantaisin', - 'mobilityPlatform.content.parkingChargeZones.price.sunday': 'Maksullisuus sunnuntaisin', + 'mobilityPlatform.content.parkingChargeZones.zone': 'Vyöhyke: {value}', + 'mobilityPlatform.content.parkingChargeZones.price': 'Hinta: {value}', + 'mobilityPlatform.content.parkingChargeZones.price.weekDays': 'Maksullisuus arkisin: {value}', + 'mobilityPlatform.content.parkingChargeZones.price.saturday': 'Maksullisuus lauantaisin: {value}', + 'mobilityPlatform.content.parkingChargeZones.price.sunday': 'Maksullisuus sunnuntaisin: {value}', 'mobilityPlatform.content.description.notAvailable': 'Kuvaustekstiä ei ole saatavilla.', 'mobilityPlatform.content.cityBikes.title': 'Kaupunkipyöräasema', 'mobilityPlatform.content.cityBikes.name': 'Asema: {value}', diff --git a/src/i18n/sv.js b/src/i18n/sv.js index c9ea47b12..cd41bfbd9 100644 --- a/src/i18n/sv.js +++ b/src/i18n/sv.js @@ -748,7 +748,7 @@ const translations = { 'mobilityPlatform.menu.routes.info': 'Du kan välja rutten från nedanstående listan.', 'mobilityPlatform.menu.routes.emptyList': 'Rutter håller på att laddas.', 'mobilityPlatform.menu.bicycleRoutes.title': 'Information om rutten.', - 'mobilityPlatform.menu.bicycleRoutes.length': 'Ruttlängd:', + 'mobilityPlatform.menu.bicycleRoutes.length': 'Ruttlängd: {value} km.', 'mobilityPlatform.menu.routes.name': 'Rutt', 'mobilityPlatform.menu.showRentalCars': 'Bil för delad användning', 'mobilityPlatform.menu.showParkingSpaces': 'Parkeringsplatser', @@ -856,11 +856,11 @@ const translations = { 'mobilityPlatform.content.parkingSpaces.type': 'Typ av betalning', 'mobilityPlatform.content.parkingSpaces.paid': 'Avgiftsbelagd', 'mobilityPlatform.content.parkingSpaces.empty': 'Inga lediga platser kvar: {value} / {capacity}', - 'mobilityPlatform.content.parkingChargeZones.zone': 'Zon', - 'mobilityPlatform.content.parkingChargeZones.price': 'Avgift', - 'mobilityPlatform.content.parkingChargeZones.price.weekDays': 'Avgiftsbelagd vardagar', - 'mobilityPlatform.content.parkingChargeZones.price.saturday': 'Avgiftsbelagd lördagar', - 'mobilityPlatform.content.parkingChargeZones.price.sunday': 'Avgiftsbelagd söndagar', + 'mobilityPlatform.content.parkingChargeZones.zone': 'Zon: {value}', + 'mobilityPlatform.content.parkingChargeZones.price': 'Avgift: {value}', + 'mobilityPlatform.content.parkingChargeZones.price.weekDays': 'Avgiftsbelagd vardagar: {value}', + 'mobilityPlatform.content.parkingChargeZones.price.saturday': 'Avgiftsbelagd lördagar: {value}', + 'mobilityPlatform.content.parkingChargeZones.price.sunday': 'Avgiftsbelagd söndagar: {value}', 'mobilityPlatform.content.description.notAvailable': 'Beskrivningstext är inte tillgänglig.', 'mobilityPlatform.content.cityBikes.title': 'Stadscykelstation', 'mobilityPlatform.content.cityBikes.name': 'Station: {value}', diff --git a/src/views/MobilitySettingsView/MobilitySettingsView.js b/src/views/MobilitySettingsView/MobilitySettingsView.js index 1965cc769..630e39ca9 100644 --- a/src/views/MobilitySettingsView/MobilitySettingsView.js +++ b/src/views/MobilitySettingsView/MobilitySettingsView.js @@ -1,6 +1,4 @@ -import { - Checkbox, FormControlLabel, Typography, List, ListItem, -} from '@mui/material'; +import { Typography, List, ListItem } from '@mui/material'; import PropTypes from 'prop-types'; import React, { useEffect, useMemo, useRef, useState, @@ -10,6 +8,10 @@ import { ReactSVG } from 'react-svg'; import { useSelector } from 'react-redux'; import { useLocation } from 'react-router-dom'; import { Air, WarningAmber } from '@mui/icons-material'; +import { useTheme } from '@mui/styles'; +import { useIntl } from 'react-intl'; +import { css } from '@emotion/css'; +import styled from '@emotion/styled'; import iconBicycle from 'servicemap-ui-turku/assets/icons/icons-icon_bicycle.svg'; import iconBoat from 'servicemap-ui-turku/assets/icons/icons-icon_boating.svg'; import iconCar from 'servicemap-ui-turku/assets/icons/icons-icon_car.svg'; @@ -36,10 +38,11 @@ import ScooterProviderList from './components/ScooterProviderList'; import SMAccordion from '../../components/SMAccordion'; import SpeedLimitZonesList from './components/SpeedLimitZonesList'; import RouteList from './components/RouteList'; +import StreetMaintenanceList from './components/StreetMaintenanceList'; import MobilityToggleButton from './components/MobilityToggleButton'; import AirMonitoringInfo from './components/AirMonitoringInfo'; -const MobilitySettingsView = ({ classes, intl, navigator }) => { +const MobilitySettingsView = ({ navigator }) => { const [pageTitle, setPageTitle] = useState(null); const [openWalkSettings, setOpenWalkSettings] = useState(false); const [openBicycleSettings, setOpenBicycleSettings] = useState(false); @@ -63,6 +66,9 @@ const MobilitySettingsView = ({ classes, intl, navigator }) => { const [openNatureTrailsList, setOpenNatureTrailsList] = useState(false); const [openFitnessTrailsList, setOpenFitnessTrailsList] = useState(false); + const intl = useIntl(); + const theme = useTheme(); + const { setOpenMobilityPlatform, showTrafficCounter, @@ -180,6 +186,13 @@ const MobilitySettingsView = ({ classes, intl, navigator }) => { const location = useLocation(); const getLocaleText = useLocaleText(); + const iconClass = css({ + fill: 'rgba(0, 0, 0, 255)', + width: '40px', + height: '40px', + marginRight: theme.spacing(1), + }); + const bikeInfo = { paragraph1: 'mobilityPlatform.info.cityBikes.paragraph.1', paragraph2: 'mobilityPlatform.info.cityBikes.paragraph.2', @@ -378,7 +391,14 @@ const MobilitySettingsView = ({ classes, intl, navigator }) => { checkVisibilityValues(showCityBikes, setOpenBicycleSettings); checkVisibilityValues(showCargoBikes, setOpenBicycleSettings); checkVisibilityValues(showParkAndRideBikes, setOpenBicycleSettings); - }, [showBicycleStands, showHullLockableStands, showBikeServiceStations, showCityBikes, showCargoBikes, showParkAndRideBikes]); + }, [ + showBicycleStands, + showHullLockableStands, + showBikeServiceStations, + showCityBikes, + showCargoBikes, + showParkAndRideBikes, + ]); useEffect(() => { checkVisibilityValues(showBicycleRoutes, setOpenBicycleSettings); @@ -1471,7 +1491,6 @@ const MobilitySettingsView = ({ classes, intl, navigator }) => { routeAttr={bicycleRouteName} type="BicycleRoute" setRouteState={setBicycleRouteState} - locale={locale} /> ); @@ -1487,16 +1506,15 @@ const MobilitySettingsView = ({ classes, intl, navigator }) => { routeAttr={cultureRouteId} type="CultureRoute" setRouteState={setCultureRouteState} - locale={locale} /> ); const renderSelectTrailText = (visibilityValue, obj, routeList) => { const isObjValid = Object.keys(obj).length > 0; return ( -
    + {visibilityValue && !isObjValid ? : null} -
    + ); }; @@ -1508,14 +1526,14 @@ const MobilitySettingsView = ({ classes, intl, navigator }) => { const renderSettings = (settingVisibility, settingsData) => { if (settingVisibility) { return settingsData.map(item => ( -
    + -
    + )); } return null; @@ -1531,59 +1549,15 @@ const MobilitySettingsView = ({ classes, intl, navigator }) => { // This list will be displayed for users const speedLimitListAsc = speedLimitList.sort((a, b) => a - b); - const streetMaintenanceInfo = (colorClass, translationId) => ( -
    -
    -
    - {intl.formatMessage({ id: translationId })} -
    -
    + const renderMaintenanceSelectionList = () => ( + ); - const renderMaintenanceSelectionList = () => (openStreetMaintenanceSelectionList ? ( - <> -
    - - {intl.formatMessage({ id: 'mobilityPlatform.menu.streetMaintenance.info' })} - - {!isActiveStreetMaintenance && streetMaintenancePeriod ? ( - - ) : null} -
    - {streetMaintenanceSelections?.length > 0 - && streetMaintenanceSelections.map(item => ( -
    - item.onChangeValue(item.type)} - /> - )} - label={( - - {intl.formatMessage({ id: item.msgId })} - - )} - /> -
    - ))} -
    -
    - {streetMaintenanceInfo(classes.blue, 'mobilityPlatform.menu.streetMaintenance.info.snowplow')} - {streetMaintenanceInfo(classes.purple, 'mobilityPlatform.menu.streetMaintenance.info.deicing')} - {streetMaintenanceInfo(classes.burgundy, 'mobilityPlatform.menu.streetMaintenance.info.sandRemoval')} - {streetMaintenanceInfo(classes.green, 'mobilityPlatform.menu.streetMaintenance.info.sanitation')} -
    -
    - - ) : null); - const infoTextsWalking = [ { visible: showTrafficCounter.walking, @@ -1850,9 +1824,9 @@ const MobilitySettingsView = ({ classes, intl, navigator }) => { const renderWalkSettings = () => ( <> {renderSettings(openWalkSettings, walkingControlTypes)} -
    + {openCultureRouteList && !cultureRouteId ? : null} -
    + {openCultureRouteList && (locale === 'en' || locale === 'sv') ? renderCultureRoutes(localizedCultureRoutes) : null} @@ -1888,9 +1862,9 @@ const MobilitySettingsView = ({ classes, intl, navigator }) => { const renderBicycleSettings = () => ( <> {renderSettings(openBicycleSettings, bicycleControlTypes)} -
    + {openBicycleRouteList && !bicycleRouteName ? : null} -
    + {renderBicycleRoutes(bicycleRouteList)} {renderInfoTexts(infoTextsCycling)} @@ -1957,11 +1931,7 @@ const MobilitySettingsView = ({ classes, intl, navigator }) => { * @param {*} icon * @returns JSX Element */ - const renderIcon = icon => ( -
    - {icon} -
    - ); + const renderIcon = icon => {icon}; const renderRoadworkSettings = () => ( <> @@ -1974,49 +1944,49 @@ const MobilitySettingsView = ({ classes, intl, navigator }) => { { component: renderWalkSettings(), title: intl.formatMessage({ id: 'mobilityPlatform.menu.title.walk' }), - icon: , + icon: , onClick: walkSettingsToggle, setState: openWalkSettings, }, { component: renderBicycleSettings(), title: intl.formatMessage({ id: 'mobilityPlatform.menu.title.bicycle' }), - icon: , + icon: , onClick: bicycleSettingsToggle, setState: openBicycleSettings, }, { component: renderCarSettings(), title: intl.formatMessage({ id: 'mobilityPlatform.menu.title.car' }), - icon: , + icon: , onClick: carSettingsToggle, setState: openCarSettings, }, { component: renderPublicTransportSettings(), title: intl.formatMessage({ id: 'mobilityPlatform.menu.title.public.transport' }), - icon: , + icon: , onClick: publicTransportSettingsToggle, setState: openPublicTransportSettings, }, { component: renderScooterSettings(), title: intl.formatMessage({ id: 'mobilityPlatform.menu.title.scooter' }), - icon: , + icon: , onClick: scooterSettingsToggle, setState: openScooterSettings, }, { component: renderBoatingSettings(), title: intl.formatMessage({ id: 'mobilityPlatform.menu.title.boating' }), - icon: , + icon: , onClick: boatingSettingsToggle, setState: openBoatingSettings, }, { component: renderStreetMaintenanceSettings(), title: intl.formatMessage({ id: 'mobilityPlatform.menu.title.streetMaintenance' }), - icon: , + icon: , onClick: streetMaintenanceSettingsToggle, setState: openStreetMaintenanceSettings, }, @@ -2037,24 +2007,25 @@ const MobilitySettingsView = ({ classes, intl, navigator }) => { ]; return ( -
    +
    {renderHead()} navigator.push('home')} - className={classes.topBarColor} /> - - {intl.formatMessage({ id: 'home.buttons.mobilityPlatformSettings' })} - -
    -
    -
    + + + {intl.formatMessage({ id: 'home.buttons.mobilityPlatformSettings' })} + + +
    + + {categories.map(category => ( - + { ))} -
    -
    + +
    ); }; +const StyledCheckBoxContainer = styled.div(({ theme }) => ({ + width: '100%', + backgroundColor: 'rgb(250, 250, 250)', + paddingTop: theme.spacing(1.5), + paddingBottom: theme.spacing(1.5), +})); + +const StyledIconContainer = styled.div(({ theme }) => ({ + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + width: '40px', + height: '40px', + marginRight: theme.spacing(1), +})); + +const StyledListContainer = styled.div(() => ({ + width: '100%', +})); + +const StyledListMargin = styled.div(() => ({ + marginTop: '0', +})); + +const StyledTextContainer = styled.div(({ theme }) => ({ + backgroundColor: theme.palette.primary.main, + padding: `${theme.spacing(3)} ${theme.spacing(2)}`, + paddingTop: theme.spacing(1), + color: '#fff', + textAlign: 'left', +})); + +const StyledBorderBottom = styled.div(({ isVisible }) => ({ + borderBottom: isVisible ? '1px solid rgba(193, 193, 193, 255)' : 'none', +})); + MobilitySettingsView.propTypes = { - intl: PropTypes.shape({ - formatMessage: PropTypes.func, - }).isRequired, - classes: PropTypes.objectOf(PropTypes.string).isRequired, navigator: PropTypes.objectOf(PropTypes.any), }; diff --git a/src/views/MobilitySettingsView/components/ButtonMain/ButtonMain.js b/src/views/MobilitySettingsView/components/ButtonMain/ButtonMain.js deleted file mode 100644 index 4008205b5..000000000 --- a/src/views/MobilitySettingsView/components/ButtonMain/ButtonMain.js +++ /dev/null @@ -1,57 +0,0 @@ -import { Button, Typography } from '@mui/material'; -import PropTypes from 'prop-types'; -import React from 'react'; -import { ReactSVG } from 'react-svg'; - -/** - * Render 1 or more buttons with icon and text - * @property {any} classes - * @property {any} intl - * @property {Function} onClickFunc - * @property {boolean} settingState - * @property {string} iconName - * @property {string} translationId - * @return {JSX Element} - */ - -const ButtonMain = ({ - classes, intl, onClickFunc, settingState, iconName, translationId, -}) => ( - -); - -ButtonMain.propTypes = { - classes: PropTypes.objectOf(PropTypes.any).isRequired, - intl: PropTypes.objectOf(PropTypes.any).isRequired, - onClickFunc: PropTypes.func.isRequired, - settingState: PropTypes.bool, - iconName: PropTypes.string, - translationId: PropTypes.string, -}; - -ButtonMain.defaultProps = { - settingState: false, - iconName: '', - translationId: '', -}; - -export default ButtonMain; diff --git a/src/views/MobilitySettingsView/components/ButtonMain/__tests__/ButtonMain.test.js b/src/views/MobilitySettingsView/components/ButtonMain/__tests__/ButtonMain.test.js deleted file mode 100644 index 9a8a4e67c..000000000 --- a/src/views/MobilitySettingsView/components/ButtonMain/__tests__/ButtonMain.test.js +++ /dev/null @@ -1,44 +0,0 @@ -// Link.react.test.js -import React from 'react'; -import { fireEvent } from '@testing-library/react'; -import ButtonMain from '../index'; -import { getRenderWithProviders } from '../../../../../../jestUtils'; -import finnishTranslations from '../../../../../i18n/fi'; - -const mockProps = { - settingState: false, - iconName: 'testi', - translationId: 'mobilityPlatform.menu.title.bicycle', -}; - -const renderWithProviders = getRenderWithProviders({}); - -describe('', () => { - it('should work', () => { - const { container } = renderWithProviders(); - expect(container).toMatchSnapshot(); - }); - - it('does show text correctly', () => { - const { container } = renderWithProviders(); - - const p = container.querySelectorAll('p'); - expect(p[0].textContent).toContain(finnishTranslations['mobilityPlatform.menu.title.bicycle']); - }); - - it('does contain aria-label attribute', () => { - const { container } = renderWithProviders(); - - const button = container.querySelectorAll('button'); - expect(button[0].getAttribute('aria-label')).toContain(finnishTranslations['mobilityPlatform.menu.title.bicycle']); - }); - - it('simulates click event', () => { - const mockCallBack = jest.fn(); - const { getByRole } = renderWithProviders( - , - ); - fireEvent.click(getByRole('button')); - expect(mockCallBack.mock.calls.length).toEqual(1); - }); -}); diff --git a/src/views/MobilitySettingsView/components/ButtonMain/__tests__/__snapshots__/ButtonMain.test.js.snap b/src/views/MobilitySettingsView/components/ButtonMain/__tests__/__snapshots__/ButtonMain.test.js.snap deleted file mode 100644 index b1af5526f..000000000 --- a/src/views/MobilitySettingsView/components/ButtonMain/__tests__/__snapshots__/ButtonMain.test.js.snap +++ /dev/null @@ -1,28 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` should work 1`] = ` -
    - -
    -`; diff --git a/src/views/MobilitySettingsView/components/ButtonMain/index.js b/src/views/MobilitySettingsView/components/ButtonMain/index.js deleted file mode 100644 index 9100c328f..000000000 --- a/src/views/MobilitySettingsView/components/ButtonMain/index.js +++ /dev/null @@ -1,6 +0,0 @@ -import { withStyles } from '@mui/styles'; -import { injectIntl } from 'react-intl'; -import ButtonMain from './ButtonMain'; -import styles from './styles'; - -export default withStyles(styles)(injectIntl(ButtonMain)); diff --git a/src/views/MobilitySettingsView/components/ButtonMain/styles.js b/src/views/MobilitySettingsView/components/ButtonMain/styles.js deleted file mode 100644 index 8d9b3499c..000000000 --- a/src/views/MobilitySettingsView/components/ButtonMain/styles.js +++ /dev/null @@ -1,42 +0,0 @@ -const styles = theme => ({ - button: { - color: 'rgba(0, 0, 0, 255)', - width: '100%', - height: '3.125rem', - background: 'rgba(245, 245, 245, 255)', - textTransform: 'none', - justifyContent: 'flex-start', - borderRadius: '0', - borderTop: '1px solid rgba(0, 0, 0, 255)', - borderBottom: 'none', - '&:hover': { - background: 'rgba(230, 230, 230, 255)', - }, - }, - active: { - borderBottom: '1px solid #6f7276', - borderTop: '1px solid #6f7276', - background: 'rgba(70, 72, 75, 255)', - color: '#fff', - '&:hover': { - color: '#fff', - background: '#3e3f42', - borderBottom: '1px solid #6f7276', - borderTop: '1px solid #6f7276', - }, - }, - iconActive: { - fill: '#fff', - width: '40px', - height: '40px', - marginRight: theme.spacing(1), - }, - icon: { - fill: '#000', - width: '40px', - height: '40px', - marginRight: theme.spacing(1), - }, -}); - -export default styles; diff --git a/src/views/MobilitySettingsView/components/CityBikeInfo/CityBikeInfo.js b/src/views/MobilitySettingsView/components/CityBikeInfo/CityBikeInfo.js index d1826b024..6a6e1282d 100644 --- a/src/views/MobilitySettingsView/components/CityBikeInfo/CityBikeInfo.js +++ b/src/views/MobilitySettingsView/components/CityBikeInfo/CityBikeInfo.js @@ -1,55 +1,56 @@ import { Link, Typography } from '@mui/material'; import PropTypes from 'prop-types'; -import React, { useEffect, useState } from 'react'; -import { useSelector } from 'react-redux'; +import React from 'react'; +import styled from '@emotion/styled'; +import { useIntl } from 'react-intl'; +import useLocaleText from '../../../../utils/useLocaleText'; -const CityBikeInfo = ({ - classes, intl, bikeInfo, -}) => { - const [url, setUrl] = useState(bikeInfo.url.fi); - - const locale = useSelector(state => state.user.locale); - - useEffect(() => { - if (locale === 'en') { - setUrl(bikeInfo.url.en); - } - if (locale === 'sv') { - setUrl(bikeInfo.url.sv); - } - }, [locale]); +const CityBikeInfo = ({ bikeInfo }) => { + const intl = useIntl(); + const getLocaleText = useLocaleText(); const text = textValue => ( - - {intl.formatMessage({ - id: textValue, - })} - + + + {intl.formatMessage({ + id: textValue, + })} + + ); return ( -
    + {text(bikeInfo.paragraph1)} {text(bikeInfo.paragraph2)} {text(bikeInfo.subtitle)} - + {text(bikeInfo.link)} {text(bikeInfo.apiInfo)} -
    + ); }; +const StyledContainer = styled.div(({ theme }) => ({ + padding: `${theme.spacing(1)} ${theme.spacing(2)}`, + textAlign: 'left', +})); + +const StyledTextMargin = styled.div(({ theme }) => ({ + marginBottom: theme.spacing(1), +})); + CityBikeInfo.propTypes = { - classes: PropTypes.objectOf(PropTypes.any).isRequired, - intl: PropTypes.objectOf(PropTypes.any).isRequired, - bikeInfo: PropTypes.objectOf(PropTypes.any), + bikeInfo: PropTypes.shape({ + paragraph1: PropTypes.string, + paragraph2: PropTypes.string, + paragraph3: PropTypes.string, + subtitle: PropTypes.string, + link: PropTypes.string, + apiInfo: PropTypes.string, + url: PropTypes.objectOf(PropTypes.string), + }), }; CityBikeInfo.defaultProps = { diff --git a/src/views/MobilitySettingsView/components/CityBikeInfo/__tests__/CityBikeInfo.test.js b/src/views/MobilitySettingsView/components/CityBikeInfo/__tests__/CityBikeInfo.test.js index 2f9f653ce..bc8c72c29 100644 --- a/src/views/MobilitySettingsView/components/CityBikeInfo/__tests__/CityBikeInfo.test.js +++ b/src/views/MobilitySettingsView/components/CityBikeInfo/__tests__/CityBikeInfo.test.js @@ -42,15 +42,4 @@ describe('', () => { expect(link.textContent).toContain(finnishTranslations['mobilityPlatform.info.cityBikes.link']); expect(p[4].textContent).toContain(finnishTranslations['mobilityPlatform.info.cityBikes.apiInfo']); }); - - it('does contain aria-label attributes', () => { - const { container } = renderWithProviders(); - - const p = container.querySelectorAll('p'); - expect(p[0].getAttribute('aria-label')).toContain(finnishTranslations['mobilityPlatform.info.cityBikes.paragraph.1']); - expect(p[1].getAttribute('aria-label')).toContain(finnishTranslations['mobilityPlatform.info.cityBikes.paragraph.2']); - expect(p[2].getAttribute('aria-label')).toContain(finnishTranslations['mobilityPlatform.info.cityBikes.subtitle']); - expect(p[3].getAttribute('aria-label')).toContain(finnishTranslations['mobilityPlatform.info.cityBikes.link']); - expect(p[4].getAttribute('aria-label')).toContain(finnishTranslations['mobilityPlatform.info.cityBikes.apiInfo']); - }); }); diff --git a/src/views/MobilitySettingsView/components/CityBikeInfo/__tests__/__snapshots__/CityBikeInfo.test.js.snap b/src/views/MobilitySettingsView/components/CityBikeInfo/__tests__/__snapshots__/CityBikeInfo.test.js.snap index 63e263650..deb84fad5 100644 --- a/src/views/MobilitySettingsView/components/CityBikeInfo/__tests__/__snapshots__/CityBikeInfo.test.js.snap +++ b/src/views/MobilitySettingsView/components/CityBikeInfo/__tests__/__snapshots__/CityBikeInfo.test.js.snap @@ -3,44 +3,59 @@ exports[` should work 1`] = `
    -

    - Turun kaupunkipyörät eli tuttavallisemmin föllärit, ovat pyöriä, joita kuka vaan voi vuokrata Donkey Republicin sovelluksella. Föllärin voi vuokrata kertamaksulla, kuukausimaksulla tai koko kesän kattavalla kausimaksulla. -

    -

    + Turun kaupunkipyörät eli tuttavallisemmin föllärit, ovat pyöriä, joita kuka vaan voi vuokrata Donkey Republicin sovelluksella. Föllärin voi vuokrata kertamaksulla, kuukausimaksulla tai koko kesän kattavalla kausimaksulla. +

    +
    +
    - Jos sinulla on käytössä Fölin kausikortti, jonka kausi on vähintään 30 päivää, sisältää oikeuden käyttää fölläreitä tunnin ajan kerrallaan maksutta. Vuokrattavia pyöriä on 700 ja asemia yli 70 kappaletta. -

    -

    + Jos sinulla on käytössä Fölin kausikortti, jonka kausi on vähintään 30 päivää, sisältää oikeuden käyttää fölläreitä tunnin ajan kerrallaan maksutta. Vuokrattavia pyöriä on 700 ja asemia yli 70 kappaletta. +

    +
    +
    - Lue lisää kaupunkipyöristä: -

    +

    + Lue lisää kaupunkipyöristä: +

    +
    -

    - https://www.foli.fi/fi/aikataulut-ja-reitit/fölifillarit -

    +

    + https://www.foli.fi/fi/aikataulut-ja-reitit/fölifillarit +

    +
    -

    - Kartan tiedot tulevat Donkey Republicin rajapinnasta reaaliajassa. -

    +

    + Kartan tiedot tulevat Donkey Republicin rajapinnasta reaaliajassa. +

    +
    `; diff --git a/src/views/MobilitySettingsView/components/CityBikeInfo/index.js b/src/views/MobilitySettingsView/components/CityBikeInfo/index.js index 50cc8d81a..09ea5f16f 100644 --- a/src/views/MobilitySettingsView/components/CityBikeInfo/index.js +++ b/src/views/MobilitySettingsView/components/CityBikeInfo/index.js @@ -1,6 +1,3 @@ -import { withStyles } from '@mui/styles'; -import { injectIntl } from 'react-intl'; import CityBikeInfo from './CityBikeInfo'; -import styles from './styles'; -export default withStyles(styles)(injectIntl(CityBikeInfo)); +export default CityBikeInfo; diff --git a/src/views/MobilitySettingsView/components/CityBikeInfo/styles.js b/src/views/MobilitySettingsView/components/CityBikeInfo/styles.js deleted file mode 100644 index 440e3a413..000000000 --- a/src/views/MobilitySettingsView/components/CityBikeInfo/styles.js +++ /dev/null @@ -1,12 +0,0 @@ -const styles = theme => ({ - container: { - padding: theme.spacing(2), - textAlign: 'left', - paddingBottom: theme.spacing(1), - }, - margin: { - marginBottom: theme.spacing(1), - }, -}); - -export default styles; diff --git a/src/views/MobilitySettingsView/components/Description/Description.js b/src/views/MobilitySettingsView/components/Description/Description.js index 7d417bdb5..124ac05b8 100644 --- a/src/views/MobilitySettingsView/components/Description/Description.js +++ b/src/views/MobilitySettingsView/components/Description/Description.js @@ -1,46 +1,50 @@ import { Typography } from '@mui/material'; import PropTypes from 'prop-types'; import React from 'react'; +import styled from '@emotion/styled'; +import useLocaleText from '../../../../utils/useLocaleText'; + +const Description = ({ route }) => { + const getLocaleText = useLocaleText(); -const Description = ({ classes, route, currentLocale }) => { // Hide references to sizes of audio files. // Only finnish and english descriptions have those. - const replaceWord = inputStr => inputStr.replace(/Latauskoko ~90M|koko ~43M|Size ~6MB/gi, ''); - - const selectRouteDescription = (descriptionSv, descriptionEn, descriptionFi) => { - if (currentLocale === 'sv' && descriptionSv) { - return descriptionSv; - } - if (currentLocale === 'en' && descriptionEn) { - return replaceWord(descriptionEn); - } - return replaceWord(descriptionFi); + const replaceWord = inputStr => inputStr?.replace(/Latauskoko ~90M|koko ~43M|Size ~6MB/gi, ''); + + const descriptions = { + fi: replaceWord(route.description), + en: replaceWord(route.description_en), + sv: route.description_sv, }; return ( -
    -
    - - {selectRouteDescription(route.description_sv, route.description_en, route.description)} - -
    -
    + + + {getLocaleText(descriptions)} + + ); }; +const StyledParagraph = styled.div(({ theme }) => ({ + textAlign: 'left', + padding: theme.spacing(1.5), + width: '85%', +})); + Description.propTypes = { - classes: PropTypes.objectOf(PropTypes.any).isRequired, - route: PropTypes.objectOf(PropTypes.any), - currentLocale: PropTypes.string, + route: PropTypes.shape({ + description: PropTypes.string, + description_en: PropTypes.string, + description_sv: PropTypes.string, + }), }; Description.defaultProps = { - route: null, - currentLocale: 'fi', + route: {}, }; export default Description; diff --git a/src/views/MobilitySettingsView/components/Description/__tests__/Description.test.js b/src/views/MobilitySettingsView/components/Description/__tests__/Description.test.js index 080124905..8836f890b 100644 --- a/src/views/MobilitySettingsView/components/Description/__tests__/Description.test.js +++ b/src/views/MobilitySettingsView/components/Description/__tests__/Description.test.js @@ -2,6 +2,7 @@ import React from 'react'; import Description from '../index'; import { getRenderWithProviders } from '../../../../../../jestUtils'; +import { initialState } from '../../../../../redux/reducers/user'; const mockProps = { route: { @@ -11,7 +12,9 @@ const mockProps = { }, }; -const renderWithProviders = getRenderWithProviders({}); +const renderWithProviders = getRenderWithProviders({ + user: initialState, +}); describe('', () => { it('should work', () => { @@ -25,11 +28,4 @@ describe('', () => { const p = container.querySelectorAll('p'); expect(p[0].textContent).toEqual(mockProps.route.description); }); - - it('does contain aria-label attribute', () => { - const { container } = renderWithProviders(); - - const p = container.querySelectorAll('p'); - expect(p[0].getAttribute('aria-label')).toEqual(mockProps.route.description); - }); }); diff --git a/src/views/MobilitySettingsView/components/Description/__tests__/__snapshots__/Description.test.js.snap b/src/views/MobilitySettingsView/components/Description/__tests__/__snapshots__/Description.test.js.snap index 631650c1f..54189ad09 100644 --- a/src/views/MobilitySettingsView/components/Description/__tests__/__snapshots__/Description.test.js.snap +++ b/src/views/MobilitySettingsView/components/Description/__tests__/__snapshots__/Description.test.js.snap @@ -2,17 +2,14 @@ exports[` should work 1`] = `
    -
    -
    +

    -

    - testikuvaus -

    -
    + testikuvaus +

    `; diff --git a/src/views/MobilitySettingsView/components/Description/index.js b/src/views/MobilitySettingsView/components/Description/index.js index fb210402d..7cbdb5c55 100644 --- a/src/views/MobilitySettingsView/components/Description/index.js +++ b/src/views/MobilitySettingsView/components/Description/index.js @@ -1,6 +1,3 @@ -import { withStyles } from '@mui/styles'; -import { injectIntl } from 'react-intl'; import Description from './Description'; -import styles from './styles'; -export default withStyles(styles)(injectIntl(Description)); +export default Description; diff --git a/src/views/MobilitySettingsView/components/Description/styles.js b/src/views/MobilitySettingsView/components/Description/styles.js deleted file mode 100644 index 960cfef3e..000000000 --- a/src/views/MobilitySettingsView/components/Description/styles.js +++ /dev/null @@ -1,15 +0,0 @@ -const styles = theme => ({ - paragraph: { - textAlign: 'left', - padding: theme.spacing(1.5), - width: '85%', - }, - subtitle: { - textTransform: 'none', - }, - margin: { - marginBottom: theme.spacing(1), - }, -}); - -export default styles; diff --git a/src/views/MobilitySettingsView/components/EmptyRouteList/EmptyRouteList.js b/src/views/MobilitySettingsView/components/EmptyRouteList/EmptyRouteList.js index ef974d3df..734c1414d 100644 --- a/src/views/MobilitySettingsView/components/EmptyRouteList/EmptyRouteList.js +++ b/src/views/MobilitySettingsView/components/EmptyRouteList/EmptyRouteList.js @@ -1,42 +1,44 @@ import { Typography } from '@mui/material'; import PropTypes from 'prop-types'; import React from 'react'; +import { useIntl } from 'react-intl'; +import styled from '@emotion/styled'; /** * Check if route list is empty and render correct text - * @property {any} classes - * @property {any} intl * @property {Array} route * @return {JSX Element} */ -const EmptyRouteList = ({ classes, intl, route }) => { +const EmptyRouteList = ({ route }) => { + const intl = useIntl(); + if (route) { return ( -
    + 0 - ? intl.formatMessage({ id: 'mobilityPlatform.menu.routes.info' }) - : intl.formatMessage({ id: 'mobilityPlatform.menu.routes.emptyList' }) - } > {route.length > 0 ? intl.formatMessage({ id: 'mobilityPlatform.menu.routes.info' }) : intl.formatMessage({ id: 'mobilityPlatform.menu.routes.emptyList' })} -
    + ); } return null; }; +const StyledParagraph = styled.div(({ theme }) => ({ + textAlign: 'left', + padding: theme.spacing(1.5), +})); + EmptyRouteList.propTypes = { - classes: PropTypes.objectOf(PropTypes.any).isRequired, - intl: PropTypes.objectOf(PropTypes.any).isRequired, - route: PropTypes.arrayOf(PropTypes.any), + route: PropTypes.arrayOf(PropTypes.shape({ + name: PropTypes.string, + })), }; EmptyRouteList.defaultProps = { diff --git a/src/views/MobilitySettingsView/components/EmptyRouteList/__tests__/EmptyRouteList.test.js b/src/views/MobilitySettingsView/components/EmptyRouteList/__tests__/EmptyRouteList.test.js index 22e41630e..077d57df5 100644 --- a/src/views/MobilitySettingsView/components/EmptyRouteList/__tests__/EmptyRouteList.test.js +++ b/src/views/MobilitySettingsView/components/EmptyRouteList/__tests__/EmptyRouteList.test.js @@ -23,11 +23,4 @@ describe('', () => { const p = container.querySelectorAll('p'); expect(p[0].textContent).toContain(finnishTranslations['mobilityPlatform.menu.routes.emptyList']); }); - - it('does contain aria-label attributes', () => { - const { container } = renderWithProviders(); - - const p = container.querySelectorAll('p'); - expect(p[0].getAttribute('aria-label')).toContain(finnishTranslations['mobilityPlatform.menu.routes.emptyList']); - }); }); diff --git a/src/views/MobilitySettingsView/components/EmptyRouteList/__tests__/__snapshots__/EmptyRouteList.test.js.snap b/src/views/MobilitySettingsView/components/EmptyRouteList/__tests__/__snapshots__/EmptyRouteList.test.js.snap index a178c4e08..db2d02ed4 100644 --- a/src/views/MobilitySettingsView/components/EmptyRouteList/__tests__/__snapshots__/EmptyRouteList.test.js.snap +++ b/src/views/MobilitySettingsView/components/EmptyRouteList/__tests__/__snapshots__/EmptyRouteList.test.js.snap @@ -3,10 +3,9 @@ exports[` should work 1`] = `

    Reittejä ladataan. diff --git a/src/views/MobilitySettingsView/components/EmptyRouteList/index.js b/src/views/MobilitySettingsView/components/EmptyRouteList/index.js index b4e3b57c7..6ec1e263d 100644 --- a/src/views/MobilitySettingsView/components/EmptyRouteList/index.js +++ b/src/views/MobilitySettingsView/components/EmptyRouteList/index.js @@ -1,6 +1,3 @@ -import { withStyles } from '@mui/styles'; -import { injectIntl } from 'react-intl'; import EmptyRouteList from './EmptyRouteList'; -import styles from './styles'; -export default withStyles(styles)(injectIntl(EmptyRouteList)); +export default EmptyRouteList; diff --git a/src/views/MobilitySettingsView/components/EmptyRouteList/styles.js b/src/views/MobilitySettingsView/components/EmptyRouteList/styles.js deleted file mode 100644 index ced94006d..000000000 --- a/src/views/MobilitySettingsView/components/EmptyRouteList/styles.js +++ /dev/null @@ -1,8 +0,0 @@ -const styles = theme => ({ - paragraph: { - textAlign: 'left', - padding: theme.spacing(1.5), - }, -}); - -export default styles; diff --git a/src/views/MobilitySettingsView/components/ExtendedInfo/ExtendedInfo.js b/src/views/MobilitySettingsView/components/ExtendedInfo/ExtendedInfo.js index 8f33f764b..ddc6cdd10 100644 --- a/src/views/MobilitySettingsView/components/ExtendedInfo/ExtendedInfo.js +++ b/src/views/MobilitySettingsView/components/ExtendedInfo/ExtendedInfo.js @@ -1,42 +1,62 @@ import { Typography } from '@mui/material'; import PropTypes from 'prop-types'; import React from 'react'; +import { useIntl } from 'react-intl'; +import styled from '@emotion/styled'; -const ExtendedInfo = ({ classes, intl, translations }) => { - const text = (message, props = {}) => ( - - {intl.formatMessage({ - id: message, - })} - +const ExtendedInfo = ({ translations }) => { + const intl = useIntl(); + + const text = (message, isMargin) => ( + + + {intl.formatMessage({ + id: message, + })} + + ); return ( -

    + {text(translations.message1)} -
      + {translations.zones.map(item => (
    • {text(item)}
    • ))} -
    - {text(translations.message2, { className: classes.margin })} + + {text(translations.message2, true)} {text(translations.message3)} -
    + ); }; +const StyledContainer = styled.div(({ theme }) => ({ + margin: theme.spacing(2), + textAlign: 'left', + paddingBottom: theme.spacing(2), +})); + +const StyledList = styled.ul(({ theme }) => ({ + marginTop: theme.spacing(1), + marginBottom: theme.spacing(1), +})); + +const StyledTextContainer = styled.div(({ theme, isMargin }) => ({ + marginBottom: isMargin ? theme.spacing(1) : 0, +})); + ExtendedInfo.propTypes = { - classes: PropTypes.objectOf(PropTypes.any).isRequired, - intl: PropTypes.objectOf(PropTypes.any).isRequired, - translations: PropTypes.objectOf(PropTypes.any), + translations: PropTypes.shape({ + message1: PropTypes.string, + message2: PropTypes.string, + message3: PropTypes.string, + zones: PropTypes.arrayOf(PropTypes.string), + }), }; ExtendedInfo.defaultProps = { diff --git a/src/views/MobilitySettingsView/components/ExtendedInfo/__tests__/ExtendedInfo.test.js b/src/views/MobilitySettingsView/components/ExtendedInfo/__tests__/ExtendedInfo.test.js index c13d8c08f..c4bdee8cf 100644 --- a/src/views/MobilitySettingsView/components/ExtendedInfo/__tests__/ExtendedInfo.test.js +++ b/src/views/MobilitySettingsView/components/ExtendedInfo/__tests__/ExtendedInfo.test.js @@ -38,16 +38,4 @@ describe('', () => { expect(list[1].textContent).toContain(finnishTranslations['mobilityPlatform.info.parkingChargeZones.zone.2']); expect(list[2].textContent).toContain(finnishTranslations['mobilityPlatform.info.parkingChargeZones.zone.3']); }); - - it('does contain aria-label attributes', () => { - const { container } = renderWithProviders(); - - const p = container.querySelectorAll('p'); - expect(p[0].getAttribute('aria-label')).toContain(finnishTranslations['mobilityPlatform.info.parkingChargeZones.paragraph.1']); - expect(p[1].getAttribute('aria-label')).toContain(finnishTranslations['mobilityPlatform.info.parkingChargeZones.zone.1']); - expect(p[2].getAttribute('aria-label')).toContain(finnishTranslations['mobilityPlatform.info.parkingChargeZones.zone.2']); - expect(p[3].getAttribute('aria-label')).toContain(finnishTranslations['mobilityPlatform.info.parkingChargeZones.zone.3']); - expect(p[4].getAttribute('aria-label')).toContain(finnishTranslations['mobilityPlatform.info.parkingChargeZones.paragraph.2']); - expect(p[5].getAttribute('aria-label')).toContain(finnishTranslations['mobilityPlatform.info.parkingChargeZones.paragraph.3']); - }); }); diff --git a/src/views/MobilitySettingsView/components/ExtendedInfo/__tests__/__snapshots__/ExtendedInfo.test.js.snap b/src/views/MobilitySettingsView/components/ExtendedInfo/__tests__/__snapshots__/ExtendedInfo.test.js.snap index 902224317..c90b61cec 100644 --- a/src/views/MobilitySettingsView/components/ExtendedInfo/__tests__/__snapshots__/ExtendedInfo.test.js.snap +++ b/src/views/MobilitySettingsView/components/ExtendedInfo/__tests__/__snapshots__/ExtendedInfo.test.js.snap @@ -3,54 +3,72 @@ exports[` should work 1`] = `
    -

    - Turussa on käytössä kolme eri vyöhykettä, joilla on eri tuntimaksut. -

    +

    + Turussa on käytössä kolme eri vyöhykettä, joilla on eri tuntimaksut. +

    +
    • -

      - Ensimmäinen vyöhyke (ydinkeskusta-alue): 3,60 €/tunti (1.1.2023 alkaen) -

      +

      + Ensimmäinen vyöhyke (ydinkeskusta-alue): 3,60 €/tunti (1.1.2023 alkaen) +

      +
  • -

    - Toinen vyöhyke : 1,80 €/tunti (1.1.2023 alkaen) -

    +

    + Toinen vyöhyke : 1,80 €/tunti (1.1.2023 alkaen) +

    +
  • -

    - Kolmas vyöhyke: 0,60 €/tunti -

    +

    + Kolmas vyöhyke: 0,60 €/tunti +

    +
  • -

    - 3. vyöhyke on voimassa 2. vyöhykkeen rajojen, sekä kaupungin rajojen välisellä alueella. -

    -

    + 3. vyöhyke on voimassa 2. vyöhykkeen rajojen, sekä kaupungin rajojen välisellä alueella. +

    +
    +
    - Maksullisuus määräytyy kuitenkin aina voimassa olevien liikennemerkkien mukaisesti ja koskee Turun kaupungin katutilaa ja kaupungin omia alueita, kuten kauppahallia ja kaupungintaloa. -

    +

    + Maksullisuus määräytyy kuitenkin aina voimassa olevien liikennemerkkien mukaisesti ja koskee Turun kaupungin katutilaa ja kaupungin omia alueita, kuten kauppahallia ja kaupungintaloa. +

    +
    `; diff --git a/src/views/MobilitySettingsView/components/ExtendedInfo/index.js b/src/views/MobilitySettingsView/components/ExtendedInfo/index.js index 197088f25..123f2a6ba 100644 --- a/src/views/MobilitySettingsView/components/ExtendedInfo/index.js +++ b/src/views/MobilitySettingsView/components/ExtendedInfo/index.js @@ -1,6 +1,3 @@ -import { withStyles } from '@mui/styles'; -import { injectIntl } from 'react-intl'; import ExtendedInfo from './ExtendedInfo'; -import styles from './styles'; -export default withStyles(styles)(injectIntl(ExtendedInfo)); +export default ExtendedInfo; diff --git a/src/views/MobilitySettingsView/components/ExtendedInfo/styles.js b/src/views/MobilitySettingsView/components/ExtendedInfo/styles.js deleted file mode 100644 index 1717c2df1..000000000 --- a/src/views/MobilitySettingsView/components/ExtendedInfo/styles.js +++ /dev/null @@ -1,14 +0,0 @@ -export default theme => ({ - container: { - margin: theme.spacing(2), - textAlign: 'left', - paddingBottom: theme.spacing(2), - }, - margin: { - marginBottom: theme.spacing(1), - }, - list: { - marginTop: theme.spacing(1), - marginBottom: theme.spacing(1), - }, -}); diff --git a/src/views/MobilitySettingsView/components/FormLabel/FormLabel.js b/src/views/MobilitySettingsView/components/FormLabel/FormLabel.js deleted file mode 100644 index aaa3fa523..000000000 --- a/src/views/MobilitySettingsView/components/FormLabel/FormLabel.js +++ /dev/null @@ -1,73 +0,0 @@ -import { FormControlLabel, Switch, Typography } from '@mui/material'; -import useMediaQuery from '@mui/material/useMediaQuery'; -import PropTypes from 'prop-types'; -import React from 'react'; - -/** - * Render 1 or more switches inside form. - * @property {any} classes - * @property {any} intl - * @property {string} keyVal - * @property {string} msgId - * @property {boolean} checkedValue - * @property {Function} onChangeValue - * @return {JSX Element} - */ - -const FormLabel = ({ - classes, intl, msgId, checkedValue, onChangeValue, -}) => { - const useMobileStatus = () => useMediaQuery('(max-width:360px)'); - - const isNarrow = useMobileStatus(); - - return ( - - {intl.formatMessage({ - id: msgId, - })} - - )} - control={( - onChangeValue()} - onKeyPress={(event) => { - if (event.key === 'Enter') { - onChangeValue(); - } - }} - /> - )} - className={`${classes.formLabel} ${isNarrow ? classes.paddingSm : classes.paddingMd}`} - /> - ); -}; - -FormLabel.propTypes = { - classes: PropTypes.objectOf(PropTypes.any).isRequired, - intl: PropTypes.objectOf(PropTypes.any).isRequired, - msgId: PropTypes.string, - checkedValue: PropTypes.bool, - onChangeValue: PropTypes.func.isRequired, -}; - -FormLabel.defaultProps = { - msgId: '', - checkedValue: false, -}; - -export default FormLabel; diff --git a/src/views/MobilitySettingsView/components/FormLabel/__tests__/FormLabel.test.js b/src/views/MobilitySettingsView/components/FormLabel/__tests__/FormLabel.test.js deleted file mode 100644 index 7e9589bfb..000000000 --- a/src/views/MobilitySettingsView/components/FormLabel/__tests__/FormLabel.test.js +++ /dev/null @@ -1,33 +0,0 @@ -// Link.react.test.js -import React from 'react'; -import FormLabel from '../index'; -import { getRenderWithProviders } from '../../../../../../jestUtils'; -import finnishTranslations from '../../../../../i18n/fi'; - -const mockProps = { - msgId: 'mobilityPlatform.menu.showBicycleStands', - checkedValue: false, -}; - -const renderWithProviders = getRenderWithProviders({}); - -describe('', () => { - it('should work', () => { - const { container } = renderWithProviders(); - expect(container).toMatchSnapshot(); - }); - - it('does show text correctly', () => { - const { container } = renderWithProviders(); - - const p = container.querySelectorAll('p'); - expect(p[0].textContent).toContain(finnishTranslations['mobilityPlatform.menu.showBicycleStands']); - }); - - it('does contain aria-label attribute', () => { - const { container } = renderWithProviders(); - - const p = container.querySelectorAll('p'); - expect(p[0].getAttribute('aria-label')).toContain(finnishTranslations['mobilityPlatform.menu.showBicycleStands']); - }); -}); diff --git a/src/views/MobilitySettingsView/components/FormLabel/__tests__/__snapshots__/FormLabel.test.js.snap b/src/views/MobilitySettingsView/components/FormLabel/__tests__/__snapshots__/FormLabel.test.js.snap deleted file mode 100644 index 172c1b129..000000000 --- a/src/views/MobilitySettingsView/components/FormLabel/__tests__/__snapshots__/FormLabel.test.js.snap +++ /dev/null @@ -1,36 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` should work 1`] = ` -
    - -
    -`; diff --git a/src/views/MobilitySettingsView/components/FormLabel/index.js b/src/views/MobilitySettingsView/components/FormLabel/index.js deleted file mode 100644 index 9da6695f0..000000000 --- a/src/views/MobilitySettingsView/components/FormLabel/index.js +++ /dev/null @@ -1,6 +0,0 @@ -import { withStyles } from '@mui/styles'; -import { injectIntl } from 'react-intl'; -import FormLabel from './FormLabel'; -import styles from './styles'; - -export default withStyles(styles)(injectIntl(FormLabel)); diff --git a/src/views/MobilitySettingsView/components/FormLabel/styles.js b/src/views/MobilitySettingsView/components/FormLabel/styles.js deleted file mode 100644 index 4cd004043..000000000 --- a/src/views/MobilitySettingsView/components/FormLabel/styles.js +++ /dev/null @@ -1,15 +0,0 @@ -const styles = { - formLabel: { - padding: '0.4rem 3.5rem', - margin: '0', - color: 'rgba(0, 0, 0, 255)', - }, - paddingMd: { - padding: '0.4rem 3rem', - }, - paddingSm: { - padding: '0.4rem 1rem', - }, -}; - -export default styles; diff --git a/src/views/MobilitySettingsView/components/MobilityToggleButton/MobilityToggleButton.js b/src/views/MobilitySettingsView/components/MobilityToggleButton/MobilityToggleButton.js index 42c651943..86053b8b2 100644 --- a/src/views/MobilitySettingsView/components/MobilityToggleButton/MobilityToggleButton.js +++ b/src/views/MobilitySettingsView/components/MobilityToggleButton/MobilityToggleButton.js @@ -1,58 +1,80 @@ import { Typography } from '@mui/material'; import PropTypes from 'prop-types'; import React from 'react'; +import styled from '@emotion/styled'; +import { useIntl } from 'react-intl'; +import { css } from '@emotion/css'; import { SMSwitch } from '../../../../components'; /** * Render 1 or more switches inside form. - * @property {any} classes - * @property {any} intl - * @property {string} keyVal * @property {string} msgId * @property {boolean} checkedValue * @property {Function} onChangeValue + * @property {number} selectionSize * @return {JSX Element} */ const MobilityToggleButton = ({ - classes, intl, msgId, checkedValue, onChangeValue, selectionSize, inputProps, ...rest -}) => ( -
    - onChangeValue(e)} - checked={checkedValue} - {...rest} - /> -
    - - {intl.formatMessage({ - id: msgId, - })} - -
    -
    -); + msgId, checkedValue, onChangeValue, selectionSize, inputProps, ...rest +}) => { + const intl = useIntl(); + + const switchBorderClass = css({ + border: '1px solid #949494', + }); + + return ( + + onChangeValue(e)} + checked={checkedValue} + {...rest} + /> + + + {intl.formatMessage({ + id: msgId, + })} + + + + ); +}; + +const StyledSwitchContainer = styled.div(({ theme }) => ({ + paddingLeft: theme.spacing(2), + display: 'inline-flex', + alignItems: 'center', + marginLeft: theme.spacing(2), + verticalAlign: 'middle', +})); + +const StyledSMSwitch = styled(SMSwitch)(() => ({ + overflow: 'visible', +})); + +const StyledLabelContainer = styled.div(({ theme }) => ({ + marginLeft: theme.spacing(2), +})); MobilityToggleButton.propTypes = { - classes: PropTypes.objectOf(PropTypes.any).isRequired, - intl: PropTypes.objectOf(PropTypes.any).isRequired, msgId: PropTypes.string, checkedValue: PropTypes.bool, onChangeValue: PropTypes.func.isRequired, diff --git a/src/views/MobilitySettingsView/components/MobilityToggleButton/index.js b/src/views/MobilitySettingsView/components/MobilityToggleButton/index.js index 8a3d2b62e..d78df1284 100644 --- a/src/views/MobilitySettingsView/components/MobilityToggleButton/index.js +++ b/src/views/MobilitySettingsView/components/MobilityToggleButton/index.js @@ -1,6 +1,3 @@ -import { withStyles } from '@mui/styles'; -import { injectIntl } from 'react-intl'; import MobilityToggleButton from './MobilityToggleButton'; -import styles from './styles'; -export default withStyles(styles)(injectIntl(MobilityToggleButton)); +export default MobilityToggleButton; diff --git a/src/views/MobilitySettingsView/components/MobilityToggleButton/styles.js b/src/views/MobilitySettingsView/components/MobilityToggleButton/styles.js deleted file mode 100644 index 83f577cc9..000000000 --- a/src/views/MobilitySettingsView/components/MobilityToggleButton/styles.js +++ /dev/null @@ -1,20 +0,0 @@ -const styles = (theme) => ({ - mobilityMapSwitch: { - paddingLeft: theme.spacing(2), - display: 'inline-flex', - alignItems: 'center', - marginLeft: theme.spacing(2), - verticalAlign: 'middle', - }, - labelContainer: { - marginLeft: theme.spacing(2), - }, - customSwitch: { - overflow: 'visible', - }, - switchBorder: { - border: '1px solid #949494', - }, -}); - -export default styles; diff --git a/src/views/MobilitySettingsView/components/Pagination/Pagination.js b/src/views/MobilitySettingsView/components/Pagination/Pagination.js index d1b0beb24..31d77ca2b 100644 --- a/src/views/MobilitySettingsView/components/Pagination/Pagination.js +++ b/src/views/MobilitySettingsView/components/Pagination/Pagination.js @@ -1,42 +1,65 @@ import React from 'react'; import PropTypes from 'prop-types'; -import SMButton from '../../../../components/ServiceMapButton'; -import Container from '../../../../components/Container'; +import { useIntl } from 'react-intl'; +import styled from '@emotion/styled'; +import { ButtonBase } from '@mui/material'; /** Basic pagination functional component. * Renders number on buttons based on the length of items array and items per page value. * */ - const Pagination = ({ - classes, intl, items, itemsPerPage, currentPage, setCurrentPage, + items, itemsPerPage, currentPage, setCurrentPage, }) => { + const intl = useIntl(); const totalPages = Math.ceil(items.length / itemsPerPage); const paginationLinks = []; for (let i = 1; i <= totalPages; i += 1) { paginationLinks.push( - setCurrentPage(i)} - className={`${classes.button} ${currentPage === i ? classes.active : ''}`} variant="contained" role="link" > {i} - , + , ); } - return {paginationLinks}; + return {paginationLinks}; }; +const StyledContainer = styled.div(({ theme }) => ({ + flexDirection: 'row', + margin: theme.spacing(1, 2), + padding: theme.spacing(0.5), +})); + +const StyledButton = styled(({ isActive, ...props }) => )(({ theme, isActive }) => ({ + margin: theme.spacing(0.5), + height: 32, + width: 32, + minHeight: 32, + minWidth: 32, + border: `1px solid ${theme.palette.white.contrastText}`, + borderRadius: 4, + backgroundColor: isActive ? theme.palette.primary.main : theme.palette.white.main, + color: isActive ? theme.palette.white.main : 'rgb(0, 0, 0)', + '&:hover': { + backgroundColor: isActive ? theme.palette.primary.main : '', + color: isActive ? theme.palette.white.main : '', + }, +})); + Pagination.propTypes = { - classes: PropTypes.objectOf(PropTypes.any).isRequired, - intl: PropTypes.shape({ - formatMessage: PropTypes.func, - }).isRequired, - items: PropTypes.arrayOf(PropTypes.any), + items: PropTypes.arrayOf( + PropTypes.shape({ + name: PropTypes.string, + }), + ), itemsPerPage: PropTypes.number, currentPage: PropTypes.number, setCurrentPage: PropTypes.func.isRequired, diff --git a/src/views/MobilitySettingsView/components/Pagination/index.js b/src/views/MobilitySettingsView/components/Pagination/index.js index acc70f224..9ed530b1f 100644 --- a/src/views/MobilitySettingsView/components/Pagination/index.js +++ b/src/views/MobilitySettingsView/components/Pagination/index.js @@ -1,6 +1,3 @@ -import { withStyles } from '@mui/styles'; -import { injectIntl } from 'react-intl'; import Pagination from './Pagination'; -import styles from './styles'; -export default withStyles(styles)(injectIntl(Pagination)); +export default Pagination; diff --git a/src/views/MobilitySettingsView/components/Pagination/styles.js b/src/views/MobilitySettingsView/components/Pagination/styles.js deleted file mode 100644 index 5d032d5d9..000000000 --- a/src/views/MobilitySettingsView/components/Pagination/styles.js +++ /dev/null @@ -1,26 +0,0 @@ -const styles = theme => ({ - pagination: { - flexDirection: 'row', - margin: theme.spacing(1, 2), - padding: theme.spacing(0.5), - }, - button: { - margin: theme.spacing(0.5), - height: 32, - width: 32, - minHeight: 32, - minWidth: 32, - backgroundColor: theme.palette.white.main, - color: 'rgb(0, 0, 0)', - }, - active: { - backgroundColor: theme.palette.primary.main, - color: theme.palette.white.main, - '&:hover': { - backgroundColor: theme.palette.primary.main, - color: theme.palette.white.main, - }, - }, -}); - -export default styles; diff --git a/src/views/MobilitySettingsView/components/ParkingChargeZoneList/ParkingChargeZoneList.js b/src/views/MobilitySettingsView/components/ParkingChargeZoneList/ParkingChargeZoneList.js index bc7facc34..e149333c8 100644 --- a/src/views/MobilitySettingsView/components/ParkingChargeZoneList/ParkingChargeZoneList.js +++ b/src/views/MobilitySettingsView/components/ParkingChargeZoneList/ParkingChargeZoneList.js @@ -1,33 +1,31 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Checkbox, FormControlLabel, Typography } from '@mui/material'; +import { useIntl } from 'react-intl'; import { isDataValid } from '../../../../components/MobilityPlatform/utils/utils'; +import { StyledCheckboxItem } from '../styled/styled'; const ParkingChargeZoneList = ({ - intl, classes, openZoneList, parkingChargeZones, zoneId, selectZone, + openZoneList, parkingChargeZones, zoneId, selectZone, }) => { + const intl = useIntl(); const renderData = isDataValid(openZoneList, parkingChargeZones); return ( renderData ? parkingChargeZones.map(item => ( -
    + selectZone(item.id)} /> )} label={( {intl.formatMessage( { id: 'mobilityPlatform.menu.parkingChargeZones.subtitle' }, @@ -36,17 +34,17 @@ const ParkingChargeZoneList = ({ )} /> -
    + )) : null ); }; ParkingChargeZoneList.propTypes = { - intl: PropTypes.objectOf(PropTypes.any).isRequired, - classes: PropTypes.objectOf(PropTypes.any).isRequired, openZoneList: PropTypes.bool, - parkingChargeZones: PropTypes.arrayOf(PropTypes.object), + parkingChargeZones: PropTypes.arrayOf(PropTypes.shape({ + id: PropTypes.string, + })), zoneId: PropTypes.string, selectZone: PropTypes.func.isRequired, }; diff --git a/src/views/MobilitySettingsView/components/ParkingChargeZoneList/index.js b/src/views/MobilitySettingsView/components/ParkingChargeZoneList/index.js index 896a25934..009f3bf13 100644 --- a/src/views/MobilitySettingsView/components/ParkingChargeZoneList/index.js +++ b/src/views/MobilitySettingsView/components/ParkingChargeZoneList/index.js @@ -1,6 +1,3 @@ -import { withStyles } from '@mui/styles'; -import { injectIntl } from 'react-intl'; import ParkingChargeZoneList from './ParkingChargeZoneList'; -import styles from './styles'; -export default withStyles(styles)(injectIntl(ParkingChargeZoneList)); +export default ParkingChargeZoneList; diff --git a/src/views/MobilitySettingsView/components/ParkingChargeZoneList/styles.js b/src/views/MobilitySettingsView/components/ParkingChargeZoneList/styles.js deleted file mode 100644 index de6e48c4e..000000000 --- a/src/views/MobilitySettingsView/components/ParkingChargeZoneList/styles.js +++ /dev/null @@ -1,11 +0,0 @@ -const styles = theme => ({ - checkBoxContainer: { - borderBottom: '1px solid #6f7276', - display: 'flex', - flexDirection: 'column', - justifyContent: 'start', - paddingLeft: theme.spacing(3.5), - }, -}); - -export default styles; diff --git a/src/views/MobilitySettingsView/components/RouteLength/RouteLength.js b/src/views/MobilitySettingsView/components/RouteLength/RouteLength.js index 717b46e45..88c87c07a 100644 --- a/src/views/MobilitySettingsView/components/RouteLength/RouteLength.js +++ b/src/views/MobilitySettingsView/components/RouteLength/RouteLength.js @@ -1,98 +1,85 @@ import { Typography } from '@mui/material'; import PropTypes from 'prop-types'; import React from 'react'; +import { useIntl } from 'react-intl'; +import styled from '@emotion/styled'; + +const RouteLength = ({ route }) => { + const intl = useIntl(); -const RouteLength = ({ classes, intl, route }) => { const formatRoutelength = inputLength => Math.round(inputLength / 1000); - const renderRouteText = (routeName) => { + const renderRouteText = routeName => { switch (routeName) { case 'EuroVelo': return ( - + {intl.formatMessage({ id: 'mobilityPlatform.menu.bicycleRoutes.euroVelo' })} - + ); case 'Saariston rengastie': return ( - + {intl.formatMessage({ id: 'mobilityPlatform.menu.bicycleRoutes.archipelagoTrail' })} - + ); case 'Aurajoentie': return ( - + {intl.formatMessage({ id: 'mobilityPlatform.menu.bicycleRoutes.auraRiverTrail' })} - + ); default: return null; } }; - const generateTranslations = (routeName) => { + const generateTranslations = routeName => { const split = routeName.split(' '); const [a, b] = split; if (a === 'Seutureitti') { return ( - + {intl.formatMessage({ id: `mobilityPlatform.menu.bicycleRoutes.regionalTrail${b}` })} - + ); } return renderRouteText(routeName); }; return ( -
    -
    - - {intl.formatMessage({ id: 'mobilityPlatform.menu.bicycleRoutes.length' })} - {' '} - {formatRoutelength(route.length)} - {' '} - km. - - {generateTranslations(route.name_fi)} -
    -
    + + + {intl.formatMessage( + { id: 'mobilityPlatform.menu.bicycleRoutes.length' }, + { value: formatRoutelength(route.length) }, + )} + + {generateTranslations(route.name_fi)} + ); }; +const StyledTypography = styled(Typography)(({ theme }) => ({ + marginTop: theme.spacing(1), +})); + +const StyledContainer = styled.div(({ theme }) => ({ + textAlign: 'left', + padding: theme.spacing(1.5), + width: '85%', + marginLeft: theme.spacing(3), +})); + RouteLength.propTypes = { - classes: PropTypes.objectOf(PropTypes.any).isRequired, - intl: PropTypes.objectOf(PropTypes.any).isRequired, - route: PropTypes.objectOf(PropTypes.any), + route: PropTypes.shape({ + name_fi: PropTypes.string, + length: PropTypes.number, + }), }; RouteLength.defaultProps = { - route: null, + route: {}, }; export default RouteLength; diff --git a/src/views/MobilitySettingsView/components/RouteLength/__tests__/RouteLength.test.js b/src/views/MobilitySettingsView/components/RouteLength/__tests__/RouteLength.test.js index 58122a9f6..beda6dad6 100644 --- a/src/views/MobilitySettingsView/components/RouteLength/__tests__/RouteLength.test.js +++ b/src/views/MobilitySettingsView/components/RouteLength/__tests__/RouteLength.test.js @@ -23,15 +23,7 @@ describe('', () => { const { container } = renderWithProviders(); const p = container.querySelectorAll('p'); - expect(p[0].textContent).toContain(`${finnishTranslations['mobilityPlatform.menu.bicycleRoutes.length']} 100 km.`); + expect(p[0].textContent).toContain(`${finnishTranslations['mobilityPlatform.menu.bicycleRoutes.length'].replace('{value}', '100')}`); expect(p[1]).toBeInTheDocument(); }); - - it('does contain aria-label attribute', () => { - const { container } = renderWithProviders(); - - const p = container.querySelectorAll('p'); - expect(p[0].getAttribute('aria-label')).toContain(`${finnishTranslations['mobilityPlatform.menu.bicycleRoutes.length']} 100 km.`); - expect(p[1].getAttribute('aria-label')).toBeTruthy(); - }); }); diff --git a/src/views/MobilitySettingsView/components/RouteLength/__tests__/__snapshots__/RouteLength.test.js.snap b/src/views/MobilitySettingsView/components/RouteLength/__tests__/__snapshots__/RouteLength.test.js.snap index 2f582ce1e..192a421b5 100644 --- a/src/views/MobilitySettingsView/components/RouteLength/__tests__/__snapshots__/RouteLength.test.js.snap +++ b/src/views/MobilitySettingsView/components/RouteLength/__tests__/__snapshots__/RouteLength.test.js.snap @@ -2,27 +2,19 @@ exports[` should work 1`] = `
    -
    -
    +

    -

    - Reitin pituus: - - 100 - - km. -

    -

    - EuroVelo 10 on eurooppalainen Suomen rannikkoa seuraava polkupyöräreitti. Helsingin ja Turun välisellä matkalla reitti on merkitty opastein. -

    -
    + Reitin pituus: 100 km. +

    +

    + EuroVelo 10 on eurooppalainen Suomen rannikkoa seuraava polkupyöräreitti. Helsingin ja Turun välisellä matkalla reitti on merkitty opastein. +

    `; diff --git a/src/views/MobilitySettingsView/components/RouteLength/index.js b/src/views/MobilitySettingsView/components/RouteLength/index.js index 70bc22995..614d1cc3b 100644 --- a/src/views/MobilitySettingsView/components/RouteLength/index.js +++ b/src/views/MobilitySettingsView/components/RouteLength/index.js @@ -1,6 +1,3 @@ -import { withStyles } from '@mui/styles'; -import { injectIntl } from 'react-intl'; import RouteLength from './RouteLength'; -import styles from './styles'; -export default withStyles(styles)(injectIntl(RouteLength)); +export default RouteLength; diff --git a/src/views/MobilitySettingsView/components/RouteLength/styles.js b/src/views/MobilitySettingsView/components/RouteLength/styles.js deleted file mode 100644 index 6d019b6c7..000000000 --- a/src/views/MobilitySettingsView/components/RouteLength/styles.js +++ /dev/null @@ -1,13 +0,0 @@ -const styles = theme => ({ - paragraph: { - textAlign: 'left', - padding: theme.spacing(1.5), - width: '85%', - marginLeft: theme.spacing(3), - }, - margin: { - marginTop: theme.spacing(1), - }, -}); - -export default styles; diff --git a/src/views/MobilitySettingsView/components/RouteList/RouteList.js b/src/views/MobilitySettingsView/components/RouteList/RouteList.js index 31029c228..b21e6a87c 100644 --- a/src/views/MobilitySettingsView/components/RouteList/RouteList.js +++ b/src/views/MobilitySettingsView/components/RouteList/RouteList.js @@ -3,19 +3,18 @@ import { Checkbox, FormControlLabel, Typography } from '@mui/material'; import PropTypes from 'prop-types'; import useLocaleText from '../../../../utils/useLocaleText'; import { isDataValid } from '../../../../components/MobilityPlatform/utils/utils'; +import { StyledCheckboxItem } from '../styled/styled'; import RouteLength from '../RouteLength'; import Description from '../Description'; import Pagination from '../Pagination'; const RouteList = ({ - classes, openList, items, itemsPerPage, routeAttr, type, setRouteState, - locale, }) => { const [currentPage, setCurrentPage] = useState(1); const getLocaleText = useLocaleText(); @@ -24,7 +23,7 @@ const RouteList = ({ const isListValid = isDataValid(openList, items); - const renderContent = (item) => { + const renderContent = item => { if (type === 'BicycleRoute') { return ( item.name_fi === routeAttr ? : null @@ -32,7 +31,7 @@ const RouteList = ({ } if (type === 'CultureRoute') { return ( - item.id === routeAttr ? : null + item.id === routeAttr ? : null ); } return null; @@ -45,13 +44,12 @@ const RouteList = ({ return isListValid ? paginatedItems.map(item => ( -
    + setRouteState(type === 'BicycleRoute' ? item.name_fi : item.id)} /> )} @@ -62,14 +60,14 @@ const RouteList = ({ )} /> {renderContent(item)} -
    + )) : null; }; return (
    -
    {renderList()}
    +
    {renderList()}
    {openList ? ( ({ - checkBoxItem: { - borderBottom: '1px solid rgb(193, 193, 193)', - display: 'flex', - flexDirection: 'column', - justifyContent: 'start', - paddingLeft: theme.spacing(3.5), - }, -}); - -export default styles; diff --git a/src/views/MobilitySettingsView/components/ScooterProviderList/ScooterProviderList.js b/src/views/MobilitySettingsView/components/ScooterProviderList/ScooterProviderList.js index 46199c282..76a32f510 100644 --- a/src/views/MobilitySettingsView/components/ScooterProviderList/ScooterProviderList.js +++ b/src/views/MobilitySettingsView/components/ScooterProviderList/ScooterProviderList.js @@ -1,32 +1,32 @@ import React from 'react'; import { Checkbox, FormControlLabel, Typography } from '@mui/material'; import PropTypes from 'prop-types'; +import { useIntl } from 'react-intl'; +import styled from '@emotion/styled'; -const ScooterProviderList = ({ - intl, classes, openList, scooterProviders, -}) => { +const ScooterProviderList = ({ openList, scooterProviders }) => { + const intl = useIntl(); const renderData = scooterProviders && scooterProviders.length > 0; return ( openList ? ( <> -
    + {intl.formatMessage({ id: 'mobilityPlatform.menu.scooters.list.info' })} -
    + {renderData && scooterProviders.map(item => ( -
    + item.onChangeValue()} /> )} @@ -39,18 +39,32 @@ const ScooterProviderList = ({ )} /> -
    + ))} ) : null ); }; +const StyledContainer = styled.div(({ theme }) => ({ + textAlign: 'left', + padding: theme.spacing(1.5), + borderBottom: '1px solid #6f7276', +})); + +const StyledCheckboxContainer = styled.div(({ theme }) => ({ + borderBottom: '1px solid #6f7276', + display: 'flex', + flexDirection: 'column', + justifyContent: 'start', + paddingLeft: theme.spacing(3.5), +})); + ScooterProviderList.propTypes = { - intl: PropTypes.objectOf(PropTypes.any).isRequired, - classes: PropTypes.objectOf(PropTypes.any).isRequired, openList: PropTypes.bool, - scooterProviders: PropTypes.arrayOf(PropTypes.object), + scooterProviders: PropTypes.arrayOf(PropTypes.shape({ + id: PropTypes.string, + })), }; ScooterProviderList.defaultProps = { diff --git a/src/views/MobilitySettingsView/components/ScooterProviderList/index.js b/src/views/MobilitySettingsView/components/ScooterProviderList/index.js index 8f9dcde79..9b2aa6dc6 100644 --- a/src/views/MobilitySettingsView/components/ScooterProviderList/index.js +++ b/src/views/MobilitySettingsView/components/ScooterProviderList/index.js @@ -1,6 +1,3 @@ -import { withStyles } from '@mui/styles'; -import { injectIntl } from 'react-intl'; import ScooterProviderList from './ScooterProviderList'; -import styles from './styles'; -export default withStyles(styles)(injectIntl(ScooterProviderList)); +export default ScooterProviderList; diff --git a/src/views/MobilitySettingsView/components/ScooterProviderList/styles.js b/src/views/MobilitySettingsView/components/ScooterProviderList/styles.js deleted file mode 100644 index ca288b6ee..000000000 --- a/src/views/MobilitySettingsView/components/ScooterProviderList/styles.js +++ /dev/null @@ -1,18 +0,0 @@ -const styles = theme => ({ - paragraph: { - textAlign: 'left', - padding: theme.spacing(1.5), - }, - border: { - borderBottom: '1px solid #6f7276', - }, - checkBoxContainer: { - borderBottom: '1px solid #6f7276', - display: 'flex', - flexDirection: 'column', - justifyContent: 'start', - paddingLeft: theme.spacing(3.5), - }, -}); - -export default styles; diff --git a/src/views/MobilitySettingsView/components/SpeedLimitZonesList/SpeedLimitZonesList.js b/src/views/MobilitySettingsView/components/SpeedLimitZonesList/SpeedLimitZonesList.js index afdd60bf5..6745a0560 100644 --- a/src/views/MobilitySettingsView/components/SpeedLimitZonesList/SpeedLimitZonesList.js +++ b/src/views/MobilitySettingsView/components/SpeedLimitZonesList/SpeedLimitZonesList.js @@ -1,62 +1,90 @@ import React from 'react'; import { Checkbox, FormControlLabel, Typography } from '@mui/material'; import PropTypes from 'prop-types'; +import { useIntl } from 'react-intl'; +import styled from '@emotion/styled'; const SpeedLimitZonesList = ({ - classes, intl, openSpeedLimitList, speedLimitListAsc, speedLimitSelections, setState, -}) => (openSpeedLimitList ? ( - <> -
    - - {intl.formatMessage({ id: 'mobilityPlatform.menu.speedLimitZones.select' })} - -
    -
    - {openSpeedLimitList && speedLimitListAsc.reduce((acc, curr) => { - acc.push( -
    - setState(curr)} - /> + openSpeedLimitList, speedLimitListAsc, speedLimitSelections, setState, +}) => { + const intl = useIntl(); + + return (openSpeedLimitList ? ( + <> + + + {intl.formatMessage({ id: 'mobilityPlatform.menu.speedLimitZones.select' })} + + + + {openSpeedLimitList && speedLimitListAsc.reduce((acc, curr) => { + acc.push( + + setState(curr)} + /> )} - label={( - - {intl.formatMessage( - { - id: 'mobilityPlatform.content.speedLimitZones.suffix', - }, - { curr }, - )} - + label={( + + {intl.formatMessage( + { + id: 'mobilityPlatform.content.speedLimitZones.suffix', + }, + { curr }, + )} + )} - /> -
    , - ); - return acc; - }, [])} -
    - -) : null); + /> + , + ); + return acc; + }, [])} + + + ) : null); +}; + +const StyledContainer = styled.div(({ theme }) => ({ + textAlign: 'left', + padding: theme.spacing(1.5), + borderBottom: '1px solid #6f7276', +})); + +const StyledCheckboxContainer = styled.div(() => ({ + width: '100%', + borderBottom: '1px solid #6f7276', + display: 'flex', + flexDirection: 'column', + justifyContent: 'start', +})); + +const StyledButtonList = styled.div(() => ({ + display: 'flex', + flexDirection: 'row', + flexWrap: 'wrap', + justifyContent: 'left', +})); + +const StyledCheckBox = styled(Checkbox)(({ theme }) => ({ + marginLeft: theme.spacing(4), +})); SpeedLimitZonesList.propTypes = { - intl: PropTypes.objectOf(PropTypes.any).isRequired, - classes: PropTypes.objectOf(PropTypes.any).isRequired, openSpeedLimitList: PropTypes.bool, speedLimitListAsc: PropTypes.arrayOf(PropTypes.number), speedLimitSelections: PropTypes.arrayOf(PropTypes.number), diff --git a/src/views/MobilitySettingsView/components/SpeedLimitZonesList/__tests__/SpeedLimitZonesList.test.js b/src/views/MobilitySettingsView/components/SpeedLimitZonesList/__tests__/SpeedLimitZonesList.test.js index a34c4ed45..db3eec07e 100644 --- a/src/views/MobilitySettingsView/components/SpeedLimitZonesList/__tests__/SpeedLimitZonesList.test.js +++ b/src/views/MobilitySettingsView/components/SpeedLimitZonesList/__tests__/SpeedLimitZonesList.test.js @@ -28,14 +28,4 @@ describe('', () => { expect(p[2].textContent).toContain(`${mockProps.speedLimitListAsc[1]} km/t`); expect(p[3].textContent).toContain(`${mockProps.speedLimitListAsc[2]} km/t`); }); - - it('does contain aria-label attribute', () => { - const { container } = renderWithProviders(); - - const p = container.querySelectorAll('p'); - expect(p[0].getAttribute('aria-label')).toContain(finnishTranslations['mobilityPlatform.menu.speedLimitZones.select']); - expect(p[1].getAttribute('aria-label')).toContain(`${mockProps.speedLimitListAsc[0]} km/t`); - expect(p[2].getAttribute('aria-label')).toContain(`${mockProps.speedLimitListAsc[1]} km/t`); - expect(p[3].getAttribute('aria-label')).toContain(`${mockProps.speedLimitListAsc[2]} km/t`); - }); }); diff --git a/src/views/MobilitySettingsView/components/SpeedLimitZonesList/__tests__/__snapshots__/SpeedLimitZonesList.test.js.snap b/src/views/MobilitySettingsView/components/SpeedLimitZonesList/__tests__/__snapshots__/SpeedLimitZonesList.test.js.snap index 732a44a35..e3bb7d4e7 100644 --- a/src/views/MobilitySettingsView/components/SpeedLimitZonesList/__tests__/__snapshots__/SpeedLimitZonesList.test.js.snap +++ b/src/views/MobilitySettingsView/components/SpeedLimitZonesList/__tests__/__snapshots__/SpeedLimitZonesList.test.js.snap @@ -3,7 +3,7 @@ exports[` should work 1`] = `

    should work 1`] = `