feat(Upload)

Add Upload component mvp.

Still missing some features:
- Drag and drop to upload file

packages/dnb-design-system-portal/src/docs/uilib/components/upload.md

@@ -0,0 +1,14 @@
+---
+title: 'Upload'
+description: 'The Upload widget should be used in scenarios where the customer has to upload files. Files can be uploaded by clicking button. You also have the opportunity to add descriptive texts below the title where you could put max file size, allowed fileformats etc.'
+status: 'new'
+showTabs: true
+hideTabs:
+  - title: Events
+---
+
+import UploadInfo from 'Docs/uilib/components/upload/info'
+import UploadDemos from 'Docs/uilib/components/upload/demos'
+
+<UploadInfo />
+<UploadDemos />

packages/dnb-design-system-portal/src/docs/uilib/components/upload/Examples.tsx

@@ -0,0 +1,172 @@
+/**
+ * UI lib Component Example
+ *
+ */
+
+import React from 'react'
+import ComponentBox from 'dnb-design-system-portal/src/shared/tags/ComponentBox'
+
+export const UploadBasic = () => (
+  <ComponentBox useRender data-visual-test="upload-basic">
+    {
+      /* jsx */ `
+const Component = () => {
+  const {files} = Upload.useUpload('upload-basic')
+
+  return (
+    <Upload
+      acceptedFileTypes={['jpg', 'png']}
+      id='upload-basic'
+    />
+  )
+}
+render(<Component />)
+  `
+    }
+  </ComponentBox>
+)
+
+export const UploadMultipleFiles = () => (
+  <ComponentBox useRender data-visual-test="upload-multiple-files">
+    {
+      /* jsx */ `
+const Component = () => {  
+  const {files, setFiles} = Upload.useUpload('upload-multiple-files')
+  return (
+    <Upload
+      acceptedFileTypes={['jpg', 'png']}
+      id='upload-multiple-files'
+      multipleFiles={true}
+    />
+  )
+}
+render(<Component />)
+  `
+    }
+  </ComponentBox>
+)
+export const UploadRemoveFile = () => (
+  <ComponentBox useRender data-visual-test="upload-remove-files">
+    {
+      /* jsx */ `
+const Component = () => {  
+  const {files, setFiles} = Upload.useUpload('upload-remove-files')
+  return (
+    <>
+    <Upload
+      acceptedFileTypes={['jpg', 'png']}
+      id='upload-remove-files'
+    />
+    <Button 
+      top='small' 
+      disabled={files.length < 1} 
+      onClick={() => setFiles([])}
+    >
+    Remove selected files
+    </Button>
+    </>
+  )
+}
+render(<Component />)
+  `
+    }
+  </ComponentBox>
+)
+
+export const UploadIsLoading = () => (
+  <ComponentBox useRender data-visual-test="upload-is-loading">
+    {
+      /* jsx */ `
+const Component = () => {  
+  const {files, setFiles} = Upload.useUpload('upload-is-loading')
+
+  return (
+    <>
+    <Upload
+      acceptedFileTypes={['jpg', 'png']}
+      id='upload-is-loading'
+    />
+    <Button top='small' disabled={files.length < 1} onClick={() => {
+      setFiles(files.map((file) => {return {...file, isLoading: true}}))
+    }}
+    >Files is loading toggle</Button>
+    </>
+  )
+}
+render(<Component />)
+  `
+    }
+  </ComponentBox>
+)
+
+export const UploadErrorMessage = () => (
+  <ComponentBox useRender data-visual-test="upload-error-message">
+    {
+      /* jsx */ `
+const Component = () => {  
+  const {files, setFiles} = Upload.useUpload('upload-error-message')
+  return (
+    <>
+    <Upload
+      acceptedFileTypes={['jpg', 'png']}
+      id='upload-error-message'
+    />
+    <Button top='small' disabled={files.length < 1} onClick={
+      () => {
+        setFiles(
+          files.map((file) => {
+            return {...file, errorMessage: 'custom error message'}
+          })
+          )
+
+    }}
+    >Add error message</Button>
+    </>
+  )
+}
+render(<Component />)
+  `
+    }
+  </ComponentBox>
+)
+
+export const UploadAcceptedFormats = () => (
+  <ComponentBox useRender data-visual-test="upload-accepted-formats">
+    {
+      /* jsx */ `
+const Component = () => {
+  const {files, setFiles} = Upload.useUpload('upload-accepted-formats')
+
+  return (
+    <Upload
+      acceptedFileTypes={['png', 'jpg', 'pdf']}
+      id='upload-accepted-formats'
+    />
+  )
+}
+render(<Component />)
+  `
+    }
+  </ComponentBox>
+)
+
+export const UploadCustomText = () => (
+  <ComponentBox data-visual-test="upload-custom-text">
+    {
+      /* jsx */ `
+<Upload 
+  acceptedFileTypes={['jpg', 'png']}
+  id='upload-custom-text'
+  title='custom title'
+  text='custom text'
+  formatsDescription='custom formatsDescription'
+  fileSizeDescription='custom fileSizeDescription'
+  fileSizeContent='custom fileSizeContent'
+  uploadButtonText='custom uploadButtonText'
+  uploadLoadingText='custom uploadLoadingText'
+  deleteButton='custom deleteButton'
+ />
+     `
+    }
+  </ComponentBox>
+)

packages/dnb-design-system-portal/src/docs/uilib/components/upload/demos.md

@@ -0,0 +1,52 @@
+---
+showTabs: true
+---
+
+import {UploadBasic} from 'Docs/uilib/components/upload/Examples'
+import {UploadRemoveFile} from 'Docs/uilib/components/upload/Examples'
+import {UploadMultipleFiles} from 'Docs/uilib/components/upload/Examples'
+import {UploadIsLoading} from 'Docs/uilib/components/upload/Examples'
+import {UploadErrorMessage} from 'Docs/uilib/components/upload/Examples'
+import {UploadAcceptedFormats} from 'Docs/uilib/components/upload/Examples'
+import {UploadCustomText} from 'Docs/uilib/components/upload/Examples'
+
+
+## Demos
+
+### Upload (default)
+
+<UploadBasic />
+
+### Upload.useUpload
+
+using the Upload.useUpload you can remove or add files displayed in the component
+
+<UploadRemoveFile />
+
+### Upload multiple files
+
+<UploadMultipleFiles />
+
+### Upload loading state
+
+When uploading the file you can set the loading state of the request using the Upload.useUpload hook and passing isLoading to the file that is being uploaded.
+
+<UploadIsLoading />
+
+### Upload error message
+
+The only checks we do currently is for the file size and the file type. These errors are handled by the HTML element ´input´ so they aren't selectable. If you want any other error messages you can use the Upload.useUpload the same way as with the loading state.
+
+<UploadErrorMessage />
+
+### Upload specific accepted file formats
+
+You can pass the file formats as a string array. This will restrict which files that can be selected.
+
+<UploadAcceptedFormats />
+
+### Upload custom text
+
+All the text can be custom
+
+<UploadCustomText />

packages/dnb-design-system-portal/src/docs/uilib/components/upload/info.md

@@ -0,0 +1,7 @@
+---
+showTabs: true
+---
+
+## Description
+
+The Upload should be used in scenarios where the user has to upload files

packages/dnb-design-system-portal/src/docs/uilib/components/upload/properties.md

@@ -0,0 +1,23 @@
+---
+showTabs: true
+---
+
+## Properties
+
+
+| Properties                                  | Description                                                                                                                       |
+| ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
+| [Space](/uilib/components/space/properties) | _(optional)_ Spacing properties like `top` or `bottom` are supported.                                                             |
+| `className`                                 | _(optional)_ Custom className for the component root.                                                                             |
+| `skeleton`                                  | _(optional)_ Skeleton should be applied when loading content Default: null.                                                       |
+| `acceptedFileTypes`                         | _(required)_ List of accepted file types.                                                                                         |
+| `fileMaxSize`                               | _(optional)_ fileMaxSize is max size of each file in MB                                                                           |
+| `multipleFiles`                             | _(optional)_ if set true, accepting multiple files is allowed                                                                     |
+| `title`                                     | _(optional)_ Custom text property. Replaces the default title                                                                     |
+| `text`                                      | _(optional)_ Custom text property. Replaces the default text                                                                      |
+| `formatsDescription`                        | _(optional)_ Custom text property. Replaces the default accepted format description                                               |
+| `fileSizeDescription`                       | _(optional)_ Custom text property. Replaces the default max file size description                                                 |
+| `fileSizeContent`                           | _(optional)_ Custom text property. Replaces the default file size content                                                         |
+| `uploadButtonText`                          | _(optional)_ Custom text property. Replaces the default upload button text                                                        |
+| `uploadLoadingText`                         | _(optional)_ Custom text property. Replaces the default loading text                                                              |
+| `deleteButton`                              | _(optional)_ Custom text property. Replaces the default delete button text                                                        |

packages/dnb-eufemia/src/components/Upload.js

@@ -0,0 +1,14 @@
+/**
+ * ATTENTION: This file is auto generated by using "prepareTemplates".
+ * Do not change the content!
+ *
+ */
+
+/**
+ * Library Index upload to autogenerate all the components and extensions
+ * Used by "prepareUploads"
+ */
+
+import Upload from './upload/Upload'
+export * from './upload/Upload'
+export default Upload

packages/dnb-eufemia/src/components/index.js

@@ -54,6 +54,7 @@ import Textarea from './textarea/Textarea'
 import Timeline from './timeline/Timeline'
 import ToggleButton from './toggle-button/ToggleButton'
 import Tooltip from './tooltip/Tooltip'
+import Upload from './upload/Upload'
 import VisuallyHidden from './visually-hidden/VisuallyHidden'
 
 // define / export all the available components
@@ -102,5 +103,6 @@ export {
   Timeline,
   ToggleButton,
   Tooltip,
+  Upload,
   VisuallyHidden,
 }

packages/dnb-eufemia/src/components/lib.js

@@ -56,6 +56,7 @@ import Textarea from './textarea/Textarea'
 import Timeline from './timeline/Timeline'
 import ToggleButton from './toggle-button/ToggleButton'
 import Tooltip from './tooltip/Tooltip'
+import Upload from './upload/Upload'
 import VisuallyHidden from './visually-hidden/VisuallyHidden'
 
 // define / export all the available components
@@ -104,6 +105,7 @@ export {
   Timeline,
   ToggleButton,
   Tooltip,
+  Upload,
   VisuallyHidden,
 }
 
@@ -153,6 +155,7 @@ export const getComponents = () => {
     Timeline,
     ToggleButton,
     Tooltip,
+    Upload,
     VisuallyHidden,
   }
 }