lyne-components icon indicating copy to clipboard operation
lyne-components copied to clipboard

story(sbb-teaser-product): initial implementation

Open kyubisation opened this issue 7 months ago • 0 comments

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 to sbb-teaser-hero and sbb-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

kyubisation avatar Jul 22 '24 08:07 kyubisation