From c2404f219b380d124e55f2441dd3d4a1a34c1649 Mon Sep 17 00:00:00 2001 From: Martin Stievenart Date: Thu, 10 Aug 2023 10:48:24 +0200 Subject: [PATCH] refactor(accessibility): use dialog element instead of reactModal --- .storybook/main.js | 3 +- .storybook/preview.js | 2 +- package-lock.json | 61 +-------- packages/Modal/boolean/README.md | 51 +++++--- .../boolean/src/ModalBoolean.stories.mdx | 97 +++++++++++++++ .../boolean/src/ModalBoolean.stories.tsx | 40 ------ packages/Modal/boolean/src/ModalBoolean.tsx | 116 ++++++++--------- .../src/__tests__/ModalBoolean.spec.tsx | 64 +++++----- .../__snapshots__/ModalBoolean.spec.tsx.snap | 81 ------------ packages/Modal/boolean/src/index.ts | 2 + packages/Modal/default/README.md | 117 ++++++------------ packages/Modal/default/package.json | 4 +- packages/Modal/default/src/Body.tsx | 7 +- packages/Modal/default/src/Div.tsx | 7 -- packages/Modal/default/src/Footer.tsx | 7 +- packages/Modal/default/src/Header.tsx | 46 +++++-- packages/Modal/default/src/HeaderBase.tsx | 7 +- packages/Modal/default/src/HeaderCore.tsx | 37 ------ packages/Modal/default/src/Modal.tsx | 60 ++++++--- packages/Modal/default/src/ModalCore.tsx | 45 ------- .../default/src/ModalDefault.stories.mdx | 108 ++++++++++++++++ .../default/src/ModalDefault.stories.tsx | 99 --------------- .../Modal/default/src/__tests__/Body.spec.tsx | 4 +- .../Modal/default/src/__tests__/Div.spec.tsx | 10 -- .../default/src/__tests__/Footer.spec.tsx | 4 +- .../default/src/__tests__/Header.spec.tsx | 12 +- .../default/src/__tests__/HeaderBase.spec.tsx | 4 +- .../default/src/__tests__/HeaderCore.spec.tsx | 20 --- .../default/src/__tests__/Modal.spec.tsx | 108 ++++++++++++---- .../default/src/__tests__/ModalCore.spec.tsx | 48 ------- .../__snapshots__/Body.spec.tsx.snap | 11 -- .../__tests__/__snapshots__/Div.spec.tsx.snap | 9 -- .../__snapshots__/Footer.spec.tsx.snap | 11 -- .../__snapshots__/Header.spec.tsx.snap | 25 ---- .../__snapshots__/HeaderBase.spec.tsx.snap | 11 -- .../__snapshots__/HeaderCore.spec.tsx.snap | 25 ---- .../__snapshots__/Modal.spec.tsx.snap | 42 ------- .../__snapshots__/ModalCore.spec.tsx.snap | 42 ------- packages/Modal/default/src/index.ts | 3 +- packages/Modal/default/src/modal.scss | 57 ++------- scripts/jest.init.ts | 19 +++ 41 files changed, 591 insertions(+), 935 deletions(-) create mode 100644 packages/Modal/boolean/src/ModalBoolean.stories.mdx delete mode 100644 packages/Modal/boolean/src/ModalBoolean.stories.tsx delete mode 100644 packages/Modal/boolean/src/__tests__/__snapshots__/ModalBoolean.spec.tsx.snap delete mode 100644 packages/Modal/default/src/Div.tsx delete mode 100644 packages/Modal/default/src/HeaderCore.tsx delete mode 100644 packages/Modal/default/src/ModalCore.tsx create mode 100644 packages/Modal/default/src/ModalDefault.stories.mdx delete mode 100644 packages/Modal/default/src/ModalDefault.stories.tsx delete mode 100644 packages/Modal/default/src/__tests__/Div.spec.tsx delete mode 100644 packages/Modal/default/src/__tests__/HeaderCore.spec.tsx delete mode 100644 packages/Modal/default/src/__tests__/ModalCore.spec.tsx delete mode 100644 packages/Modal/default/src/__tests__/__snapshots__/Body.spec.tsx.snap delete mode 100644 packages/Modal/default/src/__tests__/__snapshots__/Div.spec.tsx.snap delete mode 100644 packages/Modal/default/src/__tests__/__snapshots__/Footer.spec.tsx.snap delete mode 100644 packages/Modal/default/src/__tests__/__snapshots__/Header.spec.tsx.snap delete mode 100644 packages/Modal/default/src/__tests__/__snapshots__/HeaderBase.spec.tsx.snap delete mode 100644 packages/Modal/default/src/__tests__/__snapshots__/HeaderCore.spec.tsx.snap delete mode 100644 packages/Modal/default/src/__tests__/__snapshots__/Modal.spec.tsx.snap delete mode 100644 packages/Modal/default/src/__tests__/__snapshots__/ModalCore.spec.tsx.snap diff --git a/.storybook/main.js b/.storybook/main.js index 195fa9efc..225e723dc 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -2,6 +2,7 @@ const path = require('path'); module.exports = { stories: [ + '../packages/**/*.mdx', '../packages/action/src/*.stories.@(ts|tsx|js)', '../packages/alert/src/*.stories.@(ts|tsx|js)', '../packages/badge/src/*.stories.@(ts|tsx|js)', @@ -35,8 +36,6 @@ module.exports = { '../packages/Layout/header/src/**/*.stories.@(ts|tsx|js)', '../packages/link/src/*.stories.@(ts|tsx|js)', '../packages/loader/src/*.stories.@(ts|tsx|js)', - '../packages/Modal/boolean/src/*.stories.@(ts|tsx|js)', - '../packages/Modal/default/src/*.stories.@(ts|tsx|js)', '../packages/panel/src/*.stories.@(ts|tsx|js)', '../packages/popover/src/*.stories.@(ts|tsx|js)', '../packages/restitution/src/*.stories.@(ts|tsx|js)', diff --git a/.storybook/preview.js b/.storybook/preview.js index 4a2512e22..be4990a82 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -15,7 +15,7 @@ export const parameters = { viewports: INITIAL_VIEWPORTS, }, docs: { - inlineStories: false, + inlineStories: true, }, options: { storySort: { diff --git a/package-lock.json b/package-lock.json index 63bf96550..688532f37 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11124,13 +11124,6 @@ "@types/react": "*" } }, - "node_modules/@types/react-modal": { - "version": "3.13.1", - "license": "MIT", - "dependencies": { - "@types/react": "*" - } - }, "node_modules/@types/react-syntax-highlighter": { "version": "11.0.5", "dev": true, @@ -17427,10 +17420,6 @@ "url": "https://github.com/sindresorhus/execa?sponsor=1" } }, - "node_modules/exenv": { - "version": "1.2.2", - "license": "BSD-3-Clause" - }, "node_modules/exit": { "version": "0.1.2", "dev": true, @@ -28280,27 +28269,6 @@ "dev": true, "license": "MIT" }, - "node_modules/react-lifecycles-compat": { - "version": "3.0.4", - "license": "MIT" - }, - "node_modules/react-modal": { - "version": "3.15.1", - "license": "MIT", - "dependencies": { - "exenv": "^1.2.0", - "prop-types": "^15.7.2", - "react-lifecycles-compat": "^3.0.0", - "warning": "^4.0.3" - }, - "engines": { - "node": ">=8" - }, - "peerDependencies": { - "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18", - "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18" - } - }, "node_modules/react-popper": { "version": "2.3.0", "license": "MIT", @@ -34731,9 +34699,7 @@ "version": "2.3.0", "license": "MIT", "dependencies": { - "@axa-fr/react-toolkit-core": "2.3.0", - "@types/react-modal": "^3.10.6", - "react-modal": "^3.14.4" + "@axa-fr/react-toolkit-core": "2.3.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", @@ -35118,9 +35084,7 @@ "@axa-fr/react-toolkit-modal-default": { "version": "file:packages/Modal/default", "requires": { - "@axa-fr/react-toolkit-core": "2.3.0", - "@types/react-modal": "^3.10.6", - "react-modal": "^3.14.4" + "@axa-fr/react-toolkit-core": "2.3.0" } }, "@axa-fr/react-toolkit-panel": { @@ -42552,12 +42516,6 @@ "@types/react": "*" } }, - "@types/react-modal": { - "version": "3.13.1", - "requires": { - "@types/react": "*" - } - }, "@types/react-syntax-highlighter": { "version": "11.0.5", "dev": true, @@ -46777,9 +46735,6 @@ "strip-final-newline": "^2.0.0" } }, - "exenv": { - "version": "1.2.2" - }, "exit": { "version": "0.1.2", "dev": true @@ -53984,18 +53939,6 @@ "version": "17.0.2", "dev": true }, - "react-lifecycles-compat": { - "version": "3.0.4" - }, - "react-modal": { - "version": "3.15.1", - "requires": { - "exenv": "^1.2.0", - "prop-types": "^15.7.2", - "react-lifecycles-compat": "^3.0.0", - "warning": "^4.0.3" - } - }, "react-popper": { "version": "2.3.0", "requires": { diff --git a/packages/Modal/boolean/README.md b/packages/Modal/boolean/README.md index 535959d5a..fbe5a30f5 100644 --- a/packages/Modal/boolean/README.md +++ b/packages/Modal/boolean/README.md @@ -19,24 +19,35 @@ import '@axa-fr/react-toolkit-button/dist/af-button.css'; ### Use ```javascript -const BooleanModalDefault = () => ( - console.log(e)} - onSubmit={(e) => console.log(e)} - id="idModal" - submitTitle="Soumettre" - cancelTitle="Annuler"> -

- Reprehenderit sit quis aute nisi consequat consequat mollit. Commodo in - aliquip consectetur nulla sit anim. Pariatur minim commodo enim ea eu - laborum culpa laboris. Labore labore irure ipsum consequat enim officia - anim ipsum aliqua excepteur qui sint. Duis sint do culpa adipisicing dolor - adipisicing ea dolore aute nisi quis ullamco aliquip occaecat. Aute ut - mollit amet. -

- -); -export default BooleanModalDefault; +import { useRef } from 'react'; + +export const YourComponent = () => { + const ref = useRef < HTMLDialogElement > null; + + return ( + <> + + + ref.current?.close()} + onSubmit={(e) => console.log(e)} + id="idModal" + submitTitle="Soumettre" + cancelTitle="Annuler" + ref={ref}> +

+ Reprehenderit sit quis aute nisi consequat consequat mollit. Commodo + in aliquip consectetur nulla sit anim. Pariatur minim commodo enim ea + eu laborum culpa laboris. Labore labore irure ipsum consequat enim + officia anim ipsum aliqua excepteur qui sint. Duis sint do culpa + adipisicing dolor adipisicing ea dolore aute nisi quis ullamco aliquip + occaecat. Aute ut mollit amet. +

+ + + ); +}; ``` diff --git a/packages/Modal/boolean/src/ModalBoolean.stories.mdx b/packages/Modal/boolean/src/ModalBoolean.stories.mdx new file mode 100644 index 000000000..e949fbdcd --- /dev/null +++ b/packages/Modal/boolean/src/ModalBoolean.stories.mdx @@ -0,0 +1,97 @@ +import { Meta, Story, Canvas } from '@storybook/addon-docs'; +import { ArgsTable } from '@storybook/addon-docs'; +import BooleanModal from './ModalBoolean'; +import { useRef } from 'react'; + + + +# Modal + +export const Template = (args) => { + return ( + <> + {}}> +

+ Reprehenderit sit quis aute nisi consequat consequat mollit. Commodo + in aliquip consectetur nulla sit anim. Pariatur minim commodo enim ea + eu laborum culpa laboris. Labore labore irure ipsum consequat enim + officia anim ipsum aliqua excepteur qui sint. Duis sint do culpa + adipisicing dolor adipisicing ea dolore aute nisi quis ullamco aliquip + occaecat. Aute ut mollit amet. +

+ + + ) +}; + +The modal boolean package gives the possibility to show a modal with minimal configuration. You can use the `ModalBoolean` component with a `title` in property and pass him a content as a react child that will be displayed in the content of the modal. That's the minimal configuration you can use to show a modal. +On top of that, you can ovveride the cancel and submit button with `cancelTitle` and `submitTitle` properties. + +If you want to configure your modal a bit more (remove one or all the buttons in the footer, etc.), use the `@axa-fr/react-toolkit-modal-default` instead. + +You need to pass a `ref` to the `ModalBoolean` component in order to call the `showModal` function when you want to open the modal and the `close` function for closing it. +For example : + +```javascript +import { useRef } from 'react'; + +export const YourComponent = () => { + const ref = useRef(null); + + return ( + <> + + + ref.current?.close()} + onSubmit={(e) => console.log(e)} + id="idModal" + submitTitle="Soumettre" + cancelTitle="Annuler" + ref={ref}> +

+ Reprehenderit sit quis aute nisi consequat consequat mollit. Commodo + in aliquip consectetur nulla sit anim. Pariatur minim commodo enim ea + eu laborum culpa laboris. Labore labore irure ipsum consequat enim + officia anim ipsum aliqua excepteur qui sint. Duis sint do culpa + adipisicing dolor adipisicing ea dolore aute nisi quis ullamco aliquip + occaecat. Aute ut mollit amet. +

+ + + ); +}; +``` + +Don't forget to load the css file of the component. + +```javascript +import '@axa-fr/react-toolkit-modal-default/dist/af-modal.css'; +``` + + + + {Template.bind({})} + + + + \ No newline at end of file diff --git a/packages/Modal/boolean/src/ModalBoolean.stories.tsx b/packages/Modal/boolean/src/ModalBoolean.stories.tsx deleted file mode 100644 index 8ac1732b3..000000000 --- a/packages/Modal/boolean/src/ModalBoolean.stories.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React, { ComponentProps } from 'react'; -import { Meta, Story } from '@storybook/react'; -import BooleanModal from './ModalBoolean'; -import readme from '../README.md'; - -export default { - title: 'Components high level/Modal/Boolean', - component: BooleanModal, - parameters: { - readme: { - sidebar: readme, - }, - options: {}, - }, - argTypes: { - onCancel: { action: 'onCancel' }, - onSubmit: { action: 'onSubmit' }, - }, -} as Meta; - -type BooleanModalProps = ComponentProps; - -const Template: Story = (args) => ( - -

- Reprehenderit sit quis aute nisi consequat consequat mollit. Commodo in - aliquip consectetur nulla sit anim. Pariatur minim commodo enim ea eu - laborum culpa laboris. Labore labore irure ipsum consequat enim officia - anim ipsum aliqua excepteur qui sint. Duis sint do culpa adipisicing dolor - adipisicing ea dolore aute nisi quis ullamco aliquip occaecat. Aute ut - mollit amet. -

- -); - -export const Default = Template.bind({}); -Default.args = { - isOpen: true, - title: 'Titre de la modale', -}; diff --git a/packages/Modal/boolean/src/ModalBoolean.tsx b/packages/Modal/boolean/src/ModalBoolean.tsx index 346c5be73..25833d96b 100644 --- a/packages/Modal/boolean/src/ModalBoolean.tsx +++ b/packages/Modal/boolean/src/ModalBoolean.tsx @@ -1,71 +1,75 @@ -import React from 'react'; -import Modal, { HeaderProps } from '@axa-fr/react-toolkit-modal-default'; +import React, { forwardRef } from 'react'; +import Modal, { + Body, + Footer, + Header, + HeaderProps, +} from '@axa-fr/react-toolkit-modal-default'; import Button from '@axa-fr/react-toolkit-button'; -import { - getComponentClassName, - ClickEvent, - Constants, -} from '@axa-fr/react-toolkit-core'; +import { getComponentClassName, ClickEvent } from '@axa-fr/react-toolkit-core'; const defaultClassName = 'af-modal'; -const defaultProps = { - ...Constants.defaultProps, - submitTitle: 'Valider', - cancelTitle: 'Annuler', - className: defaultClassName, -}; - -type ModalBooleanCoreProps = Partial & { - isOpen: boolean; +export type ModalBooleanProps = HeaderProps & { onSubmit: (e: ClickEvent) => void; onCancel: (e: ClickEvent) => void; id: string; children: React.ReactNode; + submitTitle?: string; + cancelTitle?: string; + className?: string; + classModifier?: string; }; -type ModalBooleanProps = HeaderProps & ModalBooleanCoreProps; - -const ModalBoolean = ({ - isOpen, - children, - title, - submitTitle, - cancelTitle, - className, - classModifier, - onCancel, - id, - onSubmit, -}: ModalBooleanProps) => { - const onCancelcb = () => onCancel && onCancel({ id }); +const ModalBoolean = forwardRef( + ( + { + children, + title, + submitTitle = 'Valider', + cancelTitle = 'Annuler', + className = defaultClassName, + classModifier, + onCancel, + id, + onSubmit, + closeButtonAriaLabel, + ...props + }: ModalBooleanProps, + ref + ) => { + const onCancelcb = () => onCancel && onCancel({ id }); - const onSubmitcb = () => onSubmit && onSubmit({ id }); + const onSubmitcb = () => onSubmit && onSubmit({ id }); - const componentClassName = getComponentClassName( - className, - classModifier, - defaultClassName - ); - - return ( - - - {children} - - - - - - ); -}; + const componentClassName = getComponentClassName( + className, + classModifier, + defaultClassName + ); -ModalBoolean.defaultProps = defaultProps; + return ( + +
+ {children} +
+ + +
+ + ); + } +); export default ModalBoolean; diff --git a/packages/Modal/boolean/src/__tests__/ModalBoolean.spec.tsx b/packages/Modal/boolean/src/__tests__/ModalBoolean.spec.tsx index 223832b6d..13f50bf3d 100644 --- a/packages/Modal/boolean/src/__tests__/ModalBoolean.spec.tsx +++ b/packages/Modal/boolean/src/__tests__/ModalBoolean.spec.tsx @@ -5,9 +5,8 @@ import BooleanModal from '../ModalBoolean'; describe('', () => { it('should render boolean modal', () => { - const { asFragment } = render( + render( {}} onSubmit={() => {}} cancelTitle="Cancel" @@ -15,45 +14,48 @@ describe('', () => { title="Modal Title" submitTitle="Submit"> Content - , - { container: document.body } + ); - expect(asFragment()).toMatchSnapshot(); + expect(screen.getByText('Content')).toBeInTheDocument(); }); - it('should call onSubmit when click on submit', () => { - const onSubmit = jest.fn(); - render( - {}} - onSubmit={onSubmit} - cancelTitle="Cancel" - id="uniqueID" - title="Modal Title" - submitTitle="Submit"> - Content - + const onSubmit = jest.fn(); + const onCancel = jest.fn(); + + const Modal = () => { + const ref = React.useRef(null); + return ( + <> +
+ +
+ + Content + + ); + }; + + it('should call onSubmit when click on submit', () => { + render(); + + UserEvent.click(screen.getByText(/Open/)); UserEvent.click(screen.getByText(/Submit/)); expect(onSubmit).toBeCalled(); }); it('should call onCancel when click on Cancel', () => { - const onCancel = jest.fn(); - render( - {}} - cancelTitle="Cancel" - id="uniqueID" - title="Modal Title" - submitTitle="Submit"> - Content - - ); + render(); UserEvent.click(screen.getByText(/Cancel/)); expect(onCancel).toBeCalled(); diff --git a/packages/Modal/boolean/src/__tests__/__snapshots__/ModalBoolean.spec.tsx.snap b/packages/Modal/boolean/src/__tests__/__snapshots__/ModalBoolean.spec.tsx.snap deleted file mode 100644 index c2bf9546d..000000000 --- a/packages/Modal/boolean/src/__tests__/__snapshots__/ModalBoolean.spec.tsx.snap +++ /dev/null @@ -1,81 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` should render boolean modal 1`] = ` - -
-
-
-
- -
-
- -`; diff --git a/packages/Modal/boolean/src/index.ts b/packages/Modal/boolean/src/index.ts index f034bcc8a..a3be05d2e 100644 --- a/packages/Modal/boolean/src/index.ts +++ b/packages/Modal/boolean/src/index.ts @@ -1,3 +1,5 @@ import BooleanModal from './ModalBoolean'; +export { ModalBooleanProps } from './ModalBoolean'; + export default BooleanModal; diff --git a/packages/Modal/default/README.md b/packages/Modal/default/README.md index e83013fbe..4b2921bcd 100644 --- a/packages/Modal/default/README.md +++ b/packages/Modal/default/README.md @@ -24,84 +24,47 @@ import '@axa-fr/react-toolkit-button/dist/af-button.css'; ### Use ```javascript -const CustomHeaderStory = () => ( - { - console.log(e); - }}> - -

- Ici je contrôle complètement - le contenu -

- - -

- Reprehenderit sit quis aute nisi consequat consequat mollit. Commodo in - aliquip consectetur nulla sit anim. Pariatur minim commodo enim ea eu - laborum culpa laboris. Labore labore irure ipsum consequat enim officia - anim ipsum aliqua excepteur qui sint. Duis sint do culpa adipisicing - dolor adipisicing ea dolore aute nisi quis ullamco aliquip occaecat. - Aute ut mollit amet. -

- - - - - - -); -export default CustomHeaderStory; -``` - -## Modal Core Story - -### Import - -```javascript -import Modal from '@axa-fr/react-toolkit-modal-default'; -import '@axa-fr/react-toolkit-modal-default/dist/af-modal.css'; -import '@axa-fr/react-toolkit-button/dist/af-button.css'; -``` +import { useRef } from 'react'; -### Use +export const YourComponent = () => { + const ref = useRef < HTMLDialogElement > null; -```javascript -const ModalCoreStory = () => ( - { - console.log(e); - }}> - -

- Ici je controle completement le contenu -

- - -

- Reprehenderit sit quis aute nisi consequat consequat mollit. Commodo in - aliquip consectetur nulla sit anim. Pariatur minim commodo enim ea eu - laborum culpa laboris. Labore labore irure ipsum consequat enim officia - anim ipsum aliqua excepteur qui sint. Duis sint do culpa adipisicing - dolor adipisicing ea dolore aute nisi quis ullamco aliquip occaecat. - Aute ut mollit amet. -

- -
- - -
- -); -export default ModalCoreStory; + + ref.current?.close()} ref={ref}> + +

+ Ici je contrôle complètement + le contenu +

+ + +

+ Reprehenderit sit quis aute nisi consequat consequat mollit. Commodo + in aliquip consectetur nulla sit anim. Pariatur minim commodo enim + ea eu laborum culpa laboris. Labore labore irure ipsum consequat + enim officia anim ipsum aliqua excepteur qui sint. Duis sint do + culpa adipisicing dolor adipisicing ea dolore aute nisi quis ullamco + aliquip occaecat. Aute ut mollit amet. +

+ +
+ + +
+ + + ); +}; ``` diff --git a/packages/Modal/default/package.json b/packages/Modal/default/package.json index bc0727a37..ef39e8288 100644 --- a/packages/Modal/default/package.json +++ b/packages/Modal/default/package.json @@ -20,9 +20,7 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" }, "dependencies": { - "@axa-fr/react-toolkit-core": "2.3.0", - "@types/react-modal": "^3.10.6", - "react-modal": "^3.14.4" + "@axa-fr/react-toolkit-core": "2.3.0" }, "license": "MIT", "publishConfig": { diff --git a/packages/Modal/default/src/Body.tsx b/packages/Modal/default/src/Body.tsx index 05792bf81..f10e6cd5e 100644 --- a/packages/Modal/default/src/Body.tsx +++ b/packages/Modal/default/src/Body.tsx @@ -1,8 +1,7 @@ import { getComponentClassName } from '@axa-fr/react-toolkit-core'; import React from 'react'; -import Div, { DivProps } from './Div'; -export type BodyProps = DivProps & { +export type BodyProps = React.HTMLAttributes & { classModifier?: string; }; @@ -18,9 +17,9 @@ const Body = ({ 'af-modal__body' ); return ( -
+
{children} -
+ ); }; diff --git a/packages/Modal/default/src/Div.tsx b/packages/Modal/default/src/Div.tsx deleted file mode 100644 index 159231752..000000000 --- a/packages/Modal/default/src/Div.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; - -export type DivProps = React.HTMLAttributes; - -const Div = (props: DivProps) =>
; - -export default Div; diff --git a/packages/Modal/default/src/Footer.tsx b/packages/Modal/default/src/Footer.tsx index fbd884586..3dab78492 100644 --- a/packages/Modal/default/src/Footer.tsx +++ b/packages/Modal/default/src/Footer.tsx @@ -1,8 +1,9 @@ import React from 'react'; import { getComponentClassName } from '@axa-fr/react-toolkit-core'; -import Div, { DivProps } from './Div'; -export type FooterProps = DivProps & { classModifier?: string }; +export type FooterProps = React.HTMLAttributes & { + classModifier?: string; +}; const Footer = ({ classModifier, className, ...rest }: FooterProps) => { const componentClassName = getComponentClassName( @@ -11,7 +12,7 @@ const Footer = ({ classModifier, className, ...rest }: FooterProps) => { 'af-modal__footer' ); - return
; + return