@axa-fr/design-system-look-and-feel-react 0.2.0-beta.364 → 0.2.0-beta.365

package/dist/Title/Title.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode } from "react";
-import { TitleSize } from "./constants";
+import { TitleSize, TitleLevel } from "./constants";
 type TitleProps = {
     children: ReactNode;
     firstSubtitle?: string;
@@ -8,6 +8,7 @@ type TitleProps = {
     className?: string;
     classModifier?: string;
     size?: TitleSize;
+    level?: TitleLevel;
 };
-export declare const Title: ({ children: title, className, classModifier, firstSubtitle, icon, secondSubtitle, size, }: TitleProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Title: ({ children: title, className, classModifier, firstSubtitle, icon, secondSubtitle, size, level, }: TitleProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Title/Title.js

@@ -4,8 +4,8 @@ import { IconBg } from "..";
 import { getComponentClassName } from "../utilities";
 import { TitleSize } from "./constants";
 import { TitleWithSubtitles } from "./TitleWithSubtitles";
-export const Title = ({ children: title, className, classModifier, firstSubtitle, icon, secondSubtitle, size = TitleSize.XL, }) => {
+export const Title = ({ children: title, className, classModifier, firstSubtitle, icon, secondSubtitle, size = TitleSize.XL, level = size === TitleSize.L ? 2 : 1, }) => {
     const componentClassName = useMemo(() => getComponentClassName(className, classModifier ? `${classModifier} ${size}` : size, "af-title"), [classModifier, className, size]);
     const TitleWithSubtitlesPart = useCallback(({ ...args }) => (_jsx(TitleWithSubtitles, { title: title, firstSubtitle: firstSubtitle, ...args })), [title, firstSubtitle]);
-    return (_jsx("div", { className: componentClassName, children: icon && size === TitleSize.XL ? (_jsxs(_Fragment, { children: [_jsx(IconBg, { className: "af-title__icon af-icon-bg", children: icon }), _jsx("div", { className: "af-title__text-container", children: _jsx(TitleWithSubtitlesPart, { secondSubtitle: secondSubtitle }) })] })) : (_jsx(TitleWithSubtitlesPart, {})) }));
+    return (_jsx("div", { className: componentClassName, children: icon && size === TitleSize.XL ? (_jsxs(_Fragment, { children: [_jsx(IconBg, { className: "af-title__icon af-icon-bg", children: icon }), _jsx("div", { className: "af-title__text-container", children: _jsx(TitleWithSubtitlesPart, { secondSubtitle: secondSubtitle, level: level }) })] })) : (_jsx(TitleWithSubtitlesPart, { level: level })) }));
 };

package/dist/Title/TitleWithSubtitles.d.ts

@@ -1,8 +1,10 @@
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
+import { TitleLevel } from "./constants";
 type TitleTextProps = {
     title: ReactNode;
     firstSubtitle?: string;
     secondSubtitle?: string;
+    level?: TitleLevel;
 };
-export declare const TitleWithSubtitles: ({ title, firstSubtitle, secondSubtitle, }: TitleTextProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TitleWithSubtitles: ({ title, firstSubtitle, secondSubtitle, level, }: TitleTextProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Title/TitleWithSubtitles.js

@@ -1,2 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-export const TitleWithSubtitles = ({ title, firstSubtitle, secondSubtitle, }) => (_jsxs(_Fragment, { children: [_jsx("h1", { className: "af-title__title", children: title }), firstSubtitle && (_jsx("span", { className: "af-title__subtitle", children: firstSubtitle })), secondSubtitle && (_jsx("span", { className: "af-title__subtitle", children: secondSubtitle }))] }));
+import { useMemo } from "react";
+export const TitleWithSubtitles = ({ title, firstSubtitle, secondSubtitle, level = 1, }) => {
+    const HLevel = useMemo(() => `h${level}`, [level]);
+    return (_jsxs(_Fragment, { children: [_jsx(HLevel, { className: "af-title__title", children: title }), firstSubtitle && (_jsx("span", { className: "af-title__subtitle", children: firstSubtitle })), secondSubtitle && (_jsx("span", { className: "af-title__subtitle", children: secondSubtitle }))] }));
+};

package/dist/Title/constants.d.ts

@@ -2,3 +2,4 @@ export declare enum TitleSize {
     XL = "xl",
     L = "l"
 }
+export type TitleLevel = 1 | 2 | 3 | 4 | 5 | 6;

package/dist/Title/index.d.ts

@@ -1,3 +1,3 @@
 import "@axa-fr/design-system-look-and-feel-css/dist/Title/Title.scss";
-export { TitleSize } from "./constants";
+export { TitleSize, type TitleLevel } from "./constants";
 export { Title } from "./Title";

package/dist/index.d.ts

@@ -27,4 +27,4 @@ export { Stepper } from "./Stepper/Stepper";
 export { Svg } from "./Svg";
 export { TabsClient as Tabs } from "./Tabs/Tabs";
 export { Tag } from "./Tag";
-export { Title, TitleSize } from "./Title";
+export { Title, TitleSize, type TitleLevel } from "./Title";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-look-and-feel-react",
-  "version": "0.2.0-beta.364",
+  "version": "0.2.0-beta.365",
   "description": "",
   "exports": {
     ".": {
@@ -41,7 +41,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-look-and-feel-css": "0.2.0-beta.364",
+    "@axa-fr/design-system-look-and-feel-css": "0.2.0-beta.365",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },