@axa-fr/design-system-apollo-react 3.1.0-RC.1 → 3.1.0-alpha.7

package/dist/Accordion/AccordionApollo.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { AccordionCore } from "../AccordionCore/AccordionCoreApollo";
-import { AccordionTagDateContainer } from "./AccordionTagDateContainer/AccordionTagDateContainerApollo";
+import { Tag } from "../Tag/TagApollo";
 import { Icon } from "../Icon/IconApollo";
 import { AccordionCommon } from "./AccordionCommon";
 import "@axa-fr/design-system-apollo-css/dist/Accordion/AccordionApollo.css";
-export const Accordion = (props) => (_jsx(AccordionCommon, { ...props, AccordionCoreComponent: AccordionCore, AccordionTagDateContainerComponent: AccordionTagDateContainer, IconComponent: Icon }));
+export const Accordion = (props) => (_jsx(AccordionCommon, { ...props, AccordionCoreComponent: AccordionCore, TagComponent: Tag, IconComponent: Icon }));
 export { accordionVariants } from "./AccordionCommon";

package/dist/Accordion/AccordionCommon.d.ts

@@ -1,12 +1,12 @@
-import { type ComponentProps, type ComponentType } from "react";
-import { AccordionTagDateContainerCommon, type AccordionTagDateContainerProps } from "./AccordionTagDateContainer/AccordionTagDateContainerCommon";
-import { Icon } from "../Icon/IconCommon";
-import { type AccordionCoreProps } from "../AccordionCore/AccordionCoreCommon";
+import type { ComponentProps, ComponentType } from "react";
+import type { TagProps } from "../Tag/TagCommon";
+import type { IconProps } from "../Icon/IconCommon";
+import type { AccordionCoreProps } from "../AccordionCore/AccordionCoreCommon";
 export declare const accordionVariants: {
     readonly primary: "primary";
     readonly secondary: "secondary";
 };
-export type AccordionVariants = keyof typeof accordionVariants;
+export type AccordionVariants = (typeof accordionVariants)[keyof typeof accordionVariants];
 export type AccordionProps = {
     variant?: AccordionVariants;
     title: string;
@@ -14,11 +14,15 @@ export type AccordionProps = {
     icon?: string;
     info1: string;
     info2: string;
-} & AccordionTagDateContainerProps & Partial<AccordionCoreProps>;
+    dateLabel?: string;
+    dateProps?: Omit<ComponentProps<"time">, "children">;
+    tagLabel?: string;
+    tagProps?: Omit<TagProps, "children">;
+} & Omit<AccordionCoreProps, "summary">;
 type AccordionCommonProps = AccordionProps & {
     AccordionCoreComponent: ComponentType<AccordionCoreProps>;
-    AccordionTagDateContainerComponent: ComponentType<Omit<ComponentProps<typeof AccordionTagDateContainerCommon>, "TagComponent">>;
-    IconComponent: ComponentType<ComponentProps<typeof Icon>>;
+    TagComponent: ComponentType<TagProps>;
+    IconComponent: ComponentType<IconProps>;
 };
-export declare const AccordionCommon: ({ variant, className, children, icon, title, subtitle, tagLabel, tagProps, dateLabel, dateProps, info1, info2, AccordionCoreComponent, AccordionTagDateContainerComponent, IconComponent, ...accordionCoreProps }: AccordionCommonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccordionCommon: ({ variant, className, children, icon, title, subtitle, tagLabel, tagProps, dateLabel, dateProps, info1, info2, AccordionCoreComponent, TagComponent, IconComponent, ...accordionCoreProps }: AccordionCommonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Accordion/AccordionCommon.js

@@ -1,11 +1,17 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { getComponentClassName } from "../utilities/getComponentClassName";
+import { getClassName } from "../utilities/getClassName";
 export const accordionVariants = {
     primary: "primary",
     secondary: "secondary",
 };
-export const AccordionCommon = ({ variant = accordionVariants.primary, className, children, icon, title, subtitle, tagLabel, tagProps, dateLabel, dateProps, info1, info2, AccordionCoreComponent, AccordionTagDateContainerComponent, IconComponent, ...accordionCoreProps }) => {
-    const componentClassName = useMemo(() => getComponentClassName("af-apollo-accordion", className, variant), [className, variant]);
-    return (_jsx(AccordionCoreComponent, { className: componentClassName, summary: _jsxs(_Fragment, { children: [icon ? (_jsx(IconComponent, { role: "presentation", src: icon, variant: "primary", size: "S", className: "af-accordion__icon" })) : null, title ? _jsx("p", { className: "af-accordion__title", children: title }) : null, subtitle ? (_jsx("p", { className: "af-accordion__subtitle", children: subtitle })) : null, _jsx(AccordionTagDateContainerComponent, { tagLabel: tagLabel, dateLabel: dateLabel, tagProps: tagProps, dateProps: dateProps }), info1 ? _jsx("p", { className: "af-accordion__info1", children: info1 }) : null, info2 ? _jsx("p", { className: "af-accordion__info2", children: info2 }) : null] }), ...accordionCoreProps, children: children }));
-};
+export const AccordionCommon = ({ variant = accordionVariants.primary, className, children, icon, title, subtitle, tagLabel, tagProps, dateLabel, dateProps, info1, info2, AccordionCoreComponent, TagComponent, IconComponent, ...accordionCoreProps }) => (_jsx(AccordionCoreComponent, { className: getClassName({
+        baseClassName: "af-apollo-accordion",
+        modifiers: [variant],
+        className,
+    }), summary: _jsxs(_Fragment, { children: [icon ? (_jsx(IconComponent, { role: "presentation", src: icon, variant: "primary", size: "S", className: "af-accordion__icon" })) : null, _jsx("p", { className: "af-accordion__title", children: title }), subtitle ? _jsx("p", { className: "af-accordion__subtitle", children: subtitle }) : null, tagLabel ? (_jsx(TagComponent, { variant: "warning", ...tagProps, className: getClassName({
+                    baseClassName: "af-accordion__tag-container",
+                    className: tagProps?.className,
+                }), children: tagLabel })) : null, dateLabel ? (_jsx("time", { ...dateProps, className: getClassName({
+                    baseClassName: "af-accordion__date",
+                    className: dateProps?.className,
+                }), children: dateLabel })) : null, info1 ? _jsx("p", { className: "af-accordion__info1", children: info1 }) : null, info2 ? _jsx("p", { className: "af-accordion__info2", children: info2 }) : null] }), ...accordionCoreProps, children: children }));

package/dist/Accordion/AccordionLF.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { AccordionCore } from "../AccordionCore/AccordionCoreLF";
-import { AccordionTagDateContainer } from "./AccordionTagDateContainer/AccordionTagDateContainerLF";
+import { Tag } from "../Tag/TagLF";
 import { AccordionCommon } from "./AccordionCommon";
 import { Icon } from "../Icon/IconCommon";
 import "@axa-fr/design-system-apollo-css/dist/Accordion/AccordionLF.css";
-export const Accordion = (props) => (_jsx(AccordionCommon, { ...props, AccordionCoreComponent: AccordionCore, AccordionTagDateContainerComponent: AccordionTagDateContainer, IconComponent: Icon }));
+export const Accordion = (props) => (_jsx(AccordionCommon, { ...props, AccordionCoreComponent: AccordionCore, TagComponent: Tag, IconComponent: Icon }));
 export { accordionVariants } from "./AccordionCommon";

package/dist/AccordionCore/AccordionCoreCommon.d.ts

@@ -1,13 +1,17 @@
-import { type ComponentProps, ComponentType, type MouseEvent, type ReactNode } from "react";
-import { Icon } from "../Icon/IconCommon";
+import { type ComponentProps, type ComponentType, type MouseEventHandler, type ReactNode } from "react";
+import type { IconProps } from "../Icon/IconCommon";
+type SummaryOnClick = MouseEventHandler<HTMLElement>;
 export type AccordionCoreProps = {
     summary: ReactNode;
-    children: ReactNode;
+    /**
+     * @deprecated use `open` instead
+     */
     isOpen?: boolean;
-    summaryProps?: ComponentProps<"summary">;
-    onClick?: (event: MouseEvent<HTMLDetailsElement>) => void;
-} & Partial<ComponentProps<"details">>;
+    summaryProps?: Omit<ComponentProps<"summary">, "onClick">;
+    onClick?: SummaryOnClick;
+} & ComponentProps<"details">;
 export type AccordionPropsCommonProps = AccordionCoreProps & {
-    IconComponent: ComponentType<ComponentProps<typeof Icon>>;
+    IconComponent: ComponentType<IconProps>;
 };
 export declare const AccordionCoreCommon: ({ summary, children, className, summaryProps, isOpen, IconComponent, onClick, ...detailsProps }: AccordionPropsCommonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/AccordionCore/AccordionCoreCommon.js

@@ -1,14 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, } from "react";
 import keyboardDown from "@material-symbols/svg-400/rounded/keyboard_arrow_down-fill.svg";
+import { getClassName } from "../utilities/getClassName";
 export const AccordionCoreCommon = ({ summary, children, className, summaryProps, isOpen = false, IconComponent, onClick, ...detailsProps }) => {
-    const handleToggle = useCallback((event) => {
+    const handleSummaryClick = useCallback((event) => {
         if (onClick) {
             event.preventDefault();
             onClick(event);
         }
     }, [onClick]);
-    return (_jsxs("details", { className: ["af-apollo-accordion", className].filter(Boolean).join(" "), open: isOpen, ...detailsProps, children: [_jsxs("summary", { onClick: handleToggle, role: "button", tabIndex: 0, ...summaryProps, className: ["af-apollo-accordion__summary", summaryProps?.className]
-                    .filter(Boolean)
-                    .join(" "), children: [summary, _jsx("div", { className: ["af-accordion__arrow", "af-click-icon"].join(" "), children: _jsx(IconComponent, { src: keyboardDown, role: "presentation" }) })] }), children] }));
+    return (_jsxs("details", { className: getClassName({
+            baseClassName: "af-apollo-accordion",
+            className,
+        }), open: isOpen, ...detailsProps, children: [_jsxs("summary", { onClick: handleSummaryClick, tabIndex: 0, ...summaryProps, className: getClassName({
+                    baseClassName: "af-apollo-accordion__summary",
+                    className: summaryProps?.className,
+                }), children: [summary, _jsx("div", { className: getClassName({
+                            baseClassName: "af-accordion__arrow",
+                            className: "af-click-icon",
+                        }), children: _jsx(IconComponent, { src: keyboardDown, role: "presentation" }) })] }), children] }));
 };

package/package.json

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

package/dist/Accordion/AccordionTagDateContainer/AccordionTagDateContainerApollo.d.ts

@@ -1,3 +0,0 @@
-import { type AccordionTagDateContainerProps } from "./AccordionTagDateContainerCommon";
-import "@axa-fr/design-system-apollo-css/dist/AccordionCore/AccordionCoreApollo.css";
-export declare const AccordionTagDateContainer: (props: AccordionTagDateContainerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Accordion/AccordionTagDateContainer/AccordionTagDateContainerApollo.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Tag } from "../../Tag/TagApollo";
-import { AccordionTagDateContainerCommon, } from "./AccordionTagDateContainerCommon";
-import "@axa-fr/design-system-apollo-css/dist/AccordionCore/AccordionCoreApollo.css";
-export const AccordionTagDateContainer = (props) => _jsx(AccordionTagDateContainerCommon, { ...props, TagComponent: Tag });

package/dist/Accordion/AccordionTagDateContainer/AccordionTagDateContainerCommon.d.ts

@@ -1,12 +0,0 @@
-import { type ComponentProps, ComponentType } from "react";
-import { Tag } from "../../Tag/TagCommon";
-export type AccordionTagDateContainerProps = {
-    dateLabel?: string;
-    dateProps?: ComponentProps<"time">;
-    tagLabel?: string;
-    tagProps?: ComponentProps<typeof Tag>;
-};
-export type AccordionTagDateContainerCommonProps = AccordionTagDateContainerProps & {
-    TagComponent: ComponentType<ComponentProps<typeof Tag>>;
-};
-export declare const AccordionTagDateContainerCommon: ({ dateLabel, dateProps, tagLabel, tagProps, TagComponent, }: AccordionTagDateContainerCommonProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/Accordion/AccordionTagDateContainer/AccordionTagDateContainerCommon.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
-export const AccordionTagDateContainerCommon = ({ dateLabel, dateProps, tagLabel, tagProps, TagComponent, }) => {
-    const isShowing = useMemo(() => Boolean(tagLabel) || Boolean(dateLabel), [tagLabel, dateLabel]);
-    if (!isShowing) {
-        return null;
-    }
-    return (_jsxs(_Fragment, { children: [tagLabel ? (_jsx("div", { className: "af-accordion__tag-container", children: _jsx(TagComponent, { variant: "warning", ...tagProps, children: tagLabel }) })) : null, dateLabel ? (_jsx("time", { className: "af-accordion__date", ...dateProps, children: dateLabel })) : null] }));
-};

package/dist/Accordion/AccordionTagDateContainer/AccordionTagDateContainerLF.d.ts

@@ -1,3 +0,0 @@
-import { type AccordionTagDateContainerProps } from "./AccordionTagDateContainerCommon";
-import "@axa-fr/design-system-apollo-css/dist/AccordionCore/AccordionCoreLF.css";
-export declare const AccordionTagDateContainer: (props: AccordionTagDateContainerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/Accordion/AccordionTagDateContainer/AccordionTagDateContainerLF.js

@@ -1,5 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Tag } from "../../Tag/TagLF";
-import { AccordionTagDateContainerCommon, } from "./AccordionTagDateContainerCommon";
-import "@axa-fr/design-system-apollo-css/dist/AccordionCore/AccordionCoreLF.css";
-export const AccordionTagDateContainer = (props) => _jsx(AccordionTagDateContainerCommon, { ...props, TagComponent: Tag });