feat: add decoration to style-attribute with style type and tests (#74)

* fix: add decoration to style-attribute

* fix: use CSS property type

this commit uses a CSSProperties type from feedback provided in
#61

it also adds a tests to test the functionality.

closes #61

Co-authored-by: vmik7 <[email protected]>

Author: robertkowalski

__tests__/index.spec.tsx

@@ -305,5 +305,20 @@ describe("Ansi", () => {
         '<code><span class="ansi-green-fg">this is a link: <a href="https://nteract.io/" target="_blank">https://nteract.io/</a></span></code>'
       );
     });
+
+    test("can add text decoration styles", () => {
+      const el = shallow(
+        React.createElement(
+          Ansi,
+          {},
+          `hello ${GREEN_FG}${BOLD}world${RESET}!`
+        )
+      );
+      expect(el).not.toBeNull();
+      expect(el.text()).toBe("hello world!");
+      expect(el.html()).toBe(
+        '<code><span>hello </span><span style="color:rgb(0, 187, 0);font-weight:bold">world</span><span>!</span></code>'
+      );
+    });
   });
 });

src/index.ts

@@ -51,27 +51,46 @@ function createClass(bundle: AnserJsonEntry): string | null {
   return classNames;
 }
 
-interface Colors {
-  color?: string;
-  backgroundColor?: string;
-}
-
 /**
  * Create the style attribute.
  * @name createStyle
  * @function
  * @param {AnserJsonEntry} bundle
  * @return {Object} returns the style object
  */
-function createStyle(bundle: AnserJsonEntry): Colors {
-  const style: Colors = {};
+function createStyle(bundle: AnserJsonEntry): React.CSSProperties {
+  const style: React.CSSProperties = {};
   if (bundle.bg) {
     style.backgroundColor = `rgb(${bundle.bg})`;
   }
   if (bundle.fg) {
     style.color = `rgb(${bundle.fg})`;
   }
-
+  switch (bundle.decoration) {
+    case 'bold':
+        style.fontWeight = 'bold';
+        break;
+    case 'dim':
+        style.opacity = '0.5';
+        break;
+    case 'italic':
+        style.fontStyle = 'italic';
+        break;
+    case 'hidden':
+        style.visibility = 'hidden';
+        break;
+    case 'strikethrough':
+        style.textDecoration = 'line-through';
+        break;
+    case 'underline':
+        style.textDecoration = 'underline';
+        break;
+    case 'blink':
+        style.textDecoration = 'blink';
+        break;
+    default:
+        break;
+  }
   return style;
 }