@pingux/astro 2.28.0-alpha.0 → 2.28.0-alpha.10

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

@@ -13,6 +13,8 @@ Accordions should be used:
 
 Accordions should not have focusable items as children.
 
+AccordianItem labels should not include interactive elements.
+
 It is built on React Aria [useAccordion](https://reactspectrum.blob.core.windows.net/reactspectrum/d77b35e970e5549f66b47a83f07423f5c93b7297/docs/react-aria/useAccordion.html).
 
 ### Required components

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.DisabledItems = 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 = 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"));
@@ -41,16 +41,16 @@ var itemArray = [{
 }];
 var itemArrayDisabled = [{
   key: 't1',
-  label: 'Disabled Accordion',
+  label: 'Accordion Disabled',
   children: (0, _react2.jsx)(_index.Text, null, "Hi")
 }, {
   key: 't2',
-  label: 'Accordion',
-  children: 'Child Renders Here'
+  label: 'Accordion Active',
+  children: (0, _react2.jsx)(_index.Text, null, "Hi")
 }, {
   key: 't3',
-  label: 'Disabled Accordion',
-  children: 'Child Renders Here'
+  label: 'Accordion Disabled',
+  children: (0, _react2.jsx)(_index.Text, null, "Hi")
 }];
 var _default = {
   title: 'Components/AccordionGroup',
@@ -214,13 +214,13 @@ var UncontrolledExpanded = function UncontrolledExpanded() {
   );
 };
 exports.UncontrolledExpanded = UncontrolledExpanded;
-var DisabledItems = function DisabledItems() {
+var DisabledState = function DisabledState() {
   return (
     /*
       itemArrayDisabled = [
-        { key: 't1', label: 'Disabled Accordion', children: <Text>Hi</Text> },
-        { key: 't2', label: 'Accordion', children: 'Child Renders Here' },
-        { key: 't3', label: 'Disabled Accordion', children: 'Child Renders Here' },
+        { key: 't1', label: 'Accordion Disabled', children: <Text>Hi</Text> },
+        { key: 't2', label: 'Accordion Active', children: <Text>Hi</Text> },
+        { key: 't3', label: 'Accordion Disabled', children: <Text>Hi</Text> },
       ];
      */
     (0, _react2.jsx)(_index.AccordionGroup, {
@@ -236,7 +236,13 @@ var DisabledItems = function DisabledItems() {
     })
   );
 };
-exports.DisabledItems = DisabledItems;
+exports.DisabledState = DisabledState;
+DisabledState.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.accordionGroup.disabledState
+  }
+};
 var CustomPresentation = function CustomPresentation() {
   return (
     /*
@@ -274,4 +280,27 @@ CustomPresentation.parameters = {
       story: 'In addition to customizing the theme, prop objects can be passed to certain elements. This allows for simple customization in a pinch. See the source code below for an example.'
     }
   }
-};
+};
+var LabelWithBadge = function LabelWithBadge(args) {
+  return (0, _react2.jsx)(_index.AccordionGroup, (0, _extends2["default"])({}, args, {
+    labelHeadingTag: "h4"
+  }), (0, _react2.jsx)(_reactStately.Item, {
+    key: "accordionKey",
+    textValue: "accordionKey",
+    label: (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      alignItems: "center"
+    }, "Accordion Label", (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      gap: "5px",
+      ml: "5px"
+    }, (0, _react2.jsx)(_index.Badge, {
+      label: "Label",
+      sx: {
+        height: '21px'
+      }
+    }))),
+    "data-id": "accordionItem"
+  }, (0, _react2.jsx)(_index.Text, null, "Render me!")));
+};
+exports.LabelWithBadge = LabelWithBadge;

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

@@ -82,7 +82,7 @@ var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       isPressed: isPressed
     }),
     buttonClasses = _useStatusClasses2.classNames;
-  var ariaLabel = props['aria-label'] || item.props.label;
+  var ariaLabel = props['aria-label'];
   var isValidHeadingTag = (0, _includes["default"])(validHeadingTags).call(validHeadingTags, labelHeadingTag === null || labelHeadingTag === void 0 ? void 0 : labelHeadingTag.toLowerCase());
   var validLabelHeadingTag = isValidHeadingTag ? labelHeadingTag === null || labelHeadingTag === void 0 ? void 0 : labelHeadingTag.toLowerCase() : 'span';
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
@@ -126,7 +126,7 @@ AccordionItem.propTypes = {
     key: _propTypes["default"].string,
     rendered: _propTypes["default"].node,
     props: _propTypes["default"].shape({
-      label: _propTypes["default"].string,
+      label: _propTypes["default"].node,
       children: _propTypes["default"].node,
       textValue: _propTypes["default"].string,
       containerProps: _propTypes["default"].shape({}),

package/lib/cjs/components/ComboBox/ComboBoxInput.js

@@ -125,6 +125,7 @@ var ComboBoxInput = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     tabIndex: -1
   }), (0, _react2.jsx)(_.Icon, {
     icon: _MenuDownIcon["default"],
+    size: "md",
     sx: isOpen ? {
       transform: 'rotate(180deg)'
     } : null,

package/lib/cjs/components/SelectFieldBase/SelectFieldBase.js

@@ -98,6 +98,7 @@ var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     title: {
       name: 'Menu down'
     },
+    size: "md",
     sx: state.isOpen ? {
       transform: 'rotate(180deg)'
     } : null

package/lib/cjs/recipes/ConditionFilter.stories.js

@@ -24,7 +24,21 @@ var _react2 = require("@emotion/react");
 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 _default = {
-  title: 'Recipes/Condition Filter'
+  title: 'Recipes/Condition Filter',
+  parameters: {
+    a11y: {
+      config: {
+        /** The "color-contrast" test ends with an "incomplete" status
+         * since pseudo-element applies to the same container as selected values.
+         * A workaround to disable "color-contrast" incomplete tests.
+         */
+        rules: [{
+          id: 'color-contrast',
+          enabled: false
+        }]
+      }
+    }
+  }
 };
 exports["default"] = _default;
 var borderBox = {

package/lib/cjs/utils/designUtils/figmaLinks.js

@@ -8,6 +8,7 @@ exports.FIGMA_LINKS = void 0;
 var FIGMA_LINKS = {
   accordionGroup: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=446-1808&t=8Wwd3tIBh3GEjCJB-0',
+    disabledState: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=43917%3A31554&mode=dev',
     differentLevels: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=446%3A1949&mode=dev'
   },
   attributeMappings: {

package/lib/components/AccordionGroup/AccordionGroup.mdx

@@ -13,6 +13,8 @@ Accordions should be used:
 
 Accordions should not have focusable items as children.
 
+AccordianItem labels should not include interactive elements.
+
 It is built on React Aria [useAccordion](https://reactspectrum.blob.core.windows.net/reactspectrum/d77b35e970e5549f66b47a83f07423f5c93b7297/docs/react-aria/useAccordion.html).
 
 ### Required components

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, Button, Text, TextField } from '../../index';
+import { AccordionGroup, Badge, Box, Button, Text, TextField } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.js';
 import { validHeadingTags } from '../AccordionItem/AccordionItem';
 import AccordionReadme from './AccordionGroup.mdx';
@@ -28,16 +28,16 @@ var itemArray = [{
 }];
 var itemArrayDisabled = [{
   key: 't1',
-  label: 'Disabled Accordion',
+  label: 'Accordion Disabled',
   children: ___EmotionJSX(Text, null, "Hi")
 }, {
   key: 't2',
-  label: 'Accordion',
-  children: 'Child Renders Here'
+  label: 'Accordion Active',
+  children: ___EmotionJSX(Text, null, "Hi")
 }, {
   key: 't3',
-  label: 'Disabled Accordion',
-  children: 'Child Renders Here'
+  label: 'Accordion Disabled',
+  children: ___EmotionJSX(Text, null, "Hi")
 }];
 export default {
   title: 'Components/AccordionGroup',
@@ -195,13 +195,13 @@ export var UncontrolledExpanded = function UncontrolledExpanded() {
     })
   );
 };
-export var DisabledItems = function DisabledItems() {
+export var DisabledState = function DisabledState() {
   return (
     /*
       itemArrayDisabled = [
-        { key: 't1', label: 'Disabled Accordion', children: <Text>Hi</Text> },
-        { key: 't2', label: 'Accordion', children: 'Child Renders Here' },
-        { key: 't3', label: 'Disabled Accordion', children: 'Child Renders Here' },
+        { key: 't1', label: 'Accordion Disabled', children: <Text>Hi</Text> },
+        { key: 't2', label: 'Accordion Active', children: <Text>Hi</Text> },
+        { key: 't3', label: 'Accordion Disabled', children: <Text>Hi</Text> },
       ];
      */
     ___EmotionJSX(AccordionGroup, {
@@ -217,6 +217,12 @@ export var DisabledItems = function DisabledItems() {
     })
   );
 };
+DisabledState.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.accordionGroup.disabledState
+  }
+};
 export var CustomPresentation = function CustomPresentation() {
   return (
     /*
@@ -253,4 +259,26 @@ CustomPresentation.parameters = {
       story: 'In addition to customizing the theme, prop objects can be passed to certain elements. This allows for simple customization in a pinch. See the source code below for an example.'
     }
   }
+};
+export var LabelWithBadge = function LabelWithBadge(args) {
+  return ___EmotionJSX(AccordionGroup, _extends({}, args, {
+    labelHeadingTag: "h4"
+  }), ___EmotionJSX(Item, {
+    key: "accordionKey",
+    textValue: "accordionKey",
+    label: ___EmotionJSX(Box, {
+      isRow: true,
+      alignItems: "center"
+    }, "Accordion Label", ___EmotionJSX(Box, {
+      isRow: true,
+      gap: "5px",
+      ml: "5px"
+    }, ___EmotionJSX(Badge, {
+      label: "Label",
+      sx: {
+        height: '21px'
+      }
+    }))),
+    "data-id": "accordionItem"
+  }, ___EmotionJSX(Text, null, "Render me!")));
 };

package/lib/components/AccordionItem/AccordionItem.js

@@ -68,7 +68,7 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
       isPressed: isPressed
     }),
     buttonClasses = _useStatusClasses2.classNames;
-  var ariaLabel = props['aria-label'] || item.props.label;
+  var ariaLabel = props['aria-label'];
   var isValidHeadingTag = _includesInstanceProperty(validHeadingTags).call(validHeadingTags, labelHeadingTag === null || labelHeadingTag === void 0 ? void 0 : labelHeadingTag.toLowerCase());
   var validLabelHeadingTag = isValidHeadingTag ? labelHeadingTag === null || labelHeadingTag === void 0 ? void 0 : labelHeadingTag.toLowerCase() : 'span';
   return ___EmotionJSX(Box, _extends({
@@ -112,7 +112,7 @@ AccordionItem.propTypes = {
     key: PropTypes.string,
     rendered: PropTypes.node,
     props: PropTypes.shape({
-      label: PropTypes.string,
+      label: PropTypes.node,
       children: PropTypes.node,
       textValue: PropTypes.string,
       containerProps: PropTypes.shape({}),

package/lib/components/ComboBox/ComboBoxInput.js

@@ -114,6 +114,7 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
     tabIndex: -1
   }), ___EmotionJSX(Icon, {
     icon: MenuDown,
+    size: "md",
     sx: isOpen ? {
       transform: 'rotate(180deg)'
     } : null,

package/lib/components/SelectFieldBase/SelectFieldBase.js

@@ -88,6 +88,7 @@ var SelectFieldBase = /*#__PURE__*/forwardRef(function (_ref, ref) {
     title: {
       name: 'Menu down'
     },
+    size: "md",
     sx: state.isOpen ? {
       transform: 'rotate(180deg)'
     } : null

package/lib/recipes/ConditionFilter.stories.js

@@ -17,7 +17,21 @@ import { Badge, Box, Bracket, Button, Icon, IconButton, Item, RockerButton, Rock
 import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks.js';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
-  title: 'Recipes/Condition Filter'
+  title: 'Recipes/Condition Filter',
+  parameters: {
+    a11y: {
+      config: {
+        /** The "color-contrast" test ends with an "incomplete" status
+         * since pseudo-element applies to the same container as selected values.
+         * A workaround to disable "color-contrast" incomplete tests.
+         */
+        rules: [{
+          id: 'color-contrast',
+          enabled: false
+        }]
+      }
+    }
+  }
 };
 var borderBox = {
   borderColor: 'neutral.80',

package/lib/utils/designUtils/figmaLinks.js

@@ -1,6 +1,7 @@
 export var FIGMA_LINKS = {
   accordionGroup: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=446-1808&t=8Wwd3tIBh3GEjCJB-0',
+    disabledState: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=43917%3A31554&mode=dev',
     differentLevels: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=446%3A1949&mode=dev'
   },
   attributeMappings: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.28.0-alpha.0",
+  "version": "2.28.0-alpha.10",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",
@@ -114,6 +114,7 @@
   "devDependencies": {
     "@babel/cli": "^7.22.0",
     "@babel/core": "^7.22.0",
+    "@babel/eslint-parser": "^7.22.15",
     "@babel/plugin-transform-runtime": "7.13.9",
     "@babel/plugin-transform-spread": "^7.16.7",
     "@babel/preset-env": "^7.11.5",
@@ -143,7 +144,6 @@
     "@types/uuid": "^8.3.2",
     "@typescript-eslint/eslint-plugin": "^5.61.0",
     "@typescript-eslint/parser": "^5.61.0",
-    "babel-eslint": "^9.0.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-react-docgen": "^4.2.1",
     "babel-plugin-transform-node-env-inline": "^0.4.3",