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

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

@@ -1,13 +1,12 @@
-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 PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import { FileListItem } from '../index.js';
-
+import { FileListItem } from '../file-list/index.js';
 class FileListItemWithRemove extends Component {
   constructor() {
     super(...arguments);
-
     _defineProperty(this, "handleRemove", event => {
       const {
         onRemove,
@@ -18,7 +17,6 @@ class FileListItemWithRemove extends Component {
       }, event);
     });
   }
-
   render() {
     const {
       label,
@@ -32,9 +30,7 @@ class FileListItemWithRemove extends Component {
       className: className
     });
   }
-
 }
-
 FileListItemWithRemove.propTypes = {
   label: PropTypes.string.isRequired,
   removeText: PropTypes.string.isRequired,

package/build/es/file-list/features/accepts_cancel_text/index.js

@@ -1,6 +1,6 @@
 import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a loading FileListItem with onCancel handler and cancelText is rendered', () => {
-  cy.visitStory('FileListItem', 'Loading with onCancel and cancelText');
+  cy.visitStory('FileListItem', 'Loading with on cancel and cancel text');
 });
 Then('the cancelText will be visible', () => {
   cy.get('[data-test="dhis2-uicore-filelistitem-cancel"]').contains('Cancel').should('be.visible');

package/build/es/file-list/features/accepts_remove_text/index.js

@@ -1,6 +1,6 @@
 import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a FileListItem with removeText is rendered', () => {
-  cy.visitStory('FileListItem', 'With removeText');
+  cy.visitStory('FileListItem', 'With remove text');
 });
 Then('the removeText will be visible', () => {
   cy.get('[data-test="dhis2-uicore-filelistitem-remove"]').contains('Remove').should('be.visible');

package/build/es/file-list/features/can_be_removed/index.js

@@ -1,6 +1,6 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a FileListItem with Onremove handler is rendered', () => {
-  cy.visitStory('FileListItem', 'With onRemove');
+  cy.visitStory('FileListItem', 'With on remove');
 });
 When('the user clicks on the remove text', () => {
   cy.get('[data-test="dhis2-uicore-filelistitem-remove"]').click();

package/build/es/file-list/features/loading_can_be_cancelled/index.js

@@ -1,6 +1,6 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a loading FileListItem with onCancel handler is rendered', () => {
-  cy.visitStory('FileListItem', 'Loading with onCancel');
+  cy.visitStory('FileListItem', 'Loading with on cancel');
 });
 When('the user clicks on the cancel text', () => {
   cy.get('[data-test="dhis2-uicore-filelistitem-cancel"]').click();

package/build/es/file-list/{file-list-item.stories.e2e.js → file-list-item.e2e.stories.js}

@@ -1,31 +1,37 @@
-import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { FileListItem } from './file-list-item.js';
 window.onRemove = window.Cypress && window.Cypress.cy.stub();
 window.onCancel = window.Cypress && window.Cypress.cy.stub();
-storiesOf('FileListItem', module).add('With onRemove', () => /*#__PURE__*/React.createElement(FileListItem, {
+export default {
+  title: 'FileListItem'
+};
+export const WithOnRemove = () => /*#__PURE__*/React.createElement(FileListItem, {
   label: "File list item",
   onRemove: window.onRemove,
   removeText: "Remove"
-})).add('Loading with onCancel', () => /*#__PURE__*/React.createElement(FileListItem, {
+});
+export const LoadingWithOnCancel = () => /*#__PURE__*/React.createElement(FileListItem, {
   loading: true,
   label: "File list item",
   removeText: "Remove",
   onCancel: window.onCancel,
   cancelText: "Cancel"
-})).add('Loading with onCancel and cancelText', () => /*#__PURE__*/React.createElement(FileListItem, {
+});
+export const LoadingWithOnCancelAndCancelText = () => /*#__PURE__*/React.createElement(FileListItem, {
   loading: true,
   label: "File list item",
   removeText: "Remove",
   onCancel: () => {},
   onRemove: () => {},
   cancelText: "Cancel"
-})).add('With label', () => /*#__PURE__*/React.createElement(FileListItem, {
+});
+export const WithLabel = () => /*#__PURE__*/React.createElement(FileListItem, {
   label: "Label",
   removeText: "Remove",
   onRemove: () => {}
-})).add('With removeText', () => /*#__PURE__*/React.createElement(FileListItem, {
+});
+export const WithRemoveText = () => /*#__PURE__*/React.createElement(FileListItem, {
   label: "Label",
   removeText: "Remove",
   onRemove: () => {}
-}));
+});

package/build/es/file-list/file-list-item.js

@@ -1,11 +1,10 @@
 import _JSXStyle from "styled-jsx/style";
-import { CircularLoader } from '@dhis2-ui/loader';
 import { theme, colors, spacers } from '@dhis2/ui-constants';
 import { IconAttachment16 } from '@dhis2/ui-icons';
+import { CircularLoader } from '@dhis2-ui/loader';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-
 const FileListItem = _ref => {
   let {
     className,
@@ -17,17 +16,14 @@ const FileListItem = _ref => {
     cancelText,
     dataTest
   } = _ref;
-
   const handleKeyDown = event => {
     if (!onRemove) {
       return;
     }
-
     if (event.key === 'Enter' || event.key === 'Backspace' || event.key === 'Delete') {
       onRemove({}, event);
     }
   };
-
   return /*#__PURE__*/React.createElement("p", {
     "data-test": dataTest,
     className: _JSXStyle.dynamic([["513536609", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + (cx('selected-file', className) || "")
@@ -43,20 +39,19 @@ const FileListItem = _ref => {
     className: _JSXStyle.dynamic([["513536609", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "label"
   }, label), loading && onCancel && cancelText && /*#__PURE__*/React.createElement("span", {
     onClick: event => onCancel({}, event),
-    "data-test": "".concat(dataTest, "-cancel"),
+    "data-test": `${dataTest}-cancel`,
     className: _JSXStyle.dynamic([["513536609", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "action"
   }, cancelText), !loading && /*#__PURE__*/React.createElement("span", {
     onClick: event => onRemove({}, event),
-    "data-test": "".concat(dataTest, "-remove"),
+    "data-test": `${dataTest}-remove`,
     tabIndex: 0,
     onKeyDown: handleKeyDown,
     className: _JSXStyle.dynamic([["513536609", [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]]]) + " " + "action"
   }, removeText)), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "513536609",
     dynamic: [spacers.dp4, colors.grey900, colors.grey700, colors.red700, colors.red800, theme.focus]
-  }, ["p.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0;padding-top:".concat(spacers.dp4, ";}"), "span.__jsx-style-dynamic-selector{display:inline-block;}", ".icon.__jsx-style-dynamic-selector{margin-inline-end:4px;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-top:1px;}", ".text.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", ".label.__jsx-style-dynamic-selector{font-size:14px;color:".concat(colors.grey900, ";word-break:break-all;}"), ".label.__jsx-style-dynamic-selector::after{content:' ';display:inline-block;width:12px;}", ".action.__jsx-style-dynamic-selector{font-size:12px;line-height:12px;margin-top:0;-webkit-text-decoration:underline;text-decoration:underline;cursor:pointer;color:".concat(colors.grey700, ";}"), ".action.__jsx-style-dynamic-selector:hover{color:".concat(colors.red700, ";}"), ".action.__jsx-style-dynamic-selector:active{color:".concat(colors.red800, ";}"), ".action.__jsx-style-dynamic-selector:focus{outline:3px solid ".concat(theme.focus, ";outline-offset:2px;}")]));
+  }, [`p.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin:0;padding-top:${spacers.dp4};}`, "span.__jsx-style-dynamic-selector{display:inline-block;}", ".icon.__jsx-style-dynamic-selector{margin-inline-end:4px;-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-top:1px;}", ".text.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;-webkit-flex-shrink:1;-ms-flex-negative:1;flex-shrink:1;}", `.label.__jsx-style-dynamic-selector{font-size:14px;color:${colors.grey900};word-break:break-all;}`, ".label.__jsx-style-dynamic-selector::after{content:' ';display:inline-block;width:12px;}", `.action.__jsx-style-dynamic-selector{font-size:12px;line-height:12px;margin-top:0;-webkit-text-decoration:underline;text-decoration:underline;cursor:pointer;color:${colors.grey700};}`, `.action.__jsx-style-dynamic-selector:hover{color:${colors.red700};}`, `.action.__jsx-style-dynamic-selector:active{color:${colors.red800};}`, `.action.__jsx-style-dynamic-selector:focus{outline:3px solid ${theme.focus};outline-offset:2px;}`]));
 };
-
 FileListItem.defaultProps = {
   dataTest: 'dhis2-uicore-filelistitem'
 };

package/build/es/file-list/file-list-placeholder.e2e.stories.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { FileListPlaceholder } from './file-list-placeholder.js';
+export default {
+  title: 'FileListPlaceholder'
+};
+export const WithChildren = () => /*#__PURE__*/React.createElement(FileListPlaceholder, null, "I am a child");

package/build/es/file-list/file-list-placeholder.js

@@ -2,7 +2,6 @@ import _JSXStyle from "styled-jsx/style";
 import { colors, spacers } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
-
 const FileListPlaceholder = _ref => {
   let {
     children,
@@ -14,9 +13,8 @@ const FileListPlaceholder = _ref => {
   }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1287857385",
     dynamic: [spacers.dp4, colors.grey700]
-  }, ["p.__jsx-style-dynamic-selector{margin:0;padding-top:".concat(spacers.dp4, ";font-size:14px;color:").concat(colors.grey700, ";}")]));
+  }, [`p.__jsx-style-dynamic-selector{margin:0;padding-top:${spacers.dp4};font-size:14px;color:${colors.grey700};}`]));
 };
-
 FileListPlaceholder.defaultProps = {
   dataTest: 'dhis2-uicore-filelistplaceholder'
 };

package/build/es/file-list/file-list.e2e.stories.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { FileList } from './file-list.js';
+export default {
+  title: 'FileList'
+};
+export const WithChildren = () => /*#__PURE__*/React.createElement(FileList, null, "I am a child");

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

@@ -1,7 +1,6 @@
 import _JSXStyle from "styled-jsx/style";
 import PropTypes from 'prop-types';
 import React from 'react';
-
 const FileList = _ref => {
   let {
     children,
@@ -15,7 +14,6 @@ const FileList = _ref => {
     id: "2770071620"
   }, ["div.jsx-2770071620{padding-top:4px;}", ".file-input+div.jsx-2770071620{padding-top:0;}"]));
 };
-
 FileList.defaultProps = {
   dataTest: 'dhis2-uicore-filelist'
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/file-input",
-    "version": "9.11.0",
+    "version": "9.11.1-beta.2",
     "description": "UI FileInput",
     "repository": {
         "type": "git",
@@ -22,25 +22,25 @@
         "access": "public"
     },
     "scripts": {
-        "start": "start-storybook -c ../../storybook/config --port 5000",
+        "start": "storybook dev -c ../../storybook/config --port 5000",
         "build": "d2-app-scripts build",
         "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
     },
     "peerDependencies": {
         "@dhis2/d2-i18n": "^1.1.0",
-        "react": "^16.8",
-        "react-dom": "^16.8",
+        "react": "^16.13",
+        "react-dom": "^16.13",
         "styled-jsx": "^4"
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/button": "9.11.0",
-        "@dhis2-ui/field": "9.11.0",
-        "@dhis2-ui/label": "9.11.0",
-        "@dhis2-ui/loader": "9.11.0",
-        "@dhis2-ui/status-icon": "9.11.0",
-        "@dhis2/ui-constants": "9.11.0",
-        "@dhis2/ui-icons": "9.11.0",
+        "@dhis2-ui/button": "9.11.1-beta.2",
+        "@dhis2-ui/field": "9.11.1-beta.2",
+        "@dhis2-ui/label": "9.11.1-beta.2",
+        "@dhis2-ui/loader": "9.11.1-beta.2",
+        "@dhis2-ui/status-icon": "9.11.1-beta.2",
+        "@dhis2/ui-constants": "9.11.1-beta.2",
+        "@dhis2/ui-icons": "9.11.1-beta.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },

package/build/cjs/file-input/file-input.stories.e2e.js

@@ -1,40 +0,0 @@
-"use strict";
-
-var _react = require("@storybook/react");
-
-var _react2 = _interopRequireDefault(require("react"));
-
-var _index = require("./index.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-window.onBlur = window.Cypress && window.Cypress.cy.stub();
-window.onFocus = window.Cypress && window.Cypress.cy.stub();
-
-const onChange = (payload, event) => {
-  // NOTE: if files is not transformed into an array,
-  // cypress will get an empty file list!
-  window.onChange({ ...payload,
-    files: [...payload.files]
-  }, event);
-};
-
-(0, _react.storiesOf)('FileInput', module).add('With onChange', () => /*#__PURE__*/_react2.default.createElement(_index.FileInput, {
-  onChange: onChange,
-  buttonLabel: "Upload file",
-  name: "upload"
-})).add('With onChange and multiple', () => /*#__PURE__*/_react2.default.createElement(_index.FileInput, {
-  name: "upload",
-  onChange: onChange,
-  buttonLabel: "Upload files",
-  multiple: true
-})).add('With initialFocus and onBlur', () => /*#__PURE__*/_react2.default.createElement(_index.FileInput, {
-  buttonLabel: "Upload file",
-  name: "upload",
-  initialFocus: true,
-  onBlur: window.onBlur
-})).add('With onFocus', () => /*#__PURE__*/_react2.default.createElement(_index.FileInput, {
-  buttonLabel: "Upload file",
-  name: "upload",
-  onFocus: window.onFocus
-}));

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

@@ -1,19 +0,0 @@
-"use strict";
-
-var _react = require("@storybook/react");
-
-var _react2 = _interopRequireDefault(require("react"));
-
-var _fileInputField = require("./file-input-field.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _react.storiesOf)('FileInputField', module).add('With label and required', () => /*#__PURE__*/_react2.default.createElement(_fileInputField.FileInputField, {
-  name: "upload",
-  label: "upload something",
-  buttonLabel: "Upload file",
-  required: true
-})).add('Default', () => /*#__PURE__*/_react2.default.createElement(_fileInputField.FileInputField, {
-  name: "upload",
-  label: "upload something"
-}));

package/build/cjs/file-input-field-with-list/file-input-field-with-list.stories.e2e.js

@@ -1,53 +0,0 @@
-"use strict";
-
-var _react = require("@storybook/react");
-
-var _react2 = _interopRequireDefault(require("react"));
-
-var _index = require("./index.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-window.onChange = window.Cypress && window.Cypress.cy.stub();
-const singleFileArray = [new File([], 'dummy.txt')];
-window.duplicateFileConstructorArgs = [[], 'duplicate.md', {
-  lastModified: 1581348175357,
-  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,
-    files: [...payload.files]
-  }, event);
-};
-
-(0, _react.storiesOf)('FileInputFieldWithList', module).add('Single file - with file', () => /*#__PURE__*/_react2.default.createElement(_index.FileInputFieldWithList, {
-  buttonLabel: "Upload file",
-  name: "upload",
-  files: singleFileArray,
-  removeText: "remove",
-  onChange: onChange
-})).add('Multiple files - empty', () => /*#__PURE__*/_react2.default.createElement(_index.FileInputFieldWithList, {
-  buttonLabel: "Upload file",
-  multiple: true,
-  name: "upload",
-  removeText: "remove",
-  onChange: onChange
-})).add('Multiple files - with files', () => /*#__PURE__*/_react2.default.createElement(_index.FileInputFieldWithList, {
-  buttonLabel: "Upload file",
-  multiple: true,
-  name: "upload",
-  files: multipleFileArray,
-  removeText: "remove",
-  onChange: onChange
-})).add('With file and default texts', () => /*#__PURE__*/_react2.default.createElement(_index.FileInputFieldWithList, {
-  name: "upload",
-  files: singleFileArray,
-  onChange: onChange
-})).add('With default texts', () => /*#__PURE__*/_react2.default.createElement(_index.FileInputFieldWithList, {
-  name: "upload",
-  onChange: onChange
-}));

package/build/cjs/file-list/file-list-item.stories.e2e.js

@@ -1,38 +0,0 @@
-"use strict";
-
-var _react = require("@storybook/react");
-
-var _react2 = _interopRequireDefault(require("react"));
-
-var _fileListItem = require("./file-list-item.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-window.onRemove = window.Cypress && window.Cypress.cy.stub();
-window.onCancel = window.Cypress && window.Cypress.cy.stub();
-(0, _react.storiesOf)('FileListItem', module).add('With onRemove', () => /*#__PURE__*/_react2.default.createElement(_fileListItem.FileListItem, {
-  label: "File list item",
-  onRemove: window.onRemove,
-  removeText: "Remove"
-})).add('Loading with onCancel', () => /*#__PURE__*/_react2.default.createElement(_fileListItem.FileListItem, {
-  loading: true,
-  label: "File list item",
-  removeText: "Remove",
-  onCancel: window.onCancel,
-  cancelText: "Cancel"
-})).add('Loading with onCancel and cancelText', () => /*#__PURE__*/_react2.default.createElement(_fileListItem.FileListItem, {
-  loading: true,
-  label: "File list item",
-  removeText: "Remove",
-  onCancel: () => {},
-  onRemove: () => {},
-  cancelText: "Cancel"
-})).add('With label', () => /*#__PURE__*/_react2.default.createElement(_fileListItem.FileListItem, {
-  label: "Label",
-  removeText: "Remove",
-  onRemove: () => {}
-})).add('With removeText', () => /*#__PURE__*/_react2.default.createElement(_fileListItem.FileListItem, {
-  label: "Label",
-  removeText: "Remove",
-  onRemove: () => {}
-}));

package/build/cjs/file-list/file-list-placeholder.stories.e2e.js

@@ -1,11 +0,0 @@
-"use strict";
-
-var _react = require("@storybook/react");
-
-var _react2 = _interopRequireDefault(require("react"));
-
-var _fileListPlaceholder = require("./file-list-placeholder.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _react.storiesOf)('FileListPlaceholder', module).add('With children', () => /*#__PURE__*/_react2.default.createElement(_fileListPlaceholder.FileListPlaceholder, null, "I am a child"));

package/build/cjs/file-list/file-list.stories.e2e.js

@@ -1,11 +0,0 @@
-"use strict";
-
-var _react = require("@storybook/react");
-
-var _react2 = _interopRequireDefault(require("react"));
-
-var _fileList = require("./file-list.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _react.storiesOf)('FileList', module).add('With children', () => /*#__PURE__*/_react2.default.createElement(_fileList.FileList, null, "I am a child"));

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

@@ -1,12 +0,0 @@
-import { storiesOf } from '@storybook/react';
-import React from 'react';
-import { FileInputField } from './file-input-field.js';
-storiesOf('FileInputField', module).add('With label and required', () => /*#__PURE__*/React.createElement(FileInputField, {
-  name: "upload",
-  label: "upload something",
-  buttonLabel: "Upload file",
-  required: true
-})).add('Default', () => /*#__PURE__*/React.createElement(FileInputField, {
-  name: "upload",
-  label: "upload something"
-}));

package/build/es/file-list/file-list-placeholder.stories.e2e.js

@@ -1,4 +0,0 @@
-import { storiesOf } from '@storybook/react';
-import React from 'react';
-import { FileListPlaceholder } from './file-list-placeholder.js';
-storiesOf('FileListPlaceholder', module).add('With children', () => /*#__PURE__*/React.createElement(FileListPlaceholder, null, "I am a child"));

package/build/es/file-list/file-list.stories.e2e.js

@@ -1,4 +0,0 @@
-import { storiesOf } from '@storybook/react';
-import React from 'react';
-import { FileList } from './file-list.js';
-storiesOf('FileList', module).add('With children', () => /*#__PURE__*/React.createElement(FileList, null, "I am a child"));