fix(Types): remove Sizes and Weights enums, use typed string in Text instead

CHANGELOG.md

@@ -23,6 +23,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Fixes
 - Fix endMedia to not be removed from DOM on mouseleave for `ListItem` @musingh1 ([#278](https://github.com/stardust-ui/react/pull/278))
+- Remove `Sizes` and `Weights` enums, use typed string in `Text` instead @jurokapsiar ([#446](https://github.com/stardust-ui/react/pull/446))
 
 ### Features
 - Make `Grid` keyboard navigable by implementing `gridBehavior` @sophieH29 ([#398](https://github.com/stardust-ui/react/pull/398))

docs/src/prototypes/chatPane/chatPaneHeader.tsx

@@ -2,7 +2,6 @@ import * as React from 'react'
 import { Avatar, Button, Divider, Icon, Layout, Segment, Text } from '@stardust-ui/react'
 
 import { ChatData } from './services'
-import { Sizes } from 'src/lib/enums'
 
 export interface ChatPaneHeaderProps {
   chat?: ChatData
@@ -50,7 +49,7 @@ class ChatPaneHeader extends React.PureComponent<ChatPaneHeaderProps> {
         start={<Avatar name={chat.title} />}
         main={
           <Text
-            size={Sizes.Large}
+            size="large"
             content={chat.title}
             styles={{ marginLeft: '12px', fontWeight: 600 }}
           />

docs/src/prototypes/employeeCard/EmployeeCard.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react'
-import { Sizes } from '../../../../src/lib/enums'
 import { Extendable, ShorthandValue } from '../../../../types/utils'
 import { Avatar, Divider, Grid } from '@stardust-ui/react'
 import Text from './Text'
@@ -37,7 +36,7 @@ class EmployeeCard extends React.Component<Extendable<EmployeeCardProps>, any> {
         {...rest}
       >
         <div>
-          <Text size={Sizes.Medium} weight={'bold'} as="div">
+          <Text size={'medium'} weight={'bold'} as="div">
             {firstName} {lastName}
           </Text>
           <Text muted as="div">

src/components/Text/Text.tsx

@@ -5,7 +5,6 @@ import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } f
 
 import { Extendable } from '../../../types/utils'
 import { ComponentVariablesInput, ComponentSlotStyle } from '../../themes/types'
-import { Sizes } from '../../lib/enums'
 
 export interface TextProps {
   as?: any
@@ -15,7 +14,7 @@ export interface TextProps {
   disabled?: boolean
   error?: boolean
   important?: boolean
-  size?: Sizes
+  size?: 'smallest' | 'smaller' | 'small' | 'medium' | 'large' | 'larger' | 'largest'
   weight?: 'light' | 'semilight' | 'regular' | 'semibold' | 'bold'
   success?: boolean
   temporary?: boolean

src/themes/teams/components/Text/textStyles.ts

@@ -1,4 +1,3 @@
-import { Sizes, Weights } from '../../../../lib/enums'
 import { ComponentStyleFunctionParam, ICSSInJSStyle } from '../../../types'
 import { truncateStyle } from '../../../../styles/customCSS'
 import { TextVariables } from './textVariables'
@@ -44,39 +43,39 @@ export default {
         color: v.importantColor,
       }),
 
-      ...(weight === Weights.Light && {
+      ...(weight === 'light' && {
         fontWeight: v.fontWeightLight,
       }),
-      ...(weight === Weights.Semilight && {
+      ...(weight === 'semilight' && {
         fontWeight: v.fontWeightSemilight,
       }),
-      ...(weight === Weights.Regular && {
+      ...(weight === 'regular' && {
         fontWeight: v.fontWeightRegular,
       }),
-      ...(weight === Weights.Semibold && {
+      ...(weight === 'semibold' && {
         fontWeight: v.fontWeightSemibold,
       }),
-      ...(weight === Weights.Bold && {
+      ...(weight === 'bold' && {
         fontWeight: v.fontWeightBold,
       }),
 
-      ...(size === Sizes.Smaller && {
+      ...(size === 'smaller' && {
         fontSize: v.fontSizeExtraSmall,
         lineHeight: v.fontLineHeightExtraSmall,
       }),
-      ...(size === Sizes.Small && {
+      ...(size === 'small' && {
         fontSize: v.fontSizeSmall,
         lineHeight: v.fontLineHeightSmall,
       }),
-      ...(size === Sizes.Medium && {
+      ...(size === 'medium' && {
         fontSize: v.fontSizeMedium,
         lineHeight: v.fontLineHeightMedium,
       }),
-      ...(size === Sizes.Large && {
+      ...(size === 'large' && {
         fontSize: v.fontSizeLarge,
         lineHeight: v.fontLineHeightLarge,
       }),
-      ...(size === Sizes.Larger && {
+      ...(size === 'larger' && {
         fontSize: v.fontSizeExtraLarge,
         lineHeight: v.fontLineHeightExtraLarge,
       }),