@cleartrip/ct-design-typography 4.0.0 → 5.1.0

package/src/style.ts

@@ -0,0 +1,306 @@
+import type { Theme } from '@cleartrip/ct-design-theme';
+import { TypographyColorType, TypographyVariantType } from './type';
+import { TypographyColor, TypographyVariant } from './constants';
+import { TextStyle } from '@cleartrip/ct-design-types';
+
+export const getTypographyVariant = (theme: Theme, variant: TypographyVariantType) => {
+  switch (variant) {
+    case TypographyVariant.HD1: {
+      return {
+        fontSize: theme.typography.size[48],
+        fontWeight: theme.typography.weight.semibold,
+        lineHeight: theme.typography.lineHeight[56],
+      };
+    }
+    case TypographyVariant.HD2: {
+      return {
+        fontSize: theme.typography.size[40],
+        fontWeight: theme.typography.weight.semibold,
+        lineHeight: theme.typography.lineHeight[48],
+      };
+    }
+    case TypographyVariant.HD3: {
+      return {
+        fontSize: theme.typography.size[32],
+        fontWeight: theme.typography.weight.semibold,
+        lineHeight: theme.typography.lineHeight[40],
+      };
+    }
+    case TypographyVariant.HM1: {
+      return {
+        fontSize: theme.typography.size[24],
+        fontWeight: theme.typography.weight.semibold,
+        lineHeight: theme.typography.lineHeight[32],
+      };
+    }
+    case TypographyVariant.HM2: {
+      return {
+        fontSize: theme.typography.size[20],
+        fontWeight: theme.typography.weight.semibold,
+        lineHeight: theme.typography.lineHeight[28],
+      };
+    }
+    case TypographyVariant.HM3: {
+      return {
+        fontSize: theme.typography.size[16],
+        fontWeight: theme.typography.weight.semibold,
+        lineHeight: theme.typography.lineHeight[24],
+      };
+    }
+    case TypographyVariant.HM4: {
+      return {
+        fontSize: theme.typography.size[14],
+        fontWeight: theme.typography.weight.semibold,
+        lineHeight: theme.typography.lineHeight[20],
+      };
+    }
+    case TypographyVariant.B1: {
+      return {
+        fontSize: theme.typography.size[16],
+        fontWeight: theme.typography.weight.medium,
+        lineHeight: theme.typography.lineHeight[24],
+      };
+    }
+    case TypographyVariant.B2: {
+      return {
+        fontSize: theme.typography.size[14],
+        fontWeight: theme.typography.weight.medium,
+        lineHeight: theme.typography.lineHeight[20],
+      };
+    }
+    case TypographyVariant.B3: {
+      return {
+        fontSize: theme.typography.size[12],
+        fontWeight: theme.typography.weight.medium,
+        lineHeight: theme.typography.lineHeight[16],
+      };
+    }
+    case TypographyVariant.B3CAPS: {
+      return {
+        fontSize: theme.typography.size[12],
+        fontWeight: theme.typography.weight.semibold,
+        lineHeight: theme.typography.lineHeight[16],
+        letterSpacing: theme.typography.letterSpacing.point4,
+        textTransform: 'uppercase',
+      };
+    }
+    case TypographyVariant.B4: {
+      return {
+        fontSize: theme.typography.size[10],
+        fontWeight: theme.typography.weight.medium,
+        lineHeight: theme.typography.lineHeight[14],
+      };
+    }
+    case TypographyVariant.B4CAPS: {
+      return {
+        fontSize: theme.typography.size[10],
+        fontWeight: theme.typography.weight.semibold,
+        lineHeight: theme.typography.lineHeight[12],
+        letterSpacing: theme.typography.letterSpacing.point4,
+        textTransform: 'uppercase',
+      };
+    }
+    case TypographyVariant.P1: {
+      return {
+        fontSize: theme.typography.size[16],
+        fontWeight: theme.typography.weight.normal,
+        lineHeight: theme.typography.lineHeight[22],
+      };
+    }
+    case TypographyVariant.P2: {
+      return {
+        fontSize: theme.typography.size[14],
+        fontWeight: theme.typography.weight.normal,
+        lineHeight: theme.typography.lineHeight[20],
+      };
+    }
+    case TypographyVariant.P3: {
+      return {
+        fontSize: theme.typography.size[12],
+        fontWeight: theme.typography.weight.normal,
+        lineHeight: theme.typography.lineHeight[16],
+      };
+    }
+    case TypographyVariant.P4: {
+      return {
+        fontSize: theme.typography.size[10],
+        fontWeight: theme.typography.weight.normal,
+        lineHeight: theme.typography.lineHeight[14],
+      };
+    }
+    case TypographyVariant.L1: {
+      return {
+        fontSize: theme.typography.size[16],
+        fontWeight: theme.typography.weight.semibold,
+        lineHeight: theme.typography.lineHeight[24],
+      };
+    }
+    case TypographyVariant.L2: {
+      return {
+        fontSize: theme.typography.size[14],
+        fontWeight: theme.typography.weight.semibold,
+        lineHeight: theme.typography.lineHeight[20],
+      };
+    }
+    case TypographyVariant.L3: {
+      return {
+        fontSize: theme.typography.size[12],
+        fontWeight: theme.typography.weight.semibold,
+        lineHeight: theme.typography.lineHeight[16],
+      };
+    }
+    case TypographyVariant.OVERLINE: {
+      return {
+        fontSize: theme.typography.size[12],
+        fontWeight: theme.typography.weight.semibold,
+        lineHeight: theme.typography.lineHeight[16],
+      };
+    }
+    case TypographyVariant.TAG: {
+      return {
+        fontSize: theme.typography.size[10],
+        fontWeight: theme.typography.weight.semibold,
+        lineHeight: theme.typography.lineHeight[12],
+        letterSpacing: theme.typography.letterSpacing.point4,
+      };
+    }
+    default: {
+      return {
+        fontSize: theme.typography.size[20],
+        fontWeight: theme.typography.weight.semibold,
+        lineHeight: theme.typography.lineHeight[28],
+      };
+    }
+  }
+};
+
+export const getTypographyColor = (theme: Theme, color: TypographyColorType) => {
+  switch (color) {
+    case TypographyColor.PRIMARY: {
+      return theme.color.text.primary;
+    }
+    case TypographyColor.SECONDARY: {
+      return theme.color.text.secondary;
+    }
+    case TypographyColor.TERTIARY: {
+      return theme.color.text.tertiary;
+    }
+    case TypographyColor.ALERT: {
+      return theme.color.text.alert;
+    }
+    case TypographyColor.DISABLED: {
+      return theme.color.text.disabled;
+    }
+    case TypographyColor.HEADING: {
+      return theme.color.text.heading;
+    }
+    case TypographyColor.LINK: {
+      return theme.color.text.link;
+    }
+    case TypographyColor.SUBHEADING: {
+      return theme.color.text.subHeading;
+    }
+    case TypographyColor.SUCCESS: {
+      return theme.color.text.success;
+    }
+    case TypographyColor.WARNING: {
+      return theme.color.text.warning;
+    }
+    case TypographyColor.NEUTRAL: {
+      return theme.color.text.neutral;
+    }
+    case TypographyColor.LINK2: {
+      return theme.color.text.link2;
+    }
+    case TypographyColor.PRIMARY2: {
+      return theme.color.text.primary2;
+    }
+    case TypographyColor.SECONDARY2: {
+      return theme.color.text.secondary2;
+    }
+    case TypographyColor.GRAPETINI: {
+      return theme.color.text.grapetini900;
+    }
+    case TypographyColor.PINA_COLADA750: {
+      return theme.color.text.pinaColada750;
+    }
+    case TypographyColor.CORALPINK: {
+      return theme.color.text.coralpink;
+    }
+    case TypographyColor.NEUTRAL50: {
+      return theme.color.text.neutral50;
+    }
+    case TypographyColor.WARNING500:
+    case TypographyColor.ALERT500: {
+      return theme.color.text.alert500;
+    }
+    case TypographyColor.BRAND: {
+      return theme.color.text.brand;
+    }
+    default: {
+      return theme.color.text.primary;
+    }
+  }
+};
+
+export const getLineClampStyles = (lineClamp?: number) => {
+  if (lineClamp) {
+    return {
+      display: 'webkitBox' as TextStyle['display'],
+      webkitLineClamp: lineClamp,
+      webkitBoxOrient: 'vertical',
+      overflow: 'hidden',
+    };
+  }
+
+  return {};
+};
+
+export const getTypographyUnderlineOffset = (theme: Theme, variant: TypographyVariantType, isUnderlined?: boolean) => {
+  if (!isUnderlined) {
+    return undefined;
+  }
+  switch (variant) {
+    case TypographyVariant.HD1:
+      return theme.size[5];
+    case TypographyVariant.HD2:
+    case TypographyVariant.HD3:
+      return theme.size[4];
+    case TypographyVariant.HM1:
+    case TypographyVariant.HM2:
+      return theme.size[3];
+    case TypographyVariant.HM3:
+    case TypographyVariant.HM4:
+      return theme.size[2];
+    default:
+      return theme.size[1];
+  }
+};
+
+export const getTypographyStyles = ({
+  theme,
+  variant,
+  color,
+  isStriked,
+  colorCode,
+  showInItalics,
+}: {
+  theme: Theme;
+  variant?: TypographyVariantType;
+  color?: TypographyColorType;
+  isClickable?: boolean;
+  isStriked?: boolean;
+  isUnderlined?: boolean;
+  colorCode?: string;
+  showInItalics?: boolean;
+  lineClamp?: number;
+  isDisabled?: boolean;
+}) => {
+  const textDecorationLine: TextStyle['textDecorationLine'] = isStriked ? 'line-through' : 'none';
+  return {
+    ...getTypographyVariant(theme, variant ?? TypographyVariant.HM2),
+    color: colorCode || getTypographyColor(theme, color ?? TypographyColor.PRIMARY),
+    textDecorationLine,
+    fontStyle: (showInItalics ? 'italic' : 'none') as TextStyle['fontStyle'],
+  };
+};

package/src/type.ts

@@ -0,0 +1,94 @@
+import { ReactNode } from 'react';
+
+import { TextStyle, Styles } from '@cleartrip/ct-design-types';
+
+import { TypographyVariant, TypographyColor } from './constants';
+
+export type TypographyVariantType = `${TypographyVariant}`;
+
+export type TypographyColorType = `${TypographyColor}`;
+
+export type TypographyNodeElementType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'li';
+
+export interface TypographyStyleConfigProps {
+  /**
+   * Styles for the root typography element
+   */
+  root?: TextStyle[];
+  /**
+   * Styles for the container wrapper (when clickable)
+   */
+  container?: Styles[];
+}
+
+export interface ITypography {
+  /**
+   * The content to be displayed within the typography element.
+   */
+  children: ReactNode;
+
+  /**
+   * The variant of the typography, such as 'h1', 'body1', etc.
+   */
+  variant: TypographyVariantType;
+
+  /**
+   * The color of the typography.
+   */
+  color?: TypographyColorType;
+
+  /**
+   * If true, adds an underline effect to the typography.
+   */
+  isUnderlined?: boolean;
+
+  /**
+   * If true, adds a strikethrough effect to the typography.
+   */
+  isStriked?: boolean;
+
+  /**
+   * If true, makes the typography clickable.
+   */
+  isClickable?: boolean;
+
+  /**
+   * Callback function triggered on typography click.
+   */
+  onClick?: () => void;
+
+  /**
+   * Color code to override the default color.
+   */
+  colorCode?: string;
+
+  /**
+   * If true, renders the typography in italics.
+   */
+  showInItalics?: boolean;
+
+  /**
+   * The width of the typography element.
+   */
+  width?: TextStyle['width'];
+
+  /**
+   * The number of lines to clamp the text. Ellipsis (...) is added for overflow.
+   */
+  lineClamp?: number;
+
+  /**
+   * If true, disables the typography for user interaction.
+   */
+  isDisabled?: boolean;
+
+  /**
+   * The type of HTML element to be used for rendering the typography.
+   */
+  componentNode?: TypographyNodeElementType;
+
+  /**
+   * Style configuration for the typography.
+   */
+  styleConfig?: TypographyStyleConfigProps;
+}

package/dist/StyledTypography/StyledTypography.d.ts

@@ -1,8 +0,0 @@
-import { StyledTypographyProps } from './type';
-declare const StyledTypography: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Omit<StyledTypographyProps, "css"> & {
-    css?: import("styled-components").CSSProperties | undefined;
-} & {
-    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | undefined;
-}, never>;
-export default StyledTypography;
-//# sourceMappingURL=StyledTypography.d.ts.map

package/dist/StyledTypography/StyledTypography.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StyledTypography.d.ts","sourceRoot":"","sources":["../../packages/components/Typography/src/StyledTypography/StyledTypography.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,qBAAqB,EAAE,MAAM,QAAQ,CAAC;AAS/C,QAAA,MAAM,gBAAgB;;;;SAoCrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/StyledTypography/index.d.ts

@@ -1,2 +0,0 @@
-export { default as StyledTypography } from './StyledTypography';
-//# sourceMappingURL=index.d.ts.map

package/dist/StyledTypography/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/components/Typography/src/StyledTypography/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/StyledTypography/style.d.ts

@@ -1,6 +0,0 @@
-import { CSSObject, CSSProperties } from 'styled-components';
-import { StyledTypographyProps } from './type';
-export declare const getStyledTypographyStyles: ({ fontSize, fontWeight, lineHeight, color, textDecoration, fontStyle, width, display, webkitLineClamp, webkitBoxOrient, overflow, cursor, css, ...restCss }: StyledTypographyProps & {
-    css?: CSSProperties | undefined;
-}) => CSSObject;
-//# sourceMappingURL=style.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../packages/components/Typography/src/StyledTypography/style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAC7D,OAAO,EAAE,qBAAqB,EAAE,MAAM,QAAQ,CAAC;AAE/C,eAAO,MAAM,yBAAyB;;MAee,SAenD,CAAC"}

package/dist/StyledTypography/type.d.ts

@@ -1,18 +0,0 @@
-import { CSSObject } from 'styled-components';
-export interface StyledTypographyProps {
-    color: string;
-    fontSize: string;
-    fontWeight: number;
-    lineHeight: string;
-    textDecoration: CSSObject['textDecoration'];
-    cursor: CSSObject['cursor'];
-    fontStyle: CSSObject['fontStyle'];
-    width: CSSObject['width'];
-    display: CSSObject['display'];
-    webkitLineClamp?: number;
-    webkitBoxOrient?: string;
-    overflow?: CSSObject['overflow'];
-    textTransform?: CSSObject['textTransform'];
-    letterSpacing?: CSSObject['letterSpacing'];
-}
-//# sourceMappingURL=type.d.ts.map

package/dist/StyledTypography/type.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../packages/components/Typography/src/StyledTypography/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAE9C,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,cAAc,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC5C,MAAM,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC;IAC5B,SAAS,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC1B,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAC;IACjC,aAAa,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;IAC3C,aAAa,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,CAAC;CAC5C"}