Fix #826 | Support merging multiple typography modifiers on a component (#831)

Author: ethanshar

src/commons/__tests__/baseComponent.spec.js

@@ -1,49 +1,10 @@
 import baseComponent from '../baseComponent';
-import {Colors, Typography} from '../../style';
+import {Colors} from '../../style';
 
 const BaseComponent = baseComponent(false);
 
 describe('BaseComponent', () => {
-  describe('extractTypographyValue', () => {
-    it('should extract typography value according to typography modifier', () => {
-      expect(new BaseComponent({text40: true}).extractTypographyValue()).toEqual(Typography.text40);
-      expect(new BaseComponent({text70: true}).extractTypographyValue()).toEqual(Typography.text70);
-    });
-
-    it('should return undefined if not typography modifier was sent', () => {
-      expect(new BaseComponent({}).extractTypographyValue()).toEqual(undefined);
-    });
-
-    it('should return take the last typography modifier prop in case there is more than one', () => {
-      expect(new BaseComponent({
-        text40: true,
-        text70: true
-      }).extractTypographyValue(),).toEqual(Typography.text70);
-      expect(new BaseComponent({
-        text70: true,
-        text40: true
-      }).extractTypographyValue(),).toEqual(Typography.text40);
-      expect(new BaseComponent({
-        text40: true,
-        text70: false
-      }).extractTypographyValue(),).toEqual(Typography.text40);
-    });
-
-    it('should return value of the custom made typography', () => {
-      const customTypography = {fontSize: Typography.text30.fontSize, fontWeight: '400'};
-      Typography.loadTypographies({customTypography});
-      expect(new BaseComponent({customTypography: true}).extractTypographyValue()).toEqual(customTypography);
-      expect(new BaseComponent({
-        text40: true,
-        customTypography: true
-      }).extractTypographyValue(),).toEqual(customTypography);
-      expect(new BaseComponent({
-        customTypography: true,
-        text40: true
-      }).extractTypographyValue(),).toEqual(Typography.text40);
-    });
-  });
-
+  
   describe('updateModifiers', () => {
     it('should update state with new modifiers values if modifiers props have changed', () => {
       const uut = new BaseComponent({});

src/commons/__tests__/modifiers.spec.js

@@ -41,7 +41,14 @@ describe('Modifiers', () => {
       expect(uut.extractTypographyValue({})).toEqual(undefined);
     });
 
-    it('should return take the last typography modifier prop in case there is more than one', () => {
+    it('should ignore modifiers with false value', () => {
+      expect(uut.extractTypographyValue({
+        text40: true,
+        text70: false
+      }),).toEqual(Typography.text40);
+    });
+
+    it('should prioritize last typography modifier prop in case there is more than one', () => {
       expect(uut.extractTypographyValue({
         text40: true,
         text70: true
@@ -50,10 +57,7 @@ describe('Modifiers', () => {
         text70: true,
         text40: true
       }),).toEqual(Typography.text40);
-      expect(uut.extractTypographyValue({
-        text40: true,
-        text70: false
-      }),).toEqual(Typography.text40);
+      
     });
 
     it('should return value of the custom made typography', () => {
@@ -63,11 +67,17 @@ describe('Modifiers', () => {
       expect(uut.extractTypographyValue({
         text40: true,
         customTypography: true
-      }),).toEqual(customTypography);
+      }),).toEqual({...Typography.text40, ...customTypography});
       expect(uut.extractTypographyValue({
         customTypography: true,
         text40: true
-      }),).toEqual(Typography.text40);
+      }),).toEqual({...customTypography, ...Typography.text40});
+    });
+
+    it('should merge typography modifiers', () => {
+      const bold = {fontWeight: 'bold'};
+      Typography.loadTypographies({bold});
+      expect(uut.extractTypographyValue({text70: true, bold: true})).toEqual({...Typography.text70, fontWeight: 'bold'});
     });
   });
 

src/commons/modifiers.ts

@@ -125,10 +125,10 @@ export function extractTypographyValue(props: Dictionary<any>): object | undefin
     .keys()
     .filter(key => Typography.getKeysPattern().test(key))
     .value() as unknown as Array<keyof typeof TypographyPresets>;
-  let typography;
+  let typography: any;
   _.forEach(typographyPropsKeys, key => {
     if (props[key] === true) {
-      typography = Typography[key];
+      typography = {...typography, ...Typography[key]};
     }
   });