@axa-fr/design-system-look-and-feel-react 0.1.1

package/dist/Form/core/Field.d.ts

@@ -0,0 +1,16 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { FieldForm } from "./FieldForm";
+type FieldProps = Omit<ComponentPropsWithoutRef<typeof FieldForm>, "children"> & {
+    label: ReactNode;
+    children?: ReactNode;
+    id?: string;
+    classModifier?: string;
+    classNameContainerLabel?: string;
+    classNameContainerInput?: string;
+    isVisible?: boolean;
+    roleContainer?: string;
+    ariaLabelContainer?: string;
+    isLabelContainerLinkedToInput?: boolean;
+};
+export declare const Field: ({ id, message, messageType, label, children, forceDisplayMessage, classModifier, className, classNameContainerLabel, classNameContainerInput, isVisible, roleContainer, ariaLabelContainer, isLabelContainerLinkedToInput, }: FieldProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/Form/core/Field.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getComponentClassName } from "./getComponentClassName";
+import { FieldError } from "./FieldError";
+import { MessageTypes } from "./MessageTypes";
+import { FieldForm } from "./FieldForm";
+export const Field = ({ id = "", message = "", messageType = MessageTypes.error, label, children, forceDisplayMessage, classModifier = "", className, classNameContainerLabel = "col-md-2", classNameContainerInput = "col-md-10", isVisible = true, roleContainer, ariaLabelContainer, isLabelContainerLinkedToInput = true, }) => {
+    if (!isVisible) {
+        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 })] })] }));
+};

package/dist/Form/core/FieldError.d.ts

@@ -0,0 +1,7 @@
+import { MessageTypes } from "./MessageTypes";
+type FieldProps = {
+    message?: string | null;
+    messageType?: MessageTypes;
+};
+export declare const FieldError: ({ message, messageType, }: FieldProps) => "" | import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/Form/core/FieldError.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getComponentClassName } from "./getComponentClassName";
+import { MessageTypes } from "./MessageTypes";
+const DEFAULT_CLASS_NAME = "af-form__message";
+export const FieldError = ({ message = null, messageType = MessageTypes.error, }) => {
+    const className = getComponentClassName(DEFAULT_CLASS_NAME, messageType, DEFAULT_CLASS_NAME);
+    return (message && (_jsxs("small", { className: className, children: [_jsx("span", { className: "glyphicon glyphicon-exclamation-sign" }), _jsx("span", { className: `af-form__${messageType}-text`, children: message })] })));
+};

package/dist/Form/core/FieldForm.d.ts

@@ -0,0 +1,59 @@
+import { BaseSyntheticEvent, ReactElement, ReactNode } from "react";
+import { MessageTypes } from "./MessageTypes";
+import { FormClassManager } from "./FormClassManager";
+type Tmessage = {
+    message: string | null;
+    messageType: MessageTypes;
+};
+declare const INITIAL_STATE: {
+    hasLostFocusOnce: boolean;
+    hasFocus: boolean;
+    hasChange: boolean;
+    memory: Tmessage;
+};
+type EventFunction = {
+    onChange?: Function;
+    onBlur?: Function;
+    onFocus?: Function;
+};
+type FieldFormProps = Tmessage & {
+    className?: string;
+    classModifier?: string;
+    forceDisplayMessage?: boolean;
+    children: ReactNode;
+    setStateMemoryFn?: typeof setStateMemory;
+    onChangeByStateFn?: typeof onChangeByState;
+    setStateOnBlurFn?: typeof setStateOnBlur;
+    setStateOnFocusFn?: typeof setStateOnFocus;
+    initialState?: typeof INITIAL_STATE;
+};
+type SetState = (prevState: typeof INITIAL_STATE) => typeof INITIAL_STATE;
+export declare const setStateMemory: ({ message, messageType }: Tmessage) => SetState;
+export declare const setStateHasChange: () => SetState;
+export declare const onChangeByState: (setState: Function, stateHasChange: boolean, setStateHasChangeFn?: () => SetState) => any;
+export declare const setStateOnBlur: () => SetState;
+export declare const setStateOnFocus: ({ message, messageType }: Tmessage) => SetState;
+type GetMessageInfoProps = typeof INITIAL_STATE & Required<Pick<FieldFormProps, "message" | "messageType" | "forceDisplayMessage">>;
+export declare const getMessageInfo: ({ forceDisplayMessage, hasLostFocusOnce, hasFocus, memory, hasChange, message, messageType, }: GetMessageInfoProps) => Pick<FieldFormProps, "message" | "messageType">;
+type EventWrapperProps = {
+    props: EventFunction;
+} & Pick<AddPropsClone, "wrapper">;
+export declare const eventWrapper: ({ wrapper, props }: EventWrapperProps) => {
+    onChange: (ev: BaseSyntheticEvent) => void;
+    onBlur: (ev: BaseSyntheticEvent) => void;
+    onFocus: (ev: BaseSyntheticEvent) => void;
+};
+type AddPropsClone = Omit<RenderChildrenProps, "children"> & {
+    child: ReactElement;
+    classModifier: string;
+    name: string;
+    getMessageClassModifierFn?: typeof FormClassManager.getMessageClassModifier;
+    eventWrapperFn?: Function;
+};
+export declare const addPropsClone: ({ message, messageType, classModifier, wrapper, child, name, getMessageClassModifierFn, eventWrapperFn, ...rest }: AddPropsClone) => any;
+type RenderChildrenProps = {
+    wrapper: EventFunction;
+} & Partial<Pick<FieldFormProps, "children">> & ReturnType<typeof getMessageInfo>;
+export declare const renderedChildren: ({ children, wrapper, message, messageType, }: RenderChildrenProps) => ReactNode;
+export declare const FieldForm: ({ children, message, messageType, className, classModifier, forceDisplayMessage, setStateMemoryFn, onChangeByStateFn, setStateOnBlurFn, setStateOnFocusFn, initialState, }: FieldFormProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Form/core/FieldForm.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cloneElement, Children, useState, useRef, useEffect, isValidElement, } from "react";
+import { getComponentClassName } from "./getComponentClassName";
+import { MessageTypes } from "./MessageTypes";
+import { FormClassManager } from "./FormClassManager";
+const defaultClassName = "md-10";
+const INITIAL_STATE = {
+    hasLostFocusOnce: false,
+    hasFocus: false,
+    hasChange: false,
+    memory: { message: "", messageType: MessageTypes.error },
+};
+export const setStateMemory = ({ message = null, messageType = MessageTypes.error }) => (prevState) => ({
+    ...prevState,
+    memory: {
+        message,
+        messageType,
+    },
+});
+export const setStateHasChange = () => (prevState) => ({
+    ...prevState,
+    hasChange: true,
+});
+export const onChangeByState = (setState, stateHasChange, setStateHasChangeFn = setStateHasChange) => !stateHasChange && setState(setStateHasChangeFn());
+export const setStateOnBlur = () => (prevState) => ({
+    ...prevState,
+    hasLostFocusOnce: true,
+    hasFocus: false,
+});
+export const setStateOnFocus = ({ message = null, messageType = MessageTypes.error }) => (prevState) => ({
+    ...prevState,
+    hasFocus: true,
+    memory: { message, messageType },
+});
+export const getMessageInfo = ({ forceDisplayMessage, hasLostFocusOnce, hasFocus, memory, hasChange, message, messageType, }) => {
+    const isDisplayMessage = hasLostFocusOnce || forceDisplayMessage || (hasChange && !hasFocus);
+    if (!isDisplayMessage) {
+        return {
+            message: "",
+            messageType: "",
+        };
+    }
+    return hasFocus
+        ? memory
+        : {
+            message,
+            messageType,
+        };
+};
+export const eventWrapper = ({ wrapper, props }) => ({
+    onChange: (ev) => {
+        wrapper?.onChange?.(ev);
+        if (props.onChange) {
+            props.onChange(ev);
+        }
+    },
+    onBlur: (ev) => {
+        wrapper?.onBlur?.(ev);
+        if (props.onBlur) {
+            props.onBlur(ev);
+        }
+    },
+    onFocus: (ev) => {
+        wrapper?.onFocus?.(ev);
+        if (props.onFocus) {
+            props.onFocus(ev);
+        }
+    },
+});
+export const addPropsClone = ({ message, messageType, classModifier, wrapper, child, name, getMessageClassModifierFn = FormClassManager.getMessageClassModifier, eventWrapperFn = eventWrapper, ...rest }) => {
+    const messageClassModifier = getMessageClassModifierFn(messageType, message, classModifier);
+    const type = { ...rest };
+    const displayName = type?.displayName ?? name;
+    switch (displayName) {
+        case "HelpMessage":
+            return { isVisible: !message };
+        case "FieldError":
+            return { message };
+        case "FieldInput":
+            return { classModifier: messageClassModifier };
+        case "EnhancedInputRadio":
+        case "EnhancedInputCheckbox":
+            return {
+                ...eventWrapperFn({ wrapper, props: child.props }),
+                classModifier: messageClassModifier,
+            };
+        case "EnhancedInput":
+            return {
+                ...eventWrapperFn({ wrapper, props: child.props }),
+            };
+        default:
+            return {};
+    }
+};
+export const renderedChildren = ({ children, wrapper, message, messageType, }) => Children.map(children, (child) => {
+    if (!isValidElement(child) || typeof child.type === "string") {
+        return child;
+    }
+    const props = {
+        ...child.props,
+    };
+    if (child.props.children) {
+        const subChildren = renderedChildren({
+            children: child.props.children,
+            wrapper,
+            message,
+            messageType,
+        });
+        if (subChildren !== null) {
+            props.children = subChildren;
+        }
+    }
+    return cloneElement(child, {
+        ...props,
+        ...addPropsClone({
+            ...child.type,
+            name: child.type.name,
+            message,
+            messageType,
+            classModifier: props.classModifier,
+            wrapper,
+            child,
+        }),
+    });
+});
+export const FieldForm = ({ children, message = null, messageType = MessageTypes.error, className = defaultClassName, classModifier = "", forceDisplayMessage = false, setStateMemoryFn = setStateMemory, onChangeByStateFn = onChangeByState, setStateOnBlurFn = setStateOnBlur, setStateOnFocusFn = setStateOnFocus, initialState = INITIAL_STATE, }) => {
+    const [state, setState] = useState(initialState);
+    const previousForceDisplayMessage = useRef(forceDisplayMessage);
+    useEffect(() => {
+        if (previousForceDisplayMessage.current !== forceDisplayMessage) {
+            setState(setStateMemoryFn({ message, messageType }));
+        }
+    }, [
+        forceDisplayMessage,
+        message,
+        messageType,
+        previousForceDisplayMessage,
+        setState,
+        setStateMemoryFn,
+    ]);
+    const onChange = () => onChangeByStateFn(setState, state?.hasChange);
+    const onBlur = () => setState(setStateOnBlurFn());
+    const onFocus = () => setState(setStateOnFocusFn({ message, messageType }));
+    const childrenCloned = renderedChildren({
+        children,
+        wrapper: { onFocus, onChange, onBlur },
+        ...getMessageInfo({ ...state, forceDisplayMessage, message, messageType }),
+    });
+    const subComponentClassName = getComponentClassName(className, classModifier, defaultClassName);
+    return _jsx("div", { className: subComponentClassName, children: childrenCloned });
+};

package/dist/Form/core/FieldInput.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+type FieldProps = {
+    isVisible?: boolean;
+    className?: string;
+    classModifier?: string;
+    children?: ReactNode;
+};
+export declare const FieldInput: ({ children, className, classModifier, isVisible, }: FieldProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/Form/core/FieldInput.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getComponentClassName } from "./getComponentClassName";
+export const FieldInput = ({ children, className = "", classModifier = "", isVisible = true, }) => {
+    if (!isVisible) {
+        return null;
+    }
+    const newClassName = getComponentClassName(className, classModifier, "");
+    return _jsx("div", { className: newClassName, children: children });
+};

package/dist/Form/core/FormClassManager.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+export declare const FormClassManager: {
+    getFieldInputClassModifier: (modifier: string, disabled: boolean) => string;
+    getInputClassModifier: (modifier: string, children: ReactNode) => string;
+    getModifier: (messageType: string) => string;
+    getMessageClassModifier: (messageType: "error" | "success" | "warning", message?: string | null, modifier?: string) => string;
+};

package/dist/Form/core/FormClassManager.js

@@ -0,0 +1,33 @@
+import { MessageTypes } from "./MessageTypes";
+const getFieldInputClassModifier = (modifier, disabled) => disabled ? `${modifier} disabled` : modifier;
+const getInputClassModifier = (modifier, children) => children ? `${modifier} hasinfobulle` : modifier;
+const getModifier = (messageType) => {
+    let modifier = "error";
+    switch (messageType) {
+        case MessageTypes.success:
+            modifier = "success";
+            break;
+        case MessageTypes.warning:
+            modifier = "warning";
+            break;
+        default:
+            break;
+    }
+    return modifier;
+};
+const getMessageClassModifier = (messageType, message, modifier) => {
+    if (!message) {
+        return "";
+    }
+    const messageModifier = getModifier(messageType);
+    if (!messageModifier) {
+        return "";
+    }
+    return modifier ? `${modifier} ${messageModifier}` : messageModifier;
+};
+export const FormClassManager = {
+    getFieldInputClassModifier,
+    getInputClassModifier,
+    getModifier,
+    getMessageClassModifier,
+};

package/dist/Form/core/HelpMessage.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+type HelpProps = {
+    message?: ReactNode;
+    isVisible?: boolean;
+};
+export declare const HelpMessage: ({ message, isVisible }: HelpProps) => false | import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/Form/core/HelpMessage.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const HelpMessage = ({ message, isVisible = true }) => isVisible && _jsx("small", { className: "af-form__help", children: message });

package/dist/Form/core/InputList.d.ts

@@ -0,0 +1,8 @@
+export declare const isDisabled: (option: {
+    disabled?: boolean;
+}, disabled: boolean) => boolean;
+export declare const InputList: {
+    isDisabled: (option: {
+        disabled?: boolean;
+    }, disabled: boolean) => boolean;
+};

package/dist/Form/core/InputList.js

@@ -0,0 +1,4 @@
+export const isDisabled = (option, disabled) => (option.disabled !== undefined ? option.disabled : disabled);
+export const InputList = {
+    isDisabled,
+};

package/dist/Form/core/MessageTypes.d.ts

@@ -0,0 +1,5 @@
+export declare enum MessageTypes {
+    error = "error",
+    success = "success",
+    warning = "warning"
+}

package/dist/Form/core/MessageTypes.js

@@ -0,0 +1,6 @@
+export var MessageTypes;
+(function (MessageTypes) {
+    MessageTypes["error"] = "error";
+    MessageTypes["success"] = "success";
+    MessageTypes["warning"] = "warning";
+})(MessageTypes || (MessageTypes = {}));

package/dist/Form/core/getComponentClassName.d.ts

@@ -0,0 +1 @@
+export declare const getComponentClassName: (className?: string, classModifier?: string, defaultClassName?: string) => string;

package/dist/Form/core/getComponentClassName.js

@@ -0,0 +1,27 @@
+import classNames from "classnames";
+const getLastClassName = (classNameToUse) => {
+    if (!classNameToUse) {
+        return null;
+    }
+    return classNameToUse.split(" ").filter(Boolean).at(-1);
+};
+const listClassModifier = (classModifier) => {
+    if (!classModifier) {
+        return [];
+    }
+    return classModifier.split(" ");
+};
+export const getComponentClassName = (className, classModifier, defaultClassName) => {
+    const classNameToUse = className || defaultClassName;
+    if (!classNameToUse) {
+        return "";
+    }
+    const classWithoutModifier = getLastClassName(classNameToUse);
+    const modifiers = listClassModifier(classModifier);
+    const modifiersObject = modifiers
+        .filter((it) => /\S/.test(it))
+        .map((it) => {
+        return `${classWithoutModifier}--${it}`;
+    });
+    return classNames(classNameToUse, modifiersObject);
+};

package/dist/Form/core/getFirstId.d.ts

@@ -0,0 +1,2 @@
+import type { Option } from ".";
+export declare const getFirstId: (options: Option[]) => string | undefined;

package/dist/Form/core/getFirstId.js

@@ -0,0 +1 @@
+export const getFirstId = (options) => !options || options.length === 0 ? "" : options[0].id;

package/dist/Form/core/getOptionClassName.d.ts

@@ -0,0 +1 @@
+export declare function getOptionClassName(className: string, classModifier: string, defaultClassName: string, disabled: boolean): string;

package/dist/Form/core/getOptionClassName.js

@@ -0,0 +1,10 @@
+import { getComponentClassName } from "./getComponentClassName";
+export function getOptionClassName(className, classModifier, defaultClassName, disabled) {
+    const classModifierWithDisabled = [
+        classModifier,
+        disabled ? "disabled" : undefined,
+    ]
+        .filter(Boolean)
+        .join(" ");
+    return getComponentClassName(className, classModifierWithDisabled, defaultClassName);
+}

package/dist/Form/core/index.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from "react";
+export { Field } from "./Field";
+export { FieldInput } from "./FieldInput";
+export { MessageTypes } from "./MessageTypes";
+export { FieldError } from "./FieldError";
+export { FormClassManager } from "./FormClassManager";
+export { FieldForm } from "./FieldForm";
+export { HelpMessage } from "./HelpMessage";
+export { InputList } from "./InputList";
+export { useInputClassModifier } from "./useInputClassModifier";
+export { getOptionClassName } from "./getOptionClassName";
+export { useOptionsWithId } from "./useOptionsWithId";
+export { getComponentClassName } from "./getComponentClassName";
+export { getFirstId } from "./getFirstId";
+export type Option = {
+    id?: string;
+    icon?: ReactNode;
+    label: ReactNode;
+    description?: ReactNode;
+    value: string;
+    disabled?: boolean;
+} & React.InputHTMLAttributes<HTMLInputElement>;
+type BaseFormEvent = {
+    id: string;
+    name: string;
+};
+export type FormEvent = (BaseFormEvent & {
+    value: string;
+}) | (BaseFormEvent & {
+    values: string[];
+});

package/dist/Form/core/index.js

@@ -0,0 +1,13 @@
+export { Field } from "./Field";
+export { FieldInput } from "./FieldInput";
+export { MessageTypes } from "./MessageTypes";
+export { FieldError } from "./FieldError";
+export { FormClassManager } from "./FormClassManager";
+export { FieldForm } from "./FieldForm";
+export { HelpMessage } from "./HelpMessage";
+export { InputList } from "./InputList";
+export { useInputClassModifier } from "./useInputClassModifier";
+export { getOptionClassName } from "./getOptionClassName";
+export { useOptionsWithId } from "./useOptionsWithId";
+export { getComponentClassName } from "./getComponentClassName";
+export { getFirstId } from "./getFirstId";

package/dist/Form/core/useInputClassModifier.d.ts

@@ -0,0 +1,4 @@
+export declare function useInputClassModifier(classModifier: string, disabled: boolean, hasChildren: boolean): {
+    inputClassModifier: string;
+    inputFieldClassModifier: string;
+};

package/dist/Form/core/useInputClassModifier.js

@@ -0,0 +1,12 @@
+export function useInputClassModifier(classModifier, disabled, hasChildren) {
+    return {
+        inputClassModifier: [
+            classModifier ?? "",
+            hasChildren ? "hasinfobulle" : "",
+        ].join(" "),
+        inputFieldClassModifier: [
+            classModifier ?? "",
+            disabled ? "disabled" : "",
+        ].join(" "),
+    };
+}

package/dist/Form/core/useOptionsWithId.d.ts

@@ -0,0 +1,2 @@
+import type { Option } from ".";
+export declare function useOptionsWithId(options?: Option[], id?: string): Option[];

package/dist/Form/core/useOptionsWithId.js

@@ -0,0 +1,13 @@
+import { useId } from "react";
+export function useOptionsWithId(options, id) {
+    const reactId = useId();
+    if (!options) {
+        return [];
+    }
+    return options.map((option, index) => {
+        if (option.id) {
+            return option;
+        }
+        return { ...option, id: `${id ?? reactId}_${index}` };
+    });
+}

package/dist/IconBg/IconBg.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from "react";
+type IconBgProps = {
+    isDisabled?: boolean;
+    className?: string;
+    classModifier?: string;
+    children: ReactNode;
+};
+export declare const IconBg: ({ children, className, classModifier, isDisabled, }: IconBgProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/IconBg/IconBg.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { getComponentClassName } from "../utilities";
+export const IconBg = ({ children, className, classModifier, isDisabled = false, }) => {
+    const componentClassName = useMemo(() => {
+        let newClassModifier = classModifier;
+        if (isDisabled) {
+            newClassModifier += " disabled";
+        }
+        return getComponentClassName(className, newClassModifier, "af-icon-bg");
+    }, [classModifier, isDisabled, className]);
+    return _jsx("div", { className: componentClassName, children: children });
+};

package/dist/IconBg/index.d.ts

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/IconBg/IconBg.scss";
+export { IconBg } from "./IconBg";

package/dist/IconBg/index.js

@@ -0,0 +1,2 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/IconBg/IconBg.scss";
+export { IconBg } from "./IconBg";

package/dist/Layout/Footer/DynamicIcons.d.ts

@@ -0,0 +1,4 @@
+export declare const DynamicIcon: ({ iconName, className, }: {
+    iconName: string;
+    className?: string;
+}) => string | import("react/jsx-runtime").JSX.Element;

package/dist/Layout/Footer/DynamicIcons.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import facebook from "../../assets/svg/facebook.svg";
+import linkedin from "../../assets/svg/linkedin.svg";
+import twitterx from "../../assets/svg/twitterx.svg";
+import youtube from "../../assets/svg/youtube.svg";
+import { Svg } from "../../Svg";
+export const DynamicIcon = ({ iconName, className, }) => {
+    switch (iconName) {
+        case "facebook":
+            return _jsx(Svg, { src: facebook, className: className });
+        case "twitter":
+            return _jsx(Svg, { src: twitterx, className: className });
+        case "youtube":
+            return _jsx(Svg, { src: youtube, className: className });
+        case "linkedin":
+            return _jsx(Svg, { src: linkedin, className: className });
+        default:
+            return iconName;
+    }
+};

package/dist/Layout/Footer/Footer.d.ts

@@ -0,0 +1,14 @@
+import "@axa-fr/design-system-look-and-feel-css/dist/common/reboot.scss";
+import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Footer/Footer.scss";
+import { FC } from "react";
+import { SocialMedia } from "./MenuIcons";
+import { Link } from "./MenuLink";
+type Props = {
+    links: Link[];
+    socialMedias?: SocialMedia[];
+    copyright: string;
+    expandLinkText: string;
+    id?: string;
+};
+export declare const Footer: FC<Props>;
+export {};

package/dist/Layout/Footer/Footer.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "@axa-fr/design-system-look-and-feel-css/dist/common/reboot.scss";
+import "@axa-fr/design-system-look-and-feel-css/dist/Layout/Footer/Footer.scss";
+import expandMore from "@material-symbols/svg-400/outlined/keyboard_arrow_down.svg";
+import classNames from "classnames";
+import { useCallback, useState } from "react";
+import { MenuIcons } from "./MenuIcons";
+import { MenuLink } from "./MenuLink";
+import { Svg } from "../../Svg";
+export const Footer = ({ links, socialMedias = [], copyright, expandLinkText, id, }) => {
+    const [isAboutOpen, setIsAboutOpen] = useState(false);
+    const handleClick = useCallback(() => {
+        setIsAboutOpen((isOpen) => !isOpen);
+    }, []);
+    return (_jsxs("footer", { id: id, className: "af-footer", children: [_jsxs("div", { className: "af-footer__footerTop", children: [_jsxs("nav", { className: "af-footer__menuTop", "aria-label": expandLinkText, children: [_jsxs("button", { type: "button", onClick: handleClick, className: "af-footer__menuAboutTrigger", children: [_jsx("span", { className: "af-footer__menuAboutTriggerText", children: expandLinkText }), _jsx(Svg, { src: expandMore, className: classNames("af-footer__icon", "af-footer__iconTrigger", isAboutOpen && "af-footer__iconTrigger--display") })] }), _jsx(MenuLink, { links: links, isAboutOpen: isAboutOpen })] }), _jsx(MenuIcons, { socialMedias: socialMedias })] }), _jsx("div", { className: "af-footer__footerBottom", children: _jsx("div", { className: "af-footer__footerBottomWidth", children: _jsx("span", { className: "af-footer__textCopyright", children: copyright }) }) })] }));
+};

package/dist/Layout/Footer/MenuIcons.d.ts

@@ -0,0 +1,9 @@
+export type SocialMedia = {
+    icon: "facebook" | "twitter" | "youtube" | "linkedin";
+    link: string;
+};
+type MenuIconsProps = {
+    socialMedias: SocialMedia[];
+};
+export declare const MenuIcons: ({ socialMedias }: MenuIconsProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/Layout/Footer/MenuIcons.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DynamicIcon } from "./DynamicIcons";
+export const MenuIcons = ({ socialMedias }) => {
+    if (socialMedias.length === 0) {
+        return null;
+    }
+    return (_jsx("nav", { className: "af-footer__footerMenuIcons", children: socialMedias.map((socialItem) => (_jsx("a", { "aria-label": `social media ${socialItem.icon}`, className: "af-footer__menuIconLinks", href: socialItem.link, target: "_blank", rel: "noopener noreferrer", children: _jsx(DynamicIcon, { iconName: socialItem.icon }) }, socialItem.icon))) }));
+};

package/dist/Layout/Footer/MenuLink.d.ts

@@ -0,0 +1,11 @@
+export type Link = {
+    link: string;
+    text: string;
+    openInCurrentTab?: boolean;
+};
+type MenuLinkProps = {
+    links: Link[];
+    isAboutOpen?: boolean;
+};
+export declare const MenuLink: ({ links, isAboutOpen }: MenuLinkProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};