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

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { InputField } from './index.js';
+export default {
+  title: 'InputField'
+};
+export const WithLabelAndRequired = () => /*#__PURE__*/React.createElement(InputField, {
+  label: "Default label",
+  name: "Default",
+  required: true
+});

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

@@ -1,10 +1,9 @@
+import { sharedPropTypes } from '@dhis2/ui-constants';
 import { Box } from '@dhis2-ui/box';
 import { Field } from '@dhis2-ui/field';
 import { Input } from '@dhis2-ui/input';
-import { sharedPropTypes } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
-
 class InputField extends React.Component {
   render() {
     const {
@@ -76,9 +75,7 @@ class InputField extends React.Component {
       autoComplete: autoComplete
     })));
   }
-
 }
-
 InputField.defaultProps = {
   dataTest: 'dhis2-uiwidgets-inputfield'
 };
@@ -87,77 +84,53 @@ const InputFieldProps = {
   autoComplete: PropTypes.string,
   className: PropTypes.string,
   dataTest: PropTypes.string,
-
   /** Makes the input smaller */
   dense: PropTypes.bool,
-
   /** Disables the input */
   disabled: PropTypes.bool,
-
   /** Applies 'error' appearance for validation feedback. Mutually exclusive with `valid` and `warning` props */
   error: sharedPropTypes.statusPropType,
-
   /** Guiding text for how to use this input */
   helpText: PropTypes.string,
-
   /** The input grabs initial focus on the page */
   initialFocus: PropTypes.bool,
-
   /** Defines the width of the input. Can be any valid CSS measurement */
   inputWidth: PropTypes.string,
-
   /** Label text for the input */
   label: PropTypes.string,
-
   /** Adds a loading indicator beside the input */
   loading: PropTypes.bool,
-
   /** The [native `max` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-max), for use when `type` is `'number'` */
   max: PropTypes.string,
-
   /** The [native `min` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-min), for use when `type` is `'number'` */
   min: PropTypes.string,
-
   /** Name associated with the input. Passed to event handler callbacks in object */
   name: PropTypes.string,
-
   /** Placeholder text for the input */
   placeholder: PropTypes.string,
-
   /** Makes the input read-only */
   readOnly: PropTypes.bool,
-
   /** Indicates this input is required */
   required: PropTypes.bool,
-
   /** The [native `step` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-step), for use when `type` is `'number'` */
   step: PropTypes.string,
   tabIndex: PropTypes.string,
-
   /** Type of input */
   type: Input.propTypes.type,
-
   /** Applies 'valid' appearance for validation feedback. Mutually exclusive with `error` and `warning` props */
   valid: sharedPropTypes.statusPropType,
-
   /** Text below input for validation feedback. Receives styles depending on validation status */
   validationText: PropTypes.string,
-
   /** Value in the input. Can be used to control the component (recommended). Passed to event handler callbacks in object */
   value: PropTypes.string,
-
   /** Applies 'warning' appearance for validation feedback. Mutually exclusive with `valid` and `error` props */
   warning: sharedPropTypes.statusPropType,
-
   /** Called with signature `({ name: string, value: string }, event)` */
   onBlur: PropTypes.func,
-
   /** Called with signature `({ name: string, value: string }, event)` */
   onChange: PropTypes.func,
-
   /** Called with signature `({ name: string, value: string }, event)` */
   onFocus: PropTypes.func,
-
   /** Called with signature `({ name: string, value: string }, event)` */
   onKeyDown: PropTypes.func
 };

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

@@ -1,19 +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 { InputField } from './index.js';
 const subtitle = 'Allows a user to enter data, usually text';
-const description = "\nInputs are used wherever a user needs to input standard text information. Inputs are often used as part of forms. An input can also be used to capture information outside of a form, perhaps as a 'Filter' or 'Search' field.\n\nInputField wraps an Input component with a label, help text, validation text, and some other features.\n\nPlease see more about options and features of inputs at [Design System: Input Field](https://github.com/dhis2/design-system/blob/master/atoms/inputfield.md#input).\n\n```js\nimport { InputField } from '@dhis2/ui'\n```\n";
+const description = `
+Inputs are used wherever a user needs to input standard text information. Inputs are often used as part of forms. An input can also be used to capture information outside of a form, perhaps as a 'Filter' or 'Search' field.
+
+InputField wraps an Input component with a label, help text, validation text, and some other features.
+
+Please see more about options and features of inputs at [Design System: Input Field](https://github.com/dhis2/design-system/blob/master/atoms/inputfield.md#input).
 
+\`\`\`js
+import { InputField } from '@dhis2/ui'
+\`\`\`
+`;
 const logger = _ref => {
   let {
     name,
     value
   } = _ref;
-  return console.log("Name: ".concat(name, ", value: ").concat(value));
+  return console.log(`Name: ${name}, value: ${value}`);
 };
-
 const inputTypeArgType = {
   table: {
     type: {
@@ -43,19 +50,21 @@ export default {
     onChange: logger
   },
   argTypes: {
-    type: { ...inputTypeArgType
+    type: {
+      ...inputTypeArgType
     },
-    valid: { ...sharedPropTypes.statusArgType
+    valid: {
+      ...sharedPropTypes.statusArgType
     },
-    warning: { ...sharedPropTypes.statusArgType
+    warning: {
+      ...sharedPropTypes.statusArgType
     },
-    error: { ...sharedPropTypes.statusArgType
+    error: {
+      ...sharedPropTypes.statusArgType
     }
   }
 };
-
 const Template = args => /*#__PURE__*/React.createElement(InputField, args);
-
 export const Default = Template.bind({});
 export const NoPlaceholderNoValue = Template.bind({});
 NoPlaceholderNoValue.storyName = 'No placeholder, no value';
@@ -65,7 +74,8 @@ PlaceholderNoValue.args = {
 };
 PlaceholderNoValue.storyName = 'Placeholder, no value';
 export const WithHelpText = Template.bind({});
-WithHelpText.args = { ...PlaceholderNoValue.args,
+WithHelpText.args = {
+  ...PlaceholderNoValue.args,
   helpText: 'With some helping text to guide the user along'
 };
 export const WithValue = Template.bind({});
@@ -75,8 +85,8 @@ WithValue.args = {
 export const Focus = Template.bind({});
 Focus.args = {
   initialFocus: true
-}; // Disabled initial focus stories on docs page
-
+};
+// Disabled initial focus stories on docs page
 Focus.parameters = {
   docs: {
     disable: true

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/input",
-    "version": "9.11.0",
+    "version": "9.11.1-beta.2",
     "description": "UI Input",
     "repository": {
         "type": "git",
@@ -22,24 +22,24 @@
         "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": {
-        "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/box": "9.11.0",
-        "@dhis2-ui/field": "9.11.0",
-        "@dhis2-ui/input": "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/box": "9.11.1-beta.2",
+        "@dhis2-ui/field": "9.11.1-beta.2",
+        "@dhis2-ui/input": "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/input/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.onChange = window.Cypress && window.Cypress.cy.stub();
-window.onBlur = window.Cypress && window.Cypress.cy.stub();
-window.onFocus = window.Cypress && window.Cypress.cy.stub();
-(0, _react.storiesOf)('Input', module).add('With onChange', () => /*#__PURE__*/_react2.default.createElement(_index.Input, {
-  label: "Default label",
-  name: "Default",
-  value: "",
-  onChange: window.onChange
-})).add('With initialFocus and onBlur', () => /*#__PURE__*/_react2.default.createElement(_index.Input, {
-  label: "Default label",
-  name: "Default",
-  value: "",
-  initialFocus: true,
-  onBlur: window.onBlur
-})).add('With onFocus', () => /*#__PURE__*/_react2.default.createElement(_index.Input, {
-  label: "Default label",
-  name: "Default",
-  value: "",
-  onFocus: window.onFocus
-})).add('With initialFocus', () => /*#__PURE__*/_react2.default.createElement(_index.Input, {
-  label: "Default label",
-  name: "Default",
-  value: "",
-  initialFocus: true
-})).add('With disabled', () => /*#__PURE__*/_react2.default.createElement(_index.Input, {
-  label: "Default label",
-  name: "Default",
-  value: "",
-  disabled: true
-}));

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

@@ -1,15 +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 }; }
-
-(0, _react.storiesOf)('InputField', module).add('With label and required', () => /*#__PURE__*/_react2.default.createElement(_index.InputField, {
-  label: "Default label",
-  name: "Default",
-  required: true
-}));

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

@@ -1,8 +0,0 @@
-import { storiesOf } from '@storybook/react';
-import React from 'react';
-import { InputField } from './index.js';
-storiesOf('InputField', module).add('With label and required', () => /*#__PURE__*/React.createElement(InputField, {
-  label: "Default label",
-  name: "Default",
-  required: true
-}));