Add styling to Upload and Link

Author: cursork

.gitignore

@@ -28,3 +28,6 @@ dist-ssr
 
 # Licenses / secrets
 kendo-ui-license.txt
+
+# Personal TODOs
+TODO.md

src/components/Button.jsx

@@ -586,8 +586,6 @@ const Button = ({
               position: "absolute",
               top: 2,
               left: 0,
-              ...customStyles,
-              ...fontStyles
             }}
           >
             {Caption}
@@ -612,8 +610,6 @@ const Button = ({
               position: "absolute",
               top: 2,
               left: 16,
-              ...customStyles,
-              ...fontStyles
             }}
           >
             <label style={{whiteSpace: "nowrap"}} htmlFor={data?.ID}>{Caption}</label>

src/components/Link/index.jsx

@@ -1,20 +1,34 @@
-import { setStyle } from "../../utils";
+import { setStyle, getFontStyles, parseFlexStyles } from "../../utils";
+import { useAppData } from "../../hooks";
 
 const Link = ({data}) => {
-    const style = setStyle(data.Properties)
+    const { findCurrentData, inheritedProperties } = useAppData();
+
+    const styles = setStyle(data?.Properties);
+    const { CSS, Visible } = data?.Properties || {};
+    const { FontObj } = inheritedProperties(data, 'FontObj');
+
+    const customStyles = parseFlexStyles(CSS);
+    const font = findCurrentData(FontObj);
+    const fontStyles = getFontStyles(font, 12);
+
     return (
-        <div>
-            <a 
+        <div
+            id={data.ID + ".$CONTAINER"}
+            style={{
+                ...styles,
+                display: Visible === 0 ? "none" : "block",
+                ...customStyles,
+                ...fontStyles,
+            }}
+        >
+            <a
                 id={data.ID}
-                href={data.Properties.Href}
-                target={data.Properties?.Target || '_blank'} // Default to new tab/window
+                href={data.Properties?.Href}
+                target={data.Properties?.Target || '_blank'}
                 download={data.Properties?.Download === 1}
-
-                style={{
-                    ...style
-                }}
             >
-                {data.Properties?.Label !== undefined ? data.Properties.Label : data.Properties.Href}
+                {data.Properties?.Label !== undefined ? data.Properties.Label : data.Properties?.Href}
             </a>
         </div>
     );

src/components/Upload/index.jsx

@@ -1,9 +1,36 @@
 import wgResponse from "../../utils/wgResponse";
+import { setStyle, getFontStyles, parseFlexStyles } from "../../utils";
+import { useAppData } from "../../hooks";
 
 const Upload = ({ data }) => {
+  const { findCurrentData, inheritedProperties } = useAppData();
+
+  const styles = setStyle(data?.Properties);
+  const { CSS, Visible } = data?.Properties || {};
+  const { FontObj } = inheritedProperties(data, 'FontObj');
+
+  const customStyles = parseFlexStyles(CSS);
+  const font = findCurrentData(FontObj);
+  const fontStyles = getFontStyles(font, 12);
+
   return (
-    <div>
-      <input id={data.ID} type="file" />
+    <div
+      id={data.ID + ".$CONTAINER"}
+      style={{
+        ...styles,
+        display: Visible === 0 ? "none" : "block",
+        ...customStyles,
+        ...fontStyles,
+      }}
+    >
+      <input
+        id={data.ID}
+        type="file"
+        style={{
+          width: "100%",
+          height: "100%",
+        }}
+      />
     </div>
   );
 };