Skip to content

Commit d5ecc4d

Browse files
author
Kubit
committed
Add dragIcon on modalV2 component
1 parent ba82657 commit d5ecc4d

File tree

6 files changed

+63
-46
lines changed

6 files changed

+63
-46
lines changed

‎src/components/modal/modalStandAlone.tsx‎

Lines changed: 6 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import { IModalStandAlone } from './types/modal';
2727

2828
const ModalStandAloneComponent = (
2929
{
30-
dataTestId = 'modalDataTestId',
30+
dataTestId = 'modal',
3131
customHeightAllDevices = false,
3232
customWidthAllDevices = false,
3333
...props
@@ -45,23 +45,18 @@ const ModalStandAloneComponent = (
4545
<ModalImageStyled
4646
data-modal-ilustration-container
4747
$styles={props.styles}
48-
data-testid={`${dataTestId}ImageHeader`}
48+
data-testid={`${dataTestId}-image-header`}
4949
>
5050
<ElementOrIllustration
5151
customIllustrationStyles={props.styles.imageIllustrationHeader}
52-
data-testid={`${dataTestId}ImageHeader`}
5352
{...props.imageIllustrationHeader}
5453
/>
5554
</ModalImageStyled>
5655
);
5756
} else if (props.imageHeader?.icon) {
5857
return (
59-
<ModalImageStyled $styles={props.styles} data-testid={`${dataTestId}ImageHeader`}>
60-
<ElementOrIcon
61-
customIconStyles={props.styles.imageHeader}
62-
data-testid={`${dataTestId}ImageHeader`}
63-
{...props.imageHeader}
64-
/>
58+
<ModalImageStyled $styles={props.styles} data-testid={`${dataTestId}-image-header`}>
59+
<ElementOrIcon customIconStyles={props.styles.imageHeader} {...props.imageHeader} />
6560
</ModalImageStyled>
6661
);
6762
}
@@ -83,7 +78,6 @@ const ModalStandAloneComponent = (
8378
aria-modal={props.open}
8479
clickOverlayClose={!props.blocked}
8580
component={PopoverComponentType.DIV}
86-
dataTestId={`${dataTestId}Popover`}
8781
hasBackDrop={true}
8882
id={modalId}
8983
open={props.open}
@@ -115,7 +109,6 @@ const ModalStandAloneComponent = (
115109
<ModalCloseButtonStyled $styles={props.styles}>
116110
<ElementOrIcon
117111
customIconStyles={props.styles?.closeButtonIcon}
118-
dataTestId={`${dataTestId}CloseIcon`}
119112
{...props.closeIcon}
120113
/>
121114
</ModalCloseButtonStyled>
@@ -132,7 +125,6 @@ const ModalStandAloneComponent = (
132125
<Text
133126
component={TextComponentType.H1}
134127
customTypography={props.styles.title}
135-
dataTestId={`${dataTestId}Title`}
136128
id={titleIdFinal}
137129
{...props.title}
138130
>
@@ -150,19 +142,15 @@ const ModalStandAloneComponent = (
150142
aria-labelledby={
151143
props.contentHasScroll ? props.contentScrollArias?.['aria-labelledby'] : undefined
152144
}
153-
data-testid={`${dataTestId}Content`}
145+
data-testid={`${dataTestId}-content`}
154146
role={props.contentHasScroll ? ROLES.REGION : undefined}
155147
tabIndex={props.contentHasScroll ? 0 : undefined}
156148
>
157149
{props.content}
158150
</ModalContentStyled>
159151
{modalFooterVariant && props.footer?.content && (
160152
<ModalFooterStyled $styles={props.styles}>
161-
<Footer
162-
dataTestId={`${dataTestId}Navbar`}
163-
variant={modalFooterVariant}
164-
{...props.footer}
165-
>
153+
<Footer variant={modalFooterVariant} {...props.footer}>
166154
{props.footer?.content}
167155
</Footer>
168156
</ModalFooterStyled>

‎src/components/modalV2/fragments/modalHeader.tsx‎

Lines changed: 34 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ import { TextComponentType } from '../../text/types/component';
99
import {
1010
DraggableIcon,
1111
ModalCloseButtonStyled,
12+
ModalHeaderContentStyled,
1213
ModalHeaderStyled,
14+
TitleContainerStyled,
1315
TitleHiddenContainer,
1416
} from '../modal.styled';
1517
import { IModalStandAlone } from '../types/modal';
@@ -27,41 +29,47 @@ type ModalHeaderProps = Pick<IModalStandAlone, PickedProps> & {
2729
};
2830

2931
export const ModalHeader = (props: ModalHeaderProps): JSX.Element => {
30-
const isMobile = props.device === DeviceBreakpointsType.MOBILE;
32+
const isMobileOrTablet =
33+
props.device === DeviceBreakpointsType.MOBILE || props.device === DeviceBreakpointsType.TABLET;
3134

3235
return (
3336
<ModalHeaderStyled data-modal-header $styles={props.styles}>
34-
{isMobile && !props.blocked && props.dragIcon && (
37+
{isMobileOrTablet && !props.blocked && props.dragIcon && (
3538
<DraggableIcon data-modal-draggable-icon $styles={props.styles}>
3639
<ElementOrIcon customIconStyles={props.styles?.dragIcon} {...props.dragIcon} />
3740
</DraggableIcon>
3841
)}
39-
{!props.blocked && props.closeIcon?.icon && (
40-
<ModalCloseButtonStyled $styles={props.styles}>
41-
<ElementOrIcon customIconStyles={props.styles?.closeButtonIcon} {...props.closeIcon} />
42-
</ModalCloseButtonStyled>
43-
)}
44-
{!props.blocked &&
45-
props.closeButton?.content &&
46-
(props.styles.closeButton?.buttonVariant || props.closeButton?.variant) && (
47-
<Button variant={props.styles.closeButton?.buttonVariant} {...props.closeButton}>
48-
{props.closeButton.content}
49-
</Button>
42+
43+
<ModalHeaderContentStyled $styles={props.styles}>
44+
{!props.blocked && props.closeIcon?.icon && (
45+
<ModalCloseButtonStyled $styles={props.styles}>
46+
<ElementOrIcon customIconStyles={props.styles?.closeButtonIcon} {...props.closeIcon} />
47+
</ModalCloseButtonStyled>
5048
)}
51-
{props.title?.visible === undefined || props.title.visible ? (
52-
<>
53-
<Text
54-
component={TextComponentType.H1}
55-
customTypography={props.styles.title}
56-
id={props.titleIdFinal}
57-
{...props.title}
58-
>
49+
{!props.blocked &&
50+
props.closeButton?.content &&
51+
(props.styles.closeButton?.buttonVariant || props.closeButton?.variant) && (
52+
<Button variant={props.styles.closeButton?.buttonVariant} {...props.closeButton}>
53+
{props.closeButton.content}
54+
</Button>
55+
)}
56+
{props.title?.visible === undefined || props.title.visible ? (
57+
<TitleContainerStyled $styles={props.styles}>
58+
<Text
59+
component={TextComponentType.H1}
60+
customTypography={props.styles.title}
61+
id={props.titleIdFinal}
62+
{...props.title}
63+
>
64+
{props.title?.content}
65+
</Text>
66+
</TitleContainerStyled>
67+
) : (
68+
<TitleHiddenContainer id={props.titleIdFinal}>
5969
{props.title?.content}
60-
</Text>
61-
</>
62-
) : (
63-
<TitleHiddenContainer id={props.titleIdFinal}>{props.title?.content}</TitleHiddenContainer>
64-
)}
70+
</TitleHiddenContainer>
71+
)}
72+
</ModalHeaderContentStyled>
6573
</ModalHeaderStyled>
6674
);
6775
};

‎src/components/modalV2/modal.styled.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,14 @@ export const ModalHeaderStyled = styled.div<IModalStyled>`
8383
${props => getStyles(props.$styles.headerContainer)}
8484
`;
8585

86+
export const ModalHeaderContentStyled = styled.div<IModalStyled>`
87+
${props => getStyles(props.$styles.headerContentContainer)}
88+
`;
89+
90+
export const TitleContainerStyled = styled.div<IModalStyled>`
91+
${props => getStyles(props.$styles.titleContainer)}
92+
`;
93+
8694
export const TitleHiddenContainer = styled.span`
8795
display: none;
8896
`;

‎src/components/modalV2/stories/argtypes.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,17 @@ export const argtypes = (variants: IThemeObjectVariants, themeSelected: string):
164164
category: CATEGORY_CONTROL.CONTENT,
165165
},
166166
},
167+
dragIcon: {
168+
description: 'Icon to show the draggable area',
169+
type: { name: 'object' },
170+
control: { type: 'object' },
171+
table: {
172+
type: {
173+
summary: 'IElementOricon',
174+
},
175+
category: CATEGORY_CONTROL.CONTENT,
176+
},
177+
},
167178
closeIcon: {
168179
description: 'Icon to close the modal',
169180
type: { name: 'object' },

‎src/components/modalV2/stories/modal.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,8 +155,8 @@ export const Modal: Story = {
155155
contentScrollArias: {
156156
'aria-label': 'Modal content scroll',
157157
},
158-
// open: true,
159158
closeIcon: { icon: ICONS.ICON_CLOSE },
159+
dragIcon: { icon: ICONS.ICON_DRAG },
160160

161161
footer: {
162162
variant: Object.values(variantsObject[themeSelected].FooterVariants || {})[0] as string,

‎src/components/modalV2/types/modalTheme.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,13 @@ export type ModalBaseStylesType = {
77
popoverVariant?: string;
88
container?: CommonStyleType;
99
headerContainer?: CommonStyleType;
10+
headerContentContainer?: CommonStyleType;
1011
imageHeader?: IconTypes;
1112
title?: TypographyTypes;
13+
titleContainer?: CommonStyleType;
1214
content?: CommonStyleType;
13-
closeButtonContainer?: CommonStyleType;
1415
closeButtonIcon?: IconTypes;
16+
closeButtonContainer?: CommonStyleType;
1517
footer?: CommonStyleType;
1618
closeButton?: {
1719
buttonVariant?: string;

0 commit comments

Comments
 (0)