feat(results): styles and accordions

dataesr · Aug 28, 2024 · 315017f · 315017f
1 parent d743383
commit 315017f
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 9 deletions.
diff --git a/project/front/src/components/input/index.tsx b/project/front/src/components/input/index.tsx
@@ -15,7 +15,7 @@ export default function Input() {
   const enableYear: boolean = MATCHER_TYPES.find((matcher) => matcher.key == currentMatcher)?.year || false
 
   return (
-    <Container className="bg-input">
+    <Container className="input">
       <Row gutters className="fr-pb-4w fr-pt-4w fr-mb-2w">
         <Col xs="12" sm="8" lg="8">
           <SearchBar

diff --git a/project/front/src/components/results/index.tsx b/project/front/src/components/results/index.tsx
@@ -35,7 +35,7 @@ export default function Results() {
 
   return (
     <Container fluid>
-      <Container className="sticky">
+      <Container className="sticky card">
         <Text size="lead">{currentTitle}</Text>
       </Container>
       <Container fluid className="fr-mt-5w">

diff --git a/project/front/src/components/results/result/index.tsx b/project/front/src/components/results/result/index.tsx
@@ -1,4 +1,4 @@
-import { Container, Badge, Row, BadgeGroup } from "@dataesr/dsfr-plus"
+import { Container, Badge, Row, BadgeGroup, Accordion } from "@dataesr/dsfr-plus"
 import { MatchId, MatchResults } from "../../../types/data"
 import useUrl from "../../../hooks/useUrl"
 import { getResultHighlights } from "../utils/highlights"
@@ -23,9 +23,9 @@ export default function Result({
   const resultUrl = getResultUrl(resultId, currentMatcher)
 
   return (
-    <Container>
+    <Container className="card fr-mt-2w">
       <Row>
-        <BadgeGroup>
+        <BadgeGroup className="fr-mt-2w">
           {resultUrl ? (
             <Badge
               as="a"
@@ -42,7 +42,9 @@ export default function Result({
           {resultEnriched?.country?.length && <Badge color="pink-macaron">{resultEnriched.country[0]}</Badge>}
         </BadgeGroup>
       </Row>
-      <ResultHighlights resultHighlights={resultHighlights} setTitle={setTitle} />
+      <Accordion title="Highlights">
+        <ResultHighlights resultHighlights={resultHighlights} setTitle={setTitle} />
+      </Accordion>
     </Container>
   )
 }
diff --git a/project/front/src/styles/index.scss b/project/front/src/styles/index.scss
@@ -1,12 +1,16 @@
-.bg-input {
+.input {
   background-color: var(--background-alt-blue-cumulus) !important;
 }
+
+.card {
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
+}
+
 .sticky {
   background-color: white;
   position: sticky;
   top: 0px;
   z-index: 1;
-  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
   padding-top: 15px;
   padding-bottom: 1px;
-}
+}