From 954092145238a1d42e01cacbe9cdec4380f6bc29 Mon Sep 17 00:00:00 2001
From: Martin Stievenart <stievenart.m@gmail.com>
Date: Wed, 24 Jan 2024 09:49:53 +0100
Subject: [PATCH] feat(title): add property to change heading level and design
 modifications

---
 packages/title/README.md                    |  7 ++++
 packages/title/src/Title.stories.tsx        |  1 +
 packages/title/src/Title.tsx                | 11 ++++--
 packages/title/src/__tests__/Title.spec.tsx | 37 +++++++++++++++------
 packages/title/src/title.scss               | 28 ++++++++++++----
 5 files changed, 64 insertions(+), 20 deletions(-)

diff --git a/packages/title/README.md b/packages/title/README.md
index 4b94e1434..4303aed8a 100644
--- a/packages/title/README.md
+++ b/packages/title/README.md
@@ -25,3 +25,10 @@ const TitleDefault = () => (
 );
 export default TitleDefault;
 ```
+
+By default, using this component produces a level 2 title (level 1 is restricted to the title bar of the page). If you want another title level you can specify the `heading` property with the value `h2`, `h3`, `h4`. For now `h5` and `h6` are not supported.
+
+```javascript
+const TitleDefault = () => <Title heading="h3">Sample Title</Title>;
+export default TitleDefault;
+```
diff --git a/packages/title/src/Title.stories.tsx b/packages/title/src/Title.stories.tsx
index b506a4748..fa7aeb06b 100644
--- a/packages/title/src/Title.stories.tsx
+++ b/packages/title/src/Title.stories.tsx
@@ -26,4 +26,5 @@ Default.args = {
   title: 'Sample Title',
   classModifier: '',
   className: '',
+  heading: 'h2',
 };
diff --git a/packages/title/src/Title.tsx b/packages/title/src/Title.tsx
index 17bd70482..29fa4974b 100644
--- a/packages/title/src/Title.tsx
+++ b/packages/title/src/Title.tsx
@@ -1,14 +1,18 @@
 import React, { ComponentPropsWithoutRef } from 'react';
 import { getComponentClassName } from '@axa-fr/react-toolkit-core';
 
-type TitleProps = ComponentPropsWithoutRef<'h1'> & {
+type Headings = 'h2' | 'h3' | 'h4';
+
+type TitleProps = ComponentPropsWithoutRef<'h2'> & {
   classModifier?: string;
+  heading?: Headings;
 };
 
 const Title = ({
   className,
   classModifier,
   children,
+  heading: Heading = 'h2',
   ...otherProps
 }: TitleProps) => {
   const componentClassName = getComponentClassName(
@@ -16,10 +20,11 @@ const Title = ({
     classModifier,
     'af-title'
   );
+
   return (
-    <h1 className={componentClassName} {...otherProps}>
+    <Heading className={componentClassName} {...otherProps}>
       {children}
-    </h1>
+    </Heading>
   );
 };
 
diff --git a/packages/title/src/__tests__/Title.spec.tsx b/packages/title/src/__tests__/Title.spec.tsx
index 610d46ed8..b6494793d 100644
--- a/packages/title/src/__tests__/Title.spec.tsx
+++ b/packages/title/src/__tests__/Title.spec.tsx
@@ -8,7 +8,9 @@ describe('Title', () => {
     render(<Title>A title</Title>);
 
     // Assert
-    expect(screen.getByText(/A title/)).toBeInTheDocument();
+    expect(
+      screen.getByRole('heading', { name: /A title/, level: 2 })
+    ).toBeInTheDocument();
   });
 
   it('should have default class', () => {
@@ -16,7 +18,9 @@ describe('Title', () => {
     render(<Title>A title</Title>);
 
     // Assert
-    expect(screen.getByText(/A title/)).toHaveClass('af-title', {
+    expect(
+      screen.getByRole('heading', { name: /A title/, level: 2 })
+    ).toHaveClass('af-title', {
       exact: true,
     });
   });
@@ -26,7 +30,9 @@ describe('Title', () => {
     render(<Title className="custom-class">A title</Title>);
 
     // Assert
-    expect(screen.getByText(/A title/)).toHaveClass('custom-class', {
+    expect(
+      screen.getByRole('heading', { name: /A title/, level: 2 })
+    ).toHaveClass('custom-class', {
       exact: true,
     });
   });
@@ -40,12 +46,11 @@ describe('Title', () => {
     );
 
     // Assert
-    expect(screen.getByText(/A title/)).toHaveClass(
-      'custom-class custom-class--modifier',
-      {
-        exact: true,
-      }
-    );
+    expect(
+      screen.getByRole('heading', { name: /A title/, level: 2 })
+    ).toHaveClass('custom-class custom-class--modifier', {
+      exact: true,
+    });
   });
 
   it('should not have classModifier attribute', () => {
@@ -57,6 +62,18 @@ describe('Title', () => {
     );
 
     // Assert
-    expect(screen.getByText(/A title/)).not.toHaveAttribute('classModifier');
+    expect(
+      screen.getByRole('heading', { name: /A title/, level: 2 })
+    ).not.toHaveAttribute('classModifier');
+  });
+
+  it('should have correct heading level', () => {
+    // Act
+    render(<Title heading="h3">A title</Title>);
+
+    // Assert
+    expect(
+      screen.getByRole('heading', { name: /A title/, level: 3 })
+    ).toBeInTheDocument();
   });
 });
diff --git a/packages/title/src/title.scss b/packages/title/src/title.scss
index 6891228ac..e9628f7a5 100644
--- a/packages/title/src/title.scss
+++ b/packages/title/src/title.scss
@@ -1,20 +1,34 @@
 @import '@axa-fr/react-toolkit-core/src/common/scss/core.scss';
 
+h2.af-title {
+  font-size: 1.5rem;
+}
+
+h3.af-title {
+  font-size: 1.25rem;
+}
+
+h4.af-title {
+  font-size: 1.125rem;
+}
+
+h3.af-title::after,
+h4.af-title::after {
+  bottom: 0.1rem;
+}
+
 .af-title {
   position: relative;
   overflow: hidden;
   font-weight: 600;
+  color: $color-texte;
 
   &::after {
-    background-color: $brand-primary;
-    border: none;
-    bottom: 0.3125rem;
-    clear: left;
+    background-color: $color-gray-1;
+    bottom: 0.3rem;
     content: ' ';
-    float: left;
     height: 1px;
-    margin-left: 0.875rem;
-    padding: 0;
+    margin: 0.5rem 1rem;
     position: absolute;
     width: 100%;
     z-index: 1;