@pingux/astro 2.0.0-alpha.1 → 2.0.0-alpha.4

package/lib/components/Text/Text.stories.js

@@ -2,7 +2,7 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
 import React from 'react';
-import { Box, Separator, Table, TableCell, TableBody, TableHead, TableRow, Text } from '../../index';
+import { Box, Separator, Table, TableBody, TableCell, TableHead, TableRow, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Text',
@@ -43,7 +43,6 @@ var sx = {
     borderBottom: 'unset'
   }
 };
-
 var TableHeading = function TableHeading(_ref) {
   var title = _ref.title;
   return ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
@@ -65,10 +64,9 @@ var TableHeading = function TableHeading(_ref) {
     isHeading: true
   }, "Example")));
 };
-
 var TableData = function TableData(_ref2) {
   var variant = _ref2.variant,
-      value = _ref2.value;
+    value = _ref2.value;
   return ___EmotionJSX(TableRow, {
     sx: {
       backgroundColor: 'transparent !important',
@@ -87,10 +85,8 @@ var TableData = function TableData(_ref2) {
     sx: sx.cell
   }, ___EmotionJSX(Text, null, value.example)));
 };
-
 export var Default = function Default() {
   var _context, _context2, _context3, _context4, _context5, _context6;
-
   var fontSizes = {
     xx: '23px (xx)',
     lg: '17px (lg)',
@@ -110,7 +106,7 @@ export var Default = function Default() {
       fontSize: fontSizes.xx,
       example: ___EmotionJSX(Text, {
         variant: "H1",
-        as: "H1"
+        as: "h1"
       }, '<Text variant="H1" as="H1"/>')
     },
     H2: {
@@ -118,7 +114,7 @@ export var Default = function Default() {
       fontSize: fontSizes.lg,
       example: ___EmotionJSX(Text, {
         variant: "H2",
-        as: "H2"
+        as: "h2"
       }, '<Text variant="H2" as="H2"/>')
     },
     H3: {
@@ -126,7 +122,7 @@ export var Default = function Default() {
       fontSize: fontSizes.md,
       example: ___EmotionJSX(Text, {
         variant: "H3",
-        as: "H3"
+        as: "h3"
       }, '<Text variant="H3" as="H3"/>')
     },
     H4: {
@@ -134,7 +130,7 @@ export var Default = function Default() {
       fontSize: fontSizes.sm,
       example: ___EmotionJSX(Text, {
         variant: "H4",
-        as: "H4"
+        as: "h4"
       }, '<Text variant="H4" as="H4"/>')
     }
   };
@@ -292,9 +288,8 @@ export var Default = function Default() {
     sx: sx.tableBody
   }, _mapInstanceProperty(_context = _Object$entries(headingVariants)).call(_context, function (_ref3) {
     var _ref4 = _slicedToArray(_ref3, 2),
-        key = _ref4[0],
-        value = _ref4[1];
-
+      key = _ref4[0],
+      value = _ref4[1];
     return ___EmotionJSX(TableData, {
       variant: key,
       value: value,
@@ -327,9 +322,8 @@ export var Default = function Default() {
     sx: sx.tableBody
   }, _mapInstanceProperty(_context2 = _Object$entries(baseAndSubtitleVariants)).call(_context2, function (_ref5) {
     var _ref6 = _slicedToArray(_ref5, 2),
-        key = _ref6[0],
-        value = _ref6[1];
-
+      key = _ref6[0],
+      value = _ref6[1];
     return ___EmotionJSX(TableRow, {
       sx: {
         backgroundColor: 'transparent !important'
@@ -358,9 +352,8 @@ export var Default = function Default() {
     sx: sx.tableBody
   }, _mapInstanceProperty(_context3 = _Object$entries(largeVariants)).call(_context3, function (_ref7) {
     var _ref8 = _slicedToArray(_ref7, 2),
-        key = _ref8[0],
-        value = _ref8[1];
-
+      key = _ref8[0],
+      value = _ref8[1];
     return ___EmotionJSX(TableData, {
       variant: key,
       value: value,
@@ -374,9 +367,8 @@ export var Default = function Default() {
     sx: sx.tableBody
   }, _mapInstanceProperty(_context4 = _Object$entries(mediumVariants)).call(_context4, function (_ref9) {
     var _ref10 = _slicedToArray(_ref9, 2),
-        key = _ref10[0],
-        value = _ref10[1];
-
+      key = _ref10[0],
+      value = _ref10[1];
     return ___EmotionJSX(TableData, {
       variant: key,
       value: value,
@@ -390,9 +382,8 @@ export var Default = function Default() {
     sx: sx.tableBody
   }, _mapInstanceProperty(_context5 = _Object$entries(smallVariants)).call(_context5, function (_ref11) {
     var _ref12 = _slicedToArray(_ref11, 2),
-        key = _ref12[0],
-        value = _ref12[1];
-
+      key = _ref12[0],
+      value = _ref12[1];
     return ___EmotionJSX(TableData, {
       variant: key,
       value: value,
@@ -406,9 +397,8 @@ export var Default = function Default() {
     sx: sx.tableBody
   }, _mapInstanceProperty(_context6 = _Object$entries(xsmallVariants)).call(_context6, function (_ref13) {
     var _ref14 = _slicedToArray(_ref13, 2),
-        key = _ref14[0],
-        value = _ref14[1];
-
+      key = _ref14[0],
+      value = _ref14[1];
     return ___EmotionJSX(TableData, {
       variant: key,
       value: value,

package/lib/components/Text/Text.styles.js

@@ -7,11 +7,8 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 export var base = {
   display: 'block',
   fontSize: 'md',
@@ -26,7 +23,6 @@ export var wordWrap = {
   wordWrap: 'break-word',
   wordBreak: 'break-word'
 };
-
 var tabLabel = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {}, {
   fontSize: 'sm',
   fontWeight: 1,
@@ -45,35 +41,30 @@ var tabLabel = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {
     color: 'neutral.80'
   }
 });
-
 var environmentBreadcrumb = _objectSpread(_objectSpread({}, base), {}, {
   fontSize: 'sm',
   fontWeight: 3,
   color: 'secondary',
   textTransform: 'capitalize'
 });
-
 var title = _objectSpread(_objectSpread({}, wordWrap), {}, {
   fontSize: 'xx',
   fontWeight: 1,
   color: 'text.primary',
   fontFamily: 'standard'
 });
-
 var sectionTitle = _objectSpread(_objectSpread({}, wordWrap), {}, {
   fontSize: 'lg',
   fontWeight: 2,
   color: 'text.primary',
   fontFamily: 'standard'
 });
-
 var itemTitle = _objectSpread(_objectSpread({}, wordWrap), {}, {
   fontSize: 'md',
   fontWeight: 1,
   color: 'text.primary',
   fontFamily: 'standard'
 });
-
 export var text = {
   base: base,
   bodyStrong: _objectSpread(_objectSpread({}, wordWrap), {}, {

package/lib/components/Text/Text.test.js

@@ -8,32 +8,28 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React from 'react';
 import { ThemeProvider } from 'theme-ui';
-import { render, screen } from '../../utils/testUtils/testWrapper';
-import Text from '.';
 import axeTest from '../../utils/testUtils/testAxe';
 import testTheme from '../../utils/testUtils/testTheme';
+import { render, screen } from '../../utils/testUtils/testWrapper';
+import Text from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-text';
 var defaultProps = {
   'data-testid': testId
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var children = props.children;
   return render(___EmotionJSX(ThemeProvider, {
     theme: testTheme
   }, ___EmotionJSX(Text, _extends({}, defaultProps, props), children)));
-}; // Need to be added to each test file to test accessibility using axe.
-
+};
 
+// Need to be added to each test file to test accessibility using axe.
 axeTest(getComponent);
 test('default text', function () {
   getComponent();
@@ -53,13 +49,11 @@ test('typography props will be applied', function () {
   };
   getComponent(_objectSpread({}, customTypographyProps));
   var text = screen.getByTestId(testId);
-  expect(text).toHaveStyle({
-    fontFamily: 'times',
-    fontSize: '23px',
-    fontWeight: 900,
-    lineHeight: '2em',
-    letterSpacing: '5px',
-    textAlign: 'right',
-    fontStyle: 'italic'
-  });
+  expect(text).toHaveStyle('fontFamily: times');
+  expect(text).toHaveStyle('fontSize: xx');
+  expect(text).toHaveStyle('fontWeight: 900');
+  expect(text).toHaveStyle('lineHeight: 2em');
+  expect(text).toHaveStyle('letterSpacing: 5px');
+  expect(text).toHaveStyle('textAlign: right');
+  expect(text).toHaveStyle('fontStyle: italic');
 });

package/lib/components/TextArea/TextArea.js

@@ -8,11 +8,11 @@ import { Textarea as ThemeUITextArea } from 'theme-ui';
  *
  * **Note: Requires a label. It's recommended to use `TextAreaField` for a complete solution.**
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var TextArea = /*#__PURE__*/forwardRef(function (props, ref) {
   return ___EmotionJSX(ThemeUITextArea, _extends({
-    ref: ref // this requires to fix safari resizing issue (UIP-4995)
+    ref: ref
+    // this requires to fix safari resizing issue (UIP-4995)
     ,
     sx: {
       position: 'relative'

package/lib/components/TextArea/TextArea.styles.js

@@ -7,12 +7,10 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import { input } from '../Input/Input.styles'; // Styles for default input and variants go here.
+import { input } from '../Input/Input.styles';
+// Styles for default input and variants go here.
 
 export var baseField = _objectSpread(_objectSpread({}, input), {}, {
   height: 'unset',

package/lib/components/TextArea/TextArea.test.js

@@ -1,20 +1,19 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import TextArea from '.';
 import axeTest from '../../utils/testUtils/testAxe';
+import TextArea from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'textAreaField';
 var defaultProps = {
   'data-testid': testId
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(TextArea, _extends({}, defaultProps, props)));
-}; // Need to be added to each test file to test accessibility using axe.
-
+};
 
+// Need to be added to each test file to test accessibility using axe.
 axeTest(getComponent, {
   // TextArea with label provided by TextAreaField
   rules: {

package/lib/components/TextAreaField/TextAreaField.js

@@ -9,43 +9,38 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import React, { forwardRef, useRef, useImperativeHandle, useEffect, useCallback } from 'react';
-import PropTypes from 'prop-types';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef } from 'react';
 import { useLayoutEffect, useResizeObserver } from '@react-aria/utils';
+import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
-import { Box, FieldHelperText, Label, TextArea } from '../../';
-import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { Box, FieldHelperText, Label, TextArea } from '../..';
 import { useColumnStyles, useField, useLabelHeight, usePropWarning } from '../../hooks';
 import statuses from '../../utils/devUtils/constants/statuses';
+import { ariaAttributesBasePropTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { inputFieldAttributesBasePropTypes } from '../../utils/devUtils/props/fieldAttributes';
+
 /**
  * Combines a textarea, label, and helper text for a complete, form-ready solution.
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
   var helperText = props.helperText,
-      isUnresizable = props.isUnresizable,
-      rows = props.rows,
-      status = props.status,
-      slots = props.slots;
+    isUnresizable = props.isUnresizable,
+    rows = props.rows,
+    status = props.status,
+    slots = props.slots;
   var statusClasses = {
     isUnresizable: isUnresizable
   };
-
   var _useField = useField(_objectSpread({
-    statusClasses: statusClasses
-  }, props)),
-      fieldContainerProps = _useField.fieldContainerProps,
-      fieldControlInputProps = _useField.fieldControlInputProps,
-      fieldControlWrapperProps = _useField.fieldControlWrapperProps,
-      fieldLabelProps = _useField.fieldLabelProps;
-
+      statusClasses: statusClasses
+    }, props)),
+    fieldContainerProps = _useField.fieldContainerProps,
+    fieldControlInputProps = _useField.fieldControlInputProps,
+    fieldControlWrapperProps = _useField.fieldControlWrapperProps,
+    fieldLabelProps = _useField.fieldLabelProps;
   var containerRef = useRef();
   var fieldControlWrapperRef = useRef();
   var labelRef = useRef();
@@ -55,24 +50,21 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
   var helperTextId = uuid();
   usePropWarning(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
-
   useImperativeHandle(ref, function () {
     return textAreaRef.current;
   });
-  /* istanbul ignore next */
 
+  /* istanbul ignore next */
   var resizeFloatLabel = function resizeFloatLabel() {
     /* istanbul ignore next */
     labelRef.current.style.width = textAreaRef.current.style.width;
     labelWrapperRef.current.style.width = "".concat(textAreaRef.current.clientWidth - 2, "px");
   };
-  /* istanbul ignore next */
-
 
+  /* istanbul ignore next */
   var resizeSlotContainer = function resizeSlotContainer() {
     fieldControlWrapperRef.current.style.width = textAreaRef.current.style.width;
   };
-
   var onResize = useCallback(function () {
     /* istanbul ignore next */
     if (slots !== null && slots !== void 0 && slots.inContainer) {
@@ -84,28 +76,23 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
     onResize: onResize
   });
   useLayoutEffect(onResize, [onResize]);
-
   var _useLabelHeight = useLabelHeight({
-    labelRef: labelRef,
-    inputRef: textAreaRef
-  }),
-      isLabelHigher = _useLabelHeight.isLabelHigher;
-
+      labelRef: labelRef,
+      inputRef: textAreaRef
+    }),
+    isLabelHigher = _useLabelHeight.isLabelHigher;
   var columnStyleProps = useColumnStyles({
     labelMode: props.labelMode
   });
   useEffect(function () {
     var thisRef = textAreaRef.current;
-
     if (!props.isUnresizable && props.labelMode === 'float') {
       thisRef.addEventListener('mousemove', props.resizeCallback ? props.resizeCallback : resizeFloatLabel);
     }
-
     return function () {
       thisRef.removeEventListener('mousemove', props.resizeCallback ? props.resizeCallback : resizeFloatLabel);
     };
   }, [props.isUnresizable, props.labelMode, props.resizeCallback]);
-
   var labelNode = ___EmotionJSX(Label, _extends({
     ref: labelRef
   }, fieldLabelProps, {
@@ -113,12 +100,10 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
       gridRow: '1/5'
     }
   }));
-
   var wrappedLabel = ___EmotionJSX(Box, {
     variant: "forms.textarea.floatLabelWrapper",
     ref: labelWrapperRef
   }, labelNode);
-
   return ___EmotionJSX(Box, _extends({
     variant: "forms.input.fieldContainer"
   }, fieldContainerProps, {
@@ -154,25 +139,18 @@ var TextAreaField = /*#__PURE__*/forwardRef(function (props, ref) {
 TextAreaField.propTypes = _objectSpread(_objectSpread({
   /** The rendered label for the field. */
   label: PropTypes.node,
-
   /** Text rendered below the textarea. */
   helperText: PropTypes.node,
-
   /** If present this prop will cause a help hint to render in the label of the field. */
   hintText: PropTypes.string,
-
   /** The unique identifier for the textarea element. */
   id: PropTypes.string,
-
   /** A string designating whether or not the label is a float label. */
   labelMode: PropTypes.string,
-
   /** Whether the textarea is unable to be resized. */
   isUnresizable: PropTypes.bool,
-
   /** The name for the textarea element. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-name). */
   name: PropTypes.string,
-
   /**
    * Callback fired when the value is changed on the textarea element.
    *
@@ -180,64 +158,46 @@ TextAreaField.propTypes = _objectSpread(_objectSpread({
    * You can pull out the new value by accessing `event.target.value` (string).
    */
   onChange: PropTypes.func,
-
   /** The value for the textarea element (controlled). */
   value: PropTypes.string,
-
   /** How the input should handle autocompletion according to the browser. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete). The `autocomplete` prop is an alias for this. */
   autoComplete: PropTypes.string,
-
   /** @ignore Alias for `autoComplete` prop. Exists for backwards-compatibility. */
   autocomplete: PropTypes.string,
-
   /** A list of class names to apply to the textarea element. */
   className: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-
   /** The default value for the textarea element. */
   defaultValue: PropTypes.string,
-
   /** Whether the textarea element is automatically focused when loaded onto the page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attr-autofocus). */
   hasAutoFocus: PropTypes.bool,
-
   /** Whether the field has a status indicator. */
   hasNoStatusIndicator: PropTypes.bool,
-
   /** Whether the field is disabled. */
   isDisabled: PropTypes.bool,
-
   /** Whether the input can be selected, but not changed by the user. */
   isReadOnly: PropTypes.bool,
-
   /** Whether the field is required. */
   isRequired: PropTypes.bool,
-
   /** Add max Length to input value */
   maxLength: PropTypes.number,
-
   /**
    * Callback fired when focus is lost on the textarea element.
    */
   onBlur: PropTypes.func,
-
   /**
    * Callback fired when focus is lost on the textarea element.
    */
   onFocus: PropTypes.func,
-
   /**
    * Callback fired when textfield is resized.
    */
   resizeCallback: PropTypes.func,
-
   /** The placeholder text to display in the textarea element. */
   placeholder: PropTypes.string,
-
   /** The number of rows to display for the textarea. Controls the default height. */
   rows: PropTypes.number,
-
   /** Determines the textarea status indicator and helper text styling. */
   status: PropTypes.oneOf(_Object$values(statuses)),
-
   /** Provides a way to insert markup in specified places. */
   slots: PropTypes.shape({
     /** The given node will be inserted into the field container. */

package/lib/components/TextAreaField/TextAreaField.stories.js

@@ -10,19 +10,16 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
-
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 import React, { useState } from 'react';
 import SearchIcon from 'mdi-react/SearchIcon';
-import TextAreaField from '.';
-import { Box, Icon } from '../../';
+import { Box, Icon } from '../..';
+import statuses from '../../utils/devUtils/constants/statuses';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
 import { modes as labelModes } from '../Label/constants';
-import statuses from '../../utils/devUtils/constants/statuses';
+import TextAreaField from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/TextAreaField',
@@ -84,18 +81,17 @@ export default {
     }
   }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
 };
-
 var IconSlot = ___EmotionJSX(Box, {
   isRow: true
 }, ___EmotionJSX(Icon, {
   icon: SearchIcon
 }));
-
 export var Default = function Default(args) {
   return ___EmotionJSX(TextAreaField, args);
 };
 export var WithSlots = function WithSlots(args) {
-  return (// This is an example of a slot that can be passed into the component
+  return (
+    // This is an example of a slot that can be passed into the component
     // const IconSlot = (
     //   <Box isRow>
     //     <Icon
@@ -118,10 +114,9 @@ export var FloatLabel = function FloatLabel() {
 };
 export var Controlled = function Controlled() {
   var _useState = useState(),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
   return ___EmotionJSX(TextAreaField, {
     label: "Example Label",
     onChange: function onChange(e) {

package/lib/components/TextAreaField/TextAreaField.test.js

@@ -3,11 +3,11 @@ import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-sta
 import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import React from 'react';
-import userEvent from '@testing-library/user-event';
 import { fireEvent } from '@testing-library/react';
-import axeTest from '../../utils/testUtils/testAxe';
-import { screen, render } from '../../utils/testUtils/testWrapper';
+import userEvent from '@testing-library/user-event';
 import statuses from '../../utils/devUtils/constants/statuses';
+import axeTest from '../../utils/testUtils/testAxe';
+import { render, screen } from '../../utils/testUtils/testWrapper';
 import TextAreaField from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-textAreaField';
@@ -15,14 +15,13 @@ var defaultProps = {
   'data-testid': testId,
   label: 'testLabel'
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(TextAreaField, _extends({}, defaultProps, props)));
 };
+var mockfunction = jest.fn();
 
-var mockfunction = jest.fn(); // Need to be added to each test file to test accessibility using axe.
-
+// Need to be added to each test file to test accessibility using axe.
 axeTest(getComponent);
 test('disabled prop disables input', function () {
   getComponent({
@@ -78,7 +77,6 @@ test('mousemove calls resize event', function () {
 });
 test('label will receive gridRow attribute if it will be higher than textarea', function () {
   var originalOffsetHeight = _Object$getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetHeight');
-
   _Object$defineProperties(window.HTMLElement.prototype, {
     offsetHeight: {
       get: function get() {
@@ -86,10 +84,8 @@ test('label will receive gridRow attribute if it will be higher than textarea',
       }
     }
   });
-
   getComponent();
   expect(screen.getByText(defaultProps.label)).toHaveStyle('grid-row: 1/5');
-
   _Object$defineProperty(HTMLElement.prototype, 'offsetHeight', originalOffsetHeight);
 });
 test('form wrapper will have default max label column width when no custom width set', function () {
@@ -126,7 +122,6 @@ test('providing slot props causes slot to render', function () {
   var slot = ___EmotionJSX("p", {
     "data-testid": "testSlot"
   }, "testText");
-
   var slots = {
     inContainer: slot
   };