@juspay/blend-design-system 0.0.37-beta.7 → 0.0.37

package/lib/components/ModalV2/ModalV2Header.tsx

@@ -0,0 +1,144 @@
+import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
+import type { ReactNode } from 'react'
+import { SkeletonVariant } from '../Skeleton'
+import type { ModalV2TokensType } from './modalV2.tokens.types'
+import ModalV2Skeleton from './ModalV2Skeleton'
+import Block from '../Primitives/Block/Block'
+import Text from '../Text/Text'
+import { ButtonV2, ButtonV2Type, ButtonV2SubType } from '../ButtonV2'
+import { XIcon } from '@phosphor-icons/react'
+
+const formatLineHeight = (value: string | number | undefined) =>
+    typeof value === 'number' ? `${value}px` : value
+
+const ModalV2Header = ({
+    title,
+    subtitle,
+    onClose,
+    showCloseButton,
+    headerSlot,
+    showDivider,
+    showSkeleton,
+    skeletonVariant,
+    titleId,
+    subtitleId,
+}: {
+    title?: string
+    subtitle?: string
+    onClose: () => void
+    showCloseButton?: boolean
+    headerSlot?: ReactNode
+    showDivider?: boolean
+    showSkeleton?: boolean
+    skeletonVariant?: SkeletonVariant
+    titleId?: string
+    subtitleId?: string
+}) => {
+    const modalTokens = useResponsiveTokens<ModalV2TokensType>('MODALV2')
+
+    if (showSkeleton) {
+        return (
+            <ModalV2Skeleton
+                modalTokens={modalTokens}
+                headerSkeleton={{
+                    show: showSkeleton || false,
+                    showDivider: showDivider || false,
+                    showCloseButton: showCloseButton || false,
+                }}
+                skeletonVariant={
+                    skeletonVariant || ('pulse' as SkeletonVariant)
+                }
+            />
+        )
+    }
+
+    if (!title && !subtitle && !headerSlot && !showCloseButton) return null
+
+    return (
+        <Block
+            display="flex"
+            justifyContent="space-between"
+            alignItems="flex-start"
+            paddingTop={modalTokens.header.paddingTop}
+            paddingRight={modalTokens.header.paddingRight}
+            paddingBottom={modalTokens.header.paddingBottom}
+            paddingLeft={modalTokens.header.paddingLeft}
+            flexShrink={0}
+            overflow="auto"
+            maxHeight={modalTokens.header.maxHeight}
+            gap={modalTokens.header.gap}
+            backgroundColor={modalTokens.header.backgroundColor}
+            borderTopLeftRadius={modalTokens.header.borderTopLeftRadius}
+            borderTopRightRadius={modalTokens.header.borderTopRightRadius}
+            borderBottom={
+                showDivider ? modalTokens.header.borderBottom : undefined
+            }
+        >
+            <Block display="flex" flexDirection="column">
+                <Block
+                    display="flex"
+                    flexDirection="row"
+                    gap={modalTokens.header.slot.gap}
+                    alignItems="center"
+                >
+                    {title && (
+                        <Text
+                            id={titleId}
+                            data-element="header"
+                            data-id={title ?? ''}
+                            as="span"
+                            fontSize={modalTokens.header.text.title.fontSize}
+                            fontWeight={
+                                modalTokens.header.text.title.fontWeight
+                            }
+                            lineHeight={formatLineHeight(
+                                modalTokens.header.text.title.lineHeight
+                            )}
+                            color={modalTokens.header.text.title.color}
+                        >
+                            {title}
+                        </Text>
+                    )}
+                    {headerSlot}
+                </Block>
+
+                {subtitle && (
+                    <Text
+                        id={subtitleId}
+                        data-element="header-subtitle"
+                        data-id={subtitle}
+                        as="span"
+                        fontSize={modalTokens.header.text.subtitle.fontSize}
+                        color={modalTokens.header.text.subtitle.color}
+                        fontWeight={modalTokens.header.text.subtitle.fontWeight}
+                        lineHeight={formatLineHeight(
+                            modalTokens.header.text.subtitle.lineHeight
+                        )}
+                    >
+                        {subtitle}
+                    </Text>
+                )}
+            </Block>
+            {showCloseButton && (
+                <ButtonV2
+                    subType={ButtonV2SubType.INLINE}
+                    buttonType={ButtonV2Type.SECONDARY}
+                    leftSlot={{
+                        slot: (
+                            <XIcon
+                                size={modalTokens.closeButton.width}
+                                color={modalTokens.closeButton.color}
+                                aria-hidden="true"
+                            />
+                        ),
+                        maxHeight: modalTokens.closeButton.height,
+                    }}
+                    onClick={onClose}
+                    aria-label="Close modal"
+                />
+            )}
+        </Block>
+    )
+}
+
+export default ModalV2Header

package/lib/components/ModalV2/ModalV2Skeleton.tsx

@@ -0,0 +1,80 @@
+import Block from '../Primitives/Block/Block'
+import { Skeleton } from '../Skeleton'
+import type { FC } from 'react'
+import type { ModalV2SkeletonProps } from './modalV2.types'
+
+const ModalV2Skeleton: FC<ModalV2SkeletonProps> = ({
+    modalTokens,
+    headerSkeleton,
+    bodySkeleton,
+    footerSkeleton,
+
+    skeletonVariant,
+}) => {
+    const {
+        show: showHeaderSkeleton = false,
+        showDivider: showHeaderDivider = false,
+    } = headerSkeleton || {}
+    const { show: showBodySkeleton = false, width, height } = bodySkeleton || {}
+    const { show: showFooterSkeleton = false } = footerSkeleton || {}
+
+    if (showHeaderSkeleton) {
+        return (
+            <Block
+                display="flex"
+                justifyContent="space-between"
+                alignItems="flex-start"
+                paddingTop={modalTokens.skeleton.header.paddingTop}
+                paddingRight={modalTokens.skeleton.header.paddingRight}
+                paddingBottom={modalTokens.skeleton.header.paddingBottom}
+                paddingLeft={modalTokens.skeleton.header.paddingLeft}
+                flexShrink={0}
+                gap={modalTokens.skeleton.header.gap}
+                borderBottom={
+                    showHeaderDivider
+                        ? modalTokens.skeleton.header.borderBottom
+                        : undefined
+                }
+            >
+                <Block
+                    display="flex"
+                    flexDirection="column"
+                    flexGrow={1}
+                    gap={modalTokens.skeleton.header.gap}
+                >
+                    <Skeleton
+                        variant={skeletonVariant}
+                        width={modalTokens.skeleton.header.width}
+                        height={modalTokens.skeleton.header.height}
+                        borderRadius={modalTokens.skeleton.header.borderRadius}
+                    />
+                </Block>
+            </Block>
+        )
+    }
+
+    if (showBodySkeleton) {
+        return (
+            <Block
+                display="flex"
+                flexDirection="column"
+                gap={modalTokens.skeleton.body.gap}
+            >
+                <Skeleton
+                    variant={skeletonVariant}
+                    width={width || modalTokens.skeleton.body.width}
+                    height={height || modalTokens.skeleton.body.height}
+                    borderRadius={modalTokens.skeleton.body.borderRadius}
+                />
+            </Block>
+        )
+    }
+
+    if (showFooterSkeleton) {
+        return null
+    }
+
+    return null
+}
+
+export default ModalV2Skeleton

package/lib/components/ModalV2/index.ts

@@ -0,0 +1,4 @@
+export { default as ModalV2 } from './ModalV2'
+export * from './modalV2.tokens'
+export * from './modalV2.tokens.types'
+export * from './modalV2.types'

package/lib/components/ModalV2/mobileModalV2.tsx

@@ -0,0 +1,411 @@
+import React, { forwardRef } from 'react'
+import Block from '../Primitives/Block/Block'
+import { ButtonV2, ButtonV2SubType, ButtonV2Type } from '../ButtonV2'
+import type { ModalV2Props } from './modalV2.types'
+import { type SkeletonVariant } from '../Skeleton'
+import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
+import type { ModalV2TokensType } from './modalV2.tokens.types'
+import ModalV2Skeleton from './ModalV2Skeleton'
+import {
+    DrawerV2,
+    DrawerV2Body,
+    DrawerV2Close,
+    DrawerV2Content,
+    DrawerV2Description,
+    DrawerV2Footer,
+    DrawerV2Header,
+    DrawerV2Overlay,
+    DrawerV2Portal,
+    DrawerV2Title,
+} from '../DrawerV2'
+import { XIcon } from '@phosphor-icons/react'
+type MobileModalV2Props = ModalV2Props
+
+const formatLineHeight = (value: string | number | undefined) =>
+    typeof value === 'number' ? `${value}px` : value
+
+const visuallyHiddenStyle: React.CSSProperties = {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    padding: 0,
+    margin: -1,
+    overflow: 'hidden',
+    clip: 'rect(0, 0, 0, 0)',
+    clipPath: 'inset(50%)',
+    whiteSpace: 'nowrap',
+    borderWidth: 0,
+}
+
+const MobileModalV2 = forwardRef<HTMLDivElement, MobileModalV2Props>(
+    (
+        {
+            isOpen,
+            onClose,
+            title,
+            subtitle,
+            children,
+            primaryAction,
+            secondaryAction,
+            showCloseButton = true,
+            showHeader = true,
+            showFooter = true,
+            closeOnBackdropClick = true,
+            customHeader,
+            customFooter,
+            headerSlot,
+            skeleton,
+            showDivider = true,
+            ...props
+        },
+        ref
+    ) => {
+        const modalTokens = useResponsiveTokens<ModalV2TokensType>('MODALV2')
+
+        const shouldShowSkeleton = skeleton?.show
+        const skeletonVariant: SkeletonVariant =
+            (skeleton?.variant as SkeletonVariant) || 'pulse'
+
+        const bodySkeletonWidth = skeleton?.bodySkeletonProps?.width || '100%'
+        const bodySkeletonHeight = skeleton?.bodySkeletonProps?.height || 200
+        const headerPaddingStyle = {
+            paddingTop: modalTokens.header.paddingTop,
+            paddingRight: modalTokens.header.paddingRight,
+            paddingBottom: modalTokens.header.paddingBottom,
+            paddingLeft: modalTokens.header.paddingLeft,
+        }
+        const bodyPaddingStyle = {
+            paddingTop: modalTokens.body.paddingTop,
+            paddingRight: modalTokens.body.paddingRight,
+            paddingBottom: modalTokens.body.paddingBottom,
+            paddingLeft: modalTokens.body.paddingLeft,
+        }
+        const footerPaddingStyle = {
+            paddingTop: modalTokens.footer.paddingTop,
+            paddingRight: modalTokens.footer.paddingRight,
+            paddingBottom: modalTokens.footer.paddingBottom,
+            paddingLeft: modalTokens.footer.paddingLeft,
+        }
+        const contentClassName =
+            'fixed z-[1001] outline-none flex flex-col overflow-hidden max-h-[85vh]'
+        const contentStyle = {
+            left: modalTokens.overlay.offset,
+            right: modalTokens.overlay.offset,
+            bottom: modalTokens.overlay.offset,
+            backgroundColor: modalTokens.backgroundColor,
+            boxShadow: modalTokens.boxShadow,
+            borderRadius: modalTokens.borderRadius,
+            border: `1px solid ${modalTokens.divider.borderColor}`,
+            height: 'auto',
+        }
+        const shouldShowBodySkeleton = Boolean(
+            shouldShowSkeleton && skeleton?.bodySkeletonProps?.show
+        )
+        const hasFooterContent = Boolean(
+            customFooter ||
+            primaryAction ||
+            secondaryAction ||
+            shouldShowSkeleton
+        )
+        const {
+            'aria-label': ariaLabel,
+            'aria-labelledby': ariaLabelledBy,
+            'aria-describedby': ariaDescribedBy,
+            ...contentProps
+        } = props
+        const shouldUseGeneratedTitle = Boolean(
+            showHeader && !customHeader && title
+        )
+        const effectiveAriaLabel =
+            ariaLabel ??
+            (ariaLabelledBy || shouldUseGeneratedTitle
+                ? undefined
+                : title || 'Modal dialog')
+        const hiddenTitle = ariaLabel || title || 'Modal dialog'
+
+        return (
+            <DrawerV2
+                open={isOpen}
+                onOpenChange={(open) => {
+                    if (!open) onClose()
+                }}
+                direction="bottom"
+                modal={true}
+                dismissible={closeOnBackdropClick}
+            >
+                <DrawerV2Portal>
+                    <DrawerV2Overlay
+                        className={'fixed inset-0 z-[1000]'}
+                        style={{
+                            backgroundColor:
+                                modalTokens.overlay.backgroundColor,
+                        }}
+                    />
+                    <DrawerV2Content
+                        {...contentProps}
+                        ref={ref}
+                        className={contentClassName}
+                        style={contentStyle}
+                        aria-label={effectiveAriaLabel}
+                        aria-labelledby={ariaLabelledBy}
+                        aria-describedby={ariaDescribedBy}
+                    >
+                        {!shouldUseGeneratedTitle && (
+                            <DrawerV2Title style={visuallyHiddenStyle}>
+                                {hiddenTitle}
+                            </DrawerV2Title>
+                        )}
+                        <Block
+                            alignSelf="center"
+                            flexShrink={0}
+                            width="48px"
+                            height="4px"
+                            borderRadius="999px"
+                            backgroundColor={modalTokens.divider.borderColor}
+                            marginTop="8px"
+                            marginBottom="4px"
+                            aria-hidden="true"
+                        />
+                        {/* Header */}
+                        {showHeader &&
+                            (customHeader ??
+                                (!shouldShowSkeleton ? (
+                                    <DrawerV2Header style={headerPaddingStyle}>
+                                        <Block
+                                            display="flex"
+                                            justifyContent="space-between"
+                                            alignItems="center"
+                                        >
+                                            <Block
+                                                display="flex"
+                                                flexDirection="column"
+                                                gap={
+                                                    modalTokens.header.slot.gap
+                                                }
+                                            >
+                                                {(title || headerSlot) && (
+                                                    <DrawerV2Title>
+                                                        <Block
+                                                            display="flex"
+                                                            flexDirection="row"
+                                                            gap={
+                                                                modalTokens
+                                                                    .header.slot
+                                                                    .gap
+                                                            }
+                                                            color={
+                                                                modalTokens
+                                                                    .header.text
+                                                                    .title.color
+                                                            }
+                                                            fontWeight={
+                                                                modalTokens
+                                                                    .header.text
+                                                                    .title
+                                                                    .fontWeight
+                                                            }
+                                                            fontSize={
+                                                                modalTokens
+                                                                    .header.text
+                                                                    .title
+                                                                    .fontSize
+                                                            }
+                                                            lineHeight={formatLineHeight(
+                                                                modalTokens
+                                                                    .header.text
+                                                                    .title
+                                                                    .lineHeight
+                                                            )}
+                                                        >
+                                                            {title}
+                                                            {headerSlot}
+                                                        </Block>
+                                                    </DrawerV2Title>
+                                                )}
+                                                {subtitle && (
+                                                    <DrawerV2Description
+                                                        style={{
+                                                            color: modalTokens
+                                                                .header.text
+                                                                .subtitle.color,
+                                                            fontWeight:
+                                                                modalTokens
+                                                                    .header.text
+                                                                    .subtitle
+                                                                    .fontWeight,
+                                                            fontSize:
+                                                                modalTokens
+                                                                    .header.text
+                                                                    .subtitle
+                                                                    .fontSize,
+                                                            lineHeight:
+                                                                formatLineHeight(
+                                                                    modalTokens
+                                                                        .header
+                                                                        .text
+                                                                        .subtitle
+                                                                        .lineHeight
+                                                                ),
+                                                        }}
+                                                    >
+                                                        {subtitle}
+                                                    </DrawerV2Description>
+                                                )}
+                                            </Block>
+                                            {showCloseButton && (
+                                                <DrawerV2Close asChild>
+                                                    <ButtonV2
+                                                        subType={
+                                                            ButtonV2SubType.INLINE
+                                                        }
+                                                        buttonType={
+                                                            ButtonV2Type.SECONDARY
+                                                        }
+                                                        leftSlot={{
+                                                            slot: (
+                                                                <XIcon
+                                                                    size={
+                                                                        modalTokens
+                                                                            .closeButton
+                                                                            .width
+                                                                    }
+                                                                    color={
+                                                                        modalTokens
+                                                                            .closeButton
+                                                                            .color
+                                                                    }
+                                                                    aria-hidden="true"
+                                                                />
+                                                            ),
+                                                            maxHeight:
+                                                                modalTokens
+                                                                    .closeButton
+                                                                    .height,
+                                                        }}
+                                                        aria-label="Close modal"
+                                                    />
+                                                </DrawerV2Close>
+                                            )}
+                                        </Block>
+                                    </DrawerV2Header>
+                                ) : (
+                                    <ModalV2Skeleton
+                                        modalTokens={modalTokens}
+                                        headerSkeleton={{
+                                            show: shouldShowSkeleton || false,
+                                            showCloseButton:
+                                                showCloseButton || false,
+                                            showDivider: showDivider,
+                                        }}
+                                        skeletonVariant={skeletonVariant}
+                                    />
+                                )))}
+                        {showHeader && showDivider && !shouldShowSkeleton && (
+                            <hr
+                                style={{
+                                    borderColor:
+                                        modalTokens.divider.borderColor,
+                                }}
+                            />
+                        )}
+                        {/* Body */}
+                        {!shouldShowBodySkeleton ? (
+                            <DrawerV2Body
+                                style={{
+                                    ...bodyPaddingStyle,
+                                    borderRadius:
+                                        !showFooter || !hasFooterContent
+                                            ? `0 0 ${modalTokens.borderRadius} ${modalTokens.borderRadius}`
+                                            : undefined,
+                                    flex: '1 1 auto',
+                                    minHeight: 0,
+                                    overflowY: 'auto',
+                                }}
+                            >
+                                {children}
+                            </DrawerV2Body>
+                        ) : (
+                            <Block
+                                style={{
+                                    ...bodyPaddingStyle,
+                                    borderRadius:
+                                        !showFooter || !hasFooterContent
+                                            ? `0 0 ${modalTokens.borderRadius} ${modalTokens.borderRadius}`
+                                            : undefined,
+                                }}
+                            >
+                                <ModalV2Skeleton
+                                    modalTokens={modalTokens}
+                                    bodySkeleton={{
+                                        show: true,
+                                        width: bodySkeletonWidth,
+                                        height: bodySkeletonHeight,
+                                    }}
+                                    skeletonVariant={skeletonVariant}
+                                />
+                            </Block>
+                        )}
+                        {showFooter &&
+                            hasFooterContent &&
+                            showDivider &&
+                            !shouldShowSkeleton && (
+                                <hr
+                                    style={{
+                                        borderColor:
+                                            modalTokens.divider.borderColor,
+                                    }}
+                                />
+                            )}
+                        {/* Footer */}
+                        {showFooter && hasFooterContent && (
+                            <DrawerV2Footer>
+                                {customFooter ??
+                                    (!shouldShowSkeleton ? (
+                                        <Block
+                                            display="flex"
+                                            gap={modalTokens.footer.gap}
+                                            justifyContent="flex-end"
+                                            style={footerPaddingStyle}
+                                        >
+                                            {secondaryAction && (
+                                                <ButtonV2
+                                                    {...secondaryAction}
+                                                    buttonType={
+                                                        secondaryAction.buttonType ||
+                                                        ButtonV2Type.SECONDARY
+                                                    }
+                                                />
+                                            )}
+                                            {primaryAction && (
+                                                <ButtonV2
+                                                    {...primaryAction}
+                                                    buttonType={
+                                                        primaryAction.buttonType ||
+                                                        ButtonV2Type.PRIMARY
+                                                    }
+                                                />
+                                            )}
+                                        </Block>
+                                    ) : (
+                                        <ModalV2Skeleton
+                                            modalTokens={modalTokens}
+                                            footerSkeleton={{
+                                                show:
+                                                    shouldShowSkeleton || false,
+                                                showDivider: showDivider,
+                                            }}
+                                            skeletonVariant={skeletonVariant}
+                                        />
+                                    ))}
+                            </DrawerV2Footer>
+                        )}
+                    </DrawerV2Content>
+                </DrawerV2Portal>
+            </DrawerV2>
+        )
+    }
+)
+
+MobileModalV2.displayName = 'MobileModalV2'
+
+export default MobileModalV2

package/lib/components/ModalV2/modalAnimationV2.tsx

@@ -0,0 +1,19 @@
+import { css } from 'styled-components'
+
+const easingIn = 'cubic-bezier(0.16, 0, 0.3, 1)'
+const easingOut = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'
+const duration = 300
+
+export const modalBackdropAnimationsV2 = (isAnimatingIn: boolean) => css`
+    transition: opacity ${duration}ms ${isAnimatingIn ? easingIn : easingOut};
+`
+
+export const modalContentAnimationsV2 = (isAnimatingIn: boolean) => css`
+    opacity: ${isAnimatingIn ? 1 : 0};
+    transform: scale(${isAnimatingIn ? 1 : 0.97});
+    transition:
+        opacity ${duration}ms ${isAnimatingIn ? easingIn : easingOut},
+        transform ${duration}ms ${isAnimatingIn ? easingIn : easingOut};
+`
+
+export const ANIMATION_DURATION = duration