-
Notifications
You must be signed in to change notification settings - Fork 13
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
BREAKING CHANGE: The property `isStacked` has been removed in favor of `alignment`. Please see the documentation for further info. The `description` is not clamped to two lines anymore (responsibility of consumer). The slotted `image` has now a default width of `300px`. The slot, formerly named `description`, has been replaced by the unnamed slot. Support of nested `p` elements dropped (invalid html). Closes #1897 --------- Co-authored-by: Jeremias Peier <[email protected]>
- Loading branch information
1 parent
4688dc7
commit ba5f86c
Showing
7 changed files
with
557 additions
and
172 deletions.
There are no files selected for viewing
224 changes: 224 additions & 0 deletions
224
src/components/teaser/__snapshots__/teaser.spec.snap.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,224 @@ | ||
| /* @web/test-runner snapshot v1 */ | ||
| export const snapshots = {}; | ||
|
|
||
| snapshots["sbb-teaser renders after centered - DOM"] = | ||
| `<sbb-teaser | ||
| alignment="after-centered" | ||
| aria-label="SBB teaser" | ||
| dir="ltr" | ||
| href="https://github.com/lyne-design-system/lyne-components" | ||
| role="link" | ||
| tabindex="0" | ||
| > | ||
| </sbb-teaser> | ||
| `; | ||
| /* end snapshot sbb-teaser renders after centered - DOM */ | ||
|
|
||
| snapshots["sbb-teaser renders after centered - ShadowDOM"] = | ||
| `<a | ||
| class="sbb-teaser" | ||
| href="https://github.com/lyne-design-system/lyne-components" | ||
| role="presentation" | ||
| tabindex="-1" | ||
| > | ||
| <span class="sbb-teaser__container"> | ||
| <span class="sbb-teaser__image-wrapper"> | ||
| <slot name="image"> | ||
| </slot> | ||
| </span> | ||
| <span class="sbb-teaser__text"> | ||
| <sbb-chip | ||
| class="sbb-teaser__chip" | ||
| color="charcoal" | ||
| size="xxs" | ||
| > | ||
| <slot name="chip"> | ||
| </slot> | ||
| </sbb-chip> | ||
| <sbb-title | ||
| aria-level="5" | ||
| class="sbb-teaser__lead" | ||
| level="5" | ||
| role="heading" | ||
| visual-level="5" | ||
| > | ||
| <slot name="title"> | ||
| </slot> | ||
| </sbb-title> | ||
| <span class="sbb-teaser__description"> | ||
| <slot> | ||
| </slot> | ||
| </span> | ||
| </span> | ||
| </span> | ||
| </a> | ||
| `; | ||
| /* end snapshot sbb-teaser renders after centered - ShadowDOM */ | ||
|
|
||
| snapshots["sbb-teaser renders after with title level set - DOM"] = | ||
| `<sbb-teaser | ||
| alignment="after" | ||
| aria-label="SBB teaser" | ||
| dir="ltr" | ||
| href="https://github.com/lyne-design-system/lyne-components" | ||
| role="link" | ||
| tabindex="0" | ||
| title-level="2" | ||
| > | ||
| </sbb-teaser> | ||
| `; | ||
| /* end snapshot sbb-teaser renders after with title level set - DOM */ | ||
|
|
||
| snapshots["sbb-teaser renders after with title level set - ShadowDOM"] = | ||
| `<a | ||
| class="sbb-teaser" | ||
| href="https://github.com/lyne-design-system/lyne-components" | ||
| role="presentation" | ||
| tabindex="-1" | ||
| > | ||
| <span class="sbb-teaser__container"> | ||
| <span class="sbb-teaser__image-wrapper"> | ||
| <slot name="image"> | ||
| </slot> | ||
| </span> | ||
| <span class="sbb-teaser__text"> | ||
| <sbb-chip | ||
| class="sbb-teaser__chip" | ||
| color="charcoal" | ||
| size="xxs" | ||
| > | ||
| <slot name="chip"> | ||
| </slot> | ||
| </sbb-chip> | ||
| <sbb-title | ||
| aria-level="2" | ||
| class="sbb-teaser__lead" | ||
| level="2" | ||
| role="heading" | ||
| visual-level="5" | ||
| > | ||
| <slot name="title"> | ||
| </slot> | ||
| </sbb-title> | ||
| <span class="sbb-teaser__description"> | ||
| <slot> | ||
| </slot> | ||
| </span> | ||
| </span> | ||
| </span> | ||
| </a> | ||
| `; | ||
| /* end snapshot sbb-teaser renders after with title level set - ShadowDOM */ | ||
|
|
||
| snapshots["sbb-teaser renders below with projected content - DOM"] = | ||
| `<sbb-teaser | ||
| alignment="below" | ||
| aria-label="SBB teaser" | ||
| data-slot-names="chip image title unnamed" | ||
| dir="ltr" | ||
| href="https://github.com/lyne-design-system/lyne-components" | ||
| role="link" | ||
| tabindex="0" | ||
| > | ||
| <img | ||
| alt="400x300" | ||
| slot="image" | ||
| src="https://cdn.img.sbb.ch/content/dam/internet/lyne/Billetkontrolle.jpg" | ||
| > | ||
| <span slot="chip"> | ||
| Chip | ||
| </span> | ||
| <span slot="title"> | ||
| TITLE | ||
| </span> | ||
| description | ||
| </sbb-teaser> | ||
| `; | ||
| /* end snapshot sbb-teaser renders below with projected content - DOM */ | ||
|
|
||
| snapshots["sbb-teaser renders below with projected content - ShadowDOM"] = | ||
| `<a | ||
| class="sbb-teaser" | ||
| href="https://github.com/lyne-design-system/lyne-components" | ||
| role="presentation" | ||
| tabindex="-1" | ||
| > | ||
| <span class="sbb-teaser__container"> | ||
| <span class="sbb-teaser__image-wrapper"> | ||
| <slot name="image"> | ||
| </slot> | ||
| </span> | ||
| <span class="sbb-teaser__text"> | ||
| <sbb-chip | ||
| class="sbb-teaser__chip" | ||
| color="charcoal" | ||
| size="xxs" | ||
| > | ||
| <slot name="chip"> | ||
| </slot> | ||
| </sbb-chip> | ||
| <sbb-title | ||
| aria-level="5" | ||
| class="sbb-teaser__lead" | ||
| level="5" | ||
| role="heading" | ||
| visual-level="5" | ||
| > | ||
| <slot name="title"> | ||
| </slot> | ||
| </sbb-title> | ||
| <span class="sbb-teaser__description"> | ||
| <slot> | ||
| </slot> | ||
| </span> | ||
| </span> | ||
| </span> | ||
| </a> | ||
| `; | ||
| /* end snapshot sbb-teaser renders below with projected content - ShadowDOM */ | ||
|
|
||
| snapshots["sbb-teaser renders static - DOM"] = | ||
| `<sbb-teaser | ||
| alignment="after-centered" | ||
| dir="ltr" | ||
| > | ||
| </sbb-teaser> | ||
| `; | ||
| /* end snapshot sbb-teaser renders static - DOM */ | ||
|
|
||
| snapshots["sbb-teaser renders static - ShadowDOM"] = | ||
| `<span class="sbb-teaser"> | ||
| <span class="sbb-teaser__container"> | ||
| <span class="sbb-teaser__image-wrapper"> | ||
| <slot name="image"> | ||
| </slot> | ||
| </span> | ||
| <span class="sbb-teaser__text"> | ||
| <sbb-chip | ||
| class="sbb-teaser__chip" | ||
| color="charcoal" | ||
| size="xxs" | ||
| > | ||
| <slot name="chip"> | ||
| </slot> | ||
| </sbb-chip> | ||
| <sbb-title | ||
| aria-level="5" | ||
| class="sbb-teaser__lead" | ||
| level="5" | ||
| role="heading" | ||
| visual-level="5" | ||
| > | ||
| <slot name="title"> | ||
| </slot> | ||
| </sbb-title> | ||
| <span class="sbb-teaser__description"> | ||
| <slot> | ||
| </slot> | ||
| </span> | ||
| </span> | ||
| </span> | ||
| </span> | ||
| `; | ||
| /* end snapshot sbb-teaser renders static - ShadowDOM */ | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,42 @@ | ||
| import { expect, fixture } from '@open-wc/testing'; | ||
| import { assert, expect, fixture } from '@open-wc/testing'; | ||
| import { html } from 'lit/static-html.js'; | ||
|
|
||
| import { waitForLitRender } from '../core/testing'; | ||
| import { EventSpy, waitForLitRender } from '../core/testing'; | ||
|
|
||
| import type { SbbTeaserElement } from './teaser'; | ||
| import '.'; | ||
| import { SbbTeaserElement } from './teaser'; | ||
|
|
||
| describe('sbb-teaser', () => { | ||
| let element: SbbTeaserElement; | ||
|
|
||
| it('should receive focus', async () => { | ||
| element = await fixture(html`<sbb-teaser href="link" id="focus-id">Hero content</sbb-teaser>`); | ||
| beforeEach(async () => { | ||
| element = await fixture(html`<sbb-teaser id="focus-id" href="#">Content</sbb-teaser>`); | ||
| await waitForLitRender(element); | ||
| }); | ||
|
|
||
| it('should render', async () => { | ||
| assert.instanceOf(element, SbbTeaserElement); | ||
| }); | ||
|
|
||
| it('should receive focus', async () => { | ||
| element.focus(); | ||
| await waitForLitRender(element); | ||
|
|
||
| expect(document.activeElement.id).to.be.equal('focus-id'); | ||
| }); | ||
|
|
||
| it('dispatches event on click', async () => { | ||
| const clickSpy = new EventSpy('click'); | ||
|
|
||
| element.click(); | ||
| expect(clickSpy.count).to.be.equal(1); | ||
| }); | ||
|
|
||
| it('should dispatch event on click if is-static', async () => { | ||
| element.setAttribute('is-static', 'true'); | ||
|
|
||
| const clickSpy = new EventSpy('click'); | ||
| await waitForLitRender(element); | ||
|
|
||
| element.click(); | ||
| expect(clickSpy.count).to.be.equal(1); | ||
| }); | ||
| }); |
Oops, something went wrong.