feat(sbb-train-formation): introduce new types and refactoring (#3199)

Closes #2681 BREAKING CHANGE: The `hide-wagen-label` property of the `sbb-train-formation` was removed. Now it automatically doesn't show the label if no label is set on all the wagons. The i18n `i18nClosedCompartmentLabel()` method doesn't take `wagonNumber` as an argument anymore but is a constant now. Additionally, there are some visual changes: - `sbb-train-wagon`: The `ouccpancy` property doesn't default to `none` anymore but to `null`. Please replace the currently undefined occupancy property with the value `none`. - `sbb-train-wagon`: Previously for the locomotive the label was not displayed, but now it would, as soon as there is one provided - `sbb-train-formation`: The inline padding (left / right) was removed but can be set by CSS variable. See documentation.
sbb-design-systems · Nov 20, 2024 · 8eb7ae6 · 8eb7ae6
1 parent 11884da
commit 8eb7ae6
Show file tree

Hide file tree

Showing 27 changed files with 1,237 additions and 806 deletions.
diff --git a/src/elements/card/card-badge/readme.md b/src/elements/card/card-badge/readme.md
@@ -1,6 +1,6 @@
 The `sbb-card-badge` can contain some information like prices or discounts,
-and can be used in [sbb-card](/docs/components-sbb-card-sbb-card--docs) or
-[sbb-selection-expansion-panel](/docs/components-sbb-selection-expansion-panel--docs).
+and can be used in [sbb-card](/docs/elements-sbb-card-sbb-card--docs) or
+[sbb-selection-expansion-panel](/docs/elements-sbb-selection-expansion-panel--docs).
 
 To achieve the correct spacing between elements inside the card badge, we recommend to use `span`-elements.
 All content parts are presented with a predefined gap in between.

diff --git a/src/elements/core/i18n/i18n.ts b/src/elements/core/i18n/i18n.ts
@@ -78,21 +78,11 @@ export const i18nWagonLabelNumber: Record<string, string> = {
   it: `Numero`,
 };
 
-export const i18nClosedCompartmentLabel = (wagonNumber?: number): Record<string, string> => {
-  if (wagonNumber) {
-    return {
-      de: `Geschlossener Wagen mit der Nummer ${wagonNumber}`,
-      en: `Closed train coach with the number ${wagonNumber}`,
-      fr: `Wagon de train fermé avec le numéro ${wagonNumber}`,
-      it: `Carrozza del treno chiuso con il numero ${wagonNumber}`,
-    };
-  }
-  return {
-    de: 'Geschlossener Zugwaggon',
-    en: 'Closed train coach',
-    fr: 'Wagon de train fermé',
-    it: 'Carrozza del treno chiuso',
-  };
+export const i18nClosedCompartmentLabel: Record<string, string> = {
+  de: 'Geschlossener Zugwaggon',
+  en: 'Closed train coach',
+  fr: 'Wagon de train fermé',
+  it: 'Carrozza del treno chiuso',
 };
 
 export const i18nLocomotiveLabel: Record<string, string> = {
@@ -102,6 +92,27 @@ export const i18nLocomotiveLabel: Record<string, string> = {
   it: 'Locomotiva',
 };
 
+export const i18nSleepingWagonLabel: Record<string, string> = {
+  de: 'Schlafwagen',
+  en: 'Sleeping car',
+  fr: 'Voiture-lits',
+  it: 'Carrozza letti',
+};
+
+export const i18nCouchetteWagonLabel: Record<string, string> = {
+  de: 'Liegewagen',
+  en: 'Couchette car',
+  fr: 'Voiture-couchettes',
+  it: 'Carrozza cuccette',
+};
+
+export const i18nRestaurantWagonLabel: Record<string, string> = {
+  de: 'Speisewagen',
+  en: 'Dining car',
+  fr: 'Voiture-restaurant',
+  it: 'Carrozza ristorante',
+};
+
 export const i18nBlockedPassage: Record<string, Record<string, string>> = {
   previous: {
     de: 'Kein Durchgang zum vorherigen Wagen',

diff --git a/src/elements/core/styles/core.scss b/src/elements/core/styles/core.scss
@@ -153,3 +153,36 @@ input[data-sbb-time-input] {
     max-width: var(--sbb-time-input-s-max-width);
   }
 }
+
+// TODO: move to train formation after css refactoring
+sbb-train-formation:has(sbb-train[direction-label]) {
+  --sbb-train-formation-reserve-spacing-display: block;
+}
+
+// TODO: move to train formation after css refactoring
+sbb-train-formation:has(sbb-train-wagon[sector]) {
+  --sbb-train-formation-show-sectors-gap: 1;
+}
+
+// TODO: move to train formation after css refactoring
+sbb-train-formation:not(:has(sbb-train-wagon[label])) {
+  --sbb-train-formation-wagon-label-display: none;
+}
+
+// TODO: Move to sbb-train-wagon after CSS refactoring
+sbb-train-formation[view='side'] sbb-train-wagon {
+  --sbb-train-wagon-wagon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M12.5,0.5 h55 a12,12 0 0 1 12,12 v15 a12,12 0 0 1 -12,12 h-55 a12,12 0 0 1 -12,-12 v-15 a12,12 0 0 1 12,-12 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
+  --sbb-train-wagon-wagon-closed-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Crect x='0.5' y='0.5' width='79' height='39' rx='11.5' stroke='%23000000'/%3E%3Cpath d='M76 4L4 36' stroke='%23000000'/%3E%3Cpath d='M76 36L4 4' stroke='%23000000'/%3E%3C/svg%3E");
+  --sbb-train-wagon-wagon-end-left-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M10.745 7.90416C13.5624 3.30431 18.5686 0.5 23.9627 0.5H68C74.3513 0.5 79.5 5.64873 79.5 12V28C79.5 34.3513 74.3513 39.5 68 39.5H11.922C2.93614 39.5 -2.57807 29.6562 2.11537 21.9934L10.745 7.90416Z' stroke='%23000000'/%3E%3C/svg%3E");
+  --sbb-train-wagon-locomotive-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M10.745 7.90416C13.5624 3.30431 18.5686 0.5 23.9627 0.5H56.0373C61.4314 0.5 66.4376 3.30432 69.255 7.90416L77.8846 21.9934C82.5781 29.6562 77.0639 39.5 68.078 39.5H11.922C2.93615 39.5 -2.57807 29.6562 2.11537 21.9934L10.745 7.90416Z' stroke='%23000000'/%3E%3C/svg%3E");
+  --sbb-train-wagon-wagon-end-right-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M0.5 12C0.5 5.64873 5.64873 0.5 12 0.5H56.0373C61.4314 0.5 66.4376 3.30432 69.255 7.90416L77.8846 21.9934C82.5781 29.6562 77.0638 39.5 68.0779 39.5H12C5.64873 39.5 0.5 34.3513 0.5 28V12Z' stroke='%23000000'/%3E%3C/svg%3E");
+}
+
+// TODO: Move to sbb-train-wagon after CSS refactoring
+sbb-train-formation[view='top'] sbb-train-wagon {
+  --sbb-train-wagon-wagon-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M8.5,0.5 h63 a8,8 0 0 1 8,8 v23 a8,8 0 0 1 -8,8 h-63 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E%0A");
+  --sbb-train-wagon-wagon-closed-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Crect x='0.5' y='0.5' width='79' height='39' rx='7.5' stroke='%23000000'/%3E%3Cpath d='M77.5 2.5L2.5 37.5' stroke='%23000000'/%3E%3Cpath d='M77.5 37.5L2.5 2.5' stroke='%23000000'/%3E%3C/svg%3E");
+  --sbb-train-wagon-wagon-end-left-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath transform='translate(80,40) rotate(180)' d='M8.5,0.5 h51.5 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-51.5 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
+  --sbb-train-wagon-locomotive-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M20,0.5 h40 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-40 a19.5,19.5 0 0 1 -19.5,-19.5 v0 a19.5,19.5 0 0 1 19.5,-19.5 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E%0A");
+  --sbb-train-wagon-wagon-end-right-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40' viewBox='0 0 80 40' fill='none'%3E%3Cpath d='M8.5,0.5 h51.5 a19.5,19.5 0 0 1 19.5,19.5 v0 a19.5,19.5 0 0 1 -19.5,19.5 h-51.5 a8,8 0 0 1 -8,-8 v-23 a8,8 0 0 1 8,-8 z' stroke='%23000000' stroke-width='1'/%3E%3C/svg%3E");
+}
diff --git a/src/elements/train/train-blocked-passage/readme.md b/src/elements/train/train-blocked-passage/readme.md
@@ -1,7 +1,7 @@
 A `sbb-train-blocked-passage` is a visual representation of a blocked passage between
-[sbb-train-wagon](/docs/timetable-sbb-train-wagon--docs)s.
+[sbb-train-wagon](/docs/elements-timetable-sbb-train-wagon--docs)s.
 
-It is used inside the [sbb-train](/docs/timetable-sbb-train--docs) element.
+It is used inside the [sbb-train](/docs/elements-timetable-sbb-train--docs) element.
 
 ```html
 <sbb-train-blocked-passage></sbb-train-blocked-passage>

diff --git a/src/elements/train/train-blocked-passage/train-blocked-passage.scss b/src/elements/train/train-blocked-passage/train-blocked-passage.scss
@@ -7,7 +7,7 @@
   display: block;
 
   --sbb-train-blocked-passage-height: var(--sbb-train-formation-wagon-height);
-  --sbb-train-blocked-passage-background-color: var(--sbb-color-red);
+  --sbb-train-blocked-passage-background-color: var(--sbb-color-red125);
   --sbb-train-blocked-passage-bar-color: var(--sbb-color-white);
   --sbb-train-blocked-passage-icon-dimension: #{sbb.px-to-rem-build(16)};
   --sbb-train-blocked-passage-icon-bar-width: #{sbb.px-to-rem-build(10)};
@@ -24,7 +24,7 @@
   &::before {
     content: '';
     display: var(--sbb-train-formation-wagon-label-display, block);
-    height: calc(var(--sbb-font-size-text-s) * var(--sbb-typo-line-height-body-text));
+    height: calc(var(--sbb-font-size-text-xxs) * var(--sbb-typo-line-height-body-text));
   }
 }
 

diff --git a/src/elements/train/train-formation/__snapshots__/train-formation.snapshot.spec.snap.js b/src/elements/train/train-formation/__snapshots__/train-formation.snapshot.spec.snap.js
@@ -2,13 +2,12 @@
 export const snapshots = {};
 
 snapshots["sbb-train-formation should render with one train DOM"] = 
-`<sbb-train-formation>
+`<sbb-train-formation view="side">
   <sbb-train
     direction="left"
     slot="li-0"
   >
     <sbb-train-wagon
-      data-has-visible-wagon-content=""
       sector="A"
       slot="li-0"
       type="wagon"
@@ -20,10 +19,7 @@ snapshots["sbb-train-formation should render with one train DOM"] =
 /* end snapshot sbb-train-formation should render with one train DOM */
 
 snapshots["sbb-train-formation should render with one train Shadow DOM"] = 
-`<div
-  class="sbb-train-formation"
-  style="--sbb-train-direction-width: 800px;"
->
+`<div class="sbb-train-formation">
   <div
     aria-hidden="true"
     class="sbb-train-formation__sectors"
@@ -59,13 +55,12 @@ snapshots["sbb-train-formation should render with one train Shadow DOM"] =
 /* end snapshot sbb-train-formation should render with one train Shadow DOM */
 
 snapshots["sbb-train-formation should render with multiple trains DOM"] = 
-`<sbb-train-formation>
+`<sbb-train-formation view="side">
   <sbb-train
     direction="left"
     slot="li-0"
   >
     <sbb-train-wagon
-      data-has-visible-wagon-content=""
       sector="A"
       slot="li-0"
       type="wagon"
@@ -77,7 +72,6 @@ snapshots["sbb-train-formation should render with multiple trains DOM"] =
     slot="li-1"
   >
     <sbb-train-wagon
-      data-has-visible-wagon-content=""
       sector="B"
       slot="li-0"
       type="wagon"
@@ -89,10 +83,7 @@ snapshots["sbb-train-formation should render with multiple trains DOM"] =
 /* end snapshot sbb-train-formation should render with multiple trains DOM */
 
 snapshots["sbb-train-formation should render with multiple trains Shadow DOM"] = 
-`<div
-  class="sbb-train-formation"
-  style="--sbb-train-direction-width: 800px;"
->
+`<div class="sbb-train-formation">
   <div
     aria-hidden="true"
     class="sbb-train-formation__sectors"
@@ -158,7 +149,7 @@ snapshots["sbb-train-formation should render with multiple trains A11y tree Chro
     },
     {
       "role": "text",
-      "name": "Sector, A"
+      "name": "Train coach, Sector, A"
     },
     {
       "role": "heading",
@@ -171,7 +162,7 @@ snapshots["sbb-train-formation should render with multiple trains A11y tree Chro
     },
     {
       "role": "text",
-      "name": "Sector, B"
+      "name": "Train coach, Sector, B"
     }
   ]
 }
@@ -196,7 +187,7 @@ snapshots["sbb-train-formation should render with multiple trains A11y tree Fire
     },
     {
       "role": "text leaf",
-      "name": "Sector, A"
+      "name": "Train coach, Sector, A"
     },
     {
       "role": "heading",
@@ -209,7 +200,7 @@ snapshots["sbb-train-formation should render with multiple trains A11y tree Fire
     },
     {
       "role": "text leaf",
-      "name": "Sector, B"
+      "name": "Train coach, Sector, B"
     }
   ]
 }

diff --git a/src/elements/train/train-formation/readme.md b/src/elements/train/train-formation/readme.md
@@ -1,10 +1,5 @@
 The `sbb-train-formation` is a component used as a top container element
-for wrapping [sbb-train](/docs/timetable-sbb-train--docs)s.
-
-## Style
-
-It has no properties, and it applies the possible scrollable-width to every given `sbb-train`
-as CSS variable (`--sbb-train-direction-width`) initially and on resize.
+for wrapping [sbb-train](/docs/elements-timetable-sbb-train--docs)s.
 
 ```html
 <sbb-train-formation>
@@ -50,13 +45,29 @@ as CSS variable (`--sbb-train-direction-width`) initially and on resize.
 </sbb-train-formation>
 ```
 
+### View
+
+The perspective of the train can be switched with the `view` property between `side` (default) and `top`.
+
+### Inline padding
+
+In certain circumstances there should be a left and right padding applied, but including the scrollbar.
+To achieve the inline padding, set a value to the
+CSS variable `--sbb-train-formation-padding-inline` like `var(--sbb-spacing-fixed-4x)`.
+
 <!-- Auto Generated Below -->
 
 ## Properties
 
-| Name             | Attribute          | Privacy | Type      | Default | Description                      |
-| ---------------- | ------------------ | ------- | --------- | ------- | -------------------------------- |
-| `hideWagonLabel` | `hide-wagon-label` | public  | `boolean` | `false` | Option to hide all wagon labels. |
+| Name   | Attribute | Privacy | Type              | Default  | Description                                                     |
+| ------ | --------- | ------- | ----------------- | -------- | --------------------------------------------------------------- |
+| `view` | `view`    | public  | `'side' \| 'top'` | `'side'` | Whether the view of the wagons is from side or top perspective. |
+
+## CSS Properties
+
+| Name                                   | Default | Description                                                      |
+| -------------------------------------- | ------- | ---------------------------------------------------------------- |
+| `--sbb-train-formation-padding-inline` | `0px`   | Defines the inline padding inside the horizontal scrolling area. |
 
 ## Slots
 

diff --git a/src/elements/train/train-formation/train-formation.scss b/src/elements/train/train-formation/train-formation.scss
@@ -6,21 +6,17 @@
 :host {
   display: block;
 
-  --sbb-train-formation-inline-padding: var(--sbb-spacing-fixed-4x);
-  --sbb-train-formation-background-color: var(--sbb-color-white);
-  --sbb-train-formation-sector-label-color: var(--sbb-color-metal);
-  --sbb-train-formation-sector-line-color: var(--sbb-color-smoke);
+  --sbb-train-formation-sector-line-color: var(--sbb-color-cement);
+  --sbb-train-formation-sector-line-width: var(--sbb-border-width-1x);
   --sbb-train-formation-blocked-passage-width: #{sbb.px-to-rem-build(16)};
+  --sbb-train-formation-text-color: var(--sbb-color-charcoal);
+  --sbb-train-formation-vertical-gap: var(--sbb-spacing-fixed-2x);
 
   @include sbb.if-forced-colors {
     --sbb-train-formation-sector-line-color: CanvasText;
   }
 }
 
-:host([hide-wagon-label]) {
-  --sbb-train-formation-wagon-label-display: none;
-}
-
 .sbb-train-formation {
   @include sbb.scrollbar;
 
@@ -31,16 +27,19 @@
       'start trains end' auto / auto 1fr auto;
     position: relative;
     overflow-x: auto;
-    background-color: var(--sbb-train-formation-background-color);
+    row-gap: calc(
+      var(--sbb-train-formation-show-sectors-gap, 0) * var(--sbb-train-formation-vertical-gap)
+    );
+    padding-block-end: var(--sbb-train-formation-vertical-gap);
+    color: var(--sbb-train-formation-text-color);
   }
 
   // Enable inline padding
   &::before,
   &::after {
     content: '';
     display: block;
-    width: var(--sbb-train-formation-inline-padding);
-    background-color: var(--sbb-train-formation-background-color);
+    width: var(--sbb-train-formation-padding-inline);
   }
 
   &::before {
@@ -68,34 +67,41 @@
   --_gap-sum: calc((var(--_total-count) - 1) * var(--sbb-train-formation-wagon-gap));
   --_sector-width: calc(var(--_wagon-sum) + var(--_blocked-passage-sum) + var(--_gap-sum));
 
-  @include sbb.text-s--regular;
+  @include sbb.text-xs--regular;
 
   flex: 0 0 var(--_sector-width);
-  color: var(--sbb-train-formation-sector-label-color);
   text-align: center;
-  position: relative;
-  display: inline-block;
-  margin-block-end: var(--sbb-spacing-fixed-4x);
-  max-width: var(--_sector-width);
-
-  // Line behind the sector-label
-  &::before {
-    content: '';
-    position: absolute;
-    inset: 50% 0;
-    height: 1px;
-    background-color: var(--sbb-train-formation-sector-line-color);
-  }
+  overflow-x: clip;
 }
 
 .sbb-train-formation__sector-sticky-wrapper {
-  background-color: var(--sbb-train-formation-background-color);
   position: sticky;
   inset: auto 0;
   padding: 0 var(--sbb-spacing-fixed-1x);
   margin: 0 var(--sbb-spacing-fixed-2x);
   overflow: hidden;
   white-space: nowrap;
+
+  // Lines beside the sector-label
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+
+    // Exactly center the line by subtracting half of the border width
+    inset-block: calc(50% - var(--sbb-train-formation-sector-line-width) / 2);
+    border-block-end: var(--sbb-train-formation-sector-line-width) solid
+      var(--sbb-train-formation-sector-line-color);
+    width: calc(0.5 * var(--_sector-width));
+  }
+
+  &::before {
+    inset-inline-end: 100%;
+  }
+
+  &::after {
+    inset-inline-start: 100%;
+  }
 }
 
 .sbb-train-formation__trains {