@pingux/astro 2.0.0-beta.0 → 2.0.0-rc.0

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

@@ -1,14 +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, { useRef, useState } from 'react';
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import React, { useCallback, useRef, useState } from 'react';
+import { Item } from 'react-stately';
 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 { useOverlayPanelState } from '../../hooks';
-import { Avatar, Box, Breadcrumbs, Button, ColorField, IconButton, Item, ListView, Messages, MultivaluesField, OverlayPanel, OverlayProvider, SwitchField, Tab, Tabs, Text, TextField } from '../../index';
+import { Avatar, Box, Breadcrumbs, Button, ColorField, IconButton, 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";
@@ -280,6 +282,19 @@ export var Expandable = function Expandable() {
   var onCloseHandler = function onCloseHandler() {
     return onClose(state, triggerRef);
   };
+  var _useState5 = useState('#EACE91'),
+    _useState6 = _slicedToArray(_useState5, 2),
+    color = _useState6[0],
+    setColor = _useState6[1];
+  var handleColorChange = useCallback(function (_ref3) {
+    var _context, _context2, _context3;
+    var rgb = _ref3.rgb;
+    var r = rgb.r,
+      b = rgb.b,
+      g = rgb.g,
+      a = rgb.a;
+    setColor(_concatInstanceProperty(_context = _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = "rgba(".concat(r, ", ")).call(_context3, g, ", ")).call(_context2, b, ", ")).call(_context, a, ")"));
+  }, []);
   var header = ___EmotionJSX(Box, {
     sx: sx.header
   }, ___EmotionJSX(Box, {
@@ -339,11 +354,12 @@ export var Expandable = function Expandable() {
     label: "Node Description",
     defaultValue: "The Value of the Text Input"
   }), ___EmotionJSX(ColorField, {
-    value: "#EACE91",
+    value: color,
     label: "Node Background Color",
     buttonProps: {
       sx: sx.colorField
-    }
+    },
+    onChange: handleColorChange
   }), ___EmotionJSX(SwitchField, {
     hintText: "Example Hint",
     labelProps: {

package/lib/components/OverlayPanel/OverlayPanel.styles.js

@@ -11,6 +11,7 @@ var container = {
   borderLeft: '1px solid',
   borderLeftColor: 'neutral.80',
   boxShadow: '-2px 0px 2px 1px rgba(37, 55, 70, 0.15)',
+  display: 'none !important',
   p: '25px',
   transition: 'right 500ms',
   maxWidth: '100%',

package/lib/components/PasswordField/PasswordField.js

@@ -9,7 +9,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["helperText", "isVisible", "onVisibleChange", "requirements", "slots", "status", "viewHiddenIconTestId", "viewIconTestId"];
+var _excluded = ["helperText", "isVisible", "onVisibleChange", "requirements", "requirementsListProps", "slots", "status", "viewHiddenIconTestId", "viewIconTestId"];
 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 _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
@@ -41,6 +41,7 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
     isVisibleProp = props.isVisible,
     onVisibleChangeProp = props.onVisibleChange,
     requirements = props.requirements,
+    requirementsListProps = props.requirementsListProps,
     slots = props.slots,
     status = props.status,
     viewHiddenIconTestId = props.viewHiddenIconTestId,
@@ -157,9 +158,9 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
     placement: placement,
     ref: popoverRef,
     style: style
-  }, ___EmotionJSX(RequirementsList, {
+  }, ___EmotionJSX(RequirementsList, _extends({
     requirements: requirements
-  })));
+  }, requirementsListProps))));
 });
 PasswordField.propTypes = _objectSpread(_objectSpread({
   /** The rendered label for the field. */
@@ -228,7 +229,9 @@ PasswordField.propTypes = _objectSpread(_objectSpread({
   requirements: PropTypes.arrayOf(PropTypes.shape({
     name: PropTypes.string.isRequired,
     status: PropTypes.oneOf(['default', 'success', 'warning', 'error'])
-  }))
+  })),
+  /** Props object that is spread to the requirements list. */
+  requirementsListProps: PropTypes.shape({})
 }, ariaAttributesBasePropTypes), inputFieldAttributesBasePropTypes);
 PasswordField.defaultProps = {
   hasAutoFocus: false,

package/lib/components/PasswordField/PasswordField.test.js

@@ -191,6 +191,18 @@ test('if all requirements are successful, do not render popover', function () {
   userEvent.click(input);
   expect(screen.queryByRole('presentation')).not.toBeInTheDocument();
 });
+test('passing in props to the requirements list works', function () {
+  var requirementsListProps = {
+    'data-testid': 'my-custom-id'
+  };
+  getComponent({
+    requirements: defaultRequirements,
+    requirementsListProps: requirementsListProps
+  });
+  expect(screen.queryByTestId(requirementsListProps['data-testid'])).not.toBeInTheDocument();
+  userEvent.click(screen.getByRole('textbox'));
+  expect(screen.queryByTestId(requirementsListProps['data-testid'])).toBeInTheDocument();
+});
 test('password field with helper text', function () {
   var helperText = 'helper text';
   getComponent({

package/lib/components/PopoverMenu/PopoverMenu.test.js

@@ -153,4 +153,14 @@ test('two menus can not be open at the same time', function () {
   expect(screen.queryByRole('menuitem', {
     name: 'C'
   })).toBeInTheDocument();
+});
+test('holds a pressed state for menu trigger when isOpen is true', function () {
+  getComponent();
+  var button = screen.getByRole('button');
+  expect(screen.queryByRole('presentation')).not.toBeInTheDocument();
+  expect(screen.queryByRole('menu')).not.toBeInTheDocument();
+  expect(button).not.toHaveClass('is-pressed');
+  userEvent.click(button);
+  expect(screen.queryByRole('menu')).toBeInTheDocument();
+  expect(button).toHaveClass('is-pressed');
 });

package/lib/components/SearchField/Search.styles.js

@@ -6,6 +6,9 @@ export var wrapper = {
   justifyContent: 'center',
   '> input::-webkit-search-cancel-button, > input::-webkit-search-decoration': {
     WebkitAppearance: 'none'
+  },
+  '&.is-focused > *': {
+    zIndex: 1
   }
 };
 export var icon = {

package/lib/{styles/theme-ui → docs/theme}/ThemeView.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { JSONTree } from 'react-json-tree';
-import theme from '../theme';
+import theme from '../../styles/theme';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default (function () {
   return ___EmotionJSX(JSONTree, {

package/lib/hooks/index.js

@@ -1,6 +1,7 @@
 export { default as useAriaLabelWarning } from './useAriaLabelWarning';
 export { default as useColumnStyles } from './useColumnStyles';
 export { default as useComponentToggle } from './useComponentToggle';
+export { default as useCopyToClipboard } from './useCopyToClipboard';
 export { default as useDebounce } from './useDebounce';
 export { default as useDeprecationWarning } from './useDeprecationWarning';
 export { default as useFallbackImage } from './useFallbackImage';

package/lib/patterns/AttributeMappingDisplayViewPattern.stories.hidden.js

@@ -68,7 +68,7 @@ var sx = {
     mb: 'auto',
     width: '21px'
   },
-  badgeStyles: {
+  badgeStyle: {
     width: '65px',
     height: '22px',
     minWidth: 'fit-content',
@@ -132,7 +132,7 @@ export var Default = function Default() {
     }), hasBadge && ___EmotionJSX(Badge, {
       label: "Required",
       textColor: "#253746",
-      sx: sx.badgeStyles
+      sx: sx.badgeStyle
     }));
   })));
 };

package/lib/patterns/AttributeMappingEditViewPattern.stories.hidden.js

@@ -14,17 +14,17 @@ var editFieldValues = [{
 }, {
   field1: 'firstName',
   field2: 'Given Name',
-  hasBadge: false,
+  hasChip: false,
   key: 2
 }, {
   field1: 'lastName',
   field2: 'Family Name',
-  hasBadge: false,
+  hasChip: false,
   key: 3
 }, {
   field1: 'population',
   field2: 'Population',
-  hasBadge: false,
+  hasChip: false,
   key: 4
 }];
 var sx = {

package/lib/recipes/CountryPicker.stories.js

@@ -26,7 +26,7 @@ var sx = {
   comboBoxFieldWrapperClose: {
     position: 'absolute',
     transition: '0.2s width ease',
-    maxWidth: '110px'
+    width: '110px'
   },
   inputWrapper: {
     width: '100%',
@@ -92,7 +92,7 @@ export var Default = function Default() {
     width: "100%",
     isOpen: isOpen,
     onOpenChange: setIsOpen,
-    containerProps: {
+    wrapperProps: {
       sx: isOpen ? sx.comboBoxFieldWrapperOpen : sx.comboBoxFieldWrapperClose
     },
     controlProps: {

package/lib/recipes/LinkedListView.stories.js

@@ -113,7 +113,7 @@ export var Default = function Default(_ref) {
     var color = '#CACED3';
     return ___EmotionJSX(Box, {
       sx: {
-        width: '20px',
+        width: '15px',
         position: 'relative'
       }
     }, ___EmotionJSX(Box, {
@@ -171,7 +171,7 @@ export var Default = function Default(_ref) {
         position: 'absolute',
         bottom: 0,
         left: 12,
-        top: 55
+        top: 50
       }
     }, ___EmotionJSX("svg", {
       xmlns: "http://www.w3.org/2000/svg",

package/lib/recipes/PageHeader.stories.js

@@ -1,53 +1,37 @@
 import React from 'react';
 import PlusIcon from 'mdi-react/PlusIcon';
-import { Box, Button, Icon, IconButton, Text } from '../index';
+import { Box, Icon, IconButton, Link, Text } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Page Header'
 };
 export 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 ___EmotionJSX(Box, null, ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
     align: "center",
     isRow: true,
     mb: "xs",
     role: "heading",
     "aria-level": "1"
   }, ___EmotionJSX(Text, {
-    variant: "title",
-    fontWeight: 3
-  }, heading), ___EmotionJSX(Button, {
-    variant: "inlinePrimary",
-    ml: "sm"
-  }, ___EmotionJSX(Icon, {
-    icon: PlusIcon,
-    color: "white",
-    size: 13,
-    mr: "4px"
-  }), "\xA0", "Add")), ___EmotionJSX(Text, {
-    variant: "bodyWeak"
-  }, description)), ___EmotionJSX(Box, {
-    mt: "xl"
-  }, ___EmotionJSX(Box, {
-    align: "center",
-    isRow: true,
-    mb: "xs",
-    role: "heading",
-    "aria-level": "1"
-  }, ___EmotionJSX(Text, {
-    variant: "title",
-    fontWeight: 3
-  }, heading), ___EmotionJSX(IconButton, {
+    fontSize: "xx",
+    fontWeight: "3",
+    fontColor: "text.primary"
+  }, "Title of the Page"), ___EmotionJSX(IconButton, {
     "aria-label": "icon button",
     ml: "sm",
-    mt: "3px",
     variant: "inverted"
   }, ___EmotionJSX(Icon, {
     icon: PlusIcon,
-    color: "white",
-    size: "xs"
+    size: "sm"
   }))), ___EmotionJSX(Text, {
-    variant: "bodyWeak"
-  }, description)));
+    fontSize: "sm",
+    color: "text.secondary",
+    fontWeight: "0",
+    width: "800px"
+  }, "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.\xA0", ___EmotionJSX(Link, {
+    href: "https://uilibrary.ping-eng.com/",
+    sx: {
+      fontSize: 'sm'
+    }
+  }, "Learn more")));
 };

package/lib/recipes/RadioButtonsWithLinks.stories.js

@@ -73,7 +73,7 @@ export var Default = function Default() {
       }
     }, "Permissions"), ___EmotionJSX(IconButton, {
       onPress: onPress,
-      "aria-label": "close icon button"
+      "aria-label": "close"
     }, ___EmotionJSX(Icon, {
       icon: CloseIcon,
       size: "sm"

package/lib/styles/themeOverrides/uiLibraryOverride.js

@@ -27,6 +27,17 @@ var buttons = {
   inline: {
     '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.inline), theme.buttons.defaultHover)
   },
+  inlinePrimary: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.inlinePrimary), theme.buttons.defaultHover)
+  },
+  text: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.text), theme.buttons.defaultHover)
+  },
+  inverted: _objectSpread(_objectSpread({}, theme.buttons.inverted), {}, {
+    ':focus': {
+      border: 'none'
+    }
+  }),
   primary: {
     '&:hover': _objectSpread({}, theme.buttons.primary)
   },
@@ -72,11 +83,16 @@ var forms = {
     wrapper: {
       '& input[type=search]': _objectSpread(_objectSpread({}, theme.text.inputValue), {}, {
         borderColor: 'neutral.80',
+        fontSize: '15px',
         bg: 'white',
         '::placeholder': _objectSpread(_objectSpread({}, theme.text.placeholder), {}, {
-          fontStyle: 'unset'
+          fontStyle: 'unset',
+          fontSize: '15px'
         })
-      })
+      }),
+      '& input[type=search]:focus': {
+        borderColor: 'neutral.80'
+      }
     }
   },
   label: {

package/lib/styles/themeOverrides/withUiLibraryCss.js

@@ -1,6 +1,8 @@
 import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
 import React, { useEffect } from 'react';
-import { ThemeProvider } from 'theme-ui';
+import { ThemeProvider } from '@emotion/react';
+import { merge } from 'theme-ui';
+import astroTheme from '../theme';
 import uiLibraryOverride from './uiLibraryOverride';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var UI_LIBRARY_CSS_LINK = 'https://assets.pingone.com/ux/ui-library/5.0.2/css/ui-library.css';
@@ -18,8 +20,9 @@ var WithUiLibraryCss = function WithUiLibraryCss(Story) {
       });
     };
   }, []);
+  var theme = merge(astroTheme, uiLibraryOverride);
   return ___EmotionJSX(ThemeProvider, {
-    theme: uiLibraryOverride
+    theme: theme
   }, ___EmotionJSX(Story, null));
 };
 export default WithUiLibraryCss;

package/lib/styles/themes/end-user/end-user.js

@@ -100,7 +100,7 @@ var buttonBase = _objectSpread(_objectSpread({}, buttonText), {}, {
   },
   '&.is-focused': _objectSpread({}, buttonFocus)
 });
-var card = {
+var cards = {
   bg: 'cardBg',
   boxShadow: 'overlay',
   boxSizing: 'border-box',
@@ -145,16 +145,17 @@ var wordWrap = {
   wordWrap: 'break-word',
   wordBreak: 'break-word'
 };
-var fieldHelperText = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {}, {
-  fontSize: 'sm',
-  pb: 'sm',
-  '&.is-default': {
-    color: 'text.secondary'
-  },
-  '&.is-error': {
-    color: 'critical'
-  }
-});
+var fieldHelperText = {
+  title: _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {}, {
+    fontSize: 'sm',
+    '&.is-default': {
+      color: 'text.secondary'
+    },
+    '&.is-error': {
+      color: 'critical.dark'
+    }
+  })
+};
 var text = {
   base: {
     color: 'neutral.20',
@@ -181,8 +182,7 @@ var text = {
     fontSize: 15,
     fontWeight: 500,
     fontFamily: 'proxima-nova, sans-serif'
-  },
-  fieldHelperText: fieldHelperText
+  }
 };
 var activeFloatLabel = {
   fontWeight: 0,
@@ -243,7 +243,8 @@ export default {
     input: input,
     label: label
   },
+  cards: cards,
   variants: {
-    card: card
+    fieldHelperText: fieldHelperText
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.0.0-beta.0",
+  "version": "2.0.0-rc.0",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",
@@ -17,7 +17,7 @@
     "lib"
   ],
   "scripts": {
-    "build": "rm -rf lib & yarn run build:cjs & yarn run build:esm",
+    "build": "rm -rf lib && yarn run build:cjs && yarn run build:esm && cp README.md ./lib && cp MIGRATION.md ./lib",
     "build-ci": "yarn build",
     "append-version": "node ../../append_current_version.js",
     "build:cjs": "BABEL_ENV=cjs babel --config-file ./babel.config.js ./src --out-dir lib/cjs",
@@ -36,8 +36,8 @@
     "@babel/runtime": "7.16.3",
     "@babel/runtime-corejs3": "7.13.8",
     "@emotion/jest": "^11.5.0",
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
+    "@emotion/react": "^11.1.1",
+    "@emotion/styled": "^11.1.1",
     "@faker-js/faker": "~7.5.0",
     "@mdx-js/react": "^1.6.22",
     "@react-aria/accordion": "~3.0.0-alpha.11",
@@ -89,7 +89,6 @@
     "react-color": "^2.19.3",
     "react-dropzone": "^11.4.2",
     "react-stately": "~3.17.0",
-    "rebass": "^4.0.7",
     "recharts": "^2.1.4",
     "regenerator-runtime": "^0.13.7",
     "styled-system": "^5.1.5",

package/lib/cjs/docs/theme/ThemeDocumentation.js

@@ -1,16 +0,0 @@
-"use strict";
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _stringify = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/json/stringify"));
-var _react = _interopRequireDefault(require("react"));
-var _theme = _interopRequireDefault(require("../../styles/theme"));
-var _react2 = require("@emotion/react");
-var _default = function _default() {
-  return (0, _react2.jsx)("pre", null, (0, _stringify["default"])(_theme["default"], null, '    '));
-};
-exports["default"] = _default;

package/lib/docs/theme/ThemeDocumentation.js

@@ -1,7 +0,0 @@
-import _JSON$stringify from "@babel/runtime-corejs3/core-js-stable/json/stringify";
-import React from 'react';
-import theme from '../../styles/theme';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export default (function () {
-  return ___EmotionJSX("pre", null, _JSON$stringify(theme, null, '    '));
-});