fix(suggestion): style + move feedback into RichComponent (#6210)

SocialGouv · Oct 14, 2024 · 1f64d85 · 1f64d85
1 parent 4e128a4
commit 1f64d85
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 28 deletions.
diff --git a/packages/code-du-travail-frontend/src/modules/code-du-travail/articleCodeDuTravail.tsx b/packages/code-du-travail-frontend/src/modules/code-du-travail/articleCodeDuTravail.tsx
@@ -1,9 +1,7 @@
 import React from "react";
 import { fr } from "@codegouvfr/react-dsfr";
-import { Tag } from "@codegouvfr/react-dsfr/Tag";
 import Html from "../common/Html";
 import { ContainerRich } from "../layout/ContainerRich";
-import { Feedback } from "../layout/feedback";
 import { RelatedItem } from "../documents";
 
 type Props = {
@@ -50,7 +48,6 @@ export function ArticleCodeDuTravail({
           <Html>{notaHtml}</Html>
         </div>
       )}
-      <Feedback />
     </ContainerRich>
   );
 }
diff --git a/packages/code-du-travail-frontend/src/modules/layout/ContainerRich.tsx b/packages/code-du-travail-frontend/src/modules/layout/ContainerRich.tsx
@@ -2,6 +2,7 @@ import { fr } from "@codegouvfr/react-dsfr";
 import { RelatedItems } from "../common/RelatedItems";
 import { Share } from "../common/Share";
 import { RelatedItem } from "../documents";
+import { Feedback } from "./feedback";
 
 type Props = {
   relatedItems: { items: RelatedItem[]; title: string }[];
@@ -27,7 +28,7 @@ export const ContainerRich = ({
     >
       <div className={fr.cx("fr-col-12", "fr-col-md-7")}>
         {children}
-        {/*<Feedback url={router.asPath} />*/}
+        <Feedback />
       </div>
 
       <div className={fr.cx("fr-col-12", "fr-col-offset-md-1", "fr-col-md-4")}>

diff --git a/packages/code-du-travail-frontend/src/modules/layout/header/SearchInput.tsx b/packages/code-du-travail-frontend/src/modules/layout/header/SearchInput.tsx
@@ -19,13 +19,7 @@ export const SearchInput = (props: Props) => {
   const [suggestions, setSuggestions] = useState<string[]>([]);
   const { emitSuggestionEvent } = useLayoutTracking();
 
-  const {
-    isOpen,
-    getMenuProps,
-    getInputProps,
-    highlightedIndex,
-    getItemProps,
-  } = useCombobox({
+  const { isOpen, getMenuProps, getInputProps, getItemProps } = useCombobox({
     items: suggestions,
     onInputValueChange: async ({ inputValue }) => {
       setQuery(inputValue);
@@ -70,7 +64,7 @@ export const SearchInput = (props: Props) => {
               {...getItemProps({
                 item,
                 index,
-                className: `${fr.cx("fr-p-1v")} ${suggestion} ${highlightedIndex === index ? isHighlighted : ""}`,
+                className: `${fr.cx("fr-p-3v")} ${suggestion}`,
               })}
               key={`${item}${index}`}
             >
@@ -83,27 +77,16 @@ export const SearchInput = (props: Props) => {
 };
 
 const list = css({
-  position: "absolute",
+  pos: "absolute",
   top: "2.5rem",
-  width: "100%",
+  w: "100%",
   zIndex: 100,
-  background: "var(--background-default-grey)",
+  bg: "var(--background-default-grey)",
 });
 
 const suggestion = css({
   cursor: "pointer",
-  lineHeight: "2rem",
-  listStyleType: "none",
+  color: "var(--text-action-high-blue-france)",
   textAlign: "left",
-  background: "var(--background-default-grey)",
-  "&:nth-child(2n + 1)": {
-    background: "var(--background-default-grey-hover)",
-  },
-});
-
-const isHighlighted = css({
-  background: "var(--background-default-grey-active)",
-  "&:nth-child(2n + 1)": {
-    background: "var(--background-default-grey-active)",
-  },
+  _hover: { bg: "var(--background-default-grey-hover)" },
 });