-
Notifications
You must be signed in to change notification settings - Fork 33
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(forms): add Upload field (#3742)
- Loading branch information
Showing
46 changed files
with
1,558 additions
and
151 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
29 changes: 29 additions & 0 deletions
29
...-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Upload.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| --- | ||
| title: 'Upload' | ||
| description: '`Field.Upload` is a wrapper for the Upload component to make it easier to use inside a form.' | ||
| showTabs: true | ||
| theme: 'sbanken' | ||
| hideInMenu: true | ||
| tabs: | ||
| - title: Info | ||
| key: '/info' | ||
| - title: Demos | ||
| key: '/demos' | ||
| - title: Properties | ||
| key: '/properties' | ||
| - title: Events | ||
| key: '/events' | ||
| breadcrumb: | ||
| - text: Forms | ||
| href: /uilib/extensions/forms/ | ||
| - text: Feature fields | ||
| href: /uilib/extensions/forms/feature-fields/ | ||
| - text: Upload | ||
| href: /uilib/extensions/forms/feature-fields/Upload/ | ||
| --- | ||
|
|
||
| import Info from 'Docs/uilib/extensions/forms/feature-fields/Upload/info' | ||
| import Demos from 'Docs/uilib/extensions/forms/feature-fields/Upload/demos' | ||
|
|
||
| <Info /> | ||
| <Demos /> |
89 changes: 89 additions & 0 deletions
89
...b-design-system-portal/src/docs/uilib/extensions/forms/feature-fields/Upload/Examples.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,89 @@ | ||
| import { Flex } from '@dnb/eufemia/src' | ||
| import ComponentBox from '../../../../../../shared/tags/ComponentBox' | ||
| import { Field, Form } from '@dnb/eufemia/src/extensions/forms' | ||
|
|
||
| export const BasicUsage = () => { | ||
| return ( | ||
| <ComponentBox> | ||
| <Form.Handler> | ||
| <Field.Upload | ||
| label="My custom label" | ||
| labelDescription="My description" | ||
| /> | ||
| </Form.Handler> | ||
| </ComponentBox> | ||
| ) | ||
| } | ||
|
|
||
| export const Required = () => { | ||
| return ( | ||
| <ComponentBox> | ||
| <Form.Handler onSubmit={(data) => console.log('onSubmit', data)}> | ||
| <Flex.Stack> | ||
| <Field.Upload path="/myFiles" required /> | ||
| <Form.SubmitButton /> | ||
| </Flex.Stack> | ||
| </Form.Handler> | ||
| </ComponentBox> | ||
| ) | ||
| } | ||
|
|
||
| export const WithHelp = () => { | ||
| return ( | ||
| <ComponentBox> | ||
| <Field.Upload | ||
| help={{ | ||
| title: 'Help title', | ||
| content: 'Help content', | ||
| }} | ||
| /> | ||
| </ComponentBox> | ||
| ) | ||
| } | ||
|
|
||
| export const Customized = () => { | ||
| return ( | ||
| <ComponentBox data-visual-test="upload-field-customized"> | ||
| <Field.Upload | ||
| title="My custom title" | ||
| text="My text with a help button" | ||
| width="large" | ||
| help={{ | ||
| title: 'Help title', | ||
| content: 'Help content', | ||
| }} | ||
| warning="Warning message" | ||
| acceptedFileTypes={['pdf']} | ||
| filesAmountLimit={1} | ||
| fileMaxSize={1} | ||
| /> | ||
| </ComponentBox> | ||
| ) | ||
| } | ||
|
|
||
| export const WithPath = () => { | ||
| const createMockFile = (name: string, size: number, type: string) => { | ||
| const file = new File([], name, { type }) | ||
| Object.defineProperty(file, 'size', { | ||
| get() { | ||
| return size | ||
| }, | ||
| }) | ||
| return file | ||
| } | ||
|
|
||
| return ( | ||
| <ComponentBox scope={{ createMockFile }}> | ||
| <Form.Handler | ||
| onChange={(data) => console.log('onChange', data)} | ||
| data={{ | ||
| myFiles: [ | ||
| { file: createMockFile('fileName-1.png', 100, 'image/png') }, | ||
| ], | ||
| }} | ||
| > | ||
| <Field.Upload path="/myFiles" /> | ||
| </Form.Handler> | ||
| </ComponentBox> | ||
| ) | ||
| } |
27 changes: 27 additions & 0 deletions
27
...n-system-portal/src/docs/uilib/extensions/forms/feature-fields/Upload/demos.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| --- | ||
| showTabs: true | ||
| --- | ||
|
|
||
| import * as Examples from './Examples' | ||
|
|
||
| ## Demos | ||
|
|
||
| ### Basic usage | ||
|
|
||
| <Examples.BasicUsage /> | ||
|
|
||
| ### Required | ||
|
|
||
| <Examples.Required /> | ||
|
|
||
| ### Path usage | ||
|
|
||
| <Examples.WithPath /> | ||
|
|
||
| ### With help | ||
|
|
||
| <Examples.WithHelp /> | ||
|
|
||
| ### Customized | ||
|
|
||
| <Examples.Customized /> |
10 changes: 10 additions & 0 deletions
10
...-system-portal/src/docs/uilib/extensions/forms/feature-fields/Upload/events.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| --- | ||
| showTabs: true | ||
| --- | ||
|
|
||
| import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' | ||
| import { UploadFieldEvents } from '@dnb/eufemia/src/extensions/forms/Field/Upload/UploadDocs' | ||
|
|
||
| ## Events | ||
|
|
||
| <PropertiesTable props={UploadFieldEvents} /> |
56 changes: 56 additions & 0 deletions
56
...gn-system-portal/src/docs/uilib/extensions/forms/feature-fields/Upload/info.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| --- | ||
| showTabs: true | ||
| --- | ||
|
|
||
| ## Description | ||
|
|
||
| `Field.Upload` is a wrapper for the [Upload](/uilib/components/upload/) component to make it easier to use inside a form. | ||
|
|
||
| ```jsx | ||
| import { Field } from '@dnb/eufemia/extensions/forms' | ||
| render(<Field.Upload />) | ||
| ``` | ||
|
|
||
| ## The data and file format | ||
|
|
||
| The returned data is an array of objects containing a file object and a unique ID. The file object contains the file itself and some additional properties like an unique ID. | ||
|
|
||
| ```tsx | ||
| { | ||
| id: '1234', | ||
| file: { | ||
| name: 'file1.jpg', | ||
| size: 1234, | ||
| type: 'image/jpeg', | ||
| }, | ||
| errorMessage: 'error message ...', | ||
| } | ||
| ``` | ||
|
|
||
| This data format will be returned by the `onChange` and the `onSubmit` event handlers. | ||
|
|
||
| ## Validation | ||
|
|
||
| The `required` prop will validate if there are valid files present. If there are files with an error, the validation will fail. | ||
|
|
||
| If there are invalid files, the `onSubmit` event will not be called and a validation error will be shown. | ||
|
|
||
| The `onChange` event handler will return an array with objects containing the file object and some additional properties – regardless of the validity of the file. | ||
|
|
||
| ## About the `value` and `path` prop | ||
|
|
||
| The `path` prop represents an array with an object described above: | ||
|
|
||
| ```tsx | ||
| render( | ||
| <Form.Handler defaultData={{ myFiles: files }}> | ||
| <Field.Upload path="/myFiles" /> | ||
| </Form.Handler>, | ||
| ) | ||
| ``` | ||
|
|
||
| The `value` prop represents an array with an object described above: | ||
|
|
||
| ```tsx | ||
| render(<Field.Upload value={files} />) | ||
| ``` |
26 changes: 26 additions & 0 deletions
26
...tem-portal/src/docs/uilib/extensions/forms/feature-fields/Upload/properties.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| --- | ||
| showTabs: true | ||
| --- | ||
|
|
||
| import TranslationsTable from 'dnb-design-system-portal/src/shared/parts/TranslationsTable' | ||
| import PropertiesTable from 'dnb-design-system-portal/src/shared/parts/PropertiesTable' | ||
| import { fieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/FieldDocs' | ||
| import { UploadFieldProperties } from '@dnb/eufemia/src/extensions/forms/Field/Upload/UploadDocs' | ||
|
|
||
| ## Properties | ||
|
|
||
| ### Field-specific props | ||
|
|
||
| <PropertiesTable props={UploadFieldProperties} /> | ||
|
|
||
| ### General props | ||
|
|
||
| <PropertiesTable | ||
| props={fieldProperties} | ||
| valueType={['Array<{ file, id }>']} | ||
| omit={['layout', 'onBlurValidator', 'contentWidth']} | ||
| /> | ||
|
|
||
| ## Translations | ||
|
|
||
| <TranslationsTable localeKey={['Upload']} /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.