From f45f048285c56a90c64a2892a857a912a8d59d3b Mon Sep 17 00:00:00 2001
From: Martin Stievenart <stievenart.m@gmail.com>
Date: Wed, 24 Jan 2024 11:18:15 +0100
Subject: [PATCH] feat(header): make title-bar sticky by default

---
 packages/Layout/header/README.md              |  2 ++
 .../Layout/header/src/Title/Title.stories.tsx |  1 +
 packages/Layout/header/src/Title/Title.tsx    | 10 +++++++
 .../Layout/header/src/Title/title-bar.scss    |  6 +++++
 .../header/src/__tests__/Title.spec.tsx       | 11 ++++++++
 .../__snapshots__/Title.spec.tsx.snap         | 27 +++++++++++++++++--
 6 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/packages/Layout/header/README.md b/packages/Layout/header/README.md
index 5983892c1..fb9bff1ac 100644
--- a/packages/Layout/header/README.md
+++ b/packages/Layout/header/README.md
@@ -895,6 +895,8 @@ export default NavBarItemActifWithChildren;
 
 ## Default
 
+By default, the title bar is sticky on the top when you scroll down the page. If you want to disable that behavior you can set to false the `isSticky` property of the component.
+
 ### Installation
 
 ```shell script
diff --git a/packages/Layout/header/src/Title/Title.stories.tsx b/packages/Layout/header/src/Title/Title.stories.tsx
index a4be259a6..0702450e6 100644
--- a/packages/Layout/header/src/Title/Title.stories.tsx
+++ b/packages/Layout/header/src/Title/Title.stories.tsx
@@ -35,6 +35,7 @@ export const Default = (args) => <Title {...args} />;
 Default.args = {
   title: 'Toolkit Axa',
   subtitle: 'Info complémentaire',
+  isSticky: true,
 };
 Default.argTypes = {
   toggleMenu: { action: 'onToggle' },
diff --git a/packages/Layout/header/src/Title/Title.tsx b/packages/Layout/header/src/Title/Title.tsx
index 2da8a1318..73d289e88 100644
--- a/packages/Layout/header/src/Title/Title.tsx
+++ b/packages/Layout/header/src/Title/Title.tsx
@@ -12,6 +12,7 @@ type Props = {
   toggleMenu?: () => void;
   className?: string;
   classModifier?: string;
+  isSticky?: boolean;
 };
 const Title = ({
   title,
@@ -20,7 +21,16 @@ const Title = ({
   toggleMenu,
   className,
   classModifier,
+  isSticky = true,
 }: Props) => {
+  if (isSticky) {
+    // eslint-disable-next-line no-param-reassign
+    classModifier =
+      !classModifier || classModifier.length === 0
+        ? 'sticky'
+        : `${classModifier} sticky`;
+  }
+
   const componentClassName = getComponentClassName(
     className,
     classModifier,
diff --git a/packages/Layout/header/src/Title/title-bar.scss b/packages/Layout/header/src/Title/title-bar.scss
index ae5c200b2..7a2e165fa 100644
--- a/packages/Layout/header/src/Title/title-bar.scss
+++ b/packages/Layout/header/src/Title/title-bar.scss
@@ -7,6 +7,12 @@
   padding: 0.66rem 0;
   margin-bottom: 2rem;
 
+  &--sticky {
+    position: sticky;
+    top: 0;
+    z-index: 110;
+  }
+
   &--fixed {
     position: fixed;
     width: 100%;
diff --git a/packages/Layout/header/src/__tests__/Title.spec.tsx b/packages/Layout/header/src/__tests__/Title.spec.tsx
index c5d94edc0..cfad71d36 100644
--- a/packages/Layout/header/src/__tests__/Title.spec.tsx
+++ b/packages/Layout/header/src/__tests__/Title.spec.tsx
@@ -20,4 +20,15 @@ describe('<Title>', () => {
     );
     expect(asFragment()).toMatchSnapshot();
   });
+
+  it('renders Title with classModifier', () => {
+    const { asFragment } = render(
+      <Title
+        title="Toolkit Axa"
+        subtitle="Info complémentaire"
+        classModifier="test"
+      />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
 });
diff --git a/packages/Layout/header/src/__tests__/__snapshots__/Title.spec.tsx.snap b/packages/Layout/header/src/__tests__/__snapshots__/Title.spec.tsx.snap
index 7021a6fb6..488eebac9 100644
--- a/packages/Layout/header/src/__tests__/__snapshots__/Title.spec.tsx.snap
+++ b/packages/Layout/header/src/__tests__/__snapshots__/Title.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Title> renders Title correctly 1`] = `
 <DocumentFragment>
   <div
-    class="af-title-bar"
+    class="af-title-bar af-title-bar--sticky"
   >
     <div
       class="container af-title-bar__wrapper"
@@ -44,7 +44,30 @@ exports[`<Title> renders Title correctly 1`] = `
 exports[`<Title> renders Title correctly without menu 1`] = `
 <DocumentFragment>
   <div
-    class="af-title-bar"
+    class="af-title-bar af-title-bar--sticky"
+  >
+    <div
+      class="container af-title-bar__wrapper"
+    >
+      <h1
+        class="af-title-bar__title"
+      >
+        Toolkit Axa
+        <span
+          class="af-title-bar__subtitle"
+        >
+          Info complémentaire
+        </span>
+      </h1>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`<Title> renders Title with classModifier 1`] = `
+<DocumentFragment>
+  <div
+    class="af-title-bar af-title-bar--test af-title-bar--sticky"
   >
     <div
       class="container af-title-bar__wrapper"