feat(sbb-teaser): redesign

[federicoisepponfincons]

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

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the pull request tracker for a Pull Request (PR) that matches the one I want to submit, without success.

Issue

This PR Closes #1897

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes / features)

See Review Guidelines for more information what is checked during review process.

Changes

Changes in this pull request:

• sbb-chip has been included as optional element in the text part
• features 3 variants related to the text position: right-top, right-centered, bottom-left
• the user can set the size of the picture (by width) and the image ratio

Browsers

I tested the build on the following browsers:

• Firefox Desktop
• Chrome Desktop
• Edge Desktop
• Safari Desktop
• Chrome Mobile
• Safari Mobile

Screen readers

I tested the build on the following browsers:

• JAWS Firefox Desktop
• JAWS Chrome Desktop
• NVDA Firefox Desktop
• NVDA Chrome Desktop
• VoiceOver Safari Desktop
• VoiceOver Chrome Desktop
• VoiceOver Safari Mobile
• Android Accessibility Suite Chrome Mobile

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

Does this introduce a breaking change?

• Yes
• No

Other information

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

❗ No coverage uploaded for pull request base (main@331bac3). Click here to learn what that means.

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2211   +/-   ##
=======================================
  Coverage        ?   93.59%           
=======================================
  Files           ?      222           
  Lines           ?    23278           
  Branches        ?     2081           
=======================================
  Hits            ?    21786           
  Misses          ?     1455           
  Partials        ?       37           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[TomMenga]

Good job 👍
Some fixes and some discussion topic

[TomMenga]

Last review and then we can merge it I guess 😸

Also, we need to rebase from master and rename SbbTeaser into SbbTeaserElement

[jeripeierSBB]

Thanks for the great rework!

Additionally to the comments I have two questions (probably for @mcilurzo )

• What should be the behavior when there is more text than the image? Should that be defined somehow? e.g. when end-centered should the image anyways be at the top? or should the centering win and grow over the image?
• I think, the hover state here does not look correctly?

[mcilurzo]

I checked the teaser and it looks almost perfect. I only found 2 small issues:

• https://www.figma.com/file/9r6xSfNmEfCFxl1yFYedrj?node-id=31843:581502&mode=design#664817821
• https://www.figma.com/file/9r6xSfNmEfCFxl1yFYedrj?node-id=31843:581858&mode=design#664822336

[jeripeierSBB]

We need to wait with merge a little while as it is a breaking change and we are still waiting until consumers have been migrated to lit.
Please prepare breaking change message.

[TomMenga]

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).

[jeripeierSBB]

LGTM, wait with merge

[kyubisation]

BREAKING CHANGE:

• sbb-teaser: The property isStacked has been removed in favor of alignment. Please see the documentation for further info.

Quick question; Is it necessary to prefix the component name in the breaking changes? My assumption would be, that since the component name is part of the PR title, release-please would extract it from there.
e.g. BREAKING CHANGE: The property ...

[TomMenga]

BREAKING CHANGE:

• sbb-teaser: The property isStacked has been removed in favor of alignment. Please see the documentation for further info.

Quick question; Is it necessary to prefix the component name in the breaking changes? My assumption would be, that since the component name is part of the PR title, release-please would extract it from there. e.g. BREAKING CHANGE: The property ...

Not 100% sure but we can try

[kyubisation]

Generally LGTM
Some concerns

Outdated