From 779c14a2d1a27c20bf288cb95278c1e718eb50f3 Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Thu, 3 Oct 2024 09:29:46 +0200 Subject: [PATCH] fix(sbb-teaser): allow teaser usage in flexible layouts --- src/elements/teaser/readme.md | 21 ++++++++++++++- src/elements/teaser/teaser.scss | 14 +++++++--- src/elements/teaser/teaser.stories.ts | 29 ++++++++++++++++++++- src/elements/teaser/teaser.visual.spec.ts | 31 ++++++++++++++++++++--- 4 files changed, 87 insertions(+), 8 deletions(-) diff --git a/src/elements/teaser/readme.md b/src/elements/teaser/readme.md index d81da225bb..4b87c9be20 100644 --- a/src/elements/teaser/readme.md +++ b/src/elements/teaser/readme.md @@ -34,12 +34,31 @@ Using the `alignment` property, it is possible to change the text position respe Possible values are `after-centered` (default), `after` and `below`. ```html - ... + ... ``` By default, the image dimensions are set using the width and the aspect ratio. Default values are `300px` and `4/3`. Consumers can change these values on their slotted image element. +### Flexible Layouts + +If using the teaser in a flexible layout like CSS grid or flex together with `alignment=below`, +the CSS variable `--sbb-teaser-align-items` with `stretch` as value can be used +to achieve the image width taking the full available space. On the image itself, the width must be set to `100%`. + +```html +
+ + + ... + + + + ... + +
+``` + ## Accessibility It's important to set the `accessibilityLabel` on the ``, which describes the `sbb-teaser` for screen-reader users. diff --git a/src/elements/teaser/teaser.scss b/src/elements/teaser/teaser.scss index 370f03a3fa..dce1da9c02 100644 --- a/src/elements/teaser/teaser.scss +++ b/src/elements/teaser/teaser.scss @@ -65,6 +65,7 @@ align-items: var(--sbb-teaser-align-items); gap: var(--sbb-teaser-gap); max-width: 100%; + width: 100%; } .sbb-teaser__text { @@ -73,13 +74,11 @@ } ::slotted([slot='image']) { + width: sbb.px-to-rem-build(300); will-change: transform; display: block; - object-fit: cover; - width: sbb.px-to-rem-build(300); filter: brightness(var(--sbb-teaser-brightness, 1)); transition: var(--sbb-teaser-animation-duration) var(--sbb-animation-easing); - aspect-ratio: 4/3; @include sbb.hover-mq($hover: true) { .sbb-teaser:hover & { @@ -90,6 +89,15 @@ } } +::slotted(sbb-image[slot='image']) { + --sbb-image-aspect-ratio: 4 / 3; +} + +::slotted(img[slot='image']) { + aspect-ratio: 4/3; + object-fit: cover; +} + .sbb-teaser__image-wrapper { flex-shrink: 0; overflow: hidden; diff --git a/src/elements/teaser/teaser.stories.ts b/src/elements/teaser/teaser.stories.ts index dada79b337..fec1a00ad2 100644 --- a/src/elements/teaser/teaser.stories.ts +++ b/src/elements/teaser/teaser.stories.ts @@ -1,14 +1,16 @@ 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 { Args, ArgTypes, Decorator, Meta, StoryObj } from '@storybook/web-components'; import type { TemplateResult } from 'lit'; import { html } from 'lit'; import { repeat } from 'lit/directives/repeat.js'; import { sbbSpread } from '../../storybook/helpers/spread.js'; +import images from '../core/images.js'; import placeholderImage from './assets/placeholder.png'; import readme from './readme.md?raw'; +import '../image.js'; import './teaser.js'; const loremIpsum: string = `Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor @@ -141,6 +143,25 @@ const TemplateList = (args: Args): TemplateResult => html` `; +const TemplateGrid = ({ description, ...remainingArgs }: Args): TemplateResult => html` +
+ ${repeat( + new Array(4), + () => html` + + + ${description} + + `, + )} +
+`; + export const AfterCentered: StoryObj = { render: TemplateDefault, argTypes: defaultArgTypes, @@ -243,6 +264,12 @@ export const WithSlots: StoryObj = { args: { ...defaultArgs, 'chip-content': 'Chip content' }, }; +export const Grid: StoryObj = { + render: TemplateGrid, + argTypes: defaultArgTypes, + args: { ...defaultArgs, alignment: 'below' }, +}; + const meta: Meta = { decorators: [ (story) => html`
${story()}
`, diff --git a/src/elements/teaser/teaser.visual.spec.ts b/src/elements/teaser/teaser.visual.spec.ts index 9fc693a29e..34101c0059 100644 --- a/src/elements/teaser/teaser.visual.spec.ts +++ b/src/elements/teaser/teaser.visual.spec.ts @@ -12,10 +12,10 @@ import { import { waitForImageReady } from '../core/testing.js'; import './teaser.js'; +import '../image.js'; -const imageBase64 = await loadAssetAsBase64( - import.meta.resolve('../core/testing/assets/placeholder-image.png'), -); +const imageUrl = import.meta.resolve('../core/testing/assets/placeholder-image.png'); +const imageBase64 = await loadAssetAsBase64(imageUrl); describe(`sbb-teaser`, () => { const loremIpsum: string = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer enim elit, ultricies in tincidunt @@ -140,6 +140,31 @@ describe(`sbb-teaser`, () => { ); }); } + + it( + 'grid with sbb-image', + visualDiffDefault.with(async (setup) => { + await setup.withFixture(html` +
+ ${repeat( + new Array(2), + () => html` + + + This is a paragraph + + `, + )} +
+ `); + await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!); + }), + ); }); } });