fix(front): surcharge dsfr-plus

dataesr · Feb 19, 2024 · a97b646 · a97b646
1 parent f9ec4dc
commit a97b646
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 27 deletions.
diff --git a/client/src/components/actor-card/index.js b/client/src/components/actor-card/index.js
@@ -33,7 +33,7 @@ export default function ActorCard({
     <div className="fr-card fr-enlarge-link fr-card--sm fr-card--no-border fr-card--grey ">
       <div className="fr-card__body">
         <div className="fr-card__content fr-pb-1w">
-          <Title as="h4" look="h6" className="fr-card__title">
+          <Title as="h4" look="h6">
             <Link to={url}>{title}</Link>
           </Title>
           <p className="fr-card__desc">

diff --git a/client/src/components/country-card/index.js b/client/src/components/country-card/index.js
@@ -38,7 +38,7 @@ export default function CountryCard({ color, description, fillColor, fillColorCo
           </div>
         </div>
       </div>
-      <span className="ri-xl icon-left ds-fr--v-middle ri-arrow-right-line ds-fr-card-icon" aria-label="Flèche vers la droite" />
+      {/* <span className="ri-xl icon-left ds-fr--v-middle ri-arrow-right-line ds-fr-card-icon" aria-label="Flèche vers la droite" /> */}
     </div>
   );
 }

diff --git a/client/src/components/directory-blocs/annuaire-bloc.js b/client/src/components/directory-blocs/annuaire-bloc.js
@@ -54,7 +54,7 @@ function AnnuaireBloc({ selectedLetter }) {
           ))
             ? (
               <>
-                <Row alignItems="middle" className="fr-pb-1w">
+                <Row alignItems="middle" className="fr-pb-3w">
                   <Link href={`../pays/${el.fields.iso3}`}>
                     <Title as="h1" className="d-inline">
                       {`${el.fields.name_fr} (${el.fields.name_native})`}

diff --git a/client/src/components/directory-blocs/structure-card.js b/client/src/components/directory-blocs/structure-card.js
@@ -29,11 +29,15 @@ function AddressCard({ address, displayName }) {
                 <br />
                 {address.city && <Text className="d-inline" bold>{address.city}</Text>}
               </div>
-              <div>
+              <div className="fr-pt-1w">
                 {address.phonenumber && (
                   <Text className="d-inline">
                     <Icon name="ri-phone-fill">
-                      {address.phonenumber}
+                      <a
+                        href={`tel: ${address.phonenumber}`}
+                      >
+                        {address.phonenumber}
+                      </a>
                     </Icon>
                   </Text>
                 )}
@@ -91,7 +95,7 @@ export default function StructureCard({ data, type, website }) {
   return (
     <>
       <Container className={`fr-card fr-card--grey ${type}-border-card fr-pb-1w`}>
-        <Row className="fr-pt-1w">
+        <Row className="fr-p-1w">
           <Col>
             <Title as="h2" look="h4">{labels.cardTitle}</Title>
           </Col>
@@ -109,7 +113,7 @@ export default function StructureCard({ data, type, website }) {
             </Col>
           ) : ''}
         </Row>
-        <Row>
+        <Row className="fr-p-1w">
           <Col>
             {data?.length === 1 && (
               <>
@@ -127,7 +131,11 @@ export default function StructureCard({ data, type, website }) {
                 {data[0].currentLocalisation.phonenumber && (
                   <Text className="d-inline">
                     <Icon name="ri-phone-fill">
-                      {data[0].currentLocalisation.phonenumber}
+                      <a
+                        href={`tel: ${data[0].currentLocalisation.phonenumber}`}
+                      >
+                        {data[0].currentLocalisation.phonenumber}
+                      </a>
                     </Icon>
                   </Text>
                 )}

diff --git a/client/src/pages/country/components/actors/actors-identifiers-card.js b/client/src/pages/country/components/actors/actors-identifiers-card.js
@@ -1,4 +1,4 @@
-import { Callout, Col, Icon, Link, Row } from '@dataesr/react-dsfr';
+import { Callout, Col, Icon, Link, Row, Title } from '@dataesr/react-dsfr';
 import PropTypes from 'prop-types';
 
 function Identifiers({ type, identifiersId }) {
@@ -88,12 +88,12 @@ function Identifiers({ type, identifiersId }) {
       {type.map((el, index) => (
         <Col n="12 md-4" key={index}>
           <Callout hasInfoIcon={false} colors={['#5958A8', '#eee']}>
-            <h3 className="fr-card__title">
+            <Title as="h3" look="h6">
               <Icon name="ri-wikipedia-line" />
               <Link href={getLink({ type: el, value: identifiersId[index] })} target="_blank">
                 {`${el.charAt(0).toUpperCase() + el.slice(1)} (${identifiersId[index]})`}
               </Link>
-            </h3>
+            </Title>
           </Callout>
         </Col>
       ))}

diff --git a/client/src/pages/country/components/actors/actors-socialMedias-card.js b/client/src/pages/country/components/actors/actors-socialMedias-card.js
@@ -1,8 +1,8 @@
-import { Callout, Col, Icon, Link, Row } from '@dataesr/react-dsfr';
+import { Callout, Col, Icon, Link, Row, Title } from '@dataesr/react-dsfr';
 import PropTypes from 'prop-types';
 import { useEffect, useState } from 'react';
 
-import Title from '../../../../components/title';
+import Titre from '../../../../components/title';
 import { renderIcon } from '../../../../utils/renderSocialMediasIcon';
 
 function SocialNetworkCard({ actorId }) {
@@ -26,7 +26,7 @@ function SocialNetworkCard({ actorId }) {
   return (
     data?.data?.length > 0 && (
       <>
-        <Title
+        <Titre
           as="h2"
           className="fr-mb-0"
           title=" Réseaux sociaux"
@@ -38,13 +38,13 @@ function SocialNetworkCard({ actorId }) {
                 hasInfoIcon={false}
                 colors={['#9A99F5', '#eee']}
               >
-                <h3 className="fr-card__title">
+                <Title as="h3" look="h6">
                   <Icon name={`ri-${socialmedia.type}-line`} />
                   {renderIcon(socialmedia.type)}
                   <Link href={socialmedia.account} target="_blank">
                     {socialmedia.type}
                   </Link>
-                </h3>
+                </Title>
               </Callout>
             </Col>
           ))}

diff --git a/client/src/pages/country/components/actors/actors-website-card.js b/client/src/pages/country/components/actors/actors-website-card.js
@@ -1,4 +1,4 @@
-import { Callout, Col, Icon, Link } from '@dataesr/react-dsfr';
+import { Callout, Col, Icon, Link, Title } from '@dataesr/react-dsfr';
 import PropTypes from 'prop-types';
 
 export default function WebSiteCard({ languages, links, name }) {
@@ -11,12 +11,12 @@ export default function WebSiteCard({ languages, links, name }) {
       {languages.map((language, index) => (
         <Col key={index} n="12 md-6">
           <Callout hasInfoIcon={false} colors={['#F5E498', '#eee']}>
-            <h3 className="fr-card__title">
+            <Title as="h3" look="h6">
               <Icon name="ri-global-line" />
               <Link href={links[index]} target="blank">
                 {`${name} (${language || ''})`}
               </Link>
-            </h3>
+            </Title>
           </Callout>
         </Col>
       ))}

diff --git a/client/src/pages/country/components/actors/actors-wikipedia-card.js b/client/src/pages/country/components/actors/actors-wikipedia-card.js
@@ -1,12 +1,12 @@
-import { Callout, Col, Icon, Link } from '@dataesr/react-dsfr';
+import { Callout, Col, Icon, Link, Title } from '@dataesr/react-dsfr';
 import PropTypes from 'prop-types';
 
 export default function WikipediaCard({ title, nameEn }) {
   return (
     (title && nameEn) && (
       <Col n="12 md-6">
         <Callout hasInfoIcon={false} colors={['#F5E498', '#eee']}>
-          <h3 className="fr-card__title">
+          <Title as="h3" look="h6">
             <Icon name="ri-wikipedia-line" />
             <Link
               href={`https://en.wikipedia.org/wiki/${encodeURIComponent(nameEn?.replace(/\s/g, '_'))}`}
@@ -15,7 +15,7 @@ export default function WikipediaCard({ title, nameEn }) {
             >
               {`Wikipedia (${title})`}
             </Link>
-          </h3>
+          </Title>
         </Callout>
       </Col>
     )

diff --git a/client/src/pages/country/components/country-links/components/tile.js b/client/src/pages/country/components/country-links/components/tile.js
@@ -1,17 +1,17 @@
 import PropTypes from 'prop-types';
-import { Badge } from '@dataesr/react-dsfr';
+import { Badge, Title } from '@dataesr/react-dsfr';
 import './styles.scss';
 
 export default function RessourceTile({ pictogram, title, href, description, badge, colorFamily, date }) {
   return (
     <div className="fr-tile fr-enlarge-link fr-tile--horizontal">
-      <div className="fr-tile__body fr-m-3w">
-        <h2 className="fr-tile__title fr-m-0" title="Titre dans la langue du pays">
-          <a className="fr-tile__link" target="_blank" rel="noopener noreferrer" href={href}>{title}</a>
-        </h2>
+      <div className="fr-tile__body fr-m-1w">
         <div className="fr-badge-group">
           <Badge isSmall text={badge} colorFamily={colorFamily} />
         </div>
+        <Title as="h2" look="h6">
+          <a className="fr-tile__link" target="_blank" rel="noopener noreferrer" href={href}>{title}</a>
+        </Title>
         <p className="fr-card__detail" title="Description dans la langue du pays">{description}</p>
         <p className="fr-card__detail">{date}</p>
       </div>
-Original file line number
+Diff line change
@@ Expand Up @@
               </div>
             </div>
           </div>
-          <span className="ri-xl icon-left ds-fr--v-middle ri-arrow-right-line ds-fr-card-icon" aria-label="Flèche vers la droite" />
+          {/* <span className="ri-xl icon-left ds-fr--v-middle ri-arrow-right-line ds-fr-card-icon" aria-label="Flèche vers la droite" /> */}
         </div>
       );
     }
@@ Expand Down @@