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

package/build/cjs/index.js

@@ -21,7 +21,5 @@ Object.defineProperty(exports, "InputFieldProps", {
     return _index2.InputFieldProps;
   }
 });
-
 var _index = require("./input/index.js");
-
 var _index2 = require("./input-field/index.js");

package/build/cjs/input/__tests__/input.test.js

@@ -1,17 +1,11 @@
 "use strict";
 
 var _react = require("@testing-library/react");
-
 var _enzyme = require("enzyme");
-
 var _react2 = _interopRequireDefault(require("react"));
-
 var _input = require("../input.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
 describe('<Input>', () => {
   it('passes min, max, and step props as attributes to the native <input> element', () => {
     const testProps = {
@@ -32,9 +26,7 @@ describe('<Input>', () => {
       value: "bar",
       onKeyDown: onKeyDown
     }));
-
     _react.fireEvent.keyDown(_react.screen.getByRole('textbox'), {});
-
     expect(onKeyDown).toHaveBeenCalledWith({
       name: 'foo',
       value: 'bar'

package/build/cjs/input/features/accepts_initial_focus/index.js

@@ -1,9 +1,8 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a Input with initialFocus is rendered', () => {
-  cy.visitStory('Input', 'With initialFocus');
+  cy.visitStory('Input', 'With initial focus');
 });
 (0, _cypressCucumberPreprocessor.Then)('the Input is focused', () => {
   cy.focused().parent('[data-test="dhis2-uicore-input"]').should('exist');

package/build/cjs/input/features/can_be_blurred/index.js

@@ -1,9 +1,8 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('an Input with initialFocus and onBlur handler is rendered', () => {
-  cy.visitStory('Input', 'With initialFocus and onBlur');
+  cy.visitStory('Input', 'With initial focus and on blur');
 });
 (0, _cypressCucumberPreprocessor.When)('the Input is blurred', () => {
   cy.get('[data-test="dhis2-uicore-input"] input').blur();

package/build/cjs/input/features/can_be_changed/index.js

@@ -1,9 +1,8 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a Input with onChange handler is rendered', () => {
-  cy.visitStory('Input', 'With onChange');
+  cy.visitStory('Input', 'With on change');
 });
 (0, _cypressCucumberPreprocessor.When)('the Input is filled with a character', () => {
   cy.get('[data-test="dhis2-uicore-input"]').click().type('a');

package/build/cjs/input/features/can_be_disabled/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a disabled Input is rendered', () => {
   cy.visitStory('Input', 'With disabled');
 });

package/build/cjs/input/features/can_be_focused/index.js

@@ -1,9 +1,8 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a Input with onFocus handler is rendered', () => {
-  cy.visitStory('Input', 'With onFocus');
+  cy.visitStory('Input', 'With on focus');
 });
 (0, _cypressCucumberPreprocessor.When)('the Input is focused', () => {
   cy.get('[data-test="dhis2-uicore-input"] input').focus();

package/build/cjs/input/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "Input", {
     return _input.Input;
   }
 });
-
 var _input = require("./input.js");

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

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithOnFocus = exports.WithOnChange = exports.WithInitialFocusAndOnBlur = exports.WithInitialFocus = exports.WithDisabled = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _index = require("./index.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+window.onChange = window.Cypress && window.Cypress.cy.stub();
+window.onBlur = window.Cypress && window.Cypress.cy.stub();
+window.onFocus = window.Cypress && window.Cypress.cy.stub();
+var _default = exports.default = {
+  title: 'Input'
+};
+const WithOnChange = () => /*#__PURE__*/_react.default.createElement(_index.Input, {
+  label: "Default label",
+  name: "Default",
+  value: "",
+  onChange: window.onChange
+});
+exports.WithOnChange = WithOnChange;
+const WithInitialFocusAndOnBlur = () => /*#__PURE__*/_react.default.createElement(_index.Input, {
+  label: "Default label",
+  name: "Default",
+  value: "",
+  initialFocus: true,
+  onBlur: window.onBlur
+});
+exports.WithInitialFocusAndOnBlur = WithInitialFocusAndOnBlur;
+const WithOnFocus = () => /*#__PURE__*/_react.default.createElement(_index.Input, {
+  label: "Default label",
+  name: "Default",
+  value: "",
+  onFocus: window.onFocus
+});
+exports.WithOnFocus = WithOnFocus;
+const WithInitialFocus = () => /*#__PURE__*/_react.default.createElement(_index.Input, {
+  label: "Default label",
+  name: "Default",
+  value: "",
+  initialFocus: true
+});
+exports.WithInitialFocus = WithInitialFocus;
+const WithDisabled = () => /*#__PURE__*/_react.default.createElement(_index.Input, {
+  label: "Default label",
+  name: "Default",
+  value: "",
+  disabled: true
+});
+exports.WithDisabled = WithDisabled;

package/build/cjs/input/input.js

@@ -4,74 +4,56 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Input = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
-var _statusIcon = require("@dhis2-ui/status-icon");
-
 var _uiConstants = require("@dhis2/ui-constants");
-
+var _statusIcon = require("@dhis2-ui/status-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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; }
-
-const styles = [".input.jsx-31445346{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(_uiConstants.spacers.dp8, ";}"), "input.jsx-31445346{box-sizing:border-box;font-size:14px;line-height:16px;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;color:".concat(_uiConstants.colors.grey900, ";background-color:white;padding:11px 12px;max-height:40px;outline:0;border:1px solid ").concat(_uiConstants.colors.grey500, ";border-radius:3px;box-shadow:inset 0 0 1px 0 rgba(48,54,60,0.1);text-overflow:ellipsis;}"), "input.dense.jsx-31445346{max-height:32px;padding:7px 8px;}", "input.jsx-31445346:focus{outline:none;box-shadow:inset 0 0 0 2px ".concat(_uiConstants.theme.focus, ";border-color:").concat(_uiConstants.theme.focus, ";}"), "input.jsx-31445346::-webkit-input-placeholder{color:".concat(_uiConstants.colors.grey600, ";opacity:1;}"), "input.jsx-31445346::-moz-placeholder{color:".concat(_uiConstants.colors.grey600, ";opacity:1;}"), "input.jsx-31445346:-ms-input-placeholder{color:".concat(_uiConstants.colors.grey600, ";opacity:1;}"), "input.jsx-31445346::placeholder{color:".concat(_uiConstants.colors.grey600, ";opacity:1;}"), "input[type='date'].jsx-31445346::-webkit-inner-spin-button,input[type='date'].jsx-31445346::-webkit-calendar-picker-indicator,input[type='time'].jsx-31445346::-webkit-inner-spin-button,input[type='time'].jsx-31445346::-webkit-calendar-picker-indicator,input[type='datetime-local'].jsx-31445346::-webkit-inner-spin-button,input[type='datetime-local'].jsx-31445346::-webkit-calendar-picker-indicator{height:14px;padding-top:1px;padding-bottom:1px;}", "input[type='date'].jsx-31445346::-webkit-datetime-edit-fields-wrapper,input[type='datetime-local'].jsx-31445346::-webkit-datetime-edit-fields-wrapper,input[type='time'].jsx-31445346::-webkit-datetime-edit-fields-wrapper{padding:0;}", "input.warning.jsx-31445346{border-color:".concat(_uiConstants.theme.warning, ";}"), "input.error.jsx-31445346{border-color:".concat(_uiConstants.theme.error, ";}"), "input.read-only.jsx-31445346{background-color:".concat(_uiConstants.colors.grey050, ";border-color:").concat(_uiConstants.colors.grey300, ";box-shadow:none;cursor:text;}"), "input.disabled.jsx-31445346{background-color:".concat(_uiConstants.colors.grey100, ";border-color:").concat(_uiConstants.colors.grey500, ";color:").concat(_uiConstants.theme.disabled, ";cursor:not-allowed;}")];
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+const styles = [`.input.jsx-31445346{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:${_uiConstants.spacers.dp8};}`, `input.jsx-31445346{box-sizing:border-box;font-size:14px;line-height:16px;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;color:${_uiConstants.colors.grey900};background-color:white;padding:11px 12px;max-height:40px;outline:0;border:1px solid ${_uiConstants.colors.grey500};border-radius:3px;box-shadow:inset 0 0 1px 0 rgba(48,54,60,0.1);text-overflow:ellipsis;}`, "input.dense.jsx-31445346{max-height:32px;padding:7px 8px;}", `input.jsx-31445346:focus{outline:none;box-shadow:inset 0 0 0 2px ${_uiConstants.theme.focus};border-color:${_uiConstants.theme.focus};}`, `input.jsx-31445346::-webkit-input-placeholder{color:${_uiConstants.colors.grey600};opacity:1;}`, `input.jsx-31445346::-moz-placeholder{color:${_uiConstants.colors.grey600};opacity:1;}`, `input.jsx-31445346:-ms-input-placeholder{color:${_uiConstants.colors.grey600};opacity:1;}`, `input.jsx-31445346::placeholder{color:${_uiConstants.colors.grey600};opacity:1;}`, "input[type='date'].jsx-31445346::-webkit-inner-spin-button,input[type='date'].jsx-31445346::-webkit-calendar-picker-indicator,input[type='time'].jsx-31445346::-webkit-inner-spin-button,input[type='time'].jsx-31445346::-webkit-calendar-picker-indicator,input[type='datetime-local'].jsx-31445346::-webkit-inner-spin-button,input[type='datetime-local'].jsx-31445346::-webkit-calendar-picker-indicator{height:14px;padding-top:1px;padding-bottom:1px;}", "input[type='date'].jsx-31445346::-webkit-datetime-edit-fields-wrapper,input[type='datetime-local'].jsx-31445346::-webkit-datetime-edit-fields-wrapper,input[type='time'].jsx-31445346::-webkit-datetime-edit-fields-wrapper{padding:0;}", `input.warning.jsx-31445346{border-color:${_uiConstants.theme.warning};}`, `input.error.jsx-31445346{border-color:${_uiConstants.theme.error};}`, `input.read-only.jsx-31445346{background-color:${_uiConstants.colors.grey050};border-color:${_uiConstants.colors.grey300};box-shadow:none;cursor:text;}`, `input.disabled.jsx-31445346{background-color:${_uiConstants.colors.grey100};border-color:${_uiConstants.colors.grey500};color:${_uiConstants.theme.disabled};cursor:not-allowed;}`];
 styles.__hash = "31445346";
-
 class Input extends _react.Component {
   constructor() {
     super(...arguments);
-
     _defineProperty(this, "inputRef", /*#__PURE__*/_react.default.createRef());
-
     _defineProperty(this, "handleChange", e => {
       if (this.props.onChange) {
         this.props.onChange(this.createHandlerPayload(e), e);
       }
     });
-
     _defineProperty(this, "handleBlur", e => {
       if (this.props.onBlur) {
         this.props.onBlur(this.createHandlerPayload(e), e);
       }
     });
-
     _defineProperty(this, "handleFocus", e => {
       if (this.props.onFocus) {
         this.props.onFocus(this.createHandlerPayload(e), e);
       }
     });
-
     _defineProperty(this, "handleKeyDown", e => {
       if (this.props.onKeyDown) {
         this.props.onKeyDown(this.createHandlerPayload(e), e);
       }
     });
   }
-
   componentDidMount() {
     if (this.props.initialFocus) {
       this.inputRef.current.focus();
     }
   }
-
   createHandlerPayload(e) {
     return {
       value: e.target.value,
       name: this.props.name
     };
   }
-
   render() {
     const {
       role,
@@ -96,7 +78,7 @@ class Input extends _react.Component {
     } = this.props;
     return /*#__PURE__*/_react.default.createElement("div", {
       "data-test": dataTest,
-      className: "jsx-3353877153 " + "jsx-".concat(styles.__hash) + " " + ((0, _classnames.default)('input', className) || "")
+      className: "jsx-3353877153 " + `jsx-${styles.__hash}` + " " + ((0, _classnames.default)('input', className) || "")
     }, /*#__PURE__*/_react.default.createElement("input", {
       role: role,
       id: name,
@@ -116,7 +98,7 @@ class Input extends _react.Component {
       onBlur: this.handleBlur,
       onChange: this.handleChange,
       onKeyDown: this.handleKeyDown,
-      className: "jsx-3353877153 " + "jsx-".concat(styles.__hash) + " " + ((0, _classnames.default)({
+      className: "jsx-3353877153 " + `jsx-${styles.__hash}` + " " + ((0, _classnames.default)({
         dense,
         disabled,
         error,
@@ -135,9 +117,7 @@ class Input extends _react.Component {
       id: "3353877153"
     }, ["input.jsx-3353877153{width:100%;}"]));
   }
-
 }
-
 exports.Input = Input;
 Input.defaultProps = {
   type: 'text',
@@ -148,65 +128,45 @@ Input.propTypes = {
   autoComplete: _propTypes.default.string,
   className: _propTypes.default.string,
   dataTest: _propTypes.default.string,
-
   /** Makes the input smaller */
   dense: _propTypes.default.bool,
-
   /** Disables the input */
   disabled: _propTypes.default.bool,
-
   /** Applies 'error' appearance for validation feedback. Mutually exclusive with `valid` and `warning` props */
   error: _uiConstants.sharedPropTypes.statusPropType,
-
   /** The input grabs initial focus on the page */
   initialFocus: _propTypes.default.bool,
-
   /** Adds a loading indicator beside the input */
   loading: _propTypes.default.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.default.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.default.string,
-
   /** Name associated with the input. Passed to event handler callbacks in object */
   name: _propTypes.default.string,
-
   /** Placeholder text for the input */
   placeholder: _propTypes.default.string,
-
   /** Makes the input read-only */
   readOnly: _propTypes.default.bool,
-
   /** Sets a role attribute on the input */
   role: _propTypes.default.string,
-
   /** 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.default.string,
   tabIndex: _propTypes.default.string,
-
   /** The native input `type` attribute */
   type: _propTypes.default.oneOf(['text', 'number', 'password', 'email', 'url', 'tel', 'date', 'datetime', 'datetime-local', 'month', 'week', 'time', 'search']),
-
   /** Applies 'valid' appearance for validation feedback. Mutually exclusive with `error` and `warning` props */
   valid: _uiConstants.sharedPropTypes.statusPropType,
-
   /** Value in the input. Can be used to control the component (recommended). Passed to event handler callbacks in object */
   value: _propTypes.default.string,
-
   /** Applies 'warning' appearance for validation feedback. Mutually exclusive with `valid` and `error` props */
   warning: _uiConstants.sharedPropTypes.statusPropType,
-
   /** Called with signature `({ name: string, value: string }, event)` */
   onBlur: _propTypes.default.func,
-
   /** Called with signature `({ name: string, value: string }, event)` */
   onChange: _propTypes.default.func,
-
   /** Called with signature `({ name: string, value: string }, event)` */
   onFocus: _propTypes.default.func,
-
   /** Called with signature `({ name: string, value: string }, event)` */
   onKeyDown: _propTypes.default.func
 };

package/build/cjs/input/{input.stories.js → input.prod.stories.js}

@@ -4,16 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.WithValue = exports.ValueTextOverflow = exports.StatusWarning = exports.StatusValid = exports.StatusLoading = exports.StatusError = exports.ReadOnly = exports.RTLErrorPlaceholder = exports.PlaceholderNoValue = exports.NumberMaxMinStep = exports.NoPlaceholderNoValue = exports.Focus = exports.Disabled = exports.Dense = exports.Default = void 0;
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _index = require("./index.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const description = `
+An input allows a user to enter data, usually text.
+
+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.
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+To use a label and validation text, consider the \`InputField\` component.
 
-const description = "\nAn input allows a user to enter data, usually text.\n\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\nTo use a label and validation text, consider the `InputField` component.\n\nRead more about Inputs and InputFields at [Design System: Inputs](https://github.com/dhis2/design-system/blob/master/atoms/inputfield.md).\n\n```js\nimport { Input } from '@dhis/ui'\n```\n";
+Read more about Inputs and InputFields at [Design System: Inputs](https://github.com/dhis2/design-system/blob/master/atoms/inputfield.md).
+
+\`\`\`js
+import { Input } from '@dhis/ui'
+\`\`\`
+`;
 const inputTypeArgType = {
   table: {
     type: {
@@ -25,16 +32,14 @@ const inputTypeArgType = {
     options: ['text', 'number', 'password', 'email', 'url', 'tel', 'date', 'datetime', 'datetime-local', 'month', 'week', 'time', 'search']
   }
 };
-
 const logger = _ref => {
   let {
     name,
     value
   } = _ref;
-  return console.log("Name: ".concat(name, ", value: ").concat(value));
+  return console.log(`Name: ${name}, value: ${value}`);
 };
-
-var _default = {
+var _default = exports.default = {
   title: 'Input',
   component: _index.Input,
   parameters: {
@@ -49,113 +54,98 @@ var _default = {
     onChange: logger
   },
   argTypes: {
-    type: { ...inputTypeArgType
+    type: {
+      ...inputTypeArgType
     },
-    valid: { ..._uiConstants.sharedPropTypes.statusArgType
+    valid: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     },
-    warning: { ..._uiConstants.sharedPropTypes.statusArgType
+    warning: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     },
-    error: { ..._uiConstants.sharedPropTypes.statusArgType
+    error: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     }
   }
 };
-exports.default = _default;
-
 const Template = args => /*#__PURE__*/_react.default.createElement(_index.Input, args);
-
-const Default = Template.bind({});
-exports.Default = Default;
-const NoPlaceholderNoValue = Template.bind({});
-exports.NoPlaceholderNoValue = NoPlaceholderNoValue;
+const Default = exports.Default = Template.bind({});
+const NoPlaceholderNoValue = exports.NoPlaceholderNoValue = Template.bind({});
 NoPlaceholderNoValue.storyName = 'No placeholder, no value';
-const PlaceholderNoValue = Template.bind({});
-exports.PlaceholderNoValue = PlaceholderNoValue;
+const PlaceholderNoValue = exports.PlaceholderNoValue = Template.bind({});
 PlaceholderNoValue.args = {
   placeholder: 'Hold the place'
 };
 PlaceholderNoValue.storyName = 'Placeholder, no value';
-const WithValue = Template.bind({});
-exports.WithValue = WithValue;
+const WithValue = exports.WithValue = Template.bind({});
 WithValue.args = {
   value: 'This is set through the value prop, which means the component is controlled.'
 };
-const NumberMaxMinStep = Template.bind({});
-exports.NumberMaxMinStep = NumberMaxMinStep;
+const NumberMaxMinStep = exports.NumberMaxMinStep = Template.bind({});
 NumberMaxMinStep.args = {
   type: 'number',
   max: '3',
   min: '0',
   step: '0.5'
 };
-const Focus = Template.bind({});
-exports.Focus = Focus;
+const Focus = exports.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
   }
 };
-const StatusValid = Template.bind({});
-exports.StatusValid = StatusValid;
+const StatusValid = exports.StatusValid = Template.bind({});
 StatusValid.args = {
   valid: true,
   value: 'This value is valid'
 };
 StatusValid.storyName = 'Status: Valid';
-const StatusWarning = Template.bind({});
-exports.StatusWarning = StatusWarning;
+const StatusWarning = exports.StatusWarning = Template.bind({});
 StatusWarning.args = {
   warning: true,
   value: 'This value produces a warning'
 };
 StatusWarning.storyName = 'Status: Warning';
-const StatusError = Template.bind({});
-exports.StatusError = StatusError;
+const StatusError = exports.StatusError = Template.bind({});
 StatusError.args = {
   error: true,
   value: 'This value produces an error'
 };
 StatusError.storyName = 'Status: Error';
-const StatusLoading = Template.bind({});
-exports.StatusLoading = StatusLoading;
+const StatusLoading = exports.StatusLoading = Template.bind({});
 StatusLoading.args = {
   loading: true,
   value: 'This value produces a loading state'
 };
 StatusLoading.storyName = 'Status: Loading';
-const Disabled = Template.bind({});
-exports.Disabled = Disabled;
+const Disabled = exports.Disabled = Template.bind({});
 Disabled.args = {
   disabled: true,
   value: 'This field is disabled'
 };
-const ReadOnly = Template.bind({});
-exports.ReadOnly = ReadOnly;
+const ReadOnly = exports.ReadOnly = Template.bind({});
 ReadOnly.args = {
   readOnly: true,
   value: 'This field is read-only'
 };
-const Dense = Template.bind({});
-exports.Dense = Dense;
+const Dense = exports.Dense = Template.bind({});
 Dense.args = {
   dense: true,
   value: 'This field is dense'
 };
-const ValueTextOverflow = Template.bind({});
-exports.ValueTextOverflow = ValueTextOverflow;
+const ValueTextOverflow = exports.ValueTextOverflow = Template.bind({});
 ValueTextOverflow.args = {
   value: "This value is too long in order to show on a single line of the input field. It should stay on one line, not in an extra line and which wouldn't look like a standard input",
   dense: true,
   warning: true
 };
-
 const RTLErrorPlaceholder = args => /*#__PURE__*/_react.default.createElement("div", {
   dir: "rtl"
 }, /*#__PURE__*/_react.default.createElement(_index.Input, args));
-
 exports.RTLErrorPlaceholder = RTLErrorPlaceholder;
 RTLErrorPlaceholder.args = {
   error: true,

package/build/cjs/input-field/__tests__/input-field.test.js

@@ -1,13 +1,9 @@
 "use strict";
 
 var _react = require("@testing-library/react");
-
 var _react2 = _interopRequireDefault(require("react"));
-
 var _inputField = require("../input-field.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 describe('<Input>', () => {
   it('should call the onKeyDown callback when provided', () => {
     const onKeyDown = jest.fn();
@@ -17,9 +13,7 @@ describe('<Input>', () => {
       value: "bar",
       onKeyDown: onKeyDown
     }));
-
     _react.fireEvent.keyDown(_react.screen.getByRole('textbox'), {});
-
     expect(onKeyDown).toHaveBeenCalledWith({
       name: 'foo',
       value: 'bar'

package/build/cjs/input-field/features/can_be_required/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a InputField with label and a required flag is rendered', () => {
   cy.visitStory('InputField', 'With label and required');
 });

package/build/cjs/input-field/index.js

@@ -15,5 +15,4 @@ Object.defineProperty(exports, "InputFieldProps", {
     return _inputField.InputFieldProps;
   }
 });
-
 var _inputField = require("./input-field.js");

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithLabelAndRequired = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _index = require("./index.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'InputField'
+};
+const WithLabelAndRequired = () => /*#__PURE__*/_react.default.createElement(_index.InputField, {
+  label: "Default label",
+  name: "Default",
+  required: true
+});
+exports.WithLabelAndRequired = WithLabelAndRequired;