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

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.
@@ -1,7 +1 @@
1
- import "@axa-fr/design-system-look-and-feel-css/dist/Form/Checkbox/Checkbox.scss";
2
- import React, { ReactNode } from "react";
3
- declare const Checkbox: React.ForwardRefExoticComponent<{
4
- label: string | ReactNode;
5
- errorMessage?: string;
6
- } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "label"> & React.RefAttributes<HTMLInputElement>>;
7
- export { Checkbox };
1
+ export { Checkbox } from "@axa-fr/design-system-apollo-react/lf";
@@ -1,16 +1 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import "@axa-fr/design-system-look-and-feel-css/dist/Form/Checkbox/Checkbox.scss";
3
- import checkBoxIcon from "@material-symbols/svg-400/outlined/check_box-fill.svg";
4
- import checkBoxOutlineBlankIcon from "@material-symbols/svg-400/outlined/check_box_outline_blank.svg";
5
- import errorOutline from "@material-symbols/svg-400/outlined/error.svg";
6
- import { forwardRef, useId } from "react";
7
- import classNames from "classnames";
8
- import { Svg } from "../../Svg";
9
- const Checkbox = forwardRef(({ label, errorMessage, className, ...inputProps }, ref) => {
10
- const idError = useId();
11
- let inputId = useId();
12
- inputId = inputProps.id || inputId;
13
- return (_jsxs("div", { children: [_jsx("div", { className: classNames("af-checkbox", className), children: _jsxs("label", { htmlFor: inputId, children: [_jsx("input", { ref: ref, ...inputProps, type: "checkbox", id: inputId, "aria-errormessage": idError, "aria-invalid": Boolean(errorMessage) }), _jsxs("div", { className: "af-checkbox__icons", children: [_jsx(Svg, { src: checkBoxOutlineBlankIcon, className: "af-checkbox__unchecked" }), _jsx(Svg, { src: checkBoxIcon, className: "af-checkbox__checked" })] }), label] }, inputProps.name) }), errorMessage && (_jsxs("div", { className: "af-checkbox__error", "aria-live": "assertive", id: idError, children: [_jsx(Svg, { src: errorOutline }), errorMessage] }))] }));
14
- });
15
- Checkbox.displayName = "Checkbox";
16
- export { Checkbox };
1
+ export { Checkbox } from "@axa-fr/design-system-apollo-react/lf";
@@ -0,0 +1 @@
1
+ export { CheckboxCard } from "@axa-fr/design-system-apollo-react/lf";
@@ -0,0 +1 @@
1
+ export { CheckboxCard } from "@axa-fr/design-system-apollo-react/lf";
@@ -0,0 +1 @@
1
+ export { CheckboxText } from "@axa-fr/design-system-apollo-react/lf";
@@ -0,0 +1 @@
1
+ export { CheckboxText } from "@axa-fr/design-system-apollo-react/lf";
@@ -1,2 +1,3 @@
1
1
  export { Checkbox } from "./Checkbox";
2
- export { CheckboxSelect } from "./CheckboxSelect";
2
+ export { CheckboxText } from "./CheckboxText";
3
+ export { CheckboxCard } from "./CheckboxCard";
@@ -1,2 +1,3 @@
1
1
  export { Checkbox } from "./Checkbox";
2
- export { CheckboxSelect } from "./CheckboxSelect";
2
+ export { CheckboxText } from "./CheckboxText";
3
+ export { CheckboxCard } from "./CheckboxCard";
@@ -0,0 +1 @@
1
+ export { Heading, type HeadingLevel, } from "@axa-fr/design-system-apollo-react/lf";
@@ -0,0 +1 @@
1
+ export { Heading, } from "@axa-fr/design-system-apollo-react/lf";
package/dist/index.d.ts CHANGED
@@ -8,7 +8,7 @@ export { Message, messageVariants, type MessageVariants, } from "./Message/Messa
8
8
  export { Button, buttonVariants, type ButtonVariants } from "./Button/Button";
9
9
  export { Card } from "./Card";
10
10
  export { Divider } from "./Divider/Divider";
11
- export { Checkbox, CheckboxSelect } from "./Form/Checkbox";
11
+ export { Checkbox, CheckboxText, CheckboxCard } from "./Form/Checkbox";
12
12
  export { FileUpload } from "./Form/FileUpload";
13
13
  export { InputError } from "./Form/InputError";
14
14
  export { ItemMessage } from "./Form/ItemMessage/ItemMessage";
@@ -47,3 +47,4 @@ export { ProgressBar } from "./ProgressBar/ProgressBar";
47
47
  export { ProgressBarGroup } from "./ProgressBarGroup/ProgressBarGroup";
48
48
  export { Stepper } from "./Stepper/Stepper";
49
49
  export { TimelineVertical } from "./TimelineVertical/TimelineVertical";
50
+ export { Heading, type HeadingLevel } from "./Heading/Heading";
package/dist/index.js CHANGED
@@ -7,7 +7,7 @@ export { Message, messageVariants, } from "./Message/Message";
7
7
  export { Button, buttonVariants } from "./Button/Button";
8
8
  export { Card } from "./Card";
9
9
  export { Divider } from "./Divider/Divider";
10
- export { Checkbox, CheckboxSelect } from "./Form/Checkbox";
10
+ export { Checkbox, CheckboxText, CheckboxCard } from "./Form/Checkbox";
11
11
  export { FileUpload } from "./Form/FileUpload";
12
12
  export { InputError } from "./Form/InputError";
13
13
  export { ItemMessage } from "./Form/ItemMessage/ItemMessage";
@@ -45,3 +45,4 @@ export { ProgressBar } from "./ProgressBar/ProgressBar";
45
45
  export { ProgressBarGroup } from "./ProgressBarGroup/ProgressBarGroup";
46
46
  export { Stepper } from "./Stepper/Stepper";
47
47
  export { TimelineVertical } from "./TimelineVertical/TimelineVertical";
48
+ export { Heading } from "./Heading/Heading";
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.249",
3
+ "version": "1.0.5-alpha.251",
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.249",
50
+ "@axa-fr/design-system-look-and-feel-css": "1.0.5-alpha.251",
51
51
  "@material-symbols/svg-400": ">= 0.19.0",
52
52
  "react": ">= 18",
53
- "@axa-fr/design-system-apollo-react": "1.0.5-alpha.249"
53
+ "@axa-fr/design-system-apollo-react": "1.0.5-alpha.251"
54
54
  },
55
55
  "peerDependenciesMeta": {
56
56
  "@material-symbols/svg-400": {
@@ -1,18 +0,0 @@
1
- import "@axa-fr/design-system-look-and-feel-css/dist/Form/Checkbox/Checkbox.scss";
2
- import React, { ComponentPropsWithRef, type ReactNode } from "react";
3
- type CheckboxProps = ComponentPropsWithRef<"input"> & {
4
- type: "vertical" | "horizontal";
5
- labelGroup?: string;
6
- descriptionGroup?: string;
7
- isRequired?: boolean;
8
- options: ({
9
- label: ReactNode;
10
- subtitle?: ReactNode;
11
- description?: ReactNode;
12
- icon?: ReactNode;
13
- } & React.InputHTMLAttributes<HTMLInputElement>)[];
14
- errorMessage?: string;
15
- onChange?: React.ChangeEventHandler;
16
- };
17
- export declare const CheckboxSelect: ({ className, labelGroup, descriptionGroup, isRequired, options, errorMessage, onChange, type, }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
18
- export {};
@@ -1,14 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import "@axa-fr/design-system-look-and-feel-css/dist/Form/Checkbox/Checkbox.scss";
3
- import checkBoxIcon from "@material-symbols/svg-400/outlined/check_box-fill.svg";
4
- import checkBoxOutlineBlankIcon from "@material-symbols/svg-400/outlined/check_box_outline_blank.svg";
5
- import errorOutline from "@material-symbols/svg-400/outlined/error.svg";
6
- import { useId } from "react";
7
- import { Svg } from "../../Svg";
8
- import { getComponentClassName } from "../../utilities/helpers/getComponentClassName";
9
- export const CheckboxSelect = ({ className, labelGroup, descriptionGroup, isRequired, options, errorMessage, onChange, type = "vertical", }) => {
10
- const componentClassName = getComponentClassName("af-checkbox__container", className);
11
- const checkboxGroupClassName = getComponentClassName(`af-checkbox af-checkbox-select af-checkbox-select--${type}`, className);
12
- const optionId = useId();
13
- return (_jsxs("div", { className: componentClassName, 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: checkboxGroupClassName, 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] }))] }));
14
- };