refactor(sbb-teaser-hero, sbb-teaser-paid): move to `@sbb-esta/lyne-e…

…lements-experimental` (#2782)

We are moving the `sbb-teaser-hero` and `sbb-teaser-paid` components to the experimental package, as we have new requirements that will result in breaking changes.

BREAKING CHANGE: `sbb-teaser-hero` and `sbb-teaser-paid` are now part of the `@sbb-esta/lyne-elements-experimental` package.

src/elements-experimental/teaser-hero/readme.md

@@ -0,0 +1,49 @@
+The `sbb-teaser-hero` is a component with a background image and an action call within a panel;
+it should be an eye-catcher and should have an emotional effect on the user with its large image component.
+
+## Slots
+
+It is possible to provide the panel label via an unnamed slot,
+while the link text can be provided using the `link-content` slot or the `linkContent` property;
+similarly, the background image can be provided using the `image` slot or the `imageSrc` property.
+
+```html
+<sbb-teaser-hero
+  href="https://www.sbb.ch"
+  link-content="Find out more"
+  image-src="https://path-to-source"
+  image-alt="SBB CFF FFS Employee"
+>
+  Break out and explore castles and palaces.
+</sbb-teaser-hero>
+
+<sbb-teaser-hero href="https://www.sbb.ch">
+  Break out and explore castles and palaces.
+  <sbb-image slot="image" image-src="https://path-to-source" alt="SBB CFF FFS Employee"></sbb-image>
+  <span slot="link-content">Find out more</span>
+</sbb-teaser-hero>
+```
+
+## Accessibility
+
+The description text is wrapped into an `p` element to guarantee the semantic meaning.
+
+Avoid slotting block elements (e.g. `div`) as this violates semantic rules and can have negative effects on screen readers.
+
+<!-- Auto Generated Below -->
+
+## Properties
+
+| Name          | Attribute      | Privacy | Type                  | Default | Description                                   |
+| ------------- | -------------- | ------- | --------------------- | ------- | --------------------------------------------- |
+| `imageAlt`    | `image-alt`    | public  | `string \| undefined` |         | Image alt text will be passed to `sbb-image`. |
+| `imageSrc`    | `image-src`    | public  | `string \| undefined` |         | Image src will be passed to `sbb-image`.      |
+| `linkContent` | `link-content` | public  | `string \| undefined` |         | Panel link text.                              |
+
+## Slots
+
+| Name           | Description                                           |
+| -------------- | ----------------------------------------------------- |
+|                | Use the unnamed slot to add text content to the panel |
+| `image`        | The background image that can be a `sbb-image`        |
+| `link-content` | Link content of the panel                             |

src/elements/teaser-hero/teaser-hero.scss → src/elements-experimental/teaser-hero/teaser-hero.scss

@@ -1,4 +1,4 @@
-@use '../core/styles' as sbb;
+@use '@sbb-esta/lyne-elements/core/styles' as sbb;
 
 // Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component.
 @include sbb.box-sizing;

src/elements/teaser-hero/teaser-hero.snapshot.spec.ts → src/elements-experimental/teaser-hero/teaser-hero.snapshot.spec.ts

@@ -1,15 +1,14 @@
 import { expect } from '@open-wc/testing';
+import { fixture, testA11yTreeSnapshot } from '@sbb-esta/lyne-elements/core/testing/private.js';
+import { waitForImageReady } from '@sbb-esta/lyne-elements/core/testing.js';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
-import { waitForImageReady } from '../core/testing.js';
-
 import type { SbbTeaserHeroElement } from './teaser-hero.js';
 
 import './teaser-hero.js';
-import '../image.js';
+import '@sbb-esta/lyne-elements/image.js';
 
-const imageUrl = import.meta.resolve('../core/testing/assets/lucerne.png');
+const imageUrl = import.meta.resolve('../../elements/core/testing/assets/lucerne.png');
 
 describe(`sbb-teaser-hero`, () => {
   let element: SbbTeaserHeroElement;

src/elements/teaser-hero/teaser-hero.spec.ts → src/elements-experimental/teaser-hero/teaser-hero.spec.ts

@@ -1,12 +1,11 @@
 import { assert, expect } from '@open-wc/testing';
+import { fixture } from '@sbb-esta/lyne-elements/core/testing/private.js';
+import { waitForLitRender } from '@sbb-esta/lyne-elements/core/testing.js';
 import { html } from 'lit/static-html.js';
 
-import { fixture } from '../core/testing/private.js';
-import { waitForLitRender } from '../core/testing.js';
-
 import { SbbTeaserHeroElement } from './teaser-hero.js';
 
-const imageUrl = import.meta.resolve('../core/testing/assets/lucerne.png');
+const imageUrl = import.meta.resolve('../../elements/core/testing/assets/lucerne.png');
 
 describe(`sbb-teaser-hero`, () => {
   let element: SbbTeaserHeroElement;

src/elements/teaser-hero/teaser-hero.ssr.spec.ts → src/elements-experimental/teaser-hero/teaser-hero.ssr.spec.ts

@@ -1,9 +1,8 @@
 import { assert } from '@open-wc/testing';
+import images from '@sbb-esta/lyne-elements/core/images.js';
+import { fixture } from '@sbb-esta/lyne-elements/core/testing/private.js';
 import { html } from 'lit';
 
-import images from '../core/images.js';
-import { fixture } from '../core/testing/private.js';
-
 import { SbbTeaserHeroElement } from './teaser-hero.js';
 
 describe(`sbb-teaser-hero ${fixture.name}`, () => {

src/elements/teaser-hero/teaser-hero.stories.ts → src/elements-experimental/teaser-hero/teaser-hero.stories.ts

@@ -1,11 +1,11 @@
+import sampleImages from '@sbb-esta/lyne-elements/core/images.js';
 import { withActions } from '@storybook/addon-actions/decorator';
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args, Decorator } from '@storybook/web-components';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
 import { sbbSpread } from '../../storybook/helpers/spread.js';
-import sampleImages from '../core/images.js';
 
 import readme from './readme.md?raw';
 import './teaser-hero.js';
@@ -156,7 +156,7 @@ const meta: Meta = {
       extractComponentDescription: () => readme,
     },
   },
-  title: 'elements/sbb-teaser/sbb-teaser-hero',
+  title: 'experimental/sbb-teaser/sbb-teaser-hero',
 };
 
 export default meta;

src/elements/teaser-hero/teaser-hero.ts → src/elements-experimental/teaser-hero/teaser-hero.ts

@@ -1,13 +1,12 @@
+import { SbbLinkBaseElement } from '@sbb-esta/lyne-elements/core/base-elements.js';
 import { type CSSResultGroup, nothing, type TemplateResult } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { html } from 'lit/static-html.js';
 
-import { SbbLinkBaseElement } from '../core/base-elements.js';
-
 import style from './teaser-hero.scss?lit&inline';
 
-import '../image.js';
-import '../link/block-link-static.js';
+import '@sbb-esta/lyne-elements/image.js';
+import '@sbb-esta/lyne-elements/link/block-link-static.js';
 
 /**
  * It displays an image and an action call within a panel.

src/elements-experimental/teaser-paid/readme.md

@@ -0,0 +1,21 @@
+The `sbb-teaser-paid` is a component with a background image and a chip with a text.
+
+```html
+<sbb-teaser-paid>
+  <sbb-chip slot="chip">Label</sbb-chip>
+  <sbb-image slot="image" image-src="https://path-to-source" alt="SBB CFF FFS Employee"></sbb-image>
+</sbb-teaser-paid>
+```
+
+## Slots
+
+The `sbb-teaser-paid` component has two slots: the `image` slot, used to slot an `sbb-image` and the `chip` slot, used to slot an `sbb-chip`.
+
+<!-- Auto Generated Below -->
+
+## Slots
+
+| Name    | Description                                    |
+| ------- | ---------------------------------------------- |
+| `chip`  | Link content of the panel                      |
+| `image` | The background image that can be a `sbb-image` |

src/elements/teaser-paid/teaser-paid.scss → src/elements-experimental/teaser-paid/teaser-paid.scss

@@ -1,4 +1,4 @@
-@use '../core/styles' as sbb;
+@use '@sbb-esta/lyne-elements/core/styles' as sbb;
 
 // Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component.
 @include sbb.box-sizing;

src/elements/teaser-paid/teaser-paid.snapshot.spec.ts → src/elements-experimental/teaser-paid/teaser-paid.snapshot.spec.ts

@@ -1,8 +1,7 @@
 import { expect } from '@open-wc/testing';
+import { fixture, testA11yTreeSnapshot } from '@sbb-esta/lyne-elements/core/testing/private.js';
 import { html } from 'lit/static-html.js';
 
-import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js';
-
 import './teaser-paid.js';
 
 import type { SbbTeaserPaidElement } from './teaser-paid.js';

src/elements/teaser-paid/teaser-paid.spec.ts → src/elements-experimental/teaser-paid/teaser-paid.spec.ts

@@ -1,14 +1,13 @@
 import { assert, expect } from '@open-wc/testing';
+import type { SbbChipElement } from '@sbb-esta/lyne-elements/chip.js';
+import { fixture } from '@sbb-esta/lyne-elements/core/testing/private.js';
+import type { SbbImageElement } from '@sbb-esta/lyne-elements/image.js';
 import { html } from 'lit/static-html.js';
 
-import type { SbbChipElement } from '../chip.js';
-import { fixture } from '../core/testing/private.js';
-import type { SbbImageElement } from '../image.js';
-
 import { SbbTeaserPaidElement } from './teaser-paid.js';
 
-import '../chip.js';
-import '../image.js';
+import '@sbb-esta/lyne-elements/chip.js';
+import '@sbb-esta/lyne-elements/image.js';
 
 describe(`sbb-teaser-paid`, () => {
   let element: SbbTeaserPaidElement;

src/elements/teaser-paid/teaser-paid.ssr.spec.ts → src/elements-experimental/teaser-paid/teaser-paid.ssr.spec.ts

@@ -1,12 +1,11 @@
 import { assert } from '@open-wc/testing';
+import { fixture } from '@sbb-esta/lyne-elements/core/testing/private.js';
 import { html } from 'lit';
 
-import { fixture } from '../core/testing/private.js';
-
 import { SbbTeaserPaidElement } from './teaser-paid.js';
 
-import '../chip.js';
-import '../image.js';
+import '@sbb-esta/lyne-elements/chip.js';
+import '@sbb-esta/lyne-elements/image.js';
 
 describe(`sbb-teaser-paid ${fixture.name}`, () => {
   let root: SbbTeaserPaidElement;
@@ -19,7 +18,9 @@ describe(`sbb-teaser-paid ${fixture.name}`, () => {
           <sbb-image slot="image"></sbb-image>
         </sbb-teaser-paid>
       `,
-      { modules: ['./teaser-paid.js', '../chip.js', '../image.js'] },
+      {
+        modules: ['./teaser-paid.js', '../../elements/chip.js', '../../elements/image.js'],
+      },
     );
   });
 

src/elements/teaser-paid/teaser-paid.stories.ts → src/elements-experimental/teaser-paid/teaser-paid.stories.ts

@@ -1,15 +1,15 @@
+import sampleImages from '@sbb-esta/lyne-elements/core/images.js';
 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 { html, type TemplateResult } from 'lit';
 
 import { sbbSpread } from '../../storybook/helpers/spread.js';
-import sampleImages from '../core/images.js';
 
 import readme from './readme.md?raw';
 
-import '../chip.js';
-import '../image.js';
+import '@sbb-esta/lyne-elements/chip.js';
+import '@sbb-esta/lyne-elements/image.js';
 import './teaser-paid.js';
 
 const accessibilityLabel: InputType = {
@@ -118,7 +118,7 @@ const meta: Meta = {
       extractComponentDescription: () => readme,
     },
   },
-  title: 'elements/sbb-teaser/sbb-teaser-paid',
+  title: 'experimental/sbb-teaser/sbb-teaser-paid',
 };
 
 export default meta;

src/elements/teaser-paid/teaser-paid.ts → src/elements-experimental/teaser-paid/teaser-paid.ts

@@ -1,8 +1,7 @@
+import { SbbLinkBaseElement } from '@sbb-esta/lyne-elements/core/base-elements.js';
 import { html, type CSSResultGroup, type TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
-import { SbbLinkBaseElement } from '../core/base-elements.js';
-
 import style from './teaser-paid.scss?lit&inline';
 
 /**

src/storybook/pages/home/home.common.ts

@@ -17,8 +17,8 @@ import '../../../elements/link-list.js';
 import '../../../elements/menu.js';
 import '../../../elements/navigation.js';
 import '../../../elements/skiplink-list.js';
-import '../../../elements/teaser-hero.js';
 import '../../../elements/title.js';
+import '../../../elements-experimental/teaser-hero.js';
 
 export const skiplinkList = (): TemplateResult => html`
   <sbb-skiplink-list title-level="2" title-content="Skip to">