@cleartrip/ct-design-modal 4.0.0 → 5.0.0

package/src/ModalAction/ModalAction.tsx

@@ -0,0 +1,42 @@
+import React, { ReactNode, useContext } from 'react';
+
+import { Container } from '@cleartrip/ct-design-container';
+import { useStyles } from '@cleartrip/ct-design-style-manager';
+import type { Styles } from '@cleartrip/ct-design-types';
+
+import ModalContext from '../ModalContext';
+import { ModalProps } from '../type';
+
+type ModalActionProps = Pick<ModalProps, 'footerAlignment'> & {
+  children: ReactNode;
+  styleConfig?: { root?: Styles[] };
+};
+
+const alignmentMap = {
+  start: 'flex-start',
+  end: 'flex-end',
+  center: 'center',
+} as const;
+
+const ModalAction: React.FunctionComponent<ModalActionProps> = ({ children, styleConfig }) => {
+  const { footerAlignment = 'end' } = useContext(ModalContext);
+
+  const rootStyles = useStyles(
+    (theme) => ({
+      root: {
+        display: 'flex',
+        justifyContent: alignmentMap[footerAlignment],
+        paddingTop: theme.spacing[6],
+        paddingBottom: theme.spacing[6],
+        paddingLeft: theme.spacing[4],
+        paddingRight: theme.spacing[4],
+        boxShadow: theme.elevation.topE1,
+      },
+    }),
+    [footerAlignment],
+  );
+
+  return <Container styleConfig={{ root: [rootStyles.root, ...(styleConfig?.root ?? [])] }}>{children}</Container>;
+};
+
+export default ModalAction;

package/src/ModalAction/index.ts

@@ -0,0 +1 @@
+export { default } from './ModalAction';

package/src/ModalContainer/ModalContainer.tsx

@@ -0,0 +1,40 @@
+import React, { ReactNode, useContext } from 'react';
+
+import { Box } from '@cleartrip/ct-design-box';
+import { useStyles } from '@cleartrip/ct-design-style-manager';
+import type { Styles } from '@cleartrip/ct-design-types';
+
+import ModalContext from '../ModalContext';
+import { ModalSizeTypes } from '../type';
+import { ModalSize } from '../constants';
+
+type ModalContainerProps = {
+  size?: ModalSizeTypes;
+  children: ReactNode;
+  styleConfig?: { root?: Styles[] };
+};
+
+const ModalContainer: React.FC<ModalContainerProps> = ({ children, styleConfig }) => {
+  const { size } = useContext(ModalContext);
+  const isFullScreen = size === ModalSize.FULL_SCREEN;
+
+  const rootStyles = useStyles(
+    () => ({
+      root: {
+        // Since it's a web only property, we need to cast it to a number
+        maxHeight: isFullScreen ? '100%' : ('calc(100vh - 128px)' as unknown as number),
+        overflowY: 'auto',
+        height: isFullScreen ? '100%' : undefined,
+      },
+    }),
+    [isFullScreen],
+  );
+
+  return (
+    <Box boxSize='zero' styleConfig={{ root: [rootStyles.root, ...(styleConfig?.root ?? [])] }}>
+      {children}
+    </Box>
+  );
+};
+
+export default ModalContainer;

package/src/ModalContainer/index.ts

@@ -0,0 +1 @@
+export { default } from './ModalContainer';

package/src/ModalContent/ModalContent.tsx

@@ -0,0 +1,44 @@
+import React, { ReactNode } from 'react';
+
+import { Box } from '@cleartrip/ct-design-box';
+import { useStyles } from '@cleartrip/ct-design-style-manager';
+import type { Styles } from '@cleartrip/ct-design-types';
+
+type ModalContentStyleConfig = {
+  root?: Styles[];
+  innerBox?: Styles[];
+};
+
+type ModalContentProps = {
+  children: ReactNode;
+  styleConfig?: ModalContentStyleConfig;
+};
+
+const ModalContent: React.FC<ModalContentProps> = ({ children, styleConfig }) => {
+  const staticStyles = useStyles(
+    (theme) => ({
+      root: {
+        overflowY: 'auto',
+        flex: 1,
+      },
+      innerBox: {
+        paddingTop: theme.spacing[6],
+        paddingBottom: theme.spacing[6],
+        paddingLeft: theme.spacing[4],
+        paddingRight: theme.spacing[4],
+        width: '100%',
+      },
+    }),
+    [],
+  );
+
+  return (
+    <Box boxSize='zero' styleConfig={{ root: [staticStyles.root, ...(styleConfig?.root ?? [])] }}>
+      <Box boxSize='xLarge' styleConfig={{ root: [staticStyles.innerBox, ...(styleConfig?.innerBox ?? [])] }}>
+        {children}
+      </Box>
+    </Box>
+  );
+};
+
+export default ModalContent;

package/src/ModalContent/index.ts

@@ -0,0 +1 @@
+export { default } from './ModalContent';

package/src/ModalContext.ts

@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+import { ModalProps } from './type';
+
+type ModalContextProp = Pick<ModalProps, 'onClose' | 'size' | 'hideCrossIcon' | 'footerAlignment'>;
+const ModalContext = createContext<ModalContextProp>({
+  footerAlignment: 'end',
+  hideCrossIcon: false,
+  onClose: () => {
+    return;
+  },
+  size: 'MEDIUM',
+});
+
+export default ModalContext;

package/src/ModalTitle/ModalTitle.tsx

@@ -0,0 +1,70 @@
+import React, { ReactNode, useContext } from 'react';
+
+import { Container } from '@cleartrip/ct-design-container';
+import { Cross } from '@cleartrip/ct-design-icons';
+import { useStyles } from '@cleartrip/ct-design-style-manager';
+import { useTheme } from '@cleartrip/ct-design-theme';
+import { Typography, TypographyStyleConfigProps } from '@cleartrip/ct-design-typography';
+import type { Styles } from '@cleartrip/ct-design-types';
+
+import ModalContext from '../ModalContext';
+import { ModalProps } from '../type';
+import { ModalSize } from '../constants';
+
+type ModalTitleStyleConfig = {
+  root?: Styles[];
+  iconContainer?: Styles[];
+  childrenTypography?: TypographyStyleConfigProps;
+  crossIcon?: React.SVGProps<SVGSVGElement>;
+};
+
+type ModalTitleProps = Pick<ModalProps, 'hideCrossIcon' | 'onClose'> & {
+  children: ReactNode;
+  styleConfig?: ModalTitleStyleConfig;
+};
+
+const ModalTitle: React.FunctionComponent<ModalTitleProps> = ({ children, styleConfig }) => {
+  const theme = useTheme();
+  const { hideCrossIcon, onClose, size } = useContext(ModalContext);
+  const isFullScreen = size === ModalSize.FULL_SCREEN;
+
+  const rootStyles = useStyles(
+    (t) => ({
+      root: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        paddingTop: isFullScreen ? t.spacing[5] : t.spacing[6],
+        paddingBottom: isFullScreen ? t.spacing[5] : t.spacing[4],
+        paddingLeft: isFullScreen ? t.spacing[7] : t.spacing[6],
+        paddingRight: isFullScreen ? t.spacing[7] : t.spacing[6],
+        boxShadow: t.elevation.bottomE1,
+      },
+      iconContainer: {
+        cursor: 'pointer',
+        marginTop: t.spacing[1],
+        marginRight: t.spacing[1],
+      },
+    }),
+    [isFullScreen],
+  );
+
+  return (
+    <Container styleConfig={{ root: [rootStyles.root, ...(styleConfig?.root ?? [])] }}>
+      <Typography variant='HM2' styleConfig={styleConfig?.childrenTypography}>
+        {children}
+      </Typography>
+      {!hideCrossIcon && (
+        <Container
+          onClick={onClose}
+          styleConfig={{
+            root: [rootStyles.iconContainer, ...(styleConfig?.iconContainer ?? [])],
+          }}
+        >
+          <Cross height={24} width={24} crossColor={theme.color.text.heading} {...styleConfig?.crossIcon} />
+        </Container>
+      )}
+    </Container>
+  );
+};
+
+export default ModalTitle;

package/src/ModalTitle/index.ts

@@ -0,0 +1 @@
+export { default } from './ModalTitle';

package/src/ModalsUsableComponents/ModalWithCloseOverlay.tsx

@@ -0,0 +1,92 @@
+import { forwardRef } from 'react';
+
+import { Container, ContainerRef } from '@cleartrip/ct-design-container';
+import { makeStyles, useStyles } from '@cleartrip/ct-design-style-manager';
+import { Cross, ModalBack } from '@cleartrip/ct-design-icons';
+
+import Modal from '../Modal';
+import { ModalVariant } from '../constants';
+import { ModalWithCloseOverlayProps } from './type';
+
+const staticStyles = makeStyles(() => ({
+  root: {
+    position: 'relative',
+  },
+}));
+
+/**
+ * Returns the close icon for the modal — a back arrow when `isBack` is true,
+ * otherwise a cross whose stroke matches the modal variant.
+ */
+const getCloseIcon = (isBack = false, variant: `${ModalVariant}` = ModalVariant.NEUTRAL) => {
+  if (isBack) {
+    return <ModalBack />;
+  }
+  return variant === ModalVariant.DARK ? (
+    <Cross height={24} width={24} crossColor='rgba(255, 255, 255, 1)' />
+  ) : (
+    <Cross height={24} width={24} crossColor='#1A1A1A' />
+  );
+};
+
+/**
+ * Modal variant that renders a floating close/back button above (or below) the
+ * modal content. Useful for dialogs where the close affordance should sit
+ * outside the content card.
+ */
+const ModalWithCloseOverlay = forwardRef<ContainerRef, ModalWithCloseOverlayProps>((props, forwardedRef) => {
+  const {
+    isBack = false,
+    isCenter,
+    isTop = true,
+    variant = ModalVariant.NEUTRAL,
+    children,
+    styleConfig,
+    wrapperStyles,
+    ...rest
+  } = props || {};
+  const { onClose } = rest;
+
+  const closeButtonStyles = useStyles(
+    (theme) => ({
+      root: {
+        position: 'absolute',
+        right: (isCenter ? '50%' : isBack ? 'unset' : 0) as unknown as number,
+        transform: isCenter ? 'translateX(50%)' : 'none',
+        backgroundColor:
+          variant === ModalVariant.DARK ? theme.color.background.defaultDarkest : theme.color.background.neutral,
+        height: 32,
+        width: 32,
+        display: 'flex',
+        alignItems: 'center',
+        padding: theme.spacing[1],
+        borderRadius: 40,
+        cursor: 'pointer',
+        ...(isTop ? { top: -42 } : { bottom: -42 }),
+      },
+    }),
+    [isBack, variant, isCenter, isTop],
+  );
+
+  const CloseIcon = getCloseIcon(isBack, variant);
+
+  return (
+    <Modal ref={forwardedRef} blur size='NONE' insidePortal variant={variant} {...rest}>
+      <Container styleConfig={{ root: [staticStyles.root, ...(styleConfig?.root ?? [])] }}>
+        <Container styleConfig={{ root: [...(wrapperStyles ?? []), ...(styleConfig?.wrapper ?? [])] }}>
+          <Container
+            styleConfig={{ root: [closeButtonStyles.root, ...(styleConfig?.closeButton ?? [])] }}
+            onClick={() => onClose?.()}
+          >
+            {CloseIcon}
+          </Container>
+        </Container>
+        {children}
+      </Container>
+    </Modal>
+  );
+});
+
+ModalWithCloseOverlay.displayName = 'ModalWithCloseOverlay';
+
+export default ModalWithCloseOverlay;

package/src/ModalsUsableComponents/index.ts

@@ -0,0 +1,2 @@
+//will add all kind of modals here.
+export { default as ModalWithCloseOverlay } from './ModalWithCloseOverlay';

package/src/ModalsUsableComponents/type.ts

@@ -0,0 +1,40 @@
+import type { Styles } from '@cleartrip/ct-design-types';
+import { ModalProps } from '../type';
+
+export interface ModalWithCloseOverlayProps extends ModalProps {
+  /**
+   * Show the back icon (left side) instead of the close icon.
+   * @default false
+   */
+  isBack?: boolean;
+
+  /**
+   * Centers the close/back button horizontally above (or below) the modal.
+   */
+  isCenter?: boolean;
+
+  /**
+   * Position the close/back button above the modal (`true`) or below it (`false`).
+   * @default true
+   */
+  isTop?: boolean;
+
+  /**
+   * Callback fired when the close/back button is pressed.
+   */
+  onClose?: (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
+
+  /**
+   * Style overrides for the wrapper holding the close button.
+   */
+  wrapperStyles?: Styles[];
+
+  /**
+   * Style overrides for the outer container that positions the modal content.
+   */
+  styleConfig?: {
+    root?: Styles[];
+    wrapper?: Styles[];
+    closeButton?: Styles[];
+  };
+}

package/src/constants.ts

@@ -0,0 +1,31 @@
+export enum ModalSize {
+  SMALL = 'SMALL',
+  MEDIUM = 'MEDIUM',
+  LARGE = 'LARGE',
+  FULL_SCREEN = 'FULL_SCREEN',
+  NONE = 'NONE',
+  REGULAR = 'REGULAR',
+  BIG = 'BIG',
+}
+
+export enum ModalVariant {
+  DARK = 'dark',
+  NEUTRAL = 'neutral',
+}
+
+export enum ModalPlacement {
+  CENTER = 'center',
+  BOTTOM = 'bottom',
+}
+
+export enum ActionButtonVariant {
+  BACK = 'back',
+  CLOSE = 'close',
+  NONE = 'none',
+}
+
+export enum ActionButtonAlignment {
+  CENTER = 'center',
+  LEFT = 'left',
+  RIGHT = 'right',
+}

package/src/index.native.ts

@@ -0,0 +1,4 @@
+export { default as Modal } from './Modal.native';
+export type * from './type';
+export * from './constants';
+export { MODAL_ANIMATION_DURATION } from './modalUtils';

package/src/index.ts

@@ -0,0 +1,10 @@
+export { default as Modal } from './Modal';
+export type * from './type';
+export * from './constants';
+export { default as ModalAction } from './ModalAction';
+export { default as ModalContainer } from './ModalContainer';
+export { default as ModalContent } from './ModalContent';
+export { default as ModalTitle } from './ModalTitle';
+export { default as Backdrop } from './Backdrop';
+export { ModalWithCloseOverlay } from './ModalsUsableComponents';
+export { MODAL_ANIMATION_DURATION } from './modalUtils';

package/src/modalUtils.ts

@@ -0,0 +1 @@
+export const MODAL_ANIMATION_DURATION = 350;

package/src/style.native.ts

@@ -0,0 +1,83 @@
+import type { ViewStyle } from '@cleartrip/ct-design-types';
+import type { Theme } from '@cleartrip/ct-design-theme';
+
+import { ActionButtonAlignmentType, ModalPlacementTypes, ModalSizeTypes } from './type';
+
+import { ActionButtonAlignment, ModalSize, ModalVariant } from './constants';
+
+const getModalSizeStyles = (
+  size: ModalSizeTypes,
+): { width?: number | '100%'; height?: number | '100%'; flex?: number } => {
+  switch (size) {
+    case ModalSize.SMALL:
+      return { width: 360 };
+    case ModalSize.LARGE:
+      return { width: 1032 };
+    case ModalSize.FULL_SCREEN:
+      return { width: '100%', height: '100%', flex: 1 };
+    case ModalSize.NONE:
+      return {};
+    case ModalSize.BIG:
+      return { width: 730 };
+    case ModalSize.REGULAR:
+      return { width: 484 };
+    case ModalSize.MEDIUM:
+    default:
+      return { width: 504 };
+  }
+};
+
+const getModalChildContainerCommonStyles = ({
+  theme,
+  size,
+  blur,
+}: {
+  theme: Theme;
+  size: ModalSizeTypes;
+  blur?: boolean;
+  variant?: `${ModalVariant}`;
+}): {
+  maxHeight?: number | '100%' | '90%';
+  shadowColor?: string;
+  shadowOffset?: { width: number; height: number };
+  shadowOpacity?: number;
+  borderRadius?: number;
+} => ({
+  borderRadius: size === ModalSize.FULL_SCREEN ? 0 : theme?.spacing?.['3'],
+  maxHeight: size === ModalSize.FULL_SCREEN ? '100%' : '90%',
+  shadowColor: blur ? '#000' : 'transparent',
+  shadowOffset: blur ? { width: 0, height: 2 } : { width: 0, height: 0 },
+  shadowOpacity: blur ? 0.2 : 0,
+});
+
+export const getModalChildContainerStyle = ({
+  theme,
+  size,
+  blur,
+}: {
+  theme: Theme;
+  size: ModalSizeTypes;
+  blur: boolean;
+}) => ({
+  ...getModalChildContainerCommonStyles({ theme, size, blur }),
+  ...getModalSizeStyles(size),
+});
+
+export const getModalPlacement = ({ placement }: { placement: ModalPlacementTypes }): ViewStyle => ({
+  justifyContent: placement === 'center' ? 'center' : 'flex-end',
+});
+
+export const getActionButtonAlignment = ({
+  actionButtonAlignment,
+}: {
+  actionButtonAlignment: ActionButtonAlignmentType;
+}) => {
+  switch (actionButtonAlignment) {
+    case ActionButtonAlignment.CENTER:
+      return { marginLeft: '50%' as unknown as number };
+    case ActionButtonAlignment.LEFT:
+      return { marginLeft: 0 as unknown as number };
+    default:
+      return { marginLeft: 'auto' as unknown as number };
+  }
+};

package/src/style.ts

@@ -0,0 +1,44 @@
+import { ModalSizeTypes } from './type';
+import { ModalSize } from './constants';
+
+export const getModalSizeStyles = (size: ModalSizeTypes) => {
+  switch (size) {
+    case ModalSize.SMALL: {
+      return {
+        width: '360px',
+      };
+    }
+    case ModalSize.LARGE: {
+      return {
+        width: '1032px',
+      };
+    }
+    case ModalSize.FULL_SCREEN: {
+      return {
+        width: '100vw',
+        height: '100vh',
+        minHeight: '100vh',
+        minWidth: '100%',
+      };
+    }
+    case ModalSize.NONE: {
+      return {};
+    }
+    case ModalSize.BIG: {
+      return {
+        width: '730px',
+      };
+    }
+    case ModalSize.REGULAR: {
+      return {
+        width: '484px',
+      };
+    }
+    case ModalSize.MEDIUM:
+    default: {
+      return {
+        width: '504px',
+      };
+    }
+  }
+};

package/src/type.ts

@@ -0,0 +1,72 @@
+import type { Styles } from '@cleartrip/ct-design-types';
+import { ReactNode, ReactElement } from 'react';
+import type { ContainerRef } from '@cleartrip/ct-design-container';
+
+import { ModalSize, ModalVariant, ModalPlacement, ActionButtonVariant, ActionButtonAlignment } from './constants';
+
+export type ModalSizeTypes = `${ModalSize}`;
+
+type OwnModalProps = {
+  /**
+   * footerAlignment will give whether to give flex end or start or start
+   */
+  footerAlignment?: 'start' | 'end' | 'center';
+  animationDuration?: number;
+};
+
+export type ModalProps = IModalProps;
+
+export type ActionButtonVariantsType = `${ActionButtonVariant}`;
+export type ActionButtonAlignmentType = `${ActionButtonAlignment}`;
+export type ModalPlacementTypes = `${ModalPlacement}`;
+export type ModalVariantTypes = `${ModalVariant}`;
+
+export interface IChildProps {
+  onClose?: () => void;
+}
+
+export interface IModalProps extends OwnModalProps {
+  /** Alignment of the action button. */
+  actionButtonAlignment?: ActionButtonAlignmentType;
+  /** Type of the action button (back, close, none). */
+  actionButtonType?: ActionButtonVariantsType;
+  /** Whether clicking on the backdrop should close the modal. */
+  allowBackdropClose?: boolean;
+  /** Duration of the open/close animation in milliseconds. */
+  animationDuration?: number;
+  /** Custom backdrop component; replaces the default overlay. */
+  backDropComponent?: ReactNode;
+  /** Adds a blur/dim effect to the background. */
+  blur?: boolean;
+  /** Content rendered inside the modal body. */
+  children?: ReactElement<{ onClose?: () => void }>;
+  /** Whether the modal opens inside a portal. */
+  insidePortal?: boolean;
+  /** Callback fired when the modal requests to close. */
+  onClose?: () => void;
+  /** Callback fired on key down events. */
+  onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+  /** Controls the modal's visibility. */
+  open: boolean;
+  /** Placement of the modal (center or bottom). */
+  placement?: ModalPlacementTypes;
+  /** Bottom margin for modal placement. */
+  bottomMargin?: number;
+  /** Ref to the underlying container. */
+  ref?: React.Ref<ContainerRef>;
+  /** Size preset controlling the modal's dimensions. */
+  size?: ModalSizeTypes;
+  /** Style overrides for modal slots. */
+  styleConfig?: {
+    root?: Styles[];
+    backdropStyles?: Styles[];
+    modalContentStyles?: Styles[];
+    actionButtonStyles?: Styles[];
+  };
+  /** Visual variant (dark or neutral). */
+  variant?: ModalVariantTypes;
+  /**
+   * hide cross icon
+   */
+  hideCrossIcon?: boolean;
+}

package/dist/ModalsUsableComponents/style.d.ts

@@ -1,11 +0,0 @@
-import { CSSObject } from 'styled-components';
-import { Theme } from '@cleartrip/ct-design-theme';
-import { ModalVariant } from '../type';
-export declare const getCloseButtonStyle: ({ theme, isLeft, variant, isCenter, isTop, }: {
-    theme: Theme;
-    isLeft: boolean;
-    variant?: "dark" | "neutral" | undefined;
-    isCenter?: boolean | undefined;
-    isTop?: boolean | undefined;
-}) => CSSObject;
-//# sourceMappingURL=style.d.ts.map

package/dist/ModalsUsableComponents/style.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../packages/components/Modal/src/ModalsUsableComponents/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,4BAA4B,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAEvC,eAAO,MAAM,mBAAmB;WAOvB,KAAK;YACJ,OAAO;;;;MAIb,SAaF,CAAC"}