feat(ModalHeroLayout): hero layout component for new Modal

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

@@ -0,0 +1,24 @@
+.layout {
+  width: 100%;
+  flex-grow: 1;
+  overflow: hidden;
+
+  .header {
+    border: 1px dashed #c74646;
+
+    width: 100%;
+    margin-block: var(--spacing-large) var(--spacing-small);
+    text-align: center;
+  }
+
+  .content {
+    flex: 1;
+    width: 100%;
+    align-self: flex-start;
+  }
+
+  .media {
+    height: 260px;
+    flex-shrink: 0;
+  }
+}

packages/core/src/components/ModalNew/layouts/ModalHeroLayout/ModalHeroLayout.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 "./ModalHeroLayout.module.scss";
+import { ModalHeroLayoutProps } from "./ModalHeroLayout.types";
+import Flex from "../../../Flex/Flex";
+
+const ModalHeroLayout = forwardRef(
+  (
+    { children, className, id, "data-testid": dataTestId }: ModalHeroLayoutProps,
+    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_HERO_LAYOUT, id)}
+      >
+        <div className={styles.media}>{media}</div>
+        <div className={styles.header}>{header}</div>
+        <div className={styles.content}>{content}</div>
+      </Flex>
+    );
+  }
+);
+
+export default ModalHeroLayout;

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

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

packages/core/src/tests/constants.ts

@@ -110,6 +110,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_HERO_LAYOUT = "modal-hero-layout",
   FORMATTED_NUMBER = "formatted-number",
   HIDDEN_TEXT = "hidden-text",
   DIALOG_CONTENT_CONTAINER = "dialog-content-container",