Modified Typhography as to not have a default size type and added col…

…or prop

src/components/atoms/StatusChip/__snapshots__/index.test.tsx.snap

@@ -21,6 +21,7 @@ exports[`StatusChip component render correct a valid component is passed 1`] = `
       Array [
         undefined,
         Object {
+          "color": "black",
           "fontSize": 29,
           "fontWeight": "400",
           "lineHeight": 18,
@@ -62,6 +63,7 @@ exports[`StatusChip component render correct if a background is passed 1`] = `
           "textAlign": "center",
         },
         Object {
+          "color": "black",
           "fontSize": 29,
           "fontWeight": "400",
           "lineHeight": 18,
@@ -102,6 +104,7 @@ exports[`StatusChip component render correct text is passed 1`] = `
           "textAlign": "center",
         },
         Object {
+          "color": "black",
           "fontSize": 29,
           "fontWeight": "400",
           "lineHeight": 18,

src/components/atoms/Typography/__snapshots__/index.test.tsx.snap

@@ -6,6 +6,7 @@ exports[`Typography component render correct match snapshot with default typogra
     Array [
       undefined,
       Object {
+        "color": "black",
         "fontSize": 29,
         "fontWeight": "400",
         "lineHeight": 18,

src/components/atoms/Typography/index.tsx

@@ -11,16 +11,18 @@ interface TypographyProps extends TextProps {
 	style?: StyleProp<TextStyle>;
 	type?: TypographyType;
 	size?: TypographySize;
+	color?: string;
 }
 
-const Typography = ({children, style, type, size, ...props}: TypographyProps) => {
+const Typography = ({children, style, type, size, color = 'black', ...props}: TypographyProps) => {
 	if (!children) {
 		return null;
 	}
 
 	const typographyStyles = getStyleByTypography(
 		type as TypographyType | 'string',
-		size as TypographySize | 'string'
+		size as TypographySize | 'string',
+		color
 	);
 
 	return (

src/components/atoms/Typography/utils/getStyleByTypography/index.test.ts

@@ -1,25 +1,25 @@
 import {StyleSheet} from 'react-native';
-import getStyleByTypography, {defaultStyles} from './';
+import getStyleByTypography, {getDefaultStyles} from './';
 import typography, {Typography} from 'theme/typography';
 
 describe('getStyleByType function', () => {
 	describe('returns default typography', () => {
 		it('as there is no valid type', () => {
 			const styles = getStyleByTypography('invalid', 'invalid');
 
-			expect(styles).toEqual(defaultStyles);
+			expect(styles).toEqual(getDefaultStyles());
 		});
 
 		it('as there is no valid size', () => {
 			const styles = getStyleByTypography('body', 'invalid');
 
-			expect(styles).toEqual(defaultStyles);
+			expect(styles).toEqual(getDefaultStyles());
 		});
 
 		it('as there is title type with invalid size', () => {
 			const styles = getStyleByTypography('title', 'invalid');
 
-			expect(styles).toEqual(defaultStyles);
+			expect(styles).toEqual(getDefaultStyles());
 		});
 	});
 
@@ -36,7 +36,7 @@ describe('getStyleByType function', () => {
 
 		const styles = getStyleByTypography('body', 'small');
 
-		expect(styles).toEqual(defaultStyles);
+		expect(styles).toEqual(getDefaultStyles());
 
 		typography.body = originalBody;
 	});

src/components/atoms/Typography/utils/getStyleByTypography/index.ts

@@ -2,52 +2,66 @@ import {StyleSheet, TextStyle} from 'react-native';
 import typography, {Typography, TypographyItem} from 'theme/typography';
 
 type TypographyType = keyof Typography;
-type TypographySize = 'large' | 'medium' | 'small' | 'default';
+type TypographySize = 'large' | 'medium' | 'small';
 
 const validTypes: TypographyType[] = Object.keys(typography) as TypographyType[];
-const validSizes: TypographySize[] = ['large', 'medium', 'small', 'default'];
+const validSizes: TypographySize[] = ['large', 'medium', 'small'];
 
-export const defaultStyles = StyleSheet.create<{typography: TextStyle}>({
-	typography: {
-		fontWeight: typography.body.medium.fontWeight,
-		fontSize: typography.body.medium.fontSize,
-		lineHeight: typography.body.medium.lineHeight,
-	},
-});
+export const getDefaultStyles = (color?: string) =>
+	StyleSheet.create<{typography: TextStyle}>({
+		typography: {
+			fontWeight: typography.body.medium.fontWeight,
+			fontSize: typography.body.medium.fontSize,
+			lineHeight: typography.body.medium.lineHeight,
+			...(color && {color}),
+		},
+	});
+
+const hasSizes = (category: any): category is Record<TypographySize, TypographyItem> => {
+	return 'large' in category && 'medium' in category && 'small' in category;
+};
+
+const hasDefault = (category: any): category is {default: TypographyItem} => {
+	return 'default' in category;
+};
 
 const getStyleByTypography = (
 	type: TypographyType | string,
-	size: TypographySize | string = 'default'
+	size: TypographySize | string = 'default',
+	color?: string
 ) => {
-	if (
-		!validTypes.includes(type as TypographyType) ||
-		!validSizes.includes(size as TypographySize)
-	) {
-		return defaultStyles;
+	if (!type || !validTypes.includes(type as TypographyType)) {
+		return getDefaultStyles(color);
 	}
 
 	const typographyType = type as TypographyType;
-	const typographySize = size as TypographySize;
-
 	const typographyCategory = typography[typographyType];
 
-	if (typographySize === 'default' && 'default' in typographyCategory) {
+	if (hasDefault(typographyCategory)) {
 		return StyleSheet.create({
 			typography: {
-				...(typographyCategory.default as TypographyItem),
+				...typographyCategory.default,
+				...(color && {color}),
 			},
 		});
-	} else if (typographySize in typographyCategory) {
+	}
+
+	if (!size || !validSizes.includes(size as TypographySize)) {
+		return getDefaultStyles(color);
+	}
+
+	const typographySize = size as TypographySize;
+
+	if (hasSizes(typographyCategory)) {
 		return StyleSheet.create({
 			typography: {
-				...(typographyCategory[
-					typographySize as keyof typeof typographyCategory
-				] as TypographyItem),
+				...typographyCategory[typographySize],
+				...(color && {color}),
 			},
 		});
 	}
 
-	return defaultStyles;
+	return getDefaultStyles(color);
 };
 
 export default getStyleByTypography;