@axa-fr/design-system-look-and-feel-react 0.2.0-beta.306

package/dist/Accordion/Accordion.d.ts

@@ -0,0 +1,8 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Accordion/Accordion.scss";
+export declare const Accordion: {
+    ({ children }: React.PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+    Item: ({ title, children }: {
+        title: string;
+        children: React.ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/Accordion/Accordion.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-look-and-feel-css/dist/Accordion/Accordion.scss";
+import { AccordionItem } from "./AccordionItem";
+export const Accordion = ({ children }) => {
+    return _jsx("div", { className: "af-accordion-client", children: children });
+};
+Accordion.Item = AccordionItem;

package/dist/Accordion/Accordion.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Accordion } from "./Accordion";
+declare const meta: Meta<typeof Accordion>;
+export default meta;
+type StoryProps = {
+    numberOfItems: number;
+};
+export declare const AccordionStory: StoryObj<StoryProps>;

package/dist/Accordion/Accordion.stories.js

@@ -0,0 +1,24 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Accordion } from "./Accordion";
+const meta = {
+    component: Accordion,
+    title: "Components/Accordion",
+    parameters: {
+        layout: "fullscreen",
+    },
+};
+export default meta;
+export const AccordionStory = {
+    name: "Accordion",
+    render: ({ numberOfItems }) => {
+        return (_jsx(Accordion, { children: Array.from({ length: numberOfItems }, (_, i) => (_jsxs(Accordion.Item, { title: `Title ${i + 1}`, children: ["Content ", i + 1] }, i))) }));
+    },
+    args: {
+        numberOfItems: 3,
+    },
+    argTypes: {
+        numberOfItems: {
+            control: { type: "range", min: 1, max: 10 },
+        },
+    },
+};

package/dist/Accordion/AccordionItem.d.ts

@@ -0,0 +1,6 @@
+type AccordionItemProps = {
+    title: string;
+    children: React.ReactNode;
+};
+export declare const AccordionItem: ({ title, children }: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Accordion/AccordionItem.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState } from "react";
+export const AccordionItem = ({ title, children }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const id = useId();
+    const onClick = () => {
+        setIsOpen(!isOpen);
+    };
+    return (_jsxs("div", { className: "af-accordion-client__item", children: [_jsx("h3", { children: _jsx("button", { type: "button", "aria-expanded": isOpen, "aria-controls": `accordion-section-${id}`, id: `accordion-title-${id}`, onClick: onClick, children: title }) }), _jsx("div", { role: "region", "aria-labelledby": `accordion-title-${id}`, id: `accordion-section-${id}`, hidden: !isOpen, children: children })] }));
+};

package/dist/Alert/Alert.d.ts

@@ -0,0 +1,12 @@
+import { ComponentPropsWithoutRef, PropsWithChildren, ReactElement } from "react";
+import "@axa-fr/design-system-look-and-feel-css/dist/Alert/Alert.scss";
+import { Link } from "../Link/Link";
+export type AlertType = "validation" | "error" | "warning" | "information" | "neutral";
+type AlertProps = {
+    type: AlertType;
+    title?: string;
+    link?: ReactElement<typeof Link>;
+    iconSize?: number;
+} & ComponentPropsWithoutRef<"div">;
+export declare const Alert: ({ type, title, children, link, iconSize, }: PropsWithChildren<AlertProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Alert/Alert.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, } from "react";
+import wbIncandescentOutlined from "@material-symbols/svg-400/outlined/wb_incandescent.svg";
+import errorIcon from "@material-symbols/svg-400/outlined/emergency_home.svg";
+import errorOutline from "@material-symbols/svg-400/outlined/error.svg";
+import checkCircleOutline from "@material-symbols/svg-400/outlined/check_circle.svg";
+import "@axa-fr/design-system-look-and-feel-css/dist/Alert/Alert.scss";
+import { Svg } from "../Svg";
+function getIconFromType(type) {
+    switch (type) {
+        case "error":
+            return errorIcon;
+        case "validation":
+            return checkCircleOutline;
+        case "neutral":
+        case "warning":
+            return errorOutline;
+        case "information":
+        default:
+            return wbIncandescentOutlined;
+    }
+}
+export const Alert = ({ type = "information", title, children, link, iconSize = 24, }) => {
+    const icon = useMemo(() => getIconFromType(type), [type]);
+    return (_jsxs("div", { className: `af-alert af-alert--${type}`, children: [_jsx(Svg, { src: icon, width: iconSize, height: iconSize, className: "af-alert__icon" }), _jsxs("div", { className: "af-alert-client__content", children: [title && _jsx("p", { className: "af-alert__title", children: title }), children, link && _jsx("p", { className: "af-alert__link", children: link })] })] }));
+};

package/dist/Alert/Alert.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Alert } from "./Alert";
+declare const meta: Meta<typeof Alert>;
+export default meta;
+export declare const Default: StoryObj<typeof Alert>;

package/dist/Alert/Alert.stories.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Alert } from "./Alert";
+import { Link } from "../Link/Link";
+const MODIFIERS = ["information", "neutral", "error", "validation", "warning"];
+const meta = {
+    title: "Components/Alert",
+    component: Alert,
+};
+export default meta;
+export const Default = {
+    name: "Default",
+    args: {
+        title: "My Alert title",
+        type: "information",
+        children: "Vestibulum nunc neque, sodales non luctus in, dictum vitae nisl. Curabitur vitae massa non nisl lacinia tempus. Pellentesque id nulla tortor.",
+        link: (_jsx(Link, { openInNewTab: true, href: "https://fakelink.com", children: "Plus de d\u00E9tails" })),
+        iconSize: 24,
+    },
+    argTypes: {
+        type: {
+            options: MODIFIERS,
+            control: { type: "select" },
+            defaultValue: "information",
+        },
+    },
+};

package/dist/Button/Button.d.ts

@@ -0,0 +1,17 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Button/Button.scss";
+import { ComponentPropsWithoutRef, PropsWithChildren, ReactNode } from "react";
+export declare enum Variants {
+    primary = "primary",
+    business = "primary-business",
+    secondary = "secondary",
+    secondaryError = "secondary-error",
+    tertiary = "tertiary",
+    ghost = "ghost"
+}
+type ButtonProps = {
+    variant?: Variants;
+    iconLeft?: ReactNode;
+    iconRight?: ReactNode;
+} & ComponentPropsWithoutRef<"button">;
+export declare const ButtonClient: ({ children, className, disabled, variant, iconLeft, iconRight, ...args }: PropsWithChildren<ButtonProps>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Button/Button.js

@@ -0,0 +1,15 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/design-system-look-and-feel-css/dist/Button/Button.scss";
+import classNames from "classnames";
+export var Variants;
+(function (Variants) {
+    Variants["primary"] = "primary";
+    Variants["business"] = "primary-business";
+    Variants["secondary"] = "secondary";
+    Variants["secondaryError"] = "secondary-error";
+    Variants["tertiary"] = "tertiary";
+    Variants["ghost"] = "ghost";
+})(Variants || (Variants = {}));
+export const ButtonClient = ({ children, className, disabled, variant, iconLeft, iconRight, ...args }) => {
+    return (_jsxs("button", { className: classNames("af-btn-client", variant && `af-btn-client--${variant.toString()}`, className), disabled: disabled, type: "button", ...args, children: [iconLeft, children, iconRight] }));
+};

package/dist/Button/Button.stories.d.ts

@@ -0,0 +1,22 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ReactNode } from "react";
+import { ButtonClient, Variants } from "./Button";
+declare const meta: Meta<typeof ButtonClient>;
+export default meta;
+type StoryProps = Omit<React.ComponentProps<typeof ButtonClient>, "children" | "variant" | "disabled" | "iconLeft" | "iconRight"> & {
+    children: string;
+    variant: Variants;
+    disabled: boolean;
+    iconLeft: ReactNode;
+    iconRight: ReactNode;
+};
+type Story = StoryObj<StoryProps>;
+export declare const Playground: Story;
+export declare const Business: StoryObj<typeof ButtonClient>;
+export declare const Secondary: StoryObj<typeof ButtonClient>;
+export declare const SecondaryError: StoryObj<typeof ButtonClient>;
+export declare const Tertiary: StoryObj<typeof ButtonClient>;
+export declare const Ghost: StoryObj<typeof ButtonClient>;
+export declare const MultiExamples: StoryObj<typeof ButtonClient>;
+export declare const WithIconRight: StoryObj<typeof ButtonClient>;
+export declare const WithIconLeft: StoryObj<typeof ButtonClient>;

package/dist/Button/Button.stories.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import accountBalance from "@material-symbols/svg-400/outlined/account_balance.svg";
+import arrowBack from "@material-symbols/svg-400/outlined/arrow_back.svg";
+import biotech from "@material-symbols/svg-400/outlined/biotech.svg";
+import code from "@material-symbols/svg-400/outlined/code.svg";
+import fireExtinguisher from "@material-symbols/svg-400/outlined/fire_extinguisher.svg";
+import heartBroken from "@material-symbols/svg-400/outlined/heart_broken.svg";
+import { ButtonClient, Variants } from "./Button";
+import { Svg } from "../Svg";
+const meta = {
+    component: ButtonClient,
+    title: "Components/Button",
+    parameters: {
+        layout: "centered",
+    },
+    argTypes: { onClick: { action: "clicked" } },
+};
+export default meta;
+export const Playground = {
+    name: "Button",
+    render: ({ children: text, variant, disabled, iconLeft, iconRight, onClick, ...args }) => (_jsx(ButtonClient, { variant: variant, iconLeft: iconLeft, iconRight: iconRight, disabled: disabled, onClick: onClick, ...args, children: text })),
+    args: {
+        children: "Button",
+    },
+    argTypes: {
+        variant: {
+            options: Variants,
+            control: { type: "multi-select" },
+        },
+        iconLeft: {
+            control: { type: "input" },
+        },
+        iconRight: {
+            control: { type: "input" },
+        },
+    },
+};
+export const Business = {
+    name: "Button business",
+    args: {
+        children: "Button Business",
+        variant: Variants.business,
+    },
+};
+export const Secondary = {
+    name: "Button secondary",
+    args: {
+        children: "Button Secondary",
+        variant: Variants.secondary,
+    },
+};
+export const SecondaryError = {
+    name: "Button secondary error",
+    args: {
+        children: "Button Secondary Error",
+        variant: Variants.secondaryError,
+    },
+};
+export const Tertiary = {
+    name: "Button tertiary",
+    args: {
+        children: "Button Tertiary",
+        variant: Variants.tertiary,
+    },
+};
+export const Ghost = {
+    name: "Button ghost",
+    args: {
+        children: "Button Ghost",
+        variant: Variants.ghost,
+    },
+};
+export const MultiExamples = {
+    name: "Button examples",
+    render: () => {
+        return (_jsxs("div", { style: {
+                display: "flex",
+                justifyContent: "space-evenly",
+                alignItems: "center",
+                padding: "2rem",
+                flexWrap: "wrap",
+                gap: "2rem",
+            }, children: [_jsx(ButtonClient, { children: "Button Default" }), _jsx(ButtonClient, { disabled: true, children: "Button Disabled" }), _jsx(ButtonClient, { variant: Variants.business, children: "Button Business" }), _jsx(ButtonClient, { variant: Variants.business, disabled: true, children: "Button Business Disabled" }), _jsx(ButtonClient, { variant: Variants.secondary, children: "Button Secondary" }), _jsx(ButtonClient, { variant: Variants.secondary, disabled: true, children: "Button Secondary Disabled" }), _jsx(ButtonClient, { variant: Variants.secondaryError, children: "Button Secondary Error" }), _jsx(ButtonClient, { variant: Variants.secondaryError, disabled: true, children: "Button Secondary Error Disabled" }), _jsx(ButtonClient, { variant: Variants.tertiary, children: "Button Tertiary" }), _jsx(ButtonClient, { variant: Variants.tertiary, disabled: true, children: "Button Tertiary Disabled" }), _jsx(ButtonClient, { variant: Variants.ghost, children: "Button Ghost" }), _jsx(ButtonClient, { iconRight: _jsx(Svg, { src: arrowBack, fill: "white" }), children: "test" }), _jsx(ButtonClient, { variant: Variants.secondary, iconRight: _jsx(Svg, { src: code, fill: "#00008F" }), children: "With icon" }), _jsx(ButtonClient, { variant: Variants.tertiary, iconLeft: _jsx(Svg, { src: fireExtinguisher, fill: "#00008F" }), children: "With icon" }), _jsx(ButtonClient, { variant: Variants.business, iconRight: _jsx(Svg, { src: biotech, fill: "white" }), children: "With icon" }), _jsx(ButtonClient, { variant: Variants.ghost, iconLeft: _jsx(Svg, { src: accountBalance, fill: "#00008F" }), iconRight: _jsx(Svg, { src: heartBroken, fill: "#00008F" }), children: "With icon MULTI" })] }));
+    },
+};
+export const WithIconRight = {
+    name: "Button with right icon",
+    args: {
+        children: "With icon",
+        iconRight: _jsx(Svg, { src: heartBroken }),
+    },
+};
+export const WithIconLeft = {
+    name: "Button with left icon",
+    args: {
+        children: "With icon",
+        iconLeft: _jsx(Svg, { src: heartBroken }),
+    },
+};

package/dist/Card/Card.d.ts

@@ -0,0 +1,6 @@
+import { type ComponentProps } from "react";
+type CardProps = ComponentProps<"section"> & ComponentProps<"button"> & {
+    classModifier?: string;
+};
+export declare const Card: ({ children, className, classModifier, onClick, ...otherProps }: CardProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Card/Card.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { getComponentClassName } from "../utilities";
+export const Card = ({ children, className, classModifier, onClick, ...otherProps }) => {
+    const componentClassName = useMemo(() => getComponentClassName(className, classModifier, "af-card"), [className, classModifier]);
+    const Component = useMemo(() => (onClick ? "button" : "section"), [onClick]);
+    const componentProps = useMemo(() => (onClick ? { type: "button", onClick } : { tabIndex: 0 }), [onClick]);
+    return (_jsx(Component, { className: componentClassName, ...componentProps, ...otherProps, children: children }));
+};

package/dist/Card/Card.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Card } from ".";
+declare const meta: Meta<typeof Card>;
+export default meta;
+export declare const Default: StoryObj<typeof Card>;
+export declare const ButtonCard: StoryObj<typeof Card>;

package/dist/Card/Card.stories.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from ".";
+const MODIFIERS = [" ", "elevation-2"];
+const CUSTOM_CHILDREN = (_jsxs(_Fragment, { children: [_jsx("h1", { className: "af-card__title", children: "My card title" }), _jsx("p", { children: "My card content" })] }));
+const meta = {
+    title: "Components/Card",
+    component: Card,
+};
+export default meta;
+export const Default = {
+    name: "Card",
+    render: (args) => _jsx(Card, { ...args }),
+    args: {
+        children: CUSTOM_CHILDREN,
+        classModifier: " ",
+    },
+    argTypes: {
+        classModifier: {
+            options: MODIFIERS,
+            control: { type: "select" },
+            defaultValue: " ",
+        },
+    },
+};
+export const ButtonCard = {
+    name: "Button Card",
+    render: (args) => _jsx(Card, { ...args }),
+    args: {
+        children: CUSTOM_CHILDREN,
+        classModifier: " ",
+    },
+    argTypes: {
+        classModifier: {
+            options: MODIFIERS,
+            control: { type: "select" },
+            defaultValue: " ",
+        },
+        onClick: { action: "onClick" },
+    },
+};

package/dist/Card/__tests__/Card.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/Card/__tests__/Card.test.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Card } from "../Card";
+describe("Card", () => {
+    it("should render children", () => {
+        render(_jsx(Card, { children: "A card" }));
+        const card = screen.getByText("A card");
+        expect(card).toHaveClass("af-card");
+    });
+    it("should have custom class", () => {
+        render(_jsx(Card, { className: "custom-class", children: "A card" }));
+        expect(screen.getByText("A card")).toHaveClass("custom-class");
+    });
+    it("should have custom class with modifier", () => {
+        render(_jsx(Card, { className: "custom-class", classModifier: "modifier", children: "A card" }));
+        expect(screen.getByText("A card")).toHaveClass("custom-class custom-class--modifier");
+    });
+    it("should call onClick when card button clicked", async () => {
+        const onClick = vi.fn();
+        render(_jsx(Card, { onClick: onClick, children: "A card" }));
+        userEvent.click(screen.getByRole("button", { name: "A card" }));
+        await waitFor(() => {
+            expect(onClick).toHaveBeenCalled();
+        });
+    });
+});

package/dist/Card/index.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Card/Card.scss";
+export { Card } from "./Card";

package/dist/Card/index.js

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Card/Card.scss";
+export { Card } from "./Card";

package/dist/Form/Checkbox/Checkbox.d.ts

@@ -0,0 +1,7 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Form/Checkbox/Checkbox.scss";
+import React, { ReactNode } from "react";
+declare const Checkbox: React.ForwardRefExoticComponent<{
+    label: string | ReactNode;
+    errorMessage?: string;
+} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "label"> & React.RefAttributes<HTMLInputElement>>;
+export { Checkbox };

package/dist/Form/Checkbox/Checkbox.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import "@axa-fr/design-system-look-and-feel-css/dist/Form/Checkbox/Checkbox.scss";
+import checkBoxIcon from "@material-symbols/svg-400/outlined/check_box-fill.svg";
+import checkBoxOutlineBlankIcon from "@material-symbols/svg-400/outlined/check_box_outline_blank.svg";
+import errorOutline from "@material-symbols/svg-400/outlined/error.svg";
+import { forwardRef, useId } from "react";
+import classNames from "classnames";
+import { Svg } from "../../Svg";
+const Checkbox = forwardRef(({ label, errorMessage, className, ...inputProps }, ref) => {
+    let inputId = useId();
+    inputId = inputProps.id || inputId;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: classNames("af-checkbox", className), children: _jsxs("label", { htmlFor: inputId, children: [_jsx("input", { ref: ref, ...inputProps, type: "checkbox", id: inputId, "aria-invalid": !!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", children: [_jsx(Svg, { src: errorOutline }), errorMessage] }))] }));
+});
+Checkbox.displayName = "Checkbox";
+export { Checkbox };

package/dist/Form/Checkbox/Checkbox.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
+import { Checkbox } from "./Checkbox";
+declare const meta: Meta;
+export default meta;
+export declare const CheckboxStory: StoryObj<ComponentProps<typeof Checkbox>>;

package/dist/Form/Checkbox/Checkbox.stories.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox } from "./Checkbox";
+const meta = {
+    title: "Components/Form/Input/Checkbox",
+    component: Checkbox,
+    argTypes: {},
+};
+export default meta;
+export const CheckboxStory = {
+    name: "Basic",
+    render: ({ ...args }) => _jsx(Checkbox, { ...args }),
+    args: {
+        label: "J'accepte de fournir à AXA mes coordonnées ainsi que les données  relatives à mon projet et ma situation. Ces dernières seront transmises à mon conseiller AXA qui pourra  me contacter pour m'accompagner.",
+        name: "option1",
+        value: "option1",
+    },
+    argTypes: {
+        label: {
+            control: { type: "text" },
+        },
+        name: {
+            control: { type: "text" },
+        },
+        value: {
+            control: { type: "text" },
+        },
+        errorMessage: {
+            control: { type: "text" },
+        },
+        disabled: {
+            control: { type: "boolean" },
+        },
+        checked: {
+            control: { type: "boolean" },
+        },
+        onChange: { action: "onChange" },
+    },
+};

package/dist/Form/Checkbox/CheckboxSelect.d.ts

@@ -0,0 +1,15 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/Form/Checkbox/Checkbox.scss";
+import React, { ReactNode } from "react";
+type CheckboxProps = {
+    type: "vertical" | "horizontal";
+    options: ({
+        label: ReactNode;
+        subtitle?: ReactNode;
+        description?: ReactNode;
+        icon?: ReactNode;
+    } & React.InputHTMLAttributes<HTMLInputElement>)[];
+    errorMessage?: string;
+    onChange?: React.ChangeEventHandler;
+};
+export declare const CheckboxSelect: ({ options, errorMessage, onChange, type, }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Form/Checkbox/CheckboxSelect.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import "@axa-fr/design-system-look-and-feel-css/dist/Form/Checkbox/Checkbox.scss";
+import checkBoxIcon from "@material-symbols/svg-400/outlined/check_box-fill.svg";
+import checkBoxOutlineBlankIcon from "@material-symbols/svg-400/outlined/check_box_outline_blank.svg";
+import errorOutline from "@material-symbols/svg-400/outlined/error.svg";
+import { Svg } from "../../Svg";
+export const CheckboxSelect = ({ options, errorMessage, onChange, type = "vertical", }) => (_jsxs(_Fragment, { children: [_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] }))] }));

package/dist/Form/Checkbox/CheckboxSelect.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { ComponentProps } from "react";
+import { CheckboxSelect } from "./CheckboxSelect";
+declare const meta: Meta;
+export default meta;
+export declare const CheckboxSelectStory: StoryObj<ComponentProps<typeof CheckboxSelect>>;

package/dist/Form/Checkbox/CheckboxSelect.stories.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import home from "@material-symbols/svg-400/outlined/home.svg";
+import { Svg } from "../../Svg";
+import { CheckboxSelect } from "./CheckboxSelect";
+const meta = {
+    title: "Components/Form/Input/Checkbox/Select",
+    component: CheckboxSelect,
+    argTypes: {},
+};
+export default meta;
+export const CheckboxSelectStory = {
+    name: "Select",
+    render: ({ ...args }) => _jsx(CheckboxSelect, { ...args }),
+    args: {
+        type: "vertical",
+        options: [
+            {
+                label: "Paris",
+                description: "Capitale de la France",
+                subtitle: "Nord",
+                name: "paris",
+                value: "paris",
+                icon: _jsx(Svg, { src: home }),
+            },
+            {
+                label: "Bruxelles",
+                description: "Capitale de la Belgique",
+                name: "bruxelles",
+                value: "bruxelles",
+                icon: _jsx(Svg, { src: home }),
+            },
+            {
+                label: "Lille",
+                name: "lille",
+                value: "lille",
+                icon: _jsx(Svg, { src: home }),
+                disabled: true,
+                checked: true,
+            },
+        ],
+    },
+    argTypes: {
+        type: {
+            control: { type: "inline-radio" },
+            options: ["vertical", "horizontal"],
+        },
+        options: {
+            control: { type: "object" },
+        },
+        errorMessage: {
+            control: { type: "text" },
+        },
+        onChange: { action: "onChange" },
+    },
+};

package/dist/Form/Checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from "./Checkbox";
+export { CheckboxSelect } from "./CheckboxSelect";

package/dist/Form/Checkbox/index.js

@@ -0,0 +1,2 @@
+export { Checkbox } from "./Checkbox";
+export { CheckboxSelect } from "./CheckboxSelect";

package/dist/Form/FileUpload/FIleUpload.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { FileUpload } from "./FileUpload";
+declare const meta: Meta<typeof Text>;
+export default meta;
+type Story = StoryObj<typeof FileUpload>;
+export declare const FileUploadStory: Story;