Update typography component to use classnames (#3805)

AudiusProject · Jul 26, 2023 · c3765c7 · c3765c7
1 parent cab0a3e
commit c3765c7
Show file tree

Hide file tree

Showing 10 changed files with 158 additions and 251 deletions.
diff --git a/packages/web/src/components/track/desktop/BottomRow.tsx b/packages/web/src/components/track/desktop/BottomRow.tsx
@@ -113,7 +113,13 @@ export const BottomRow = ({
 
   if (isTrack && premiumConditions && !isLoading && !doesUserHaveAccess) {
     return (
-      <div className={cn(typeStyles.titleSmall, styles.bottomRow)}>
+      <div
+        className={cn(
+          typeStyles.title,
+          typeStyles.titleSmall,
+          styles.bottomRow
+        )}
+      >
         <PremiumConditionsPill
           premiumConditions={premiumConditions}
           unlocking={premiumTrackStatus === 'UNLOCKING'}

diff --git a/packages/web/src/components/track/desktop/TrackTile.tsx b/packages/web/src/components/track/desktop/TrackTile.tsx
@@ -293,7 +293,11 @@ const TrackTile = ({
             ) : (
               <a
                 href={permalink}
-                className={cn(typeStyles.titleMedium, styles.title)}
+                className={cn(
+                  typeStyles.title,
+                  typeStyles.titleMedium,
+                  styles.title
+                )}
                 onClick={onClickTitleWrapper}
               >
                 {title}
@@ -318,9 +322,14 @@ const TrackTile = ({
           </div>
 
           <div
-            className={cn(typeStyles.bodyXSmall, styles.socialsRow, {
-              [styles.isHidden]: isUnlisted
-            })}
+            className={cn(
+              typeStyles.body,
+              typeStyles.bodyXSmall,
+              styles.socialsRow,
+              {
+                [styles.isHidden]: isUnlisted
+              }
+            )}
           >
             {isLoading ? (
               <Skeleton width='30%' className={styles.skeleton} />
@@ -331,7 +340,13 @@ const TrackTile = ({
               </>
             )}
           </div>
-          <div className={cn(typeStyles.bodyXSmall, styles.topRight)}>
+          <div
+            className={cn(
+              typeStyles.body,
+              typeStyles.bodyXSmall,
+              styles.topRight
+            )}
+          >
             {isUnlisted ? (
               <div className={styles.topRightIconLabel}>
                 <IconHidden className={styles.topRightIcon} />
@@ -342,7 +357,13 @@ const TrackTile = ({
               <div className={styles.duration}>{getDurationText()}</div>
             ) : null}
           </div>
-          <div className={cn(typeStyles.bodyXSmall, styles.bottomRight)}>
+          <div
+            className={cn(
+              typeStyles.body,
+              typeStyles.bodyXSmall,
+              styles.bottomRight
+            )}
+          >
             {!isLoading
               ? renderLockedOrPlaysContent({
                   doesUserHaveAccess,

diff --git a/packages/web/src/components/track/mobile/BottomButtons.tsx b/packages/web/src/components/track/mobile/BottomButtons.tsx
@@ -51,7 +51,13 @@ const BottomButtons = (props: BottomButtonsProps) => {
     !props.doesUserHaveAccess
   ) {
     return (
-      <div className={cn(typeStyles.titleSmall, styles.bottomButtons)}>
+      <div
+        className={cn(
+          typeStyles.title,
+          typeStyles.titleSmall,
+          styles.bottomButtons
+        )}
+      >
         <div className={styles.premiumContentContainer}>
           <PremiumConditionsPill
             premiumConditions={props.premiumConditions}

diff --git a/packages/web/src/components/track/mobile/TrackTile.tsx b/packages/web/src/components/track/mobile/TrackTile.tsx
@@ -125,7 +125,14 @@ export const RankIcon = ({
   className?: string
 }) => {
   return isVisible ? (
-    <div className={cn(typeStyles.bodyXsmall, styles.rankContainer, className)}>
+    <div
+      className={cn(
+        typeStyles.body,
+        typeStyles.bodyXSmall,
+        styles.rankContainer,
+        className
+      )}
+    >
       {showCrown ? <IconCrown /> : <IconTrending />}
       {index + 1}
     </div>
@@ -276,6 +283,7 @@ const TrackTile = (props: CombinedProps) => {
       <div className={styles.mainContent} onClick={handleClick}>
         <div
           className={cn(
+            typeStyles.body,
             typeStyles.bodyXSmall,
             styles.topRight,
             styles.statText
@@ -317,7 +325,11 @@ const TrackTile = (props: CombinedProps) => {
             })}
           >
             <a
-              className={cn(typeStyles.titleMedium, styles.title)}
+              className={cn(
+                typeStyles.title,
+                typeStyles.titleMedium,
+                styles.title
+              )}
               href={permalink}
               onClick={props.goToTrackPage}
             >
@@ -368,7 +380,13 @@ const TrackTile = (props: CombinedProps) => {
           )}
         </div>
         {coSign ? (
-          <div className={cn(typeStyles.bodyXSmall, styles.coSignText)}>
+          <div
+            className={cn(
+              typeStyles.body,
+              typeStyles.bodyXSmall,
+              styles.coSignText
+            )}
+          >
             <div className={styles.name}>
               {coSign.user.name}
               <UserBadges userId={coSign.user.user_id} badgeSize={8} />
@@ -379,7 +397,13 @@ const TrackTile = (props: CombinedProps) => {
             })}
           </div>
         ) : null}
-        <div className={cn(typeStyles.bodyXSmall, styles.statsRow)}>
+        <div
+          className={cn(
+            typeStyles.body,
+            typeStyles.bodyXSmall,
+            styles.statsRow
+          )}
+        >
           <div className={styles.stats}>
             <RankIcon
               showCrown={showRankIcon}
@@ -434,7 +458,12 @@ const TrackTile = (props: CombinedProps) => {
             )}
           </div>
           <div
-            className={cn(typeStyles.bodyXSmall, styles.bottomRight, fadeIn)}
+            className={cn(
+              typeStyles.body,
+              typeStyles.bodyXSmall,
+              styles.bottomRight,
+              fadeIn
+            )}
           >
             {!isLoading
               ? renderLockedOrPlaysContent({

diff --git a/packages/web/src/components/typography/Text.tsx b/packages/web/src/components/typography/Text.tsx
@@ -1,20 +1,12 @@
-import { CSSProperties, ReactNode } from 'react'
+import { CSSProperties, ElementType, ReactNode } from 'react'
 
-import { getCurrentThemeColors, ThemeColor } from 'utils/theme/theme'
+import cn from 'classnames'
 
-import { fontWeightMap, variantInfoMap, variantStrengthMap } from './constants'
-import {
-  TextSizeInfo,
-  TextStrengthInfo,
-  TextVariant,
-  TextSize,
-  TextStrength
-} from './types'
+import { getCurrentThemeColors, ThemeColor } from 'utils/theme/theme'
 
-const defaultBodyInfo: TextSizeInfo & TextStrengthInfo = {
-  ...variantInfoMap.body.M!,
-  ...variantStrengthMap.body.default!
-}
+import { variantTagMap } from './constants'
+import { TextVariant, TextSize, TextStrength } from './types'
+import styles from './typography.module.css'
 
 export type TextProps = {
   className?: string
@@ -29,43 +21,34 @@ export const Text = (props: TextProps) => {
   const {
     className,
     children,
-    variant = 'body',
-    strength = 'default',
-    size = 'M',
+    variant = 'body' as TextVariant,
+    strength = 'Default' as TextStrength,
+    size = 'Medium' as TextSize,
     color = '--neutral',
     ...otherProps
   } = props
 
+  const Tag: ElementType = variantTagMap[variant][size] ?? 'p'
+
   const themeColors = getCurrentThemeColors()
   const textColor = themeColors[color] ?? themeColors['--neutral']
-
-  const variantSizeInfo = variantInfoMap[variant][size] ?? {}
-  const variantStrengthInfo = variantStrengthMap[variant][strength] ?? {}
-
-  const {
-    tag: Tag,
-    fontSize,
-    lineHeight,
-    letterSpacing,
-    fontWeight,
-    textTransform
-  } = {
-    ...defaultBodyInfo,
-    ...variantSizeInfo,
-    ...variantStrengthInfo
-  }
-
   const styleObject: CSSProperties = {
-    fontWeight: fontWeightMap[fontWeight].toString(),
-    fontSize,
-    lineHeight,
-    letterSpacing,
-    textTransform,
     color: textColor
   }
 
+  type TextClass = keyof typeof styles
+  const variantClassNames = [
+    variant as TextClass,
+    `${variant}${size}` as TextClass,
+    `${variant}${strength}` as TextClass
+  ].map((cn) => styles[cn])
+
   return (
-    <Tag className={className} style={styleObject} {...otherProps}>
+    <Tag
+      className={cn(...variantClassNames, className)}
+      style={styleObject}
+      {...otherProps}
+    >
       {children}
     </Tag>
   )