@arbor-education/design-system.components 0.25.4 → 0.25.5

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.25.5
+
+### Patch Changes
+
+- [#204](https://github.com/arbor-education/design-system.components/pull/204) [`f60819c`](https://github.com/arbor-education/design-system.components/commit/f60819c0ede5eb7cbd10b5fc2ab29d8023b23c3c) Thanks [@angusmglfraser](https://github.com/angusmglfraser)! - MIS-70686 ✨ file upload component
+
+- [#225](https://github.com/arbor-education/design-system.components/pull/225) [`422167d`](https://github.com/arbor-education/design-system.components/commit/422167d8322f720a01c3c74e8a98f1a5189a0ed6) Thanks [@MarkFrancisArbor](https://github.com/MarkFrancisArbor)! - MIS-72151 display header value in the selectDropdown trigger
+
 ## 0.25.4
 
 ### Patch Changes

package/dist/components/fileUpload/FileUpload.d.ts

@@ -0,0 +1,21 @@
+import type { IconName } from '../icon/allowedIcons.js';
+import type { ReactNode } from 'react';
+type UploadedFile = {
+    fileName: string;
+    icon?: IconName;
+    fileType: string;
+    fileSize: string;
+    onDownload?: () => void;
+    onDelete: () => void;
+    progressPercentage?: number;
+    hasUploadFailed?: boolean;
+};
+export type FileUploadProps = {
+    className?: string;
+    uploadedFiles: UploadedFile[];
+    uploadFiles: (files: File[]) => void;
+    dropzoneContent?: ReactNode;
+};
+export declare const FileUpload: (props: FileUploadProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=FileUpload.d.ts.map

package/dist/components/fileUpload/FileUpload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../../src/components/fileUpload/FileUpload.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAG7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,KAAK,YAAY,GAAG;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,YAAY,EAAE,CAAC;IAC9B,WAAW,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACrC,eAAe,CAAC,EAAE,SAAS,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,4CAmHhD,CAAC"}

package/dist/components/fileUpload/FileUpload.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Button } from '../button/Button.js';
+import { Card } from '../card/Card.js';
+import { Icon } from '../icon/Icon.js';
+import { Separator } from '../separator/Separator.js';
+import Dropzone from 'react-dropzone';
+import { Progress } from '../progress/Progress.js';
+export const FileUpload = (props) => {
+    const { className, uploadedFiles, uploadFiles, dropzoneContent = (_jsxs("p", { children: ["Drag and drop, or", ' ', _jsx(Button, { variant: "text-link", children: "click to upload" })] })), } = props;
+    return (_jsxs("div", { className: classNames('ds-file-upload', className), children: [_jsx(Dropzone, { onDrop: (acceptedFiles) => {
+                    uploadFiles(acceptedFiles);
+                }, children: ({ getRootProps, getInputProps }) => (_jsx(Card, { children: _jsxs("div", { ...getRootProps(), className: "ds-file-upload__dropzone-input", children: [_jsx("input", { ...getInputProps() }), _jsxs("div", { className: "ds-file-upload__dropzone-content", children: [_jsx("span", { className: "ds-file-upload__icon-wrapper", children: _jsx(Icon, { name: "cloud-upload", size: 24, color: "var(--color-brand-600)" }) }), _jsx("div", { className: "ds-file-upload__dropzone-text-wrapper", children: dropzoneContent })] })] }) })) }), uploadedFiles.length > 0 && (_jsx(Card, { className: "ds-file-upload__file-list", children: uploadedFiles.map((file, index) => {
+                    const { fileName, icon = 'file', fileSize, fileType, onDelete, onDownload, hasUploadFailed, progressPercentage, } = file;
+                    return (_jsxs("div", { className: "ds-file-upload__file-outer", children: [_jsxs("span", { className: "ds-file-upload__file", children: [_jsx("span", { className: "ds-file-upload__icon-wrapper", children: _jsx(Icon, { size: 24, name: icon, color: "var(--color-brand-600)" }) }), _jsxs("span", { className: "ds-file-upload__file-details", children: [_jsx("span", { className: "ds-file-upload__file-name", children: fileName }), hasUploadFailed
+                                                ? (_jsxs("span", { className: "ds-file-upload__upload-failed", children: [_jsx(Icon, { name: "circle-alert" }), ' ', "Upload failed"] }))
+                                                : _jsx("span", { className: "ds-file-upload__file-meta", children: `${fileType}, ${fileSize}` })] }), onDownload && (_jsx(Button, { variant: "secondary", iconLeftName: "download", onClick: onDownload })), onDelete && (_jsx(Button, { variant: "secondary", iconLeftName: "trash", onClick: onDelete }))] }), typeof progressPercentage === 'number' && progressPercentage < 100
+                                && (_jsx(Progress, { value: progressPercentage, className: "ds-file-upload__progress-bar", indicatorClassName: classNames('ds-file-upload__progress-bar-indicator', {
+                                        'ds-file-upload__progress-bar-indicator--failed': hasUploadFailed,
+                                    }) })), index < uploadedFiles.length - 1 && _jsx(Separator, {})] }, fileName));
+                }) }))] }));
+};
+//# sourceMappingURL=FileUpload.js.map

package/dist/components/fileUpload/FileUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUpload.js","sourceRoot":"","sources":["../../../src/components/fileUpload/FileUpload.tsx"],"names":[],"mappings":"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"}

package/dist/components/fileUpload/FileUpload.stories.d.ts

@@ -0,0 +1,71 @@
+import type { StoryObj } from '@storybook/react-vite';
+import type { FileUploadProps } from './FileUpload.js';
+declare function FileUploadDocsPage(): import("react/jsx-runtime").JSX.Element;
+declare const meta: {
+    title: string;
+    component: (props: FileUploadProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+        docs: {
+            page: typeof FileUploadDocsPage;
+        };
+    };
+    argTypes: {
+        uploadedFiles: {
+            description: string;
+            control: false;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        uploadFiles: {
+            description: string;
+            control: false;
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+        dropzoneContent: {
+            description: string;
+            control: false;
+            table: {
+                type: {
+                    summary: string;
+                };
+                defaultValue: {
+                    summary: string;
+                };
+            };
+        };
+        className: {
+            description: string;
+            control: "text";
+            table: {
+                type: {
+                    summary: string;
+                };
+            };
+        };
+    };
+    args: {
+        uploadedFiles: never[];
+        uploadFiles: import("vitest").Mock<(...args: any[]) => any>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithUploadedFiles: Story;
+export declare const SingleFile: Story;
+export declare const WithoutDownloadButton: Story;
+export declare const UploadInProgress: Story;
+export declare const FailedUpload: Story;
+export declare const FailedDuringUpload: Story;
+export declare const CustomDropzoneContent: Story;
+export declare const SimulatedUploadLifecycle: Story;
+//# sourceMappingURL=FileUpload.stories.d.ts.map

package/dist/components/fileUpload/FileUpload.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUpload.stories.d.ts","sourceRoot":"","sources":["../../../src/components/fileUpload/FileUpload.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAc5D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAyGvD,iBAAS,kBAAkB,4CAmB1B;AAID,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAkDnC,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAC;AAIF,eAAO,MAAM,iBAAiB,EAAE,KAsD/B,CAAC;AAIF,eAAO,MAAM,UAAU,EAAE,KAgDxB,CAAC;AAIF,eAAO,MAAM,qBAAqB,EAAE,KA8DnC,CAAC;AAIF,eAAO,MAAM,gBAAgB,EAAE,KAmF9B,CAAC;AAIF,eAAO,MAAM,YAAY,EAAE,KAiE1B,CAAC;AAIF,eAAO,MAAM,kBAAkB,EAAE,KAuEhC,CAAC;AAIF,eAAO,MAAM,qBAAqB,EAAE,KAiDnC,CAAC;AA2FF,eAAO,MAAM,wBAAwB,EAAE,KAuGtC,CAAC"}