fix: pass className and onClick to component ToolTranslateItem (#261)

fix: pass className and onClick to component ToolTranslateItem
dataesr · Jul 28, 2022 · 63577c9 · 63577c9
1 parent 3c49e37
commit 63577c9
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 13 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -2,15 +2,15 @@ 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;
     href: string;
     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
@@ -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
@@ -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
@@ -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"