feat(title): add property to change heading level and design modifications

Author: MartinWeb

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;
+```

packages/title/src/Title.stories.tsx

@@ -26,4 +26,5 @@ Default.args = {
   title: 'Sample Title',
   classModifier: '',
   className: '',
+  heading: 'h2',
 };

packages/title/src/Title.tsx

@@ -1,25 +1,30 @@
 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(
     className,
     classModifier,
     'af-title'
   );
+
   return (
-    <h1 className={componentClassName} {...otherProps}>
+    <Heading className={componentClassName} {...otherProps}>
       {children}
-    </h1>
+    </Heading>
   );
 };
 

packages/title/src/__tests__/Title.spec.tsx

@@ -8,15 +8,19 @@ 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', () => {
     // Act
     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();
   });
 });

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;