@axa-fr/design-system-look-and-feel-react 0.2.0-beta.313 → 0.2.0-beta.315

package/dist/Form/Text/Text.d.ts

@@ -1,5 +1,5 @@
 import "@axa-fr/design-system-look-and-feel-css/dist/Form/Text/Text.scss";
-import { ComponentPropsWithRef } from "react";
+import { ComponentPropsWithRef, MouseEventHandler } from "react";
 type Props = Omit<ComponentPropsWithRef<"input">, "required"> & {
     classModifier?: string;
     helper?: string;
@@ -7,6 +7,8 @@ type Props = Omit<ComponentPropsWithRef<"input">, "required"> & {
     description?: string;
     label?: string;
     required?: boolean;
+    buttonLabel?: string;
+    onButtonClick?: MouseEventHandler<HTMLButtonElement>;
 };
 declare const Text: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
 export { Text };

package/dist/Form/Text/Text.js

@@ -1,12 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import "@axa-fr/design-system-look-and-feel-css/dist/Form/Text/Text.scss";
 import { forwardRef } from "react";
+import infoIcon from "@material-symbols/svg-400/outlined/info.svg";
+import { Button } from "../..";
+import { Variants } from "../../Button/Button";
+import { Svg } from "../../Svg";
 import { getComponentClassName } from "../../utilities";
 import { InputError } from "../InputError";
 const Text = forwardRef(({ className, classModifier = "", ...otherProps }, inputRef) => {
     const componentClassName = getComponentClassName(className, classModifier, "af-form__input-text");
-    const { id, label, required, disabled, description, helper, error } = otherProps;
-    return (_jsxs("div", { className: "af-form__input-container", children: [_jsxs("label", { htmlFor: id, className: "af-form__input-label", children: [label, " ", required && _jsx("span", { children: " *" })] }), description && (_jsx("span", { className: "af-form__input-description", children: description })), _jsx("input", { className: componentClassName, type: "text", ref: inputRef, required: required, disabled: disabled, "aria-invalid": Boolean(error), "aria-describedby": error ? `${id}-error` : undefined, ...otherProps }), helper && _jsx("span", { className: "af-form__input-helper", children: helper }), error && _jsx(InputError, { id: `${id}-error`, message: error })] }));
+    const { id, label, required, disabled, description, helper, error, buttonLabel, onButtonClick, } = otherProps;
+    return (_jsxs("div", { className: "af-form__input-container", children: [_jsxs("label", { htmlFor: id, className: "af-form__input-label", children: [label, " ", required && _jsx("span", { children: " *" })] }), description && (_jsx("span", { className: "af-form__input-description", children: description })), buttonLabel && (_jsx(Button, { className: "af-form__input-more", variant: Variants.ghost, iconLeft: _jsx(Svg, { src: infoIcon }), onClick: onButtonClick, children: buttonLabel })), _jsx("input", { className: componentClassName, type: "text", ref: inputRef, required: required, disabled: disabled, "aria-invalid": Boolean(error), "aria-describedby": error ? `${id}-error` : undefined, ...otherProps }), helper && _jsx("span", { className: "af-form__input-helper", children: helper }), error && _jsx(InputError, { id: `${id}-error`, message: error })] }));
 });
 Text.displayName = "Text";
 export { Text };

package/dist/Form/Text/Text.stories.d.ts

@@ -6,3 +6,4 @@ type Story = StoryObj<typeof Text>;
 export declare const TextStory: Story;
 export declare const TextWithDescriptionStory: Story;
 export declare const TextOnErrorStory: Story;
+export declare const TextWithButton: Story;

package/dist/Form/Text/Text.stories.js

@@ -14,33 +14,38 @@ const meta = {
         required: false,
         className: "",
         type: "text",
+        buttonLabel: "",
     },
     argTypes: {
-        type: {
-            control: { type: "text" },
-            onChange: { action: "onChange" },
-        },
         onChange: { action: "onChange" },
     },
 };
 export default meta;
+const render = ({ onChange, ...args }) => (_jsx(Text, { onChange: onChange, ...args }));
 export const TextStory = {
     name: "Text",
-    render: ({ onChange, ...args }) => _jsx(Text, { onChange: onChange, ...args }),
+    render,
 };
 export const TextWithDescriptionStory = {
     name: "Text with description",
-    render: ({ onChange, ...args }) => _jsx(Text, { onChange: onChange, ...args }),
+    render,
     args: {
         description: "Description",
     },
 };
 export const TextOnErrorStory = {
     name: "Text on error",
-    render: ({ onChange, ...args }) => _jsx(Text, { onChange: onChange, ...args }),
+    render,
     args: {
         classModifier: "error",
         description: "Description",
         error: "Error Message",
     },
 };
+export const TextWithButton = {
+    name: "Text with button",
+    render,
+    args: {
+        buttonLabel: "En savoir plus",
+    },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-look-and-feel-react",
-  "version": "0.2.0-beta.313",
+  "version": "0.2.0-beta.315",
   "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.313",
+    "@axa-fr/design-system-look-and-feel-css": "0.2.0-beta.315",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },