feat(ModalSideBySideLayout): side by side layout component for new Mo…

…dal (#2460)

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

@@ -0,0 +1,8 @@
+.media {
+  align-items: normal;
+  align-self: normal;
+  width: 100%;
+  height: auto;
+  max-height: 100%;
+  overflow: hidden;
+}

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

@@ -0,0 +1,28 @@
+import React, { forwardRef } from "react";
+import Flex from "../../Flex/Flex";
+import { ModalMediaProps } from "./ModalMedia.types";
+import styles from "./ModalMedia.module.scss";
+import cx from "classnames";
+import { ComponentDefaultTestId, getTestId } from "../../../tests/test-ids-utils";
+
+const ModalMedia = forwardRef(
+  (
+    { children, className, id, "data-testid": dataTestId }: ModalMediaProps,
+    ref: React.ForwardedRef<HTMLDivElement>
+  ) => {
+    return (
+      <Flex
+        id={id}
+        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT_MEDIA, id)}
+        justify={Flex.justify.CENTER}
+        align={Flex.align.STRETCH}
+        ref={ref}
+        className={cx(styles.media, className)}
+      >
+        {children}
+      </Flex>
+    );
+  }
+);
+
+export default ModalMedia;

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

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

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

@@ -0,0 +1,25 @@
+.layout {
+  width: 100%;
+  flex-grow: 1;
+  overflow: hidden;
+
+  .leftPane {
+    height: 100%;
+    width: 60%;
+    padding-inline: var(--modal-inline-padding);
+
+    .header {
+      width: 100%;
+      margin-block: var(--spacing-xl) var(--spacing-large);
+    }
+
+    .content {
+      width: 100%;
+    }
+  }
+
+  .media {
+    flex-shrink: 0;
+    width: 40%;
+  }
+}

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

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

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

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

packages/core/src/tests/constants.ts

@@ -108,7 +108,9 @@ export enum ComponentDefaultTestId {
   MODAL_NEXT_OVERLAY = "modal-overlay",
   MODAL_NEXT_HEADER = "modal-header",
   MODAL_NEXT_CONTENT = "modal-content",
+  MODAL_NEXT_MEDIA = "modal-media",
   MODAL_NEXT_BASIC_LAYOUT = "modal-basic-layout",
+  MODAL_NEXT_SIDE_BY_SIDE_LAYOUT = "modal-side-by-side-layout",
   FORMATTED_NUMBER = "formatted-number",
   HIDDEN_TEXT = "hidden-text",
   DIALOG_CONTENT_CONTAINER = "dialog-content-container",