From 6318a3e8081ff3903e556361e4f0350922895691 Mon Sep 17 00:00:00 2001
From: Swathi-eGov <137176788+Swathi-eGov@users.noreply.github.com>
Date: Tue, 25 Jun 2024 14:19:26 +0530
Subject: [PATCH] updated uploader previw styles and css version fix (#88)

---
 react/css/CHANGELOG.md                        |  4 ++
 react/css/package.json                        |  2 +-
 .../src/digitv2/components/uploaderV2.scss    | 59 +++++++++++++++----
 react/example/public/index.html               |  2 +-
 react/modules/Project/package.json            |  2 +-
 react/modules/core/package.json               |  2 +-
 react/modules/sample/package.json             |  2 +-
 react/package.json                            |  4 +-
 react/ui-components/CHANGELOG.md              |  4 ++
 react/ui-components/package.json              |  4 +-
 react/ui-components/src/atoms/UploadImage.js  | 14 +++--
 react/ui-components/src/atoms/Uploader.js     |  6 +-
 .../src/atoms/stories/Uploader.stories.js     | 10 ++++
 13 files changed, 86 insertions(+), 29 deletions(-)

diff --git a/react/css/CHANGELOG.md b/react/css/CHANGELOG.md
index 78203b2e75..89786a29c1 100644
--- a/react/css/CHANGELOG.md
+++ b/react/css/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## [0.0.2-beta.9] - 2024-06-25
+### Added
+- Updated Uploader preview styles
+
 ## [0.0.2-beta.6] - 2024-06-24
 ### Added
 - Added ViewMore button for timeline molecule
diff --git a/react/css/package.json b/react/css/package.json
index 79c36cd3f7..264dd3c739 100644
--- a/react/css/package.json
+++ b/react/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-components-css",
-  "version": "0.0.2-beta.8",
+  "version": "0.0.2-beta.9",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <jagan.kumar@egov.org.in>",
diff --git a/react/css/src/digitv2/components/uploaderV2.scss b/react/css/src/digitv2/components/uploaderV2.scss
index 7943d35471..164aa63227 100644
--- a/react/css/src/digitv2/components/uploaderV2.scss
+++ b/react/css/src/digitv2/components/uploaderV2.scss
@@ -82,6 +82,22 @@
   .digit-uploader-content {
     @apply flex w-full;
     gap: theme(digitv2.spacers.spacer3);
+
+    @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+      max-width: 27.5rem;
+      min-width: 21rem;
+    }
+
+    @media (max-width: 30rem) {
+      max-width: 20.563rem;
+      min-width: 18rem;
+    }
+
+    @media (min-width: 48rem) {
+      max-width: 37.5rem;
+      min-width: 20.75rem;
+    }
+
   }
 
   label {
@@ -89,12 +105,13 @@
   }
 
   .digit-uploader-content-uploadpopup {
-    @apply flex flex-col w-full items-center justify-center max-w-full border-dashed;
+    @apply flex flex-col w-full items-center justify-center max-w-full;
     gap: theme(digitv2.spacers.spacer4);
     border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
     background: theme(digitv2.lightTheme.paper-secondary);
     padding: theme(digitv2.spacers.spacer4);
     height: 9rem;
+    border-style: dashed;
 
     @media (min-width: 30.063rem) and (max-width: 47.938rem) {
       min-width: 18.75rem;
@@ -125,7 +142,7 @@
     }
 
     &.error {
-      @apply border-dashed;
+      border-style: dashed !important;
       border: 0.094rem solid theme(digitv2.lightTheme.alert-error);
     }
   }
@@ -216,7 +233,6 @@
         }
       }
 
-
       .digit-docupload-icon{
         border: 0.063rem solid theme(digitv2.lightTheme.generic-divider);
 
@@ -247,6 +263,18 @@
           border: 0.063rem solid theme(digitv2.lightTheme.alert-error);
         }
       }
+
+      &.single.imageFile{
+        width: 100%;
+
+        img{
+          width: 100% !important;
+        }
+
+        .overlay{
+          width: 100% !important;
+        }
+      }
     }
 
     .preview-container.uploadImage.singleUpload {
@@ -260,16 +288,21 @@
       }
     }
 
-    @media (min-width: 30.063rem) and (max-width: 47.938rem) {
-      min-width: 20.75rem;
-    }
-
-    @media (max-width: 30rem) {
-      min-width: 18rem;
-    }
-
-    @media (min-width: 48rem) {
-      min-width: 20.75rem;
+    &:not(.uploadImage){
+      @media (min-width: 30.063rem) and (max-width: 47.938rem) {
+        max-width: 27.5rem;
+        min-width: 21rem;
+      }
+  
+      @media (max-width: 30rem) {
+        max-width: 20.563rem;
+        min-width: 18rem;
+      }
+  
+      @media (min-width: 48rem) {
+        max-width: 37.5rem;
+        min-width: 20.75rem;
+      }
     }
   }
 
diff --git a/react/example/public/index.html b/react/example/public/index.html
index da47e62e63..ce2bd49928 100644
--- a/react/example/public/index.html
+++ b/react/example/public/index.html
@@ -9,7 +9,7 @@
     rel='stylesheet' type='text/css'>
     <link
     rel="stylesheet"
-    href="https://unpkg.com/@egovernments/digit-ui-components-css@0.0.2-beta.6/dist/index.css"
+    href="https://unpkg.com/@egovernments/digit-ui-components-css@0.0.2-beta.9/dist/index.css"
   />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#00bcd1" />
diff --git a/react/modules/Project/package.json b/react/modules/Project/package.json
index cb7ba55d85..1f6e4b177a 100644
--- a/react/modules/Project/package.json
+++ b/react/modules/Project/package.json
@@ -19,7 +19,7 @@
     },
     "dependencies": {
         "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
-        "@egovernments/digit-ui-components": "0.0.2-beta.8",
+        "@egovernments/digit-ui-components": "0.0.2-beta.9",
         "lodash": "^4.17.21",
         "react": "17.0.2",
         "react-date-range": "^1.4.0",
diff --git a/react/modules/core/package.json b/react/modules/core/package.json
index 4533ddcb3e..ebb5a32677 100644
--- a/react/modules/core/package.json
+++ b/react/modules/core/package.json
@@ -14,7 +14,7 @@
     "prepublish": "yarn build"
   },
   "dependencies": {
-    "@egovernments/digit-ui-components": "0.0.2-beta.8",
+    "@egovernments/digit-ui-components": "0.0.2-beta.9",
     "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
     "react": "17.0.2",
     "react-dom": "17.0.2",
diff --git a/react/modules/sample/package.json b/react/modules/sample/package.json
index c838b819c1..abebaeacb9 100644
--- a/react/modules/sample/package.json
+++ b/react/modules/sample/package.json
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@egovernments/digit-ui-react-components": "1.8.1-beta.4",
-    "@egovernments/digit-ui-components": "0.0.2-beta.8",
+    "@egovernments/digit-ui-components": "0.0.2-beta.9",
     "react": "17.0.2",
     "react-date-range": "^1.4.0",
     "react-dom": "17.0.2",
diff --git a/react/package.json b/react/package.json
index 7ba9b7d86c..ad9118c699 100644
--- a/react/package.json
+++ b/react/package.json
@@ -72,13 +72,13 @@
     "@babel/plugin-syntax-jsx": "^7.24.1",
     "@babel/preset-react": "^7.24.1",
     "@egovernments/digit-ui-libraries": "1.8.2-beta.1",
-    "@egovernments/digit-ui-components-css":"0.0.2-beta.8",
+    "@egovernments/digit-ui-components-css":"0.0.2-beta.9",
     "@egovernments/digit-ui-module-core": "1.8.1-beta.6",
     "@egovernments/digit-ui-module-project": "0.3.4",
     "@egovernments/digit-ui-module-sample": "0.0.1",
     "@egovernments/digit-ui-react-components": "1.7.10",
     "@egovernments/digit-ui-svg-components": "1.0.4",
-    "@egovernments/digit-ui-components": "0.0.2-beta.8",
+    "@egovernments/digit-ui-components": "0.0.2-beta.9",
     "babel-loader": "8.1.0",
     "clean-webpack-plugin": "4.0.0",
     "css-loader": "5.2.6",
diff --git a/react/ui-components/CHANGELOG.md b/react/ui-components/CHANGELOG.md
index 510f968a6d..cfeb78cbe7 100644
--- a/react/ui-components/CHANGELOG.md
+++ b/react/ui-components/CHANGELOG.md
@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.0.2-beta.9] - 2024-06-25
+### New Changes
+- Updated Uploader preview 
+
 ## [0.0.2-beta.8] - 2024-06-24
 ### New Changes
 - Added Title prop for Button
diff --git a/react/ui-components/package.json b/react/ui-components/package.json
index 335a5e0ca3..94e798c5e6 100644
--- a/react/ui-components/package.json
+++ b/react/ui-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-components",
-  "version": "0.0.2-beta.8",
+  "version": "0.0.2-beta.9",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.modern.js",
@@ -51,7 +51,7 @@
     "dist"
   ],
   "dependencies": {
-    "@egovernments/digit-ui-components-css": "0.0.2-beta.6",
+    "@egovernments/digit-ui-components-css": "0.0.2-beta.9",
     "@egovernments/digit-ui-libraries": "1.8.1-beta.1",
     "@egovernments/digit-ui-svg-components": "1.0.4",
     "@googlemaps/js-api-loader": "1.13.10",
diff --git a/react/ui-components/src/atoms/UploadImage.js b/react/ui-components/src/atoms/UploadImage.js
index 24e0bd3661..d3e78f5860 100644
--- a/react/ui-components/src/atoms/UploadImage.js
+++ b/react/ui-components/src/atoms/UploadImage.js
@@ -188,14 +188,20 @@ const UploadImage = ({
           <div className="upload-image-label">{"Click to add photo"}</div>
         </div>
       )}
-      <div className="digit-img-container">
+      <div
+        className={`digit-img-container ${"uploadImage"} ${
+          !multiple ? "singleUpload" : ""
+        }`}
+      >
         {previews.map((preview, index) => {
           return (
             <Fragment key={`preview-${index}`}>
               <div
-                className={`preview-container uploadImage ${!multiple ? "singleUpload" : ""} ${
-                  uploadedFilesCount > 1 ? " multiple" : ""
-                } ${preview?.error ? "error" : ""}`}
+                className={`preview-container uploadImage ${
+                  !multiple ? "singleUpload" : ""
+                } ${
+                  uploadedFilesCount > 1 ? " multiple" : "single"
+                } ${"imageFile"} ${preview?.error ? "error" : ""}`}
               >
                 <div
                   onClick={() => {
diff --git a/react/ui-components/src/atoms/Uploader.js b/react/ui-components/src/atoms/Uploader.js
index c21cdc8c76..3c0d105f41 100644
--- a/react/ui-components/src/atoms/Uploader.js
+++ b/react/ui-components/src/atoms/Uploader.js
@@ -423,8 +423,8 @@ const Uploader = (props) => {
                     <Fragment key={index}>
                       <div
                         className={`preview-container ${
-                          uploadedFilesCount > 1 ? " multiple" : ""
-                        } ${isError ? "error" : ""}`}
+                          uploadedFilesCount > 1 ? " multiple" : "single"
+                        } ${file?.type.startsWith("image/") ? "imageFile" : ""} ${isError ? "error" : ""}`}
                       >
                         <div
                           onClick={() => {
@@ -441,7 +441,7 @@ const Uploader = (props) => {
                           )}
                         </div>
                         <div
-                          className={`overlay ${isError ? "error" : ""}`}
+                          className={`overlay ${isError ? "error" : ""} ${props?.multiple ? "multiple" : "single"}`}
                           onClick={() => {
                             handleFileClick(index, file);
                           }}
diff --git a/react/ui-components/src/atoms/stories/Uploader.stories.js b/react/ui-components/src/atoms/stories/Uploader.stories.js
index c3e47eabad..2d9e28e3f2 100644
--- a/react/ui-components/src/atoms/stories/Uploader.stories.js
+++ b/react/ui-components/src/atoms/stories/Uploader.stories.js
@@ -209,6 +209,16 @@ UploadPopupWithValidationsWithErrorCard.args = {
   showReUploadButton: true,
 };
 
+export const UploadPopupWithError = Template.bind({});
+UploadPopupWithError.args = {
+  uploadedFiles: [],
+  variant: "uploadPopup",
+  showDownloadButton: true,
+  showReUploadButton: true,
+  multiple: false,
+  iserror:"Component level error!"
+};
+
 export const UploadImage = Template.bind({});
 UploadImage.args = {
   uploadedFiles: [],