fix(home): add expandable feedback section with toggle functionality

dataesr · Jan 20, 2025 · 115041a · 115041a
1 parent 58b05c8
commit 115041a
Showing 1 changed file with 23 additions and 7 deletions.
diff --git a/client/src/pages/home.jsx b/client/src/pages/home.jsx
@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Col, Container, Row, Title } from '@dataesr/dsfr-plus';
 import { FormattedMessage } from 'react-intl';
 
@@ -8,35 +9,50 @@ import PublicationsTile from '../components/tiles/publications';
 import Header from '../layout/header';
 
 export default function Home() {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const toggleExpand = () => {
+    setIsExpanded(!isExpanded);
+  };
+
   return (
     <>
       <Header isExpanded />
-      <Container as="section" className="fr-mt-4w">
+      <Container as="section" className="fr-my-4w fr-py-3w" style={{ backgroundColor: '#c7eeea' }}>
         <Row className="fr-mb-3w">
           <Title as="h3">
+            <span className="fr-icon-arrow-right-s-fill" aria-hidden="true" />
             <FormattedMessage id="feedback-title" />
           </Title>
-          <p>
+          <p className="fr-pl-3w">
             <FormattedMessage id="feedback-description-1" />
-          </p>
-          <p>
-            <FormattedMessage id="feedback-description-2" />
+            {isExpanded && (
+              <p className="fr-mt-1w">
+                <FormattedMessage id="feedback-description-2" />
+              </p>
+            )}
+            <button onClick={toggleExpand} type="button">
+              {isExpanded ? 'Afficher moins' : 'En savoir plus'}
+            </button>
           </p>
         </Row>
-        <Row gutters className="fr-mb-8w">
+        <Row gutters className="fr-pl-3w">
           <Col sm={12} md={6}>
             <OpenalexTile />
           </Col>
           <Col sm={12} md={6}>
             <MentionsTile />
           </Col>
         </Row>
+      </Container>
+      <Container as="section" className="fr-my-4w fr-py-3w" style={{ backgroundColor: '#faedc4' }}>
         <Row>
           <Title as="h3">
+            <span className="fr-icon-arrow-right-s-fill" aria-hidden="true" />
             <FormattedMessage id="corpus-title" />
           </Title>
         </Row>
-        <Row gutters className="fr-mb-16w">
+        <Row gutters className=" fr-pl-3w">
           <Col sm={12} md={6}>
             <PublicationsTile />
           </Col>