diff --git a/src/elements/alert/alert-group/__snapshots__/alert-group.snapshot.spec.snap.js b/src/elements/alert/alert-group/__snapshots__/alert-group.snapshot.spec.snap.js index 6dff5f3b84..aa506dc2e5 100644 --- a/src/elements/alert/alert-group/__snapshots__/alert-group.snapshot.spec.snap.js +++ b/src/elements/alert/alert-group/__snapshots__/alert-group.snapshot.spec.snap.js @@ -10,7 +10,6 @@ snapshots["sbb-alert-group renders DOM"] = @@ -44,7 +43,6 @@ snapshots["sbb-alert-group renders with slotted DOM"] = @@ -84,11 +82,7 @@ snapshots["sbb-alert-group renders A11y tree Chrome"] = }, { "role": "text", - "name": "The rail traffic between Allaman and Morges is interrupted. All trains are cancelled. " - }, - { - "role": "link", - "name": "Find out more" + "name": "The rail traffic between Allaman and Morges is interrupted. All trains are cancelled." }, { "role": "button", @@ -120,11 +114,6 @@ snapshots["sbb-alert-group renders A11y tree Firefox"] = "role": "text leaf", "name": "The rail traffic between Allaman and Morges is interrupted. All trains are cancelled. " }, - { - "role": "link", - "name": "Find out more", - "value": "https://www.sbb.ch/" - }, { "role": "button", "name": "Close message" diff --git a/src/elements/alert/alert-group/alert-group.snapshot.spec.ts b/src/elements/alert/alert-group/alert-group.snapshot.spec.ts index 764fdb5261..4fe7885214 100644 --- a/src/elements/alert/alert-group/alert-group.snapshot.spec.ts +++ b/src/elements/alert/alert-group/alert-group.snapshot.spec.ts @@ -4,6 +4,7 @@ import { html } from 'lit/static-html.js'; import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js'; import type { SbbAlertGroupElement } from './alert-group.js'; + import './alert-group.js'; import '../alert.js'; @@ -14,10 +15,7 @@ describe(`sbb-alert-group`, () => { beforeEach(async () => { root = await fixture(html` - + The rail traffic between Allaman and Morges is interrupted. All trains are cancelled. @@ -42,11 +40,7 @@ describe(`sbb-alert-group`, () => { root = await fixture(html` Interruptions - + The rail traffic between Allaman and Morges is interrupted. All trains are cancelled. diff --git a/src/elements/alert/alert-group/alert-group.spec.ts b/src/elements/alert/alert-group/alert-group.spec.ts index 3724335046..59297a1430 100644 --- a/src/elements/alert/alert-group/alert-group.spec.ts +++ b/src/elements/alert/alert-group/alert-group.spec.ts @@ -24,8 +24,8 @@ describe(`sbb-alert-group`, () => { accessibility-title="${accessibilityTitle}" accessibility-title-level="${accessibilityTitleLevel}" > - First - Second + First + Second `); const emptySpy = new EventSpy(SbbAlertGroupElement.events.empty); diff --git a/src/elements/alert/alert-group/alert-group.ssr.spec.ts b/src/elements/alert/alert-group/alert-group.ssr.spec.ts index 53a20bc9e6..e96874a987 100644 --- a/src/elements/alert/alert-group/alert-group.ssr.spec.ts +++ b/src/elements/alert/alert-group/alert-group.ssr.spec.ts @@ -12,8 +12,8 @@ describe(`sbb-alert-group ssr`, () => { root = await ssrHydratedFixture( html` - First - Second + First + Second `, { modules: ['./alert-group.js', '../alert.js'] }, diff --git a/src/elements/alert/alert-group/alert-group.stories.ts b/src/elements/alert/alert-group/alert-group.stories.ts index 4796396f2f..cd32596d93 100644 --- a/src/elements/alert/alert-group/alert-group.stories.ts +++ b/src/elements/alert/alert-group/alert-group.stories.ts @@ -10,19 +10,18 @@ import { SbbAlertElement } from '../alert.js'; import { SbbAlertGroupElement } from './alert-group.js'; import readme from './readme.md?raw'; +import '../../link/link.js'; + const Template = (args: Args): TemplateResult => html` - + The rail traffic between Allaman and Morges is interrupted. All trains are cancelled. + Find out more - + Between Berne and Olten from 03.11.2021 to 05.12.2022 each time from 22:30 to 06:00 o'clock construction work will take place. You have to expect changed travel times and changed - connections. + connections. Find out more `; diff --git a/src/elements/alert/alert-group/alert-group.visual.spec.ts b/src/elements/alert/alert-group/alert-group.visual.spec.ts index a7ca29fee1..6620e4f51a 100644 --- a/src/elements/alert/alert-group/alert-group.visual.spec.ts +++ b/src/elements/alert/alert-group/alert-group.visual.spec.ts @@ -9,10 +9,7 @@ import { SbbAlertElement } from '../alert.js'; import './alert-group.js'; describe(`sbb-alert-group`, () => { - const alert = html` + const alert = html` Between Berne and Olten from 03.11.2021 to 05.12.2022 each time from 22:30 to 06:00 o'clock construction work will take place. You have to expect changed travel times and changed connections. diff --git a/src/elements/alert/alert-group/readme.md b/src/elements/alert/alert-group/readme.md index 20e3927962..560d2f3489 100644 --- a/src/elements/alert/alert-group/readme.md +++ b/src/elements/alert/alert-group/readme.md @@ -3,17 +3,15 @@ The `sbb-alert-group` manages the accessibility of one or multiple ```html - + The rail traffic between Allaman and Morges is interrupted. All trains are cancelled. + Find out more - + Between Berne and Olten from 03.11.2021 to 05.12.2022 each time from 22:30 to 06:00 o'clock construction work will take place. You have to expect changed travel times and changed connections. + Find out more ``` diff --git a/src/elements/alert/alert/__snapshots__/alert.snapshot.spec.snap.js b/src/elements/alert/alert/__snapshots__/alert.snapshot.spec.snap.js index 6f81cc6856..f894df87bd 100644 --- a/src/elements/alert/alert/__snapshots__/alert.snapshot.spec.snap.js +++ b/src/elements/alert/alert/__snapshots__/alert.snapshot.spec.snap.js @@ -76,19 +76,25 @@ snapshots["sbb-alert should render default properties Shadow DOM"] = snapshots["sbb-alert should render customized properties DOM"] = ` Alert content + + Find out more + `; /* end snapshot sbb-alert should render customized properties DOM */ @@ -125,20 +131,6 @@ snapshots["sbb-alert should render customized properties Shadow DOM"] =

- - Show much more - { let element: SbbAlertElement; @@ -16,9 +17,11 @@ describe(`sbb-alert`, () => { html`Alert content`, ); }); + it('DOM', async () => { await expect(element).dom.to.be.equalSnapshot(); }); + it('Shadow DOM', async () => { await expect(element).shadowDom.to.be.equalSnapshot(); }); @@ -32,30 +35,25 @@ describe(`sbb-alert`, () => { title-level="2" size="l" icon-name="disruption" - accessibility-label="label" - href="https://www.sbb.ch" - rel="noopener" - target="_blank" - link-content="Show much more" - >Alert content`, + > + Alert content Find out more + `, ); }); + it('DOM', async () => { await expect(element).dom.to.be.equalSnapshot(); }); + it('Shadow DOM', async () => { await expect(element).shadowDom.to.be.equalSnapshot(); }); }); testA11yTreeSnapshot(html` - + Alert content + Find out more `); }); diff --git a/src/elements/alert/alert/alert.stories.ts b/src/elements/alert/alert/alert.stories.ts index 2c7b0892a5..162132edca 100644 --- a/src/elements/alert/alert/alert.stories.ts +++ b/src/elements/alert/alert/alert.stories.ts @@ -9,14 +9,22 @@ import { sbbSpread } from '../../../storybook/helpers/spread.js'; import { SbbAlertElement } from './alert.js'; import readme from './readme.md?raw'; +import '../../link/link.js'; + const Default = ({ 'content-slot-text': contentSlotText, ...args }: Args): TemplateResult => html` ${contentSlotText} `; +const WithLink = ({ 'content-slot-text': contentSlotText, ...args }: Args): TemplateResult => html` + + ${contentSlotText} Find out more + +`; + const DefaultWithOtherContent = (args: Args): TemplateResult => { return html`
- ${Default(args)} + ${WithLink(args)}

Other Content on the page.

`; @@ -72,58 +80,6 @@ const contentSlotText: InputType = { }, }; -const linkContent: InputType = { - control: { - type: 'text', - }, - table: { - category: 'Link', - }, -}; - -const hrefs = ['https://www.sbb.ch', 'https://github.com/sbb-design-systems/lyne-components']; -const href: InputType = { - options: Object.keys(hrefs), - mapping: hrefs, - control: { - type: 'select', - labels: { - 0: 'sbb.ch', - 1: 'GitHub Lyne Components', - }, - }, - table: { - category: 'Link', - }, -}; - -const target: InputType = { - control: { - type: 'text', - }, - table: { - category: 'Link', - }, -}; - -const rel: InputType = { - control: { - type: 'text', - }, - table: { - category: 'Link', - }, -}; - -const accessibilityLabel: InputType = { - control: { - type: 'text', - }, - table: { - category: 'Link', - }, -}; - const animation: InputType = { control: { type: 'inline-radio', @@ -138,11 +94,6 @@ const defaultArgTypes: ArgTypes = { readonly, 'icon-name': iconName, 'content-slot-text': contentSlotText, - 'link-content': linkContent, - href, - target, - rel, - 'accessibility-label': accessibilityLabel, animation: animation, }; @@ -154,11 +105,6 @@ const defaultArgs: Args = { 'icon-name': 'info', 'content-slot-text': "Between Berne and Olten from 03.11.2021 to 05.12.2022 each time from 22:30 to 06:00 o'clock construction work will take place. You have to expect changed travel times and changed connections.", - 'link-content': undefined, - href: href.options![0], - target: undefined, - rel: undefined, - 'accessibility-label': undefined, animation: animation.options![0], }; @@ -169,19 +115,19 @@ export const defaultAlert: StoryObj = { }; export const sizeL: StoryObj = { - render: Default, + render: WithLink, argTypes: defaultArgTypes, args: { ...defaultArgs, size: size.options![1] }, }; export const sizeS: StoryObj = { - render: Default, + render: WithLink, argTypes: defaultArgTypes, args: { ...defaultArgs, size: size.options![2] }, }; export const withoutCloseButton: StoryObj = { - render: Default, + render: WithLink, argTypes: defaultArgTypes, args: { ...defaultArgs, readonly: true }, }; @@ -189,13 +135,7 @@ export const withoutCloseButton: StoryObj = { export const withoutLink: StoryObj = { render: Default, argTypes: defaultArgTypes, - args: { ...defaultArgs, href: undefined }, -}; - -export const withCustomLinkText: StoryObj = { - render: Default, - argTypes: defaultArgTypes, - args: { ...defaultArgs, ['link-content']: 'Follow this link (custom text)' }, + args: { ...defaultArgs }, }; export const iconAndTitleAsSlot: StoryObj = { diff --git a/src/elements/alert/alert/alert.ts b/src/elements/alert/alert/alert.ts index 60aedc7fc4..2efd00cf37 100644 --- a/src/elements/alert/alert/alert.ts +++ b/src/elements/alert/alert/alert.ts @@ -1,11 +1,11 @@ import { type CSSResultGroup, html, nothing, type PropertyValues, type TemplateResult } from 'lit'; import { customElement, property } from 'lit/decorators.js'; -import { type LinkTargetType, SbbOpenCloseBaseElement } from '../../core/base-elements.js'; +import { SbbOpenCloseBaseElement } from '../../core/base-elements.js'; import { SbbLanguageController } from '../../core/controllers.js'; import { forceType } from '../../core/decorators.js'; import { isLean } from '../../core/dom.js'; -import { i18nCloseAlert, i18nFindOutMore } from '../../core/i18n.js'; +import { i18nCloseAlert } from '../../core/i18n.js'; import { SbbIconNameMixin } from '../../icon.js'; import type { SbbTitleLevel } from '../../title.js'; @@ -13,7 +13,6 @@ import style from './alert.scss?lit&inline'; import '../../button/transparent-button.js'; import '../../divider.js'; -import '../../link.js'; import '../../title.js'; /** @@ -69,31 +68,6 @@ class SbbAlertElement extends SbbIconNameMixin(SbbOpenCloseBaseElement) { /** Level of title, will be rendered as heading tag (e.g. h3). Defaults to level 3. */ @property({ attribute: 'title-level' }) public accessor titleLevel: SbbTitleLevel = '3'; - /** Content of the link. */ - @forceType() - @property({ attribute: 'link-content' }) - public accessor linkContent: string = ''; - - /** The href value you want to link to. */ - @forceType() - @property() - public accessor href: string = ''; - - /** Where to display the linked URL. */ - @forceType() - @property() - public accessor target: LinkTargetType | string = ''; - - /** The relationship of the linked URL as space-separated link types. */ - @forceType() - @property() - public accessor rel: string = ''; - - /** This will be forwarded as aria-label to the relevant nested element. */ - @forceType() - @property({ attribute: 'accessibility-label' }) - public accessor accessibilityLabel: string = ''; - /** The enabled animations. */ @property({ reflect: true }) public accessor animation: 'open' | 'close' | 'all' | 'none' = 'all'; @@ -137,6 +111,12 @@ class SbbAlertElement extends SbbIconNameMixin(SbbOpenCloseBaseElement) { setTimeout(() => this.remove()); } + private _syncLinks(): void { + Array.from(this.querySelectorAll?.('sbb-link') ?? []).forEach((link) => + link.toggleAttribute('negative', true), + ); + } + protected override render(): TemplateResult { return html`
@@ -154,19 +134,8 @@ class SbbAlertElement extends SbbIconNameMixin(SbbOpenCloseBaseElement) { ${this.titleContent}

- +

- ${this.href - ? html` - ${this.linkContent ? this.linkContent : i18nFindOutMore[this._language.current]} - ` - : nothing} ${!this.readonly ? html` diff --git a/src/elements/alert/alert/alert.visual.spec.ts b/src/elements/alert/alert/alert.visual.spec.ts index f691ce7c76..6515343cd3 100644 --- a/src/elements/alert/alert/alert.visual.spec.ts +++ b/src/elements/alert/alert/alert.visual.spec.ts @@ -3,6 +3,7 @@ import { html } from 'lit/static-html.js'; import { describeViewports, visualDiffDefault } from '../../core/testing/private.js'; +import '../../link/link.js'; import './alert.js'; describe(`sbb-alert`, () => { @@ -11,7 +12,6 @@ describe(`sbb-alert`, () => { readonly: false, icon: 'info', titleContent: 'Interruption between Berne and Olten', - linkContent: undefined as string | undefined, href: 'https://www.sbb.ch' as string | undefined, }; @@ -24,33 +24,15 @@ describe(`sbb-alert`, () => { readonly, icon, titleContent, - linkContent, href, }: typeof defaultArgs): TemplateResult => html` - ${contentSlotText} + + ${contentSlotText}${href ? html`Find out more` : nothing} + `; describeViewports({ viewports: ['micro', 'small', 'medium'] }, () => { - it( - 'with default args', - visualDiffDefault.with(async (setup) => { - await setup.withFixture( - html`${contentSlotText}`, - ); - }), - ); - - for (const size of ['s', 'l']) { + for (const size of ['s', 'm', 'l']) { it( `size=${size}`, visualDiffDefault.with(async (setup) => { @@ -73,24 +55,15 @@ describe(`sbb-alert`, () => { }), ); - it( - 'with custom link text', - visualDiffDefault.with(async (setup) => { - await setup.withFixture( - alertTemplate({ ...defaultArgs, linkContent: 'Follow this link (custom text)' }), - ); - }), - ); - it( 'icon and title as slot', visualDiffDefault.with(async (setup) => { await setup.withFixture( - html` + html` Slotted title - ${contentSlotText}`, + ${contentSlotText} + `, ); }), ); diff --git a/src/elements/alert/alert/readme.md b/src/elements/alert/alert/readme.md index 6e10f49095..c5a3abca05 100644 --- a/src/elements/alert/alert/readme.md +++ b/src/elements/alert/alert/readme.md @@ -13,6 +13,7 @@ The component can optionally display a `sbb-icon` at the component start using t Between Bern and Olten from 03.11.2021 to 05.12.2022 each time from 22:30 to 06:00 o'clock construction work will take place. You have to expect changed travel times and changed connections. + Find out more @@ -21,23 +22,7 @@ The component can optionally display a `sbb-icon` at the component start using t Between Bern and Olten from 03.11.2021 to 05.12.2022 each time from 22:30 to 06:00 o'clock construction work will take place. You have to expect changed travel times and changed connections. - -``` - -## Interactions - -It's possible to place an action, which by clicking navigates somewhere to display more information. -This can be done using the `linkContent` property combined with the `href` one. -The `target` and `rel` properties are also configurable via the self-named properties. - -```html - - ... + Find out more ``` @@ -78,20 +63,15 @@ As a base rule, opening animations should be active if an alert arrives after th ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| -------------------- | --------------------- | ------- | -------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `accessibilityLabel` | `accessibility-label` | public | `string` | `''` | This will be forwarded as aria-label to the relevant nested element. | -| `animation` | `animation` | public | `'open' \| 'close' \| 'all' \| 'none'` | `'all'` | The enabled animations. | -| `href` | `href` | public | `string` | `''` | The href value you want to link to. | -| `iconName` | `icon-name` | public | `string` | `'info'` | Name of the icon which will be forward to the nested `sbb-icon`. Choose the icons from https://icons.app.sbb.ch. Styling is optimized for icons of type HIM-CUS. | -| `isOpen` | - | public | `boolean` | | Whether the element is open. | -| `linkContent` | `link-content` | public | `string` | `''` | Content of the link. | -| `readonly` | `readonly` | public | `boolean` | `false` | Whether the alert is readonly. In readonly mode, there is no dismiss button offered to the user. | -| `rel` | `rel` | public | `string` | `''` | The relationship of the linked URL as space-separated link types. | -| `size` | `size` | public | `'s' \| 'm' \| 'l'` | `'m' / 's' (lean)` | You can choose between `s`, `m` or `l` size. | -| `target` | `target` | public | `LinkTargetType \| string` | `''` | Where to display the linked URL. | -| `titleContent` | `title-content` | public | `string` | `''` | Content of title. | -| `titleLevel` | `title-level` | public | `SbbTitleLevel` | `'3'` | Level of title, will be rendered as heading tag (e.g. h3). Defaults to level 3. | +| Name | Attribute | Privacy | Type | Default | Description | +| -------------- | --------------- | ------- | -------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `animation` | `animation` | public | `'open' \| 'close' \| 'all' \| 'none'` | `'all'` | The enabled animations. | +| `iconName` | `icon-name` | public | `string` | `'info'` | Name of the icon which will be forward to the nested `sbb-icon`. Choose the icons from https://icons.app.sbb.ch. Styling is optimized for icons of type HIM-CUS. | +| `isOpen` | - | public | `boolean` | | Whether the element is open. | +| `readonly` | `readonly` | public | `boolean` | `false` | Whether the alert is readonly. In readonly mode, there is no dismiss button offered to the user. | +| `size` | `size` | public | `'s' \| 'm' \| 'l'` | `'m' / 's' (lean)` | You can choose between `s`, `m` or `l` size. | +| `titleContent` | `title-content` | public | `string` | `''` | Content of title. | +| `titleLevel` | `title-level` | public | `SbbTitleLevel` | `'3'` | Level of title, will be rendered as heading tag (e.g. h3). Defaults to level 3. | ## Methods diff --git a/src/elements/core/i18n/i18n.ts b/src/elements/core/i18n/i18n.ts index 4b7f47a35d..9772e244cb 100644 --- a/src/elements/core/i18n/i18n.ts +++ b/src/elements/core/i18n/i18n.ts @@ -458,13 +458,6 @@ export const i18nGoBack: Record = { it: 'Vai indietro', }; -export const i18nFindOutMore: Record = { - de: 'Mehr erfahren', - en: 'Find out more', - fr: 'En savoir plus', - it: 'Per saperne di più', -}; - export const i18nToday: Record = { de: 'Heute', en: 'Today', diff --git a/src/elements/lead-container/lead-container.stories.ts b/src/elements/lead-container/lead-container.stories.ts index 15fc4a0f52..b16082d69f 100644 --- a/src/elements/lead-container/lead-container.stories.ts +++ b/src/elements/lead-container/lead-container.stories.ts @@ -4,7 +4,8 @@ import { html, type TemplateResult } from 'lit'; import '../alert.js'; import '../breadcrumb.js'; import '../image.js'; -import '../link/block-link/block-link.js'; +import '../link/block-link.js'; +import '../link/link.js'; import '../notification.js'; import '../title.js'; import './lead-container.js'; @@ -26,12 +27,9 @@ const DefaultTemplate = (): TemplateResult => html` alt="Station of Lucerne from outside" > - + The rail traffic between Allaman and Morges is interrupted. All trains are cancelled. + Find out more diff --git a/src/elements/lead-container/lead-container.visual.spec.ts b/src/elements/lead-container/lead-container.visual.spec.ts index 638ce85452..6d0eff1ea8 100644 --- a/src/elements/lead-container/lead-container.visual.spec.ts +++ b/src/elements/lead-container/lead-container.visual.spec.ts @@ -11,7 +11,8 @@ import { waitForImageReady } from '../core/testing.js'; import '../alert.js'; import '../breadcrumb.js'; import '../image.js'; -import '../link/block-link/block-link.js'; +import '../link/block-link.js'; +import '../link/link.js'; import '../notification.js'; import '../title.js'; import './lead-container.js'; @@ -31,12 +32,9 @@ describe(`sbb-lead-container`, () => { ${image} - + The rail traffic between Allaman and Morges is interrupted. All trains are cancelled. + Find out more diff --git a/src/elements/lead-container/readme.md b/src/elements/lead-container/readme.md index b503ae9976..22291b3951 100644 --- a/src/elements/lead-container/readme.md +++ b/src/elements/lead-container/readme.md @@ -38,12 +38,9 @@ Full example with applied spacings (CSS classes) in content: alt="Station of Lucerne from outside" > - + The rail traffic between Allaman and Morges is interrupted. All trains are cancelled. + Find out more diff --git a/src/storybook/pages/home/home.ts b/src/storybook/pages/home/home.ts index 0a720dd0a3..3f294f7825 100644 --- a/src/storybook/pages/home/home.ts +++ b/src/storybook/pages/home/home.ts @@ -54,17 +54,15 @@ export const homeTemplate = (args: Args): TemplateResult => html`
- + The rail traffic between Allaman and Morges is interrupted. All trains are cancelled. + Find out more - + Between Berne and Olten from 03.11.2021 to 05.12.2022 each time from 22:30 to 06:00 o'clock construction work will take place. You have to expect changed travel times and changed connections. + Find out more