diff --git a/packages/web-components/src/components/dotcom-shell/dotcom-shell-container.ts b/packages/web-components/src/components/dotcom-shell/dotcom-shell-container.ts index e499f1bdbfd..8a6344b986e 100644 --- a/packages/web-components/src/components/dotcom-shell/dotcom-shell-container.ts +++ b/packages/web-components/src/components/dotcom-shell/dotcom-shell-container.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -29,6 +29,7 @@ import { mapStateToProps as mapStateToPropsMasthead, mapDispatchToProps as mapDispatchToPropsMasthead, } from '../masthead/masthead-container'; +import C4DMastheadComposite from '../masthead/masthead-composite'; import C4DDotcomShellComposite from './dotcom-shell-composite'; import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element'; @@ -60,11 +61,12 @@ export type DotcomShellContainerActions = * @returns The converted version of the given state, tailored for ``. */ export function mapStateToProps( - state: MastheadContainerState & FooterContainerState + state: MastheadContainerState & FooterContainerState, + self: C4DMastheadComposite ): MastheadContainerStateProps & FooterContainerStateProps { const footerProps = mapStateToPropsFooter(state); return { - ...mapStateToPropsMasthead(state), + ...mapStateToPropsMasthead(state, self), ...Object.keys(footerProps).reduce((acc, key) => { acc[key !== 'links' ? key : 'footerLinks'] = footerProps[key]; return acc; diff --git a/packages/web-components/src/components/masthead/__stories__/masthead.stories.ts b/packages/web-components/src/components/masthead/__stories__/masthead.stories.ts index f79032af8e8..5dc7ef928ce 100644 --- a/packages/web-components/src/components/masthead/__stories__/masthead.stories.ts +++ b/packages/web-components/src/components/masthead/__stories__/masthead.stories.ts @@ -104,7 +104,7 @@ export const Default = (args) => { ${useMock ? html` - { unauthenticatedProfileItems )}" custom-profile-login="${customProfileLogin}" - auth-method="${MASTHEAD_AUTH_METHOD.DEFAULT}"> + auth-method="${MASTHEAD_AUTH_METHOD.DEFAULT}"> ` : html` { ${useMock ? html` - + ?custom-typeahead-api=${true}> ` : html` { ${useMock ? html` - + )}"> ` : html` { ${useMock ? html` - + .platformUrl="${ifNonEmpty(platformUrl)}"> ` : html` { ${useMock ? html` - + )}"> ` : html` { ${useMock ? html` - + : null}"> ` : html` { ${useMock ? html` - + .scopeParameters=${scopeParameters}> ` : html` `. */ export function mapStateToProps( - state: MastheadContainerState + state: MastheadContainerState, + self: C4DMastheadComposite ): MastheadContainerStateProps { const { localeAPI, translateAPI, profileAPI } = state; const { language } = localeAPI ?? {}; const { translations } = translateAPI ?? {}; const { request } = profileAPI ?? {}; + const { l0Data: userL0Data } = self; // Attempt to collect data from current/new and deprecated locations. - let l0Data; + let endpointl0Data; let profileItems; if (language) { - l0Data = { + endpointl0Data = { current: translations?.[language]?.masthead?.nav, deprecated: translations?.[language]?.mastheadNav?.links, }; @@ -118,8 +121,11 @@ export function mapStateToProps( return pickBy( { - // Progressively enhance to new L0 data shape. - l0Data: !language ? undefined : l0Data.current || l0Data.deprecated, + // Respect user-set L0 data. Otherwise, progressively enhance to new shape. + l0Data: + !language || userL0Data + ? undefined + : endpointl0Data.current || endpointl0Data.deprecated, // Progressively enhance to new profile items shape. authenticatedProfileItems: !language ? undefined diff --git a/packages/web-components/src/globals/mixins/connect.ts b/packages/web-components/src/globals/mixins/connect.ts index 432c387c37a..8f62e33dd6a 100644 --- a/packages/web-components/src/globals/mixins/connect.ts +++ b/packages/web-components/src/globals/mixins/connect.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2020, 2023 + * Copyright IBM Corp. 2020, 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -13,7 +13,7 @@ import Handle from '../internal/handle'; /** * @param store A redux store. - * @returns A funciton that takes a base class and returns a mix-in that connects the component to Redux store. + * @returns A function that takes a base class and returns a mix-in that connects the component to Redux store. */ const ConnectMixin = < @@ -23,7 +23,7 @@ const ConnectMixin = TDispatchProps = { [name: string]: any } >( store: Store, - mapStateToProps: (state: TState) => TStateProps, + mapStateToProps: (state: TState, self?: any) => TStateProps, mapDispatchToProps: (dispatch: Dispatch) => TDispatchProps = () => ({} as TDispatchProps) ) => @@ -35,7 +35,7 @@ const ConnectMixin = _hStore: Handle | null = null; _handleChangeStoreState(state: TState) { - const props = mapStateToProps(state); + const props = mapStateToProps(state, this); Object.keys(props as any).forEach((name) => { const old = this[name]; const current = props[name];