From 7c1a55a5ea7f25b13908199be98039278b8dfd8f Mon Sep 17 00:00:00 2001
From: Nolann <nolann.holvoet@axa.fr>
Date: Wed, 17 Apr 2024 16:43:06 +0200
Subject: [PATCH] refactor(TitleBar) : Add Left Title Property to TitleBar

---
 .../Layout/header/src/Title/Title.stories.tsx |  5 +++++
 packages/Layout/header/src/Title/Title.tsx    | 10 ++++++++-
 .../Layout/header/src/Title/title-bar.scss    | 21 ++++++++++++++++++-
 3 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/packages/Layout/header/src/Title/Title.stories.tsx b/packages/Layout/header/src/Title/Title.stories.tsx
index 0702450e6..005d9ac64 100644
--- a/packages/Layout/header/src/Title/Title.stories.tsx
+++ b/packages/Layout/header/src/Title/Title.stories.tsx
@@ -36,6 +36,11 @@ Default.args = {
   title: 'Toolkit Axa',
   subtitle: 'Info complémentaire',
   isSticky: true,
+  leftTitle: (
+    <a className="af-title-bar__link" href="#return" title="Retour">
+      <i className="glyphicon glyphicon-chevron-left" />
+    </a>
+  ),
 };
 Default.argTypes = {
   toggleMenu: { action: 'onToggle' },
diff --git a/packages/Layout/header/src/Title/Title.tsx b/packages/Layout/header/src/Title/Title.tsx
index 73d289e88..265a79905 100644
--- a/packages/Layout/header/src/Title/Title.tsx
+++ b/packages/Layout/header/src/Title/Title.tsx
@@ -13,6 +13,7 @@ type Props = {
   className?: string;
   classModifier?: string;
   isSticky?: boolean;
+  leftTitle?: ReactNode;
 };
 const Title = ({
   title,
@@ -22,6 +23,7 @@ const Title = ({
   className,
   classModifier,
   isSticky = true,
+  leftTitle,
 }: Props) => {
   if (isSticky) {
     // eslint-disable-next-line no-param-reassign
@@ -38,7 +40,10 @@ const Title = ({
   );
   return (
     <div className={componentClassName}>
-      <div className={`container ${defaultClassName}__wrapper`}>
+      <div
+        className={`container ${defaultClassName}__wrapper${
+          leftTitle ? '-titleLeft' : ''
+        }`}>
         {!!toggleMenu && (
           <div className="burger-container">
             <ToggleButton idControl="mainmenu">
@@ -52,6 +57,9 @@ const Title = ({
             </ToggleButton>
           </div>
         )}
+        {leftTitle ? (
+          <div className="left-title-container">{leftTitle}</div>
+        ) : null}
         <h1 className={`${defaultClassName}__title`}>
           {title}
           {subtitle && (
diff --git a/packages/Layout/header/src/Title/title-bar.scss b/packages/Layout/header/src/Title/title-bar.scss
index 3aff57ba2..946025883 100644
--- a/packages/Layout/header/src/Title/title-bar.scss
+++ b/packages/Layout/header/src/Title/title-bar.scss
@@ -4,7 +4,7 @@
   background: $brand-primary;
   color: $white;
   overflow: auto;
-  padding: 0.66rem 0;
+  padding: 12.66rem 0;
   margin-bottom: 2rem;
 
   &--sticky {
@@ -96,13 +96,32 @@
       flex-wrap: wrap;
       justify-content: space-between;
       width: 100%;
+
+      &-titleLeft {
+        display: flex;
+        gap: 1rem;
+        margin-left: inherit;
+        align-self: center;
+      }
     }
   }
 
+  .left-title-container {
+    display: flex;
+    align-self: center;
+  }
+
   .burger-container {
     display: none;
   }
 }
+
+@include media-breakpoint-down(xs) {
+  .left-title-container {
+    display: none;
+  }
+}
+
 @include media-breakpoint-up(md) {
   .af-title-bar {
     padding: 0.66rem 0;