Skip to content

Commit 7143bca

Browse files
fix-custom-links on footer (#12426)
### Related Ticket(s) Closes #12296 ### Description Customizing footer links did not work as expected. Footer `links` and `legalLinks` were always populated from Redux state when a language was available, causing any user-provided values to be overwritten. This made the footer links effectively non-customizable. For more details, see issue #12296. ### Changed - `links` and `legalLinks` were made optional outputs from `mapStateToProps`. - The container now only supplies `links` and `legalLinks` when they are actually available from the store. - When consumers pass `links` or `legalLinks` directly, those values are no longer overwritten by Redux state. - This restores the expected behavior where footer links can be customized by the user.
1 parent 3908cb7 commit 7143bca

File tree

2 files changed

+42
-8
lines changed

2 files changed

+42
-8
lines changed

packages/web-components/src/components/footer/footer-composite.ts

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -191,20 +191,42 @@ class C4DFooterComposite extends MediaQueryMixin(
191191
/**
192192
* The legal nav links.
193193
*/
194+
private _links?: BasicLinkSet[];
195+
private _legalLinks?: BasicLink[];
196+
private _adjunctLinks?: BasicLink[];
197+
194198
@property({ attribute: false })
195-
legalLinks: BasicLink[] = [];
199+
set links(value: BasicLinkSet[] | undefined) {
200+
this._links = value;
201+
this.requestUpdate('links');
202+
}
203+
get links() {
204+
return this._links;
205+
}
196206

197207
/**
198208
* The adjunct links.
199209
*/
200210
@property({ attribute: false })
201-
adjunctLinks: BasicLink[] = [];
211+
set legalLinks(value: BasicLink[] | undefined) {
212+
this._legalLinks = value;
213+
this.requestUpdate('legalLinks');
214+
}
215+
get legalLinks() {
216+
return this._legalLinks;
217+
}
202218

203219
/**
204220
* The footer links.
205221
*/
206222
@property({ attribute: false })
207-
links: BasicLinkSet[] = [];
223+
set adjunctLinks(value: BasicLink[] | undefined) {
224+
this._adjunctLinks = value;
225+
this.requestUpdate('adjunctLinks');
226+
}
227+
get adjunctLinks() {
228+
return this._adjunctLinks;
229+
}
208230

209231
/**
210232
* The locale list.

packages/web-components/src/components/footer/footer-container.ts

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -87,20 +87,32 @@ export interface FooterContainerStateProps
8787
}
8888

8989
/**
90-
* @param state The Redux state for masthead.
90+
* @param state The Redux state for footer
91+
* @param ownProps The current component props
9192
* @returns The converted version of the given state, tailored for `<c4d-footer-container>`.
9293
*/
9394
export function mapStateToProps(
94-
state: FooterContainerState
95+
state: FooterContainerState,
96+
ownProps?: FooterContainerStateProps
9597
): FooterContainerStateProps {
9698
const { localeAPI, translateAPI } = state;
9799
const { language, localeLists } = localeAPI ?? {};
98100
const { translations } = translateAPI ?? {};
101+
102+
const hasUserLinks = ownProps?.links !== undefined;
103+
const hasUserLegalLinks = ownProps?.legalLinks !== undefined;
104+
99105
return pickBy(
100106
{
101107
localeList: !language ? undefined : localeLists?.[language],
102-
links: !language ? undefined : translations?.[language]?.footerMenu,
103-
legalLinks: !language ? undefined : translations?.[language]?.footerThin,
108+
links:
109+
hasUserLinks || !language
110+
? undefined
111+
: translations?.[language]?.footerMenu,
112+
legalLinks:
113+
hasUserLegalLinks || !language
114+
? undefined
115+
: translations?.[language]?.footerThin,
104116
},
105117
(value) => value !== undefined
106118
);
@@ -130,7 +142,7 @@ export function mapDispatchToProps(
130142
}
131143

132144
/**
133-
* Container component for masthead.
145+
* Container component for footer.
134146
*
135147
* @element c4d-footer-container
136148
*/

0 commit comments

Comments
 (0)