✨ Linjer på rediger-siden viser flere farger

tavla/app/(admin)/tavler/[id]/rediger/components/Settings/components/TransportPaletteSelect.tsx

@@ -15,13 +15,24 @@ import {
 } from '../colorPalettes'
 import { TransportIcon } from './TransportIcon'
 
-const busAndTrainModes: { mode: TTransportMode }[] = [
+const busAndTrainModes: {
+    mode: TTransportMode
+    submode?: TTransportSubmode
+}[] = [
     {
         mode: 'bus',
     },
     {
         mode: 'rail',
     },
+    {
+        mode: 'bus',
+        submode: 'airportLinkBus',
+    },
+    {
+        mode: 'rail',
+        submode: 'airportLinkRail',
+    },
 ]
 
 const transportModes: { mode: TTransportMode; submode?: TTransportSubmode }[] =
@@ -115,15 +126,22 @@ function TransportPaletteSelect({
                             >
                                 <div className="grid grid-cols-4 gap-1.5">
                                     {busAndTrainModes.map((mode) => {
+                                        const effectiveMode =
+                                            mode.submode?.startsWith('airport')
+                                                ? 'air'
+                                                : mode.mode
                                         const colorDescription =
                                             getTransportColorDescription(
                                                 palette.value,
-                                                mode.mode,
+                                                effectiveMode,
                                             )
                                         return (
                                             <div
                                                 className="max-w-min"
-                                                key={theme + mode.mode}
+                                                key={
+                                                    theme +
+                                                    (mode.submode ?? mode.mode)
+                                                }
                                                 aria-label={`${transportModeNames(mode.mode)}${colorDescription ? `, ${colorDescription}` : ''}`}
                                                 role="img"
                                             >

tavla/app/(admin)/tavler/[id]/rediger/components/Settings/components/TravelTag.tsx

@@ -22,6 +22,18 @@ export const transportModeNames: Record<TTransportMode, string> = {
     unknown: 'Ukjent',
 }
 
+type ColorMode = TTransportMode | 'regional-bus'
+
+function getColorMode(
+    transportMode: TTransportMode,
+    transportSubmode?: TTransportSubmode,
+): ColorMode {
+    if (transportSubmode?.startsWith('airport')) return 'air'
+    if (transportSubmode === 'railReplacementBus') return 'rail'
+    if (transportSubmode === 'regionalBus') return 'regional-bus'
+    return transportMode
+}
+
 function TravelTag({
     transportMode,
     publicCode,
@@ -35,11 +47,8 @@ function TravelTag({
     cancelled?: boolean
     'aria-hidden'?: boolean | 'true' | 'false'
 }) {
-    const colorMode = transportSubmode?.startsWith('airport')
-        ? 'air'
-        : transportMode
-
-    const travelTagBackround = `bg-${colorMode}${cancelled && transportMode !== 'unknown' ? '-transparent' : ''}`
+    const colorMode = getColorMode(transportMode, transportSubmode)
+    const travelTagBackground = `bg-${colorMode}${cancelled && transportMode !== 'unknown' ? '-transparent' : ''}`
     const iconPublicCodeColor =
         cancelled && transportMode !== 'unknown'
             ? `text-${colorMode}`
@@ -50,7 +59,7 @@ function TravelTag({
             role="img"
             aria-label={`${transportModeNames[transportMode]} - linje ${publicCode}`}
             aria-hidden={ariaHidden}
-            className={`flex h-full w-full items-center justify-between rounded-sm pl-2 ${travelTagBackround}`}
+            className={`flex h-full w-full items-center justify-between rounded-sm pl-2 ${travelTagBackground}`}
         >
             <TransportIcon
                 className={`h-em-2 w-em-2 ${iconPublicCodeColor}`}

tavla/app/(admin)/tavler/[id]/rediger/components/TileCard/PlatformAndLines.tsx

@@ -6,15 +6,33 @@ import type { EventProps } from 'app/posthog/events'
 import { usePosthogTracking } from 'app/posthog/usePosthogTracking'
 import { useFeatureFlagEnabled } from 'posthog-js/react'
 import type { BoardTileDB } from 'src/types/db-types/boards'
-import type { TTransportMode } from 'src/types/graphql-schema'
+import type {
+    TTransportMode,
+    TTransportSubmode,
+} from 'src/types/graphql-schema'
 import { FeatureFlags } from '../../../../../../posthog/featureFlags'
 import type { LineWithFrontText } from './types'
 
+function getColorMode(
+    transportMode: TTransportMode,
+    transportSubmode?: TTransportSubmode,
+): string {
+    if (transportSubmode?.startsWith('airport')) return 'air'
+    if (transportSubmode === 'railReplacementBus') return 'rail'
+    if (transportSubmode === 'regionalBus') return 'regional-bus'
+    return transportMode
+}
+
 function PublicCode({ line }: { line: LineWithFrontText }) {
     if (!line.publicCode) return null
 
+    const color = getColorMode(
+        line.transportMode ?? 'unknown',
+        line.transportSubmode ?? 'unknown',
+    )
+
     return (
-        <div className={`publicCode bg-${line.transportMode} text-white`}>
+        <div className={`publicCode bg-${color} text-white`}>
             {line.publicCode}
         </div>
     )

tavla/app/globals.css

@@ -67,6 +67,7 @@
         --coach-color: var(--temp-coach-color-standard);
         --air-color: var(--standard-plane);
         --bus-color: var(--standard-bus);
+        --regional-bus-color: var(--bus-color);
         --cableway-color: var(--standard-cableway);
         --funicular-color: var(--standard-funicular);
         --metro-color: var(--standard-metro);
@@ -79,6 +80,7 @@
 
         --air-color-transparent: var(--rgba-air-color-transparent);
         --bus-color-transparent: var(--rgba-bus-color-transparent);
+        --regional-bus-color-transparent: var(--bus-color-transparent);
         --coach-color-transparent: var(--rgba-coach-color-transparent);
         --cableway-color-transparent: var(--rgba-cableway-color-transparent);
         --funicular-color-transparent: var(--rgba-funicular-color-transparent);
@@ -124,6 +126,7 @@
         --coach-color: var(--temp-coach-color-dark);
         --air-color: var(--dark-plane);
         --bus-color: var(--dark-bus);
+        --regional-bus-color: var(--bus-color);
         --cableway-color: var(--dark-cableway);
         --funicular-color: var(--dark-funicular);
         --metro-color: var(--dark-metro);
@@ -136,6 +139,7 @@
 
         --air-color-transparent: var(--rgba-air-color-transparent-dark);
         --bus-color-transparent: var(--rgba-bus-color-transparent-dark);
+        --regional-bus-color-transparent: var(--bus-color-transparent);
         --coach-color-transparent: var(--rgba-coach-color-transparent-dark);
         --cableway-color-transparent: var(
             --rgba-cableway-color-transparent-dark

tavla/app/transport-palettes.css

@@ -1,5 +1,6 @@
 [data-transport-palette="default"] {
     --bus-color: var(--standard-bus);
+    --regional-bus-color: var(--standard-bus);
     --coach-color: var(--temp-coach-color-standard);
     --air-color: var(--standard-plane);
     --cableway-color: var(--standard-cableway);
@@ -15,6 +16,7 @@
 
 [data-theme="dark"][data-transport-palette="default"] {
     --bus-color: var(--dark-bus);
+    --regional-bus-color: var(--dark-bus);
     --coach-color: var(--temp-coach-color-dark);
     --air-color: var(--dark-plane);
     --cableway-color: var(--dark-cableway);
@@ -31,36 +33,46 @@
 /* Blue bus palette: trains are blue, buses are red */
 [data-transport-palette="blue-bus"] {
     --bus-color: var(--standard-train);
+    --regional-bus-color: var(--standard-train);
     --bus-color-transparent: var(--rgba-rail-color-transparent);
+    --regional-bus-color-transparent: var(--rgba-rail-color-transparent);
     --rail-color: var(--standard-bus);
     --rail-color-transparent: var(--rgba-bus-color-transparent);
 }
 
 [data-theme="dark"][data-transport-palette="blue-bus"] {
     --bus-color: var(--dark-train);
+    --regional-bus-color: var(--dark-train);
     --bus-color-transparent: var(--rgba-rail-color-transparent-dark);
+    --regional-bus-color-transparent: var(--rgba-rail-color-transparent-dark);
     --rail-color: var(--dark-bus);
     --rail-color-transparent: var(--rgba-bus-color-transparent-dark);
 }
 
 /* Green bus palette */
 [data-transport-palette="green-bus"] {
     --bus-color: var(--temp-coach-color-standard);
+    --regional-bus-color: var(--temp-coach-color-standard);
     --bus-color-transparent: var(--rgba-coach-color-transparent);
+    --regional-bus-color-transparent: var(--rgba-coach-color-transparent);
     --coach-color: var(--standard-bus);
     --coach-color-transparent: var(--rgba-bus-color-transparent);
 }
 
 [data-theme="dark"][data-transport-palette="green-bus"] {
     --bus-color: var(--temp-coach-color-dark);
+    --regional-bus-color: var(--temp-coach-color-dark);
     --bus-color-transparent: var(--rgba-coach-color-transparent-dark);
+    --regional-bus-color-transparent: var(--rgba-coach-color-transparent-dark);
     --coach-color: var(--dark-bus);
     --coach-color-transparent: var(--rgba-bus-color-transparent-dark);
 }
 
 /* ATB palette */
 [data-transport-palette="atb"] {
     --bus-color: #608000;
+    --regional-bus-color: #008099;
+    --regional-bus-color-transparent: rgba(0, 128, 153, 0.15);
     --coach-color: #008099;
     --rail-color: #943894;
     --water-color: #00404d;
@@ -84,6 +96,8 @@
 
 [data-theme="dark"][data-transport-palette="atb"] {
     --bus-color: #a9d22d;
+    --regional-bus-color: #0095b2;
+    --regional-bus-color-transparent: rgba(0, 149, 178, 0.15);
     --coach-color: #0095b2;
     --rail-color: #cd98cd;
     --water-color: #99d9e5;
@@ -108,6 +122,8 @@
 /* Fram palette */
 [data-transport-palette="fram"] {
     --bus-color: #014165;
+    --regional-bus-color: #014165;
+    --regional-bus-color-transparent: rgba(1, 65, 101, 0.15);
     --coach-color: #55823a;
     --rail-color: #551125;
     --water-color: #007ab5;
@@ -131,6 +147,8 @@
 
 [data-theme="dark"][data-transport-palette="fram"] {
     --bus-color: #56a0db;
+    --regional-bus-color: #56a0db;
+    --regional-bus-color-transparent: rgba(86, 160, 219, 0.15);
     --coach-color: #82b863;
     --rail-color: #ce758f;
     --water-color: #9ad9e6;
@@ -155,6 +173,8 @@
 /* Svipper palette */
 [data-transport-palette="svipper"] {
     --bus-color: #334dce;
+    --regional-bus-color: #334dce;
+    --regional-bus-color-transparent: rgba(51, 77, 206, 0.15);
     --coach-color: #507341;
     --rail-color: #bd3685;
     --water-color: #418083;
@@ -168,6 +188,8 @@
 
 [data-theme="dark"][data-transport-palette="svipper"] {
     --bus-color: #8e9dea;
+    --regional-bus-color: #8e9dea;
+    --regional-bus-color-transparent: rgba(142, 157, 234, 0.15);
     --coach-color: #8db67c;
     --rail-color: #cf83af;
     --water-color: #57a7ab;
@@ -182,6 +204,8 @@
 /* Reis palette */
 [data-transport-palette="reis"] {
     --bus-color: #004d61;
+    --regional-bus-color: #004d61;
+    --regional-bus-color-transparent: rgba(0, 77, 97, 0.15);
     --coach-color: #6b7d2e;
     --rail-color: #8a61c2;
     --water-color: #2b71b3;
@@ -204,6 +228,8 @@
 }
 [data-theme="dark"][data-transport-palette="reis"] {
     --bus-color: #38a4bf;
+    --regional-bus-color: #38a4bf;
+    --regional-bus-color-transparent: rgba(56, 164, 191, 0.15);
     --coach-color: #809537;
     --rail-color: #a281ce;
     --water-color: #5ca1e3;

tavla/src/graphql/fragments/lines.graphql

@@ -4,5 +4,6 @@ fragment lines on Quay {
         publicCode
         name
         transportMode
+        transportSubmode
     }
 }

tavla/src/graphql/index.ts

@@ -92,6 +92,7 @@ export const LinesFragment = new TypedDocumentString(
     publicCode
     name
     transportMode
+    transportSubmode
   }
 }
     `,
@@ -155,6 +156,7 @@ fragment lines on Quay {
     publicCode
     name
     transportMode
+    transportSubmode
   }
 }
 fragment situation on PtSituationElement {
@@ -198,6 +200,7 @@ export const QuayEditQuery = new TypedDocumentString(`
     publicCode
     name
     transportMode
+    transportSubmode
   }
 }`) as unknown as TypedDocumentString<
     Types.TQuayEditQuery,
@@ -260,6 +263,7 @@ export const QuaysSearchQuery = new TypedDocumentString(`
     publicCode
     name
     transportMode
+    transportSubmode
   }
 }`) as unknown as TypedDocumentString<
     Types.TQuaysSearchQuery,
@@ -363,6 +367,7 @@ export const StopPlaceEditQuery = new TypedDocumentString(`
     publicCode
     name
     transportMode
+    transportSubmode
   }
 }`) as unknown as TypedDocumentString<
     Types.TStopPlaceEditQuery,

tavla/src/types/graphql-schema.ts

@@ -2259,6 +2259,7 @@ export type TLinesFragment = {
         publicCode: string | null
         name: string | null
         transportMode: TTransportMode | null
+        transportSubmode: TTransportSubmode | null
     }>
 }
 
@@ -2364,6 +2365,7 @@ export type TGetQuayQuery = {
             publicCode: string | null
             name: string | null
             transportMode: TTransportMode | null
+            transportSubmode: TTransportSubmode | null
         }>
     } | null
 }
@@ -2399,6 +2401,7 @@ export type TQuayEditQuery = {
             publicCode: string | null
             name: string | null
             transportMode: TTransportMode | null
+            transportSubmode: TTransportSubmode | null
         }>
     } | null
 }
@@ -2464,6 +2467,7 @@ export type TQuaysSearchQuery = {
                 publicCode: string | null
                 name: string | null
                 transportMode: TTransportMode | null
+                transportSubmode: TTransportSubmode | null
             }>
         } | null> | null
     } | null
@@ -2591,6 +2595,7 @@ export type TStopPlaceEditQuery = {
                 publicCode: string | null
                 name: string | null
                 transportMode: TTransportMode | null
+                transportSubmode: TTransportSubmode | null
             }>
         } | null> | null
     } | null

tavla/src/utils/tailwindColors.ts

@@ -13,6 +13,7 @@ export const transportModes = {
     air: 'var(--air-color)',
     bicycle: 'var(--mobility-color)',
     bus: 'var(--bus-color)',
+    'regional-bus': 'var(--regional-bus-color)',
     cableway: 'var(--cableway-color)',
     citybike: 'var(--mobility-color)',
     coach: 'var(--coach-color)',
@@ -32,6 +33,7 @@ export const transportModes = {
 export const transportModesTransparent = {
     'air-transparent': 'var(--air-color-transparent)',
     'bus-transparent': 'var(--bus-color-transparent)',
+    'regional-bus-transparent': 'var(--regional-bus-color-transparent)',
     'cableway-transparent': 'var(--cableway-color-transparent)',
     'coach-transparent': 'var(--coach-color-transparent)',
     'funicular-transparent': 'var(--funicular-color-transparent)',