Add explanatory title to DirectionLabel

The direction labels number is not self-explanatory for new users
and other people that are not familiar with the software.

Author: niknii-vincit

ui/src/components/routes-and-lines/line-details/DirectionBadge.tsx

@@ -6,13 +6,19 @@ const testIds = {
 };
 
 type Props = {
+  titleName: string;
   direction: RouteDirectionEnum;
   className?: string;
 };
 
-export const DirectionBadge = ({ direction, className = '' }: Props) => {
+export const DirectionBadge = ({
+  titleName,
+  direction,
+  className = '',
+}: Props) => {
   return (
     <span
+      title={titleName}
       className={`relative flex h-9 w-9 items-center justify-center bg-brand text-2xl font-bold text-white ${className}`}
     >
       <span data-testid={testIds.value}>

ui/src/components/routes-and-lines/line-details/ExpandableRouteRow.tsx

@@ -69,6 +69,7 @@ export const ExpandableRouteRow = ({
           <DirectionBadge
             direction={route.direction as RouteDirectionEnum}
             className="mr-4"
+            titleName={t(`directionEnum.${route.direction}`)}
           />
           <span className="text-xl" data-testid={testIds.label}>
             <RouteLabel label={route.label} variant={route.variant} />

ui/src/components/timetables/import/BlockVehicleJourneysTable.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from 'react-i18next';
 import { VehicleJourneyWithRouteInfoFragment } from '../../../generated/graphql';
 import { useToggle } from '../../../hooks';
 import { parseI18nField } from '../../../i18n/utils';
@@ -17,6 +18,7 @@ const VehicleJourneyRow = ({
 }: {
   vehicleJourney: VehicleJourneyWithRouteInfoFragment;
 }): JSX.Element => {
+  const { t } = useTranslation();
   const route =
     vehicleJourney.journey_pattern_ref.journey_pattern_instance
       ?.journey_pattern_route;
@@ -36,6 +38,7 @@ const VehicleJourneyRow = ({
           <DirectionBadge
             direction={route.direction}
             className="mr-2 h-5 w-5 text-base"
+            titleName={t(`directionEnum.${route.direction}`)}
           />
           {getRouteLabelVariantText(route)}
         </Row>

ui/src/components/timetables/vehicle-schedule-details/RouteTimetablesSection.tsx

@@ -76,7 +76,11 @@ export const RouteTimetablesSection = ({
     <div data-testid={testIds.timetableSection(route.label, route.direction)}>
       <Row>
         <div className="flex flex-1 items-center bg-background">
-          <DirectionBadge direction={route.direction} className="my-5 ml-12" />
+          <DirectionBadge
+            direction={route.direction}
+            className="my-5 ml-12"
+            titleName={t(`directionEnum.${route.direction}`)}
+          />
           <h3 className="ml-3.5">
             <RouteLabel label={route.label} variant={route.variant} />
           </h3>