feat: add header + footer

SocialGouv · Feb 4, 2022 · 9520140 · 9520140
1 parent 96ae1e0
commit 9520140
Show file tree

Hide file tree

Showing 22 changed files with 656 additions and 183 deletions.
diff --git a/.gitignore b/.gitignore
@@ -35,3 +35,6 @@ yarn-error.log*
 
 # typescript
 *.tsbuildinfo
+
+# VSCode
+.vscode
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
     "build:export": "yarn build && yarn export"
   },
   "dependencies": {
+    "@dataesr/react-dsfr": "^0.9.9",
     "next": "12.0.9",
     "react": "17.0.2",
     "react-dom": "17.0.2"

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,8 +1,13 @@
-import '../styles/globals.css'
-import type { AppProps } from 'next/app'
+import "../styles/globals.css";
+import type { AppProps } from "next/app";
+import { Layout } from "@components";
 
 function MyApp({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+  return (
+    <Layout>
+      <Component {...pageProps} />
+    </Layout>
+  );
 }
 
-export default MyApp
+export default MyApp;
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,71 +1,18 @@
-import type { NextPage } from 'next'
-import Head from 'next/head'
-import styles from '../styles/Home.module.css'
+import type { NextPage } from "next";
+import Head from "next/head";
+import { Footer, Header } from "@components";
 
 const Home: NextPage = () => {
   return (
-    <div className={styles.container}>
+    <div style={{ height: "800px" }}>
       <Head>
         <title>Create Next App</title>
         <meta name="description" content="Generated by create next app" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-
-      <main className={styles.main}>
-        <h1 className={styles.title}>
-          Welcome to <a href="https://nextjs.org">Next.js!</a>
-        </h1>
-
-        <p className={styles.description}>
-          Get started by editing{' '}
-          <code className={styles.code}>pages/index.tsx</code>
-        </p>
-
-        <div className={styles.grid}>
-          <a href="https://nextjs.org/docs" className={styles.card}>
-            <h2>Documentation &rarr;</h2>
-            <p>Find in-depth information about Next.js features and API.</p>
-          </a>
-
-          <a href="https://nextjs.org/learn" className={styles.card}>
-            <h2>Learn &rarr;</h2>
-            <p>Learn about Next.js in an interactive course with quizzes!</p>
-          </a>
-
-          <a
-            href="https://github.com/vercel/next.js/tree/canary/examples"
-            className={styles.card}
-          >
-            <h2>Examples &rarr;</h2>
-            <p>Discover and deploy boilerplate example Next.js projects.</p>
-          </a>
-
-          <a
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-            className={styles.card}
-          >
-            <h2>Deploy &rarr;</h2>
-            <p>
-              Instantly deploy your Next.js site to a public URL with Vercel.
-            </p>
-          </a>
-        </div>
-      </main>
-
-      <footer className={styles.footer}>
-        <a
-          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Powered by{' '}
-          <span className={styles.logo}>
-            <img src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
-          </span>
-        </a>
-      </footer>
+      yooooo
     </div>
-  )
-}
+  );
+};
 
-export default Home
+export default Home;
diff --git a/public/marianne.jpeg b/public/marianne.jpeg
diff --git a/src/@types/index.d.ts b/src/@types/index.d.ts
@@ -0,0 +1 @@
+declare module "@dataesr/react-dsfr";
diff --git a/src/components/footer/body.tsx b/src/components/footer/body.tsx
@@ -0,0 +1,24 @@
+import {
+  FooterBody,
+  Logo,
+  FooterBodyItem,
+  Link,
+  FooterOperator,
+} from "@dataesr/react-dsfr";
+import { BodySectionProps } from "./type";
+
+export const Body = (props: BodySectionProps): JSX.Element => (
+  <FooterBody description={props.description}>
+    <Logo>{props.ministryName}</Logo>
+    {props.image && (
+      <FooterOperator>
+        <img src={props.image.src} alt={props.image.alt} />
+      </FooterOperator>
+    )}
+    {props.links?.map((link, index) => (
+      <FooterBodyItem key={`${index}-${link.title}`}>
+        <Link href={link.href}>{link.title}</Link>
+      </FooterBodyItem>
+    ))}
+  </FooterBody>
+);
diff --git a/src/components/footer/bottom.tsx b/src/components/footer/bottom.tsx
@@ -0,0 +1,13 @@
+import { FooterBottom, FooterCopy, FooterLink } from "@dataesr/react-dsfr";
+import { BottomSectionProps } from "./type";
+
+export const Bottom = (props: BottomSectionProps): JSX.Element => (
+  <FooterBottom>
+    {props.links.map((link, index) => (
+      <FooterLink key={`${index}-${link.title}`} href={link.href}>
+        {link.title}
+      </FooterLink>
+    ))}
+    <FooterCopy>{props.copyright}</FooterCopy>
+  </FooterBottom>
+);
diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx
@@ -0,0 +1,32 @@
+import {
+  Footer,
+  FooterTopCategory,
+  FooterLink,
+  FooterTop,
+  FooterBody,
+  FooterOperator,
+  FooterBodyItem,
+  FooterPartners,
+  FooterPartnersTitle,
+  FooterPartnersLogo,
+  FooterBottom,
+  FooterCopy,
+  Link,
+  Logo,
+} from "@dataesr/react-dsfr";
+import { Body } from "./body";
+import { Bottom } from "./bottom";
+import { Partners } from "./partner";
+import { Top } from "./top";
+import { FooterProps } from "./type";
+
+const Index = (props: FooterProps): JSX.Element => (
+  <Footer>
+    {props.topSection && <Top {...props.topSection} />}
+    {props.bodySection && <Body {...props.bodySection} />}
+    {props.partnerSection && <Partners {...props.partnerSection} />}
+    {props.bottomSection && <Bottom {...props.bottomSection} />}
+  </Footer>
+);
+
+export default Index;
diff --git a/src/components/footer/partner.tsx b/src/components/footer/partner.tsx
@@ -0,0 +1,21 @@
+import {
+  FooterPartners,
+  FooterPartnersTitle,
+  FooterPartnersLogo,
+} from "@dataesr/react-dsfr";
+import { PartnerSectionProps } from "./type";
+
+export const Partners = (props: PartnerSectionProps): JSX.Element => (
+  <FooterPartners>
+    <FooterPartnersTitle>{props.title}</FooterPartnersTitle>
+    {props.logos?.map((logo, index) => (
+      <FooterPartnersLogo
+        key={`${index}-${logo.src}`}
+        isMain={logo.isMain}
+        href={logo.href}
+        imageSrc={logo.src}
+        imageAlt={logo.alt}
+      />
+    ))}
+  </FooterPartners>
+);
diff --git a/src/components/footer/top.tsx b/src/components/footer/top.tsx
@@ -0,0 +1,16 @@
+import { FooterTop, FooterTopCategory, FooterLink } from "@dataesr/react-dsfr";
+import { TopSectionProps } from "./type";
+
+export const Top = (props: TopSectionProps): JSX.Element => (
+  <FooterTop>
+    {props.links.map((item, index) => (
+      <FooterTopCategory key={`${index}-${item.title}`} title={item.title}>
+        {item.links.map((link, index) => (
+          <FooterLink key={`${index}-${link.title}`} href={link.href}>
+            {link.title}
+          </FooterLink>
+        ))}
+      </FooterTopCategory>
+    ))}
+  </FooterTop>
+);
diff --git a/src/components/footer/type.ts b/src/components/footer/type.ts
@@ -0,0 +1,47 @@
+type Link = {
+  title: string;
+  href: string;
+};
+
+type LinksWithCategory = {
+  title: string;
+  links: Array<Link>;
+};
+
+type Image = {
+  alt: string;
+  src: string;
+};
+
+type Logo = Image & {
+  isMain?: boolean;
+  href: string;
+};
+
+export type PartnerSectionProps = {
+  title: string;
+  logos: Array<Logo>;
+};
+
+export type BottomSectionProps = {
+  links: Array<Link>;
+  copyright: string;
+};
+
+export type TopSectionProps = {
+  links: Array<LinksWithCategory>;
+};
+
+export type BodySectionProps = {
+  links?: Array<Link>;
+  image?: Image;
+  ministryName: string;
+  description: string;
+};
+
+export type FooterProps = {
+  topSection?: TopSectionProps;
+  bodySection?: BodySectionProps;
+  partnerSection?: PartnerSectionProps;
+  bottomSection?: BottomSectionProps;
+};
diff --git a/src/components/header/body.tsx b/src/components/header/body.tsx
@@ -0,0 +1,36 @@
+import {
+  ToolItem,
+  Logo,
+  HeaderBody,
+  Service,
+  HeaderOperator,
+  ToolItemGroup,
+  Tool,
+} from "@dataesr/react-dsfr";
+import { HeaderBodyProps } from "./type";
+
+export const Body = (props: HeaderBodyProps): JSX.Element => (
+  <HeaderBody>
+    <Logo splitCharacter={props.splitTitleLength ?? 10}>{props.mainTitle}</Logo>
+    {props.image && (
+      <HeaderOperator>
+        <img src={props.image.src} alt={props.image.alt} />
+      </HeaderOperator>
+    )}
+    <Service
+      title={props.serviceTitle}
+      description={props.serviceDescription}
+    />
+    <Tool>
+      {props.items && (
+        <ToolItemGroup>
+          {props.items.map((item, index) => (
+            <ToolItem key={`${index}-${item.title}`} link={item.href}>
+              {item.title}
+            </ToolItem>
+          ))}
+        </ToolItemGroup>
+      )}
+    </Tool>
+  </HeaderBody>
+);
diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
@@ -0,0 +1,13 @@
+import { Header } from "@dataesr/react-dsfr";
+import { Body } from "./body";
+import { Nav } from "./nav";
+import { HeaderProps } from "./type";
+
+const Index = (props: HeaderProps): JSX.Element => (
+  <Header>
+    {props.bodySection && <Body {...props.bodySection} />}
+    {props.navSection && <Nav {...props.navSection} />}
+  </Header>
+);
+
+export default Index;
diff --git a/src/components/header/megaNav.tsx b/src/components/header/megaNav.tsx
@@ -0,0 +1,32 @@
+import { MegaNavItem, MegaNavSubItem, Link } from "@dataesr/react-dsfr";
+import { MegaNavProps } from "./type";
+
+export const MegaNav = (props: MegaNavProps): JSX.Element => (
+  <MegaNavItem
+    title={props.title}
+    description={props.description}
+    as={props.headingLevel}
+    closeButtonLabel={props.closeButtonLabel}
+    linkLabel={props.linkName}
+    link={props.linkHref}
+  >
+    {props.items.map((item, index) => (
+      <MegaNavSubItem
+        key={`${index}-${item.title}`}
+        title={item.title}
+        link={item.href}
+        current={item.current}
+      >
+        {item.links.map((link, index) => (
+          <Link
+            key={`${index}-${link.title}`}
+            title={link.title}
+            href={link.href}
+          >
+            {link.name}
+          </Link>
+        ))}
+      </MegaNavSubItem>
+    ))}
+  </MegaNavItem>
+);
diff --git a/src/components/header/nav.tsx b/src/components/header/nav.tsx
@@ -0,0 +1,34 @@
+import { HeaderNav, NavItem, NavSubItem } from "@dataesr/react-dsfr";
+import { MegaNav } from "./megaNav";
+import { NavProps } from "./type";
+
+export const Nav = (props: NavProps): JSX.Element => (
+  <HeaderNav>
+    {props.items.map((item, index) => {
+      if ("headingLevel" in item) {
+        return <MegaNav key={`${index}-${item.title}`} {...item} />;
+      } else if ("items" in item) {
+        return (
+          <NavItem key={`${index}-${item.title}`} title={item.title}>
+            {item.items?.map((subItem, index) => (
+              <NavSubItem
+                key={`${index}-${subItem.title}`}
+                title={subItem.title}
+                link={subItem.href}
+                current={subItem.current}
+              />
+            ))}
+          </NavItem>
+        );
+      } else {
+        return (
+          <NavItem
+            key={`${index}-${item.title}`}
+            title={item.title}
+            link={item.href}
+          />
+        );
+      }
+    })}
+  </HeaderNav>
+);