diff --git a/src/elements/flip-card/flip-card-details/readme.md b/src/elements/flip-card/flip-card-details/readme.md index ebe7f63159..6029c00371 100644 --- a/src/elements/flip-card/flip-card-details/readme.md +++ b/src/elements/flip-card/flip-card-details/readme.md @@ -1,4 +1,4 @@ -The `sbb-flip-card-details`, when used inside a `sbb-flip-card`, will show its contents when the card is flipped. +The `sbb-flip-card-details`, when used inside a [sbb-flip-card](/docs/elements-sbb-flip-card-sbb-flip-card--docs), will show its contents when the card is flipped. The component's slot is implicitly set to `"details"`. ```html diff --git a/src/elements/flip-card/flip-card-summary/flip-card-summary.stories.ts b/src/elements/flip-card/flip-card-summary/flip-card-summary.stories.ts index c5218520cc..0cc2544136 100644 --- a/src/elements/flip-card/flip-card-summary/flip-card-summary.stories.ts +++ b/src/elements/flip-card/flip-card-summary/flip-card-summary.stories.ts @@ -67,6 +67,12 @@ export const Default: StoryObj = { argTypes: defaultArgTypes, }; +export const ImageBelow: StoryObj = { + render: Template, + argTypes: defaultArgTypes, + args: { ...defaultArgs, imageAlignment: imageAlignment.options![1] }, +}; + const meta: Meta = { decorators: [withActions as Decorator], parameters: { diff --git a/src/elements/flip-card/flip-card-summary/flip-card-summary.ts b/src/elements/flip-card/flip-card-summary/flip-card-summary.ts index 05f989282b..baa474e165 100644 --- a/src/elements/flip-card/flip-card-summary/flip-card-summary.ts +++ b/src/elements/flip-card/flip-card-summary/flip-card-summary.ts @@ -6,6 +6,8 @@ import { hostAttributes } from '../../core/decorators.js'; import style from './flip-card-summary.scss?lit&inline'; +export type SbbFlipCardImageAlignment = 'after' | 'below'; + /** * Combined with a `sbb-flip-card`, it displays its content when the card is not flipped. * @@ -20,9 +22,8 @@ export class SbbFlipCardSummaryElement extends LitElement { public static override styles: CSSResultGroup = style; /** The position where to render the image. */ - @property({ attribute: 'image-alignment', reflect: true }) public imageAlignment: - | 'after' - | 'below' = 'after'; + @property({ attribute: 'image-alignment', reflect: true }) + public imageAlignment: SbbFlipCardImageAlignment = 'after'; protected override render(): TemplateResult { return html` diff --git a/src/elements/flip-card/flip-card-summary/readme.md b/src/elements/flip-card/flip-card-summary/readme.md index cd430c842d..86fac4b926 100644 --- a/src/elements/flip-card/flip-card-summary/readme.md +++ b/src/elements/flip-card/flip-card-summary/readme.md @@ -1,4 +1,4 @@ -The `sbb-flip-card-summary`, when used inside a `sbb-flip-card`, shows its contents when the card is not flipped. +The `sbb-flip-card-summary`, when used inside a [sbb-flip-card](/docs/elements-sbb-flip-card-sbb-flip-card--docs), shows its contents when the card is not flipped. The component's slot is implicitly set to `"summary"`. ```html @@ -20,7 +20,7 @@ Use the unnamed slot of `sbb-flip-card-summary` to provide a title and, optional | Name | Attribute | Privacy | Type | Default | Description | | ---------------- | ----------------- | ------- | --------------------------- | --------- | --------------------------------------- | -| `imageAlignment` | `image-alignment` | public | `\| 'after' \| 'below'` | `'after'` | The position where to render the image. | +| `imageAlignment` | `image-alignment` | public | `SbbFlipCardImageAlignment` | `'after'` | The position where to render the image. | ## Slots diff --git a/src/elements/flip-card/flip-card/flip-card.ts b/src/elements/flip-card/flip-card/flip-card.ts index 1150f0f5c4..017abe021b 100644 --- a/src/elements/flip-card/flip-card/flip-card.ts +++ b/src/elements/flip-card/flip-card/flip-card.ts @@ -21,6 +21,16 @@ import style from './flip-card.scss?lit&inline'; export class SbbFlipCardElement extends LitElement { public static override styles: CSSResultGroup = style; + /** Returns the slotted sbb-flip-card-summary. */ + public get summary(): SbbFlipCardSummaryElement { + return this.querySelector('sbb-flip-card-summary')!; + } + + /** Returns the slotted sbb-flip-card-details. */ + public get details(): SbbFlipCardDetailsElement { + return this.querySelector('sbb-flip-card-details')!; + } + /** Whether the card is flipped or not. */ @state() private _flipped = false; @@ -34,16 +44,6 @@ export class SbbFlipCardElement extends LitElement { this.details.inert = !this._flipped; } - /** Returns the slotted sbb-flip-card-summary. */ - public get summary(): SbbFlipCardSummaryElement { - return this.querySelector('sbb-flip-card-summary')!; - } - - /** Returns the slotted sbb-flip-card-details. */ - public get details(): SbbFlipCardDetailsElement { - return this.querySelector('sbb-flip-card-details')!; - } - protected override render(): TemplateResult { return html`
diff --git a/src/elements/flip-card/flip-card/flip-card.visual.spec.ts b/src/elements/flip-card/flip-card/flip-card.visual.spec.ts index 961b3224db..0c95fdc319 100644 --- a/src/elements/flip-card/flip-card/flip-card.visual.spec.ts +++ b/src/elements/flip-card/flip-card/flip-card.visual.spec.ts @@ -1,4 +1,4 @@ -import { html, nothing } from 'lit'; +import { html, nothing, type TemplateResult } from 'lit'; import sampleImages from '../../core/images.js'; import { @@ -6,19 +6,19 @@ import { visualDiffDefault, visualDiffFocus, } from '../../core/testing/private.js'; - import './flip-card.js'; import '../flip-card-summary.js'; import '../flip-card-details.js'; import '../../title.js'; import '../../link.js'; import '../../image.js'; +import type { SbbFlipCardImageAlignment } from '../flip-card-summary.js'; const content = ( title: string = 'Summary', - imageAlignment: 'after' | 'below' = 'after', + imageAlignment: SbbFlipCardImageAlignment = 'after', longConent: boolean = false, -) => +): TemplateResult => html` ${title} { state.with(async (setup) => { await setup.withFixture(html` - ${content('Summary', imageAlignment as 'after' | 'below')} + ${content('Summary', imageAlignment as SbbFlipCardImageAlignment)} `); }), @@ -86,7 +86,7 @@ describe(`sbb-flip-card`, () => { visualDiffDefault.with(async (setup) => { await setup.withFixture( html` - ${content('Summary', imageAlignment as 'after' | 'below', true)} + ${content('Summary', imageAlignment as SbbFlipCardImageAlignment, true)} `, ); }), diff --git a/src/elements/flip-card/flip-card/readme.md b/src/elements/flip-card/flip-card/readme.md index c6e09e0363..4512dad1c8 100644 --- a/src/elements/flip-card/flip-card/readme.md +++ b/src/elements/flip-card/flip-card/readme.md @@ -1,5 +1,5 @@ The `sbb-flip-card` component displays an informative card that reveals more informations when clicked or toggled programmatically. -It's meant to be used together with `sbb-flip-card-summary` and `sbb-flip-card-details`. +It's meant to be used together with [sbb-flip-card-summary](/docs/elements-sbb-flip-card-sbb-flip-card-summary--docs) and [sbb-flip-card-details](/docs/elements-sbb-flip-card-sbb-flip-card-details--docs). ```html @@ -17,7 +17,7 @@ The component will display the content slotted in the `summary` slot in the main ## States -The `sbb-flip-card` will switch to the flipped state after the user clicks on it or after the `toggle` method is called. Once the component is flipped, it will have the attribute `data-flipped`, which is for internal use only, so it should not be set by hand. +The `sbb-flip-card` will switch to the flipped state after the user clicks on it or after the `toggle` method is called.