@pingux/astro 2.25.0 → 2.26.0-alpha.1

package/lib/cjs/components/AccordionGroup/Accordion.styles.js

@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.hoveredState = exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _Buttons = require("../Button/Buttons.styles");
 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; }
@@ -44,6 +44,12 @@ var body = {
     display: 'flex'
   }
 };
+var hoveredState = {
+  '&.is-hovered': {
+    color: 'active'
+  }
+};
+exports.hoveredState = hoveredState;
 var header = _objectSpread(_objectSpread({}, _Buttons.base), {}, {
   display: 'inline-flex',
   bg: 'transparent',
@@ -51,14 +57,11 @@ var header = _objectSpread(_objectSpread({}, _Buttons.base), {}, {
   padding: '0 5px',
   flexGrow: 0,
   fontWeight: 700,
-  '&.is-hovered': {
-    color: 'active'
-  },
   '&.is-pressed': {
     color: 'accent.20'
   },
   '&.is-focused': _objectSpread({}, _Buttons.defaultFocus)
-});
+}, hoveredState);
 var _default = {
   title: title,
   accordion: accordion,

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

@@ -30,7 +30,7 @@ var _index = require("../../index");
 var _isIterable = require("../../utils/devUtils/props/isIterable");
 var _AccordionItem = _interopRequireDefault(require("../AccordionItem"));
 var _react2 = require("@emotion/react");
-var _excluded = ["defaultExpandedKeys", "expandedKeys", "onExpandedChange"],
+var _excluded = ["defaultExpandedKeys", "expandedKeys", "labelHeadingTag", "onExpandedChange"],
   _excluded2 = ["onFocus"];
 /**
  * Console Warning: "Cannot update a component (`Unknown`)...`"
@@ -45,6 +45,7 @@ var AccordionGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _context;
   var defaultExpandedKeys = props.defaultExpandedKeys,
     expandedKeys = props.expandedKeys,
+    labelHeadingTag = props.labelHeadingTag,
     onExpandedChange = props.onExpandedChange,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var state = (0, _reactStately.useTreeState)(props);
@@ -71,9 +72,10 @@ var AccordionGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: accordionRef
   }, (0, _utils.mergeProps)(theseProps, others)), (0, _map["default"])(_context = (0, _from["default"])(state.collection)).call(_context, function (item) {
     return (0, _react2.jsx)(_AccordionItem["default"], {
-      key: item.key,
+      "data-id": item['data-id'],
       item: item,
-      "data-id": item['data-id']
+      key: item.key,
+      labelHeadingTag: labelHeadingTag
     }, item.props.children);
   })));
 });
@@ -92,7 +94,9 @@ AccordionGroup.propTypes = {
   /** The initial expanded keys in the collection (uncontrolled). */
   defaultExpandedKeys: _isIterable.isIterableProp,
   /** Id of the selected element */
-  id: _propTypes["default"].string
+  id: _propTypes["default"].string,
+  /** HTML header element wrapping the label */
+  labelHeadingTag: _AccordionItem["default"].propTypes.labelHeadingTag
 };
 AccordionGroup.displayName = 'AccordionGroup';
 var _default = AccordionGroup;

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

@@ -8,14 +8,16 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.UncontrolledExpanded = exports.Multiple = exports.DisabledItems = exports.Default = exports.CustomPresentation = exports.ControlledExpanded = void 0;
+exports["default"] = exports.UncontrolledExpanded = exports.Multiple = exports.DisabledItems = 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"));
 var _reactStately = require("react-stately");
 var _storybookAddonDesigns = require("storybook-addon-designs");
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
 var _index = require("../../index");
 var _figmaLinks = require("../../utils/designUtils/figmaLinks.js");
+var _AccordionItem = require("../AccordionItem/AccordionItem");
 var _AccordionGroup = _interopRequireDefault(require("./AccordionGroup.mdx"));
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -86,12 +88,18 @@ var _default = {
       control: {
         type: 'none'
       }
+    },
+    labelHeadingTag: {
+      control: 'radio',
+      options: _AccordionItem.validHeadingTags
     }
   }
 };
 exports["default"] = _default;
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_index.AccordionGroup, args, (0, _react2.jsx)(_reactStately.Item, {
+  return (0, _react2.jsx)(_index.AccordionGroup, (0, _extends2["default"])({
+    labelHeadingTag: "h3"
+  }, args), (0, _react2.jsx)(_reactStately.Item, {
     key: "accordionKey",
     textValue: "accordionKey",
     label: "Accordion Label",
@@ -105,6 +113,30 @@ Default.parameters = {
     url: _figmaLinks.FIGMA_LINKS.accordionGroup["default"]
   }
 };
+var DifferentLevels = function DifferentLevels() {
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.AccordionGroup, {
+    labelHeadingTag: "h3"
+  }, (0, _react2.jsx)(_reactStately.Item, {
+    key: "accordionLabelH3Key",
+    textValue: "accordionLabelH3Key",
+    label: "Accordion Label H3",
+    "data-id": "accordionItem"
+  }, (0, _react2.jsx)(_index.Text, null, "Render me!"))), (0, _react2.jsx)(_index.AccordionGroup, {
+    labelHeadingTag: "h2"
+  }, (0, _react2.jsx)(_reactStately.Item, {
+    key: "accordionLabelH2Key",
+    textValue: "accordionLabelH2Key",
+    label: "Accordion Label H2",
+    "data-id": "accordionItem"
+  }, (0, _react2.jsx)(_index.Text, null, "Render me!"))));
+};
+exports.DifferentLevels = DifferentLevels;
+DifferentLevels.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.accordionGroup.differentLevels
+  }
+};
 var Multiple = function Multiple() {
   return (
     /*
@@ -115,7 +147,8 @@ var Multiple = function Multiple() {
      * ];
      */
     (0, _react2.jsx)(_index.AccordionGroup, {
-      items: itemArray
+      items: itemArray,
+      labelHeadingTag: "h3"
     }, function (item) {
       return (0, _react2.jsx)(_reactStately.Item, {
         key: item.key,
@@ -146,7 +179,8 @@ var ControlledExpanded = function ControlledExpanded() {
     (0, _react2.jsx)(_index.AccordionGroup, {
       onExpandedChange: setExpandedKeys,
       expandedKeys: expandedKeys,
-      items: itemArray
+      items: itemArray,
+      labelHeadingTag: "h3"
     }, function (item) {
       return (0, _react2.jsx)(_reactStately.Item, {
         key: item.key,
@@ -168,7 +202,8 @@ var UncontrolledExpanded = function UncontrolledExpanded() {
      */
     (0, _react2.jsx)(_index.AccordionGroup, {
       defaultExpandedKeys: ['t1'],
-      items: itemArray
+      items: itemArray,
+      labelHeadingTag: "h3"
     }, function (item) {
       return (0, _react2.jsx)(_reactStately.Item, {
         key: item.key,
@@ -190,7 +225,8 @@ var DisabledItems = function DisabledItems() {
      */
     (0, _react2.jsx)(_index.AccordionGroup, {
       disabledKeys: ['t1', 't3'],
-      items: itemArrayDisabled
+      items: itemArrayDisabled,
+      labelHeadingTag: "h3"
     }, function (item) {
       return (0, _react2.jsx)(_reactStately.Item, {
         key: item.key,
@@ -211,7 +247,8 @@ var CustomPresentation = function CustomPresentation() {
       ];
      */
     (0, _react2.jsx)(_index.AccordionGroup, {
-      items: itemArrayDisabled
+      items: itemArrayDisabled,
+      labelHeadingTag: "h3"
     }, function (item) {
       return (0, _react2.jsx)(_reactStately.Item, {
         key: item.key,

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

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
@@ -9,6 +10,7 @@ var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 var _index = require("../../index");
 var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 var _testWrapper = require("../../utils/testUtils/testWrapper");
+var _AccordionItem = require("../AccordionItem/AccordionItem");
 var _Text = _interopRequireDefault(require("../Text"));
 var _ = _interopRequireDefault(require("."));
 var _react2 = require("@emotion/react");
@@ -353,4 +355,54 @@ test('accordion works if there are multiple, controlled on the same implementati
   expect(secondSelectedItem).toHaveAttribute('aria-expanded', 'true');
   _userEvent["default"].click(secondSelectedItem);
   expect(secondSelectedItem).toHaveAttribute('aria-expanded', 'false');
+});
+
+// get the last char of heading tag and convert to number, 'h1' => 1
+var getLabelHeadingLevel = function getLabelHeadingLevel(labelHeading) {
+  return Number((0, _slice["default"])(labelHeading).call(labelHeading, -1));
+};
+test('when labelHeadingTag is h1, the label is rendered as an h1 tag', function () {
+  var h1Tag = _AccordionItem.validHeadingTags[0];
+  getComponent({
+    labelHeadingTag: h1Tag
+  });
+  _testWrapper.screen.getAllByRole('heading', {
+    level: getLabelHeadingLevel(h1Tag)
+  });
+});
+test('when labelHeadingTag is h2, the label is rendered as an h2 tag', function () {
+  var h2Tag = _AccordionItem.validHeadingTags[1];
+  getComponent({
+    labelHeadingTag: h2Tag
+  });
+  _testWrapper.screen.getAllByRole('heading', {
+    level: getLabelHeadingLevel(h2Tag)
+  });
+});
+test('when labelHeadingTag is h3, the label is rendered as an h3 tag', function () {
+  var h3Tag = _AccordionItem.validHeadingTags[2];
+  getComponent({
+    labelHeadingTag: h3Tag
+  });
+  _testWrapper.screen.getAllByRole('heading', {
+    level: getLabelHeadingLevel(h3Tag)
+  });
+});
+test('when labelHeadingTag is h4, the label is rendered as an h4 tag', function () {
+  var h4Tag = _AccordionItem.validHeadingTags[3];
+  getComponent({
+    labelHeadingTag: h4Tag
+  });
+  _testWrapper.screen.getAllByRole('heading', {
+    level: getLabelHeadingLevel(h4Tag)
+  });
+});
+test('when labelHeadingTag is uppercase, the label is rendered', function () {
+  var h4Tag = _AccordionItem.validHeadingTags[3].toUpperCase();
+  getComponent({
+    labelHeadingTag: h4Tag
+  });
+  _testWrapper.screen.getAllByRole('heading', {
+    level: getLabelHeadingLevel(h4Tag)
+  });
 });

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

@@ -8,7 +8,10 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.validHeadingTags = exports["default"] = void 0;
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
@@ -23,13 +26,18 @@ var _themeUi = require("theme-ui");
 var _AccordionContext = require("../../context/AccordionContext");
 var _hooks = require("../../hooks");
 var _index = require("../../index");
+var _Accordion = require("../AccordionGroup/Accordion.styles");
 var _react2 = require("@emotion/react");
+var _context;
 var _excluded = ["label", "children", "textValue", "containerProps", "buttonProps", "regionProps"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var validHeadingTags = ['h1', 'h2', 'h3', 'h4'];
+exports.validHeadingTags = validHeadingTags;
 var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var className = props.className,
-    item = props.item;
+    item = props.item,
+    labelHeadingTag = props.labelHeadingTag;
   var _item$props = item.props,
     label = _item$props.label,
     children = _item$props.children,
@@ -75,6 +83,8 @@ var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }),
     buttonClasses = _useStatusClasses2.classNames;
   var ariaLabel = props['aria-label'] || item.props.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"])({
     variant: "accordion.accordion",
     className: itemClasses
@@ -89,8 +99,10 @@ var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     variant: "variants.accordion.header",
     className: buttonClasses
   }, (0, _reactAria.mergeProps)(hoverProps, accordionButtonProps, raButtonProps, buttonProps, focusProps)), (0, _react2.jsx)(_index.Text, {
+    as: validLabelHeadingTag,
     className: buttonClasses,
-    variant: "accordion.title"
+    variant: validLabelHeadingTag,
+    sx: _Accordion.hoveredState
   }, item.props.label), (0, _react2.jsx)(_index.Box, {
     as: "span",
     ml: "5px"
@@ -107,6 +119,9 @@ var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
 });
 AccordionItem.propTypes = {
   'aria-label': _propTypes["default"].string,
+  labelHeadingTag: _propTypes["default"].oneOf((0, _concat["default"])(_context = []).call(_context, validHeadingTags, (0, _map["default"])(validHeadingTags).call(validHeadingTags, function (heading) {
+    return heading.toUpperCase();
+  }))),
   item: _propTypes["default"].shape({
     key: _propTypes["default"].string,
     rendered: _propTypes["default"].node,

package/lib/cjs/components/ColorField/ColorField.js

@@ -127,7 +127,7 @@ var ColorField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     restoreFocus: true,
     contain: true,
     autoFocus: true
-  }, (0, _react2.jsx)(_reactColor.ChromePicker, {
+  }, (0, _react2.jsx)(_reactColor.SketchPicker, {
     color: getRgbaFromState(state),
     onChange: handleColorChange
   }))));

package/lib/cjs/components/ColorField/ColorField.mdx

@@ -29,10 +29,11 @@ These keys provide additional functionality to the component.
 | Shift + Tab | Moves focus to the previous focusable component. |
 | Space or Enter | Opens the color swatch when it is focused. Once opened, the focus moves to the input field and is locked inside the ColorPicker Overlay. |
 | Esc | When the picker is open, pressing the escape key closes the overlay and focuses on the previously focused component. |
+| Up and Down Arrows | Using the up and down arrows on any of the RGBA inputs adjusts the value of the input in focus.
 
 #### Screen Readers
 
 This component uses the following attributes to assist screen readers:
-- The trigger button uses the **`aria-expanded`** attribute to indicate the expansion and collapse of Chrome Picker.
-- When expanded, **`aria-controls`** is added to the button pointing to the Chrome Picker.
+- The trigger button uses the **`aria-expanded`** attribute to indicate the expansion and collapse of Sketch Picker.
+- When expanded, **`aria-controls`** is added to the button pointing to the Sketch Picker.
 - The visibly hidden input uses the **`aria-labelledby`** attribute supplied with label ID.