feat(ModalMediaLayout): change component name

mondaycom · Oct 8, 2024 · 8f2ee29 · 8f2ee29
1 parent 19e2b49
commit 8f2ee29
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 12 deletions.
diff --git a/...dalHeroLayout/ModalHeroLayout.module.scss → ...lMediaLayout/ModalMediaLayout.module.scss b/...dalHeroLayout/ModalHeroLayout.module.scss → ...lMediaLayout/ModalMediaLayout.module.scss
@@ -5,19 +5,19 @@
 
   .media {
     width: 100%;
-    height: var(--modal-hero-height, 240px);
+    height: var(--modal-top-media-height, 240px);
     flex-shrink: 0;
 
     @media (min-width: 1280px) {
-      --modal-hero-height: 260px;
+      --modal-top-media-height: 260px;
     }
 
     @media (min-width: 1440px) {
-      --modal-hero-height: 260px;
+      --modal-top-media-height: 260px;
     }
 
     @media (min-width: 1720px) {
-      --modal-hero-height: 320px;
+      --modal-top-media-height: 320px;
     }
   }
 

diff --git a/...youts/ModalHeroLayout/ModalHeroLayout.tsx → ...uts/ModalMediaLayout/ModalMediaLayout.tsx b/...youts/ModalHeroLayout/ModalHeroLayout.tsx → ...uts/ModalMediaLayout/ModalMediaLayout.tsx
@@ -2,13 +2,13 @@ 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 styles from "./ModalMediaLayout.module.scss";
+import { ModalMediaLayoutProps } from "./ModalMediaLayout.types";
 import Flex from "../../../Flex/Flex";
 
-const ModalHeroLayout = forwardRef(
+const ModalMediaLayout = forwardRef(
   (
-    { children, className, id, "data-testid": dataTestId }: ModalHeroLayoutProps,
+    { children, className, id, "data-testid": dataTestId }: ModalMediaLayoutProps,
     ref: React.ForwardedRef<HTMLDivElement>
   ) => {
     const [media, header, content] = React.Children.toArray(children);
@@ -20,7 +20,7 @@ const ModalHeroLayout = forwardRef(
         align={Flex.align.START}
         className={cx(styles.layout, className)}
         id={id}
-        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT_HERO_LAYOUT, id)}
+        data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT_MEDIA_LAYOUT, id)}
       >
         <div className={styles.media}>{media}</div>
         <div className={styles.header}>{header}</div>
@@ -30,4 +30,4 @@ const ModalHeroLayout = forwardRef(
   }
 );
 
-export default ModalHeroLayout;
+export default ModalMediaLayout;
diff --git a/.../ModalHeroLayout/ModalHeroLayout.types.ts → ...odalMediaLayout/ModalMediaLayout.types.ts b/.../ModalHeroLayout/ModalHeroLayout.types.ts → ...odalMediaLayout/ModalMediaLayout.types.ts
@@ -1,6 +1,6 @@
 import React from "react";
 import { VibeComponentProps } from "../../../../types";
 
-export interface ModalHeroLayoutProps extends VibeComponentProps {
+export interface ModalMediaLayoutProps extends VibeComponentProps {
   children: React.ReactNode;
 }
diff --git a/packages/core/src/tests/constants.ts b/packages/core/src/tests/constants.ts
@@ -110,7 +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",
+  MODAL_NEXT_MEDIA_LAYOUT = "modal-media-layout",
   FORMATTED_NUMBER = "formatted-number",
   HIDDEN_TEXT = "hidden-text",
   DIALOG_CONTENT_CONTAINER = "dialog-content-container",