Add dragIcon on modalV2 component

Kubit · Kubit · commit d5ecc4df4cb9 · 2024-12-07T09:27:54.000+01:00
diff --git a/src/components/modal/modalStandAlone.tsx b/src/components/modal/modalStandAlone.tsx
@@ -27,7 +27,7 @@ import { IModalStandAlone } from './types/modal';
 
 const ModalStandAloneComponent = (
   {
-    dataTestId = 'modalDataTestId',
+    dataTestId = 'modal',
     customHeightAllDevices = false,
     customWidthAllDevices = false,
     ...props
@@ -45,23 +45,18 @@ const ModalStandAloneComponent = (
         <ModalImageStyled
           data-modal-ilustration-container
           $styles={props.styles}
-          data-testid={`${dataTestId}ImageHeader`}
+          data-testid={`${dataTestId}-image-header`}
         >
           <ElementOrIllustration
             customIllustrationStyles={props.styles.imageIllustrationHeader}
-            data-testid={`${dataTestId}ImageHeader`}
             {...props.imageIllustrationHeader}
           />
         </ModalImageStyled>
       );
     } else if (props.imageHeader?.icon) {
       return (
-        <ModalImageStyled $styles={props.styles} data-testid={`${dataTestId}ImageHeader`}>
-          <ElementOrIcon
-            customIconStyles={props.styles.imageHeader}
-            data-testid={`${dataTestId}ImageHeader`}
-            {...props.imageHeader}
-          />
+        <ModalImageStyled $styles={props.styles} data-testid={`${dataTestId}-image-header`}>
+          <ElementOrIcon customIconStyles={props.styles.imageHeader} {...props.imageHeader} />
         </ModalImageStyled>
       );
     }
@@ -83,7 +78,6 @@ const ModalStandAloneComponent = (
       aria-modal={props.open}
       clickOverlayClose={!props.blocked}
       component={PopoverComponentType.DIV}
-      dataTestId={`${dataTestId}Popover`}
       hasBackDrop={true}
       id={modalId}
       open={props.open}
@@ -115,7 +109,6 @@ const ModalStandAloneComponent = (
             <ModalCloseButtonStyled $styles={props.styles}>
               <ElementOrIcon
                 customIconStyles={props.styles?.closeButtonIcon}
-                dataTestId={`${dataTestId}CloseIcon`}
                 {...props.closeIcon}
               />
             </ModalCloseButtonStyled>
@@ -132,7 +125,6 @@ const ModalStandAloneComponent = (
             <Text
               component={TextComponentType.H1}
               customTypography={props.styles.title}
-              dataTestId={`${dataTestId}Title`}
               id={titleIdFinal}
               {...props.title}
             >
@@ -150,19 +142,15 @@ const ModalStandAloneComponent = (
           aria-labelledby={
             props.contentHasScroll ? props.contentScrollArias?.['aria-labelledby'] : undefined
           }
-          data-testid={`${dataTestId}Content`}
+          data-testid={`${dataTestId}-content`}
           role={props.contentHasScroll ? ROLES.REGION : undefined}
           tabIndex={props.contentHasScroll ? 0 : undefined}
         >
           {props.content}
         </ModalContentStyled>
         {modalFooterVariant && props.footer?.content && (
           <ModalFooterStyled $styles={props.styles}>
-            <Footer
-              dataTestId={`${dataTestId}Navbar`}
-              variant={modalFooterVariant}
-              {...props.footer}
-            >
+            <Footer variant={modalFooterVariant} {...props.footer}>
               {props.footer?.content}
             </Footer>
           </ModalFooterStyled>
diff --git a/src/components/modalV2/fragments/modalHeader.tsx b/src/components/modalV2/fragments/modalHeader.tsx
@@ -9,7 +9,9 @@ import { TextComponentType } from '../../text/types/component';
 import {
   DraggableIcon,
   ModalCloseButtonStyled,
+  ModalHeaderContentStyled,
   ModalHeaderStyled,
+  TitleContainerStyled,
   TitleHiddenContainer,
 } from '../modal.styled';
 import { IModalStandAlone } from '../types/modal';
@@ -27,41 +29,47 @@ type ModalHeaderProps = Pick<IModalStandAlone, PickedProps> & {
 };
 
 export const ModalHeader = (props: ModalHeaderProps): JSX.Element => {
-  const isMobile = props.device === DeviceBreakpointsType.MOBILE;
+  const isMobileOrTablet =
+    props.device === DeviceBreakpointsType.MOBILE || props.device === DeviceBreakpointsType.TABLET;
 
   return (
     <ModalHeaderStyled data-modal-header $styles={props.styles}>
-      {isMobile && !props.blocked && props.dragIcon && (
+      {isMobileOrTablet && !props.blocked && props.dragIcon && (
         <DraggableIcon data-modal-draggable-icon $styles={props.styles}>
           <ElementOrIcon customIconStyles={props.styles?.dragIcon} {...props.dragIcon} />
         </DraggableIcon>
       )}
-      {!props.blocked && props.closeIcon?.icon && (
-        <ModalCloseButtonStyled $styles={props.styles}>
-          <ElementOrIcon customIconStyles={props.styles?.closeButtonIcon} {...props.closeIcon} />
-        </ModalCloseButtonStyled>
-      )}
-      {!props.blocked &&
-        props.closeButton?.content &&
-        (props.styles.closeButton?.buttonVariant || props.closeButton?.variant) && (
-          <Button variant={props.styles.closeButton?.buttonVariant} {...props.closeButton}>
-            {props.closeButton.content}
-          </Button>
+
+      <ModalHeaderContentStyled $styles={props.styles}>
+        {!props.blocked && props.closeIcon?.icon && (
+          <ModalCloseButtonStyled $styles={props.styles}>
+            <ElementOrIcon customIconStyles={props.styles?.closeButtonIcon} {...props.closeIcon} />
+          </ModalCloseButtonStyled>
         )}
-      {props.title?.visible === undefined || props.title.visible ? (
-        <>
-          <Text
-            component={TextComponentType.H1}
-            customTypography={props.styles.title}
-            id={props.titleIdFinal}
-            {...props.title}
-          >
+        {!props.blocked &&
+          props.closeButton?.content &&
+          (props.styles.closeButton?.buttonVariant || props.closeButton?.variant) && (
+            <Button variant={props.styles.closeButton?.buttonVariant} {...props.closeButton}>
+              {props.closeButton.content}
+            </Button>
+          )}
+        {props.title?.visible === undefined || props.title.visible ? (
+          <TitleContainerStyled $styles={props.styles}>
+            <Text
+              component={TextComponentType.H1}
+              customTypography={props.styles.title}
+              id={props.titleIdFinal}
+              {...props.title}
+            >
+              {props.title?.content}
+            </Text>
+          </TitleContainerStyled>
+        ) : (
+          <TitleHiddenContainer id={props.titleIdFinal}>
             {props.title?.content}
-          </Text>
-        </>
-      ) : (
-        <TitleHiddenContainer id={props.titleIdFinal}>{props.title?.content}</TitleHiddenContainer>
-      )}
+          </TitleHiddenContainer>
+        )}
+      </ModalHeaderContentStyled>
     </ModalHeaderStyled>
   );
 };
diff --git a/src/components/modalV2/modal.styled.ts b/src/components/modalV2/modal.styled.ts
@@ -83,6 +83,14 @@ export const ModalHeaderStyled = styled.div<IModalStyled>`
   ${props => getStyles(props.$styles.headerContainer)}
 `;
 
+export const ModalHeaderContentStyled = styled.div<IModalStyled>`
+  ${props => getStyles(props.$styles.headerContentContainer)}
+`;
+
+export const TitleContainerStyled = styled.div<IModalStyled>`
+  ${props => getStyles(props.$styles.titleContainer)}
+`;
+
 export const TitleHiddenContainer = styled.span`
   display: none;
 `;
diff --git a/src/components/modalV2/stories/argtypes.ts b/src/components/modalV2/stories/argtypes.ts
@@ -164,6 +164,17 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
         category: CATEGORY_CONTROL.CONTENT,
       },
     },
+    dragIcon: {
+      description: 'Icon to show the draggable area',
+      type: { name: 'object' },
+      control: { type: 'object' },
+      table: {
+        type: {
+          summary: 'IElementOricon',
+        },
+        category: CATEGORY_CONTROL.CONTENT,
+      },
+    },
     closeIcon: {
       description: 'Icon to close the modal',
       type: { name: 'object' },
diff --git a/src/components/modalV2/stories/modal.stories.tsx b/src/components/modalV2/stories/modal.stories.tsx
@@ -155,8 +155,8 @@ export const Modal: Story = {
     contentScrollArias: {
       'aria-label': 'Modal content scroll',
     },
-    // open: true,
     closeIcon: { icon: ICONS.ICON_CLOSE },
+    dragIcon: { icon: ICONS.ICON_DRAG },
 
     footer: {
       variant: Object.values(variantsObject[themeSelected].FooterVariants || {})[0] as string,
diff --git a/src/components/modalV2/types/modalTheme.ts b/src/components/modalV2/types/modalTheme.ts
@@ -7,11 +7,13 @@ export type ModalBaseStylesType = {
   popoverVariant?: string;
   container?: CommonStyleType;
   headerContainer?: CommonStyleType;
+  headerContentContainer?: CommonStyleType;
   imageHeader?: IconTypes;
   title?: TypographyTypes;
+  titleContainer?: CommonStyleType;
   content?: CommonStyleType;
-  closeButtonContainer?: CommonStyleType;
   closeButtonIcon?: IconTypes;
+  closeButtonContainer?: CommonStyleType;
   footer?: CommonStyleType;
   closeButton?: {
     buttonVariant?: string;
