feat(slash): refactor component to separate children and contentRight

Author: AllanFournierAXA

apps/slash-stories/src/Layout/HeaderTitle/HeaderTitle.mdx

@@ -39,9 +39,10 @@ export default TitleComponent;
 <Canvas of={HeaderTitleStories.ComplexTitle} />
 <Controls of={HeaderTitleStories.ComplexTitle} />
 
-### Complex Title with ContentLeft
+### Complex Title with Content and Children
 
-When you need to add an action to the title to handle a back button for example, you can use the `contentLeft` property. The property accepts a ReactNode to give you the flexibility to add any content you want.
+When you need to handle a navigation action , a back button for example, you can use the `contentLeft` property. For other others actions you should put them the right side of the title bar with the `contentRight` property. Passing children allows you to add additional content after the title and subtitle.
+The properties accepts a ReactNode to give you the flexibility to add any content you want.
 
-<Canvas of={HeaderTitleStories.ComplexTitleWithContentLeft} />
-<Controls of={HeaderTitleStories.ComplexTitleWithContentLeft} />
+<Canvas of={HeaderTitleStories.ComplexTitleWithContentAndChildren} />
+<Controls of={HeaderTitleStories.ComplexTitleWithContentAndChildren} />

apps/slash-stories/src/Layout/HeaderTitle/HeaderTitle.stories.tsx

@@ -1,4 +1,9 @@
-import { Action, HeaderTitle, Svg } from "@axa-fr/design-system-slash-react";
+import {
+  Action,
+  Badge,
+  HeaderTitle,
+  Svg,
+} from "@axa-fr/design-system-slash-react";
 import deleteIcon from "@material-symbols/svg-400/outlined/delete.svg";
 import mailIcon from "@material-symbols/svg-400/outlined/mail.svg";
 import saveIcon from "@material-symbols/svg-400/outlined/save.svg";
@@ -67,7 +72,7 @@ export const DefaultTitle: StoryObj<typeof HeaderTitle> = {};
 
 export const ComplexTitle: StoryObj<typeof HeaderTitle> = {
   args: {
-    children: (
+    contentRight: (
       <div className="af-title-bar__actions">
         {actions.map(({ icon, id, title }: ComponentProps<typeof Action>) => (
           <a
@@ -85,39 +90,41 @@ export const ComplexTitle: StoryObj<typeof HeaderTitle> = {
   },
 };
 
-export const ComplexTitleWithContentLeft: StoryObj<typeof HeaderTitle> = {
-  args: {
-    contentLeft: (
-      <div className="af-title-bar__actions">
-        {leftActions.map(
-          ({ icon, id, title }: ComponentProps<typeof Action>) => (
+export const ComplexTitleWithContentAndChildren: StoryObj<typeof HeaderTitle> =
+  {
+    args: {
+      contentLeft: (
+        <div className="af-title-bar__actions">
+          {leftActions.map(
+            ({ icon, id, title }: ComponentProps<typeof Action>) => (
+              <a
+                key={id}
+                href="/#"
+                role="button"
+                title={title}
+                className="btn  af-btn--circle"
+              >
+                <Svg src={icon} />
+              </a>
+            ),
+          )}
+        </div>
+      ),
+      children: <Badge classModifier="success"> Statut OK </Badge>,
+      contentRight: (
+        <div className="af-title-bar__actions">
+          {actions.map(({ icon, id, title }: ComponentProps<typeof Action>) => (
             <a
               key={id}
               href="/#"
               role="button"
               title={title}
-              className="btn  af-btn--circle"
+              className="btn af-btn--circle"
             >
               <Svg src={icon} />
             </a>
-          ),
-        )}
-      </div>
-    ),
-    children: (
-      <div className="af-title-bar__actions">
-        {actions.map(({ icon, id, title }: ComponentProps<typeof Action>) => (
-          <a
-            key={id}
-            href="/#"
-            role="button"
-            title={title}
-            className="btn af-btn--circle"
-          >
-            <Svg src={icon} />
-          </a>
-        ))}
-      </div>
-    ),
-  },
-};
+          ))}
+        </div>
+      ),
+    },
+  };

slash/css/src/Layout/Header/HeaderTitle/HeaderTitle.scss

@@ -37,6 +37,11 @@
     gap: 1rem;
   }
 
+  &__rightSection {
+    display: flex;
+    align-items: center;
+  }
+
   &__title {
     display: inline-block;
     margin: 0;

slash/react/src/Layout/Header/HeaderTitle/HeaderTitle.spec.tsx

@@ -1,6 +1,7 @@
 import { render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
 import { HeaderTitle } from "./HeaderTitle";
+import { Badge } from "../../../Badge/Badge";
 
 describe("HeaderTitle", () => {
   test("should render title and subtitle", async () => {
@@ -14,21 +15,29 @@ describe("HeaderTitle", () => {
     expect(screen.getByText("Subtitle")).toBeInTheDocument();
   });
 
-  test("should render leftSection", async () => {
+  test("should render contentLeft", async () => {
     const { container } = render(
       <HeaderTitle title="Title" contentLeft={<span>Left</span>} />,
     );
     expect(await axe(container)).toHaveNoViolations();
     expect(screen.getByText("Left")).toBeInTheDocument();
   });
 
+  test("should render contentRight", async () => {
+    const { container } = render(
+      <HeaderTitle title="Title" contentRight={<span>Right</span>} />,
+    );
+    expect(await axe(container)).toHaveNoViolations();
+    expect(screen.getByText("Right")).toBeInTheDocument();
+  });
+
   test("should render children", async () => {
     const { container } = render(
       <HeaderTitle title="Title">
-        <div>Child content</div>
+        <Badge classModifier="success"> Lorem ipsum </Badge>
       </HeaderTitle>,
     );
     expect(await axe(container)).toHaveNoViolations();
-    expect(screen.getByText("Child content")).toBeInTheDocument();
+    expect(screen.getByText("Lorem ipsum")).toBeInTheDocument();
   });
 });

slash/react/src/Layout/Header/HeaderTitle/HeaderTitle.tsx

@@ -14,6 +14,7 @@ type Props = {
   className?: string;
   isSticky?: boolean;
   contentLeft?: ReactNode;
+  contentRight?: ReactNode;
   subtitle?: string;
   title: string;
   toggleMenu?: () => void;
@@ -25,6 +26,7 @@ const HeaderTitle = ({
   className,
   isSticky = true,
   contentLeft,
+  contentRight,
   subtitle,
   title,
   toggleMenu,
@@ -60,8 +62,13 @@ const HeaderTitle = ({
               </span>
             )}
           </h1>
+          {children}
         </div>
-        {children}
+        {contentRight && (
+          <div className={`${defaultClassName}__rightSection`}>
+            {contentRight}
+          </div>
+        )}
       </div>
     </div>
   );