From 3985ccbbbc1eb08350092b03a3c944c8c46c60f7 Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Tue, 20 Feb 2024 15:24:30 +0100 Subject: [PATCH 01/39] refactor(link): split variants --- .../block-link-button.spec.ts | 61 ++++++++++++ .../block-link-button/block-link-button.ts | 22 +++++ .../link/block-link-button/index.ts | 1 + .../link/block-link-button/readme.md | 73 +++++++++++++++ .../block-link-static.spec.ts | 51 ++++++++++ .../block-link-static/block-link-static.ts | 22 +++++ .../link/block-link-static/index.ts | 1 + .../link/block-link-static/readme.md | 62 +++++++++++++ .../link/block-link/block-link.spec.ts | 50 ++++++++++ src/components/link/block-link/block-link.ts | 22 +++++ src/components/link/block-link/index.ts | 1 + src/components/link/block-link/readme.md | 72 +++++++++++++++ .../link/common/block-link-common.ts | 45 +++++++++ src/components/link/common/block-link.scss | 47 ++++++++++ src/components/link/common/index.ts | 2 + .../link/common/inline-link-common.ts | 26 ++++++ src/components/link/common/inline-link.scss | 22 +++++ .../link/common/link-common-stories.ts | 11 --- src/components/link/common/link-common.ts | 28 +----- src/components/link/common/link.scss | 60 ++---------- src/components/link/index.ts | 3 + .../link/link-button/link-button.spec.ts | 92 +------------------ .../link/link-button/link-button.stories.ts | 21 ++++- .../link/link-button/link-button.ts | 4 +- .../link/link-static/link-static.spec.ts | 85 +---------------- .../link/link-static/link-static.stories.ts | 21 ++++- .../link/link-static/link-static.ts | 4 +- src/components/link/link/link.spec.ts | 51 +--------- src/components/link/link/link.stories.ts | 21 ++++- src/components/link/link/link.ts | 4 +- 30 files changed, 660 insertions(+), 325 deletions(-) create mode 100644 src/components/link/block-link-button/block-link-button.spec.ts create mode 100644 src/components/link/block-link-button/block-link-button.ts create mode 100644 src/components/link/block-link-button/index.ts create mode 100644 src/components/link/block-link-button/readme.md create mode 100644 src/components/link/block-link-static/block-link-static.spec.ts create mode 100644 src/components/link/block-link-static/block-link-static.ts create mode 100644 src/components/link/block-link-static/index.ts create mode 100644 src/components/link/block-link-static/readme.md create mode 100644 src/components/link/block-link/block-link.spec.ts create mode 100644 src/components/link/block-link/block-link.ts create mode 100644 src/components/link/block-link/index.ts create mode 100644 src/components/link/block-link/readme.md create mode 100644 src/components/link/common/block-link-common.ts create mode 100644 src/components/link/common/block-link.scss create mode 100644 src/components/link/common/inline-link-common.ts create mode 100644 src/components/link/common/inline-link.scss diff --git a/src/components/link/block-link-button/block-link-button.spec.ts b/src/components/link/block-link-button/block-link-button.spec.ts new file mode 100644 index 0000000000..09cde7102e --- /dev/null +++ b/src/components/link/block-link-button/block-link-button.spec.ts @@ -0,0 +1,61 @@ +import { expect, fixture } from '@open-wc/testing'; +import { html } from 'lit/static-html.js'; + +import { waitForLitRender } from '../../core/testing'; + +import './block-link-button'; + +describe('sbb-block-link-button', () => { + it('renders a negative link-button with provided icon', async () => { + const root = await fixture( + html` + + Travelcards & tickets. + `, + ); + + await waitForLitRender(root); + + expect(root).dom.to.be.equal(` + + + + Travelcards & tickets. + + `); + expect(root).shadowDom.to.be.equal(` + + + + + + + `); + }); +}); diff --git a/src/components/link/block-link-button/block-link-button.ts b/src/components/link/block-link-button/block-link-button.ts new file mode 100644 index 0000000000..eee5600c7f --- /dev/null +++ b/src/components/link/block-link-button/block-link-button.ts @@ -0,0 +1,22 @@ +import { customElement } from 'lit/decorators.js'; + +import { SbbButtonBaseElement, SbbDisabledTabIndexActionMixin } from '../../core/common-behaviors'; +import { SbbBlockLinkCommonElementMixin } from '../common'; + +/** + * It displays a link enhanced with the SBB Design, which will behave as a button. + * + * @slot - Use the unnamed slot to add content to the `sbb-link-button`. + * @slot icon - Slot used to display the icon, if one is set. + */ +@customElement('sbb-block-link-button') +export class SbbBlockLinkButtonElement extends SbbBlockLinkCommonElementMixin( + SbbDisabledTabIndexActionMixin(SbbButtonBaseElement), +) {} + +declare global { + interface HTMLElementTagNameMap { + // eslint-disable-next-line @typescript-eslint/naming-convention + 'sbb-block-link-button': SbbBlockLinkButtonElement; + } +} diff --git a/src/components/link/block-link-button/index.ts b/src/components/link/block-link-button/index.ts new file mode 100644 index 0000000000..47b0bfd8b1 --- /dev/null +++ b/src/components/link/block-link-button/index.ts @@ -0,0 +1 @@ +export * from './block-link-button'; diff --git a/src/components/link/block-link-button/readme.md b/src/components/link/block-link-button/readme.md new file mode 100644 index 0000000000..c85cd2846e --- /dev/null +++ b/src/components/link/block-link-button/readme.md @@ -0,0 +1,73 @@ +The `sbb-link-button` component provides the same functionality as a native ` `); @@ -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..b9bd93151b 100644 --- a/src/components/skiplink-list/skiplink-list.spec.ts +++ b/src/components/skiplink-list/skiplink-list.spec.ts @@ -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..659e2066ae 100644 --- a/src/components/skiplink-list/skiplink-list.stories.ts +++ b/src/components/skiplink-list/skiplink-list.stories.ts @@ -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..8d1baf9571 100644 --- a/src/components/skiplink-list/skiplink-list.ts +++ b/src/components/skiplink-list/skiplink-list.ts @@ -13,7 +13,12 @@ import { SbbNamedSlotListElementMixin, type WithListChildren, } from '../core/common-behaviors'; -import type { SbbLinkElement, SbbLinkButtonElement } from '../link'; +import type { + SbbLinkElement, + SbbLinkButtonElement, + SbbBlockLinkElement, + SbbBlockLinkButtonElement, +} from '../link'; import type { SbbTitleLevel } from '../title'; import style from './skiplink-list.scss?lit&inline'; @@ -27,11 +32,16 @@ import '../title'; */ @customElement('sbb-skiplink-list') export class SbbSkiplinkListElement extends SbbNamedSlotListElementMixin< - SbbLinkElement | SbbLinkButtonElement, + 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-LINK', + 'SBB-LINK-BUTTON', + '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/teaser-hero/__snapshots__/teaser-hero.spec.snap.js b/src/components/teaser-hero/__snapshots__/teaser-hero.spec.snap.js index d01932cb13..23ad003863 100644 --- a/src/components/teaser-hero/__snapshots__/teaser-hero.spec.snap.js +++ b/src/components/teaser-hero/__snapshots__/teaser-hero.spec.snap.js @@ -13,7 +13,7 @@ snapshots["sbb-teaser-hero should render with slots"] =

- - + @@ -65,7 +64,7 @@ snapshots["sbb-teaser-hero should render all properties ShadowDom"] =

- Find out more - +

${this.href - ? html` ${this.linkContent} - ` + ` : nothing} diff --git a/src/components/toast/toast.e2e.ts b/src/components/toast/toast.e2e.ts index 948991eb6e..d1c60e9d69 100644 --- a/src/components/toast/toast.e2e.ts +++ b/src/components/toast/toast.e2e.ts @@ -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.ts b/src/components/toast/toast.ts index 793761dad0..f8eca91a1e 100644 --- a/src/components/toast/toast.ts +++ b/src/components/toast/toast.ts @@ -193,7 +193,7 @@ export class SbbToastElement extends SbbIconNameMixin(LitElement) { btn.size = 'm'; }); - // Force the visual state on slotted links + // 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)[]; 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 . From 10041d102400aeaebaae2262088d70ee699e925c Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Wed, 21 Feb 2024 09:26:37 +0100 Subject: [PATCH 05/39] refactor(link): fix inline color --- src/components/link/common/inline-link.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/link/common/inline-link.scss b/src/components/link/common/inline-link.scss index c0092d8daf..d6e3cfdba1 100644 --- a/src/components/link/common/inline-link.scss +++ b/src/components/link/common/inline-link.scss @@ -7,6 +7,7 @@ } :host([negative]) { + @include sbb.link-variables--inline; // Needed because of specifity @include sbb.link-variables--inline-negative; } From 2c5925576b144728395a268e54f06b5f949734c7 Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Wed, 21 Feb 2024 10:27:07 +0100 Subject: [PATCH 06/39] refactor(link): update docs --- .../action-group/action-group.e2e.ts | 8 --- .../action-group/action-group.spec.ts | 16 ----- src/components/action-group/action-group.ts | 8 +-- src/components/action-group/readme.md | 40 ++++++------- src/components/footer/footer.ts | 2 +- src/components/footer/readme.md | 56 +++++++++--------- src/components/link-list/link-list.ts | 8 +-- src/components/link-list/readme.md | 58 ++++++++++--------- src/components/menu/menu/readme.md | 2 +- src/components/notification/readme.md | 8 +-- .../popover/popover-trigger/readme.md | 4 +- src/components/popover/popover/readme.md | 6 +- src/components/skiplink-list/readme.md | 12 ++-- src/components/skiplink-list/skiplink-list.ts | 4 +- src/components/toast/readme.md | 2 +- 15 files changed, 106 insertions(+), 128 deletions(-) diff --git a/src/components/action-group/action-group.e2e.ts b/src/components/action-group/action-group.e2e.ts index edf934508b..135caf5937 100644 --- a/src/components/action-group/action-group.e2e.ts +++ b/src/components/action-group/action-group.e2e.ts @@ -54,13 +54,5 @@ describe('sbb-action-group', () => { ) 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.spec.ts b/src/components/action-group/action-group.spec.ts index cdb84346bd..f89135c231 100644 --- a/src/components/action-group/action-group.spec.ts +++ b/src/components/action-group/action-group.spec.ts @@ -76,22 +76,6 @@ describe('sbb-action-group', () => { 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-block-link')).every((l) => l.variant === 'block')).to - // .be.ok; - // }); - it('should sync link-size property with sbb-link', async () => { const root = (await fixture(html` diff --git a/src/components/action-group/action-group.ts b/src/components/action-group/action-group.ts index 7340fa3638..94c745d8d5 100644 --- a/src/components/action-group/action-group.ts +++ b/src/components/action-group/action-group.ts @@ -14,9 +14,9 @@ import type { 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 { @@ -48,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'; diff --git a/src/components/action-group/readme.md b/src/components/action-group/readme.md index 9c4c6314e4..08b9ff2508 100644 --- a/src/components/action-group/readme.md +++ b/src/components/action-group/readme.md @@ -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/footer/footer.ts b/src/components/footer/footer.ts index 3ab5eb5093..5770afe5bb 100644 --- a/src/components/footer/footer.ts +++ b/src/components/footer/footer.ts @@ -11,7 +11,7 @@ import style from './footer.scss?lit&inline'; /** * It displays a footer section for the page. * - * @slot - Use the unnamed slot to add elements like `sbb-link`, `sbb-link-list`, `sbb-divider` and so on. + * @slot - Use the unnamed slot to add elements like `sbb-block-link`, `sbb-link-list`, `sbb-divider` and so on. */ @customElement('sbb-footer') export class SbbFooterElement extends SbbNegativeMixin(LitElement) { diff --git a/src/components/footer/readme.md b/src/components/footer/readme.md index ae1b0258f3..88de80227c 100644 --- a/src/components/footer/readme.md +++ b/src/components/footer/readme.md @@ -15,11 +15,11 @@ class (`class="sbb-link-list-button-group"`) to be displayed correctly. - Link 1 - Link 2 - Link 3 - Link 4 - Link 5 + Link 1 + Link 2 + Link 3 + Link 4 + Link 5 @@ -27,29 +27,29 @@ class (`class="sbb-link-list-button-group"`) to be displayed correctly.
- Refunds - Lost property office - Complaints - Praise - Report property damage + Refunds + Lost property office + Complaints + Praise + Report property damage All help topics
- Jobs & careers - Rail traffic information - SBB News - SBB Community - Company + Jobs & careers + Rail traffic information + SBB News + SBB Community + Company ... - Refunds - Lost property office - Complaints - Praise - Report property damage + Refunds + Lost property office + Complaints + Praise + Report property damage ``` @@ -62,11 +62,11 @@ to the content where needed (e.g. `sbb-link-list`, `sbb-link` and `sbb-divider`) ```html - Refunds - Lost property office - Complaints - Praise - Report property damage + Refunds + Lost property office + Complaints + Praise + Report property damage ``` @@ -85,6 +85,6 @@ to the content where needed (e.g. `sbb-link-list`, `sbb-link` and `sbb-divider`) ## Slots -| Name | Description | -| ---- | ----------------------------------------------------------------------------------------------- | -| | Use the unnamed slot to add elements like `sbb-link`, `sbb-link-list`, `sbb-divider` and so on. | +| Name | Description | +| ---- | ----------------------------------------------------------------------------------------------------- | +| | Use the unnamed slot to add elements like `sbb-block-link`, `sbb-link-list`, `sbb-divider` and so on. | diff --git a/src/components/link-list/link-list.ts b/src/components/link-list/link-list.ts index c60720b1bd..2eb83f31a3 100644 --- a/src/components/link-list/link-list.ts +++ b/src/components/link-list/link-list.ts @@ -22,9 +22,9 @@ import style from './link-list.scss?lit&inline'; import '../title'; /** - * It displays a list of `sbb-link`. + * It displays a list of `sbb-block-link`. * - * @slot - Use the unnamed slot to add one or more `sbb-link`. + * @slot - Use the unnamed slot to add one or more `sbb-block-link`. * @slot title - Use this slot to provide a title. */ @customElement('sbb-link-list') @@ -48,8 +48,8 @@ export class SbbLinkListElement extends SbbNegativeMixin( @property({ attribute: 'title-level' }) public titleLevel: SbbTitleLevel = '2'; /** - * Text size of the nested sbb-link instances. This will overwrite the size attribute of - * nested sbb-link instances. + * Text size of the nested sbb-block-link instances. This will overwrite the size attribute of + * nested sbb-block-link instances. */ @property({ reflect: true }) public size: SbbLinkSize = 's'; diff --git a/src/components/link-list/readme.md b/src/components/link-list/readme.md index 3a3075f609..fcc67349c8 100644 --- a/src/components/link-list/readme.md +++ b/src/components/link-list/readme.md @@ -1,12 +1,14 @@ -The `sbb-link-list` is a component that can be used to collect and display more [sbb-link](/docs/components-sbb-link--docs)s. +The `sbb-link-list` is a component that can be used to collect and display more [sbb-block-link](/docs/components-sbb-block.link--docs)s. ```html - RefundsRefunds - Loss ReportLoss Report ... @@ -26,16 +28,18 @@ The title can be set using the `titleContent` property or, alternatively, can be ## Style -The component will automatically set variant `block` on nested `sbb-link` instances, +The component will accept only `sbb-block-link` or `sbb-block-link-button` instances, and it will sync its `size` and `negative` property with the inner links. ```html - RefundsRefunds - Loss ReportLoss Report ... @@ -50,11 +54,13 @@ The title will not be displayed in the horizontal orientation. ```html - RefundsRefunds - Loss ReportLoss Report ... @@ -64,18 +70,18 @@ The title will not be displayed in the horizontal orientation. ## Properties -| Name | Attribute | Privacy | Type | Default | Description | -| ---------------- | ----------------- | ------- | -------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------- | -| `titleContent` | `title-content` | public | `string \| undefined` | | The title text we want to show before the list. | -| `titleLevel` | `title-level` | public | `SbbTitleLevel` | `'2'` | The semantic level of the title, e.g. 2 = h2. | -| `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size of the nested sbb-link instances. This will overwrite the size attribute of nested sbb-link instances. | -| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom \| undefined` | | Selected breakpoint from which the list is rendered horizontally. | -| `orientation` | `orientation` | public | `SbbOrientation` | `'vertical'` | The orientation in which the list will be shown vertical or horizontal. | -| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | +| Name | Attribute | Privacy | Type | Default | Description | +| ---------------- | ----------------- | ------- | -------------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------- | +| `titleContent` | `title-content` | public | `string \| undefined` | | The title text we want to show before the list. | +| `titleLevel` | `title-level` | public | `TitleLevel \| undefined` | `'2'` | The semantic level of the title, e.g. 2 = h2. | +| `size` | `size` | public | `SbbLinkSize` | `'s'` | Text size of the nested sbb-block-link instances. This will overwrite the size attribute of nested sbb-block-link instances. | +| `horizontalFrom` | `horizontal-from` | public | `SbbHorizontalFrom \| undefined` | | Selected breakpoint from which the list is rendered horizontally. | +| `orientation` | `orientation` | public | `SbbOrientation` | `'vertical'` | The orientation in which the list will be shown vertical or horizontal. | +| `negative` | `negative` | public | `boolean` | `false` | Negative coloring variant flag. | ## Slots -| Name | Description | -| ------- | --------------------------------------------------- | -| | Use the unnamed slot to add one or more `sbb-link`. | -| `title` | Use this slot to provide a title. | +| Name | Description | +| ------- | --------------------------------------------------------- | +| | Use the unnamed slot to add one or more `sbb-block-link`. | +| `title` | Use this slot to provide a title. | diff --git a/src/components/menu/menu/readme.md b/src/components/menu/menu/readme.md index e0739914ce..75efc3c6dd 100644 --- a/src/components/menu/menu/readme.md +++ b/src/components/menu/menu/readme.md @@ -36,7 +36,7 @@ You can also provide custom content inside the `sbb-menu`:
Christina Müller
UIS9057 - Profile + Profile View Edit diff --git a/src/components/notification/readme.md b/src/components/notification/readme.md index 44c5105174..86c399ef6a 100644 --- a/src/components/notification/readme.md +++ b/src/components/notification/readme.md @@ -15,13 +15,13 @@ The `sbb-notification` is structured in the following way: ```html The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. - Link one - Link two - Link three + Link one + Link two + Link three ``` -Note that the notification only supports inline links, therefore any slotted link will be forced to be a `variant="inline"` link. +Note that the notification only supports inline links. ## Variants diff --git a/src/components/popover/popover-trigger/readme.md b/src/components/popover/popover-trigger/readme.md index 8bad8b3bc5..f0b18b321f 100644 --- a/src/components/popover/popover-trigger/readme.md +++ b/src/components/popover/popover-trigger/readme.md @@ -63,9 +63,7 @@ associate the popover trigger with the popover via `aria-describedby` and an `id Popover title. -

- Popover content. Link -

+

Popover content. Link

 ``` diff --git a/src/components/popover/popover/readme.md b/src/components/popover/popover/readme.md index 725f4f256d..2e4f3a87e8 100644 --- a/src/components/popover/popover/readme.md +++ b/src/components/popover/popover/readme.md @@ -35,7 +35,7 @@ it's also possible to hide the default close button using the `hideCloseButton` Popover Title.

- Popover content. Link + Popover content. Link

``` @@ -59,9 +59,7 @@ if neither the trigger element nor the popover are on hover or if another action close-delay="750" > Popover Title. -

- Popover content. Link -

+

Popover content. Link

``` diff --git a/src/components/skiplink-list/readme.md b/src/components/skiplink-list/readme.md index 7a031ee98a..4aa4af6416 100644 --- a/src/components/skiplink-list/readme.md +++ b/src/components/skiplink-list/readme.md @@ -1,4 +1,4 @@ -The `sbb-skiplink-list` is a component that can be used to collect one or more hidden [sbb-link](/docs/components-sbb-link--docs)s, +The `sbb-skiplink-list` is a component that can be used to collect one or more hidden [sbb-block-link](/docs/components-sbb-block-link--docs)s, which become visible only when focused, e.g., using the `Tab` key. When the component contains multiple link elements, only one of them is shown (the focused one), while the others stay visually hidden. @@ -8,8 +8,8 @@ and it can be set using the `title-content` property. ```html - Content - Contact + Content + Contact ... ``` @@ -30,6 +30,6 @@ to specify a custom stack order, the `z-index` can be changed by defining the CS ## Slots -| Name | Description | -| ---- | --------------------------------------------------------------------------------------------- | -| | Use the unnamed slot to add `sbb-link`/`sbb-link-button` elements to the `sbb-skiplink-list`. | +| Name | Description | +| ---- | -------------------------------------------------------------------------------------------------------------------------------------- | +| | Use the unnamed slot to add `sbb-link`/`sbb-link-button`/`sbb-block-link`/`sbb-block-link-button` elements to the `sbb-skiplink-list`. | diff --git a/src/components/skiplink-list/skiplink-list.ts b/src/components/skiplink-list/skiplink-list.ts index 8d1baf9571..0695e96839 100644 --- a/src/components/skiplink-list/skiplink-list.ts +++ b/src/components/skiplink-list/skiplink-list.ts @@ -26,9 +26,9 @@ 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-link`/`sbb-link-button`/`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-link`/`sbb-link-button`/`sbb-block-link`/`sbb-block-link-button` elements to the `sbb-skiplink-list`. */ @customElement('sbb-skiplink-list') export class SbbSkiplinkListElement extends SbbNamedSlotListElementMixin< diff --git a/src/components/toast/readme.md b/src/components/toast/readme.md index e4509d7c39..417ea96a0e 100644 --- a/src/components/toast/readme.md +++ b/src/components/toast/readme.md @@ -39,7 +39,7 @@ A `sbb-toast` can also be given a custom action that, if marked with the `sbb-to - Link action + Link action ``` From 547d5db0d9e513eee27cc783d5bd293f99f11f9e Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Wed, 21 Feb 2024 11:30:35 +0100 Subject: [PATCH 07/39] refactor(link): fix notification stories --- src/components/notification/notification.stories.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/notification/notification.stories.ts b/src/components/notification/notification.stories.ts index ef3beb0f23..dbf26f1825 100644 --- a/src/components/notification/notification.stories.ts +++ b/src/components/notification/notification.stories.ts @@ -127,7 +127,7 @@ const DefaultTemplate = (args: Args): TemplateResult => html` )} > The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy - dog.  Link one + dog.  Link one Link two Link three @@ -147,7 +147,7 @@ const MultipleNotificationsTemplate = (args: Args): TemplateResult => html` )} > The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy - dog.  Link one + dog.  Link one Link two Link three @@ -172,7 +172,7 @@ const SlottedTitleTemplate = (args: Args): TemplateResult => html` > Slotted title The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.  - Link one + Link one Link two Link three From 730319eb205f3b137ea5c8f0b6b36173d823ba4a Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Wed, 21 Feb 2024 14:30:43 +0100 Subject: [PATCH 08/39] refactor(link): minor css improvement --- .../core/common-behaviors/link-base-element.ts | 2 +- src/components/link/common/block-link.scss | 9 +-------- src/components/link/common/inline-link.scss | 9 +-------- src/components/link/common/link.scss | 9 +-------- 4 files changed, 4 insertions(+), 25 deletions(-) diff --git a/src/components/core/common-behaviors/link-base-element.ts b/src/components/core/common-behaviors/link-base-element.ts index c0efe045a0..8ef1b99661 100644 --- a/src/components/core/common-behaviors/link-base-element.ts +++ b/src/components/core/common-behaviors/link-base-element.ts @@ -105,7 +105,7 @@ export abstract class SbbLinkBaseElement extends SbbActionBaseElement implements protected override render(): TemplateResult { return html` Date: Wed, 21 Feb 2024 15:25:38 +0100 Subject: [PATCH 09/39] refactor(link): minor css improvement pt.2 --- .../breadcrumb/__snapshots__/breadcrumb.spec.snap.js | 6 +++--- src/components/button/button-link/button-link.spec.ts | 4 ++-- src/components/button/button-static/button-static.spec.ts | 4 ++-- src/components/button/button/button.spec.ts | 4 ++-- src/components/card/card-button/card-button.e2e.ts | 2 +- src/components/card/card-link/card-link.e2e.ts | 2 +- .../core/common-behaviors/action-base-element.ts | 2 +- src/components/core/common-behaviors/link-base-element.ts | 2 +- .../datepicker-next-day/datepicker-next-day.spec.ts | 4 ++-- .../datepicker-previous-day.spec.ts | 4 ++-- .../__snapshots__/expansion-panel-header.spec.snap.js | 6 +++--- .../__snapshots__/form-field-clear.spec.snap.js | 2 +- src/components/header/header-button/header-button.spec.ts | 2 +- src/components/header/header-link/header-link.spec.ts | 2 +- .../link/block-link-button/block-link-button.spec.ts | 2 +- .../link/block-link-static/block-link-static.spec.ts | 2 +- src/components/link/block-link/block-link.spec.ts | 2 +- src/components/link/link-button/link-button.spec.ts | 2 +- src/components/link/link-static/link-static.spec.ts | 2 +- src/components/link/link/link.spec.ts | 2 +- src/components/menu/menu-button/menu-button.spec.ts | 4 ++-- src/components/menu/menu-link/menu-link.spec.ts | 2 +- .../navigation-button/navigation-button.spec.ts | 2 +- .../navigation/navigation-link/navigation-link.spec.ts | 2 +- .../__snapshots__/popover-trigger.spec.snap.js | 4 ++-- src/components/tag/tag/__snapshots__/tag.spec.snap.js | 8 ++++---- .../teaser-hero/__snapshots__/teaser-hero.spec.snap.js | 4 ++-- src/components/teaser/__snapshots__/teaser.spec.snap.js | 6 +++--- 28 files changed, 45 insertions(+), 45 deletions(-) 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/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-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/core/common-behaviors/action-base-element.ts b/src/components/core/common-behaviors/action-base-element.ts index 92fa87cf59..1b59e7f031 100644 --- a/src/components/core/common-behaviors/action-base-element.ts +++ b/src/components/core/common-behaviors/action-base-element.ts @@ -16,7 +16,7 @@ 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/link-base-element.ts b/src/components/core/common-behaviors/link-base-element.ts index 8ef1b99661..31d9ea70df 100644 --- a/src/components/core/common-behaviors/link-base-element.ts +++ b/src/components/core/common-behaviors/link-base-element.ts @@ -105,7 +105,7 @@ export abstract class SbbLinkBaseElement extends SbbActionBaseElement implements protected override render(): TemplateResult { return html` { await expect(page).dom.to.be.equalSnapshot(); expect(page).shadowDom.to.be.equal(` - + `); @@ -39,7 +39,7 @@ describe('sbb-datepicker-next-day', () => { await expect(element).dom.to.be.equalSnapshot(); expect(element).shadowDom.to.be.equal(` - + `); diff --git a/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.spec.ts b/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.spec.ts index e4ecdc7985..894981c310 100644 --- a/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.spec.ts +++ b/src/components/datepicker/datepicker-previous-day/datepicker-previous-day.spec.ts @@ -18,7 +18,7 @@ describe('sbb-datepicker-previous-day', () => { await expect(page).dom.to.equalSnapshot(); expect(page).shadowDom.to.equal(` - + `); @@ -39,7 +39,7 @@ describe('sbb-datepicker-previous-day', () => { await expect(element).dom.to.be.equalSnapshot(); expect(element).shadowDom.to.be.equal(` - + `); diff --git a/src/components/expansion-panel/expansion-panel-header/__snapshots__/expansion-panel-header.spec.snap.js b/src/components/expansion-panel/expansion-panel-header/__snapshots__/expansion-panel-header.spec.snap.js index 3faa70d220..11c35f703e 100644 --- a/src/components/expansion-panel/expansion-panel-header/__snapshots__/expansion-panel-header.spec.snap.js +++ b/src/components/expansion-panel/expansion-panel-header/__snapshots__/expansion-panel-header.spec.snap.js @@ -2,7 +2,7 @@ export const snapshots = {}; snapshots["sbb-expansion-panel-header renders collapsed"] = -` +` @@ -26,7 +26,7 @@ snapshots["sbb-expansion-panel-header renders collapsed"] = /* end snapshot sbb-expansion-panel-header renders collapsed */ snapshots["sbb-expansion-panel-header renders with icon"] = -` +` @@ -57,7 +57,7 @@ snapshots["sbb-expansion-panel-header renders with icon"] = /* end snapshot sbb-expansion-panel-header renders with icon */ snapshots["sbb-expansion-panel-header renders with slotted icon"] = -` +` diff --git a/src/components/form-field/form-field-clear/__snapshots__/form-field-clear.spec.snap.js b/src/components/form-field/form-field-clear/__snapshots__/form-field-clear.spec.snap.js index 96e3de1e54..21e3a91c33 100644 --- a/src/components/form-field/form-field-clear/__snapshots__/form-field-clear.spec.snap.js +++ b/src/components/form-field/form-field-clear/__snapshots__/form-field-clear.spec.snap.js @@ -72,7 +72,7 @@ snapshots["sbb-form-field-clear renders Formfield ShadowDom"] = /* end snapshot sbb-form-field-clear renders Formfield ShadowDom */ snapshots["sbb-form-field-clear renders FormfieldClear ShadowDom"] = -` +` + diff --git a/src/components/link/block-link-button/block-link-button.spec.ts b/src/components/link/block-link-button/block-link-button.spec.ts index 09cde7102e..ebff69e2f3 100644 --- a/src/components/link/block-link-button/block-link-button.spec.ts +++ b/src/components/link/block-link-button/block-link-button.spec.ts @@ -50,7 +50,7 @@ describe('sbb-block-link-button', () => { `); expect(root).shadowDom.to.be.equal(` - + diff --git a/src/components/link/block-link-static/block-link-static.spec.ts b/src/components/link/block-link-static/block-link-static.spec.ts index ced2938c1c..811da6cc1c 100644 --- a/src/components/link/block-link-static/block-link-static.spec.ts +++ b/src/components/link/block-link-static/block-link-static.spec.ts @@ -40,7 +40,7 @@ describe('sbb-block-link-static', () => { `); expect(root).shadowDom.to.be.equal(` - + diff --git a/src/components/link/block-link/block-link.spec.ts b/src/components/link/block-link/block-link.spec.ts index d6799ae238..aa05ae062d 100644 --- a/src/components/link/block-link/block-link.spec.ts +++ b/src/components/link/block-link/block-link.spec.ts @@ -33,7 +33,7 @@ describe('sbb-block-link', () => { `); expect(root).shadowDom.to.be.equal(` { `); expect(root).shadowDom.to.be.equal(` - + `); diff --git a/src/components/link/link-static/link-static.spec.ts b/src/components/link/link-static/link-static.spec.ts index 94aced26dd..e6c85fb21c 100644 --- a/src/components/link/link-static/link-static.spec.ts +++ b/src/components/link/link-static/link-static.spec.ts @@ -19,7 +19,7 @@ describe('sbb-link-static', () => { `); expect(root).shadowDom.to.be.equal(` - + `); diff --git a/src/components/link/link/link.spec.ts b/src/components/link/link/link.spec.ts index a2fb424fe3..6aa30bbbe0 100644 --- a/src/components/link/link/link.spec.ts +++ b/src/components/link/link/link.spec.ts @@ -24,7 +24,7 @@ describe('sbb-link', () => { `); expect(root).shadowDom.to.be.equal(` - + . Link target opens in a new window. diff --git a/src/components/menu/menu-button/menu-button.spec.ts b/src/components/menu/menu-button/menu-button.spec.ts index 0426b827e9..1d91e1a107 100644 --- a/src/components/menu/menu-button/menu-button.spec.ts +++ b/src/components/menu/menu-button/menu-button.spec.ts @@ -19,7 +19,7 @@ describe('sbb-menu-button', () => { `); expect(root).shadowDom.to.be.equal(` - + @@ -47,7 +47,7 @@ describe('sbb-menu-button', () => { `); expect(root).shadowDom.to.be.equal(` - + diff --git a/src/components/menu/menu-link/menu-link.spec.ts b/src/components/menu/menu-link/menu-link.spec.ts index 37ee0078ad..103a111c1c 100644 --- a/src/components/menu/menu-link/menu-link.spec.ts +++ b/src/components/menu/menu-link/menu-link.spec.ts @@ -26,7 +26,7 @@ describe('sbb-menu-link', () => { `); expect(root).shadowDom.to.be.equal(` - + diff --git a/src/components/navigation/navigation-button/navigation-button.spec.ts b/src/components/navigation/navigation-button/navigation-button.spec.ts index c57741bad5..bb1f6dad1d 100644 --- a/src/components/navigation/navigation-button/navigation-button.spec.ts +++ b/src/components/navigation/navigation-button/navigation-button.spec.ts @@ -14,7 +14,7 @@ describe('sbb-navigation-button', () => { ); expect(root).shadowDom.to.be.equal( ` - + `, diff --git a/src/components/navigation/navigation-link/navigation-link.spec.ts b/src/components/navigation/navigation-link/navigation-link.spec.ts index f01366dceb..a8e3180901 100644 --- a/src/components/navigation/navigation-link/navigation-link.spec.ts +++ b/src/components/navigation/navigation-link/navigation-link.spec.ts @@ -14,7 +14,7 @@ describe('sbb-navigation-link', () => { `); expect(root).shadowDom.to.be.equal(` +` Date: Wed, 21 Feb 2024 15:38:10 +0100 Subject: [PATCH 10/39] refactor(link): minor css improvement pt.3 --- src/components/link/common/block-link.scss | 2 +- src/components/link/common/inline-link.scss | 2 +- src/components/link/common/link.scss | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/link/common/block-link.scss b/src/components/link/common/block-link.scss index 9913712ecd..8d31d4263f 100644 --- a/src/components/link/common/block-link.scss +++ b/src/components/link/common/block-link.scss @@ -4,7 +4,7 @@ display: block; } -:is(.sbb-link-base) { +:is(.sbb-action-base) { :host([size='xs']) & { @include sbb.text-xs--regular; } diff --git a/src/components/link/common/inline-link.scss b/src/components/link/common/inline-link.scss index 563e720af0..5718aa5b93 100644 --- a/src/components/link/common/inline-link.scss +++ b/src/components/link/common/inline-link.scss @@ -11,6 +11,6 @@ @include sbb.link-variables--inline-negative; } -:is(.sbb-link-base) { +:is(.sbb-action-base) { @include sbb.link-inline-base; } diff --git a/src/components/link/common/link.scss b/src/components/link/common/link.scss index d0ee4f994a..f57ec05780 100644 --- a/src/components/link/common/link.scss +++ b/src/components/link/common/link.scss @@ -27,7 +27,7 @@ @include sbb.link-variables--button; } -:is(.sbb-link-base) { +:is(.sbb-action-base) { @include sbb.link-base; display: flex; From 81fa2eba40067a832dfc1c5e69da34448ed0965b Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Wed, 21 Feb 2024 17:38:57 +0100 Subject: [PATCH 11/39] refactor(link): spec tests --- .../block-link-button.spec.snap.js | 89 +++++++++++++ .../block-link-button.spec.ts | 53 +++----- .../block-link-static.spec.snap.js | 83 +++++++++++++ .../block-link-static.spec.ts | 43 +++---- .../__snapshots__/block-link.spec.snap.js | 111 +++++++++++++++++ .../link/block-link/block-link.spec.ts | 48 +++---- .../__snapshots__/link-button.spec.snap.js | 77 ++++++++++++ .../link/link-button/link-button.spec.ts | 39 +++--- .../__snapshots__/link-static.spec.snap.js | 70 +++++++++++ .../link/link-static/link-static.spec.ts | 32 ++--- .../link/link/__snapshots__/link.spec.snap.js | 117 ++++++++++++++++++ src/components/link/link/link.spec.ts | 38 +++--- 12 files changed, 639 insertions(+), 161 deletions(-) create mode 100644 src/components/link/block-link-button/__snapshots__/block-link-button.spec.snap.js create mode 100644 src/components/link/block-link-static/__snapshots__/block-link-static.spec.snap.js create mode 100644 src/components/link/block-link/__snapshots__/block-link.spec.snap.js create mode 100644 src/components/link/link-button/__snapshots__/link-button.spec.snap.js create mode 100644 src/components/link/link-static/__snapshots__/link-static.spec.snap.js create mode 100644 src/components/link/link/__snapshots__/link.spec.snap.js diff --git a/src/components/link/block-link-button/__snapshots__/block-link-button.spec.snap.js b/src/components/link/block-link-button/__snapshots__/block-link-button.spec.snap.js new file mode 100644 index 0000000000..6f4b6c1b50 --- /dev/null +++ b/src/components/link/block-link-button/__snapshots__/block-link-button.spec.snap.js @@ -0,0 +1,89 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-block-link-button renders - DOM"] = +` + + Travelcards & tickets. + +`; +/* end snapshot sbb-block-link-button renders - DOM */ + +snapshots["sbb-block-link-button renders - ShadowDOM"] = +` + + + + + + + +`; +/* end snapshot sbb-block-link-button renders - ShadowDOM */ + +snapshots["sbb-block-link-button A11y tree Chrome"] = +`

+ { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "button", + "name": "Travelcards & tickets." + } + ] +} +

+`; +/* end snapshot sbb-block-link-button A11y tree Chrome */ + +snapshots["sbb-block-link-button A11y tree Firefox"] = +`

+ { + "role": "document", + "name": "", + "children": [ + { + "role": "button", + "name": "Travelcards & tickets." + } + ] +} +

+`; +/* end snapshot sbb-block-link-button A11y tree Firefox */ + +snapshots["sbb-block-link-button A11y tree Safari"] = +`

+ { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "button", + "name": "Travelcards & tickets." + } + ] +} +

+`; +/* end snapshot sbb-block-link-button A11y tree Safari */ + diff --git a/src/components/link/block-link-button/block-link-button.spec.ts b/src/components/link/block-link-button/block-link-button.spec.ts index ebff69e2f3..2c7e127642 100644 --- a/src/components/link/block-link-button/block-link-button.spec.ts +++ b/src/components/link/block-link-button/block-link-button.spec.ts @@ -1,13 +1,17 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; -import { waitForLitRender } from '../../core/testing'; +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; +import type { SbbBlockLinkButtonElement } from './block-link-button'; +import '../../icon'; import './block-link-button'; describe('sbb-block-link-button', () => { - it('renders a negative link-button with provided icon', async () => { - const root = await fixture( + let element: SbbBlockLinkButtonElement; + + beforeEach(async () => { + element = await fixture( html` { name="name" type="submit" form="formid" - disabled > Travelcards & tickets. `, ); + }); - await waitForLitRender(root); - - expect(root).dom.to.be.equal(` - - + it('renders - DOM', async () => { + await expect(element).dom.to.be.equalSnapshot(); + }); - Travelcards & tickets. - - `); - expect(root).shadowDom.to.be.equal(` - - - - - - - `); + it('renders - ShadowDOM', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); }); + + testA11yTreeSnapshot(); }); diff --git a/src/components/link/block-link-static/__snapshots__/block-link-static.spec.snap.js b/src/components/link/block-link-static/__snapshots__/block-link-static.spec.snap.js new file mode 100644 index 0000000000..9e0c96905f --- /dev/null +++ b/src/components/link/block-link-static/__snapshots__/block-link-static.spec.snap.js @@ -0,0 +1,83 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-block-link-static renders - DOM"] = +` + + Travelcards & tickets. + +`; +/* end snapshot sbb-block-link-static renders - DOM */ + +snapshots["sbb-block-link-static renders - ShadowDOM"] = +` + + + + + + + +`; +/* end snapshot sbb-block-link-static renders - ShadowDOM */ + +snapshots["sbb-block-link-static A11y tree Chrome"] = +`

+ { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "Travelcards & tickets." + } + ] +} +

+`; +/* end snapshot sbb-block-link-static A11y tree Chrome */ + +snapshots["sbb-block-link-static A11y tree Firefox"] = +`

+ { + "role": "document", + "name": "", + "children": [ + { + "role": "text leaf", + "name": "Travelcards & tickets. " + } + ] +} +

+`; +/* end snapshot sbb-block-link-static A11y tree Firefox */ + +snapshots["sbb-block-link-static A11y tree Safari"] = +`

+ { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "Travelcards & tickets." + } + ] +} +

+`; +/* end snapshot sbb-block-link-static A11y tree Safari */ + diff --git a/src/components/link/block-link-static/block-link-static.spec.ts b/src/components/link/block-link-static/block-link-static.spec.ts index 811da6cc1c..469e5dbb92 100644 --- a/src/components/link/block-link-static/block-link-static.spec.ts +++ b/src/components/link/block-link-static/block-link-static.spec.ts @@ -1,13 +1,16 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; -import { waitForLitRender } from '../../core/testing'; +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; +import type { SbbBlockLinkStaticElement } from './block-link-static'; import './block-link-static'; describe('sbb-block-link-static', () => { - it('renders', async () => { - const root = await fixture( + let element: SbbBlockLinkStaticElement; + + beforeEach(async () => { + element = await fixture( html` `, ); + }); - await waitForLitRender(root); + it('renders - DOM', async () => { + await expect(element).dom.to.be.equalSnapshot(); + }); - expect(root).dom.to.be.equal(` - - - Travelcards & tickets. - - `); - expect(root).shadowDom.to.be.equal(` - - - - - - - `); + it('renders - ShadowDOM', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); }); + + testA11yTreeSnapshot(); }); diff --git a/src/components/link/block-link/__snapshots__/block-link.spec.snap.js b/src/components/link/block-link/__snapshots__/block-link.spec.snap.js new file mode 100644 index 0000000000..74ded4c628 --- /dev/null +++ b/src/components/link/block-link/__snapshots__/block-link.spec.snap.js @@ -0,0 +1,111 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-block-link renders - DOM"] = +` + Travelcards & tickets. + +`; +/* end snapshot sbb-block-link renders - DOM */ + +snapshots["sbb-block-link renders - ShadowDOM"] = +` + + + + + + + +`; +/* end snapshot sbb-block-link renders - ShadowDOM */ + +snapshots["sbb-block-link A11y tree Chrome"] = +`

+ { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "link", + "name": "Travelcards & tickets", + "children": [ + { + "role": "link", + "name": "Travelcards & tickets." + } + ] + } + ] +} +

+`; +/* end snapshot sbb-block-link A11y tree Chrome */ + +snapshots["sbb-block-link A11y tree Firefox"] = +`

+ { + "role": "document", + "name": "", + "children": [ + { + "role": "link", + "name": "Travelcards & tickets", + "children": [ + { + "role": "link", + "name": "Travelcards & tickets.", + "value": "https://github.com/lyne-design-system/lyne-components" + } + ] + } + ] +} +

+`; +/* end snapshot sbb-block-link A11y tree Firefox */ + +snapshots["sbb-block-link A11y tree Safari"] = +`

+ { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "link", + "name": "Travelcards & tickets", + "children": [ + { + "role": "link", + "name": "Travelcards & tickets.", + "children": [ + { + "role": "text", + "name": "Travelcards & tickets." + } + ] + } + ] + } + ] +} +

+`; +/* end snapshot sbb-block-link A11y tree Safari */ + diff --git a/src/components/link/block-link/block-link.spec.ts b/src/components/link/block-link/block-link.spec.ts index aa05ae062d..f5b4c4dc01 100644 --- a/src/components/link/block-link/block-link.spec.ts +++ b/src/components/link/block-link/block-link.spec.ts @@ -1,50 +1,34 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; + +import type { SbbBlockLinkElement } from './block-link'; import './block-link'; describe('sbb-block-link', () => { - it('renders', async () => { - const root = await fixture(html` - - Travelcards & tickets. - - `); + let element: SbbBlockLinkElement; - expect(root).dom.to.be.equal(` + beforeEach(async () => { + element = await fixture(html` Travelcards & tickets. `); - expect(root).shadowDom.to.be.equal(` - - - - - - - - `); }); + + it('renders - DOM', async () => { + await expect(element).dom.to.be.equalSnapshot(); + }); + + it('renders - ShadowDOM', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); + + testA11yTreeSnapshot(); }); diff --git a/src/components/link/link-button/__snapshots__/link-button.spec.snap.js b/src/components/link/link-button/__snapshots__/link-button.spec.snap.js new file mode 100644 index 0000000000..76f6a8807c --- /dev/null +++ b/src/components/link/link-button/__snapshots__/link-button.spec.snap.js @@ -0,0 +1,77 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-link-button renders - DOM"] = +` + Travelcards & tickets. + +`; +/* end snapshot sbb-link-button renders - DOM */ + +snapshots["sbb-link-button renders - ShadowDOM"] = +` + + + +`; +/* end snapshot sbb-link-button renders - ShadowDOM */ + +snapshots["sbb-link-button A11y tree Chrome"] = +`

+ { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "button", + "name": "Travelcards & tickets" + } + ] +} +

+`; +/* end snapshot sbb-link-button A11y tree Chrome */ + +snapshots["sbb-link-button A11y tree Firefox"] = +`

+ { + "role": "document", + "name": "", + "children": [ + { + "role": "button", + "name": "Travelcards & tickets" + } + ] +} +

+`; +/* end snapshot sbb-link-button A11y tree Firefox */ + +snapshots["sbb-link-button A11y tree Safari"] = +`

+ { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "button", + "name": "Travelcards & tickets" + } + ] +} +

+`; +/* end snapshot sbb-link-button A11y tree Safari */ + diff --git a/src/components/link/link-button/link-button.spec.ts b/src/components/link/link-button/link-button.spec.ts index 64a5e5e374..f25b437c0c 100644 --- a/src/components/link/link-button/link-button.spec.ts +++ b/src/components/link/link-button/link-button.spec.ts @@ -1,11 +1,16 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; + +import type { SbbLinkButtonElement } from './link-button'; import './link-button'; describe('sbb-link-button', () => { - it('renders', async () => { - const root = await fixture(html` + let element: SbbLinkButtonElement; + + beforeEach(async () => { + element = await fixture(html` { Travelcards & tickets. `); + }); - expect(root).dom.to.be.equal(` - - Travelcards & tickets. - - `); - expect(root).shadowDom.to.be.equal(` - - - - `); + it('renders - DOM', async () => { + await expect(element).dom.to.be.equalSnapshot(); + }); + + it('renders - ShadowDOM', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); }); + + testA11yTreeSnapshot(); }); diff --git a/src/components/link/link-static/__snapshots__/link-static.spec.snap.js b/src/components/link/link-static/__snapshots__/link-static.spec.snap.js new file mode 100644 index 0000000000..5941bd887b --- /dev/null +++ b/src/components/link/link-static/__snapshots__/link-static.spec.snap.js @@ -0,0 +1,70 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-link-static renders - DOM"] = +` + Travelcards & tickets. + +`; +/* end snapshot sbb-link-static renders - DOM */ + +snapshots["sbb-link-static renders - ShadowDOM"] = +` + + + +`; +/* end snapshot sbb-link-static renders - ShadowDOM */ + +snapshots["sbb-link-static A11y tree Chrome"] = +`

+ { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "Travelcards & tickets." + } + ] +} +

+`; +/* end snapshot sbb-link-static A11y tree Chrome */ + +snapshots["sbb-link-static A11y tree Firefox"] = +`

+ { + "role": "document", + "name": "", + "children": [ + { + "role": "text leaf", + "name": "Travelcards & tickets. " + } + ] +} +

+`; +/* end snapshot sbb-link-static A11y tree Firefox */ + +snapshots["sbb-link-static A11y tree Safari"] = +`

+ { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "text", + "name": "Travelcards & tickets." + } + ] +} +

+`; +/* end snapshot sbb-link-static A11y tree Safari */ + diff --git a/src/components/link/link-static/link-static.spec.ts b/src/components/link/link-static/link-static.spec.ts index e6c85fb21c..b867f61d7b 100644 --- a/src/components/link/link-static/link-static.spec.ts +++ b/src/components/link/link-static/link-static.spec.ts @@ -1,27 +1,27 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; + +import type { SbbLinkStaticElement } from './link-static'; import './link-static'; describe('sbb-link-static', () => { - it('renders', async () => { - const root = await fixture( + let element: SbbLinkStaticElement; + + beforeEach(async () => { + element = await fixture( html` Travelcards & tickets. `, ); + }); - expect(root).dom.to.be.equal(` - - Travelcards & tickets. - - `); - expect(root).shadowDom.to.be.equal(` - - - - `); + it('renders - DOM', async () => { + await expect(element).dom.to.be.equalSnapshot(); }); + + it('renders - ShadowDOM', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); + + testA11yTreeSnapshot(); }); diff --git a/src/components/link/link/__snapshots__/link.spec.snap.js b/src/components/link/link/__snapshots__/link.spec.snap.js new file mode 100644 index 0000000000..ff01f2725a --- /dev/null +++ b/src/components/link/link/__snapshots__/link.spec.snap.js @@ -0,0 +1,117 @@ +/* @web/test-runner snapshot v1 */ +export const snapshots = {}; + +snapshots["sbb-link renders - DOM"] = +` + Travelcards & tickets. + +`; +/* end snapshot sbb-link renders - DOM */ + +snapshots["sbb-link renders - ShadowDOM"] = +` + + + + . Link target opens in a new window. + + +`; +/* end snapshot sbb-link renders - ShadowDOM */ + +snapshots["sbb-link A11y tree Chrome"] = +`

+ { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "link", + "name": "Travelcards & tickets. . Link target opens in a new window.", + "children": [ + { + "role": "link", + "name": "Travelcards & tickets. . Link target opens in a new window." + } + ] + } + ] +} +

+`; +/* end snapshot sbb-link A11y tree Chrome */ + +snapshots["sbb-link A11y tree Firefox"] = +`

+ { + "role": "document", + "name": "", + "children": [ + { + "role": "link", + "name": "Travelcards & tickets. . Link target opens in a new window.", + "children": [ + { + "role": "link", + "name": "Travelcards & tickets. . Link target opens in a new window.", + "value": "http://localhost:8000/?wtr-session-id=Ep7gUk1dIsGya26wCwekZ#" + } + ] + } + ] +} +

+`; +/* end snapshot sbb-link A11y tree Firefox */ + +snapshots["sbb-link A11y tree Safari"] = +`

+ { + "role": "WebArea", + "name": "", + "children": [ + { + "role": "link", + "name": "", + "children": [ + { + "role": "link", + "name": "Travelcards & tickets. . Link target opens in a new window.", + "children": [ + { + "role": "text", + "name": "Travelcards & tickets." + }, + { + "role": "text", + "name": ". " + }, + { + "role": "text", + "name": "Link target opens in a new window." + } + ] + } + ] + } + ] +} +

+`; +/* end snapshot sbb-link A11y tree Safari */ + diff --git a/src/components/link/link/link.spec.ts b/src/components/link/link/link.spec.ts index 6aa30bbbe0..b63c073ac8 100644 --- a/src/components/link/link/link.spec.ts +++ b/src/components/link/link/link.spec.ts @@ -1,35 +1,27 @@ import { expect, fixture } from '@open-wc/testing'; import { html } from 'lit/static-html.js'; +import { testA11yTreeSnapshot } from '../../core/testing/a11y-tree-snapshot'; + +import type { SbbLinkElement } from './link'; import './link'; describe('sbb-link', () => { - it('renders', async () => { - const root = await fixture( + let element: SbbLinkElement; + + beforeEach(async () => { + element = await fixture( html` Travelcards & tickets. `, ); + }); - expect(root).dom.to.be.equal(` - + it('renders - DOM', async () => { + await expect(element).dom.to.be.equalSnapshot(); + }); - Travelcards & tickets. - - `); - expect(root).shadowDom.to.be.equal(` - - - - . Link target opens in a new window. - - - `); + it('renders - ShadowDOM', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); }); + + testA11yTreeSnapshot(); }); From f2a7f4babcf4238bf24460afcd5415b627b98c22 Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Wed, 21 Feb 2024 17:55:03 +0100 Subject: [PATCH 12/39] refactor(link): fix link imports --- src/components/action-group/action-group.spec.ts | 2 +- src/components/action-group/action-group.stories.ts | 2 +- src/components/dialog/dialog.stories.ts | 2 +- src/components/footer/footer.stories.ts | 2 +- src/components/link-list/link-list.e2e.ts | 2 +- src/components/link-list/link-list.spec.ts | 2 +- src/components/link-list/link-list.stories.ts | 2 +- src/components/notification/notification.e2e.ts | 2 +- src/components/notification/notification.spec.ts | 1 - src/components/notification/notification.stories.ts | 2 +- src/components/selection-panel/selection-panel.e2e.ts | 2 +- src/components/selection-panel/selection-panel.stories.ts | 2 +- src/components/skiplink-list/skiplink-list.e2e.ts | 2 +- src/components/skiplink-list/skiplink-list.spec.ts | 2 +- src/components/skiplink-list/skiplink-list.stories.ts | 2 +- src/components/teaser-hero/teaser-hero.e2e.ts | 2 -- src/components/teaser-hero/teaser-hero.spec.ts | 1 - src/components/teaser-hero/teaser-hero.ts | 2 +- src/components/toast/toast.e2e.ts | 2 +- src/components/toast/toast.stories.ts | 2 +- 20 files changed, 17 insertions(+), 21 deletions(-) diff --git a/src/components/action-group/action-group.spec.ts b/src/components/action-group/action-group.spec.ts index f89135c231..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', () => { diff --git a/src/components/action-group/action-group.stories.ts b/src/components/action-group/action-group.stories.ts index c6ed20e816..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` diff --git a/src/components/dialog/dialog.stories.ts b/src/components/dialog/dialog.stories.ts index c8c1a5a7b8..3bccfcd8aa 100644 --- a/src/components/dialog/dialog.stories.ts +++ b/src/components/dialog/dialog.stories.ts @@ -23,7 +23,7 @@ import { SbbDialogElement } from './dialog'; import readme from './readme.md?raw'; import '../button'; -import '../link'; +import '../link/block-link'; import '../title'; import '../form-field'; import '../image'; diff --git a/src/components/footer/footer.stories.ts b/src/components/footer/footer.stories.ts index 13c444a173..ddc9c11665 100644 --- a/src/components/footer/footer.stories.ts +++ b/src/components/footer/footer.stories.ts @@ -4,7 +4,7 @@ import isChromatic from 'chromatic'; import '../clock'; import '../button'; import '../divider'; -import '../link'; +import '../link/block-link'; import '../link-list'; import '../title'; import './footer'; diff --git a/src/components/link-list/link-list.e2e.ts b/src/components/link-list/link-list.e2e.ts index babf06995f..8871fff2ec 100644 --- a/src/components/link-list/link-list.e2e.ts +++ b/src/components/link-list/link-list.e2e.ts @@ -4,7 +4,7 @@ import { html } from 'lit/static-html.js'; import { waitForLitRender } from '../core/testing'; import { SbbLinkListElement } from './link-list'; -import '../link'; +import '../link/block-link'; describe('sbb-link-list', () => { let element: SbbLinkListElement; diff --git a/src/components/link-list/link-list.spec.ts b/src/components/link-list/link-list.spec.ts index 69ae512320..41510c6c8e 100644 --- a/src/components/link-list/link-list.spec.ts +++ b/src/components/link-list/link-list.spec.ts @@ -6,7 +6,7 @@ import type { SbbBlockLinkElement } from '../link'; import type { SbbLinkListElement } from './link-list'; -import '../link'; +import '../link/block-link'; import './link-list'; describe('sbb-link-list', () => { diff --git a/src/components/link-list/link-list.stories.ts b/src/components/link-list/link-list.stories.ts index 5a822d4b09..5724a128ac 100644 --- a/src/components/link-list/link-list.stories.ts +++ b/src/components/link-list/link-list.stories.ts @@ -7,7 +7,7 @@ import { styleMap } from 'lit/directives/style-map.js'; import { sbbSpread } from '../core/dom'; import readme from './readme.md?raw'; -import '../link'; +import '../link/block-link'; import './link-list'; const wrapperStyle = (context: StoryContext): Record => ({ diff --git a/src/components/notification/notification.e2e.ts b/src/components/notification/notification.e2e.ts index 0aea31f757..55db70e5dd 100644 --- a/src/components/notification/notification.e2e.ts +++ b/src/components/notification/notification.e2e.ts @@ -6,7 +6,7 @@ import { waitForCondition, EventSpy, waitForLitRender } from '../core/testing'; import { SbbNotificationElement } from './notification'; -import '../link'; +import '../link/link'; describe('sbb-notification', () => { let element: SbbNotificationElement; diff --git a/src/components/notification/notification.spec.ts b/src/components/notification/notification.spec.ts index 22b47ff680..7e63704e3f 100644 --- a/src/components/notification/notification.spec.ts +++ b/src/components/notification/notification.spec.ts @@ -5,7 +5,6 @@ import { waitForLitRender } from '../core/testing'; import { testA11yTreeSnapshot } from '../core/testing/a11y-tree-snapshot'; import './notification'; -import '../link'; import '../button'; import '../divider'; diff --git a/src/components/notification/notification.stories.ts b/src/components/notification/notification.stories.ts index dbf26f1825..4324143944 100644 --- a/src/components/notification/notification.stories.ts +++ b/src/components/notification/notification.stories.ts @@ -12,7 +12,7 @@ import { sbbSpread } from '../core/dom'; import { SbbNotificationElement } from './notification'; import readme from './readme.md?raw'; import '../button'; -import '../link'; +import '../link/link'; const titleContent: InputType = { control: { diff --git a/src/components/selection-panel/selection-panel.e2e.ts b/src/components/selection-panel/selection-panel.e2e.ts index 6970acbd90..cab17312cb 100644 --- a/src/components/selection-panel/selection-panel.e2e.ts +++ b/src/components/selection-panel/selection-panel.e2e.ts @@ -10,7 +10,7 @@ import type { SbbRadioButtonGroupElement } from '../radio-button'; import { SbbRadioButtonElement } from '../radio-button'; import { SbbSelectionPanelElement } from './selection-panel'; -import '../link'; +import '../link/block-link-button'; describe('sbb-selection-panel', () => { let elements: SbbSelectionPanelElement[]; diff --git a/src/components/selection-panel/selection-panel.stories.ts b/src/components/selection-panel/selection-panel.stories.ts index a7b0ac2aad..6e7b633274 100644 --- a/src/components/selection-panel/selection-panel.stories.ts +++ b/src/components/selection-panel/selection-panel.stories.ts @@ -18,7 +18,7 @@ import '../checkbox'; import '../divider'; import '../form-error'; import '../icon'; -import '../link'; +import '../link/block-link-button'; import '../radio-button'; import '../popover'; import '../title'; diff --git a/src/components/skiplink-list/skiplink-list.e2e.ts b/src/components/skiplink-list/skiplink-list.e2e.ts index 387b7ffd7a..9c1c731b19 100644 --- a/src/components/skiplink-list/skiplink-list.e2e.ts +++ b/src/components/skiplink-list/skiplink-list.e2e.ts @@ -6,7 +6,7 @@ import type { SbbBlockLinkElement } from '../link'; import { SbbSkiplinkListElement } from './skiplink-list'; -import '../link'; +import '../link/block-link'; describe('sbb-skiplink-list', () => { let element: SbbSkiplinkListElement; diff --git a/src/components/skiplink-list/skiplink-list.spec.ts b/src/components/skiplink-list/skiplink-list.spec.ts index b9bd93151b..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', () => { diff --git a/src/components/skiplink-list/skiplink-list.stories.ts b/src/components/skiplink-list/skiplink-list.stories.ts index 659e2066ae..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: { diff --git a/src/components/teaser-hero/teaser-hero.e2e.ts b/src/components/teaser-hero/teaser-hero.e2e.ts index 36c7df8061..10097e81ea 100644 --- a/src/components/teaser-hero/teaser-hero.e2e.ts +++ b/src/components/teaser-hero/teaser-hero.e2e.ts @@ -6,8 +6,6 @@ import { waitForLitRender } from '../core/testing'; import { SbbTeaserHeroElement } from './teaser-hero'; import '.'; -import '../link'; -import '../image'; describe('sbb-teaser-hero', () => { 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 438f75a0c7..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'; diff --git a/src/components/toast/toast.e2e.ts b/src/components/toast/toast.e2e.ts index d1c60e9d69..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; 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 => { From d11762835337833745f1c5aa26c99f45b50ec5bb Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Fri, 23 Feb 2024 09:40:41 +0100 Subject: [PATCH 13/39] chore: update snaps --- src/components/link/link/__snapshots__/link.spec.snap.js | 6 +++--- src/components/link/link/link.spec.ts | 4 +++- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/link/link/__snapshots__/link.spec.snap.js b/src/components/link/link/__snapshots__/link.spec.snap.js index ff01f2725a..613a9fe135 100644 --- a/src/components/link/link/__snapshots__/link.spec.snap.js +++ b/src/components/link/link/__snapshots__/link.spec.snap.js @@ -5,7 +5,7 @@ snapshots["sbb-link renders - DOM"] = ` { beforeEach(async () => { element = await fixture( - html` Travelcards & tickets. `, + html` + Travelcards & tickets. + `, ); }); From 2a94261cd9a711770873fba62e0b7d53437f3ac6 Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Mon, 26 Feb 2024 08:53:20 +0100 Subject: [PATCH 14/39] refactor(link): implement stories --- .../block-link-button.stories.ts | 65 ++++++++ .../block-link-static.stories.ts | 65 ++++++++ .../link/block-link/block-link.stories.ts | 65 ++++++++ .../link/common/link-common-stories.ts | 142 ++++++++++++++++++ .../link/link-button/link-button.stories.ts | 116 +------------- .../link/link-static/link-static.stories.ts | 52 +------ src/components/link/link/link.stories.ts | 122 +-------------- 7 files changed, 354 insertions(+), 273 deletions(-) create mode 100644 src/components/link/block-link-button/block-link-button.stories.ts create mode 100644 src/components/link/block-link-static/block-link-static.stories.ts create mode 100644 src/components/link/block-link/block-link.stories.ts diff --git a/src/components/link/block-link-button/block-link-button.stories.ts b/src/components/link/block-link-button/block-link-button.stories.ts new file mode 100644 index 0000000000..8ccc2f943d --- /dev/null +++ b/src/components/link/block-link-button/block-link-button.stories.ts @@ -0,0 +1,65 @@ +import { withActions } from '@storybook/addon-actions/decorator'; +import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components'; +import { styleMap } from 'lit/directives/style-map.js'; +import { html } from 'lit/static-html.js'; + +import { + blockFixedWidth, + blockIconStart, + blockM, + blockMIcon, + blockNegative, + blockS, + blockSIcon, + blockWithSlottedIcon, + blockXS, + blockXSIcon, + linkButtonDefaultArgs, + linkButtonDefaultArgTypes, + wrapperStyle, +} from '../common/link-common-stories'; + +import readme from './readme.md?raw'; +import './block-link-button'; + +const defaultArgTypes: ArgTypes = { + ...linkButtonDefaultArgTypes, +}; + +const defaultArgs: Args = { + ...linkButtonDefaultArgs, + tag: 'sbb-block-link-button', +}; + +export const BlockXS: StoryObj = blockXS; +export const BlockS: StoryObj = blockS; +export const BlockM: StoryObj = blockM; +export const BlockXSIcon: StoryObj = blockXSIcon; +export const BlockSIcon: StoryObj = blockSIcon; +export const BlockMIcon: StoryObj = blockMIcon; +export const BlockIconStart: StoryObj = blockIconStart; +export const BlockNegative: StoryObj = blockNegative; +export const BlockWithSlottedIcon: StoryObj = blockWithSlottedIcon; +export const BlockFixedWidth: StoryObj = blockFixedWidth; + +const meta: Meta = { + argTypes: defaultArgTypes, + args: defaultArgs, + decorators: [ + (story, context) => html` +
${story()}
+ `, + withActions as Decorator, + ], + parameters: { + actions: { + handles: ['click'], + }, + docs: { + extractComponentDescription: () => readme, + }, + }, + title: 'components/sbb-link/sbb-link-button', +}; + +export default meta; diff --git a/src/components/link/block-link-static/block-link-static.stories.ts b/src/components/link/block-link-static/block-link-static.stories.ts new file mode 100644 index 0000000000..ab69f34f73 --- /dev/null +++ b/src/components/link/block-link-static/block-link-static.stories.ts @@ -0,0 +1,65 @@ +import { withActions } from '@storybook/addon-actions/decorator'; +import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components'; +import { styleMap } from 'lit/directives/style-map.js'; +import { html } from 'lit/static-html.js'; + +import { + blockFixedWidth, + blockIconStart, + blockM, + blockMIcon, + blockNegative, + blockS, + blockSIcon, + blockWithSlottedIcon, + blockXS, + blockXSIcon, + linkCommonDefaultArgs, + linkCommonDefaultArgTypes, + wrapperStyle, +} from '../common/link-common-stories'; + +import readme from './readme.md?raw'; +import './block-link-static'; + +const defaultArgTypes: ArgTypes = { + ...linkCommonDefaultArgTypes, +}; + +const defaultArgs: Args = { + ...linkCommonDefaultArgs, + tag: 'sbb-block-link-static', +}; + +export const BlockXS: StoryObj = blockXS; +export const BlockS: StoryObj = blockS; +export const BlockM: StoryObj = blockM; +export const BlockXSIcon: StoryObj = blockXSIcon; +export const BlockSIcon: StoryObj = blockSIcon; +export const BlockMIcon: StoryObj = blockMIcon; +export const BlockIconStart: StoryObj = blockIconStart; +export const BlockNegative: StoryObj = blockNegative; +export const BlockWithSlottedIcon: StoryObj = blockWithSlottedIcon; +export const BlockFixedWidth: StoryObj = blockFixedWidth; + +const meta: Meta = { + argTypes: defaultArgTypes, + args: defaultArgs, + decorators: [ + (story, context) => html` +
${story()}
+ `, + withActions as Decorator, + ], + parameters: { + actions: { + handles: ['click'], + }, + docs: { + extractComponentDescription: () => readme, + }, + }, + title: 'components/sbb-link/sbb-link-static', +}; + +export default meta; diff --git a/src/components/link/block-link/block-link.stories.ts b/src/components/link/block-link/block-link.stories.ts new file mode 100644 index 0000000000..a4f021c7e1 --- /dev/null +++ b/src/components/link/block-link/block-link.stories.ts @@ -0,0 +1,65 @@ +import { withActions } from '@storybook/addon-actions/decorator'; +import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components'; +import { styleMap } from 'lit/directives/style-map.js'; +import { html } from 'lit/static-html.js'; + +import { + blockFixedWidth, + blockIconStart, + blockM, + blockMIcon, + blockNegative, + blockS, + blockSIcon, + blockWithSlottedIcon, + blockXS, + blockXSIcon, + linkDefaultArgs, + linkDefaultArgTypes, + wrapperStyle, +} from '../common/link-common-stories'; + +import readme from './readme.md?raw'; +import './block-link'; + +const defaultArgTypes: ArgTypes = { + ...linkDefaultArgTypes, +}; + +const defaultArgs: Args = { + ...linkDefaultArgs, + tag: 'sbb-block-link', +}; + +export const BlockXS: StoryObj = blockXS; +export const BlockS: StoryObj = blockS; +export const BlockM: StoryObj = blockM; +export const BlockXSIcon: StoryObj = blockXSIcon; +export const BlockSIcon: StoryObj = blockSIcon; +export const BlockMIcon: StoryObj = blockMIcon; +export const BlockIconStart: StoryObj = blockIconStart; +export const BlockNegative: StoryObj = blockNegative; +export const BlockWithSlottedIcon: StoryObj = blockWithSlottedIcon; +export const BlockFixedWidth: StoryObj = blockFixedWidth; + +const meta: Meta = { + argTypes: defaultArgTypes, + args: defaultArgs, + decorators: [ + (story, context) => html` +
${story()}
+ `, + withActions as Decorator, + ], + parameters: { + actions: { + handles: ['click'], + }, + docs: { + extractComponentDescription: () => readme, + }, + }, + title: 'components/sbb-link/sbb-block-link', +}; + +export default meta; diff --git a/src/components/link/common/link-common-stories.ts b/src/components/link/common/link-common-stories.ts index 72dcfd352b..dd3137c2ac 100644 --- a/src/components/link/common/link-common-stories.ts +++ b/src/components/link/common/link-common-stories.ts @@ -90,6 +90,24 @@ const ariaLabel: InputType = { }, }; +const disabled: InputType = { + control: { + type: 'boolean', + }, + table: { + category: 'Button', + }, +}; + +const tag: InputType = { + control: { + type: 'text', + }, + table: { + disable: true, + }, +}; + export const linkCommonDefaultArgTypes: ArgTypes = { text, negative, @@ -97,6 +115,7 @@ export const linkCommonDefaultArgTypes: ArgTypes = { 'icon-name': iconName, 'icon-placement': iconPlacement, 'aria-label': ariaLabel, + tag, }; export const linkCommonDefaultArgs: Args = { @@ -106,8 +125,131 @@ export const linkCommonDefaultArgs: Args = { 'icon-name': undefined, 'icon-placement': iconPlacement.options[0], 'aria-label': undefined, + tag: 'TBD', +}; + +// link params + +const hrefs = ['https://www.sbb.ch', 'https://github.com/lyne-design-system/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 download: InputType = { + control: { + type: 'boolean', + }, + table: { + category: 'Link', + }, }; +export const linkDefaultArgTypes: ArgTypes = { + ...linkCommonDefaultArgTypes, + href, + target, + rel, + download, + disabled, +}; + +export const linkDefaultArgs: Args = { + ...linkCommonDefaultArgs, + href: href.options[1], + target: '_blank', + rel: undefined, + download: false, + disabled: false, +}; + +// link-button params + +const type: InputType = { + control: { + type: 'select', + }, + options: ['button', 'reset', 'submit'], + table: { + category: 'Button', + }, +}; + +const name: InputType = { + control: { + type: 'text', + }, + table: { + category: 'Button', + }, +}; + +const value: InputType = { + control: { + type: 'text', + }, + table: { + category: 'Button', + }, +}; + +const form: InputType = { + control: { + type: 'text', + }, + table: { + category: 'Button', + }, +}; + +export const linkButtonDefaultArgTypes: ArgTypes = { + ...linkCommonDefaultArgTypes, + type, + disabled, + name, + value, + form, +}; + +export const linkButtonDefaultArgs: Args = { + ...linkCommonDefaultArgs, + type: type.options[0], + disabled: false, + name: 'Button name', + value: undefined, + form: undefined, +}; + +// Stories + export const blockXS: StoryObj = { render: Template, args: { diff --git a/src/components/link/link-button/link-button.stories.ts b/src/components/link/link-button/link-button.stories.ts index 222d663538..6e89675a02 100644 --- a/src/components/link/link-button/link-button.stories.ts +++ b/src/components/link/link-button/link-button.stories.ts @@ -1,132 +1,30 @@ import { withActions } from '@storybook/addon-actions/decorator'; -import type { InputType } from '@storybook/types'; import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components'; import { styleMap } from 'lit/directives/style-map.js'; import { html } from 'lit/static-html.js'; import { - blockFixedWidth, - blockIconStart, - blockM, - blockMIcon, - blockNegative, - blockS, - blockSIcon, - blockWithSlottedIcon, - blockXS, - blockXSIcon, inline, inlineNegative, - linkCommonDefaultArgs, - linkCommonDefaultArgTypes, + linkButtonDefaultArgs, + linkButtonDefaultArgTypes, wrapperStyle, } from '../common/link-common-stories'; import readme from './readme.md?raw'; import './link-button'; -import '../block-link-button'; - -const tag: InputType = { - control: { - type: 'text', - }, - table: { - disable: true, - }, -}; - -const type: InputType = { - control: { - type: 'select', - }, - options: ['button', 'reset', 'submit'], - table: { - category: 'Button', - }, -}; - -const disabled: InputType = { - control: { - type: 'boolean', - }, - table: { - category: 'Button', - }, -}; - -const name: InputType = { - control: { - type: 'text', - }, - table: { - category: 'Button', - }, -}; - -const value: InputType = { - control: { - type: 'text', - }, - table: { - category: 'Button', - }, -}; - -const form: InputType = { - control: { - type: 'text', - }, - table: { - category: 'Button', - }, -}; const defaultArgTypes: ArgTypes = { - ...linkCommonDefaultArgTypes, - tag, - type, - disabled, - name, - value, - form, + ...linkButtonDefaultArgTypes, }; const defaultArgs: Args = { - ...linkCommonDefaultArgs, - tag: 'sbb-block-link-button', - type: type.options[0], - disabled: false, - name: 'Button name', - value: undefined, - form: undefined, + ...linkButtonDefaultArgs, + tag: 'sbb-link-button', }; -export const BlockXS: StoryObj = blockXS; -export const BlockS: StoryObj = blockS; -export const BlockM: StoryObj = blockM; -export const BlockXSIcon: StoryObj = blockXSIcon; -export const BlockSIcon: StoryObj = blockSIcon; -export const BlockMIcon: StoryObj = blockMIcon; -export const BlockIconStart: StoryObj = blockIconStart; -export const BlockNegative: StoryObj = blockNegative; -export const BlockWithSlottedIcon: StoryObj = blockWithSlottedIcon; -export const BlockFixedWidth: StoryObj = blockFixedWidth; - -export const Inline: StoryObj = { - ...inline, - args: { - tag: 'sbb-link-button', - text: 'Show more', - }, -}; -export const InlineNegative: StoryObj = { - ...inlineNegative, - args: { - tag: 'sbb-link-button', - text: 'Show more', - negative: true, - }, -}; +export const Inline: StoryObj = inline; +export const InlineNegative: StoryObj = inlineNegative; const meta: Meta = { argTypes: defaultArgTypes, diff --git a/src/components/link/link-static/link-static.stories.ts b/src/components/link/link-static/link-static.stories.ts index 997c8fb100..33e65d56df 100644 --- a/src/components/link/link-static/link-static.stories.ts +++ b/src/components/link/link-static/link-static.stories.ts @@ -1,20 +1,9 @@ import { withActions } from '@storybook/addon-actions/decorator'; -import type { InputType } from '@storybook/types'; import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components'; import { styleMap } from 'lit/directives/style-map.js'; import { html } from 'lit/static-html.js'; import { - blockFixedWidth, - blockIconStart, - blockM, - blockMIcon, - blockNegative, - blockS, - blockSIcon, - blockWithSlottedIcon, - blockXS, - blockXSIcon, inline, inlineNegative, linkCommonDefaultArgs, @@ -24,53 +13,18 @@ import { import readme from './readme.md?raw'; import './link-static'; -import '../block-link-static'; - -const tag: InputType = { - control: { - type: 'text', - }, - table: { - disable: true, - }, -}; const defaultArgTypes: ArgTypes = { ...linkCommonDefaultArgTypes, - tag, }; const defaultArgs: Args = { ...linkCommonDefaultArgs, - tag: 'sbb-block-link-static', + tag: 'sbb-link-static', }; -export const BlockXS: StoryObj = blockXS; -export const BlockS: StoryObj = blockS; -export const BlockM: StoryObj = blockM; -export const BlockXSIcon: StoryObj = blockXSIcon; -export const BlockSIcon: StoryObj = blockSIcon; -export const BlockMIcon: StoryObj = blockMIcon; -export const BlockIconStart: StoryObj = blockIconStart; -export const BlockNegative: StoryObj = blockNegative; -export const BlockWithSlottedIcon: StoryObj = blockWithSlottedIcon; -export const BlockFixedWidth: StoryObj = blockFixedWidth; - -export const Inline: StoryObj = { - ...inline, - args: { - tag: 'sbb-link-static', - text: 'Show more', - }, -}; -export const InlineNegative: StoryObj = { - ...inlineNegative, - args: { - tag: 'sbb-link-static', - text: 'Show more', - negative: true, - }, -}; +export const Inline: StoryObj = inline; +export const InlineNegative: StoryObj = inlineNegative; const meta: Meta = { argTypes: defaultArgTypes, diff --git a/src/components/link/link/link.stories.ts b/src/components/link/link/link.stories.ts index 6c921b0f72..997e2e6186 100644 --- a/src/components/link/link/link.stories.ts +++ b/src/components/link/link/link.stories.ts @@ -1,138 +1,30 @@ import { withActions } from '@storybook/addon-actions/decorator'; -import type { InputType } from '@storybook/types'; import type { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components'; import { styleMap } from 'lit/directives/style-map.js'; import { html } from 'lit/static-html.js'; import { - blockFixedWidth, - blockIconStart, - blockM, - blockMIcon, - blockNegative, - blockS, - blockSIcon, - blockWithSlottedIcon, - blockXS, - blockXSIcon, inline, inlineNegative, - linkCommonDefaultArgs, - linkCommonDefaultArgTypes, + linkDefaultArgs, + linkDefaultArgTypes, wrapperStyle, } from '../common/link-common-stories'; import readme from './readme.md?raw'; import './link'; -import '../block-link'; - -const tag: InputType = { - control: { - type: 'text', - }, - table: { - disable: true, - }, -}; - -const hrefs = ['https://www.sbb.ch', 'https://github.com/lyne-design-system/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 download: InputType = { - control: { - type: 'boolean', - }, - table: { - category: 'Link', - }, -}; - -const disabled: InputType = { - control: { - type: 'boolean', - }, - table: { - category: 'Button', - }, -}; const defaultArgTypes: ArgTypes = { - ...linkCommonDefaultArgTypes, - tag, - href, - target, - rel, - download, - disabled, + ...linkDefaultArgTypes, }; const defaultArgs: Args = { - ...linkCommonDefaultArgs, - tag: 'sbb-block-link', - href: href.options[1], - target: '_blank', - rel: undefined, - download: false, - disabled: false, + ...linkDefaultArgs, + tag: 'sbb-link', }; -export const BlockXS: StoryObj = blockXS; -export const BlockS: StoryObj = blockS; -export const BlockM: StoryObj = blockM; -export const BlockXSIcon: StoryObj = blockXSIcon; -export const BlockSIcon: StoryObj = blockSIcon; -export const BlockMIcon: StoryObj = blockMIcon; -export const BlockIconStart: StoryObj = blockIconStart; -export const BlockNegative: StoryObj = blockNegative; -export const BlockWithSlottedIcon: StoryObj = blockWithSlottedIcon; -export const BlockFixedWidth: StoryObj = blockFixedWidth; - -export const Inline: StoryObj = { - ...inline, - args: { - tag: 'sbb-link', - text: 'Show more', - }, -}; -export const InlineNegative: StoryObj = { - ...inlineNegative, - args: { - tag: 'sbb-link', - text: 'Show more', - negative: true, - }, -}; +export const Inline: StoryObj = inline; +export const InlineNegative: StoryObj = inlineNegative; const meta: Meta = { argTypes: defaultArgTypes, From 81c398a80dc45e60cc7ba7f203e15de7bab99df4 Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Mon, 26 Feb 2024 09:30:45 +0100 Subject: [PATCH 15/39] refactor(link): implement stories --- .../link/block-link-button/block-link-button.stories.ts | 2 +- .../link/block-link-static/block-link-static.stories.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/link/block-link-button/block-link-button.stories.ts b/src/components/link/block-link-button/block-link-button.stories.ts index 8ccc2f943d..b2d7669970 100644 --- a/src/components/link/block-link-button/block-link-button.stories.ts +++ b/src/components/link/block-link-button/block-link-button.stories.ts @@ -59,7 +59,7 @@ const meta: Meta = { extractComponentDescription: () => readme, }, }, - title: 'components/sbb-link/sbb-link-button', + title: 'components/sbb-link/sbb-block-link-button', }; export default meta; diff --git a/src/components/link/block-link-static/block-link-static.stories.ts b/src/components/link/block-link-static/block-link-static.stories.ts index ab69f34f73..6713498791 100644 --- a/src/components/link/block-link-static/block-link-static.stories.ts +++ b/src/components/link/block-link-static/block-link-static.stories.ts @@ -59,7 +59,7 @@ const meta: Meta = { extractComponentDescription: () => readme, }, }, - title: 'components/sbb-link/sbb-link-static', + title: 'components/sbb-link/sbb-block-link-static', }; export default meta; From 1a8d524f251c4bfbad4d14785a9ce289e4eed928 Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Tue, 27 Feb 2024 10:35:46 +0100 Subject: [PATCH 16/39] refactor(popover): use inline links in stories --- .../popover/popover-trigger/popover-trigger.stories.ts | 4 ++-- src/components/popover/popover/popover.stories.ts | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/popover/popover-trigger/popover-trigger.stories.ts b/src/components/popover/popover-trigger/popover-trigger.stories.ts index 5518389ce7..0f0b8cb286 100644 --- a/src/components/popover/popover-trigger/popover-trigger.stories.ts +++ b/src/components/popover/popover-trigger/popover-trigger.stories.ts @@ -77,14 +77,14 @@ const popover = (): TemplateResult => html`

Some content. - Learn More - +

`; diff --git a/src/components/popover/popover/popover.stories.ts b/src/components/popover/popover/popover.stories.ts index ebc53e1b59..1a8639f104 100644 --- a/src/components/popover/popover/popover.stories.ts +++ b/src/components/popover/popover/popover.stories.ts @@ -112,14 +112,14 @@ const popover = (args: Args): TemplateResult => html` Title.

Some content. - Learn More - +

`; From e776ba964b64f959ddd53672c73734dd6a95838a Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Tue, 27 Feb 2024 11:11:48 +0100 Subject: [PATCH 17/39] refactor(link): pr feedbacks --- src/components/link/common/block-link.scss | 2 +- src/components/link/common/inline-link-common.ts | 1 - src/components/link/common/inline-link.scss | 2 +- src/components/link/common/link.scss | 2 +- src/components/link/link-button/link-button.ts | 1 - src/components/link/link-static/link-static.ts | 1 - src/components/link/link/__snapshots__/link.spec.snap.js | 6 +++--- src/components/link/link/link.spec.ts | 2 +- src/components/link/link/link.ts | 1 - 9 files changed, 7 insertions(+), 11 deletions(-) diff --git a/src/components/link/common/block-link.scss b/src/components/link/common/block-link.scss index 8d31d4263f..cfd19b4701 100644 --- a/src/components/link/common/block-link.scss +++ b/src/components/link/common/block-link.scss @@ -4,7 +4,7 @@ display: block; } -:is(.sbb-action-base) { +.sbb-action-base { :host([size='xs']) & { @include sbb.text-xs--regular; } diff --git a/src/components/link/common/inline-link-common.ts b/src/components/link/common/inline-link-common.ts index 67f8427a74..65e684c6f4 100644 --- a/src/components/link/common/inline-link-common.ts +++ b/src/components/link/common/inline-link-common.ts @@ -2,7 +2,6 @@ import { type CSSResultGroup } from 'lit'; import { type SbbActionBaseElement, type AbstractConstructor } from '../../core/common-behaviors'; -import '../../icon'; import inlineStyle from './inline-link.scss?lit&inline'; import { SbbLinkCommonElementMixin, type SbbLinkCommonElementMixinType } from './link-common'; import style from './link.scss?lit&inline'; diff --git a/src/components/link/common/inline-link.scss b/src/components/link/common/inline-link.scss index 5718aa5b93..789a8b8859 100644 --- a/src/components/link/common/inline-link.scss +++ b/src/components/link/common/inline-link.scss @@ -11,6 +11,6 @@ @include sbb.link-variables--inline-negative; } -:is(.sbb-action-base) { +.sbb-action-base { @include sbb.link-inline-base; } diff --git a/src/components/link/common/link.scss b/src/components/link/common/link.scss index f57ec05780..0a3a3afc25 100644 --- a/src/components/link/common/link.scss +++ b/src/components/link/common/link.scss @@ -27,7 +27,7 @@ @include sbb.link-variables--button; } -:is(.sbb-action-base) { +.sbb-action-base { @include sbb.link-base; display: flex; diff --git a/src/components/link/link-button/link-button.ts b/src/components/link/link-button/link-button.ts index e644e6b842..0e46ee31b9 100644 --- a/src/components/link/link-button/link-button.ts +++ b/src/components/link/link-button/link-button.ts @@ -7,7 +7,6 @@ import { SbbInlineLinkCommonElementMixin } from '../common'; * It displays a link enhanced with the SBB Design, which will behave as a button. * * @slot - Use the unnamed slot to add content to the `sbb-link-button`. - * @slot icon - Slot used to display the icon, if one is set. */ @customElement('sbb-link-button') export class SbbLinkButtonElement extends SbbInlineLinkCommonElementMixin( diff --git a/src/components/link/link-static/link-static.ts b/src/components/link/link-static/link-static.ts index 25ceaf3635..1776933050 100644 --- a/src/components/link/link-static/link-static.ts +++ b/src/components/link/link-static/link-static.ts @@ -7,7 +7,6 @@ import { SbbInlineLinkCommonElementMixin } from '../common'; * It displays a static link enhanced with the SBB Design. * * @slot - Use the unnamed slot to add content to the `sbb-link-static`. - * @slot icon - Slot used to display the icon, if one is set. */ @customElement('sbb-link-static') export class SbbLinkStaticElement extends SbbInlineLinkCommonElementMixin( diff --git a/src/components/link/link/__snapshots__/link.spec.snap.js b/src/components/link/link/__snapshots__/link.spec.snap.js index 613a9fe135..a4e21af04c 100644 --- a/src/components/link/link/__snapshots__/link.spec.snap.js +++ b/src/components/link/link/__snapshots__/link.spec.snap.js @@ -5,7 +5,7 @@ snapshots["sbb-link renders - DOM"] = ` { beforeEach(async () => { element = await fixture( - html` + html` Travelcards & tickets. `, ); diff --git a/src/components/link/link/link.ts b/src/components/link/link/link.ts index 7ef76c8434..7daadfe65d 100644 --- a/src/components/link/link/link.ts +++ b/src/components/link/link/link.ts @@ -7,7 +7,6 @@ import { SbbInlineLinkCommonElementMixin } from '../common'; * It displays a link enhanced with the SBB Design. * * @slot - Use the unnamed slot to add content to the `sbb-link`. - * @slot icon - Slot used to display the icon, if one is set. */ @customElement('sbb-link') export class SbbLinkElement extends SbbInlineLinkCommonElementMixin( From d937a813762940e6bf9fe8d77332076c8c111315 Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Tue, 27 Feb 2024 11:53:33 +0100 Subject: [PATCH 18/39] refactor(link): pr feedbacks --- src/components/link/link-button/readme.md | 7 +++---- src/components/link/link-static/readme.md | 7 +++---- src/components/link/link/readme.md | 7 +++---- src/components/skiplink-list/readme.md | 6 +++--- src/components/skiplink-list/skiplink-list.ts | 11 +++-------- 5 files changed, 15 insertions(+), 23 deletions(-) diff --git a/src/components/link/link-button/readme.md b/src/components/link/link-button/readme.md index 44e2385db3..fe41eeffa5 100644 --- a/src/components/link/link-button/readme.md +++ b/src/components/link/link-button/readme.md @@ -64,7 +64,6 @@ and it has also three sizes (`xs`, `s`, which is the default, and `m`) that are ## Slots -| Name | Description | -| ------ | ------------------------------------------------------------- | -| | Use the unnamed slot to add content to the `sbb-link-button`. | -| `icon` | Slot used to display the icon, if one is set. | +| Name | Description | +| ---- | ------------------------------------------------------------- | +| | Use the unnamed slot to add content to the `sbb-link-button`. | diff --git a/src/components/link/link-static/readme.md b/src/components/link/link-static/readme.md index 2c6de1402a..366bace3d9 100644 --- a/src/components/link/link-static/readme.md +++ b/src/components/link/link-static/readme.md @@ -53,7 +53,6 @@ and it has also three sizes (`xs`, `s`, which is the default, and `m`) that are ## Slots -| Name | Description | -| ------ | ------------------------------------------------------------- | -| | Use the unnamed slot to add content to the `sbb-link-static`. | -| `icon` | Slot used to display the icon, if one is set. | +| Name | Description | +| ---- | ------------------------------------------------------------- | +| | Use the unnamed slot to add content to the `sbb-link-static`. | diff --git a/src/components/link/link/readme.md b/src/components/link/link/readme.md index d28d3e69a5..cbf3a40857 100644 --- a/src/components/link/link/readme.md +++ b/src/components/link/link/readme.md @@ -63,7 +63,6 @@ and it has also three sizes (`xs`, `s`, which is the default, and `m`) that are ## Slots -| Name | Description | -| ------ | ------------------------------------------------------ | -| | Use the unnamed slot to add content to the `sbb-link`. | -| `icon` | Slot used to display the icon, if one is set. | +| Name | Description | +| ---- | ------------------------------------------------------ | +| | Use the unnamed slot to add content to the `sbb-link`. | diff --git a/src/components/skiplink-list/readme.md b/src/components/skiplink-list/readme.md index 4aa4af6416..87fa7196ff 100644 --- a/src/components/skiplink-list/readme.md +++ b/src/components/skiplink-list/readme.md @@ -30,6 +30,6 @@ to specify a custom stack order, the `z-index` can be changed by defining the CS ## Slots -| Name | Description | -| ---- | -------------------------------------------------------------------------------------------------------------------------------------- | -| | Use the unnamed slot to add `sbb-link`/`sbb-link-button`/`sbb-block-link`/`sbb-block-link-button` elements to the `sbb-skiplink-list`. | +| Name | Description | +| ---- | --------------------------------------------------------------------------------------------------------- | +| | Use the unnamed slot to add `sbb-block-link`/`sbb-block-link-button` elements to the `sbb-skiplink-list`. | diff --git a/src/components/skiplink-list/skiplink-list.ts b/src/components/skiplink-list/skiplink-list.ts index 0695e96839..f7d81e9b91 100644 --- a/src/components/skiplink-list/skiplink-list.ts +++ b/src/components/skiplink-list/skiplink-list.ts @@ -26,9 +26,9 @@ import style from './skiplink-list.scss?lit&inline'; import '../title'; /** - * It displays a list of `sbb-link`/`sbb-link-button`/`sbb-block-link`/`sbb-block-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`/`sbb-block-link`/`sbb-block-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< @@ -36,12 +36,7 @@ export class SbbSkiplinkListElement extends SbbNamedSlotListElementMixin< typeof LitElement >(LitElement) { public static override styles: CSSResultGroup = style; - protected override readonly listChildTagNames = [ - 'SBB-LINK', - 'SBB-LINK-BUTTON', - 'SBB-BLOCK-LINK', - 'SBB-BLOCK-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; From c1a5661d43c74f053d724a70414315eddde25b86 Mon Sep 17 00:00:00 2001 From: Tommmaso Menga Date: Tue, 27 Feb 2024 14:16:28 +0100 Subject: [PATCH 19/39] refactor(link): update readmes --- .../link/block-link-button/readme.md | 32 ++++++--------- .../link/block-link-static/readme.md | 30 ++++++-------- src/components/link/block-link/readme.md | 40 +++++++++---------- src/components/link/link-button/readme.md | 26 +----------- src/components/link/link-static/readme.md | 26 +----------- src/components/link/link/readme.md | 26 +----------- 6 files changed, 48 insertions(+), 132 deletions(-) diff --git a/src/components/link/block-link-button/readme.md b/src/components/link/block-link-button/readme.md index fdcc179f00..ad0dc87ce8 100644 --- a/src/components/link/block-link-button/readme.md +++ b/src/components/link/block-link-button/readme.md @@ -1,4 +1,4 @@ -The `sbb-link-button` component provides the same functionality as a native `