SUR-355 - Dropzone - UAT improvement

.github/workflows/storybook-deployment.yml

@@ -1,39 +1,39 @@
 # Workflow name
 name: Build and Publish Storybook to GitHub Pages
- 
+
 on:
-  # Event for the workflow to run on
-  push:
-    branches:
-      - master
- 
+    # Event for the workflow to run on
+    push:
+        branches:
+            - master
+
 permissions:
-  contents: read
-  pages: write
-  id-token: write
- 
+    contents: read
+    pages: write
+    id-token: write
+
 # List of jobs
 jobs:
-  deploy:
-    environment:
-        name: github-pages
-        url: ${{ steps.build-publish.outputs.page_url }}
-    runs-on: ubuntu-latest
-    # Job steps
-    steps:
-      # Manual Checkout
-      - uses: actions/checkout@v4
- 
-      # Set up Node
-      - uses: actions/setup-node@v4
-        with:
-          node-version: '20.x'
- 
-      #👇 Add Storybook build and deploy to GitHub Pages as a step in the workflow
-      - id: build-publish
-        uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3
-        with:
-          install_command: npm install # default: npm ci
-          build_command: npm run build && npm run build-storybook # default: npm run build-storybook
-          path: storybook-static # default: dist/storybook
-          checkout: false # default: true
+    deploy:
+        environment:
+            name: github-pages
+            url: ${{ steps.build-publish.outputs.page_url }}
+        runs-on: ubuntu-latest
+        # Job steps
+        steps:
+            # Manual Checkout
+            - uses: actions/checkout@v4
+
+            # Set up Node
+            - uses: actions/setup-node@v4
+              with:
+                  node-version: '20.x'
+
+            #👇 Add Storybook build and deploy to GitHub Pages as a step in the workflow
+            - id: build-publish
+              uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3
+              with:
+                  install_command: npm install # default: npm ci
+                  build_command: npm run build && npm run build-storybook # default: npm run build-storybook
+                  path: storybook-static # default: dist/storybook
+                  checkout: false # default: true

src/components/dropzone/dropzone.stories.tsx

@@ -15,6 +15,11 @@ const meta: Meta<typeof Dropzone> = {
 			control: { type: 'select' },
 		},
 	},
+	decorators: ( Story ) => (
+		<div className="box-border [&_*]:box-border w-96">
+			<Story />
+		</div>
+	),
 };
 
 export default meta;

src/components/dropzone/dropzone.tsx

@@ -1,7 +1,7 @@
-import { useState, createContext, useContext, useRef } from 'react';
+import { useState, createContext, useContext, useRef, useMemo } from 'react';
 import { CloudUpload, File, ImageOff, Trash } from 'lucide-react';
 import { cn, formatFileSize } from '@/utilities/functions';
-import Loader from '../loader';
+import Loader from '@/components/loader';
 import { nanoid } from 'nanoid';
 
 export interface DropzoneProps {
@@ -42,6 +42,14 @@ export const FilePreview = () => {
 	const { file, removeFile, isLoading, error, errorText } =
 		useFileUploadContext()!;
 
+	const renderFileIcon = useMemo( () => {
+		return (
+			<span className="inline-flex self-start p-0.5">
+				<File className="size-5 text-icon-primary" />
+			</span>
+		);
+	}, [ file ] );
+
 	if ( ! file ) {
 		return null;
 	}
@@ -53,8 +61,8 @@ export const FilePreview = () => {
 				error && 'border-alert-border-danger bg-alert-background-danger'
 			) }
 		>
-			<div className="flex items-center gap-3">
-				{ isLoading && <File className="size-6" /> }
+			<div className="flex items-center gap-3 w-full">
+				{ isLoading && renderFileIcon }
 				{ ! isLoading &&
 					( file.type.startsWith( 'image/' ) ? (
 						<div
@@ -74,13 +82,11 @@ export const FilePreview = () => {
 							) }
 						</div>
 					) : (
-						<span>
-							<File className="size-6 text-icon-primary" />
-						</span>
+						renderFileIcon
 					) ) }
 
-				<div className="text-left flex flex-col">
-					<span className="text-sm font-medium text-field-label">
+				<div className="text-left flex flex-col gap-1 w-[calc(100%_-_5.5rem)]">
+					<span className="text-sm font-medium text-field-label truncate">
 						{ isLoading ? 'Loading...' : file.name }
 					</span>
 					{ ! isLoading && (
@@ -94,17 +100,19 @@ export const FilePreview = () => {
 						</span>
 					) }
 				</div>
+				{ isLoading ? (
+					<span className="inline-flex ml-auto p-0.5">
+						<Loader className="inline-flex" />
+					</span>
+				) : (
+					<button
+						onClick={ removeFile }
+						className="inline-flex cursor-pointer bg-transparent border-0 p-1 my-0 ml-auto mr-0 ring-0 focus:outline-none self-start"
+					>
+						<Trash className="size-4 text-support-error" />
+					</button>
+				) }
 			</div>
-			{ isLoading ? (
-				<Loader />
-			) : (
-				<button
-					onClick={ removeFile }
-					className="mt-1.5 cursor-pointer bg-transparent border-0 p-0 m-0 ring-0 focus:outline-none"
-				>
-					<Trash className="size-4 text-support-error" />
-				</button>
-			) }
 		</div>
 	);
 };
@@ -210,7 +218,7 @@ export const Dropzone = ( {
 				<label htmlFor={ uploadInputID.current }>
 					<div
 						className={ cn(
-							'min-w-80 cursor-pointer mx-auto border-dotted border-2 rounded-md text-center hover:border-field-dropzone-color hover:bg-field-dropzone-background-hover focus:outline-none focus:ring focus:ring-toggle-on focus:ring-offset-2 transition-[border,box-shadow] duration-300 ease-in-out',
+							'min-w-80 cursor-pointer mx-auto border-dashed border rounded-md text-center hover:border-field-dropzone-color hover:bg-field-dropzone-background-hover focus:outline-none focus:ring focus:ring-toggle-on focus:ring-offset-2 transition duration-200 ease-in-out',
 							isDragging
 								? 'border-field-dropzone-color bg-field-dropzone-background-hover'
 								: 'border-field-border',

src/components/loader/loader.tsx

@@ -28,17 +28,17 @@ export const Loader = ( {
 	}?.[ variant ];
 
 	const sizeClassNames = {
-		sm: '[&>svg]:h-4 [&>svg]:w-4',
-		md: '[&>svg]:h-5 [&>svg]:w-5',
-		lg: '[&>svg]:h-6 [&>svg]:w-6',
-		xl: '[&>svg]:h-8 [&>svg]:w-8',
+		sm: '[&>svg]:size-4',
+		md: '[&>svg]:size-5',
+		lg: '[&>svg]:size-6',
+		xl: '[&>svg]:size-8',
 	}?.[ size ];
 
 	return (
 		<span
 			className={ cn( 'flex', sizeClassNames, variantClassNames, className ) }
 		>
-			{ icon ? icon : <LoaderCircle className="animate-spin" /> }
+			{ icon ? icon : <LoaderCircle className="animate-spin shrink-0" /> }
 		</span>
 	);
 };