feat(components): file dropzone

.storybook/stories/dropzone.stories.ts

@@ -0,0 +1,20 @@
+// The HOT logo
+
+import type { Meta, StoryObj } from "@storybook/web-components-vite";
+import { html } from "lit";
+
+import "../../src/hotosm-ui";
+
+const meta: Meta = {
+  title: "Dropzone",
+  component: "hot-dropzone",
+};
+export default meta;
+
+export const Dropzone: StoryObj = {
+  render: (args, { parameters }) => {
+    return html`
+      <hot-dropzone></hot-dropzone>
+    `;
+  },
+};

src/components/dropzone/dropzone.component.ts

@@ -0,0 +1,18 @@
+import { html, LitElement, type CSSResultGroup } from "lit";
+import "@awesome.me/webawesome/dist/components/input/input.js";
+
+export class Dropzone extends LitElement {
+	static styles: CSSResultGroup = [];
+
+	name = "hot-dropzone";
+
+	protected render() {
+		return html`
+            <div class="dropzone">
+                <wa-input type="file"></wa-input>
+            </div>
+        `;
+	}
+}
+
+export default Dropzone;

src/components/dropzone/dropzone.ts

@@ -0,0 +1,11 @@
+import Dropzone from './dropzone.component.js';
+export default Dropzone;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'hot-dropzone': Dropzone;
+  }
+}
+
+// Define web component
+customElements.define("hot-dropzone", Dropzone);

src/hotosm-ui.ts

@@ -2,18 +2,20 @@ import HotHeader from './components/header/header.js';
 import HotLogo from './components/logo/logo.js';
 import HotTracking from './components/tracking/tracking.js';
 import HotConsent from './components/consent/consent.js';
+import HotDropzone from './components/dropzone/dropzone.js';
 
 // Export CSS injection utilities
-export { 
-    setupAutoInjection, 
-    injectHOTThemeIntoButtons, 
+export {
+    setupAutoInjection,
+    injectHOTThemeIntoButtons,
     injectHOTThemeIntoAllComponents,
-    injectCSSIntoShadowDOM 
+    injectCSSIntoShadowDOM
 } from './utils/shadow-dom-css.js';
 
 export {
     HotHeader as Header,
     HotLogo as Logo,
     HotConsent as Consent,
     HotTracking as Tracking,
+    HotDropzone as Dropzone
 }