From f323e9b462506f19dbb66094b4fe531959bbd7c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Toma=CC=81s=CC=8C=20Sychra?= Date: Fri, 23 Jun 2023 15:45:43 +0200 Subject: [PATCH] BREAKING CHANGE(web-react): Remove old Modal and rename ModalComposed to Modal #DS-617 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Migration Guide 1. **Discontinue the old `Modal` component:** The old `Modal` component has been entirely removed and is no longer available for use. 2. **Adopt the new `Modal` in place of `ModalComposed`:** The `ModalComposed` component has been renamed to `Modal`. Thus, replace all instances of `ModalComposed` in your codebase with `Modal`. 3. **Update Component Tags:** Make sure to modify the component tags in your codebase as outlined below: - `` → `` - `` → `` - `` → `` - `` → `` - `` → `` Please refer back to this guide or reach out to our team if you encounter any issues during migration. --- .../examples/ModalWithAccordion.stories.tsx | 59 ++++---- .../examples/ModalWithCollapse.stories.tsx | 16 +-- ...es.tsx => ModalWithScrollView.stories.tsx} | 36 ++--- packages/web-react/scripts/entryPoints.js | 1 - .../{Modal.stories.ts => Modal.stories.tsx} | 1 + .../web-react/src/components/Modal/Modal.tsx | 48 +++---- .../src/components/Modal/ModalBody.tsx | 11 +- .../src/components/Modal/ModalContext.ts | 20 +++ .../ModalDialog.tsx} | 12 +- .../src/components/Modal/ModalFooter.tsx | 28 ++-- .../src/components/Modal/ModalHeader.tsx | 27 +++- .../web-react/src/components/Modal/README.md | 115 +++++++++++---- .../components/Modal/__tests__/Modal.test.tsx | 6 +- .../Modal/__tests__/ModalBody.test.tsx | 4 +- .../__tests__/ModalDialog.test.tsx} | 10 +- .../Modal/__tests__/ModalFooter.test.tsx | 6 +- .../Modal/__tests__/ModalHeader.test.tsx | 6 +- .../__tests__/useModalStyleProps.test.ts | 14 +- .../{ModalComposed => Modal}/demo/index.tsx | 12 +- .../{ModalComposed => Modal}/index.html | 0 .../web-react/src/components/Modal/index.ts | 5 +- .../src/components/Modal/stories/Modal.tsx | 48 ++++--- .../stories/ModalWithCustomHeight.tsx} | 32 ++--- .../Modal/stories/ModalWithLongText.tsx | 118 ++++++++------- .../components/Modal/useModalStyleProps.ts | 52 +++++-- .../ModalComposed/ModalComposed.stories.tsx | 20 --- .../ModalComposed/ModalComposed.tsx | 48 ------- .../ModalComposed/ModalComposedBody.tsx | 18 --- .../ModalComposed/ModalComposedContext.ts | 20 --- .../ModalComposed/ModalComposedFooter.tsx | 31 ---- .../ModalComposed/ModalComposedHeader.tsx | 32 ----- .../src/components/ModalComposed/README.md | 134 ------------------ .../__tests__/ModalComposed.test.tsx | 21 --- .../__tests__/ModalComposedDialog.test.tsx | 13 -- .../__tests__/ModalComposedFooter.test.tsx | 13 -- .../__tests__/ModalComposedHeader.test.tsx | 13 -- .../useModalComposedStyleProps.test.ts | 17 --- .../src/components/ModalComposed/index.ts | 7 - .../ModalComposed/stories/ModalComposed.tsx | 51 ------- .../stories/ModalComposedHtml.tsx | 6 - .../stories/ModalComposedProps.tsx | 7 - .../stories/ModalComposedWithLongText.tsx | 92 ------------ .../useModalComposedStyleProps.ts | 63 -------- packages/web-react/src/components/index.ts | 1 - packages/web-react/src/types/index.ts | 1 - packages/web-react/src/types/modal.ts | 50 ++++++- packages/web-react/src/types/modalComposed.ts | 52 ------- 47 files changed, 461 insertions(+), 936 deletions(-) rename packages/web-react/docs/stories/examples/{ModalComposedWithScrollView.stories.tsx => ModalWithScrollView.stories.tsx} (79%) rename packages/web-react/src/components/Modal/{Modal.stories.ts => Modal.stories.tsx} (87%) create mode 100644 packages/web-react/src/components/Modal/ModalContext.ts rename packages/web-react/src/components/{ModalComposed/ModalComposedDialog.tsx => Modal/ModalDialog.tsx} (74%) rename packages/web-react/src/components/{ModalComposed/__tests__/ModalComposedBody.test.tsx => Modal/__tests__/ModalDialog.test.tsx} (56%) rename packages/web-react/src/components/{ModalComposed => Modal}/demo/index.tsx (57%) rename packages/web-react/src/components/{ModalComposed => Modal}/index.html (100%) rename packages/web-react/src/components/{ModalComposed/stories/ModalComposedWithCustomHeight.tsx => Modal/stories/ModalWithCustomHeight.tsx} (68%) delete mode 100644 packages/web-react/src/components/ModalComposed/ModalComposed.stories.tsx delete mode 100644 packages/web-react/src/components/ModalComposed/ModalComposed.tsx delete mode 100644 packages/web-react/src/components/ModalComposed/ModalComposedBody.tsx delete mode 100644 packages/web-react/src/components/ModalComposed/ModalComposedContext.ts delete mode 100644 packages/web-react/src/components/ModalComposed/ModalComposedFooter.tsx delete mode 100644 packages/web-react/src/components/ModalComposed/ModalComposedHeader.tsx delete mode 100644 packages/web-react/src/components/ModalComposed/README.md delete mode 100644 packages/web-react/src/components/ModalComposed/__tests__/ModalComposed.test.tsx delete mode 100644 packages/web-react/src/components/ModalComposed/__tests__/ModalComposedDialog.test.tsx delete mode 100644 packages/web-react/src/components/ModalComposed/__tests__/ModalComposedFooter.test.tsx delete mode 100644 packages/web-react/src/components/ModalComposed/__tests__/ModalComposedHeader.test.tsx delete mode 100644 packages/web-react/src/components/ModalComposed/__tests__/useModalComposedStyleProps.test.ts delete mode 100644 packages/web-react/src/components/ModalComposed/index.ts delete mode 100644 packages/web-react/src/components/ModalComposed/stories/ModalComposed.tsx delete mode 100644 packages/web-react/src/components/ModalComposed/stories/ModalComposedHtml.tsx delete mode 100644 packages/web-react/src/components/ModalComposed/stories/ModalComposedProps.tsx delete mode 100644 packages/web-react/src/components/ModalComposed/stories/ModalComposedWithLongText.tsx delete mode 100644 packages/web-react/src/components/ModalComposed/useModalComposedStyleProps.ts delete mode 100644 packages/web-react/src/types/modalComposed.ts diff --git a/packages/web-react/docs/stories/examples/ModalWithAccordion.stories.tsx b/packages/web-react/docs/stories/examples/ModalWithAccordion.stories.tsx index fc060ecc00..1445752e10 100644 --- a/packages/web-react/docs/stories/examples/ModalWithAccordion.stories.tsx +++ b/packages/web-react/docs/stories/examples/ModalWithAccordion.stories.tsx @@ -4,6 +4,7 @@ import { Icon, Pill, Modal, + ModalDialog, ModalHeader, ModalBody, UncontrolledAccordion, @@ -32,31 +33,39 @@ export const ModalWithAccordion = () => { {isOpen ? 'Close' : 'Open'} Modal - - - - - - - 3}>Accordion Header #0 - {content} - - - 3}>Accordion Header #1 - {content} - - - Accordion Header #2 - {content} - - - 3}>Accordion Header #3 - {content} - - - + + + + + + + + 3}>Accordion Header #0 + {content} + + + 3}>Accordion Header #1 + {content} + + + Accordion Header #2 + {content} + + + 3}>Accordion Header #3 + {content} + + + + ); diff --git a/packages/web-react/docs/stories/examples/ModalWithCollapse.stories.tsx b/packages/web-react/docs/stories/examples/ModalWithCollapse.stories.tsx index 57cd9ad04c..f6f692be3d 100644 --- a/packages/web-react/docs/stories/examples/ModalWithCollapse.stories.tsx +++ b/packages/web-react/docs/stories/examples/ModalWithCollapse.stories.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react'; -import { Button, Icon, Modal, ModalHeader, ModalBody, UncontrolledCollapse } from '../../../src/components'; +import { Button, Modal, ModalDialog, ModalHeader, ModalBody, UncontrolledCollapse } from '../../../src/components'; import { content } from '../../../src/components/Accordion/stories/Accordion'; import { CollapseTrigger } from '../../../src/components/Collapse/stories/Collapse'; @@ -22,14 +22,12 @@ export const ModalWithCollapse = () => { {isOpen ? 'Close' : 'Open'} Modal - - - - - {content} - + + + + {content} + + ); diff --git a/packages/web-react/docs/stories/examples/ModalComposedWithScrollView.stories.tsx b/packages/web-react/docs/stories/examples/ModalWithScrollView.stories.tsx similarity index 79% rename from packages/web-react/docs/stories/examples/ModalComposedWithScrollView.stories.tsx rename to packages/web-react/docs/stories/examples/ModalWithScrollView.stories.tsx index aa07f77005..5084f590c7 100644 --- a/packages/web-react/docs/stories/examples/ModalComposedWithScrollView.stories.tsx +++ b/packages/web-react/docs/stories/examples/ModalWithScrollView.stories.tsx @@ -1,22 +1,14 @@ import React, { useState } from 'react'; -import { - Button, - ModalComposed, - ModalComposedDialog, - ModalComposedHeader, - ModalComposedBody, - ModalComposedFooter, - ScrollView, -} from '../../../src/components'; +import { Button, Modal, ModalDialog, ModalHeader, ModalBody, ModalFooter, ScrollView } from '../../../src/components'; export default { title: 'Examples/Compositions', }; -export const ModalComposedWithScrollView = () => { +export const ModalWithScrollView = () => { const [isOpen, setOpen] = useState(false); - const toggleModalComposed = () => setOpen(!isOpen); + const toggleModal = () => setOpen(!isOpen); const handleClose = () => { setOpen(false); @@ -24,14 +16,14 @@ export const ModalComposedWithScrollView = () => { return ( <> - - - - Modal with ScrollView + + + Modal with ScrollView - +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia mollitia perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi @@ -72,18 +64,18 @@ export const ModalComposedWithScrollView = () => { mollitia perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis provident unde. Eveniet, iste, molestiae?

- + - + - - - + + + ); }; diff --git a/packages/web-react/scripts/entryPoints.js b/packages/web-react/scripts/entryPoints.js index 474e19fe97..55b3435207 100644 --- a/packages/web-react/scripts/entryPoints.js +++ b/packages/web-react/scripts/entryPoints.js @@ -20,7 +20,6 @@ const entryPoints = [ { dirs: ['components', 'Icon'] }, { dirs: ['components', 'Link'] }, { dirs: ['components', 'Modal'] }, - { dirs: ['components', 'ModalComposed'] }, { dirs: ['components', 'Pagination'] }, { dirs: ['components', 'Pill'] }, { dirs: ['components', 'RadioField'] }, diff --git a/packages/web-react/src/components/Modal/Modal.stories.ts b/packages/web-react/src/components/Modal/Modal.stories.tsx similarity index 87% rename from packages/web-react/src/components/Modal/Modal.stories.ts rename to packages/web-react/src/components/Modal/Modal.stories.tsx index 334ca815a3..9c3ccde98a 100644 --- a/packages/web-react/src/components/Modal/Modal.stories.ts +++ b/packages/web-react/src/components/Modal/Modal.stories.tsx @@ -14,6 +14,7 @@ export default { } as ComponentMeta; export { default as Modal } from './stories/Modal'; +export { default as ModalWithCustomHeight } from './stories/ModalWithCustomHeight'; export { default as ModalWithLongText } from './stories/ModalWithLongText'; export { default as HTML } from './stories/ModalHtml'; export { default as Props } from './stories/ModalProps'; diff --git a/packages/web-react/src/components/Modal/Modal.tsx b/packages/web-react/src/components/Modal/Modal.tsx index 45a887190e..6827b7d6f5 100644 --- a/packages/web-react/src/components/Modal/Modal.tsx +++ b/packages/web-react/src/components/Modal/Modal.tsx @@ -1,38 +1,38 @@ import React from 'react'; import classNames from 'classnames'; -import { ModalProps } from '../../types'; +import { useStyleProps, useLastActiveFocus } from '../../hooks'; +import { SpiritModalProps } from '../../types'; import { useModalStyleProps } from './useModalStyleProps'; -import { useLastActiveFocus, useStyleProps, useDeprecationMessage } from '../../hooks'; +import { ModalProvider } from './ModalContext'; import Dialog from '../Dialog/Dialog'; -const Modal = (props: ModalProps): JSX.Element => { - const { children, isOpen, onClose, ...restProps } = props; +const Modal = (props: SpiritModalProps) => { + const { children, isOpen, onClose, id, ...restProps } = props; const { classProps } = useModalStyleProps(); const { styleProps, props: otherProps } = useStyleProps(restProps); - useLastActiveFocus(isOpen); + const contextValue = { + id, + isOpen, + onClose, + }; - useDeprecationMessage({ - method: 'component', - trigger: true, - componentName: 'Modal', - componentProps: { - delete: true, - }, - }); + useLastActiveFocus(isOpen); return ( - -
-
{children}
-
- + + + {children} + + ); }; diff --git a/packages/web-react/src/components/Modal/ModalBody.tsx b/packages/web-react/src/components/Modal/ModalBody.tsx index c8c728a28b..e0958d5284 100644 --- a/packages/web-react/src/components/Modal/ModalBody.tsx +++ b/packages/web-react/src/components/Modal/ModalBody.tsx @@ -1,18 +1,17 @@ import React from 'react'; import classNames from 'classnames'; -import { ModalMemberProps } from '../../types'; -import { useModalStyleProps } from './useModalStyleProps'; import { useStyleProps } from '../../hooks'; +import { ModalBodyProps } from '../../types'; +import { useModalStyleProps } from './useModalStyleProps'; -const ModalBody = (props: ModalMemberProps): JSX.Element => { - const { children, elementType: ElementTag = 'div', ...restProps } = props; +const ModalBody = ({ children, ...restProps }: ModalBodyProps) => { const { classProps } = useModalStyleProps(); const { styleProps, props: otherProps } = useStyleProps(restProps); return ( - +
{children} - +
); }; diff --git a/packages/web-react/src/components/Modal/ModalContext.ts b/packages/web-react/src/components/Modal/ModalContext.ts new file mode 100644 index 0000000000..abd1e835a1 --- /dev/null +++ b/packages/web-react/src/components/Modal/ModalContext.ts @@ -0,0 +1,20 @@ +import { createContext, useContext } from 'react'; +import { ModalDialogHandlingProps } from '../../types'; + +export type ModalContextProps = { + id: string; +} & ModalDialogHandlingProps; + +const defaultContext: ModalContextProps = { + id: '', + isOpen: false, + onClose: () => null, +}; + +const ModalContext = createContext(defaultContext); +const ModalProvider = ModalContext.Provider; +const ModalConsumer = ModalContext.Consumer; +const useModalContext = (): ModalContextProps => useContext(ModalContext); + +export default ModalContext; +export { ModalProvider, ModalConsumer, useModalContext }; diff --git a/packages/web-react/src/components/ModalComposed/ModalComposedDialog.tsx b/packages/web-react/src/components/Modal/ModalDialog.tsx similarity index 74% rename from packages/web-react/src/components/ModalComposed/ModalComposedDialog.tsx rename to packages/web-react/src/components/Modal/ModalDialog.tsx index b0314f455f..9dd878bc15 100644 --- a/packages/web-react/src/components/ModalComposed/ModalComposedDialog.tsx +++ b/packages/web-react/src/components/Modal/ModalDialog.tsx @@ -1,8 +1,8 @@ import React, { CSSProperties, ElementType, ForwardedRef, forwardRef } from 'react'; import classNames from 'classnames'; import { useStyleProps } from '../../hooks'; -import { ModalComposedDialogProps, ModalComposedDialogElementType } from '../../types/modalComposed'; -import { useModalComposedStyleProps } from './useModalComposedStyleProps'; +import { ModalDialogProps, ModalDialogElementType } from '../../types'; +import { useModalStyleProps } from './useModalStyleProps'; interface CustomizedHeightCSSProperties extends CSSProperties { '--modal-max-height-tablet'?: string; @@ -10,8 +10,8 @@ interface CustomizedHeightCSSProperties extends CSSProperties { '--modal-preferred-height-tablet'?: string; } -const ModalComposedDialog = ( - props: ModalComposedDialogProps, +const ModalDialog = ( + props: ModalDialogProps, ref: ForwardedRef, ) => { const { @@ -24,7 +24,7 @@ const ModalComposedDialog = { - const { children, elementType: ElementTag = 'div', ...restProps } = props; - const { classProps } = useModalStyleProps(); +const ModalFooter = (props: ModalFooterProps) => { + const { children, alignmentX = 'right', align = 'right', description, ...restProps } = props; + + const { classProps } = useModalStyleProps({ footerAlignment: alignmentX || align }); const { styleProps, props: otherProps } = useStyleProps(restProps); + useDeprecationMessage({ + method: 'property', + trigger: !!align, + componentName: 'ModalFooter', + propertyProps: { + deprecatedName: 'align', + newName: 'alignmentX', + }, + }); + return ( - - {children} - +
+ {description &&
{description}
} +
{children}
+
); }; diff --git a/packages/web-react/src/components/Modal/ModalHeader.tsx b/packages/web-react/src/components/Modal/ModalHeader.tsx index b2ece946f3..4f3f3d7fc5 100644 --- a/packages/web-react/src/components/Modal/ModalHeader.tsx +++ b/packages/web-react/src/components/Modal/ModalHeader.tsx @@ -1,18 +1,31 @@ import React from 'react'; import classNames from 'classnames'; -import { ModalMemberProps } from '../../types'; -import { useModalStyleProps } from './useModalStyleProps'; import { useStyleProps } from '../../hooks'; +import { ModalHeaderProps } from '../../types'; +import { useModalStyleProps } from './useModalStyleProps'; +import { useModalContext } from './ModalContext'; +import { Button } from '../Button'; +import { Icon } from '../Icon'; + +const ModalHeader = (props: ModalHeaderProps) => { + const { children, closeLabel = 'Close', ...restProps } = props; -const ModalHeader = (props: ModalMemberProps): JSX.Element => { - const { children, elementType: ElementTag = 'div', ...restProps } = props; const { classProps } = useModalStyleProps(); const { styleProps, props: otherProps } = useStyleProps(restProps); + const { id, isOpen, onClose } = useModalContext(); return ( - - {children} - +
+ {children && ( +

+ {children} +

+ )} + +
); }; diff --git a/packages/web-react/src/components/Modal/README.md b/packages/web-react/src/components/Modal/README.md index d2ad992c6d..778f0d7b4f 100644 --- a/packages/web-react/src/components/Modal/README.md +++ b/packages/web-react/src/components/Modal/README.md @@ -1,7 +1,7 @@ # Modal ```jsx -import { Button, Icon, Modal, ModalHeader, ModalBody, ModalFooter } from '@lmc-eu/spirit-web-react/components'; +import { Modal, ModalDialog, ModalBody, ModalHeader, ModalFooter, Button } from '@lmc-eu/spirit-web-react/components'; ``` ```jsx @@ -13,53 +13,110 @@ const handleClose = () => { setOpen(false); }; +// Trigger - - - Title - - - Modal Body - Modal Footer -; + +// Modal + + + Modal Title + Modal Body + + + + + + +``` + +## An example using a form as a ModalDialog element + +```jsx + + + ... + + ``` ## Modal **Available props** -| Name | Type | Default | Description | -| ---------- | ---------------------------------------------- | ------- | ------------------------- | -| `isOpen` | `boolean` | `false` | Open state | -| `onClose` | `(event: ClickEvent or KeyboardEvent) => void` | - | Callback on dialog closed | -| `children` | `ReactNode` | - | Children node | +| Name | Type | Default | Required | Description | +| ------------------ | ---------------------------------------------- | ------- | -------- | ------------------------- | +| `id` | `string` | - | yes | Open state | +| `isOpen` | `boolean` | `false` | yes | Open state | +| `onClose` | `(event: ClickEvent or KeyboardEvent) => void` | - | yes | Callback on dialog closed | +| `children` | `ReactNode` | - | no | Children node | +| `UNSAFE_className` | `string` | - | no | Modal custom class name | +| `UNSAFE_style` | `CSSProperties` | - | no | Modal custom style | + +The rest of the properties are created from the default `` element. [More about the element][DialogElementDocs] -## Modal Header +## ModalDialog **Available props** -| Name | Type | Default | Description | -| ---------- | ----------- | ------- | ------------- | -| `children` | `ReactNode` | - | Children node | +| Name | Type | Default | Required | Description | +| -------------------- | ------------------- | ----------- | -------- | ---------------------------------------------------- | +| `elementType` | `'article', 'form'` | `'article'` | no | ModalDialog element type | +| `children` | `ReactNode` | - | no | Children node | +| `UNSAFE_className` | `string` | - | no | ModalDialog custom class name | +| `UNSAFE_style` | `CSSProperties` | - | no | ModalDialog custom style | +| `isExpandedOnMobile` | `boolean` | - | no | ModalDialog shrinks to fit the height of its content | -## Modal Body +The rest of the properties are formed from the selected type of element. Documentation for [Article][ArticleElementDocs], [Form][FormElementDocs]. + +## ModalHeader **Available props** -| Name | Type | Default | Description | -| ---------- | ----------- | ------- | ------------- | -| `children` | `ReactNode` | - | Children node | +| Name | Type | Default | Required | Description | +| ------------------ | --------------- | ------- | -------- | ----------------------------- | +| `children` | `ReactNode` | - | no | Children node | +| `closeLabel` | `string` | - | no | Close button label | +| `UNSAFE_className` | `string` | - | no | ModalHeader custom class name | +| `UNSAFE_style` | `CSSProperties` | - | no | ModalHeader custom style | + +The rest of the properties are based from type of `HTMLElement`. [Docs][HTMLElementDocs] -## Modal Footer +## ModalBody **Available props** -| Name | Type | Default | Description | -| ---------- | ----------- | ------- | ------------- | -| `children` | `ReactNode` | - | Children node | +| Name | Type | Default | Required | Description | +| ------------------ | --------------- | ------- | -------- | --------------------------- | +| `children` | `ReactNode` | - | no | Children node | +| `UNSAFE_className` | `string` | - | no | ModalBody custom class name | +| `UNSAFE_style` | `CSSProperties` | - | no | ModalBody custom style | + +The rest of the properties are created from the default `
` element. [Docs][DivElementDocs] + +## ModalFooter + +**Available props** -For detailed information see [Modal](https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/Modal/README.md) component +| Name | Type | Default | Required | Description | +| ------------------ | --------------------------------------------- | --------- | -------- | ---------------------------------------------------------------------------- | +| `children` | `ReactNode` | - | no | Children node | +| `align` | [AlignmentX dictionary][dictionary-alignment] | `'right'` | no | [**DEPRECATED**][deprecated] in favor of `alignmentX`; ModalFooter alignment | +| `alignmentX` | [AlignmentX dictionary][dictionary-alignment] | `'right'` | no | ModalFooter alignment | +| `UNSAFE_className` | `string` | - | no | ModalFooter custom class name | +| `UNSAFE_style` | `CSSProperties` | - | no | ModalFooter custom style | + +The rest of the properties are based from type of `HTMLElement`. [Docs][HTMLElementDocs] + +[DialogElementDocs]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog +[ArticleElementDocs]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article +[FormElementDocs]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form +[DivElementDocs]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div +[HTMLElementDocs]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement +[dictionary-alignment]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#alignment +[deprecated]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-react/README.md#deprecations diff --git a/packages/web-react/src/components/Modal/__tests__/Modal.test.tsx b/packages/web-react/src/components/Modal/__tests__/Modal.test.tsx index 237c235154..a24212189f 100644 --- a/packages/web-react/src/components/Modal/__tests__/Modal.test.tsx +++ b/packages/web-react/src/components/Modal/__tests__/Modal.test.tsx @@ -4,11 +4,11 @@ import { classNamePrefixProviderTest } from '../../../../tests/providerTests/cla import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest'; import { restPropsTest } from '../../../../tests/providerTests/restPropsTest'; import Modal from '../Modal'; -import { ModalProps } from '../../../types'; +import { SpiritModalProps } from '../../../types'; describe('Modal', () => { - const ModalTest = (props: ModalProps) => ( - null}> + const ModalTest = (props: SpiritModalProps) => ( + null}>
Test
 ); diff --git a/packages/web-react/src/components/Modal/__tests__/ModalBody.test.tsx b/packages/web-react/src/components/Modal/__tests__/ModalBody.test.tsx index b285d84667..50acdb989c 100644 --- a/packages/web-react/src/components/Modal/__tests__/ModalBody.test.tsx +++ b/packages/web-react/src/components/Modal/__tests__/ModalBody.test.tsx @@ -4,8 +4,8 @@ import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest'; import { restPropsTest } from '../../../../tests/providerTests/restPropsTest'; import ModalBody from '../ModalBody'; -describe('Modal', () => { - classNamePrefixProviderTest(ModalBody, 'Modal__body'); +describe('ModalBody', () => { + classNamePrefixProviderTest(ModalBody, 'ModalBody'); stylePropsTest(ModalBody); diff --git a/packages/web-react/src/components/ModalComposed/__tests__/ModalComposedBody.test.tsx b/packages/web-react/src/components/Modal/__tests__/ModalDialog.test.tsx similarity index 56% rename from packages/web-react/src/components/ModalComposed/__tests__/ModalComposedBody.test.tsx rename to packages/web-react/src/components/Modal/__tests__/ModalDialog.test.tsx index 1317f3b83d..523390f39c 100644 --- a/packages/web-react/src/components/ModalComposed/__tests__/ModalComposedBody.test.tsx +++ b/packages/web-react/src/components/Modal/__tests__/ModalDialog.test.tsx @@ -2,12 +2,12 @@ import '@testing-library/jest-dom'; import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest'; import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest'; import { restPropsTest } from '../../../../tests/providerTests/restPropsTest'; -import ModalComposedBody from '../ModalComposedBody'; +import ModalDialog from '../ModalDialog'; -describe('ModalComposedBody', () => { - classNamePrefixProviderTest(ModalComposedBody, 'ModalBody'); +describe('ModalDialog', () => { + classNamePrefixProviderTest(ModalDialog, 'ModalDialog'); - stylePropsTest(ModalComposedBody); + stylePropsTest(ModalDialog); - restPropsTest(ModalComposedBody, 'div'); + restPropsTest(ModalDialog, 'article'); }); diff --git a/packages/web-react/src/components/Modal/__tests__/ModalFooter.test.tsx b/packages/web-react/src/components/Modal/__tests__/ModalFooter.test.tsx index 027675b768..ba18e2798a 100644 --- a/packages/web-react/src/components/Modal/__tests__/ModalFooter.test.tsx +++ b/packages/web-react/src/components/Modal/__tests__/ModalFooter.test.tsx @@ -4,10 +4,10 @@ import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest'; import { restPropsTest } from '../../../../tests/providerTests/restPropsTest'; import ModalFooter from '../ModalFooter'; -describe('Modal', () => { - classNamePrefixProviderTest(ModalFooter, 'Modal__footer'); +describe('ModalFooter', () => { + classNamePrefixProviderTest(ModalFooter, 'ModalFooter'); stylePropsTest(ModalFooter); - restPropsTest(ModalFooter, 'div'); + restPropsTest(ModalFooter, 'footer'); }); diff --git a/packages/web-react/src/components/Modal/__tests__/ModalHeader.test.tsx b/packages/web-react/src/components/Modal/__tests__/ModalHeader.test.tsx index 254c0af01b..72fb255922 100644 --- a/packages/web-react/src/components/Modal/__tests__/ModalHeader.test.tsx +++ b/packages/web-react/src/components/Modal/__tests__/ModalHeader.test.tsx @@ -4,10 +4,10 @@ import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest'; import { restPropsTest } from '../../../../tests/providerTests/restPropsTest'; import ModalHeader from '../ModalHeader'; -describe('Modal', () => { - classNamePrefixProviderTest(ModalHeader, 'Modal__header'); +describe('ModalHeader', () => { + classNamePrefixProviderTest(ModalHeader, 'ModalHeader'); stylePropsTest(ModalHeader); - restPropsTest(ModalHeader, 'div'); + restPropsTest(ModalHeader, 'header'); }); diff --git a/packages/web-react/src/components/Modal/__tests__/useModalStyleProps.test.ts b/packages/web-react/src/components/Modal/__tests__/useModalStyleProps.test.ts index 370ae9cc69..956340b756 100644 --- a/packages/web-react/src/components/Modal/__tests__/useModalStyleProps.test.ts +++ b/packages/web-react/src/components/Modal/__tests__/useModalStyleProps.test.ts @@ -3,13 +3,15 @@ import { useModalStyleProps } from '../useModalStyleProps'; describe('useModalStyleProps', () => { it('should return defaults', () => { - const { result } = renderHook(() => useModalStyleProps()); + const { result } = renderHook(() => useModalStyleProps({})); expect(result.current.classProps.root).toBe('Modal'); - expect(result.current.classProps.content).toBe('Modal__content'); - expect(result.current.classProps.dialog).toBe('Modal__dialog'); - expect(result.current.classProps.header).toBe('Modal__header'); - expect(result.current.classProps.body).toBe('Modal__body'); - expect(result.current.classProps.footer).toBe('Modal__footer'); + expect(result.current.classProps.dialog).toBe('ModalDialog'); + expect(result.current.classProps.title).toBe('ModalHeader__title'); + expect(result.current.classProps.header).toBe('ModalHeader'); + expect(result.current.classProps.body).toBe('ModalBody'); + expect(result.current.classProps.footer.root).toBe('ModalFooter ModalFooter--right'); + expect(result.current.classProps.footer.description).toBe('ModalFooter__description'); + expect(result.current.classProps.footer.actions).toBe('ModalFooter__actions'); }); }); diff --git a/packages/web-react/src/components/ModalComposed/demo/index.tsx b/packages/web-react/src/components/Modal/demo/index.tsx similarity index 57% rename from packages/web-react/src/components/ModalComposed/demo/index.tsx rename to packages/web-react/src/components/Modal/demo/index.tsx index 8fbfa10fe9..a1c315be5b 100644 --- a/packages/web-react/src/components/ModalComposed/demo/index.tsx +++ b/packages/web-react/src/components/Modal/demo/index.tsx @@ -1,20 +1,20 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import DocsSection from '../../../../docs/DocsSections'; -import ModalComposed from '../stories/ModalComposed'; -import ModalComposedWithCustomHeight from '../stories/ModalComposedWithCustomHeight'; -import ModalComposedWithLongText from '../stories/ModalComposedWithLongText'; +import Modal from '../stories/Modal'; +import ModalWithCustomHeight from '../stories/ModalWithCustomHeight'; +import ModalWithLongText from '../stories/ModalWithLongText'; ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( - + - + - + , ); diff --git a/packages/web-react/src/components/ModalComposed/index.html b/packages/web-react/src/components/Modal/index.html similarity index 100% rename from packages/web-react/src/components/ModalComposed/index.html rename to packages/web-react/src/components/Modal/index.html diff --git a/packages/web-react/src/components/Modal/index.ts b/packages/web-react/src/components/Modal/index.ts index 9134f61c0b..75793a7bab 100644 --- a/packages/web-react/src/components/Modal/index.ts +++ b/packages/web-react/src/components/Modal/index.ts @@ -1,6 +1,7 @@ -export * from './Modal'; export { default as Modal } from './Modal'; +export { default as ModalDialog } from './ModalDialog'; export { default as ModalBody } from './ModalBody'; -export { default as ModalFooter } from './ModalFooter'; export { default as ModalHeader } from './ModalHeader'; +export { default as ModalFooter } from './ModalFooter'; +export * from './ModalContext'; export * from './useModalStyleProps'; diff --git a/packages/web-react/src/components/Modal/stories/Modal.tsx b/packages/web-react/src/components/Modal/stories/Modal.tsx index e50df8cd6e..40b81f0a25 100644 --- a/packages/web-react/src/components/Modal/stories/Modal.tsx +++ b/packages/web-react/src/components/Modal/stories/Modal.tsx @@ -1,14 +1,18 @@ // Because there is no `dist` directory during the CI run /* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */ -import { ComponentStory } from '@storybook/react'; import React, { useState } from 'react'; -import { Button } from '../../Button'; +// eslint-disable-next-line @typescript-eslint/ban-ts-comment +// @ts-ignore: No declaration file +import icons from '@lmc-eu/spirit-icons/dist/icons'; +import { IconsProvider } from '../../../context'; import Modal from '../Modal'; +import ModalDialog from '../ModalDialog'; import ModalBody from '../ModalBody'; import ModalHeader from '../ModalHeader'; -import { Icon } from '../../Icon'; +import ModalFooter from '../ModalFooter'; +import { Button } from '../../Button'; -const Story: ComponentStory = () => { +const Story = () => { const [isOpen, setOpen] = useState(false); const toggleModal = () => setOpen(!isOpen); @@ -18,25 +22,27 @@ const Story: ComponentStory = () => { }; return ( - <> - + +
+ +
- - - - -

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia - perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis - provident unde. Eveniet, iste, molestiae? -

- + + Modal title + Body + + + + + - + ); }; diff --git a/packages/web-react/src/components/ModalComposed/stories/ModalComposedWithCustomHeight.tsx b/packages/web-react/src/components/Modal/stories/ModalWithCustomHeight.tsx similarity index 68% rename from packages/web-react/src/components/ModalComposed/stories/ModalComposedWithCustomHeight.tsx rename to packages/web-react/src/components/Modal/stories/ModalWithCustomHeight.tsx index 712d89e400..30c106d039 100644 --- a/packages/web-react/src/components/ModalComposed/stories/ModalComposedWithCustomHeight.tsx +++ b/packages/web-react/src/components/Modal/stories/ModalWithCustomHeight.tsx @@ -5,11 +5,11 @@ import React, { useState } from 'react'; // @ts-ignore: No declaration file import icons from '@lmc-eu/spirit-icons/dist/icons'; import { IconsProvider } from '../../../context'; -import ModalComposed from '../ModalComposed'; -import ModalComposedDialog from '../ModalComposedDialog'; -import ModalComposedBody from '../ModalComposedBody'; -import ModalComposedHeader from '../ModalComposedHeader'; -import ModalComposedFooter from '../ModalComposedFooter'; +import Modal from '../Modal'; +import ModalDialog from '../ModalDialog'; +import ModalBody from '../ModalBody'; +import ModalHeader from '../ModalHeader'; +import ModalFooter from '../ModalFooter'; import { Button } from '../../Button'; // @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244 @@ -30,14 +30,10 @@ const Story = (props: unknown) => { Open Modal
- - - Modal title - + + + Modal title +

This modal has a custom height of 400px.
@@ -50,17 +46,17 @@ const Story = (props: unknown) => {
The max height of this modal is 700px.

- - + + - - - + + + ); }; diff --git a/packages/web-react/src/components/Modal/stories/ModalWithLongText.tsx b/packages/web-react/src/components/Modal/stories/ModalWithLongText.tsx index 0cb540ea7a..b8de3a2b53 100644 --- a/packages/web-react/src/components/Modal/stories/ModalWithLongText.tsx +++ b/packages/web-react/src/components/Modal/stories/ModalWithLongText.tsx @@ -1,18 +1,18 @@ // Because there is no `dist` directory during the CI run /* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */ -import { ComponentStory } from '@storybook/react'; import React, { useState } from 'react'; // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore: No declaration file import icons from '@lmc-eu/spirit-icons/dist/icons'; -import { Button } from '../../Button'; +import { IconsProvider } from '../../../context'; import Modal from '../Modal'; +import ModalDialog from '../ModalDialog'; import ModalBody from '../ModalBody'; import ModalHeader from '../ModalHeader'; -import { IconsProvider } from '../../../context'; -import { Icon } from '../../Icon'; +import ModalFooter from '../ModalFooter'; +import { Button } from '../../Button'; -const Story: ComponentStory = () => { +const Story = () => { const [isOpen, setOpen] = useState(false); const toggleModal = () => setOpen(!isOpen); @@ -23,57 +23,65 @@ const Story: ComponentStory = () => { return ( - +
+ +
- - - - -

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia - perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis - provident unde. Eveniet, iste, molestiae? -

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia - perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis - provident unde. Eveniet, iste, molestiae? -

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia - perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis - provident unde. Eveniet, iste, molestiae? -

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia - perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis - provident unde. Eveniet, iste, molestiae? -

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia - perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis - provident unde. Eveniet, iste, molestiae? -

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia - perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis - provident unde. Eveniet, iste, molestiae? -

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia - perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis - provident unde. Eveniet, iste, molestiae? -

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia - perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis - provident unde. Eveniet, iste, molestiae? -

- + + Modal title + +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia + perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis + provident unde. Eveniet, iste, molestiae? +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia + perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis + provident unde. Eveniet, iste, molestiae? +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia + perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis + provident unde. Eveniet, iste, molestiae? +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia + perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis + provident unde. Eveniet, iste, molestiae? +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia + perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis + provident unde. Eveniet, iste, molestiae? +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia + perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis + provident unde. Eveniet, iste, molestiae? +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia + perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis + provident unde. Eveniet, iste, molestiae? +

+

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia + perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis + provident unde. Eveniet, iste, molestiae? +

+ + + + + + ); diff --git a/packages/web-react/src/components/Modal/useModalStyleProps.ts b/packages/web-react/src/components/Modal/useModalStyleProps.ts index e6a71e9108..2ea166632b 100644 --- a/packages/web-react/src/components/Modal/useModalStyleProps.ts +++ b/packages/web-react/src/components/Modal/useModalStyleProps.ts @@ -1,31 +1,59 @@ +import classNames from 'classnames'; +import { AlignmentXDictionaryType } from '../../types'; import { useClassNamePrefix } from '../../hooks'; -export interface ModalStyles { +export interface ModalStylesProps { + footerAlignment?: AlignmentXDictionaryType; + isExpandedOnMobile?: boolean; +} + +export interface ModalStylesReturn { /** className props */ classProps: { root: string; - content: string; dialog: string; + title: string; header: string; body: string; - footer: string; + footer: { + root: string; + description: string; + actions: string; + }; }; } -export function useModalStyleProps(): ModalStyles { +export function useModalStyleProps( + { footerAlignment = 'right', isExpandedOnMobile }: ModalStylesProps = { + footerAlignment: 'right', + isExpandedOnMobile: false, + }, +): ModalStylesReturn { const modalClass = useClassNamePrefix('Modal'); - const modalContentClass = `${modalClass}__content`; - const modalDialogClass = `${modalClass}__dialog`; - const modalHeaderClass = `${modalClass}__header`; - const modalBodyClass = `${modalClass}__body`; - const modalFooterClass = `${modalClass}__footer`; + const modalDialogClass = `${modalClass}Dialog`; + const modalDialogExpandedOnMobileClass = `${modalDialogClass}--expandOnMobile`; + const modalHeaderClass = `${modalClass}Header`; + const modalTitleClass = `${modalHeaderClass}__title`; + const modalBodyClass = `${modalClass}Body`; + const modalFooterClass = `${modalClass}Footer`; + const modalFooterDescriptionClass = `${modalFooterClass}__description`; + const modalFooterActionsClass = `${modalFooterClass}__actions`; + const footerAlignClasses = { + left: `${modalFooterClass}--left`, + center: `${modalFooterClass}--center`, + right: `${modalFooterClass}--right`, + }; const classProps = { root: modalClass, - content: modalContentClass, - dialog: modalDialogClass, + dialog: classNames(modalDialogClass, { [modalDialogExpandedOnMobileClass]: isExpandedOnMobile }), + title: modalTitleClass, header: modalHeaderClass, body: modalBodyClass, - footer: modalFooterClass, + footer: { + root: classNames(modalFooterClass, { [footerAlignClasses[footerAlignment]]: footerAlignment }), + description: modalFooterDescriptionClass, + actions: modalFooterActionsClass, + }, }; return { diff --git a/packages/web-react/src/components/ModalComposed/ModalComposed.stories.tsx b/packages/web-react/src/components/ModalComposed/ModalComposed.stories.tsx deleted file mode 100644 index 50cbfbf52c..0000000000 --- a/packages/web-react/src/components/ModalComposed/ModalComposed.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import { ComponentMeta } from '@storybook/react'; -import ModalComposed from './ModalComposed'; - -export default { - title: 'Components/ModalComposed', - component: ModalComposed, - parameters: { - docs: { - description: { - component: 'Add dialogs to your site for lightboxes, user notifications, or completely custom content.', - }, - }, - }, -} as ComponentMeta; - -export { default as ModalComposed } from './stories/ModalComposed'; -export { default as ModalComposedWithCustomHeight } from './stories/ModalComposedWithCustomHeight'; -export { default as ModalComposedWithLongText } from './stories/ModalComposedWithLongText'; -export { default as HTML } from './stories/ModalComposedHtml'; -export { default as Props } from './stories/ModalComposedProps'; diff --git a/packages/web-react/src/components/ModalComposed/ModalComposed.tsx b/packages/web-react/src/components/ModalComposed/ModalComposed.tsx deleted file mode 100644 index 049ffe7e84..0000000000 --- a/packages/web-react/src/components/ModalComposed/ModalComposed.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react'; -import classNames from 'classnames'; -import { useStyleProps, useLastActiveFocus, useDeprecationMessage } from '../../hooks'; -import { SpiritModalComposedProps } from '../../types/modalComposed'; -import { useModalComposedStyleProps } from './useModalComposedStyleProps'; -import { ModalProvider } from './ModalComposedContext'; -import Dialog from '../Dialog/Dialog'; - -const ModalComposed = (props: SpiritModalComposedProps) => { - const { children, isOpen, onClose, id, ...restProps } = props; - const { classProps } = useModalComposedStyleProps(); - const { styleProps, props: otherProps } = useStyleProps(restProps); - - const contextValue = { - id, - isOpen, - onClose, - }; - - useLastActiveFocus(isOpen); - - useDeprecationMessage({ - method: 'component', - trigger: true, - componentName: 'ModalComposed', - componentProps: { - newName: 'Modal', - }, - }); - - return ( - - - {children} - - - ); -}; - -export default ModalComposed; diff --git a/packages/web-react/src/components/ModalComposed/ModalComposedBody.tsx b/packages/web-react/src/components/ModalComposed/ModalComposedBody.tsx deleted file mode 100644 index ba80d7f34c..0000000000 --- a/packages/web-react/src/components/ModalComposed/ModalComposedBody.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import classNames from 'classnames'; -import { useStyleProps } from '../../hooks'; -import { ModalComposedBodyProps } from '../../types/modalComposed'; -import { useModalComposedStyleProps } from './useModalComposedStyleProps'; - -const ModalComposedBody = ({ children, ...restProps }: ModalComposedBodyProps) => { - const { classProps } = useModalComposedStyleProps(); - const { styleProps, props: otherProps } = useStyleProps(restProps); - - return ( -
- {children} -
- ); -}; - -export default ModalComposedBody; diff --git a/packages/web-react/src/components/ModalComposed/ModalComposedContext.ts b/packages/web-react/src/components/ModalComposed/ModalComposedContext.ts deleted file mode 100644 index fc9fad506c..0000000000 --- a/packages/web-react/src/components/ModalComposed/ModalComposedContext.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { createContext, useContext } from 'react'; -import { ModalComposedDialogHandlingProps } from '../../types/modalComposed'; - -export type ModalContextProps = { - id: string; -} & ModalComposedDialogHandlingProps; - -const defaultContext: ModalContextProps = { - id: '', - isOpen: false, - onClose: () => null, -}; - -const ModalComposedContext = createContext(defaultContext); -const ModalProvider = ModalComposedContext.Provider; -const ModalConsumer = ModalComposedContext.Consumer; -const useModalContext = (): ModalContextProps => useContext(ModalComposedContext); - -export default ModalComposedContext; -export { ModalProvider, ModalConsumer, useModalContext }; diff --git a/packages/web-react/src/components/ModalComposed/ModalComposedFooter.tsx b/packages/web-react/src/components/ModalComposed/ModalComposedFooter.tsx deleted file mode 100644 index c02d22b27a..0000000000 --- a/packages/web-react/src/components/ModalComposed/ModalComposedFooter.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; -import classNames from 'classnames'; -import { useStyleProps, useDeprecationMessage } from '../../hooks'; -import { ModalComposedFooterProps } from '../../types'; -import { useModalComposedStyleProps } from './useModalComposedStyleProps'; - -const ModalComposedFooter = (props: ModalComposedFooterProps) => { - const { children, alignmentX = 'right', align = 'right', description, ...restProps } = props; - - const { classProps } = useModalComposedStyleProps({ footerAlignment: alignmentX || align }); - const { styleProps, props: otherProps } = useStyleProps(restProps); - - useDeprecationMessage({ - method: 'property', - trigger: !!align, - componentName: 'ModalComposedFooter', - propertyProps: { - deprecatedName: 'align', - newName: 'alignmentX', - }, - }); - - return ( -
- {description &&
{description}
} -
{children}
-
- ); -}; - -export default ModalComposedFooter; diff --git a/packages/web-react/src/components/ModalComposed/ModalComposedHeader.tsx b/packages/web-react/src/components/ModalComposed/ModalComposedHeader.tsx deleted file mode 100644 index cf2a64086f..0000000000 --- a/packages/web-react/src/components/ModalComposed/ModalComposedHeader.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import classNames from 'classnames'; -import { useStyleProps } from '../../hooks'; -import { ModalComposedHeaderProps } from '../../types/modalComposed'; -import { useModalComposedStyleProps } from './useModalComposedStyleProps'; -import { useModalContext } from './ModalComposedContext'; -import { Button } from '../Button'; -import { Icon } from '../Icon'; - -const ModalComposedHeader = (props: ModalComposedHeaderProps) => { - const { children, closeLabel = 'Close', ...restProps } = props; - - const { classProps } = useModalComposedStyleProps(); - const { styleProps, props: otherProps } = useStyleProps(restProps); - const { id, isOpen, onClose } = useModalContext(); - - return ( -
- {children && ( -

- {children} -

- )} - -
- ); -}; - -export default ModalComposedHeader; diff --git a/packages/web-react/src/components/ModalComposed/README.md b/packages/web-react/src/components/ModalComposed/README.md deleted file mode 100644 index d5a85b078d..0000000000 --- a/packages/web-react/src/components/ModalComposed/README.md +++ /dev/null @@ -1,134 +0,0 @@ -# Modal - -```jsx -import { - ModalComposed, - ModalComposedDialog, - ModalComposedBody, - ModalComposedHeader, - ModalComposedFooter, - Button, -} from '@lmc-eu/spirit-web-react/components'; -``` - -```jsx -const [isOpen, setOpen] = useState(false); - -const toggleModal = () => setOpen(!isOpen); - -const handleClose = () => { - setOpen(false); -}; - -// Trigger - - -// Modal - - - Modal Title - Modal Body - - - - - - -``` - -## An example using a form as a ModalDialog element - -```jsx - - - ... - - -``` - -## Modal Stacking - -⚠️ If you want to use Modal in the Modal, you need to follow the exact order of the implementation. -The Modal to be displayed on the top layer must be the first in the code and vice versa. - -## Modal - -**Available props** - -| Name | Type | Default | Required | Description | -| ------------------ | ---------------------------------------------- | ------- | -------- | ------------------------- | -| `id` | `string` | - | yes | Open state | -| `isOpen` | `boolean` | `false` | yes | Open state | -| `onClose` | `(event: ClickEvent or KeyboardEvent) => void` | - | yes | Callback on dialog closed | -| `children` | `ReactNode` | - | no | Children node | -| `UNSAFE_className` | `string` | - | no | Modal custom class name | -| `UNSAFE_style` | `CSSProperties` | - | no | Modal custom style | - -The rest of the properties are created from the default `` element. [More about the element][DialogElementDocs] - -## ModalDialog - -**Available props** - -| Name | Type | Default | Required | Description | -| -------------------- | ------------------- | ----------- | -------- | ---------------------------------------------------- | -| `elementType` | `'article', 'form'` | `'article'` | no | ModalDialog element type | -| `children` | `ReactNode` | - | no | Children node | -| `UNSAFE_className` | `string` | - | no | ModalDialog custom class name | -| `UNSAFE_style` | `CSSProperties` | - | no | ModalDialog custom style | -| `isExpandedOnMobile` | `boolean` | - | no | ModalDialog shrinks to fit the height of its content | - -The rest of the properties are formed from the selected type of element. Documentation for [Article][ArticleElementDocs], [Form][FormElementDocs]. - -## ModalHeader - -**Available props** - -| Name | Type | Default | Required | Description | -| ------------------ | --------------- | ------- | -------- | ----------------------------- | -| `children` | `ReactNode` | - | no | Children node | -| `closeLabel` | `string` | - | no | Close button label | -| `UNSAFE_className` | `string` | - | no | ModalHeader custom class name | -| `UNSAFE_style` | `CSSProperties` | - | no | ModalHeader custom style | - -The rest of the properties are based from type of `HTMLElement`. [Docs][HTMLElementDocs] - -## ModalBody - -**Available props** - -| Name | Type | Default | Required | Description | -| ------------------ | --------------- | ------- | -------- | --------------------------- | -| `children` | `ReactNode` | - | no | Children node | -| `UNSAFE_className` | `string` | - | no | ModalBody custom class name | -| `UNSAFE_style` | `CSSProperties` | - | no | ModalBody custom style | - -The rest of the properties are created from the default `
` element. [Docs][DivElementDocs] - -## ModalFooter - -**Available props** - -| Name | Type | Default | Required | Description | -| ------------------ | --------------------------------------------- | --------- | -------- | ---------------------------------------------------------------------------- | -| `children` | `ReactNode` | - | no | Children node | -| `align` | [AlignmentX dictionary][dictionary-alignment] | `'right'` | no | [**DEPRECATED**][deprecated] in favor of `alignmentX`; ModalFooter alignment | -| `alignmentX` | [AlignmentX dictionary][dictionary-alignment] | `'right'` | no | ModalFooter alignment | -| `UNSAFE_className` | `string` | - | no | ModalFooter custom class name | -| `UNSAFE_style` | `CSSProperties` | - | no | ModalFooter custom style | - -The rest of the properties are based from type of `HTMLElement`. [Docs][HTMLElementDocs] - -[DialogElementDocs]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog -[ArticleElementDocs]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article -[FormElementDocs]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form -[DivElementDocs]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div -[HTMLElementDocs]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement -[dictionary-alignment]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#alignment -[deprecated]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-react/README.md#deprecations diff --git a/packages/web-react/src/components/ModalComposed/__tests__/ModalComposed.test.tsx b/packages/web-react/src/components/ModalComposed/__tests__/ModalComposed.test.tsx deleted file mode 100644 index 2fe5f3ce18..0000000000 --- a/packages/web-react/src/components/ModalComposed/__tests__/ModalComposed.test.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import '@testing-library/jest-dom'; -import React from 'react'; -import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest'; -import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest'; -import { restPropsTest } from '../../../../tests/providerTests/restPropsTest'; -import ModalComposed from '../ModalComposed'; -import { ModalProps } from '../../../types'; - -describe('ModalComposed', () => { - const ModalTest = (props: ModalProps) => ( - null}> -
Test
- - ); - - classNamePrefixProviderTest(ModalTest, 'Modal'); - - stylePropsTest(ModalTest); - - restPropsTest(ModalTest, 'dialog'); -}); diff --git a/packages/web-react/src/components/ModalComposed/__tests__/ModalComposedDialog.test.tsx b/packages/web-react/src/components/ModalComposed/__tests__/ModalComposedDialog.test.tsx deleted file mode 100644 index 202fddec20..0000000000 --- a/packages/web-react/src/components/ModalComposed/__tests__/ModalComposedDialog.test.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import '@testing-library/jest-dom'; -import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest'; -import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest'; -import { restPropsTest } from '../../../../tests/providerTests/restPropsTest'; -import ModalComposedDialog from '../ModalComposedDialog'; - -describe('ModalComposedDialog', () => { - classNamePrefixProviderTest(ModalComposedDialog, 'ModalDialog'); - - stylePropsTest(ModalComposedDialog); - - restPropsTest(ModalComposedDialog, 'article'); -}); diff --git a/packages/web-react/src/components/ModalComposed/__tests__/ModalComposedFooter.test.tsx b/packages/web-react/src/components/ModalComposed/__tests__/ModalComposedFooter.test.tsx deleted file mode 100644 index bb5b8a1e48..0000000000 --- a/packages/web-react/src/components/ModalComposed/__tests__/ModalComposedFooter.test.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import '@testing-library/jest-dom'; -import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest'; -import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest'; -import { restPropsTest } from '../../../../tests/providerTests/restPropsTest'; -import ModalComposedFooter from '../ModalComposedFooter'; - -describe('ModalComposedFooter', () => { - classNamePrefixProviderTest(ModalComposedFooter, 'ModalFooter'); - - stylePropsTest(ModalComposedFooter); - - restPropsTest(ModalComposedFooter, 'footer'); -}); diff --git a/packages/web-react/src/components/ModalComposed/__tests__/ModalComposedHeader.test.tsx b/packages/web-react/src/components/ModalComposed/__tests__/ModalComposedHeader.test.tsx deleted file mode 100644 index 94609fc7cc..0000000000 --- a/packages/web-react/src/components/ModalComposed/__tests__/ModalComposedHeader.test.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import '@testing-library/jest-dom'; -import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest'; -import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest'; -import { restPropsTest } from '../../../../tests/providerTests/restPropsTest'; -import ModalComposedHeader from '../ModalComposedHeader'; - -describe('ModalComposedHeader', () => { - classNamePrefixProviderTest(ModalComposedHeader, 'ModalHeader'); - - stylePropsTest(ModalComposedHeader); - - restPropsTest(ModalComposedHeader, 'header'); -}); diff --git a/packages/web-react/src/components/ModalComposed/__tests__/useModalComposedStyleProps.test.ts b/packages/web-react/src/components/ModalComposed/__tests__/useModalComposedStyleProps.test.ts deleted file mode 100644 index 9c66f3861c..0000000000 --- a/packages/web-react/src/components/ModalComposed/__tests__/useModalComposedStyleProps.test.ts +++ /dev/null @@ -1,17 +0,0 @@ -import { renderHook } from '@testing-library/react-hooks'; -import { useModalComposedStyleProps } from '../useModalComposedStyleProps'; - -describe('useModalStyleProps', () => { - it('should return defaults', () => { - const { result } = renderHook(() => useModalComposedStyleProps({})); - - expect(result.current.classProps.root).toBe('Modal Modal--composed'); - expect(result.current.classProps.dialog).toBe('ModalDialog'); - expect(result.current.classProps.title).toBe('ModalHeader__title'); - expect(result.current.classProps.header).toBe('ModalHeader'); - expect(result.current.classProps.body).toBe('ModalBody'); - expect(result.current.classProps.footer.root).toBe('ModalFooter ModalFooter--right'); - expect(result.current.classProps.footer.description).toBe('ModalFooter__description'); - expect(result.current.classProps.footer.actions).toBe('ModalFooter__actions'); - }); -}); diff --git a/packages/web-react/src/components/ModalComposed/index.ts b/packages/web-react/src/components/ModalComposed/index.ts deleted file mode 100644 index 44b1e1dfc7..0000000000 --- a/packages/web-react/src/components/ModalComposed/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -export { default as ModalComposed } from './ModalComposed'; -export { default as ModalComposedDialog } from './ModalComposedDialog'; -export { default as ModalComposedBody } from './ModalComposedBody'; -export { default as ModalComposedHeader } from './ModalComposedHeader'; -export { default as ModalComposedFooter } from './ModalComposedFooter'; -export * from './ModalComposedContext'; -export * from './useModalComposedStyleProps'; diff --git a/packages/web-react/src/components/ModalComposed/stories/ModalComposed.tsx b/packages/web-react/src/components/ModalComposed/stories/ModalComposed.tsx deleted file mode 100644 index 452826e10f..0000000000 --- a/packages/web-react/src/components/ModalComposed/stories/ModalComposed.tsx +++ /dev/null @@ -1,51 +0,0 @@ -// Because there is no `dist` directory during the CI run -/* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */ -import React, { useState } from 'react'; -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore: No declaration file -import icons from '@lmc-eu/spirit-icons/dist/icons'; -import { IconsProvider } from '../../../context'; -import ModalComposed from '../ModalComposed'; -import ModalComposedDialog from '../ModalComposedDialog'; -import ModalComposedBody from '../ModalComposedBody'; -import ModalComposedHeader from '../ModalComposedHeader'; -import ModalComposedFooter from '../ModalComposedFooter'; -import { Button } from '../../Button'; - -// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244 -// eslint-disable-next-line @typescript-eslint/no-unused-vars -const Story = (props: unknown) => { - const [isOpen, setOpen] = useState(false); - - const toggleModal = () => setOpen(!isOpen); - - const handleClose = () => { - setOpen(false); - }; - - return ( - -
- -
- - - Modal title - Body - - - - - - - - ); -}; - -export default Story; diff --git a/packages/web-react/src/components/ModalComposed/stories/ModalComposedHtml.tsx b/packages/web-react/src/components/ModalComposed/stories/ModalComposedHtml.tsx deleted file mode 100644 index 97bd71ac42..0000000000 --- a/packages/web-react/src/components/ModalComposed/stories/ModalComposedHtml.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import React from 'react'; -import Html from '../../../../docs/stories/Html'; - -const Story = () => ; - -export default Story; diff --git a/packages/web-react/src/components/ModalComposed/stories/ModalComposedProps.tsx b/packages/web-react/src/components/ModalComposed/stories/ModalComposedProps.tsx deleted file mode 100644 index b307dc09db..0000000000 --- a/packages/web-react/src/components/ModalComposed/stories/ModalComposedProps.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; -import ModalComposed from '../ModalComposed'; -import Props from '../../../../docs/stories/Props'; - -const Story = () => ; - -export default Story; diff --git a/packages/web-react/src/components/ModalComposed/stories/ModalComposedWithLongText.tsx b/packages/web-react/src/components/ModalComposed/stories/ModalComposedWithLongText.tsx deleted file mode 100644 index 54806ea011..0000000000 --- a/packages/web-react/src/components/ModalComposed/stories/ModalComposedWithLongText.tsx +++ /dev/null @@ -1,92 +0,0 @@ -// Because there is no `dist` directory during the CI run -/* eslint-disable import/no-extraneous-dependencies, import/extensions, import/no-unresolved */ -import React, { useState } from 'react'; -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore: No declaration file -import icons from '@lmc-eu/spirit-icons/dist/icons'; -import { IconsProvider } from '../../../context'; -import ModalComposed from '../ModalComposed'; -import ModalComposedDialog from '../ModalComposedDialog'; -import ModalComposedBody from '../ModalComposedBody'; -import ModalComposedHeader from '../ModalComposedHeader'; -import ModalComposedFooter from '../ModalComposedFooter'; -import { Button } from '../../Button'; - -// @see: https://github.com/storybookjs/storybook/issues/8104#issuecomment-932310244 -// eslint-disable-next-line @typescript-eslint/no-unused-vars -const Story = (props: unknown) => { - const [isOpen, setOpen] = useState(false); - - const toggleModal = () => setOpen(!isOpen); - - const handleClose = () => { - setOpen(false); - }; - - return ( - -
- -
- - - Modal title - -

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia - perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis - provident unde. Eveniet, iste, molestiae? -

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia - perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis - provident unde. Eveniet, iste, molestiae? -

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia - perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis - provident unde. Eveniet, iste, molestiae? -

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia - perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis - provident unde. Eveniet, iste, molestiae? -

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia - perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis - provident unde. Eveniet, iste, molestiae? -

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia - perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis - provident unde. Eveniet, iste, molestiae? -

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia - perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis - provident unde. Eveniet, iste, molestiae? -

-

- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia - perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis - provident unde. Eveniet, iste, molestiae? -

- - - - - - - - - ); -}; - -export default Story; diff --git a/packages/web-react/src/components/ModalComposed/useModalComposedStyleProps.ts b/packages/web-react/src/components/ModalComposed/useModalComposedStyleProps.ts deleted file mode 100644 index dc08f60eb8..0000000000 --- a/packages/web-react/src/components/ModalComposed/useModalComposedStyleProps.ts +++ /dev/null @@ -1,63 +0,0 @@ -import classNames from 'classnames'; -import { AlignmentXDictionaryType } from '../../types'; -import { useClassNamePrefix } from '../../hooks'; - -export interface ModalComposedStylesProps { - footerAlignment?: AlignmentXDictionaryType; - isExpandedOnMobile?: boolean; -} - -export interface ModalComposedStylesReturn { - /** className props */ - classProps: { - root: string; - dialog: string; - title: string; - header: string; - body: string; - footer: { - root: string; - description: string; - actions: string; - }; - }; -} - -export function useModalComposedStyleProps( - { footerAlignment = 'right', isExpandedOnMobile }: ModalComposedStylesProps = { - footerAlignment: 'right', - isExpandedOnMobile: false, - }, -): ModalComposedStylesReturn { - const modalClass = useClassNamePrefix('Modal'); - const modalComposedClass = `${modalClass}--composed`; - const modalDialogClass = `${modalClass}Dialog`; - const modalDialogExpandedOnMobileClass = `${modalDialogClass}--expandOnMobile`; - const modalHeaderClass = `${modalClass}Header`; - const modalTitleClass = `${modalHeaderClass}__title`; - const modalBodyClass = `${modalClass}Body`; - const modalFooterClass = `${modalClass}Footer`; - const modalFooterDescriptionClass = `${modalFooterClass}__description`; - const modalFooterActionsClass = `${modalFooterClass}__actions`; - const footerAlignClasses = { - left: `${modalFooterClass}--left`, - center: `${modalFooterClass}--center`, - right: `${modalFooterClass}--right`, - }; - const classProps = { - root: classNames(modalClass, modalComposedClass), - dialog: classNames(modalDialogClass, { [modalDialogExpandedOnMobileClass]: isExpandedOnMobile }), - title: modalTitleClass, - header: modalHeaderClass, - body: modalBodyClass, - footer: { - root: classNames(modalFooterClass, { [footerAlignClasses[footerAlignment]]: footerAlignment }), - description: modalFooterDescriptionClass, - actions: modalFooterActionsClass, - }, - }; - - return { - classProps, - }; -} diff --git a/packages/web-react/src/components/index.ts b/packages/web-react/src/components/index.ts index 2284d4557c..c77601dca2 100644 --- a/packages/web-react/src/components/index.ts +++ b/packages/web-react/src/components/index.ts @@ -15,7 +15,6 @@ export * from './Heading'; export * from './Icon'; export * from './Link'; export * from './Modal'; -export * from './ModalComposed'; export * from './Pagination'; export * from './Pill'; export * from './RadioField'; diff --git a/packages/web-react/src/types/index.ts b/packages/web-react/src/types/index.ts index b831b30655..e934331d3d 100644 --- a/packages/web-react/src/types/index.ts +++ b/packages/web-react/src/types/index.ts @@ -14,7 +14,6 @@ export * from './label'; export * from './link'; export * from './message'; export * from './modal'; -export * from './modalComposed'; export * from './pagination'; export * from './pill'; export * from './radioField'; diff --git a/packages/web-react/src/types/modal.ts b/packages/web-react/src/types/modal.ts index 61c23dca51..937846544a 100644 --- a/packages/web-react/src/types/modal.ts +++ b/packages/web-react/src/types/modal.ts @@ -1,5 +1,49 @@ -import { DialogProps, ElementTypeProps, ChildrenProps, TransferProps } from './shared'; +import { ElementType, ComponentPropsWithRef } from 'react'; +import { + ChildrenProps, + ClickEvent, + OmittedExtendedUnsafeStyleProps, + StyleProps, + SpiritDivElementProps, + SpiritDialogElementProps, + SpiritElementProps, + AlignmentXDictionaryType, +} from './shared'; -export interface ModalProps extends DialogProps {} +export type ModalDialogElementType = 'article' | 'form'; -export interface ModalMemberProps extends ChildrenProps, TransferProps, ElementTypeProps {} +export type ModalDialogHandlingProps = { + isOpen: boolean; + onClose: (event: ClickEvent) => void; +}; + +export type ModalDialogBaseProps = { + elementType?: E; + isExpandedOnMobile?: boolean; +} & ChildrenProps & + StyleProps; + +export type ModalDialogProps = { + maxHeightFromTabletUp?: string; + preferredHeightOnMobile?: string; + preferredHeightFromTabletUp?: string; +} & ModalDialogBaseProps & + OmittedExtendedUnsafeStyleProps, keyof ModalDialogBaseProps>; + +export interface ModalBodyProps extends SpiritDivElementProps, ChildrenProps {} + +export interface ModalHeaderProps extends SpiritElementProps, ChildrenProps { + closeLabel?: string; +} + +export interface ModalFooterProps extends SpiritElementProps, ChildrenProps { + align?: AlignmentXDictionaryType; + alignmentX?: AlignmentXDictionaryType; + description?: string; +} + +export interface ModalBaseProps extends Omit, ModalDialogHandlingProps, ChildrenProps { + id: string; +} + +export interface SpiritModalProps extends ModalBaseProps {} diff --git a/packages/web-react/src/types/modalComposed.ts b/packages/web-react/src/types/modalComposed.ts deleted file mode 100644 index 411e39bde8..0000000000 --- a/packages/web-react/src/types/modalComposed.ts +++ /dev/null @@ -1,52 +0,0 @@ -import { ElementType, ComponentPropsWithRef } from 'react'; -import { - ChildrenProps, - ClickEvent, - OmittedExtendedUnsafeStyleProps, - StyleProps, - SpiritDivElementProps, - SpiritDialogElementProps, - SpiritElementProps, - AlignmentXDictionaryType, -} from './shared'; - -export type ModalComposedDialogElementType = 'article' | 'form'; - -export type ModalComposedDialogHandlingProps = { - isOpen: boolean; - onClose: (event: ClickEvent) => void; -}; - -export type ModalComposedDialogBaseProps = { - elementType?: E; - isExpandedOnMobile?: boolean; -} & ChildrenProps & - StyleProps; - -export type ModalComposedDialogProps = { - maxHeightFromTabletUp?: string; - preferredHeightOnMobile?: string; - preferredHeightFromTabletUp?: string; -} & ModalComposedDialogBaseProps & - OmittedExtendedUnsafeStyleProps, keyof ModalComposedDialogBaseProps>; - -export interface ModalComposedBodyProps extends SpiritDivElementProps, ChildrenProps {} - -export interface ModalComposedHeaderProps extends SpiritElementProps, ChildrenProps { - closeLabel?: string; -} - -export interface ModalComposedFooterProps extends SpiritElementProps, ChildrenProps { - align?: AlignmentXDictionaryType; - alignmentX?: AlignmentXDictionaryType; - description?: string; -} - -export interface ModalComposedBaseProps - extends Omit, - ModalComposedDialogHandlingProps, - ChildrenProps { - id: string; -} - -export interface SpiritModalComposedProps extends ModalComposedBaseProps {}