feat(AttachedFile): new component

packages/react/package.json

@@ -31,6 +31,7 @@
   "dependencies": {
     "@mui/base": "5.0.0-beta.60",
     "@tanstack/react-table": "^8.10.7",
+    "clsx": "^2.1.1",
     "date-fns": "^4.0.0",
     "feather-icons": "^4.29.0",
     "prop-types": "^15.8.1",

packages/react/src/components/attached-file/attached-file-classes.ts

@@ -0,0 +1,20 @@
+import { generateComponentClasses } from '../../utils/generate-component-classes';
+
+const COMPONENT_NAME = 'AttachedFile';
+
+export interface AttachedFileClasses {
+    root: string;
+    icon: string;
+    status: string;
+}
+
+export type AttachedFileClassKeys = keyof AttachedFileClasses;
+
+export const attachedFileClasses: AttachedFileClasses = generateComponentClasses(
+    COMPONENT_NAME,
+    [
+        'root',
+        'icon',
+        'status',
+    ],
+);

packages/react/src/components/attached-file/attached-file.test.tsx

@@ -0,0 +1,54 @@
+import { renderWithProviders } from '../../test-utils/renderer';
+import { AttachedFile } from './attached-file';
+
+describe('AttachedFile', () => {
+    test('Matches Default Snapshot', () => {
+        const tree = renderWithProviders(<AttachedFile
+            filename='File.txt'
+            status='default'
+            filesize={100000}
+        />);
+
+        expect(tree).toMatchSnapshot();
+    });
+
+    test('Matches Uploading Snapshot', () => {
+        const tree = renderWithProviders(<AttachedFile
+            filename='File.txt'
+            status='uploading'
+            filesize={100000}
+        />);
+
+        expect(tree).toMatchSnapshot();
+    });
+
+    test('Matches Success Snapshot', () => {
+        const tree = renderWithProviders(<AttachedFile
+            filename='File.txt'
+            status='success'
+            filesize={100000}
+        />);
+
+        expect(tree).toMatchSnapshot();
+    });
+
+    test('Matches Cancelled Snapshot', () => {
+        const tree = renderWithProviders(<AttachedFile
+            filename='File.txt'
+            status='cancelled'
+            filesize={100000}
+        />);
+
+        expect(tree).toMatchSnapshot();
+    });
+
+    test('Matches Error Snapshot', () => {
+        const tree = renderWithProviders(<AttachedFile
+            filename='File.txt'
+            status='error'
+            filesize={100000}
+        />);
+
+        expect(tree).toMatchSnapshot();
+    });
+});