chore: add font style support

qlik-oss · Mar 24, 2023 · 86a35cb · 86a35cb
1 parent 7336737
commit 86a35cb
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 10 deletions.
diff --git a/apis/nucleus/src/utils/__tests__/background-props.test.js b/apis/nucleus/src/utils/__tests__/background-props.test.js
@@ -86,36 +86,38 @@ describe('Background property resolver', () => {
         main: {
           color: { color: 'red' },
           fontFamily: 'familiiii',
-          fontStyle: '',
+          fontStyle: ['underline'],
         },
       },
     };
     const style = resolveTextStyle(prop, 'main', t, 'peoplechart');
     expect(style).toEqual({
       color: 'red',
       fontFamily: 'familiiii',
-      fontStyle: '',
+      fontWeight: 'bold',
+      fontStyle: 'normal',
+      textDecoration: 'underline',
     });
   });
 
   test('should resolve text style by theme', () => {
     const prop = {
       title: {
-        main: {
+        footer: {
           color: { color: 'red' },
           fontStyle: '',
         },
       },
     };
     const style = resolveTextStyle(
       prop,
-      'main',
+      'footer',
       {
         getStyle: (obj, path, attr) => {
-          if (obj === 'object.peoplechart' && path === 'title.main' && attr === 'fontFamily') {
+          if (obj === 'object.peoplechart' && path === 'title.footer' && attr === 'fontFamily') {
             return 'a font';
           }
-          return undefined;
+          return 'wrong';
         },
         getColorPickerColor: (color) => color.color,
       },
@@ -125,7 +127,9 @@ describe('Background property resolver', () => {
     expect(style).toEqual({
       color: 'red',
       fontFamily: 'a font',
-      fontStyle: '',
+      fontWeight: 'normal',
+      fontStyle: 'normal',
+      textDecoration: 'initial',
     });
   });
 });
diff --git a/apis/nucleus/src/utils/background-props.js b/apis/nucleus/src/utils/background-props.js
@@ -95,15 +95,25 @@ export function resolveBgColor(bgComp, theme, objectType) {
   }
   return undefined;
 }
+function unfurlFontStyle(textProps, target) {
+  if (textProps.fontStyle && Array.isArray(textProps.fontStyle)) {
+    return textProps.fontStyle;
+  }
+  return target === 'main' ? ['bold'] : [];
+}
 
 export function resolveTextStyle(textComp, target, theme, objectType) {
   const textProps = textComp?.title?.[target] || {};
+  const fontStyle = unfurlFontStyle(textProps.fontStyle, target);
+
   return {
     fontFamily: textProps.fontFamily || theme.getStyle(`object.${objectType}`, `title.${target}`, 'fontFamily'),
     color:
       textProps.color && textProps.color.color !== 'none'
         ? theme.getColorPickerColor(textProps.color, true)
         : theme.getStyle(`object.${objectType}`, target, 'color'),
-    fontStyle: '',
+    fontWeight: fontStyle.includes('bold') ? 'bold' : 'normal',
+    fontStyle: fontStyle.includes('italic') ? 'italic' : 'normal',
+    textDecoration: fontStyle.includes('underline') ? 'underline' : 'initial',
   };
 }
diff --git a/test/rendering/sheet/sheet-data.js b/test/rendering/sheet/sheet-data.js
@@ -50,11 +50,11 @@ window.getFuncs = function getFuncs() {
               },
               subTitle: {
                 color: { color: 'blue' },
-                fontFamily: 'Arial',
+                fontStyle: ['bold', 'italic', 'underline'],
               },
               footer: {
                 color: { color: 'red' },
-                fontFamily: 'Comic Sans MS, Lucida Console, monospace ',
+                fontFamily: 'Lucida Console, monospace',
               },
             },
           },