feat: add ProgressIndicator component MAASENG-2571 (#103)

src/lib/components/FileUpload/FileUpload.tsx

@@ -3,12 +3,16 @@ import { ReactNode, useCallback, useId, useState } from "react";
 import { Button, Icon, Label } from "@canonical/react-components";
 import classNames from "classnames";
 import { useDropzone, DropzoneOptions, FileRejection } from "react-dropzone";
+
 import "./FileUpload.scss";
+import { ProgressIndicator } from "@/lib/elements";
+
+type FileUploadFile = File & { percentUploaded?: number };
 
 export interface FileUploadProps {
   accept?: DropzoneOptions["accept"];
   error?: ReactNode;
-  files: File[];
+  files: FileUploadFile[];
   help?: string;
   label?: string;
   maxFiles?: number;
@@ -99,14 +103,18 @@ export const FileUpload: React.FC<FileUploadProps> = ({
             files.map((file) => (
               <div className="file-upload__file" key={file.name}>
                 {file.name}
-                <Button
-                  appearance="base"
-                  className="file-upload__file-remove-button"
-                  onClick={() => removeFile(file)}
-                  type="button"
-                >
-                  <Icon name="close">Remove file</Icon>
-                </Button>
+                {file.percentUploaded !== undefined ? (
+                  <ProgressIndicator percentComplete={file.percentUploaded} />
+                ) : (
+                  <Button
+                    appearance="base"
+                    className="file-upload__file-remove-button"
+                    onClick={() => removeFile(file)}
+                    type="button"
+                  >
+                    <Icon name="close">Remove file</Icon>
+                  </Button>
+                )}
               </div>
             ))}
         </div>

src/lib/elements/ProgressIndicator/ProgressIndicator.scss

@@ -0,0 +1,11 @@
+@import "vanilla-framework";
+@include vf-base;
+
+.progress-indicator {
+  margin: 0;
+  padding: 0 $spv--small 0 0;
+
+  .progress-indicator__spinner {
+    padding-left: $spv--x-small;
+  }
+}

src/lib/elements/ProgressIndicator/ProgressIndicator.test.tsx

@@ -0,0 +1,8 @@
+import { render, screen } from "@testing-library/react";
+
+import { ProgressIndicator } from "./ProgressIndicator";
+
+it("renders without crashing", () => {
+  render(<ProgressIndicator percentComplete={69} />);
+  expect(screen.getByText("69%")).toBeInTheDocument();
+});

src/lib/elements/ProgressIndicator/ProgressIndicator.tsx

@@ -0,0 +1,16 @@
+import { Spinner } from "@canonical/react-components";
+import "./ProgressIndicator.scss";
+
+export interface ProgressIndicatorProps {
+  percentComplete: number;
+}
+
+export const ProgressIndicator: React.FC<ProgressIndicatorProps> = ({
+  percentComplete,
+}: ProgressIndicatorProps) => {
+  return (
+    <small className="progress-indicator">
+      {percentComplete}% <Spinner className="progress-indicator__spinner" />
+    </small>
+  );
+};

src/lib/elements/ProgressIndicator/index.ts

@@ -0,0 +1 @@
+export * from "./ProgressIndicator";

src/lib/elements/index.ts

@@ -1,2 +1,4 @@
 export * from "./Meter";
 export * from "./ExternalLink";
+
+export * from "./ProgressIndicator";