@axa-fr/design-system-look-and-feel-react 1.0.5-alpha.252 → 1.0.5-alpha.254

package/dist/Form/FileUpload/FileUpload.d.ts

@@ -1,5 +1,5 @@
-import { ComponentPropsWithRef } from "react";
 import "@axa-fr/design-system-look-and-feel-css/dist/Form/FileUpload/FileUpload.scss";
+import { ComponentPropsWithRef } from "react";
 type Props = Omit<ComponentPropsWithRef<"input">, "required"> & {
     id: string;
     label?: string;

package/dist/Form/FileUpload/FileUpload.js

@@ -1,15 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from "react";
+import { Button, ItemMessage, Spinner, Svg, } from "@axa-fr/design-system-apollo-react/lf";
 import "@axa-fr/design-system-look-and-feel-css/dist/Form/FileUpload/FileUpload.scss";
-import visibility from "@material-symbols/svg-400/outlined/visibility-fill.svg";
-import close from "@material-symbols/svg-400/outlined/close-fill.svg";
+import plus from "@material-symbols/svg-400/outlined/add_circle-fill.svg";
 import check from "@material-symbols/svg-400/outlined/check_circle-fill.svg";
+import close from "@material-symbols/svg-400/outlined/close-fill.svg";
 import error from "@material-symbols/svg-400/outlined/error-fill.svg";
-import errorO from "@material-symbols/svg-400/outlined/error.svg";
-import plus from "@material-symbols/svg-400/outlined/add_circle-fill.svg";
+import visibility from "@material-symbols/svg-400/outlined/visibility-fill.svg";
 import classNames from "classnames";
-import { Spinner, Svg, Button } from "@axa-fr/design-system-apollo-react/lf";
-import { InputError } from "../InputError";
+import { useId } from "react";
 function getReadableFileSizeString(fileSizeInBytes) {
     let i = -1;
     let fileSizeInBytesCopy = fileSizeInBytes;
@@ -31,13 +29,13 @@ const FileUpload = ({ id, label, buttonLabel, instructions, dropzoneDescription,
         }
         return (_jsx(Svg, { src: check, className: "af-form__file-title-container-icon-success" }));
     };
-    return (_jsxs("div", { children: [_jsxs("label", { className: "af-form__group--label", htmlFor: id, children: [label, " ", required ? "*" : ""] }), _jsxs("div", { className: classNames("af-form__file-input", globalError && "af-form__file-input--error", (isMobile || (!withPadding && !dropzoneDescription)) && "is-mobile"), children: [_jsx("input", { type: "file", name: "file-input", id: id, "aria-errormessage": idError, "aria-invalid": Boolean(globalError), ...otherProps }), dropzoneDescription && (_jsxs("div", { className: "af-form__file-input-dropdown-text", children: [_jsx("p", { children: dropzoneDescription }), _jsx("p", { children: "ou" })] })), _jsx(Button, { variant: "tertiary", onClick: () => document.getElementById(id)?.click(), iconLeft: _jsx(Svg, { src: plus, className: "af-form__file-input-icon" }), children: buttonLabel })] }), globalError && _jsx(InputError, { id: idError, message: globalError }), instructions && (_jsx("small", { className: "af-form__file-input-help", children: instructions })), files && files.length !== 0 && (_jsxs("div", { className: "custom-table-file af-file-table", children: [filesListLabel && (_jsx("div", { className: "af-form__group--label af-form__files-list-label", children: filesListLabel })), _jsx("ul", { className: "af-form__file-list", children: files.map(({ id: fileId, name, size, isLoading }) => {
+    return (_jsxs("div", { children: [_jsxs("label", { className: "af-form__group--label", htmlFor: id, children: [label, " ", required ? "*" : ""] }), _jsxs("div", { className: "af-form__file-input-container", children: [_jsxs("div", { className: classNames("af-form__file-input", globalError && "af-form__file-input--error", (isMobile || (!withPadding && !dropzoneDescription)) && "is-mobile"), children: [_jsx("input", { type: "file", name: "file-input", id: id, "aria-errormessage": idError, "aria-invalid": Boolean(globalError), ...otherProps }), dropzoneDescription && (_jsxs("div", { className: "af-form__file-input-dropdown-text", children: [_jsx("p", { children: dropzoneDescription }), _jsx("p", { children: "ou" })] })), _jsx(Button, { variant: "tertiary", onClick: () => document.getElementById(id)?.click(), iconLeft: _jsx(Svg, { src: plus, className: "af-form__file-input-icon" }), children: buttonLabel })] }), globalError && _jsx(ItemMessage, { id: idError, message: globalError }), instructions && (_jsx("small", { className: "af-form__file-input-help", children: instructions }))] }), files && files.length !== 0 && (_jsxs("div", { className: "custom-table-file af-file-table", children: [filesListLabel && (_jsx("div", { className: "af-form__group--label af-form__files-list-label", children: filesListLabel })), _jsx("ul", { className: "af-form__file-list", children: files.map(({ id: fileId, name, size, isLoading }) => {
                             const effectiveSize = getReadableFileSizeString(size);
                             const isInError = errors
                                 ? errors.some((fileError) => fileError.id === fileId)
                                 : false;
                             const errorMessage = errors?.find((fileError) => fileError.id === fileId)?.message;
-                            return (_jsxs("li", { className: "af-form__file-line", children: [_jsxs("div", { className: `af-form__file-line-container ${isInError ? "af-form__file-line-container--error" : ""}`, children: [_jsxs("div", { className: "af-form__file-title", children: [getIcon(isInError, isLoading), _jsxs("div", { children: [_jsx("span", { className: "af-form__file-name", children: name }), _jsx("span", { className: "af-form__file-size", children: effectiveSize })] })] }), _jsxs("div", { className: "af-form__file-actions", children: [onView && (_jsx(Button, { "aria-label": "Visualiser", onClick: () => onView(fileId), variant: "ghost", iconLeft: _jsx(Svg, { src: visibility }) })), onDelete && (_jsx(Button, { "aria-label": "Supprimer", onClick: () => onDelete(fileId), variant: "ghost", iconLeft: _jsx(Svg, { src: close }) }))] })] }), isInError && (_jsxs("small", { className: "af-form__file-error", children: [_jsx(Svg, { src: errorO, className: "af-form__file-error-icon", width: 18 }), errorMessage] }))] }, fileId));
+                            return (_jsxs("li", { className: "af-form__file-line", children: [_jsxs("div", { className: `af-form__file-line-container ${isInError ? "af-form__file-line-container--error" : ""}`, children: [_jsxs("div", { className: "af-form__file-title", children: [getIcon(isInError, isLoading), _jsxs("div", { children: [_jsx("span", { className: "af-form__file-name", children: name }), _jsx("span", { className: "af-form__file-size", children: effectiveSize })] })] }), _jsxs("div", { className: "af-form__file-actions", children: [onView && (_jsx(Button, { "aria-label": "Visualiser", onClick: () => onView(fileId), variant: "ghost", iconLeft: _jsx(Svg, { src: visibility }) })), onDelete && (_jsx(Button, { "aria-label": "Supprimer", onClick: () => onDelete(fileId), variant: "ghost", iconLeft: _jsx(Svg, { src: close }) }))] })] }), isInError && _jsx(ItemMessage, { message: errorMessage })] }, fileId));
                         }) })] }))] }));
 };
 FileUpload.displayName = "FileUpload";

package/dist/List/ContentItemDuo/ContentItemDuo.d.ts

@@ -1,14 +1 @@
-import { type ReactNode } from "react";
-type ContentItemDuoProps = {
-    label: string;
-    value: ReactNode;
-    isVertical?: boolean;
-    className?: string;
-    classModifier?: string;
-    isShowingDoneIcon?: boolean;
-    isShowingCloseIcon?: boolean;
-    buttonText?: string;
-    onButtonClick?: () => void;
-};
-export declare const ContentItemDuo: ({ label, value, isVertical, className, classModifier, isShowingDoneIcon, isShowingCloseIcon, buttonText, onButtonClick, }: ContentItemDuoProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export { ContentItemDuo } from "@axa-fr/design-system-apollo-react/lf";

package/dist/List/ContentItemDuo/ContentItemDuo.js

@@ -1,17 +1 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import checkIcon from "@material-symbols/svg-400/outlined/check.svg";
-import closeIcon from "@material-symbols/svg-400/outlined/close.svg";
-import { useMemo } from "react";
-import { Button, Svg } from "../..";
-import { getComponentClassName } from "../../utilities";
-export const ContentItemDuo = ({ label, value, isVertical = false, className, classModifier, isShowingDoneIcon = false, isShowingCloseIcon = false, buttonText, onButtonClick, }) => {
-    const componentClassName = useMemo(() => {
-        const classModifiers = [classModifier];
-        if (isVertical) {
-            classModifiers.push("vertical");
-        }
-        return getComponentClassName("af-content-item-duo", className, classModifiers.filter(Boolean).join(" "));
-    }, [classModifier, className, isVertical]);
-    const iconContainerModifier = useMemo(() => ` af-content-item-duo__icon--${isShowingDoneIcon ? "done" : "close"}`, [isShowingDoneIcon]);
-    return (_jsxs("div", { className: componentClassName, children: [(isShowingDoneIcon || isShowingCloseIcon) && (_jsxs("div", { className: `af-content-item-duo__icon${iconContainerModifier}`, children: [isShowingDoneIcon && _jsx(Svg, { src: checkIcon }), isShowingCloseIcon && _jsx(Svg, { src: closeIcon })] })), _jsx("p", { className: "af-content-item-duo__label", children: label }), typeof value === "string" ? (_jsx("p", { className: "af-content-item-duo__value", children: value })) : (_jsx("div", { className: "af-content-item-duo__value", children: value })), buttonText && (_jsx("div", { className: "af-content-item-duo__button", children: _jsx(Button, { variant: "ghost", onClick: onButtonClick, children: buttonText }) }))] }));
-};
+export { ContentItemDuo } from "@axa-fr/design-system-apollo-react/lf";

package/dist/index.d.ts

@@ -25,7 +25,7 @@ export { BurgerMenu, Header, NavBar, PreviousLink } from "./Layout/Header";
 export { Link } from "./Link/Link";
 export { List } from "./List";
 export { ClickItem, createClickItemParent } from "./List/ClickItem";
-export { ContentItemDuo } from "./List/ContentItemDuo";
+export { ContentItemDuo } from "./List/ContentItemDuo/ContentItemDuo";
 export { ContentItemMono, ContentItemMonoSize } from "./List/ContentItemMono";
 export { ContentTabItem, ContentTabList } from "./List/ContentTabList";
 export { Spinner, type SpinnerVariants, spinnerVariants, } from "./Spinner/Spinner";

package/dist/index.js

@@ -24,7 +24,7 @@ export { BurgerMenu, Header, NavBar, PreviousLink } from "./Layout/Header";
 export { Link } from "./Link/Link";
 export { List } from "./List";
 export { ClickItem, createClickItemParent } from "./List/ClickItem";
-export { ContentItemDuo } from "./List/ContentItemDuo";
+export { ContentItemDuo } from "./List/ContentItemDuo/ContentItemDuo";
 export { ContentItemMono, ContentItemMonoSize } from "./List/ContentItemMono";
 export { ContentTabItem, ContentTabList } from "./List/ContentTabList";
 export { Spinner, spinnerVariants, } from "./Spinner/Spinner";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-look-and-feel-react",
-  "version": "1.0.5-alpha.252",
+  "version": "1.0.5-alpha.254",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -47,10 +47,10 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-look-and-feel-css": "1.0.5-alpha.252",
+    "@axa-fr/design-system-look-and-feel-css": "1.0.5-alpha.254",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18",
-    "@axa-fr/design-system-apollo-react": "1.0.5-alpha.252"
+    "@axa-fr/design-system-apollo-react": "1.0.5-alpha.254"
   },
   "peerDependenciesMeta": {
     "@material-symbols/svg-400": {

package/dist/List/ContentItemDuo/index.d.ts

@@ -1,2 +0,0 @@
-import "@axa-fr/design-system-look-and-feel-css/dist/List/ContentItemDuo/ContentItemDuo.scss";
-export { ContentItemDuo } from "./ContentItemDuo";

package/dist/List/ContentItemDuo/index.js

@@ -1,2 +0,0 @@
-import "@axa-fr/design-system-look-and-feel-css/dist/List/ContentItemDuo/ContentItemDuo.scss";
-export { ContentItemDuo } from "./ContentItemDuo";