# Journey-Header

Component of the SBB design system Lyne.

- Package: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`)
- Structure: one element
- Categories: Display
- Status: Design guidelines complete

## Links

- Page on digital.sbb.ch: https://digital.sbb.ch/en/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

## Elements

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

## Overview

### What does the component do?
The journey header is the title of a journey or connection. It shows the start and destination with an icon in between. The icon indicates the direction: one-way or round trip.

### When should the component be used?
* In a timetable context, for example as the title of a travel route.

### Rules.
* The semantic level (`level`) matches the heading structure of the page. The display can be adjusted independently via `visual-level`.
* The connection is described automatically for screen readers, for example "Connection from A to B".

## Implementation (web components)

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)

Full API tables (attributes, events, slots, CSS properties): https://digital.sbb.ch/en/design-system/lyne/components/journey-header/api.md