@axa-fr/design-system-apollo-react 1.0.5-alpha.332 → 1.0.5-alpha.334

package/dist/Accordion/AccordionApollo.d.ts

@@ -0,0 +1,4 @@
+import { type AccordionProps } from "./AccordionCommon";
+import "@axa-fr/design-system-apollo-css/dist/Accordion/AccordionApollo.scss";
+export declare const Accordion: (props: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+export { type AccordionVariants, accordionVariants } from "./AccordionCommon";

package/dist/Accordion/AccordionApollo.js

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

package/dist/Accordion/AccordionCommon.d.ts

@@ -0,0 +1,24 @@
+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";
+export declare const accordionVariants: {
+    readonly primary: "primary";
+    readonly secondary: "secondary";
+};
+export type AccordionVariants = keyof typeof accordionVariants;
+export type AccordionProps = {
+    variant?: AccordionVariants;
+    title: string;
+    subtitle?: string;
+    icon?: string;
+    info1: string;
+    info2: string;
+} & AccordionTagDateContainerProps & Partial<AccordionCoreProps>;
+type AccordionCommonProps = AccordionProps & {
+    AccordionCoreComponent: ComponentType<AccordionCoreProps>;
+    AccordionTagDateContainerComponent: ComponentType<Omit<ComponentProps<typeof AccordionTagDateContainerCommon>, "TagComponent">>;
+    IconComponent: ComponentType<ComponentProps<typeof Icon>>;
+};
+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 {};

package/dist/Accordion/AccordionCommon.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { getComponentClassName } from "../utilities/getComponentClassName";
+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" })), title && _jsx("p", { className: "af-accordion__title", children: title }), subtitle && _jsx("p", { className: "af-accordion__subtitle", children: subtitle }), _jsx(AccordionTagDateContainerComponent, { tagLabel: tagLabel, dateLabel: dateLabel, tagProps: tagProps, dateProps: dateProps }), info1 && _jsx("p", { className: "af-accordion__info1", children: info1 }), info2 && _jsx("p", { className: "af-accordion__info2", children: info2 })] }), ...accordionCoreProps, children: children }));
+};

package/dist/Accordion/AccordionLF.d.ts

@@ -0,0 +1,4 @@
+import { type AccordionProps } from "./AccordionCommon";
+import "@axa-fr/design-system-apollo-css/dist/Accordion/AccordionLF.scss";
+export declare const Accordion: (props: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+export { type AccordionVariants, accordionVariants } from "./AccordionCommon";

package/dist/Accordion/AccordionLF.js

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

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

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

package/dist/Accordion/AccordionTagDateContainer/AccordionTagDateContainerApollo.js

@@ -0,0 +1,5 @@
+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.scss";
+export const AccordionTagDateContainer = (props) => _jsx(AccordionTagDateContainerCommon, { ...props, TagComponent: Tag });

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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,9 @@
+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 }) })), dateLabel && (_jsx("time", { className: "af-accordion__date", ...dateProps, children: dateLabel }))] }));
+};

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

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

package/dist/Accordion/AccordionTagDateContainer/AccordionTagDateContainerLF.js

@@ -0,0 +1,5 @@
+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.scss";
+export const AccordionTagDateContainer = (props) => _jsx(AccordionTagDateContainerCommon, { ...props, TagComponent: Tag });

package/dist/AccordionCore/AccordionCoreApollo.d.ts

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

package/dist/AccordionCore/AccordionCoreApollo.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-apollo-css/dist/AccordionCore/AccordionCoreApollo.scss";
+import { AccordionCoreCommon, } from "./AccordionCoreCommon";
+import { Icon } from "../Icon/IconApollo";
+export const AccordionCore = (props) => (_jsx(AccordionCoreCommon, { IconComponent: Icon, ...props }));

package/dist/AccordionCore/AccordionCoreCommon.d.ts

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

package/dist/AccordionCore/AccordionCoreCommon.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, } from "react";
+import keyboardUp from "@material-symbols/svg-400/rounded/keyboard_arrow_up-fill.svg";
+export const AccordionCoreCommon = ({ summary, children, className, summaryProps, isOpen = false, IconComponent, onClick, ...detailsProps }) => {
+    const handleToggle = 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: keyboardUp, role: "presentation" }) })] }), children] }));
+};

package/dist/AccordionCore/AccordionCoreLF.d.ts

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

package/dist/AccordionCore/AccordionCoreLF.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import "@axa-fr/design-system-apollo-css/dist/AccordionCore/AccordionCoreLF.scss";
+import { AccordionCoreCommon, } from "./AccordionCoreCommon";
+import { Icon } from "../Icon/IconLF";
+export const AccordionCore = (props) => (_jsx(AccordionCoreCommon, { IconComponent: Icon, ...props }));

package/dist/index.d.ts

@@ -2,6 +2,8 @@ import "@axa-fr/design-system-apollo-css/dist/common/reboot.scss";
 import "@axa-fr/design-system-apollo-css/dist/common/tokens.scss";
 import "@axa-fr/design-system-apollo-css/dist/Grid/Grid.scss";
 import "@fontsource/source-sans-pro";
+export { Accordion, type AccordionVariants, accordionVariants, } from "./Accordion/AccordionApollo";
+export { AccordionCore } from "./AccordionCore/AccordionCoreApollo";
 export { BasePicture } from "./BasePicture/BasePictureApollo";
 export { Button, buttonVariants, type ButtonVariants, } from "./Button/ButtonApollo";
 export { CardMessage, cardMessageVariants, type CardMessageVariants, } from "./CardMessage/CardMessageApollo";

package/dist/index.js

@@ -2,6 +2,8 @@ import "@axa-fr/design-system-apollo-css/dist/common/reboot.scss";
 import "@axa-fr/design-system-apollo-css/dist/common/tokens.scss";
 import "@axa-fr/design-system-apollo-css/dist/Grid/Grid.scss";
 import "@fontsource/source-sans-pro";
+export { Accordion, accordionVariants, } from "./Accordion/AccordionApollo";
+export { AccordionCore } from "./AccordionCore/AccordionCoreApollo";
 export { BasePicture } from "./BasePicture/BasePictureApollo";
 export { Button, buttonVariants, } from "./Button/ButtonApollo";
 export { CardMessage, cardMessageVariants, } from "./CardMessage/CardMessageApollo";

package/dist/indexLF.d.ts

@@ -2,6 +2,8 @@ import "@axa-fr/design-system-look-and-feel-css/dist/common/reboot.scss";
 import "@axa-fr/design-system-look-and-feel-css/dist/common/tokens.scss";
 import "@axa-fr/design-system-apollo-css/dist/Grid/Grid.scss";
 import "@fontsource/source-sans-pro";
+export { Accordion, type AccordionVariants, accordionVariants, } from "./Accordion/AccordionLF";
+export { AccordionCore } from "./AccordionCore/AccordionCoreLF";
 export { BasePicture } from "./BasePicture/BasePictureLF";
 export { Button, buttonVariants, type ButtonVariants } from "./Button/ButtonLF";
 export { CardMessage, cardMessageVariants, type CardMessageVariants, } from "./CardMessage/CardMessageLF";

package/dist/indexLF.js

@@ -2,6 +2,8 @@ import "@axa-fr/design-system-look-and-feel-css/dist/common/reboot.scss";
 import "@axa-fr/design-system-look-and-feel-css/dist/common/tokens.scss";
 import "@axa-fr/design-system-apollo-css/dist/Grid/Grid.scss";
 import "@fontsource/source-sans-pro";
+export { Accordion, accordionVariants, } from "./Accordion/AccordionLF";
+export { AccordionCore } from "./AccordionCore/AccordionCoreLF";
 export { BasePicture } from "./BasePicture/BasePictureLF";
 export { Button, buttonVariants } from "./Button/ButtonLF";
 export { CardMessage, cardMessageVariants, } from "./CardMessage/CardMessageLF";

package/package.json

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