@pingux/astro 1.41.0-alpha.1 → 1.41.0-alpha.3

package/lib/components/Card/Card.stories.js

@@ -1,14 +1,23 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import Card from './Card';
-import Box from '../Box';
+import { Box, Button, Card } from '../../index';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import CardReadme from './Card.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Card',
   component: Card,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CardReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  },
   argTypes: {
     children: {
       description: 'Card content.',
-      defaultValue: 'Card Children',
+      defaultValue: 'Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut at enim nunc. Cras congue consequat odio, ac sodales lacus imperdiet quis. In id ex eu lorem sollicitudin hendrerit feugiat ultrices elit. Curabitur imperdiet libero vitae luctus blandit. Ut ac dignissim tortor. Pellentesque convallis eu metus vitae mollis. Donec sapien felis, laoreet eu egestas eu, blandit quis tellus. Donec luctus suscipit nibh, et tincidunt nisl facilisis ut. Mauris molestie purus at lectus venenatis, ac ultrices felis ultrices.',
       table: {
         type: {}
       },
@@ -21,7 +30,7 @@ export default {
 export var Default = function Default(args) {
   return ___EmotionJSX(Card, args);
 };
-export var CardRow = function CardRow() {
+export var CardRow = function CardRow(args) {
   var sx = {
     li: {
       display: 'inline',
@@ -40,17 +49,42 @@ export var CardRow = function CardRow() {
   }, ___EmotionJSX(Box, {
     as: "li",
     sx: sx.li
-  }, ___EmotionJSX(Card, {
+  }, ___EmotionJSX(Card, _extends({
     sx: sx.card
-  }, "First")), ___EmotionJSX(Box, {
+  }, args))), ___EmotionJSX(Box, {
     as: "li",
     sx: sx.li
-  }, ___EmotionJSX(Card, {
+  }, ___EmotionJSX(Card, _extends({
     sx: sx.card
-  }, "Second")), ___EmotionJSX(Box, {
+  }, args))), ___EmotionJSX(Box, {
     as: "li",
     sx: sx.li
-  }, ___EmotionJSX(Card, {
+  }, ___EmotionJSX(Card, _extends({
     sx: sx.card
-  }, "Third")));
+  }, args))));
+};
+export var InteractiveCard = function InteractiveCard() {
+  var sx = {
+    alignContent: 'center',
+    height: '221px',
+    justifyContent: 'center',
+    textAlign: 'center',
+    width: '233px'
+  };
+  return ___EmotionJSX(Card, {
+    onPress: function onPress() {
+      return console.log('card pressed');
+    },
+    onHoverStart: function onHoverStart() {
+      return console.log('card hovered');
+    },
+    tabIndex: "0",
+    sx: sx
+  }, "Interactive Card", ___EmotionJSX(Button, {
+    variant: "inline",
+    mt: "md",
+    onPress: function onPress() {
+      return console.log('button pressed');
+    }
+  }, "Explore"));
 };

package/lib/components/Card/Card.test.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import Card from './Card';
 import Button from '../Button';
 import axeTest from '../../utils/testUtils/testAxe';
@@ -31,4 +32,39 @@ test('renders children within Card component', function () {
   });
   var mockedChildren = screen.getByRole('button');
   expect(mockedChildren).toBeInTheDocument();
+});
+test('card allows hover, focus, and press events', function () {
+  var children = ___EmotionJSX(Button, null);
+
+  var onPress = jest.fn();
+  getComponent({
+    children: children,
+    onPress: onPress,
+    tabIndex: 0
+  });
+  var card = screen.getByTestId(testId);
+  expect(card).not.toHaveClass('is-hovered');
+  userEvent.hover(card);
+  expect(card).toHaveClass('is-hovered');
+  userEvent.click(card);
+  expect(onPress).toHaveBeenCalled();
+  expect(card).not.toHaveClass('is-focused');
+  userEvent.tab();
+  expect(card).toHaveClass('is-focused');
+});
+test('allows focus within card', function () {
+  var children = ___EmotionJSX(Button, null);
+
+  getComponent({
+    children: children,
+    tabIndex: 0
+  });
+  var button = screen.getByRole('button');
+  var card = screen.getByTestId(testId);
+  expect(button).not.toHaveClass('is-focused');
+  userEvent.tab();
+  expect(button).not.toHaveClass('is-focused');
+  expect(card).toHaveClass('is-focused');
+  userEvent.tab();
+  expect(button).toHaveClass('is-focused');
 });

package/lib/components/Chip/Badge.js

@@ -22,12 +22,6 @@ import { Badge as ThemeUIBadge } from 'theme-ui';
 import { BadgeContext } from '../../context/BadgeContext';
 import { Box, Text } from '../../';
 import * as colors from '../../styles/colors';
-/**
- * Badge component.
- * Built on top of the [Badge from Theme-UI](https://theme-ui.com/components/box/) and uses the
- * available [props from Theme-UI](https://theme-ui.com/sx-prop).
-*/
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Badge = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var align = props.align,

package/lib/components/Chip/Badge.stories.js

@@ -10,10 +10,19 @@ import Icon from '../Icon';
 import IconButton from '../IconButton';
 import Box from '../Box';
 import { flatColorList } from '../../styles/colors.js';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import ChipReadme from './Chip.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Chip',
   component: Chip,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(ChipReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  },
   argTypes: {
     bg: {
       control: {

package/lib/components/Chip/Chip.js

@@ -3,12 +3,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Badge from './Badge';
 import { useDeprecationWarning } from '../../hooks';
-/**
- * Chip component.
- * Built on top of the [Box from Theme-UI](https://theme-ui.com/components/box/) and uses the
- * available [props from Theme-UI](https://theme-ui.com/sx-prop).
-*/
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Chip = /*#__PURE__*/React.forwardRef(function (props, ref) {
   useDeprecationWarning('The Chip component will be deprecated in Astro-UI 2.0.0 and replaced by the `Badge` component instead.');

package/lib/components/CodeView/CodeView.js

@@ -26,11 +26,6 @@ import Highlight, { defaultProps, Prism } from 'prism-react-renderer';
 import { useStatusClasses } from '../../hooks';
 import { Box, CopyText } from '../..';
 import codeView from '../../styles/variants/codeView';
-/**
- * Component for code syntax highlighting.
- * Built on top of [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer).
- */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,

package/lib/components/CodeView/CodeView.stories.js

@@ -4,6 +4,8 @@ import Prism from 'prismjs';
 import 'prismjs/components/prism-powershell';
 import CodeView from './CodeView';
 import { Text } from '../..';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import CodeViewReadme from './CodeView.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var code = "{\n  \"_links\": {\n    \"self\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad\"\n    },\n    \"password\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"password.set\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"password.reset\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"password.check\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"password.recover\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/password\"\n    },\n    \"account.sendVerificationCode\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad\"\n    },\n    \"linkedAccounts\": {\n      \"href\": \"https://api.pingone.com/v1/environments/94e3268d-847d-47aa-a45e-1ef8dd8f4df0/users/5a5d4c0c-8383-4796-9cdc-16b5a22f45ad/linkedAccounts\"\n    }\n  },\n  \"id\": \"5a5d4c0c-8383-4796-9cdc-16b5a22f45ad\",\n  \"environment\": {\n    \"id\": \"94e3268d-847d-47aa-a45e-1ef8dd8f4df0\"\n  },\n  \"account\": {\n    \"canAuthenticate\": true,\n    \"status\": \"OK\"\n  },\n  \"createdAt\": \"2021-09-03T15:01:43.555Z\",\n  \"email\": \"allegraweldon@pingidentity.com\",\n  \"enabled\": true,\n  \"identityProvider\": {\n    \"type\": \"PING_ONE\"\n  },\n  \"lifecycle\": {\n    \"status\": \"ACCOUNT_OK\"\n  },\n  \"mfaEnabled\": false,\n  \"population\": {\n    \"id\": \"c1adbc29-f188-4ea6-a015-49bddd74bc84\"\n  },\n  \"updatedAt\": \"2021-09-03T15:01:43.555Z\",\n  \"username\": \"allegraweldon@pingidentity.com\",\n  \"verifyStatus\": \"NOT_INITIATED\"\n}";
 export default {
@@ -24,6 +26,11 @@ export default {
     }
   },
   parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CodeViewReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    },
     a11y: {
       config: {
         rules: [

package/lib/components/CollapsiblePanel/CollapsiblePanel.js

@@ -9,11 +9,6 @@ import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import { useStatusClasses } from '../../hooks';
 import CollapsiblePanelBadge from '../CollapsiblePanelContainer/CollapsiblePanelBadge';
 import { Box, ListView, CollapsiblePanelContainer, Text } from '../../index';
-/**
- * The CollapsiblePanel serves as a filter menu with a menu title
- * and selected count displayed in a badge.
- */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var CollapsiblePanel = /*#__PURE__*/forwardRef(function (props, ref) {
   var selectedFilterCount = props.selectedFilterCount,

package/lib/components/CollapsiblePanel/CollapsiblePanel.stories.js

@@ -27,12 +27,17 @@ import AccountIcon from 'mdi-react/AccountIcon';
 import CollapsiblePanel from './CollapsiblePanel';
 import { useOverlayPanelState } from '../../hooks';
 import { Breadcrumbs, Box, Button, CheckboxField, Chip, ListView, Item, Icon, IconButton, CollapsiblePanelItem, OverlayPanel, OverlayProvider, SearchField, Text } from '../../index';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import CollapsiblePanelReadme from './CollapsiblePanel.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/CollapsiblePanel',
   component: CollapsiblePanel,
   parameters: {
     docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CollapsiblePanelReadme, null), ___EmotionJSX(DocsLayout, null));
+      },
       source: {
         type: 'code'
       }

package/lib/components/ComboBoxField/ComboBoxField.stories.js

@@ -88,6 +88,7 @@ var animals = [{
 }];
 var withSection = [{
   name: 'Animals',
+  key: 'Animals',
   children: [{
     name: 'Raccoon'
   }, {
@@ -97,6 +98,7 @@ var withSection = [{
   }]
 }, {
   name: 'People',
+  key: 'People',
   children: [{
     name: 'Michael'
   }, {
@@ -104,6 +106,16 @@ var withSection = [{
   }, {
     name: 'Creed'
   }]
+}, {
+  name: null,
+  key: 'fruit',
+  children: [{
+    name: 'Apple'
+  }, {
+    name: 'Orange'
+  }, {
+    name: 'Banana'
+  }]
 }];
 var actions = {
   onOpenChange: action('onOpenChange'),
@@ -192,7 +204,7 @@ export var WithSections = function WithSections(args) {
     items: withSection
   }, args), function (section) {
     return ___EmotionJSX(Section, {
-      key: section.name,
+      key: section.key,
       items: section.children,
       title: section.name
     }, function (item) {

package/lib/components/ComboBoxField/ComboBoxField.test.js

@@ -26,7 +26,7 @@ import { axe } from 'jest-axe';
 import { useFilter } from '@react-aria/i18n';
 import userEvent from '@testing-library/user-event';
 import { render, screen, act, within } from '../../utils/testUtils/testWrapper';
-import { ComboBoxField, Item, OverlayProvider } from '../../index';
+import { ComboBoxField, Item, OverlayProvider, Section } from '../../index';
 import loadingStates from '../../utils/devUtils/constants/loadingStates';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -40,6 +40,37 @@ var items = [{
   name: 'Snake',
   id: '3'
 }];
+var withSection = [{
+  name: 'Animals',
+  key: 'Animals',
+  kids: [{
+    name: 'Raccoon'
+  }, {
+    name: 'Kangaroo'
+  }, {
+    name: 'Opossum'
+  }]
+}, {
+  name: 'People',
+  key: 'People',
+  kids: [{
+    name: 'Michael'
+  }, {
+    name: 'Dwight'
+  }, {
+    name: 'Creed'
+  }]
+}, {
+  name: null,
+  key: 'fruit',
+  kids: [{
+    name: 'Apple'
+  }, {
+    name: 'Orange'
+  }, {
+    name: 'Banana'
+  }]
+}];
 var defaultProps = {
   defaultItems: items,
   label: 'Test Label'
@@ -60,6 +91,28 @@ var getComponent = function getComponent() {
   })));
 };
 
+var getComponentWithSections = function getComponentWithSections() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref2$renderFn = _ref2.renderFn,
+      renderFn = _ref2$renderFn === void 0 ? render : _ref2$renderFn;
+
+  return renderFn(___EmotionJSX(OverlayProvider, null, ___EmotionJSX(ComboBoxField, _extends({}, defaultProps, props, {
+    items: withSection
+  }), function (section) {
+    return ___EmotionJSX(Section, {
+      key: section.key,
+      items: section.kids,
+      title: section.name
+    }, function (item) {
+      return ___EmotionJSX(Item, {
+        key: item.name
+      }, item.name);
+    });
+  })));
+};
+
 var ComboBoxWithCustomFilter = function ComboBoxWithCustomFilter() {
   var _useFilter = useFilter({
     sensitivity: 'base'
@@ -76,8 +129,8 @@ var ComboBoxWithCustomFilter = function ComboBoxWithCustomFilter() {
       setFieldState = _useState2[1];
 
   var onSelectionChange = function onSelectionChange(key) {
-    var selectedItem = _filterInstanceProperty(items).call(items, function (_ref2) {
-      var id = _ref2.id;
+    var selectedItem = _filterInstanceProperty(items).call(items, function (_ref3) {
+      var id = _ref3.id;
       return id === key;
     });
 
@@ -148,8 +201,8 @@ var ComboBoxWithAddOption = function ComboBoxWithAddOption() {
       setSelectedKey = _useState8[1];
 
   var onSelectionChange = function onSelectionChange(key) {
-    if (key && !_findInstanceProperty(options).call(options, function (_ref3) {
-      var name = _ref3.name;
+    if (key && !_findInstanceProperty(options).call(options, function (_ref4) {
+      var name = _ref4.name;
       return name === key;
     })) {
       var _context;
@@ -1009,6 +1062,18 @@ test('popover closes on input blur', function () {
   expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
   expect(screen.queryByRole('option')).not.toBeInTheDocument();
 });
+test('passing sections, renders separators', function () {
+  getComponentWithSections();
+  var button = screen.getByRole('button');
+  userEvent.click(button);
+  expect(screen.queryAllByRole('separator')).toHaveLength(4);
+});
+test('a blank title does not render', function () {
+  getComponentWithSections();
+  var button = screen.getByRole('button');
+  userEvent.click(button);
+  expect(screen.queryByText('Fruit')).not.toBeInTheDocument();
+});
 describe('when isReadOnly is true', function () {
   var testProp = {
     isReadOnly: true

package/lib/components/CopyText/CopyText.js

@@ -32,10 +32,6 @@ TooltipWrapper.propTypes = {
   targetRef: PropTypes.shape({}),
   tooltip: PropTypes.string
 };
-/**
- * Allows copying some pieces of text by clicking on the text or by the button nearby.
- */
-
 var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
       textToCopy = props.textToCopy,

package/lib/components/CopyText/CopyText.stories.js

@@ -3,10 +3,19 @@ import React from 'react';
 import Link from '../Link';
 import Text from '../Text';
 import CopyText from './CopyText';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import CopyTextReadme from './CopyText.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/CopyText',
   component: CopyText,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(CopyTextReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  },
   argTypes: {
     mode: {
       control: 'none'

package/lib/components/DataTable/DataTable.js

@@ -51,13 +51,6 @@ var ROW_HEIGHTS = {
     large: 75
   }
 };
-/**
- * DataTable component using react aria Spectrum TableView
- * Primarily utilizes [TableView](https://react-spectrum.adobe.com/react-spectrum/TableView.html)
- * Cross platform state management react hook for DataTable
- * Primarily utilizes [useTableState](https://react-spectrum.adobe.com/react-stately/useTableState.html)
-*/
-
 var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
   var width = props.width,
       height = props.height,
@@ -211,12 +204,30 @@ var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
 });
 DataTable.propTypes = {
   /**
-   * Sets the amount of vertical padding within each cell.
-   * density: 'compact' | 'regular' | 'spacious'
-   * @default 'regular'
-   */
+    * Sets the amount of vertical padding within each cell.
+    * density: 'compact' | 'regular' | 'spacious'
+    * @default 'regular'
+  */
   density: PropTypes.string,
 
+  /** Sets the height of table. */
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /** Determine if the header should be hidden. */
+  hasHiddenHeader: PropTypes.bool,
+
+  /** Bool that determines if the items are sortable. */
+  isSortable: PropTypes.bool,
+
+  /** The list of DataTable items. */
+  items: PropTypes.arrayOf(PropTypes.shape({})),
+
+  /** Reflects current loading state. */
+  loadingState: PropTypes.oneOf(['error', 'filtering', 'idle', 'loading', 'loadingMore', 'sorting']),
+
+  /** Handler that is called when a user performs an action on a row. */
+  onAction: PropTypes.func,
+
   /**
    * Sets the overflow behavior for the cell contents.
    * overflowMode: 'wrap' | 'truncate'
@@ -224,10 +235,17 @@ DataTable.propTypes = {
    */
   overflowMode: PropTypes.string,
 
-  /** Handler that is called when a user performs an action on a row. */
-  onAction: PropTypes.func,
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  /** Callback function that fires when more data should be loaded on demand as user scrolls. */
+  onLoadMore: PropTypes.func,
+
+  /** Callback function that fires when sortable column header is pressed. */
+  onSortChange: PropTypes.func,
+
+  /** Defines the current column key to sort by and the sort direction. */
+  sortDescriptor: PropTypes.oneOf(['ascending', 'descending']),
+
+  /** Sets the width of table. */
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 DataTable.defaultProps = {
   width: '100%',