@pingux/astro 1.16.0 → 1.17.0-alpha.1

package/lib/components/Image/Image.stories.js

@@ -35,12 +35,15 @@ export default {
 export var Default = function Default(_ref) {
   var args = _extends({}, _ref);
 
-  return ___EmotionJSX(Image, args);
+  return ___EmotionJSX(Image, _extends({}, args, {
+    alt: "Ping identity square logo"
+  }));
 };
 export var Avatar = function Avatar() {
   return ___EmotionJSX(Image, {
     src: pingImg,
-    variant: "images.avatar"
+    variant: "images.avatar",
+    alt: "Ping identity round avatar"
   });
 };
 export var CustomSizeAndRadius = function CustomSizeAndRadius() {
@@ -51,13 +54,15 @@ export var CustomSizeAndRadius = function CustomSizeAndRadius() {
       height: '70px',
       borderRadius: 8,
       bg: 'neutral.90'
-    }
+    },
+    alt: "Terry Crews in a red suite"
   });
 };
 export var Disabled = function Disabled() {
   return ___EmotionJSX(Image, {
     src: pingImg,
-    isDisabled: true
+    isDisabled: true,
+    alt: "Ping identity square logo"
   });
 };
 export var FallbackImage = function FallbackImage() {
@@ -67,7 +72,8 @@ export var FallbackImage = function FallbackImage() {
     sx: {
       width: '150px',
       height: '150px'
-    }
+    },
+    alt: "Random image"
   });
 };
 export var WithSkeletonLoadSuccess = function WithSkeletonLoadSuccess(_ref2) {
@@ -78,7 +84,8 @@ export var WithSkeletonLoadSuccess = function WithSkeletonLoadSuccess(_ref2) {
     sx: {
       width: '150px',
       height: '150px'
-    }
+    },
+    alt: "Random image"
   });
 };
 WithSkeletonLoadSuccess.args = {
@@ -90,7 +97,8 @@ export var WithSkeletonLoadTimeout = function WithSkeletonLoadTimeout() {
     sx: {
       width: '150px',
       height: '150px'
-    }
+    },
+    alt: "Random image"
   });
 };
 export var UpdatingImageSrc = function UpdatingImageSrc() {
@@ -116,6 +124,7 @@ export var UpdatingImageSrc = function UpdatingImageSrc() {
       width: '200px',
       height: '200px',
       mt: '25px'
-    }
+    },
+    alt: image === pingImg ? 'Ping identity square logo' : 'Terry Crews in a red suite'
   }));
 };

package/lib/components/Image/Image.test.js

@@ -76,6 +76,15 @@ test('image shows disabled status', function () {
   var img = screen.getByRole('img');
   expect(img).toHaveClass('is-disabled');
 });
+test('image with alt text', function () {
+  getComponent({
+    alt: 'Test'
+  });
+  act(function () {
+    fallbackImageObj.onImageLoad();
+  });
+  expect(screen.getByAltText('Test')).toBeInTheDocument();
+});
 test('image source is able to be changed', function () {
   var src2 = 'second-src';
 

package/lib/components/Link/Link.js

@@ -9,6 +9,12 @@ import { useFocusRing } from '@react-aria/focus';
 import { useHover, usePress } from '@react-aria/interactions';
 import { mergeProps } from '@react-aria/utils';
 import { usePropWarning, useStatusClasses } from '../../hooks';
+/**
+ * Link uses the [Link - Theme-UI](https://theme-ui.com/components/link) component and
+ * React Aria's [useLink](https://react-spectrum.adobe.com/react-aria/useLink.html) hook.
+ *
+ */
+
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Link = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,

package/lib/components/ListView/ListView.js

@@ -58,6 +58,12 @@ export function useListLayout(state) {
   layout.disabledKeys = state.disabledKeys;
   return layout;
 }
+/**
+ * ListViews are used to display a list of items. Users can select,
+ * view, or edit items in this list. This virtualized component supports
+ * asynchronous data in infinitely scrollable lists.
+*/
+
 var ListView = /*#__PURE__*/forwardRef(function (props, ref) {
   var disabledKeys = props.disabledKeys,
       loadingState = props.loadingState,

package/lib/components/Messages/Messages.js

@@ -10,6 +10,11 @@ import { useListState } from '@react-stately/list';
 import statuses from '../../utils/devUtils/constants/statuses';
 import Message from './Message';
 import Box from '../Box';
+/**
+ *Messages are intended to display non-critical alerts that
+ attract the users’ attention, but do not interfere or temporarily block their work.
+ */
+
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Messages = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context;

package/lib/components/Modal/Modal.js

@@ -26,6 +26,12 @@ import IconButton from '../IconButton';
 import Icon from '../Icon';
 import Text from '../Text';
 import { useStatusClasses, useDeprecationWarning } from '../../hooks';
+/**
+  * Modals are overlays that interrupt a user’s workflow to convey an important message.
+  * The component must be wrapped in an OverlayProvider, and the first child should be a trigger,
+  * such as Button.
+*/
+
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Modal = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,

package/lib/components/NavBar/NavBar.stories.js

@@ -12,7 +12,7 @@ import { Separator, Box, Link, NavBar, NavBarSection, NavBarItemButton, NavBarIt
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'NavBar',
-  component: 'NavBar',
+  component: NavBar,
   subcomponents: {
     NavBarSection: NavBarSection,
     NavBarItemLink: NavBarItemLink,

package/lib/components/OverlayPanel/OverlayPanel.js

@@ -9,6 +9,10 @@ import { FocusScope } from '@react-aria/focus';
 import Box from '../Box';
 import { useStatusClasses, useOverlayPanelState } from '../../hooks';
 import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
+/**
+ * In Astro, side panels are used to show details and present modal interactions.
+ */
+
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var OverlayPanel = /*#__PURE__*/forwardRef(function (props, ref) {
   var _props$sx;

package/lib/components/RequirementsList/RequirementsList.js

@@ -11,6 +11,11 @@ import DefaultCircle from 'mdi-react/CheckboxBlankCircleOutlineIcon';
 import Box from '../Box';
 import Text from '../Text';
 import Icon from '../Icon';
+/**
+ * List of requirements for a password, with indicators that can change to show when
+ * requirements are satisfied.
+ */
+
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var RequirementsList = /*#__PURE__*/forwardRef(function (props, ref) {
   var requirements = props.requirements,

package/lib/components/ScrollBox/ScrollBox.js

@@ -20,6 +20,10 @@ import React, { forwardRef, useImperativeHandle, useLayoutEffect, useRef, useSta
 import PropTypes from 'prop-types';
 import Box from '../Box';
 import useStatusClasses from '../../hooks/useStatusClasses';
+/**
+ * Scrollbox is a container that allows content to be scrolled
+ */
+
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var ScrollBox = /*#__PURE__*/forwardRef(function (props, ref) {
   var maxHeight = props.maxHeight,
@@ -31,7 +35,7 @@ var ScrollBox = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var _useState = useState(0),
       _useState2 = _slicedToArray(_useState, 2),
-      scrollTopPostion = _useState2[0],
+      scrollTopPosition = _useState2[0],
       setScrollTopPosition = _useState2[1];
 
   var _useState3 = useState(false),
@@ -59,7 +63,7 @@ var ScrollBox = /*#__PURE__*/forwardRef(function (props, ref) {
         setIsTopShadowShowing(outerRef.current.firstChild.scrollTop !== 0);
       }
     }
-  }, [scrollTopPostion]);
+  }, [scrollTopPosition]);
   /* istanbul ignore next */
 
   var onScroll = function onScroll() {

package/lib/components/Stepper/Stepper.js

@@ -31,6 +31,12 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 var ACTIVE = stepStatuses.ACTIVE,
     COMPLETED = stepStatuses.COMPLETED,
     INACTIVE = stepStatuses.INACTIVE;
+/**
+ * The Stepper component acts as a wrapper for individual Step components.
+ * Stepper is used to display progress through a sequence of logical and numbered steps
+ *  usually within a configuration wizard.
+ */
+
 var Stepper = /*#__PURE__*/forwardRef(function (props, ref) {
   var activeStep = props.activeStep,
       onStepChange = props.onStepChange,

package/lib/components/Tab/Tab.js

@@ -13,6 +13,11 @@ import { useStatusClasses, usePropWarning } from '../../hooks';
 import ORIENTATION from '../../utils/devUtils/constants/orientation';
 import TabPicker from '../TabPicker';
 import { Box, Text, TooltipTrigger, Tooltip, Button } from '../..';
+/**
+ * Tab control for dividing up closely-related content.
+ * Typically used as a child of the Tabs component.
+ */
+
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var CollectionTab = /*#__PURE__*/forwardRef(function (props, ref) {
   var className = props.className,

package/lib/components/Tabs/Tabs.js

@@ -28,6 +28,10 @@ import ORIENTATION from '../../utils/devUtils/constants/orientation';
 import { usePropWarning } from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var TabsContext = /*#__PURE__*/React.createContext({});
+/**
+ * Tabs are used to divide content, navigate to other views, and indicate work progress.
+ */
+
 var Tabs = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context4, _context5;
 

package/package.json

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