diff --git a/packages/web-components/src/components/footer/footer-composite.ts b/packages/web-components/src/components/footer/footer-composite.ts index 9702140de5c..372e079c0e7 100644 --- a/packages/web-components/src/components/footer/footer-composite.ts +++ b/packages/web-components/src/components/footer/footer-composite.ts @@ -191,20 +191,42 @@ class C4DFooterComposite extends MediaQueryMixin( /** * The legal nav links. */ + private _links?: BasicLinkSet[]; + private _legalLinks?: BasicLink[]; + private _adjunctLinks?: BasicLink[]; + @property({ attribute: false }) - legalLinks: BasicLink[] = []; + set links(value: BasicLinkSet[] | undefined) { + this._links = value; + this.requestUpdate('links'); + } + get links() { + return this._links; + } /** * The adjunct links. */ @property({ attribute: false }) - adjunctLinks: BasicLink[] = []; + set legalLinks(value: BasicLink[] | undefined) { + this._legalLinks = value; + this.requestUpdate('legalLinks'); + } + get legalLinks() { + return this._legalLinks; + } /** * The footer links. */ @property({ attribute: false }) - links: BasicLinkSet[] = []; + set adjunctLinks(value: BasicLink[] | undefined) { + this._adjunctLinks = value; + this.requestUpdate('adjunctLinks'); + } + get adjunctLinks() { + return this._adjunctLinks; + } /** * The locale list. diff --git a/packages/web-components/src/components/footer/footer-container.ts b/packages/web-components/src/components/footer/footer-container.ts index 0c325c89191..0b20e6918ee 100644 --- a/packages/web-components/src/components/footer/footer-container.ts +++ b/packages/web-components/src/components/footer/footer-container.ts @@ -87,20 +87,32 @@ export interface FooterContainerStateProps } /** - * @param state The Redux state for masthead. + * @param state The Redux state for footer + * @param ownProps The current component props * @returns The converted version of the given state, tailored for ``. */ export function mapStateToProps( - state: FooterContainerState + state: FooterContainerState, + ownProps?: FooterContainerStateProps ): FooterContainerStateProps { const { localeAPI, translateAPI } = state; const { language, localeLists } = localeAPI ?? {}; const { translations } = translateAPI ?? {}; + + const hasUserLinks = ownProps?.links !== undefined; + const hasUserLegalLinks = ownProps?.legalLinks !== undefined; + return pickBy( { localeList: !language ? undefined : localeLists?.[language], - links: !language ? undefined : translations?.[language]?.footerMenu, - legalLinks: !language ? undefined : translations?.[language]?.footerThin, + links: + hasUserLinks || !language + ? undefined + : translations?.[language]?.footerMenu, + legalLinks: + hasUserLegalLinks || !language + ? undefined + : translations?.[language]?.footerThin, }, (value) => value !== undefined ); @@ -130,7 +142,7 @@ export function mapDispatchToProps( } /** - * Container component for masthead. + * Container component for footer. * * @element c4d-footer-container */