diff --git a/src/lib/components/FileUpload/FileUpload.tsx b/src/lib/components/FileUpload/FileUpload.tsx index 3f75e50..6cdfaf5 100644 --- a/src/lib/components/FileUpload/FileUpload.tsx +++ b/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 = ({ files.map((file) => (
{file.name} - + {file.percentUploaded !== undefined ? ( + + ) : ( + + )}
))} diff --git a/src/lib/elements/ProgressIndicator/ProgressIndicator.scss b/src/lib/elements/ProgressIndicator/ProgressIndicator.scss new file mode 100644 index 0000000..a338a4c --- /dev/null +++ b/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; + } +} diff --git a/src/lib/elements/ProgressIndicator/ProgressIndicator.test.tsx b/src/lib/elements/ProgressIndicator/ProgressIndicator.test.tsx new file mode 100644 index 0000000..75d931d --- /dev/null +++ b/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(); + expect(screen.getByText("69%")).toBeInTheDocument(); +}); diff --git a/src/lib/elements/ProgressIndicator/ProgressIndicator.tsx b/src/lib/elements/ProgressIndicator/ProgressIndicator.tsx new file mode 100644 index 0000000..02f14d5 --- /dev/null +++ b/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 = ({ + percentComplete, +}: ProgressIndicatorProps) => { + return ( + + {percentComplete}% + + ); +}; diff --git a/src/lib/elements/ProgressIndicator/index.ts b/src/lib/elements/ProgressIndicator/index.ts new file mode 100644 index 0000000..b01df3c --- /dev/null +++ b/src/lib/elements/ProgressIndicator/index.ts @@ -0,0 +1 @@ +export * from "./ProgressIndicator"; diff --git a/src/lib/elements/index.ts b/src/lib/elements/index.ts index 1775515..019132f 100644 --- a/src/lib/elements/index.ts +++ b/src/lib/elements/index.ts @@ -1,2 +1,4 @@ export * from "./Meter"; export * from "./ExternalLink"; + +export * from "./ProgressIndicator"; \ No newline at end of file