Skip to content

Commit b1c736d

Browse files
marcelojcsmarcelojcs
authored
Merge branch 'main' into ADCMS-9105-leadspace
2 parents c9235c6 + 37fa62c commit b1c736d

4 files changed

Lines changed: 160 additions & 8 deletions

File tree

‎packages/styles/scss/components/video-player/_video-player.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,6 @@ $aspect-ratios: ((16, 9), (9, 16), (2, 1), (1, 2), (4, 3), (3, 4), (1, 1));
4343
:host(#{$c4d-prefix}-video-player[background-mode]),
4444
.#{$c4d-prefix}--video-player[background-mode] {
4545
.#{$c4d-prefix}--video-player__video-container {
46-
padding: 0;
4746
block-size: 100%;
4847
}
4948

‎packages/web-components/src/components/footer/footer-logo.ts‎

Lines changed: 63 additions & 4 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.
@@ -46,15 +46,74 @@ class C4DFooterLogo extends StableSelectorMixin(FocusMixin(LitElement)) {
4646
@property({ reflect: true })
4747
slot = 'brand';
4848

49+
/**
50+
* The custom logo path, if it's enabled
51+
*/
52+
@property({ type: String, attribute: false })
53+
customLogoPath = '';
54+
55+
/**
56+
* The custom logo alternative text, if it's enabled
57+
*/
58+
@property({ type: String, attribute: false })
59+
customLogoAlt = '';
60+
61+
/**
62+
* The custom logo href, if it's enabled
63+
*/
64+
@property({ type: String, attribute: false })
65+
customLogoHref = '';
66+
67+
/**
68+
* If c4d-footer-container has the attribute 'custom-logo-override', it enables the custom logo and all its custom info
69+
*/
70+
private hasCustomLogo() {
71+
const footerContainerWithCustomLogo = this.closest(
72+
'c4d-footer-container[custom-logo-override]'
73+
);
74+
75+
if (!footerContainerWithCustomLogo) {
76+
return;
77+
}
78+
79+
const path = footerContainerWithCustomLogo.getAttribute(
80+
'custom-logo-override'
81+
);
82+
const alt = footerContainerWithCustomLogo.getAttribute('custom-logo-alt');
83+
const href = footerContainerWithCustomLogo.getAttribute('custom-logo-href');
84+
85+
if (path) {
86+
this.customLogoPath = path;
87+
}
88+
if (alt) {
89+
this.customLogoAlt = alt;
90+
}
91+
if (href) {
92+
this.href = href;
93+
}
94+
}
95+
96+
connectedCallback() {
97+
super.connectedCallback();
98+
this.hasCustomLogo();
99+
}
100+
49101
render() {
50-
const { href, size } = this;
102+
const { href, size, customLogoPath, customLogoAlt } = this;
103+
51104
return html`
52105
<a
53106
part="logo-link"
54107
class="${c4dPrefix}--footer-logo__link"
55-
aria-label="IBM logo"
108+
aria-label="${customLogoAlt || 'IBM logo'}"
56109
href="${ifDefined(href)}">
57-
${size !== FOOTER_SIZE.MICRO
110+
${customLogoPath
111+
? html`<img
112+
class="custom-logo-override"
113+
src="${customLogoPath}"
114+
alt="${customLogoAlt || 'Logo'}"
115+
part="custom-logo-footer" />`
116+
: size !== FOOTER_SIZE.MICRO
58117
? IBM8BarLogoH65White()
59118
: IBM8BarLogoH23White()}
60119
<slot></slot>

‎packages/web-components/src/components/masthead/masthead-logo.ts‎

Lines changed: 71 additions & 3 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.
@@ -67,9 +67,72 @@ class C4DMastheadLogo extends FocusMixin(
6767
@property({ reflect: true })
6868
slot = 'brand';
6969

70+
/**
71+
* The custom logo path, if it's enabled
72+
*/
73+
@property({ type: String, attribute: false })
74+
customLogoPath = '';
75+
76+
/**
77+
* The custom logo alternative text, if it's enabled
78+
*/
79+
@property({ type: String, attribute: false })
80+
customLogoAlt = '';
81+
82+
/**
83+
* The custom logo href, if it's enabled
84+
*/
85+
@property({ type: String, attribute: false })
86+
customLogoHref = '';
87+
88+
/**
89+
* If c4d-masthead-container has the attribute 'custom-logo-override', it enables the custom logo and all its custom info
90+
*/
91+
private hasCustomLogo() {
92+
const mastheadContainerWithCustomLogo = this.closest(
93+
'c4d-masthead-container[custom-logo-override]'
94+
);
95+
96+
if (!mastheadContainerWithCustomLogo) {
97+
return;
98+
}
99+
100+
const path = mastheadContainerWithCustomLogo.getAttribute(
101+
'custom-logo-override'
102+
);
103+
const alt = mastheadContainerWithCustomLogo.getAttribute('custom-logo-alt');
104+
const href =
105+
mastheadContainerWithCustomLogo.getAttribute('custom-logo-href');
106+
107+
if (path) {
108+
this.customLogoPath = path;
109+
}
110+
if (alt) {
111+
this.customLogoAlt = alt;
112+
}
113+
if (href) {
114+
this.href = href;
115+
}
116+
}
117+
70118
// eslint-disable-next-line class-methods-use-this
71119
protected _renderInner() {
72-
return html` <slot>${IBM8BarLogoH23()}</slot> `;
120+
return html`
121+
<slot>
122+
${this.customLogoPath
123+
? html`<img
124+
class="custom-logo-override"
125+
src="${this.customLogoPath}"
126+
alt="${this.customLogoAlt || 'Logo'}"
127+
part="custom-logo-masthead" />`
128+
: IBM8BarLogoH23()}
129+
</slot>
130+
`;
131+
}
132+
133+
connectedCallback() {
134+
super.connectedCallback();
135+
this.hasCustomLogo();
73136
}
74137

75138
updated(changedProperties) {
@@ -79,7 +142,12 @@ class C4DMastheadLogo extends FocusMixin(
79142
this._hasSearchActive = this.hideLogo;
80143
}
81144
if (linkNode) {
82-
linkNode.setAttribute('aria-label', 'IBM logo');
145+
if (this.customLogoAlt) {
146+
linkNode.setAttribute('aria-label', `${this.customLogoAlt}`);
147+
} else {
148+
linkNode.setAttribute('aria-label', 'IBM logo');
149+
}
150+
83151
linkNode.classList.remove(`${prefix}--link`);
84152
linkNode.classList.toggle(
85153
`${c4dPrefix}-ce--header__logo--has-search-active`,

‎packages/web-components/src/components/masthead/masthead.scss‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,32 @@ $pos-btn-bottom: calc(
7979
inline-size: 58px;
8080
}
8181

82+
[part='link']:has(img.custom-logo-override) {
83+
display: flex;
84+
align-items: center;
85+
justify-content: center;
86+
padding: 0 5px;
87+
block-size: 48px;
88+
inline-size: 142px;
89+
90+
@include breakpoint-between(lg, max) {
91+
inline-size: 126px;
92+
}
93+
94+
@include breakpoint-between(sm, lg) {
95+
inline-size: 94px;
96+
}
97+
}
98+
99+
[part='link'] img.custom-logo-override {
100+
display: block;
101+
block-size: auto;
102+
inline-size: auto;
103+
max-block-size: 100%;
104+
max-inline-size: 100%;
105+
object-fit: contain;
106+
}
107+
82108
.#{$c4d-prefix}-ce--header__logo--has-search-active {
83109
@include breakpoint-down(md) {
84110
display: none;

0 commit comments

Comments
 (0)