#24362 working on Create Code UI

core-web/libs/dojo-theme/scss/backend/dot-admin/components/_common.scss

@@ -9,3 +9,4 @@
 @import "history";
 @import "rules";
 @import "wysiwyg-drag-zone";
+@import "file-asset-dropzone";

core-web/libs/dojo-theme/scss/backend/dot-admin/components/_file-asset-dropzone.scss

@@ -0,0 +1,13 @@
+.file-asset-container {
+    position: relative;
+}
+
+.file-asset__drop-zone {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    bottom: 0;
+    top: 0;
+    left: 0;
+    right: 0px;
+}

core-web/libs/dotcms-webcomponents/project.json

@@ -39,6 +39,7 @@
         "serve": {
             "executor": "@nxext/stencil:build",
             "options": {
+                "outputPath": "dist/libs/dotcms-webcomponents",
                 "projectType": "library",
                 "configPath": "libs/dotcms-webcomponents/stencil.config.ts",
                 "serve": true,

core-web/libs/dotcms-webcomponents/src/components/dot-file-upload/dot-file-upload.scss

@@ -0,0 +1,94 @@
+@import "../../global/variables";
+
+:host {
+    @include mwc-dotcms-theme;
+
+    *,
+    *:after,
+    *:before {
+        box-sizing: border-box;
+    }
+}
+
+dot-file-upload {
+    mwc-icon {
+        color: var(--color-grey);
+        font-size: 24px;
+    }
+
+    input[type="file"] {
+        display: none;
+    }
+    @mixin box-style($border-style) {
+        border: 1px $border-style var(--color-main);
+        border-radius: 4px;
+    }
+    .dot-file-upload {
+        width: 100%;
+        padding: 16px;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        align-items: center;
+        @include box-style(dashed);
+    }
+
+    .dot-file-upload-drop-message {
+        mwc-icon {
+            margin-top: 16px;
+        }
+        text-align: center;
+        p {
+            margin: 16px 0 8px 0;
+            font: 400 normal 16px "Roboto";
+            color: black;
+        }
+    }
+
+    .dot-file-upload-actions {
+        padding: 16px;
+        :first-child {
+            margin-right: 8px;
+        }
+        mwc-button {
+            border: 1.5px solid var(--color-main);
+            border-radius: 8px;
+            color: var(--color-main);
+        }
+    }
+
+    .dot-file-list {
+        @include box-style(solid);
+        margin-top: 10px;
+        padding: 16px;
+        .dot-file-list-item {
+            display: flex;
+            align-items: center;
+            margin: 5px;
+            padding: 14px 16px;
+            background-color: #f4f4f6;
+            border-radius: 4px;
+            :first-child {
+                margin-right: 8px;
+            }
+            :nth-child(2) {
+                flex-grow: 1;
+            }
+        }
+
+        .dot-file-list-cancel-box {
+            margin-top: 44px;
+            text-align: right;
+        }
+    }
+
+    .dot-file-editor {
+        @include box-style(solid);
+        padding: 16px;
+
+        .dot-file-editor-cancel-box {
+            margin-top: 44px;
+            text-align: right;
+        }
+    }
+}

core-web/libs/dotcms-webcomponents/src/components/dot-file-upload/dot-file-upload.stories.js

@@ -0,0 +1,29 @@
+import readme from './readme.md';
+
+export default {
+    title: 'Components',
+    parameters: {
+        docs: {
+            page: readme
+        }
+    },
+    args: {
+        dropFilesText: 'Drag and Drop or paste a file',
+        browserButtonText: 'Browse',
+        writeCodeButtonText: 'Write Code',
+        cancelButtonText: 'Cancel',
+        currentState: 'UPLOADFILE'
+    }
+};
+
+const Template = (args) => {
+    const dotFileUpload = document.createElement('dot-file-upload');
+
+    for (const item in args) {
+        dotFileUpload[item] = args[item];
+    }
+
+    return dotFileUpload;
+};
+
+export const DotFileUpload = Template.bind({});