diff --git a/src/components/core/i18n/i18n.ts b/src/components/core/i18n/i18n.ts index bc42caba23..ba432b653f 100644 --- a/src/components/core/i18n/i18n.ts +++ b/src/components/core/i18n/i18n.ts @@ -14,27 +14,6 @@ export const i18nArrival: Record = { it: 'Arrivo', }; -export const i18nAttention: Record = { - de: 'Achtung', - en: 'Attention', - fr: 'Attention', - it: 'Attenzione', -}; - -export const i18nAvailableAtDepartingStation: Record = { - de: 'am Abfahrtsbahnhof verfügbar.', - en: 'available at departure station.', - fr: 'disponible à la gare de départ.', - it: 'disponibile alla stazione di partenza.', -}; - -export const i18nBarrierFreeTravel: Record = { - de: 'Barrierefreies Reisen.', - en: 'Barrier-free travel.', - fr: 'Déplacements sans obstacles.', - it: 'Viaggio senza barriere.', -}; - export const i18nSector: Record = { de: 'Sektor', en: 'Sector', @@ -151,20 +130,6 @@ export const i18nAdditionalWagonInformationHeading: Record = { it: 'Informazioni aggiuntive sulla carrozza del treno', }; -export const i18nConnectionsDepartOn: Record = { - de: 'Abfahrten am', - en: 'Departures on', - fr: 'Départs le', - it: 'Partenze su', -}; - -export const i18nDayChange: Record = { - de: 'Tageswechsel', - en: 'Change of day', - fr: 'changement de jour', - it: 'Cambio giorno', -}; - export const i18nDeparture: Record = { de: 'Abfahrt', en: 'Departure', @@ -172,37 +137,6 @@ export const i18nDeparture: Record = { it: 'Partenza', }; -export const i18nDistanceMeter: Record>> = { - single: { - long: { - de: 'Meter', - en: 'Meter', - fr: 'mètre', - it: 'Metro', - }, - short: { - de: 'm', - en: 'm', - fr: 'm', - it: 'm', - }, - }, - multiple: { - long: { - de: 'Meter', - en: 'Meters', - fr: 'mètres', - it: 'Metri', - }, - short: { - de: 'm', - en: 'm', - fr: 'm', - it: 'm', - }, - }, -}; - export const i18nDurationMinute: Record>> = { single: { long: { @@ -378,13 +312,6 @@ export const i18nSupersaver: Record = { it: 'Biglietti risparmio', }; -export const i18nNone: Record = { - de: 'Keine', - en: 'None', - fr: 'aucun', - it: 'nessuno', -}; - export const i18nOccupancy: Record> = { none: { de: 'Keine Belegungsprognose verfügbar', @@ -509,13 +436,6 @@ export const i18nWalkingDistanceDeparture: Record = { it: 'minuti a piedi prima della partenza:', }; -export const i18nWalkingDistanceToDepartureStation: Record = { - de: 'Fussweg zum Abfahrtsbahnhof.', - en: 'of walking distance to departing station.', - fr: 'de distance à pied de la gare de départ.', - it: 'di distanza a piedi dalla stazione di partenza.', -}; - export const i18nCloseAlert: Record = { de: 'Meldung schliessen', en: 'Close message', @@ -579,13 +499,6 @@ export const i18nToday: Record = { it: 'Oggi', }; -export const i18nTomorrow: Record = { - de: 'Morgen', - en: 'Tomorrow', - fr: 'Demain', - it: 'Domani', -}; - export const i18nNextMonth: Record = { de: 'Zum nächsten Monat wechseln', en: 'Change to the next month', diff --git a/src/components/core/timetable/icons.json b/src/components/core/timetable/icons.json deleted file mode 100644 index 4e36605b86..0000000000 --- a/src/components/core/timetable/icons.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "alternative": "", - "delay": "", - "disruption": "", - "ic-8": "", - "park-and-rail-small": "", - "sa-sb": "", - "sa-rr": "", - "sa-zm": "", - "transportation-bus-right": "", - "transportation-luftseilbahn-right": "", - "transportation-tram-right": "", - "transportation-zug-right": "", - "utilization-none": "", - "utilization-low": "", - "utilization-medium": "", - "utilization-high": "", - "walk-small": "", - "wheelchair-inaccessible": "", - "wheelchair-partially": "", - "wheelchair-reservation": "", - "wheelchair": "", - "wheelchair-uncertain": "" -} diff --git a/src/components/timetable-barrier-free/readme.md b/src/components/timetable-barrier-free/readme.md deleted file mode 100644 index 2ad976732d..0000000000 --- a/src/components/timetable-barrier-free/readme.md +++ /dev/null @@ -1,9 +0,0 @@ -to be documented... - - - -## Properties - -| Name | Attribute | Privacy | Type | Default | Description | -| -------- | --------- | ------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -| `config` | `config` | public | `string` | | Stringified JSON which defines most of the content of the component. Please check the individual stories to get an idea of the structure. | diff --git a/src/components/timetable-barrier-free/timetable-barrier-free.e2e.ts b/src/components/timetable-barrier-free/timetable-barrier-free.e2e.ts deleted file mode 100644 index fbabfd5544..0000000000 --- a/src/components/timetable-barrier-free/timetable-barrier-free.e2e.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { assert, fixture } from '@open-wc/testing'; -import { html } from 'lit/static-html.js'; - -import { SbbTimetableBarrierFreeElement } from './timetable-barrier-free'; -import sampleData from './timetable-barrier-free.sample-data'; - -const config = JSON.stringify(sampleData[0]); - -describe('sbb-timetable-barrier-free', () => { - let element: SbbTimetableBarrierFreeElement; - - it('renders', async () => { - element = await fixture( - html``, - ); - - assert.instanceOf(element, SbbTimetableBarrierFreeElement); - }); -}); diff --git a/src/components/timetable-barrier-free/timetable-barrier-free.sample-data.js b/src/components/timetable-barrier-free/timetable-barrier-free.sample-data.js deleted file mode 100644 index ed27676ca7..0000000000 --- a/src/components/timetable-barrier-free/timetable-barrier-free.sample-data.js +++ /dev/null @@ -1,22 +0,0 @@ -export default [ - { - icon: 'wheelchair', - text: 'Independent boarding/alighting possible.', - }, - { - icon: 'wheelchair-partially', - text: 'Driving staff will assist passengers boarding or leaving modes of transport.', - }, - { - icon: 'wheelchair-reservation', - text: 'Boarding/alighting possible upon advance notice.', - }, - { - icon: 'wheelchair-inaccessible', - text: 'Independent boarding/alighting is unfortunately impossible.', - }, - { - icon: 'wheelchair-uncertain', - text: 'No information available.', - }, -]; diff --git a/src/components/timetable-barrier-free/timetable-barrier-free.scss b/src/components/timetable-barrier-free/timetable-barrier-free.scss deleted file mode 100644 index baa25b9c66..0000000000 --- a/src/components/timetable-barrier-free/timetable-barrier-free.scss +++ /dev/null @@ -1,39 +0,0 @@ -@use '../core/styles' as sbb; - -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; - -:host { - --barrier-free-icon-size: #{sbb.px-to-rem-build(24)}; - --barrier-free-icon-padding-inline-start: calc( - var(--barrier-free-icon-size) + var(--sbb-spacing-fixed-1x) - ); -} - -.barrier-free { - display: flex; - position: relative; - @include sbb.text-xs--regular; - - margin: 0; - color: var(--sbb-color-anthracite-default); - padding-inline-start: var(--barrier-free-icon-padding-inline-start); -} - -.barrier-free__icon { - position: absolute; - inset-block-start: #{sbb.px-to-rem-build(-1)}; - inset-inline-start: 0; - fill: currentcolor; - width: var(--barrier-free-icon-size); - height: var(--barrier-free-icon-size); -} - -.barrier-free__text { - flex: 1 1 auto; -} - -.barrier-free__text--visually-hidden { - @include sbb.screen-reader-only; -} diff --git a/src/components/timetable-barrier-free/timetable-barrier-free.spec.ts b/src/components/timetable-barrier-free/timetable-barrier-free.spec.ts deleted file mode 100644 index 792650e3d5..0000000000 --- a/src/components/timetable-barrier-free/timetable-barrier-free.spec.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { expect, fixture } from '@open-wc/testing'; -import { html } from 'lit/static-html.js'; - -import sampleData from './timetable-barrier-free.sample-data'; -import './timetable-barrier-free'; - -const config = JSON.stringify(sampleData[0]); - -describe('sbb-timetable-barrier-free', () => { - it('renders', async () => { - const root = await fixture( - html``, - ); - - expect(root).dom.to.be.equal( - ` - - - - `, - ); - expect(root).shadowDom.to.be.equal( - ` -

- - Barrier-free travel. Independent boarding/alighting possible. - - -

- `, - ); - }); -}); diff --git a/src/components/timetable-barrier-free/timetable-barrier-free.stories.ts b/src/components/timetable-barrier-free/timetable-barrier-free.stories.ts deleted file mode 100644 index d9f5e002b3..0000000000 --- a/src/components/timetable-barrier-free/timetable-barrier-free.stories.ts +++ /dev/null @@ -1,74 +0,0 @@ -import type { Meta, StoryObj, Args } from '@storybook/web-components'; -import type { TemplateResult } from 'lit'; -import { html } from 'lit'; - -import readme from './readme.md?raw'; -import sampleData from './timetable-barrier-free.sample-data'; -import './timetable-barrier-free'; - -const Template = ({ config }: Args): TemplateResult => html` - -`; - -const config: Args = { - table: { - disable: false, - }, -}; - -const defaultArgTypes = { - config, -}; - -export const BarrierFree: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { - config: sampleData[0], - }, -}; - -export const BarrierFreePartially: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { - config: sampleData[1], - }, -}; - -export const BarrierFreeReservation: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { - config: sampleData[2], - }, -}; - -export const nonBarrierFree: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { - config: sampleData[3], - }, -}; - -export const BarrierFreeUnknown: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { - config: sampleData[4], - }, -}; - -const meta: Meta = { - decorators: [(story) => html`${story()}`], - parameters: { - docs: { - extractComponentDescription: () => readme, - }, - chromatic: { disableSnapshot: true }, - }, - title: 'Internals/sbb-timetable-barrier-free', -}; - -export default meta; diff --git a/src/components/timetable-barrier-free/timetable-barrier-free.ts b/src/components/timetable-barrier-free/timetable-barrier-free.ts deleted file mode 100644 index 91542b1c11..0000000000 --- a/src/components/timetable-barrier-free/timetable-barrier-free.ts +++ /dev/null @@ -1,51 +0,0 @@ -import type { CSSResultGroup, TemplateResult } from 'lit'; -import { html, LitElement } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; - -import { LanguageController } from '../core/common-behaviors'; -import { i18nBarrierFreeTravel } from '../core/i18n'; -import icons from '../core/timetable/icons.json'; - -import style from './timetable-barrier-free.scss?lit&inline'; - -/** - * Used in `sbb-timetable-row`, it displays information about barriers for screen-readers. - */ -@customElement('sbb-timetable-barrier-free') -export class SbbTimetableBarrierFreeElement extends LitElement { - public static override styles: CSSResultGroup = style; - - /** - * Stringified JSON which defines most of the - * content of the component. Please check the - * individual stories to get an idea of the - * structure. - */ - @property() public config!: string; - - private _language = new LanguageController(this); - - protected override render(): TemplateResult { - const config = JSON.parse(this.config); - - const a11yLabel = `${i18nBarrierFreeTravel[this._language.current]} ${config.text}`; - const appearanceClass = ' barrier-free--second-level'; - - return html` -

- ${a11yLabel} - -

- `; - } -} - -declare global { - interface HTMLElementTagNameMap { - // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-timetable-barrier-free': SbbTimetableBarrierFreeElement; - } -} diff --git a/src/components/timetable-park-and-rail/readme.md b/src/components/timetable-park-and-rail/readme.md deleted file mode 100644 index e78bda257f..0000000000 --- a/src/components/timetable-park-and-rail/readme.md +++ /dev/null @@ -1,11 +0,0 @@ -!! Please note that this component is not intended for direct use. It will get used within sbb-timetable. It is listed -here to show the various configuration options to component developers. !! - - - -## Properties - -| Name | Attribute | Privacy | Type | Default | Description | -| ------------ | ------------ | ------- | --------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -| `appearance` | `appearance` | public | `'first-level'` | `'first-level'` | Set the desired appearance of the component. | -| `config` | `config` | public | `string` | | Stringified JSON which defines most of the content of the component. Please check the individual stories to get an idea of the structure. | diff --git a/src/components/timetable-park-and-rail/timetable-park-and-rail.e2e.ts b/src/components/timetable-park-and-rail/timetable-park-and-rail.e2e.ts deleted file mode 100644 index df0673f19f..0000000000 --- a/src/components/timetable-park-and-rail/timetable-park-and-rail.e2e.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { assert, fixture } from '@open-wc/testing'; -import { html } from 'lit/static-html.js'; - -import { SbbTimetableParkAndRailElement } from './timetable-park-and-rail'; -import sampleData from './timetable-park-and-rail.sample-data'; - -const config = JSON.stringify(sampleData[0]); - -describe('sbb-timetable-park-and-rail', () => { - let element: SbbTimetableParkAndRailElement; - - it('renders', async () => { - element = await fixture( - html``, - ); - assert.instanceOf(element, SbbTimetableParkAndRailElement); - }); -}); diff --git a/src/components/timetable-park-and-rail/timetable-park-and-rail.sample-data.js b/src/components/timetable-park-and-rail/timetable-park-and-rail.sample-data.js deleted file mode 100644 index 11ad25e888..0000000000 --- a/src/components/timetable-park-and-rail/timetable-park-and-rail.sample-data.js +++ /dev/null @@ -1,6 +0,0 @@ -export default [ - { - distance: 178, - }, - {}, -]; diff --git a/src/components/timetable-park-and-rail/timetable-park-and-rail.scss b/src/components/timetable-park-and-rail/timetable-park-and-rail.scss deleted file mode 100644 index eb30a8fb26..0000000000 --- a/src/components/timetable-park-and-rail/timetable-park-and-rail.scss +++ /dev/null @@ -1,21 +0,0 @@ -@use '../core/styles' as sbb; - -:host { - --park-and-rail-icon-height: #{sbb.px-to-rem-build(16)}; - --park-and-rail-icon-width: var(--park-and-rail-icon-height); - - @include sbb.mq($from: medium) { - --park-and-rail-icon-height: #{sbb.px-to-rem-build(24)}; - --park-and-rail-icon-width: var(--park-and-rail-icon-height); - } -} - -.park-and-rail__icon svg { - float: inline-start; - height: var(--park-and-rail-icon-height); - width: var(--park-and-rail-icon-width); - - @include sbb.if-forced-colors { - fill: CanvasText; - } -} diff --git a/src/components/timetable-park-and-rail/timetable-park-and-rail.spec.ts b/src/components/timetable-park-and-rail/timetable-park-and-rail.spec.ts deleted file mode 100644 index 3cfc6033af..0000000000 --- a/src/components/timetable-park-and-rail/timetable-park-and-rail.spec.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { expect, fixture } from '@open-wc/testing'; -import { html } from 'lit/static-html.js'; - -import sampleData from './timetable-park-and-rail.sample-data'; -import './timetable-park-and-rail'; - -const config = JSON.stringify(sampleData[0]); - -describe('sbb-timetable-park-and-rail', () => { - it('renders', async () => { - const root = await fixture( - html``, - ); - - expect(root).dom.to.be.equal( - ` - - - - `, - ); - expect(root).shadowDom.to.be.equal( - ` -
- - - - - -
- `, - ); - }); -}); diff --git a/src/components/timetable-park-and-rail/timetable-park-and-rail.stories.ts b/src/components/timetable-park-and-rail/timetable-park-and-rail.stories.ts deleted file mode 100644 index e36b373be7..0000000000 --- a/src/components/timetable-park-and-rail/timetable-park-and-rail.stories.ts +++ /dev/null @@ -1,59 +0,0 @@ -import type { InputType } from '@storybook/types'; -import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components'; -import type { TemplateResult } from 'lit'; -import { html } from 'lit'; - -import readme from './readme.md?raw'; -import sampleData from './timetable-park-and-rail.sample-data'; -import './timetable-park-and-rail'; - -const Template = (args: Args): TemplateResult => html` - -`; - -const appearance: InputType = { - control: { - type: 'select', - }, - options: ['first-level'], -}; - -const config: Args = { - table: { - disable: false, - }, -}; - -const defaultArgTypes: ArgTypes = { - appearance, - config, -}; - -const defaultArgs: Args = { - appearance: appearance.options[0], -}; - -export const ParkAndRail: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { - ...defaultArgs, - config: sampleData[0], - }, -}; - -const meta: Meta = { - decorators: [(story) => html`${story()}`], - parameters: { - docs: { - extractComponentDescription: () => readme, - }, - chromatic: { disableSnapshot: true }, - }, - title: 'internals/sbb-timetable-park-and-rail', -}; - -export default meta; diff --git a/src/components/timetable-park-and-rail/timetable-park-and-rail.ts b/src/components/timetable-park-and-rail/timetable-park-and-rail.ts deleted file mode 100644 index d1d5270422..0000000000 --- a/src/components/timetable-park-and-rail/timetable-park-and-rail.ts +++ /dev/null @@ -1,75 +0,0 @@ -import type { CSSResultGroup, TemplateResult } from 'lit'; -import { html, LitElement } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; - -import { LanguageController } from '../core/common-behaviors'; -import { - i18nAvailableAtDepartingStation, - i18nDistanceMeter, - i18nWalkingDistanceToDepartureStation, -} from '../core/i18n'; -import icons from '../core/timetable/icons.json'; - -import style from './timetable-park-and-rail.scss?lit&inline'; - -/** - * Used in `sbb-timetable-row`, it displays information about parking. - */ -@customElement('sbb-timetable-park-and-rail') -export class SbbTimetableParkAndRailElement extends LitElement { - public static override styles: CSSResultGroup = style; - - /** Set the desired appearance of the component. */ - @property() - public appearance? = 'first-level' as const; - - /** - * Stringified JSON which defines most of the - * content of the component. Please check the - * individual stories to get an idea of the - * structure. - */ - @property() public config!: string; - - private _language = new LanguageController(this); - - protected override render(): TemplateResult { - const config = JSON.parse(this.config); - - let a11yMeters = i18nDistanceMeter.multiple.long[this._language.current]; - - if (config.distance === '1') { - a11yMeters = i18nDistanceMeter.single.long[this._language.current]; - } - - const a11yDistanceToDepartureText = - i18nWalkingDistanceToDepartureStation[this._language.current]; - const a11yDistance = config.distance; - const a11yDistanceText = `(${a11yDistance} ${a11yMeters} ${a11yDistanceToDepartureText})`; - - const a11yLabel = `${ - i18nAvailableAtDepartingStation[this._language.current] - } ${a11yDistanceText}`; - - const appearanceClass = ` park-and-rail--${this.appearance}`; - - return html` -
- -
- `; - } -} - -declare global { - interface HTMLElementTagNameMap { - // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-timetable-park-and-rail': SbbTimetableParkAndRailElement; - } -} diff --git a/src/components/timetable-row-column-headers/readme.md b/src/components/timetable-row-column-headers/readme.md deleted file mode 100644 index 6d94da5258..0000000000 --- a/src/components/timetable-row-column-headers/readme.md +++ /dev/null @@ -1,10 +0,0 @@ -!! Please note that this component is not intended for direct use. It will get used within sbb-timetable. It is listed -here to show the various configuration options to component developers. !! - - - -## Properties - -| Name | Attribute | Privacy | Type | Default | Description | -| -------- | --------- | ------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -| `config` | `config` | public | `string` | | Stringified JSON which defines most of the content of the component. Please check the individual stories to get an idea of the structure. | diff --git a/src/components/timetable-row-column-headers/timetable-row-column-headers.e2e.ts b/src/components/timetable-row-column-headers/timetable-row-column-headers.e2e.ts deleted file mode 100644 index ab50868aeb..0000000000 --- a/src/components/timetable-row-column-headers/timetable-row-column-headers.e2e.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { assert, fixture } from '@open-wc/testing'; -import { html } from 'lit/static-html.js'; - -import { SbbTimetableRowColumnHeadersElement } from './timetable-row-column-headers'; -import sampleData from './timetable-row-column-headers.sample-data'; - -const config = JSON.stringify(sampleData); - -describe('sbb-timetable-row-column-headers', () => { - let element: SbbTimetableRowColumnHeadersElement; - - it('renders', async () => { - element = await fixture( - html``, - ); - assert.instanceOf(element, SbbTimetableRowColumnHeadersElement); - }); -}); diff --git a/src/components/timetable-row-column-headers/timetable-row-column-headers.sample-data.js b/src/components/timetable-row-column-headers/timetable-row-column-headers.sample-data.js deleted file mode 100644 index e47b35b6f9..0000000000 --- a/src/components/timetable-row-column-headers/timetable-row-column-headers.sample-data.js +++ /dev/null @@ -1,10 +0,0 @@ -export default [ - 'Short Infos', - 'Summary', - '', - 'Platform', - 'Occupancy Forecast', - 'Travel hints', - 'Duration', - 'Real time information', -]; diff --git a/src/components/timetable-row-column-headers/timetable-row-column-headers.scss b/src/components/timetable-row-column-headers/timetable-row-column-headers.scss deleted file mode 100644 index fc71e66a21..0000000000 --- a/src/components/timetable-row-column-headers/timetable-row-column-headers.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use '../core/styles' as sbb; - -.column-headers { - @include sbb.screen-reader-only; -} diff --git a/src/components/timetable-row-column-headers/timetable-row-column-headers.spec.ts b/src/components/timetable-row-column-headers/timetable-row-column-headers.spec.ts deleted file mode 100644 index 4dd7d9e132..0000000000 --- a/src/components/timetable-row-column-headers/timetable-row-column-headers.spec.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { expect, fixture } from '@open-wc/testing'; -import { html } from 'lit/static-html.js'; - -import sampleData from './timetable-row-column-headers.sample-data'; -import './timetable-row-column-headers'; - -const config = JSON.stringify(sampleData); - -describe('sbb-timetable-row-column-headers', () => { - it('renders', async () => { - const root = await fixture( - html``, - ); - - expect(root).dom.to.be.equal( - ` - - - - `, - ); - expect(root).shadowDom.to.be.equal( - ` -
-
Short Infos
-
Summary
-
-
Platform
-
Occupancy Forecast
-
Travel hints
-
Duration
-
Real time information
-
- `, - ); - }); -}); diff --git a/src/components/timetable-row-column-headers/timetable-row-column-headers.stories.ts b/src/components/timetable-row-column-headers/timetable-row-column-headers.stories.ts deleted file mode 100644 index c59b9c7b49..0000000000 --- a/src/components/timetable-row-column-headers/timetable-row-column-headers.stories.ts +++ /dev/null @@ -1,44 +0,0 @@ -import type { Meta, StoryObj, Args } from '@storybook/web-components'; -import type { TemplateResult } from 'lit'; -import { html } from 'lit'; - -import readme from './readme.md?raw'; -import sampleData from './timetable-row-column-headers.sample-data'; -import './timetable-row-column-headers'; - -const Template = ({ config }: Args): TemplateResult => html` - -`; - -const config: Args = { - table: { - disable: false, - }, -}; - -const defaultArgTypes = { - config, -}; - -export const SbbTimetableRowColumnHeadersElement: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { - config: sampleData, - }, -}; - -const meta: Meta = { - decorators: [(story) => html`${story()}`], - parameters: { - docs: { - extractComponentDescription: () => readme, - }, - chromatic: { disableSnapshot: true }, - }, - title: 'internals/sbb-timetable-row-column-headers', -}; - -export default meta; diff --git a/src/components/timetable-row-column-headers/timetable-row-column-headers.ts b/src/components/timetable-row-column-headers/timetable-row-column-headers.ts deleted file mode 100644 index 0da2b14818..0000000000 --- a/src/components/timetable-row-column-headers/timetable-row-column-headers.ts +++ /dev/null @@ -1,40 +0,0 @@ -import type { CSSResultGroup, TemplateResult } from 'lit'; -import { html, LitElement } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; - -import style from './timetable-row-column-headers.scss?lit&inline'; - -/** - * Used in `sbb-timetable-row`, it displays row headers information for screen-readers. - */ -@customElement('sbb-timetable-row-column-headers') -export class SbbTimetableRowColumnHeadersElement extends LitElement { - public static override styles: CSSResultGroup = style; - - /** - * Stringified JSON which defines most of the - * content of the component. Please check the - * individual stories to get an idea of the - * structure. - */ - @property() public config!: string; - - protected override render(): TemplateResult { - const columnHeaders = JSON.parse(this.config); - - return html` -
- ${columnHeaders.map( - (columnHeader) => html`
${columnHeader}
`, - )} -
- `; - } -} - -declare global { - interface HTMLElementTagNameMap { - // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-timetable-row-column-headers': SbbTimetableRowColumnHeadersElement; - } -} diff --git a/src/components/timetable-row-day-change/readme.md b/src/components/timetable-row-day-change/readme.md deleted file mode 100644 index 6d94da5258..0000000000 --- a/src/components/timetable-row-day-change/readme.md +++ /dev/null @@ -1,10 +0,0 @@ -!! Please note that this component is not intended for direct use. It will get used within sbb-timetable. It is listed -here to show the various configuration options to component developers. !! - - - -## Properties - -| Name | Attribute | Privacy | Type | Default | Description | -| -------- | --------- | ------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -| `config` | `config` | public | `string` | | Stringified JSON which defines most of the content of the component. Please check the individual stories to get an idea of the structure. | diff --git a/src/components/timetable-row-day-change/timetable-row-day-change.e2e.ts b/src/components/timetable-row-day-change/timetable-row-day-change.e2e.ts deleted file mode 100644 index bfb243107b..0000000000 --- a/src/components/timetable-row-day-change/timetable-row-day-change.e2e.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { assert, fixture } from '@open-wc/testing'; -import { html } from 'lit/static-html.js'; - -import { SbbTimetableRowDayChangeElement } from './timetable-row-day-change'; -import sampleData from './timetable-row-day-change.sample-data'; - -const config = JSON.stringify(sampleData[1]); - -describe('sbb-timetable-row-day-change', () => { - let element: SbbTimetableRowDayChangeElement; - - it('renders', async () => { - element = await fixture( - html``, - ); - assert.instanceOf(element, SbbTimetableRowDayChangeElement); - }); -}); diff --git a/src/components/timetable-row-day-change/timetable-row-day-change.sample-data.js b/src/components/timetable-row-day-change/timetable-row-day-change.sample-data.js deleted file mode 100644 index a0699f3c76..0000000000 --- a/src/components/timetable-row-day-change/timetable-row-day-change.sample-data.js +++ /dev/null @@ -1,23 +0,0 @@ -export default [ - { - colSpan: 9, - date: '02.12.2021', - day: 'Thursday', - dayChange: false, - hidden: true, - }, - { - colSpan: 9, - date: '02.12.2021', - day: 'Thursday', - dayChange: false, - hidden: false, - }, - { - colSpan: 9, - date: '03.12.2021', - day: 'Friday', - dayChange: true, - hidden: false, - }, -]; diff --git a/src/components/timetable-row-day-change/timetable-row-day-change.scss b/src/components/timetable-row-day-change/timetable-row-day-change.scss deleted file mode 100644 index 9ea339df3d..0000000000 --- a/src/components/timetable-row-day-change/timetable-row-day-change.scss +++ /dev/null @@ -1,17 +0,0 @@ -@use '../core/styles' as sbb; - -.day-change:not(day-change--visually-hidden) { - padding-block: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-1x); -} - -.day-change__text { - @include sbb.text-xs--regular; - - margin: 0; - color: var(--sbb-color-smoke-default); -} - -.day-change--visually-hidden, -.day-change__text--visually-hidden { - @include sbb.screen-reader-only; -} diff --git a/src/components/timetable-row-day-change/timetable-row-day-change.spec.ts b/src/components/timetable-row-day-change/timetable-row-day-change.spec.ts deleted file mode 100644 index c911761138..0000000000 --- a/src/components/timetable-row-day-change/timetable-row-day-change.spec.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { expect, fixture } from '@open-wc/testing'; -import { html } from 'lit/static-html.js'; - -import sampleData from './timetable-row-day-change.sample-data'; -import './timetable-row-day-change'; - -const config = JSON.stringify(sampleData[1]); - -describe('sbb-timetable-row-day-change', () => { - it('renders', async () => { - const root = await fixture( - html``, - ); - - expect(root).dom.to.be.equal( - ` - - - - `, - ); - expect(root).shadowDom.to.be.equal( - ` -
-

- - - Departures on Thursday, 02.12.2021 - -

-
- `, - ); - }); -}); diff --git a/src/components/timetable-row-day-change/timetable-row-day-change.stories.ts b/src/components/timetable-row-day-change/timetable-row-day-change.stories.ts deleted file mode 100644 index 7e38daa3c7..0000000000 --- a/src/components/timetable-row-day-change/timetable-row-day-change.stories.ts +++ /dev/null @@ -1,58 +0,0 @@ -import type { Meta, StoryObj, Args } from '@storybook/web-components'; -import type { TemplateResult } from 'lit'; -import { html } from 'lit'; - -import readme from './readme.md?raw'; -import sampleData from './timetable-row-day-change.sample-data'; -import './timetable-row-day-change'; - -const Template = ({ config }: Args): TemplateResult => html` - -`; - -const config: Args = { - table: { - disable: false, - }, -}; - -const defaultArgTypes = { - config, -}; - -export const currentDayHidden: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { - config: sampleData[0], - }, -}; - -export const currentDayVisible: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { - config: sampleData[1], - }, -}; - -export const dayChange: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { - config: sampleData[2], - }, -}; - -const meta: Meta = { - decorators: [(story) => html`${story()}`], - parameters: { - docs: { - extractComponentDescription: () => readme, - }, - chromatic: { disableSnapshot: true }, - }, - title: 'internals/sbb-timetable-row-day-change', -}; - -export default meta; diff --git a/src/components/timetable-row-day-change/timetable-row-day-change.ts b/src/components/timetable-row-day-change/timetable-row-day-change.ts deleted file mode 100644 index 9c20b83d4f..0000000000 --- a/src/components/timetable-row-day-change/timetable-row-day-change.ts +++ /dev/null @@ -1,68 +0,0 @@ -import type { CSSResultGroup, TemplateResult } from 'lit'; -import { html, LitElement, nothing } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; - -import { LanguageController } from '../core/common-behaviors'; -import { i18nAttention, i18nConnectionsDepartOn, i18nDayChange } from '../core/i18n'; - -import style from './timetable-row-day-change.scss?lit&inline'; - -/** - * Used in `sbb-timetable-row`, it displays information about day change for screen-readers. - */ -@customElement('sbb-timetable-row-day-change') -export class SbbTimetableRowDayChangeElement extends LitElement { - public static override styles: CSSResultGroup = style; - - /** - * Stringified JSON which defines most of the - * content of the component. Please check the - * individual stories to get an idea of the - * structure. - */ - @property() public config!: string; - - private _language = new LanguageController(this); - - protected override render(): TemplateResult { - const config = JSON.parse(this.config); - - let attention = ''; - let dayChange = ''; - let visuallyHiddenClass = ''; - - if (config.dayChange) { - attention = `${i18nAttention[this._language.current]}: `; - dayChange = `${i18nDayChange[this._language.current]}, `; - } - - if (config.hidden) { - visuallyHiddenClass = ' day-change--visually-hidden'; - } - - const departsOn = `${i18nConnectionsDepartOn[this._language.current]} `; - - const visualText = `${config.day}, ${config.date}`; - const a11yLabel = `${dayChange}${attention}${departsOn}${config.day}, ${config.date}`; - - return html` -
-

- - - ${dayChange} ${attention} ${departsOn} ${config.day}, ${config.date} - -

-
- `; - } -} - -declare global { - interface HTMLElementTagNameMap { - // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-timetable-row-day-change': SbbTimetableRowDayChangeElement; - } -} diff --git a/src/components/timetable-row-header/readme.md b/src/components/timetable-row-header/readme.md deleted file mode 100644 index 6d3b316b6a..0000000000 --- a/src/components/timetable-row-header/readme.md +++ /dev/null @@ -1,10 +0,0 @@ -!! Please note that this component is not intended for direct use. It will get used within sbb-timetable. It is listed -here to show the various configuration options to component developers. !! - - - -## Properties - -| Name | Attribute | Privacy | Type | Default | Description | -| -------- | --------- | ------- | -------- | ------- | ----------- | -| `config` | `config` | public | `string` | | | diff --git a/src/components/timetable-row-header/timetable-row-header.e2e.ts b/src/components/timetable-row-header/timetable-row-header.e2e.ts deleted file mode 100644 index 11150854c2..0000000000 --- a/src/components/timetable-row-header/timetable-row-header.e2e.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { assert, fixture } from '@open-wc/testing'; -import { html } from 'lit/static-html.js'; - -import { SbbTimetableRowHeaderElement } from './timetable-row-header'; -import sampleData from './timetable-row-header.sample-data'; - -const config = JSON.stringify(sampleData[0]); - -describe('sbb-timetable-row-header', () => { - let element: SbbTimetableRowHeaderElement; - - it('renders', async () => { - element = await fixture( - html``, - ); - - assert.instanceOf(element, SbbTimetableRowHeaderElement); - }); -}); diff --git a/src/components/timetable-row-header/timetable-row-header.sample-data.js b/src/components/timetable-row-header/timetable-row-header.sample-data.js deleted file mode 100644 index 17b3e17e28..0000000000 --- a/src/components/timetable-row-header/timetable-row-header.sample-data.js +++ /dev/null @@ -1,21 +0,0 @@ -import transportationNumberData from '../timetable-transportation-number/timetable-transportation-number.sample-data'; -import transportationTimeData from '../timetable-transportation-time/timetable-transportation-time.sample-data'; - -export default [ - { - departure: { - direction: transportationNumberData['train'].direction, - productMarketingName: transportationNumberData['train'].marketingName, - productText: transportationNumberData['train'].product.text, - time: transportationTimeData[0].time, - }, - }, - { - departure: { - direction: transportationNumberData['cableCar'].direction, - productMarketingName: transportationNumberData['cableCar'].marketingName, - productText: transportationNumberData['cableCar'].product.text, - time: transportationTimeData[2].time, - }, - }, -]; diff --git a/src/components/timetable-row-header/timetable-row-header.scss b/src/components/timetable-row-header/timetable-row-header.scss deleted file mode 100644 index 5217c5c8a8..0000000000 --- a/src/components/timetable-row-header/timetable-row-header.scss +++ /dev/null @@ -1,5 +0,0 @@ -@use '../core/styles' as sbb; - -.row-header { - @include sbb.screen-reader-only; -} diff --git a/src/components/timetable-row-header/timetable-row-header.spec.ts b/src/components/timetable-row-header/timetable-row-header.spec.ts deleted file mode 100644 index 3a80683976..0000000000 --- a/src/components/timetable-row-header/timetable-row-header.spec.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { expect, fixture } from '@open-wc/testing'; -import { html } from 'lit/static-html.js'; - -import sampleData from './timetable-row-header.sample-data'; -import './timetable-row-header'; - -const config = JSON.stringify(sampleData[0]); - -describe('sbb-timetable-row-header', () => { - it('renders', async () => { - const root = await fixture( - html``, - ); - - expect(root).dom.to.be.equal( - ` - - - - `, - ); - expect(root).shadowDom.to.be.equal( - ` -

15:14 IC 8 Direction Romanshorn.

- `, - ); - }); -}); diff --git a/src/components/timetable-row-header/timetable-row-header.stories.ts b/src/components/timetable-row-header/timetable-row-header.stories.ts deleted file mode 100644 index 95df111b71..0000000000 --- a/src/components/timetable-row-header/timetable-row-header.stories.ts +++ /dev/null @@ -1,42 +0,0 @@ -import type { Meta, StoryObj, Args } from '@storybook/web-components'; -import type { TemplateResult } from 'lit'; -import { html } from 'lit'; - -import readme from './readme.md?raw'; -import sampleData from './timetable-row-header.sample-data'; -import './timetable-row-header'; - -const Template = ({ config }: Args): TemplateResult => html` - -`; - -const config: Args = { - table: { - disable: false, - }, -}; - -const defaultArgTypes = { - config, -}; - -export const SbbTimetableRowHeaderElement: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { - config: sampleData[0], - }, -}; - -const meta: Meta = { - decorators: [(story) => html`${story()}`], - parameters: { - docs: { - extractComponentDescription: () => readme, - }, - chromatic: { disableSnapshot: true }, - }, - title: 'internals/sbb-timetable-row-header', -}; - -export default meta; diff --git a/src/components/timetable-row-header/timetable-row-header.ts b/src/components/timetable-row-header/timetable-row-header.ts deleted file mode 100644 index 3edbf7fa7f..0000000000 --- a/src/components/timetable-row-header/timetable-row-header.ts +++ /dev/null @@ -1,35 +0,0 @@ -import type { CSSResultGroup, TemplateResult } from 'lit'; -import { html, LitElement } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; - -import style from './timetable-row-header.scss?lit&inline'; - -/** - * Used in `sbb-timetable-row`, it displays information for screen-readers. - */ -@customElement('sbb-timetable-row-header') -export class SbbTimetableRowHeaderElement extends LitElement { - public static override styles: CSSResultGroup = style; - - @property() public config!: string; - - protected override render(): TemplateResult { - /** - * Stringified JSON which defines most of the - * content of the component. Please check the - * individual stories to get an idea of the - * structure. - */ - const config = JSON.parse(this.config); - - const output = `${config.departure.time} ${config.departure.productText} ${config.departure.productMarketingName} ${config.departure.direction}.`; - return html`

${output}

`; - } -} - -declare global { - interface HTMLElementTagNameMap { - // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-timetable-row-header': SbbTimetableRowHeaderElement; - } -} diff --git a/src/components/timetable-transportation-number/readme.md b/src/components/timetable-transportation-number/readme.md deleted file mode 100644 index 329a47f09c..0000000000 --- a/src/components/timetable-transportation-number/readme.md +++ /dev/null @@ -1,11 +0,0 @@ -!! Please note that this component is not intended for direct use. It will get used within sbb-timetable. It is listed -here to show the various configuration options to component developers. ! - - - -## Properties - -| Name | Attribute | Privacy | Type | Default | Description | -| ------------ | ------------ | ------- | ------------------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -| `appearance` | `appearance` | public | `SbbTimetableAppearance \| undefined` | `'first-level'` | Set the desired appearance of the component. | -| `config` | `config` | public | `string` | | Stringified JSON which defines most of the content of the component. Please check the individual stories to get an idea of the structure. | diff --git a/src/components/timetable-transportation-number/timetable-transportation-number.e2e.ts b/src/components/timetable-transportation-number/timetable-transportation-number.e2e.ts deleted file mode 100644 index 229267ae23..0000000000 --- a/src/components/timetable-transportation-number/timetable-transportation-number.e2e.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { assert, fixture } from '@open-wc/testing'; -import { html } from 'lit/static-html.js'; - -import { SbbTimetableTransportationNumberElement } from './timetable-transportation-number'; -import sampleData from './timetable-transportation-number.sample-data'; - -const config = JSON.stringify(sampleData.bus); - -describe('sbb-timetable-transportation-number', () => { - let element: SbbTimetableTransportationNumberElement; - - it('renders', async () => { - element = await fixture( - html``, - ); - assert.instanceOf(element, SbbTimetableTransportationNumberElement); - }); -}); diff --git a/src/components/timetable-transportation-number/timetable-transportation-number.sample-data.js b/src/components/timetable-transportation-number/timetable-transportation-number.sample-data.js deleted file mode 100644 index 0d9ca10040..0000000000 --- a/src/components/timetable-transportation-number/timetable-transportation-number.sample-data.js +++ /dev/null @@ -1,50 +0,0 @@ -export default { - bus: { - direction: 'Richtung Bern Wankdorf, Bahnhof', - marketingName: '', - meansOfTransport: { - picto: 'transportation-bus-right', - text: 'Bus', - }, - product: { - icon: '', - text: 'B 20', - }, - }, - cableCar: { - direction: 'Direction Riederalp West', - marketingName: 'Aletsch Express', - meansOfTransport: { - picto: 'transportation-luftseilbahn-right', - text: 'Cable Car', - }, - product: { - icon: '', - text: 'GB 155', - }, - }, - train: { - direction: 'Direction Romanshorn', - marketingName: '', - meansOfTransport: { - picto: 'transportation-zug-right', - text: 'Train', - }, - product: { - icon: 'ic-8', - text: 'IC 8', - }, - }, - tram: { - direction: 'Richtung Bern Wankdorf, Bahnhof', - marketingName: '', - meansOfTransport: { - picto: 'transportation-tram-right', - text: 'Tram', - }, - product: { - icon: '', - text: 'T 9', - }, - }, -}; diff --git a/src/components/timetable-transportation-number/timetable-transportation-number.scss b/src/components/timetable-transportation-number/timetable-transportation-number.scss deleted file mode 100644 index 9d081d1af4..0000000000 --- a/src/components/timetable-transportation-number/timetable-transportation-number.scss +++ /dev/null @@ -1,106 +0,0 @@ -@use '../core/styles' as sbb; - -:host { - --transportation-number-element-height: #{sbb.px-to-rem-build(20)}; - --product-icon-width: #{sbb.px-to-rem-build(59)}; -} - -:host(sbb-timetable-transportation-number) { - display: flex; - flex-basis: 100%; - margin-block-end: var(--sbb-spacing-fixed-1x); - overflow: hidden; -} - -.transportation-number { - display: flex; - flex: 0 0 100%; - overflow: hidden; - margin: 0; -} - -.transportation-number--first-level span { - height: var(--transportation-number-element-height); - line-height: #{sbb.px-to-rem-build(22)}; -} - -.transportation-number--visual { - @include sbb.text-s--regular; - - display: flex; - flex: 0 0 100%; - flex-wrap: nowrap; - align-items: center; - overflow: hidden; -} - -.transportation-number--second-level .transportation-number--visual { - flex-wrap: wrap; -} - -.transportation-number__means-of-transport { - display: flex; - flex: 0 0 var(--transportation-number-element-height); - aspect-ratio: 1/1; - margin-inline-end: var(--sbb-spacing-fixed-1x); - overflow: hidden; -} - -.transportation-number__product-icon, -.transportation-number__product-text { - display: flex; - white-space: nowrap; - margin-inline-end: var(--sbb-spacing-fixed-2x); -} - -.transportation-number__product-icon { - line-height: var(--transportation-number-element-height); -} - -.transportation-number__product-text { - @include sbb.text-s--bold; -} - -.transportation-number--first-level .transportation-number__product-text { - line-height: #{sbb.px-to-rem-build(22)}; -} - -.transportation-number--second-level .transportation-number__product-text { - line-height: var(--transportation-number-element-height); - transform: translateY(#{sbb.px-to-rem-build(1)}); -} - -.transportation-number__direction { - flex: 1 1 auto; - overflow: hidden; -} - -.transportation-number--second-level .transportation-number__direction { - flex: 0 0 100%; - margin-block-start: var(--sbb-spacing-fixed-1x); -} - -.transportation-number__direction-text { - display: block; -} - -.transportation-number--first-level .transportation-number__direction-text { - @include sbb.ellipsis; -} - -.transportation-number--visually-hidden { - @include sbb.screen-reader-only; -} - -svg { - height: var(--transportation-number-element-height); - - .transportation-number__product-icon & { - width: var(--product-icon-width); - } - - .transportation-number__means-of-transport & { - width: var(--transportation-number-element-height); - height: var(--transportation-number-element-height); - } -} diff --git a/src/components/timetable-transportation-number/timetable-transportation-number.spec.ts b/src/components/timetable-transportation-number/timetable-transportation-number.spec.ts deleted file mode 100644 index 615e9894ff..0000000000 --- a/src/components/timetable-transportation-number/timetable-transportation-number.spec.ts +++ /dev/null @@ -1,61 +0,0 @@ -import { expect, fixture } from '@open-wc/testing'; -import { html } from 'lit/static-html.js'; - -import sampleData from './timetable-transportation-number.sample-data'; -import './timetable-transportation-number'; - -const config = JSON.stringify(sampleData.bus); - -describe('sbb-timetable-transportation-number', () => { - it('renders', async () => { - const root = await fixture( - html``, - ); - - expect(root).dom.to.be.equal( - ` - - - - `, - ); - expect(root).shadowDom.to.be.equal( - ` -

- - - Bus B 20 Richtung Bern Wankdorf, Bahnhof - -

- `, - ); - }); -}); diff --git a/src/components/timetable-transportation-number/timetable-transportation-number.stories.ts b/src/components/timetable-transportation-number/timetable-transportation-number.stories.ts deleted file mode 100644 index 4ec613d299..0000000000 --- a/src/components/timetable-transportation-number/timetable-transportation-number.stories.ts +++ /dev/null @@ -1,129 +0,0 @@ -import type { InputType } from '@storybook/types'; -import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components'; -import type { TemplateResult } from 'lit'; -import { html } from 'lit'; - -import readme from './readme.md?raw'; -import sampleData from './timetable-transportation-number.sample-data'; -import './timetable-transportation-number'; - -const Template = (args: Args): TemplateResult => html` - -`; - -const appearance: InputType = { - control: { - type: 'select', - }, - options: ['first-level', 'second-level'], -}; - -const config: Args = { - table: { - disable: false, - }, -}; - -const defaultArgTypes: ArgTypes = { - appearance, - config, -}; - -const defaultArgs: Args = { - appearance: appearance.options[0], -}; - -export const BusFirstLevel: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { - ...defaultArgs, - config: sampleData.bus, - }, -}; - -export const BusSecondLevel: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { - ...defaultArgs, - appearance: appearance.options[1], - config: sampleData.bus, - }, -}; - -export const CableCarFirstLevel: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { - ...defaultArgs, - config: sampleData.cableCar, - }, -}; - -export const CableCarSecondLevel: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { - ...defaultArgs, - appearance: appearance.options[1], - config: sampleData.cableCar, - }, -}; - -export const TrainFirstLevel: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { - ...defaultArgs, - config: sampleData.train, - }, -}; - -export const TrainSecondLevel: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { - ...defaultArgs, - appearance: appearance.options[1], - config: sampleData.train, - }, -}; - -export const TramFirstLevel: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { - ...defaultArgs, - config: sampleData.tram, - }, -}; - -export const TramSecondLevel: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { - ...defaultArgs, - appearance: appearance.options[1], - config: sampleData.tram, - }, -}; - -const meta: Meta = { - decorators: [(story) => html`${story()}`], - parameters: { - backgrounds: { - disable: true, - }, - docs: { - extractComponentDescription: () => readme, - }, - chromatic: { disableSnapshot: true }, - }, - title: 'internals/sbb-timetable-transportation-number', -}; - -export default meta; diff --git a/src/components/timetable-transportation-number/timetable-transportation-number.ts b/src/components/timetable-transportation-number/timetable-transportation-number.ts deleted file mode 100644 index 1f706b507a..0000000000 --- a/src/components/timetable-transportation-number/timetable-transportation-number.ts +++ /dev/null @@ -1,78 +0,0 @@ -import type { CSSResultGroup, TemplateResult } from 'lit'; -import { html, LitElement } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; - -import type { SbbTimetableAppearance } from '../core/interfaces'; -import icons from '../core/timetable/icons.json'; - -import style from './timetable-transportation-number.scss?lit&inline'; - -/** - * Used in `sbb-timetable-row`, it displays information about the transport. - */ -@customElement('sbb-timetable-transportation-number') -export class SbbTimetableTransportationNumberElement extends LitElement { - public static override styles: CSSResultGroup = style; - - /** - * Set the desired appearance of - * the component. - */ - @property() - public appearance?: SbbTimetableAppearance = 'first-level'; - - /** - * Stringified JSON which defines most of the - * content of the component. Please check the - * individual stories to get an idea of the - * structure. - */ - @property() public config!: string; - - protected override render(): TemplateResult { - const config = JSON.parse(this.config); - const a11yLabel = `${config.meansOfTransport.text} ${config.product.text} ${config.marketingName} ${config.direction}`; - - const appearanceClasses = ` transportation-number--${this.appearance}`; - - /** - * role='text' is used here to allow assistive - * technologies to digest all text content at - * once and skip the interpretation of the icons. - * Even though it is not in the official list, - * https://bit.ly/3oqOtei the role seems to work - * fine and seems to be in use as well: - * https://bit.ly/3n5tuhH - */ - - return html` -

- - ${a11yLabel} -

- `; - } -} - -declare global { - interface HTMLElementTagNameMap { - // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-timetable-transportation-number': SbbTimetableTransportationNumberElement; - } -} diff --git a/src/components/timetable-transportation-time/readme.md b/src/components/timetable-transportation-time/readme.md deleted file mode 100644 index 5e2019a268..0000000000 --- a/src/components/timetable-transportation-time/readme.md +++ /dev/null @@ -1,11 +0,0 @@ -!! Please note that this component is not intended for direct use. It will get used within sbb-timetable. It is listed -here to show the various configuration options to component developers. !! - - - -## Properties - -| Name | Attribute | Privacy | Type | Default | Description | -| ------------ | ------------ | ------- | ------------------------------------- | --------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -| `appearance` | `appearance` | public | `SbbTimetableAppearance \| undefined` | `'first-level'` | Set the desired appearance of the component. | -| `config` | `config` | public | `string` | | Stringified JSON which defines most of the content of the component. Please check the individual stories to get an idea of the structure. | diff --git a/src/components/timetable-transportation-time/timetable-transportation-time.e2e.ts b/src/components/timetable-transportation-time/timetable-transportation-time.e2e.ts deleted file mode 100644 index 9e04bf68d0..0000000000 --- a/src/components/timetable-transportation-time/timetable-transportation-time.e2e.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { assert, fixture } from '@open-wc/testing'; -import { html } from 'lit/static-html.js'; - -import { SbbTimetableTransportationTimeElement } from './timetable-transportation-time'; -import sampleData from './timetable-transportation-time.sample-data'; - -const config = JSON.stringify(sampleData[0]); - -describe('sbb-timetable-transportation-time', () => { - let element: SbbTimetableTransportationTimeElement; - - it('renders', async () => { - element = await fixture( - html``, - ); - assert.instanceOf(element, SbbTimetableTransportationTimeElement); - }); -}); diff --git a/src/components/timetable-transportation-time/timetable-transportation-time.sample-data.js b/src/components/timetable-transportation-time/timetable-transportation-time.sample-data.js deleted file mode 100644 index b3785e1047..0000000000 --- a/src/components/timetable-transportation-time/timetable-transportation-time.sample-data.js +++ /dev/null @@ -1,18 +0,0 @@ -export default [ - { - time: '15:14', - type: 'departure', - }, - { - time: '15:34', - type: 'arrival', - }, - { - time: '16:14', - type: 'departure', - }, - { - time: '16:34', - type: 'arrival', - }, -]; diff --git a/src/components/timetable-transportation-time/timetable-transportation-time.scss b/src/components/timetable-transportation-time/timetable-transportation-time.scss deleted file mode 100644 index 2f5ff36634..0000000000 --- a/src/components/timetable-transportation-time/timetable-transportation-time.scss +++ /dev/null @@ -1,47 +0,0 @@ -@use '../core/styles' as sbb; - -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; - -:host { - display: block; - - --transportation-min-width: #{sbb.px-to-rem-build(38)}; - - @include sbb.mq($from: medium) { - --transportation-min-width: #{sbb.px-to-rem-build(43)}; - } -} - -.time { - min-width: var(--transportation-min-width); - margin: 0; - font-variant-numeric: tabular-nums; -} - -.time--departure { - @include sbb.text-s--bold; -} - -.time--first-level.time--departure { - margin-inline-end: var(--sbb-spacing-fixed-3x); -} - -.time--first-level.time--arrival { - @include sbb.text-s--bold; - - margin-inline-start: var(--sbb-spacing-fixed-3x); -} - -.time-second-level.time--departure { - @include sbb.text-s--bold; -} - -.time--second-level.time--arrival { - @include sbb.text-s--regular; -} - -.time__text--visually-hidden { - @include sbb.screen-reader-only; -} diff --git a/src/components/timetable-transportation-time/timetable-transportation-time.spec.ts b/src/components/timetable-transportation-time/timetable-transportation-time.spec.ts deleted file mode 100644 index 4edd6e8665..0000000000 --- a/src/components/timetable-transportation-time/timetable-transportation-time.spec.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { expect, fixture } from '@open-wc/testing'; -import { html } from 'lit/static-html.js'; - -import sampleData from './timetable-transportation-time.sample-data'; -import './timetable-transportation-time'; - -const config = JSON.stringify(sampleData[0]); - -describe('sbb-timetable-transportation-time', () => { - it('renders', async () => { - const root = await fixture( - html``, - ); - - expect(root).dom.to.be.equal( - ` - - - - `, - ); - expect(root).shadowDom.to.be.equal( - ` -

- - - Departure 15:14. - -

- `, - ); - }); -}); diff --git a/src/components/timetable-transportation-time/timetable-transportation-time.stories.ts b/src/components/timetable-transportation-time/timetable-transportation-time.stories.ts deleted file mode 100644 index e9a0fb27f6..0000000000 --- a/src/components/timetable-transportation-time/timetable-transportation-time.stories.ts +++ /dev/null @@ -1,88 +0,0 @@ -import type { InputType } from '@storybook/types'; -import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components'; -import type { TemplateResult } from 'lit'; -import { html } from 'lit'; - -import readme from './readme.md?raw'; -import sampleData from './timetable-transportation-time.sample-data'; -import './timetable-transportation-time'; - -const Template = (args: Args): TemplateResult => html` - -`; - -const appearance: InputType = { - control: { - type: 'select', - }, - options: ['first-level', 'second-level'], -}; - -const config: Args = { - table: { - disable: false, - }, -}; - -const defaultArgTypes: ArgTypes = { - appearance, - config, -}; - -const defaultArgs: Args = { - appearance: appearance.options[0], -}; - -export const SbbTimetableDepartureTimeFirstLevel: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { - ...defaultArgs, - config: sampleData[0], - }, -}; - -export const SbbTimetableArrivalTimeFirstLevel: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { - ...defaultArgs, - config: sampleData[1], - }, -}; - -export const SbbTimetableDepartureTimeSecondLevel: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { - ...defaultArgs, - appearance: appearance.options[1], - config: sampleData[2], - }, -}; - -export const SbbTimetableArrivalTimeSecondLevel: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { - ...defaultArgs, - appearance: appearance.options[1], - config: sampleData[3], - }, -}; - -const meta: Meta = { - decorators: [(story) => html`${story()}`], - parameters: { - docs: { - extractComponentDescription: () => readme, - }, - chromatic: { disableSnapshot: true }, - }, - title: 'internals/sbb-timetable-transportation-time', -}; - -export default meta; diff --git a/src/components/timetable-transportation-time/timetable-transportation-time.ts b/src/components/timetable-transportation-time/timetable-transportation-time.ts deleted file mode 100644 index 0d6fabae7c..0000000000 --- a/src/components/timetable-transportation-time/timetable-transportation-time.ts +++ /dev/null @@ -1,60 +0,0 @@ -import type { CSSResultGroup, TemplateResult } from 'lit'; -import { html, LitElement } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; - -import { LanguageController } from '../core/common-behaviors'; -import { i18nArrival, i18nDeparture } from '../core/i18n'; -import type { SbbTimetableAppearance } from '../core/interfaces'; - -import style from './timetable-transportation-time.scss?lit&inline'; - -/** - * Used in `sbb-timetable-row`, it displays departure/arrival time. - */ -@customElement('sbb-timetable-transportation-time') -export class SbbTimetableTransportationTimeElement extends LitElement { - public static override styles: CSSResultGroup = style; - - /** - * Set the desired appearance of - * the component. - */ - @property() - public appearance?: SbbTimetableAppearance = 'first-level'; - - /** - * Stringified JSON which defines most of the - * content of the component. Please check the - * individual stories to get an idea of the - * structure. - */ - @property() public config!: string; - - private _language = new LanguageController(this); - - protected override render(): TemplateResult { - const config = JSON.parse(this.config); - - let a11yLabel = `${i18nArrival[this._language.current]} ${config.time}.`; - - if (config.type === 'departure') { - a11yLabel = `${i18nDeparture[this._language.current]} ${config.time}.`; - } - - const appearanceClasses = ` time--${this.appearance} time--${config.type}`; - - return html` -

- - ${a11yLabel} -

- `; - } -} - -declare global { - interface HTMLElementTagNameMap { - // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-timetable-transportation-time': SbbTimetableTransportationTimeElement; - } -} diff --git a/src/components/timetable-travel-hints/readme.md b/src/components/timetable-travel-hints/readme.md deleted file mode 100644 index 63740f2fd1..0000000000 --- a/src/components/timetable-travel-hints/readme.md +++ /dev/null @@ -1,11 +0,0 @@ -!! Please note that this component is not intended for direct use. It will get used within sbb-timetable. It is listed -here to show the various configuration options to component developers. !! - - - -## Properties - -| Name | Attribute | Privacy | Type | Default | Description | -| ------------ | ------------ | ------- | -------------------------------------------------------- | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | -| `appearance` | `appearance` | public | `'first-level-list' \| 'second-level-list' \| undefined` | `'first-level-list'` | Set the desired appearance of the component. | -| `config` | `config` | public | `string` | | Stringified JSON which defines most of the content of the component. Please check the individual stories to get an idea of the structure. | diff --git a/src/components/timetable-travel-hints/timetable-travel-hints.e2e.ts b/src/components/timetable-travel-hints/timetable-travel-hints.e2e.ts deleted file mode 100644 index efd48e3213..0000000000 --- a/src/components/timetable-travel-hints/timetable-travel-hints.e2e.ts +++ /dev/null @@ -1,18 +0,0 @@ -import { assert, fixture } from '@open-wc/testing'; -import { html } from 'lit/static-html.js'; - -import { SbbTimetableTravelHintsElement } from './timetable-travel-hints'; -import sampleData from './timetable-travel-hints.sample-data'; - -const config = JSON.stringify(sampleData[0]); - -describe('sbb-timetable-travel-hints', () => { - let element: SbbTimetableTravelHintsElement; - - it('renders', async () => { - element = await fixture( - html``, - ); - assert.instanceOf(element, SbbTimetableTravelHintsElement); - }); -}); diff --git a/src/components/timetable-travel-hints/timetable-travel-hints.sample-data.js b/src/components/timetable-travel-hints/timetable-travel-hints.sample-data.js deleted file mode 100644 index a082619354..0000000000 --- a/src/components/timetable-travel-hints/timetable-travel-hints.sample-data.js +++ /dev/null @@ -1,21 +0,0 @@ -export default [ - { - travelHintsItems: [ - { - icon: 'sa-sb', - text: 'Description what sa-sb means...', - }, - { - icon: 'sa-rr', - text: 'Description what sa-rr means...', - }, - { - icon: 'sa-zm', - text: 'Description what sa-zm means...', - }, - ], - }, - { - travelHintsItems: [], - }, -]; diff --git a/src/components/timetable-travel-hints/timetable-travel-hints.scss b/src/components/timetable-travel-hints/timetable-travel-hints.scss deleted file mode 100644 index d6972961f3..0000000000 --- a/src/components/timetable-travel-hints/timetable-travel-hints.scss +++ /dev/null @@ -1,247 +0,0 @@ -@use '../core/styles' as sbb; - -// Default component properties, defined for :host. Properties which can not -// travel the shadow boundary are defined through this mixin -@include sbb.host-component-properties; - -:host { - --travel-hint-icon-height: #{sbb.px-to-rem-build(12)}; - --travel-hint-icon-scaling-factor: 0.75; - - @include sbb.mq($from: medium) { - --travel-hint-icon-height: #{sbb.px-to-rem-build(16)}; - --travel-hint-icon-scaling-factor: 1; - } -} - -.travel-hints__list { - @include sbb.list-reset; - - display: flex; - gap: var(--sbb-spacing-fixed-1x); -} - -.travel-hints--first-level-list .travel-hints__list { - justify-content: flex-end; -} - -.travel-hints__icon { - pointer-events: all; - cursor: help; -} - -.travel-hints__icon, -.travel-hints__icon svg { - height: var(--travel-hint-icon-height); -} - -.travel-hints__icon svg { - float: inline-start; -} - -.travel-hints__text--visually-hidden { - @include sbb.screen-reader-only; -} - -@mixin width-with-scaling-factor($width) { - width: calc(var(--travel-hint-icon-scaling-factor) * #{sbb.px-to-rem-build($width)}); -} - -// This might look like a terribly complicated solution but was unfortunately the most efficient and -// flexible way to achieve the desired visual outcome under the current setup with image sprites and -// the way the browsers interpret them. - -// All these icons have the same height but a variable width without any white room around them to -// great an absolutely equal spacing. - -.travel-hints__icon--sa-mi svg { - @include width-with-scaling-factor(8); -} - -.travel-hints__icon--sa-r svg { - @include width-with-scaling-factor(9); -} - -.travel-hints__icon--sa-s svg { - @include width-with-scaling-factor(10); -} - -.travel-hints__icon--sa-1, -.travel-hints__icon--sa-2, -.travel-hints__icon--sa-p { - svg { - @include width-with-scaling-factor(11); - } -} - -.travel-hints__icon--sa-y, -.travel-hints__icon--sa-z { - svg { - @include width-with-scaling-factor(12); - } -} - -.travel-hints__icon--sa-gl, -.travel-hints__icon--sa-gn, -.travel-hints__icon--sa-rr { - svg { - @include width-with-scaling-factor(13); - } -} - -.travel-hints__icon--sa-wr svg { - @include width-with-scaling-factor(14); -} - -.travel-hints__icon--sa-x svg { - @include width-with-scaling-factor(15); -} - -.travel-hints__icon--sa-pa svg { - @include width-with-scaling-factor(16); -} - -.travel-hints__icon--sa-vi svg { - @include width-with-scaling-factor(17); -} - -.travel-hints__icon--sa-fl svg { - @include width-with-scaling-factor(18); -} - -.travel-hints__icon--sa-b, -.travel-hints__icon--sa-je, -.travel-hints__icon--sa-pl, -.travel-hints__icon--sa-sl, -.travel-hints__icon--sa-vl, -.travel-hints__icon--sa-vr { - svg { - @include width-with-scaling-factor(19); - } -} - -.travel-hints__icon--sa-bl, -.travel-hints__icon--sa-fs, -.travel-hints__icon--sa-le, -.travel-hints__icon--sa-tf, -.travel-hints__icon--sa-ts { - svg { - @include width-with-scaling-factor(20); - } -} - -.travel-hints__icon--sa-cc, -.travel-hints__icon--sa-ep, -.travel-hints__icon--sa-fa, -.travel-hints__icon--sa-fz, -.travel-hints__icon--sa-lc, -.travel-hints__icon--sa-nj, -.travel-hints__icon--sa-sb, -.travel-hints__icon--sa-tc, -.travel-hints__icon--sa-tt, -.travel-hints__icon--sa-wl { - svg { - @include width-with-scaling-factor(21); - } -} - -.travel-hints__icon--sa-bc, -.travel-hints__icon--sa-pr, -.travel-hints__icon--sa-rb, -.travel-hints__icon--sa-re, -.travel-hints__icon--sa-sc, -.travel-hints__icon--sa-sz, -.travel-hints__icon--sa-tq, -.travel-hints__icon--sa-vn, -.travel-hints__icon--sa-vp, -.travel-hints__icon--sa-yb { - svg { - @include width-with-scaling-factor(22); - } -} - -.travel-hints__icon--sa-br, -.travel-hints__icon--sa-bz, -.travel-hints__icon--sa-gp, -.travel-hints__icon--sa-gr, -.travel-hints__icon--sa-gz, -.travel-hints__icon--sa-rc, -.travel-hints__icon--sa-rt, -.travel-hints__icon--sa-rz, -.travel-hints__icon--sa-sd, -.travel-hints__icon--sa-sn, -.travel-hints__icon--sa-tk, -.travel-hints__icon--sa-ws, -.travel-hints__icon--sa-yt { - svg { - @include width-with-scaling-factor(23); - } -} - -.travel-hints__icon--sa-nf, -.travel-hints__icon--sa-sh, -.travel-hints__icon--sa-sv { - svg { - @include width-with-scaling-factor(24); - } -} - -.travel-hints__icon--sa-bk, -.travel-hints__icon--sa-bv, -.travel-hints__icon--sa-rq, -.travel-hints__icon--sa-om, -.travel-hints__icon--sa-ry, -.travel-hints__icon--sa-vx, -.travel-hints__icon--sa-xp, -.travel-hints__icon--sa-xr { - svg { - @include width-with-scaling-factor(25); - } -} - -.travel-hints__icon--sa-dz, -.travel-hints__icon--sa-uk, -.travel-hints__icon--sa-xt { - svg { - @include width-with-scaling-factor(26); - } -} - -.travel-hints__icon--sa-hk, -.travel-hints__icon--sa-hn { - svg { - @include width-with-scaling-factor(27); - } -} - -.travel-hints__icon--sa-mc, -.travel-hints__icon--sa-mp, -.travel-hints__icon--sa-sm { - svg { - @include width-with-scaling-factor(28); - } -} - -.travel-hints__icon--sa-fw, -.travel-hints__icon--sa-ym, -.travel-hints__icon--sa-zm { - svg { - @include width-with-scaling-factor(29); - } -} - -.travel-hints__icon--sa-wv { - @include width-with-scaling-factor(31); -} - -.travel-hints__icon--sa-vb { - @include width-with-scaling-factor(32); -} - -.travel-hints__icon--sa-kw { - @include width-with-scaling-factor(33); -} - -.travel-hints__icon--sa-aw { - @include width-with-scaling-factor(34); -} diff --git a/src/components/timetable-travel-hints/timetable-travel-hints.spec.ts b/src/components/timetable-travel-hints/timetable-travel-hints.spec.ts deleted file mode 100644 index dee30f639f..0000000000 --- a/src/components/timetable-travel-hints/timetable-travel-hints.spec.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { expect, fixture } from '@open-wc/testing'; -import { html } from 'lit/static-html.js'; - -import sampleData from './timetable-travel-hints.sample-data'; -import './timetable-travel-hints'; - -const config = JSON.stringify(sampleData[0]); - -describe('sbb-timetable-travel-hints', () => { - it('renders', async () => { - const root = await fixture( - html``, - ); - - expect(root).dom.to.be.equal( - ` - - - - `, - ); - expect(root).shadowDom.to.be.equal( - ` -
-
    -
  • - - - - - -
    • -
  • - - - - - -
    • -
  • - - - - - -
    • -
-
- `, - ); - }); -}); diff --git a/src/components/timetable-travel-hints/timetable-travel-hints.stories.ts b/src/components/timetable-travel-hints/timetable-travel-hints.stories.ts deleted file mode 100644 index 144555c158..0000000000 --- a/src/components/timetable-travel-hints/timetable-travel-hints.stories.ts +++ /dev/null @@ -1,66 +0,0 @@ -import type { InputType } from '@storybook/types'; -import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components'; -import type { TemplateResult } from 'lit'; -import { html } from 'lit'; - -import readme from './readme.md?raw'; -import sampleData from './timetable-travel-hints.sample-data'; -import './timetable-travel-hints'; - -const Template = (args: Args): TemplateResult => html` - -`; - -const appearance: InputType = { - control: { - type: 'select', - }, - options: ['first-level-list', 'second-level-list'], -}; - -const config: Args = { - table: { - disable: false, - }, -}; - -const gridCellRole: InputType = { - control: { - type: 'boolean', - }, -}; - -const defaultArgTypes: ArgTypes = { - appearance, - config, - gridCellRole, -}; - -const defaultArgs: Args = { - appearance: appearance.options[0], -}; - -export const TravelHintsList: StoryObj = { - render: Template, - argTypes: defaultArgTypes, - args: { - ...defaultArgs, - config: sampleData[0], - }, -}; - -const meta: Meta = { - decorators: [(story) => html`
${story()}
`], - parameters: { - docs: { - extractComponentDescription: () => readme, - }, - chromatic: { disableSnapshot: true }, - }, - title: 'internals/sbb-timetable-travel-hints', -}; - -export default meta; diff --git a/src/components/timetable-travel-hints/timetable-travel-hints.ts b/src/components/timetable-travel-hints/timetable-travel-hints.ts deleted file mode 100644 index 980587329b..0000000000 --- a/src/components/timetable-travel-hints/timetable-travel-hints.ts +++ /dev/null @@ -1,70 +0,0 @@ -import type { CSSResultGroup, TemplateResult } from 'lit'; -import { html, LitElement } from 'lit'; -import { customElement, property } from 'lit/decorators.js'; - -import { LanguageController } from '../core/common-behaviors'; -import { setAttribute } from '../core/dom'; -import { i18nNone } from '../core/i18n'; -import icons from '../core/timetable/icons.json'; - -import style from './timetable-travel-hints.scss?lit&inline'; - -/** - * Used in `sbb-timetable-row`, it displays hints icon. - */ -@customElement('sbb-timetable-travel-hints') -export class SbbTimetableTravelHintsElement extends LitElement { - public static override styles: CSSResultGroup = style; - - /** Set the desired appearance of the component. */ - @property() - public appearance?: 'first-level-list' | 'second-level-list' = 'first-level-list'; // FIXME refactor with SbbTimetableAppearance ? - - /** - * Stringified JSON which defines most of the - * content of the component. Please check the - * individual stories to get an idea of the - * structure. - */ - @property() public config!: string; - - private _language = new LanguageController(this); - - protected override render(): TemplateResult { - const { travelHintsItems } = JSON.parse(this.config); - - const a11yLabel = i18nNone[this._language.current]; - const appearanceClass = ` travel-hints--${this.appearance}`; - - setAttribute(this, 'data-visually-empty', travelHintsItems.length === 0); - - return html` -
- ${travelHintsItems.length > 0 - ? html`
    - ${travelHintsItems.map( - (travelHintItem) => html` -
  • - -
    • - `, - )} -
` - : html`${a11yLabel}`} -
- `; - } -} - -declare global { - interface HTMLElementTagNameMap { - // eslint-disable-next-line @typescript-eslint/naming-convention - 'sbb-timetable-travel-hints': SbbTimetableTravelHintsElement; - } -}