@axa-fr/design-system-look-and-feel-react 0.2.0-beta.318 → 0.2.0-beta.319

package/dist/Form/Radio/RadioSelect.d.ts

@@ -2,6 +2,8 @@ import "@axa-fr/design-system-look-and-feel-css/dist/Form/Radio/Radio.scss";
 import React, { ComponentPropsWithRef, ReactNode } from "react";
 type RadioSelectProps = {
     type: "vertical" | "horizontal";
+    label?: string;
+    isRequired?: boolean;
     options: ({
         label: ReactNode;
         subtitle?: ReactNode;

package/dist/Form/Radio/RadioSelect.js

@@ -5,12 +5,12 @@ import radioOutlineBlankIcon from "@material-symbols/svg-400/outlined/radio_butt
 import errorOutline from "@material-symbols/svg-400/outlined/error.svg";
 import { forwardRef, useId, } from "react";
 import { Svg } from "../../Svg";
-export const RadioSelect = forwardRef(({ id, options, errorMessage, onChange, type = "vertical", name, value, isDisabled, ...rest }, ref) => {
+export const RadioSelect = forwardRef(({ id, label, options, errorMessage, onChange, type = "vertical", name, value, isDisabled, isRequired, ...rest }, ref) => {
     const generatedId = useId();
     const optionId = id || generatedId;
-    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: ref, ...rest, role: "radiogroup", className: `af-radio af-radio-select af-radio-select--${type}`, "aria-invalid": Boolean(errorMessage), children: options.map(({ label, description, subtitle, icon, disabled: inputDisabled, ...inputProps }) => (_jsxs("label", { htmlFor: `${optionId}-${label}`, children: [_jsx("input", { type: "radio", ...(isDisabled || inputDisabled ? { disabled: true } : null), ...inputProps, name: name, id: `${optionId}-${label}`, onChange: onChange, ...(value && {
+    return (_jsxs(_Fragment, { children: [label && (_jsxs("span", { className: "af-radio__label", id: optionId, children: [label, isRequired && _jsx("span", { "aria-hidden": "true", children: "\u00A0*" })] })), _jsx("div", { ref: ref, ...rest, role: "radiogroup", className: `af-radio af-radio-select af-radio-select--${type}`, "aria-invalid": Boolean(errorMessage), "aria-labelledby": optionId, children: options.map(({ label: inputLabel, description, subtitle, icon, disabled: inputDisabled, ...inputProps }) => (_jsxs("label", { htmlFor: `${optionId}-${inputLabel}`, children: [_jsx("input", { type: "radio", "aria-labelledby": optionId, ...(isDisabled || inputDisabled ? { disabled: true } : null), ...inputProps, name: name, id: `${optionId}-${inputLabel}`, onChange: onChange, ...(value && {
                                 "aria-checked": value === inputProps.value,
                                 checked: 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: label }), description && _jsx("span", { children: description }), subtitle && _jsx("span", { children: subtitle })] })] })] }, label))) }), errorMessage && (_jsxs("div", { className: "af-radio__error", "aria-live": "assertive", children: [_jsx(Svg, { src: errorOutline }), errorMessage] }))] }));
+                            }) }), _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 && (_jsxs("div", { className: "af-radio__error", "aria-live": "assertive", children: [_jsx(Svg, { src: errorOutline }), errorMessage] }))] }));
 });
 RadioSelect.displayName = "RadioSelect";

package/dist/Form/Radio/RadioSelect.stories.d.ts

@@ -5,3 +5,4 @@ declare const meta: Meta;
 export default meta;
 export declare const RadioSelectStory: StoryObj<ComponentProps<typeof RadioSelect>>;
 export declare const RadioSelectDisabledStory: StoryObj<ComponentProps<typeof RadioSelect>>;
+export declare const RadioSelectWithLabel: StoryObj<ComponentProps<typeof RadioSelect>>;

package/dist/Form/Radio/RadioSelect.stories.js

@@ -8,6 +8,26 @@ const meta = {
     argTypes: {},
 };
 export default meta;
+const storyOptions = [
+    {
+        label: "Paris",
+        description: "Capitale de la France",
+        subtitle: "Nord",
+        value: "paris",
+        icon: _jsx(Svg, { src: home }),
+    },
+    {
+        label: "Bruxelles",
+        description: "Capitale de la Belgique",
+        value: "bruxelles",
+        icon: _jsx(Svg, { src: home }),
+    },
+    {
+        label: "Lille",
+        value: "lille",
+        icon: _jsx(Svg, { src: home }),
+    },
+];
 export const RadioSelectStory = {
     name: "Select",
     render: ({ ...args }) => _jsx(RadioSelect, { ...args }),
@@ -15,26 +35,7 @@ export const RadioSelectStory = {
         type: "vertical",
         "aria-label": "Quelle ville ?",
         name: "cities",
-        options: [
-            {
-                label: "Paris",
-                description: "Capitale de la France",
-                subtitle: "Nord",
-                value: "paris",
-                icon: _jsx(Svg, { src: home }),
-            },
-            {
-                label: "Bruxelles",
-                description: "Capitale de la Belgique",
-                value: "bruxelles",
-                icon: _jsx(Svg, { src: home }),
-            },
-            {
-                label: "Lille",
-                value: "lille",
-                icon: _jsx(Svg, { src: home }),
-            },
-        ],
+        options: storyOptions,
     },
     argTypes: {
         type: {
@@ -88,3 +89,24 @@ export const RadioSelectDisabledStory = {
         onChange: { action: "onChange" },
     },
 };
+export const RadioSelectWithLabel = {
+    name: "SelectWithLabel",
+    render: ({ ...args }) => _jsx(RadioSelect, { ...args }),
+    args: {
+        type: "vertical",
+        label: "Quelle ville ?",
+        isRequired: true,
+        name: "cities",
+        options: storyOptions,
+    },
+    argTypes: {
+        type: {
+            control: { type: "inline-radio" },
+            options: ["vertical", "horizontal"],
+        },
+        errorMessage: {
+            control: { type: "text" },
+        },
+        onChange: { action: "onChange" },
+    },
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-look-and-feel-react",
-  "version": "0.2.0-beta.318",
+  "version": "0.2.0-beta.319",
   "description": "",
   "exports": {
     ".": {
@@ -41,7 +41,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-look-and-feel-css": "0.2.0-beta.318",
+    "@axa-fr/design-system-look-and-feel-css": "0.2.0-beta.319",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },