@pingux/astro 1.27.0-alpha.14 → 1.27.0-alpha.15

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -58,6 +58,8 @@ var _overlays = require("@react-stately/overlays");
 
 var _overlays2 = require("@react-aria/overlays");
 
+var _utils = require("@react-aria/utils");
+
 var _ArrowDropUpIcon = _interopRequireDefault(require("mdi-react/ArrowDropUpIcon"));
 
 var _ArrowDropDownIcon = _interopRequireDefault(require("mdi-react/ArrowDropDownIcon"));
@@ -74,7 +76,7 @@ var _index = require("../../index");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "disabledKeys", "emptySearchText", "isDefaultOpen", "isOpen", "items", "itemsFilter", "onOpenChange", "onNamePress", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "name", "searchProps", "selectedItem"];
+var _excluded = ["children", "disabledKeys", "emptySearchText", "isDefaultOpen", "isOpen", "items", "itemsFilter", "onOpenChange", "onNamePress", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "name", "searchProps", "selectedItem", "popoverProps"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -101,6 +103,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
       name = props.name,
       searchProps = props.searchProps,
       selectedItem = props.selectedItem,
+      popoverProps = props.popoverProps,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
 
   var _useState = (0, _react.useState)(''),
@@ -267,7 +270,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     "aria-label": "".concat((typeof selectedItem === 'string' ? selectedItem : selectedValue) || 'Selected Item')
   }), selectedItem, (0, _react2.jsx)(_index.Icon, {
     icon: popoverState.isOpen ? _ArrowDropUpIcon["default"] : _ArrowDropDownIcon["default"]
-  })), (0, _react2.jsx)(_index.PopoverContainer, (0, _extends2["default"])({}, overlayProps, positionProps, {
+  })), (0, _react2.jsx)(_index.PopoverContainer, (0, _extends2["default"])({}, overlayProps, positionProps, (0, _utils.mergeProps)(overlayProps, positionProps, popoverProps), {
     ref: overlayRef,
     isOpen: popoverState.isOpen,
     scrollRef: scrollBoxRef,
@@ -355,6 +358,9 @@ EnvironmentBreadcrumb.propTypes = {
   /** Callback function that fires when the dropdown is closed. */
   onPopoverClose: _propTypes["default"].func,
 
+  /** Props object that is spread directly into the popover container component. */
+  popoverProps: _propTypes["default"].shape({}),
+
   /** Props object that is spread directly into the SearchField element. */
   searchProps: _propTypes["default"].shape({}),
 

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.test.js

@@ -2,10 +2,28 @@
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
 var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));
 
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -22,6 +40,10 @@ var _index = require("../../index");
 
 var _react2 = require("@emotion/react");
 
+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 _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 var testEnvBreadcrumb = 'test-env-breadcrumb';
 var testName = 'test-name';
 var testSelectedItem = 'test-selected-item';
@@ -52,6 +74,10 @@ var defaultProps = {
   },
   items: items
 };
+var popoverProps = {
+  maxWidth: '100px',
+  'data-testid': 'popover-container'
+};
 var defaultWithSectionsProps = {
   'data-testid': testEnvBreadcrumb,
   name: testName,
@@ -135,6 +161,15 @@ test('should display name', function () {
   getComponent();
   expect(_testWrapper.screen.getByText(testName)).toBeInTheDocument();
 });
+test('should spread props into popover container', function () {
+  getComponent(_objectSpread(_objectSpread({}, popoverProps), {}, {
+    isDefaultOpen: true
+  }));
+
+  _userEvent["default"].click(_testWrapper.screen.getByText(testSelectedItem));
+
+  expect(_testWrapper.screen.queryByTestId('popover-container')).toHaveStyle('max-width: 100px');
+});
 test('should display selectedItem', function () {
   getComponent();
   expect(_testWrapper.screen.getByText(testSelectedItem)).toBeInTheDocument();

package/lib/cjs/components/PageHeader/PageHeader.js

@@ -38,11 +38,17 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+/**
+ * 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.
+ */
 var PageHeader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var title = props.title,
       children = props.children,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  (0, _hooks.useDeprecationWarning)('The Page Header component will be deprecated in Astro-UI 2.0.0.');
+  (0, _hooks.useDeprecationWarning)('The Page Header component will be deprecated in Astro-UI 2.0.0. Use Page Header recipe instead.');
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     isRow: true,
     justifyContent: "space-between",

package/lib/cjs/recipes/FlippableCaretMenuButton.stories.js

@@ -73,6 +73,40 @@ var _default = {
 };
 exports["default"] = _default;
 var buttonArray = ['Web App', 'Native App', 'Single Page App', 'Non-Interactive', 'Worker', 'Advanced Configuration', 'Built-in admin console for this environment', 'Built-in Application portal'];
+var sx = {
+  openButton: {
+    height: '30px',
+    borderRadius: 'md',
+    fontSize: '13px',
+    mb: 'sm'
+  },
+  closeIconButton: {
+    position: 'absolute',
+    top: '14px',
+    right: 'sm'
+  },
+  buttonsContainer: {
+    p: 'lg',
+    flexDirection: 'initial !important',
+    alignContent: 'space-between',
+    flexWrap: 'wrap'
+  },
+  selectedButton: {
+    mb: 'sm',
+    mr: '4px',
+    height: '30px',
+    borderRadius: '15px',
+    fontSize: '13px'
+  },
+  unSelectedButton: {
+    mb: 'sm',
+    mr: '4px',
+    borderColor: 'neutral.80',
+    height: '30px',
+    borderRadius: '15px',
+    fontSize: '13px'
+  }
+};
 
 var Default = function Default() {
   var buttonRef = (0, _react.useRef)();
@@ -131,14 +165,9 @@ var Default = function Default() {
 
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Button, {
     ref: buttonRef,
-    mb: "sm",
     variant: "inline",
     onPress: onChange,
-    sx: {
-      height: '30px',
-      borderRadius: '15px',
-      fontSize: '13px'
-    }
+    sx: sx.openButton
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
     alignItems: "center"
@@ -161,36 +190,15 @@ var Default = function Default() {
     onPress: function onPress() {
       return setIsOpen(false);
     },
-    sx: {
-      position: 'absolute',
-      top: 14,
-      right: 10
-    }
+    sx: sx.closeIconButton
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _CloseIcon["default"]
   })), (0, _react2.jsx)(_index.Box, {
-    sx: {
-      p: 'lg',
-      flexDirection: 'initial !important',
-      alignContent: 'space-between',
-      flexWrap: 'wrap'
-    }
+    sx: sx.buttonsContainer
   }, (0, _map["default"])(buttonArray).call(buttonArray, function (item) {
     return (0, _react2.jsx)(_index.Button, {
-      mb: "sm",
       variant: "inline",
-      sx: (0, _includes["default"])(selectedButtons).call(selectedButtons, item) ? {
-        mr: '4px',
-        height: '30px',
-        borderRadius: '15px',
-        fontSize: '13px'
-      } : {
-        mr: '4px',
-        borderColor: 'neutral.80',
-        height: '30px',
-        borderRadius: '15px',
-        fontSize: '13px'
-      },
+      sx: (0, _includes["default"])(selectedButtons).call(selectedButtons, item) ? sx.selectedButton : sx.unSelectedButton,
       key: item,
       onPress: function onPress() {
         return toggleButton(item);

package/lib/cjs/recipes/ListAndPanel.stories.js

@@ -128,44 +128,106 @@ var items = [{
   avatar: _AccountIcon["default"],
   hasSeparator: false
 }];
+var sx = {
+  wrapper: {
+    px: 'lg',
+    py: 'lg',
+    bg: 'accent.99',
+    height: '900px',
+    overflowY: 'scroll'
+  },
+  searchField: {
+    position: 'fixed',
+    mb: 'sm',
+    width: '400px'
+  },
+  listElementWrapper: {
+    px: 'md',
+    bg: 'accent.99',
+    justifyContent: 'center'
+  },
+  separator: {
+    bg: 'accent.90'
+  },
+  tabsWrapper: {
+    px: 'lg',
+    pt: 'xs'
+  },
+  iconButton: {
+    position: 'absolute',
+    top: 0,
+    right: 0
+  },
+  itemLabel: {
+    fontSize: 'sm',
+    fontWeight: 3,
+    lineHeight: '16px',
+    mb: 'xs'
+  },
+  itemValue: {
+    fontWeight: 0,
+    lineHeight: '18px',
+    variant: 'base',
+    mb: 'md'
+  },
+  listElement: {
+    wrapper: {
+      minHeight: '60px'
+    },
+    iconWrapper: {
+      mr: 'auto',
+      alignItems: 'center'
+    },
+    icon: {
+      mr: 'sm',
+      alignSelf: 'center',
+      color: 'accent.40'
+    },
+    avatar: {
+      width: '25px',
+      height: '25px',
+      mr: 'md'
+    },
+    title: {
+      alignSelf: 'start'
+    },
+    subtitle: {
+      fontSize: 'sm',
+      my: '1px',
+      lineHeight: '16px',
+      alignSelf: 'start'
+    },
+    menuWrapper: {
+      alignSelf: 'center'
+    }
+  }
+};
 
 var ListElement = function ListElement(_ref) {
   var item = _ref.item,
       onClosePanel = _ref.onClosePanel;
   return (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    minHeight: "60px"
+    sx: sx.listElement.wrapper
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    mr: "auto",
-    alignItems: "center"
+    sx: sx.listElement.iconWrapper
   }, item.hasIcon ? (0, _react2.jsx)(_index.Icon, {
     icon: item.avatar,
-    alignSelf: "center",
     size: 24,
-    mr: "sm",
-    color: "accent.40"
+    sx: sx.listElement.icon
   }) : (0, _react2.jsx)(_index.Avatar, {
-    mr: "md",
-    sx: {
-      width: '25px',
-      height: '25px'
-    },
+    sx: sx.listElement.avatar,
     src: item.avatar
   }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
     variant: "bodyStrong",
-    alignSelf: "start"
+    sx: sx.listElement.title
   }, item.lastName, ", ", item.firstName), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontSize: 'sm',
-      my: '1px',
-      lineHeight: '16px'
-    },
     variant: "subtitle",
-    alignSelf: "start"
+    sx: sx.listElement.subtitle
   }, item.email))), (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    alignSelf: "center"
+    sx: sx.listElement.menuWrapper
   }, (0, _react2.jsx)(_index.SwitchField, {
     "aria-label": "active user",
     isDefaultSelected: true,
@@ -222,11 +284,7 @@ var Default = function Default() {
   };
 
   return (0, _react2.jsx)(_index.Box, {
-    px: "lg",
-    py: "lg",
-    bg: "accent.99",
-    height: "900px",
-    overflowY: "scroll"
+    sx: sx.wrapper
   }, (0, _react2.jsx)(_index.SearchField, {
     position: "fixed",
     mb: "sm",
@@ -260,18 +318,15 @@ var Default = function Default() {
     restoreFocus: true,
     autoFocus: true
   }, (0, _react2.jsx)(_index.Box, {
-    px: "md",
-    bg: "accent.99",
-    justifyContent: "center"
+    sx: sx.listElementWrapper
   }, (0, _react2.jsx)(ListElement, {
     item: selectedItemId >= 0 ? items[selectedItemId] : [],
     onClosePanel: closePanelHandler
   })), (0, _react2.jsx)(_index.Separator, {
     margin: 0,
-    bg: "accent.90"
+    sx: sx.separator
   }), (0, _react2.jsx)(_index.Box, {
-    px: "lg",
-    pt: "xs"
+    sx: sx.tabsWrapper
   }, (0, _react2.jsx)(_index.Tabs, {
     tabListProps: {
       justifyContent: 'center'
@@ -285,73 +340,33 @@ var Default = function Default() {
     title: "Profile"
   }, selectedItemId >= 0 && (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.IconButton, {
     variant: "inverted",
-    sx: {
-      position: 'absolute',
-      top: 0,
-      right: 0
-    }
+    sx: sx.iconButton
   }, (0, _react2.jsx)(_PencilIcon["default"], {
     size: 20
   })), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontSize: 'sm',
-      fontWeight: 3,
-      lineHeight: '16px'
-    },
-    variant: "base",
-    mb: "xs"
+    sx: sx.itemLabel,
+    variant: "base"
   }, "Full Name"), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontWeight: 0,
-      lineHeight: '18px'
-    },
-    variant: "base",
-    mb: "md"
+    sx: sx.itemValue,
+    variant: "base"
   }, items[selectedItemId].firstName, " ", items[selectedItemId].lastName), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontSize: 'sm',
-      fontWeight: 3,
-      lineHeight: '16px'
-    },
-    variant: "base",
-    mb: "xs"
+    sx: sx.itemLabel,
+    variant: "base"
   }, "First Name"), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontWeight: 0,
-      lineHeight: '18px'
-    },
-    variant: "base",
-    mb: "md"
+    sx: sx.itemValue,
+    variant: "base"
   }, items[selectedItemId].firstName), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontSize: 'sm',
-      fontWeight: 3,
-      lineHeight: '16px'
-    },
-    variant: "base",
-    mb: "xs"
+    sx: sx.itemLabel,
+    variant: "base"
   }, "Last Name"), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontWeight: 0,
-      lineHeight: '18px'
-    },
-    variant: "base",
-    mb: "md"
+    sx: sx.itemValue,
+    variant: "base"
   }, items[selectedItemId].lastName), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontSize: 'sm',
-      fontWeight: 3,
-      lineHeight: '16px'
-    },
-    variant: "base",
-    mb: "xs"
+    sx: sx.itemLabel,
+    variant: "base"
   }, "Email"), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontWeight: 0,
-      lineHeight: '18px'
-    },
-    variant: "base",
-    mb: "md"
+    sx: sx.itemValue,
+    variant: "base"
   }, items[selectedItemId].email))), (0, _react2.jsx)(_index.Tab, {
     title: "Group Memberships"
   }, (0, _react2.jsx)(_index.Text, null, "Group Memberships")), (0, _react2.jsx)(_index.Tab, {

package/lib/cjs/recipes/MaskedValue.stories.js

@@ -54,6 +54,13 @@ var _default = {
   }
 };
 exports["default"] = _default;
+var sx = {
+  showHideButton: {
+    width: 'fit-content',
+    marginLeft: 'sm',
+    alignSelf: 'auto'
+  }
+};
 
 var Default = function Default(_ref) {
   var _context;
@@ -84,11 +91,7 @@ var Default = function Default(_ref) {
     onPress: function onPress() {
       return setIsMasked(!isMasked);
     },
-    sx: {
-      width: 'fit-content',
-      marginLeft: 10,
-      alignSelf: 'auto'
-    }
+    sx: sx.showHideButton
   }, (0, _react2.jsx)(_index.Icon, {
     icon: isMasked ? _EyeOffOutlineIcon["default"] : _EyeOutlineIcon["default"]
   }))));

package/lib/cjs/recipes/NeutralInput.stories.js

@@ -20,12 +20,15 @@ var _default = {
   title: 'Recipes/NeutralCheckboxField'
 };
 exports["default"] = _default;
+var sx = {
+  checkboxColor: {
+    color: 'neutral.10'
+  }
+};
 
 var Default = function Default() {
   return (0, _react2.jsx)(_CheckboxField["default"], {
-    controlProps: {
-      color: 'neutral.10'
-    }
+    sx: sx.checkboxColor
   }, "Click me");
 };
 

package/lib/cjs/recipes/PageHeader.stories.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _PlusIcon = _interopRequireDefault(require("mdi-react/PlusIcon"));
+
+var _index = require("../index");
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Recipes/Page Header'
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  var heading = 'Title of the Page';
+  var description = 'The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page.';
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
+    align: "center",
+    isRow: true,
+    mb: "xs",
+    role: "heading",
+    "aria-level": "1"
+  }, (0, _react2.jsx)(_index.Text, {
+    variant: "title",
+    fontWeight: 3
+  }, heading), (0, _react2.jsx)(_index.Button, {
+    variant: "inlinePrimary",
+    ml: "sm"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _PlusIcon["default"],
+    color: "white",
+    size: 13,
+    mr: "4px"
+  }), "\xA0", "Add")), (0, _react2.jsx)(_index.Text, {
+    variant: "bodyWeak"
+  }, description)), (0, _react2.jsx)(_index.Box, {
+    mt: "xl"
+  }, (0, _react2.jsx)(_index.Box, {
+    align: "center",
+    isRow: true,
+    mb: "xs",
+    role: "heading",
+    "aria-level": "1"
+  }, (0, _react2.jsx)(_index.Text, {
+    variant: "title",
+    fontWeight: 3
+  }, heading), (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "icon button",
+    ml: "sm",
+    mt: "3px",
+    variant: "inverted"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _PlusIcon["default"],
+    color: "white",
+    size: 13
+  }))), (0, _react2.jsx)(_index.Text, {
+    variant: "bodyWeak"
+  }, description)));
+};
+
+exports.Default = Default;