feat: Use different icons for booking expander meta

assets/sass/_variables.scss

@@ -27,6 +27,8 @@ html {
   --color-onLight: #{$color-onLight};
   --color-table-border: #{$color-table-border};
   --color-body: rgb(33, 37, 41);
+  --color-success: #0a8754;
+  --color-error: #c41e3a;
   --border-radius-s: 0.4rem;
   --border-radius-m: 0.8rem;
   --border-radius-l: 1.6rem;
@@ -57,6 +59,8 @@ html[data-theme="dark"] {
     --color-onLight: #ffffff;
     --color-table-border: #555;
     --color-body: #e0e0e0;
+    --color-success: #2ea44f;
+    --color-error: #f85149;
     --pagefind-ui-border: #555;
     --box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.5);
     --box-shadow-light: 0.4rem 0.4rem 0.4rem rgba(0, 0, 0, 0.3);

assets/sass/booking.scss

@@ -68,10 +68,8 @@
 }
 
 .o-booking__meta {
-  text-align: center;
   display: flex;
   flex-direction: column;
-  align-items: center;
   justify-content: center;
 
   @media (max-width: #{$breakpoint-md}) {
@@ -81,6 +79,20 @@
       display: none;
     }
   }
+
+  &-item {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+
+    &--success {
+      color: var(--color-success);
+    }
+
+    &--error {
+      color: var(--color-error);
+    }
+  }
 }
 
 .o-booking__links {

i18n/de.yaml

@@ -4,12 +4,14 @@ anchorLink:
   copied: Link wurde in die Zwischenablage kopiert
   copy: Link zu diesem Abschnitt kopieren
 booking:
+  bookable: buchbar
   classes:
     first: 1. Klasse
     second: 2. Klasse
   fee: Buchungsgebühr
   fip-50: FIP 50 Fahrkarten
   fip-global-fare: FIP Globalpreis
+  not-bookable: nicht buchbar
   reservation: Reservierung
   reservation-costs: Reservierungskosten
   visit-additional-information-website: Weitere Informationen

i18n/en.yaml

@@ -3,12 +3,14 @@ anchorLink:
   copied: Link has been copied to the clipboard
   copy: Copy link to this section
 booking:
+  bookable: bookable
   classes:
     first: 1st Class
     second: 2nd Class
   fee: Booking Fee
   fip-50: FIP 50 Tickets
   fip-global-fare: FIP Global Fare
+  not-bookable: not bookable
   reservation: Reservation
   reservation-costs: Reservation Costs
   visit-additional-information-website: Additional Information

i18n/fr.yaml

@@ -3,12 +3,14 @@ anchorLink:
   copied: Le lien a été copié dans le presse-papiers
   copy: Copier le lien vers cette section
 booking:
+  bookable: réservable
   classes:
     first: 1re classe
     second: 2nd classe
   fee: Frais de réservation
   fip-50: Billets FIP 50
   fip-global-fare: Tarif Global FIP
+  not-bookable: non réservable
   reservation: Réservation
   reservation-costs: Frais de réservation
   visit-additional-information-website: Informations complémentaires

layouts/partials/booking.html

@@ -14,23 +14,31 @@
         {{- end }}
       </div>
       <div class="o-booking__meta">
-        {{- if ne .reservations "nil" -}}
-          <div>
-            {{- T "booking.reservation" }}
-            {{ if .reservations -}}✅{{- else -}}⛔{{- end -}}
-          </div>
-        {{- end -}}
-        {{- if ne .fip_50 "nil" -}}
-          <div>
-            {{- T "booking.fip-50" }}
-            {{ if .fip_50 -}}✅{{- else -}}⛔{{- end -}}
-          </div>
-        {{- end -}}
-        {{- if ne .fip_global_fare "nil" -}}
-          <div>
-            {{- T "booking.fip-global-fare" }}
-            {{ if .fip_global_fare -}}✅{{- else -}}⛔{{- end -}}
-          </div>
+        {{- $metaFields := slice
+          (dict "key" "reservations" "value" .reservations "label" "booking.reservation")
+          (dict "key" "fip_50" "value" .fip_50 "label" "booking.fip-50")
+          (dict "key" "fip_global_fare" "value" .fip_global_fare "label" "booking.fip-global-fare")
+        -}}
+        {{- range $metaFields -}}
+          {{- if ne .value "nil" -}}
+            {{- if .value -}}
+              <div
+                class="o-booking__meta-item o-booking__meta-item--success"
+                aria-label="{{ T .label }} {{ T "booking.bookable" }}"
+              >
+                {{- partial "icon" "check_circle" -}}
+                <span aria-hidden="true">{{- T .label -}}</span>
+              </div>
+            {{- else -}}
+              <div
+                class="o-booking__meta-item o-booking__meta-item--error"
+                aria-label="{{ T .label }} {{ T "booking.not-bookable" }}"
+              >
+                {{- partial "icon" "cancel" -}}
+                <span aria-hidden="true">{{- T .label -}}</span>
+              </div>
+            {{- end -}}
+          {{- end -}}
         {{- end -}}
       </div>
       <div class="o-booking__classes">