feat(header): make title-bar sticky by default

AxaFrance · Jan 25, 2024 · e65feb9 · e65feb9
1 parent 3d847ac
commit e65feb9
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"