@axa-fr/design-system-look-and-feel-react 1.0.5-alpha.251 → 1.0.5-alpha.253

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/Form/FileUpload/FileUpload.d.ts +1 -1
  2. package/dist/Form/FileUpload/FileUpload.js +7 -9
  3. package/package.json +3 -3
package/dist/Form/FileUpload/FileUpload.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import { ComponentPropsWithRef } from "react";
2
1
  import "@axa-fr/design-system-look-and-feel-css/dist/Form/FileUpload/FileUpload.scss";
2
+ import { ComponentPropsWithRef } from "react";
3
3
  type Props = Omit<ComponentPropsWithRef<"input">, "required"> & {
4
4
  id: string;
5
5
  label?: string;
package/dist/Form/FileUpload/FileUpload.js CHANGED
@@ -1,15 +1,13 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import { useId } from "react";
2
+ import { Button, ItemMessage, Spinner, Svg, } from "@axa-fr/design-system-apollo-react/lf";
3
3
  import "@axa-fr/design-system-look-and-feel-css/dist/Form/FileUpload/FileUpload.scss";
4
- import visibility from "@material-symbols/svg-400/outlined/visibility-fill.svg";
5
- import close from "@material-symbols/svg-400/outlined/close-fill.svg";
4
+ import plus from "@material-symbols/svg-400/outlined/add_circle-fill.svg";
6
5
  import check from "@material-symbols/svg-400/outlined/check_circle-fill.svg";
6
+ import close from "@material-symbols/svg-400/outlined/close-fill.svg";
7
7
  import error from "@material-symbols/svg-400/outlined/error-fill.svg";
8
- import errorO from "@material-symbols/svg-400/outlined/error.svg";
9
- import plus from "@material-symbols/svg-400/outlined/add_circle-fill.svg";
8
+ import visibility from "@material-symbols/svg-400/outlined/visibility-fill.svg";
10
9
  import classNames from "classnames";
11
- import { Spinner, Svg, Button } from "@axa-fr/design-system-apollo-react/lf";
12
- import { InputError } from "../InputError";
10
+ import { useId } from "react";
13
11
  function getReadableFileSizeString(fileSizeInBytes) {
14
12
  let i = -1;
15
13
  let fileSizeInBytesCopy = fileSizeInBytes;
@@ -31,13 +29,13 @@ const FileUpload = ({ id, label, buttonLabel, instructions, dropzoneDescription,
31
29
  }
32
30
  return (_jsx(Svg, { src: check, className: "af-form__file-title-container-icon-success" }));
33
31
  };
34
- 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 }) => {
32
+ 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 }) => {
35
33
  const effectiveSize = getReadableFileSizeString(size);
36
34
  const isInError = errors
37
35
  ? errors.some((fileError) => fileError.id === fileId)
38
36
  : false;
39
37
  const errorMessage = errors?.find((fileError) => fileError.id === fileId)?.message;
40
- 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));
38
+ 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));
41
39
  }) })] }))] }));
42
40
  };
43
41
  FileUpload.displayName = "FileUpload";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@axa-fr/design-system-look-and-feel-react",
3
- "version": "1.0.5-alpha.251",
3
+ "version": "1.0.5-alpha.253",
4
4
  "description": "",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
@@ -47,10 +47,10 @@
47
47
  },
48
48
  "homepage": "https://github.com/AxaFrance/design-system#readme",
49
49
  "peerDependencies": {
50
- "@axa-fr/design-system-look-and-feel-css": "1.0.5-alpha.251",
50
+ "@axa-fr/design-system-look-and-feel-css": "1.0.5-alpha.253",
51
51
  "@material-symbols/svg-400": ">= 0.19.0",
52
52
  "react": ">= 18",
53
- "@axa-fr/design-system-apollo-react": "1.0.5-alpha.251"
53
+ "@axa-fr/design-system-apollo-react": "1.0.5-alpha.253"
54
54
  },
55
55
  "peerDependenciesMeta": {
56
56
  "@material-symbols/svg-400": {