lyne-components
lyne-components copied to clipboard
story(sbb-teaser-product): initial implementation
Feature Description
We want to implement a teaser product component, which is a text, combined with an image, to tease a specific product.
Figma: https://www.figma.com/design/9r6xSfNmEfCFxl1yFYedrj/Lyne-Components?node-id=434-494616&t=pzZZl0rRvKaUlsS9-0
Closes #2622
Design Spec:
- Should support content and an image
- In Zero to Medium, the image is vertically aligned and on top
- From Large, the image and content are horizontally aligned
- The image can be start or end aligned horizontally
- There should be gradient into the image with the background color of the teaser product (gradient 25% - 75%)
- The teaser product can have a footer, which changes the bottom spacing
- Can be negative
- Has no max width (maybe add max-width in storybook) (Check with @mcilurzo)
- The footnote width is limited by the content width
- The element is highlighted on hover like
sbb-teaser-hero
(Check with @mcilurzo)
Tech Spec:
- Create component
sbb-teaser-product
, which is a link component similar tosbb-teaser-hero
andsbb-teaser-product-static
, which allows slotting actual buttons or links - Should have a slot for the image
- Should have an property
imageAlignment: 'after' | 'before' = 'after'
- Should have an unnamed slot for the content (the button in the Figma spec should not be hardcoded and is simply part of a content)
- Should have a slot for the
footnote
<sbb-teaser-product href="...">
<sbb-image slot="image"></sbb-image>
My content for the teaser product
</sbb-teaser-product>
<sbb-teaser-product href="...">
<sbb-image slot="image"></sbb-image>
My content for the teaser product
<div slot="footnote">
My footnote
</div>
</sbb-teaser-product>
Definition of Done
- [ ] Component is implemented
- [ ] Documentation is provided
- [ ] Tests are implemented
- [ ] Storybook stories are implemented
- [ ] Navigation via keyboard is tested
- [ ] Screen reader output is tested
- [ ] High-contrast is tested
- [ ] Remaining accessibility is tested
- [ ] UX approved