From 39f848fb8fbcfdfa03cf854642f0720915f7d315 Mon Sep 17 00:00:00 2001
From: Pyry Koivisto <pyry.koivisto@mavericks.fi>
Date: Mon, 26 Aug 2024 12:51:47 +0300
Subject: [PATCH] SHARED(Frontend): Include a file drop zone by default on
 desktop with the FileUpload component

---
 frontend/packages/shared/CHANGELOG.MD         |  5 +++
 frontend/packages/shared/package.json         |  2 +-
 .../src/components/FileUpload/FileUpload.scss | 44 +++++++++++--------
 .../src/components/FileUpload/FileUpload.tsx  | 33 +++++++++++---
 4 files changed, 57 insertions(+), 27 deletions(-)

diff --git a/frontend/packages/shared/CHANGELOG.MD b/frontend/packages/shared/CHANGELOG.MD
index c1ebf84a9..5f3483021 100644
--- a/frontend/packages/shared/CHANGELOG.MD
+++ b/frontend/packages/shared/CHANGELOG.MD
@@ -9,6 +9,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Released]
 
+## [1.10.8] - 2024-08-26
+
+### Changed
+- Include a file drop zone by default on desktop with the file upload component
+
 ## [1.10.7] - 2024-08-07
 
 ### Added
diff --git a/frontend/packages/shared/package.json b/frontend/packages/shared/package.json
index a2a8b5290..952ef52b3 100644
--- a/frontend/packages/shared/package.json
+++ b/frontend/packages/shared/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@opetushallitus/kieli-ja-kaantajatutkinnot.shared",
-  "version": "1.10.7",
+  "version": "1.10.8",
   "description": "Shared Frontend Package",
   "exports": {
     "./components": "./src/components/index.tsx",
diff --git a/frontend/packages/shared/src/components/FileUpload/FileUpload.scss b/frontend/packages/shared/src/components/FileUpload/FileUpload.scss
index 9cf928bd0..0c5e263ef 100644
--- a/frontend/packages/shared/src/components/FileUpload/FileUpload.scss
+++ b/frontend/packages/shared/src/components/FileUpload/FileUpload.scss
@@ -2,24 +2,30 @@
 @use '../../styles/abstracts/colors';
 @use '../../styles/abstracts/maps';
 
-.custom-fileupload input {
-  width: fit-content;
-  border: 1px dashed colors.$color-secondary;
-  font-size: 120%;
-  display: none;
-}
+.custom-fileupload {
+  input {
+    display: none;
+  }
 
-.custom-fileupload.file-upload-error input {
-  border: 1px dashed colors.$color-red-500;
-}
+  &.file-upload-error {
+    .file-dropzone {
+      border-top: 1px dashed colors.$color-red-500;
+      border-right: 1px dashed colors.$color-red-500;
+      border-bottom: 1px dashed colors.$color-red-500;
+      p {
+        color: colors.$color-red-500;
+      }
+    }
+  }
 
-.custom-fileupload.file-upload-error input::file-selector-button {
-  background: colors.$color-red-500;
-}
-
-.custom-fileupload input::file-selector-button {
-  background: colors.$color-secondary;
-  border: 1px solid colors.$color-primary;
-  color: colors.$color-primary;
-  padding: 10px;
-}
+  .file-dropzone {
+    align-content: center;
+    height: 100%;
+    border-top: 1px dashed colors.$color-secondary;
+    border-right: 1px dashed colors.$color-secondary;
+    border-bottom: 1px dashed colors.$color-secondary;
+    padding-left: 1vw;
+    padding-right: 10vw;
+    cursor: copy;
+  }
+}
\ No newline at end of file
diff --git a/frontend/packages/shared/src/components/FileUpload/FileUpload.tsx b/frontend/packages/shared/src/components/FileUpload/FileUpload.tsx
index 51069b115..488954553 100644
--- a/frontend/packages/shared/src/components/FileUpload/FileUpload.tsx
+++ b/frontend/packages/shared/src/components/FileUpload/FileUpload.tsx
@@ -1,33 +1,38 @@
 import FileUploadIcon from '@mui/icons-material/FileUpload';
 import { Button } from '@mui/material';
-import { ChangeEvent, FC } from 'react';
+import { ChangeEvent, DragEvent, FC } from 'react';
 import './FileUpload.scss';
 import { Color, Variant } from '../../enums';
+import { Text } from '../../components';
+import { useWindowProperties } from 'hooks';
 
 type FileUploadProps = {
   accept?: string;
   error?: boolean;
   onChange: (files: FileList) => void;
-  labelText: string;
+  buttonText: string;
+  dropZoneText: string;
 };
 
 export const FileUpload: FC<FileUploadProps> = ({
   accept,
   onChange,
   error,
-  labelText,
+  buttonText,
+  dropZoneText,
 }) => {
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (event.target.files) {
       onChange(event.target.files);
     }
   };
+  const { isPhone } = useWindowProperties();
 
   return (
     <div
-      className={
-        error ? 'custom-fileupload file-upload-error' : 'custom-fileupload'
-      }
+      className={`columns custom-fileupload ${
+        error ? 'file-upload-error' : ''
+      }`}
     >
       <Button
         component="label"
@@ -35,7 +40,7 @@ export const FileUpload: FC<FileUploadProps> = ({
         color={error ? Color.Error : Color.Secondary}
         startIcon={<FileUploadIcon />}
       >
-        {labelText}
+        {buttonText}
         <input
           id="custom-fileupload"
           accept={accept}
@@ -43,6 +48,20 @@ export const FileUpload: FC<FileUploadProps> = ({
           onChange={handleChange}
         />
       </Button>
+      {!isPhone && (
+        <div
+          className="grow file-dropzone"
+          onDragOver={(e: DragEvent<HTMLDivElement>) => {
+            e.preventDefault();
+          }}
+          onDrop={(e: DragEvent<HTMLDivElement>) => {
+            e.preventDefault();
+            onChange(e.dataTransfer.files);
+          }}
+        >
+          <Text>{dropZoneText}</Text>
+        </div>
+      )}
     </div>
   );
 };