@codegouvfr/react-dsfr
Version:
French State Design System React integration library
148 lines • 8.85 kB
JavaScript
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
import React, { memo, forwardRef } from "react";
import { getLink } from "./link";
import { symToStr } from "tsafe/symToStr";
import { fr } from "./fr";
import { cx } from "./tools/cx";
import { assert } from "tsafe/assert";
import { createComponentI18nApi } from "./i18n";
import { id } from "tsafe/id";
/** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-footer> */
export const Footer = memo(forwardRef((props, ref) => {
const { className, classes = {}, brandTop, contentDescription, homeLinkProps, websiteMapLinkProps, accessibilityLinkProps, accessibility, termsLinkProps, personalDataLinkProps, cookiesManagementLinkProps, bottomItems = [], operatorLogo, license } = props, rest = __rest(props, ["className", "classes", "brandTop", "contentDescription", "homeLinkProps", "websiteMapLinkProps", "accessibilityLinkProps", "accessibility", "termsLinkProps", "personalDataLinkProps", "cookiesManagementLinkProps", "bottomItems", "operatorLogo", "license"]);
assert();
const { Link } = getLink();
const { t } = useTranslation();
return (React.createElement("footer", Object.assign({ className: cx(fr.cx("fr-footer"), classes.root, className), role: "contentinfo", id: "footer", ref: ref }, rest),
React.createElement("div", { className: fr.cx("fr-container") },
React.createElement("div", { className: cx(fr.cx("fr-footer__body"), classes.body) },
React.createElement("div", { className: cx(fr.cx("fr-footer__brand", "fr-enlarge-link"), classes.brand) },
(() => {
const children = React.createElement("p", { className: fr.cx("fr-logo") }, brandTop);
return operatorLogo !== undefined ? (children) : (React.createElement(Link, Object.assign({}, homeLinkProps), children));
})(),
operatorLogo !== undefined && (React.createElement(Link, Object.assign({}, homeLinkProps, { className: cx(fr.cx("fr-footer__brand-link"), classes.brandLink, homeLinkProps.className) }),
React.createElement("img", { className: cx(fr.cx("fr-footer__logo"), classes.logo), style: (() => {
switch (operatorLogo.orientation) {
case "vertical":
return { "width": "3.5rem" };
case "horizontal":
return { "maxWidth": "9.0625rem" };
}
})(), src: operatorLogo.imgUrl, alt: operatorLogo.alt })))),
React.createElement("div", { className: cx(fr.cx("fr-footer__content"), classes.content) },
contentDescription !== undefined && (React.createElement("p", { className: cx(fr.cx("fr-footer__content-desc"), classes.contentDesc) }, contentDescription)),
React.createElement("ul", { className: cx(fr.cx("fr-footer__content-list"), classes.contentList) }, [
"legifrance.gouv.fr",
"gouvernement.fr",
"service-public.fr",
"data.gouv.fr"
].map((domain, i) => (React.createElement("li", { className: cx(fr.cx("fr-footer__content-item"), classes.contentItem), key: i },
React.createElement("a", { className: cx(fr.cx("fr-footer__content-link"), classes.contentLink), target: "_blank", href: `https://${domain}` }, domain))))))),
React.createElement("div", { className: cx(fr.cx("fr-footer__bottom"), classes.bottom) },
React.createElement("ul", { className: cx(fr.cx("fr-footer__bottom-list"), classes.bottomList) }, [
...(websiteMapLinkProps === undefined
? []
: [
id({
"text": t("website map"),
"linkProps": websiteMapLinkProps
})
]),
id({
"text": `${t("accessibility")}: ${t(accessibility)}`,
"linkProps": accessibilityLinkProps !== null && accessibilityLinkProps !== void 0 ? accessibilityLinkProps : {}
}),
...(termsLinkProps === undefined
? []
: [
id({
"text": t("terms"),
"linkProps": termsLinkProps
})
]),
...(personalDataLinkProps === undefined
? []
: [
id({
"text": t("personal data"),
"linkProps": personalDataLinkProps
})
]),
...(cookiesManagementLinkProps === undefined
? []
: [
id({
"text": t("cookies management"),
"linkProps": cookiesManagementLinkProps
})
]),
...bottomItems
].map(({ iconId, text, buttonProps, linkProps }, i) => (React.createElement("li", { key: i, className: cx(fr.cx("fr-footer__bottom-item"), classes.bottomItem) }, (() => {
const className = cx(fr.cx("fr-footer__bottom-link", ...(iconId !== undefined
? [iconId, "fr-link--icon-left"]
: [])), classes.bottomLink);
return linkProps !== undefined ? (Object.keys(linkProps).length === 0 ? (React.createElement("span", { className: className }, text)) : (React.createElement(Link, Object.assign({}, linkProps, { className: cx(className, linkProps.className) }), text))) : (React.createElement("button", Object.assign({}, buttonProps, { className: cx(className, buttonProps.className) }), text));
})())))),
React.createElement("div", { className: cx(fr.cx("fr-footer__bottom-copy"), classes.bottomCopy) },
React.createElement("p", null, license === undefined ? (React.createElement(React.Fragment, null,
t("license mention"),
" ",
React.createElement("a", { href: "https://github.com/etalab/licence-ouverte/blob/master/LO.md", target: "_blank" },
t("etalab license"),
" "),
" ")) : (license)))))));
}));
Footer.displayName = symToStr({ Footer });
export default Footer;
const { useTranslation, addFooterTranslations } = createComponentI18nApi({
"componentName": symToStr({ Footer }),
"frMessages": {
/* spell-checker: disable */
"hide message": "Masquer le message",
"website map": "Plan du site",
"accessibility": "Accessibilité",
"non compliant": "non conforme",
"partially compliant": "partiellement conforme",
"fully compliant": "totalement conforme",
"terms": "Mentions légales",
"personal data": "Données personnelles",
"cookies management": "Gestion des cookies",
"license mention": "Sauf mention contraire, tous les contenus de ce site sont sous",
"etalab license": "licence etalab-2.0"
/* spell-checker: enable */
}
});
addFooterTranslations({
"lang": "en",
"messages": {
"hide message": "Hide the message",
"website map": "Website map",
"accessibility": "Accessibility",
"non compliant": "non compliant",
"partially compliant": "partially compliant",
"fully compliant": "fully compliant",
"license mention": "Unless stated otherwise all content of this website are under",
"etalab license": "etalab-2.0 license"
}
});
addFooterTranslations({
"lang": "es",
"messages": {
/* spell-checker: disable */
"hide message": "Occultar el mesage"
/* spell-checker: enable */
}
});
export { addFooterTranslations };
//# sourceMappingURL=Footer.js.map