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

package/build/cjs/field/features/accepts_children/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a Field with children is rendered', () => {
   cy.visitStory('Field', 'With children');
   cy.get('[data-test="dhis2-uicore-field"]').should('be.visible');

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithChildren = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _field = require("./field.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'Field'
+};
+const WithChildren = () => /*#__PURE__*/_react.default.createElement(_field.Field, null, "I am a child");
+exports.WithChildren = WithChildren;

package/build/cjs/field/field.js

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Field = void 0;
-
+var _uiConstants = require("@dhis2/ui-constants");
 var _box = require("@dhis2-ui/box");
-
 var _help = require("@dhis2-ui/help");
-
 var _label = require("@dhis2-ui/label");
-
-var _uiConstants = require("@dhis2/ui-constants");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const Field = _ref => {
   let {
     children,
@@ -38,23 +30,22 @@ const Field = _ref => {
     className: className,
     dataTest: dataTest
   }, label && /*#__PURE__*/_react.default.createElement(_label.Label, {
-    dataTest: "".concat(dataTest, "-label"),
+    dataTest: `${dataTest}-label`,
     required: required,
     disabled: disabled,
     htmlFor: name
   }, label), /*#__PURE__*/_react.default.createElement(_box.Box, {
-    dataTest: "".concat(dataTest, "-content"),
+    dataTest: `${dataTest}-content`,
     marginTop: label ? '2px' : '0'
   }, children), helpText && /*#__PURE__*/_react.default.createElement(_help.Help, {
-    dataTest: "".concat(dataTest, "-help")
+    dataTest: `${dataTest}-help`
   }, helpText), validationText && /*#__PURE__*/_react.default.createElement(_help.Help, {
     error: error,
     warning: warning,
     valid: valid,
-    dataTest: "".concat(dataTest, "-validation")
+    dataTest: `${dataTest}-validation`
   }, validationText));
 };
-
 exports.Field = Field;
 Field.defaultProps = {
   dataTest: 'dhis2-uicore-field'
@@ -63,31 +54,22 @@ Field.propTypes = {
   children: _propTypes.default.node,
   className: _propTypes.default.string,
   dataTest: _propTypes.default.string,
-
   /** Disabled status, shown when mouse is over label */
   disabled: _propTypes.default.bool,
-
   /** Field status. Mutually exclusive with `valid` and `warning` props */
   error: _uiConstants.sharedPropTypes.statusPropType,
-
   /** Useful text within the field */
   helpText: _propTypes.default.string,
-
   /** Label at the top of the field */
   label: _propTypes.default.string,
-
   /** `name` will become the target of the `for`/`htmlFor` attribute on the `<label>` element */
   name: _propTypes.default.string,
-
   /** Inidcates this field is required */
   required: _propTypes.default.bool,
-
   /** Field status. Mutually exclusive with `error` and `warning` props */
   valid: _uiConstants.sharedPropTypes.statusPropType,
-
   /** Feedback given related to validation status of field */
   validationText: _propTypes.default.string,
-
   /** Field status. Mutually exclusive with `valid` and `error` props */
   warning: _uiConstants.sharedPropTypes.statusPropType
 };

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

@@ -4,27 +4,30 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Default = void 0;
-
-var _input = require("@dhis2-ui/input");
-
 var _uiConstants = require("@dhis2/ui-constants");
-
+var _input = require("@dhis2-ui/input");
 var _react = _interopRequireDefault(require("react"));
-
 var _field = require("./field.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const description = "\nA useful container for form components, including a label, help text, and validation text.\n\n```js\nimport { Field } from '@dhis2/ui'\n```\n";
-var _default = {
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const description = `
+A useful container for form components, including a label, help text, and validation text.
+
+\`\`\`js
+import { Field } from '@dhis2/ui'
+\`\`\`
+`;
+var _default = exports.default = {
   title: 'Field',
   component: _field.Field,
   argTypes: {
-    valid: { ..._uiConstants.sharedPropTypes.statusArgType
+    valid: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     },
-    warning: { ..._uiConstants.sharedPropTypes.statusArgType
+    warning: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     },
-    error: { ..._uiConstants.sharedPropTypes.statusArgType
+    error: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     }
   },
   parameters: {
@@ -35,8 +38,6 @@ var _default = {
     }
   }
 };
-exports.default = _default;
-
 const Default = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_field.Field, args, /*#__PURE__*/_react.default.createElement(_input.Input, {
   onChange: () => {
     console.log('Nothing happens');
@@ -53,7 +54,6 @@ const Default = args => /*#__PURE__*/_react.default.createElement(_react.default
   name: "input2",
   label: "An second input"
 })));
-
 exports.Default = Default;
 Default.args = {
   label: 'First field (change me with controls)',

package/build/cjs/field/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "Field", {
     return _field.Field;
   }
 });
-
 var _field = require("./field.js");

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

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

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

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithLabelAndRequired = void 0;
+var _checkbox = require("@dhis2-ui/checkbox");
+var _react = _interopRequireDefault(require("react"));
+var _fieldGroup = require("./field-group.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'FieldGroup'
+};
+const WithLabelAndRequired = () => /*#__PURE__*/_react.default.createElement(_fieldGroup.FieldGroup, {
+  label: "I am a required label",
+  name: "required",
+  value: ['second', 'third'],
+  required: true
+}, /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
+  value: "first",
+  label: "First"
+}), /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
+  value: "second",
+  label: "Second"
+}), /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
+  value: "third",
+  label: "Third"
+}));
+exports.WithLabelAndRequired = WithLabelAndRequired;

package/build/cjs/field-group/field-group.js

@@ -4,17 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FieldGroup = void 0;
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
-var _index = require("../index.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+var _index = require("../field/index.js");
+var _index2 = require("../field-set/index.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const FieldGroup = _ref => {
   let {
     children,
@@ -30,7 +25,7 @@ const FieldGroup = _ref => {
     error,
     warning
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_index.FieldSet, {
+  return /*#__PURE__*/_react.default.createElement(_index2.FieldSet, {
     classname: className,
     dataTest: dataTest
   }, /*#__PURE__*/_react.default.createElement(_index.Field, {
@@ -45,7 +40,6 @@ const FieldGroup = _ref => {
     name: name
   }, children));
 };
-
 exports.FieldGroup = FieldGroup;
 FieldGroup.defaultProps = {
   dataTest: 'dhis2-uiwidgets-fieldsetfield'
@@ -54,31 +48,22 @@ FieldGroup.propTypes = {
   children: _propTypes.default.node,
   className: _propTypes.default.string,
   dataTest: _propTypes.default.string,
-
   /** Disables the form controls within */
   disabled: _propTypes.default.bool,
-
   /** Applies 'error' styling to validation text for feedback. Mutually exclusive with `warning` and `valid` props */
   error: _uiConstants.sharedPropTypes.statusPropType,
-
   /** Useful instructions for the user */
   helpText: _propTypes.default.string,
-
   /** Labels the Field Group */
   label: _propTypes.default.string,
-
   /** Name associate with the Field Group. Passed in object as argument to event handlers */
   name: _propTypes.default.string,
-
   /** Adds an asterisk to indicate this field is required */
   required: _propTypes.default.bool,
-
   /** Applies 'valid' styling to validation text for feedback. Mutually exclusive with `warning` and `error` props */
   valid: _uiConstants.sharedPropTypes.statusPropType,
-
   /** Adds text at the bottom of the field to provide validation feedback. Acquires styles from `valid`, `warning` and `error` statuses */
   validationText: _propTypes.default.string,
-
   /** Applies 'warning' styling to validation text for feedback. Mutually exclusive with `valid` and `error` props */
   warning: _uiConstants.sharedPropTypes.statusPropType
 };

package/build/cjs/field-group/{field-group.stories.js → field-group.prod.stories.js}

@@ -4,23 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.WithSwitch = exports.WithRadio = exports.WithLabel = exports.WithCheckbox = exports.HelpAndValidationTexts = void 0;
-
+var _uiConstants = require("@dhis2/ui-constants");
 var _checkbox = require("@dhis2-ui/checkbox");
-
 var _radio = require("@dhis2-ui/radio");
-
 var _switch = require("@dhis2-ui/switch");
-
-var _uiConstants = require("@dhis2/ui-constants");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _fieldGroup = require("./field-group.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const description = "\nWraps a group of form components like Radios, Checkboxes, or Switches. The FieldGroup wraps the form controls in a FieldSet and a Field component to group them and add a label, help text, and/or validation text.\n\n```js\nimport { FieldGroup } from '@dhis2/ui'\n```\n";
-var _default = {
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const description = `
+Wraps a group of form components like Radios, Checkboxes, or Switches. The FieldGroup wraps the form controls in a FieldSet and a Field component to group them and add a label, help text, and/or validation text.
+
+\`\`\`js
+import { FieldGroup } from '@dhis2/ui'
+\`\`\`
+`;
+var _default = exports.default = {
   title: 'Field Group',
   component: _fieldGroup.FieldGroup,
   parameters: {
@@ -31,16 +29,17 @@ var _default = {
     }
   },
   argTypes: {
-    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 WithCheckbox = args => /*#__PURE__*/_react.default.createElement(_fieldGroup.FieldGroup, args, /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
   value: "first",
   label: "First"
@@ -51,9 +50,7 @@ const WithCheckbox = args => /*#__PURE__*/_react.default.createElement(_fieldGro
   value: "third",
   label: "Third"
 }));
-
 exports.WithCheckbox = WithCheckbox;
-
 const WithRadio = args => /*#__PURE__*/_react.default.createElement(_fieldGroup.FieldGroup, args, /*#__PURE__*/_react.default.createElement(_radio.Radio, {
   value: "first",
   label: "First"
@@ -68,9 +65,7 @@ const WithRadio = args => /*#__PURE__*/_react.default.createElement(_fieldGroup.
   value: "fourth",
   label: "Fourth"
 }));
-
 exports.WithRadio = WithRadio;
-
 const WithSwitch = args => /*#__PURE__*/_react.default.createElement(_fieldGroup.FieldGroup, args, /*#__PURE__*/_react.default.createElement(_switch.Switch, {
   value: "first",
   label: "First"
@@ -84,9 +79,7 @@ const WithSwitch = args => /*#__PURE__*/_react.default.createElement(_fieldGroup
   value: "fourth",
   label: "Fourth"
 }));
-
 exports.WithSwitch = WithSwitch;
-
 const WithLabel = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_fieldGroup.FieldGroup, args, /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
   value: "first",
   label: "First"
@@ -109,12 +102,10 @@ const WithLabel = args => /*#__PURE__*/_react.default.createElement(_react.defau
   value: "third",
   label: "Third"
 })));
-
 exports.WithLabel = WithLabel;
 WithLabel.args = {
   label: 'I am a label/legend'
 };
-
 const HelpAndValidationTexts = args => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_fieldGroup.FieldGroup, args, /*#__PURE__*/_react.default.createElement(_checkbox.Checkbox, {
   value: "first",
   label: "First"
@@ -183,7 +174,6 @@ const HelpAndValidationTexts = args => /*#__PURE__*/_react.default.createElement
   value: "third",
   label: "Third"
 })));
-
 exports.HelpAndValidationTexts = HelpAndValidationTexts;
 HelpAndValidationTexts.args = {
   label: 'I am a field',

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

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "FieldGroup", {
     return _fieldGroup.FieldGroup;
   }
 });
-
 var _fieldGroup = require("./field-group.js");

package/build/cjs/field-set/features/accepts_children/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a FieldSet with children is rendered', () => {
   cy.visitStory('FieldSet', 'With children');
   cy.get('[data-test="dhis2-uicore-fieldset"]').should('be.visible');

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

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithChildren = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _fieldSet = require("./field-set.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'FieldSet'
+};
+const WithChildren = () => /*#__PURE__*/_react.default.createElement(_fieldSet.FieldSet, null, "I am a child");
+exports.WithChildren = WithChildren;

package/build/cjs/field-set/field-set.js

@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FieldSet = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const FieldSet = _ref => {
   let {
     className,
@@ -26,7 +21,6 @@ const FieldSet = _ref => {
     id: "3541500486"
   }, ["fieldset.jsx-3541500486{border:none;margin:0;padding:0;}"]));
 };
-
 exports.FieldSet = FieldSet;
 FieldSet.defaultProps = {
   dataTest: 'dhis2-uicore-fieldset'

package/build/cjs/field-set/{field-set.stories.js → field-set.prod.stories.js}

@@ -4,28 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.UsageExampleARadioButtonGroupWithErrorStatus = exports.Default = void 0;
-
 var _help = require("@dhis2-ui/help");
-
 var _legend = require("@dhis2-ui/legend");
-
 var _radio = require("@dhis2-ui/radio");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _index = require("../index.js");
-
 var _fieldSet = require("./field-set.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const description = "\nA container for grouping several Field components together. Use a `<Legend>` component to add helpful guiding text.\n\n```js\nimport { FieldSet } from '@dhis2/ui'\n```\n";
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const description = `
+A container for grouping several Field components together. Use a \`<Legend>\` component to add helpful guiding text.
+
+\`\`\`js
+import { FieldSet } from '@dhis2/ui'
+\`\`\`
+`;
 const onChange = () => {
   console.log('Radio was clicked, nothing else will happen');
 };
-
-var _default = {
+var _default = exports.default = {
   title: 'Field Set',
   component: _fieldSet.FieldSet,
   parameters: {
@@ -36,12 +32,8 @@ var _default = {
     }
   }
 };
-exports.default = _default;
-
 const Default = args => /*#__PURE__*/_react.default.createElement(_fieldSet.FieldSet, args, "It renders something in a fieldset element without the browser styles");
-
 exports.Default = Default;
-
 const UsageExampleARadioButtonGroupWithErrorStatus = args => /*#__PURE__*/_react.default.createElement(_fieldSet.FieldSet, args, /*#__PURE__*/_react.default.createElement(_legend.Legend, {
   required: true
 }, "Choose an option"), /*#__PURE__*/_react.default.createElement(_index.Field, null, /*#__PURE__*/_react.default.createElement(_radio.Radio, {
@@ -65,6 +57,5 @@ const UsageExampleARadioButtonGroupWithErrorStatus = args => /*#__PURE__*/_react
 })), /*#__PURE__*/_react.default.createElement(_help.Help, {
   error: true
 }, "You really have to choose something!"));
-
 exports.UsageExampleARadioButtonGroupWithErrorStatus = UsageExampleARadioButtonGroupWithErrorStatus;
 UsageExampleARadioButtonGroupWithErrorStatus.storyName = 'Usage example - a radio button group with error status';

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

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "FieldSet", {
     return _fieldSet.FieldSet;
   }
 });
-
 var _fieldSet = require("./field-set.js");

package/build/cjs/index.js

@@ -21,9 +21,6 @@ Object.defineProperty(exports, "FieldSet", {
     return _index3.FieldSet;
   }
 });
-
 var _index = require("./field/index.js");
-
 var _index2 = require("./field-group/index.js");
-
 var _index3 = require("./field-set/index.js");

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

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

package/build/es/field/field.js

@@ -1,10 +1,9 @@
+import { sharedPropTypes } from '@dhis2/ui-constants';
 import { Box } from '@dhis2-ui/box';
 import { Help } from '@dhis2-ui/help';
 import { Label } from '@dhis2-ui/label';
-import { sharedPropTypes } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
-
 const Field = _ref => {
   let {
     children,
@@ -24,23 +23,22 @@ const Field = _ref => {
     className: className,
     dataTest: dataTest
   }, label && /*#__PURE__*/React.createElement(Label, {
-    dataTest: "".concat(dataTest, "-label"),
+    dataTest: `${dataTest}-label`,
     required: required,
     disabled: disabled,
     htmlFor: name
   }, label), /*#__PURE__*/React.createElement(Box, {
-    dataTest: "".concat(dataTest, "-content"),
+    dataTest: `${dataTest}-content`,
     marginTop: label ? '2px' : '0'
   }, children), helpText && /*#__PURE__*/React.createElement(Help, {
-    dataTest: "".concat(dataTest, "-help")
+    dataTest: `${dataTest}-help`
   }, helpText), validationText && /*#__PURE__*/React.createElement(Help, {
     error: error,
     warning: warning,
     valid: valid,
-    dataTest: "".concat(dataTest, "-validation")
+    dataTest: `${dataTest}-validation`
   }, validationText));
 };
-
 Field.defaultProps = {
   dataTest: 'dhis2-uicore-field'
 };
@@ -48,31 +46,22 @@ Field.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   dataTest: PropTypes.string,
-
   /** Disabled status, shown when mouse is over label */
   disabled: PropTypes.bool,
-
   /** Field status. Mutually exclusive with `valid` and `warning` props */
   error: sharedPropTypes.statusPropType,
-
   /** Useful text within the field */
   helpText: PropTypes.string,
-
   /** Label at the top of the field */
   label: PropTypes.string,
-
   /** `name` will become the target of the `for`/`htmlFor` attribute on the `<label>` element */
   name: PropTypes.string,
-
   /** Inidcates this field is required */
   required: PropTypes.bool,
-
   /** Field status. Mutually exclusive with `error` and `warning` props */
   valid: sharedPropTypes.statusPropType,
-
   /** Feedback given related to validation status of field */
   validationText: PropTypes.string,
-
   /** Field status. Mutually exclusive with `valid` and `error` props */
   warning: sharedPropTypes.statusPropType
 };

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

@@ -1,17 +1,26 @@
-import { Input } from '@dhis2-ui/input';
 import { sharedPropTypes } from '@dhis2/ui-constants';
+import { Input } from '@dhis2-ui/input';
 import React from 'react';
 import { Field } from './field.js';
-const description = "\nA useful container for form components, including a label, help text, and validation text.\n\n```js\nimport { Field } from '@dhis2/ui'\n```\n";
+const description = `
+A useful container for form components, including a label, help text, and validation text.
+
+\`\`\`js
+import { Field } from '@dhis2/ui'
+\`\`\`
+`;
 export default {
   title: 'Field',
   component: Field,
   argTypes: {
-    valid: { ...sharedPropTypes.statusArgType
+    valid: {
+      ...sharedPropTypes.statusArgType
     },
-    warning: { ...sharedPropTypes.statusArgType
+    warning: {
+      ...sharedPropTypes.statusArgType
     },
-    error: { ...sharedPropTypes.statusArgType
+    error: {
+      ...sharedPropTypes.statusArgType
     }
   },
   parameters: {

package/build/es/field-group/{field-group.stories.e2e.js → field-group.e2e.stories.js}

@@ -1,8 +1,10 @@
 import { Checkbox } from '@dhis2-ui/checkbox';
-import { storiesOf } from '@storybook/react';
 import React from 'react';
 import { FieldGroup } from './field-group.js';
-storiesOf('FieldGroup', module).add('With label and required', () => /*#__PURE__*/React.createElement(FieldGroup, {
+export default {
+  title: 'FieldGroup'
+};
+export const WithLabelAndRequired = () => /*#__PURE__*/React.createElement(FieldGroup, {
   label: "I am a required label",
   name: "required",
   value: ['second', 'third'],
@@ -16,4 +18,4 @@ storiesOf('FieldGroup', module).add('With label and required', () => /*#__PURE__
 }), /*#__PURE__*/React.createElement(Checkbox, {
   value: "third",
   label: "Third"
-})));
+}));

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

@@ -1,8 +1,8 @@
 import { sharedPropTypes } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { Field, FieldSet } from '../index.js';
-
+import { Field } from '../field/index.js';
+import { FieldSet } from '../field-set/index.js';
 const FieldGroup = _ref => {
   let {
     children,
@@ -33,7 +33,6 @@ const FieldGroup = _ref => {
     name: name
   }, children));
 };
-
 FieldGroup.defaultProps = {
   dataTest: 'dhis2-uiwidgets-fieldsetfield'
 };
@@ -41,31 +40,22 @@ FieldGroup.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   dataTest: PropTypes.string,
-
   /** Disables the form controls within */
   disabled: PropTypes.bool,
-
   /** Applies 'error' styling to validation text for feedback. Mutually exclusive with `warning` and `valid` props */
   error: sharedPropTypes.statusPropType,
-
   /** Useful instructions for the user */
   helpText: PropTypes.string,
-
   /** Labels the Field Group */
   label: PropTypes.string,
-
   /** Name associate with the Field Group. Passed in object as argument to event handlers */
   name: PropTypes.string,
-
   /** Adds an asterisk to indicate this field is required */
   required: PropTypes.bool,
-
   /** Applies 'valid' styling to validation text for feedback. Mutually exclusive with `warning` and `error` props */
   valid: sharedPropTypes.statusPropType,
-
   /** Adds text at the bottom of the field to provide validation feedback. Acquires styles from `valid`, `warning` and `error` statuses */
   validationText: PropTypes.string,
-
   /** Applies 'warning' styling to validation text for feedback. Mutually exclusive with `valid` and `error` props */
   warning: sharedPropTypes.statusPropType
 };

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

@@ -1,10 +1,16 @@
+import { sharedPropTypes } from '@dhis2/ui-constants';
 import { Checkbox } from '@dhis2-ui/checkbox';
 import { Radio } from '@dhis2-ui/radio';
 import { Switch } from '@dhis2-ui/switch';
-import { sharedPropTypes } from '@dhis2/ui-constants';
 import React from 'react';
 import { FieldGroup } from './field-group.js';
-const description = "\nWraps a group of form components like Radios, Checkboxes, or Switches. The FieldGroup wraps the form controls in a FieldSet and a Field component to group them and add a label, help text, and/or validation text.\n\n```js\nimport { FieldGroup } from '@dhis2/ui'\n```\n";
+const description = `
+Wraps a group of form components like Radios, Checkboxes, or Switches. The FieldGroup wraps the form controls in a FieldSet and a Field component to group them and add a label, help text, and/or validation text.
+
+\`\`\`js
+import { FieldGroup } from '@dhis2/ui'
+\`\`\`
+`;
 export default {
   title: 'Field Group',
   component: FieldGroup,
@@ -16,11 +22,14 @@ export default {
     }
   },
   argTypes: {
-    valid: { ...sharedPropTypes.statusArgType
+    valid: {
+      ...sharedPropTypes.statusArgType
     },
-    warning: { ...sharedPropTypes.statusArgType
+    warning: {
+      ...sharedPropTypes.statusArgType
     },
-    error: { ...sharedPropTypes.statusArgType
+    error: {
+      ...sharedPropTypes.statusArgType
     }
   }
 };

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

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

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

@@ -1,7 +1,6 @@
 import _JSXStyle from "styled-jsx/style";
 import PropTypes from 'prop-types';
 import React from 'react';
-
 const FieldSet = _ref => {
   let {
     className,
@@ -15,7 +14,6 @@ const FieldSet = _ref => {
     id: "3541500486"
   }, ["fieldset.jsx-3541500486{border:none;margin:0;padding:0;}"]));
 };
-
 FieldSet.defaultProps = {
   dataTest: 'dhis2-uicore-fieldset'
 };

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

@@ -4,12 +4,16 @@ import { Radio } from '@dhis2-ui/radio';
 import React from 'react';
 import { Field } from '../index.js';
 import { FieldSet } from './field-set.js';
-const description = "\nA container for grouping several Field components together. Use a `<Legend>` component to add helpful guiding text.\n\n```js\nimport { FieldSet } from '@dhis2/ui'\n```\n";
+const description = `
+A container for grouping several Field components together. Use a \`<Legend>\` component to add helpful guiding text.
 
+\`\`\`js
+import { FieldSet } from '@dhis2/ui'
+\`\`\`
+`;
 const onChange = () => {
   console.log('Radio was clicked, nothing else will happen');
 };
-
 export default {
   title: 'Field Set',
   component: FieldSet,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/field",
-    "version": "9.11.0",
+    "version": "9.11.1-beta.10",
     "description": "UI Field",
     "repository": {
         "type": "git",
@@ -22,21 +22,21 @@
         "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/help": "9.11.0",
-        "@dhis2-ui/label": "9.11.0",
-        "@dhis2/ui-constants": "9.11.0",
+        "@dhis2-ui/box": "9.11.1-beta.10",
+        "@dhis2-ui/help": "9.11.1-beta.10",
+        "@dhis2-ui/label": "9.11.1-beta.10",
+        "@dhis2/ui-constants": "9.11.1-beta.10",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },

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

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

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

@@ -1,27 +0,0 @@
-"use strict";
-
-var _checkbox = require("@dhis2-ui/checkbox");
-
-var _react = require("@storybook/react");
-
-var _react2 = _interopRequireDefault(require("react"));
-
-var _fieldGroup = require("./field-group.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _react.storiesOf)('FieldGroup', module).add('With label and required', () => /*#__PURE__*/_react2.default.createElement(_fieldGroup.FieldGroup, {
-  label: "I am a required label",
-  name: "required",
-  value: ['second', 'third'],
-  required: true
-}, /*#__PURE__*/_react2.default.createElement(_checkbox.Checkbox, {
-  value: "first",
-  label: "First"
-}), /*#__PURE__*/_react2.default.createElement(_checkbox.Checkbox, {
-  value: "second",
-  label: "Second"
-}), /*#__PURE__*/_react2.default.createElement(_checkbox.Checkbox, {
-  value: "third",
-  label: "Third"
-})));

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

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

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

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

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

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