@juspay/blend-design-system 0.0.37-beta.2 → 0.0.37-beta.3

package/lib/components/Timeline/TimelineNode.tsx

@@ -0,0 +1,225 @@
+import { forwardRef } from 'react'
+import Block from '../Primitives/Block/Block'
+import Text from '../Text/Text'
+import AvatarV2 from '../AvatarV2/AvatarV2'
+import { AvatarV2Size } from '../AvatarV2/avatarV2.types'
+import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
+import { TimelineTokensType } from './timeline.token'
+import { TimelineNodeStatus } from './types'
+import type { TimelineNodeProps } from './types'
+
+const TimelineNode = forwardRef<HTMLDivElement, TimelineNodeProps>(
+    (
+        {
+            title,
+            headerRightSlot,
+            datetime,
+            datetimeLeftSlot,
+            datetimeRightSlot,
+            text,
+            maxLines = 3,
+            user,
+            time,
+            status = TimelineNodeStatus.NEUTRAL,
+            avatarProps,
+            children,
+            ...rest
+        },
+        ref
+    ) => {
+        const tokens = useResponsiveTokens<TimelineTokensType>('TIMELINE')
+        const { subsection, indicator } = tokens
+        const dotColor = tokens.statusColors[status]
+        const body = text ?? (typeof children === 'string' ? children : null)
+        const hasBody = Boolean(
+            body || (children && typeof children !== 'string')
+        )
+
+        const hasHeaderRow =
+            (title != null && title !== '') ||
+            headerRightSlot != null ||
+            datetimeLeftSlot != null ||
+            (datetime != null && datetime !== '') ||
+            datetimeRightSlot != null
+
+        return (
+            <Block
+                ref={ref}
+                position="relative"
+                paddingLeft={subsection.paddingLeft}
+                marginBottom={subsection.marginBottom}
+                data-timeline-node="true"
+                style={{ minWidth: 0 }}
+                {...rest}
+            >
+                <Block
+                    position="absolute"
+                    left={indicator.left}
+                    top={subsection.rootIndicator.top}
+                    width={indicator.width}
+                    height={indicator.height}
+                    borderRadius="50%"
+                    backgroundColor={dotColor}
+                    flexShrink={0}
+                />
+
+                {hasHeaderRow && (
+                    <Block
+                        display="flex"
+                        alignItems="flex-start"
+                        justifyContent="space-between"
+                        flexWrap="wrap"
+                        gap={subsection.headerRow.gap}
+                        marginBottom={
+                            hasBody
+                                ? subsection.description.marginBottom
+                                : undefined
+                        }
+                    >
+                        <Block
+                            display="flex"
+                            alignItems="center"
+                            gap={subsection.headerRow.gap}
+                            flexGrow={1}
+                            minWidth={0}
+                        >
+                            {title != null && title !== '' && (
+                                <Text
+                                    fontSize={subsection.title.fontSize}
+                                    fontWeight={subsection.title.fontWeight}
+                                    color={subsection.title.color}
+                                >
+                                    {title}
+                                </Text>
+                            )}
+                            {headerRightSlot != null && (
+                                <Block flexShrink={0}>{headerRightSlot}</Block>
+                            )}
+                        </Block>
+
+                        <Block
+                            display="flex"
+                            alignItems="center"
+                            gap={subsection.datetimeGroup.gap}
+                            flexShrink={0}
+                        >
+                            {datetimeLeftSlot != null && (
+                                <Block flexShrink={0}>{datetimeLeftSlot}</Block>
+                            )}
+                            {datetime != null && datetime !== '' && (
+                                <Text
+                                    fontSize={subsection.datetime.fontSize}
+                                    color={subsection.datetime.color}
+                                >
+                                    {datetime}
+                                </Text>
+                            )}
+                            {datetimeRightSlot != null && (
+                                <Block flexShrink={0}>
+                                    {datetimeRightSlot}
+                                </Block>
+                            )}
+                        </Block>
+                    </Block>
+                )}
+
+                {hasBody && (
+                    <Block
+                        marginBottom={
+                            user || time
+                                ? subsection.description.marginBottom
+                                : undefined
+                        }
+                        style={{ minWidth: 0 }}
+                    >
+                        {body != null ? (
+                            <Text
+                                fontSize={subsection.description.fontSize}
+                                color={subsection.description.color}
+                                style={{
+                                    display: '-webkit-box',
+                                    WebkitLineClamp: maxLines,
+                                    WebkitBoxOrient: 'vertical',
+                                    overflow: 'hidden',
+                                }}
+                            >
+                                {body}
+                            </Text>
+                        ) : (
+                            children
+                        )}
+                    </Block>
+                )}
+
+                {(user || time) && (
+                    <Block
+                        display="flex"
+                        alignItems="center"
+                        marginTop={subsection.avatar.marginTop}
+                    >
+                        {user && (
+                            <>
+                                <AvatarV2
+                                    src={user.avatar}
+                                    fallbackText={
+                                        user.fallbackText ?? user.name
+                                    }
+                                    size={AvatarV2Size.SM}
+                                    width={subsection.avatar.width}
+                                    height={subsection.avatar.height}
+                                    {...avatarProps}
+                                />
+                                <Text
+                                    fontSize={subsection.user.fontSize}
+                                    color={subsection.user.color}
+                                    style={{
+                                        marginLeft: subsection.user
+                                            .marginLeft as string,
+                                    }}
+                                >
+                                    {user.name}
+                                </Text>
+                                {time != null && time !== '' && (
+                                    <>
+                                        <Block
+                                            width={subsection.separator.width}
+                                            height={subsection.separator.height}
+                                            borderRadius="50%"
+                                            backgroundColor={
+                                                subsection.separator.color
+                                            }
+                                            marginLeft={
+                                                subsection.separator.marginLeft
+                                            }
+                                            marginRight={
+                                                subsection.separator.marginRight
+                                            }
+                                        />
+                                        <Text
+                                            fontSize={subsection.time.fontSize}
+                                            color={subsection.time.color}
+                                        >
+                                            {time}
+                                        </Text>
+                                    </>
+                                )}
+                            </>
+                        )}
+                        {!user && time != null && time !== '' && (
+                            <Text
+                                fontSize={subsection.time.fontSize}
+                                color={subsection.time.color}
+                            >
+                                {time}
+                            </Text>
+                        )}
+                    </Block>
+                )}
+            </Block>
+        )
+    }
+)
+
+TimelineNode.displayName = 'Timeline.Node'
+
+export default TimelineNode

package/lib/components/Timeline/TimelineShowMore.tsx

@@ -0,0 +1,36 @@
+import { forwardRef } from 'react'
+import Block from '../Primitives/Block/Block'
+import ButtonV2 from '../ButtonV2/ButtonV2'
+import { ButtonV2SubType, ButtonV2Type } from '../ButtonV2/buttonV2.types'
+import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
+import { TimelineTokensType } from './timeline.token'
+import type { TimelineShowMoreProps } from './types'
+
+const TimelineShowMore = forwardRef<HTMLDivElement, TimelineShowMoreProps>(
+    ({ count, label, onShowMore, buttonProps }, ref) => {
+        const tokens = useResponsiveTokens<TimelineTokensType>('TIMELINE')
+        const displayText = label ?? `Show more (${count}+)`
+
+        return (
+            <Block
+                ref={ref}
+                paddingLeft={tokens.showMore.paddingLeft}
+                marginTop={tokens.showMore.marginTop}
+                data-timeline-show-more="true"
+            >
+                <ButtonV2
+                    subType={ButtonV2SubType.INLINE}
+                    buttonType={ButtonV2Type.SECONDARY}
+                    text={displayText}
+                    onClick={onShowMore}
+                    disabled={!onShowMore}
+                    {...buttonProps}
+                />
+            </Block>
+        )
+    }
+)
+
+TimelineShowMore.displayName = 'Timeline.ShowMore'
+
+export default TimelineShowMore

package/lib/components/Timeline/TimelineSubstep.tsx

@@ -0,0 +1,173 @@
+import { forwardRef } from 'react'
+import Block from '../Primitives/Block/Block'
+import Text from '../Text/Text'
+import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
+import { TimelineTokensType } from './timeline.token'
+import { TimelineNodeStatus } from './types'
+import type { TimelineSubstepProps } from './types'
+
+const CONNECTOR_PATH = 'M0.5 0.5V1.5C0.5 7.02285 4.97715 11.5 10.5 11.5H21.5'
+
+const TimelineSubstep = forwardRef<HTMLDivElement, TimelineSubstepProps>(
+    (
+        {
+            title,
+            description,
+            timestamp,
+            rightSlot,
+            datetimeLeftSlot,
+            datetimeRightSlot,
+            isNestedUnderHeader = false,
+            showIndicator = true,
+            ...rest
+        },
+        ref
+    ) => {
+        const tokens = useResponsiveTokens<TimelineTokensType>('TIMELINE')
+        const { subsection, track, indicator } = tokens
+        const { connector } = subsection
+        const showDot = !isNestedUnderHeader && showIndicator
+        const dotColor = tokens.statusColors[TimelineNodeStatus.NEUTRAL]
+
+        const hasTitleRow =
+            (title != null && title !== '') ||
+            rightSlot != null ||
+            datetimeLeftSlot != null ||
+            (timestamp != null && timestamp !== '') ||
+            datetimeRightSlot != null
+
+        return (
+            <Block
+                ref={ref}
+                position="relative"
+                marginTop={subsection.marginTop}
+                marginBottom={subsection.marginBottom}
+                data-timeline-substep="true"
+                {...rest}
+            >
+                {showDot && (
+                    <Block
+                        position="absolute"
+                        left={indicator.left}
+                        top={0}
+                        width={indicator.width}
+                        height={indicator.height}
+                        borderRadius="50%"
+                        backgroundColor={dotColor}
+                        flexShrink={0}
+                    />
+                )}
+
+                <Block
+                    position="absolute"
+                    left={track.left}
+                    top={0}
+                    width={connector.width}
+                    height={connector.height}
+                    style={{
+                        overflow: 'visible',
+                    }}
+                >
+                    <svg
+                        width="100%"
+                        height="100%"
+                        viewBox="0 0 22 12"
+                        fill="none"
+                        xmlns="http://www.w3.org/2000/svg"
+                        preserveAspectRatio="none"
+                    >
+                        <path
+                            d={CONNECTOR_PATH}
+                            stroke={connector.color}
+                            strokeLinecap="round"
+                        />
+                    </svg>
+                </Block>
+
+                <Block marginLeft={subsection.marginLeft}>
+                    {hasTitleRow && (
+                        <Block
+                            display="flex"
+                            alignItems="flex-end"
+                            justifyContent="space-between"
+                            flexWrap="wrap"
+                            gap={subsection.titleRow.gap}
+                        >
+                            <Block
+                                display="flex"
+                                alignItems="center"
+                                gap={subsection.title.gap}
+                                flexGrow={1}
+                                minWidth={0}
+                            >
+                                <Text
+                                    fontSize={subsection.title.fontSize}
+                                    fontWeight={subsection.title.fontWeight}
+                                    color={subsection.title.color}
+                                    style={{
+                                        whiteSpace: 'nowrap',
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                        minWidth: 0,
+                                    }}
+                                >
+                                    {title}
+                                </Text>
+                                {rightSlot != null && (
+                                    <Block>{rightSlot}</Block>
+                                )}
+                            </Block>
+
+                            <Block
+                                display="flex"
+                                alignItems="center"
+                                gap={subsection.datetime.gap}
+                                flexShrink={0}
+                            >
+                                {datetimeLeftSlot != null && (
+                                    <Block flexShrink={0}>
+                                        {datetimeLeftSlot}
+                                    </Block>
+                                )}
+                                {timestamp != null && timestamp !== '' && (
+                                    <Text
+                                        fontSize={subsection.datetime.fontSize}
+                                        color={subsection.datetime.color}
+                                    >
+                                        {timestamp}
+                                    </Text>
+                                )}
+                                {datetimeRightSlot != null && (
+                                    <Block flexShrink={0}>
+                                        {datetimeRightSlot}
+                                    </Block>
+                                )}
+                            </Block>
+                        </Block>
+                    )}
+
+                    {description != null && description !== '' && (
+                        <Block
+                            marginTop={
+                                hasTitleRow
+                                    ? subsection.description.marginTop
+                                    : undefined
+                            }
+                        >
+                            <Text
+                                fontSize={subsection.description.fontSize}
+                                color={subsection.description.color}
+                            >
+                                {description}
+                            </Text>
+                        </Block>
+                    )}
+                </Block>
+            </Block>
+        )
+    }
+)
+
+TimelineSubstep.displayName = 'Timeline.Substep'
+
+export default TimelineSubstep

package/lib/components/Timeline/index.ts

@@ -0,0 +1,9 @@
+export { default as Timeline } from './Timeline'
+export { default as TimelineLabel } from './TimelineLabel'
+export { default as TimelineHeader } from './TimelineHeader'
+export { default as TimelineSubstep } from './TimelineSubstep'
+export { default as TimelineNode } from './TimelineNode'
+export { default as TimelineShowMore } from './TimelineShowMore'
+
+export * from './types'
+export * from './timeline.token'

package/lib/components/Timeline/timeline.dark.token.ts

@@ -0,0 +1,149 @@
+import { FoundationTokenType } from '../../tokens/theme.token'
+import { TimelineNodeStatus } from './types'
+import type { TimelineTokensType } from './timeline.token'
+import type { BreakpointType } from '../../breakpoints/breakPoints'
+
+type ResponsiveTimelineTokens = {
+    [key in keyof BreakpointType]: TimelineTokensType
+}
+
+const buildTokens = (
+    foundationToken: FoundationTokenType
+): TimelineTokensType => ({
+    track: {
+        width: '1px',
+        backgroundColor: foundationToken.colors.gray[700],
+        left: '12.5px',
+    },
+
+    indicator: {
+        left: '10.5px',
+        width: foundationToken.unit[6],
+        height: foundationToken.unit[6],
+    },
+
+    statusColors: {
+        [TimelineNodeStatus.SUCCESS]: foundationToken.colors.green[600],
+        [TimelineNodeStatus.WARNING]: foundationToken.colors.orange[500],
+        [TimelineNodeStatus.ERROR]: foundationToken.colors.red[500],
+        [TimelineNodeStatus.NEUTRAL]: foundationToken.colors.gray[600],
+    },
+
+    label: {
+        paddingLeft: foundationToken.unit[28],
+        marginBottom: foundationToken.unit[12],
+        circle: {
+            left: foundationToken.unit[8],
+            width: foundationToken.unit[10],
+            height: foundationToken.unit[10],
+            backgroundColor: 'transparent',
+            border: `1px solid ${foundationToken.colors.gray[600]}`,
+        },
+        mask: {
+            backgroundColor: foundationToken.colors.gray[900],
+            height: foundationToken.unit[10],
+        },
+        text: {
+            fontSize: foundationToken.font.size.body.sm.fontSize,
+            fontWeight: 500,
+            color: foundationToken.colors.gray[400],
+        },
+    },
+
+    header: {
+        row: {
+            paddingLeft: foundationToken.unit[28],
+            marginBottom: foundationToken.unit[20],
+            gap: foundationToken.unit[8],
+        },
+        section: {
+            marginBottom: foundationToken.unit[20],
+        },
+        title: {
+            fontSize: foundationToken.font.size.body.md.fontSize,
+            fontWeight: 500,
+            color: foundationToken.colors.gray[100],
+        },
+        timestamp: {
+            fontSize: foundationToken.font.size.body.sm.fontSize,
+            color: foundationToken.colors.gray[400],
+            gap: foundationToken.unit[8],
+        },
+    },
+
+    subsection: {
+        paddingLeft: foundationToken.unit[28],
+        marginTop: foundationToken.unit[0],
+        marginBottom: foundationToken.unit[18],
+        marginLeft: foundationToken.unit[40],
+        rootIndicator: {
+            top: foundationToken.unit[6],
+        },
+        headerRow: {
+            gap: foundationToken.unit[8],
+        },
+        titleRow: {
+            gap: foundationToken.unit[4],
+        },
+        datetimeGroup: {
+            gap: foundationToken.unit[6],
+        },
+        title: {
+            fontSize: foundationToken.font.size.body.md.fontSize,
+            fontWeight: 500,
+            color: foundationToken.colors.gray[200],
+            gap: foundationToken.unit[8],
+        },
+        description: {
+            fontSize: foundationToken.font.size.body.md.fontSize,
+            color: foundationToken.colors.gray[500],
+            marginTop: foundationToken.unit[4],
+            marginBottom: foundationToken.unit[8],
+            lineHeight: foundationToken.font.size.body.md.lineHeight,
+        },
+        datetime: {
+            fontSize: foundationToken.font.size.body.sm.fontSize,
+            color: foundationToken.colors.gray[400],
+            gap: foundationToken.unit[8],
+        },
+        connector: {
+            left: foundationToken.unit[0.5],
+            width: foundationToken.unit[22],
+            height: foundationToken.unit[12],
+            color: foundationToken.colors.gray[700],
+        },
+        avatar: {
+            width: foundationToken.unit[20],
+            height: foundationToken.unit[20],
+            marginTop: foundationToken.unit[8],
+        },
+        user: {
+            fontSize: foundationToken.font.size.body.xs.fontSize,
+            color: foundationToken.colors.gray[400],
+            marginLeft: foundationToken.unit[6],
+        },
+        time: {
+            fontSize: foundationToken.font.size.body.xs.fontSize,
+            color: foundationToken.colors.gray[500],
+        },
+        separator: {
+            width: foundationToken.unit[4],
+            height: foundationToken.unit[4],
+            color: foundationToken.colors.gray[600],
+            marginLeft: foundationToken.unit[8],
+            marginRight: foundationToken.unit[8],
+        },
+    },
+
+    showMore: {
+        paddingLeft: foundationToken.unit[28],
+        marginTop: foundationToken.unit[8],
+    },
+})
+
+export const getTimelineDarkTokens = (
+    foundationToken: FoundationTokenType
+): ResponsiveTimelineTokens => {
+    const tokens = buildTokens(foundationToken)
+    return { sm: tokens, lg: tokens }
+}