From 567a6711ea534a27bff9b3a9f69930538cb2c267 Mon Sep 17 00:00:00 2001
From: Ryan Breen <rbreen@zmags.com>
Date: Wed, 4 Jan 2023 12:49:55 -0500
Subject: [PATCH] :bug: Fix text transform and decoration

This change implements support for text casing and transformation
(underline / strikethrough).

Signed-off-by: Ryan Breen <rbreen@zmags.com>
---
 src/code.ts |  4 +++-
 src/ui.tsx  | 34 ++++++++++++++++++++++++++++++----
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/src/code.ts b/src/code.ts
index 273ddef..13c2bed 100644
--- a/src/code.ts
+++ b/src/code.ts
@@ -71,7 +71,7 @@ function traverse(node): NodeData {
   }
 
   if (node.type == "TEXT") {
-    const styledTextSegments = node.getStyledTextSegments(["fontName", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "fills"]);
+    const styledTextSegments = node.getStyledTextSegments(["fontName", "fontSize", "fontWeight", "lineHeight", "letterSpacing", "textCase", "textDecoration", "fills"]);
     let font = {
       fontName: styledTextSegments[0].fontName,
       fontSize: styledTextSegments[0].fontSize.toString(),
@@ -80,6 +80,8 @@ function traverse(node): NodeData {
       lineHeight: styledTextSegments[0].lineHeight,
       letterSpacing: styledTextSegments[0].letterSpacing,
       fills: styledTextSegments[0].fills,
+      textCase: styledTextSegments[0].textCase,
+      textDecoration: styledTextSegments[0].textDecoration,
       textAlignHorizontal: node.textAlignHorizontal,
       textAlignVertical: node.textAlignVertical,
       children: styledTextSegments
diff --git a/src/ui.tsx b/src/ui.tsx
index 2fdaf7c..5bc443b 100644
--- a/src/ui.tsx
+++ b/src/ui.tsx
@@ -166,7 +166,33 @@ export default class PenpotExporter extends React.Component<PenpotExporterProps,
     return style.toLowerCase().replace(/\s/g, "")
   }
 
+  getTextDecoration(node){
+    const textDecoration = node.textDecoration;
+    if (textDecoration === "STRIKETHROUGH"){
+      return "line-through";
+    }
+    if (textDecoration === "UNDERLINE"){
+      return "underline";
+    }
+    return "none";
+  }
+
+  getTextTransform(node){
+    const textCase = node.textCase;
+    if (textCase === "UPPER"){
+      return "uppercase";
+    }
+    if (textCase === "LOWER"){
+      return "lowercase";
+    }
+    if (textCase === "TITLE"){
+      return "capitalize";
+    }
+    return "none";
+  }
+
   createPenpotText(file, node, baseX, baseY){
+
     const children = node.children.map((val) => {
       return {
         lineHeight: val.lineHeight,
@@ -176,8 +202,8 @@ export default class PenpotExporter extends React.Component<PenpotExporterProps,
         fontSize: val.fontSize.toString(),
         fontWeight: val.fontWeight.toString(),
         fontVariantId: this.translateFontStyle(val.fontName.style),
-        textDecoration: "none",
-        textTransform: "none",
+        textDecoration: this.getTextDecoration(val),
+        textTransform: this.getTextTransform(val),
         letterSpacing: val.letterSpacing,
         fills: this.translateFills(val.fills, node.width, node.height),
         fontFamily: val.fontName.family,
@@ -201,13 +227,13 @@ export default class PenpotExporter extends React.Component<PenpotExporterProps,
             lineHeight: node.lineHeight,
             fontStyle: "normal",
             children: children,
-            textTransform: "none",
+            textTransform: this.getTextTransform(node),
             textAlign: this.translateHorizontalAlign(node.textAlignHorizontal),
             fontId: "gfont-" + slugify(node.fontName.family.toLowerCase()),
             fontSize: node.fontSize.toString(),
             fontWeight: node.fontWeight.toString(),
             type: "paragraph",
-            textDecoration: "none",
+            textDecoration: this.getTextDecoration(node),
             letterSpacing: node.letterSpacing,
             fills: this.translateFills(node.fills, node.width, node.height),
             fontFamily: node.fontName.family