@axa-fr/canopee-react 1.3.1-alpha.19 → 1.3.1-alpha.20

package/dist/prospect-client/Layout/FormLayout/FormLayout.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Children, isValidElement, } from "react";
+import "@axa-fr/canopee-css/prospect/Layout/FormLayout/FormLayoutAll.css";
+import { getClassName } from "../../utilities/getClassName";
+const Header = ({ children }) => children;
+const Footer = ({ children }) => children;
+const Faq = ({ children }) => children;
+const setDataCols = ({ dataColsMobile, dataColsTablet, dataColsDesktopSmall, dataColsDesktopMedium, dataColsDesktopLarge, }) => {
+    return {
+        "--cols-mobile": dataColsMobile || undefined,
+        "--cols-tablet": dataColsTablet || undefined,
+        "--cols-desktop-small": dataColsDesktopSmall || undefined,
+        "--cols-desktop-medium": dataColsDesktopMedium || undefined,
+        "--cols-desktop-large": dataColsDesktopLarge || undefined,
+    };
+};
+const setResponsiveStyle = (childProps) => {
+    const { "data-cols-mobile": dataColsMobile, "data-cols-tablet": dataColsTablet, "data-cols-desktop-small": dataColsDesktopSmall, "data-cols-desktop-medium": dataColsDesktopMedium, "data-cols-desktop-large": dataColsDesktopLarge, ...rest } = childProps?.containerProps || childProps;
+    if (childProps?.containerProps) {
+        return {
+            ...childProps,
+            ...rest,
+            containerProps: {
+                style: {
+                    ...(childProps.containerProps?.style ||
+                        {}),
+                    ...setDataCols({
+                        dataColsMobile,
+                        dataColsTablet,
+                        dataColsDesktopSmall,
+                        dataColsDesktopMedium,
+                        dataColsDesktopLarge,
+                    }),
+                },
+            },
+        };
+    }
+    return {
+        ...rest,
+        style: {
+            ...(rest.style || {}),
+            ...setDataCols({
+                dataColsMobile,
+                dataColsTablet,
+                dataColsDesktopSmall,
+                dataColsDesktopMedium,
+                dataColsDesktopLarge,
+            }),
+        },
+    };
+};
+export const Body = ({ children }) => Children.map(children, function (child) {
+    if (isValidElement(child)) {
+        const childProps = typeof child.props === "object" && child.props !== null
+            ? child.props
+            : {};
+        const responsiveStyle = setResponsiveStyle(childProps);
+        return {
+            ...child,
+            props: responsiveStyle,
+        };
+    }
+    return child;
+});
+export const FormLayout = ({ children, className, "aria-label": ariaLabel = "Formulaire", ...formProps }) => {
+    const childrenArray = Children.toArray(children);
+    const header = childrenArray.find((child) => isValidElement(child) && child.type === Header);
+    const body = childrenArray.find((child) => isValidElement(child) && child.type === Body);
+    const footer = childrenArray.find((child) => isValidElement(child) && child.type === Footer);
+    const faq = childrenArray.find((child) => isValidElement(child) && child.type === Faq);
+    return (_jsxs(_Fragment, { children: [_jsxs("form", { className: getClassName({
+                    baseClassName: "af-form-layout",
+                    className,
+                }), "aria-label": ariaLabel, ...formProps, children: [header ? (_jsx("div", { className: "af-form-layout__header subgrid", children: header })) : null, body ? (_jsx("div", { className: "af-form-layout__fields subgrid", children: body })) : null, footer ? (_jsx("div", { className: "af-form-layout__actions subgrid", children: footer })) : null] }), faq ? _jsx("div", { className: "af-form-layout__faq subgrid", children: faq }) : null] }));
+};
+FormLayout.Header = Header;
+FormLayout.Body = Body;
+FormLayout.Footer = Footer;
+FormLayout.Faq = Faq;

package/dist/prospect-client/Link/LinkApollo.d.ts

@@ -1,2 +1,2 @@
 import "@axa-fr/canopee-css/prospect/Link/LinkApollo.css";
-export { Link, type LinkVariants, linkVariants } from "./LinkCommon";
+export { Link, type LinkVariants, linkVariants, type LinkProps, } from "./LinkCommon";

package/dist/prospect-client/Link/LinkApollo.js

@@ -1,2 +1,2 @@
 import "@axa-fr/canopee-css/prospect/Link/LinkApollo.css";
-export { Link, linkVariants } from "./LinkCommon";
+export { Link, linkVariants, } from "./LinkCommon";

package/dist/prospect-client/Link/LinkCommon.d.ts

@@ -3,7 +3,7 @@ export declare const linkVariants: {
     readonly inverse: "inverse";
 };
 export type LinkVariants = keyof typeof linkVariants;
-type LinkProps = {
+export type LinkProps = {
     variant?: LinkVariants;
     openInNewTab?: boolean;
     leftIcon?: ReactNode;
@@ -15,4 +15,3 @@ type LinkProps = {
     classModifier?: string;
 } & ComponentPropsWithoutRef<"a">;
 export declare const Link: ({ href, variant, openInNewTab, leftIcon, rightIcon, children, className, classModifier, ...props }: PropsWithChildren<LinkProps>) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/prospect-client/Link/LinkLF.d.ts

@@ -1,2 +1,2 @@
 import "@axa-fr/canopee-css/client/Link/LinkLF.css";
-export { Link, type LinkVariants, linkVariants } from "./LinkCommon";
+export { Link, type LinkVariants, linkVariants, type LinkProps, } from "./LinkCommon";

package/dist/prospect-client/Link/LinkLF.js

@@ -1,2 +1,2 @@
 import "@axa-fr/canopee-css/client/Link/LinkLF.css";
-export { Link, linkVariants } from "./LinkCommon";
+export { Link, linkVariants, } from "./LinkCommon";

package/dist/prospect-client/pages/ErrorPage/ErrorPageApollo.d.ts

@@ -0,0 +1,3 @@
+import { type ErrorPageProps } from "./ErrorPageCommon";
+export { type ErrorPageProps } from "./ErrorPageCommon";
+export declare const ErrorPage: (props: ErrorPageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/pages/ErrorPage/ErrorPageApollo.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Link } from "../../Link/LinkApollo";
+import { ExitLayout } from "../../Layout/ExitLayout/ExitLayoutApollo";
+import { ErrorPageCommon } from "./ErrorPageCommon";
+export const ErrorPage = (props) => (_jsx(ErrorPageCommon, { ...props, LinkComponent: Link, ExitLayoutComponent: ExitLayout }));

package/dist/prospect-client/pages/ErrorPage/ErrorPageCommon.d.ts

@@ -0,0 +1,12 @@
+import type { ComponentType, PropsWithChildren } from "react";
+import { type ExitLayoutWithSubComponents, type ExitLayoutProps } from "../../Layout/ExitLayout/ExitLayoutCommon";
+import { type LinkProps } from "../../Link/LinkCommon";
+export type ErrorPageProps = PropsWithChildren & Pick<ExitLayoutProps, "headingProps"> & {
+    linkProps?: LinkProps;
+};
+type ErrorPageCommonProps = ErrorPageProps & {
+    LinkComponent: ComponentType<LinkProps>;
+    ExitLayoutComponent: ExitLayoutWithSubComponents;
+};
+export declare const ErrorPageCommon: ({ headingProps, children, linkProps, LinkComponent, ExitLayoutComponent, }: ErrorPageCommonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/prospect-client/pages/ErrorPage/ErrorPageCommon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import close from "@material-symbols/svg-400/rounded/close.svg";
+export const ErrorPageCommon = ({ headingProps, children, linkProps, LinkComponent, ExitLayoutComponent, }) => (_jsxs(ExitLayoutComponent, { headingProps: headingProps, iconProps: {
+        src: close,
+        hasBackground: true,
+        variant: "error",
+    }, children: [_jsx(ExitLayoutComponent.Content, { children: children }), linkProps ? (_jsx(ExitLayoutComponent.Action, { children: _jsx(LinkComponent, { className: "af-btn-client", ...linkProps }) })) : null] }));

package/dist/prospect-client/pages/ErrorPage/ErrorPageLF.d.ts

@@ -0,0 +1,3 @@
+import { type ErrorPageProps } from "./ErrorPageCommon";
+export { type ErrorPageProps } from "./ErrorPageCommon";
+export declare const ErrorPage: (props: ErrorPageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/pages/ErrorPage/ErrorPageLF.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Link } from "../../Link/LinkLF";
+import { ExitLayout } from "../../Layout/ExitLayout/ExitLayoutLF";
+import { ErrorPageCommon } from "./ErrorPageCommon";
+export const ErrorPage = (props) => (_jsx(ErrorPageCommon, { ...props, LinkComponent: Link, ExitLayoutComponent: ExitLayout }));

package/dist/prospect-client/pages/ValidPage/ValidPageApollo.d.ts

@@ -0,0 +1,3 @@
+import { type ValidPageProps } from "./ValidPageCommon";
+export { type ValidPageProps } from "./ValidPageCommon";
+export declare const ValidPage: (props: ValidPageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/pages/ValidPage/ValidPageApollo.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DataAgent } from "../../DataAgent/DataAgentApollo";
+import { Link } from "../../Link/LinkApollo";
+import { ExitLayout } from "../../Layout/ExitLayout/ExitLayoutApollo";
+import { ValidPageCommon } from "./ValidPageCommon";
+export const ValidPage = (props) => (_jsx(ValidPageCommon, { ...props, DataAgentComponent: DataAgent, LinkComponent: Link, ExitLayoutComponent: ExitLayout }));

package/dist/prospect-client/pages/ValidPage/ValidPageCommon.d.ts

@@ -0,0 +1,15 @@
+import type { ComponentType, PropsWithChildren } from "react";
+import { type ExitLayoutWithSubComponents, type ExitLayoutProps } from "../../Layout/ExitLayout/ExitLayoutCommon";
+import { type DataAgentProps } from "../../DataAgent/DataAgentCommon";
+import { type LinkProps } from "../../Link/LinkCommon";
+export type ValidPageProps = PropsWithChildren & Pick<ExitLayoutProps, "headingProps"> & {
+    dataAgentProps?: DataAgentProps;
+    linkProps?: LinkProps;
+};
+type ValidPageCommonProps = ValidPageProps & {
+    DataAgentComponent: ComponentType<DataAgentProps>;
+    LinkComponent: ComponentType<LinkProps>;
+    ExitLayoutComponent: ExitLayoutWithSubComponents;
+};
+export declare const ValidPageCommon: ({ headingProps, children, dataAgentProps, linkProps, DataAgentComponent, LinkComponent, ExitLayoutComponent, }: ValidPageCommonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/prospect-client/pages/ValidPage/ValidPageCommon.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import check from "@material-symbols/svg-400/rounded/check.svg";
+export const ValidPageCommon = ({ headingProps, children, dataAgentProps, linkProps, DataAgentComponent, LinkComponent, ExitLayoutComponent, }) => (_jsxs(ExitLayoutComponent, { headingProps: headingProps, iconProps: {
+        src: check,
+        hasBackground: true,
+        variant: "success",
+    }, children: [_jsx(ExitLayoutComponent.Content, { children: children }), dataAgentProps ? (_jsx(ExitLayoutComponent.Agent, { children: _jsx(DataAgentComponent, { ...dataAgentProps }) })) : null, linkProps ? (_jsx(ExitLayoutComponent.Action, { children: _jsx(LinkComponent, { className: "af-btn-client", ...linkProps }) })) : null] }));

package/dist/prospect-client/pages/ValidPage/ValidPageLF.d.ts

@@ -0,0 +1,3 @@
+import { type ValidPageProps } from "./ValidPageCommon";
+export { type ValidPageProps } from "./ValidPageCommon";
+export declare const ValidPage: (props: ValidPageProps) => import("react/jsx-runtime").JSX.Element;

package/dist/prospect-client/pages/ValidPage/ValidPageLF.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DataAgent } from "../../DataAgent/DataAgentLF";
+import { Link } from "../../Link/LinkLF";
+import { ExitLayout } from "../../Layout/ExitLayout/ExitLayoutLF";
+import { ValidPageCommon } from "./ValidPageCommon";
+export const ValidPage = (props) => (_jsx(ValidPageCommon, { ...props, DataAgentComponent: DataAgent, LinkComponent: Link, ExitLayoutComponent: ExitLayout }));

package/dist/prospect-client/utilities/types/GridContainerProps.d.ts

@@ -0,0 +1,10 @@
+import { ComponentProps, ElementType } from "react";
+type Cols = `${1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12}`;
+export type GridContainerProps<T extends ElementType = "div"> = ComponentProps<T> & {
+    "data-cols-mobile"?: Cols;
+    "data-cols-tablet"?: Cols;
+    "data-cols-desktop-small"?: Cols;
+    "data-cols-desktop-medium"?: Cols;
+    "data-cols-desktop-large"?: Cols;
+};
+export {};

package/dist/prospect-client/utilities/types/GridContainerProps.js

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

package/dist/prospect.d.ts

@@ -12,7 +12,7 @@ export { CardMessage, cardMessageVariants, type CardMessageVariants, } from "./p
 export { ClickIcon } from "./prospect-client/ClickIcon/ClickIconApollo";
 export { ContentItemDuoAction, type ContentItemDuoActionState, } from "./prospect-client/ContentItemDuoAction/ContentItemDuoActionApollo";
 export { ContentItemMono } from "./prospect-client/ContentItemMono/ContentItemMonoApollo";
-export { DataAgent } from "./prospect-client/DataAgent/DataAgentApollo";
+export { DataAgent, type DataAgentProps, } from "./prospect-client/DataAgent/DataAgentApollo";
 export { Divider } from "./prospect-client/Divider/DividerApollo";
 export { Fieldset, type FieldsetProps, } from "./prospect-client/Fieldset/FieldsetApollo";
 export { CardCheckbox, 
@@ -39,12 +39,12 @@ export { CardRadioOption } from "./prospect-client/Form/Radio/CardRadioOption/Ca
 export { Radio } from "./prospect-client/Form/Radio/Radio/RadioApollo";
 export { TextArea } from "./prospect-client/Form/TextArea/TextAreaApollo";
 export { DebugGrid } from "./prospect-client/Grid/DebugGridApollo";
-export { Heading, type HeadingLevel, } from "./prospect-client/Heading/HeadingApollo";
+export { Heading, type HeadingLevel, type HeadingProps, } from "./prospect-client/Heading/HeadingApollo";
 export { Icon, iconSizeVariants, iconVariants, type IconSizeVariants, type IconVariants, } from "./prospect-client/Icon/IconApollo";
 export { ItemTabBar, type ItemTabBarProps, } from "./prospect-client/ItemTabBar/ItemTabBarApollo";
 export { Footer, type FooterProps, } from "./prospect-client/Layout/Footer/FooterApollo";
 export { LevelSelector, type LevelSelectorProps, } from "./prospect-client/LevelSelector/LevelSelectorApollo";
-export { Link, linkVariants, type LinkVariants, } from "./prospect-client/Link/LinkApollo";
+export { Link, linkVariants, type LinkVariants, type LinkProps, } from "./prospect-client/Link/LinkApollo";
 export { ClickItem, clickItemStates, clickItemVariants, type ClickItemStates, type ClickItemVariants, } from "./prospect-client/List/ClickItem/ClickItemApollo";
 export { ContentItemDuo } from "./prospect-client/List/ContentItemDuo/ContentItemDuoApollo";
 export { List, type ListProps } from "./prospect-client/List/List/ListApollo";
@@ -65,3 +65,8 @@ export { TimelineVertical } from "./prospect-client/TimelineVertical/TimelineVer
 export { Toggle } from "./prospect-client/Toggle/ToggleApollo";
 export { Table, type TableProps, type HeadColorVariants, type BodyColorVariants, type RowSizeVariants, } from "./prospect-client/Table/TableApollo";
 export { TableMobileCard } from "./prospect-client/TableMobileCard/TableMobileCard";
+export { ExitLayout, type ExitLayoutWithSubComponents, type ExitLayoutProps, } from "./prospect-client/Layout/ExitLayout/ExitLayoutApollo";
+export { FormLayout, type FormLayoutProps, } from "./prospect-client/Layout/FormLayout/FormLayout";
+export { ValidPage, type ValidPageProps, } from "./prospect-client/pages/ValidPage/ValidPageApollo";
+export { ErrorPage, type ErrorPageProps, } from "./prospect-client/pages/ErrorPage/ErrorPageApollo";
+export type { GridContainerProps } from "./prospect-client/utilities/types/GridContainerProps";

package/dist/prospect.js

@@ -12,7 +12,7 @@ export { CardMessage, cardMessageVariants, } from "./prospect-client/CardMessage
 export { ClickIcon } from "./prospect-client/ClickIcon/ClickIconApollo";
 export { ContentItemDuoAction, } from "./prospect-client/ContentItemDuoAction/ContentItemDuoActionApollo";
 export { ContentItemMono } from "./prospect-client/ContentItemMono/ContentItemMonoApollo";
-export { DataAgent } from "./prospect-client/DataAgent/DataAgentApollo";
+export { DataAgent, } from "./prospect-client/DataAgent/DataAgentApollo";
 export { Divider } from "./prospect-client/Divider/DividerApollo";
 export { Fieldset, } from "./prospect-client/Fieldset/FieldsetApollo";
 export { CardCheckbox, 
@@ -64,3 +64,7 @@ export { TimelineVertical } from "./prospect-client/TimelineVertical/TimelineVer
 export { Toggle } from "./prospect-client/Toggle/ToggleApollo";
 export { Table, } from "./prospect-client/Table/TableApollo";
 export { TableMobileCard } from "./prospect-client/TableMobileCard/TableMobileCard";
+export { ExitLayout, } from "./prospect-client/Layout/ExitLayout/ExitLayoutApollo";
+export { FormLayout, } from "./prospect-client/Layout/FormLayout/FormLayout";
+export { ValidPage, } from "./prospect-client/pages/ValidPage/ValidPageApollo";
+export { ErrorPage, } from "./prospect-client/pages/ErrorPage/ErrorPageApollo";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axa-fr/canopee-react",
-  "version": "1.3.1-alpha.19",
+  "version": "1.3.1-alpha.20",
   "description": "Package React - Design System Canopée",
   "exports": {
     "./distributeur": {
@@ -45,7 +45,7 @@
   },
   "homepage": "https://github.com/AxaFrance/design-system#readme",
   "peerDependencies": {
-    "@axa-fr/canopee-css": "1.3.1-alpha.19",
+    "@axa-fr/canopee-css": "1.3.1-alpha.20",
     "@material-symbols/svg-400": ">= 0.19.0",
     "@material-symbols/svg-700": ">= 0.19.0",
     "react": ">= 18"