From 0a96c6379b2b8fb0885f1c0f6b2c0f947d53588e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?LEGRELLE=2C=20F=C3=A9lix?= <felegrel@bouyguestelecom.fr>
Date: Tue, 17 Dec 2024 15:00:34 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refacto=20box?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/react/components/box/Box.tsx | 68 ++++++++++-----------------
 1 file changed, 24 insertions(+), 44 deletions(-)

diff --git a/packages/react/components/box/Box.tsx b/packages/react/components/box/Box.tsx
index 6f7c66bb..285288d6 100644
--- a/packages/react/components/box/Box.tsx
+++ b/packages/react/components/box/Box.tsx
@@ -44,54 +44,34 @@ const Box = ({
   ...others
 }: BoxProps): JSX.Element => {
   const { styled } = useTrilogyContext()
-  const classes = hashClass(
-    styled,
-    clsx(
-      'box',
-      shadowless && is('shadowless'),
-      className,
-      backgroundColor && has(getBackgroundClassName(backgroundColor)),
-      backgroundSrc && has('background'),
-      inverted && is('inverted'),
-      skeleton && is('loading'),
-      highlighted && `${is('highlighted')} ${is(getColorClassName(highlighted))}`,
-      flat && is('flat'),
-      headerOffset && is('offset-header'),
-      fullheight && is('fullheight'),
-      active && is('active'),
-    ),
-  )
-
-  if (href) {
-    return (
-      <a
-        id={id}
-        href={href}
-        onClick={(e) => {
-          // eslint-disable-next-line no-unused-expressions
-          onClick?.(e)
-        }}
-        className={classes}
-        {...others}
-      >
-        {children}
-      </a>
-    )
-  }
 
-  const hoverStyle: React.CSSProperties = {
-    cursor: 'pointer',
-  }
+  const BoxComponent = href ? 'a' : 'div'
 
   return (
-    <div
+    <BoxComponent
+      className={hashClass(
+        styled,
+        clsx(
+          'box',
+          shadowless && is('shadowless'),
+          className,
+          backgroundColor && has(getBackgroundClassName(backgroundColor)),
+          backgroundSrc && has('background'),
+          inverted && is('inverted'),
+          skeleton && is('loading'),
+          highlighted && `${is('highlighted')} ${is(getColorClassName(highlighted))}`,
+          flat && is('flat'),
+          headerOffset && is('offset-header'),
+          fullheight && is('fullheight'),
+          active && is('active'),
+        ),
+      )}
       id={id}
-      style={onClick && { ...hoverStyle }}
-      onClick={(e) => {
-        // eslint-disable-next-line no-unused-expressions
-        onClick?.(e)
+      style={{
+        cursor: onClick ? 'pointer' : 'default',
       }}
-      className={classes}
+      href={href}
+      onClick={onClick}
       {...others}
       {...(backgroundSrc && {
         style: {
@@ -102,7 +82,7 @@ const Box = ({
       })}
     >
       {children}
-    </div>
+    </BoxComponent>
   )
 }