@axa-fr/design-system-slash-react 0.2.0-beta.347 → 0.2.0-beta.353

package/dist/Accordion/Accordion.d.ts

@@ -0,0 +1,15 @@
+import "@axa-fr/design-system-slash-css/dist/Accordion/Accordion.scss";
+import React from "react";
+import { CollapseProps } from "./CollapseCard";
+declare const defaultProps: {
+    onlyOne: boolean;
+    className: string;
+};
+export type EnhancedProps = Partial<typeof defaultProps> & {
+    onlyOne?: boolean;
+    className?: string;
+    classModifier?: string;
+    children: React.ReactElement<CollapseProps>[] | React.ReactElement<CollapseProps>;
+};
+declare const Accordion: ({ className, classModifier, children, onlyOne, }: EnhancedProps) => import("react/jsx-runtime").JSX.Element;
+export { Accordion };

package/dist/Accordion/Accordion.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import "@axa-fr/design-system-slash-css/dist/Accordion/Accordion.scss";
+import { useId } from "react";
+import { getComponentClassName } from "../utilities";
+import { CollapseCard } from "./CollapseCard";
+const defaultClassName = "af-accordion";
+const defaultProps = {
+    onlyOne: false,
+    className: defaultClassName,
+};
+const Accordion = ({ className, classModifier, children, onlyOne = false, }) => {
+    const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
+    const id = useId();
+    const childrenArray = Array.isArray(children) ? children : [children];
+    return (_jsx("div", { className: componentClassName, children: childrenArray.map((child) => (_createElement(CollapseCard, { ...child.props, name: onlyOne ? id : undefined, key: child.props.id }, child.props.children))) }));
+};
+export { Accordion };

package/dist/Accordion/AccordionContext.d.ts

@@ -0,0 +1 @@
+export declare const AccordionContext: import("react").Context<number[]>;

package/dist/Accordion/AccordionContext.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const AccordionContext = createContext([0]);

package/dist/Accordion/Body.d.ts

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

package/dist/Accordion/Body.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const Body = ({ children, ariaLabelledby }) => {
+    return (_jsx("div", { className: "af-accordion__content", "aria-labelledby": ariaLabelledby, children: _jsx("div", { children: children }) }));
+};
+export { Body };

package/dist/Accordion/CollapseCard.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+export type CollapseProps = {
+    id: string;
+    title: ReactNode;
+    children?: React.ReactNode;
+    open?: boolean;
+    name?: string;
+    onToggle?: React.DetailsHTMLAttributes<HTMLDetailsElement>["onToggle"];
+};
+export declare const CollapseCard: ({ children, name, title, id, open, onToggle, }: CollapseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Accordion/CollapseCard.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Body } from "./Body";
+import { Header } from "./Header";
+export const CollapseCard = ({ children, name, title, id, open, onToggle, }) => {
+    const headerId = id;
+    return (_jsxs("details", { open: open, name: name, className: "af-accordion__details", onToggle: onToggle, children: [_jsx(Header, { id: headerId, children: title }), _jsx(Body, { children: children })] }));
+};

package/dist/Accordion/Header.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+export type HeaderToggleElement = {
+    isOpen: boolean;
+    index: number;
+    id: string;
+};
+export type HeaderProps = {
+    children: React.ReactNode;
+    className?: string;
+    classModifier?: string;
+    id?: string;
+};
+declare const Header: ({ children, className, classModifier, id }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export { Header };

package/dist/Accordion/Header.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getComponentClassName } from "../utilities";
+const defaultClassName = "af-accordion__item-header";
+const Header = ({ children, className, classModifier, id }) => {
+    const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
+    return (_jsxs("summary", { className: componentClassName, id: id, children: [_jsx("h3", { className: "af-accordion__item-title", children: children }), _jsx("span", { className: "glyphicon glyphicon-menu-down" })] }));
+};
+export { Header };

package/dist/Accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { Accordion } from "./Accordion";
+export { CollapseCard, type CollapseProps } from "./CollapseCard";

package/dist/Accordion/index.js

@@ -0,0 +1,2 @@
+export { Accordion } from "./Accordion";
+export { CollapseCard } from "./CollapseCard";

package/dist/Form/core/Field.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
 import { getComponentClassName } from "../../utilities";
 import { FieldError } from "./FieldError";
 import { MessageTypes } from "./MessageTypes";
@@ -8,5 +9,7 @@ export const Field = ({ id = "", message = "", messageType = MessageTypes.error,
         return null;
     }
     const componentClassName = getComponentClassName(className, classModifier, "row af-form__group");
-    return (_jsxs("div", { className: componentClassName, role: roleContainer, "aria-label": ariaLabelContainer, children: [_jsx("div", { className: classNameContainerLabel, children: _jsx("label", { className: "af-form__group-label", htmlFor: isLabelContainerLinkedToInput ? id : undefined, children: label }) }), _jsxs(FieldForm, { className: classNameContainerInput, message: message, messageType: messageType, forceDisplayMessage: forceDisplayMessage, children: [children, _jsx(FieldError, { message: message, messageType: messageType })] })] }));
+    return (_jsxs("div", { className: componentClassName, role: roleContainer, "aria-label": ariaLabelContainer, children: [_jsx("div", { className: classNameContainerLabel, children: _jsx("label", { className: classNames({
+                        "af-form__group-label--required": classModifier.includes("required"),
+                    }, "af-form__group-label"), htmlFor: isLabelContainerLinkedToInput ? id : undefined, children: label }) }), _jsxs(FieldForm, { className: classNameContainerInput, message: message, messageType: messageType, forceDisplayMessage: forceDisplayMessage, children: [children, _jsx(FieldError, { message: message, messageType: messageType })] })] }));
 };

package/dist/Layout/Header/{TitleHeader/TitleHeader.d.ts → HeaderTitle/HeaderTitle.d.ts}

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import "@axa-fr/design-system-slash-css/dist/Layout/Header/TitleHeader/TitleHeader.scss";
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/HeaderTitle/HeaderTitle.scss";
 type Props = {
     children?: ReactNode;
     classModifier?: string;
@@ -9,5 +9,5 @@ type Props = {
     title: string;
     toggleMenu?: () => void;
 };
-declare const TitleHeader: ({ children, classModifier, className, isSticky, subtitle, title, toggleMenu, }: Props) => import("react/jsx-runtime").JSX.Element;
-export { TitleHeader };
+declare const HeaderTitle: ({ children, classModifier, className, isSticky, subtitle, title, toggleMenu, }: Props) => import("react/jsx-runtime").JSX.Element;
+export { HeaderTitle };

package/dist/Layout/Header/{TitleHeader/TitleHeader.js → HeaderTitle/HeaderTitle.js}

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "@axa-fr/design-system-slash-css/dist/Layout/Header/TitleHeader/TitleHeader.scss";
+import "@axa-fr/design-system-slash-css/dist/Layout/Header/HeaderTitle/HeaderTitle.scss";
 import { getComponentClassName } from "../../../utilities";
 import { ToggleButton } from "../ToggleButton/ToggleButton";
 import { Action } from "../../../Action/Action";
-import { getClassModifier } from "./TitleHeader.helpers";
+import { getClassModifier } from "./HeaderTitle.helpers";
 const defaultClassName = "af-title-bar";
-const TitleHeader = ({ children, classModifier, className, isSticky = true, subtitle, title, toggleMenu, }) => {
+const HeaderTitle = ({ children, classModifier, className, isSticky = true, subtitle, title, toggleMenu, }) => {
     const componentClassName = getComponentClassName(className, getClassModifier(classModifier, isSticky), defaultClassName);
     return (_jsx("div", { className: componentClassName, children: _jsxs("div", { className: `container ${defaultClassName}__wrapper`, children: [Boolean(toggleMenu) && (_jsx("div", { className: "burger-container", children: _jsx(ToggleButton, { idControl: "mainmenu", children: _jsx(Action, { className: "btn af-title-bar__mobile-menu af-btn--circle", id: "togglemenu", icon: "menu-hamburger", title: "Toggle menu", onClick: toggleMenu }) }) })), _jsxs("h1", { className: `${defaultClassName}__title`, children: [title, subtitle && (_jsx("span", { className: `${defaultClassName}__subtitle`, children: subtitle }))] }), children] }) }));
 };
-export { TitleHeader };
+export { HeaderTitle };

package/dist/Layout/Header/MenuTitleWrapper/MenuTitleWrapper.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
 import { NavBar } from "../NavBar";
-import { TitleHeader } from "../TitleHeader/TitleHeader";
+import { HeaderTitle } from "../HeaderTitle/HeaderTitle";
 const MenuTitleWrapper = ({ children, menuVisible, subtitle, title, }) => {
     const [isMenuVisible, setIsMenuVisible] = useState(menuVisible);
     const handleClick = useCallback(() => {
@@ -9,6 +9,6 @@ const MenuTitleWrapper = ({ children, menuVisible, subtitle, title, }) => {
         body.classList.toggle("af-menu-open");
         setIsMenuVisible((prev) => !prev);
     }, []);
-    return (_jsxs(_Fragment, { children: [_jsx(NavBar, { isVisible: isMenuVisible, onClick: handleClick, children: children }), _jsx(TitleHeader, { title: title, subtitle: subtitle, toggleMenu: handleClick })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(NavBar, { isVisible: isMenuVisible, onClick: handleClick, children: children }), _jsx(HeaderTitle, { title: title, subtitle: subtitle, toggleMenu: handleClick })] }));
 };
 export { MenuTitleWrapper };

package/dist/Layout/Header/index.d.ts

@@ -1,7 +1,7 @@
 export { Header } from "./Header";
 export { Infos } from "./Infos/Infos";
 export { Name } from "./Name/Name";
-export { TitleHeader } from "./TitleHeader/TitleHeader";
+export { HeaderTitle } from "./HeaderTitle/HeaderTitle";
 export { ToggleButton } from "./ToggleButton/ToggleButton";
 export { User } from "./User/User";
 export { NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, } from "./NavBar";

package/dist/Layout/Header/index.js

@@ -1,7 +1,7 @@
 export { Header } from "./Header";
 export { Infos } from "./Infos/Infos";
 export { Name } from "./Name/Name";
-export { TitleHeader } from "./TitleHeader/TitleHeader";
+export { HeaderTitle } from "./HeaderTitle/HeaderTitle";
 export { ToggleButton } from "./ToggleButton/ToggleButton";
 export { User } from "./User/User";
 export { NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, } from "./NavBar";

package/dist/index.d.ts

@@ -6,9 +6,9 @@ export { Badge } from "./Badge/Badge";
 export { Button } from "./Button/Button";
 export { Checkbox, CheckboxInput, CheckboxItem, CheckboxModes, } from "./Form/Checkbox";
 export { Choice, ChoiceInput } from "./Form/Choice";
-export { ArticleRestitution, HeaderRestitution, Restitution, RestitutionList, SectionRestitution, SectionRestitutionColumn, SectionRestitutionRow, SectionRestitutionTitle, } from "./Restitution";
 export { Field, FieldError, FieldForm, FieldInput, FormClassManager, HelpMessage, InputList, MessageTypes, } from "./Form/core";
 export { Date, DateInput } from "./Form/Date";
+export { File, FileInput, FileTable } from "./Form/File";
 export { MultiSelect, MultiSelectInput } from "./Form/MultiSelect";
 export { Number, NumberInput } from "./Form/Number";
 export { Radio, RadioInput, RadioItem, RadioModes } from "./Form/Radio";
@@ -16,14 +16,15 @@ export { Select, SelectBase, SelectInput } from "./Form/Select";
 export { Slider, SliderInput } from "./Form/Slider";
 export { Text, TextInput } from "./Form/Text";
 export { Textarea, TextareaInput } from "./Form/Textarea";
-export { File, FileInput, FileTable } from "./Form/File";
 export { Footer } from "./Layout/Footer";
-export { Header, Infos, Name, NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, TitleHeader, ToggleButton, User, } from "./Layout/Header";
+export { Header, Infos, Name, NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, HeaderTitle, ToggleButton, User, } from "./Layout/Header";
 export { BooleanModal, Modal, ModalBody, ModalFooter, ModalHeader, ModalHeaderBase, } from "./ModalAgent";
+export { ArticleRestitution, HeaderRestitution, Restitution, RestitutionList, SectionRestitution, SectionRestitutionColumn, SectionRestitutionRow, SectionRestitutionTitle, } from "./Restitution";
 export { Step, StepBase, Steps } from "./Steps";
 export { Summary } from "./Summary";
 export { Svg } from "./Svg";
 export { Tabs } from "./Tabs/Tabs";
 export { Title } from "./Title/Title";
 export { getComponentClassName } from "./utilities";
+export * from "./Accordion";
 export * from "./Table";

package/dist/index.js

@@ -6,9 +6,9 @@ export { Badge } from "./Badge/Badge";
 export { Button } from "./Button/Button";
 export { Checkbox, CheckboxInput, CheckboxItem, CheckboxModes, } from "./Form/Checkbox";
 export { Choice, ChoiceInput } from "./Form/Choice";
-export { ArticleRestitution, HeaderRestitution, Restitution, RestitutionList, SectionRestitution, SectionRestitutionColumn, SectionRestitutionRow, SectionRestitutionTitle, } from "./Restitution";
 export { Field, FieldError, FieldForm, FieldInput, FormClassManager, HelpMessage, InputList, MessageTypes, } from "./Form/core";
 export { Date, DateInput } from "./Form/Date";
+export { File, FileInput, FileTable } from "./Form/File";
 export { MultiSelect, MultiSelectInput } from "./Form/MultiSelect";
 export { Number, NumberInput } from "./Form/Number";
 export { Radio, RadioInput, RadioItem, RadioModes } from "./Form/Radio";
@@ -16,14 +16,15 @@ export { Select, SelectBase, SelectInput } from "./Form/Select";
 export { Slider, SliderInput } from "./Form/Slider";
 export { Text, TextInput } from "./Form/Text";
 export { Textarea, TextareaInput } from "./Form/Textarea";
-export { File, FileInput, FileTable } from "./Form/File";
 export { Footer } from "./Layout/Footer";
-export { Header, Infos, Name, NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, TitleHeader, ToggleButton, User, } from "./Layout/Header";
+export { Header, Infos, Name, NavBar, NavBarBase, NavBarItem, NavBarItemBase, NavBarItemLink, HeaderTitle, ToggleButton, User, } from "./Layout/Header";
 export { BooleanModal, Modal, ModalBody, ModalFooter, ModalHeader, ModalHeaderBase, } from "./ModalAgent";
+export { ArticleRestitution, HeaderRestitution, Restitution, RestitutionList, SectionRestitution, SectionRestitutionColumn, SectionRestitutionRow, SectionRestitutionTitle, } from "./Restitution";
 export { Step, StepBase, Steps } from "./Steps";
 export { Summary } from "./Summary";
 export { Svg } from "./Svg";
 export { Tabs } from "./Tabs/Tabs";
 export { Title } from "./Title/Title";
 export { getComponentClassName } from "./utilities";
+export * from "./Accordion";
 export * from "./Table";

package/package.json

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