Skip to content

Commit

Permalink
fix(sbb-flip-card): fix card summary image position (#3254)
Browse files Browse the repository at this point in the history
Co-authored-by: Jeremias Peier <[email protected]>
  • Loading branch information
dauriamarco and jeripeierSBB authored Nov 28, 2024
1 parent 0e2a847 commit 38c4cc5
Show file tree
Hide file tree
Showing 8 changed files with 151 additions and 46 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -19,18 +19,16 @@
}

.sbb-flip-card-details--wrapper {
display: grid;
grid-template-rows: 0fr;
position: absolute;
pointer-events: none;
color: var(--sbb-color-milk);
opacity: var(--sbb-flip-card-details-opacity);
transform: translateY(var(--sbb-flip-card-details-translate-y));
transition-property: grid-template-rows, transform, opacity;
transition-property: transform, opacity;
transition-duration: var(--sbb-flip-card-details-transition-duration);

:host([data-flipped]) & {
grid-template-rows: 1fr;
transition-delay: 0s, var(--sbb-flip-card-details-transition-delay),
transition-delay: var(--sbb-flip-card-details-transition-delay),
var(--sbb-flip-card-details-transition-delay);
}
}
Expand Down

This file was deleted.

11 changes: 5 additions & 6 deletions src/elements/flip-card/flip-card-summary/flip-card-summary.scss
Original file line number Diff line number Diff line change
Expand Up @@ -12,26 +12,26 @@

.sbb-flip-card-summary {
display: grid;
position: absolute;
min-height: var(--sbb-flip-card-min-height);
pointer-events: var(--sbb-flip-card-summary-pointer-events);
opacity: var(--sbb-flip-card-summary-opacity);
border-radius: var(--sbb-flip-card-border-radius);
overflow: hidden;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr);
width: 100%;
height: 100%;
transition: all var(--sbb-flip-card-summary-transition-duration) ease-out;
transition-delay: var(--sbb-flip-card-summary-transition-delay);

:host([image-alignment='after']) & {
@include sbb.mq($from: small) {
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: 1fr;
}

@include sbb.mq($from: medium) {
grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: 1fr;
}
}
Expand Down Expand Up @@ -61,7 +61,6 @@
}

.sbb-flip-card-summary--image-wrapper {
max-height: var(--sbb-flip-card-min-height);
grid-area: 2 / 1 / 3 / 2;

:host([image-alignment='after']) & {
Expand Down
8 changes: 7 additions & 1 deletion src/elements/flip-card/flip-card/flip-card.scss
Original file line number Diff line number Diff line change
Expand Up @@ -75,10 +75,16 @@
min-height: var(--sbb-flip-card-min-height);
background-color: var(--sbb-flip-card-background-color);
border-radius: var(--sbb-flip-card-border-radius);
transition: var(--sbb-flip-card-summary-transition-duration) ease-out;
transition:
all var(--sbb-flip-card-summary-transition-duration) ease-out,
min-height var(--sbb-flip-card-details-transition-duration);
transition-delay: var(--sbb-flip-card-summary-transition-delay);
cursor: pointer;

:host([data-flipped]) & {
min-height: max(var(--sbb-flip-card-min-height), var(--sbb-flip-card-details-height));
}

@include sbb.if-forced-colors {
&::after {
content: '';
Expand Down
40 changes: 40 additions & 0 deletions src/elements/flip-card/flip-card/flip-card.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import type { InputType } from '@storybook/types';
import type { Args, ArgTypes, Meta, StoryObj, Decorator } from '@storybook/web-components';
import type { TemplateResult } from 'lit';
import { html, nothing } from 'lit';
import { styleMap } from 'lit/directives/style-map.js';

import sampleImages from '../../core/images.js';

Expand Down Expand Up @@ -107,6 +108,39 @@ const LongContentTemplate = (args: Args): TemplateResult =>
</sbb-flip-card-details>
</sbb-flip-card>`;

const GridTemplate = (args: Args): TemplateResult =>
html`<div
style=${styleMap({
display: 'grid',
gridTemplateRows: 'minmax(20rem, 1fr)',
gridTemplateColumns: 'repeat(2, 1fr)',
gridColumnGap: '1rem',
gridRowGap: '1rem',
})}
>
<sbb-flip-card accessibility-label=${args['accessibility-label']}>
${cardSummary(args.label, args.imageAlignment, true)} ${cardDetails()}
</sbb-flip-card>
<sbb-flip-card accessibility-label=${args['accessibility-label']}>
${cardSummary(args.label, args.imageAlignment, true)}
<sbb-flip-card-details>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus ornare condimentum.
Vivamus turpis elit, dapibus eget fringilla pellentesque, lobortis in nibh. Duis dapibus
vitae tortor ullamcorper maximus. In convallis consectetur felis. Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Nam luctus ornare condimentum. Vivamus turpis elit,
dapibus eget fringilla pellentesque, lobortis in nibh. Duis dapibus vitae tortor ullamcorper
maximus. In convallis consectetur felis.
<sbb-link href="https://www.sbb.ch" negative>Link</sbb-link>
</sbb-flip-card-details>
</sbb-flip-card>
<sbb-flip-card accessibility-label=${args['accessibility-label']}>
${cardSummary(args.label, args.imageAlignment, true)} ${cardDetails()}
</sbb-flip-card>
<sbb-flip-card accessibility-label=${args['accessibility-label']}>
${cardSummary(args.label, args.imageAlignment, true)} ${cardDetails()}
</sbb-flip-card>
</div>`;

export const ImageAfter: StoryObj = {
render: DefaultTemplate,
argTypes: defaultArgTypes,
Expand Down Expand Up @@ -140,6 +174,12 @@ export const LongTitle: StoryObj = {
},
};

export const Grid: StoryObj = {
render: GridTemplate,
argTypes: defaultArgTypes,
args: { ...defaultArgs, imageAlignment: imageAlignment.options![1] },
};

const meta: Meta = {
decorators: [
(story) => html`<div style="max-width: 792px;">${story()}</div>`,
Expand Down
22 changes: 22 additions & 0 deletions src/elements/flip-card/flip-card/flip-card.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { ResizeController } from '@lit-labs/observers/resize-controller.js';
import { type CSSResultGroup, html, isServer, LitElement, type TemplateResult } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { until } from 'lit/directives/until.js';
Expand Down Expand Up @@ -52,6 +53,11 @@ class SbbFlipCardElement extends SbbHydrationMixin(LitElement) {
return this.querySelector?.('sbb-flip-card-details');
}

/** Returns the card details content element wrapper. */
private get _detailsContentElement(): HTMLElement | null {
return this.details!.shadowRoot!.firstElementChild as HTMLElement;
}

/** Whether the flip card is flipped. */
public get isFlipped(): boolean {
return this._flipped;
Expand All @@ -62,6 +68,11 @@ class SbbFlipCardElement extends SbbHydrationMixin(LitElement) {

private _abort = new SbbConnectedAbortController(this);
private _language = new SbbLanguageController(this);
private _cardDetailsResizeObserver = new ResizeController(this, {
target: null,
skipInitial: true,
callback: () => this._setCardDetailsHeight(),
});

public override connectedCallback(): void {
super.connectedCallback();
Expand All @@ -82,13 +93,24 @@ class SbbFlipCardElement extends SbbHydrationMixin(LitElement) {
/** Toggles the state of the sbb-flip-card. */
public toggle(): void {
this._flipped = !this._flipped;
if (this._flipped) {
this._setCardDetailsHeight();
this._cardDetailsResizeObserver.observe(this._detailsContentElement!);
} else {
this._cardDetailsResizeObserver.unobserve(this._detailsContentElement!);
}
this.toggleAttribute('data-flipped', this._flipped);
this.details!.toggleAttribute('data-flipped', this._flipped);
this.summary!.inert = this._flipped;
this.details!.inert = !this._flipped;
this.flip.emit();
}

private _setCardDetailsHeight(): any {
const contentHeight = Math.floor(this._detailsContentElement!.offsetHeight);
this.style?.setProperty('--sbb-flip-card-details-height', `${contentHeight}px`);
}

private async _accessibilityLabel(): Promise<string> {
if (isServer) {
return '';
Expand Down
53 changes: 48 additions & 5 deletions src/elements/flip-card/flip-card/flip-card.visual.spec.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { html, nothing, type TemplateResult } from 'lit';
import { styleMap } from 'lit/directives/style-map.js';

import {
describeViewports,
Expand All @@ -9,6 +10,8 @@ import {
import { waitForImageReady } from '../../core/testing/wait-for-image-ready.js';
import type { SbbFlipCardImageAlignment } from '../flip-card-summary.js';

import type { SbbFlipCardElement } from './flip-card.js';

import './flip-card.js';
import '../flip-card-summary.js';
import '../flip-card-details.js';
Expand All @@ -22,13 +25,12 @@ const content = (
title: string = 'Summary',
imageAlignment: SbbFlipCardImageAlignment = 'after',
longContent: boolean = false,
flipped = false,
): TemplateResult =>
html`<sbb-flip-card-summary image-alignment=${imageAlignment}>
<sbb-title level="4">${title}</sbb-title>
<sbb-image slot="image" image-src=${imageUrl}></sbb-image>
</sbb-flip-card-summary>
<sbb-flip-card-details ?data-flipped=${flipped}>
<sbb-flip-card-details>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam luctus ornare condimentum.
Vivamus turpis elit, dapibus eget fringilla pellentesque, lobortis in nibh.
${longContent
Expand Down Expand Up @@ -68,10 +70,13 @@ describe(`sbb-flip-card`, () => {
'flipped',
visualDiffDefault.with(async (setup) => {
await setup.withFixture(
html`<sbb-flip-card data-flipped>
${content('Summary', 'after', false, true)}</sbb-flip-card
>`,
html`<sbb-flip-card> ${content('Summary', 'after', false)}</sbb-flip-card>`,
);
setup.withPostSetupAction(() => {
const flipCard =
setup.snapshotElement.querySelector<SbbFlipCardElement>('sbb-flip-card')!;
flipCard.click();
});
await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!);
}),
);
Expand Down Expand Up @@ -104,6 +109,44 @@ describe(`sbb-flip-card`, () => {
);
}

for (const imageAlignment of ['after', 'below']) {
it(
`grid`,
visualDiffDefault.with(async (setup) => {
await setup.withFixture(
html` <div
style=${styleMap({
display: 'grid',
gridTemplateRows: 'minmax(20rem, 1fr)',
gridTemplateColumns: 'repeat(2, 1fr)',
gridColumnGap: '1rem',
gridRowGap: '1rem',
})}
>
<sbb-flip-card>
${content('Summary', imageAlignment as SbbFlipCardImageAlignment, true)}
</sbb-flip-card>
<sbb-flip-card>
${content('Summary', imageAlignment as SbbFlipCardImageAlignment, true)}
</sbb-flip-card>
<sbb-flip-card>
${content('Summary', imageAlignment as SbbFlipCardImageAlignment, true)}
</sbb-flip-card>
<sbb-flip-card>
${content('Summary', imageAlignment as SbbFlipCardImageAlignment, true)}
</sbb-flip-card>
</div>`,
);
setup.withPostSetupAction(() => {
const flipCard =
setup.snapshotElement.querySelector<SbbFlipCardElement>('sbb-flip-card')!;
flipCard.click();
});
await waitForImageReady(setup.snapshotElement.querySelector('sbb-image')!);
}),
);
}

describe('forcedColors=true', () => {
for (const state of [visualDiffDefault, visualDiffHover, visualDiffFocus]) {
it(
Expand Down
26 changes: 26 additions & 0 deletions src/elements/flip-card/flip-card/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,32 @@ It's meant to be used together with [sbb-flip-card-summary](/docs/elements-sbb-f
</sbb-flip-card>
```

## Style

The `sbb-flip-card` component has a predefined minimum height that can be customized by specifying the `min-height` property directly in the style of the host element with a custom height. Alternatively, when used within a CSS grid layout alongside other cards, the height can be adjusted using the `grid-template-rows` property. For consistent behavior and flexibility, it is recommended to use the `minmax()` function, for example: `grid-template-rows: minmax(320px, 1fr)`.

```html
<div
style="display: grid; grid-template-rows: minmax(320px, 1fr); grid-template-columns: repeat(2, 1fr);"
>
<sbb-flip-card>
<sbb-flip-card-summary>
<sbb-title> Card Title </sbb-title>
<sbb-image slot="image" image-src="..." alt="..."></sbb-image>
</sbb-flip-card-summary>
<sbb-flip-card-details> Some additional text. </sbb-flip-card-details>
</sbb-flip-card>

<sbb-flip-card>
<sbb-flip-card-summary>
<sbb-title> Card Title </sbb-title>
<sbb-image slot="image" image-src="..." alt="..."></sbb-image>
</sbb-flip-card-summary>
<sbb-flip-card-details> Some additional text. </sbb-flip-card-details>
</sbb-flip-card>
</div>
```

## Slots

The component will display the content slotted in the `summary` slot in the main view, and the content slotted inside the `details` slot after the card has been flipped.
Expand Down

0 comments on commit 38c4cc5

Please sign in to comment.