diff --git a/src/components/_index.scss b/src/components/_index.scss index 72fc7dbdbd..29dfc8eba8 100644 --- a/src/components/_index.scss +++ b/src/components/_index.scss @@ -1,2 +1,2 @@ @forward 'core/styles' hide development-style, host-component-properties, link-base, - link-focus-visible, link-hover, link-active, link-inline-base, link-inline-consolidation; + link-focus-visible, link-hover, link-active, link-consolidation; diff --git a/src/components/action-group/__snapshots__/action-group.spec.snap.js b/src/components/action-group/__snapshots__/action-group.spec.snap.js index febe259b1d..75f984031f 100644 --- a/src/components/action-group/__snapshots__/action-group.spec.snap.js +++ b/src/components/action-group/__snapshots__/action-group.spec.snap.js @@ -19,18 +19,18 @@ snapshots["sbb-action-group renders renders - Dom"] = > Button - Link - + `; /* end snapshot sbb-action-group renders renders - Dom */ diff --git a/src/components/action-group/action-group.e2e.ts b/src/components/action-group/action-group.e2e.ts index f704b89d0e..135caf5937 100644 --- a/src/components/action-group/action-group.e2e.ts +++ b/src/components/action-group/action-group.e2e.ts @@ -3,7 +3,7 @@ import { html } from 'lit/static-html.js'; import type { SbbButtonElement } from '../button'; import { waitForLitRender } from '../core/testing'; -import type { SbbLinkElement } from '../link'; +import type { SbbBlockLinkElement } from '../link'; import { SbbActionGroupElement } from './action-group'; @@ -14,13 +14,13 @@ describe('sbb-action-group', () => { element = await fixture(html` Button - Link - + `); }); @@ -50,17 +50,9 @@ describe('sbb-action-group', () => { element.setAttribute('link-size', 's'); await waitForLitRender(element); const links = Array.from( - document.querySelectorAll('sbb-action-group sbb-link'), - ) as SbbLinkElement[]; + document.querySelectorAll('sbb-action-group sbb-block-link'), + ) as SbbBlockLinkElement[]; expect(links.every((l) => l.size === 's')).to.be.ok; }); - - it('should apply variant block to sbb-link', async () => { - await waitForLitRender(element); - const links = Array.from( - document.querySelectorAll('sbb-action-group sbb-link'), - ) as SbbLinkElement[]; - expect(links.every((l) => l.variant === 'block')).to.be.ok; - }); }); }); diff --git a/src/components/action-group/action-group.scss b/src/components/action-group/action-group.scss index 21fa46683b..de866b487e 100644 --- a/src/components/action-group/action-group.scss +++ b/src/components/action-group/action-group.scss @@ -75,6 +75,6 @@ $horizontal-orientations: ( } } -::slotted(:is(sbb-link, sbb-link-button)) { +::slotted(:is(sbb-block-link, sbb-block-link-button, sbb-block-link-static)) { white-space: nowrap; } diff --git a/src/components/action-group/action-group.spec.ts b/src/components/action-group/action-group.spec.ts index 9d10b77e92..1d52af115a 100644 --- a/src/components/action-group/action-group.spec.ts +++ b/src/components/action-group/action-group.spec.ts @@ -8,7 +8,7 @@ import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; import type { SbbActionGroupElement } from './action-group'; import './action-group'; import '../button'; -import '../link'; +import '../link/block-link'; describe('sbb-action-group', () => { describe('renders', () => { @@ -18,12 +18,12 @@ describe('sbb-action-group', () => { element = await fixture(html` Button - Link - + `); await waitForLitRender(element); @@ -50,12 +50,12 @@ describe('sbb-action-group', () => { const root = (await fixture(html` Button - Link - + `)) as SbbActionGroupElement; expect(assertButtons(root, (b) => b.size === 'l')).to.be.ok; @@ -65,46 +65,31 @@ describe('sbb-action-group', () => { const root = (await fixture(html` Button - Link - + `)) as SbbActionGroupElement; expect(assertButtons(root, (b) => b.size === 'm')).to.be.ok; }); - it('should apply block variant to sbb-link', async () => { - const root = (await fixture(html` - - Button - - Link - - - `)) as SbbActionGroupElement; - expect(Array.from(root.querySelectorAll('sbb-link')).every((l) => l.variant === 'block')).to - .be.ok; - }); - it('should sync link-size property with sbb-link', async () => { const root = (await fixture(html` Button - Link - + `)) as SbbActionGroupElement; - expect(Array.from(root.querySelectorAll('sbb-link')).every((l) => l.size === 's')).to.be.ok; + expect(Array.from(root.querySelectorAll('sbb-block-link')).every((l) => l.size === 's')).to.be + .ok; }); }); }); diff --git a/src/components/action-group/action-group.stories.ts b/src/components/action-group/action-group.stories.ts index bd111d53d7..3b11bf0f52 100644 --- a/src/components/action-group/action-group.stories.ts +++ b/src/components/action-group/action-group.stories.ts @@ -9,7 +9,7 @@ import { sbbSpread } from '../core/dom'; import readme from './readme.md?raw'; import './action-group'; -import '../link'; +import '../link/block-link'; import '../button'; const secondaryButtonTemplate = (alignSelf?: string): TemplateResult => html` @@ -21,13 +21,13 @@ const buttonTemplate = (alignSelf?: string): TemplateResult => html` `; const linkTemplate = (alignSelf?: string): TemplateResult => html` - Link - + `; const TemplateTwoElements = ( diff --git a/src/components/action-group/action-group.ts b/src/components/action-group/action-group.ts index a5aa634058..94c745d8d5 100644 --- a/src/components/action-group/action-group.ts +++ b/src/components/action-group/action-group.ts @@ -4,14 +4,19 @@ import { customElement, property } from 'lit/decorators.js'; import type { SbbButtonElement, SbbButtonLinkElement, SbbButtonSize } from '../button'; import type { SbbHorizontalFrom, SbbOrientation } from '../core/interfaces'; -import type { SbbLinkButtonElement, SbbLinkElement, SbbLinkSize } from '../link'; +import type { + SbbBlockLinkButtonElement, + SbbBlockLinkElement, + SbbBlockLinkStaticElement, + SbbLinkSize, +} from '../link'; import style from './action-group.scss?lit&inline'; /** - * It can be used as a container for one or more action element, like `sbb-button` or `sbb-link`. + * It can be used as a container for one or more action element, like `sbb-button` or `sbb-block-link`. * - * @slot - Use the unnamed slot to add `sbb-link` or `sbb-button` elements to the `sbb-action-group`. + * @slot - Use the unnamed slot to add `sbb-block-link` or `sbb-button` elements to the `sbb-action-group`. */ @customElement('sbb-action-group') export class SbbActionGroupElement extends LitElement { @@ -43,8 +48,8 @@ export class SbbActionGroupElement extends LitElement { public buttonSize: SbbButtonSize = 'l'; /** - * Size of the nested sbb-link instances. This will overwrite the size attribute of nested - * sbb-link instances. + * Size of the nested sbb-block-link instances. This will overwrite the size attribute of nested + * sbb-block-link instances. */ @property({ attribute: 'link-size', reflect: true }) public linkSize: SbbLinkSize = 'm'; @@ -65,10 +70,9 @@ export class SbbActionGroupElement extends LitElement { } private _syncLinks(): void { - this.querySelectorAll?.( - 'sbb-link, sbb-link-button', - ).forEach((link: SbbLinkElement | SbbLinkButtonElement) => { - link.variant = 'block'; + this.querySelectorAll?.< + SbbBlockLinkElement | SbbBlockLinkButtonElement | SbbBlockLinkStaticElement + >('sbb-block-link, sbb-block-link-button, sbb-block-link-static').forEach((link) => { link.size = this.linkSize; }); } diff --git a/src/components/action-group/readme.md b/src/components/action-group/readme.md index 9c4c6314e4..04bcb50b01 100644 --- a/src/components/action-group/readme.md +++ b/src/components/action-group/readme.md @@ -1,5 +1,5 @@ The `sbb-action-group` component is a generic content container which can contain up to three action items -([sbb-button](/docs/components-sbb-button--docs) or [sbb-link](/docs/components-sbb-link--docs) or other HTML elements) +([sbb-button](/docs/components-sbb-button--docs) or [sbb-block-link](/docs/components-sbb-link-sbb-block-link--docs) or other HTML elements) in various [allocations](#allocations). ## Style @@ -16,30 +16,30 @@ indicate the minimum breakpoint from which the orientation changes to `horizonta Action 1 Action 2 - Action 3 - + ``` ### Button-size and link-size -The two props `button-size` and `link-size` can be used to override, respectively, the size of the inner `sbb-button` and `sbb-link`. -Default values are `l` for `sbb-button` and `m` for `sbb-link`. +The two props `button-size` and `link-size` can be used to override, respectively, the size of the inner `sbb-button` and `sbb-block-link`. +Default values are `l` for `sbb-button` and `m` for `sbb-block-link`. ```html Action 1 - Action 3 - + ``` @@ -51,8 +51,8 @@ possible values are `start`, `center`, `stretch` and `end`. It is also possible to set the `align-self` attribute on action items in order to move them in the opposite direction to the group; possible values are `start`, `center` or `end`. -**NOTE**: The `sbb-action-group` will automatically set variant `block` and will sync the `linkSize` -property with nested `sbb-link` and the `buttonSize` property with the nested `sbb-button` +**NOTE**: The `sbb-action-group` will only accept `block-link` and will sync the `linkSize` +property with nested `sbb-block-link` and the `buttonSize` property with the nested `sbb-button` instances. ```html @@ -74,12 +74,12 @@ and we consider a template like the following one (possibly removing the link fo Button 1 Button 2 - Link - + ``` @@ -120,16 +120,16 @@ The values for `align-group` and `align-self` for the various allocations are as ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------------- | ----------------- | ------- | ------------------------------------------- | -------------- | --------------------------------------------------------------------------------------------------------------- | -| `alignGroup` | `align-group` | public | `'start' \| 'center' \| 'stretch' \| 'end'` | `'start'` | Set the slotted `` children's alignment. | -| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom` | `'medium'` | Overrides the behaviour of `orientation` property. | -| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Indicates the orientation of the components inside the ``. | -| `buttonSize` | `button-size` | public | `SbbButtonSize` | `'l'` | Size of the nested sbb-button instances. This will overwrite the size attribute of nested sbb-button instances. | -| `linkSize` | `link-size` | public | `SbbLinkSize` | `'m'` | Size of the nested sbb-link instances. This will overwrite the size attribute of nested sbb-link instances. | +| Name | Attribute | Privacy | Type | Default | Description | +| ---------------- | ----------------- | ------- | ------------------------------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------- | +| `alignGroup` | `align-group` | public | `'start' \| 'center' \| 'stretch' \| 'end'` | `'start'` | Set the slotted `` children's alignment. | +| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom` | `'medium'` | Overrides the behaviour of `orientation` property. | +| `orientation` | `orientation` | public | `SbbOrientation` | `'horizontal'` | Indicates the orientation of the components inside the ``. | +| `buttonSize` | `button-size` | public | `SbbButtonSize` | `'l'` | Size of the nested sbb-button instances. This will overwrite the size attribute of nested sbb-button instances. | +| `linkSize` | `link-size` | public | `SbbLinkSize` | `'m'` | Size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances. | ## Slots -| Name | Description | -| ---- | ------------------------------------------------------------------------------------------ | -| | Use the unnamed slot to add `sbb-link` or `sbb-button` elements to the `sbb-action-group`. | +| Name | Description | +| ---- | ------------------------------------------------------------------------------------------------ | +| | Use the unnamed slot to add `sbb-block-link` or `sbb-button` elements to the `sbb-action-group`. | diff --git a/src/components/alert/alert/__snapshots__/alert.spec.snap.js b/src/components/alert/alert/__snapshots__/alert.spec.snap.js index 0222af0b92..6cd7c74fd0 100644 --- a/src/components/alert/alert/__snapshots__/alert.spec.snap.js +++ b/src/components/alert/alert/__snapshots__/alert.spec.snap.js @@ -105,7 +105,6 @@ snapshots["sbb-alert should render customized properties"] = size="s" tabindex="0" target="_blank" - variant="inline" > Show much more diff --git a/src/components/alert/alert/alert.ts b/src/components/alert/alert/alert.ts index 99c213f194..18610f48d1 100644 --- a/src/components/alert/alert/alert.ts +++ b/src/components/alert/alert/alert.ts @@ -4,7 +4,6 @@ import { customElement, property } from 'lit/decorators.js'; import { LanguageController, - type LinkProperties, type LinkTargetType, SbbIconNameMixin, } from '../../core/common-behaviors'; @@ -33,7 +32,7 @@ export type SbbAlertState = 'closed' | 'opening' | 'opened'; * @event {CustomEvent} dismissalRequested - Emits when dismissal of an alert was requested. */ @customElement('sbb-alert') -export class SbbAlertElement extends SbbIconNameMixin(LitElement) implements LinkProperties { +export class SbbAlertElement extends SbbIconNameMixin(LitElement) { public static override styles: CSSResultGroup = style; public static readonly events = { willOpen: 'willOpen', @@ -154,7 +153,7 @@ export class SbbAlertElement extends SbbIconNameMixin(LitElement) implements Lin

${this.href - ? html` + ? html` ${this.linkContent ? this.linkContent : i18nFindOutMore[this._language.current]} ` : nothing} diff --git a/src/components/breadcrumb/breadcrumb/__snapshots__/breadcrumb.spec.snap.js b/src/components/breadcrumb/breadcrumb/__snapshots__/breadcrumb.spec.snap.js index 8138bd5850..872cb8a097 100644 --- a/src/components/breadcrumb/breadcrumb/__snapshots__/breadcrumb.spec.snap.js +++ b/src/components/breadcrumb/breadcrumb/__snapshots__/breadcrumb.spec.snap.js @@ -3,7 +3,7 @@ export const snapshots = {}; snapshots["sbb-breadcrumb renders with text"] = ` { `); expect(root).shadowDom.to.be.equal(` - + @@ -53,7 +53,7 @@ describe('sbb-button-link', () => { `); expect(root).shadowDom.to.be.equal(` - + diff --git a/src/components/button/button-static/button-static.spec.ts b/src/components/button/button-static/button-static.spec.ts index 11754c38a9..635f381ad3 100644 --- a/src/components/button/button-static/button-static.spec.ts +++ b/src/components/button/button-static/button-static.spec.ts @@ -28,7 +28,7 @@ describe('sbb-button-static', () => { `); expect(root).shadowDom.to.be.equal(` - + @@ -55,7 +55,7 @@ describe('sbb-button-static', () => { `); expect(root).shadowDom.to.be.equal(` - + diff --git a/src/components/button/button/button.spec.ts b/src/components/button/button/button.spec.ts index 5d7bb3fb27..db5eb2d6bc 100644 --- a/src/components/button/button/button.spec.ts +++ b/src/components/button/button/button.spec.ts @@ -43,7 +43,7 @@ describe('sbb-button', () => { `); expect(root).shadowDom.to.be.equal(` - + @@ -70,7 +70,7 @@ describe('sbb-button', () => { `); expect(root).shadowDom.to.be.equal(` - + diff --git a/src/components/button/button/readme.md b/src/components/button/button/readme.md index 9fd7f536be..a7c993c508 100644 --- a/src/components/button/button/readme.md +++ b/src/components/button/button/readme.md @@ -29,7 +29,7 @@ accepting its associated properties (`type`, `name`, `value` and `form`). If the component is placed inside an `sbb-form-field`, it renders with the correct styling. ```html - Buy tickets + Buy tickets ``` ## Style @@ -77,7 +77,7 @@ Use the accessibility properties in case of an icon-only button to describe the | `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | | `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | | `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `type` | `type` | public | `ButtonType \| undefined` | | The type attribute to use for the button. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | | `name` | `name` | public | `string \| undefined` | | The name attribute to use for the button. | | `value` | `value` | public | `string \| undefined` | | The value attribute to use for the button. | | `form` | `form` | public | `string \| undefined` | | The
element to associate the button with. | diff --git a/src/components/card/card-button/card-button.e2e.ts b/src/components/card/card-button/card-button.e2e.ts index ff71aa4dc1..0bb220a89f 100644 --- a/src/components/card/card-button/card-button.e2e.ts +++ b/src/components/card/card-button/card-button.e2e.ts @@ -30,7 +30,7 @@ describe('sbb-card-button', () => { `); expect(cardAction).shadowDom.to.be.equal(` - + diff --git a/src/components/card/card-button/readme.md b/src/components/card/card-button/readme.md index d52af8ee81..55e573ab5d 100644 --- a/src/components/card/card-button/readme.md +++ b/src/components/card/card-button/readme.md @@ -22,13 +22,13 @@ as it is used for search engines and screen-reader users. ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| -------- | --------- | ------- | ------------------------- | ------- | ------------------------------------------------ | -| `active` | `active` | public | `boolean` | `false` | Whether the card is active. | -| `type` | `type` | public | `ButtonType \| undefined` | | The type attribute to use for the button. | -| `name` | `name` | public | `string \| undefined` | | The name attribute to use for the button. | -| `value` | `value` | public | `string \| undefined` | | The value attribute to use for the button. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | +| Name | Attribute | Privacy | Type | Default | Description | +| -------- | --------- | ------- | --------------------- | ---------- | ------------------------------------------------ | +| `active` | `active` | public | `boolean` | `false` | Whether the card is active. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | +| `name` | `name` | public | `string \| undefined` | | The name attribute to use for the button. | +| `value` | `value` | public | `string \| undefined` | | The value attribute to use for the button. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | ## Slots diff --git a/src/components/card/card-link/card-link.e2e.ts b/src/components/card/card-link/card-link.e2e.ts index edf33588e8..f194f0e3ad 100644 --- a/src/components/card/card-link/card-link.e2e.ts +++ b/src/components/card/card-link/card-link.e2e.ts @@ -35,7 +35,7 @@ describe('sbb-card-link', () => { `); expect(cardAction).shadowDom.to.be.equal(` - + diff --git a/src/components/container/sticky-bar/sticky-bar.stories.ts b/src/components/container/sticky-bar/sticky-bar.stories.ts index 18047b00c7..c9c93944af 100644 --- a/src/components/container/sticky-bar/sticky-bar.stories.ts +++ b/src/components/container/sticky-bar/sticky-bar.stories.ts @@ -73,14 +73,14 @@ const actionGroup = (): TemplateResult => html` horizontal-from="medium" style="width:100%;" > - Link - + Cancel Confirm diff --git a/src/components/core/common-behaviors/action-base-element.ts b/src/components/core/common-behaviors/action-base-element.ts index 92fa87cf59..ea16bfbc79 100644 --- a/src/components/core/common-behaviors/action-base-element.ts +++ b/src/components/core/common-behaviors/action-base-element.ts @@ -2,7 +2,59 @@ import { html, LitElement, type TemplateResult } from 'lit'; import { getDocumentWritingMode, getLocalName } from '../dom'; +/** + * Whenever an element can be disabled it has disabled property + * or formDisabled if it's a form element. + * Because we can't use types here directly we created this helper type. + */ +type MaybeDisabled = { + disabled?: boolean; + formDisabled?: boolean; +}; + export abstract class SbbActionBaseElement extends LitElement { + protected setupBaseEventHandlers(): void { + this.addEventListener( + 'click', + (event) => { + const maybeDisabled = this as MaybeDisabled; + if (maybeDisabled.disabled || maybeDisabled.formDisabled) { + event.preventDefault(); + event.stopImmediatePropagation(); + } + }, + // capture is necessary here, as this event handler needs to be executed before any other + // in order to stop immediate propagation in the disabled case. + { capture: true }, + ); + this.addEventListener( + 'keypress', + (event: KeyboardEvent): void => { + if (event.key === 'Enter' || event.key === '\n') { + this.dispatchClickEvent(event); + } + }, + { passive: true }, + ); + } + + protected dispatchClickEvent(event: KeyboardEvent): void { + const { altKey, ctrlKey, metaKey, shiftKey } = event; + (event.target as Element).dispatchEvent( + new PointerEvent('click', { + bubbles: true, + cancelable: true, + composed: true, + pointerId: -1, + pointerType: '', + altKey, + ctrlKey, + metaKey, + shiftKey, + }), + ); + } + /** Override this method to render the component template. */ protected renderTemplate(): TemplateResult { throw new Error('Implementation needed!'); @@ -16,7 +68,9 @@ export abstract class SbbActionBaseElement extends LitElement { /** Default render method for button-like components. */ protected override render(): TemplateResult { return html` - ${this.renderTemplate()} + + ${this.renderTemplate()} + `; } } diff --git a/src/components/core/common-behaviors/action-dispatch-click.ts b/src/components/core/common-behaviors/action-dispatch-click.ts deleted file mode 100644 index 5dba27f8dd..0000000000 --- a/src/components/core/common-behaviors/action-dispatch-click.ts +++ /dev/null @@ -1,32 +0,0 @@ -/** - * Dispatch a `click` event. - * @param event The origin event. - */ -export const dispatchClickEvent = (event: KeyboardEvent): void => { - const { altKey, ctrlKey, metaKey, shiftKey } = event; - (event.target as Element).dispatchEvent( - new PointerEvent('click', { - bubbles: true, - cancelable: true, - composed: true, - pointerId: -1, - pointerType: '', - altKey, - ctrlKey, - metaKey, - shiftKey, - }), - ); -}; - -/** - * Dispatches a 'click' PointerEvent if the original keyboard event is a 'Enter' press. - * As verified with the native button, when 'Enter' is pressed, a 'click' event is dispatched - * after the 'keypress' event. - * @param event The origin event. - */ -export const dispatchClickEventWhenEnterKeypress = (event: KeyboardEvent): void => { - if (event.key === 'Enter' || event.key === '\n') { - dispatchClickEvent(event); - } -}; diff --git a/src/components/core/common-behaviors/button-base-element.e2e.ts b/src/components/core/common-behaviors/button-base-element.e2e.ts index 29ca77659c..a9dd6c7ef0 100644 --- a/src/components/core/common-behaviors/button-base-element.e2e.ts +++ b/src/components/core/common-behaviors/button-base-element.e2e.ts @@ -7,6 +7,8 @@ import { EventSpy, waitForLitRender } from '../testing'; import { SbbButtonBaseElement } from './button-base-element'; class GenericButton extends SbbButtonBaseElement { + public disabled = false; + protected override renderTemplate(): TemplateResult { return html`Button`; } @@ -42,8 +44,8 @@ describe('SbbButtonBaseElement', () => { element = await fixture(html` `); }); - it('no click dispatch if aria-disabled', async () => { - element.setAttribute('aria-disabled', 'true'); + it('no click dispatch if disabled', async () => { + element.disabled = true; await waitForLitRender(element); const clickSpy = new EventSpy('click'); element.click(); diff --git a/src/components/core/common-behaviors/button-base-element.ts b/src/components/core/common-behaviors/button-base-element.ts index 0bf533cee7..301bb0bfa6 100644 --- a/src/components/core/common-behaviors/button-base-element.ts +++ b/src/components/core/common-behaviors/button-base-element.ts @@ -1,28 +1,17 @@ import { isServer } from 'lit'; import { property } from 'lit/decorators.js'; +import { isEventPrevented } from '../eventing'; + import { SbbActionBaseElement } from './action-base-element'; -import { dispatchClickEvent, dispatchClickEventWhenEnterKeypress } from './action-dispatch-click'; /** Enumeration for type attribute in `); @@ -33,12 +33,12 @@ describe('sbb-skiplink-list', () => { expect(listItemLinks[0]).to.have.style('height', '0px'); expect(listItemLinks[0]).to.have.style('overflow', 'hidden'); - const firstLink: SbbLinkElement = element.querySelector('sbb-link:nth-child(1)')!; + const firstLink: SbbBlockLinkElement = element.querySelector('sbb-block-link:nth-child(1)')!; firstLink.focus(); expect(listItemLinks[0]).not.to.have.style('height', '0px'); expect(listItemLinks[0]).to.have.style('overflow', 'visible'); - const secondLink: SbbLinkElement = element.querySelector('sbb-link:nth-child(2)')!; + const secondLink: SbbBlockLinkElement = element.querySelector('sbb-block-link:nth-child(2)')!; secondLink.focus(); expect(listItemLinks[0]).to.have.style('height', '0px'); expect(listItemLinks[0]).to.have.style('overflow', 'hidden'); @@ -50,11 +50,11 @@ describe('sbb-skiplink-list', () => { element = await fixture(html``); element.innerHTML = ` - Link 1 - Link 2`; + Link 1 + Link 2`; await waitForLitRender(element); - expect(element.querySelector('sbb-link')).to.have.attribute('slot'); + expect(element.querySelector('sbb-block-link')).to.have.attribute('slot'); }); }); diff --git a/src/components/skiplink-list/skiplink-list.scss b/src/components/skiplink-list/skiplink-list.scss index 4630470f80..13a88223d7 100644 --- a/src/components/skiplink-list/skiplink-list.scss +++ b/src/components/skiplink-list/skiplink-list.scss @@ -40,7 +40,7 @@ } } -::slotted(:is(sbb-link, sbb-link-button)) { +::slotted(:is(sbb-link, sbb-link-button, sbb-block-link, sbb-block-link-button)) { --sbb-focus-outline-color: transparent; --sbb-link-padding: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xxs); } diff --git a/src/components/skiplink-list/skiplink-list.spec.ts b/src/components/skiplink-list/skiplink-list.spec.ts index 28be72fe39..d936d5a70d 100644 --- a/src/components/skiplink-list/skiplink-list.spec.ts +++ b/src/components/skiplink-list/skiplink-list.spec.ts @@ -6,7 +6,7 @@ import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; import type { SbbSkiplinkListElement } from './skiplink-list'; import './skiplink-list'; -import '../link'; +import '../link/block-link'; describe('sbb-skiplink-list', () => { describe('renders', () => { @@ -15,9 +15,9 @@ describe('sbb-skiplink-list', () => { beforeEach(async () => { element = await fixture(html` - Link 1 - Link 2 - Link 3 + Link 1 + Link 2 + Link 3 `); await waitForLitRender(element); @@ -38,9 +38,9 @@ describe('sbb-skiplink-list', () => { beforeEach(async () => { element = await fixture(html` - Link 1 - Link 2 - Link 3 + Link 1 + Link 2 + Link 3 `); await waitForLitRender(element); diff --git a/src/components/skiplink-list/skiplink-list.stories.ts b/src/components/skiplink-list/skiplink-list.stories.ts index b64c4d6ed3..3d072d9375 100644 --- a/src/components/skiplink-list/skiplink-list.stories.ts +++ b/src/components/skiplink-list/skiplink-list.stories.ts @@ -12,7 +12,7 @@ import { sbbSpread } from '../core/dom'; import readme from './readme.md?raw'; import './skiplink-list'; -import '../link'; +import '../link/block-link'; const titleContent: InputType = { control: { @@ -116,8 +116,8 @@ const Template = ({ ...args }: Args): TemplateResult => html` - ${labelFirstLink} - ${labelSecondLink} + ${labelFirstLink} + ${labelSecondLink} `; diff --git a/src/components/skiplink-list/skiplink-list.ts b/src/components/skiplink-list/skiplink-list.ts index d8affb581f..71dd3b6efd 100644 --- a/src/components/skiplink-list/skiplink-list.ts +++ b/src/components/skiplink-list/skiplink-list.ts @@ -13,7 +13,7 @@ import { SbbNamedSlotListElementMixin, type WithListChildren, } from '../core/common-behaviors'; -import type { SbbLinkElement, SbbLinkButtonElement } from '../link'; +import type { SbbBlockLinkElement, SbbBlockLinkButtonElement } from '../link'; import type { SbbTitleLevel } from '../title'; import style from './skiplink-list.scss?lit&inline'; @@ -21,17 +21,17 @@ import style from './skiplink-list.scss?lit&inline'; import '../title'; /** - * It displays a list of `sbb-link`/`sbb-link-button` which are visible only when focused. + * It displays a list of `sbb-block-link`/`sbb-block-link-button` which are visible only when focused. * - * @slot - Use the unnamed slot to add `sbb-link`/`sbb-link-button` elements to the `sbb-skiplink-list`. + * @slot - Use the unnamed slot to add `sbb-block-link`/`sbb-block-link-button` elements to the `sbb-skiplink-list`. */ @customElement('sbb-skiplink-list') export class SbbSkiplinkListElement extends SbbNamedSlotListElementMixin< - SbbLinkElement | SbbLinkButtonElement, + SbbBlockLinkElement | SbbBlockLinkButtonElement, typeof LitElement >(LitElement) { public static override styles: CSSResultGroup = style; - protected override readonly listChildTagNames = ['SBB-LINK', 'SBB-LINK-BUTTON']; + protected override readonly listChildTagNames = ['SBB-BLOCK-LINK', 'SBB-BLOCK-LINK-BUTTON']; /** The title text we want to place before the list. */ @property({ attribute: 'title-content', reflect: true }) public titleContent?: string; diff --git a/src/components/tag/tag/__snapshots__/tag.spec.snap.js b/src/components/tag/tag/__snapshots__/tag.spec.snap.js index ba8c4b9c13..25135e6be2 100644 --- a/src/components/tag/tag/__snapshots__/tag.spec.snap.js +++ b/src/components/tag/tag/__snapshots__/tag.spec.snap.js @@ -2,7 +2,7 @@ export const snapshots = {}; snapshots["sbb-tag renders unchecked"] = -` +` @@ -20,7 +20,7 @@ snapshots["sbb-tag renders unchecked"] = /* end snapshot sbb-tag renders unchecked */ snapshots["sbb-tag renders checked"] = -` +` @@ -38,7 +38,7 @@ snapshots["sbb-tag renders checked"] = /* end snapshot sbb-tag renders checked */ snapshots["sbb-tag renders disabled with icon and amount"] = -` +` +` diff --git a/src/components/tag/tag/readme.md b/src/components/tag/tag/readme.md index 60384db4b7..ab813b6f18 100644 --- a/src/components/tag/tag/readme.md +++ b/src/components/tag/tag/readme.md @@ -47,16 +47,16 @@ The state is reflected via `aria-pressed` attribute. ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------- | ----------- | ------- | ------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------- | -| `amount` | `amount` | public | `string \| undefined` | | Amount displayed inside the tag. | -| `checked` | `checked` | public | `boolean` | `false` | Whether the tag is checked. | -| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | -| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | -| `type` | `type` | public | `ButtonType \| undefined` | | The type attribute to use for the button. | -| `name` | `name` | public | `string \| undefined` | | The name attribute to use for the button. | -| `value` | `value` | public | `string \| undefined` | | The value attribute to use for the button. | -| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | +| Name | Attribute | Privacy | Type | Default | Description | +| ---------- | ----------- | ------- | --------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------- | +| `amount` | `amount` | public | `string \| undefined` | | Amount displayed inside the tag. | +| `checked` | `checked` | public | `boolean` | `false` | Whether the tag is checked. | +| `iconName` | `icon-name` | public | `string \| undefined` | | The icon name we want to use, choose from the small icon variants from the ui-icons category from here https://icons.app.sbb.ch. | +| `disabled` | `disabled` | public | `boolean` | `false` | Whether the component is disabled. | +| `type` | `type` | public | `SbbButtonType` | `'button'` | The type attribute to use for the button. | +| `name` | `name` | public | `string \| undefined` | | The name attribute to use for the button. | +| `value` | `value` | public | `string \| undefined` | | The value attribute to use for the button. | +| `form` | `form` | public | `string \| undefined` | | The element to associate the button with. | ## Events diff --git a/src/components/teaser-hero/__snapshots__/teaser-hero.spec.snap.js b/src/components/teaser-hero/__snapshots__/teaser-hero.spec.snap.js index d01932cb13..220eaec8ce 100644 --- a/src/components/teaser-hero/__snapshots__/teaser-hero.spec.snap.js +++ b/src/components/teaser-hero/__snapshots__/teaser-hero.spec.snap.js @@ -3,7 +3,7 @@ export const snapshots = {}; snapshots["sbb-teaser-hero should render with slots"] = `

- - + @@ -53,7 +52,7 @@ snapshots["sbb-teaser-hero should render all properties Dom"] = snapshots["sbb-teaser-hero should render all properties ShadowDom"] = `

- Find out more - + { let element: SbbTeaserHeroElement; diff --git a/src/components/teaser-hero/teaser-hero.spec.ts b/src/components/teaser-hero/teaser-hero.spec.ts index 999930cc29..21473b73bc 100644 --- a/src/components/teaser-hero/teaser-hero.spec.ts +++ b/src/components/teaser-hero/teaser-hero.spec.ts @@ -6,7 +6,6 @@ import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; import type { SbbTeaserHeroElement } from './teaser-hero'; import './teaser-hero'; -import '../link'; import '../image'; describe('sbb-teaser-hero', () => { diff --git a/src/components/teaser-hero/teaser-hero.ts b/src/components/teaser-hero/teaser-hero.ts index 64a52404d3..c8dc511355 100644 --- a/src/components/teaser-hero/teaser-hero.ts +++ b/src/components/teaser-hero/teaser-hero.ts @@ -3,7 +3,7 @@ import { customElement, property } from 'lit/decorators.js'; import { html } from 'lit/static-html.js'; import { SbbLinkBaseElement } from '../core/common-behaviors'; -import '../link'; +import '../link/block-link-static'; import '../image'; import style from './teaser-hero.scss?lit&inline'; @@ -35,7 +35,7 @@ export class SbbTeaserHeroElement extends SbbLinkBaseElement {

${this.href - ? html` ${this.linkContent} - ` + ` : nothing} diff --git a/src/components/teaser-paid/__snapshots__/teaser-paid.spec.snap.js b/src/components/teaser-paid/__snapshots__/teaser-paid.spec.snap.js index 666e31ad62..47a9a57eae 100644 --- a/src/components/teaser-paid/__snapshots__/teaser-paid.spec.snap.js +++ b/src/components/teaser-paid/__snapshots__/teaser-paid.spec.snap.js @@ -17,7 +17,7 @@ snapshots["sbb-teaser-paid Dom"] = snapshots["sbb-teaser-paid ShadowDom"] = ` - Link action + Link action ``` diff --git a/src/components/toast/toast.e2e.ts b/src/components/toast/toast.e2e.ts index 948991eb6e..9c8aca6050 100644 --- a/src/components/toast/toast.e2e.ts +++ b/src/components/toast/toast.e2e.ts @@ -6,7 +6,7 @@ import { EventSpy, waitForCondition, waitForLitRender } from '../core/testing'; import { SbbToastElement } from './toast'; -import '../link'; +import '../link/link-button'; describe('sbb-toast', () => { let element: SbbToastElement; @@ -130,12 +130,11 @@ describe('sbb-toast', () => { it('forces state on link actions', async () => { element = await fixture(html` - + `); - const actionLink = element.querySelector('sbb-link'); + const actionLink = element.querySelector('sbb-link-button'); - expect(actionLink).to.have.attribute('variant', 'inline'); expect(actionLink).to.have.attribute('negative'); }); diff --git a/src/components/toast/toast.stories.ts b/src/components/toast/toast.stories.ts index 772629aa7b..be3817e93c 100644 --- a/src/components/toast/toast.stories.ts +++ b/src/components/toast/toast.stories.ts @@ -19,7 +19,7 @@ import { sbbSpread } from '../core/dom'; import readme from './readme.md?raw'; import { SbbToastElement } from './toast'; -import '../link'; +import '../link/link'; // Story interaction executed after the story renders const playStory = async ({ canvasElement }: StoryContext): Promise => { diff --git a/src/components/toast/toast.ts b/src/components/toast/toast.ts index ce0a945adb..f8eca91a1e 100644 --- a/src/components/toast/toast.ts +++ b/src/components/toast/toast.ts @@ -12,7 +12,7 @@ import { isFirefox, isValidAttribute, setAttribute } from '../core/dom'; import { composedPathHasAttribute, EventEmitter, ConnectedAbortController } from '../core/eventing'; import { i18nCloseAlert } from '../core/i18n'; import type { SbbOverlayState } from '../core/overlay'; -import type { SbbLinkButtonElement, SbbLinkElement } from '../link'; +import type { SbbLinkButtonElement, SbbLinkElement, SbbLinkStaticElement } from '../link'; import '../button'; import '../icon'; @@ -193,12 +193,11 @@ export class SbbToastElement extends SbbIconNameMixin(LitElement) { btn.size = 'm'; }); - // Force the visual state on slotted links - const links: (SbbLinkElement | SbbLinkButtonElement)[] = slotNodes.filter( - (el) => el.nodeName === 'SBB-LINK' || el.nodeName === 'SBB-LINK-BUTTON', - ) as (SbbLinkElement | SbbLinkButtonElement)[]; - links.forEach((link: SbbLinkElement | SbbLinkButtonElement) => { - link.variant = 'inline'; + // Force negative on inline slotted links + const links = slotNodes.filter((el) => + ['SBB-LINK', 'SBB-LINK-BUTTON', 'SBB-LINK-STATIC'].includes(el.nodeName), + ) as (SbbLinkElement | SbbLinkButtonElement | SbbLinkStaticElement)[]; + links.forEach((link) => { link.negative = true; }); } diff --git a/src/storybook/pages/home/home--logged-in.stories.ts b/src/storybook/pages/home/home--logged-in.stories.ts index 67d9a41e26..bc64a1ba3e 100644 --- a/src/storybook/pages/home/home--logged-in.stories.ts +++ b/src/storybook/pages/home/home--logged-in.stories.ts @@ -213,7 +213,7 @@ const Template = (args: Args): TemplateResult => html` orientation="vertical" horizontal-from="medium" > - html` sbb-dialog-close > Link - + Cancel Button diff --git a/src/storybook/pages/home/home.common.ts b/src/storybook/pages/home/home.common.ts index a08e2a1860..f99d7fa6c5 100644 --- a/src/storybook/pages/home/home.common.ts +++ b/src/storybook/pages/home/home.common.ts @@ -28,8 +28,8 @@ import '../../../components/title'; export const skiplinkList = (): TemplateResult => html` - Skip to content - Go to help page + Skip to content + Go to help page `; @@ -243,36 +243,36 @@ export const footer = (args: Args): TemplateResult => html`
- Refunds - - + Lost property office - - + Complaints - - + Praise - - + Report property damage - + html`
- Jobs & careers - - + Rail traffic information - - + SBB News - - + SBB Community - - + Company - +
@@ -338,36 +338,36 @@ export const footer = (args: Args): TemplateResult => html` > - Refunds - - + Lost property office - - + Complaints - - + Praise - - + Report property damage - + `; diff --git a/src/storybook/styles/layout/layout.stories.ts b/src/storybook/styles/layout/layout.stories.ts index 2f64558d7a..086122f6fd 100644 --- a/src/storybook/styles/layout/layout.stories.ts +++ b/src/storybook/styles/layout/layout.stories.ts @@ -26,10 +26,7 @@ const Warning = (): TemplateResult => html` This example only intends to visualize the grid and is not meant to be used as is.
- + See docs on css grid . diff --git a/src/storybook/styles/typography/typo-internal.scss b/src/storybook/styles/typography/typo-internal.scss index 2e3d85606a..bf202f43d1 100644 --- a/src/storybook/styles/typography/typo-internal.scss +++ b/src/storybook/styles/typography/typo-internal.scss @@ -1,9 +1,9 @@ @use '../../../components/core/styles/index' as sbb; -.sbb-link-inline { - @include sbb.link-inline; +.sbb-link { + @include sbb.link; } -.sbb-link-inline-negative { - @include sbb.link-inline-negative; +.sbb-link-negative { + @include sbb.link-negative; } diff --git a/src/storybook/styles/typography/typography.stories.ts b/src/storybook/styles/typography/typography.stories.ts index 0e1e90d062..e12733404a 100644 --- a/src/storybook/styles/typography/typography.stories.ts +++ b/src/storybook/styles/typography/typography.stories.ts @@ -43,20 +43,20 @@ const LegendSubSupTemplate = (): TemplateResult => html` `; -const LinkInlineTemplate = (): TemplateResult => html` +const LinkTemplate = (): TemplateResult => html`

- A text with a link inside the text. It should adapt to - the text but have an underline and hover colors. + A text with a link inside the text. It should adapt to the text + but have an underline and hover colors.

`; -const LinkInlineNegativeTemplate = (): TemplateResult => html` +const LinkNegativeTemplate = (): TemplateResult => html`

- A text with a negative link inside the text. It - should adapt to the text but have an underline and hover colors. + A text with a negative link inside the text. It should + adapt to the text but have an underline and hover colors.

`; @@ -69,15 +69,15 @@ export const TextBold: StoryObj = { export const LegendSubSup: StoryObj = { render: LegendSubSupTemplate, }; -export const LinkInline: StoryObj = { - render: LinkInlineTemplate, +export const Link: StoryObj = { + render: LinkTemplate, }; -export const LinkInlineNegative: StoryObj = { - render: LinkInlineNegativeTemplate, +export const LinkNegative: StoryObj = { + render: LinkNegativeTemplate, }; const meta: Meta = { - // excludeStories: ['LinkInline', 'LinkInlineNegative'], + excludeStories: ['Link', 'LinkNegative'], decorators: [(story) => html`
${story()}
`], parameters: { docs: {