@axa-fr/design-system-slash-react 0.2.0-beta.281 → 0.2.0-beta.282

package/dist/IconBg/IconBg.client.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
-import { getComponentClassName } from "../agent";
+import { getComponentClassName } from "../Form/core";
 export const IconBg = ({ children, className, classModifier, isDisabled = false, }) => {
     const componentClassName = useMemo(() => {
         let newClassModifier = classModifier;

package/dist/Title/{Title.agent.d.ts → Agent/Title.d.ts}

@@ -1,4 +1,4 @@
-import "@axa-fr/design-system-slash-css/dist/Title/Title.agent.scss";
+import "@axa-fr/design-system-slash-css/dist/Title/Agent/Title.scss";
 import { ComponentPropsWithRef, PropsWithChildren } from "react";
 type Headings = "h2" | "h3" | "h4";
 type TitleProps = ComponentPropsWithRef<"h2"> & {

package/dist/Title/{Title.agent.js → Agent/Title.js}

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import "@axa-fr/design-system-slash-css/dist/Title/Title.agent.scss";
+import "@axa-fr/design-system-slash-css/dist/Title/Agent/Title.scss";
 import { forwardRef } from "react";
-import { getComponentClassName } from "../Form/core";
+import { getComponentClassName } from "../../Form/core";
 export const Title = forwardRef(({ className, classModifier, children, heading: Heading = "h2", ...otherProps }, ref) => {
     const componentClassName = getComponentClassName(className, classModifier, "af-title");
     return (_jsx(Heading, { ref: ref, className: componentClassName, ...otherProps, children: children }));

package/dist/Title/{Title.agent.stories.d.ts → Agent/Title.stories.d.ts}

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from "@storybook/react";
-import { Title } from "./Title.agent";
+import { Title } from "./Title";
 declare const meta: Meta<typeof Title>;
 export default meta;
 type StoryProps = Omit<React.ComponentProps<typeof Title>, "classModifier" | "children"> & {

package/dist/Title/{Title.agent.stories.js → Agent/Title.stories.js}

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Title } from "./Title.agent";
-import { ButtonAgent as Button } from "../Button/Button.agent";
+import { ButtonAgent as Button } from "../../Button/Button.agent";
+import { Title } from "./Title";
 const meta = {
     title: "Agent/Components/Title",
     component: Title,

package/dist/Title/{__tests__ → Agent/__tests__}/Title.test.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { render, screen } from "@testing-library/react";
 import { axe } from "jest-axe";
-import { Title } from "../Title.agent";
+import { Title } from "../Title";
 describe("Title", () => {
     it("should render children", () => {
         render(_jsx(Title, { children: "A title" }));

package/dist/Title/Client/Title.d.ts

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

package/dist/Title/Client/Title.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, } from "react";
+import { IconBg } from "../../client";
+import { getComponentClassName } from "../../Form/core";
+import { TitleSize } from "./constants";
+import { TitleWithSubtitles } from "./TitleWithSubtitles";
+export const Title = ({ children: title, className, classModifier, firstSubtitle, icon, secondSubtitle, size = TitleSize.XL, }) => {
+    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, {})) }));
+};

package/dist/Title/Client/Title.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Title } from ".";
+declare const meta: Meta<typeof Title>;
+export default meta;
+export declare const TitleWithIcon: StoryObj<typeof Title>;
+export declare const TitleWithoutIcon: StoryObj<typeof Title>;

package/dist/Title/Client/Title.stories.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import article from "@material-symbols/svg-400/outlined/article-fill.svg";
+import { Title } from ".";
+import { Svg } from "../../Svg";
+import { TitleSize } from "./constants";
+const meta = {
+    title: "Client/Components/Title",
+    component: Title,
+};
+export default meta;
+export const TitleWithIcon = {
+    name: "Title With Icon",
+    render: (args) => _jsx(Title, { ...args }),
+    args: {
+        children: "Titre de la page",
+        firstSubtitle: "Sous-titre 1",
+        secondSubtitle: "Sous-titre 2",
+        icon: _jsx(Svg, { src: article }),
+        size: TitleSize.XL,
+    },
+    argTypes: {
+        size: {
+            options: Object.values(TitleSize),
+            control: { type: "select" },
+            defaultValue: TitleSize.XL,
+        },
+    },
+};
+export const TitleWithoutIcon = {
+    name: "Title Without Icon",
+    render: (args) => _jsx(Title, { ...args }),
+    args: {
+        children: "Titre de la page",
+        firstSubtitle: "Sous-titre 1",
+        secondSubtitle: "Sous-titre 2",
+        size: TitleSize.XL,
+    },
+    argTypes: {
+        size: {
+            options: Object.values(TitleSize),
+            control: { type: "select" },
+            defaultValue: TitleSize.XL,
+        },
+    },
+};

package/dist/Title/Client/TitleWithSubtitles.d.ts

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

package/dist/Title/Client/TitleWithSubtitles.js

@@ -0,0 +1,2 @@
+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 }))] }));

package/dist/Title/Client/__tests__/Title.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Title/Client/__tests__/Title.test.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { Title } from "..";
+import { TitleSize } from "../constants";
+describe("Title", () => {
+    it("should render correctly", () => {
+        render(_jsx(Title, { firstSubtitle: "firstSubtitle", secondSubtitle: "secondSubtitle", icon: "icon", children: "Title" }));
+        expect(screen.getByRole("heading", { name: "Title", level: 1 })).toBeInTheDocument();
+        expect(screen.getByText("firstSubtitle")).toBeInTheDocument();
+        expect(screen.getByText("secondSubtitle")).toBeInTheDocument();
+        expect(screen.getByText("icon")).toBeInTheDocument();
+    });
+    it("should have custom class", () => {
+        render(_jsx(Title, { firstSubtitle: "firstSubtitle", className: "custom-class", children: "Title" }));
+        expect(screen.getByText("Title").parentElement).toHaveClass("custom-class");
+    });
+    it("should have custom class with modifier", () => {
+        render(_jsx(Title, { firstSubtitle: "firstSubtitle", className: "custom-class", classModifier: "modifier", children: "Title" }));
+        expect(screen.getByText("Title").parentElement).toHaveClass("custom-class custom-class--modifier");
+    });
+    it('should not display icon and second subtitle when size is "L"', () => {
+        render(_jsx(Title, { firstSubtitle: "firstSubtitle", secondSubtitle: "secondSubtitle", icon: "icon", size: TitleSize.L, children: "Title" }));
+        expect(screen.getByRole("heading", { name: "Title", level: 1 })).toBeInTheDocument();
+        expect(screen.getByText("firstSubtitle")).toBeInTheDocument();
+        expect(screen.queryByText("secondSubtitle")).not.toBeInTheDocument();
+        expect(screen.queryByText("icon")).not.toBeInTheDocument();
+    });
+});

package/dist/Title/Client/__tests__/TitleWithSubtitles.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Title/Client/__tests__/TitleWithSubtitles.test.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from "@testing-library/react";
+import { TitleWithSubtitles } from "../TitleWithSubtitles";
+describe("TitleWithSubtitles", () => {
+    it("should render title and the two subtitles", () => {
+        const title = "Sample Title";
+        const firstSubtitle = "First Subtitle";
+        const secondSubtitle = "Second Subtitle";
+        render(_jsx(TitleWithSubtitles, { title: title, firstSubtitle: firstSubtitle, secondSubtitle: secondSubtitle }));
+        screen.getByRole("heading", { name: title, level: 1 });
+        expect(screen.getByText(firstSubtitle)).toBeInTheDocument();
+        expect(screen.getByText(secondSubtitle)).toBeInTheDocument();
+    });
+});

package/dist/Title/Client/constants.d.ts

@@ -0,0 +1,4 @@
+export declare enum TitleSize {
+    XL = "xl",
+    L = "l"
+}

package/dist/Title/Client/constants.js

@@ -0,0 +1,5 @@
+export var TitleSize;
+(function (TitleSize) {
+    TitleSize["XL"] = "xl";
+    TitleSize["L"] = "l";
+})(TitleSize || (TitleSize = {}));

package/dist/Title/Client/index.d.ts

@@ -0,0 +1,3 @@
+import "@axa-fr/design-system-slash-css/dist/Title/Client/Title.scss";
+export { TitleSize } from "./constants";
+export { Title } from "./Title";

package/dist/Title/Client/index.js

@@ -0,0 +1,3 @@
+import "@axa-fr/design-system-slash-css/dist/Title/Client/Title.scss";
+export { TitleSize } from "./constants";
+export { Title } from "./Title";

package/dist/agent.d.ts

@@ -6,6 +6,7 @@ export { Badge } from "./Badge/Badge";
 export { ButtonAgent as Button } from "./Button/Button.agent";
 export { Checkbox, CheckboxInput, CheckboxItem, CheckboxModes, } from "./Form/Checkbox/Agent";
 export { Choice, ChoiceInput } from "./Form/Choice";
+export { Field, FieldError, FieldForm, FieldInput, FormClassManager, HelpMessage, InputList, MessageTypes, getComponentClassName, } from "./Form/core";
 export { Date, DateInput } from "./Form/Date";
 export { MultiSelect, MultiSelectInput } from "./Form/MultiSelect";
 export { Number, NumberInput } from "./Form/Number";
@@ -14,12 +15,11 @@ export { Select, SelectBase, SelectInput } from "./Form/Select/Agent";
 export { Slider, SliderInput } from "./Form/Slider";
 export { Text, TextInput } from "./Form/Text/Agent";
 export { Textarea, TextareaInput } from "./Form/Textarea";
-export { Field, FieldError, FieldForm, FieldInput, FormClassManager, HelpMessage, InputList, MessageTypes, getComponentClassName, } from "./Form/core";
 export { Footer } from "./Layout/Footer/Agent";
 export { HeaderAgent as Header, Infos, Name, NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, TitleHeader, ToggleButton, User, } from "./Layout/Header/Agent";
 export { BooleanModal, Modal, ModalBody, ModalFooter, ModalHeader, ModalHeaderBase, } from "./ModalAgent";
 export { Step, StepBase, Steps } from "./Steps";
 export { Svg } from "./Svg";
 export { Tabs } from "./Tabs/Agent/Tabs.agent";
-export { Title } from "./Title/Title.agent";
+export { Title } from "./Title/Agent/Title";
 export * from "./Table";

package/dist/agent.js

@@ -6,6 +6,7 @@ export { Badge } from "./Badge/Badge";
 export { ButtonAgent as Button } from "./Button/Button.agent";
 export { Checkbox, CheckboxInput, CheckboxItem, CheckboxModes, } from "./Form/Checkbox/Agent";
 export { Choice, ChoiceInput } from "./Form/Choice";
+export { Field, FieldError, FieldForm, FieldInput, FormClassManager, HelpMessage, InputList, MessageTypes, getComponentClassName, } from "./Form/core";
 export { Date, DateInput } from "./Form/Date";
 export { MultiSelect, MultiSelectInput } from "./Form/MultiSelect";
 export { Number, NumberInput } from "./Form/Number";
@@ -14,12 +15,11 @@ export { Select, SelectBase, SelectInput } from "./Form/Select/Agent";
 export { Slider, SliderInput } from "./Form/Slider";
 export { Text, TextInput } from "./Form/Text/Agent";
 export { Textarea, TextareaInput } from "./Form/Textarea";
-export { Field, FieldError, FieldForm, FieldInput, FormClassManager, HelpMessage, InputList, MessageTypes, getComponentClassName, } from "./Form/core";
 export { Footer } from "./Layout/Footer/Agent";
 export { HeaderAgent as Header, Infos, Name, NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, TitleHeader, ToggleButton, User, } from "./Layout/Header/Agent";
 export { BooleanModal, Modal, ModalBody, ModalFooter, ModalHeader, ModalHeaderBase, } from "./ModalAgent";
 export { Step, StepBase, Steps } from "./Steps";
 export { Svg } from "./Svg";
 export { Tabs } from "./Tabs/Agent/Tabs.agent";
-export { Title } from "./Title/Title.agent";
+export { Title } from "./Title/Agent/Title";
 export * from "./Table";

package/dist/client.d.ts

@@ -24,3 +24,4 @@ export { Stepper } from "./Stepper/Stepper.client";
 export { Svg } from "./Svg";
 export { TabsClient as Tabs, Direction as TabsDirection, } from "./Tabs/Client/Tabs.client";
 export { Tag } from "./Tag";
+export { Title, TitleSize } from "./Title/Client";

package/dist/client.js

@@ -22,3 +22,4 @@ export { Stepper } from "./Stepper/Stepper.client";
 export { Svg } from "./Svg";
 export { TabsClient as Tabs, Direction as TabsDirection, } from "./Tabs/Client/Tabs.client";
 export { Tag } from "./Tag";
+export { Title, TitleSize } from "./Title/Client";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-slash-react",
-  "version": "0.2.0-beta.281",
+  "version": "0.2.0-beta.282",
   "description": "",
   "exports": {
     "./agent": {
@@ -45,7 +45,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-slash-css": "0.2.0-beta.281",
+    "@axa-fr/design-system-slash-css": "0.2.0-beta.282",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },