diff --git a/packages/core/.storybook/manager.jsx b/packages/core/.storybook/manager.jsx index 47e73d451d..26e7a5d6a6 100644 --- a/packages/core/.storybook/manager.jsx +++ b/packages/core/.storybook/manager.jsx @@ -16,7 +16,7 @@ addons.setConfig({ const [statusMatch, statusType] = statusRegex.exec(name) || []; if (statusMatch) { - return {name.replace(statusMatch, "").trim()}; + return {name.replace(statusMatch, "").trim()}; } const { status: storyStatus } = parameters; diff --git a/packages/core/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/core/src/__tests__/__snapshots__/exports.test.ts.snap index a3e52b242a..101cef8d4c 100644 --- a/packages/core/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/packages/core/src/__tests__/__snapshots__/exports.test.ts.snap @@ -110,4 +110,16 @@ exports[`exports should export all components 1`] = ` ] `; -exports[`exports should export next all components 1`] = `[]`; +exports[`exports should export next all components 1`] = ` +[ + "Modal", + "ModalBasicLayout", + "ModalContent", + "ModalFooter", + "ModalFooterWizard", + "ModalHeader", + "ModalMedia", + "ModalMediaLayout", + "ModalSideBySideLayout", +] +`; diff --git a/packages/core/src/components/LegacyModal/__stories__/LegacyModal.mdx b/packages/core/src/components/LegacyModal/__stories__/LegacyModal.mdx index 43244b7099..98f94c23dc 100644 --- a/packages/core/src/components/LegacyModal/__stories__/LegacyModal.mdx +++ b/packages/core/src/components/LegacyModal/__stories__/LegacyModal.mdx @@ -1,4 +1,4 @@ -import { ComponentRules/*, DeprecatedWarning*/, UsageGuidelines } from "vibe-storybook-components"; +import { ComponentRules, DeprecatedWarning, UsageGuidelines } from "vibe-storybook-components"; import { Canvas, Meta } from "@storybook/blocks"; import { DIALOG, TIPSEEN, TOOLTIP } from "../../../storybook/components/related-components/component-description-map"; import { @@ -12,10 +12,9 @@ import * as ModalStories from "./LegacyModal.stories"; -# Modal +# Modal - Deprecated -[//]: # (// TODO should be added once new Modal is exported) -[//]: # () + - [Overview](#overview) - [Import](#import) diff --git a/packages/core/src/components/LegacyModal/__stories__/LegacyModal.stories.tsx b/packages/core/src/components/LegacyModal/__stories__/LegacyModal.stories.tsx index b0d6579237..80b82c978f 100644 --- a/packages/core/src/components/LegacyModal/__stories__/LegacyModal.stories.tsx +++ b/packages/core/src/components/LegacyModal/__stories__/LegacyModal.stories.tsx @@ -53,7 +53,7 @@ const modalTemplate = ({ onClose, ...modalProps }: ModalProps) => { }; export default { - title: "Components/Modal", + title: "Components/Modal [Deprecated]", component: Modal, subcomponents: { ModalHeader, diff --git a/packages/core/src/components/ModalNew/Modal/Modal.module.scss b/packages/core/src/components/Modal/Modal/Modal.module.scss similarity index 95% rename from packages/core/src/components/ModalNew/Modal/Modal.module.scss rename to packages/core/src/components/Modal/Modal/Modal.module.scss index 4da8d1afa2..ea27b4abdd 100644 --- a/packages/core/src/components/ModalNew/Modal/Modal.module.scss +++ b/packages/core/src/components/Modal/Modal/Modal.module.scss @@ -2,7 +2,7 @@ --monday-modal-z-index: 10000; position: fixed; inset: 0; - background-color: rgba(41, 47, 76, 0.7); + background-color: var(--color-surface); z-index: var(--monday-modal-z-index); } diff --git a/packages/core/src/components/ModalNew/Modal/Modal.tsx b/packages/core/src/components/Modal/Modal/Modal.tsx similarity index 99% rename from packages/core/src/components/ModalNew/Modal/Modal.tsx rename to packages/core/src/components/Modal/Modal/Modal.tsx index 0a0a7fae54..d40514e829 100644 --- a/packages/core/src/components/ModalNew/Modal/Modal.tsx +++ b/packages/core/src/components/Modal/Modal/Modal.tsx @@ -98,7 +98,7 @@ const Modal = forwardRef( + # Modal diff --git a/packages/core/src/components/ModalNew/Modal/__stories__/Modal.stories.helpers.tsx b/packages/core/src/components/Modal/Modal/__stories__/Modal.stories.helpers.tsx similarity index 94% rename from packages/core/src/components/ModalNew/Modal/__stories__/Modal.stories.helpers.tsx rename to packages/core/src/components/Modal/Modal/__stories__/Modal.stories.helpers.tsx index fa63e02beb..8d289468df 100644 --- a/packages/core/src/components/ModalNew/Modal/__stories__/Modal.stories.helpers.tsx +++ b/packages/core/src/components/Modal/Modal/__stories__/Modal.stories.helpers.tsx @@ -4,7 +4,6 @@ import { StorybookLink, Tip } from "vibe-storybook-components"; import { useAfterFirstRender } from "../../../../hooks"; import cx from "classnames"; import styles from "./Modal.stories.module.scss"; -import { createPortal } from "react-dom"; import { getStyle } from "../../../../helpers/typesciptCssModulesHelper"; export const OpenedModalPreview = forwardRef( @@ -25,14 +24,14 @@ export const OpenedModalPreview = forwardRef( const isAfterFirstRender = useAfterFirstRender(); return (
- {isDocsView ? modal : createPortal(modal, document.body)} + {modal}
); } diff --git a/packages/core/src/components/ModalNew/Modal/__stories__/Modal.stories.module.scss b/packages/core/src/components/Modal/Modal/__stories__/Modal.stories.module.scss similarity index 98% rename from packages/core/src/components/ModalNew/Modal/__stories__/Modal.stories.module.scss rename to packages/core/src/components/Modal/Modal/__stories__/Modal.stories.module.scss index c54af9e71a..d98b242a65 100644 --- a/packages/core/src/components/ModalNew/Modal/__stories__/Modal.stories.module.scss +++ b/packages/core/src/components/Modal/Modal/__stories__/Modal.stories.module.scss @@ -7,7 +7,7 @@ .preview { padding-inline-start: 32px; padding-block-start: 40px; - height: 360px; + height: 100vh; width: 100%; container-type: inline-size; diff --git a/packages/core/src/components/ModalNew/Modal/__stories__/assets/backdrop-do.png b/packages/core/src/components/Modal/Modal/__stories__/assets/backdrop-do.png similarity index 100% rename from packages/core/src/components/ModalNew/Modal/__stories__/assets/backdrop-do.png rename to packages/core/src/components/Modal/Modal/__stories__/assets/backdrop-do.png diff --git a/packages/core/src/components/ModalNew/Modal/__stories__/assets/backdrop-dont.png b/packages/core/src/components/Modal/Modal/__stories__/assets/backdrop-dont.png similarity index 100% rename from packages/core/src/components/ModalNew/Modal/__stories__/assets/backdrop-dont.png rename to packages/core/src/components/Modal/Modal/__stories__/assets/backdrop-dont.png diff --git a/packages/core/src/components/ModalNew/Modal/__stories__/assets/cta-do.png b/packages/core/src/components/Modal/Modal/__stories__/assets/cta-do.png similarity index 100% rename from packages/core/src/components/ModalNew/Modal/__stories__/assets/cta-do.png rename to packages/core/src/components/Modal/Modal/__stories__/assets/cta-do.png diff --git a/packages/core/src/components/ModalNew/Modal/__stories__/assets/cta-dont.png b/packages/core/src/components/Modal/Modal/__stories__/assets/cta-dont.png similarity index 100% rename from packages/core/src/components/ModalNew/Modal/__stories__/assets/cta-dont.png rename to packages/core/src/components/Modal/Modal/__stories__/assets/cta-dont.png diff --git a/packages/core/src/components/ModalNew/Modal/__stories__/assets/loading-do.png b/packages/core/src/components/Modal/Modal/__stories__/assets/loading-do.png similarity index 100% rename from packages/core/src/components/ModalNew/Modal/__stories__/assets/loading-do.png rename to packages/core/src/components/Modal/Modal/__stories__/assets/loading-do.png diff --git a/packages/core/src/components/ModalNew/Modal/__stories__/assets/loading-dont.png b/packages/core/src/components/Modal/Modal/__stories__/assets/loading-dont.png similarity index 100% rename from packages/core/src/components/ModalNew/Modal/__stories__/assets/loading-dont.png rename to packages/core/src/components/Modal/Modal/__stories__/assets/loading-dont.png diff --git a/packages/core/src/components/ModalNew/Modal/__tests__/Modal.test.tsx b/packages/core/src/components/Modal/Modal/__tests__/Modal.test.tsx similarity index 100% rename from packages/core/src/components/ModalNew/Modal/__tests__/Modal.test.tsx rename to packages/core/src/components/Modal/Modal/__tests__/Modal.test.tsx diff --git a/packages/core/src/components/Modal/Modal/index.ts b/packages/core/src/components/Modal/Modal/index.ts new file mode 100644 index 0000000000..a310840d40 --- /dev/null +++ b/packages/core/src/components/Modal/Modal/index.ts @@ -0,0 +1,2 @@ +export { default as Modal } from "./Modal"; +export { ModalProps } from "./Modal.types"; diff --git a/packages/core/src/components/ModalNew/ModalContent/ModalContent.tsx b/packages/core/src/components/Modal/ModalContent/ModalContent.tsx similarity index 100% rename from packages/core/src/components/ModalNew/ModalContent/ModalContent.tsx rename to packages/core/src/components/Modal/ModalContent/ModalContent.tsx diff --git a/packages/core/src/components/ModalNew/ModalContent/ModalContent.types.ts b/packages/core/src/components/Modal/ModalContent/ModalContent.types.ts similarity index 100% rename from packages/core/src/components/ModalNew/ModalContent/ModalContent.types.ts rename to packages/core/src/components/Modal/ModalContent/ModalContent.types.ts diff --git a/packages/core/src/components/Modal/ModalContent/index.ts b/packages/core/src/components/Modal/ModalContent/index.ts new file mode 100644 index 0000000000..824254b460 --- /dev/null +++ b/packages/core/src/components/Modal/ModalContent/index.ts @@ -0,0 +1,2 @@ +export { default as ModalContent } from "./ModalContent"; +export { ModalContentProps } from "./ModalContent.types"; diff --git a/packages/core/src/components/ModalNew/ModalHeader/ModalHeader.module.scss b/packages/core/src/components/Modal/ModalHeader/ModalHeader.module.scss similarity index 100% rename from packages/core/src/components/ModalNew/ModalHeader/ModalHeader.module.scss rename to packages/core/src/components/Modal/ModalHeader/ModalHeader.module.scss diff --git a/packages/core/src/components/ModalNew/ModalHeader/ModalHeader.tsx b/packages/core/src/components/Modal/ModalHeader/ModalHeader.tsx similarity index 100% rename from packages/core/src/components/ModalNew/ModalHeader/ModalHeader.tsx rename to packages/core/src/components/Modal/ModalHeader/ModalHeader.tsx diff --git a/packages/core/src/components/ModalNew/ModalHeader/ModalHeader.types.ts b/packages/core/src/components/Modal/ModalHeader/ModalHeader.types.ts similarity index 100% rename from packages/core/src/components/ModalNew/ModalHeader/ModalHeader.types.ts rename to packages/core/src/components/Modal/ModalHeader/ModalHeader.types.ts diff --git a/packages/core/src/components/ModalNew/ModalHeader/__tests__/ModalHeader.test.tsx b/packages/core/src/components/Modal/ModalHeader/__tests__/ModalHeader.test.tsx similarity index 100% rename from packages/core/src/components/ModalNew/ModalHeader/__tests__/ModalHeader.test.tsx rename to packages/core/src/components/Modal/ModalHeader/__tests__/ModalHeader.test.tsx diff --git a/packages/core/src/components/Modal/ModalHeader/index.ts b/packages/core/src/components/Modal/ModalHeader/index.ts new file mode 100644 index 0000000000..97fb693bfe --- /dev/null +++ b/packages/core/src/components/Modal/ModalHeader/index.ts @@ -0,0 +1,2 @@ +export { default as ModalHeader } from "./ModalHeader"; +export { ModalHeaderProps } from "./ModalHeader.types"; diff --git a/packages/core/src/components/ModalNew/layouts/ModalMedia.module.scss b/packages/core/src/components/Modal/ModalMedia/ModalMedia.module.scss similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalMedia.module.scss rename to packages/core/src/components/Modal/ModalMedia/ModalMedia.module.scss diff --git a/packages/core/src/components/ModalNew/layouts/ModalMedia.tsx b/packages/core/src/components/Modal/ModalMedia/ModalMedia.tsx similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalMedia.tsx rename to packages/core/src/components/Modal/ModalMedia/ModalMedia.tsx diff --git a/packages/core/src/components/ModalNew/layouts/ModalMedia.types.ts b/packages/core/src/components/Modal/ModalMedia/ModalMedia.types.ts similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalMedia.types.ts rename to packages/core/src/components/Modal/ModalMedia/ModalMedia.types.ts diff --git a/packages/core/src/components/Modal/ModalMedia/index.ts b/packages/core/src/components/Modal/ModalMedia/index.ts new file mode 100644 index 0000000000..6a93bd4004 --- /dev/null +++ b/packages/core/src/components/Modal/ModalMedia/index.ts @@ -0,0 +1,2 @@ +export { default as ModalMedia } from "./ModalMedia"; +export { ModalMediaProps } from "./ModalMedia.types"; diff --git a/packages/core/src/components/ModalNew/ModalTopActions/ModalTopActions.module.scss b/packages/core/src/components/Modal/ModalTopActions/ModalTopActions.module.scss similarity index 100% rename from packages/core/src/components/ModalNew/ModalTopActions/ModalTopActions.module.scss rename to packages/core/src/components/Modal/ModalTopActions/ModalTopActions.module.scss diff --git a/packages/core/src/components/ModalNew/ModalTopActions/ModalTopActions.tsx b/packages/core/src/components/Modal/ModalTopActions/ModalTopActions.tsx similarity index 100% rename from packages/core/src/components/ModalNew/ModalTopActions/ModalTopActions.tsx rename to packages/core/src/components/Modal/ModalTopActions/ModalTopActions.tsx diff --git a/packages/core/src/components/ModalNew/ModalTopActions/ModalTopActions.types.ts b/packages/core/src/components/Modal/ModalTopActions/ModalTopActions.types.ts similarity index 100% rename from packages/core/src/components/ModalNew/ModalTopActions/ModalTopActions.types.ts rename to packages/core/src/components/Modal/ModalTopActions/ModalTopActions.types.ts diff --git a/packages/core/src/components/ModalNew/ModalTopActions/__tests__/ModalTopActions.test.tsx b/packages/core/src/components/Modal/ModalTopActions/__tests__/ModalTopActions.test.tsx similarity index 100% rename from packages/core/src/components/ModalNew/ModalTopActions/__tests__/ModalTopActions.test.tsx rename to packages/core/src/components/Modal/ModalTopActions/__tests__/ModalTopActions.test.tsx diff --git a/packages/core/src/components/ModalNew/context/ModalContext.tsx b/packages/core/src/components/Modal/context/ModalContext.tsx similarity index 100% rename from packages/core/src/components/ModalNew/context/ModalContext.tsx rename to packages/core/src/components/Modal/context/ModalContext.tsx diff --git a/packages/core/src/components/ModalNew/context/ModalContext.types.ts b/packages/core/src/components/Modal/context/ModalContext.types.ts similarity index 100% rename from packages/core/src/components/ModalNew/context/ModalContext.types.ts rename to packages/core/src/components/Modal/context/ModalContext.types.ts diff --git a/packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.module.scss b/packages/core/src/components/Modal/footers/ModalFooter/ModalFooter.module.scss similarity index 100% rename from packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.module.scss rename to packages/core/src/components/Modal/footers/ModalFooter/ModalFooter.module.scss diff --git a/packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.tsx b/packages/core/src/components/Modal/footers/ModalFooter/ModalFooter.tsx similarity index 100% rename from packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.tsx rename to packages/core/src/components/Modal/footers/ModalFooter/ModalFooter.tsx diff --git a/packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.types.ts b/packages/core/src/components/Modal/footers/ModalFooter/ModalFooter.types.ts similarity index 100% rename from packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.types.ts rename to packages/core/src/components/Modal/footers/ModalFooter/ModalFooter.types.ts diff --git a/packages/core/src/components/ModalNew/footers/ModalFooterBase/ModalFooterBase.module.scss b/packages/core/src/components/Modal/footers/ModalFooterBase/ModalFooterBase.module.scss similarity index 100% rename from packages/core/src/components/ModalNew/footers/ModalFooterBase/ModalFooterBase.module.scss rename to packages/core/src/components/Modal/footers/ModalFooterBase/ModalFooterBase.module.scss diff --git a/packages/core/src/components/ModalNew/footers/ModalFooterBase/ModalFooterBase.tsx b/packages/core/src/components/Modal/footers/ModalFooterBase/ModalFooterBase.tsx similarity index 100% rename from packages/core/src/components/ModalNew/footers/ModalFooterBase/ModalFooterBase.tsx rename to packages/core/src/components/Modal/footers/ModalFooterBase/ModalFooterBase.tsx diff --git a/packages/core/src/components/ModalNew/footers/ModalFooterBase/ModalFooterBase.types.ts b/packages/core/src/components/Modal/footers/ModalFooterBase/ModalFooterBase.types.ts similarity index 100% rename from packages/core/src/components/ModalNew/footers/ModalFooterBase/ModalFooterBase.types.ts rename to packages/core/src/components/Modal/footers/ModalFooterBase/ModalFooterBase.types.ts diff --git a/packages/core/src/components/ModalNew/footers/ModalFooterBase/__tests__/ModalFooterBase.test.tsx b/packages/core/src/components/Modal/footers/ModalFooterBase/__tests__/ModalFooterBase.test.tsx similarity index 100% rename from packages/core/src/components/ModalNew/footers/ModalFooterBase/__tests__/ModalFooterBase.test.tsx rename to packages/core/src/components/Modal/footers/ModalFooterBase/__tests__/ModalFooterBase.test.tsx diff --git a/packages/core/src/components/ModalNew/footers/ModalFooterWizard/ModalFooterWizard.module.scss b/packages/core/src/components/Modal/footers/ModalFooterWizard/ModalFooterWizard.module.scss similarity index 100% rename from packages/core/src/components/ModalNew/footers/ModalFooterWizard/ModalFooterWizard.module.scss rename to packages/core/src/components/Modal/footers/ModalFooterWizard/ModalFooterWizard.module.scss diff --git a/packages/core/src/components/ModalNew/footers/ModalFooterWizard/ModalFooterWizard.tsx b/packages/core/src/components/Modal/footers/ModalFooterWizard/ModalFooterWizard.tsx similarity index 100% rename from packages/core/src/components/ModalNew/footers/ModalFooterWizard/ModalFooterWizard.tsx rename to packages/core/src/components/Modal/footers/ModalFooterWizard/ModalFooterWizard.tsx diff --git a/packages/core/src/components/ModalNew/footers/ModalFooterWizard/ModalFooterWizard.types.ts b/packages/core/src/components/Modal/footers/ModalFooterWizard/ModalFooterWizard.types.ts similarity index 100% rename from packages/core/src/components/ModalNew/footers/ModalFooterWizard/ModalFooterWizard.types.ts rename to packages/core/src/components/Modal/footers/ModalFooterWizard/ModalFooterWizard.types.ts diff --git a/packages/core/src/components/Modal/footers/index.ts b/packages/core/src/components/Modal/footers/index.ts new file mode 100644 index 0000000000..8914e818e0 --- /dev/null +++ b/packages/core/src/components/Modal/footers/index.ts @@ -0,0 +1,5 @@ +export { default as ModalFooter } from "./ModalFooter/ModalFooter"; +export { ModalFooterProps } from "./ModalFooter/ModalFooter.types"; + +export { default as ModalFooterWizard } from "./ModalFooterWizard/ModalFooterWizard"; +export { ModalFooterWizardProps } from "./ModalFooterWizard/ModalFooterWizard.types"; diff --git a/packages/core/src/components/ModalNew/hooks/usePortalTarget/usePortalTarget.ts b/packages/core/src/components/Modal/hooks/usePortalTarget/usePortalTarget.ts similarity index 100% rename from packages/core/src/components/ModalNew/hooks/usePortalTarget/usePortalTarget.ts rename to packages/core/src/components/Modal/hooks/usePortalTarget/usePortalTarget.ts diff --git a/packages/core/src/components/ModalNew/hooks/usePortalTarget/usePortalTarget.types.ts b/packages/core/src/components/Modal/hooks/usePortalTarget/usePortalTarget.types.ts similarity index 100% rename from packages/core/src/components/ModalNew/hooks/usePortalTarget/usePortalTarget.types.ts rename to packages/core/src/components/Modal/hooks/usePortalTarget/usePortalTarget.types.ts diff --git a/packages/core/src/components/Modal/index.ts b/packages/core/src/components/Modal/index.ts new file mode 100644 index 0000000000..04a7ebd0a8 --- /dev/null +++ b/packages/core/src/components/Modal/index.ts @@ -0,0 +1,6 @@ +export * from "./footers"; +export * from "./layouts"; +export * from "./Modal"; +export * from "./ModalHeader"; +export * from "./ModalContent"; +export * from "./ModalMedia"; diff --git a/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/ModalBasicLayout.module.scss b/packages/core/src/components/Modal/layouts/ModalBasicLayout/ModalBasicLayout.module.scss similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalBasicLayout/ModalBasicLayout.module.scss rename to packages/core/src/components/Modal/layouts/ModalBasicLayout/ModalBasicLayout.module.scss diff --git a/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/ModalBasicLayout.tsx b/packages/core/src/components/Modal/layouts/ModalBasicLayout/ModalBasicLayout.tsx similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalBasicLayout/ModalBasicLayout.tsx rename to packages/core/src/components/Modal/layouts/ModalBasicLayout/ModalBasicLayout.tsx diff --git a/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/ModalBasicLayout.types.ts b/packages/core/src/components/Modal/layouts/ModalBasicLayout/ModalBasicLayout.types.ts similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalBasicLayout/ModalBasicLayout.types.ts rename to packages/core/src/components/Modal/layouts/ModalBasicLayout/ModalBasicLayout.types.ts diff --git a/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.mdx b/packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.mdx similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.mdx rename to packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.mdx diff --git a/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories.helpers.tsx b/packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories.helpers.tsx similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories.helpers.tsx rename to packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories.helpers.tsx diff --git a/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories.tsx b/packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories.tsx similarity index 97% rename from packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories.tsx rename to packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories.tsx index 087bba2df2..34b72ef104 100644 --- a/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories.tsx +++ b/packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayout.stories.tsx @@ -25,12 +25,14 @@ const metaSettings = createStoryMetaSettingsDecorator({ }); export default { - title: "Internal/Components/Modal [New]/Basic modal", + title: "Components/Modal [New]/Basic modal", component: Modal, subcomponents: { ModalBasicLayout, ModalHeader, ModalContent, ModalFooter, ModalFooterWizard, TransitionView }, argTypes: metaSettings.argTypes, decorators: metaSettings.decorators, - tags: ["internal"] + parameters: { + layout: "fullscreen" + } } satisfies Meta; export const Overview: Story = { @@ -165,7 +167,9 @@ export const AlertModal: Story = { - This will allow closing the modal only by the close buttons and not by ESC or by clicking outside. + + This will allow closing the modal only by the close buttons and not by ESC or by clicking outside. + withOpenedModalPreview(Story, { isDocsView: context.viewMode === "docs" })], render: (_, { show, setShow, container }) => { return ( - setShow(false)} container={container}> + setShow(false)} + container={container} + style={{ height: 400 }} + > diff --git a/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/ModalBasicLayoutRelatedComponent.tsx b/packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayoutRelatedComponent.tsx similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/ModalBasicLayoutRelatedComponent.tsx rename to packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayoutRelatedComponent.tsx diff --git a/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/assets/action-do.png b/packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/assets/action-do.png similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/assets/action-do.png rename to packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/assets/action-do.png diff --git a/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/assets/action-dont.png b/packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/assets/action-dont.png similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/assets/action-dont.png rename to packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/assets/action-dont.png diff --git a/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/assets/related-component.png b/packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/assets/related-component.png similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalBasicLayout/__stories__/assets/related-component.png rename to packages/core/src/components/Modal/layouts/ModalBasicLayout/__stories__/assets/related-component.png diff --git a/packages/core/src/components/ModalNew/layouts/ModalFooterShadow.module.scss b/packages/core/src/components/Modal/layouts/ModalFooterShadow.module.scss similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalFooterShadow.module.scss rename to packages/core/src/components/Modal/layouts/ModalFooterShadow.module.scss diff --git a/packages/core/src/components/ModalNew/layouts/ModalFooterShadow.tsx b/packages/core/src/components/Modal/layouts/ModalFooterShadow.tsx similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalFooterShadow.tsx rename to packages/core/src/components/Modal/layouts/ModalFooterShadow.tsx diff --git a/packages/core/src/components/ModalNew/layouts/ModalFooterShadow.types.ts b/packages/core/src/components/Modal/layouts/ModalFooterShadow.types.ts similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalFooterShadow.types.ts rename to packages/core/src/components/Modal/layouts/ModalFooterShadow.types.ts diff --git a/packages/core/src/components/ModalNew/layouts/ModalLayoutScrollableContent.module.scss b/packages/core/src/components/Modal/layouts/ModalLayoutScrollableContent.module.scss similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalLayoutScrollableContent.module.scss rename to packages/core/src/components/Modal/layouts/ModalLayoutScrollableContent.module.scss diff --git a/packages/core/src/components/ModalNew/layouts/ModalLayoutScrollableContent.tsx b/packages/core/src/components/Modal/layouts/ModalLayoutScrollableContent.tsx similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalLayoutScrollableContent.tsx rename to packages/core/src/components/Modal/layouts/ModalLayoutScrollableContent.tsx diff --git a/packages/core/src/components/ModalNew/layouts/ModalLayoutScrollableContent.types.ts b/packages/core/src/components/Modal/layouts/ModalLayoutScrollableContent.types.ts similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalLayoutScrollableContent.types.ts rename to packages/core/src/components/Modal/layouts/ModalLayoutScrollableContent.types.ts diff --git a/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/ModalMediaLayout.module.scss b/packages/core/src/components/Modal/layouts/ModalMediaLayout/ModalMediaLayout.module.scss similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalMediaLayout/ModalMediaLayout.module.scss rename to packages/core/src/components/Modal/layouts/ModalMediaLayout/ModalMediaLayout.module.scss diff --git a/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/ModalMediaLayout.tsx b/packages/core/src/components/Modal/layouts/ModalMediaLayout/ModalMediaLayout.tsx similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalMediaLayout/ModalMediaLayout.tsx rename to packages/core/src/components/Modal/layouts/ModalMediaLayout/ModalMediaLayout.tsx diff --git a/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/ModalMediaLayout.types.ts b/packages/core/src/components/Modal/layouts/ModalMediaLayout/ModalMediaLayout.types.ts similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalMediaLayout/ModalMediaLayout.types.ts rename to packages/core/src/components/Modal/layouts/ModalMediaLayout/ModalMediaLayout.types.ts diff --git a/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.mdx b/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.mdx similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.mdx rename to packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.mdx diff --git a/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.helpers.tsx b/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.helpers.tsx similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.helpers.tsx rename to packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.helpers.tsx diff --git a/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.tsx b/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.tsx similarity index 98% rename from packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.tsx rename to packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.tsx index a0ec2dd916..a537e6caa8 100644 --- a/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.tsx +++ b/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayout.stories.tsx @@ -4,7 +4,7 @@ import Modal from "../../../Modal/Modal"; import { createStoryMetaSettingsDecorator } from "../../../../../storybook"; import ModalHeader from "../../../ModalHeader/ModalHeader"; import ModalContent from "../../../ModalContent/ModalContent"; -import ModalMedia from "../../ModalMedia"; +import ModalMedia from "../../../ModalMedia/ModalMedia"; import mediaImage from "./assets/media-image.png"; import ModalFooter from "../../../footers/ModalFooter/ModalFooter"; import ModalMediaLayout from "../ModalMediaLayout"; @@ -26,7 +26,7 @@ const metaSettings = createStoryMetaSettingsDecorator({ }); export default { - title: "Internal/Components/Modal [New]/Media modal", + title: "Components/Modal [New]/Media modal", component: Modal, subcomponents: { ModalMediaLayout, @@ -39,7 +39,9 @@ export default { }, argTypes: metaSettings.argTypes, decorators: metaSettings.decorators, - tags: ["internal"] + parameters: { + layout: "fullscreen" + } } satisfies Meta; export const Overview: Story = { diff --git a/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/ModalMediaLayoutRelatedComponent.tsx b/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayoutRelatedComponent.tsx similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/ModalMediaLayoutRelatedComponent.tsx rename to packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayoutRelatedComponent.tsx diff --git a/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/assets/media-image.png b/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/assets/media-image.png new file mode 100644 index 0000000000..376635d2f5 Binary files /dev/null and b/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/assets/media-image.png differ diff --git a/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/assets/ratio-do.png b/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/assets/ratio-do.png similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/assets/ratio-do.png rename to packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/assets/ratio-do.png diff --git a/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/assets/ratio-dont.png b/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/assets/ratio-dont.png similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/assets/ratio-dont.png rename to packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/assets/ratio-dont.png diff --git a/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/assets/related-component.png b/packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/assets/related-component.png similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/assets/related-component.png rename to packages/core/src/components/Modal/layouts/ModalMediaLayout/__stories__/assets/related-component.png diff --git a/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/ModalSideBySideLayout.module.scss b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/ModalSideBySideLayout.module.scss similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/ModalSideBySideLayout.module.scss rename to packages/core/src/components/Modal/layouts/ModalSideBySideLayout/ModalSideBySideLayout.module.scss diff --git a/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/ModalSideBySideLayout.tsx b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/ModalSideBySideLayout.tsx similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/ModalSideBySideLayout.tsx rename to packages/core/src/components/Modal/layouts/ModalSideBySideLayout/ModalSideBySideLayout.tsx diff --git a/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/ModalSideBySideLayout.types.ts b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/ModalSideBySideLayout.types.ts similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/ModalSideBySideLayout.types.ts rename to packages/core/src/components/Modal/layouts/ModalSideBySideLayout/ModalSideBySideLayout.types.ts diff --git a/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.mdx b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.mdx similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.mdx rename to packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.mdx diff --git a/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.helpers.tsx b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.helpers.tsx similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.helpers.tsx rename to packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.helpers.tsx diff --git a/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.tsx b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.tsx similarity index 98% rename from packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.tsx rename to packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.tsx index 4406f5f30d..fa49a4346a 100644 --- a/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.tsx +++ b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayout.stories.tsx @@ -6,7 +6,7 @@ import { withOpenedModalPreview } from "../../../Modal/__stories__/Modal.stories import ModalHeader from "../../../ModalHeader/ModalHeader"; import ModalContent from "../../../ModalContent/ModalContent"; import ModalSideBySideLayout from "../ModalSideBySideLayout"; -import ModalMedia from "../../ModalMedia"; +import ModalMedia from "../../../ModalMedia/ModalMedia"; import mediaImage from "./assets/media-image.png"; import useWizard from "../../../../../hooks/useWizard/useWizard"; import TransitionView from "../../../../TransitionView/TransitionView"; @@ -29,7 +29,7 @@ const metaSettings = createStoryMetaSettingsDecorator({ }); export default { - title: "Internal/Components/Modal [New]/Side by side modal", + title: "Components/Modal [New]/Side by side modal", component: Modal, subcomponents: { ModalSideBySideLayout, @@ -42,7 +42,9 @@ export default { }, argTypes: metaSettings.argTypes, decorators: metaSettings.decorators, - tags: ["internal"] + parameters: { + layout: "fullscreen" + } } satisfies Meta; export const Overview: Story = { diff --git a/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayoutRelatedComponent.tsx b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayoutRelatedComponent.tsx similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayoutRelatedComponent.tsx rename to packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayoutRelatedComponent.tsx diff --git a/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/breakdown-do.png b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/assets/breakdown-do.png similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/breakdown-do.png rename to packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/assets/breakdown-do.png diff --git a/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/breakdown-dont.png b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/assets/breakdown-dont.png similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/breakdown-dont.png rename to packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/assets/breakdown-dont.png diff --git a/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/columns-do.png b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/assets/columns-do.png similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/columns-do.png rename to packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/assets/columns-do.png diff --git a/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/columns-dont.png b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/assets/columns-dont.png similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/columns-dont.png rename to packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/assets/columns-dont.png diff --git a/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/assets/media-image.png b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/assets/media-image.png new file mode 100644 index 0000000000..843220c390 Binary files /dev/null and b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/assets/media-image.png differ diff --git a/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/related-component.png b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/assets/related-component.png similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/related-component.png rename to packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/assets/related-component.png diff --git a/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/wizard-do.png b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/assets/wizard-do.png similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/wizard-do.png rename to packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/assets/wizard-do.png diff --git a/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/wizard-dont.png b/packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/assets/wizard-dont.png similarity index 100% rename from packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/wizard-dont.png rename to packages/core/src/components/Modal/layouts/ModalSideBySideLayout/__stories__/assets/wizard-dont.png diff --git a/packages/core/src/components/Modal/layouts/index.ts b/packages/core/src/components/Modal/layouts/index.ts new file mode 100644 index 0000000000..50a8cd4c8f --- /dev/null +++ b/packages/core/src/components/Modal/layouts/index.ts @@ -0,0 +1,8 @@ +export { default as ModalBasicLayout } from "./ModalBasicLayout/ModalBasicLayout"; +export { ModalBasicLayoutProps } from "./ModalBasicLayout/ModalBasicLayout.types"; + +export { default as ModalMediaLayout } from "./ModalMediaLayout/ModalMediaLayout"; +export { ModalMediaLayoutProps } from "./ModalMediaLayout/ModalMediaLayout.types"; + +export { default as ModalSideBySideLayout } from "./ModalSideBySideLayout/ModalSideBySideLayout"; +export { ModalSideBySideLayoutProps } from "./ModalSideBySideLayout/ModalSideBySideLayout.types"; diff --git a/packages/core/src/components/ModalNew/layouts/useLayoutScrolledContent.ts b/packages/core/src/components/Modal/layouts/useLayoutScrolledContent.ts similarity index 100% rename from packages/core/src/components/ModalNew/layouts/useLayoutScrolledContent.ts rename to packages/core/src/components/Modal/layouts/useLayoutScrolledContent.ts diff --git a/packages/core/src/components/ModalNew/utils/animationVariants.ts b/packages/core/src/components/Modal/utils/animationVariants.ts similarity index 60% rename from packages/core/src/components/ModalNew/utils/animationVariants.ts rename to packages/core/src/components/Modal/utils/animationVariants.ts index 3aea7d75c2..c35eb79e2d 100644 --- a/packages/core/src/components/ModalNew/utils/animationVariants.ts +++ b/packages/core/src/components/Modal/utils/animationVariants.ts @@ -2,26 +2,35 @@ import { Variants } from "framer-motion"; import { RefObject } from "react"; export const modalAnimationOverlayVariants: Variants = { + initial: { + opacity: 0 + }, enter: { - opacity: 1, + opacity: 0.7, transition: { - duration: 0.2, + duration: 0.1, ease: [0.0, 0.0, 0.4, 1.0] } }, exit: { opacity: 0, transition: { - duration: 0.15, - ease: [0.0, 0.0, 0.4, 1.0] + duration: 0.1, + ease: [0.6, 0.0, 1.0, 1.0] } } }; export const modalAnimationCenterPopVariants: Variants = { + initial: { + opacity: 1, + scale: 1, + x: "-50%", + y: "-50%" + }, enter: { opacity: [0, 1, 1], - scale: [0.65, 1, 1], + scale: [0.8, 1, 1], x: "-50%", y: "-50%", transition: { @@ -32,30 +41,46 @@ export const modalAnimationCenterPopVariants: Variants = { }, exit: { opacity: [1, 1, 0], - scale: [1, 1, 0.65], + scale: [1, 1, 0.8], x: "-50%", y: "-50%", transition: { duration: 0.1, - ease: [0.0, 0.0, 0.4, 1.0], + ease: [0.6, 0.0, 1.0, 1.0], times: [0, 0.5, 1] } } }; export const modalAnimationAnchorPopVariants: Variants = { + initial: (anchorElementRef: RefObject) => { + const anchorRect = anchorElementRef.current.getBoundingClientRect(); + const anchorCenterX = anchorRect.left + anchorRect.width / 2; + const anchorCenterY = anchorRect.top + anchorRect.height / 2; + + const x = `calc(-50% + ${anchorCenterX}px)`; + const y = `calc(-50% + ${anchorCenterY}px)`; + + return { + opacity: 0, + scale: 0.8, + top: "50%", + left: "50%", + x, + y + }; + }, enter: { - opacity: [0, 1, 1], - scale: [0.65, 0.65, 1], + opacity: [0, 0, 1], + scale: [0.8, 0.8, 1], top: "50%", left: "50%", x: "-50%", y: "-50%", transition: { - delay: 0.05, duration: 0.2, ease: [0.0, 0.0, 0.4, 1.0], - times: [0, 0.2, 1] + times: [0, 0.4, 1] } }, exit: (anchorElementRef: RefObject) => { @@ -67,8 +92,8 @@ export const modalAnimationAnchorPopVariants: Variants = { const y = `calc(-50% + ${anchorCenterY}px)`; return { - opacity: [1, 1, 0], - scale: [1, 1, 0.75], + opacity: [1, 0, 0], + scale: [1, 0.8, 0.8], top: 0, left: 0, x, @@ -76,7 +101,7 @@ export const modalAnimationAnchorPopVariants: Variants = { transition: { duration: 0.15, ease: [0.6, 0.0, 1.0, 1.0], - times: [0, 0.33, 1] + times: [0, 0.6, 1] } }; } diff --git a/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/assets/media-image.png b/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/assets/media-image.png deleted file mode 100644 index 838801c9cf..0000000000 Binary files a/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/__stories__/assets/media-image.png and /dev/null differ diff --git a/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/media-image.png b/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/media-image.png deleted file mode 100644 index 9981ce2496..0000000000 Binary files a/packages/core/src/components/ModalNew/layouts/ModalSideBySideLayout/__stories__/assets/media-image.png and /dev/null differ diff --git a/packages/core/src/components/next.ts b/packages/core/src/components/next.ts index cb0ff5c3b5..1ecfeed221 100644 --- a/packages/core/src/components/next.ts +++ b/packages/core/src/components/next.ts @@ -1 +1 @@ -export {}; +export * from "./Modal"; diff --git a/packages/core/src/storybook/components/related-components/component-description-map.tsx b/packages/core/src/storybook/components/related-components/component-description-map.tsx index 74029fd604..283e89b7f2 100644 --- a/packages/core/src/storybook/components/related-components/component-description-map.tsx +++ b/packages/core/src/storybook/components/related-components/component-description-map.tsx @@ -59,9 +59,9 @@ import { BoxDescription } from "./descriptions/box-description"; import { TableDescription } from "./descriptions/table-description"; import { VirtualizedGridDescription } from "./descriptions/virtualized-grid-description/virtualized-grid-description"; import { MenuGridItemDescription } from "./descriptions/menu-grid-item-description"; -import { ModalMediaLayoutRelatedComponent } from "../../../components/ModalNew/layouts/ModalMediaLayout/__stories__/ModalMediaLayoutRelatedComponent"; -import { ModalSideBySideLayoutRelatedComponent } from "../../../components/ModalNew/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayoutRelatedComponent"; -import { ModalBasicLayoutRelatedComponent } from "../../../components/ModalNew/layouts/ModalBasicLayout/__stories__/ModalBasicLayoutRelatedComponent"; +import { ModalMediaLayoutRelatedComponent } from "../../../components/Modal/layouts/ModalMediaLayout/__stories__/ModalMediaLayoutRelatedComponent"; +import { ModalSideBySideLayoutRelatedComponent } from "../../../components/Modal/layouts/ModalSideBySideLayout/__stories__/ModalSideBySideLayoutRelatedComponent"; +import { ModalBasicLayoutRelatedComponent } from "../../../components/Modal/layouts/ModalBasicLayout/__stories__/ModalBasicLayoutRelatedComponent"; export const SPLIT_BUTTON = "split-button"; export const BUTTON_GROUP = "button-group"; diff --git a/packages/storybook-blocks/src/components/status-tag/__stories__/status-tag.stories.tsx b/packages/storybook-blocks/src/components/status-tag/__stories__/status-tag.stories.tsx index 93b89af6ad..3b3f5a486a 100644 --- a/packages/storybook-blocks/src/components/status-tag/__stories__/status-tag.stories.tsx +++ b/packages/storybook-blocks/src/components/status-tag/__stories__/status-tag.stories.tsx @@ -21,6 +21,7 @@ export const Types: Story = { + ), diff --git a/packages/storybook-blocks/src/components/status-tag/status-tag.module.scss b/packages/storybook-blocks/src/components/status-tag/status-tag.module.scss index 3bd3f150de..761ae6cbda 100644 --- a/packages/storybook-blocks/src/components/status-tag/status-tag.module.scss +++ b/packages/storybook-blocks/src/components/status-tag/status-tag.module.scss @@ -9,6 +9,11 @@ border-color: var(--sb-brand-color); } + &.new { + color: var(--sb-positive-color); + border-color: var(--sb-positive-color); + } + &.deprecated { color: var(--sb-negative-color); border-color: var(--sb-negative-color); diff --git a/packages/storybook-blocks/src/components/status-tag/status-tag.tsx b/packages/storybook-blocks/src/components/status-tag/status-tag.tsx index 0d0986c7a6..8031706ddc 100644 --- a/packages/storybook-blocks/src/components/status-tag/status-tag.tsx +++ b/packages/storybook-blocks/src/components/status-tag/status-tag.tsx @@ -2,13 +2,14 @@ import { FC } from 'react'; import styles from './status-tag.module.scss'; import cx from 'classnames'; -export type StatusTagType = 'alpha' | 'beta' | 'deprecated'; +export type StatusTagType = 'alpha' | 'beta' | 'new' | 'deprecated'; interface StatusTagProps { type: StatusTagType; } const StatusTag: FC = ({ type }) => { + console.log('type', type); return ; };