feat(ModalMediaLayout): layout with top media for new Modal (#2465)

packages/core/src/components/ModalNew/layouts/ModalMediaLayout/ModalMediaLayout.module.scss

@@ -0,0 +1,35 @@
+.layout {
+  width: 100%;
+  flex-grow: 1;
+  overflow: hidden;
+
+  .media {
+    width: 100%;
+    height: var(--modal-top-media-height, 240px);
+    flex-shrink: 0;
+
+    @media (min-width: 1280px) {
+      --modal-top-media-height: 260px;
+    }
+
+    @media (min-width: 1440px) {
+      --modal-top-media-height: 260px;
+    }
+
+    @media (min-width: 1720px) {
+      --modal-top-media-height: 320px;
+    }
+  }
+
+  .header {
+    width: 100%;
+    margin-block: var(--spacing-large) var(--spacing-small);
+    text-align: center;
+  }
+
+  .content {
+    width: 100%;
+    flex: 1;
+    align-self: flex-start;
+  }
+}

packages/core/src/components/ModalNew/layouts/ModalMediaLayout/ModalMediaLayout.tsx

@@ -0,0 +1,33 @@
+import React, { forwardRef } from "react";
+import cx from "classnames";
+import { getTestId } from "../../../../tests/test-ids-utils";
+import { ComponentDefaultTestId } from "../../../../tests/constants";
+import styles from "./ModalMediaLayout.module.scss";
+import { ModalMediaLayoutProps } from "./ModalMediaLayout.types";
+import Flex from "../../../Flex/Flex";
+
+const ModalMediaLayout = forwardRef(
+  (
+    { children, className, id, "data-testid": dataTestId }: ModalMediaLayoutProps,
+    ref: React.ForwardedRef<HTMLDivElement>
+  ) => {
+    const [media, header, content] = React.Children.toArray(children);
+
+    return (
+      <Flex
+        ref={ref}
+        direction={Flex.directions.COLUMN}
+        align={Flex.align.START}
+        className={cx(styles.layout, className)}
+        id={id}
+        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT_MEDIA_LAYOUT, id)}
+      >
+        <div className={styles.media}>{media}</div>
+        <div className={styles.header}>{header}</div>
+        <div className={styles.content}>{content}</div>
+      </Flex>
+    );
+  }
+);
+
+export default ModalMediaLayout;

packages/core/src/components/ModalNew/layouts/ModalMediaLayout/ModalMediaLayout.types.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { VibeComponentProps } from "../../../../types";
+
+export interface ModalMediaLayoutProps extends VibeComponentProps {
+  children: React.ReactNode;
+}

packages/core/src/tests/constants.ts

@@ -111,6 +111,7 @@ export enum ComponentDefaultTestId {
   MODAL_NEXT_MEDIA = "modal-media",
   MODAL_NEXT_BASIC_LAYOUT = "modal-basic-layout",
   MODAL_NEXT_SIDE_BY_SIDE_LAYOUT = "modal-side-by-side-layout",
+  MODAL_NEXT_MEDIA_LAYOUT = "modal-media-layout",
   FORMATTED_NUMBER = "formatted-number",
   HIDDEN_TEXT = "hidden-text",
   DIALOG_CONTENT_CONTAINER = "dialog-content-container",