@pingux/astro 2.25.0 → 2.26.0-alpha.1

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

@@ -1,10 +1,12 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 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 { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.js';
+import { validHeadingTags } from '../AccordionItem/AccordionItem';
 import AccordionReadme from './AccordionGroup.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var itemArray = [{
@@ -73,11 +75,17 @@ export default {
       control: {
         type: 'none'
       }
+    },
+    labelHeadingTag: {
+      control: 'radio',
+      options: validHeadingTags
     }
   }
 };
 export var Default = function Default(args) {
-  return ___EmotionJSX(AccordionGroup, args, ___EmotionJSX(Item, {
+  return ___EmotionJSX(AccordionGroup, _extends({
+    labelHeadingTag: "h3"
+  }, args), ___EmotionJSX(Item, {
     key: "accordionKey",
     textValue: "accordionKey",
     label: "Accordion Label",
@@ -90,6 +98,29 @@ Default.parameters = {
     url: FIGMA_LINKS.accordionGroup["default"]
   }
 };
+export var DifferentLevels = function DifferentLevels() {
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(AccordionGroup, {
+    labelHeadingTag: "h3"
+  }, ___EmotionJSX(Item, {
+    key: "accordionLabelH3Key",
+    textValue: "accordionLabelH3Key",
+    label: "Accordion Label H3",
+    "data-id": "accordionItem"
+  }, ___EmotionJSX(Text, null, "Render me!"))), ___EmotionJSX(AccordionGroup, {
+    labelHeadingTag: "h2"
+  }, ___EmotionJSX(Item, {
+    key: "accordionLabelH2Key",
+    textValue: "accordionLabelH2Key",
+    label: "Accordion Label H2",
+    "data-id": "accordionItem"
+  }, ___EmotionJSX(Text, null, "Render me!"))));
+};
+DifferentLevels.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.accordionGroup.differentLevels
+  }
+};
 export var Multiple = function Multiple() {
   return (
     /*
@@ -100,7 +131,8 @@ export var Multiple = function Multiple() {
      * ];
      */
     ___EmotionJSX(AccordionGroup, {
-      items: itemArray
+      items: itemArray,
+      labelHeadingTag: "h3"
     }, function (item) {
       return ___EmotionJSX(Item, {
         key: item.key,
@@ -130,7 +162,8 @@ export var ControlledExpanded = function ControlledExpanded() {
     ___EmotionJSX(AccordionGroup, {
       onExpandedChange: setExpandedKeys,
       expandedKeys: expandedKeys,
-      items: itemArray
+      items: itemArray,
+      labelHeadingTag: "h3"
     }, function (item) {
       return ___EmotionJSX(Item, {
         key: item.key,
@@ -151,7 +184,8 @@ export var UncontrolledExpanded = function UncontrolledExpanded() {
      */
     ___EmotionJSX(AccordionGroup, {
       defaultExpandedKeys: ['t1'],
-      items: itemArray
+      items: itemArray,
+      labelHeadingTag: "h3"
     }, function (item) {
       return ___EmotionJSX(Item, {
         key: item.key,
@@ -172,7 +206,8 @@ export var DisabledItems = function DisabledItems() {
      */
     ___EmotionJSX(AccordionGroup, {
       disabledKeys: ['t1', 't3'],
-      items: itemArrayDisabled
+      items: itemArrayDisabled,
+      labelHeadingTag: "h3"
     }, function (item) {
       return ___EmotionJSX(Item, {
         key: item.key,
@@ -192,7 +227,8 @@ export var CustomPresentation = function CustomPresentation() {
       ];
      */
     ___EmotionJSX(AccordionGroup, {
-      items: itemArrayDisabled
+      items: itemArrayDisabled,
+      labelHeadingTag: "h3"
     }, function (item) {
       return ___EmotionJSX(Item, {
         key: item.key,

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

@@ -1,11 +1,13 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 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 axeTest from '../../utils/testUtils/testAxe';
 import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
+import { validHeadingTags } from '../AccordionItem/AccordionItem';
 import Text from '../Text';
 import AccordionGroup from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -350,4 +352,54 @@ test('accordion works if there are multiple, controlled on the same implementati
   expect(secondSelectedItem).toHaveAttribute('aria-expanded', 'true');
   userEvent.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(_sliceInstanceProperty(labelHeading).call(labelHeading, -1));
+};
+test('when labelHeadingTag is h1, the label is rendered as an h1 tag', function () {
+  var h1Tag = validHeadingTags[0];
+  getComponent({
+    labelHeadingTag: h1Tag
+  });
+  screen.getAllByRole('heading', {
+    level: getLabelHeadingLevel(h1Tag)
+  });
+});
+test('when labelHeadingTag is h2, the label is rendered as an h2 tag', function () {
+  var h2Tag = validHeadingTags[1];
+  getComponent({
+    labelHeadingTag: h2Tag
+  });
+  screen.getAllByRole('heading', {
+    level: getLabelHeadingLevel(h2Tag)
+  });
+});
+test('when labelHeadingTag is h3, the label is rendered as an h3 tag', function () {
+  var h3Tag = validHeadingTags[2];
+  getComponent({
+    labelHeadingTag: h3Tag
+  });
+  screen.getAllByRole('heading', {
+    level: getLabelHeadingLevel(h3Tag)
+  });
+});
+test('when labelHeadingTag is h4, the label is rendered as an h4 tag', function () {
+  var h4Tag = validHeadingTags[3];
+  getComponent({
+    labelHeadingTag: h4Tag
+  });
+  screen.getAllByRole('heading', {
+    level: getLabelHeadingLevel(h4Tag)
+  });
+});
+test('when labelHeadingTag is uppercase, the label is rendered', function () {
+  var h4Tag = validHeadingTags[3].toUpperCase();
+  getComponent({
+    labelHeadingTag: h4Tag
+  });
+  screen.getAllByRole('heading', {
+    level: getLabelHeadingLevel(h4Tag)
+  });
 });

package/lib/components/AccordionItem/AccordionItem.js

@@ -1,6 +1,10 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _context;
 var _excluded = ["label", "children", "textValue", "containerProps", "buttonProps", "regionProps"];
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
 import { mergeProps, useButton } from 'react-aria';
 import MenuDown from '@pingux/mdi-react/MenuDownIcon';
@@ -13,10 +17,13 @@ import { Button as ThemeUIButton } from 'theme-ui';
 import { AccordionContext } from '../../context/AccordionContext';
 import { useStatusClasses } from '../../hooks';
 import { Box, Icon, Text } from '../../index';
+import { hoveredState } from '../AccordionGroup/Accordion.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+export var validHeadingTags = ['h1', 'h2', 'h3', 'h4'];
 var AccordionItem = /*#__PURE__*/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,
@@ -62,6 +69,8 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
     }),
     buttonClasses = _useStatusClasses2.classNames;
   var ariaLabel = props['aria-label'] || item.props.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({
     variant: "accordion.accordion",
     className: itemClasses
@@ -76,8 +85,10 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "variants.accordion.header",
     className: buttonClasses
   }, mergeProps(hoverProps, accordionButtonProps, raButtonProps, buttonProps, focusProps)), ___EmotionJSX(Text, {
+    as: validLabelHeadingTag,
     className: buttonClasses,
-    variant: "accordion.title"
+    variant: validLabelHeadingTag,
+    sx: hoveredState
   }, item.props.label), ___EmotionJSX(Box, {
     as: "span",
     ml: "5px"
@@ -94,6 +105,9 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
 });
 AccordionItem.propTypes = {
   'aria-label': PropTypes.string,
+  labelHeadingTag: PropTypes.oneOf(_concatInstanceProperty(_context = []).call(_context, validHeadingTags, _mapInstanceProperty(validHeadingTags).call(validHeadingTags, function (heading) {
+    return heading.toUpperCase();
+  }))),
   item: PropTypes.shape({
     key: PropTypes.string,
     rendered: PropTypes.node,

package/lib/components/ColorField/ColorField.js

@@ -13,7 +13,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context5, _context6; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context5 = ownKeys(Object(source), !0)).call(_context5, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context6 = ownKeys(Object(source))).call(_context6, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
 import { FocusScope, mergeProps, useOverlayPosition, useOverlayTrigger, useVisuallyHidden } from 'react-aria';
-import { ChromePicker } from 'react-color';
+import { SketchPicker } from 'react-color';
 import { useOverlayTriggerState } from 'react-stately';
 import { useColorField } from '@react-aria/color';
 import { useColorFieldState } from '@react-stately/color';
@@ -116,7 +116,7 @@ var ColorField = /*#__PURE__*/forwardRef(function (props, ref) {
     restoreFocus: true,
     contain: true,
     autoFocus: true
-  }, ___EmotionJSX(ChromePicker, {
+  }, ___EmotionJSX(SketchPicker, {
     color: getRgbaFromState(state),
     onChange: handleColorChange
   }))));

package/lib/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.

package/lib/components/Text/Text.styles.js

@@ -89,7 +89,38 @@ var listViewItemSubtext = _objectSpread(_objectSpread({}, subtitle), {}, {
   fontSize: 'sm',
   mt: '1px'
 });
-export var text = {
+var hTags = {
+  h1: _objectSpread(_objectSpread({}, title), {}, {
+    fontWeight: 3
+  }),
+  h2: _objectSpread(_objectSpread({}, sectionTitle), {}, {
+    fontWeight: 3
+  }),
+  h3: _objectSpread(_objectSpread({}, itemTitle), {}, {
+    fontWeight: 3
+  }),
+  h4: _objectSpread(_objectSpread({}, wordWrap), {}, {
+    fontSize: 'sm',
+    fontWeight: 3,
+    color: 'text.primary',
+    fontFamily: 'standard'
+  })
+};
+var HTags = {
+  H1: _objectSpread(_objectSpread({}, hTags.h1), {}, {
+    lineHeight: '28px'
+  }),
+  H2: _objectSpread(_objectSpread({}, hTags.h2), {}, {
+    lineHeight: '21px'
+  }),
+  H3: _objectSpread(_objectSpread({}, hTags.h3), {}, {
+    lineHeight: '18px'
+  }),
+  H4: _objectSpread(_objectSpread({}, hTags.h4), {}, {
+    lineHeight: '16px'
+  })
+};
+export var text = _objectSpread(_objectSpread(_objectSpread({
   base: base,
   bodyStrong: bodyStrong,
   bodyWeak: _objectSpread(_objectSpread({}, wordWrap), {}, {
@@ -122,26 +153,8 @@ export var text = {
     textTransform: 'uppercase',
     fontFamily: 'standard'
   }),
-  environmentBreadcrumb: environmentBreadcrumb,
-  H1: _objectSpread(_objectSpread({}, title), {}, {
-    fontWeight: 3,
-    lineHeight: '28px'
-  }),
-  H2: _objectSpread(_objectSpread({}, sectionTitle), {}, {
-    fontWeight: 3,
-    lineHeight: '21px'
-  }),
-  H3: _objectSpread(_objectSpread({}, itemTitle), {}, {
-    fontWeight: 3,
-    lineHeight: '18px'
-  }),
-  H4: _objectSpread(_objectSpread({}, wordWrap), {}, {
-    fontSize: 'sm',
-    fontWeight: 3,
-    color: 'text.primary',
-    fontFamily: 'standard',
-    lineHeight: '16px'
-  }),
+  environmentBreadcrumb: environmentBreadcrumb
+}, hTags), HTags), {}, {
   inputValue: {
     fontWeight: 1,
     color: 'text.primary',
@@ -196,4 +209,4 @@ export var text = {
   }),
   textEllipsis: textEllipsis,
   title: title
-};
+});

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'
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=446-1808&t=8Wwd3tIBh3GEjCJB-0',
+    differentLevels: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=446%3A1949&mode=dev'
   },
   attributeMappings: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=15076%3A33905&mode=dev',

package/package.json

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