@axa-fr/design-system-look-and-feel-react 1.0.5-ci.8 → 1.0.5-ci.86
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AccordionCore/AccordionCore.js +1 -1
- package/dist/Alert/Alert.d.ts +2 -2
- package/dist/Alert/Alert.js +6 -6
- package/dist/Card/Card.js +1 -1
- package/dist/Divider/Divider.js +1 -1
- package/dist/Form/Checkbox/Checkbox.js +2 -2
- package/dist/Form/Checkbox/CheckboxSelect.d.ts +3 -3
- package/dist/Form/Checkbox/CheckboxSelect.js +5 -2
- package/dist/Form/FileUpload/FileUpload.d.ts +5 -4
- package/dist/Form/FileUpload/FileUpload.js +7 -5
- package/dist/Form/Radio/Radio.js +2 -2
- package/dist/Form/Radio/RadioSelect.d.ts +1 -1
- package/dist/Form/Radio/RadioSelect.js +5 -2
- package/dist/Form/Select/Select.d.ts +5 -22
- package/dist/Form/Select/Select.js +11 -23
- package/dist/Form/Text/Text.d.ts +3 -0
- package/dist/Form/Text/Text.js +7 -3
- package/dist/Form/TextArea/TextArea.js +2 -2
- package/dist/Form/core/FieldForm.d.ts +1 -1
- package/dist/Form/core/FieldForm.js +3 -2
- package/dist/IconBg/IconBg.js +1 -1
- package/dist/Layout/Header/Header.d.ts +3 -3
- package/dist/Layout/Header/Header.js +2 -2
- package/dist/Layout/Header/NavBar/NavBar.d.ts +2 -2
- package/dist/Layout/Header/NavBar/NavBar.js +3 -3
- package/dist/Link/Link.js +1 -1
- package/dist/List/ClickList/ClickItem/ClickItem.js +1 -1
- package/dist/List/ContentItemDuo/ContentItemDuo.d.ts +2 -1
- package/dist/List/ContentItemDuo/ContentItemDuo.js +3 -3
- package/dist/List/ContentItemMono/ContentItemMono.js +1 -1
- package/dist/Modal/Modal.d.ts +12 -0
- package/dist/Modal/Modal.js +10 -0
- package/dist/Modal/ModalCore.d.ts +11 -0
- package/dist/Modal/ModalCore.js +6 -0
- package/dist/Modal/components/ModalCoreBody.d.ts +2 -0
- package/dist/Modal/components/ModalCoreBody.js +2 -0
- package/dist/Modal/components/ModalCoreFooter.d.ts +2 -0
- package/dist/Modal/components/ModalCoreFooter.js +2 -0
- package/dist/Modal/components/ModalCoreHeader.d.ts +12 -0
- package/dist/Modal/components/ModalCoreHeader.js +8 -0
- package/dist/Modal/index.d.ts +5 -0
- package/dist/Modal/index.js +5 -0
- package/dist/Skeleton/Skeleton.d.ts +1 -1
- package/dist/SkeletonList/SkeletonList.d.ts +1 -1
- package/dist/Stepper/Stepper.d.ts +1 -1
- package/dist/Stepper/Stepper.js +3 -3
- package/dist/Tag/Tag.js +1 -1
- package/dist/Title/Title.js +1 -1
- package/dist/Title/TitleWithSubtitles.d.ts +1 -1
- package/dist/index.d.ts +7 -3
- package/dist/index.js +6 -2
- package/dist/utilities/helpers/getComponentClassName.d.ts +1 -1
- package/dist/utilities/helpers/getComponentClassName.js +7 -8
- package/package.json +21 -66
- package/dist/Form/Select/CustomOption.d.ts +0 -4
- package/dist/Form/Select/CustomOption.js +0 -8
- package/dist/Form/Select/DropdownIndicator.d.ts +0 -4
- package/dist/Form/Select/DropdownIndicator.js +0 -11
- package/dist/Grid/components/Card.d.ts +0 -3
- package/dist/Grid/components/Card.js +0 -2
- package/dist/Grid/components/Contacts.d.ts +0 -1
- package/dist/Grid/components/Contacts.js +0 -9
- package/dist/Grid/components/MainTitle.d.ts +0 -1
- package/dist/Grid/components/MainTitle.js +0 -4
- package/dist/Grid/components/MyFooter.d.ts +0 -1
- package/dist/Grid/components/MyFooter.js +0 -31
- package/dist/Grid/components/MyHeader.d.ts +0 -1
- package/dist/Grid/components/MyHeader.js +0 -9
- package/dist/Grid/components/MyList.d.ts +0 -1
- package/dist/Grid/components/MyList.js +0 -3
- package/dist/Grid/components/Offsets.d.ts +0 -1
- package/dist/Grid/components/Offsets.js +0 -7
- package/dist/Grid/renderExampleForm.d.ts +0 -1
- package/dist/Grid/renderExampleForm.js +0 -30
- package/dist/Grid/renderExamplePage.d.ts +0 -1
- package/dist/Grid/renderExamplePage.js +0 -9
- package/dist/Grid/renderWireframe.d.ts +0 -1
- package/dist/Grid/renderWireframe.js +0 -5
- package/dist/ModalClient/Modal.container.d.ts +0 -4
- package/dist/ModalClient/Modal.container.js +0 -45
- package/dist/ModalClient/Modal.d.ts +0 -4
- package/dist/ModalClient/Modal.hook.d.ts +0 -6
- package/dist/ModalClient/Modal.hook.js +0 -25
- package/dist/ModalClient/Modal.js +0 -6
- package/dist/ModalClient/index.d.ts +0 -1
- package/dist/ModalClient/index.js +0 -1
- package/dist/ModalClient/type.d.ts +0 -38
- package/dist/ModalClient/type.js +0 -1
@@ -0,0 +1,12 @@
|
|
1
|
+
import type { HTMLAttributes, MouseEvent, KeyboardEvent } from "react";
|
2
|
+
import type { TitleLevel } from "../../Title";
|
3
|
+
export type ModalCoreHeaderProps = HTMLAttributes<HTMLDivElement> & {
|
4
|
+
className?: string;
|
5
|
+
title: string;
|
6
|
+
subtitle?: string;
|
7
|
+
iconTitle?: string;
|
8
|
+
levelTitle?: TitleLevel;
|
9
|
+
onCancel: (event: MouseEvent | KeyboardEvent) => void;
|
10
|
+
closeButtonAriaLabel?: string;
|
11
|
+
};
|
12
|
+
export declare const ModalCoreHeader: ({ className, title, subtitle, iconTitle, levelTitle, onCancel, closeButtonAriaLabel, ...props }: ModalCoreHeaderProps) => import("react/jsx-runtime").JSX.Element;
|
@@ -0,0 +1,8 @@
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
+
import closeSmall from "@material-symbols/svg-400/outlined/close.svg";
|
3
|
+
import { ButtonClient, Variants } from "../../Button/Button";
|
4
|
+
import { Svg } from "../../Svg";
|
5
|
+
export const ModalCoreHeader = ({ className, title, subtitle, iconTitle, levelTitle = 2, onCancel, closeButtonAriaLabel = "Fermer la boite de dialogue", ...props }) => {
|
6
|
+
const HLevel = `h${levelTitle}`;
|
7
|
+
return (_jsxs("header", { className: ["af-modal__header", className].filter(Boolean).join(" "), ...props, children: [_jsx(ButtonClient, { variant: Variants.ghost, iconLeft: _jsx(Svg, { src: closeSmall, width: 32, height: 32, role: "graphics-document" }), "aria-label": closeButtonAriaLabel, onClick: onCancel }), _jsxs("div", { className: "af-modal__header-title", children: [iconTitle && (_jsx(Svg, { src: iconTitle, width: 32, height: 32, role: "graphics-document" })), _jsx(HLevel, { className: "af-modal__header-title-heading", children: title }), subtitle && (_jsx("span", { className: "af-modal__header-title-subtitle", children: subtitle }))] })] }));
|
8
|
+
};
|
@@ -0,0 +1,5 @@
|
|
1
|
+
export { Modal, type ModalProps } from "./Modal";
|
2
|
+
export { ModalCore, type ModalCoreProps } from "./ModalCore";
|
3
|
+
export { ModalCoreFooter, type ModalCoreFooterProps, } from "./components/ModalCoreFooter";
|
4
|
+
export { ModalCoreHeader, type ModalCoreHeaderProps, } from "./components/ModalCoreHeader";
|
5
|
+
export { ModalCoreBody, type ModalCoreBodyProps, } from "./components/ModalCoreBody";
|
@@ -0,0 +1,5 @@
|
|
1
|
+
export { Modal } from "./Modal";
|
2
|
+
export { ModalCore } from "./ModalCore";
|
3
|
+
export { ModalCoreFooter, } from "./components/ModalCoreFooter";
|
4
|
+
export { ModalCoreHeader, } from "./components/ModalCoreHeader";
|
5
|
+
export { ModalCoreBody, } from "./components/ModalCoreBody";
|
@@ -16,5 +16,5 @@ export type SkeletonProps = {
|
|
16
16
|
colGap?: number;
|
17
17
|
rowGap?: number;
|
18
18
|
} & isLoadingAndChildrenProps;
|
19
|
-
export declare const Skeleton: ({ className, grid, ariaBusy, ariaLabel, maxCols, colGap, rowGap, isLoading, children, }: SkeletonProps) => string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
|
19
|
+
export declare const Skeleton: ({ className, grid, ariaBusy, ariaLabel, maxCols, colGap, rowGap, isLoading, children, }: SkeletonProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
|
20
20
|
export {};
|
@@ -8,4 +8,4 @@ export type SkeletonListProps = {
|
|
8
8
|
classModifierList?: ComponentPropsWithRef<typeof List>["classModifier"];
|
9
9
|
isLoading: boolean;
|
10
10
|
} & PropsWithChildren;
|
11
|
-
export declare const SkeletonList: ({ children, isLoading, lists, classModifierList, }: SkeletonListProps) => string | number | boolean | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element[] | null | undefined;
|
11
|
+
export declare const SkeletonList: ({ children, isLoading, lists, classModifierList, }: SkeletonListProps) => string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element[] | null | undefined;
|
package/dist/Stepper/Stepper.js
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
-
import { useCallback, useId } from "react";
|
3
|
-
import classNames from "classnames";
|
4
2
|
import "@axa-fr/design-system-look-and-feel-css/dist/Stepper/Stepper.scss";
|
3
|
+
import classNames from "classnames";
|
4
|
+
import { useCallback, useId } from "react";
|
5
5
|
const INITIAL_STEPPER_PROGRESS = 10;
|
6
6
|
const MAX_STEPPER_PROGRESS = 100;
|
7
7
|
export const Stepper = ({ currentStepProgress = INITIAL_STEPPER_PROGRESS, currentTitle, nbSteps, currentStep, currentSubtitle, isTitleVisible = true, isSubtitleVisible = true, className, ...props }) => {
|
@@ -18,5 +18,5 @@ export const Stepper = ({ currentStepProgress = INITIAL_STEPPER_PROGRESS, curren
|
|
18
18
|
}
|
19
19
|
return 0;
|
20
20
|
}, [currentStep, currentStepProgress]);
|
21
|
-
return (_jsxs("div", { className: "af-stepper-client", ...props, children: [isTitleVisible && currentTitle && (_jsx("h2", { className: "af-stepper-client__title", "aria-describedby": stepperId, children: currentTitle })), isSubtitleVisible && currentSubtitle && (_jsx("p", { className: "af-stepper-client__subtitle", children: currentSubtitle })), _jsx("div", { id: stepperId, role: "group", "aria-label": currentTitle, className: classNames("af-stepper-client__content", className), children: [...Array(nbSteps).keys()].map((index) => (_jsx("div", { className: "af-stepper-client__progressbar", "aria-current": index === currentStep, "aria-hidden": index !== currentStep, "aria-label": `${getCurrentProgress(index)}%`, children: _jsx("div", { className: "af-stepper-client__progress", style: { width: `${getCurrentProgress(index)}%` } }) }, `${stepperId}-${index}`))) })] }));
|
21
|
+
return (_jsxs("div", { className: "af-stepper-client", ...props, children: [_jsxs("div", { children: [isTitleVisible && currentTitle && (_jsx("h2", { className: "af-stepper-client__title", "aria-describedby": stepperId, children: currentTitle })), isSubtitleVisible && currentSubtitle && (_jsx("p", { className: "af-stepper-client__subtitle", children: currentSubtitle }))] }), _jsx("div", { id: stepperId, role: "group", "aria-label": currentTitle, className: classNames("af-stepper-client__content", className), children: [...Array(nbSteps).keys()].map((index) => (_jsx("div", { className: "af-stepper-client__progressbar", "aria-current": index === currentStep, "aria-hidden": index !== currentStep, "aria-label": `${getCurrentProgress(index)}%`, children: _jsx("div", { className: "af-stepper-client__progress", style: { width: `${getCurrentProgress(index)}%` } }) }, `${stepperId}-${index}`))) })] }));
|
22
22
|
};
|
package/dist/Tag/Tag.js
CHANGED
@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { useMemo } from "react";
|
3
3
|
import { getComponentClassName } from "../utilities";
|
4
4
|
export const Tag = ({ children, className, classModifier = "", ...divProps }) => {
|
5
|
-
const componentClassName = useMemo(() => getComponentClassName(
|
5
|
+
const componentClassName = useMemo(() => getComponentClassName("af-tag", className, classModifier), [className, classModifier]);
|
6
6
|
return (_jsx("div", { className: componentClassName, ...divProps, children: _jsx("span", { className: "af-tag__label", children: children }) }));
|
7
7
|
};
|
package/dist/Title/Title.js
CHANGED
@@ -5,7 +5,7 @@ import { getComponentClassName } from "../utilities";
|
|
5
5
|
import { TitleSize } from "./constants";
|
6
6
|
import { TitleWithSubtitles } from "./TitleWithSubtitles";
|
7
7
|
export const Title = ({ children: title, className, classModifier, firstSubtitle, icon, secondSubtitle, size = TitleSize.XL, level = size === TitleSize.L ? 2 : 1, }) => {
|
8
|
-
const componentClassName = useMemo(() => getComponentClassName(className, classModifier ? `${classModifier} ${size}` : size
|
8
|
+
const componentClassName = useMemo(() => getComponentClassName("af-title", className, classModifier ? `${classModifier} ${size}` : size), [classModifier, className, size]);
|
9
9
|
const TitleWithSubtitlesPart = useCallback(({ ...args }) => (_jsx(TitleWithSubtitles, { title: title, firstSubtitle: firstSubtitle, level: level, ...args })), [title, firstSubtitle, level]);
|
10
10
|
return (_jsx("header", { className: componentClassName, children: icon && size === TitleSize.XL ? (_jsxs(_Fragment, { children: [_jsx(IconBg, { className: "af-title__icon af-icon-bg", children: icon }), _jsx(TitleWithSubtitlesPart, { secondSubtitle: secondSubtitle })] })) : (_jsx(TitleWithSubtitlesPart, {})) }));
|
11
11
|
};
|
package/dist/index.d.ts
CHANGED
@@ -6,15 +6,20 @@ export { Alert } from "./Alert/Alert";
|
|
6
6
|
export type { AlertType } from "./Alert/Alert";
|
7
7
|
export { ButtonClient as Button, Variants as ButtonVariants, } from "./Button/Button";
|
8
8
|
export { Card } from "./Card";
|
9
|
+
export { Divider } from "./Divider";
|
9
10
|
export { Checkbox, CheckboxSelect } from "./Form/Checkbox";
|
10
11
|
export { FileUpload } from "./Form/FileUpload";
|
12
|
+
export { InputError } from "./Form/InputError";
|
11
13
|
export { Radio, RadioSelect } from "./Form/Radio";
|
12
14
|
export { Select } from "./Form/Select";
|
13
15
|
export { Text as TextInput } from "./Form/Text";
|
14
16
|
export { TextArea } from "./Form/TextArea";
|
17
|
+
export { DebugGrid } from "./Grid/DebugGrid";
|
15
18
|
export { IconBg } from "./IconBg";
|
16
19
|
export { Footer } from "./Layout/Footer/Footer";
|
17
20
|
export { Header } from "./Layout/Header";
|
21
|
+
export { NavBar } from "./Layout/Header/NavBar/NavBar";
|
22
|
+
export { PreviousLink } from "./Layout/Header/PreviousLink";
|
18
23
|
export { Link } from "./Link";
|
19
24
|
export { List } from "./List";
|
20
25
|
export { ClickItem, ClickList, createClickItemParent } from "./List/ClickList";
|
@@ -22,8 +27,8 @@ export { ContentItemDuo } from "./List/ContentItemDuo";
|
|
22
27
|
export { ContentItemMono, ContentItemMonoSize } from "./List/ContentItemMono";
|
23
28
|
export { ContentTabItem, ContentTabList } from "./List/ContentTabList";
|
24
29
|
export { Loader } from "./Loader";
|
25
|
-
export { Modal } from "./
|
26
|
-
export type {
|
30
|
+
export { Modal, ModalCore, ModalCoreBody, ModalCoreFooter, ModalCoreHeader, } from "./Modal";
|
31
|
+
export type { ModalCoreBodyProps, ModalCoreFooterProps, ModalCoreHeaderProps, ModalCoreProps, ModalProps, } from "./Modal";
|
27
32
|
export { Pagination } from "./Pagination/Pagination";
|
28
33
|
export { Skeleton } from "./Skeleton/Skeleton";
|
29
34
|
export { SkeletonList } from "./SkeletonList/SkeletonList";
|
@@ -32,4 +37,3 @@ export { Svg } from "./Svg";
|
|
32
37
|
export { TabsClient as Tabs, Direction as TabsDirection } from "./Tabs/Tabs";
|
33
38
|
export { Tag } from "./Tag";
|
34
39
|
export { Title, TitleSize, type TitleLevel } from "./Title";
|
35
|
-
export { DebugGrid } from "./Grid/DebugGrid";
|
package/dist/index.js
CHANGED
@@ -5,15 +5,20 @@ export { AccordionCore } from "./AccordionCore";
|
|
5
5
|
export { Alert } from "./Alert/Alert";
|
6
6
|
export { ButtonClient as Button, Variants as ButtonVariants, } from "./Button/Button";
|
7
7
|
export { Card } from "./Card";
|
8
|
+
export { Divider } from "./Divider";
|
8
9
|
export { Checkbox, CheckboxSelect } from "./Form/Checkbox";
|
9
10
|
export { FileUpload } from "./Form/FileUpload";
|
11
|
+
export { InputError } from "./Form/InputError";
|
10
12
|
export { Radio, RadioSelect } from "./Form/Radio";
|
11
13
|
export { Select } from "./Form/Select";
|
12
14
|
export { Text as TextInput } from "./Form/Text";
|
13
15
|
export { TextArea } from "./Form/TextArea";
|
16
|
+
export { DebugGrid } from "./Grid/DebugGrid";
|
14
17
|
export { IconBg } from "./IconBg";
|
15
18
|
export { Footer } from "./Layout/Footer/Footer";
|
16
19
|
export { Header } from "./Layout/Header";
|
20
|
+
export { NavBar } from "./Layout/Header/NavBar/NavBar";
|
21
|
+
export { PreviousLink } from "./Layout/Header/PreviousLink";
|
17
22
|
export { Link } from "./Link";
|
18
23
|
export { List } from "./List";
|
19
24
|
export { ClickItem, ClickList, createClickItemParent } from "./List/ClickList";
|
@@ -21,7 +26,7 @@ export { ContentItemDuo } from "./List/ContentItemDuo";
|
|
21
26
|
export { ContentItemMono, ContentItemMonoSize } from "./List/ContentItemMono";
|
22
27
|
export { ContentTabItem, ContentTabList } from "./List/ContentTabList";
|
23
28
|
export { Loader } from "./Loader";
|
24
|
-
export { Modal } from "./
|
29
|
+
export { Modal, ModalCore, ModalCoreBody, ModalCoreFooter, ModalCoreHeader, } from "./Modal";
|
25
30
|
export { Pagination } from "./Pagination/Pagination";
|
26
31
|
export { Skeleton } from "./Skeleton/Skeleton";
|
27
32
|
export { SkeletonList } from "./SkeletonList/SkeletonList";
|
@@ -30,4 +35,3 @@ export { Svg } from "./Svg";
|
|
30
35
|
export { TabsClient as Tabs, Direction as TabsDirection } from "./Tabs/Tabs";
|
31
36
|
export { Tag } from "./Tag";
|
32
37
|
export { Title, TitleSize } from "./Title";
|
33
|
-
export { DebugGrid } from "./Grid/DebugGrid";
|
@@ -1 +1 @@
|
|
1
|
-
export declare const getComponentClassName: (
|
1
|
+
export declare const getComponentClassName: (defaultClassName: string, className?: string, classModifier?: string) => string;
|
@@ -1,9 +1,9 @@
|
|
1
1
|
import classNames from "classnames";
|
2
|
-
const getLastClassName = (
|
3
|
-
if (!
|
2
|
+
const getLastClassName = (defaultClassName) => {
|
3
|
+
if (!defaultClassName) {
|
4
4
|
return null;
|
5
5
|
}
|
6
|
-
return
|
6
|
+
return defaultClassName.split(" ").filter(Boolean).at(-1);
|
7
7
|
};
|
8
8
|
const listClassModifier = (classModifier) => {
|
9
9
|
if (!classModifier) {
|
@@ -11,17 +11,16 @@ const listClassModifier = (classModifier) => {
|
|
11
11
|
}
|
12
12
|
return classModifier.split(" ");
|
13
13
|
};
|
14
|
-
export const getComponentClassName = (className, classModifier
|
15
|
-
|
16
|
-
if (!classNameToUse) {
|
14
|
+
export const getComponentClassName = (defaultClassName, className, classModifier) => {
|
15
|
+
if (!defaultClassName) {
|
17
16
|
return "";
|
18
17
|
}
|
19
|
-
const classWithoutModifier = getLastClassName(
|
18
|
+
const classWithoutModifier = getLastClassName(defaultClassName);
|
20
19
|
const modifiers = listClassModifier(classModifier);
|
21
20
|
const modifiersObject = modifiers
|
22
21
|
.filter((it) => /\S/.test(it))
|
23
22
|
.map((it) => {
|
24
23
|
return `${classWithoutModifier}--${it}`;
|
25
24
|
});
|
26
|
-
return classNames(
|
25
|
+
return classNames(defaultClassName, className, modifiersObject);
|
27
26
|
};
|
package/package.json
CHANGED
@@ -1,7 +1,9 @@
|
|
1
1
|
{
|
2
2
|
"name": "@axa-fr/design-system-look-and-feel-react",
|
3
|
-
"version": "1.0.5-ci.
|
3
|
+
"version": "1.0.5-ci.86",
|
4
4
|
"description": "",
|
5
|
+
"main": "./dist/index.js",
|
6
|
+
"types": "./dist/index.d.ts",
|
5
7
|
"exports": {
|
6
8
|
".": {
|
7
9
|
"import": "./dist/index.js",
|
@@ -19,18 +21,15 @@
|
|
19
21
|
"prebuild": "rimraf dist",
|
20
22
|
"build": "tsc -p tsconfig.build.json",
|
21
23
|
"postbuild": "copyfiles --up 1 \"src/assets/svg/*.svg\" ./dist/",
|
22
|
-
"
|
23
|
-
"build:storybook": "storybook build",
|
24
|
-
"build-storybook": "storybook build",
|
24
|
+
"dev": "tsc -p tsconfig.build.json --watch",
|
25
25
|
"eslint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
|
26
26
|
"eslint:fix": "eslint src --ext js,jsx,ts,tsx --fix",
|
27
27
|
"prettier": "prettier \"src/**/*.!(js|jsx|ts|tsx|svg)\" --check",
|
28
28
|
"prettier:fix": "prettier \"src/**/*.!(js|jsx|ts|tsx|svg)\" --write",
|
29
|
-
"
|
29
|
+
"check-types": "tsc --noEmit",
|
30
30
|
"test": "vitest",
|
31
31
|
"test:ui": "vitest --ui",
|
32
|
-
"test:ci": "vitest run --coverage"
|
33
|
-
"chromatic": "npx chromatic"
|
32
|
+
"test:ci": "vitest run --coverage"
|
34
33
|
},
|
35
34
|
"repository": {
|
36
35
|
"type": "git",
|
@@ -45,7 +44,7 @@
|
|
45
44
|
},
|
46
45
|
"homepage": "https://github.com/AxaFrance/design-system#readme",
|
47
46
|
"peerDependencies": {
|
48
|
-
"@axa-fr/design-system-look-and-feel-css": "1.0.5-ci.
|
47
|
+
"@axa-fr/design-system-look-and-feel-css": "1.0.5-ci.86",
|
49
48
|
"@material-symbols/svg-400": ">= 0.19.0",
|
50
49
|
"react": ">= 18"
|
51
50
|
},
|
@@ -57,64 +56,9 @@
|
|
57
56
|
"dependencies": {
|
58
57
|
"@fontsource/source-sans-pro": "^5.0.8",
|
59
58
|
"@tanem/svg-injector": "^10.1.68",
|
60
|
-
"@types/react-dom": "^18.2.24",
|
61
59
|
"classnames": "^2.5.1",
|
62
60
|
"dompurify": "^3.1.5",
|
63
|
-
"rc-slider": "^11.1.7"
|
64
|
-
"react-select": "^5.9.0"
|
65
|
-
},
|
66
|
-
"devDependencies": {
|
67
|
-
"@chromatic-com/storybook": "^1.9.0",
|
68
|
-
"@material-symbols/svg-400": "*",
|
69
|
-
"@storybook/addon-docs": "^8.3.5",
|
70
|
-
"@storybook/addon-essentials": "^8.3.5",
|
71
|
-
"@storybook/addon-interactions": "^8.3.5",
|
72
|
-
"@storybook/addon-links": "^8.3.5",
|
73
|
-
"@storybook/addon-mdx-gfm": "^8.3.5",
|
74
|
-
"@storybook/addon-onboarding": "^8.3.5",
|
75
|
-
"@storybook/blocks": "^8.3.5",
|
76
|
-
"@storybook/manager-api": "^8.3.5",
|
77
|
-
"@storybook/react": "^8.3.5",
|
78
|
-
"@storybook/react-vite": "^8.3.5",
|
79
|
-
"@storybook/test": "^8.3.5",
|
80
|
-
"@storybook/theming": "^8.3.5",
|
81
|
-
"@testing-library/dom": "^10.1.0",
|
82
|
-
"@testing-library/jest-dom": "^6.5.0",
|
83
|
-
"@testing-library/react": "^15.0.7",
|
84
|
-
"@testing-library/user-event": "^14.5.2",
|
85
|
-
"@types/dompurify": "^3.0.5",
|
86
|
-
"@types/jest": "^29.5.12",
|
87
|
-
"@types/jest-axe": "^3.5.9",
|
88
|
-
"@types/node": "^20.14.9",
|
89
|
-
"@types/react": "^18.3.2",
|
90
|
-
"@typescript-eslint/eslint-plugin": "^8.17.0",
|
91
|
-
"@typescript-eslint/parser": "^8.17.0",
|
92
|
-
"@vitejs/plugin-react": "^4.3.1",
|
93
|
-
"@vitest/coverage-v8": "^2.0.5",
|
94
|
-
"@vitest/ui": "^2.1.2",
|
95
|
-
"chromatic": "^11.12.0",
|
96
|
-
"copyfiles": "^2.4.1",
|
97
|
-
"eslint": "^8.57.0",
|
98
|
-
"eslint-config-airbnb": "^19.0.4",
|
99
|
-
"eslint-config-prettier": "^9.1.0",
|
100
|
-
"eslint-import-resolver-typescript": "^3.6.1",
|
101
|
-
"eslint-plugin-import": "^2.29.1",
|
102
|
-
"eslint-plugin-jsx-a11y": "^6.8.0",
|
103
|
-
"eslint-plugin-prettier": "^5.1.3",
|
104
|
-
"eslint-plugin-react": "^7.36.1",
|
105
|
-
"eslint-plugin-react-hooks": "^4.6.0",
|
106
|
-
"eslint-plugin-storybook": "^0.9.0",
|
107
|
-
"jest-axe": "^8.0.0",
|
108
|
-
"jsdom": "^25.0.1",
|
109
|
-
"prettier": "^3.3.3",
|
110
|
-
"prop-types": "^15.8.1",
|
111
|
-
"react": "^18.3.1",
|
112
|
-
"react-dom": "^18.2.0",
|
113
|
-
"rimraf": "^6.0.1",
|
114
|
-
"storybook": "^8.3.5",
|
115
|
-
"tsc-files": "^1.1.4",
|
116
|
-
"typescript": "^5.6.3",
|
117
|
-
"vitest": "^2.0.5"
|
61
|
+
"rc-slider": "^11.1.7"
|
118
62
|
},
|
119
63
|
"lint-staged": {
|
120
64
|
"*.(js|jsx|ts|tsx)": "eslint --fix",
|
@@ -122,7 +66,18 @@
|
|
122
66
|
"*.mdx": "prettier --write"
|
123
67
|
},
|
124
68
|
"volta": {
|
125
|
-
"
|
126
|
-
|
69
|
+
"extends": "../../../package.json"
|
70
|
+
},
|
71
|
+
"devDependencies": {
|
72
|
+
"@testing-library/dom": "^10.4.0",
|
73
|
+
"@testing-library/jest-dom": "^6.6.3",
|
74
|
+
"@testing-library/react": "^16.2.0",
|
75
|
+
"@testing-library/user-event": "^14.6.1",
|
76
|
+
"@types/jest": "^29.5.14",
|
77
|
+
"@types/jest-axe": "^3.5.9",
|
78
|
+
"@vitest/coverage-v8": "^3.0.7",
|
79
|
+
"@vitest/ui": "^3.0.7",
|
80
|
+
"jest-axe": "^9.0.0",
|
81
|
+
"vitest": "^3.0.7"
|
127
82
|
}
|
128
83
|
}
|
@@ -1,8 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import { useMemo } from "react";
|
3
|
-
import { components } from "react-select";
|
4
|
-
const CustomOption = ({ getValue, ...otherProps }) => {
|
5
|
-
const value = useMemo(() => getValue(), [getValue]);
|
6
|
-
return (_jsx(components.Option, { ...otherProps, getValue: getValue, "data-value": value }));
|
7
|
-
};
|
8
|
-
export { CustomOption };
|
@@ -1,11 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import arrowDropDown from "@material-symbols/svg-400/outlined/arrow_drop_down.svg";
|
3
|
-
import arrowDropUp from "@material-symbols/svg-400/outlined/arrow_drop_up.svg";
|
4
|
-
import { components } from "react-select";
|
5
|
-
import classNames from "classnames";
|
6
|
-
import { Svg } from "../../Svg";
|
7
|
-
const DropdownIndicator = (props) => {
|
8
|
-
const { selectProps: { menuIsOpen, isDisabled }, } = props;
|
9
|
-
return (_jsx(components.DropdownIndicator, { ...props, children: _jsx(Svg, { src: menuIsOpen ? arrowDropUp : arrowDropDown, className: classNames(isDisabled && "af-form__input-select-container-icon-disabled") }) }));
|
10
|
-
};
|
11
|
-
export { DropdownIndicator };
|
@@ -1,2 +0,0 @@
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
-
export const Card = ({ title }) => (_jsxs("div", { className: "box-card", children: [_jsx("h3", { children: title }), _jsx("p", { children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint voluptatibus dolor ratione, ab natus reprehenderit itaque corporis officia ad necessitatibus enim et voluptatem reiciendis rem optio laudantium iure esse vero." })] }));
|
@@ -1 +0,0 @@
|
|
1
|
-
export declare const Contacts: () => import("react/jsx-runtime").JSX.Element[];
|
@@ -1,9 +0,0 @@
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
-
import callIcon from "@material-symbols/svg-400/outlined/call-fill.svg";
|
3
|
-
import mailIcon from "@material-symbols/svg-400/outlined/mail-fill.svg";
|
4
|
-
import { List, Svg, ContentItemMono, ClickItem, createClickItemParent, } from "../..";
|
5
|
-
export const Contacts = () => [...Array(6).keys()].map((_, index) => (_jsxs(List, { classModifier: "first-separator-full-width", children: [_jsx(ContentItemMono, { secondaryText: "agent g\u00E9n\u00E9ral", tertiaryText: "Doe", children: "John Doe" }), index % 3 === 0 && (_jsx(ClickItem, { icon: _jsx(Svg, { src: callIcon, "aria-hidden": true }), classModifier: "small", parentClickComponent: createClickItemParent("a", {
|
6
|
-
href: `tel:0601010101`,
|
7
|
-
}), children: "06 01 01 01 01" })), _jsx(ClickItem, { icon: _jsx(Svg, { src: mailIcon, "aria-hidden": true }), classModifier: "small", parentClickComponent: createClickItemParent("a", {
|
8
|
-
href: `mailto:john.doe@axa.fr`,
|
9
|
-
}), children: "john.doe@axa.fr" })] }, "John Doe-agent")));
|
@@ -1 +0,0 @@
|
|
1
|
-
export declare const MainTitle: () => import("react/jsx-runtime").JSX.Element;
|
@@ -1,4 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import article from "@material-symbols/svg-400/outlined/article-fill.svg";
|
3
|
-
import { Svg, Title } from "../..";
|
4
|
-
export const MainTitle = () => (_jsx(Title, { icon: _jsx(Svg, { src: article, "aria-hidden": true }), firstSubtitle: "Sous Titre 1", secondSubtitle: "Sous Titre 2", children: "Titre de la page" }));
|
@@ -1 +0,0 @@
|
|
1
|
-
export declare const MyFooter: () => import("react/jsx-runtime").JSX.Element;
|
@@ -1,31 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import { Footer } from "../../Layout/Footer";
|
3
|
-
export const MyFooter = () => (_jsx(Footer, { links: [
|
4
|
-
{
|
5
|
-
link: "https://www.axa.fr/qui-sommes-nous.html",
|
6
|
-
text: "À propos",
|
7
|
-
},
|
8
|
-
{
|
9
|
-
link: "https://www.axa.fr/configuration-securite/mentions-legales.html",
|
10
|
-
text: "Mentions légales",
|
11
|
-
},
|
12
|
-
{
|
13
|
-
link: "https://www.axa.fr/configuration-securite/donnees-personnelles.html",
|
14
|
-
text: "Données personnelles",
|
15
|
-
},
|
16
|
-
{
|
17
|
-
link: "https://www.axa.fr/configuration-securite/politique-cookies.html",
|
18
|
-
text: "Cookies",
|
19
|
-
},
|
20
|
-
], socialMedias: [
|
21
|
-
{ icon: "facebook", link: "https://www.facebook.com/axafrance" },
|
22
|
-
{ icon: "twitter", link: "https://twitter.com/AXAFrance" },
|
23
|
-
{
|
24
|
-
icon: "youtube",
|
25
|
-
link: "https://www.youtube.com/user/AXAFranceChaine",
|
26
|
-
},
|
27
|
-
{
|
28
|
-
icon: "linkedin",
|
29
|
-
link: "https://www.linkedin.com/company/axa-france/",
|
30
|
-
},
|
31
|
-
], copyright: `@AXA ${new Date().getFullYear()} - Tous droits réservés`, expandLinkText: "Liens utiles" }));
|
@@ -1 +0,0 @@
|
|
1
|
-
export declare const MyHeader: () => import("react/jsx-runtime").JSX.Element;
|
@@ -1,9 +0,0 @@
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
-
import person from "@material-symbols/svg-400/outlined/person-fill.svg";
|
3
|
-
import lock from "@material-symbols/svg-400/outlined/lock-fill.svg";
|
4
|
-
import { Header } from "../../Layout/Header";
|
5
|
-
import { Button, ButtonVariants, Svg } from "../..";
|
6
|
-
export const MyHeader = () => (_jsxs(Header, { defaultActiveLink: 0, rightItem: [
|
7
|
-
_jsx(Button, { iconLeft: _jsx(Svg, { src: lock, fill: "#00008f" }), variant: ButtonVariants.secondary, children: "Espace Banque" }, "Banking Space Button"),
|
8
|
-
_jsx(Button, { iconLeft: _jsx(Svg, { src: person, fill: "#00008f" }), variant: ButtonVariants.ghost, children: "Mon Profil" }, "Profile Button"),
|
9
|
-
], children: [_jsx("a", { className: "af-navbar-item__link", href: "/mes-contrats", children: "MES CONTRATS" }, "MES CONTRATS link"), _jsx("a", { className: "af-navbar-item__link", href: "/mes-avantages", children: "MES AVANTAGES" }, "MES AVANTAGES link"), _jsx("a", { className: "af-navbar-item__link", href: "/mes-documents", children: "MES DOCUMENTS" }, "MES DOCUMENTS link")] }));
|
@@ -1 +0,0 @@
|
|
1
|
-
export declare const MyList: () => import("react/jsx-runtime").JSX.Element;
|
@@ -1,3 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import { ContentItemDuo, List } from "../..";
|
3
|
-
export const MyList = () => (_jsx(List, { classModifier: "extra-padding", children: [...Array(6).keys()].map(() => (_jsx(ContentItemDuo, { isVertical: false, isShowingDoneIcon: true, isShowingCloseIcon: false, buttonText: "En savoir plus", classModifier: "large", label: "Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quas, suscipit sint! Reiciendis, eos? Eveniet, aut qui. Autem reprehenderit", value: "R\u00E9ponse" }, crypto.randomUUID()))) }));
|
@@ -1 +0,0 @@
|
|
1
|
-
export declare const Offsets: () => import("react/jsx-runtime").JSX.Element[][];
|
@@ -1,7 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
const MAX_OFFSET = 12;
|
3
|
-
export const Offsets = () => [...Array(MAX_OFFSET).keys()].map((start) => {
|
4
|
-
const offset = start + 1;
|
5
|
-
const maxCols = MAX_OFFSET - offset + 1;
|
6
|
-
return [...Array(maxCols).keys()].map((col) => (_jsx("div", { className: `box box-offset box-offset-${offset}-${col + 1}` }, crypto.randomUUID())));
|
7
|
-
});
|
@@ -1 +0,0 @@
|
|
1
|
-
export declare const render: () => import("react/jsx-runtime").JSX.Element;
|
@@ -1,30 +0,0 @@
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
2
|
-
import { MyFooter } from "./components/MyFooter";
|
3
|
-
import { MyHeader } from "./components/MyHeader";
|
4
|
-
import { Button, ButtonVariants, TextInput, Title } from "..";
|
5
|
-
import { DebugGrid } from "./DebugGrid";
|
6
|
-
function capitalizeFirstLetter(val) {
|
7
|
-
return String(val).charAt(0).toUpperCase() + String(val).slice(1);
|
8
|
-
}
|
9
|
-
const setAttributesFields = (value, label, type = "text") => ({
|
10
|
-
value,
|
11
|
-
type,
|
12
|
-
name: label,
|
13
|
-
id: label,
|
14
|
-
disabled: false,
|
15
|
-
required: true,
|
16
|
-
label: `${capitalizeFirstLetter(label)} de la personne`,
|
17
|
-
placeholder: `Votre ${label}`,
|
18
|
-
description: `Saisissez un ${label}`,
|
19
|
-
error: `Un ${label} est obligatoire`,
|
20
|
-
className: "subgrid af-form__input-text",
|
21
|
-
helper: "Do you need help ?",
|
22
|
-
buttonLabel: "En savoir plus",
|
23
|
-
});
|
24
|
-
const FIELDS = [
|
25
|
-
setAttributesFields("Gomez", "nom"),
|
26
|
-
setAttributesFields("Samuel", "prénom"),
|
27
|
-
setAttributesFields("samuel.gomez@axa.fr", "email", "email"),
|
28
|
-
setAttributesFields("0601020304", "téléphone"),
|
29
|
-
];
|
30
|
-
export const render = () => (_jsxs(_Fragment, { children: [_jsx(DebugGrid, { isCheckedByDefault: true }), _jsx(MyHeader, {}), _jsx("main", { className: "grid example-form", children: _jsxs("form", { className: "form", children: [_jsxs("div", { className: "form__header subgrid", children: [_jsx(Title, { children: "Mon formulaire" }), _jsx("p", { children: "Les mentions avec * sont obligatoires" })] }), _jsx("div", { className: "form__fields subgrid", children: FIELDS.map((field) => (_jsx(TextInput, { ...field, classModifier: field.error ? "error" : "" }, field.id))) }), _jsxs("div", { className: "form__actions subgrid", children: [_jsx(Button, { variant: ButtonVariants.secondary, children: "Pr\u00E9c\u00E9dent" }), _jsx(Button, { variant: ButtonVariants.primary, children: "Valider" })] })] }) }), _jsx(MyFooter, {})] }));
|
@@ -1 +0,0 @@
|
|
1
|
-
export declare const render: () => import("react/jsx-runtime").JSX.Element;
|
@@ -1,9 +0,0 @@
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
2
|
-
import { Title, TitleSize } from "../Title";
|
3
|
-
import { Contacts } from "./components/Contacts";
|
4
|
-
import { MainTitle } from "./components/MainTitle";
|
5
|
-
import { MyFooter } from "./components/MyFooter";
|
6
|
-
import { MyHeader } from "./components/MyHeader";
|
7
|
-
import { MyList } from "./components/MyList";
|
8
|
-
import { DebugGrid } from "./DebugGrid";
|
9
|
-
export const render = () => (_jsxs(_Fragment, { children: [_jsx(DebugGrid, { isCheckedByDefault: true }), _jsx(MyHeader, {}), _jsxs("main", { className: "grid example-page", children: [_jsx(MainTitle, {}), _jsxs("div", { className: "container-part", children: [_jsxs("div", { className: "subgrid af-left-part", children: [_jsx(Title, { size: TitleSize.L, children: "My list title" }), _jsxs("div", { className: "subgrid af-list-part", children: [_jsx(MyList, {}), _jsx(MyList, {})] })] }), _jsxs("div", { className: "subgrid af-right-part", children: [_jsx(Title, { size: TitleSize.L, children: "Contacts" }), _jsx("div", { className: "af-contacts-part subgrid", children: _jsx(Contacts, {}) })] })] })] }), _jsx(MyFooter, {})] }));
|
@@ -1 +0,0 @@
|
|
1
|
-
export declare const render: () => import("react/jsx-runtime").JSX.Element;
|
@@ -1,5 +0,0 @@
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
2
|
-
import { DebugGrid } from "./DebugGrid";
|
3
|
-
import { Card } from "./components/Card";
|
4
|
-
import { Offsets } from "./components/Offsets";
|
5
|
-
export const render = () => (_jsxs(_Fragment, { children: [_jsx(DebugGrid, { isCheckedByDefault: true }), _jsxs("main", { className: "grid", children: [_jsx("h1", { className: "box", children: "Bonjour, Samuel G." }), _jsxs("div", { className: "box box-example-1 subgrid", children: [_jsx("h2", { className: "box", children: "Mes contrats" }), [...Array(6).keys()].map((_, index) => (_jsx(Card, { title: `contrat-${index + 1}` }, crypto.randomUUID())))] }), _jsxs("div", { className: "box box-example-2 subgrid", children: [_jsx("h2", { className: "box", children: "Profil" }), _jsx(Card, { title: "Mes coordonn\u00E9es" })] }), _jsxs("div", { className: "box box-example-3 subgrid", children: [_jsx("h2", { className: "box", children: "Mes Infos" }), _jsx("div", { className: "box box-half" }), _jsx("div", { className: "box box-half" }), _jsx("div", { className: "box box-half" }), _jsx("div", { className: "box box-half" })] }), _jsxs("div", { className: "box box-custom", children: [_jsx("h2", { className: "box", children: "Custom" }), _jsx("div", { className: "box box-content1", children: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos, dolore. Ipsum commodi molestiae aut consectetur corrupti sed quos iste, nemo porro dicta necessitatibus aliquam! Ratione magni quae necessitatibus similique eos! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quos, dolore. Ipsum commodi molestiae aut consectetur corrupti sed quos iste, nemo porro dicta necessitatibus aliquam! Ratione magni quae necessitatibus similique eos!" }), _jsx("div", { className: "box box-content2", children: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nam, aliquid itaque magni sint natus earum praesentium minima. Laborum enim error animi similique delectus vel. Ipsa deleniti ut ipsam quis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nam, aliquid itaque magni sint natus earum praesentium minima. Laborum enim error animi similique delectus vel. Ipsa deleniti ut ipsam quis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nam, aliquid itaque magni sint natus earum praesentium minima. Laborum enim error animi similique delectus vel. Ipsa deleniti ut ipsam quis." }), _jsx("footer", { children: "@copyright" })] }), _jsx(Offsets, {})] })] }));
|
@@ -1,4 +0,0 @@
|
|
1
|
-
import "@axa-fr/design-system-look-and-feel-css/dist/Modal/Modal.scss";
|
2
|
-
import { PropsWithChildren } from "react";
|
3
|
-
import { ModalProps } from "./type";
|
4
|
-
export declare const ModalContainer: ({ open, setIsOpen, hasCloseButton, onClose, onClickOutside, children, title, subtitle, iconTitle, actions, fullWidthButtons, }: PropsWithChildren<ModalProps>) => import("react").ReactPortal;
|