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

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

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RequiredAndNoSelectedValue = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactFinalForm = require("react-final-form");
+var _FieldGroupFF = require("../FieldGroupFF/FieldGroupFF.js");
+var _formDecorator = require("../formDecorator.js");
+var _index = require("../validators/index.js");
+var _RadioFieldFF = require("./RadioFieldFF.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'Testing:RadioFieldFF',
+  decorators: [_formDecorator.formDecorator]
+};
+const RequiredAndNoSelectedValue = () => /*#__PURE__*/_react.default.createElement(_FieldGroupFF.FieldGroupFF, {
+  name: "choice"
+}, /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
+  type: "radio",
+  component: _RadioFieldFF.RadioFieldFF,
+  name: "choice",
+  label: "One",
+  value: "one",
+  validate: _index.hasValue,
+  required: true
+}), /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
+  type: "radio",
+  component: _RadioFieldFF.RadioFieldFF,
+  name: "choice",
+  label: "Two",
+  value: "two",
+  validate: _index.hasValue,
+  required: true
+}), /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
+  type: "radio",
+  component: _RadioFieldFF.RadioFieldFF,
+  name: "choice",
+  label: "Three",
+  value: "three",
+  validate: _index.hasValue,
+  required: true
+}));
+exports.RequiredAndNoSelectedValue = RequiredAndNoSelectedValue;

package/build/cjs/RadioFieldFF/RadioFieldFF.js

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.RadioFieldFF = void 0;
-
 var _radio = require("@dhis2-ui/radio");
-
 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 RadioFieldFF = _ref => {
   let {
     error,
@@ -43,12 +35,10 @@ const RadioFieldFF = _ref => {
     onBlur: (0, _helpers.createBlurHandler)(input, onBlur)
   }));
 };
-
 exports.RadioFieldFF = RadioFieldFF;
 RadioFieldFF.propTypes = {
   /** `input` props received from Final Form `Field` */
   input: _propTypes2.inputPropType.isRequired,
-
   /** `meta` props received from Final Form `Field` */
   meta: _propTypes2.metaPropType.isRequired,
   error: _propTypes.default.bool,

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

@@ -4,23 +4,39 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Statuses = exports.Default = void 0;
-
 var _field = require("@dhis2-ui/field");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _reactFinalForm = require("react-final-form");
-
 var _formDecorator = require("../formDecorator.js");
-
 var _propTypes = require("../shared/propTypes.js");
-
 var _RadioFieldFF = require("./RadioFieldFF.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const description = `
+The \`RadioFieldFF\` is a wrapper around a \`Radio\` 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={RadioFieldFF} />\`.  See the code samples below for examples.
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+#### Props
 
-const description = "\nThe `RadioFieldFF` is a wrapper around a `Radio` 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={RadioFieldFF} />`.  See the code samples below for examples.\n\n#### Props\n\nThe props shown in the table below are generally provided to the `RadioFieldFF` wrapper by the Final Form `Field`.\n\nNote that any props beyond the API of the `Field` component will be spread to the `RadioFieldFF`, which passes any extra props to the underlying `Radio` using `{...rest}`.\n\nTherefore, to add any props to the `RadioFieldFF` or `Radio`, add those props to the parent Final Form `Field` component.\n\nAlso see `Radio` for notes about props and implementation.\n\n```js\nimport { RadioFieldFF } from '@dhis2/ui'\n```\n\nPress **Submit** to see the form values logged to the console.\n";
-var _default = {
+The props shown in the table below are generally provided to the \`RadioFieldFF\` wrapper by the Final Form \`Field\`.
+
+Note that any props beyond the API of the \`Field\` component will be spread to the \`RadioFieldFF\`, which passes any extra props to the underlying \`Radio\` using \`{...rest}\`.
+
+Therefore, to add any props to the \`RadioFieldFF\` or \`Radio\`, add those props to the parent Final Form \`Field\` component.
+
+Also see \`Radio\` for notes about props and implementation.
+
+\`\`\`js
+import { RadioFieldFF } from '@dhis2/ui'
+\`\`\`
+
+Press **Submit** to see the form values logged to the console.
+`;
+var _default = exports.default = {
   title: 'Radio Field (Final Form)',
   component: _RadioFieldFF.RadioFieldFF,
   decorators: [_formDecorator.formDecorator],
@@ -32,14 +48,14 @@ var _default = {
     }
   },
   argTypes: {
-    input: { ..._propTypes.inputArgType
+    input: {
+      ..._propTypes.inputArgType
     },
-    meta: { ..._propTypes.metaArgType
+    meta: {
+      ..._propTypes.metaArgType
     }
   }
 };
-exports.default = _default;
-
 const Default = () => /*#__PURE__*/_react.default.createElement(_field.FieldGroup, null, /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
   type: "radio",
   component: _RadioFieldFF.RadioFieldFF,
@@ -59,9 +75,7 @@ const Default = () => /*#__PURE__*/_react.default.createElement(_field.FieldGrou
   label: "Three",
   value: "three"
 }));
-
 exports.Default = Default;
-
 const Statuses = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_field.FieldGroup, {
   label: "Valid"
 }, /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
@@ -90,5 +104,4 @@ const Statuses = () => /*#__PURE__*/_react.default.createElement(_react.default.
   value: "error",
   error: true
 })));
-
 exports.Statuses = Statuses;

package/build/cjs/RadioFieldFF/features/can_set_a_value/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('there are three options', () => {
   const options = [{
     value: 'one',

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a FieldGroupFF with required RadioFieldFFs and no selected value', () => {
   cy.visitStory('Testing:RadioFieldFF', 'Required and no selected value');
   cy.verifyFormValue('choice', undefined);

package/build/cjs/RadioFieldFF/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.When)('the user submits the form', () => {
   cy.get('button[type="submit"]').click();
 });

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

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Required = 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 _SingleSelectFieldFF = require("./SingleSelectFieldFF.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const defaultOptions = [{
+  value: 'initial',
+  label: 'Initial'
+}];
+var _default = exports.default = {
+  title: 'Testing:SingleSelectFieldFF',
+  decorators: [_formDecorator.formDecorator],
+  parameters: {
+    options: {
+      showPanel: false
+    }
+  }
+};
+const Required = (_, _ref) => {
+  let {
+    cypressProps
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
+    required: true,
+    name: "singleSelect",
+    label: "Single select",
+    component: _SingleSelectFieldFF.SingleSelectFieldFF,
+    validate: _index.hasValue,
+    options: cypressProps.options || defaultOptions
+  });
+};
+exports.Required = Required;

package/build/cjs/SingleSelectFieldFF/SingleSelectFieldFF.js

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SingleSelectFieldFF = void 0;
-
 var _select = require("@dhis2-ui/select");
-
 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 SingleSelectFieldFF = _ref => {
   let {
     error,
@@ -48,12 +40,10 @@ const SingleSelectFieldFF = _ref => {
     key: option.value
   }, option))));
 };
-
 exports.SingleSelectFieldFF = SingleSelectFieldFF;
 SingleSelectFieldFF.propTypes = {
   /** `input` props received from Final Form `Field` */
   input: _propTypes2.inputPropType.isRequired,
-
   /** `meta` props received from Final Form `Field` */
   meta: _propTypes2.metaPropType.isRequired,
   options: _propTypes.default.arrayOf(_propTypes.default.shape({

package/build/cjs/SingleSelectFieldFF/SingleSelectFieldFF.prod.stories.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.InitialValue = 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 _SingleSelectFieldFF = require("./SingleSelectFieldFF.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const description = `
+The \`SingleSelectFieldFF\` is a wrapper around a \`SingleSelectField\` 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={SingleSelectFieldFF} />\`.  See the code samples below for examples.
+
+#### Props
+
+The props shown in the table below are generally provided to the \`SingleSelectFieldFF\` wrapper by the Final Form \`Field\`.
+
+Note that any props beyond the API of the \`Field\` component will be spread to the \`SingleSelectFieldFF\`, which passes any extra props to the underlying \`SingleSelectField\` using \`{...rest}\`.
+
+Therefore, to add any props to the \`SingleSelectFieldFF\` or \`SingleSelectField\`, add those props to the parent Final Form \`Field\` component.
+
+Also see \`SingleSelect\` and \`SingleSelectField\` for notes about props and implementation.
+
+\`\`\`js
+import { SingleSelectFieldFF } from '@dhis2/ui'
+\`\`\`
+
+Press **Submit** to see the form values logged to the console.
+
+_**Note:** Dropdowns may not appear correctly on this page. See the affected demos in the 'Canvas' tab for propper dropdown placement._
+`;
+const options = [{
+  value: '1',
+  label: 'one'
+}, {
+  value: '2',
+  label: 'two'
+}, {
+  value: '3',
+  label: 'three'
+}, {
+  value: '4',
+  label: 'four'
+}, {
+  value: '5',
+  label: 'five'
+}, {
+  value: '6',
+  label: 'six'
+}, {
+  value: '7',
+  label: 'seven'
+}, {
+  value: '8',
+  label: 'eight'
+}, {
+  value: '9',
+  label: 'nine'
+}, {
+  value: '10',
+  label: 'ten'
+}];
+var _default = exports.default = {
+  title: 'Single Select Field (Final Form)',
+  component: _SingleSelectFieldFF.SingleSelectFieldFF,
+  decorators: [_formDecorator.formDecorator],
+  parameters: {
+    docs: {
+      description: {
+        component: description
+      }
+    }
+  },
+  argTypes: {
+    input: {
+      ..._propTypes.inputArgType
+    },
+    meta: {
+      ..._propTypes.metaArgType
+    }
+  }
+};
+const Default = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
+  component: _SingleSelectFieldFF.SingleSelectFieldFF,
+  name: "agree",
+  label: "Do you agree?",
+  options: options
+});
+exports.Default = Default;
+const InitialValue = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
+  component: _SingleSelectFieldFF.SingleSelectFieldFF,
+  name: "agree",
+  label: "Do you agree?",
+  options: options,
+  initialValue: "4"
+});
+exports.InitialValue = InitialValue;
+InitialValue.storyName = 'InitialValue';

package/build/cjs/SingleSelectFieldFF/features/can_set_a_value/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('the SingleSelect has one option', () => {
   const options = [{
     value: 'Value',

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a required SingleSelect with no selected value', () => {
   cy.visitStory('Testing:SingleSelectFieldFF', 'Required');
   cy.verifyFormValue('singleSelect', undefined);

package/build/cjs/SingleSelectFieldFF/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.When)('the user submits the form', () => {
   cy.get('button[type="submit"]').click();
 });

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

@@ -0,0 +1,56 @@
+"use strict";
+
+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 _SwitchFieldFF = require("./SwitchFieldFF.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// https://github.com/final-form/react-final-form-arrays/issues/111
+const initialValue = ['yes'];
+var _default = exports.default = {
+  title: 'Testing:SwitchFieldFF',
+  decorators: [_formDecorator.formDecorator]
+};
+const Unchecked = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
+  component: _SwitchFieldFF.SwitchFieldFF,
+  className: "switch",
+  name: "switch",
+  label: "Label text",
+  validate: _index.hasValue,
+  required: true,
+  type: "checkbox"
+});
+exports.Unchecked = Unchecked;
+const Checked = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
+  component: _SwitchFieldFF.SwitchFieldFF,
+  className: "switch",
+  name: "switch",
+  label: "Label text",
+  initialValue: true,
+  type: "checkbox"
+});
+exports.Checked = Checked;
+const UncheckedWithValue = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
+  component: _SwitchFieldFF.SwitchFieldFF,
+  className: "switch",
+  name: "switch",
+  label: "Label text",
+  value: "yes",
+  type: "checkbox"
+});
+exports.UncheckedWithValue = UncheckedWithValue;
+const CheckedWithValue = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
+  component: _SwitchFieldFF.SwitchFieldFF,
+  className: "switch",
+  name: "switch",
+  label: "Label text",
+  value: "yes",
+  initialValue: initialValue,
+  type: "checkbox"
+});
+exports.CheckedWithValue = CheckedWithValue;

package/build/cjs/SwitchFieldFF/SwitchFieldFF.js

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SwitchFieldFF = void 0;
-
 var _switch = require("@dhis2-ui/switch");
-
 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 SwitchFieldFF = _ref => {
   let {
     error,
@@ -43,12 +35,10 @@ const SwitchFieldFF = _ref => {
     onBlur: (0, _helpers.createBlurHandler)(input, onBlur)
   }));
 };
-
 exports.SwitchFieldFF = SwitchFieldFF;
 SwitchFieldFF.propTypes = {
   /** `input` props received from Final Form `Field` */
   input: _propTypes2.inputPropType.isRequired,
-
   /** `meta` props received from Final Form `Field` */
   meta: _propTypes2.metaPropType.isRequired,
   error: _propTypes.default.bool,

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

@@ -4,23 +4,39 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ValueWhenChecked = exports.Statuses = exports.Required = 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 _SwitchFieldFF = require("./SwitchFieldFF.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const description = `
+The \`SwitchFieldFF\` is a wrapper around a \`SwitchField\` 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={SwitchFieldFF} />\`.  See the code samples below for examples.
+
+#### Props
+
+The props shown in the table below are generally provided to the \`SwitchFieldFF\` wrapper by the Final Form \`Field\`.
+
+Note that any props beyond the API of the \`Field\` component will be spread to the \`SwitchFieldFF\`, which passes any extra props to the underlying \`SwitchField\` using \`{...rest}\`.
+
+Therefore, to add any props to the \`SwitchFieldFF\` or \`SwitchField\`, add those props to the parent Final Form \`Field\` component.
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+Also see \`Switch\` and \`SwitchField\` for notes about props and implementation.
 
-const description = "\nThe `SwitchFieldFF` is a wrapper around a `SwitchField` 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={SwitchFieldFF} />`.  See the code samples below for examples.\n\n#### Props\n\nThe props shown in the table below are generally provided to the `SwitchFieldFF` wrapper by the Final Form `Field`.\n\nNote that any props beyond the API of the `Field` component will be spread to the `SwitchFieldFF`, which passes any extra props to the underlying `SwitchField` using `{...rest}`.\n\nTherefore, to add any props to the `SwitchFieldFF` or `SwitchField`, add those props to the parent Final Form `Field` component.\n\nAlso see `Switch` and `SwitchField` for notes about props and implementation.\n\n```js\nimport { SwitchFieldFF } from '@dhis2/ui'\n```\n\nPress **Submit** to see the form values logged to the console.\n";
-var _default = {
+\`\`\`js
+import { SwitchFieldFF } from '@dhis2/ui'
+\`\`\`
+
+Press **Submit** to see the form values logged to the console.
+`;
+var _default = exports.default = {
   title: 'Switch Field (Final Form)',
   component: _SwitchFieldFF.SwitchFieldFF,
   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: _SwitchFieldFF.SwitchFieldFF,
   name: "agree",
   label: "Do you agree?"
 });
-
 exports.Default = Default;
-
 const Required = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
   type: "checkbox",
   name: "agree",
@@ -57,9 +71,7 @@ const Required = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm
   validate: _index.hasValue,
   label: "Do you agree?"
 });
-
 exports.Required = Required;
-
 const Disabled = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
   type: "checkbox",
   name: "agree",
@@ -67,9 +79,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",
@@ -77,10 +87,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",
@@ -103,9 +111,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",
@@ -127,7 +133,6 @@ const ValueWhenChecked = () => /*#__PURE__*/_react.default.createElement(_react.
   value: "another_value_when_checked",
   helpText: "Click submit and check the console"
 }));
-
 exports.ValueWhenChecked = ValueWhenChecked;
 ValueWhenChecked.parameters = {
   docs: {

package/build/cjs/SwitchFieldFF/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 Switch without value is rendered', () => {
   cy.visitStory('Testing:SwitchFieldFF', 'Unchecked');
   cy.verifyFormValue('switch', undefined);

package/build/cjs/SwitchFieldFF/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 Switch with a value is rendered', () => {
   cy.visitStory('Testing:SwitchFieldFF', 'Unchecked with value');
   cy.verifyFormValue('switch', undefined);

package/build/cjs/SwitchFieldFF/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 Switch', () => {
   cy.get('[data-test="dhis2-uicore-switch"]').click();
 });