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`