Mise à jour du footer

incubateur-ademe · Apr 17, 2024 · 2f17bef · 2f17bef
1 parent a359188
commit 2f17bef
Show file tree

Hide file tree

Showing 12 changed files with 65 additions and 154 deletions.
diff --git a/packages/site/app/global.css b/packages/site/app/global.css
@@ -61,7 +61,7 @@ nav.md-toc ~ h2:before {
 }
 
 /** listes ul / ol */
-ul:not(.fr-footer__content-list, .fr-btns-group),
+ul:not(.fr-btns-group),
 ol {
   list-style: inside;
 }

diff --git a/packages/site/app/layout.tsx b/packages/site/app/layout.tsx
@@ -1,9 +1,9 @@
 import './global.css';
 import AppHeader from './AppHeader';
-import {Footer} from '@components/footer/Footer';
 import {Metadata, Viewport} from 'next';
 import {getMetaData} from './utils';
 import {Amplitude} from './Amplitude';
+import Footer from '@components/layout/Footer';
 
 export const viewport: Viewport = {
   width: 'device-width',

diff --git a/packages/site/components/footer/Footer.tsx b/packages/site/components/footer/Footer.tsx
diff --git a/packages/site/components/layout/Footer.tsx b/packages/site/components/layout/Footer.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import {usePathname} from 'next/navigation';
+import {FooterTeT} from '@tet/ui';
+
+const Footer = () => {
+  const pathname = usePathname();
+
+  return (
+    <FooterTeT
+      customLinks={
+        pathname === '/outil-numerique'
+          ? [
+              {
+                label: 'Budget',
+                href: '/budget',
+              },
+            ]
+          : []
+      }
+    />
+  );
+};
+
+export default Footer;
diff --git a/packages/ui/src/components/layout/FooterTeT.tsx b/packages/ui/src/components/layout/FooterTeT.tsx
@@ -2,7 +2,7 @@ import RepubliqueFrancaiseLogo from '@assets/RepubliqueFrancaiseLogo';
 import AdemeLogo from '@assets/AdemeLogo';
 import {Footer, LinkObject} from '../../design-system/Footer/Footer';
 import {Button} from '@design-system/Button';
-import {BASE_URL} from 'utils/constants';
+import {SITE_BASE_URL} from 'utils/constants';
 
 type FooterTeTProps = {
   /** Liens supplémentaires à afficher en fonction de la page visitée */
@@ -45,11 +45,11 @@ export const FooterTeT = ({customLinks, customLogos}: FooterTeTProps) => {
       bottomLinks={[
         {
           label: 'Accessibilité : non conforme',
-          href: `${BASE_URL}/accessibilite`,
+          href: `${SITE_BASE_URL}/accessibilite`,
         },
         {
           label: 'Mentions légales',
-          href: `${BASE_URL}/mentions`,
+          href: `${SITE_BASE_URL}/mentions`,
         },
         {
           label: 'Données personnelles',
@@ -58,7 +58,7 @@ export const FooterTeT = ({customLinks, customLogos}: FooterTeTProps) => {
         },
         {
           label: 'Gestion des cookies',
-          href: `${BASE_URL}/cookies`,
+          href: `${SITE_BASE_URL}/cookies`,
         },
         {
           label: 'Code source',
@@ -67,7 +67,7 @@ export const FooterTeT = ({customLinks, customLogos}: FooterTeTProps) => {
         },
         {
           label: 'Conditions générales d’utilisation',
-          href: `${BASE_URL}/cgu`,
+          href: `${SITE_BASE_URL}/cgu`,
         },
         ...(customLinks ?? []),
       ]}

diff --git a/packages/ui/src/components/layout/HeaderTeT.stories.tsx b/packages/ui/src/components/layout/HeaderTeT.stories.tsx
@@ -1,7 +1,7 @@
 import {Meta, StoryObj} from '@storybook/react';
 import {HeaderTeT} from './HeaderTeT';
 import {Button} from '@design-system/Button';
-import {APP_BASE_URL, BASE_URL} from 'utils/constants';
+import {APP_BASE_URL, SITE_BASE_URL} from 'utils/constants';
 import TeTeLogo from '@assets/TeTeLogo';
 
 const meta: Meta<typeof HeaderTeT> = {
@@ -48,7 +48,7 @@ export const HeaderPanier: Story = {
             {...props}
             key="outil"
             icon="seedling-line"
-            href={`${BASE_URL}/outil-numerique`}
+            href={`${SITE_BASE_URL}/outil-numerique`}
             iconPosition="left"
             external
           >

diff --git a/packages/ui/src/components/layout/__snapshots__/FooterTeT.stories.tsx.snap b/packages/ui/src/components/layout/__snapshots__/FooterTeT.stories.tsx.snap
@@ -247,7 +247,7 @@ exports[`Components/Layout/Footer TeT Default smoke-test 1`] = `
       <p class="text-sm leading-6 text-grey-9">
         Territoires en Transitions est une startup d'État portée par l'Agence de la Transition Écologique (ADEME) avec le soutien de l'Agence Nationale de la Cohésion des Territoires (ANCT).
       </p>
-      <ul class="list-none flex flex-wrap gap-4 divide-x divide-grey-4 mb-0">
+      <ul class="!list-none flex flex-wrap gap-4 divide-x divide-grey-4 mb-0">
         <li class="pl-4 first-of-type:pl-0 pb-0">
           <a href="https://www.ademe.fr/"
              class="bg-none after:hidden w-fit flex items-center border-solid group gap-1 cursor-pointer border-b border-t-0 border-x-0 !p-px font-medium hover:border-b-2 hover:!pb-0 text-primary-8 !bg-transparent border-primary-7 text-sm py-2.5 px-6 flex-row-reverse !text-primary-8 border-b-transparent hover:border-b-primary-8 hover:!border-b"
@@ -275,7 +275,7 @@ exports[`Components/Layout/Footer TeT Default smoke-test 1`] = `
   </div>
   <div class="w-full border-t border-t-primary-4">
     <div class="w-full mx-auto px-4 lg:px-6 xl:max-w-7xl xl:px-2 py-6">
-      <ul class="list-none flex flex-wrap gap-2 divide-x divide-grey-4">
+      <ul class="!list-none flex flex-wrap gap-2 divide-x divide-grey-4">
         <li class="pl-2 first-of-type:pl-0 pb-0">
           <a href="https://territoiresentransitions.fr/accessibilite"
              class="bg-none after:hidden w-fit flex items-center border-solid group gap-1 cursor-pointer border-b border-t-0 border-x-0 !p-px font-medium hover:border-b-2 hover:!pb-0 text-primary-8 !bg-transparent border-primary-7 text-xs py-2 px-5 !text-grey-8 border-b-transparent hover:border-b-grey-8 hover:!border-b !font-normal"

diff --git a/packages/ui/src/design-system/Button/Button.stories.tsx b/packages/ui/src/design-system/Button/Button.stories.tsx
@@ -4,7 +4,7 @@ import {Meta, StoryObj} from '@storybook/react';
 import DoubleCheckIcon from '@assets/DoubleCheckIcon';
 
 import {Button} from './Button';
-import {BASE_URL} from 'utils/constants';
+import {SITE_BASE_URL} from 'utils/constants';
 
 const meta: Meta<typeof Button> = {
   component: Button,
@@ -254,25 +254,35 @@ export const Variants: Story = {
 export const AnchorButtons: Story = {
   render: () => (
     <div className="flex flex-wrap items-end gap-5">
-      <Button href={BASE_URL}>Internal link</Button>
-      <Button href={BASE_URL} variant="underlined">
+      <Button href={SITE_BASE_URL}>Internal link</Button>
+      <Button href={SITE_BASE_URL} variant="underlined">
         Internal link
       </Button>
-      <Button href={BASE_URL} icon="leaf-line" variant="outlined" />
-      <Button href={BASE_URL} variant="outlined" icon="leaf-line" disabled>
+      <Button href={SITE_BASE_URL} icon="leaf-line" variant="outlined" />
+      <Button href={SITE_BASE_URL} variant="outlined" icon="leaf-line" disabled>
         Disabled link
       </Button>
-      <Button href={BASE_URL} variant="underlined" icon="leaf-line" disabled>
+      <Button
+        href={SITE_BASE_URL}
+        variant="underlined"
+        icon="leaf-line"
+        disabled
+      >
         Disabled link
       </Button>
-      <Button href={BASE_URL} external>
+      <Button href={SITE_BASE_URL} external>
         External link
       </Button>
-      <Button href={BASE_URL} external />
-      <Button href={BASE_URL} variant="underlined" external>
+      <Button href={SITE_BASE_URL} external />
+      <Button href={SITE_BASE_URL} variant="underlined" external>
         External link
       </Button>
-      <Button href={BASE_URL} variant="outlined" iconPosition="left" external>
+      <Button
+        href={SITE_BASE_URL}
+        variant="outlined"
+        iconPosition="left"
+        external
+      >
         External link
       </Button>
     </div>
@@ -293,7 +303,7 @@ export const WithRef: Story = {
         <Button
           ref={anchorRef}
           onClick={onAnchorClick}
-          href={BASE_URL}
+          href={SITE_BASE_URL}
           external
         >
           Anchor with ref

diff --git a/packages/ui/src/design-system/Footer/Footer.stories.tsx b/packages/ui/src/design-system/Footer/Footer.stories.tsx
@@ -1,6 +1,6 @@
 import {Meta, StoryObj} from '@storybook/react';
 import {Footer} from './Footer';
-import {APP_BASE_URL, BASE_URL} from 'utils/constants';
+import {APP_BASE_URL, SITE_BASE_URL} from 'utils/constants';
 
 const meta: Meta<typeof Footer> = {
   component: Footer,
@@ -11,15 +11,15 @@ const meta: Meta<typeof Footer> = {
     contentLinks: [
       {
         label: 'territoiresentransitions.fr',
-        href: BASE_URL,
+        href: SITE_BASE_URL,
         external: true,
       },
     ],
     bottomContent: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
     bottomLinks: [
       {
         label: 'Site',
-        href: BASE_URL,
+        href: SITE_BASE_URL,
         external: true,
       },
       {

diff --git a/packages/ui/src/design-system/Footer/Footer.tsx b/packages/ui/src/design-system/Footer/Footer.tsx
@@ -55,7 +55,7 @@ export const Footer = ({
 
           {/* Liste de liens */}
           {!!contentLinks && (
-            <ul className="list-none flex flex-wrap gap-4 divide-x divide-grey-4 mb-0">
+            <ul className="!list-none flex flex-wrap gap-4 divide-x divide-grey-4 mb-0">
               {contentLinks.map(link => (
                 <li key={link.label} className="pl-4 first-of-type:pl-0 pb-0">
                   <Button
@@ -80,7 +80,7 @@ export const Footer = ({
           <div className="w-full mx-auto px-4 lg:px-6 xl:max-w-7xl xl:px-2 py-6">
             {/* Liste de liens */}
             {!!bottomLinks && (
-              <ul className="list-none flex flex-wrap gap-2 divide-x divide-grey-4">
+              <ul className="!list-none flex flex-wrap gap-2 divide-x divide-grey-4">
                 {bottomLinks.map(link => (
                   <li key={link.label} className="pl-2 first-of-type:pl-0 pb-0">
                     <Button

diff --git a/packages/ui/src/design-system/Footer/__snapshots__/Footer.stories.tsx.snap b/packages/ui/src/design-system/Footer/__snapshots__/Footer.stories.tsx.snap
@@ -13,7 +13,7 @@ exports[`design-system/Footer Default smoke-test 1`] = `
       <p class="text-sm leading-6 text-grey-9">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget maximus nisl, eget ullamcorper mauris. Nulla sagittis tempus leo nec elementum.
       </p>
-      <ul class="list-none flex flex-wrap gap-4 divide-x divide-grey-4 mb-0">
+      <ul class="!list-none flex flex-wrap gap-4 divide-x divide-grey-4 mb-0">
         <li class="pl-4 first-of-type:pl-0 pb-0">
           <a href="https://territoiresentransitions.fr"
              class="bg-none after:hidden w-fit flex items-center border-solid group gap-1 cursor-pointer border-b border-t-0 border-x-0 !p-px font-medium hover:border-b-2 hover:!pb-0 text-primary-8 !bg-transparent border-primary-7 text-sm py-2.5 px-6 flex-row-reverse !text-primary-8 border-b-transparent hover:border-b-primary-8 hover:!border-b"
@@ -30,7 +30,7 @@ exports[`design-system/Footer Default smoke-test 1`] = `
   </div>
   <div class="w-full border-t border-t-primary-4">
     <div class="w-full mx-auto px-4 lg:px-6 xl:max-w-7xl xl:px-2 py-6">
-      <ul class="list-none flex flex-wrap gap-2 divide-x divide-grey-4">
+      <ul class="!list-none flex flex-wrap gap-2 divide-x divide-grey-4">
         <li class="pl-2 first-of-type:pl-0 pb-0">
           <a href="https://territoiresentransitions.fr"
              class="bg-none after:hidden w-fit flex items-center border-solid group gap-1 cursor-pointer border-b border-t-0 border-x-0 !p-px font-medium hover:border-b-2 hover:!pb-0 text-primary-8 !bg-transparent border-primary-7 text-xs py-2 px-5 flex-row-reverse !text-grey-8 border-b-transparent hover:border-b-grey-8 hover:!border-b !font-normal"

diff --git a/packages/ui/src/utils/constants.ts b/packages/ui/src/utils/constants.ts
@@ -1,2 +1,2 @@
-export const BASE_URL = 'https://territoiresentransitions.fr';
+export const SITE_BASE_URL = 'https://territoiresentransitions.fr';
 export const APP_BASE_URL = 'https://app.territoiresentransitions.fr';