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.

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

fix(sbb-teaser): allow teaser usage in flexible layouts #3140

Merged
merged 1 commit into from
Oct 3, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 20 additions & 1 deletion src/elements/teaser/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
<sbb-teaser href="https://www.sbb.ch" aligment="below"> ... </sbb-teaser>
<sbb-teaser href="https://www.sbb.ch" alignment="below"> ... </sbb-teaser>
```

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
<div style="display: grid; gap: 1rem; grid-template-rows: repeat(2, 1fr)">
<sbb-teaser style="--sbb-teaser-align-items: stretch" href="https://www.sbb.ch" alignment="below">
<sbb-image style="width: 100%;" slot="image" image-src="..." alt="description"></sbb-image>
...
</sbb-teaser>
<sbb-teaser style="--sbb-teaser-align-items: stretch" href="https://www.sbb.ch" alignment="below">
<sbb-image style="width: 100%;" slot="image" image-src="..." alt="description"></sbb-image>
...
</sbb-teaser>
</div>
```

## Accessibility

It's important to set the `accessibilityLabel` on the `<sbb-teaser>`, which describes the `sbb-teaser` for screen-reader users.
Expand Down
14 changes: 11 additions & 3 deletions src/elements/teaser/teaser.scss
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,7 @@
align-items: var(--sbb-teaser-align-items);
gap: var(--sbb-teaser-gap);
max-width: 100%;
width: 100%;
}

.sbb-teaser__text {
Expand All @@ -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 & {
Expand All @@ -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;
Expand Down
29 changes: 28 additions & 1 deletion src/elements/teaser/teaser.stories.ts
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -141,6 +143,25 @@ const TemplateList = (args: Args): TemplateResult => html`
</ul>
`;

const TemplateGrid = ({ description, ...remainingArgs }: Args): TemplateResult => html`
<div style="display:grid; gap: 2rem; grid-template-columns: repeat(4, 1fr);">
${repeat(
new Array(4),
() => html`
<sbb-teaser ${sbbSpread(remainingArgs)} style="--sbb-teaser-align-items: stretch;">
<sbb-image
slot="image"
image-src=${images[10]}
alt="400x300"
style="width: 100%;"
></sbb-image>
${description}
</sbb-teaser>
`,
)}
</div>
`;

export const AfterCentered: StoryObj = {
render: TemplateDefault,
argTypes: defaultArgTypes,
Expand Down Expand Up @@ -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`<div style="max-width: 760px;">${story()}</div>`,
Expand Down
31 changes: 28 additions & 3 deletions src/elements/teaser/teaser.visual.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -140,6 +140,31 @@ describe(`sbb-teaser`, () => {
);
});
}

it(
'grid with sbb-image',
visualDiffDefault.with(async (setup) => {
await setup.withFixture(html`
<div style="display:grid; gap: 2rem; grid-template-columns: repeat(2, 1fr);">
${repeat(
new Array(2),
() => html`
<sbb-teaser
title-content="This is a title"
href="#"
alignment="below"
style="--sbb-teaser-align-items: stretch;"
>
<sbb-image slot="image" image-src=${imageUrl} style="width: 100%"></sbb-image>
This is a paragraph
</sbb-teaser>
`,
)}
</div>
`);
await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!);
}),
);
});
}
});
Loading