Skip to content

Commit 73a0a0d

Browse files
Valentin-Sorin-NicolaeValentin-Sorin-Nicolae
authored
Merge branch 'main' into renovate/carbon-layout-11.x
2 parents eddc94e + e097f2d commit 73a0a0d

5 files changed

Lines changed: 117 additions & 47 deletions

File tree

‎packages/web-components/src/components/carousel/__tests__/carousel.test.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -369,8 +369,10 @@ describe('c4d-carousel', function () {
369369
render(
370370
template({
371371
children: html`
372-
<div style="position:absolute;width:300px;height:1px"></div>
373-
<div style="position:absolute;width:300px;height:1px"></div>
372+
<div style="width:300px;height:100px;margin-right:16px"></div>
373+
<div style="width:300px;height:100px;margin-right:16px"></div>
374+
<div style="width:300px;height:100px;margin-right:16px"></div>
375+
<div style="width:300px;height:100px;margin-right:16px"></div>
374376
`,
375377
}),
376378
document.body
@@ -391,7 +393,7 @@ describe('c4d-carousel', function () {
391393
);
392394
await Promise.resolve();
393395
expect((carousel as any)._contentsBaseWidth).toBe(700);
394-
expect((carousel as any)._gap).toBe(100);
396+
expect((carousel as any)._gap).toBe(16);
395397
});
396398
});
397399

‎packages/web-components/src/components/carousel/carousel.ts‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -564,19 +564,14 @@ class C4DCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {
564564
* Calculates the width between cards.
565565
*/
566566
private _updateGap() {
567-
const { _contentsNode: contentsNode, _slotNode: slotNode } = this;
568-
const elems = slotNode!
569-
.assignedNodes()
570-
.filter((node) => node.nodeType === Node.ELEMENT_NODE);
567+
const { _slotNode: slotNode } = this;
568+
const elems = slotNode!.assignedElements();
569+
571570
this._gap =
572-
elems.length <= 1
571+
elems.length <= 2
573572
? 0
574-
: (contentsNode!.scrollWidth -
575-
elems.reduce(
576-
(acc, elem) => acc + ((elem as HTMLElement).offsetWidth ?? 0),
577-
0
578-
)) /
579-
(elems.length - 1);
573+
: elems[1].getBoundingClientRect().left -
574+
elems[0].getBoundingClientRect().right;
580575
}
581576

582577
private _updateContentsPosition(changedProperties) {

‎packages/web-components/src/components/feature-section/__stories__/feature-section.stories.ts‎

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* @license
33
*
4-
* Copyright IBM Corp. 2020, 2023
4+
* Copyright IBM Corp. 2020, 2025
55
*
66
* This source code is licensed under the Apache-2.0 license found in the
77
* LICENSE file in the root directory of this source tree.
@@ -19,7 +19,7 @@ import imgMd4x3 from '../../../../.storybook/storybook-images/assets/960/fpo--4x
1919
import imgSm1x1 from '../../../../.storybook/storybook-images/assets/720/fpo--1x1--720x720--002.jpg';
2020
import imgXs1x1 from '../../../../.storybook/storybook-images/assets/320/fpo--1x1--320x320--002.jpg';
2121
import { CTA_TYPE } from '../../cta/defs';
22-
import { COLOR_SCHEME } from '../defs';
22+
import { COLOR_SCHEME, MEDIA_ALIGNMENT } from '../defs';
2323

2424
import readme from './README.stories.mdx';
2525
import textNullable from '../../../../.storybook/knob-text-nullable';
@@ -31,6 +31,11 @@ import {
3131
types,
3232
} from '../../cta/__stories__/ctaTypeConfig';
3333

34+
const mediaAlignment = {
35+
[`Left`]: MEDIA_ALIGNMENT.LEFT,
36+
[`Right`]: MEDIA_ALIGNMENT.RIGHT,
37+
};
38+
3439
const colorSchemeTypes = {
3540
[`${COLOR_SCHEME.REGULAR}`]: COLOR_SCHEME.REGULAR,
3641
[`${COLOR_SCHEME.INVERSE}`]: COLOR_SCHEME.INVERSE,
@@ -39,8 +44,16 @@ const colorSchemeTypes = {
3944
};
4045

4146
export const Default = (args) => {
42-
const { alt, colorScheme, eyebrow, heading, copy, href, ctaType } =
43-
args?.['c4d-feature-section'] ?? {};
47+
const {
48+
alt,
49+
mediaAlign,
50+
colorScheme,
51+
eyebrow,
52+
heading,
53+
copy,
54+
href,
55+
ctaType,
56+
} = args?.['c4d-feature-section'] ?? {};
4457
let videoFooterCopy;
4558

4659
if (ctaType === CTA_TYPE.VIDEO) {
@@ -51,7 +64,9 @@ export const Default = (args) => {
5164
}
5265
return html`
5366
<c4d-video-cta-container>
54-
<c4d-feature-section color-scheme="${colorScheme}">
67+
<c4d-feature-section
68+
media-alignment="${mediaAlign}"
69+
color-scheme="${colorScheme}">
5570
<c4d-image
5671
slot="image"
5772
default-src="${ifDefined(imgLg1x1)}"
@@ -109,6 +124,12 @@ export default {
109124
);
110125

111126
return {
127+
mediaAlign: select(
128+
'Media Alignment',
129+
mediaAlignment,
130+
MEDIA_ALIGNMENT.RIGHT
131+
),
132+
112133
colorScheme: select(
113134
'Color scheme:',
114135
colorSchemeTypes,

‎packages/web-components/src/components/feature-section/defs.ts‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,27 @@
11
/**
22
* @license
33
*
4-
* Copyright IBM Corp. 2021
4+
* Copyright IBM Corp. 2020, 2025
55
*
66
* This source code is licensed under the Apache-2.0 license found in the
77
* LICENSE file in the root directory of this source tree.
88
*/
99

10+
/**
11+
* Type of the Media Alignment
12+
*/
13+
export enum MEDIA_ALIGNMENT {
14+
/**
15+
* Right alignment
16+
*/
17+
RIGHT = 'right',
18+
19+
/**
20+
* Left alignment
21+
*/
22+
LEFT = 'left',
23+
}
24+
1025
/**
1126
* Type of color scheme
1227
*/

‎packages/web-components/src/components/feature-section/feature-section.ts‎

Lines changed: 64 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* @license
33
*
4-
* Copyright IBM Corp. 2020, 2024
4+
* Copyright IBM Corp. 2020, 2025
55
*
66
* This source code is licensed under the Apache-2.0 license found in the
77
* LICENSE file in the root directory of this source tree.
@@ -14,7 +14,7 @@ import C4DFeatureCard from '../feature-card/feature-card';
1414
import '../image/image';
1515
import styles from './feature-section.scss';
1616
import StableSelectorMixin from '../../globals/mixins/stable-selector';
17-
import { COLOR_SCHEME } from './defs';
17+
import { COLOR_SCHEME, MEDIA_ALIGNMENT } from './defs';
1818
import { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
1919

2020
const { prefix, stablePrefix: c4dPrefix } = settings;
@@ -42,37 +42,74 @@ class C4DFeatureSection extends StableSelectorMixin(C4DFeatureCard) {
4242
@property({ attribute: 'color-scheme', reflect: true })
4343
colorScheme = COLOR_SCHEME.REGULAR;
4444

45+
@property({ attribute: 'media-alignment', reflect: true })
46+
mediaAlignment = MEDIA_ALIGNMENT.RIGHT;
47+
4548
render() {
4649
return html`
47-
<div
48-
class="${prefix}--grid ${prefix}--feature-section"
49-
part="grid grid--wrapper">
50-
<div
51-
class="${prefix}--row ${prefix}--feature-section__container"
52-
part="row row--container">
53-
<div
54-
class="${prefix}--col-sm-4 ${prefix}--col-md-8 ${prefix}--col-lg-8 ${prefix}--feature-section__body"
55-
part="col col--body-wrapper">
56-
<div class="${prefix}--grid" part="grid grid--body">
57-
<div class="${prefix}--row" part="row row--body">
50+
${this.mediaAlignment === MEDIA_ALIGNMENT.LEFT
51+
? html`
52+
<div
53+
class="${prefix}--grid ${prefix}--feature-section"
54+
part="grid grid--wrapper">
55+
<div
56+
class="${prefix}--row ${prefix}--feature-section__container"
57+
part="row row--container">
58+
<div
59+
class="${prefix}--col-sm-4 ${prefix}--col-md-8 ${prefix}--col-lg-8 ${prefix}--feature-section__image"
60+
part="col col--image">
61+
<slot name="image"></slot>
62+
</div>
63+
<div
64+
class="${prefix}--col-sm-4 ${prefix}--col-md-8 ${prefix}--col-lg-8 ${prefix}--feature-section__body"
65+
part="col col--body-wrapper">
66+
<div class="${prefix}--grid" part="grid grid--body">
67+
<div class="${prefix}--row" part="row row--body">
68+
<div
69+
class="${prefix}--col-sm-4 ${prefix}--col-md-6 ${prefix}--col-lg-12"
70+
part="col col--body">
71+
<slot name="eyebrow"></slot>
72+
<slot name="heading"></slot>
73+
<slot name="copy"></slot>
74+
</div>
75+
</div>
76+
</div>
77+
<slot name="footer"></slot>
78+
</div>
79+
</div>
80+
</div>
81+
`
82+
: html`
83+
<div
84+
class="${prefix}--grid ${prefix}--feature-section"
85+
part="grid grid--wrapper">
86+
<div
87+
class="${prefix}--row ${prefix}--feature-section__container"
88+
part="row row--container">
89+
<div
90+
class="${prefix}--col-sm-4 ${prefix}--col-md-8 ${prefix}--col-lg-8 ${prefix}--feature-section__body"
91+
part="col col--body-wrapper">
92+
<div class="${prefix}--grid" part="grid grid--body">
93+
<div class="${prefix}--row" part="row row--body">
94+
<div
95+
class="${prefix}--col-sm-4 ${prefix}--col-md-6 ${prefix}--col-lg-12"
96+
part="col col--body">
97+
<slot name="eyebrow"></slot>
98+
<slot name="heading"></slot>
99+
<slot name="copy"></slot>
100+
</div>
101+
</div>
102+
</div>
103+
</div>
58104
<div
59-
class="${prefix}--col-sm-4 ${prefix}--col-md-6 ${prefix}--col-lg-12"
60-
part="col col--body">
61-
<slot name="eyebrow"></slot>
62-
<slot name="heading"></slot>
63-
<slot name="copy"></slot>
105+
class="${prefix}--col-sm-4 ${prefix}--col-md-8 ${prefix}--col-lg-8 ${prefix}--feature-section__image"
106+
part="col col--image">
107+
<slot name="image"></slot>
108+
<slot name="footer"></slot>
64109
</div>
65110
</div>
66111
</div>
67-
</div>
68-
<div
69-
class="${prefix}--col-sm-4 ${prefix}--col-md-8 ${prefix}--col-lg-8 ${prefix}--feature-section__image"
70-
part="col col--image">
71-
<slot name="image"></slot>
72-
<slot name="footer"></slot>
73-
</div>
74-
</div>
75-
</div>
112+
`}
76113
`;
77114
}
78115

0 commit comments

Comments
 (0)