Skip to content

Commit 124bf6e

Browse files
bruno-amorimbruno-amorim
authored
Feat/masthead lang selector (#12309)
### Related Ticket(s) https://jsw.ibm.com/browse/ADCMS-8762 ### Description Implementation of the language selector in the Masthead's global bar: <img width="448" height="563" alt="image" src="https://github.com/user-attachments/assets/efc2094b-39f1-461f-ba3a-ae4a8b1fd971" /> ### Changelog New files created: - packages/web-components/src/components/masthead/megamenu-language-selector.ts - packages/web-components/src/components/masthead/megamenu-language-selector.scss ### Testing Instructions Since the Storybook does not have meta tags for LC and CC, we need to emulate that. We can use this code to inject some meta tags to the Storybook through the console and then click on the globe icon to test again: `const metaCC = document.createElement('meta');` `metaCC.name = 'countryCode';` `metaCC.content = 'us';` `const metaLC = document.createElement('meta');` `metaLC.name = 'languageCode';` `metaLC.content = 'en';` `document.head.appendChild(metaCC);` `document.head.appendChild(metaLC);`
1 parent 6c9bbfd commit 124bf6e

4 files changed

Lines changed: 708 additions & 9 deletions

File tree

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

Lines changed: 13 additions & 6 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.
@@ -53,6 +53,7 @@ import './masthead-global-bar';
5353
import './masthead-profile';
5454
import './masthead-profile-item';
5555
import './masthead-cart';
56+
import './megamenu-language-selector';
5657
import './megamenu';
5758
import './megamenu-heading';
5859
import './megamenu-top-nav-menu';
@@ -1184,15 +1185,20 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) {
11841185
}
11851186

11861187
protected _renderLanguageSelector() {
1188+
const isAEMCMSpage = document.querySelector('[href *= adobe-cms]');
11871189
const { hasLanguageSelector } = this;
11881190

1189-
return hasLanguageSelector === 'false'
1190-
? undefined
1191-
: html`
1191+
return hasLanguageSelector === 'true' && isAEMCMSpage
1192+
? html`
11921193
<div class="earth-language-icon" part="earth-l0-icon">
11931194
${Wikis({ part: 'earth-l0-svg' })}
11941195
</div>
1195-
`;
1196+
`
1197+
: hasLanguageSelector === 'true' && !isAEMCMSpage
1198+
? html`
1199+
<c4d-megamenu-language-selector></c4d-megamenu-language-selector>
1200+
`
1201+
: undefined;
11961202
}
11971203

11981204
protected _renderCart() {
@@ -1634,8 +1640,9 @@ class C4DMastheadComposite extends HostListenerMixin(LitElement) {
16341640
this._heightResizeObserver.observe(this.mastheadRef);
16351641

16361642
const mastheadHasLanguageSelector = this.querySelector(
1637-
'c4d-masthead[has-language-selector]'
1643+
`${c4dPrefix}-masthead[has-language-selector]`
16381644
);
1645+
16391646
if (mastheadHasLanguageSelector) {
16401647
this.hasLanguageSelector = 'true';
16411648
} else {

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
//
2-
// Copyright IBM Corp. 2020, 2024
2+
// Copyright IBM Corp. 2020, 2025
33
//
44
// This source code is licensed under the Apache-2.0 license found in the
55
// LICENSE file in the root directory of this source tree.
@@ -17,8 +17,7 @@
1717
@use '@carbon/styles/scss/components/tooltip/tooltip' as *;
1818
@use '@carbon/styles/scss/components/ui-shell/header' as *;
1919
@use '@carbon/styles/scss/components/ui-shell/side-nav' as *;
20-
// @use '@carbon/ibmdotcom-styles/scss/components/masthead' as *;
21-
@use '../../../../styles/scss/components/masthead' as *;
20+
@use '@carbon/ibmdotcom-styles/scss/components/masthead' as *;
2221
@use '@carbon/ibmdotcom-styles/scss/components/search-with-typeahead/' as *;
2322
@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
2423
@use '@carbon/web-components/scss/components/tooltip/tooltip' as *;

‎packages/web-components/src/components/masthead/megamenu-language-selector.scss‎

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
//
2+
// Copyright IBM Corp. 2020, 2025
3+
//
4+
// This source code is licensed under the Apache-2.0 license found in the
5+
// LICENSE file in the root directory of this source tree.
6+
//
7+
8+
@use '@carbon/styles/scss/utilities/convert' as *;
9+
@use '@carbon/styles/scss/spacing' as *;
10+
@use '@carbon/styles/scss/breakpoint' as *;
11+
@use '@carbon/styles/scss/theme' as *;
12+
@use '@carbon/styles/scss/compat/theme' as *;
13+
@use '@carbon/styles/scss/themes' as *;
14+
@use '@carbon/styles/scss/colors' as *;
15+
@use '@carbon/styles/scss/type' as *;
16+
17+
:host {
18+
position: relative;
19+
display: block;
20+
}
21+
22+
.earth-language-icon {
23+
display: flex;
24+
align-items: center;
25+
justify-content: center;
26+
padding: 1rem;
27+
color: $icon-secondary;
28+
cursor: pointer;
29+
padding-block-end: 14px;
30+
31+
svg {
32+
margin-block-start: -2px;
33+
}
34+
35+
&:hover {
36+
background: $background-hover;
37+
color: $icon-primary;
38+
}
39+
40+
&:active {
41+
background: $background-hover;
42+
color: $icon-primary;
43+
outline: 2px solid var(--cds-button-primary, #0f62fe);
44+
outline-offset: -2px;
45+
}
46+
47+
&:focus {
48+
outline: 2px solid var(--cds-button-primary, #0f62fe);
49+
outline-offset: -2px;
50+
}
51+
52+
&[aria-expanded='true'] {
53+
color: $icon-secondary;
54+
outline: 2px solid $focus;
55+
56+
&:hover {
57+
background-color: $background-selected;
58+
color: $icon-primary;
59+
}
60+
}
61+
}
62+
63+
#countrySwitcher {
64+
position: absolute;
65+
z-index: 1000;
66+
inset-block-start: 0.2vh;
67+
inset-inline: auto 0;
68+
}
69+
70+
#countryDropdown {
71+
overflow: hidden auto;
72+
border-radius: 4px;
73+
background-color: #ffffff;
74+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
75+
inline-size: 320px;
76+
margin-block-start: calc(var(--c4d-masthead-l0-bottom-edge, 3rem) + 1px);
77+
max-block-size: calc(
78+
100vh - var(--cds-spacing-09, 3rem) - var(--cds-layout-05, 4rem)
79+
);
80+
81+
&.hidden {
82+
display: none;
83+
}
84+
85+
@include breakpoint-between(320px, 671px) {
86+
position: fixed;
87+
z-index: 8000;
88+
block-size: calc(100% - 1px - 3rem);
89+
inline-size: 100vw;
90+
inset-block: 0;
91+
inset-inline-start: 0;
92+
max-inline-size: 100vw;
93+
will-change: inline-size;
94+
}
95+
}
96+
97+
.current-region-container {
98+
background: $background-inverse;
99+
100+
.current-region-label {
101+
padding: 15px 16px;
102+
border-block-end-width: 1px;
103+
@include type-style('label-01');
104+
105+
color: $text-on-color;
106+
}
107+
108+
.current-region-value {
109+
padding: 0 16px 15px;
110+
border-block-end-width: 1px;
111+
color: $text-on-color;
112+
@include type-style('body-compact-01');
113+
}
114+
}
115+
116+
.region-selection {
117+
@include type-style('label-01');
118+
119+
padding: 15px 16px;
120+
background: $background;
121+
border-block-end: 1px solid $border-subtle-01;
122+
color: $text-primary;
123+
}
124+
125+
.region-list-container {
126+
padding: 0;
127+
margin: 0;
128+
background: #ffffff;
129+
list-style: none;
130+
131+
li {
132+
padding: 15px 16px;
133+
background: $background;
134+
border-block-end: 1px solid $border-subtle-01;
135+
cursor: pointer;
136+
font-size: 14px;
137+
138+
&:hover {
139+
background: $background-hover;
140+
}
141+
142+
&:focus {
143+
outline: 2px solid var(--cds-button-primary, #0f62fe);
144+
outline-offset: -2px;
145+
}
146+
147+
&:active {
148+
background: $background-selected;
149+
color: $text-primary;
150+
outline: 2px solid var(--cds-button-primary, #0f62fe);
151+
outline-offset: -2px;
152+
@include type-style('body-compact-01');
153+
}
154+
}
155+
}
156+
157+
@include breakpoint-between(320px, 799px) {
158+
// Stylelint here complains that the tags for the selector are not valid, but they're web component's tags
159+
/* stylelint-disable selector-type-no-unknown */
160+
:host-context(c4d-masthead-container) {
161+
c4d-masthead {
162+
c4d-masthead-global-bar {
163+
c4d-masthead-contact {
164+
/* stylelint-disable-next-line declaration-no-important */
165+
display: none !important;
166+
}
167+
}
168+
}
169+
}
170+
}

0 commit comments

Comments
 (0)