@postnord/web-components
Version:
PostNord Web Components
181 lines (180 loc) • 5.41 kB
JavaScript
/*!
* Built with Stencil
* By PostNord.
*/
import { createDocumentation, createComponent } from "../../../globals/documentation/story";
import docs from "./pn-file-upload-docs.json";
import { getFigmaUrl } from "../../../globals/figmaLinks";
const { argTypes, textContent } = createDocumentation(docs);
/** The `pn-file-upload` uses the native `input` to receive files via the native file explorer. */
const meta = {
title: 'Components/Input/File Upload',
parameters: {
layout: 'padded',
actions: {
handles: [
'change',
'cancel',
'filesAdded',
'fileuploaderror',
'update',
'uploadCancelled',
'uploadCompleted',
'uploadFile',
'valid',
],
},
design: {
type: 'figma',
url: getFigmaUrl(import.meta.url),
},
},
args: {
label: '',
helpertext: '',
language: null,
hideProgress: false,
name: '',
accept: '',
maxSize: '',
capture: '',
limit: null,
multiple: false,
required: false,
disabled: false,
},
argTypes,
};
export default meta;
export const PnFileUpload = {
name: 'pn-file-upload',
parameters: {
docs: {
description: {
story: textContent,
},
},
},
render: args => {
const form = document.createElement('form');
form.style.maxWidth = '30em';
form.style.margin = '0 auto';
const upload = createComponent('pn-file-upload', args);
form.appendChild(upload);
return form;
},
};
/**
* Decide which file types are allowed to be uploaded.
*
* This will also add a default helpertext with the selected filetypes.
**/
export const PnFileUploadAccept = {
name: 'pn-file-upload (accept)',
render: PnFileUpload.render,
args: {
accept: '.doc, .docx, .pdf, .txt, .jpg, .jpeg, .png',
},
};
/**
* Combine `accept` and `max-size` to limit the file size as well.
*
* The `max-size` information will be added to the default helpertext.
*/
export const PnFileUploadAcceptMaxsize = {
name: 'pn-file-upload (accept + max-size)',
render: PnFileUpload.render,
args: {
accept: '.doc, .docx, .pdf, .txt, .jpg, .jpeg, .png',
maxSize: '4MB',
},
};
/** Disable the input. */
export const PnFileUploadDisabled = {
name: 'pn-file-upload (disabled)',
render: PnFileUpload.render,
args: {
disabled: true,
},
};
/** Allow user to upload multiple files by setting the max amount with `limit`. */
export const PnFileUploadLimit = {
name: 'pn-file-upload (limit)',
render: PnFileUpload.render,
args: {
limit: 5,
},
};
/**
* The component will create a default label and helpertext based on current settings.
* You can change the text with the `label` and `helpertext` props.
*/
export const PnFileUploadLabel = {
name: 'pn-file-upload (label + helpertext)',
render: PnFileUpload.render,
args: {
label: 'Select one image',
helpertext: 'Any image file will do!',
accept: '',
multiple: false,
limit: 1,
},
};
/**
* Combine `accept` and `max-size` to limit the file size as well.
*
* The `max-size` information will be added to the default helpertext.
*/
export const PnFileUploadAcceptMaxsizeHelpertext = {
name: 'pn-file-upload (accept + max-size)',
render: PnFileUpload.render,
args: {
helpertext: 'You can find the files in your account detail page.',
accept: '.doc, .docx, .pdf, .txt, .jpg, .jpeg, .png',
maxSize: '4MB',
},
};
/**
* Select some files and do a fake upload to see how it looks.
*
* Throw in a wrong file format to view the error state.
*/
export const PnFileUploadExample = {
name: 'pn-file-upload (example)',
render: (args, context) => {
const fileUploader = PnFileUpload.render(args, context);
const input = fileUploader.querySelector('pn-file-upload');
const button = createComponent('pn-button', { label: 'Upload file' });
button.style.marginTop = '1em';
fileUploader.appendChild(button);
button.addEventListener('click', async () => {
await input.startUpload();
});
const fakeWaiting = async () => await new Promise(resolve => setTimeout(() => resolve('Yes!'), 1000));
input.addEventListener('uploadFile', async (e) => {
button.setAttribute('loading', 'true');
input.setAttribute('disabled', 'true');
const file = e.detail.file;
file.xhr.open('GET', location.origin);
file.xhrPromise();
file.progress = 25;
await fakeWaiting();
file.progress = 50;
input.updateFile(file);
await fakeWaiting();
file.progress = 75;
input.updateFile(file);
await fakeWaiting();
file.xhr.send();
button.setAttribute('loading', 'false');
input.setAttribute('disabled', 'false');
});
return fileUploader;
},
args: {
accept: '.jpg,.png',
maxSize: '2MB',
limit: 20,
},
};
//# sourceMappingURL=pn-file-upload.stories.js.map