From 007c6f0b7a79e8ed63b96ddf702ee321eec9902b Mon Sep 17 00:00:00 2001 From: Mario Castigliano Date: Wed, 14 Aug 2024 17:31:32 +0200 Subject: [PATCH 1/6] feat(sbb-container): add image slot for background image --- .../container.snapshot.spec.snap.js | 2 + .../container/container/container.scss | 23 ++++++++ .../container/container/container.stories.ts | 48 ++++++++++++++++ src/elements/container/container/container.ts | 18 +++++- .../container/container.visual.spec.ts | 55 ++++++++++++++++++- src/elements/container/container/readme.md | 9 +-- .../overlay.snapshot.spec.snap.js | 1 + 7 files changed, 149 insertions(+), 7 deletions(-) diff --git a/src/elements/container/container/__snapshots__/container.snapshot.spec.snap.js b/src/elements/container/container/__snapshots__/container.snapshot.spec.snap.js index 59f9b7d54a..3bb9aecad2 100644 --- a/src/elements/container/container/__snapshots__/container.snapshot.spec.snap.js +++ b/src/elements/container/container/__snapshots__/container.snapshot.spec.snap.js @@ -9,6 +9,8 @@ snapshots["sbb-container renders DOM"] = snapshots["sbb-container renders Shadow DOM"] = `
+ +
diff --git a/src/elements/container/container/container.scss b/src/elements/container/container/container.scss index 885a974cc0..d7f74df89d 100644 --- a/src/elements/container/container/container.scss +++ b/src/elements/container/container/container.scss @@ -4,6 +4,8 @@ @include sbb.box-sizing; :host { + --sbb-image-object-position: bottom; + display: block; } @@ -15,6 +17,10 @@ --sbb-container-background-color: var(--sbb-color-milk); } +:host([data-slot-names~='image']) { + --sbb-container-background-color: transparent; +} + :host(:not([expanded])[background-expanded]) { background-color: var(--sbb-container-background-color); } @@ -38,4 +44,21 @@ :host([expanded]) & { @include sbb.page-spacing-expanded; } + + :host([data-slot-names~='image']) & { + position: relative; + } +} + +::slotted([slot='image']) { + position: absolute; + inset: 0; + z-index: -1; +} + +::slotted(img[slot='image']) { + object-fit: cover; + object-position: var(--sbb-image-object-position); + height: 100%; + width: 100%; } diff --git a/src/elements/container/container/container.stories.ts b/src/elements/container/container/container.stories.ts index b6c9bdded4..91f6e478fd 100644 --- a/src/elements/container/container/container.stories.ts +++ b/src/elements/container/container/container.stories.ts @@ -1,10 +1,14 @@ import type { InputType } from '@storybook/types'; import type { ArgTypes, Args, Meta, StoryObj } from '@storybook/web-components'; import { type TemplateResult, html, nothing } from 'lit'; +import { styleMap } from 'lit/directives/style-map.js'; import { sbbSpread } from '../../../storybook/helpers/spread.js'; +import sampleImages from '../../core/images.js'; import '../../button/secondary-button.js'; +import '../../card.js'; +import '../../image.js'; import '../../title.js'; import './container.js'; @@ -24,6 +28,25 @@ const containerContent = (title: string, last = false): TemplateResult => html` > `; +const card = (title: string): TemplateResult => html` + + ${title} +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. +

+ See more + +`; + +const cardContainerStyle: Args = { + padding: '3rem 0', + display: 'flex', + gap: '2rem', + flexWrap: 'wrap', + justifyContent: 'center', +}; + const color: InputType = { control: { type: 'select', @@ -43,16 +66,24 @@ const backgroundExpanded: InputType = { }, }; +const imageSrc: InputType = { + control: { + type: 'text', + }, +}; + const defaultArgTypes: ArgTypes = { color, expanded, 'background-expanded': backgroundExpanded, + 'image-src': imageSrc, }; const defaultArgs: Args = { color: color.options![0], expanded: false, 'background-expanded': false, + 'image-src': undefined, }; const DefaultTemplate = (args: Args): TemplateResult => html` @@ -62,6 +93,14 @@ const DefaultTemplate = (args: Args): TemplateResult => html` `; +const BackgroundImageTemplate = ({ 'image-src': imageSrc, ...args }: Args): TemplateResult => html` + + Container with background image +
${card('Example title')} ${card('Another one')}
+ + +`; + // Only for visual regression const NestedContainerTemplate = (): TemplateResult => html` @@ -92,6 +131,15 @@ export const Milk: StoryObj = { args: { ...defaultArgs, color: color.options![2] }, }; +export const BackgroundImage: StoryObj = { + render: BackgroundImageTemplate, + argTypes: defaultArgTypes, + args: { + ...defaultArgs, + 'image-src': sampleImages[7], + }, +}; + export const Expanded: StoryObj = { render: DefaultTemplate, argTypes: defaultArgTypes, diff --git a/src/elements/container/container/container.ts b/src/elements/container/container/container.ts index 309386a7ff..e95aa5b1cb 100644 --- a/src/elements/container/container/container.ts +++ b/src/elements/container/container/container.ts @@ -7,6 +7,10 @@ import { } from 'lit'; import { customElement, property } from 'lit/decorators.js'; +import { slotState } from '../../core/decorators.js'; +import { SbbHydrationMixin } from '../../core/mixins.js'; +import type { SbbImageElement } from '../../image.js'; + import style from './container.scss?lit&inline'; /** @@ -14,9 +18,11 @@ import style from './container.scss?lit&inline'; * * @slot - Use the unnamed slot to add anything to the container. * @slot sticky-bar - The slot used by the sbb-sticky-bar component. + * @slot image - The slot used to slot an `sbb-image` to use as background. */ @customElement('sbb-container') -export class SbbContainerElement extends LitElement { +@slotState() +export class SbbContainerElement extends SbbHydrationMixin(LitElement) { public static override styles: CSSResultGroup = style; /** Whether the container is expanded. */ @@ -37,9 +43,19 @@ export class SbbContainerElement extends LitElement { } } + private _imageSlotChanged(): void { + const image: SbbImageElement = this.querySelector('sbb-image[slot="image"]') as SbbImageElement; + if (!image) { + return; + } + + image.borderRadius = 'none'; + } + protected override render(): TemplateResult { return html`
+ this._imageSlotChanged()}>
diff --git a/src/elements/container/container/container.visual.spec.ts b/src/elements/container/container/container.visual.spec.ts index 792bbfc50b..0c3114eb70 100644 --- a/src/elements/container/container/container.visual.spec.ts +++ b/src/elements/container/container/container.visual.spec.ts @@ -3,10 +3,15 @@ import { setViewport } from '@web/test-runner-commands'; import { html, type TemplateResult } from 'lit'; import { describeViewports, visualDiffDefault } from '../../core/testing/private.js'; +import { waitForImageReady } from '../../core/testing.js'; -import './container.js'; -import '../../title.js'; import '../../button.js'; +import '../../card.js'; +import '../../image.js'; +import '../../title.js'; +import './container.js'; + +const imageUrl = import.meta.resolve('../../core/testing/assets/placeholder-image.png'); describe(`sbb-container`, () => { const colorCases = ['transparent', 'white', 'milk']; @@ -25,6 +30,20 @@ describe(`sbb-container`, () => { See more `; + const backgroundImageContent = (title: string): TemplateResult => html` + Title +
+ + ${title} +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. +

+ See more + +
+ `; + const wrapperStyles = { backgroundColor: 'var(--sbb-color-silver)', padding: '0' }; describeViewports({ viewportHeight: 600 }, () => { @@ -49,6 +68,38 @@ describe(`sbb-container`, () => { ); }), ); + + it( + `background-image slotted=sbb-image`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + html` + ${backgroundImageContent('Example title')} + + `, + ); + + await waitForImageReady( + setup.snapshotElement.querySelector('sbb-container')!.querySelector('sbb-image')!, + ); + }), + ); + + it( + `background-image slotted=img`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + html` + ${backgroundImageContent('Example title')} + + `, + ); + + await waitForImageReady( + setup.snapshotElement.querySelector('sbb-container')!.querySelector('img')!, + ); + }), + ); }); describeViewports({ viewports: ['medium'] }, () => { diff --git a/src/elements/container/container/readme.md b/src/elements/container/container/readme.md index d4c78f6394..c917c0e254 100644 --- a/src/elements/container/container/readme.md +++ b/src/elements/container/container/readme.md @@ -36,7 +36,8 @@ The component has also four color variants that can be set using the `color` pro ## Slots -| Name | Description | -| ------------ | ------------------------------------------------------ | -| | Use the unnamed slot to add anything to the container. | -| `sticky-bar` | The slot used by the sbb-sticky-bar component. | +| Name | Description | +| ------------ | ---------------------------------------------------------- | +| | Use the unnamed slot to add anything to the container. | +| `image` | The slot used to slot an `sbb-image` to use as background. | +| `sticky-bar` | The slot used by the sbb-sticky-bar component. | diff --git a/src/elements/overlay/__snapshots__/overlay.snapshot.spec.snap.js b/src/elements/overlay/__snapshots__/overlay.snapshot.spec.snap.js index d42972ff48..3e43c00b3f 100644 --- a/src/elements/overlay/__snapshots__/overlay.snapshot.spec.snap.js +++ b/src/elements/overlay/__snapshots__/overlay.snapshot.spec.snap.js @@ -32,6 +32,7 @@ snapshots["sbb-overlay renders Shadow DOM"] = From cd79fb7d61246f61ff4b500e02941e4970574182 Mon Sep 17 00:00:00 2001 From: Mario Castigliano Date: Wed, 14 Aug 2024 17:58:57 +0200 Subject: [PATCH 2/6] fix: address review --- src/elements/container/container/container.scss | 5 +++-- src/elements/container/container/container.ts | 15 ++------------- 2 files changed, 5 insertions(+), 15 deletions(-) diff --git a/src/elements/container/container/container.scss b/src/elements/container/container/container.scss index d7f74df89d..2ada0e7602 100644 --- a/src/elements/container/container/container.scss +++ b/src/elements/container/container/container.scss @@ -4,8 +4,6 @@ @include sbb.box-sizing; :host { - --sbb-image-object-position: bottom; - display: block; } @@ -51,6 +49,9 @@ } ::slotted([slot='image']) { + --sbb-image-border-radius: 0; + --sbb-image-object-position: end; + position: absolute; inset: 0; z-index: -1; diff --git a/src/elements/container/container/container.ts b/src/elements/container/container/container.ts index e95aa5b1cb..ee268e4a9c 100644 --- a/src/elements/container/container/container.ts +++ b/src/elements/container/container/container.ts @@ -8,8 +8,6 @@ import { import { customElement, property } from 'lit/decorators.js'; import { slotState } from '../../core/decorators.js'; -import { SbbHydrationMixin } from '../../core/mixins.js'; -import type { SbbImageElement } from '../../image.js'; import style from './container.scss?lit&inline'; @@ -22,7 +20,7 @@ import style from './container.scss?lit&inline'; */ @customElement('sbb-container') @slotState() -export class SbbContainerElement extends SbbHydrationMixin(LitElement) { +export class SbbContainerElement extends LitElement { public static override styles: CSSResultGroup = style; /** Whether the container is expanded. */ @@ -43,19 +41,10 @@ export class SbbContainerElement extends SbbHydrationMixin(LitElement) { } } - private _imageSlotChanged(): void { - const image: SbbImageElement = this.querySelector('sbb-image[slot="image"]') as SbbImageElement; - if (!image) { - return; - } - - image.borderRadius = 'none'; - } - protected override render(): TemplateResult { return html`
- this._imageSlotChanged()}> +
From 10d0752ad5e16997be5811d3cd1ed7d0bc779f3c Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Wed, 14 Aug 2024 21:51:32 +0200 Subject: [PATCH 3/6] fix: jeri review --- .../container.snapshot.spec.snap.js | 6 +- .../container/container/container.scss | 19 +++- .../container/container.snapshot.spec.ts | 2 +- .../container/container/container.stories.ts | 47 ++++++---- src/elements/container/container/container.ts | 5 +- .../container/container.visual.spec.ts | 91 ++++++++++--------- src/elements/container/container/readme.md | 6 ++ 7 files changed, 105 insertions(+), 71 deletions(-) diff --git a/src/elements/container/container/__snapshots__/container.snapshot.spec.snap.js b/src/elements/container/container/__snapshots__/container.snapshot.spec.snap.js index 3bb9aecad2..ead4802056 100644 --- a/src/elements/container/container/__snapshots__/container.snapshot.spec.snap.js +++ b/src/elements/container/container/__snapshots__/container.snapshot.spec.snap.js @@ -11,8 +11,10 @@ snapshots["sbb-container renders Shadow DOM"] = `
- - +
+ + +
diff --git a/src/elements/container/container/container.scss b/src/elements/container/container/container.scss index 2ada0e7602..e8469ddd9a 100644 --- a/src/elements/container/container/container.scss +++ b/src/elements/container/container/container.scss @@ -5,6 +5,8 @@ :host { display: block; + + --sbb-container-image-position: end; } :host([color='white']) { @@ -48,18 +50,29 @@ } } +.sbb-container__content { + position: relative; +} + ::slotted([slot='image']) { --sbb-image-border-radius: 0; - --sbb-image-object-position: end; + --sbb-image-object-position: var(--sbb-container-image-position); position: absolute; inset: 0; - z-index: -1; + + :host(:not([expanded])) & { + @include sbb.mq($from: ultra) { + --sbb-image-border-radius: var(--sbb-border-radius-4x); + + border-radius: var(--sbb-border-radius-4x); + } + } } ::slotted(img[slot='image']) { object-fit: cover; - object-position: var(--sbb-image-object-position); + object-position: var(--sbb-container-image-position); height: 100%; width: 100%; } diff --git a/src/elements/container/container/container.snapshot.spec.ts b/src/elements/container/container/container.snapshot.spec.ts index 55333c091a..7520f31bc2 100644 --- a/src/elements/container/container/container.snapshot.spec.ts +++ b/src/elements/container/container/container.snapshot.spec.ts @@ -11,7 +11,7 @@ describe(`sbb-container`, () => { let element: SbbContainerElement; beforeEach(async () => { - element = await fixture(html` `); + element = await fixture(html``); }); it('DOM', async () => { diff --git a/src/elements/container/container/container.stories.ts b/src/elements/container/container/container.stories.ts index 91f6e478fd..1b4a477852 100644 --- a/src/elements/container/container/container.stories.ts +++ b/src/elements/container/container/container.stories.ts @@ -1,7 +1,6 @@ import type { InputType } from '@storybook/types'; -import type { ArgTypes, Args, Meta, StoryObj } from '@storybook/web-components'; -import { type TemplateResult, html, nothing } from 'lit'; -import { styleMap } from 'lit/directives/style-map.js'; +import type { Args, ArgTypes, Meta, StoryObj } from '@storybook/web-components'; +import { html, nothing, type TemplateResult } from 'lit'; import { sbbSpread } from '../../../storybook/helpers/spread.js'; import sampleImages from '../../core/images.js'; @@ -23,30 +22,24 @@ const containerContent = (title: string, last = false): TemplateResult => html` laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

- See more + + See more + `; const card = (title: string): TemplateResult => html` - - ${title} -

+ + ${title} +

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

- See more + + See more + `; -const cardContainerStyle: Args = { - padding: '3rem 0', - display: 'flex', - gap: '2rem', - flexWrap: 'wrap', - justifyContent: 'center', -}; - const color: InputType = { control: { type: 'select', @@ -96,8 +89,22 @@ const DefaultTemplate = (args: Args): TemplateResult => html` const BackgroundImageTemplate = ({ 'image-src': imageSrc, ...args }: Args): TemplateResult => html` Container with background image -
${card('Example title')} ${card('Another one')}
- + +
${card('Example title')} ${card('Another one')}
+ `; diff --git a/src/elements/container/container/container.ts b/src/elements/container/container/container.ts index ee268e4a9c..67936d3e03 100644 --- a/src/elements/container/container/container.ts +++ b/src/elements/container/container/container.ts @@ -17,6 +17,7 @@ import style from './container.scss?lit&inline'; * @slot - Use the unnamed slot to add anything to the container. * @slot sticky-bar - The slot used by the sbb-sticky-bar component. * @slot image - The slot used to slot an `sbb-image` to use as background. + * @cssprop [--sbb-container-image-position=end] - Define where the image should stick, if it has to be cropped. */ @customElement('sbb-container') @slotState() @@ -45,7 +46,9 @@ export class SbbContainerElement extends LitElement { return html`
- +
+ +
`; diff --git a/src/elements/container/container/container.visual.spec.ts b/src/elements/container/container/container.visual.spec.ts index 0c3114eb70..9cea9b98f7 100644 --- a/src/elements/container/container/container.visual.spec.ts +++ b/src/elements/container/container/container.visual.spec.ts @@ -2,7 +2,11 @@ import { SbbBreakpointUltraMin } from '@sbb-esta/lyne-design-tokens'; import { setViewport } from '@web/test-runner-commands'; import { html, type TemplateResult } from 'lit'; -import { describeViewports, visualDiffDefault } from '../../core/testing/private.js'; +import { + describeViewports, + loadAssetAsBase64, + visualDiffDefault, +} from '../../core/testing/private.js'; import { waitForImageReady } from '../../core/testing.js'; import '../../button.js'; @@ -12,12 +16,28 @@ import '../../title.js'; import './container.js'; const imageUrl = import.meta.resolve('../../core/testing/assets/placeholder-image.png'); +const imageBase64 = await loadAssetAsBase64(imageUrl); describe(`sbb-container`, () => { const colorCases = ['transparent', 'white', 'milk']; const backgroundExpandedCases = [false, true]; + const images = [ + { + selector: 'sbb-image', + image: html``, + }, + { + selector: 'img', + image: html``, + }, + ]; + const containerContent = (): TemplateResult => html` Example title

The container component will give its content the correct spacing.

@@ -30,18 +50,12 @@ describe(`sbb-container`, () => { See more `; - const backgroundImageContent = (title: string): TemplateResult => html` - Title -
- - ${title} -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt - ut labore et dolore magna aliqua. -

- See more - -
+ const backgroundImageContent = html` + Container with background image + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna aliqua. + `; const wrapperStyles = { backgroundColor: 'var(--sbb-color-silver)', padding: '0' }; @@ -69,37 +83,26 @@ describe(`sbb-container`, () => { }), ); - it( - `background-image slotted=sbb-image`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture( - html` - ${backgroundImageContent('Example title')} - - `, - ); - - await waitForImageReady( - setup.snapshotElement.querySelector('sbb-container')!.querySelector('sbb-image')!, - ); - }), - ); - - it( - `background-image slotted=img`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture( - html` - ${backgroundImageContent('Example title')} - - `, - ); - - await waitForImageReady( - setup.snapshotElement.querySelector('sbb-container')!.querySelector('img')!, - ); - }), - ); + describe('background-image', () => { + for (const expanded of [false, true]) { + describe(`expanded=${expanded}`, () => { + for (const image of images) { + it( + `slotted=${image.selector}`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + html` + ${backgroundImageContent} ${image.image} + `, + ); + + await waitForImageReady(setup.snapshotElement.querySelector(image.selector)!); + }), + ); + } + }); + } + }); }); describeViewports({ viewports: ['medium'] }, () => { diff --git a/src/elements/container/container/readme.md b/src/elements/container/container/readme.md index c917c0e254..7621b864a4 100644 --- a/src/elements/container/container/readme.md +++ b/src/elements/container/container/readme.md @@ -34,6 +34,12 @@ The component has also four color variants that can be set using the `color` pro | `color` | `color` | public | `'transparent' \| 'white' \| 'milk'` | `'white'` | Color of the container, like transparent, white etc. | | `expanded` | `expanded` | public | `boolean` | `false` | Whether the container is expanded. | +## CSS Properties + +| Name | Default | Description | +| -------------------------------- | ------- | ------------------------------------------------------------- | +| `--sbb-container-image-position` | `end` | Define where the image should stick, if it has to be cropped. | + ## Slots | Name | Description | From 6ea4fb059ece252dff039990c2063adc5d566225 Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Wed, 14 Aug 2024 22:05:40 +0200 Subject: [PATCH 4/6] refactor: delegate image position to consumer --- src/elements/container/container/container.scss | 4 ---- src/elements/container/container/container.stories.ts | 7 ++++++- src/elements/container/container/container.ts | 1 - src/elements/container/container/readme.md | 9 +++------ 4 files changed, 9 insertions(+), 12 deletions(-) diff --git a/src/elements/container/container/container.scss b/src/elements/container/container/container.scss index e8469ddd9a..f777e4f155 100644 --- a/src/elements/container/container/container.scss +++ b/src/elements/container/container/container.scss @@ -5,8 +5,6 @@ :host { display: block; - - --sbb-container-image-position: end; } :host([color='white']) { @@ -56,7 +54,6 @@ ::slotted([slot='image']) { --sbb-image-border-radius: 0; - --sbb-image-object-position: var(--sbb-container-image-position); position: absolute; inset: 0; @@ -72,7 +69,6 @@ ::slotted(img[slot='image']) { object-fit: cover; - object-position: var(--sbb-container-image-position); height: 100%; width: 100%; } diff --git a/src/elements/container/container/container.stories.ts b/src/elements/container/container/container.stories.ts index 1b4a477852..e141852b57 100644 --- a/src/elements/container/container/container.stories.ts +++ b/src/elements/container/container/container.stories.ts @@ -104,7 +104,12 @@ const BackgroundImageTemplate = ({ 'image-src': imageSrc, ...args }: Args): Temp }
${card('Example title')} ${card('Another one')}
- + `; diff --git a/src/elements/container/container/container.ts b/src/elements/container/container/container.ts index 67936d3e03..6ffdb3e177 100644 --- a/src/elements/container/container/container.ts +++ b/src/elements/container/container/container.ts @@ -17,7 +17,6 @@ import style from './container.scss?lit&inline'; * @slot - Use the unnamed slot to add anything to the container. * @slot sticky-bar - The slot used by the sbb-sticky-bar component. * @slot image - The slot used to slot an `sbb-image` to use as background. - * @cssprop [--sbb-container-image-position=end] - Define where the image should stick, if it has to be cropped. */ @customElement('sbb-container') @slotState() diff --git a/src/elements/container/container/readme.md b/src/elements/container/container/readme.md index 7621b864a4..5276b48a0c 100644 --- a/src/elements/container/container/readme.md +++ b/src/elements/container/container/readme.md @@ -14,6 +14,9 @@ The `sbb-container` is a component that displays its content with the default pa The `sbb-container` content is provided via an unnamed slot. +The `image` slot can be used to place a background image. If you need to control the object position, +use CSS object-position for slotted `img`, or `--sbb-image-object-position` variable for slotted `sbb-image`. + ## Style By default `sbb-container` uses the `page spacing` defined in the [layout documentation](/docs/styles-layout--docs). Optionally the user can use the `expanded` property (default: `false`) to switch to the `page spacing expanded` layout. @@ -34,12 +37,6 @@ The component has also four color variants that can be set using the `color` pro | `color` | `color` | public | `'transparent' \| 'white' \| 'milk'` | `'white'` | Color of the container, like transparent, white etc. | | `expanded` | `expanded` | public | `boolean` | `false` | Whether the container is expanded. | -## CSS Properties - -| Name | Default | Description | -| -------------------------------- | ------- | ------------------------------------------------------------- | -| `--sbb-container-image-position` | `end` | Define where the image should stick, if it has to be cropped. | - ## Slots | Name | Description | From 2435617da5d157a2485794784459851da840c104 Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Thu, 15 Aug 2024 12:08:12 +0200 Subject: [PATCH 5/6] fix: fix padding --- src/elements/container/container/container.scss | 2 ++ src/elements/container/container/container.stories.ts | 4 ++-- src/elements/container/container/container.visual.spec.ts | 4 ++-- src/elements/container/container/readme.md | 4 +++- 4 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/elements/container/container/container.scss b/src/elements/container/container/container.scss index f777e4f155..bedbbc73ab 100644 --- a/src/elements/container/container/container.scss +++ b/src/elements/container/container/container.scss @@ -17,6 +17,7 @@ :host([data-slot-names~='image']) { --sbb-container-background-color: transparent; + --sbb-container-padding: var(--sbb-spacing-responsive-xxl); } :host(:not([expanded])[background-expanded]) { @@ -25,6 +26,7 @@ .sbb-container { background-color: var(--sbb-container-background-color); + padding: var(--sbb-container-padding); @include sbb.ignore-children-margin; diff --git a/src/elements/container/container/container.stories.ts b/src/elements/container/container/container.stories.ts index e141852b57..cfcac56be4 100644 --- a/src/elements/container/container/container.stories.ts +++ b/src/elements/container/container/container.stories.ts @@ -88,11 +88,11 @@ const DefaultTemplate = (args: Args): TemplateResult => html` const BackgroundImageTemplate = ({ 'image-src': imageSrc, ...args }: Args): TemplateResult => html` - Container with background image + Container with background image