@pingux/astro 2.25.0 → 2.26.0-alpha.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
12
12
  _Object$defineProperty(exports, "__esModule", {
13
13
  value: true
14
14
  });
15
- exports["default"] = void 0;
15
+ exports.hoveredState = exports["default"] = void 0;
16
16
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
17
17
  var _Buttons = require("../Button/Buttons.styles");
18
18
  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 = {
44
44
  display: 'flex'
45
45
  }
46
46
  };
47
+ var hoveredState = {
48
+ '&.is-hovered': {
49
+ color: 'active'
50
+ }
51
+ };
52
+ exports.hoveredState = hoveredState;
47
53
  var header = _objectSpread(_objectSpread({}, _Buttons.base), {}, {
48
54
  display: 'inline-flex',
49
55
  bg: 'transparent',
@@ -51,14 +57,11 @@ var header = _objectSpread(_objectSpread({}, _Buttons.base), {}, {
51
57
  padding: '0 5px',
52
58
  flexGrow: 0,
53
59
  fontWeight: 700,
54
- '&.is-hovered': {
55
- color: 'active'
56
- },
57
60
  '&.is-pressed': {
58
61
  color: 'accent.20'
59
62
  },
60
63
  '&.is-focused': _objectSpread({}, _Buttons.defaultFocus)
61
- });
64
+ }, hoveredState);
62
65
  var _default = {
63
66
  title: title,
64
67
  accordion: accordion,
@@ -30,7 +30,7 @@ var _index = require("../../index");
30
30
  var _isIterable = require("../../utils/devUtils/props/isIterable");
31
31
  var _AccordionItem = _interopRequireDefault(require("../AccordionItem"));
32
32
  var _react2 = require("@emotion/react");
33
- var _excluded = ["defaultExpandedKeys", "expandedKeys", "onExpandedChange"],
33
+ var _excluded = ["defaultExpandedKeys", "expandedKeys", "labelHeadingTag", "onExpandedChange"],
34
34
  _excluded2 = ["onFocus"];
35
35
  /**
36
36
  * Console Warning: "Cannot update a component (`Unknown`)...`"
@@ -45,6 +45,7 @@ var AccordionGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
45
45
  var _context;
46
46
  var defaultExpandedKeys = props.defaultExpandedKeys,
47
47
  expandedKeys = props.expandedKeys,
48
+ labelHeadingTag = props.labelHeadingTag,
48
49
  onExpandedChange = props.onExpandedChange,
49
50
  others = (0, _objectWithoutProperties2["default"])(props, _excluded);
50
51
  var state = (0, _reactStately.useTreeState)(props);
@@ -71,9 +72,10 @@ var AccordionGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
71
72
  ref: accordionRef
72
73
  }, (0, _utils.mergeProps)(theseProps, others)), (0, _map["default"])(_context = (0, _from["default"])(state.collection)).call(_context, function (item) {
73
74
  return (0, _react2.jsx)(_AccordionItem["default"], {
74
- key: item.key,
75
+ "data-id": item['data-id'],
75
76
  item: item,
76
- "data-id": item['data-id']
77
+ key: item.key,
78
+ labelHeadingTag: labelHeadingTag
77
79
  }, item.props.children);
78
80
  })));
79
81
  });
@@ -92,7 +94,9 @@ AccordionGroup.propTypes = {
92
94
  /** The initial expanded keys in the collection (uncontrolled). */
93
95
  defaultExpandedKeys: _isIterable.isIterableProp,
94
96
  /** Id of the selected element */
95
- id: _propTypes["default"].string
97
+ id: _propTypes["default"].string,
98
+ /** HTML header element wrapping the label */
99
+ labelHeadingTag: _AccordionItem["default"].propTypes.labelHeadingTag
96
100
  };
97
101
  AccordionGroup.displayName = 'AccordionGroup';
98
102
  var _default = AccordionGroup;
@@ -8,14 +8,16 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
8
8
  _Object$defineProperty(exports, "__esModule", {
9
9
  value: true
10
10
  });
11
- exports["default"] = exports.UncontrolledExpanded = exports.Multiple = exports.DisabledItems = exports.Default = exports.CustomPresentation = exports.ControlledExpanded = void 0;
11
+ exports["default"] = exports.UncontrolledExpanded = exports.Multiple = exports.DisabledItems = exports.DifferentLevels = exports.Default = exports.CustomPresentation = exports.ControlledExpanded = void 0;
12
12
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
13
+ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
13
14
  var _react = _interopRequireWildcard(require("react"));
14
15
  var _reactStately = require("react-stately");
15
16
  var _storybookAddonDesigns = require("storybook-addon-designs");
16
17
  var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
17
18
  var _index = require("../../index");
18
19
  var _figmaLinks = require("../../utils/designUtils/figmaLinks.js");
20
+ var _AccordionItem = require("../AccordionItem/AccordionItem");
19
21
  var _AccordionGroup = _interopRequireDefault(require("./AccordionGroup.mdx"));
20
22
  var _react2 = require("@emotion/react");
21
23
  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 = {
86
88
  control: {
87
89
  type: 'none'
88
90
  }
91
+ },
92
+ labelHeadingTag: {
93
+ control: 'radio',
94
+ options: _AccordionItem.validHeadingTags
89
95
  }
90
96
  }
91
97
  };
92
98
  exports["default"] = _default;
93
99
  var Default = function Default(args) {
94
- return (0, _react2.jsx)(_index.AccordionGroup, args, (0, _react2.jsx)(_reactStately.Item, {
100
+ return (0, _react2.jsx)(_index.AccordionGroup, (0, _extends2["default"])({
101
+ labelHeadingTag: "h3"
102
+ }, args), (0, _react2.jsx)(_reactStately.Item, {
95
103
  key: "accordionKey",
96
104
  textValue: "accordionKey",
97
105
  label: "Accordion Label",
@@ -105,6 +113,30 @@ Default.parameters = {
105
113
  url: _figmaLinks.FIGMA_LINKS.accordionGroup["default"]
106
114
  }
107
115
  };
116
+ var DifferentLevels = function DifferentLevels() {
117
+ return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.AccordionGroup, {
118
+ labelHeadingTag: "h3"
119
+ }, (0, _react2.jsx)(_reactStately.Item, {
120
+ key: "accordionLabelH3Key",
121
+ textValue: "accordionLabelH3Key",
122
+ label: "Accordion Label H3",
123
+ "data-id": "accordionItem"
124
+ }, (0, _react2.jsx)(_index.Text, null, "Render me!"))), (0, _react2.jsx)(_index.AccordionGroup, {
125
+ labelHeadingTag: "h2"
126
+ }, (0, _react2.jsx)(_reactStately.Item, {
127
+ key: "accordionLabelH2Key",
128
+ textValue: "accordionLabelH2Key",
129
+ label: "Accordion Label H2",
130
+ "data-id": "accordionItem"
131
+ }, (0, _react2.jsx)(_index.Text, null, "Render me!"))));
132
+ };
133
+ exports.DifferentLevels = DifferentLevels;
134
+ DifferentLevels.parameters = {
135
+ design: {
136
+ type: 'figma',
137
+ url: _figmaLinks.FIGMA_LINKS.accordionGroup.differentLevels
138
+ }
139
+ };
108
140
  var Multiple = function Multiple() {
109
141
  return (
110
142
  /*
@@ -115,7 +147,8 @@ var Multiple = function Multiple() {
115
147
  * ];
116
148
  */
117
149
  (0, _react2.jsx)(_index.AccordionGroup, {
118
- items: itemArray
150
+ items: itemArray,
151
+ labelHeadingTag: "h3"
119
152
  }, function (item) {
120
153
  return (0, _react2.jsx)(_reactStately.Item, {
121
154
  key: item.key,
@@ -146,7 +179,8 @@ var ControlledExpanded = function ControlledExpanded() {
146
179
  (0, _react2.jsx)(_index.AccordionGroup, {
147
180
  onExpandedChange: setExpandedKeys,
148
181
  expandedKeys: expandedKeys,
149
- items: itemArray
182
+ items: itemArray,
183
+ labelHeadingTag: "h3"
150
184
  }, function (item) {
151
185
  return (0, _react2.jsx)(_reactStately.Item, {
152
186
  key: item.key,
@@ -168,7 +202,8 @@ var UncontrolledExpanded = function UncontrolledExpanded() {
168
202
  */
169
203
  (0, _react2.jsx)(_index.AccordionGroup, {
170
204
  defaultExpandedKeys: ['t1'],
171
- items: itemArray
205
+ items: itemArray,
206
+ labelHeadingTag: "h3"
172
207
  }, function (item) {
173
208
  return (0, _react2.jsx)(_reactStately.Item, {
174
209
  key: item.key,
@@ -190,7 +225,8 @@ var DisabledItems = function DisabledItems() {
190
225
  */
191
226
  (0, _react2.jsx)(_index.AccordionGroup, {
192
227
  disabledKeys: ['t1', 't3'],
193
- items: itemArrayDisabled
228
+ items: itemArrayDisabled,
229
+ labelHeadingTag: "h3"
194
230
  }, function (item) {
195
231
  return (0, _react2.jsx)(_reactStately.Item, {
196
232
  key: item.key,
@@ -211,7 +247,8 @@ var CustomPresentation = function CustomPresentation() {
211
247
  ];
212
248
  */
213
249
  (0, _react2.jsx)(_index.AccordionGroup, {
214
- items: itemArrayDisabled
250
+ items: itemArrayDisabled,
251
+ labelHeadingTag: "h3"
215
252
  }, function (item) {
216
253
  return (0, _react2.jsx)(_reactStately.Item, {
217
254
  key: item.key,
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
+ var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
4
5
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
5
6
  var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
6
7
  var _react = _interopRequireDefault(require("react"));
@@ -9,6 +10,7 @@ var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
9
10
  var _index = require("../../index");
10
11
  var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
11
12
  var _testWrapper = require("../../utils/testUtils/testWrapper");
13
+ var _AccordionItem = require("../AccordionItem/AccordionItem");
12
14
  var _Text = _interopRequireDefault(require("../Text"));
13
15
  var _ = _interopRequireDefault(require("."));
14
16
  var _react2 = require("@emotion/react");
@@ -353,4 +355,54 @@ test('accordion works if there are multiple, controlled on the same implementati
353
355
  expect(secondSelectedItem).toHaveAttribute('aria-expanded', 'true');
354
356
  _userEvent["default"].click(secondSelectedItem);
355
357
  expect(secondSelectedItem).toHaveAttribute('aria-expanded', 'false');
358
+ });
359
+
360
+ // get the last char of heading tag and convert to number, 'h1' => 1
361
+ var getLabelHeadingLevel = function getLabelHeadingLevel(labelHeading) {
362
+ return Number((0, _slice["default"])(labelHeading).call(labelHeading, -1));
363
+ };
364
+ test('when labelHeadingTag is h1, the label is rendered as an h1 tag', function () {
365
+ var h1Tag = _AccordionItem.validHeadingTags[0];
366
+ getComponent({
367
+ labelHeadingTag: h1Tag
368
+ });
369
+ _testWrapper.screen.getAllByRole('heading', {
370
+ level: getLabelHeadingLevel(h1Tag)
371
+ });
372
+ });
373
+ test('when labelHeadingTag is h2, the label is rendered as an h2 tag', function () {
374
+ var h2Tag = _AccordionItem.validHeadingTags[1];
375
+ getComponent({
376
+ labelHeadingTag: h2Tag
377
+ });
378
+ _testWrapper.screen.getAllByRole('heading', {
379
+ level: getLabelHeadingLevel(h2Tag)
380
+ });
381
+ });
382
+ test('when labelHeadingTag is h3, the label is rendered as an h3 tag', function () {
383
+ var h3Tag = _AccordionItem.validHeadingTags[2];
384
+ getComponent({
385
+ labelHeadingTag: h3Tag
386
+ });
387
+ _testWrapper.screen.getAllByRole('heading', {
388
+ level: getLabelHeadingLevel(h3Tag)
389
+ });
390
+ });
391
+ test('when labelHeadingTag is h4, the label is rendered as an h4 tag', function () {
392
+ var h4Tag = _AccordionItem.validHeadingTags[3];
393
+ getComponent({
394
+ labelHeadingTag: h4Tag
395
+ });
396
+ _testWrapper.screen.getAllByRole('heading', {
397
+ level: getLabelHeadingLevel(h4Tag)
398
+ });
399
+ });
400
+ test('when labelHeadingTag is uppercase, the label is rendered', function () {
401
+ var h4Tag = _AccordionItem.validHeadingTags[3].toUpperCase();
402
+ getComponent({
403
+ labelHeadingTag: h4Tag
404
+ });
405
+ _testWrapper.screen.getAllByRole('heading', {
406
+ level: getLabelHeadingLevel(h4Tag)
407
+ });
356
408
  });
@@ -8,7 +8,10 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
8
8
  _Object$defineProperty(exports, "__esModule", {
9
9
  value: true
10
10
  });
11
- exports["default"] = void 0;
11
+ exports.validHeadingTags = exports["default"] = void 0;
12
+ var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
13
+ var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
14
+ var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
12
15
  var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
13
16
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
14
17
  var _react = _interopRequireWildcard(require("react"));
@@ -23,13 +26,18 @@ var _themeUi = require("theme-ui");
23
26
  var _AccordionContext = require("../../context/AccordionContext");
24
27
  var _hooks = require("../../hooks");
25
28
  var _index = require("../../index");
29
+ var _Accordion = require("../AccordionGroup/Accordion.styles");
26
30
  var _react2 = require("@emotion/react");
31
+ var _context;
27
32
  var _excluded = ["label", "children", "textValue", "containerProps", "buttonProps", "regionProps"];
28
33
  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); }
29
34
  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; }
35
+ var validHeadingTags = ['h1', 'h2', 'h3', 'h4'];
36
+ exports.validHeadingTags = validHeadingTags;
30
37
  var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
31
38
  var className = props.className,
32
- item = props.item;
39
+ item = props.item,
40
+ labelHeadingTag = props.labelHeadingTag;
33
41
  var _item$props = item.props,
34
42
  label = _item$props.label,
35
43
  children = _item$props.children,
@@ -75,6 +83,8 @@ var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
75
83
  }),
76
84
  buttonClasses = _useStatusClasses2.classNames;
77
85
  var ariaLabel = props['aria-label'] || item.props.label;
86
+ var isValidHeadingTag = (0, _includes["default"])(validHeadingTags).call(validHeadingTags, labelHeadingTag === null || labelHeadingTag === void 0 ? void 0 : labelHeadingTag.toLowerCase());
87
+ var validLabelHeadingTag = isValidHeadingTag ? labelHeadingTag === null || labelHeadingTag === void 0 ? void 0 : labelHeadingTag.toLowerCase() : 'span';
78
88
  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
79
89
  variant: "accordion.accordion",
80
90
  className: itemClasses
@@ -89,8 +99,10 @@ var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
89
99
  variant: "variants.accordion.header",
90
100
  className: buttonClasses
91
101
  }, (0, _reactAria.mergeProps)(hoverProps, accordionButtonProps, raButtonProps, buttonProps, focusProps)), (0, _react2.jsx)(_index.Text, {
102
+ as: validLabelHeadingTag,
92
103
  className: buttonClasses,
93
- variant: "accordion.title"
104
+ variant: validLabelHeadingTag,
105
+ sx: _Accordion.hoveredState
94
106
  }, item.props.label), (0, _react2.jsx)(_index.Box, {
95
107
  as: "span",
96
108
  ml: "5px"
@@ -107,6 +119,9 @@ var AccordionItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
107
119
  });
108
120
  AccordionItem.propTypes = {
109
121
  'aria-label': _propTypes["default"].string,
122
+ labelHeadingTag: _propTypes["default"].oneOf((0, _concat["default"])(_context = []).call(_context, validHeadingTags, (0, _map["default"])(validHeadingTags).call(validHeadingTags, function (heading) {
123
+ return heading.toUpperCase();
124
+ }))),
110
125
  item: _propTypes["default"].shape({
111
126
  key: _propTypes["default"].string,
112
127
  rendered: _propTypes["default"].node,
@@ -127,7 +127,7 @@ var ColorField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
127
127
  restoreFocus: true,
128
128
  contain: true,
129
129
  autoFocus: true
130
- }, (0, _react2.jsx)(_reactColor.ChromePicker, {
130
+ }, (0, _react2.jsx)(_reactColor.SketchPicker, {
131
131
  color: getRgbaFromState(state),
132
132
  onChange: handleColorChange
133
133
  }))));
@@ -29,10 +29,11 @@ These keys provide additional functionality to the component.
29
29
  | Shift + Tab | Moves focus to the previous focusable component. |
30
30
  | 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. |
31
31
  | Esc | When the picker is open, pressing the escape key closes the overlay and focuses on the previously focused component. |
32
+ | Up and Down Arrows | Using the up and down arrows on any of the RGBA inputs adjusts the value of the input in focus.
32
33
 
33
34
  #### Screen Readers
34
35
 
35
36
  This component uses the following attributes to assist screen readers:
36
- - The trigger button uses the **`aria-expanded`** attribute to indicate the expansion and collapse of Chrome Picker.
37
- - When expanded, **`aria-controls`** is added to the button pointing to the Chrome Picker.
37
+ - The trigger button uses the **`aria-expanded`** attribute to indicate the expansion and collapse of Sketch Picker.
38
+ - When expanded, **`aria-controls`** is added to the button pointing to the Sketch Picker.
38
39
  - The visibly hidden input uses the **`aria-labelledby`** attribute supplied with label ID.