diff --git a/i18n/en-US.yml b/i18n/en-US.yml index ab0b81d32..d70ae9b13 100644 --- a/i18n/en-US.yml +++ b/i18n/en-US.yml @@ -395,6 +395,7 @@ components: distanceAway: "{localizedDistanceString} away" error: An error occurred loading nearby amenities. errorHeader: Error + filterNearby: Filter nearby results header: Nearby View headsign: "{destination}" nearbyListIntro: List of {count} nearby entities. diff --git a/i18n/fr.yml b/i18n/fr.yml index 5ba07ea9a..b5afd9ab4 100644 --- a/i18n/fr.yml +++ b/i18n/fr.yml @@ -406,6 +406,7 @@ components: distanceAway: à {localizedDistanceString} error: Erreur lors du chargement des services à proximité. errorHeader: Erreur + filterNearby: Filtrer les entités à proximité header: À proximité headsign: "{destination}" nearbyListIntro: Liste de {count} entités à proximité. diff --git a/lib/components/viewers/nearby/nearby-filter.tsx b/lib/components/viewers/nearby/nearby-filter.tsx index 4c0a8c23f..29c4b6ef4 100644 --- a/lib/components/viewers/nearby/nearby-filter.tsx +++ b/lib/components/viewers/nearby/nearby-filter.tsx @@ -1,13 +1,19 @@ import { Check2 } from '@styled-icons/bootstrap/Check2' +import { useIntl } from 'react-intl' +import React, { useContext } from 'react' +import styled from 'styled-components' import { ComponentContext } from '../../../util/contexts' import { getBaseColor } from '../../util/colors' -import { NearbyFilterConfig } from '../../../util/config-types' -import React, { useContext } from 'react' - import { invisibleCss } from '../../util/invisible-a11y-label' +import { NearbyFilterConfig } from '../../../util/config-types' -import styled from 'styled-components' +const FILTER_LABELS = { + BikeRentalStation: 'components.nearbyView.bikeRentalStation', + RentalVehicle: 'common.modes.rent', + Stop: 'components.MapLayers.stops', + VehicleParking: 'common.modes.car_park' +} const StyledFilterCheckbox = styled.label<{ checked: boolean }>` width: 75px; @@ -37,6 +43,7 @@ const StyledFilterCheckbox = styled.label<{ checked: boolean }>` input { ${invisibleCss} + position: absolute; } &:hover { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); @@ -55,18 +62,25 @@ export const FilterCheckboxes = ({ onChange: (arg: React.ChangeEvent) => void value: boolean }): JSX.Element => { + const intl = useIntl() // @ts-expect-error component context const { ModeIcon, SvgIcon } = useContext(ComponentContext) // The icon is either in SvgIcon or ModeIcon so provide both const ModeFilterIcon = () => ( ) + const filterLabel = intl.formatMessage({ id: FILTER_LABELS[filter.cardType] }) return ( - + {value && } {nearbyFilters && ( -
+ + + {nearbyFilters.map((filter: NearbyFilterConfig) => { return ( ) })} -
+ )}