Skip to content

Commit bb4ce6e

Browse files
Abderrahman FAWZY DEVAbderrahman FAWZY DEV
Abderrahman FAWZY DEV
authored and
Abderrahman FAWZY DEV
committed
feat(apollo,look&feel): évolution du composant modal
1 parent c101ad7 commit bb4ce6e

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+1675
-587
lines changed

‎apps/apollo-stories/src/components/Modal/Modal.mdx

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
import { Canvas, Controls, Meta } from "@storybook/addon-docs";
2+
import * as ModalStories from "./Modal.stories.tsx";
3+
import * as ModalCoreStories from "./ModalCore.stories.tsx";
4+
5+
<Meta of={ModalStories} name="Docs" />
6+
7+
# Modal
8+
9+
1. [ModalCore](#modalcore)
10+
2. [Modal](#modal)
11+
12+
The ModalCore is the component to use if you want to fully configure your modal.
13+
14+
With the `ModalCoreHeader` you can configure the header of the modal.
15+
16+
With the `ModalCoreBody` you can configure the body of the modal.
17+
18+
And with the `ModalCoreFooter` you can configure the footer of the modal.
19+
20+
You need to pass a `ref` to the `Modal` component in order to call the `showModal` function when you want to open the modal and the `close` function for closing it.
21+
22+
## ModalCore
23+
24+
Example of usage of ModalCore component :
25+
26+
```tsx
27+
import { useRef } from "react";
28+
29+
export const YourComponent = () => {
30+
const ref = useRef<HTMLDialogElement>(null);
31+
32+
return (
33+
<>
34+
<ButtonClient onClick={() => ref.current?.showModal()}>
35+
Open the modal
36+
</ButtonClient>
37+
38+
<ModalCore
39+
onCancel={() => {}}
40+
onClose={() => {}}
41+
onSubmit={() => {}}
42+
title="Modal title"
43+
ref={ref}
44+
>
45+
<ModalCoreHeader
46+
headingProps={{
47+
children: "Modal title",
48+
}}
49+
iconProps={{ src: iconSrc }}
50+
onClose={() => {}}
51+
/>
52+
<ModalCoreBody>
53+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
54+
consectetur urna a tellus semper, id elementum ligula fermentum. In
55+
semper quis mi eu commodo. Vivamus in metus eros. Sed ut pellentesque
56+
purus. Maecenas congue ornare massa quis porttitor. Nullam ut diam
57+
dapibus, consequat libero eget, faucibus nibh. Etiam imperdiet metus
58+
at nulla fermentum semper. In ipsum urna, tempus vel lorem vel,
59+
venenatis malesuada dui. Cras massa ipsum, accumsan et scelerisque ut,
60+
vulputate at elit.
61+
</ModalCoreBody>
62+
<ModalCoreFooter
63+
primaryButtonProps={{
64+
children: "Valider",
65+
}}
66+
secondaryButtonProps={{
67+
children: "Annuler",
68+
}}
69+
/>
70+
</ModalCore>
71+
</>
72+
);
73+
};
74+
```
75+
76+
<Canvas of={ModalCoreStories.DefaultModalCore} />
77+
78+
<Controls of={ModalCoreStories.DefaultModalCore} />
79+
80+
## Modal
81+
82+
Example of usage of Modal component :
83+
84+
```tsx
85+
import { useRef } from "react";
86+
87+
export const YourComponent = () => {
88+
const ref = useRef<HTMLDialogElement>(null);
89+
90+
return (
91+
<>
92+
<button type="button" onClick={() => ref.current?.showModal()}>
93+
Open modal
94+
</button>
95+
96+
<Modal
97+
ref={ref}
98+
headingProps={{
99+
firstSubtitle: "Modal subtitle",
100+
}}
101+
icon={iconSrc}
102+
iconProps={{
103+
variant: "primary",
104+
}}
105+
onCancel={() => {}}
106+
onClose={() => {}}
107+
primaryButtonProps={{
108+
children: "Submit",
109+
onClick: () => {},
110+
}}
111+
secondaryButtonProps={{
112+
children: "Cancel",
113+
onClick: () => {},
114+
}}
115+
title="Modal title"
116+
>
117+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
118+
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
119+
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
120+
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
121+
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
122+
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
123+
mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla
124+
gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros
125+
bibendum elit, nec luctus magna felis sollicitudin mauris
126+
</Modal>
127+
</>
128+
);
129+
};
130+
```
131+
132+
<Canvas of={ModalStories.Playground} />
133+
134+
<Controls of={ModalStories.Playground} />

‎apps/apollo-stories/src/components/Modal/Modal.stories.tsx

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import "./Modal.story.scss";
2+
3+
import { Button, Modal } from "@axa-fr/design-system-apollo-react";
4+
import bank from "@material-symbols/svg-700/rounded/account_balance.svg";
5+
import { action } from "@storybook/addon-actions";
6+
import type { Meta, StoryObj } from "@storybook/react";
7+
import { fn } from "@storybook/test";
8+
import { ComponentPropsWithRef, useLayoutEffect, useRef } from "react";
9+
10+
const meta: Meta<typeof Modal> = {
11+
title: "Components/Modal",
12+
component: Modal,
13+
parameters: {
14+
layout: "fullscreen",
15+
viewport: { defaultViewport: "desktop" },
16+
},
17+
args: {
18+
onClose: fn(),
19+
onCancel: fn(),
20+
},
21+
};
22+
export default meta;
23+
24+
type ModalStory = StoryObj<ComponentPropsWithRef<typeof Modal>>;
25+
26+
export const ModalContent: ModalStory = {
27+
name: "Modal",
28+
decorators: [
29+
(Story, { args: { open, ...args } }) => {
30+
const modalRef = useRef<HTMLDialogElement>(null);
31+
32+
useLayoutEffect(() => {
33+
if (open) {
34+
modalRef.current?.showModal();
35+
return;
36+
}
37+
38+
modalRef.current?.close();
39+
}, [open]);
40+
41+
return <Story args={{ ...args, ref: modalRef }} />;
42+
},
43+
],
44+
args: {
45+
open: true,
46+
title: "Modal title",
47+
headingProps: {
48+
firstSubtitle: "Modal subtitle",
49+
},
50+
icon: bank,
51+
iconProps: { variant: "primary" },
52+
children:
53+
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur pretium tincidunt lacus. Nulla gravida orci a odio. Nullam varius, turpis et commodo pharetra, est eros bibendum elit, nec luctus magna felis sollicitudin mauris",
54+
secondaryButtonProps: {
55+
children: "Cancel",
56+
onClick: action("[Cancel] onClick"),
57+
},
58+
primaryButtonProps: {
59+
children: "Submit",
60+
onClick: action("[Submit] onClick"),
61+
},
62+
},
63+
};
64+
65+
export const Playground: ModalStory = {
66+
decorators: [
67+
(Story, { args: { secondaryButtonProps = {}, ...args } }) => {
68+
const ref = useRef<HTMLDialogElement>(null);
69+
70+
const onClose: React.ReactEventHandler<HTMLDialogElement> = (e) => {
71+
args.onClose?.(e);
72+
ref.current?.close();
73+
};
74+
75+
const onClickSecondaryButton: React.MouseEventHandler<
76+
HTMLButtonElement
77+
> = (e) => {
78+
secondaryButtonProps.onClick?.(e);
79+
ref.current?.close();
80+
};
81+
82+
return (
83+
<>
84+
<div className="button-wrapper">
85+
<Button onClick={() => ref.current?.showModal()}>
86+
Open the Modal
87+
</Button>
88+
</div>
89+
<Story
90+
args={{
91+
...args,
92+
ref,
93+
onClose,
94+
secondaryButtonProps: {
95+
...secondaryButtonProps,
96+
onClick: onClickSecondaryButton,
97+
},
98+
}}
99+
/>
100+
</>
101+
);
102+
},
103+
],
104+
args: { ...ModalContent.args, open: undefined },
105+
};
106+
107+
export const MobilePlayground: ModalStory = {
108+
...Playground,
109+
parameters: {
110+
viewport: { defaultViewport: "mobile1" },
111+
},
112+
};

‎apps/apollo-stories/src/components/Modal/Modal.story.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.paragraph {
2+
margin: 0;
3+
}
4+
5+
.button-wrapper {
6+
padding: 1rem;
7+
}

0 commit comments

Comments
 (0)