feat: full footer with link list (#109)

Author: lsagetlethias

src/Footer.tsx

@@ -62,6 +62,7 @@ export type FooterProps = {
         >
     >;
     style?: CSSProperties;
+    linkList?: FooterProps.LinkList.List;
 };
 
 export namespace FooterProps {
@@ -87,6 +88,28 @@ export namespace FooterProps {
         };
     }
 
+    export namespace LinkList {
+        export type List = [Column, Column?, Column?, Column?, Column?, Column?];
+        export type Links = [
+            LinkList.Link,
+            LinkList.Link?,
+            LinkList.Link?,
+            LinkList.Link?,
+            LinkList.Link?,
+            LinkList.Link?,
+            LinkList.Link?,
+            LinkList.Link?
+        ];
+        export interface Column {
+            categoryName?: string;
+            links: Links;
+        }
+        export interface Link {
+            text: string;
+            linkProps: RegisteredLinkProps;
+        }
+    }
+
     export type PartnersLogos = PartnersLogos.MainOnly | PartnersLogos.SubOnly;
 
     export namespace PartnersLogos {
@@ -128,6 +151,7 @@ export const Footer = memo(
             operatorLogo,
             license,
             style,
+            linkList,
             ...rest
         } = props;
 
@@ -148,6 +172,52 @@ export const Footer = memo(
                 style={style}
                 {...rest}
             >
+                {linkList !== undefined && (
+                    <div className={fr.cx("fr-footer__top")}>
+                        <div className={fr.cx("fr-container")}>
+                            <div
+                                className={fr.cx(
+                                    "fr-grid-row",
+                                    // "fr-grid-row--start", // why is this class used in dsfr doc?
+                                    "fr-grid-row--gutters"
+                                )}
+                            >
+                                {linkList.map(
+                                    column =>
+                                        column !== undefined && (
+                                            <div
+                                                className={fr.cx(
+                                                    "fr-col-12",
+                                                    "fr-col-sm-3",
+                                                    "fr-col-md-2"
+                                                )}
+                                            >
+                                                {column?.categoryName && (
+                                                    <h3 className={fr.cx("fr-footer__top-cat")}>
+                                                        {column?.categoryName}
+                                                    </h3>
+                                                )}
+                                                <ul className={fr.cx("fr-footer__top-list")}>
+                                                    {column?.links.map(linkItem => (
+                                                        <li>
+                                                            <Link
+                                                                {...linkItem?.linkProps}
+                                                                className={fr.cx(
+                                                                    "fr-footer__top-link"
+                                                                )}
+                                                            >
+                                                                {linkItem?.text}
+                                                            </Link>
+                                                        </li>
+                                                    ))}
+                                                </ul>
+                                            </div>
+                                        )
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                )}
                 <div className={fr.cx("fr-container")}>
                     <div className={cx(fr.cx("fr-footer__body"), classes.body)}>
                         <div

stories/Footer.stories.tsx

@@ -56,6 +56,9 @@ const { meta, getStory } = getStoryFactory({
         "license": {
             "description":
                 "By default it's Etalab v2. [You can provide a custom React node](#with-custom-license)"
+        },
+        "linkList": {
+            "controls": { "type": null }
         }
     }
 });
@@ -292,3 +295,36 @@ export const WithSubPartnersOnly = getStory({
         ]
     }
 });
+
+const links = new Array(8).fill({
+    text: "Lien de navigation",
+    linkProps: { href: "#" }
+}) as FooterProps.LinkList.Links;
+const linkList = new Array(6).fill({
+    categoryName: "Nom de la catégorie",
+    links
+}) as FooterProps.LinkList.List;
+
+export const WithLinkList = getStory({
+    "brandTop": (
+        <>
+            INTITULE
+            <br />
+            OFFICIEL
+        </>
+    ),
+    "accessibility": "fully compliant",
+    "contentDescription": `
+    Ce message est à remplacer par les informations de votre site.
+
+    Comme exemple de contenu, vous pouvez indiquer les informations 
+    suivantes : Le site officiel d’information administrative pour les entreprises.
+    Retrouvez toutes les informations et démarches administratives nécessaires à la création, 
+    à la gestion et au développement de votre entreprise.
+    `,
+    "homeLinkProps": {
+        "href": "/",
+        "title": "Accueil - Nom de l’entité (ministère, secrétariat d‘état, gouvernement)"
+    },
+    linkList
+});