@dhis2-ui/file-input 9.11.0 → 9.11.1-beta.10

package/build/es/file-input/file-input.js

@@ -1,61 +1,52 @@
 import _JSXStyle from "styled-jsx/style";
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-import { Button } from '@dhis2-ui/button';
-import { StatusIcon } from '@dhis2-ui/status-icon';
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { colors, spacers, sharedPropTypes } from '@dhis2/ui-constants';
 import { IconUpload24 } from '@dhis2/ui-icons';
+import { Button } from '@dhis2-ui/button';
+import { StatusIcon } from '@dhis2-ui/status-icon';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { createRef, Component } from 'react';
-
 class FileInput extends Component {
   constructor() {
     super(...arguments);
-
     _defineProperty(this, "ref", /*#__PURE__*/createRef());
-
     _defineProperty(this, "handleClick", () => {
       this.ref.current.click();
     });
-
     _defineProperty(this, "handleChange", e => {
       if (this.props.onChange) {
         this.props.onChange(this.createHandlerPayload(), e);
-      } // reset the file input so it won't prevent on-change
-      // if the same file was added in a second attempt
-
+      }
 
+      // reset the file input so it won't prevent on-change
+      // if the same file was added in a second attempt
       this.ref.current.value = '';
     });
-
     _defineProperty(this, "handleBlur", e => {
       if (this.props.onBlur) {
         this.props.onBlur(this.createHandlerPayload(), e);
       }
     });
-
     _defineProperty(this, "handleFocus", e => {
       if (this.props.onFocus) {
         this.props.onFocus(this.createHandlerPayload(), e);
       }
     });
-
     _defineProperty(this, "handleKeyDown", e => {
       if (this.props.onKeyDown) {
         this.props.onKeyDown(this.createHandlerPayload(), e);
       }
     });
   }
-
   createHandlerPayload() {
     return {
       files: this.ref.current.files,
       name: this.props.name
     };
   }
-
   render() {
     const {
       accept,
@@ -87,7 +78,7 @@ class FileInput extends Component {
       accept: accept,
       multiple: multiple,
       disabled: disabled,
-      "data-test": "".concat(dataTest, "-input"),
+      "data-test": `${dataTest}-input`,
       className: _JSXStyle.dynamic([["1746996489", [spacers.dp8, spacers.dp4]]])
     }), /*#__PURE__*/React.createElement(Button, {
       disabled: disabled,
@@ -110,11 +101,9 @@ class FileInput extends Component {
     }), /*#__PURE__*/React.createElement(_JSXStyle, {
       id: "1746996489",
       dynamic: [spacers.dp8, spacers.dp4]
-    }, ["input.__jsx-style-dynamic-selector{display:none;}", ".file-input.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:".concat(spacers.dp8, ";padding-bottom:").concat(spacers.dp4, ";}")]));
+    }, ["input.__jsx-style-dynamic-selector{display:none;}", `.file-input.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:${spacers.dp8};padding-bottom:${spacers.dp4};}`]));
   }
-
 }
-
 FileInput.defaultProps = {
   accept: '*',
   dataTest: 'dhis2-uicore-fileinput'
@@ -128,39 +117,29 @@ FileInput.propTypes = {
   className: PropTypes.string,
   dataTest: PropTypes.string,
   disabled: PropTypes.bool,
-
   /** Input status. Mutually exclusive with `warning` and `valid` */
   error: sharedPropTypes.statusPropType,
   initialFocus: PropTypes.bool,
-
   /** Button size. Mutually exclusive with `small` */
   large: sharedPropTypes.sizePropType,
-
   /**
    * The `multiple` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple)
    */
   multiple: PropTypes.bool,
   name: PropTypes.string,
-
   /** Button size. Mutually exclusive with `large` */
   small: sharedPropTypes.sizePropType,
   tabIndex: PropTypes.string,
-
   /** Input status. Mutually exclusive with `warning` and `error` */
   valid: sharedPropTypes.statusPropType,
-
   /** Input status. Mutually exclusive with `valid` and `error` */
   warning: sharedPropTypes.statusPropType,
-
   /** Called with signature `(object, event)` */
   onBlur: PropTypes.func,
-
   /** Called with signature `(object, event)` */
   onChange: PropTypes.func,
-
   /** Called with signature `(object, event)` */
   onFocus: PropTypes.func,
-
   /** Called with signature `(object, event)` */
   onKeyDown: PropTypes.func
 };

package/build/es/file-input/{file-input.stories.js → file-input.prod.stories.js}

@@ -1,21 +1,26 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { sharedPropTypes } from '@dhis2/ui-constants';
 import React from 'react';
 import { FileInput } from './index.js';
-const subtitle = "The file input component allows users to select and upload files from their local machine.";
-const description = "\nUse a file input component in forms and interfaces wherever a user needs to be able to select and upload a file from their local machine.\n\n```js\nimport { FileInput } from '@dhis2/ui'\n```\n";
+const subtitle = `The file input component allows users to select and upload files from their local machine.`;
+const description = `
+Use a file input component in forms and interfaces wherever a user needs to be able to select and upload a file from their local machine.
 
+\`\`\`js
+import { FileInput } from '@dhis2/ui'
+\`\`\`
+`;
 const onChange = (payload, event) => {
   console.log('onChange payload', payload);
-  console.log('onChange event', event); // NOTE: if files is not transformed into an array,
-  // cypress will get an empty file list!
+  console.log('onChange event', event);
 
-  window.onChange && window.onChange({ ...payload,
+  // NOTE: if files is not transformed into an array,
+  // cypress will get an empty file list!
+  window.onChange && window.onChange({
+    ...payload,
     files: [...payload.files]
   }, event);
 };
-
 const {
   sizeArgType,
   statusArgType
@@ -30,15 +35,20 @@ export default {
     onChange
   },
   argTypes: {
-    valid: { ...statusArgType
+    valid: {
+      ...statusArgType
     },
-    warning: { ...statusArgType
+    warning: {
+      ...statusArgType
     },
-    error: { ...statusArgType
+    error: {
+      ...statusArgType
     },
-    small: { ...sizeArgType
+    small: {
+      ...sizeArgType
     },
-    large: { ...sizeArgType
+    large: {
+      ...sizeArgType
     }
   },
   parameters: {
@@ -50,9 +60,7 @@ export default {
     }
   }
 };
-
 const Template = args => /*#__PURE__*/React.createElement(FileInput, args);
-
 export const Default = Template.bind({});
 export const Multiple = Template.bind({});
 Multiple.args = {

package/build/es/file-input-field/file-input-field.e2e.stories.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { FileInputField } from './file-input-field.js';
+export default {
+  title: 'FileInputField'
+};
+export const WithLabelAndRequired = () => /*#__PURE__*/React.createElement(FileInputField, {
+  name: "upload",
+  label: "upload something",
+  buttonLabel: "Upload file",
+  required: true
+});
+export const Default = () => /*#__PURE__*/React.createElement(FileInputField, {
+  name: "upload",
+  label: "upload something"
+});

package/build/es/file-input-field/file-input-field.js

@@ -1,19 +1,19 @@
+import { sharedPropTypes } from '@dhis2/ui-constants';
 import { Field } from '@dhis2-ui/field';
 import { Label } from '@dhis2-ui/label';
-import { sharedPropTypes } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { FileInput, FileList, FileListPlaceholder } from '../index.js';
-import i18n from '../locales/index.js'; // TODO: i18n
+import { FileInput } from '../file-input/index.js';
+import { FileList, FileListPlaceholder } from '../file-list/index.js';
+import i18n from '../locales/index.js';
 
+// TODO: i18n
 const translate = (prop, interpolationObject) => {
   if (typeof prop === 'function') {
     return prop(interpolationObject);
   }
-
   return prop;
 };
-
 const FileInputField = _ref => {
   let {
     accept,
@@ -73,7 +73,6 @@ const FileInputField = _ref => {
     warning: warning
   }), /*#__PURE__*/React.createElement(FileList, null, children ? children : /*#__PURE__*/React.createElement(FileListPlaceholder, null, translate(placeholder))));
 };
-
 FileInputField.defaultProps = {
   accept: '*',
   dataTest: 'dhis2-uiwidgets-fileinputfield',
@@ -83,61 +82,44 @@ FileInputField.defaultProps = {
 FileInputField.propTypes = {
   /** The `accept` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) */
   accept: PropTypes.string,
-
   /** Text on the button */
   buttonLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   children: PropTypes.node,
   className: PropTypes.string,
   dataTest: PropTypes.string,
-
   /** Disables the button */
   disabled: PropTypes.bool,
-
   /** Applies 'error' styling to the validation text. Mutually exclusive with `warning` and `valid` props */
   error: sharedPropTypes.statusPropType,
-
   /** Useful guiding text for the user */
   helpText: PropTypes.string,
   initialFocus: PropTypes.bool,
-
   /** A descriptive label above the button */
   label: PropTypes.string,
-
   /** Size of the button. Mutually exclusive with the `small` prop */
   large: sharedPropTypes.sizePropType,
-
   /** The `multiple` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple) */
   multiple: PropTypes.bool,
-
   /** Name associated with input. Passed to event handler callbacks */
   name: PropTypes.string,
-
   /** Placeholder below the button */
   placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-
   /** Adds an asterisk to indicate this field is required */
   required: PropTypes.bool,
-
   /** Size of the button. Mutually exclusive with the `large` prop */
   small: sharedPropTypes.sizePropType,
   tabIndex: PropTypes.string,
-
   /** Applies 'valid' styling to the validation text. Mutually exclusive with `warning` and `error` props */
   valid: sharedPropTypes.statusPropType,
-
   /** Text below the button that provides validation feedback */
   validationText: PropTypes.string,
-
   /** Applies 'warning' styling to the validation text. Mutually exclusive with `valid` and `error` props */
   warning: sharedPropTypes.statusPropType,
   onBlur: PropTypes.func,
-
   /** Called with signature `({ name: string, files: [] }, event)` */
   onChange: PropTypes.func,
-
   /** Called with signature `({ name: string, files: [] }, event)` */
   onFocus: PropTypes.func,
-
   /** Called with signature `({ name: string, files: [] }, event)` */
   onKeyDown: PropTypes.func
 };

package/build/es/file-input-field/{file-input-field.stories.js → file-input-field.prod.stories.js}

@@ -1,17 +1,18 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { sharedPropTypes } from '@dhis2/ui-constants';
 import React from 'react';
 import { FileListItem } from '../index.js';
 import { FileInputField } from './file-input-field.js';
-const description = "\nThe `FileInputField` component wraps the `FileInput` component in a `Field` wrapper to add labels, help text, and validation text.\n\n```js\nimport { FileInputField, FileListItem } from '@dhis2/ui'\n```\n";
+const description = `
+The \`FileInputField\` component wraps the \`FileInput\` component in a \`Field\` wrapper to add labels, help text, and validation text.
 
+\`\`\`js
+import { FileInputField, FileListItem } from '@dhis2/ui'
+\`\`\`
+`;
 const onChange = obj => console.log('onChange', obj);
-
 const onRemove = () => console.log('onRemove');
-
 const onCancel = () => console.log('onCancel');
-
 export default {
   title: 'File Input Field',
   component: FileInputField,
@@ -23,28 +24,32 @@ export default {
     }
   },
   // Default args:
-  args: { // Handle default values (see comment in Transfer.js)
+  args: {
+    // Handle default values (see comment in Transfer.js)
     ...FileInputField.defaultProps,
     onChange: onChange,
     name: 'uploadName',
     label: 'Upload something'
   },
   argTypes: {
-    small: { ...sharedPropTypes.sizeArgType
+    small: {
+      ...sharedPropTypes.sizeArgType
     },
-    large: { ...sharedPropTypes.sizeArgType
+    large: {
+      ...sharedPropTypes.sizeArgType
     },
-    valid: { ...sharedPropTypes.statusArgType
+    valid: {
+      ...sharedPropTypes.statusArgType
     },
-    warning: { ...sharedPropTypes.statusArgType
+    warning: {
+      ...sharedPropTypes.statusArgType
     },
-    error: { ...sharedPropTypes.statusArgType
+    error: {
+      ...sharedPropTypes.statusArgType
     }
   }
 };
-
 const Template = args => /*#__PURE__*/React.createElement(FileInputField, args);
-
 export const Default = Template.bind({});
 Default.args = {
   label: null
@@ -148,7 +153,8 @@ DesignSystemStackingOrder.args = {
   helpText: 'Please upload something'
 };
 export const DesignSystemStackingOrderEmptyFileList = Template.bind({});
-DesignSystemStackingOrderEmptyFileList.args = { ...DesignSystemStackingOrder.args
+DesignSystemStackingOrderEmptyFileList.args = {
+  ...DesignSystemStackingOrder.args
 };
 DesignSystemStackingOrderEmptyFileList.storyName = 'Design system stacking order - empty file list';
 export const DefaultButtonLabelAndPlaceholder = Template.bind({});

package/build/es/file-input-field-with-list/{file-input-field-with-list.stories.e2e.js → file-input-field-with-list.e2e.stories.js}

@@ -1,4 +1,3 @@
-import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { FileInputFieldWithList } from './index.js';
 window.onChange = window.Cypress && window.Cypress.cy.stub();
@@ -8,39 +7,45 @@ window.duplicateFileConstructorArgs = [[], 'duplicate.md', {
   type: 'text/markdown'
 }];
 const multipleFileArray = [new File([], 'test1.md'), new File(...window.duplicateFileConstructorArgs), new File([], 'test2.md')];
-
 const onChange = (payload, event) => {
   // NOTE: if files is not transformed into an array,
   // cypress will get an empty file list!
-  window.onChange({ ...payload,
+  window.onChange({
+    ...payload,
     files: [...payload.files]
   }, event);
 };
-
-storiesOf('FileInputFieldWithList', module).add('Single file - with file', () => /*#__PURE__*/React.createElement(FileInputFieldWithList, {
+export default {
+  title: 'FileInputFieldWithList'
+};
+export const SingleFileWithFile = () => /*#__PURE__*/React.createElement(FileInputFieldWithList, {
   buttonLabel: "Upload file",
   name: "upload",
   files: singleFileArray,
   removeText: "remove",
   onChange: onChange
-})).add('Multiple files - empty', () => /*#__PURE__*/React.createElement(FileInputFieldWithList, {
+});
+export const MultipleFilesEmpty = () => /*#__PURE__*/React.createElement(FileInputFieldWithList, {
   buttonLabel: "Upload file",
   multiple: true,
   name: "upload",
   removeText: "remove",
   onChange: onChange
-})).add('Multiple files - with files', () => /*#__PURE__*/React.createElement(FileInputFieldWithList, {
+});
+export const MultipleFilesWithFiles = () => /*#__PURE__*/React.createElement(FileInputFieldWithList, {
   buttonLabel: "Upload file",
   multiple: true,
   name: "upload",
   files: multipleFileArray,
   removeText: "remove",
   onChange: onChange
-})).add('With file and default texts', () => /*#__PURE__*/React.createElement(FileInputFieldWithList, {
+});
+export const WithFileAndDefaultTexts = () => /*#__PURE__*/React.createElement(FileInputFieldWithList, {
   name: "upload",
   files: singleFileArray,
   onChange: onChange
-})).add('With default texts', () => /*#__PURE__*/React.createElement(FileInputFieldWithList, {
+});
+export const WithDefaultTexts = () => /*#__PURE__*/React.createElement(FileInputFieldWithList, {
   name: "upload",
   onChange: onChange
-}));
+});

package/build/es/file-input-field-with-list/file-input-field-with-list.js

@@ -1,24 +1,23 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { sharedPropTypes } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { FileInputField } from '../index.js';
+import { FileInputField } from '../file-input-field/index.js';
 import i18n from '../locales/index.js';
-import { FileListItemWithRemove } from './file-list-item-with-remove.js'; // TODO: i18n
+import { FileListItemWithRemove } from './file-list-item-with-remove.js';
 
+// TODO: i18n
 const translate = (prop, interpolationObject) => {
   if (typeof prop === 'function') {
     return prop(interpolationObject);
   }
-
   return prop;
 };
-
 class FileInputFieldWithList extends Component {
   constructor() {
     super(...arguments);
-
     _defineProperty(this, "handleChange", (_ref, event) => {
       let {
         files: fileList
@@ -32,7 +31,6 @@ class FileInputFieldWithList extends Component {
         name: name
       }, event);
     });
-
     _defineProperty(this, "handleRemove", (_ref2, event) => {
       let {
         file: fileToRemove
@@ -48,7 +46,6 @@ class FileInputFieldWithList extends Component {
       }, event);
     });
   }
-
   /**
    * @param {FileList} fileList
    * @returns {File[]}
@@ -57,17 +54,14 @@ class FileInputFieldWithList extends Component {
     const {
       multiple,
       files
-    } = this.props; // Spread immutable FileList instance onto array
-
+    } = this.props;
+    // Spread immutable FileList instance onto array
     const newFiles = [...fileList];
-
     if (!multiple) {
       return newFiles;
     }
-
     return files.filter(file => !newFiles.some(x => x.name === file.name && x.lastModified === file.lastModified && x.size === file.size && x.type === file.type)).concat(newFiles);
   }
-
   render() {
     const {
       accept,
@@ -127,9 +121,7 @@ class FileInputFieldWithList extends Component {
       file: file
     })));
   }
-
 }
-
 FileInputFieldWithList.defaultProps = {
   dataTest: 'dhis2-uiwidgets-fileinputfieldwithlist',
   files: [],
@@ -140,66 +132,47 @@ FileInputFieldWithList.defaultProps = {
 FileInputFieldWithList.propTypes = {
   /** Called with signature `({ name: string, files: [File] }, event)` */
   onChange: PropTypes.func.isRequired,
-
   /** The `accept` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) */
   accept: PropTypes.string,
-
   /** Text on the button */
   buttonLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
   className: PropTypes.string,
   dataTest: PropTypes.string,
-
   /** Disables the button */
   disabled: PropTypes.bool,
-
   /** Applies 'error' styling to the button and validation text. Mutually exclusive with `warning` and `valid` props */
   error: sharedPropTypes.statusPropType,
   files: PropTypes.arrayOf(PropTypes.instanceOf(File)),
-
   /** Useful guiding text for the user */
   helpText: PropTypes.string,
   initialFocus: PropTypes.bool,
-
   /** A descriptive label above the button */
   label: PropTypes.string,
-
   /** Size of the button. Mutually exclusive with the `small` prop */
   large: sharedPropTypes.sizePropType,
-
   /** The `multiple` attribute of the [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#multiple) */
   multiple: PropTypes.bool,
-
   /** Name associated with input. Passed to event handler callbacks */
   name: PropTypes.string,
-
   /** Placeholder below the button */
   placeholder: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-
   /** Text used for the button that removes a file from the list */
   removeText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-
   /** Adds an asterisk to indicate this field is required */
   required: PropTypes.bool,
-
   /** Size of the button. Mutually exclusive with the `large` prop */
   small: sharedPropTypes.sizePropType,
   tabIndex: PropTypes.string,
-
   /** Applies 'valid' styling to the button and validation text. Mutually exclusive with `warning` and `error` props */
   valid: sharedPropTypes.statusPropType,
-
   /** Text below the button that provides validation feedback */
   validationText: PropTypes.string,
-
   /** Applies 'warning' styling to the button and validation text. Mutually exclusive with `valid` and `error` props */
   warning: sharedPropTypes.statusPropType,
-
   /** Called with signature `({ name: string, files: [] }, event)` */
   onBlur: PropTypes.func,
-
   /** Called with signature `({ name: string, files: [] }, event)` */
   onFocus: PropTypes.func,
-
   /** Called with signature `({ name: string, files: [] }, event)` */
   onKeyDown: PropTypes.func
 };

package/build/es/file-input-field-with-list/{file-input-field-with-list.stories.js → file-input-field-with-list.prod.stories.js}

@@ -1,16 +1,20 @@
 import { sharedPropTypes } from '@dhis2/ui-constants';
 import React from 'react';
 import { FileInputFieldWithList } from './file-input-field-with-list.js';
-const description = "\nA FileInputField with logic for creating a dynamic list of removable files from an array of `File` objects.\n\n```js\nimport { FileInputFieldWithList } from '@dhis2/ui'\n```\n";
-const files = new Array(10).fill('dummy-file-name').map((name, i) => new File([], "".concat(name, "-").concat(i + 1, ".txt")));
+const description = `
+A FileInputField with logic for creating a dynamic list of removable files from an array of \`File\` objects.
 
+\`\`\`js
+import { FileInputFieldWithList } from '@dhis2/ui'
+\`\`\`
+`;
+const files = new Array(10).fill('dummy-file-name').map((name, i) => new File([], `${name}-${i + 1}.txt`));
 const onChange = _ref => {
   let {
     files
   } = _ref;
   console.log('files: ', files);
 };
-
 export default {
   title: 'File Input Field With List',
   component: FileInputFieldWithList,
@@ -21,28 +25,32 @@ export default {
       }
     }
   },
-  args: { // Handle default props bug (see Transfer stories)
+  args: {
+    // Handle default props bug (see Transfer stories)
     ...FileInputFieldWithList.defaultProps,
     multiple: true,
     onChange: onChange,
     name: 'uploadName'
   },
   argTypes: {
-    small: { ...sharedPropTypes.sizeArgType
+    small: {
+      ...sharedPropTypes.sizeArgType
     },
-    large: { ...sharedPropTypes.sizeArgType
+    large: {
+      ...sharedPropTypes.sizeArgType
     },
-    valid: { ...sharedPropTypes.statusArgType
+    valid: {
+      ...sharedPropTypes.statusArgType
     },
-    warning: { ...sharedPropTypes.statusArgType
+    warning: {
+      ...sharedPropTypes.statusArgType
     },
-    error: { ...sharedPropTypes.statusArgType
+    error: {
+      ...sharedPropTypes.statusArgType
     }
   }
 };
-
 const Template = args => /*#__PURE__*/React.createElement(FileInputFieldWithList, args);
-
 export const Default = Template.bind({});
 Default.args = {
   buttonLabel: 'Upload file (custom label)',