Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

story(sbb-teaser): redesign of the standard teaser + code clean-up #1897

Closed
7 tasks done
kyubisation opened this issue Jul 24, 2023 · 3 comments · Fixed by #2211
Closed
7 tasks done

story(sbb-teaser): redesign of the standard teaser + code clean-up #1897

kyubisation opened this issue Jul 24, 2023 · 3 comments · Fixed by #2211
Assignees
@federicoisepponfincons

Comments

@kyubisation
Copy link
Contributor

kyubisation commented Jul 24, 2023 •
edited by TomMenga
Loading

Feature Description

The sbb-teaser standard (not the Hero or the Panel) has been redesigned in Figma

  • sbb-chip has to be included as optional element in the text part
  • there are 3 variants related to the text position: right-top, right-centered, bottom-left
  • hover state: see variations in Figma
  • the user should set the size of the picture (width) used and the image ratio
  • however there should be default values for image width (300px*) and aspect-ratio (4:3)
  • the text block can exceed the height of the image, therefore the smaller block should vertically align (in the right-centered variant)
  • the tab focused variant is also provided in Figma

* default image width is a temporary value, should be defined in the next days by @mcilurzo

Also the component code has various legacy properties (e.g. hug) and is not labelled properly, therefore it needs a clean-up.

Definition of Done

  • New design variant is implemented
  • Documentation is updated
  • Tests are updated
  • Navigation via keyboard is tested
  • Component uses appropriate properties
  • Component is documented/labelled
  • UX approved
@kyubisation kyubisation added the type: UX ✎ Needs design/specification label Jul 24, 2023
@jeripeierSBB
Copy link
Contributor

@mcilurzo Hello :)

@mcilurzo
Copy link
Contributor

mcilurzo commented Aug 4, 2023

proposal (to discuss): https://www.figma.com/file/9r6xSfNmEfCFxl1yFYedrj/Lyne-Components?type=design&node-id=20312%3A607994&mode=design&t=CXbzTiposN3YUHge-1

@mcilurzo
Copy link
Contributor

ready for implementation

@mcilurzo mcilurzo removed the type: UX ✎ Needs design/specification label Aug 31, 2023
@federicoisepponfincons federicoisepponfincons self-assigned this Nov 8, 2023
@federicoisepponfincons federicoisepponfincons changed the title story(sbb-teaser): design clean-up story(sbb-teaser): redesign of the standard teaser + code clean-up Nov 8, 2023
Merged
28 tasks
kyubisation pushed a commit that referenced this issue Jan 18, 2024
@federicoisepponfincons @jeripeierSBB
feat(sbb-teaser): redesign (#2211)
ba5f86c 
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]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@federicoisepponfincons federicoisepponfincons

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(sbb-teaser): redesign sbb-design-systems/lyne-components
4 participants
@kyubisation @jeripeierSBB @mcilurzo @federicoisepponfincons