✨ Legger til fileInput

navikt · Sep 27, 2023 · 428c293 · 428c293
2 parents b228818 + f5d15df
commit 428c293
Show file tree

Hide file tree

Showing 13 changed files with 1,838 additions and 19 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/aap-felles-css/src/fileInput.css b/packages/aap-felles-css/src/fileInput.css
@@ -0,0 +1,98 @@
+.visuallyHidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap; /* added line */
+  border: 0;
+}
+
+.dropzone {
+  padding: 30px;
+  border: 2px dashed var(--a-surface-action);
+  background-color: var(--a-surface-action-subtle);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.dragover {
+  opacity: 0.5;
+}
+.fileCard {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+.fileCard.error {
+  border: 2px solid var(--a-surface-danger-hover);
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+}
+.fileCardLeftContent {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  column-gap: 10px;
+}
+.deleteAttachment {
+  border: none;
+  background-color: transparent;
+  outline: none;
+  cursor: pointer;
+  color: var(--a-icon-action);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.deleteAttachment:hover {
+  border: 2px solid var(--a-icon-action);
+}
+.deleteAttachment:focus {
+  border: 2px solid var(--a-icon-action);
+}
+.fileSuccess {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+  background-color: var(--a-surface-success-subtle);
+}
+.fileError {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 3rem;
+  height: 3rem;
+  font-size: 1.5rem;
+  background-color: var(--a-surface-danger-subtle);
+}
+.fileInput {
+  padding: 2rem;
+  background-color: var(--a-surface-subtle);
+  display: flex;
+  flex-direction: column;
+  row-gap: 1rem;
+}
+.fileInputButton:focus {
+  outline: none;
+  color: var(--a-text-on-action);
+  text-decoration: none;
+  background-color: var(--a-border-focus);
+  box-shadow: 0 0 0 2px var(--a-border-focus);
+}
+.fileInputText {
+  word-break: break-all;
+}
diff --git a/packages/aap-felles-css/src/index.css b/packages/aap-felles-css/src/index.css
@@ -1,2 +1,3 @@
 @charset "UTF-8";
 @import 'scanning-guide.css';
+@import 'fileInput.css';
diff --git a/packages/aap-felles-react/jest.config.js b/packages/aap-felles-react/jest.config.js
@@ -0,0 +1,8 @@
+module.exports = {
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  modulePathIgnorePatterns: ['cjs', 'esm'],
+  testEnvironment: 'jsdom',
+  setupFiles: ['<rootDir>/setUpJest.ts'],
+};
diff --git a/packages/aap-felles-react/package.json b/packages/aap-felles-react/package.json
@@ -21,16 +21,23 @@
   ],
   "scripts": {
     "clean": "rm -rf ./cjs ./esm",
-    "build": "npm run clean && tsc -p tsconfig.json && tsc -p tsconfig.esm.json"
+    "build": "npm run clean && tsc -p tsconfig.json && tsc -p tsconfig.esm.json",
+    "test": "jest"
   },
   "dependencies": {
     "@navikt/aksel-icons": "^5.4.1",
     "@navikt/ds-css": "^5.4.1",
     "@navikt/ds-react": "^5.4.1",
     "prop-types": "^15.8.1",
-    "react": "^18.2.0"
+    "react": "^18.2.0",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
-    "@types/react": "^18.0.26"
+    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/react": "^18.0.26",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-fetch-mock": "^3.0.3"
   }
 }
diff --git a/packages/aap-felles-react/setUpJest.ts b/packages/aap-felles-react/setUpJest.ts
@@ -0,0 +1 @@
+require('jest-fetch-mock').enableMocks();
diff --git a/packages/aap-felles-react/src/FileInput/FileInput.stories.tsx b/packages/aap-felles-react/src/FileInput/FileInput.stories.tsx
@@ -0,0 +1,25 @@
+import { Meta, StoryFn } from '@storybook/react';
+
+import { FileInput, FileInputProps, Vedlegg } from './FileInput';
+import React, { useState } from 'react';
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'FileInput',
+  component: FileInput,
+} as Meta;
+
+export const Primary: StoryFn<FileInputProps> = (args) => {
+  const [files, setFiles] = useState<Vedlegg[]>([]);
+  return (
+    <FileInput
+      {...args}
+      heading={'Annen dokumentasjon'}
+      ingress={'Du kan laste opp flere filer.'}
+      id={'filopplasting'}
+      uploadUrl={'/test'}
+      files={files}
+      setFiles={setFiles}
+    />
+  );
+};