chore: style update

htwoo-core/helpers/hbs/test.js

@@ -41,7 +41,7 @@ module.exports = function (Handlebars) {
   });
 
   Handlebars.registerHelper('getLastNumericId', function (value) {
-    return lastId;
+    return lastIdClean;
   });
 
   Handlebars.registerHelper('seoTitle', function (value) {

htwoo-core/src/_data/htwoo-input.json

@@ -106,12 +106,10 @@
             "text": "lorem ipsum dolor sit amet, consectetur adipiscing elit"
         },
         "file-upload": {
-            "label":  "Click or drag and drop files here to upload filed",
+            "label": "Click or drag and drop files here to upload filed",
             "description": "Max file size: 10MB, Types: jpg, png, pdf",
-            "icon": {
-                "iconname": "icon-arrow-upload-filled",
-                "label": "Upload"
-            }
+            "iconname": "icon-arrow-upload-filled",
+            "title": "Upload"
         }
     },
     "checkbox-group": {

htwoo-core/src/js/file.js

@@ -1,36 +1,70 @@
 export class FileUploadHandler {
+    _files = [];
+    _fileLable = null;
+    _fileControl = null;
+    _originalFileControl = null;
+    _infileOutput = null;
 
+    dragOver = (event) => {
+        event.preventDefault();
+        this._fileLabel.classList.add('drag-over'); // Visual feedback
+    }
+
+    dragLeave = (event) => {
+        event.preventDefault();
+        this._fileLabel.classList.remove('drag-over');
+    };
+
+    dragDrop = (event) => {
+        event.preventDefault();
+        this._fileLabel.classList.remove('drag-over');
+
+        const files = event.dataTransfer.files;
+        if (files.length > 0) {
+            console.log('Files dropped:', files);
+            this.fileChangedEvent({ target: { files } });
+        }
+    }
 
     fileChangedEvent = (event) => {
-
         let files;
-
         console.debug('FileUploadHandler.fileChanged', event);
 
-        if (event.target.files.length > 0) {
-            files = Array.from(event.target.files);
+        if (event.target.files.length === 0) {
+            this._infileOutput.innerHTML = "";
+            return;
         }
 
+        files = Array.from(event.target.files);
+
         const fileOutput = document.createElement('ul');
+        fileOutput.classList.add('hoo-infile-list');
         console.debug('FileUploadHandler', files);
         files.forEach(file => {
             const fileItem = document.createElement('li');
             fileItem.innerText = file.name;
             fileOutput.appendChild(fileItem);
         });
-        this._infileOutput.appendChild(fileOutput);
+
+        this._infileOutput.innerHTML = `<div class='hoo-infile-selection'>${this._infileOutput.title || 'Files Selected'}</div>${fileOutput.outerHTML}`;
     }
 
     constructor(htmlElement) {
         this._fileControl = htmlElement;
         console.debug('FileUploadHandler', this._fileControl);
+        this._fileLabel = htmlElement.querySelector('.hoo-infile-label');
+        this._fileLabel.addEventListener('dragover', this.dragOver);
+        this._fileLabel.addEventListener('dragleave', this.dragLeave);
+        this._fileLabel.addEventListener('drop', this.dragDrop);
 
         this._originalFileControl = this._fileControl.querySelector('.hoo-infile-context');
-        console.debug('FileUploadHandler', this._originalFileControl);
+        console.debug('FileUploadHandler', this._originalFileControl, this._originalFileControl.getAttribute('aria-describedby'));
         this._originalFileControl.addEventListener('change', this.fileChangedEvent);
 
-        this._infileOutput = this._fileControl.querySelector('.hoo-infile-output');
-        console.debug('FileUploadHandler', this._infileOutput);
-    }
+        let describedBy = this._originalFileControl.getAttribute('aria-describedby');
+        console.debug('FileUploadHandler', describedBy, this._infileOutput, `#${describedBy.trim()}`);
 
+        this._infileOutput = document.querySelector(`#${describedBy.trim()}`);
+        console.debug('Infile Output:', this._infileOutput);
+    }
 }

htwoo-core/src/styles/01-atoms/input/_file.scss

@@ -1,44 +1,90 @@
 @use '../../00-base/colors/colors';
+@use '../../00-base/mixin/core.mixin' as core;
 
 .hoo-input-file {
     display: inline-flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    border: 1px colors.$neutral-200 solid;
-    background-color: colors.$neutral-050;
-    border-radius: .5rem;
-    &-inner{
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        text-align: center;
+}
+
+.hoo-infile-icon {
+    .hoo-icon {
+        height: 100%;
+        width: auto;
+    }
+
+    .hoo-icon-svg {
+        min-width: 2lh;
+        height: 100%;
+        aspect-ratio: 1 / 1;
+        color: colors.$neutral-400;
     }
 }
 
-.hoo-infile-description{
-    display: block;
-    text-align: center;
+.hoo-infile-label {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    text-align: left;
+    justify-content: space-between;
     width: 100%;
     font-weight: 500;
-    padding: 2rem;
+    padding-block: 1rem;
+    padding-inline: .75rem 1.5rem;
+    font-size: core.px2rem(14px);
+    gap: .5rem;
+
+    border: 1px colors.$neutral-300 solid;
+    background-color: colors.$neutral-050;
+    border-radius: .5rem;
+
+    &.drag-over{
+        border: 1px dotted colors.$theme-500;
+        background-color: colors.$theme-100;
+    }
 }
 
-.hoo-infile-label{
-    display: block;
-    text-align: center;
-    width: 100%;
-    font-weight: 500;
-    padding: 2rem;
+.hoo-infile-description {
+    font-size: core.px2rem(12px);
+    text-align: left;
+    margin: 0;
+    margin-top: 0.5em;
 }
 
-.hoo-infile-context{
+.hoo-infile-context {
     opacity: 0;
     overflow: hidden;
     height: 0;
     width: 0;
+    display: contents;
 }
-.hoo-infile-output{
+
+.hoo-infile-output {
+    box-sizing: border-box;
+    display: block;
+    width: calc(100% - 1rem);
     text-align: left;
+    padding: 1rem 1.5rem .75rem;
+    border: 1px colors.$neutral-200 solid;
+    border-top: none;
+    background-color: colors.$neutral-050;
+    border-radius: 0 0 .5rem .5rem;
+
+    &:empty {
+        display: none;
+    }
+}
+
+.hoo-infile-selection {
+    font-weight: 600;
+    font-size: core.px2rem(14px);
+}
+
+.hoo-infile-list {
+    font-size: core.px2rem(14px);
+    list-style: outside none none;
+    padding: 0;
+    line-height: 1.5;
+    margin-block: .5rem;;
 }

htwoo-core/src/styles/pattern-scaffolding.scss

@@ -474,6 +474,7 @@ h3{
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	flex-direction: column;
 }
 .more-padding{
 	padding: 5vw;