@pingux/astro 2.46.0-alpha.4 → 2.46.0-alpha.5

package/lib/cjs/components/AccordionGroup/AccordionGroup.mdx

@@ -10,6 +10,7 @@ Accordions should be used:
 - To organize related information.
 - To shorten pages and reduce scrolling when it’s not crucial that users review the content.
 - When white space is at a minimum and content cannot be displayed all at once. 
+- With Slots props to insert extra UI elements next to headings.
 
 Accordions should not have focusable items as children.
 
@@ -35,9 +36,14 @@ These keys provide additional functionality to the component.
 | Tab | Moves focus to the next focusable component. All focusable components in the accordion are included in the page tab sequence.|
 | Shift + Tab | Moves focus to the previous focusable component. All focusable components in the accordion are included in the page tab sequence. |
 
+#### Slots
+
+The slots prop has been provided for added flexibility. Use the **`postHeading`** slot to add helpHint or icon elements next to the heading
+section. Keep in mind that this component is best suited for specific designs necessitates its use.
+
 #### Screen readers
 
 This component uses the following attributes to assist screen readers:
 - The accordion header button uses the **`aria-expanded`** attribute to indicate when the content expands and collapses. 
 - When expanded, the **`aria-controls`** attribute is added to the button pointing to the content. The button uses **`aria-label`** to provide an accessible name. 
-- The **`aria-labelledby`** attribute is added to the entire accordion component, which is supplied with the button ID.  
+- The **`aria-labelledby`** attribute is added to the entire accordion component, which is supplied with the button ID.  

package/lib/cjs/components/AccordionGroup/AccordionGroup.stories.d.ts

@@ -50,3 +50,4 @@ export declare const CustomPresentation: {
     };
 };
 export declare const LabelWithBadge: (args: any) => React.JSX.Element;
+export declare const AccordionWithSlot: (args: any) => React.JSX.Element;

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

@@ -8,7 +8,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.UncontrolledExpanded = exports.Multiple = exports.LabelWithBadge = exports.DisabledState = exports.DifferentLevels = exports.Default = exports.CustomPresentation = exports.ControlledExpanded = void 0;
+exports["default"] = exports.UncontrolledExpanded = exports.Multiple = exports.LabelWithBadge = exports.DisabledState = exports.DifferentLevels = exports.Default = exports.CustomPresentation = exports.ControlledExpanded = exports.AccordionWithSlot = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
@@ -318,4 +318,18 @@ var LabelWithBadge = function LabelWithBadge(args) {
     "data-id": "accordionItem"
   }, (0, _react2.jsx)(_index.Text, null, "Render me!")));
 };
-exports.LabelWithBadge = LabelWithBadge;
+exports.LabelWithBadge = LabelWithBadge;
+var AccordionWithSlot = function AccordionWithSlot(args) {
+  return (0, _react2.jsx)(_index.AccordionGroup, (0, _extends2["default"])({
+    labelHeadingTag: "h3"
+  }, args), (0, _react2.jsx)(_reactStately.Item, {
+    key: "accordionKey",
+    textValue: "accordionKey",
+    label: "Accordion Label",
+    "data-id": "accordionItem",
+    slots: {
+      postHeading: (0, _react2.jsx)(_index.HelpHint, null, " Text of the popover right here...")
+    }
+  }, (0, _react2.jsx)(_index.Text, null, "Render me!")));
+};
+exports.AccordionWithSlot = AccordionWithSlot;

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

@@ -41,17 +41,20 @@ var getComponent = function getComponent() {
     key: "first",
     textValue: "Duplicate",
     "data-id": "first",
-    label: "Accordion item"
+    label: "Accordion item",
+    "data-testid": "first"
   }, (0, _react2.jsx)(_Text["default"], null, "Render me!")), (0, _react2.jsx)(_reactStately.Item, {
     key: "second",
     textValue: "Duplicate",
     "data-id": "second",
-    label: "Accordion item"
+    label: "Accordion item",
+    "data-testid": "second"
   }, (0, _react2.jsx)(_Text["default"], null, "Render me!")), (0, _react2.jsx)(_reactStately.Item, {
     key: "third",
     textValue: "Duplicate",
     "data-id": "third",
-    label: "Accordion item"
+    label: "Accordion item",
+    "data-testid": "third"
   }, (0, _react2.jsx)(_index.TextField, {
     role: "form",
     label: "Example Label",
@@ -161,6 +164,15 @@ var getComponentWithMultipleAccordion = function getComponentWithMultipleAccordi
     "data-id": "connection-configuration-custom-form"
   }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_Text["default"], null, "other text1"), (0, _react2.jsx)(_Text["default"], null, "another text1")))))));
 };
+var getComponentWithSlot = function getComponentWithSlot(props) {
+  return (0, _testWrapper.render)((0, _react2.jsx)(_["default"], (0, _extends2["default"])({}, defaultProps, props), (0, _react2.jsx)(_reactStately.Item, {
+    key: "first",
+    textValue: "Duplicate",
+    "data-id": "first",
+    label: "Accordion item",
+    slots: props.slots
+  }, (0, _react2.jsx)(_Text["default"], null, "Render me!"))));
+};
 test('button press uses callback', function () {
   var onPress = jest.fn();
   getComponent({
@@ -274,10 +286,8 @@ test('disabled keys prop disables an accordion item', function () {
   getComponent({
     disabledKeys: ['first']
   });
-  var buttons = _testWrapper.screen.getAllByRole('button');
-  var selectedItem = buttons[0];
-  var parentElement = selectedItem.parentElement;
-  expect(parentElement).toHaveClass('is-disabled');
+  var button = _testWrapper.screen.getByTestId('first');
+  expect(button).toHaveClass('is-disabled');
 });
 test('default expanded keys expands an accordion item', function () {
   getComponent({
@@ -316,10 +326,10 @@ test('able to click a textfield that is the rendered child of an accordion', fun
 });
 test('Item accepts a data-id and the data-id can be found in the DOM', function () {
   getComponent();
-  var buttons = _testWrapper.screen.getAllByRole('button');
+  var buttons = _testWrapper.screen.getAllByText('Accordion item');
   var selectedItem = buttons[0];
   var parentElement = selectedItem.parentElement;
-  expect(parentElement).toHaveAttribute('data-id', 'first');
+  expect(parentElement).toHaveAttribute('data-key', 'first');
 });
 test('items do not automatically expand if wrapped in an open OverlayPanel', function () {
   getComponentInOverlayPanel();
@@ -404,4 +414,14 @@ test('when labelHeadingTag is uppercase, the label is rendered', function () {
   _testWrapper.screen.getAllByRole('heading', {
     level: getLabelHeadingLevel(h4Tag)
   });
+});
+test('renders Accordion component with slot', function () {
+  getComponentWithSlot({
+    slots: {
+      postHeading: (0, _react2.jsx)(_index.HelpHint, {
+        "data-testid": "helpHint"
+      }, "Text of the popover right here...")
+    }
+  });
+  expect(_testWrapper.screen.getByTestId('helpHint')).toBeInTheDocument();
 });

package/lib/cjs/components/AccordionItem/AccordionItem.d.ts

@@ -9,6 +9,9 @@ interface AccordionItemProps<T> {
     'data-id'?: string;
     children: React.ReactNode;
     buttonProps?: object;
+    slots?: {
+        postHeading: React.ReactNode;
+    };
 }
 declare const AccordionItem: {
     (props: AccordionItemProps<object>): React.JSX.Element;

package/lib/cjs/components/AccordionItem/AccordionItem.js

@@ -31,6 +31,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var validHeadingTags = ['h1', 'h2', 'h3', 'h4'];
 exports.validHeadingTags = validHeadingTags;
 var AccordionItem = function AccordionItem(props) {
+  var _item$props$slots, _item$props$slots2;
   var className = props.className,
     item = props.item,
     labelHeadingTag = props.labelHeadingTag;
@@ -81,7 +82,9 @@ var AccordionItem = function AccordionItem(props) {
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "accordion.accordion",
     className: itemClasses
-  }, others, containerProps), (0, _react2.jsx)(_themeUi.Button, (0, _extends2["default"])({
+  }, others, containerProps), (0, _react2.jsx)(_index.Box, {
+    isRow: true
+  }, (0, _react2.jsx)(_themeUi.Button, (0, _extends2["default"])({
     "aria-label": ariaLabel,
     ref: buttonRef,
     sx: {
@@ -104,7 +107,7 @@ var AccordionItem = function AccordionItem(props) {
     title: {
       name: isOpen ? 'Menu Up Icon' : 'Menu Down Icon'
     }
-  }))), isOpen && (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+  }))), ((_item$props$slots = item.props.slots) === null || _item$props$slots === void 0 ? void 0 : _item$props$slots.postHeading) && ((_item$props$slots2 = item.props.slots) === null || _item$props$slots2 === void 0 ? void 0 : _item$props$slots2.postHeading)), isOpen && (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "accordion.body"
   }, accordionRegionProps, regionProps, {
     className: itemClasses

package/lib/cjs/types/item.d.ts

@@ -28,6 +28,9 @@ declare module '@react-types/shared' {
         sx?: StyleProps;
         /** Key for the item. */
         key?: Key;
+        slots?: {
+            postHeading: React.ReactNode;
+        };
     }
 }
 export default ItemProps;

package/lib/components/AccordionGroup/AccordionGroup.mdx

@@ -10,6 +10,7 @@ Accordions should be used:
 - To organize related information.
 - To shorten pages and reduce scrolling when it’s not crucial that users review the content.
 - When white space is at a minimum and content cannot be displayed all at once. 
+- With Slots props to insert extra UI elements next to headings.
 
 Accordions should not have focusable items as children.
 
@@ -35,9 +36,14 @@ These keys provide additional functionality to the component.
 | Tab | Moves focus to the next focusable component. All focusable components in the accordion are included in the page tab sequence.|
 | Shift + Tab | Moves focus to the previous focusable component. All focusable components in the accordion are included in the page tab sequence. |
 
+#### Slots
+
+The slots prop has been provided for added flexibility. Use the **`postHeading`** slot to add helpHint or icon elements next to the heading
+section. Keep in mind that this component is best suited for specific designs necessitates its use.
+
 #### Screen readers
 
 This component uses the following attributes to assist screen readers:
 - The accordion header button uses the **`aria-expanded`** attribute to indicate when the content expands and collapses. 
 - When expanded, the **`aria-controls`** attribute is added to the button pointing to the content. The button uses **`aria-label`** to provide an accessible name. 
-- The **`aria-labelledby`** attribute is added to the entire accordion component, which is supplied with the button ID.  
+- The **`aria-labelledby`** attribute is added to the entire accordion component, which is supplied with the button ID.  

package/lib/components/AccordionGroup/AccordionGroup.stories.js

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import { Item } from 'react-stately';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
-import { AccordionGroup, Badge, Box, Button, Text, TextField } from '../../index';
+import { AccordionGroup, Badge, Box, Button, HelpHint, Text, TextField } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import { validHeadingTags } from '../AccordionItem/AccordionItem';
 import AccordionReadme from './AccordionGroup';
@@ -296,4 +296,17 @@ export var LabelWithBadge = function LabelWithBadge(args) {
     }))),
     "data-id": "accordionItem"
   }, ___EmotionJSX(Text, null, "Render me!")));
+};
+export var AccordionWithSlot = function AccordionWithSlot(args) {
+  return ___EmotionJSX(AccordionGroup, _extends({
+    labelHeadingTag: "h3"
+  }, args), ___EmotionJSX(Item, {
+    key: "accordionKey",
+    textValue: "accordionKey",
+    label: "Accordion Label",
+    "data-id": "accordionItem",
+    slots: {
+      postHeading: ___EmotionJSX(HelpHint, null, " Text of the popover right here...")
+    }
+  }, ___EmotionJSX(Text, null, "Render me!")));
 };

package/lib/components/AccordionGroup/AccordionGroup.test.js

@@ -4,7 +4,7 @@ import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instan
 import React from 'react';
 import { Item } from 'react-stately';
 import userEvent from '@testing-library/user-event';
-import { Box, Button, Menu, OverlayPanel, PopoverMenu, TextField } from '../../index';
+import { Box, Button, HelpHint, Menu, OverlayPanel, PopoverMenu, TextField } from '../../index';
 import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
 import { validHeadingTags } from '../AccordionItem/AccordionItem';
@@ -38,17 +38,20 @@ var getComponent = function getComponent() {
     key: "first",
     textValue: "Duplicate",
     "data-id": "first",
-    label: "Accordion item"
+    label: "Accordion item",
+    "data-testid": "first"
   }, ___EmotionJSX(Text, null, "Render me!")), ___EmotionJSX(Item, {
     key: "second",
     textValue: "Duplicate",
     "data-id": "second",
-    label: "Accordion item"
+    label: "Accordion item",
+    "data-testid": "second"
   }, ___EmotionJSX(Text, null, "Render me!")), ___EmotionJSX(Item, {
     key: "third",
     textValue: "Duplicate",
     "data-id": "third",
-    label: "Accordion item"
+    label: "Accordion item",
+    "data-testid": "third"
   }, ___EmotionJSX(TextField, {
     role: "form",
     label: "Example Label",
@@ -158,6 +161,15 @@ var getComponentWithMultipleAccordion = function getComponentWithMultipleAccordi
     "data-id": "connection-configuration-custom-form"
   }, ___EmotionJSX(Box, null, ___EmotionJSX(Text, null, "other text1"), ___EmotionJSX(Text, null, "another text1")))))));
 };
+var getComponentWithSlot = function getComponentWithSlot(props) {
+  return render(___EmotionJSX(AccordionGroup, _extends({}, defaultProps, props), ___EmotionJSX(Item, {
+    key: "first",
+    textValue: "Duplicate",
+    "data-id": "first",
+    label: "Accordion item",
+    slots: props.slots
+  }, ___EmotionJSX(Text, null, "Render me!"))));
+};
 test('button press uses callback', function () {
   var onPress = jest.fn();
   getComponent({
@@ -271,10 +283,8 @@ test('disabled keys prop disables an accordion item', function () {
   getComponent({
     disabledKeys: ['first']
   });
-  var buttons = screen.getAllByRole('button');
-  var selectedItem = buttons[0];
-  var parentElement = selectedItem.parentElement;
-  expect(parentElement).toHaveClass('is-disabled');
+  var button = screen.getByTestId('first');
+  expect(button).toHaveClass('is-disabled');
 });
 test('default expanded keys expands an accordion item', function () {
   getComponent({
@@ -313,10 +323,10 @@ test('able to click a textfield that is the rendered child of an accordion', fun
 });
 test('Item accepts a data-id and the data-id can be found in the DOM', function () {
   getComponent();
-  var buttons = screen.getAllByRole('button');
+  var buttons = screen.getAllByText('Accordion item');
   var selectedItem = buttons[0];
   var parentElement = selectedItem.parentElement;
-  expect(parentElement).toHaveAttribute('data-id', 'first');
+  expect(parentElement).toHaveAttribute('data-key', 'first');
 });
 test('items do not automatically expand if wrapped in an open OverlayPanel', function () {
   getComponentInOverlayPanel();
@@ -401,4 +411,14 @@ test('when labelHeadingTag is uppercase, the label is rendered', function () {
   screen.getAllByRole('heading', {
     level: getLabelHeadingLevel(h4Tag)
   });
+});
+test('renders Accordion component with slot', function () {
+  getComponentWithSlot({
+    slots: {
+      postHeading: ___EmotionJSX(HelpHint, {
+        "data-testid": "helpHint"
+      }, "Text of the popover right here...")
+    }
+  });
+  expect(screen.getByTestId('helpHint')).toBeInTheDocument();
 });

package/lib/components/AccordionItem/AccordionItem.js

@@ -20,6 +20,7 @@ import { hoveredState } from '../AccordionGroup/Accordion.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var validHeadingTags = ['h1', 'h2', 'h3', 'h4'];
 var AccordionItem = function AccordionItem(props) {
+  var _item$props$slots, _item$props$slots2;
   var className = props.className,
     item = props.item,
     labelHeadingTag = props.labelHeadingTag;
@@ -70,7 +71,9 @@ var AccordionItem = function AccordionItem(props) {
   return ___EmotionJSX(Box, _extends({
     variant: "accordion.accordion",
     className: itemClasses
-  }, others, containerProps), ___EmotionJSX(ThemeUIButton, _extends({
+  }, others, containerProps), ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(ThemeUIButton, _extends({
     "aria-label": ariaLabel,
     ref: buttonRef,
     sx: {
@@ -93,7 +96,7 @@ var AccordionItem = function AccordionItem(props) {
     title: {
       name: isOpen ? 'Menu Up Icon' : 'Menu Down Icon'
     }
-  }))), isOpen && ___EmotionJSX(Box, _extends({
+  }))), ((_item$props$slots = item.props.slots) === null || _item$props$slots === void 0 ? void 0 : _item$props$slots.postHeading) && ((_item$props$slots2 = item.props.slots) === null || _item$props$slots2 === void 0 ? void 0 : _item$props$slots2.postHeading)), isOpen && ___EmotionJSX(Box, _extends({
     variant: "accordion.body"
   }, accordionRegionProps, regionProps, {
     className: itemClasses

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.46.0-alpha.4",
+  "version": "2.46.0-alpha.5",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",