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

package/build/cjs/CheckboxFieldFF/{CheckboxFieldFF.stories.e2e.js → CheckboxFieldFF.e2e.stories.js}

@@ -1,22 +1,22 @@
 "use strict";
 
-var _react = require("@storybook/react");
-
-var _react2 = _interopRequireDefault(require("react"));
-
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.UncheckedWithValue = exports.Unchecked = exports.CheckedWithValue = exports.Checked = void 0;
+var _react = _interopRequireDefault(require("react"));
 var _reactFinalForm = require("react-final-form");
-
 var _formDecorator = require("../formDecorator.js");
-
 var _index = require("../validators/index.js");
-
 var _CheckboxFieldFF = require("./CheckboxFieldFF.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // https://github.com/final-form/react-final-form-arrays/issues/111
 const initialValue = ['yes'];
-(0, _react.storiesOf)('Testing:Checkbox', module).addDecorator(_formDecorator.formDecorator).add('Unchecked', () => /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
+var _default = exports.default = {
+  title: 'Testing:Checkbox',
+  decorators: [_formDecorator.formDecorator]
+};
+const Unchecked = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
   type: "checkbox",
   component: _CheckboxFieldFF.CheckboxFieldFF,
   className: "checkbox",
@@ -24,21 +24,27 @@ const initialValue = ['yes'];
   label: "Label text",
   validate: _index.hasValue,
   required: true
-})).add('Checked ', () => /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
+});
+exports.Unchecked = Unchecked;
+const Checked = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
   type: "checkbox",
   component: _CheckboxFieldFF.CheckboxFieldFF,
   className: "checkbox",
   name: "checkbox",
   label: "Label text",
   initialValue: true
-})).add('Unchecked with value', () => /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
+});
+exports.Checked = Checked;
+const UncheckedWithValue = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
   type: "checkbox",
   component: _CheckboxFieldFF.CheckboxFieldFF,
   className: "checkbox",
   name: "checkbox",
   label: "Label text",
   value: "yes"
-})).add('Checked with value', () => /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
+});
+exports.UncheckedWithValue = UncheckedWithValue;
+const CheckedWithValue = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
   type: "checkbox",
   component: _CheckboxFieldFF.CheckboxFieldFF,
   className: "checkbox",
@@ -46,4 +52,5 @@ const initialValue = ['yes'];
   label: "Label text",
   value: "yes",
   initialValue: initialValue
-}));
+});
+exports.CheckedWithValue = CheckedWithValue;

package/build/cjs/CheckboxFieldFF/CheckboxFieldFF.js

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CheckboxFieldFF = void 0;
-
 var _checkbox = require("@dhis2-ui/checkbox");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _helpers = require("../shared/helpers.js");
-
 var _propTypes2 = require("../shared/propTypes.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); }
 const CheckboxFieldFF = _ref => {
   let {
     error,
@@ -43,12 +35,10 @@ const CheckboxFieldFF = _ref => {
     onBlur: (0, _helpers.createBlurHandler)(input, onBlur)
   }));
 };
-
 exports.CheckboxFieldFF = CheckboxFieldFF;
 CheckboxFieldFF.propTypes = {
   /** Provided by Final Form `Field` */
   input: _propTypes2.inputPropType.isRequired,
-
   /** Provided by Final Form `Field` */
   meta: _propTypes2.metaPropType.isRequired,
   error: _propTypes.default.bool,

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

@@ -4,23 +4,39 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ValueWhenChecked = exports.Statuses = exports.RequiredWithValidate = exports.HelpText = exports.Disabled = exports.Default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _reactFinalForm = require("react-final-form");
-
 var _formDecorator = require("../formDecorator.js");
-
 var _propTypes = require("../shared/propTypes.js");
-
 var _index = require("../validators/index.js");
-
 var _CheckboxFieldFF = require("./CheckboxFieldFF.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const description = `
+The \`CheckboxFieldFF\` is a wrapper around a \`CheckboxField\` that enables it to work with Final Form, the preferred library for form validation and utilities in DHIS 2 apps.
+
+#### Final Form
+
+See how to use Final Form at [Final Form - Getting Started](https://final-form.org/docs/react-final-form/getting-started).
+
+Inside a Final Form \`<Form>\` component, these 'FF' UI components are intended to be used in the \`component\` prop of the [Final Form \`<Field>\` components](https://final-form.org/docs/react-final-form/api/Field) where they will receive some props from the Field, e.g. \`<Field component={CheckboxFieldFF} />\`.  See the code samples below for examples.
+
+#### Props
+
+The props shown in the table below are generally provided to the \`CheckboxFieldFF\` wrapper by the Final Form \`Field\`.
+
+Note that any props beyond the API of the \`Field\` component will be spread to the \`CheckboxFieldFF\`, which passes any extra props to the underlying \`CheckboxField\` using \`{...rest}\`.
+
+Therefore, to add any props to the \`CheckboxFieldFF\` or \`CheckboxField\`, add those props to the parent Final Form \`Field\` component.
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+Also see \`Checkbox\` and \`CheckboxField\` for notes about props and implementation.
 
-const description = "\nThe `CheckboxFieldFF` is a wrapper around a `CheckboxField` that enables it to work with Final Form, the preferred library for form validation and utilities in DHIS 2 apps.\n\n#### Final Form\n\nSee how to use Final Form at [Final Form - Getting Started](https://final-form.org/docs/react-final-form/getting-started).\n\nInside a Final Form `<Form>` component, these 'FF' UI components are intended to be used in the `component` prop of the [Final Form `<Field>` components](https://final-form.org/docs/react-final-form/api/Field) where they will receive some props from the Field, e.g. `<Field component={CheckboxFieldFF} />`.  See the code samples below for examples.\n\n#### Props\n\nThe props shown in the table below are generally provided to the `CheckboxFieldFF` wrapper by the Final Form `Field`.\n\nNote that any props beyond the API of the `Field` component will be spread to the `CheckboxFieldFF`, which passes any extra props to the underlying `CheckboxField` using `{...rest}`.\n\nTherefore, to add any props to the `CheckboxFieldFF` or `CheckboxField`, add those props to the parent Final Form `Field` component.\n\nAlso see `Checkbox` and `CheckboxField` for notes about props and implementation.\n\n```js\nimport { CheckboxFieldFF } from '@dhis2/ui'\n```\n\nPress **Submit** to see the form values logged to the console.\n";
-var _default = {
+\`\`\`js
+import { CheckboxFieldFF } from '@dhis2/ui'
+\`\`\`
+
+Press **Submit** to see the form values logged to the console.
+`;
+var _default = exports.default = {
   title: 'Checkbox Field (Final Form)',
   component: _CheckboxFieldFF.CheckboxFieldFF,
   decorators: [_formDecorator.formDecorator],
@@ -32,23 +48,21 @@ var _default = {
     }
   },
   argTypes: {
-    input: { ..._propTypes.inputArgType
+    input: {
+      ..._propTypes.inputArgType
     },
-    meta: { ..._propTypes.metaArgType
+    meta: {
+      ..._propTypes.metaArgType
     }
   }
 };
-exports.default = _default;
-
 const Default = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
   type: "checkbox",
   component: _CheckboxFieldFF.CheckboxFieldFF,
   name: "agree",
   label: "Do you agree?"
 });
-
 exports.Default = Default;
-
 const RequiredWithValidate = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
   type: "checkbox",
   name: "agree",
@@ -58,9 +72,7 @@ const RequiredWithValidate = () => /*#__PURE__*/_react.default.createElement(_re
   label: "Do you agree?",
   value: "yes"
 });
-
 exports.RequiredWithValidate = RequiredWithValidate;
-
 const Disabled = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
   type: "checkbox",
   name: "agree",
@@ -68,9 +80,7 @@ const Disabled = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm
   disabled: true,
   label: "Do you agree?"
 });
-
 exports.Disabled = Disabled;
-
 const HelpText = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
   type: "checkbox",
   name: "agree",
@@ -78,10 +88,8 @@ const HelpText = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm
   label: "Do you agree?",
   helpText: "Click to agree"
 });
-
 exports.HelpText = HelpText;
 HelpText.storyName = 'Help text';
-
 const Statuses = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
   type: "checkbox",
   name: "valid",
@@ -104,9 +112,7 @@ const Statuses = () => /*#__PURE__*/_react.default.createElement(_react.default.
   error: true,
   validationText: "Validation text"
 }));
-
 exports.Statuses = Statuses;
-
 const ValueWhenChecked = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
   type: "checkbox",
   name: "bool",
@@ -128,5 +134,4 @@ const ValueWhenChecked = () => /*#__PURE__*/_react.default.createElement(_react.
   value: "another-checked-value",
   helpText: "Click submit and check the console"
 }));
-
 exports.ValueWhenChecked = ValueWhenChecked;

package/build/cjs/CheckboxFieldFF/features/can_toggle_a_boolean/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('an unchecked Checkbox without value is rendered', () => {
   cy.visitStory('Testing:Checkbox', 'Unchecked');
   cy.verifyFormValue('checkbox', undefined);

package/build/cjs/CheckboxFieldFF/features/can_toggle_a_value/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('an unchecked Checkbox with a value is rendered', () => {
   cy.visitStory('Testing:Checkbox', 'Unchecked with value');
   cy.verifyFormValue('checkbox', undefined);

package/build/cjs/CheckboxFieldFF/features/common/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.When)('the user clicks on the Checkbox', () => {
   cy.get('[data-test="dhis2-uicore-checkbox"]').click();
 });

package/build/cjs/CheckboxFieldFF/features/displays_error/index.js

@@ -1,9 +1,7 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 var _hasValue = require("../../../validators/hasValue.js");
-
 (0, _cypressCucumberPreprocessor.Given)('an unchecked Checkbox is rendered', () => {
   cy.visitStory('Testing:Checkbox', 'Unchecked');
   cy.verifyFormValue('checkbox', undefined);

package/build/cjs/FieldGroupFF/FieldGroupFF.js

@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FieldGroupFF = void 0;
-
 var _field = require("@dhis2-ui/field");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _reactFinalForm = require("react-final-form");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const FieldGroupFF = _ref => {
   let {
     name,
@@ -35,7 +29,6 @@ const FieldGroupFF = _ref => {
   });
   const isError = !!error && !!touched;
   let errorText;
-
   if (isError) {
     if (typeof error === 'string') {
       errorText = error;
@@ -45,7 +38,6 @@ const FieldGroupFF = _ref => {
       errorText = null;
     }
   }
-
   return /*#__PURE__*/_react.default.createElement(_field.FieldGroup, {
     label: label,
     required: required,
@@ -54,7 +46,6 @@ const FieldGroupFF = _ref => {
     validationText: errorText
   }, children);
 };
-
 exports.FieldGroupFF = FieldGroupFF;
 FieldGroupFF.propTypes = {
   children: _propTypes.default.node,

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

@@ -4,23 +4,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _reactFinalForm = require("react-final-form");
-
 var _CheckboxFieldFF = require("../CheckboxFieldFF/CheckboxFieldFF.js");
-
 var _formDecorator = require("../formDecorator.js");
-
 var _index = require("../validators/index.js");
-
 var _FieldGroupFF = require("./FieldGroupFF.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const description = `
+This component is intended for use with [Final Form](https://final-form.org/docs/react-final-form/getting-started), the preferred library for form validation and utilities in DHIS 2 apps.
+
+\`FieldGroupFF\` groups related fields (using the Final Form \`<Field>\`), like checkboxes, and adds a label and name.
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+\`\`\`js
+import { FieldGroupFF } from '@dhis2/ui'
+\`\`\`
 
-const description = "\nThis component is intended for use with [Final Form](https://final-form.org/docs/react-final-form/getting-started), the preferred library for form validation and utilities in DHIS 2 apps.\n\n`FieldGroupFF` groups related fields (using the Final Form `<Field>`), like checkboxes, and adds a label and name.\n\n```js\nimport { FieldGroupFF } from '@dhis2/ui'\n```\n\nPress **Submit** to see the form values logged to the console.\n";
-var _default = {
+Press **Submit** to see the form values logged to the console.
+`;
+var _default = exports.default = {
   title: 'Field Group (Final Form)',
   component: _FieldGroupFF.FieldGroupFF,
   decorators: [_formDecorator.formDecorator],
@@ -32,8 +34,6 @@ var _default = {
     }
   }
 };
-exports.default = _default;
-
 const Default = () => /*#__PURE__*/_react.default.createElement(_FieldGroupFF.FieldGroupFF, {
   label: "Group label",
   required: true,
@@ -55,5 +55,4 @@ const Default = () => /*#__PURE__*/_react.default.createElement(_FieldGroupFF.Fi
   value: "two",
   validationText: null
 }));
-
 exports.Default = Default;

package/build/cjs/FileInputFieldFF/{FileInputFieldFF.stories.e2e.js → FileInputFieldFF.e2e.stories.js}

@@ -1,44 +1,32 @@
 "use strict";
 
-var _react = require("@storybook/react");
-
-var _react2 = _interopRequireDefault(require("react"));
-
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StandardForm = void 0;
+var _react = _interopRequireDefault(require("react"));
 var _reactFinalForm = require("react-final-form");
-
 var _CheckboxFieldFF = require("../CheckboxFieldFF/CheckboxFieldFF.js");
-
 var _FieldGroupFF = require("../FieldGroupFF/FieldGroupFF.js");
-
 var _formDecorator = require("../formDecorator.js");
-
 var _InputFieldFF = require("../InputFieldFF/InputFieldFF.js");
-
 var _MultiSelectFieldFF = require("../MultiSelectFieldFF/MultiSelectFieldFF.js");
-
 var _RadioFieldFF = require("../RadioFieldFF/RadioFieldFF.js");
-
 var _SingleSelectFieldFF = require("../SingleSelectFieldFF/SingleSelectFieldFF.js");
-
 var _SwitchFieldFF = require("../SwitchFieldFF/SwitchFieldFF.js");
-
 var _TextAreaFieldFF = require("../TextAreaFieldFF/TextAreaFieldFF.js");
-
 var _index = require("../validators/index.js");
-
 var _FileInputFieldFF = require("./FileInputFieldFF.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const StandardForm = _ref => {
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Form = _ref => {
   let {
     values
   } = _ref;
-  return /*#__PURE__*/_react2.default.createElement("div", {
+  return /*#__PURE__*/_react.default.createElement("div", {
     style: {
       maxWidth: 830
     }
-  }, /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
+  }, /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
     name: "gender",
     label: "Gender",
     component: _SingleSelectFieldFF.SingleSelectFieldFF,
@@ -59,27 +47,27 @@ const StandardForm = _ref => {
       value: 'unknown',
       label: "I'd rather not say"
     }]
-  }), /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
+  }), /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
     required: true,
     label: "First name",
     name: "fname",
     validate: _index.hasValue,
     component: _InputFieldFF.InputFieldFF,
     helpText: "Please enter your first name, excluding middle names"
-  }), /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
+  }), /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
     required: true,
     label: "Last name",
     name: "lname",
     validate: _index.hasValue,
     component: _InputFieldFF.InputFieldFF,
     helpText: "Please enter your first name, excluding middle names"
-  }), /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
+  }), /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
     name: "subscribe",
     initialValue: true,
     type: "checkbox",
     label: "I want to receive updated and notifications about the latest changes?",
     component: _SwitchFieldFF.SwitchFieldFF
-  }), values.subscribe && /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
+  }), values.subscribe && /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
     required: values.subscribe,
     label: "E-mail address",
     name: "email1",
@@ -90,7 +78,7 @@ const StandardForm = _ref => {
     }),
     component: _InputFieldFF.InputFieldFF,
     helpText: "Please enter the e-mail address you want us to send the updates to"
-  }), values.subscribe && /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
+  }), values.subscribe && /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
     disabled: !values.subscribe,
     required: values.subscribe,
     label: "E-mail address confirmation",
@@ -98,12 +86,12 @@ const StandardForm = _ref => {
     validate: (0, _index.composeValidators)(_index.email, _index.hasValue),
     component: _InputFieldFF.InputFieldFF,
     helpText: "Please confirm your e-mail address"
-  }), /*#__PURE__*/_react2.default.createElement(_FieldGroupFF.FieldGroupFF, {
+  }), /*#__PURE__*/_react.default.createElement(_FieldGroupFF.FieldGroupFF, {
     name: "food",
     label: "Food",
     required: true,
     helpText: "If we ever gather for food, what meal type would you like to eat"
-  }, /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
+  }, /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
     type: "radio",
     name: "food",
     required: true,
@@ -111,7 +99,7 @@ const StandardForm = _ref => {
     value: "anything",
     label: "Don't care",
     validate: _index.hasValue
-  }), /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
+  }), /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
     type: "radio",
     name: "food",
     component: _RadioFieldFF.RadioFieldFF,
@@ -119,7 +107,7 @@ const StandardForm = _ref => {
     value: "vegan",
     label: "Vegan",
     validate: _index.hasValue
-  }), /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
+  }), /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
     type: "radio",
     name: "food",
     component: _RadioFieldFF.RadioFieldFF,
@@ -127,7 +115,7 @@ const StandardForm = _ref => {
     value: "vegetarian",
     label: "Vegetarian",
     validate: _index.hasValue
-  }), /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
+  }), /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
     type: "radio",
     name: "food",
     component: _RadioFieldFF.RadioFieldFF,
@@ -135,7 +123,7 @@ const StandardForm = _ref => {
     value: "fish",
     label: "Fish",
     validate: _index.hasValue
-  }), /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
+  }), /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
     type: "radio",
     name: "food",
     required: true,
@@ -143,41 +131,41 @@ const StandardForm = _ref => {
     value: "Halal",
     label: "halal",
     validate: _index.hasValue
-  })), /*#__PURE__*/_react2.default.createElement(_FieldGroupFF.FieldGroupFF, {
+  })), /*#__PURE__*/_react.default.createElement(_FieldGroupFF.FieldGroupFF, {
     name: "pizzaToppings",
     label: "Pizza toppings",
     helpText: "If we ever order pizza, what ingredients would you like on top"
-  }, /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
+  }, /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
     type: "checkbox",
     name: "pizzaToppings",
     component: _CheckboxFieldFF.CheckboxFieldFF,
     label: "Everything",
     value: "everything"
-  }), /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
+  }), /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
     type: "checkbox",
     name: "pizzaToppings",
     component: _CheckboxFieldFF.CheckboxFieldFF,
     label: "Ham",
     value: "ham"
-  }), /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
+  }), /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
     type: "checkbox",
     name: "pizzaToppings",
     component: _CheckboxFieldFF.CheckboxFieldFF,
     label: "Salami",
     value: "salami"
-  }), /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
+  }), /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
     type: "checkbox",
     name: "pizzaToppings",
     component: _CheckboxFieldFF.CheckboxFieldFF,
     label: "Pineapple",
     value: "pineapple"
-  }), /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
+  }), /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
     type: "checkbox",
     name: "pizzaToppings",
     component: _CheckboxFieldFF.CheckboxFieldFF,
     label: "Bellpepper",
     value: "bellpepper"
-  })), /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
+  })), /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
     label: "Sandwich toppings",
     name: "sandwhichToppings",
     component: _MultiSelectFieldFF.MultiSelectFieldFF,
@@ -198,11 +186,11 @@ const StandardForm = _ref => {
       label: 'Bellpepper'
     }],
     helpText: "If we ever order sandwiches, what ingredients would you like on top"
-  }), /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
+  }), /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
     name: "message",
     label: "If you want to tell us anything, just add your message here",
     component: _TextAreaFieldFF.TextAreaFieldFF
-  }), /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
+  }), /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
     name: "fileTxt",
     accept: ".txt",
     label: "If you want to send us a txt file, please attach it here",
@@ -211,15 +199,13 @@ const StandardForm = _ref => {
       if (!files) {
         return undefined;
       }
-
       const [file] = files;
-
       if (file.type !== 'text/plain') {
-        return "The file you provided is not a txt file, received \"".concat(file.type, "\"");
+        return `The file you provided is not a txt file, received "${file.type}"`;
       }
     },
     component: _FileInputFieldFF.FileInputFieldFF
-  }), /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
+  }), /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
     multiple: true,
     accept: "image/jpg",
     name: "fileJpgs",
@@ -228,19 +214,17 @@ const StandardForm = _ref => {
       if (!files) {
         return undefined;
       }
-
       return files.reduce((error, file) => {
         if (error) {
           return error;
         }
-
         if (file.type !== 'application/jpg') {
-          return "One of the files is not a jpg, received \"".concat(file.type, "\"");
+          return `One of the files is not a jpg, received "${file.type}"`;
         }
       }, undefined);
     },
     component: _FileInputFieldFF.FileInputFieldFF
-  }), /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
+  }), /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
     required: true,
     name: "tnc",
     label: "I accept the terms and conditions",
@@ -250,14 +234,19 @@ const StandardForm = _ref => {
     className: "checkbox"
   }));
 };
-
-(0, _react.storiesOf)('Testing:FileInput', module).addDecorator(_formDecorator.formDecorator).addParameters({
-  options: {
-    showPanel: false
+var _default = exports.default = {
+  title: 'Testing:FileInput',
+  decorators: [_formDecorator.formDecorator],
+  parameters: {
+    options: {
+      showPanel: false
+    }
   }
-}).add('Standard form', (_, _ref2) => {
+};
+const StandardForm = (_, _ref2) => {
   let {
     formRenderProps
   } = _ref2;
-  return /*#__PURE__*/_react2.default.createElement(StandardForm, formRenderProps);
-});
+  return /*#__PURE__*/_react.default.createElement(Form, formRenderProps);
+};
+exports.StandardForm = StandardForm;