@pingux/astro 1.33.0-alpha.2 → 1.33.0-alpha.3

package/lib/cjs/components/AccordionGridItem/AccordionGridItem.js

@@ -101,9 +101,12 @@ var AccordionGridItem = function AccordionGridItem(props) {
   delete rowProps.onPointerDown;
   delete rowProps.onClick;
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
-    as: "div"
+    as: "div",
+    role: "row",
+    tabindex: "0"
   }, (0, _utils.mergeProps)(rowProps, others), {
     "aria-selected": isSelected,
+    "aria-expanded": isSelected,
     className: classNames,
     variant: "accordion.accordionGridItem",
     ref: rowRef

package/lib/cjs/components/Box/Box.stories.js

@@ -22,6 +22,8 @@ var _ = _interopRequireDefault(require("."));
 
 var _index = require("../../index");
 
+var _images = require("../../utils/devUtils/constants/images");
+
 var _colors = require("../../styles/colors.js");
 
 var _htmlElements = require("../../utils/devUtils/constants/htmlElements");
@@ -93,29 +95,28 @@ var Disabled = function Disabled(_ref4) {
   return (0, _react2.jsx)(_["default"], (0, _extends2["default"])({
     bg: "white",
     isDisabled: true,
-    sx: {
-      border: '1px solid',
-      borderColor: 'neutral.80'
-    },
     width: "100%",
     p: "xl"
-  }, args), (0, _react2.jsx)(_index.TextField, {
-    id: "custom-id",
-    name: "custom-name",
-    label: "Example Label"
-  }), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.SelectField, {
-    label: "What's your favorite color?",
-    labelMode: "float"
-  }, (0, _react2.jsx)(_index.Item, {
-    key: "red"
-  }, "Red"), (0, _react2.jsx)(_index.Item, {
-    key: "blue"
-  }, "Blue"), (0, _react2.jsx)(_index.Item, {
-    key: "yellow"
-  }, "Yellow")));
+  }, args), (0, _react2.jsx)(_index.Image, {
+    alt: "Ping identity square logo",
+    src: _images.pingImg,
+    sx: {
+      width: '40px',
+      height: '40px'
+    }
+  }), (0, _react2.jsx)(_index.Text, {
+    fontSize: "xl"
+  }, "Exceptional Experiences Start with Secure Identity"));
 };
 
 exports.Disabled = Disabled;
+Disabled.parameters = {
+  docs: {
+    description: {
+      story: 'The disabled state only impacts styling and mouse clicks. Anything with keyboard events will still work.'
+    }
+  }
+};
 Disabled.args = {
   isDisabled: {
     defaultValue: true
@@ -131,6 +132,13 @@ Disabled.args = {
       })
     },
     defaultValue: 'white'
+  },
+  sx: {
+    border: '1px solid',
+    borderColor: 'neutral.80',
+    display: 'flex',
+    flexDirection: 'row !important',
+    gap: '10px'
   }
 };
 

package/lib/cjs/components/HelpHint/HelpHint.js

@@ -24,6 +24,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _uuid = require("uuid");
+
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 
 var _TooltipTrigger = _interopRequireWildcard(require("../TooltipTrigger"));
@@ -63,6 +65,7 @@ var HelpHint = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       tooltipProps = props.tooltipProps,
       iconButtonProps = props.iconButtonProps,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var tooltipId = (0, _uuid.v4)();
   return (0, _react2.jsx)(_TooltipTrigger["default"], (0, _extends2["default"])({
     ref: ref,
     direction: "top"
@@ -70,9 +73,15 @@ var HelpHint = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     variant: "helpHint",
     "aria-label": "label help hint",
     "data-testid": "help-hint__button"
-  }, iconButtonProps), (0, _react2.jsx)(_Icon["default"], {
+  }, iconButtonProps, {
+    "aria-describedby": tooltipId
+  }), (0, _react2.jsx)(_Icon["default"], {
     icon: HelpIcon
-  })), (0, _react2.jsx)(_TooltipTrigger.Tooltip, tooltipProps, children));
+  })), (0, _react2.jsx)(_TooltipTrigger.Tooltip, (0, _extends2["default"])({}, tooltipProps, {
+    role: "tooltip",
+    "aria-live": "polite",
+    id: tooltipId
+  }), children));
 });
 HelpHint.propTypes = {
   /** Props object that is spread directly into the tooltip element. */

package/lib/cjs/components/PasswordField/PasswordField.js

@@ -118,7 +118,7 @@ var PasswordField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return inputRef.current;
   });
 
-  var _hooks$useProgressive = hooks.useProgressiveState(isVisibleProp, onVisibleChangeProp),
+  var _hooks$useProgressive = hooks.useProgressiveState(isVisibleProp, isVisibleProp),
       _hooks$useProgressive2 = (0, _slicedToArray2["default"])(_hooks$useProgressive, 2),
       isVisible = _hooks$useProgressive2[0],
       setIsShown = _hooks$useProgressive2[1]; // Measure the width of the input to inform the width of the menu (below).

package/lib/cjs/styles/themeOverrides/uiLibraryOverride.js

@@ -57,6 +57,11 @@ var buttons = {
   inline: {
     '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _theme["default"].buttons.inline), _theme["default"].buttons.defaultHover)
   },
+  inverted: _objectSpread(_objectSpread({}, _theme["default"].buttons.inverted), {}, {
+    ':focus': {
+      border: 'none'
+    }
+  }),
   primary: {
     '&:hover': _objectSpread({}, _theme["default"].buttons.primary)
   },
@@ -123,8 +128,14 @@ var forms = {
     }
   }
 };
+var links = {
+  app: {
+    '&:hover': _objectSpread({}, _theme["default"].links.app)
+  }
+};
 var _default = {
   buttons: buttons,
-  forms: forms
+  forms: forms,
+  links: links
 };
 exports["default"] = _default;

package/lib/cjs/styles/variants/accordion.js

@@ -1,12 +1,37 @@
 "use strict";
 
+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");
+
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
 exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _buttons = require("../variants/buttons");
+
+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 accordionTitle = {
   display: 'inline-block !important',
   overflowWrap: 'break-word',
@@ -48,13 +73,9 @@ var accordionGridHeader = {
   color: 'neutral.10',
   flexGrow: 1,
   fontWeight: 700,
-  '&.is-focused': {
-    outline: 'none',
-    boxShadow: 'focus',
-    WebkitBoxShadow: 'focus',
-    MozBoxShadow: 'focus',
+  '&.is-focused': _objectSpread(_objectSpread({}, _buttons.defaultFocus), {}, {
     zIndex: '10'
-  },
+  }),
   minHeight: '64px',
   '&.is-hovered': {
     backgroundColor: 'accent.99'

package/lib/components/AccordionGridItem/AccordionGridItem.js

@@ -64,9 +64,12 @@ var AccordionGridItem = function AccordionGridItem(props) {
   delete rowProps.onPointerDown;
   delete rowProps.onClick;
   return ___EmotionJSX(Box, _extends({
-    as: "div"
+    as: "div",
+    role: "row",
+    tabindex: "0"
   }, mergeProps(rowProps, others), {
     "aria-selected": isSelected,
+    "aria-expanded": isSelected,
     className: classNames,
     variant: "accordion.accordionGridItem",
     ref: rowRef

package/lib/components/Box/Box.stories.js

@@ -3,7 +3,8 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React from 'react';
 import Box from '.';
-import { SelectField, Item, TextField } from '../../index';
+import { Image, Text } from '../../index';
+import { pingImg } from '../../utils/devUtils/constants/images';
 import { flatColorList } from '../../styles/colors.js';
 import { htmlElements } from '../../utils/devUtils/constants/htmlElements';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -69,26 +70,25 @@ export var Disabled = function Disabled(_ref4) {
   return ___EmotionJSX(Box, _extends({
     bg: "white",
     isDisabled: true,
-    sx: {
-      border: '1px solid',
-      borderColor: 'neutral.80'
-    },
     width: "100%",
     p: "xl"
-  }, args), ___EmotionJSX(TextField, {
-    id: "custom-id",
-    name: "custom-name",
-    label: "Example Label"
-  }), ___EmotionJSX("br", null), ___EmotionJSX(SelectField, {
-    label: "What's your favorite color?",
-    labelMode: "float"
-  }, ___EmotionJSX(Item, {
-    key: "red"
-  }, "Red"), ___EmotionJSX(Item, {
-    key: "blue"
-  }, "Blue"), ___EmotionJSX(Item, {
-    key: "yellow"
-  }, "Yellow")));
+  }, args), ___EmotionJSX(Image, {
+    alt: "Ping identity square logo",
+    src: pingImg,
+    sx: {
+      width: '40px',
+      height: '40px'
+    }
+  }), ___EmotionJSX(Text, {
+    fontSize: "xl"
+  }, "Exceptional Experiences Start with Secure Identity"));
+};
+Disabled.parameters = {
+  docs: {
+    description: {
+      story: 'The disabled state only impacts styling and mouse clicks. Anything with keyboard events will still work.'
+    }
+  }
 };
 Disabled.args = {
   isDisabled: {
@@ -105,6 +105,13 @@ Disabled.args = {
       })
     },
     defaultValue: 'white'
+  },
+  sx: {
+    border: '1px solid',
+    borderColor: 'neutral.80',
+    display: 'flex',
+    flexDirection: 'row !important',
+    gap: '10px'
   }
 };
 export var BoxesWithGaps = function BoxesWithGaps() {

package/lib/components/HelpHint/HelpHint.js

@@ -3,6 +3,7 @@ import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectW
 var _excluded = ["children", "tooltipProps", "iconButtonProps"];
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
+import { v4 as uuid } from 'uuid';
 import IconButton from '../IconButton';
 import TooltipTrigger, { Tooltip } from '../TooltipTrigger';
 import Icon from '../Icon';
@@ -34,6 +35,7 @@ var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
       iconButtonProps = props.iconButtonProps,
       others = _objectWithoutProperties(props, _excluded);
 
+  var tooltipId = uuid();
   return ___EmotionJSX(TooltipTrigger, _extends({
     ref: ref,
     direction: "top"
@@ -41,9 +43,15 @@ var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "helpHint",
     "aria-label": "label help hint",
     "data-testid": "help-hint__button"
-  }, iconButtonProps), ___EmotionJSX(Icon, {
+  }, iconButtonProps, {
+    "aria-describedby": tooltipId
+  }), ___EmotionJSX(Icon, {
     icon: HelpIcon
-  })), ___EmotionJSX(Tooltip, tooltipProps, children));
+  })), ___EmotionJSX(Tooltip, _extends({}, tooltipProps, {
+    role: "tooltip",
+    "aria-live": "polite",
+    id: tooltipId
+  }), children));
 });
 HelpHint.propTypes = {
   /** Props object that is spread directly into the tooltip element. */

package/lib/components/PasswordField/PasswordField.js

@@ -72,7 +72,7 @@ var PasswordField = /*#__PURE__*/forwardRef(function (props, ref) {
     return inputRef.current;
   });
 
-  var _hooks$useProgressive = hooks.useProgressiveState(isVisibleProp, onVisibleChangeProp),
+  var _hooks$useProgressive = hooks.useProgressiveState(isVisibleProp, isVisibleProp),
       _hooks$useProgressive2 = _slicedToArray(_hooks$useProgressive, 2),
       isVisible = _hooks$useProgressive2[0],
       setIsShown = _hooks$useProgressive2[1]; // Measure the width of the input to inform the width of the menu (below).

package/lib/styles/themeOverrides/uiLibraryOverride.js

@@ -38,6 +38,11 @@ var buttons = {
   inline: {
     '&:not(.disabled):hover': _objectSpread(_objectSpread({}, theme.buttons.inline), theme.buttons.defaultHover)
   },
+  inverted: _objectSpread(_objectSpread({}, theme.buttons.inverted), {}, {
+    ':focus': {
+      border: 'none'
+    }
+  }),
   primary: {
     '&:hover': _objectSpread({}, theme.buttons.primary)
   },
@@ -104,7 +109,13 @@ var forms = {
     }
   }
 };
+var links = {
+  app: {
+    '&:hover': _objectSpread({}, theme.links.app)
+  }
+};
 export default {
   buttons: buttons,
-  forms: forms
+  forms: forms,
+  links: links
 };

package/lib/styles/variants/accordion.js

@@ -1,3 +1,18 @@
+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 _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+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) { _defineProperty(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; }
+
+import { defaultFocus } from '../variants/buttons';
 var accordionTitle = {
   display: 'inline-block !important',
   overflowWrap: 'break-word',
@@ -39,13 +54,9 @@ var accordionGridHeader = {
   color: 'neutral.10',
   flexGrow: 1,
   fontWeight: 700,
-  '&.is-focused': {
-    outline: 'none',
-    boxShadow: 'focus',
-    WebkitBoxShadow: 'focus',
-    MozBoxShadow: 'focus',
+  '&.is-focused': _objectSpread(_objectSpread({}, defaultFocus), {}, {
     zIndex: '10'
-  },
+  }),
   minHeight: '64px',
   '&.is-hovered': {
     backgroundColor: 'accent.99'

package/package.json

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