Skip to content

Commit d3547f7

Browse files
bruno-amorimbruno-amorim
committed
feat(masthead): new language selector in global bar
1 parent 5cf2862 commit d3547f7

4 files changed

Lines changed: 728 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)