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

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/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-beta.1",
   "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, '    '));
-});