@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/lib/components/NumberField/NumberField.stories.js

@@ -8,15 +8,13 @@ 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 _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 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 React, { useState } from 'react';
+import statuses from '../../utils/devUtils/constants/statuses';
 import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
+import { inputFieldAttributeBaseArgTypes } from '../../utils/devUtils/props/fieldAttributes';
 import NumberField from './NumberField';
-import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Form/NumberField',
@@ -28,7 +26,7 @@ export default {
       }
     }
   },
-  argTypes: _objectSpread({
+  argTypes: _objectSpread(_objectSpread({
     label: {
       control: {
         type: 'text'
@@ -101,7 +99,7 @@ export default {
         type: 'none'
       }
     }
-  }, ariaAttributeBaseArgTypes)
+  }, ariaAttributeBaseArgTypes), inputFieldAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   return ___EmotionJSX(NumberField, args);
@@ -119,10 +117,9 @@ export var Decimals = function Decimals() {
 };
 export var ControlledState = function ControlledState() {
   var _useState = useState(12),
-      _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
   return ___EmotionJSX(NumberField, {
     label: "Controlled State",
     value: value,

package/lib/{styles/variants/numberField.js → components/NumberField/NumberField.styles.js}

@@ -7,12 +7,11 @@ 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";
-
+var _objectSpread2;
 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 '../forms/input';
+import statuses from '../../utils/devUtils/constants/statuses';
+import { input } from '../Input/Input.styles';
 var sharedStyles = {
   WebkitAppearance: 'none',
   margin: 0
@@ -24,13 +23,17 @@ var noDefaultArrows = {
     MozAppearance: 'textfield'
   }
 };
-
-var arrowsWrapper = _objectSpread({
+var arrowsWrapper = _objectSpread(_objectSpread({
   display: 'flex',
   justifyContent: 'center',
   position: 'relative'
-}, input.container);
-
+}, input.fieldControlWrapper), {}, (_objectSpread2 = {}, _defineProperty(_objectSpread2, "&.is-".concat(statuses.ERROR, "::after"), {
+  bg: 'critical.bright'
+}), _defineProperty(_objectSpread2, "&.is-".concat(statuses.SUCCESS, "::after"), {
+  bg: 'success.bright'
+}), _defineProperty(_objectSpread2, "&.is-".concat(statuses.WARNING, "::after"), {
+  bg: 'warning.bright'
+}), _objectSpread2));
 var arrows = {
   position: 'absolute',
   right: '10px'

package/lib/components/NumberField/NumberField.test.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import userEvent from '@testing-library/user-event';
 import { fireEvent } from '@testing-library/react';
-import { render, screen } from '../../utils/testUtils/testWrapper';
+import userEvent from '@testing-library/user-event';
 import { NumberField } from '../../index';
-import axeTest from '../../utils/testUtils/testAxe';
 import statuses from '../../utils/devUtils/constants/statuses';
+import axeTest from '../../utils/testUtils/testAxe';
+import { render, screen } from '../../utils/testUtils/testWrapper';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-NumberField';
 var testLabel = 'test-NumberField-label';
@@ -22,13 +22,12 @@ var defaultProps = {
   incrementAriaLabel: incrementAriaLabel,
   decrementAriaLabel: decrementAriaLabel
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(NumberField, _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, {
   // ListItem represents list's child without parent
   rules: {

package/lib/components/OverlayPanel/OverlayPanel.js

@@ -3,12 +3,13 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "isOpen", "onClose", "className", "state", "size", "triggerRef"];
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
-import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import { FocusScope } from 'react-aria';
 import PropTypes from 'prop-types';
-import { FocusScope } from '@react-aria/focus';
-import { Box } from '../../';
-import { useStatusClasses, useOverlayPanelState } from '../../hooks';
+import { Box } from '../..';
+import { useOverlayPanelState, useStatusClasses } from '../../hooks';
 import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
+
 /**
  * In Astro, side panels are used to show details and present modal interactions.
  *
@@ -16,76 +17,62 @@ import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
  * This is a Storybook only issue and will not effect the way it works in your app. Be sure to
  * use Chrome or Safari to view how this component works.
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var OverlayPanel = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$sx;
-
   var children = props.children,
-      isOpen = props.isOpen,
-      onCloseProp = props.onClose,
-      className = props.className,
-      state = props.state,
-      size = props.size,
-      triggerRef = props.triggerRef,
-      others = _objectWithoutProperties(props, _excluded);
-
+    isOpen = props.isOpen,
+    onCloseProp = props.onClose,
+    className = props.className,
+    state = props.state,
+    size = props.size,
+    triggerRef = props.triggerRef,
+    others = _objectWithoutProperties(props, _excluded);
   var _useOverlayPanelState = useOverlayPanelState(),
-      onClose = _useOverlayPanelState.onClose;
-
+    onClose = _useOverlayPanelState.onClose;
   var overlayPanelRef = useRef();
   /* istanbul ignore next */
-
   useImperativeHandle(ref, function () {
     return overlayPanelRef.current;
   });
-
   var _useStatusClasses = useStatusClasses(className, _defineProperty({
-    isOpen: isOpen
-  }, "is-".concat(props !== null && props !== void 0 && (_props$sx = props.sx) !== null && _props$sx !== void 0 && _props$sx.width ? 'custom' : size), size)),
-      classNames = _useStatusClasses.classNames;
-
+      isOpen: isOpen
+    }, "is-".concat(props !== null && props !== void 0 && (_props$sx = props.sx) !== null && _props$sx !== void 0 && _props$sx.width ? 'custom' : size), size)),
+    classNames = _useStatusClasses.classNames;
   var handleClose = function handleClose(e) {
     e.stopPropagation();
-
     if (e.key === 'Escape') {
       onClose(state, triggerRef, onCloseProp);
     }
   };
-
   return ___EmotionJSX(FocusScope, {
     autoFocus: true
   }, ___EmotionJSX(Box, _extends({
-    variant: "overlayPanel.overlayPanel",
+    variant: "overlayPanel.container",
     ref: overlayPanelRef
   }, others, {
     className: classNames,
     onKeyUp: handleClose
   }), ___EmotionJSX(Box, {
-    variant: "overlayPanel.overlayPanelBody",
+    variant: "overlayPanel.body",
     className: classNames
   }, children)));
 });
 OverlayPanel.propTypes = {
   /** Sets the open state of the menu. */
   isOpen: PropTypes.bool,
-
   /** Sets the size of the overlay panel. */
   size: PropTypes.oneOf(_Object$values(panelSizes)),
-
   /** JSX styling that is passed into the component. */
   sx: PropTypes.shape({
     width: PropTypes.string
   }),
-
   /** State object that is passed in from the useOverlayPanelState hook */
   state: PropTypes.shape({
     close: PropTypes.func
   }),
-
   /** Callback function that runs when the esc key is used to close the OverlayPanel. */
   onClose: PropTypes.func,
-
   /** Ref that is connected to the button that triggers the overlay state.
    Focus will return to this ref when the keyboard is used to close the OverlayPanel. */
   triggerRef: PropTypes.shape({})

package/lib/components/OverlayPanel/OverlayPanel.stories.js

@@ -1,17 +1,16 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import React, { useState, useRef } from 'react';
-import { Item } from '@react-stately/collections';
-import ArrowTopRightBottomLeft from 'mdi-react/ArrowTopRightBottomLeftIcon';
+import React, { useRef, useState } from 'react';
 import ArrowCollapse from 'mdi-react/ArrowCollapseIcon';
+import ArrowTopRightBottomLeft from 'mdi-react/ArrowTopRightBottomLeftIcon';
+import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
 import CloseIcon from 'mdi-react/CloseIcon';
 import CogIcon from 'mdi-react/CogIcon';
-import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
 import { useOverlayPanelState } from '../../hooks';
-import OverlayPanel from './OverlayPanel';
-import { OverlayProvider, Box, Text, List, ListItem, Separator, Messages, Button, Avatar, IconButton, Breadcrumbs, Tabs, Tab, TextField, MultivaluesField, SwitchField, ColorField } from '../../index';
-import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
+import { Avatar, Box, Breadcrumbs, Button, ColorField, IconButton, Item, ListView, Messages, MultivaluesField, OverlayPanel, OverlayProvider, SwitchField, Tab, Tabs, Text, TextField } from '../../index';
 import { pingImg } from '../../utils/devUtils/constants/images';
+import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/OverlayPanel',
@@ -41,14 +40,13 @@ export default {
   }
 };
 export var Default = function Default(_ref) {
-  var args = _extends({}, _ref);
-
+  var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   var _useOverlayPanelState = useOverlayPanelState(),
-      state = _useOverlayPanelState.state,
-      onClose = _useOverlayPanelState.onClose;
-
+    state = _useOverlayPanelState.state,
+    onClose = _useOverlayPanelState.onClose;
   var triggerRef = useRef();
-  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay is open.
     ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), ___EmotionJSX("br", null), ___EmotionJSX(Button, {
       ref: triggerRef,
@@ -70,41 +68,32 @@ export var Default = function Default(_ref) {
   );
 };
 export var InnerPanel = function InnerPanel(_ref2) {
-  var args = _extends({}, _ref2);
-
+  var args = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
   var _useOverlayPanelState2 = useOverlayPanelState(),
-      state = _useOverlayPanelState2.state,
-      onClose = _useOverlayPanelState2.onClose;
-
+    state = _useOverlayPanelState2.state,
+    onClose = _useOverlayPanelState2.onClose;
   var _useOverlayPanelState3 = useOverlayPanelState(),
-      innerState = _useOverlayPanelState3.state,
-      onCloseInner = _useOverlayPanelState3.onClose;
-
+    innerState = _useOverlayPanelState3.state,
+    onCloseInner = _useOverlayPanelState3.onClose;
   var outerTriggerRef = useRef();
   var innerTriggerRef = useRef();
-
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      messagesOpen = _useState2[0],
-      setMessagesOpen = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    messagesOpen = _useState2[0],
+    setMessagesOpen = _useState2[1];
   var toggleMessagesOpen = function toggleMessagesOpen() {
     setMessagesOpen(!messagesOpen);
   };
-
   var closeOuterPanel = function closeOuterPanel() {
     if (innerState.isOpen) {
       innerState.close();
     }
-
     onClose(state, outerTriggerRef);
   };
-
   var closeInnerPanel = function closeInnerPanel() {
     onCloseInner(innerState, innerTriggerRef);
   };
-
-  var inner = ___EmotionJSX(React.Fragment, null, innerState.isOpen && ___EmotionJSX(OverlayPanel, _extends({
+  var inner = innerState.isOpen && ___EmotionJSX(OverlayPanel, _extends({
     variant: "overlayPanel.overlayPanelInner" // applies higher z-index
     ,
     isOpen: innerState.isOpen
@@ -115,10 +104,17 @@ export var InnerPanel = function InnerPanel(_ref2) {
     onPress: closeInnerPanel
   }, "Close Inner Panel"), ___EmotionJSX(Text, {
     pt: "md"
-  }, "Children render here."))));
-
-  var outer = // should have higher z-index applied
-  ___EmotionJSX(React.Fragment, null, state.isOpen && ___EmotionJSX(OverlayPanel, _extends({
+  }, "Children render here.")));
+  var items = [{
+    id: 1,
+    name: 'Form 1'
+  }, {
+    id: 2,
+    name: 'Form 2'
+  }];
+  var outer =
+  // should have higher z-index applied
+  state.isOpen && ___EmotionJSX(OverlayPanel, _extends({
     isOpen: state.isOpen,
     sx: {
       p: '0px'
@@ -136,29 +132,25 @@ export var InnerPanel = function InnerPanel(_ref2) {
   }, "Close Panel"), ___EmotionJSX(Text, {
     pt: "md",
     mb: "24px"
-  }, "Children render here."), ___EmotionJSX(List, null, ___EmotionJSX(ListItem, null, ___EmotionJSX(Text, {
-    variant: "itemTitle",
-    alignSelf: "center",
-    mr: "auto"
-  }, "Form 1")), ___EmotionJSX(Separator, {
-    margin: "0"
-  }), ___EmotionJSX(ListItem, {
-    title: "Form 2"
-  }, ___EmotionJSX(Text, {
-    variant: "itemTitle",
-    alignSelf: "center",
-    mr: "auto"
-  }, "Form 2")), ___EmotionJSX(Separator, {
-    margin: "0"
-  })), ___EmotionJSX("br", null), ___EmotionJSX(Button, {
+  }, "Children render here."), ___EmotionJSX(ListView, {
+    items: items
+  }, function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.id
+    }, ___EmotionJSX(Text, {
+      variant: "itemTitle",
+      alignSelf: "center",
+      mr: "auto"
+    }, item.name));
+  }), ___EmotionJSX("br", null), ___EmotionJSX(Button, {
     onPress: toggleMessagesOpen
   }, "Toggle Messages"), ___EmotionJSX("br", null), ___EmotionJSX(Button, {
     ref: innerTriggerRef,
     onPress: innerState.open,
     "aria-expanded": innerState.isOpen
-  }, "Open Inner Panel"), inner)));
-
-  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+  }, "Open Inner Panel"), inner));
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
     ___EmotionJSX(React.Fragment, null, ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
       ref: outerTriggerRef,
@@ -177,11 +169,11 @@ export var InnerPanel = function InnerPanel(_ref2) {
 };
 export var CustomWidth = function CustomWidth() {
   var _useOverlayPanelState4 = useOverlayPanelState(),
-      state = _useOverlayPanelState4.state,
-      onClose = _useOverlayPanelState4.onClose;
-
+    state = _useOverlayPanelState4.state,
+    onClose = _useOverlayPanelState4.onClose;
   var triggerRef = useRef();
-  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
     ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), ___EmotionJSX("br", null), ___EmotionJSX(Button, {
       ref: triggerRef,
@@ -206,16 +198,13 @@ export var CustomWidth = function CustomWidth() {
 };
 export var Expandable = function Expandable() {
   var _useOverlayPanelState5 = useOverlayPanelState(),
-      state = _useOverlayPanelState5.state,
-      onClose = _useOverlayPanelState5.onClose;
-
+    state = _useOverlayPanelState5.state,
+    onClose = _useOverlayPanelState5.onClose;
   var triggerRef = useRef();
-
   var _useState3 = useState(false),
-      _useState4 = _slicedToArray(_useState3, 2),
-      isExpanded = _useState4[0],
-      setIsExpanded = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    isExpanded = _useState4[0],
+    setIsExpanded = _useState4[1];
   var sx = {
     overlayPanel: {
       padding: 0,
@@ -288,11 +277,9 @@ export var Expandable = function Expandable() {
     name: 'node 2',
     key: 'node2'
   }];
-
   var onCloseHandler = function onCloseHandler() {
     return onClose(state, triggerRef);
   };
-
   var header = ___EmotionJSX(Box, {
     sx: sx.header
   }, ___EmotionJSX(Box, {
@@ -343,7 +330,6 @@ export var Expandable = function Expandable() {
     variant: "neutralText",
     "data-id": "editGroups"
   }, "Make Decision Request"))));
-
   var generalTabContent = ___EmotionJSX(Box, {
     sx: sx.tabContent
   }, ___EmotionJSX(TextField, {
@@ -384,7 +370,6 @@ export var Expandable = function Expandable() {
       "data-id": item.name
     }, item.name);
   }));
-
   var settingsTabContent = ___EmotionJSX(Box, {
     sx: sx.tabContent
   }, ___EmotionJSX(SwitchField, {
@@ -409,7 +394,6 @@ export var Expandable = function Expandable() {
     label: "Expire Node Instance Cache",
     value: "expire-node-instance-cache"
   }));
-
   var schemaTabContent = ___EmotionJSX(Box, {
     sx: sx.tabContent
   }, ___EmotionJSX(TextField, {
@@ -421,7 +405,6 @@ export var Expandable = function Expandable() {
     label: "Log field Description",
     defaultValue: "The Value of the Text Input"
   }));
-
   var footer = ___EmotionJSX(Box, {
     isRow: true,
     sx: sx.footer
@@ -434,8 +417,8 @@ export var Expandable = function Expandable() {
     sx: sx.footer.button,
     variant: "text"
   }, "Cancel"));
-
-  return (// Application must be wrapped in an OverlayProvider so that it can be hidden from screen
+  return (
+    // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
     // readers when an overlay opens.
     ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
       ref: triggerRef,

package/lib/{styles/variants/overlayPanel.js → components/OverlayPanel/OverlayPanel.styles.js}

@@ -1,4 +1,4 @@
-var overlayPanel = {
+var container = {
   position: 'fixed',
   overflowY: 'scroll',
   zIndex: 10,
@@ -31,7 +31,7 @@ var overlayPanel = {
     right: 0
   }
 };
-var overlayPanelInner = {
+var innerPanel = {
   position: 'absolute',
   zIndex: 9,
   bottom: 0,
@@ -48,7 +48,7 @@ var overlayPanelInner = {
   p: '25px',
   backgroundColor: 'accent.99'
 };
-var overlayPanelBody = {
+var body = {
   display: 'none',
   height: '100%',
   width: '100%',
@@ -57,7 +57,7 @@ var overlayPanelBody = {
   }
 };
 export default {
-  overlayPanel: overlayPanel,
-  overlayPanelBody: overlayPanelBody,
-  overlayPanelInner: overlayPanelInner
+  container: container,
+  body: body,
+  innerPanel: innerPanel
 };

package/lib/components/OverlayPanel/OverlayPanel.test.js

@@ -8,16 +8,15 @@ var testId = 'test-overlayPanel';
 var defaultProps = {
   'data-testid': testId
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(OverlayPanel, _extends({}, defaultProps, props)));
 };
-
 afterEach(function () {
   jest.restoreAllMocks();
-}); // 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 overlayPanel', function () {
   getComponent({

package/lib/components/PageHeader/PageHeader.js

@@ -3,22 +3,21 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["title", "children"];
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import Text from '../Text/Text';
-import Box from '../Box/Box';
 import { useDeprecationWarning } from '../../hooks';
+import Box from '../Box/Box';
+import Text from '../Text/Text';
+
 /**
  * A `Page Header` is a composed component using text and icon button.
  * The component is separated from the body and appears at the top.
  * For customization,
  * please see [Page Header](./?path=/story/recipes-page-header--default) recipe docs.
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var PageHeader = /*#__PURE__*/forwardRef(function (props, ref) {
   var title = props.title,
-      children = props.children,
-      others = _objectWithoutProperties(props, _excluded);
-
+    children = props.children,
+    others = _objectWithoutProperties(props, _excluded);
   useDeprecationWarning('The Page Header component will be deprecated in Astro-UI 2.0.0. Use Page Header recipe instead.');
   return ___EmotionJSX(Box, _extends({
     isRow: true,

package/lib/components/PageHeader/PageHeader.stories.js

@@ -1,8 +1,9 @@
+import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import PageHeader from '../PageHeader/PageHeader';
-import Button from '../Button/Button';
 import withDeprecationWarning from '../../utils/devUtils/decorators/withDeprecationWarning';
+import Button from '../Button/Button';
+import PageHeader from './PageHeader';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Deprecated/PageHeader',
@@ -20,7 +21,6 @@ export default {
   }
 };
 export var Default = function Default(_ref) {
-  var args = _extends({}, _ref);
-
+  var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
   return ___EmotionJSX(PageHeader, args, ___EmotionJSX(Button, null, "Add a Form"));
 };

package/lib/components/PageHeader/PageHeader.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 PageHeader from './PageHeader';
 import axeTest from '../../utils/testUtils/testAxe';
+import PageHeader from './PageHeader';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testTitle = 'Test Title';
 var defaultProps = {
   title: testTitle
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(PageHeader, _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);
 test('renders pageheader and title', function () {
   getComponent();