@axa-fr/design-system-slash-react 0.2.0-beta.289 → 0.2.0-beta.295

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 (7) hide show
  1. package/dist/Form/FileUpload/Client/FileUpload.d.ts +1 -1
  2. package/dist/Form/FileUpload/Client/FileUpload.js +4 -5
  3. package/dist/Form/Select/Client/Select.d.ts +6 -2
  4. package/dist/ModalClient/Modal.client.d.ts +1 -0
  5. package/dist/ModalClient/Modal.client.js +1 -1
  6. package/dist/ModalClient/Modal.client.stories.js +5 -1
  7. package/package.json +6 -6
package/dist/Form/FileUpload/Client/FileUpload.d.ts CHANGED
@@ -26,7 +26,7 @@ type Props = Omit<ComponentPropsWithRef<"input">, "required"> & {
26
26
  onDelete?: (id: string) => void;
27
27
  };
28
28
  declare const FileUpload: {
29
- ({ ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
29
+ ({ id, label, buttonLabel, instructions, dropzoneDescription, required, files, errors, globalError, isMobile, onView, onDelete, ...otherProps }: Props): import("react/jsx-runtime").JSX.Element;
30
30
  displayName: string;
31
31
  };
32
32
  export { FileUpload };
package/dist/Form/FileUpload/Client/FileUpload.js CHANGED
@@ -22,8 +22,7 @@ function getReadableFileSizeString(fileSizeInBytes) {
22
22
  } while (fileSizeInBytesCopy > 1024);
23
23
  return Math.max(fileSizeInBytesCopy, 0.1).toFixed(1) + byteUnits[i];
24
24
  }
25
- const FileUpload = ({ ...otherProps }) => {
26
- const { id, label, buttonLabel, instructions, dropzoneDescription, required, files, errors, globalError, isMobile, onView, onDelete, } = otherProps;
25
+ const FileUpload = ({ id, label, buttonLabel, instructions, dropzoneDescription, required, files, errors, globalError, isMobile, onView, onDelete, ...otherProps }) => {
27
26
  const getIcon = (isInError, isLoading) => {
28
27
  if (isInError) {
29
28
  return (_jsx(Svg, { src: error, className: "af-form__file-title-container-icon-error" }));
@@ -33,15 +32,15 @@ const FileUpload = ({ ...otherProps }) => {
33
32
  }
34
33
  return (_jsx(Svg, { src: check, className: "af-form__file-title-container-icon-success" }));
35
34
  };
36
- return (_jsxs(_Fragment, { 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 || !dropzoneDescription) && "is-mobile"), children: [_jsx("input", { type: "file", name: "file-input", ...otherProps }), dropzoneDescription && (_jsxs("div", { className: "af-form__file-input-dropdown-text", children: [_jsx("p", { children: dropzoneDescription }), _jsx("p", { children: "ou" })] })), _jsx(Button, { variant: Variants.tertiary, onClick: () => document.getElementById(id)?.click(), iconLeft: _jsx(Svg, { src: plus, className: "af-form__file-input-icon" }), children: buttonLabel })] }), globalError && _jsx(InputError, { message: globalError }), _jsx("small", { className: "af-form__file-input-help", children: instructions }), _jsx("div", { className: "custom-table-file af-file-table", children: _jsx("ul", { className: "af-form__file-list", children: files.map(({ id: fileId, name, size, isLoading }) => {
35
+ return (_jsxs(_Fragment, { 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 || !dropzoneDescription) && "is-mobile"), children: [_jsx("input", { type: "file", name: "file-input", id: id, ...otherProps }), dropzoneDescription && (_jsxs("div", { className: "af-form__file-input-dropdown-text", children: [_jsx("p", { children: dropzoneDescription }), _jsx("p", { children: "ou" })] })), _jsx(Button, { variant: Variants.tertiary, onClick: () => document.getElementById(id)?.click(), iconLeft: _jsx(Svg, { src: plus, className: "af-form__file-input-icon" }), children: buttonLabel })] }), globalError && _jsx(InputError, { message: globalError }), _jsx("small", { className: "af-form__file-input-help", children: instructions }), _jsx("div", { className: "custom-table-file af-file-table", children: _jsx("ul", { className: "af-form__file-list", children: files.map(({ id: fileId, name, size, isLoading }) => {
37
36
  const effectiveSize = getReadableFileSizeString(size);
38
37
  const isInError = errors.some((fileError) => fileError.id === fileId);
39
38
  const errorMessage = errors.find((fileError) => fileError.id === fileId)?.message;
40
- return (_jsxs(_Fragment, { children: [_jsxs("li", { className: `af-form__file-line ${isInError ? "af-form__file-line--error" : ""}`, children: [_jsxs("div", { className: "af-form__file-title-container", children: [getIcon(isInError, isLoading), _jsxs("div", { className: "af-form__file-title", 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(Svg, { tabIndex: 0, onClick: () => onView(fileId), onKeyDown: (e) => {
39
+ return (_jsxs(_Fragment, { children: [_jsxs("li", { className: `af-form__file-line ${isInError ? "af-form__file-line--error" : ""}`, children: [_jsxs("div", { className: "af-form__file-title-container", children: [getIcon(isInError, isLoading), _jsxs("div", { className: "af-form__file-title", 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(Svg, { tabIndex: 0, role: "button", "aria-label": "Visualiser", onClick: () => onView(fileId), onKeyDown: (e) => {
41
40
  if (e.key === "Enter") {
42
41
  onView(fileId);
43
42
  }
44
- }, className: "af-form__file-actions-icon", src: visibility })), onDelete && (_jsx(Svg, { tabIndex: 0, onClick: () => onDelete(fileId), onKeyDown: (e) => {
43
+ }, className: "af-form__file-actions-icon", src: visibility })), onDelete && (_jsx(Svg, { tabIndex: 0, role: "button", "aria-label": "Supprimer", onClick: () => onDelete(fileId), onKeyDown: (e) => {
45
44
  if (e.key === "Enter") {
46
45
  onDelete(fileId);
47
46
  }
package/dist/Form/Select/Client/Select.d.ts CHANGED
@@ -1,6 +1,10 @@
1
1
  import "@axa-fr/design-system-slash-css/dist/Form/Select/Client/Select.client.scss";
2
2
  import ReactSelect, { ActionMeta, SingleValue } from "react-select";
3
3
  import { ComponentPropsWithoutRef, PropsWithChildren } from "react";
4
+ type Option = {
5
+ label: string;
6
+ value: string | number;
7
+ };
4
8
  type Props = Omit<ComponentPropsWithoutRef<ReactSelect>, "placeholder" | "noOptionsMessage"> & {
5
9
  id: string;
6
10
  label: string;
@@ -8,11 +12,11 @@ type Props = Omit<ComponentPropsWithoutRef<ReactSelect>, "placeholder" | "noOpti
8
12
  label: string;
9
13
  value?: string | number | readonly string[];
10
14
  }[];
11
- value: SingleValue<string>;
15
+ value: Option | null;
12
16
  errorLabel?: string;
13
17
  placeholder?: string;
14
18
  noOptionsMessage?: string;
15
- onChange: (newValue: SingleValue<string>, actionMeta: ActionMeta<string>) => void;
19
+ onChange: (newValue: SingleValue<Option>, actionMeta: ActionMeta<string>) => void;
16
20
  disabled?: boolean;
17
21
  required?: boolean;
18
22
  };
package/dist/ModalClient/Modal.client.d.ts CHANGED
@@ -2,6 +2,7 @@ import { PropsWithChildren, ReactNode } from "react";
2
2
  import "@axa-fr/design-system-slash-css/dist/Modal/Modal.client.scss";
3
3
  export type ButtonAction = {
4
4
  text: string;
5
+ disabled?: boolean;
5
6
  callback: () => void;
6
7
  };
7
8
  type ModalProps = {
package/dist/ModalClient/Modal.client.js CHANGED
@@ -35,5 +35,5 @@ export const Modal = ({ isOpen, hasCloseBtn = true, onClose, children, title, su
35
35
  handleCloseModal();
36
36
  }
37
37
  };
38
- return (_jsxs("dialog", { ref: modalRef, onKeyDown: handleKeyDown, onClick: (e) => e.target === modalRef.current && handleCloseModal(), className: "af-modal", "aria-labelledby": idTitle, "aria-describedby": idContent, children: [_jsxs("div", { id: idTitle, className: "af-modal__top", children: [iconTitle, _jsxs("h2", { className: "af-modal__top-title", children: [_jsxs("div", { children: [_jsx("div", { className: "af-modal__top-title-text", children: title }), subtitle && (_jsx("span", { className: "af-modal__top-title-subtitle", children: subtitle }))] }), hasCloseBtn && (_jsx(Button, { className: "af-modal__top-title-close-btn", onClick: handleCloseModal, type: "button", "aria-label": "close", children: _jsx(Svg, { src: close, width: 32, height: 32 }) }))] })] }), _jsxs("div", { id: idContent, className: "af-modal__content", children: [children, actions && (_jsxs("div", { className: `af-modal__actions${fullWidthButtons ? " af-modal__actions--fullWidth" : ""} `, children: [actions?.primary && (_jsx(Button, { variant: ButtonVariants.primary, onClick: actions?.primary.callback, children: actions?.primary.text })), actions?.secondary && (_jsx(Button, { variant: ButtonVariants.secondary, onClick: actions?.secondary.callback, children: actions?.secondary.text })), actions?.tertiary && (_jsx(Button, { variant: ButtonVariants.tertiary, onClick: actions?.tertiary.callback, children: actions?.tertiary.text }))] }))] })] }));
38
+ return (_jsxs("dialog", { ref: modalRef, onKeyDown: handleKeyDown, onClick: (e) => e.target === modalRef.current && handleCloseModal(), className: "af-modal", "aria-labelledby": idTitle, "aria-describedby": idContent, children: [_jsxs("div", { id: idTitle, className: "af-modal__top", children: [iconTitle, _jsxs("h2", { className: "af-modal__top-title", children: [_jsxs("div", { children: [_jsx("div", { className: "af-modal__top-title-text", children: title }), subtitle && (_jsx("span", { className: "af-modal__top-title-subtitle", children: subtitle }))] }), hasCloseBtn && (_jsx(Button, { className: "af-modal__top-title-close-btn", onClick: handleCloseModal, type: "button", "aria-label": "close", children: _jsx(Svg, { src: close, width: 32, height: 32 }) }))] })] }), _jsxs("div", { id: idContent, className: "af-modal__content", children: [children, actions && (_jsxs("div", { className: `af-modal__actions${fullWidthButtons ? " af-modal__actions--fullWidth" : ""} `, children: [actions?.primary && (_jsx(Button, { variant: ButtonVariants.primary, onClick: actions?.primary.callback, disabled: actions?.primary.disabled, children: actions?.primary.text })), actions?.secondary && (_jsx(Button, { variant: ButtonVariants.secondary, onClick: actions?.secondary.callback, disabled: actions?.secondary.disabled, children: actions?.secondary.text })), actions?.tertiary && (_jsx(Button, { variant: ButtonVariants.tertiary, onClick: actions?.tertiary.callback, disabled: actions?.tertiary.disabled, children: actions?.tertiary.text }))] }))] })] }));
39
39
  };
package/dist/ModalClient/Modal.client.stories.js CHANGED
@@ -16,7 +16,11 @@ const Container = (props) => {
16
16
  return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: () => setIsOpen(true), children: "open modal" }), _jsx(Modal, { ...props, isOpen: isOpen, onClose: () => setIsOpen(false), actions: {
17
17
  primary: { text: "Save", callback: () => setIsOpen(false) },
18
18
  secondary: { text: "Cancel", callback: () => setIsOpen(false) },
19
- tertiary: { text: "Reset", callback: () => setIsOpen(false) },
19
+ tertiary: {
20
+ text: "Reset",
21
+ callback: () => setIsOpen(false),
22
+ disabled: true,
23
+ },
20
24
  } })] }));
21
25
  };
22
26
  export const Playground = {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@axa-fr/design-system-slash-react",
3
- "version": "0.2.0-beta.289",
3
+ "version": "0.2.0-beta.295",
4
4
  "description": "",
5
5
  "exports": {
6
6
  "./agent": {
@@ -45,7 +45,7 @@
45
45
  },
46
46
  "homepage": "https://github.com/AxaFrance/design-system#readme",
47
47
  "peerDependencies": {
48
- "@axa-fr/design-system-slash-css": "0.2.0-beta.289",
48
+ "@axa-fr/design-system-slash-css": "0.2.0-beta.295",
49
49
  "@material-symbols/svg-400": ">= 0.19.0",
50
50
  "react": ">= 18"
51
51
  },
@@ -77,7 +77,7 @@
77
77
  "@storybook/test": "^7.6.14",
78
78
  "@testing-library/dom": "^10.1.0",
79
79
  "@testing-library/jest-dom": "^6.4.6",
80
- "@testing-library/react": "^15.0.7",
80
+ "@testing-library/react": "^16.0.0",
81
81
  "@testing-library/user-event": "^14.5.2",
82
82
  "@types/dompurify": "^3.0.5",
83
83
  "@types/jest": "^29.5.12",
@@ -87,8 +87,8 @@
87
87
  "@typescript-eslint/eslint-plugin": "^7.17.0",
88
88
  "@typescript-eslint/parser": "^7.16.0",
89
89
  "@vitejs/plugin-react": "^4.3.1",
90
- "@vitest/coverage-v8": "^1.6.0",
91
- "@vitest/ui": "^1.4.0",
90
+ "@vitest/coverage-v8": "^2.0.5",
91
+ "@vitest/ui": "^2.0.5",
92
92
  "copyfiles": "^2.4.1",
93
93
  "eslint": "^8.57.0",
94
94
  "eslint-config-airbnb": "^19.0.4",
@@ -109,7 +109,7 @@
109
109
  "storybook": "^7.6.14",
110
110
  "tsc-files": "^1.1.4",
111
111
  "typescript": "^5.4.4",
112
- "vitest": "^1.4.0"
112
+ "vitest": "^2.0.5"
113
113
  },
114
114
  "lint-staged": {
115
115
  "*.(js|jsx|ts|tsx)": "eslint --fix",