@axa-fr/design-system-slash-react 2.0.0-alpha.23 → 2.0.0-alpha.34

package/dist/Accordion/Accordion.d.ts

@@ -5,8 +5,10 @@ import { TDefaultProps } from "./types";
 export type EnhancedProps = Partial<TDefaultProps> & {
     onlyOne?: boolean;
     className?: string;
+    /** @deprecated Use `variant` instead. */
     classModifier?: string;
+    variant?: string;
     children: React.ReactElement<CollapseProps>[] | React.ReactElement<CollapseProps>;
 };
-declare const Accordion: ({ className, classModifier, children, onlyOne, }: EnhancedProps) => import("react/jsx-runtime").JSX.Element;
+declare const Accordion: ({ className, classModifier, variant, children, onlyOne, }: EnhancedProps) => import("react/jsx-runtime").JSX.Element;
 export { Accordion };

package/dist/Accordion/Accordion.js

@@ -2,13 +2,17 @@ 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 { getComponentClassNameWithUserClassname } from "../utilities/helpers/getComponentClassName";
 import { CollapseCard } from "./CollapseCard";
 const defaultClassName = "af-accordion";
-const Accordion = ({ className, classModifier, children, onlyOne = false, }) => {
-    const componentClassName = getComponentClassName(className, classModifier, defaultClassName);
+const Accordion = ({ className, classModifier, variant, children, onlyOne = false, }) => {
+    const componentClassName = getComponentClassNameWithUserClassname({
+        componentClassName: defaultClassName,
+        userClassName: className,
+        classModifier: classModifier || variant || "",
+    });
     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))) }));
+    return (_jsx("div", { className: componentClassName, children: childrenArray.map((child) => (_createElement(CollapseCard, { ...child.props, name: onlyOne ? id : undefined, key: child.props.id, variant: variant }, child.props.children))) }));
 };
 export { Accordion };

package/dist/Accordion/CollapseCard.d.ts

@@ -1,4 +1,5 @@
 import type { DetailsHTMLAttributes, ReactNode } from "react";
+import type { AccordionActions } from "./types";
 export type CollapseProps = {
     id: string;
     title: ReactNode;
@@ -8,5 +9,7 @@ export type CollapseProps = {
     onToggle?: DetailsHTMLAttributes<HTMLDetailsElement>["onToggle"];
     className?: string;
     classModifier?: string;
+    actions?: AccordionActions;
+    variant?: string;
 };
-export declare const CollapseCard: ({ children, name, title, id, open, onToggle, className, classModifier, }: CollapseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CollapseCard: ({ children, name, title, id, open, onToggle, className, classModifier, actions, variant, }: CollapseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Accordion/CollapseCard.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Body } from "./Body";
 import { Header } from "./Header";
 import { getComponentClassName } from "../utilities";
-export const CollapseCard = ({ children, name, title, id, open, onToggle, className, classModifier = "", }) => {
+export const CollapseCard = ({ children, name, title, id, open, onToggle, className, classModifier = "", actions, variant, }) => {
     const headerId = id;
     let newClassModifier = open ? "open" : "";
     newClassModifier += ` ${classModifier}`;
     const componentClassName = getComponentClassName(className, newClassModifier.trim(), "af-accordion__details");
-    return (_jsxs("details", { open: open, name: name, className: componentClassName, onToggle: onToggle, children: [_jsx(Header, { id: headerId, children: title }), _jsx(Body, { children: children })] }));
+    return (_jsxs("details", { open: open, name: name, className: componentClassName, onToggle: onToggle, children: [_jsx(Header, { id: headerId, actions: actions, variant: variant, children: title }), _jsx(Body, { children: children })] }));
 };

package/dist/Accordion/Header.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import type { AccordionActions } from "./types";
 export type HeaderToggleElement = {
     isOpen: boolean;
     index: number;
@@ -9,6 +10,8 @@ export type HeaderProps = {
     className?: string;
     classModifier?: string;
     id?: string;
+    actions?: AccordionActions;
+    variant?: string;
 };
-declare const Header: ({ children, className, classModifier, id }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const Header: ({ children, className, classModifier, id, actions, variant, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
 export { Header };

package/dist/Accordion/Header.js

@@ -1,8 +1,20 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import arrow from "@material-symbols/svg-400/rounded/keyboard_arrow_down.svg";
+import { Title } from "../Title/Title";
+import { Button } from "../Button/Button";
+import { Svg } from "../Svg/Svg";
 import { getComponentClassName } from "../utilities";
 const defaultClassName = "af-accordion__item-header";
-const Header = ({ children, className, classModifier, id }) => {
+const Header = ({ children, className, classModifier, id, actions, variant, }) => {
     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" })] }));
+    return (_jsx("summary", { className: componentClassName, id: id, children: variant === "light" ? (_jsxs(Title, { heading: "h3", children: [_jsx(Svg, { src: arrow, className: "af-accordion__item-header-icon" }), children, actions
+                    ? actions
+                        .filter((action) => Boolean(action))
+                        .map(({ key, label, leftIcon, rightIcon, onClick }) => (_jsx(Button, { onClick: onClick, leftIcon: leftIcon ? _jsx(Svg, { src: leftIcon }) : undefined, rightIcon: rightIcon ? _jsx(Svg, { src: rightIcon }) : undefined, variant: "ghost", children: label }, key)))
+                    : null] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "af-accordion__header-left", children: _jsx("h3", { className: "af-accordion__item-title", children: children }) }), _jsxs("div", { className: "af-accordion__header-right", children: [actions
+                            ? actions
+                                .filter((action) => Boolean(action))
+                                .map(({ key, label, leftIcon, rightIcon, onClick }) => (_jsx(Button, { onClick: onClick, leftIcon: leftIcon ? _jsx(Svg, { src: leftIcon }) : undefined, rightIcon: rightIcon ? _jsx(Svg, { src: rightIcon }) : undefined, variant: variant === "white" ? "ghost" : "ghost-reverse", children: label }, key)))
+                            : null, _jsx(Svg, { src: arrow, className: "af-accordion__item-header-icon" })] })] })) }));
 };
 export { Header };

package/dist/Accordion/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/design-system-slash-react",
-  "version": "2.0.0-alpha.23",
+  "version": "2.0.0-alpha.34",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -47,7 +47,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/design-system-slash-css": "2.0.0-alpha.23",
+    "@axa-fr/design-system-slash-css": "2.0.0-alpha.34",
     "@material-symbols/svg-400": ">= 0.19.0",
     "react": ">= 18"
   },