chore: refactoring and initial styling

Author: gjulivan

packages/pluggableWidgets/document-viewer-web/components/DocxViewer.tsx

@@ -43,15 +43,7 @@ const DocxViewer: DocRendererElement = (props: DocumentViewerContainerProps) =>
     return (
         <Fragment>
             {docxHtml && (
-                <div
-                    // className={styles['document-container']}
-                    style={{
-                        width: 1 * 100 + "%",
-                        height: "85%",
-                        overflow: "auto"
-                    }}
-                    dangerouslySetInnerHTML={{ __html: docxHtml }}
-                >
+                <div className="widget-document-viewer-content" dangerouslySetInnerHTML={{ __html: docxHtml }}>
                     {/* {docHtmlStr} */}
                 </div>
             )}

packages/pluggableWidgets/document-viewer-web/components/ErrorViewer.tsx

@@ -7,7 +7,7 @@ const ErrorViewer: DocRendererElement = () => {
     console.log("ErrorViewer", props);
     return (
         <Fragment>
-            <div className="widget-document-viewer-controls">No document selected</div>
+            <div className="widget-document-viewer-content">No document selected</div>
         </Fragment>
     );
 };

packages/pluggableWidgets/document-viewer-web/src/DocumentViewer.tsx

@@ -2,13 +2,17 @@ import { createElement, ReactElement } from "react";
 import { DocumentContext } from "../store";
 import { DocumentViewerContainerProps } from "../typings/DocumentViewerProps";
 import { useRendererSelector } from "../utils/useRendererSelector";
+import "../ui/DocumentViewer.scss";
+import classNames from "classnames";
 
 export default function DocumentViewer(props: DocumentViewerContainerProps): ReactElement {
     const { CurrentRenderer } = useRendererSelector(props);
 
     return (
         <DocumentContext.Provider value={props}>
-            <div className="widget-document-viewer">{CurrentRenderer && <CurrentRenderer {...props} />}</div>
+            <div className={classNames(props.class, "widget-document-viewer", "form-control")}>
+                {CurrentRenderer && <CurrentRenderer {...props} />}
+            </div>
         </DocumentContext.Provider>
     );
 }

packages/pluggableWidgets/document-viewer-web/ui/documentViewer.scss

@@ -0,0 +1,24 @@
+$root: widget-document-viewer;
+
+:root {
+    --document-viewer-negative-margin: calc(-1 * var(--form-input-padding-x));
+}
+
+.widget-document-viewer {
+    display: flex;
+    flex-direction: column;
+
+    &-controls {
+        margin: calc(-1 * var(--form-input-padding-y)) calc(-1 * var(--form-input-padding-x));
+        margin-bottom: 0;
+        padding: var(--form-input-padding-y) var(--form-input-padding-x);
+        background-color: var(--gray-lighter);
+    }
+
+    &-content {
+        margin: var(--spacing-large);
+        padding: var(--spacing-medium);
+        border: 1px solid var(--gray-darker);
+        border-radius: var(--border-radius-default);
+    }
+}