fix: fix train formation

sbb-design-systems · Nov 6, 2024 · 7cf466e · 7cf466e
1 parent d9a2943
commit 7cf466e
Show file tree

Hide file tree

Showing 26 changed files with 947 additions and 561 deletions.
diff --git a/src/elements/core/i18n/i18n.ts b/src/elements/core/i18n/i18n.ts
@@ -102,6 +102,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
@@ -154,6 +154,17 @@ input[data-sbb-time-input] {
   }
 }
 
+// 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;
+}
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
@@ -1,14 +1,13 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["sbb-train-formation should render with one train DOM"] =
-`<sbb-train-formation>
+snapshots["sbb-train-formation should render with one train DOM"] = 
+`<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"
@@ -19,10 +18,8 @@ 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"
->
+snapshots["sbb-train-formation should render with one train Shadow DOM"] = 
+`<div class="sbb-train-formation">
   <div
     aria-hidden="true"
     class="sbb-train-formation__sectors"
@@ -57,14 +54,13 @@ 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>
+snapshots["sbb-train-formation should render with multiple trains DOM"] = 
+`<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"
@@ -76,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"
@@ -87,10 +82,8 @@ 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"
->
+snapshots["sbb-train-formation should render with multiple trains Shadow DOM"] = 
+`<div class="sbb-train-formation">
   <div
     aria-hidden="true"
     class="sbb-train-formation__sectors"
@@ -139,7 +132,7 @@ snapshots["sbb-train-formation should render with multiple trains Shadow DOM"] =
 `;
 /* end snapshot sbb-train-formation should render with multiple trains Shadow DOM */
 
-snapshots["sbb-train-formation should render with multiple trains A11y tree Chrome"] =
+snapshots["sbb-train-formation should render with multiple trains A11y tree Chrome"] = 
 `<p>
   {
   "role": "WebArea",
@@ -154,6 +147,14 @@ snapshots["sbb-train-formation should render with multiple trains A11y tree Chro
       "role": "text",
       "name": "Coaches of the train"
     },
+    {
+      "role": "text",
+      "name": "Train coach"
+    },
+    {
+      "role": "text",
+      "name": ", "
+    },
     {
       "role": "text",
       "name": "Sector, A"
@@ -167,6 +168,14 @@ snapshots["sbb-train-formation should render with multiple trains A11y tree Chro
       "role": "text",
       "name": "Coaches of the train"
     },
+    {
+      "role": "text",
+      "name": "Train coach"
+    },
+    {
+      "role": "text",
+      "name": ", "
+    },
     {
       "role": "text",
       "name": "Sector, B"
@@ -177,7 +186,7 @@ snapshots["sbb-train-formation should render with multiple trains A11y tree Chro
 `;
 /* end snapshot sbb-train-formation should render with multiple trains A11y tree Chrome */
 
-snapshots["sbb-train-formation should render with multiple trains A11y tree Firefox"] =
+snapshots["sbb-train-formation should render with multiple trains A11y tree Firefox"] = 
 `<p>
   {
   "role": "document",
@@ -192,6 +201,14 @@ snapshots["sbb-train-formation should render with multiple trains A11y tree Fire
       "role": "text leaf",
       "name": "Coaches of the train"
     },
+    {
+      "role": "text leaf",
+      "name": "Train coach"
+    },
+    {
+      "role": "text leaf",
+      "name": ", "
+    },
     {
       "role": "text leaf",
       "name": "Sector, A"
@@ -205,6 +222,14 @@ snapshots["sbb-train-formation should render with multiple trains A11y tree Fire
       "role": "text leaf",
       "name": "Coaches of the train"
     },
+    {
+      "role": "text leaf",
+      "name": "Train coach"
+    },
+    {
+      "role": "text leaf",
+      "name": ", "
+    },
     {
       "role": "text leaf",
       "name": "Sector, B"

diff --git a/src/elements/train/train-formation/readme.md b/src/elements/train/train-formation/readme.md
@@ -1,5 +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.
+for wrapping [sbb-train](/docs/elements-timetable-sbb-train--docs)s.
 
 ```html
 <sbb-train-formation>
@@ -45,19 +45,29 @@ for wrapping [sbb-train](/docs/timetable-sbb-train--docs)s.
 </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-inline-padding` | `0px`   | Defines the inline padding inside the horizontal scrolling area. |
+| `--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
@@ -17,32 +17,29 @@
   }
 }
 
-:host([hide-wagon-label]) {
-  --sbb-train-formation-wagon-label-display: none;
-}
-
 .sbb-train-formation {
   @include sbb.scrollbar;
 
-  row-gap: var(--sbb-train-formation-vertical-gap);
-  padding-block-end: var(--sbb-train-formation-vertical-gap);
-  color: var(--sbb-train-formation-text-color);
-
   & {
     display: grid;
     grid-template:
       'start sectors end' auto
       'start trains end' auto / auto 1fr auto;
     position: relative;
     overflow-x: auto;
+    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);
+    width: var(--sbb-train-formation-padding-inline);
   }
 
   &::before {
@@ -114,3 +111,20 @@
 .sbb-train-formation__train-list > :is(li, span) {
   display: inline-flex;
 }
+
+// TODO: Move to sbb-train-wagon after CSS refactoring
+:host([view='side']) {
+  --sbb-train-formation-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-formation-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-formation-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-formation-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-formation-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");
+}
+
+:host([view='top']) {
+  --sbb-train-formation-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-formation-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-formation-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-formation-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-formation-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");
+}