@axa-fr/design-system-apollo-react 1.0.5-alpha.338 → 1.0.5-alpha.340

package/dist/Form/ItemFile/ItemFileApollo.d.ts

@@ -0,0 +1,4 @@
+import "@axa-fr/design-system-apollo-css/dist/Form/ItemFile/ItemFileApollo.scss";
+import type { ItemFileProps } from "./types";
+export { itemFileVariants } from "./ItemFileCommon";
+export declare const ItemFile: ({ onDeleteClick, onVisibilityClick, ariaLabelVisibility, ariaLabelDelete, filename, ...props }: ItemFileProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Form/ItemFile/ItemFileApollo.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-apollo-css/dist/Form/ItemFile/ItemFileApollo.scss";
+import deleteIcon from "@material-symbols/svg-400/outlined/delete.svg";
+import visibilityIcon from "@material-symbols/svg-400/outlined/visibility-fill.svg";
+import { ClickIcon } from "../../ClickIcon/ClickIconApollo";
+import { Icon } from "../../Icon/IconApollo";
+import { Spinner } from "../../Spinner/SpinnerApollo";
+import { ItemMessage } from "../ItemMessage/ItemMessageApollo";
+import { ItemFileCommon } from "./ItemFileCommon";
+export { itemFileVariants } from "./ItemFileCommon";
+export const ItemFile = ({ onDeleteClick, onVisibilityClick, ariaLabelVisibility, ariaLabelDelete, filename, ...props }) => (_jsx(ItemFileCommon, { ItemMessageComponent: ItemMessage, ItemIconComponent: Icon, ItemSpinnerComponent: Spinner, deleteIcon: _jsx(ClickIcon, { src: deleteIcon, onClick: onDeleteClick, "aria-label": ariaLabelDelete || `Suppression du fichier ${filename}` }), visibilityIcon: _jsx(ClickIcon, { src: visibilityIcon, onClick: onVisibilityClick, "aria-label": ariaLabelVisibility || `Observer le fichier ${filename}` }), ...props }));

package/dist/Form/ItemFile/ItemFileCommon.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode, type ComponentProps, type ComponentPropsWithoutRef, type ComponentType } from "react";
+import type { IconProps } from "../../Icon/IconCommon";
+import { Spinner } from "../../Spinner/SpinnerCommon";
+import { ItemMessage } from "../ItemMessage/ItemMessageCommon";
+export declare const itemFileVariants: {
+    readonly success: "success";
+    readonly error: "error";
+    readonly loading: "loading";
+};
+export type ItemFileState = keyof typeof itemFileVariants;
+export type ItemFileCommonProps = {
+    state: ItemFileState;
+    ariaLabelVisibility?: string;
+    ariaLabelDelete?: string;
+    filename?: string;
+    title: string;
+    subTitle: string;
+    errorMessage?: string;
+    deleteIcon: ReactNode;
+    visibilityIcon?: ReactNode;
+    success?: string;
+    ItemMessageComponent: ComponentType<ComponentProps<typeof ItemMessage>>;
+    ItemIconComponent: ComponentType<IconProps>;
+    ItemSpinnerComponent: ComponentType<ComponentProps<typeof Spinner>>;
+} & Omit<ComponentPropsWithoutRef<"section">, "children">;
+export declare const ItemFileCommon: ({ className, state, title, subTitle, errorMessage, deleteIcon, visibilityIcon, success, ItemSpinnerComponent, ItemIconComponent, ItemMessageComponent, ...props }: ItemFileCommonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Form/ItemFile/ItemFileCommon.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { ItemStateIcon } from "./ItemStateIcon";
+export const itemFileVariants = {
+    success: "success",
+    error: "error",
+    loading: "loading",
+};
+export const ItemFileCommon = ({ className, state, title, subTitle, errorMessage, deleteIcon, visibilityIcon, success, ItemSpinnerComponent, ItemIconComponent, ItemMessageComponent, ...props }) => {
+    const classname = classNames("af-item-file", errorMessage && "af-item-file--error", className);
+    return (_jsxs("section", { className: classname, ...props, children: [_jsxs("div", { className: "af-item-file__body", children: [_jsx(ItemStateIcon, { state: state, ItemIconComponent: ItemIconComponent, ItemSpinnerComponent: ItemSpinnerComponent }), _jsx("p", { className: "af-item-file__title", children: title }), _jsx("p", { className: "af-item-file__subtitle", children: subTitle }), _jsxs("div", { className: "af-item-file__actions", children: [state === "success" && visibilityIcon, deleteIcon] })] }), _jsx(ItemMessageComponent, { message: errorMessage ?? success, messageType: errorMessage ? "error" : "success" })] }));
+};

package/dist/Form/ItemFile/ItemFileLF.d.ts

@@ -0,0 +1,4 @@
+import "@axa-fr/design-system-apollo-css/dist/Form/ItemFile/ItemFileLF.scss";
+import type { ItemFileProps } from "./types";
+export { itemFileVariants } from "./ItemFileCommon";
+export declare const ItemFile: ({ onDeleteClick, onVisibilityClick, ariaLabelVisibility, ariaLabelDelete, filename, ...props }: ItemFileProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Form/ItemFile/ItemFileLF.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-apollo-css/dist/Form/ItemFile/ItemFileLF.scss";
+import deleteIconFilled from "@material-symbols/svg-400/outlined/delete-fill.svg";
+import visibilityIcon from "@material-symbols/svg-400/outlined/visibility-fill.svg";
+import { ClickIcon } from "../../ClickIcon/ClickIconLF";
+import { Icon } from "../../Icon/IconLF";
+import { Spinner } from "../../Spinner/SpinnerLF";
+import { ItemMessage } from "../ItemMessage/ItemMessageLF";
+import { ItemFileCommon } from "./ItemFileCommon";
+export { itemFileVariants } from "./ItemFileCommon";
+export const ItemFile = ({ onDeleteClick, onVisibilityClick, ariaLabelVisibility, ariaLabelDelete, filename, ...props }) => (_jsx(ItemFileCommon, { ItemMessageComponent: ItemMessage, ItemIconComponent: Icon, ItemSpinnerComponent: Spinner, deleteIcon: _jsx(ClickIcon, { src: deleteIconFilled, onClick: onDeleteClick, "aria-label": ariaLabelDelete || `Suppression du fichier ${filename}` }), visibilityIcon: _jsx(ClickIcon, { src: visibilityIcon, onClick: onVisibilityClick, "aria-label": ariaLabelVisibility || `Observer le fichier ${filename}` }), ...props }));

package/dist/Form/ItemFile/ItemStateIcon.d.ts

@@ -0,0 +1,11 @@
+import type { ComponentType, ComponentProps } from "react";
+import type { IconProps } from "../../Icon/IconCommon";
+import { Spinner } from "../../Spinner/SpinnerCommon";
+import type { ItemFileState } from "./ItemFileCommon";
+interface ItemStateIconProps {
+    state: ItemFileState;
+    ItemIconComponent: ComponentType<IconProps>;
+    ItemSpinnerComponent: ComponentType<ComponentProps<typeof Spinner>>;
+}
+declare const ItemStateIcon: ({ state, ItemIconComponent, ItemSpinnerComponent, }: ItemStateIconProps) => import("react/jsx-runtime").JSX.Element;
+export { ItemStateIcon };

package/dist/Form/ItemFile/ItemStateIcon.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import validationIcon from "@material-symbols/svg-400/outlined/check_circle-fill.svg";
+import errorIcon from "@material-symbols/svg-400/outlined/error-fill.svg";
+import { getComponentClassName } from "../../utilities/getComponentClassName";
+const ItemStateIcon = ({ state, ItemIconComponent, ItemSpinnerComponent, }) => {
+    const componentClassName = getComponentClassName("af-icon", `af-icon__${state}`);
+    return state === "loading" ? (_jsx(ItemSpinnerComponent, { size: 24, className: "af-item-file__spinner" })) : (_jsx(ItemIconComponent, { className: componentClassName, size: "S", src: state === "success" ? validationIcon : errorIcon }));
+};
+export { ItemStateIcon };

package/dist/Form/ItemFile/types.d.ts

@@ -0,0 +1,6 @@
+import { type MouseEvent } from "react";
+import type { ItemFileCommonProps } from "./ItemFileCommon";
+export type ItemFileProps = Omit<ItemFileCommonProps, "ItemMessageComponent" | "ItemIconComponent" | "ItemClickIconComponent" | "ItemSpinnerComponent" | "deleteIcon" | "visibilityIcon"> & {
+    onDeleteClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+    onVisibilityClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+};

package/dist/Form/ItemFile/types.js

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

package/dist/Spinner/SpinnerCommon.d.ts

@@ -1,3 +1,4 @@
+import { ComponentPropsWithoutRef } from "react";
 export declare const spinnerVariants: {
     readonly blue: "blue";
     readonly gray: "gray";
@@ -8,9 +9,9 @@ type SpinnerProps = {
     size?: 24 | 32 | 40;
     variant?: SpinnerVariants;
     text?: string;
-};
+} & ComponentPropsWithoutRef<"div">;
 declare const Spinner: {
-    ({ size, variant, text, }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+    ({ size, variant, text, className, ...props }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { Spinner };

package/dist/Spinner/SpinnerCommon.js

@@ -5,10 +5,11 @@ export const spinnerVariants = {
     white: "white",
 };
 const DEFAULT_CLASSNAME = "af-spinner";
-const Spinner = ({ size = 40, variant = "blue", text = "Chargement en cours", }) => (_jsx("div", { role: "alert", "aria-busy": true, "aria-label": text, "aria-live": "assertive", className: [
+const Spinner = ({ size = 40, variant = "blue", text = "Chargement en cours", className, ...props }) => (_jsx("div", { role: "alert", ...props, "aria-busy": true, "aria-label": text, "aria-live": "assertive", className: [
         DEFAULT_CLASSNAME,
         `${DEFAULT_CLASSNAME}--${variant}`,
         `${DEFAULT_CLASSNAME}--${size}`,
+        className,
     ]
         .filter(Boolean)
         .join(" "), style: {

package/dist/index.d.ts

@@ -18,6 +18,7 @@ export { CheckboxText } from "./Form/Checkbox/CheckboxText/CheckboxTextApollo";
 export { InputDate } from "./Form/InputDate/InputDateApollo";
 export { ItemLabel } from "./Form/ItemLabel/ItemLabelApollo";
 export { ItemMessage } from "./Form/ItemMessage/ItemMessageApollo";
+export { ItemFile, itemFileVariants } from "./Form/ItemFile/ItemFileApollo";
 export { TextArea } from "./Form/TextArea/TextAreaApollo";
 export { Radio } from "./Form/Radio/Radio/RadioApollo";
 export { CardRadio } from "./Form/Radio/CardRadio/CardRadioApollo";

package/dist/index.js

@@ -18,6 +18,7 @@ export { CheckboxText } from "./Form/Checkbox/CheckboxText/CheckboxTextApollo";
 export { InputDate } from "./Form/InputDate/InputDateApollo";
 export { ItemLabel } from "./Form/ItemLabel/ItemLabelApollo";
 export { ItemMessage } from "./Form/ItemMessage/ItemMessageApollo";
+export { ItemFile, itemFileVariants } from "./Form/ItemFile/ItemFileApollo";
 export { TextArea } from "./Form/TextArea/TextAreaApollo";
 export { Radio } from "./Form/Radio/Radio/RadioApollo";
 export { CardRadio } from "./Form/Radio/CardRadio/CardRadioApollo";

package/dist/indexLF.d.ts

@@ -20,6 +20,7 @@ export { InputDate,
 InputDate as DateInput, } from "./Form/InputDate/InputDateLF";
 export { InputPhone } from "./Form/InputPhone/InputPhoneLF";
 export { ItemLabel } from "./Form/ItemLabel/ItemLabelLF";
+export { ItemFile, itemFileVariants } from "./Form/ItemFile/ItemFileLF";
 export { ItemMessage } from "./Form/ItemMessage/ItemMessageLF";
 export { TextArea } from "./Form/TextArea/TextAreaLF";
 export { Radio } from "./Form/Radio/Radio/RadioLF";

package/dist/indexLF.js

@@ -20,6 +20,7 @@ export { InputDate,
 InputDate as DateInput, } from "./Form/InputDate/InputDateLF";
 export { InputPhone } from "./Form/InputPhone/InputPhoneLF";
 export { ItemLabel } from "./Form/ItemLabel/ItemLabelLF";
+export { ItemFile, itemFileVariants } from "./Form/ItemFile/ItemFileLF";
 export { ItemMessage } from "./Form/ItemMessage/ItemMessageLF";
 export { TextArea } from "./Form/TextArea/TextAreaLF";
 export { Radio } from "./Form/Radio/Radio/RadioLF";

package/package.json

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