Preview Quick-Fix/Refonte du site de l'adresse

.gitignore

@@ -36,3 +36,9 @@ node_modules
 # Reports
 coverage
 reports
+
+# Project
+/public/dsfr/
+
+# Dev Tooling
+*.wip

components/api-doc/api-adresse/examples/by-address-name.js

@@ -146,6 +146,7 @@ function ByAddressName({title, id, icon}) {
               renderItem={renderAdresse}
               getItemValue={item => item.label}
               results={list}
+              wrapperStyle={{position: 'relative'}}
             />
             <SwitchInput handleChange={() => setAutocomplete(!autocomplete)} label='Autocomplétion' isChecked={autocomplete} />
           </div>

components/ban-search.js

@@ -6,7 +6,6 @@ import {search, isFirstCharValid} from '@/lib/api-adresse'
 import {useInput} from '../hooks/input'
 
 import SearchInput from '@/components/search-input'
-import Notification from '@/components/notification'
 import renderAddok from '@/components/search-input/render-addok'
 
 function BanSearch() {
@@ -81,29 +80,17 @@ function BanSearch() {
   }, [input])
 
   return (
-    <>
-      <SearchInput
-        value={input}
-        results={orderResults}
-        isLoading={loading}
-        placeholder='20 avenue de Ségur, Paris'
-        onSelect={handleSelect}
-        onSearch={setInput}
-        renderItem={renderAddok}
-        wrapperStyle={{position: 'relative'}}
-        getItemValue={getFeatureValue} />
-
-      {error &&
-        <div className='error'>
-          <Notification message={error.message} type='error' />
-        </div>}
-
-      <style jsx>{`
-          .error {
-            margin: 1em 0;
-          }
-        `}</style>
-    </>
+    <SearchInput
+      value={input}
+      results={orderResults}
+      isLoading={loading}
+      placeholder='20 avenue de Ségur, Paris'
+      onSelect={handleSelect}
+      onSearch={setInput}
+      renderItem={renderAddok}
+      wrapperStyle={{position: 'relative', minHeight: '4em'}}
+      getItemValue={getFeatureValue}
+      error={error} />
   )
 }
 

components/bases-locales/charte/partners-searchbar.js

@@ -99,6 +99,7 @@ function PartnersSearchbar() {
         onSearch={setInput}
         renderItem={RenderCommune}
         getItemValue={commune => commune.nom}
+        wrapperStyle={{position: 'relative'}}
       />
 
       {commune && (

components/button-link.js

@@ -27,7 +27,7 @@ function ButtonLink({size, color, href, label, isDisabled, isOutlined, isExterna
     )
   }
 
-  const newProps = {'aria-label': label, className: `button${isOutlined ? '-outline' : ''} ${size} ${color}`, ...props}
+  const newProps = {'aria-label': label, className: `button ${isOutlined ? 'button-outline' : ''} ${size} ${color}`, ...props}
 
   return (
     isExternal ?

components/card.js

@@ -86,9 +86,20 @@ function Card({title, link, action, links, list, children, color}) {
           font-size: 1.2em;
           text-decoration: none;
           border-radius: 0 0 5px 5px;
+          transition: ease .25s;
+          transition-property: color, background-color;
         }
 
+        .download-link:hover,
+        .download-link:active,
+        .download-link:focus,
+        .download-link:visited {
+          color: #fff;
+        }
+
+
         .download-link:hover {
+          background-color: #333;
           text-decoration: underline;
           cursor: pointer;
         }

components/commune/commune-search.js

@@ -56,6 +56,7 @@ function CommuneSearch() {
         isLoading={isLoading}
         renderItem={RenderCommune}
         getItemValue={commune => commune.code}
+        wrapperStyle={{position: 'relative', minHeight: '4em'}}
       />
 
       {error &&

components/footer.js

@@ -1,82 +1,66 @@
 import Link from 'next/link'
-import Image from 'next/legacy/image'
-
-import theme from '@/styles/theme'
+import {Footer as FooterDsfr} from '@codegouvfr/react-dsfr/Footer'
+import {fr} from '@codegouvfr/react-dsfr'
 
 function Footer() {
   return (
-    <footer className='footer'>
-      <div className='footer-container'>
-        <div className='footer__logo'>
-          <Image width={160} height={46} src='/images/logos/etalab.svg' alt='Etalab' />
-          <ul className='footer__social'>
-            <li><a href='https://twitter.com/AdresseDataGouv' aria-label='Consulter notre compte Twitter'><Image width={25} height={25} src='/images/medias/twitter.svg' alt='' aria-hidden='true' /></a></li>
-            <li><a href='https://github.com/etalab/adresse.data.gouv.fr' aria-label='Consulter notre page GitHub'><Image width={25} height={25} src='/images/medias/github.svg' alt='' aria-hidden='true' /></a></li>
-            <li>
-              <Link href='/blog' legacyBehavior>
-                <a aria-label='Consulter notre blog'><Image width={25} height={25} src='/images/medias/blog.svg' alt='' aria-hidden='true' /></a>
-              </Link>
-            </li>
-            <li>
-              <Link href='/nous-contacter' legacyBehavior>
-                <a aria-label='Contacter l’équipe'><Image width={25} height={25} src='/images/medias/envelop.svg' alt='' aria-hidden='true' /></a>
-              </Link>
-            </li>
-          </ul>
+    <>
+      <div className='fr-follow'>
+        <div className='fr-container'>
+          <div className='fr-grid-row'>
+            <div className='fr-col-12'>
+              <div className='fr-follow__social'>
+                <h2 className='fr-h5'>Suivez et participez
+                  <br />à l’actualité de la communauté adresse.data.gouv
+                </h2>
+                <ul className='fr-btns-group'>
+                  <li>
+                    <Link className='fr-btn--twitter fr-btn' href='https://twitter.com/adressedatagouv?lang=fr' target='_blank' title='Le fil twitter d’adresse.data.gouv.fr - Nouvelle fenêtre' rel='noreferrer'>
+                      twitter
+                    </Link>
+                  </li>
+                  <li>
+                    <Link className='fr-btn--linkedin fr-btn' href='https://www.linkedin.com/company/base-adresse-nationale/' target='_blank' title='LinkedIn de la Base Adresse Nationale - nouvelle fenêtre'>
+                      linkedin
+                    </Link>
+                  </li>
+                  <li>
+                    <Link className={fr.cx('fr-btn', 'ri-quill-pen-fill')} href='/blog' title='Blog d’Adresse.data.gouv.fr'>
+                      Blog
+                    </Link>
+                  </li>
+                  <li>
+                    <Link className={fr.cx('fr-btn', 'ri-file-list-3-fill')} href='/blog' title='Infolettre d’Adresse.data.gouv.fr'>
+                      Infolettre
+                    </Link>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
         </div>
-        <ul className='footer__links'>
-          <li><h2>adresse.data.gouv.fr</h2></li>
-          <li><Link href='/cgu' legacyBehavior><a aria-label='Accéder aux mentions légales et conditions générales d’utilisation'>Mentions légales et CGU</a></Link></li>
-          <li><a href='https://doc.adresse.data.gouv.fr/' aria-label='Consulter la documentation'>Documentation</a></li>
-          <li><a href='https://status.adresse.data.gouv.fr/' aria-label='Consulter la supervision de la Base Adresse Nationale et Base Adresse Locale'>Supervision BAN/BAL</a></li>
-          <li><Link href='/accessibilite' aria-label='Consulter la déclaration d’accessibilité' legacyBehavior><a>Accessibilité : non-conforme</a></Link></li>
-          <li><Link href='/nous-contacter' legacyBehavior><a>Nous contacter</a></Link></li>
-        </ul>
       </div>
-      <style jsx>{`
-      .footer {
-        background: ${theme.colors.almostBlack};
-        color: ${theme.colors.white};
-        padding: 2em 0;
-        line-height: 2em;
-      }
-
-      .footer .footer-container {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-around;
-        flex-wrap: wrap;
-      }
-
-      .footer ul {
-        list-style-type: none;
-        padding: 0;
-      }
-
-      .footer__social {
-        margin-top: 1em;
-      }
-
-      .footer__social li {
-        display: inline;
-        margin-right: 1em;
-      }
-
-      .footer__links {
-        margin: 0;
-      }
-
-      .footer__links a {
-        color: ${theme.colors.white};
-        text-decoration: none;
-      }
 
-      .footer__links h2 {
-        margin-top: 0;
-        margin-bottom: 0.5em;
-      }
-      `}</style>
-    </footer>
+      <FooterDsfr
+        accessibility='non compliant'
+        brandTop={<>République<br />française</>}
+        contentDescription={<>
+          Adresse<b>.data.gouv</b><i>.fr</i>, <br />Le site officiel des adresses.
+          Retrouvez toutes les informations et démarches administratives nécessaires
+          à la création et à la gestion des adresses.
+        </>}
+        homeLinkProps={{
+          href: '/',
+          title: 'Adresse.data.gouv.fr - Accueil'
+        }}
+        accessibilityLinkProps={{
+          href: '/accessibilite'
+        }}
+        termsLinkProps={{
+          href: '/cgu'
+        }}
+      />
+    </>
   )
 }