feat(slash): add headerTitle left content

Author: AllanFournierAXA

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

@@ -38,3 +38,8 @@ export default TitleComponent;
 
 <Canvas of={HeaderTitleStories.ComplexTitle} />
 <Controls of={HeaderTitleStories.ComplexTitle} />
+
+### Complex Title with LefSection
+
+<Canvas of={HeaderTitleStories.ComplexTitleWithLeftSection} />
+<Controls of={HeaderTitleStories.ComplexTitleWithLeftSection} />

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

@@ -2,6 +2,8 @@ import { Action, 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";
+import homeIcon from "@material-symbols/svg-400/outlined/home.svg";
+import chevronLeftIcon from "@material-symbols/svg-400/outlined/chevron_left.svg";
 import { Meta, StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 import { ComponentProps } from "react";
@@ -48,6 +50,19 @@ const actions = [
   },
 ];
 
+const leftActions = [
+  {
+    id: "001",
+    icon: homeIcon,
+    title: "Accueil",
+  },
+  {
+    id: "002",
+    icon: chevronLeftIcon,
+    title: "Retour",
+  },
+];
+
 export const DefaultTitle: StoryObj<typeof HeaderTitle> = {};
 
 export const ComplexTitle: StoryObj<typeof HeaderTitle> = {
@@ -69,3 +84,40 @@ export const ComplexTitle: StoryObj<typeof HeaderTitle> = {
     ),
   },
 };
+
+export const ComplexTitleWithLeftSection: StoryObj<typeof HeaderTitle> = {
+  args: {
+    leftSection: (
+      <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: (
+      <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>
+    ),
+  },
+};

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

@@ -5,8 +5,8 @@
   margin-bottom: 2rem;
   padding: 1rem 0;
   overflow: auto;
-  color: common.$white;
-  background: common.$brand-primary;
+  color: var(--white);
+  background: var(--axablue80);
 
   &--sticky {
     position: sticky;
@@ -31,32 +31,38 @@
     }
   }
 
+  &__leftSection {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+  }
+
   &__title {
     display: inline-block;
     margin: 0;
     font-weight: 600;
-    color: common.$white;
+    color: var(--white);
   }
 
   &__subtitle {
     margin-left: 0.25rem;
     font-weight: 400;
-    color: common.$color-blue-subtitle;
+    color: var(--bluesubtitle);
   }
 
   &__actions {
     display: flex;
 
     .btn {
-      fill: common.$white;
-      transition: fill 0.3s;
       display: flex;
-      align-items: center;
       flex-direction: column;
+      align-items: center;
       justify-content: center;
+      transition: fill 0.3s;
+      fill: var(--white);
 
       &:hover {
-        fill: common.$brand-primary;
+        fill: var(--axablue80);
       }
 
       svg {
@@ -69,12 +75,12 @@
       vertical-align: middle;
 
       .injected-svg {
-        color: common.$white;
+        color: var(--white);
       }
 
       &:focus {
-        color: common.$white;
-        box-shadow: 0 0 6px common.$white;
+        color: var(--white);
+        box-shadow: 0 0 6px var(--white);
       }
     }
   }

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

@@ -0,0 +1,37 @@
+import { render, screen } from "@testing-library/react";
+import { axe } from "jest-axe";
+import { HeaderTitle } from "./HeaderTitle";
+
+describe("HeaderTitle", () => {
+  test("should render title and subtitle", async () => {
+    const { container } = render(
+      <HeaderTitle title="Main Title" subtitle="Subtitle" />,
+    );
+    expect(await axe(container)).toHaveNoViolations();
+    expect(
+      screen.getByRole("heading", { name: /main title/i }),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Subtitle")).toBeInTheDocument();
+  });
+
+  test("should render leftSection", async () => {
+    const { container } = render(
+      <HeaderTitle
+        title="Title"
+        leftSection={<span data-testid="left-section">Left</span>}
+      />,
+    );
+    expect(await axe(container)).toHaveNoViolations();
+    expect(screen.getByTestId("left-section")).toHaveTextContent("Left");
+  });
+
+  test("should render children", async () => {
+    const { container } = render(
+      <HeaderTitle title="Title">
+        <div data-testid="child">Child content</div>
+      </HeaderTitle>,
+    );
+    expect(await axe(container)).toHaveNoViolations();
+    expect(screen.getByTestId("child")).toHaveTextContent("Child content");
+  });
+});

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

@@ -13,6 +13,7 @@ type Props = {
   classModifier?: string;
   className?: string;
   isSticky?: boolean;
+  leftSection?: ReactNode;
   subtitle?: string;
   title: string;
   toggleMenu?: () => void;
@@ -23,6 +24,7 @@ const HeaderTitle = ({
   classModifier,
   className,
   isSticky = true,
+  leftSection,
   subtitle,
   title,
   toggleMenu,
@@ -48,12 +50,17 @@ const HeaderTitle = ({
             </ToggleButton>
           </div>
         )}
-        <h1 className={`${defaultClassName}__title`}>
-          {title}
-          {subtitle && (
-            <span className={`${defaultClassName}__subtitle`}>{subtitle}</span>
-          )}
-        </h1>
+        <div className={`${defaultClassName}__leftSection`}>
+          {leftSection}
+          <h1 className={`${defaultClassName}__title`}>
+            {title}
+            {subtitle && (
+              <span className={`${defaultClassName}__subtitle`}>
+                {subtitle}
+              </span>
+            )}
+          </h1>
+        </div>
         {children}
       </div>
     </div>