From 63577c933e57742e6fba276c8c40794b325fdd8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anne=20L=27H=C3=B4te?= <annelhote@users.noreply.github.com>
Date: Thu, 28 Jul 2022 20:14:40 +0200
Subject: [PATCH] fix: pass className and onClick to component
 ToolTranslateItem (#261)

fix: pass className and onClick to component ToolTranslateItem
---
 example/src/components/Header/Header.jsx               |  5 ++---
 package-lock.json                                      |  2 +-
 src/components/interface/Header/ToolTranslate.d.ts     |  1 +
 src/components/interface/Header/ToolTranslate.js       |  5 +++--
 src/components/interface/Header/ToolTranslateItem.d.ts |  4 ++--
 src/components/interface/Header/ToolTranslateItem.js   | 10 +++++++++-
 .../interface/Header/__tests__/Header.test.js          |  5 +++--
 .../Header/__tests__/__snapshots__/Header.test.js.snap |  6 ++++--
 8 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/example/src/components/Header/Header.jsx b/example/src/components/Header/Header.jsx
index 5e0d7a9d..786e3deb 100644
--- a/example/src/components/Header/Header.jsx
+++ b/example/src/components/Header/Header.jsx
@@ -66,16 +66,15 @@ const HeaderExample = () => {
                 react-router-dom Link
               </ToolItem>
               <ToolItem icon="ri-lock-line" link="/path" target="_blank">Link to /path</ToolItem>
-              <ToolItem onClick={() => setIsOpen(true)}>
+              <ToolItem onClick={() => setIsOpen(true)} icon="fr-fi-theme-fill">
                 <span
-                  className="fr-fi-theme-fill fr-link--icon-left"
                   aria-controls="fr-theme-modal"
                   data-fr-opened={isOpen}
                 >
                   Paramètres d’affichage
                 </span>
               </ToolItem>
-              <ToolTranslate currentLang={location.pathname}>
+              <ToolTranslate currentLang={location.pathname} descCurrentLang="Current language">
                 <ToolTranslateItem href="/fr" hrefLang={currentLang} active={location.pathname === '/fr'}>
                   Français
                 </ToolTranslateItem>
diff --git a/package-lock.json b/package-lock.json
index 61594dfa..b802084b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@dataesr/react-dsfr",
-  "version": "2.9.0",
+  "version": "2.9.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/src/components/interface/Header/ToolTranslate.d.ts b/src/components/interface/Header/ToolTranslate.d.ts
index f1784e2a..2691b61e 100644
--- a/src/components/interface/Header/ToolTranslate.d.ts
+++ b/src/components/interface/Header/ToolTranslate.d.ts
@@ -9,6 +9,7 @@ export interface ToolTranslateProps {
     className?: ToolTranslateClassName;
     title?: string;
     currentLang: string;
+    descCurrentLang: string;
 }
 
 declare const ToolTranslate: React.FC<ToolTranslateProps>;
diff --git a/src/components/interface/Header/ToolTranslate.js b/src/components/interface/Header/ToolTranslate.js
index 57980bfd..dd7137df 100644
--- a/src/components/interface/Header/ToolTranslate.js
+++ b/src/components/interface/Header/ToolTranslate.js
@@ -12,11 +12,12 @@ const ToolTranslate = ({
   children, currentLang, className, descCurrentLang, title, ...remainingProps
 }) => {
   const [isOpen, setIsOpen] = useState(false);
+  const _className = classNames(className, 'fr-translate fr-nav');
 
   return (
     <nav
       role="navigation"
-      className={classNames(className, 'fr-translate fr-nav')}
+      className={_className}
       {...dataAttributes.getAll(remainingProps)}
     >
       <div className="fr-nav__item">
@@ -33,7 +34,7 @@ const ToolTranslate = ({
             size="1x"
           >
             {currentLang}
-            <span className="fr-hidden-lg">{descCurrentLang}</span>
+            <span className="fr-hidden">{descCurrentLang}</span>
           </Icon>
         </button>
         <div className={`fr-translate__menu fr-menu ${isOpen ? 'fr-collapse--expanded' : 'fr-collapse'}`} id="translate-516">
diff --git a/src/components/interface/Header/ToolTranslateItem.d.ts b/src/components/interface/Header/ToolTranslateItem.d.ts
index 4db3187a..96210b1b 100644
--- a/src/components/interface/Header/ToolTranslateItem.d.ts
+++ b/src/components/interface/Header/ToolTranslateItem.d.ts
@@ -2,7 +2,7 @@ import * as React from 'react';
 
 export type ToolTranslateChildren = React.ReactNode[] | React.ReactNode | string;
 
-export type ToolTranslateClassName = string | Object | any[];
+export type ToolTranslateItemClassName = string | Object | any[];
 
 export interface ToolTranslateItemProps {
     children: ToolTranslateChildren;
@@ -10,7 +10,7 @@ export interface ToolTranslateItemProps {
     active: boolean;
     hrefLang: string;
     onClick?: (...args: any[])=>any;
-    className?: ToolTranslateClassName;
+    className?: ToolTranslateItemClassName;
 }
 
 declare const ToolTranslateItem: React.FC<ToolTranslateItemProps>;
diff --git a/src/components/interface/Header/ToolTranslateItem.js b/src/components/interface/Header/ToolTranslateItem.js
index b6639f52..5c3ee0e5 100644
--- a/src/components/interface/Header/ToolTranslateItem.js
+++ b/src/components/interface/Header/ToolTranslateItem.js
@@ -7,9 +7,17 @@ const ToolTranslateItem = ({
   className, children, hrefLang, href, onClick, active, ...remainingProps
 }) => (
   <li
+    className={className || undefined}
     {...dataAttributes.getAll(remainingProps)}
   >
-    <a className="fr-translate__language fr-nav__link" hrefLang={hrefLang} lang={hrefLang} href={href} aria-current={active || undefined}>
+    <a
+      className="fr-translate__language fr-nav__link"
+      hrefLang={hrefLang}
+      lang={hrefLang}
+      href={href}
+      aria-current={active || undefined}
+      onClick={onClick}
+    >
       {children}
     </a>
   </li>
diff --git a/src/components/interface/Header/__tests__/Header.test.js b/src/components/interface/Header/__tests__/Header.test.js
index b8dbd2f4..ded89f03 100644
--- a/src/components/interface/Header/__tests__/Header.test.js
+++ b/src/components/interface/Header/__tests__/Header.test.js
@@ -19,6 +19,7 @@ describe('<Header />', () => {
     uuidv4.mockImplementationOnce(() => 'xxxxxxx');
     uuidv4.mockImplementationOnce(() => 'yyyyyy');
   });
+
   it('renders correctly', () => {
     const component = renderer
       .create(
@@ -40,8 +41,8 @@ describe('<Header />', () => {
               <ToolItemGroup data-testid="toolitemgroup">
                 <ToolItem icon="fr-fi-lock-line" link="/path" data-testid="toolitem">Se connecter</ToolItem>
                 <ToolItem icon="fr-fi-add-circle-line" link="/path" data-test-id="toolitem">Créer un espace</ToolItem>
-                <ToolTranslate currentLang="FR">
-                  <ToolTranslateItem href="/fr" hrefLang="FR" active descCurrentLang="Français">
+                <ToolTranslate currentLang="FR" descCurrentLang="Français">
+                  <ToolTranslateItem href="/fr" hrefLang="FR" active>
                     Français
                   </ToolTranslateItem>
                   <ToolTranslateItem href="/en" hrefLang="EN" active={false}>
diff --git a/src/components/interface/Header/__tests__/__snapshots__/Header.test.js.snap b/src/components/interface/Header/__tests__/__snapshots__/Header.test.js.snap
index 89e2c585..9eba90f3 100644
--- a/src/components/interface/Header/__tests__/__snapshots__/Header.test.js.snap
+++ b/src/components/interface/Header/__tests__/__snapshots__/Header.test.js.snap
@@ -142,8 +142,10 @@ exports[`<Header /> renders correctly 1`] = `
                     />
                     FR
                     <span
-                      className="fr-hidden-lg"
-                    />
+                      className="fr-hidden"
+                    >
+                      Français
+                    </span>
                   </button>
                   <div
                     className="fr-translate__menu fr-menu fr-collapse"