Update style of Map Panel

BaseAdresseNationale · Dec 4, 2024 · 9fbb57e · 9fbb57e
1 parent d4b0fcc
commit 9fbb57e
Show file tree

Hide file tree

Showing 21 changed files with 411 additions and 257 deletions.
diff --git a/src/app/carte-base-adresse-nationale/components/Aside/Aside.styles.tsx b/src/app/carte-base-adresse-nationale/components/Aside/Aside.styles.tsx
@@ -20,6 +20,7 @@ export const AsideWrapper = styled.div<{
   scroll-behavior: smooth;
   scroll-snap-type: y mandatory;
   scroll-padding-top: 8rem;
+  font-size: 1rem;
   pointer-events: none;
 
   @media (hover: hover) {

diff --git a/src/app/carte-base-adresse-nationale/components/Aside/AsideFooter.styles.tsx b/src/app/carte-base-adresse-nationale/components/Aside/AsideFooter.styles.tsx
@@ -2,7 +2,9 @@
 
 import styled from 'styled-components'
 
-export const AsideFooterWrapper = styled.div``
+export const AsideFooterWrapper = styled.div`
+  font-size: 1rem;
+`
 
 export const ActionWrapper = styled.ul`
   display: flex;

diff --git a/src/app/carte-base-adresse-nationale/components/Aside/AsideHeader.styles.tsx b/src/app/carte-base-adresse-nationale/components/Aside/AsideHeader.styles.tsx
@@ -9,6 +9,7 @@ export const AsideHeader = styled.div`
   overflow: hidden;
   width: 100%;
   padding: 0 1rem 1rem;
+  font-size: 1rem;
   transform: translateY(-100%);
   scroll-snap-align: start;
   scroll-snap-stop: always;

diff --git a/src/app/carte-base-adresse-nationale/components/DistrictLink/DistrictLink.styles.tsx b/src/app/carte-base-adresse-nationale/components/DistrictLink/DistrictLink.styles.tsx
@@ -0,0 +1,49 @@
+'use client'
+
+import styled from 'styled-components'
+import Link from 'next/link'
+
+export const DistrictLinkWrapper = styled.span`
+  position: relative;
+  font-size: 1em;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  line-height: 1.5;
+  text-decoration: none;
+  cursor: pointer;
+`
+
+export const DistrictName = styled.span`
+  font-size: 1em;
+`
+
+export const DistrictLinkLabel = styled(Link).attrs({
+  className: 'fr-link fr-link--icon-right fr-icon-arrow-right-line --force-DSFR-overload',
+})`
+  &[class]:is(.--force-DSFR-overload) {
+    font-size: 1em;
+    line-height: inherit;
+    position: relative;
+    z-index: 2;
+    display: inline-block;
+    overflow: hidden;
+    max-height: 0;
+    opacity: 0;
+    will-change: max-height, opacity;
+    transition: max-height .3s ease,
+      opacity .3s ease;
+
+    ${DistrictLinkWrapper}:hover &,
+    ${DistrictLinkWrapper}:focus-within & {
+      --underline-hover-width: var(--underline-max-width);  /* --force-DSFR-hover-link-style */
+      max-height: 2em;
+      opacity: 1;
+    }
+
+    a {
+      font-size: 1em;
+    }
+  }
+`
diff --git a/src/app/carte-base-adresse-nationale/components/DistrictLink/DistrictLink.tsx b/src/app/carte-base-adresse-nationale/components/DistrictLink/DistrictLink.tsx
@@ -0,0 +1,36 @@
+import {
+  DistrictLinkWrapper,
+  DistrictName,
+  DistrictLinkLabel,
+} from './DistrictLink.styles'
+
+interface District {
+  nom: string
+  code: string
+}
+
+interface DistrictLinkProps {
+  children?: React.ReactNode
+  district: District
+}
+
+function DistrictLink({ children, district }: DistrictLinkProps) {
+  const href = `./commune/${district.code}`
+  const titleLink = `Voir la page de la commune de ${district.nom} (COG ${district.code})`
+
+  return (
+    <DistrictLinkWrapper>
+      <DistrictName>{children || district.nom}</DistrictName>
+
+      <DistrictLinkLabel
+        href={href}
+        target="_test"
+        title={titleLink}
+      >
+        Voir la page de la commune
+      </DistrictLinkLabel>
+    </DistrictLinkWrapper>
+  )
+}
+
+export default DistrictLink
diff --git a/src/app/carte-base-adresse-nationale/components/DistrictLink/index.ts b/src/app/carte-base-adresse-nationale/components/DistrictLink/index.ts
@@ -0,0 +1 @@
+export { default } from './DistrictLink'
diff --git a/src/app/carte-base-adresse-nationale/components/PanelAddress/PanelAddress.styles.tsx b/src/app/carte-base-adresse-nationale/components/PanelAddress/PanelAddress.styles.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components'
 
 export const AddressDetailsWrapper = styled.ul`
   padding: 0;
-  margin: 2rem 0;
+  margin: 0;
   font-size: 0.9rem;
   line-height: 1.5;
 `
@@ -39,6 +39,19 @@ export const AddressDetailsItem = ({ children, ...props }: AddressDetailsItemPro
   </AddressDetailsItemStyle>
 )
 
+interface AddressDetailsCertificationProps extends React.HTMLAttributes<HTMLLIElement> {
+  children: React.ReactNode
+  isCertified: boolean
+}
+
+export const AddressDetailsCertification = ({ children, isCertified, ...props }: AddressDetailsCertificationProps) => (
+  <AddressDetailsItemStyle {...props} className="ri-verified-badge-fill">
+    <div>
+      {children}
+    </div>
+  </AddressDetailsItemStyle>
+)
+
 export const AddressDetailsItemValue = styled.pre`
   font-size: small;
   font-weight: 700;

diff --git a/src/app/carte-base-adresse-nationale/components/PanelAddress/PanelAddress.tsx b/src/app/carte-base-adresse-nationale/components/PanelAddress/PanelAddress.tsx
@@ -1,9 +1,10 @@
-import Link from 'next/link'
 import {
   AddressDetailsItemValue,
   AddressDetailsWrapper,
   AddressDetailsItem,
+  AddressDetailsCertification,
 } from './PanelAddress.styles'
+
 import type { TypeAddressExtended } from '../../types/LegacyBan.types'
 
 interface PanelAddressProps {
@@ -45,71 +46,59 @@ function PanelAddress({ address }: PanelAddressProps) {
       }, secondariesPositions: [] }
 
   return (
-    <>
-      <div>
-        <Link
-          href={`./commune/${address.commune.code}`}
-          className="fr-link fr-link--icon-right fr-icon-arrow-right-line"
-        >
-          En savoir plus sur la commune de {address.commune.nom}
-        </Link>
-      </div>
-
-      <AddressDetailsWrapper>
-        <AddressDetailsItem className="ri-verified-badge-fill">
-          <strong>{address.certifie ? `Adresse certifiée` : 'Adresse non certifiée'}</strong>
-        </AddressDetailsItem>
-        <AddressDetailsItem className="ri-key-line">
-          <span>
-            Identifiant BAN : <br />
-            <AddressDetailsItemValue>{address.banId}</AddressDetailsItemValue>
-          </span>
-        </AddressDetailsItem>
-        <AddressDetailsItem className="ri-links-line">
-          <span>
-            Clé d’interopérabilité :  <br />
-            <AddressDetailsItemValue>{address.cleInterop}</AddressDetailsItemValue>
-          </span>
-        </AddressDetailsItem>
-        <AddressDetailsItem className="ri-collage-line">
-          <span>
-            Parcelles cadastrales :  <br />
-            <AddressDetailsItemValue>{address?.parcelles.join(', ') || 'Non renseignée(s)'}</AddressDetailsItemValue>
-          </span>
-        </AddressDetailsItem>
-        <AddressDetailsItem className="ri-calendar-line">
-          Date de mise à jour :  <br />
-          {dateMaj}
-        </AddressDetailsItem>
-        <AddressDetailsItem className="ri-edit-box-line">
-          Producteur :  <br />
-          {address.sourcePosition}
-        </AddressDetailsItem>
-
-        <AddressDetailsItem className="ri-signpost-line">
-          Libellé d’acheminement :  <br />
-          {address.libelleAcheminement}
-        </AddressDetailsItem>
-        <AddressDetailsItem className="ri-map-pin-line">
-          {isMultiPosition ? 'Position Principale' : 'Position'} :  <br />
-          <span>Type / {mainPosition.positionType}</span> <br />
-          <span>Coordonnées / {mainPosition.position.coordinates[0]}, {mainPosition.position.coordinates[1]}</span>
+    <AddressDetailsWrapper>
+      <AddressDetailsCertification isCertified={address.certifie}>
+        <strong>{address.certifie ? `Adresse certifiée` : 'Adresse non certifiée'}</strong>
+      </AddressDetailsCertification>
+      <AddressDetailsItem className="ri-key-line">
+        <span>
+          Identifiant BAN : <br />
+          <AddressDetailsItemValue>{address.banId}</AddressDetailsItemValue>
+        </span>
+      </AddressDetailsItem>
+      <AddressDetailsItem className="ri-links-line">
+        <span>
+          Clé d’interopérabilité :  <br />
+          <AddressDetailsItemValue>{address.cleInterop}</AddressDetailsItemValue>
+        </span>
+      </AddressDetailsItem>
+      <AddressDetailsItem className="ri-collage-line">
+        <span>
+          Parcelles cadastrales :  <br />
+          <AddressDetailsItemValue>{address?.parcelles.join(', ') || 'Non renseignée(s)'}</AddressDetailsItemValue>
+        </span>
+      </AddressDetailsItem>
+      <AddressDetailsItem className="ri-calendar-line">
+        Date de mise à jour :  <br />
+        {dateMaj}
+      </AddressDetailsItem>
+      <AddressDetailsItem className="ri-edit-box-line">
+        Producteur :  <br />
+        {address.sourcePosition}
+      </AddressDetailsItem>
+      <AddressDetailsItem className="ri-signpost-line">
+        Libellé d’acheminement :  <br />
+        {address.libelleAcheminement}
+      </AddressDetailsItem>
+      <AddressDetailsItem className="ri-map-pin-line">
+        {isMultiPosition ? 'Position Principale' : 'Position'} :  <br />
+        <span>Type / {mainPosition.positionType}</span> <br />
+        <span>Coordonnées / {mainPosition.position.coordinates[0]}, {mainPosition.position.coordinates[1]}</span>
+      </AddressDetailsItem>
+      {isMultiPosition && (
+        <AddressDetailsItem className="ri-map-pin-2-line">
+          Position Secondaire :  <br />
+          <ol>
+            {secondariesPositions.map((entry, index) => (
+              <li key={index}>
+                <span>Type / {entry.positionType}</span> <br />
+                <span>Coordonnées / {entry.position.coordinates[0]}, {entry.position.coordinates[1]}</span>
+              </li>
+            ))}
+          </ol>
         </AddressDetailsItem>
-        {isMultiPosition && (
-          <AddressDetailsItem className="ri-map-pin-2-line">
-            Position Secondaire :  <br />
-            <ol>
-              {secondariesPositions.map((entry, index) => (
-                <li key={index}>
-                  <span>Type / {entry.positionType}</span> <br />
-                  <span>Coordonnées / {entry.position.coordinates[0]}, {entry.position.coordinates[1]}</span>
-                </li>
-              ))}
-            </ol>
-          </AddressDetailsItem>
-        )}
-      </AddressDetailsWrapper>
-    </>
+      )}
+    </AddressDetailsWrapper>
   )
 }
 

diff --git a/src/app/carte-base-adresse-nationale/components/PanelAddress/PanelAddressFooter.styles.tsx b/src/app/carte-base-adresse-nationale/components/PanelAddress/PanelAddressFooter.styles.tsx
@@ -19,3 +19,13 @@ export const ActionList = styled.ul`
   margin: 0;
   list-style: none;
 `
+
+export const ActionMessage = styled.div`
+  font-size: 0.8rem;
+  font-weight: 300;
+  line-height: 1.5;
+  color: var(--text-default-grey);
+  margin: 0.5em 1em;
+  border-left: 1px solid;
+  padding: 0 1em;
+`
diff --git a/src/app/carte-base-adresse-nationale/components/PanelAddress/PanelAddressFooter.tsx b/src/app/carte-base-adresse-nationale/components/PanelAddress/PanelAddressFooter.tsx
@@ -10,6 +10,7 @@ import {
   AsideFooterWrapper,
   ActionWrapper,
   ActionList,
+  ActionMessage,
 } from './PanelAddressFooter.styles'
 
 import type { TypeAddressExtended } from '../../types/LegacyBan.types'
@@ -39,17 +40,17 @@ function AsideFooterAddress({ banItem: address, withCertificate, children }: Asi
     <AsideFooterWrapper>
       {children}
       {!withCertificate && (
-        <div>
+        <ActionMessage>
           Les certifications d’adresses sur la commune de {address.commune.nom} sont
           réalisées directement par la mairie.
           Contactez-la pour obtenir un certificat d’adressage ou toute autre information.
-        </div>
+        </ActionMessage>
       )}
       {withCertificate && !isCertifiable && (
-        <div>
+        <ActionMessage>
           Cette adresse ne remplit pas les critères minimums pour obtenir une certification.
           Veuillez contacter votre mairie pour obtenir un certificat d’adressage ou toute autre information.
-        </div>
+        </ActionMessage>
       )}
       <ActionWrapper>
         <ActionList>

diff --git a/src/app/carte-base-adresse-nationale/components/PanelAddress/PanelAddressHeader.styles.tsx b/src/app/carte-base-adresse-nationale/components/PanelAddress/PanelAddressHeader.styles.tsx
@@ -1,56 +1,24 @@
 'use client'
 
-import styled from 'styled-components'
-import Image from 'next/image'
+import styled, { css } from 'styled-components'
 
 export const AddressLabelWrapper = styled.div`
-  font-size: 1.5rem;
+  font-size: 1rem;
 `
 
-export const AddressPostCode = styled.span`
-  display: block;
-  font-size: .7em;
-  line-height: 1.5;
-`
-
-export const AddressNumberAndMicroTopoLabel = styled.span`
-  display: block;
-  font-size: 1.5rem;
-  font-size: 1em;
-  line-height: 1.25;
-  font-weight: 700;
-  margin-bottom: 0.5rem;
-`
-
-export const AddressMicroTopoLabelAlt = styled.span`
-  display: block;
-  font-size: 0.95rem;
+export const AddressNumber = styled.span`
+  font-size: 1.75em;
+  font-style: italic;
   line-height: 1;
-  font-weight: 700;
-  margin-bottom: 0.5rem;
+  font-weight: 300;
 `
-
-export const AddressMicroTopoLabelFlag = styled(Image).attrs({
-  width: 24,
-  height: 24,
-})`
-  width: 1em;
-  height: 1em;
-  border-radius: 50%;
-  vertical-align: -0.1em;
+export const AddressNumberSuffix = styled.span`
+  font-size: 0.75em;
+  vertical-align: top;
+  margin-left: 0.15em;
 `
 
-export const AddressDistrictLabelPrefix = styled.span`
-  display: block;
-  font-size: .6em;
-  line-height: 1;
-  margin-bottom: 0.25rem;
-`
-
-export const AddressDistrictLabel = styled.span<{ $historique?: boolean }>`
-  display: block;
-  font-size: 0.7em;
-  line-height: 1.25;
-  font-weight: ${({ $historique }) => $historique ? '400' : '700'};
-  margin-bottom: 0rem;
+export const AddressMicroTopoLabel = styled.span<{ $isOnNewLine: boolean }>`
+  font-size: 1em;
+  ${({ $isOnNewLine }) => $isOnNewLine && css`display: block;`}
 `