# Journey-Header

Komponente des SBB Design Systems Lyne.

- Paket: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`)
- Aufbau: ein Element
- Kategorien: Display
- Status: Gestaltungsrichtlinien vollständig

## Links

- Seite auf digital.sbb.ch: https://digital.sbb.ch/de/design-system/lyne/components/journey-header/
- Storybook: https://lyne-elements.app.sbb.ch/?path=/docs/elements-journey-header--docs
- Angular (`@sbb-esta/lyne-angular`): https://lyne-angular.app.sbb.ch/angular/components/journey-header/overview (API: https://lyne-angular.app.sbb.ch/angular/components/journey-header/api)
- Figma: https://www.figma.com/design/mWknI2rC5DJmOgRO61WKai/Lyne-Components?node-id=7491-33
- GitHub: https://github.com/sbb-design-systems/lyne-components/tree/v5.12.0/src/elements/journey-header

## Elemente

- `sbb-journey-header`: Combined with the `sbb-journey-summary`, it displays the journey's detail.

## Übersicht

### Was macht die Komponente?
Der Journey-Header ist der Titel einer Reise oder Verbindung. Er zeigt Start und Ziel mit einem Icon dazwischen. Das Icon zeigt die Richtung: einfache Fahrt oder Hin- und Rückfahrt.

### Wann soll die Komponente eingesetzt werden?
* Im Fahrplan-Kontext, zum Beispiel als Titel einer Reiseroute.

### Regeln.
* Das semantische Level (`level`) passt zur Überschriftenstruktur der Seite. Die Darstellung kann unabhängig davon über `visual-level` angepasst werden.
* Für Screenreader wird die Verbindung automatisch beschrieben, zum Beispiel «Verbindung von A nach B».

## Implementation (Web Components, Englisch)

The `<sbb-journey-header>` element inherits from the `<sbb-title>` component,
which is used to display the title of the journey.

The component has two required properties, named `origin` and `destination`,
which represents the two ends of the journey.
An icon is placed between them: if the property `roundTrip` is set to false (default),
the icon is an arrow pointing to the `destination`, otherwise it is a double arrow to display the round-trip.

```html
<sbb-journey-header origin="Point A" destination="Point B"></sbb-journey-header>

<sbb-journey-header origin="Point A" destination="Point B" round-trip></sbb-journey-header>
```

### Style

The component has a `level` property, which is passed to its inner `<sbb-title>` component;
it is rendered as a heading from `h1` to `h6`. Default `level` is `3`.
It also has a `visualLevel` property, which can be used in scenarios
where the visual representation needs to be different from the semantic meaning of the title level.
The default `visualLevel` is `5`.

The component also has a `negative` background variant.

```html
<sbb-journey-header origin="Point A" destination="Point B" visual-level="4"></sbb-journey-header>

<sbb-journey-header origin="Point A" destination="Point B" level="5"></sbb-journey-header>

<sbb-journey-header origin="Point A" destination="Point B" negative></sbb-journey-header>
```

### Accessibility

The component sets an `aria-label` on its host element which is read by screen readers to provide a description of the journey.

The following example will be read as (locale: EN): `Connection from Point A to Point B.`.

```html
<sbb-journey-header origin="Point A" destination="Point B"></sbb-journey-header>
```

The following one will be read as (locale: EN): `Connection from Point A to Point B and back to Point A.`.

```html
<sbb-journey-header origin="Point A" destination="Point B" round-trip></sbb-journey-header>
```

## API (Web Components, Englisch)

Vollständige API-Tabellen (Attribute, Events, Slots, CSS-Eigenschaften): https://digital.sbb.ch/de/design-system/lyne/components/journey-header/api.md