updated uploader previw styles and css version fix (#88)

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

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 <[email protected]>",

react/css/src/digitv2/components/uploaderV2.scss

@@ -82,19 +82,36 @@
   .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 {
     outline: none !important;
   }
 
   .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;
+      }
     }
   }
 

react/example/public/index.html

@@ -9,7 +9,7 @@
     rel='stylesheet' type='text/css'>
     <link
     rel="stylesheet"
-    href="https://unpkg.com/@egovernments/[email protected].6/dist/index.css"
+    href="https://unpkg.com/@egovernments/[email protected].9/dist/index.css"
   />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#00bcd1" />

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",

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",

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",

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",

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

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",

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={() => {

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);
                           }}

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: [],