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

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

@@ -1,20 +1,6 @@
-import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
-import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
-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 _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(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; }
-
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { Section } from '@react-stately/collections';
@@ -52,10 +38,6 @@ var defaultProps = {
   },
   items: items
 };
-var popoverProps = {
-  maxWidth: '100px',
-  'data-testid': 'popover-container'
-};
 var defaultWithSectionsProps = {
   'data-testid': testEnvBreadcrumb,
   name: testName,
@@ -133,13 +115,6 @@ test('should display name', function () {
   getComponent();
   expect(screen.getByText(testName)).toBeInTheDocument();
 });
-test('should spread props into popover container', function () {
-  getComponent(_objectSpread(_objectSpread({}, popoverProps), {}, {
-    isDefaultOpen: true
-  }));
-  userEvent.click(screen.getByText(testSelectedItem));
-  expect(screen.queryByTestId('popover-container')).toHaveStyle('max-width: 100px');
-});
 test('should display selectedItem', function () {
   getComponent();
   expect(screen.getByText(testSelectedItem)).toBeInTheDocument();

package/lib/components/PageHeader/PageHeader.js

@@ -6,20 +6,13 @@ import PropTypes from 'prop-types';
 import Text from '../Text/Text';
 import Box from '../Box/Box';
 import { useDeprecationWarning } from '../../hooks';
-/**
- * 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);
 
-  useDeprecationWarning('The Page Header component will be deprecated in Astro-UI 2.0.0. Use Page Header recipe instead.');
+  useDeprecationWarning('The Page Header component will be deprecated in Astro-UI 2.0.0.');
   return ___EmotionJSX(Box, _extends({
     isRow: true,
     justifyContent: "space-between",

package/lib/recipes/ListAndPanel.stories.js

@@ -92,106 +92,44 @@ var items = [{
   avatar: AccountIcon,
   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 ___EmotionJSX(Box, {
     isRow: true,
-    sx: sx.listElement.wrapper
+    minHeight: "60px"
   }, ___EmotionJSX(Box, {
     isRow: true,
-    sx: sx.listElement.iconWrapper
+    mr: "auto",
+    alignItems: "center"
   }, item.hasIcon ? ___EmotionJSX(Icon, {
     icon: item.avatar,
+    alignSelf: "center",
     size: 24,
-    sx: sx.listElement.icon
+    mr: "sm",
+    color: "accent.40"
   }) : ___EmotionJSX(Avatar, {
-    sx: sx.listElement.avatar,
+    mr: "md",
+    sx: {
+      width: '25px',
+      height: '25px'
+    },
     src: item.avatar
   }), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
     variant: "bodyStrong",
-    sx: sx.listElement.title
+    alignSelf: "start"
   }, item.lastName, ", ", item.firstName), ___EmotionJSX(Text, {
+    sx: {
+      fontSize: 'sm',
+      my: '1px',
+      lineHeight: '16px'
+    },
     variant: "subtitle",
-    sx: sx.listElement.subtitle
+    alignSelf: "start"
   }, item.email))), ___EmotionJSX(Box, {
     isRow: true,
-    sx: sx.listElement.menuWrapper
+    alignSelf: "center"
   }, ___EmotionJSX(SwitchField, {
     "aria-label": "active user",
     isDefaultSelected: true,
@@ -248,7 +186,11 @@ export var Default = function Default() {
   };
 
   return ___EmotionJSX(Box, {
-    sx: sx.wrapper
+    px: "lg",
+    py: "lg",
+    bg: "accent.99",
+    height: "900px",
+    overflowY: "scroll"
   }, ___EmotionJSX(SearchField, {
     position: "fixed",
     mb: "sm",
@@ -282,15 +224,18 @@ export var Default = function Default() {
     restoreFocus: true,
     autoFocus: true
   }, ___EmotionJSX(Box, {
-    sx: sx.listElementWrapper
+    px: "md",
+    bg: "accent.99",
+    justifyContent: "center"
   }, ___EmotionJSX(ListElement, {
     item: selectedItemId >= 0 ? items[selectedItemId] : [],
     onClosePanel: closePanelHandler
   })), ___EmotionJSX(Separator, {
     margin: 0,
-    sx: sx.separator
+    bg: "accent.90"
   }), ___EmotionJSX(Box, {
-    sx: sx.tabsWrapper
+    px: "lg",
+    pt: "xs"
   }, ___EmotionJSX(Tabs, {
     tabListProps: {
       justifyContent: 'center'
@@ -304,33 +249,73 @@ export var Default = function Default() {
     title: "Profile"
   }, selectedItemId >= 0 && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(IconButton, {
     variant: "inverted",
-    sx: sx.iconButton
+    sx: {
+      position: 'absolute',
+      top: 0,
+      right: 0
+    }
   }, ___EmotionJSX(PencilIcon, {
     size: 20
   })), ___EmotionJSX(Text, {
-    sx: sx.itemLabel,
-    variant: "base"
+    sx: {
+      fontSize: 'sm',
+      fontWeight: 3,
+      lineHeight: '16px'
+    },
+    variant: "base",
+    mb: "xs"
   }, "Full Name"), ___EmotionJSX(Text, {
-    sx: sx.itemValue,
-    variant: "base"
+    sx: {
+      fontWeight: 0,
+      lineHeight: '18px'
+    },
+    variant: "base",
+    mb: "md"
   }, items[selectedItemId].firstName, " ", items[selectedItemId].lastName), ___EmotionJSX(Text, {
-    sx: sx.itemLabel,
-    variant: "base"
+    sx: {
+      fontSize: 'sm',
+      fontWeight: 3,
+      lineHeight: '16px'
+    },
+    variant: "base",
+    mb: "xs"
   }, "First Name"), ___EmotionJSX(Text, {
-    sx: sx.itemValue,
-    variant: "base"
+    sx: {
+      fontWeight: 0,
+      lineHeight: '18px'
+    },
+    variant: "base",
+    mb: "md"
   }, items[selectedItemId].firstName), ___EmotionJSX(Text, {
-    sx: sx.itemLabel,
-    variant: "base"
+    sx: {
+      fontSize: 'sm',
+      fontWeight: 3,
+      lineHeight: '16px'
+    },
+    variant: "base",
+    mb: "xs"
   }, "Last Name"), ___EmotionJSX(Text, {
-    sx: sx.itemValue,
-    variant: "base"
+    sx: {
+      fontWeight: 0,
+      lineHeight: '18px'
+    },
+    variant: "base",
+    mb: "md"
   }, items[selectedItemId].lastName), ___EmotionJSX(Text, {
-    sx: sx.itemLabel,
-    variant: "base"
+    sx: {
+      fontSize: 'sm',
+      fontWeight: 3,
+      lineHeight: '16px'
+    },
+    variant: "base",
+    mb: "xs"
   }, "Email"), ___EmotionJSX(Text, {
-    sx: sx.itemValue,
-    variant: "base"
+    sx: {
+      fontWeight: 0,
+      lineHeight: '18px'
+    },
+    variant: "base",
+    mb: "md"
   }, items[selectedItemId].email))), ___EmotionJSX(Tab, {
     title: "Group Memberships"
   }, ___EmotionJSX(Text, null, "Group Memberships")), ___EmotionJSX(Tab, {

package/lib/recipes/SelectedFieldOverlay.story.js

@@ -7,39 +7,35 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Selected Field Overlay'
 };
-var sx = {
-  container: {
-    padding: 'md',
-    position: 'relative',
-    borderWidth: 2,
-    borderStyle: 'solid',
-    borderColor: 'active',
-    borderRadius: 4,
-    cursor: 'pointer'
-  },
-  overlay: {
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-    top: 0,
-    left: 0,
-    alignItems: 'center',
-    justifyContent: 'center',
-    '&:focus': {
-      outline: 'none'
-    }
-  }
-};
 export var Default = function Default() {
   return ___EmotionJSX(Box, {
-    sx: sx.container
+    p: 15,
+    sx: {
+      position: 'relative',
+      borderWidth: 2,
+      borderStyle: 'solid',
+      borderColor: 'active',
+      borderRadius: 4,
+      cursor: 'pointer'
+    }
   }, ___EmotionJSX(TextField, {
     label: "Name",
     controlProps: {
       tabIndex: '-1'
     }
   }), ___EmotionJSX(Box, {
-    sx: sx.overlay,
+    sx: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      top: 0,
+      left: 0,
+      alignItems: 'center',
+      justifyContent: 'center',
+      '&:focus': {
+        outline: 'none'
+      }
+    },
     tabIndex: "0"
   }, ___EmotionJSX(Icon, {
     icon: VisibilityOffOutlineIcon,

package/lib/recipes/TrialExperienceStatusBar.stories.js

@@ -104,79 +104,6 @@ var data = [{
     title: 'View a workflow'
   }]
 }];
-var sx = {
-  iconContainer: {
-    backgroundColor: 'accent.80',
-    alignItems: 'center',
-    justifyContent: 'center',
-    mr: 'sm',
-    borderRadius: '50%',
-    zIndex: 3
-  },
-  headingSeparator: {
-    flexGrow: 1,
-    backgroundColor: 'accent.80',
-    maxHeight: '100%',
-    width: '6px !important',
-    zIndex: 2,
-    m: '0px 5px 0px 17px !important'
-  },
-  title: {
-    fontSize: 'md',
-    color: 'accent.30',
-    lineHeight: '18px',
-    fontWeight: '3',
-    m: '12px 0px 28px 5px',
-    maxWidth: '195px'
-  },
-  linkRowIconButton: {
-    '&.is-pressed': {
-      backgroundColor: 'transparent'
-    },
-    '&.is-pressed > svg > path': {
-      fill: 'accent.30'
-    },
-    '&.is-hovered': {
-      backgroundColor: 'transparent'
-    }
-  },
-  linkRowIconSelected: {
-    zIndex: 3,
-    'path': {
-      fill: 'accent.30'
-    }
-  },
-  linkRowIconNotSelected: {
-    zIndex: 3,
-    'path': {
-      fill: 'accent.80'
-    }
-  },
-  linkRowSeparator: {
-    flexGrow: 1,
-    backgroundColor: 'accent.30',
-    maxHeight: '100%',
-    width: '1px !important',
-    zIndex: 2,
-    m: '-5px 5px -5px 11.5px !important'
-  },
-  linkRowText: {
-    fontSize: 'md',
-    color: '#163CE3',
-    lineHeight: '18px',
-    fontWeight: '0',
-    m: '3px 0px 20px 10px',
-    maxWidth: '140px'
-  },
-  container: {
-    p: '15px 15px 0px 15px',
-    width: '280px',
-    backgroundColor: 'accent.95',
-    borderRadius: '8px',
-    zIndex: 1,
-    boxShadow: '3px 8px 4px rgba(202, 206, 211, 0.36)'
-  }
-};
 
 var Stage = function Stage(props) {
   var title = props.title,
@@ -212,7 +139,14 @@ var Stage = function Stage(props) {
   }, ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
     minWidth: "39.5px",
     minHeight: "39.5px",
-    sx: sx.iconContainer
+    sx: {
+      backgroundColor: 'accent.80',
+      alignItems: 'center',
+      justifyContent: 'center',
+      mr: '10px',
+      borderRadius: '50%',
+      zIndex: 3
+    }
   }, ___EmotionJSX(Icon, {
     icon: icon,
     color: "accent.40",
@@ -221,10 +155,24 @@ var Stage = function Stage(props) {
       zIndex: 3
     }
   })), !isLastStage && ___EmotionJSX(Separator, {
-    sx: sx.headingSeparator,
+    sx: {
+      flexGrow: 1,
+      backgroundColor: 'accent.80',
+      maxHeight: '100%',
+      width: '6px !important',
+      zIndex: 2,
+      m: '0px 5px 0px 17px !important'
+    },
     orientation: "vertical"
   })), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
-    sx: sx.title
+    sx: {
+      fontSize: '15px',
+      color: 'accent.30',
+      lineHeight: '18px',
+      fontWeight: '3',
+      m: '12px 0px 28px 5px',
+      maxWidth: '195px'
+    }
   }, title), ___EmotionJSX(Box, {
     pl: "0px",
     mb: "25px"
@@ -265,19 +213,53 @@ var LinkRow = function LinkRow(props) {
     }
   }, ___EmotionJSX(IconButton, {
     onPress: onIconPress,
-    sx: sx.linkRowIconButton,
+    sx: {
+      '&.is-pressed': {
+        backgroundColor: 'transparent'
+      },
+      '&.is-pressed > svg > path': {
+        fill: 'accent.30'
+      },
+      '&.is-hovered': {
+        backgroundColor: 'transparent'
+      }
+    },
     "aria-label": "completed step icon indicator"
   }, ___EmotionJSX(Icon, {
     icon: isSelected ? CheckCircleIcon : RadioButtonIcon,
     size: isSelected ? '20px' : '18px',
-    sx: isSelected ? sx.linkRowIconButton : sx.linkRowIconNotSelected
+    sx: isSelected ? {
+      zIndex: 3,
+      'path': {
+        fill: 'accent.30'
+      }
+    } : {
+      zIndex: 3,
+      'path': {
+        fill: 'accent.80'
+      }
+    }
   }))), !isLastLink && isLinkSelected && ___EmotionJSX(Separator, {
-    sx: sx.linkRowSeparator,
+    sx: {
+      flexGrow: 1,
+      backgroundColor: 'accent.30',
+      maxHeight: '100%',
+      width: '1px !important',
+      zIndex: 2,
+      m: '-5px 5px -5px 11.5px !important'
+    },
     orientation: "vertical"
   })), ___EmotionJSX(Box, null, ___EmotionJSX(Link, {
     href: "https://www.pingidentity.com",
     target: "_blank",
-    sx: sx.linkRowText
+    sx: {
+      fontSize: '15px',
+      color: '#163CE3',
+      lineHeight: '18px',
+      fontWeight: '0',
+      m: '3px 0px 20px 10px',
+      maxWidth: '140px'
+    }
   }, title)));
 };
 
@@ -285,7 +267,16 @@ export var Default = function Default() {
   // Open the `Story` addons tab to view the source code for full context.
   return ___EmotionJSX(Box, {
     as: "nav",
-    sx: sx.container
+    backgroundColor: "accent.95",
+    width: "280px",
+    sx: {
+      p: '15px 15px 0px 15px',
+      width: '280px',
+      backgroundColor: 'accent.95',
+      borderRadius: '8px',
+      zIndex: 1,
+      boxShadow: '3px 8px 4px rgba(202, 206, 211, 0.36)'
+    }
   }, ___EmotionJSX(Box, {
     paddingLeft: "0px"
   }, _mapInstanceProperty(data).call(data, function (stage, index) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.27.0-alpha.13",
+  "version": "1.27.0-alpha.14",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",

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

@@ -1,73 +0,0 @@
-"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;