@cleartrip/ct-design-typography 5.6.0 → 5.7.0-SNAPSHOT-native-main.1

package/src/Typography.tsx

@@ -2,14 +2,14 @@ import React, { useMemo } from 'react';
 import { useTheme } from '@cleartrip/ct-design-theme';
 import { useStyles, useWebMergeStyles } from '@cleartrip/ct-design-style-manager';
 import { Container, IContainer } from '@cleartrip/ct-design-container';
-import ConditionalWrap from '@cleartrip/ct-design-conditional-wrap';
 import { getLineClampStyles, getTypographyStyles } from './style';
+import type { Styles } from '@cleartrip/ct-design-types';
 import { TypographyVariantType, ITypography, TypographyNodeElementType } from './type';
 import { TypographyColor } from './constants';
 import { css } from '@emotion/css';
 
 const getTextType = (variant: TypographyVariantType): TypographyNodeElementType => {
-  const variantMapper = {
+  const variantMapper: Record<TypographyVariantType, TypographyNodeElementType> = {
     HD1: 'h1',
     HD2: 'h2',
     HD3: 'h3',
@@ -17,24 +17,27 @@ const getTextType = (variant: TypographyVariantType): TypographyNodeElementType
     HM2: 'h2',
     HM3: 'h3',
     HM4: 'h4',
-    B1: 'p',
-    B2: 'p',
-    B3: 'p',
-    B4: 'p',
-    P1: 'p',
-    P2: 'p',
-    P3: 'p',
-    P4: 'p',
-    L1: 'p',
-    L2: 'p',
-    L3: 'p',
-    B4CAPS: 'p',
-    OVERLINE: 'p',
-    B3CAPS: 'p',
-    M4BOLD: 'p',
-    TAG: 'p',
+    // Body / paragraph / link variants: inline on web
+    B1: 'span',
+    B2: 'span',
+    B3: 'span',
+    B4: 'span',
+    P1: 'span',
+    P2: 'span',
+    P3: 'span',
+    P4: 'span',
+    L1: 'span',
+    L2: 'span',
+    L3: 'span',
+    M4BOLD: 'span',
+    // Block-only variants
+    B4CAPS: 'div',
+    OVERLINE: 'div',
+    B3CAPS: 'div',
+    TAG: 'div',
+    WRAPPER: 'div',
   };
-  return variantMapper[variant];
+  return variantMapper[variant] ?? 'span';
 };
 
 const Typography: React.FC<ITypography> = ({
@@ -59,7 +62,7 @@ const Typography: React.FC<ITypography> = ({
     (theme) => {
       return {
         root: getTypographyStyles({
-          theme: theme,
+          theme,
           variant,
           color,
           isClickable: parsedIsClickable,
@@ -97,26 +100,23 @@ const Typography: React.FC<ITypography> = ({
     [typographyStyles.root, clampClass, customRootStyles],
   );
 
-  const ComponentToRender = componentNode || getTextType(variant);
+  const ComponentToRender = componentNode || getTextType(variant) || 'p';
+  const isInlineNode = ComponentToRender === 'span';
 
-  const containerAsSupportedValues: readonly IContainer['as'][] = ['p', 'main', 'section', 'article', 'div'] as const;
-  const containerAs: IContainer['as'] =
-    componentNode && (containerAsSupportedValues as readonly string[]).includes(componentNode)
-      ? (componentNode as IContainer['as'])
-      : 'div';
+  if (parsedIsClickable) {
+    const containerAs: IContainer['as'] = isInlineNode ? 'span' : 'div';
+    const clickableContainerStyles = isInlineNode
+      ? [{ display: 'inline' } as unknown as Styles, ...customContainerStyles]
+      : customContainerStyles;
 
-  return (
-    <ConditionalWrap
-      condition={parsedIsClickable}
-      wrap={(children) => (
-        <Container onClick={onClick} styleConfig={{ root: customContainerStyles }} as={containerAs}>
-          {children}
-        </Container>
-      )}
-    >
-      <ComponentToRender className={mergedRootStyles}>{children}</ComponentToRender>
-    </ConditionalWrap>
-  );
+    return (
+      <Container onClick={onClick} styleConfig={{ root: clickableContainerStyles }} as={containerAs}>
+        <ComponentToRender className={mergedRootStyles}>{children}</ComponentToRender>
+      </Container>
+    );
+  }
+
+  return <ComponentToRender className={mergedRootStyles}>{children}</ComponentToRender>;
 };
 
 export default Typography;