@pingux/astro 2.5.5-alpha.2 → 2.5.6-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.5.5](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@2.5.4...@pingux/astro@2.5.5) (2023-06-20)
+
+
+### Bug Fixes
+
+* [UIP-6318] add aria-hidden when Modal is open ([d2bf1ac](https://gitlab.corp.pingidentity.com/ux/pingux/commit/d2bf1aca90574c0e53b4fb5f9dad68a0eca9e101))
+
+
+
+
+
 ## [2.5.4](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@2.5.3...@pingux/astro@2.5.4) (2023-06-15)
 
 

package/lib/cjs/components/RockerButton/RockerButton.js

@@ -20,9 +20,12 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _reactStately = require("react-stately");
+var _interactions = require("@react-aria/interactions");
+var _utils = require("@react-aria/utils");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _hooks = require("../../hooks");
 var _index = require("../../index");
+var _colors = require("../../styles/colors");
 var _RockerButtonGroup = require("../RockerButtonGroup");
 var _react2 = require("@emotion/react");
 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); }
@@ -30,6 +33,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 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) { (0, _defineProperty2["default"])(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; }
 var CollectionRockerButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _itemProps$selectedSt, _itemProps$selectedSt2;
   var className = props.className,
     item = props.item;
   var key = item.key,
@@ -38,12 +42,21 @@ var CollectionRockerButton = /*#__PURE__*/(0, _react.forwardRef)(function (props
   var state = (0, _react.useContext)(_RockerButtonGroup.RockerContext);
   var isDisabled = state.disabledKeys.has(key);
   var isSelected = state.selectedKey === key;
+  var rockerButtonRef = (0, _react.useRef)();
+  var _useHover = (0, _interactions.useHover)({}),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
+  var _usePress = (0, _interactions.usePress)(rockerButtonRef),
+    pressProps = _usePress.pressProps,
+    isPressed = _usePress.isPressed;
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+      isHovered: isHovered,
+      isPressed: isPressed,
       isSelected: isSelected,
       isDisabled: isDisabled
     }),
     classNames = _useStatusClasses.classNames;
-  var rockerButtonRef = (0, _react.useRef)();
+  var backgroundHexColor = (_itemProps$selectedSt = itemProps.selectedStyles) !== null && _itemProps$selectedSt !== void 0 && _itemProps$selectedSt.bg ? (0, _colors.getBaseHexColor)((_itemProps$selectedSt2 = itemProps.selectedStyles) === null || _itemProps$selectedSt2 === void 0 ? void 0 : _itemProps$selectedSt2.bg) : _colors.accent[20];
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
   (0, _react.useImperativeHandle)(ref, function () {
@@ -60,26 +73,34 @@ var CollectionRockerButton = /*#__PURE__*/(0, _react.forwardRef)(function (props
   }, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     as: "button",
     className: classNames,
-    variant: "variants.rockerButton.thumbSwitch"
-  }, rockerButtonProps, {
-    ref: rockerButtonRef
-  }, itemProps, {
+    variant: "variants.rockerButton.thumbSwitch",
+    ref: rockerButtonRef,
     sx: {
-      '&.is-selected': _objectSpread({}, itemProps.selectedStyles)
+      '&.is-selected': _objectSpread({}, itemProps.selectedStyles),
+      '&.is-selected.is-hovered': {
+        bg: (0, _colors.getDarkerColor)(backgroundHexColor, 0.2)
+      },
+      '&.is-selected.is-pressed': {
+        bg: (0, _colors.getDarkerColor)(backgroundHexColor, 0.4)
+      }
     }
-  }), rendered));
+  }, (0, _utils.mergeProps)(hoverProps, pressProps, itemProps, rockerButtonProps)), rendered));
 });
 exports.CollectionRockerButton = CollectionRockerButton;
 CollectionRockerButton.displayName = 'CollectionRockerButton';
 CollectionRockerButton.propTypes = {
   /** Allows custom styles to be passed to button. */
-  selectedStyles: _propTypes["default"].shape({}),
+  selectedStyles: _propTypes["default"].shape({
+    bg: _propTypes["default"].string
+  }),
   // adding to surface in props table
   /** @ignore */
   item: _propTypes["default"].shape({
     key: _propTypes["default"].string,
     props: _propTypes["default"].shape({
-      selectedStyles: _propTypes["default"].shape({})
+      selectedStyles: _propTypes["default"].shape({
+        bg: _propTypes["default"].string
+      })
     }),
     rendered: _propTypes["default"].node
   })

package/lib/cjs/components/RockerButton/RockerButton.styles.js

@@ -33,7 +33,7 @@ var thumbSwitch = _objectSpread(_objectSpread({}, _Buttons.base), {}, {
   display: 'inline-flex',
   height: '26px',
   lineHeight: '26px',
-  fontSize: '14px',
+  fontSize: '13px',
   borderRadius: '15px',
   alignSelf: 'center',
   paddingTop: '0px',
@@ -41,11 +41,14 @@ var thumbSwitch = _objectSpread(_objectSpread({}, _Buttons.base), {}, {
   textTransform: 'uppercase',
   bg: 'accent.95',
   '&.is-selected': {
-    bg: 'active',
+    bg: 'accent.20',
     color: 'white',
     zIndex: '1'
   },
-  '&.is-focused': _objectSpread({}, _Buttons.defaultFocus)
+  '&.is-focused': _objectSpread({}, _Buttons.defaultFocus),
+  '&.is-hovered': {
+    bg: 'white'
+  }
 });
 var _default = {
   container: container,

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

@@ -19,7 +19,10 @@ var testButtons = [{
   }
 }, {
   name: 'Or',
-  key: 'Or'
+  key: 'Or',
+  selectedStyles: {
+    bg: 'accent.30'
+  }
 }, {
   name: 'Maybe?',
   key: 'Maybe?'
@@ -93,4 +96,40 @@ test('selected button can be changed by keyboard interaction', function () {
   });
   expect(_testWrapper.screen.getByText(testButtons[1].key)).toHaveClass('is-selected');
   expect(_testWrapper.screen.getByText(testButtons[0].key)).not.toHaveClass('is-selected');
+});
+test('rockerButton renders correct darker bg when selectedStyles prop is passed', function () {
+  getComponent();
+  var button0 = _testWrapper.screen.getByText(testButtons[0].key);
+  expect(button0).toHaveClass('is-selected');
+  expect(button0).toHaveStyle('background-color: #640099');
+  _userEvent["default"].hover(button0);
+  expect(button0).toHaveClass('is-selected');
+  expect(button0).toHaveClass('is-hovered');
+  expect(button0).toHaveStyle('background-color: #590089');
+  _testWrapper.fireEvent.keyDown(button0, {
+    key: 'Enter',
+    code: 13
+  });
+  expect(button0).toHaveClass('is-selected');
+  expect(button0).toHaveClass('is-pressed');
+  expect(button0).toHaveStyle('background-color: #4d0077');
+});
+test('rockerButton renders correct bg when selectedStyles prop is css variable', function () {
+  getComponent();
+  var button1 = _testWrapper.screen.getByText(testButtons[1].key);
+  _testWrapper.fireEvent.keyDown(_testWrapper.screen.getByText(testButtons[0].key), {
+    key: 'ArrowRight',
+    code: 'ArrowRight'
+  });
+  _userEvent["default"].hover(button1);
+  expect(button1).toHaveClass('is-selected');
+  expect(button1).toHaveClass('is-hovered');
+  expect(button1).toHaveStyle('background-color: #364872');
+  _testWrapper.fireEvent.keyDown(button1, {
+    key: 'Enter',
+    code: 13
+  });
+  expect(button1).toHaveClass('is-selected');
+  expect(button1).toHaveClass('is-pressed');
+  expect(button1).toHaveStyle('background-color: #2e3e63');
 });

package/lib/cjs/styles/colors.js

@@ -5,13 +5,14 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports.white = exports.warning = exports.text = exports.success = exports.shadow = exports.neutral = exports.line = exports.focus = exports.flatColorList = exports["default"] = exports.decorativeLight = exports.decorativeDark = exports.decorative = exports.critical = exports.button = exports.black = exports.active = exports.accent = void 0;
+exports.white = exports.warning = exports.text = exports.success = exports.shadow = exports.neutral = exports.line = exports.getDarkerColor = exports.getBaseHexColor = exports.focus = exports.flatColorList = exports["default"] = exports.decorativeLight = exports.decorativeDark = exports.decorative = exports.critical = exports.button = exports.black = exports.active = exports.accent = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/typeof"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _fill = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/fill"));
 var _reduce = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/reduce"));
 var _entries = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/entries"));
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _chromaJs = _interopRequireDefault(require("chroma-js"));
 var _context, _context2;
@@ -100,9 +101,13 @@ exports.decorativeDark = decorativeDark;
 var decorativeLight = (0, _map["default"])(decorative).call(decorative, function (color) {
   return (0, _chromaJs["default"])(color).brighten(2).hex();
 });
+exports.decorativeLight = decorativeLight;
+var getDarkerColor = function getDarkerColor(color, percentage) {
+  return _chromaJs["default"].valid(color) ? _chromaJs["default"].mix(color, '#000000', percentage).hex() : '';
+};
 
 // export const focus = chroma(accent[50]).alpha(0.75).hex();
-exports.decorativeLight = decorativeLight;
+exports.getDarkerColor = getDarkerColor;
 var focus = (0, _chromaJs["default"])('#D033FF').hex();
 
 // COMPONENT COLORS
@@ -177,4 +182,18 @@ function flattenColors(obj) {
 
 /* used by Storybook's stories */
 var flatColorList = flattenColors(allColors);
-exports.flatColorList = flatColorList;
+exports.flatColorList = flatColorList;
+var getBaseHexColor = function getBaseHexColor(colorName) {
+  if (_chromaJs["default"].valid(colorName)) {
+    return colorName;
+  }
+  try {
+    var keys = (0, _includes["default"])(colorName).call(colorName, '.') ? colorName.split('.') : [colorName];
+    return (0, _reduce["default"])(keys).call(keys, function (obj, key) {
+      return obj[key];
+    }, allColors);
+  } catch (error) {
+    return accentBase;
+  }
+};
+exports.getBaseHexColor = getBaseHexColor;

package/lib/components/RockerButton/RockerButton.js

@@ -13,12 +13,16 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
 import { FocusRing } from 'react-aria';
 import { Item } from 'react-stately';
+import { useHover, usePress } from '@react-aria/interactions';
+import { mergeProps } from '@react-aria/utils';
 import PropTypes from 'prop-types';
 import { usePropWarning, useRockerButton, useStatusClasses } from '../../hooks';
 import { Box } from '../../index';
+import { accent, getBaseHexColor, getDarkerColor } from '../../styles/colors';
 import { RockerContext } from '../RockerButtonGroup';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var CollectionRockerButton = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _itemProps$selectedSt, _itemProps$selectedSt2;
   var className = props.className,
     item = props.item;
   var key = item.key,
@@ -27,12 +31,21 @@ export var CollectionRockerButton = /*#__PURE__*/forwardRef(function (props, ref
   var state = useContext(RockerContext);
   var isDisabled = state.disabledKeys.has(key);
   var isSelected = state.selectedKey === key;
+  var rockerButtonRef = useRef();
+  var _useHover = useHover({}),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
+  var _usePress = usePress(rockerButtonRef),
+    pressProps = _usePress.pressProps,
+    isPressed = _usePress.isPressed;
   var _useStatusClasses = useStatusClasses(className, {
+      isHovered: isHovered,
+      isPressed: isPressed,
       isSelected: isSelected,
       isDisabled: isDisabled
     }),
     classNames = _useStatusClasses.classNames;
-  var rockerButtonRef = useRef();
+  var backgroundHexColor = (_itemProps$selectedSt = itemProps.selectedStyles) !== null && _itemProps$selectedSt !== void 0 && _itemProps$selectedSt.bg ? getBaseHexColor((_itemProps$selectedSt2 = itemProps.selectedStyles) === null || _itemProps$selectedSt2 === void 0 ? void 0 : _itemProps$selectedSt2.bg) : accent[20];
   usePropWarning(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
   useImperativeHandle(ref, function () {
@@ -49,25 +62,33 @@ export var CollectionRockerButton = /*#__PURE__*/forwardRef(function (props, ref
   }, ___EmotionJSX(Box, _extends({
     as: "button",
     className: classNames,
-    variant: "variants.rockerButton.thumbSwitch"
-  }, rockerButtonProps, {
-    ref: rockerButtonRef
-  }, itemProps, {
+    variant: "variants.rockerButton.thumbSwitch",
+    ref: rockerButtonRef,
     sx: {
-      '&.is-selected': _objectSpread({}, itemProps.selectedStyles)
+      '&.is-selected': _objectSpread({}, itemProps.selectedStyles),
+      '&.is-selected.is-hovered': {
+        bg: getDarkerColor(backgroundHexColor, 0.2)
+      },
+      '&.is-selected.is-pressed': {
+        bg: getDarkerColor(backgroundHexColor, 0.4)
+      }
     }
-  }), rendered));
+  }, mergeProps(hoverProps, pressProps, itemProps, rockerButtonProps)), rendered));
 });
 CollectionRockerButton.displayName = 'CollectionRockerButton';
 CollectionRockerButton.propTypes = {
   /** Allows custom styles to be passed to button. */
-  selectedStyles: PropTypes.shape({}),
+  selectedStyles: PropTypes.shape({
+    bg: PropTypes.string
+  }),
   // adding to surface in props table
   /** @ignore */
   item: PropTypes.shape({
     key: PropTypes.string,
     props: PropTypes.shape({
-      selectedStyles: PropTypes.shape({})
+      selectedStyles: PropTypes.shape({
+        bg: PropTypes.string
+      })
     }),
     rendered: PropTypes.node
   })

package/lib/components/RockerButton/RockerButton.styles.js

@@ -26,7 +26,7 @@ var thumbSwitch = _objectSpread(_objectSpread({}, base), {}, {
   display: 'inline-flex',
   height: '26px',
   lineHeight: '26px',
-  fontSize: '14px',
+  fontSize: '13px',
   borderRadius: '15px',
   alignSelf: 'center',
   paddingTop: '0px',
@@ -34,11 +34,14 @@ var thumbSwitch = _objectSpread(_objectSpread({}, base), {}, {
   textTransform: 'uppercase',
   bg: 'accent.95',
   '&.is-selected': {
-    bg: 'active',
+    bg: 'accent.20',
     color: 'white',
     zIndex: '1'
   },
-  '&.is-focused': _objectSpread({}, defaultFocus)
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-hovered': {
+    bg: 'white'
+  }
 });
 export default {
   container: container,

package/lib/components/RockerButtonGroup/RockerButtonGroup.test.js

@@ -16,7 +16,10 @@ var testButtons = [{
   }
 }, {
   name: 'Or',
-  key: 'Or'
+  key: 'Or',
+  selectedStyles: {
+    bg: 'accent.30'
+  }
 }, {
   name: 'Maybe?',
   key: 'Maybe?'
@@ -90,4 +93,40 @@ test('selected button can be changed by keyboard interaction', function () {
   });
   expect(screen.getByText(testButtons[1].key)).toHaveClass('is-selected');
   expect(screen.getByText(testButtons[0].key)).not.toHaveClass('is-selected');
+});
+test('rockerButton renders correct darker bg when selectedStyles prop is passed', function () {
+  getComponent();
+  var button0 = screen.getByText(testButtons[0].key);
+  expect(button0).toHaveClass('is-selected');
+  expect(button0).toHaveStyle('background-color: #640099');
+  userEvent.hover(button0);
+  expect(button0).toHaveClass('is-selected');
+  expect(button0).toHaveClass('is-hovered');
+  expect(button0).toHaveStyle('background-color: #590089');
+  fireEvent.keyDown(button0, {
+    key: 'Enter',
+    code: 13
+  });
+  expect(button0).toHaveClass('is-selected');
+  expect(button0).toHaveClass('is-pressed');
+  expect(button0).toHaveStyle('background-color: #4d0077');
+});
+test('rockerButton renders correct bg when selectedStyles prop is css variable', function () {
+  getComponent();
+  var button1 = screen.getByText(testButtons[1].key);
+  fireEvent.keyDown(screen.getByText(testButtons[0].key), {
+    key: 'ArrowRight',
+    code: 'ArrowRight'
+  });
+  userEvent.hover(button1);
+  expect(button1).toHaveClass('is-selected');
+  expect(button1).toHaveClass('is-hovered');
+  expect(button1).toHaveStyle('background-color: #364872');
+  fireEvent.keyDown(button1, {
+    key: 'Enter',
+    code: 13
+  });
+  expect(button1).toHaveClass('is-selected');
+  expect(button1).toHaveClass('is-pressed');
+  expect(button1).toHaveStyle('background-color: #2e3e63');
 });

package/lib/styles/colors.js

@@ -6,6 +6,7 @@ import _fillInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instanc
 import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
 import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import chroma from 'chroma-js';
 
 // SEMANTIC COLORS
@@ -83,6 +84,9 @@ export var decorativeDark = _mapInstanceProperty(decorative).call(decorative, fu
 export var decorativeLight = _mapInstanceProperty(decorative).call(decorative, function (color) {
   return chroma(color).brighten(2).hex();
 });
+export var getDarkerColor = function getDarkerColor(color, percentage) {
+  return chroma.valid(color) ? chroma.mix(color, '#000000', percentage).hex() : '';
+};
 
 // export const focus = chroma(accent[50]).alpha(0.75).hex();
 export var focus = chroma('#D033FF').hex();
@@ -152,4 +156,17 @@ function flattenColors(obj) {
 }
 
 /* used by Storybook's stories */
-export var flatColorList = flattenColors(allColors);
+export var flatColorList = flattenColors(allColors);
+export var getBaseHexColor = function getBaseHexColor(colorName) {
+  if (chroma.valid(colorName)) {
+    return colorName;
+  }
+  try {
+    var keys = _includesInstanceProperty(colorName).call(colorName, '.') ? colorName.split('.') : [colorName];
+    return _reduceInstanceProperty(keys).call(keys, function (obj, key) {
+      return obj[key];
+    }, allColors);
+  } catch (error) {
+    return accentBase;
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.5.5-alpha.2",
+  "version": "2.5.6-alpha.0",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",