@dhis2-ui/text-area 9.11.0 → 9.11.1-beta.1

package/build/es/text-area/{text-area.stories.js → text-area.prod.stories.js}

@@ -1,37 +1,41 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { sharedPropTypes } from '@dhis2/ui-constants';
 import React from 'react';
 import { TextArea } from './index.js';
-const description = "\nA textarea allows multiple lines of text input. Use a textarea wherever a user needs to input a lot of information. Do not use a textarea if a short, single line of content is expected.\n\nOptions for textarea inputs are:\n\n- Rows: the height of the input, defined by the number of rows of text\n- Resizable: whether the textarea can be resized by the user or not. Can be set for both width and height.\n- Autoheight: if enabled, the texarea will grow in height to adapt to the content.\n\n```js\nimport { TextArea } from '@dhis2/ui'\n```\n";
+const description = `
+A textarea allows multiple lines of text input. Use a textarea wherever a user needs to input a lot of information. Do not use a textarea if a short, single line of content is expected.
+
+Options for textarea inputs are:
+
+- Rows: the height of the input, defined by the number of rows of text
+- Resizable: whether the textarea can be resized by the user or not. Can be set for both width and height.
+- Autoheight: if enabled, the texarea will grow in height to adapt to the content.
 
+\`\`\`js
+import { TextArea } from '@dhis2/ui'
+\`\`\`
+`;
 window.onChange = (payload, event) => {
   console.log('onChange payload', payload);
   console.log('onChange event', event);
 };
-
 window.onFocus = (payload, event) => {
   console.log('onFocus payload', payload);
   console.log('onFocus event', event);
 };
-
 window.onBlur = (payload, event) => {
   console.log('onBlur payload', payload);
   console.log('onBlur event', event);
 };
-
 const onChange = function () {
   return window.onChange(...arguments);
 };
-
 const onFocus = function () {
   return window.onFocus(...arguments);
 };
-
 const onBlur = function () {
   return window.onBlur(...arguments);
 };
-
 export default {
   title: 'Text Area',
   component: TextArea,
@@ -43,11 +47,14 @@ export default {
     }
   },
   argTypes: {
-    valid: { ...sharedPropTypes.statusArgType
+    valid: {
+      ...sharedPropTypes.statusArgType
     },
-    error: { ...sharedPropTypes.statusArgType
+    error: {
+      ...sharedPropTypes.statusArgType
     },
-    warning: { ...sharedPropTypes.statusArgType
+    warning: {
+      ...sharedPropTypes.statusArgType
     }
   },
   args: {
@@ -57,9 +64,7 @@ export default {
     onBlur
   }
 };
-
 const Template = args => /*#__PURE__*/React.createElement(TextArea, args);
-
 export const Default = Template.bind({});
 export const PlaceholderNoValue = Template.bind({});
 PlaceholderNoValue.args = {

package/build/es/text-area/text-area.styles.js

@@ -1,3 +1,3 @@
 import { colors, theme, spacers } from '@dhis2/ui-constants';
-export const styles = [".textarea.jsx-1284170182{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:".concat(spacers.dp8, ";}"), "textarea.jsx-1284170182{box-sizing:border-box;padding:8px 12px;color:".concat(colors.grey900, ";background-color:white;border:1px solid ").concat(colors.grey500, ";border-radius:3px;box-shadow:inset 0 0 1px 0 rgba(48,54,60,0.1);outline:0;font-size:14px;line-height:17px;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;}"), "textarea.dense.jsx-1284170182{padding:6px 8px;}", "textarea.jsx-1284170182:focus{outline:none;box-shadow:inset 0 0 0 2px ".concat(theme.focus, ";border-color:").concat(theme.focus, ";}"), "textarea.valid.jsx-1284170182{border-color:".concat(theme.valid, ";}"), "textarea.warning.jsx-1284170182{border-color:".concat(theme.warning, ";}"), "textarea.error.jsx-1284170182{border-color:".concat(theme.error, ";}"), "textarea.read-only.jsx-1284170182{background-color:".concat(colors.grey100, ";border-color:").concat(colors.grey500, ";cursor:text;}"), "textarea.disabled.jsx-1284170182{background-color:".concat(colors.grey100, ";border-color:").concat(colors.grey500, ";color:").concat(theme.disabled, ";cursor:not-allowed;}")];
+export const styles = [`.textarea.jsx-1284170182{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:${spacers.dp8};}`, `textarea.jsx-1284170182{box-sizing:border-box;padding:8px 12px;color:${colors.grey900};background-color:white;border:1px solid ${colors.grey500};border-radius:3px;box-shadow:inset 0 0 1px 0 rgba(48,54,60,0.1);outline:0;font-size:14px;line-height:17px;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;}`, "textarea.dense.jsx-1284170182{padding:6px 8px;}", `textarea.jsx-1284170182:focus{outline:none;box-shadow:inset 0 0 0 2px ${theme.focus};border-color:${theme.focus};}`, `textarea.valid.jsx-1284170182{border-color:${theme.valid};}`, `textarea.warning.jsx-1284170182{border-color:${theme.warning};}`, `textarea.error.jsx-1284170182{border-color:${theme.error};}`, `textarea.read-only.jsx-1284170182{background-color:${colors.grey100};border-color:${colors.grey500};cursor:text;}`, `textarea.disabled.jsx-1284170182{background-color:${colors.grey100};border-color:${colors.grey500};color:${theme.disabled};cursor:not-allowed;}`];
 styles.__hash = "1284170182";

package/build/es/text-area-field/text-area-field.e2e.stories.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TextAreaField } from './index.js';
+export default {
+  title: 'TextAreaField'
+};
+export const WithLabelAndRequired = () => /*#__PURE__*/React.createElement(TextAreaField, {
+  name: "textarea",
+  label: "I am required and have an asterisk",
+  required: true
+});

package/build/es/text-area-field/text-area-field.js

@@ -1,10 +1,9 @@
+import { sharedPropTypes } from '@dhis2/ui-constants';
 import { Box } from '@dhis2-ui/box';
 import { Field } from '@dhis2-ui/field';
-import { sharedPropTypes } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { TextArea } from '../index.js';
-
+import { TextArea } from '../text-area/index.js';
 const TextAreaField = _ref => {
   let {
     className,
@@ -71,7 +70,6 @@ const TextAreaField = _ref => {
     rows: rows
   })));
 };
-
 TextAreaField.defaultProps = {
   rows: 4,
   resize: 'vertical',
@@ -82,71 +80,49 @@ TextAreaField.propTypes = {
   autoGrow: PropTypes.bool,
   className: PropTypes.string,
   dataTest: PropTypes.string,
-
   /** Compact mode */
   dense: PropTypes.bool,
-
   /** Disables the textarea and makes in non-interactive */
   disabled: PropTypes.bool,
-
   /** Applies 'error' styles for validation feedback. Mutually exclusive with `valid` and `warning` props */
   error: sharedPropTypes.statusPropType,
-
   /** Adds useful help text below the textarea */
   helpText: PropTypes.string,
-
   /** Grabs initial focus on the page */
   initialFocus: PropTypes.bool,
-
   /** Sets the width of the textarea. Minimum 220px. Any valid CSS measurement can be used */
   inputWidth: PropTypes.string,
-
   /** Labels the textarea */
   label: PropTypes.string,
-
   /** Adds a loading spinner */
   loading: PropTypes.bool,
-
   /** Name associated with the text area. Passed in object argument to event handlers. */
   name: PropTypes.string,
-
   /** Placeholder text for an empty textarea */
   placeholder: PropTypes.string,
-
   /** Makes the textarea read-only */
   readOnly: PropTypes.bool,
-
   /** Adds an asterisk to the label to indicate this field is required */
   required: PropTypes.bool,
-
   /** [Resize property](https://developer.mozilla.org/en-US/docs/Web/CSS/resize) for the textarea element */
   resize: PropTypes.oneOf(['none', 'both', 'horizontal', 'vertical']),
-
   /** Initial height of the textarea, in lines of text */
   rows: PropTypes.number,
   tabIndex: PropTypes.string,
-
   /** Applies 'valid' styles for validation feedback. Mutually exclusive with `warning` and `error` props */
   valid: sharedPropTypes.statusPropType,
-
   /** Validation text below the textarea to provide validation feedback. Changes appearance depending on validation status */
   validationText: PropTypes.string,
-
   /** Value in the textarea. Can be used to control component (recommended). Passed in object argument to event handlers. */
   value: PropTypes.string,
-
   /** Applies 'warning' styles for validation feedback. Mutually exclusive with `valid` and `error` props */
   warning: sharedPropTypes.statusPropType,
-
   /** Called with signature ({ name: string, value: string }, event) */
   onBlur: PropTypes.func,
-
   /** Called with signature ({ name: string, value: string }, event) */
   onChange: PropTypes.func,
-
   /** Called with signature ({ name: string, value: string }, event) */
   onFocus: PropTypes.func,
-
   /** Called with signature ({ name: string, value: string }, event) */
   onKeyDown: PropTypes.func
 };

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

@@ -1,9 +1,16 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { sharedPropTypes } from '@dhis2/ui-constants';
 import React from 'react';
 import { TextAreaField } from './index.js';
-const description = "\n`TextAreaField` wraps a `TextArea` component with a label, help text, validation text, and other functions.\n\nSee the regular TextArea for usage information and options.\n\n```js\nimport { TextAreaField } from '@dhis2/ui'\n```\n";
+const description = `
+\`TextAreaField\` wraps a \`TextArea\` component with a label, help text, validation text, and other functions.
+
+See the regular TextArea for usage information and options.
+
+\`\`\`js
+import { TextAreaField } from '@dhis2/ui'
+\`\`\`
+`;
 export default {
   title: 'Text Area Field',
   component: TextAreaField,
@@ -20,17 +27,18 @@ export default {
     name: 'textareaName'
   },
   argTypes: {
-    valid: { ...sharedPropTypes.statusArgType
+    valid: {
+      ...sharedPropTypes.statusArgType
     },
-    warning: { ...sharedPropTypes.statusArgType
+    warning: {
+      ...sharedPropTypes.statusArgType
     },
-    error: { ...sharedPropTypes.statusArgType
+    error: {
+      ...sharedPropTypes.statusArgType
     }
   }
 };
-
 const Template = args => /*#__PURE__*/React.createElement(TextAreaField, args);
-
 export const NoPlaceholderNoValue = Template.bind({});
 NoPlaceholderNoValue.storyName = 'No placeholder, no value';
 export const PlaceholderNoValue = Template.bind({});
@@ -50,8 +58,8 @@ WithValue.args = {
 export const Focus = Template.bind({});
 Focus.args = {
   initialFocus: true
-}; // Disable stories that manipulate focus on docs page
-
+};
+// Disable stories that manipulate focus on docs page
 Focus.parameters = {
   docs: {
     disable: true

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/text-area",
-    "version": "9.11.0",
+    "version": "9.11.1-beta.1",
     "description": "UI TextArea",
     "repository": {
         "type": "git",
@@ -22,23 +22,23 @@
         "access": "public"
     },
     "scripts": {
-        "start": "start-storybook -c ../../storybook/config --port 5000",
+        "start": "storybook dev -c ../../storybook/config --port 5000",
         "build": "d2-app-scripts build",
         "test": "d2-app-scripts test --jestConfig ../../jest.config.shared.js"
     },
     "peerDependencies": {
-        "react": "^16.8",
-        "react-dom": "^16.8",
+        "react": "^16.13",
+        "react-dom": "^16.13",
         "styled-jsx": "^4"
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/box": "9.11.0",
-        "@dhis2-ui/field": "9.11.0",
-        "@dhis2-ui/loader": "9.11.0",
-        "@dhis2-ui/status-icon": "9.11.0",
-        "@dhis2/ui-constants": "9.11.0",
-        "@dhis2/ui-icons": "9.11.0",
+        "@dhis2-ui/box": "9.11.1-beta.1",
+        "@dhis2-ui/field": "9.11.1-beta.1",
+        "@dhis2-ui/loader": "9.11.1-beta.1",
+        "@dhis2-ui/status-icon": "9.11.1-beta.1",
+        "@dhis2/ui-constants": "9.11.1-beta.1",
+        "@dhis2/ui-icons": "9.11.1-beta.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },

package/build/cjs/text-area/text-area.stories.e2e.js

@@ -1,30 +0,0 @@
-"use strict";
-
-var _react = require("@storybook/react");
-
-var _react2 = _interopRequireDefault(require("react"));
-
-var _index = require("./index.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-window.onChange = window.Cypress && window.Cypress.cy.stub();
-window.onBlur = window.Cypress && window.Cypress.cy.stub();
-window.onFocus = window.Cypress && window.Cypress.cy.stub();
-(0, _react.storiesOf)('TextArea', module).add('With onChange', () => /*#__PURE__*/_react2.default.createElement(_index.TextArea, {
-  onChange: window.onChange,
-  name: "textarea"
-})).add('With initialFocus and onBlur', () => /*#__PURE__*/_react2.default.createElement(_index.TextArea, {
-  initialFocus: true,
-  name: "textarea",
-  onBlur: window.onBlur
-})).add('With onFocus', () => /*#__PURE__*/_react2.default.createElement(_index.TextArea, {
-  name: "textarea",
-  onFocus: window.onFocus
-})).add('With initialFocus', () => /*#__PURE__*/_react2.default.createElement(_index.TextArea, {
-  name: "textarea",
-  initialFocus: true
-})).add('With disabled', () => /*#__PURE__*/_react2.default.createElement(_index.TextArea, {
-  name: "textarea",
-  disabled: true
-}));

package/build/cjs/text-area-field/text-area-field.stories.e2e.js

@@ -1,15 +0,0 @@
-"use strict";
-
-var _react = require("@storybook/react");
-
-var _react2 = _interopRequireDefault(require("react"));
-
-var _index = require("./index.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _react.storiesOf)('TextAreaField', module).add('With label and required', () => /*#__PURE__*/_react2.default.createElement(_index.TextAreaField, {
-  name: "textarea",
-  label: "I am required and have an asterisk",
-  required: true
-}));

package/build/es/text-area-field/text-area-field.stories.e2e.js

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