@axa-fr/design-system-look-and-feel-react 1.0.4 → 1.0.5-ci.12

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 (4) hide show
  1. package/dist/Form/Checkbox/CheckboxSelect.js +1 -1
  2. package/dist/Form/Radio/RadioSelect.d.ts +1 -0
  3. package/dist/Form/Radio/RadioSelect.js +2 -2
  4. package/package.json +3 -57
package/dist/Form/Checkbox/CheckboxSelect.js CHANGED
@@ -7,5 +7,5 @@ import { useId } from "react";
7
7
  import { Svg } from "../../Svg";
8
8
  export const CheckboxSelect = ({ labelGroup, descriptionGroup, isRequired, options, errorMessage, onChange, type = "vertical", }) => {
9
9
  const optionId = useId();
10
- return (_jsxs("div", { className: "af-checkbox__container", children: [labelGroup && (_jsxs("span", { className: "af-checkbox__label", id: optionId, children: [labelGroup, isRequired && _jsx("span", { "aria-hidden": "true", children: "\u00A0*" })] })), descriptionGroup && (_jsx("span", { className: "af-checkbox__description", children: descriptionGroup })), _jsx("div", { role: "group", className: `af-checkbox af-checkbox-select af-checkbox-select--${type}`, children: options.map(({ label, description, subtitle, icon, ...inputProps }) => (_jsxs("label", { htmlFor: `id-${inputProps.name}`, children: [_jsx("input", { type: "checkbox", ...inputProps, id: `id-${inputProps.name}`, onChange: onChange, "aria-invalid": Boolean(errorMessage) && !inputProps.disabled }), _jsxs("div", { className: "af-checkbox__icons", children: [_jsx(Svg, { src: checkBoxOutlineBlankIcon, className: "af-checkbox__unchecked" }), _jsx(Svg, { src: checkBoxIcon, className: "af-checkbox__checked" })] }), _jsxs("div", { className: "af-checkbox__content", children: [icon, _jsxs("div", { className: "af-checkbox__content-description", children: [_jsx("span", { children: label }), description && _jsx("span", { children: description }), subtitle && _jsx("span", { children: subtitle })] })] })] }, inputProps.name))) }), errorMessage && (_jsxs("div", { className: "af-checkbox__error", "aria-live": "assertive", children: [_jsx(Svg, { src: errorOutline }), errorMessage] }))] }));
10
+ return (_jsxs("div", { className: "af-checkbox__container", children: [_jsxs("div", { className: "af-checkbox__label-container", children: [labelGroup && (_jsxs("span", { className: "af-checkbox__label", id: optionId, children: [labelGroup, isRequired && _jsx("span", { "aria-hidden": "true", children: "\u00A0*" })] })), descriptionGroup && (_jsx("span", { className: "af-checkbox__description", children: descriptionGroup }))] }), _jsx("div", { role: "group", className: `af-checkbox af-checkbox-select af-checkbox-select--${type}`, children: options.map(({ label, description, subtitle, icon, ...inputProps }) => (_jsxs("label", { htmlFor: `id-${inputProps.name}`, children: [_jsx("input", { type: "checkbox", ...inputProps, id: `id-${inputProps.name}`, onChange: onChange, "aria-invalid": Boolean(errorMessage) && !inputProps.disabled }), _jsxs("div", { className: "af-checkbox__icons", children: [_jsx(Svg, { src: checkBoxOutlineBlankIcon, className: "af-checkbox__unchecked" }), _jsx(Svg, { src: checkBoxIcon, className: "af-checkbox__checked" })] }), _jsxs("div", { className: "af-checkbox__content", children: [icon, _jsxs("div", { className: "af-checkbox__content-description", children: [_jsx("span", { children: label }), description && _jsx("span", { children: description }), subtitle && _jsx("span", { children: subtitle })] })] })] }, inputProps.name))) }), errorMessage && (_jsxs("div", { className: "af-checkbox__error", "aria-live": "assertive", children: [_jsx(Svg, { src: errorOutline }), errorMessage] }))] }));
11
11
  };
package/dist/Form/Radio/RadioSelect.d.ts CHANGED
@@ -3,6 +3,7 @@ import React, { ComponentPropsWithRef, ReactNode } from "react";
3
3
  type RadioSelectProps = {
4
4
  type: "vertical" | "horizontal";
5
5
  label?: string;
6
+ description?: string;
6
7
  isRequired?: boolean;
7
8
  options: ({
8
9
  label: ReactNode;
package/dist/Form/Radio/RadioSelect.js CHANGED
@@ -5,7 +5,7 @@ import radioOutlineBlankIcon from "@material-symbols/svg-400/outlined/radio_butt
5
5
  import { forwardRef, useCallback, useId, } from "react";
6
6
  import { Svg } from "../../Svg";
7
7
  import { InputError } from "../InputError";
8
- export const RadioSelect = forwardRef(({ id, label, options, errorMessage, onChange, type = "vertical", name, value, isDisabled, isRequired, ...rest }, ref) => {
8
+ export const RadioSelect = forwardRef(({ id, label, description, options, errorMessage, onChange, type = "vertical", name, value, isDisabled, isRequired, ...rest }, ref) => {
9
9
  const generatedId = useId();
10
10
  const optionId = id || generatedId;
11
11
  const getRef = useCallback((index, reference, val, inputVal) => {
@@ -14,6 +14,6 @@ export const RadioSelect = forwardRef(({ id, label, options, errorMessage, onCha
14
14
  }
15
15
  return null;
16
16
  }, []);
17
- return (_jsxs("div", { className: "af-radio__container", children: [label && (_jsxs("span", { className: "af-radio__label", id: optionId, children: [label, isRequired && _jsx("span", { "aria-hidden": "true", children: "\u00A0*" })] })), _jsx("div", { ...rest, role: "radiogroup", className: `af-radio af-radio-select af-radio-select--${type}`, "aria-invalid": Boolean(errorMessage), "aria-labelledby": optionId, "aria-errormessage": `${optionId}-error`, children: options.map(({ label: inputLabel, description, subtitle, icon, disabled: inputDisabled, ...inputProps }, idx) => (_jsxs("label", { htmlFor: `${optionId}-${inputLabel}`, children: [_jsx("input", { type: "radio", ...(isDisabled || inputDisabled ? { disabled: true } : null), ...inputProps, name: name, id: `${optionId}-${inputLabel}`, onChange: onChange, "aria-checked": value === inputProps.value, checked: value === inputProps.value, ref: getRef(idx, ref, value, inputProps.value) }), _jsxs("div", { className: "af-radio__icons", children: [_jsx(Svg, { src: radioOutlineBlankIcon, className: "af-radio__unchecked" }), _jsx(Svg, { src: radioIcon, className: "af-radio__checked" })] }), _jsxs("div", { className: "af-radio__content", children: [icon, _jsxs("div", { className: "af-radio__content-description", children: [_jsx("span", { children: inputLabel }), description && _jsx("span", { children: description }), subtitle && _jsx("span", { children: subtitle })] })] })] }, inputLabel))) }), errorMessage && (_jsx(InputError, { id: `${optionId}-error`, message: errorMessage }))] }));
17
+ return (_jsxs("div", { className: "af-radio__container", children: [_jsxs("div", { className: "af-radio__label-container", children: [label && (_jsxs("span", { className: "af-radio__label", id: optionId, children: [label, isRequired && _jsx("span", { "aria-hidden": "true", children: "\u00A0*" })] })), description && (_jsx("span", { className: "af-radio__description", children: description }))] }), _jsx("div", { ...rest, role: "radiogroup", className: `af-radio af-radio-select af-radio-select--${type}`, "aria-invalid": Boolean(errorMessage), "aria-labelledby": optionId, "aria-errormessage": `${optionId}-error`, children: options.map(({ label: inputLabel, description: inputDescription, subtitle, icon, disabled: inputDisabled, ...inputProps }, idx) => (_jsxs("label", { htmlFor: `${optionId}-${inputLabel}`, children: [_jsx("input", { type: "radio", ...(isDisabled || inputDisabled ? { disabled: true } : null), ...inputProps, name: name, id: `${optionId}-${inputLabel}`, onChange: onChange, "aria-checked": value === inputProps.value, checked: value === inputProps.value, ref: getRef(idx, ref, value, inputProps.value) }), _jsxs("div", { className: "af-radio__icons", children: [_jsx(Svg, { src: radioOutlineBlankIcon, className: "af-radio__unchecked" }), _jsx(Svg, { src: radioIcon, className: "af-radio__checked" })] }), _jsxs("div", { className: "af-radio__content", children: [icon, _jsxs("div", { className: "af-radio__content-description", children: [_jsx("span", { children: inputLabel }), inputDescription && _jsx("span", { children: inputDescription }), subtitle && _jsx("span", { children: subtitle })] })] })] }, inputLabel))) }), errorMessage && (_jsx(InputError, { id: `${optionId}-error`, message: errorMessage }))] }));
18
18
  });
19
19
  RadioSelect.displayName = "RadioSelect";
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.4",
3
+ "version": "1.0.5-ci.12",
4
4
  "description": "",
5
5
  "exports": {
6
6
  ".": {
@@ -45,7 +45,7 @@
45
45
  },
46
46
  "homepage": "https://github.com/AxaFrance/design-system#readme",
47
47
  "peerDependencies": {
48
- "@axa-fr/design-system-look-and-feel-css": "1.0.4",
48
+ "@axa-fr/design-system-look-and-feel-css": "1.0.5-ci.12",
49
49
  "@material-symbols/svg-400": ">= 0.19.0",
50
50
  "react": ">= 18"
51
51
  },
@@ -63,66 +63,12 @@
63
63
  "rc-slider": "^11.1.7",
64
64
  "react-select": "^5.9.0"
65
65
  },
66
- "devDependencies": {
67
- "@chromatic-com/storybook": "^1.9.0",
68
- "@material-symbols/svg-400": "*",
69
- "@storybook/addon-docs": "^8.3.5",
70
- "@storybook/addon-essentials": "^8.3.5",
71
- "@storybook/addon-interactions": "^8.3.5",
72
- "@storybook/addon-links": "^8.3.5",
73
- "@storybook/addon-mdx-gfm": "^8.3.5",
74
- "@storybook/addon-onboarding": "^8.3.5",
75
- "@storybook/blocks": "^8.3.5",
76
- "@storybook/manager-api": "^8.3.5",
77
- "@storybook/react": "^8.3.5",
78
- "@storybook/react-vite": "^8.3.5",
79
- "@storybook/test": "^8.3.5",
80
- "@storybook/theming": "^8.3.5",
81
- "@testing-library/dom": "^10.1.0",
82
- "@testing-library/jest-dom": "^6.5.0",
83
- "@testing-library/react": "^15.0.7",
84
- "@testing-library/user-event": "^14.5.2",
85
- "@types/dompurify": "^3.0.5",
86
- "@types/jest": "^29.5.12",
87
- "@types/jest-axe": "^3.5.9",
88
- "@types/node": "^20.14.9",
89
- "@types/react": "^18.3.2",
90
- "@typescript-eslint/eslint-plugin": "^8.17.0",
91
- "@typescript-eslint/parser": "^8.17.0",
92
- "@vitejs/plugin-react": "^4.3.1",
93
- "@vitest/coverage-v8": "^2.0.5",
94
- "@vitest/ui": "^2.1.2",
95
- "chromatic": "^11.12.0",
96
- "copyfiles": "^2.4.1",
97
- "eslint": "^8.57.0",
98
- "eslint-config-airbnb": "^19.0.4",
99
- "eslint-config-prettier": "^9.1.0",
100
- "eslint-import-resolver-typescript": "^3.6.1",
101
- "eslint-plugin-import": "^2.29.1",
102
- "eslint-plugin-jsx-a11y": "^6.8.0",
103
- "eslint-plugin-prettier": "^5.1.3",
104
- "eslint-plugin-react": "^7.36.1",
105
- "eslint-plugin-react-hooks": "^4.6.0",
106
- "eslint-plugin-storybook": "^0.9.0",
107
- "jest-axe": "^8.0.0",
108
- "jsdom": "^25.0.1",
109
- "prettier": "^3.3.3",
110
- "prop-types": "^15.8.1",
111
- "react": "^18.3.1",
112
- "react-dom": "^18.2.0",
113
- "rimraf": "^6.0.1",
114
- "storybook": "^8.3.5",
115
- "tsc-files": "^1.1.4",
116
- "typescript": "^5.6.3",
117
- "vitest": "^2.0.5"
118
- },
119
66
  "lint-staged": {
120
67
  "*.(js|jsx|ts|tsx)": "eslint --fix",
121
68
  "*.(ts|tsx)": "tsc-files --noEmit",
122
69
  "*.mdx": "prettier --write"
123
70
  },
124
71
  "volta": {
125
- "node": "20.10.0",
126
- "npm": "10.2.5"
72
+ "extends": "../../../package.json"
127
73
  }
128
74
  }