@pingux/astro 2.28.0-alpha.1 → 2.28.0-alpha.11

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/PanelHeader/PanelHeader.stories.js

@@ -12,6 +12,7 @@ var _react = _interopRequireDefault(require("react"));
 var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
+var _figmaLinks = require("../../utils/designUtils/figmaLinks.js");
 var _images = require("../../utils/devUtils/constants/images");
 var _listViewItemAttributes = require("../ListViewItem/listViewItemAttributes");
 var _PanelHeader = _interopRequireDefault(require("./PanelHeader.mdx"));
@@ -42,6 +43,12 @@ var Default = function Default(_ref) {
   }));
 };
 exports.Default = Default;
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.panelHeader["default"]
+  }
+};
 var WithSubtext = function WithSubtext(_ref2) {
   var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref2), _ref2));
   return (0, _react2.jsx)(_index.PanelHeader, (0, _extends2["default"])({}, args, {
@@ -53,6 +60,12 @@ var WithSubtext = function WithSubtext(_ref2) {
   }));
 };
 exports.WithSubtext = WithSubtext;
+WithSubtext.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.panelHeader.withSubtext
+  }
+};
 var WithControls = function WithControls(_ref3) {
   var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref3), _ref3));
   return (0, _react2.jsx)(_index.PanelHeader, (0, _extends2["default"])({}, args, {
@@ -70,6 +83,12 @@ var WithControls = function WithControls(_ref3) {
   }, "Delete user")), (0, _react2.jsx)(_index.PanelHeaderCloseButton, null));
 };
 exports.WithControls = WithControls;
+WithControls.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.panelHeader.withControls
+  }
+};
 var WithImage = function WithImage() {
   return (0, _react2.jsx)(_index.PanelHeader, {
     data: {
@@ -83,6 +102,12 @@ var WithImage = function WithImage() {
   });
 };
 exports.WithImage = WithImage;
+WithImage.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.panelHeader.withImage
+  }
+};
 var WithExtraLongText = function WithExtraLongText(_ref4) {
   var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref4), _ref4));
   return (0, _react2.jsx)(_index.PanelHeader, (0, _extends2["default"])({}, args, {
@@ -99,4 +124,10 @@ var WithExtraLongText = function WithExtraLongText(_ref4) {
     key: "delete"
   }, "Delete user")), (0, _react2.jsx)(_index.PanelHeaderCloseButton, null));
 };
-exports.WithExtraLongText = WithExtraLongText;
+exports.WithExtraLongText = WithExtraLongText;
+WithExtraLongText.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.panelHeader.withExtraLongText
+  }
+};

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/recipes/TrialExperienceStatusBar.stories.js

@@ -14,6 +14,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/hel
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _CheckCircleIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckCircleIcon"));
+var _uuid = require("uuid");
 var _index = require("../index");
 var _figmaLinks = require("../utils/designUtils/figmaLinks.js");
 var _react2 = require("@emotion/react");
@@ -67,13 +68,14 @@ var EarthCircleIcon = function EarthCircleIcon() {
   }));
 };
 var RadioButtonIcon = function RadioButtonIcon(props) {
+  var id = (0, _uuid.v4)();
   return (0, _react2.jsx)("svg", (0, _extends2["default"])({
     viewBox: "0 0 22 22",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "aria-labelledby": "radio-button-icon-title"
+    "aria-labelledby": "radio-button-icon-title-".concat(id)
   }, props), (0, _react2.jsx)("title", {
-    id: "radio-button-icon-title"
+    id: "radio-button-icon-title-".concat(id)
   }, "Radio Button Icon"), (0, _react2.jsx)("path", {
     d: "M11 18.3333C9.05508 18.3333 7.18982 17.5607 5.81455 16.1854C4.43928 14.8102 3.66667 12.9449 3.66667 11C3.66667 9.05507 4.43928 7.18981 5.81455 5.81455C7.18982 4.43928 9.05508 3.66666 11 3.66666C12.9449 3.66666 14.8102 4.43928 16.1854 5.81455C17.5607 7.18981 18.3333 9.05507 18.3333 11C18.3333 12.9449 17.5607 14.8102 16.1854 16.1854C14.8102 17.5607 12.9449 18.3333 11 18.3333ZM11 1.83333C9.79621 1.83333 8.60422 2.07043 7.49207 2.5311C6.37992 2.99177 5.36939 3.66698 4.51819 4.51818C2.7991 6.23727 1.83333 8.56884 1.83333 11C1.83333 13.4311 2.7991 15.7627 4.51819 17.4818C5.36939 18.333 6.37992 19.0082 7.49207 19.4689C8.60422 19.9296 9.79621 20.1667 11 20.1667C13.4311 20.1667 15.7627 19.2009 17.4818 17.4818C19.2009 15.7627 20.1667 13.4311 20.1667 11C20.1667 9.79621 19.9296 8.60421 19.4689 7.49206C19.0082 6.37991 18.333 5.36939 17.4818 4.51818C16.6306 3.66698 15.6201 2.99177 14.5079 2.5311C13.3958 2.07043 12.2038 1.83333 11 1.83333Z",
     fill: "#B3BEE8"

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: {
@@ -103,6 +104,13 @@ var FIGMA_LINKS = {
   OnewayToBidirectionalArrow: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=43504-1214&mode=design&t=R4kdj0liRHxsqbV5-0'
   },
+  panelHeader: {
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44688%3A39612&mode=dev',
+    withSubtext: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44688%3A39651&mode=dev',
+    withControls: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44688%3A39662&mode=dev',
+    withImage: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44688%3A39682&mode=dev',
+    withExtraLongText: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44688%3A39713&mode=dev'
+  },
   popoverMenu: {
     "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=0%3A3073&t=We3h7LaaFJQnxdSy-1'
   },

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/PanelHeader/PanelHeader.stories.js

@@ -4,6 +4,7 @@ import React from 'react';
 import AccountIcon from '@pingux/mdi-react/AccountIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Item, PanelHeader, PanelHeaderCloseButton, PanelHeaderMenu, PanelHeaderSwitchField } from '../../index';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.js';
 import { pingImg } from '../../utils/devUtils/constants/images';
 import { SharedItemArgTypes } from '../ListViewItem/listViewItemAttributes';
 import PanelHeaderReadMe from './PanelHeader.mdx';
@@ -32,6 +33,12 @@ export var Default = function Default(_ref) {
     }
   }));
 };
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.panelHeader["default"]
+  }
+};
 export var WithSubtext = function WithSubtext(_ref2) {
   var args = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
   return ___EmotionJSX(PanelHeader, _extends({}, args, {
@@ -42,6 +49,12 @@ export var WithSubtext = function WithSubtext(_ref2) {
     }
   }));
 };
+WithSubtext.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.panelHeader.withSubtext
+  }
+};
 export var WithControls = function WithControls(_ref3) {
   var args = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
   return ___EmotionJSX(PanelHeader, _extends({}, args, {
@@ -58,6 +71,12 @@ export var WithControls = function WithControls(_ref3) {
     key: "delete"
   }, "Delete user")), ___EmotionJSX(PanelHeaderCloseButton, null));
 };
+WithControls.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.panelHeader.withControls
+  }
+};
 export var WithImage = function WithImage() {
   return ___EmotionJSX(PanelHeader, {
     data: {
@@ -70,6 +89,12 @@ export var WithImage = function WithImage() {
     }
   });
 };
+WithImage.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.panelHeader.withImage
+  }
+};
 export var WithExtraLongText = function WithExtraLongText(_ref4) {
   var args = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
   return ___EmotionJSX(PanelHeader, _extends({}, args, {
@@ -85,4 +110,10 @@ export var WithExtraLongText = function WithExtraLongText(_ref4) {
   }, "Disable user"), ___EmotionJSX(Item, {
     key: "delete"
   }, "Delete user")), ___EmotionJSX(PanelHeaderCloseButton, null));
+};
+WithExtraLongText.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.panelHeader.withExtraLongText
+  }
 };

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/recipes/TrialExperienceStatusBar.stories.js

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { useState } from 'react';
 import CheckCircleIcon from '@pingux/mdi-react/CheckCircleIcon';
+import { v4 as uuid } from 'uuid';
 import { Box, Icon, IconButton, Link, Separator, Text } from '../index';
 import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks.js';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -53,13 +54,14 @@ var EarthCircleIcon = function EarthCircleIcon() {
   }));
 };
 var RadioButtonIcon = function RadioButtonIcon(props) {
+  var id = uuid();
   return ___EmotionJSX("svg", _extends({
     viewBox: "0 0 22 22",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
-    "aria-labelledby": "radio-button-icon-title"
+    "aria-labelledby": "radio-button-icon-title-".concat(id)
   }, props), ___EmotionJSX("title", {
-    id: "radio-button-icon-title"
+    id: "radio-button-icon-title-".concat(id)
   }, "Radio Button Icon"), ___EmotionJSX("path", {
     d: "M11 18.3333C9.05508 18.3333 7.18982 17.5607 5.81455 16.1854C4.43928 14.8102 3.66667 12.9449 3.66667 11C3.66667 9.05507 4.43928 7.18981 5.81455 5.81455C7.18982 4.43928 9.05508 3.66666 11 3.66666C12.9449 3.66666 14.8102 4.43928 16.1854 5.81455C17.5607 7.18981 18.3333 9.05507 18.3333 11C18.3333 12.9449 17.5607 14.8102 16.1854 16.1854C14.8102 17.5607 12.9449 18.3333 11 18.3333ZM11 1.83333C9.79621 1.83333 8.60422 2.07043 7.49207 2.5311C6.37992 2.99177 5.36939 3.66698 4.51819 4.51818C2.7991 6.23727 1.83333 8.56884 1.83333 11C1.83333 13.4311 2.7991 15.7627 4.51819 17.4818C5.36939 18.333 6.37992 19.0082 7.49207 19.4689C8.60422 19.9296 9.79621 20.1667 11 20.1667C13.4311 20.1667 15.7627 19.2009 17.4818 17.4818C19.2009 15.7627 20.1667 13.4311 20.1667 11C20.1667 9.79621 19.9296 8.60421 19.4689 7.49206C19.0082 6.37991 18.333 5.36939 17.4818 4.51818C16.6306 3.66698 15.6201 2.99177 14.5079 2.5311C13.3958 2.07043 12.2038 1.83333 11 1.83333Z",
     fill: "#B3BEE8"

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: {
@@ -96,6 +97,13 @@ export var FIGMA_LINKS = {
   OnewayToBidirectionalArrow: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=43504-1214&mode=design&t=R4kdj0liRHxsqbV5-0'
   },
+  panelHeader: {
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=44688%3A39612&mode=dev',
+    withSubtext: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44688%3A39651&mode=dev',
+    withControls: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44688%3A39662&mode=dev',
+    withImage: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44688%3A39682&mode=dev',
+    withExtraLongText: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44688%3A39713&mode=dev'
+  },
   popoverMenu: {
     "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=0%3A3073&t=We3h7LaaFJQnxdSy-1'
   },

package/package.json

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