[C-2905] Update Text types and props to camelCase (#3810)

AudiusProject · Jul 27, 2023 · cb9a385 · cb9a385
1 parent 027b3a5
commit cb9a385
Show file tree

Hide file tree

Showing 13 changed files with 50 additions and 50 deletions.
diff --git a/packages/web/src/components/premium-content-purchase-modal/PremiumContentPurchaseModal.tsx b/packages/web/src/components/premium-content-purchase-modal/PremiumContentPurchaseModal.tsx
@@ -48,8 +48,8 @@ export const PremiumContentPurchaseModal = () => {
         <Text
           variant='label'
           color='--neutral-light-2'
-          size='XLarge'
-          strength='Strong'
+          size='xLarge'
+          strength='strong'
           className={styles.title}
         >
           <Icon size='large' icon={IconCart} />

diff --git a/packages/web/src/components/premium-content-purchase-modal/components/PayToUnlockInfo.tsx b/packages/web/src/components/premium-content-purchase-modal/components/PayToUnlockInfo.tsx
@@ -20,14 +20,14 @@ export const PayToUnlockInfo = () => {
     <div className={styles.container}>
       <Text
         variant='label'
-        size='Large'
-        strength='Strong'
+        size='large'
+        strength='strong'
         className={styles.header}
       >
         <span>{messages.payToUnlock}</span>
         <LockedStatusBadge locked />
       </Text>
-      <Text className={styles.copy} variant='body'>
+      <Text className={styles.copy}>
         <span>{messages.copyPart1}</span>
         <Link
           className={typeStyles.link}

diff --git a/...ges/web/src/components/premium-content-purchase-modal/components/PurchaseSummaryTable.tsx b/...ges/web/src/components/premium-content-purchase-modal/components/PurchaseSummaryTable.tsx
@@ -29,8 +29,8 @@ export const PurchaseSummaryTable = ({
   existingBalance
 }: PurchaseSummaryTableProps) => {
   return (
-    <Text className={styles.container} variant='body'>
-      <Text className={styles.row} variant='label' size='Large'>
+    <Text className={styles.container}>
+      <Text className={styles.row} variant='label' size='large'>
         {messages.summary}
       </Text>
       <div className={styles.row}>

diff --git a/packages/web/src/components/typography/Text.tsx b/packages/web/src/components/typography/Text.tsx
@@ -1,6 +1,7 @@
 import { CSSProperties, ElementType, ReactNode } from 'react'
 
 import cn from 'classnames'
+import { camelCase } from 'lodash'
 
 import { getCurrentThemeColors, ThemeColor } from 'utils/theme/theme'
 
@@ -22,8 +23,8 @@ export const Text = (props: TextProps) => {
     className,
     children,
     variant = 'body' as TextVariant,
-    strength = 'Default' as TextStrength,
-    size = 'Medium' as TextSize,
+    strength = 'default' as TextStrength,
+    size = 'medium' as TextSize,
     color = '--neutral',
     ...otherProps
   } = props
@@ -39,8 +40,8 @@ export const Text = (props: TextProps) => {
   type TextClass = keyof typeof styles
   const variantClassNames = [
     variant as TextClass,
-    `${variant}${size}` as TextClass,
-    `${variant}${strength}` as TextClass
+    camelCase(`${variant} ${size}`) as TextClass,
+    camelCase(`${variant} ${strength}`) as TextClass
   ].map((cn) => styles[cn])
 
   return (

diff --git a/packages/web/src/components/typography/constants.ts b/packages/web/src/components/typography/constants.ts
@@ -13,34 +13,34 @@ export const fontWeightMap: Record<FontWeight, number> = {
 
 export const variantTagMap: Record<TextVariant, VariantSizeTagMap> = {
   display: {
-    XLarge: 'h1',
-    Large: 'h1',
-    Medium: 'h1',
-    Small: 'h1'
+    xLarge: 'h1',
+    large: 'h1',
+    medium: 'h1',
+    small: 'h1'
   },
   heading: {
-    XLarge: 'h1',
-    Large: 'h2',
-    Medium: 'h3',
-    Small: 'h4'
+    xLarge: 'h1',
+    large: 'h2',
+    medium: 'h3',
+    small: 'h4'
   },
   title: {
-    Large: 'p',
-    Medium: 'p',
-    Small: 'p',
-    XSmall: 'p'
+    large: 'p',
+    medium: 'p',
+    small: 'p',
+    xSmall: 'p'
   },
   label: {
-    XLarge: 'label',
-    Large: 'label',
-    Medium: 'label',
-    Small: 'label',
-    XSmall: 'label'
+    xLarge: 'label',
+    large: 'label',
+    medium: 'label',
+    small: 'label',
+    xSmall: 'label'
   },
   body: {
-    Large: 'p',
-    Medium: 'p',
-    Small: 'p',
-    XSmall: 'p'
+    large: 'p',
+    medium: 'p',
+    small: 'p',
+    xSmall: 'p'
   }
 }
diff --git a/packages/web/src/components/typography/types.ts b/packages/web/src/components/typography/types.ts
@@ -10,9 +10,9 @@ export type FontWeight =
   | 'thin' // 200
   | 'ultraLight' // 100
 
-export type TextStrength = 'Weak' | 'Default' | 'Strong'
+export type TextStrength = 'weak' | 'default' | 'strong'
 
-export type TextSize = 'XLarge' | 'Large' | 'Medium' | 'Small' | 'XSmall'
+export type TextSize = 'xLarge' | 'large' | 'medium' | 'small' | 'xSmall'
 
 export type TextVariant = 'display' | 'heading' | 'title' | 'label' | 'body'
 export type VariantSizeTagMap = Partial<Record<TextSize, ElementType>>
diff --git a/packages/web/src/pages/upload-page/fields/SourceFilesView.tsx b/packages/web/src/pages/upload-page/fields/SourceFilesView.tsx
@@ -166,7 +166,7 @@ const StemListItem = ({
           textClassName={styles.dropdownText}
         />
       </div>
-      <Text size='Small' strength='Strong'>
+      <Text size='small' strength='strong'>
         {metadata.title}
       </Text>
       {renderDeleteButton()}

diff --git a/packages/web/src/pages/upload-page/fields/SwitchRowField.tsx b/packages/web/src/pages/upload-page/fields/SwitchRowField.tsx
@@ -35,7 +35,7 @@ export const SwitchRowField = (props: ToggleFieldProps) => {
   return (
     <div className={styles.root}>
       <div className={styles.content}>
-        <Text className={styles.title} variant='title' size='Large'>
+        <Text className={styles.title} variant='title' size='large'>
           {header}
         </Text>
         <Text>{description}</Text>

diff --git a/packages/web/src/pages/upload-page/forms/AttributionModalForm.tsx b/packages/web/src/pages/upload-page/forms/AttributionModalForm.tsx
@@ -12,7 +12,6 @@ import { InputV2, InputV2Variant } from 'components/data-entry/InputV2'
 import { Divider } from 'components/divider'
 import layoutStyles from 'components/layout/layout.module.css'
 import { Text } from 'components/typography'
-import typeStyles from 'components/typography/typography.module.css'
 
 import { EditFormValues } from '../components/EditPageNew'
 import { ModalField } from '../fields/ModalField'
@@ -159,7 +158,7 @@ export const AttributionModalForm = () => {
 
   const preview = (
     <div className={cn(layoutStyles.col, layoutStyles.gap2)}>
-      <Text variant='title' size='Large'>
+      <Text variant='title' size='large'>
         {messages.title}
       </Text>
       <Text>{messages.description}</Text>
@@ -226,7 +225,7 @@ const AttributionModalFields = () => {
       </SwitchRowField>
       <Divider />
       <div className={cn(layoutStyles.col, layoutStyles.gap4)}>
-        <Text variant='title' size='Large'>
+        <Text variant='title' size='large'>
           {`${messages.isrc.header} / ${messages.iswc.header}`}
         </Text>
         <span className={cn(layoutStyles.row, layoutStyles.gap6)}>
@@ -246,7 +245,7 @@ const AttributionModalFields = () => {
       </div>
       <Divider />
       <div className={cn(layoutStyles.col, layoutStyles.gap6)}>
-        <Text variant='title' size='Large'>
+        <Text variant='title' size='large'>
           {messages.licenseType}
         </Text>
         <div className={styles.attributionCommercialRow}>
@@ -257,7 +256,7 @@ const AttributionModalFields = () => {
               layoutStyles.gap2
             )}
           >
-            <Text variant='title' size='Medium'>
+            <Text variant='title' size='medium'>
               {messages.allowAttribution.header}
             </Text>
             <SegmentedControl
@@ -279,7 +278,7 @@ const AttributionModalFields = () => {
               }
             )}
           >
-            <Text variant='title' size='Medium'>
+            <Text variant='title' size='medium'>
               {messages.commercialUse.header}
             </Text>
             <SegmentedControl
@@ -299,7 +298,7 @@ const AttributionModalFields = () => {
               [styles.disabled]: !allowAttribution
             })}
             variant='title'
-            size='Medium'
+            size='medium'
           >
             {messages.derivativeWorks.header}
           </Text>
@@ -323,12 +322,12 @@ const AttributionModalFields = () => {
               ))}
             </div>
           ) : null}
-          <Text variant='title' size='Medium'>
+          <Text variant='title' size='medium'>
             {licenseType}
           </Text>
         </div>
         {licenseDescription ? (
-          <Text size='Small'>{licenseDescription}</Text>
+          <Text size='small'>{licenseDescription}</Text>
         ) : null}
       </div>
     </div>

diff --git a/packages/web/src/pages/upload-page/forms/ReleaseDateModalForm.tsx b/packages/web/src/pages/upload-page/forms/ReleaseDateModalForm.tsx
@@ -50,7 +50,7 @@ export const ReleaseDateModalForm = () => {
   const preview = (
     <div className={styles.preview}>
       <div className={styles.header}>
-        <Text className={styles.title} variant='title' size='Large'>
+        <Text className={styles.title} variant='title' size='large'>
           {messages.title}
         </Text>
       </div>
@@ -83,7 +83,7 @@ export const ReleaseDateModalForm = () => {
         <Text
           className={cn(styles.title, styles.modalHeading)}
           variant='title'
-          size='Large'
+          size='large'
         >
           {messages.title}
         </Text>

diff --git a/packages/web/src/pages/upload-page/forms/RemixModalForm.tsx b/packages/web/src/pages/upload-page/forms/RemixModalForm.tsx
@@ -130,7 +130,7 @@ export const RemixModalForm = () => {
   const preview = (
     <div className={styles.preview}>
       <div className={styles.header}>
-        <Text className={styles.title} variant='title' size='Large'>
+        <Text className={styles.title} variant='title' size='large'>
           {messages.title}
         </Text>
       </div>

diff --git a/packages/web/src/pages/upload-page/forms/SourceFilesModalForm.tsx b/packages/web/src/pages/upload-page/forms/SourceFilesModalForm.tsx
@@ -79,7 +79,7 @@ export const SourceFilesModalForm = () => {
   const preview = (
     <div className={styles.preview}>
       <div className={styles.header}>
-        <Text className={styles.title} variant='title' size='Large'>
+        <Text className={styles.title} variant='title' size='large'>
           {messages.title}
         </Text>
       </div>

diff --git a/packages/web/src/pages/upload-page/forms/TrackAvailabilityModalForm.tsx b/packages/web/src/pages/upload-page/forms/TrackAvailabilityModalForm.tsx
@@ -178,7 +178,7 @@ export const TrackAvailabilityModalForm = () => {
   const preview = (
     <div className={styles.preview}>
       <div className={styles.header}>
-        <Text className={styles.title} variant='title' size='Large'>
+        <Text className={styles.title} variant='title' size='large'>
           {messages.title}
         </Text>
       </div>