@pingux/astro 1.0.0-alpha.9 → 1.0.1

package/lib/cjs/components/Stepper/Stepper.js

@@ -119,6 +119,7 @@ var Stepper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       },
       textValue: textValue,
       title: step,
+      "aria-label": textValue,
       content: item.rendered,
       separator: !isFirst && line
     });

package/lib/cjs/components/Tab/Tab.js

@@ -63,9 +63,10 @@ var CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       tabLabelProps = itemProps.tabLabelProps,
       tabLineProps = itemProps.tabLineProps,
       content = itemProps.content,
-      otherItemProps = (0, _objectWithoutProperties2["default"])(itemProps, ["icon", "isDisabled", "separator", "tabLabelProps", "tabLineProps", "content"]);
-  var isDisabled = tabsDisabled || tabDisabled;
+      titleAttr = itemProps.titleAttr,
+      otherItemProps = (0, _objectWithoutProperties2["default"])(itemProps, ["icon", "isDisabled", "separator", "tabLabelProps", "tabLineProps", "content", "titleAttr"]);
   var state = (0, _react.useContext)(_Tabs.TabsContext);
+  var isDisabled = tabsDisabled || tabDisabled || state.disabledKeys.has(key);
   var isSelected = state.selectedKey === key;
 
   var _useFocusRing = (0, _focus.useFocusRing)(),
@@ -106,7 +107,8 @@ var CollectionTab = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     className: classNames,
     variant: "tab"
   }, (0, _utils.mergeProps)(focusProps, hoverProps, tabProps), otherItemProps, {
-    ref: tabRef
+    ref: tabRef,
+    title: titleAttr || undefined
   }), icon, (0, _react2.jsx)(_Text["default"], (0, _extends2["default"])({
     variant: "tabLabel"
   }, tabLabelProps), rendered), isSelected && !isDisabled && (0, _react2.jsx)(TabLine, tabLineProps)), slots === null || slots === void 0 ? void 0 : slots.afterTab);

package/lib/cjs/components/Tabs/Tabs.js

@@ -126,6 +126,9 @@ Tabs.propTypes = {
   /** The default tab key to be selected. (uncontrolled) */
   defaultSelectedKey: _propTypes["default"].string,
 
+  /** Array of keys to disable within the tab list. */
+  disabledKeys: _propTypes["default"].arrayOf(_propTypes["default"].string),
+
   /** The tab key that is currently selected. (controlled) */
   selectedKey: _propTypes["default"].string,
 

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

@@ -170,13 +170,12 @@ exports.Centered = Centered;
 
 var DisabledSingleTab = function DisabledSingleTab() {
   return (0, _react2.jsx)(_Tabs["default"], {
-    defaultSelectedKey: "Tab 2",
-    items: tabs
+    items: tabs,
+    disabledKeys: ['Tab 2']
   }, function (item) {
     return (0, _react2.jsx)(_Tab["default"], {
       key: item.name,
-      title: item.name,
-      isDisabled: item.name === 'Tab 1'
+      title: item.name
     }, item.children);
   });
 };

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

@@ -257,6 +257,35 @@ test('disabled all tabs', function () {
   expect(tab1).not.toContainElement(_testWrapper.screen.queryByRole('presentation'));
   testTabPanel(0);
 });
+test('disabled tab is not accessible on click or focus', function () {
+  getComponent({
+    disabledKeys: [defaultTabs[1].name]
+  });
+  testTabPanel(0);
+
+  var _getTabs5 = getTabs(),
+      tabs = _getTabs5.tabs,
+      tab0 = _getTabs5.tab0,
+      tab1 = _getTabs5.tab1,
+      tab2 = _getTabs5.tab2; // Ensure that clicking a disabled tab does nothing
+
+
+  _userEvent["default"].click(tab1);
+
+  testTabPanel(0); // Ensure that disabled tab is not accessible via focus
+
+  _userEvent["default"].tab();
+
+  testSingleTab(tabs, tab0, 'toHaveFocus');
+
+  _testWrapper.fireEvent.keyDown(tab0, {
+    key: 'ArrowRight',
+    code: 'ArrowRight'
+  });
+
+  testSingleTab(tabs, tab2, 'toHaveFocus');
+  testTabPanel(2);
+});
 test('controlled tabs', function () {
   var selectedKey = defaultTabs[1].name;
   var onSelectionChange = jest.fn();
@@ -267,11 +296,11 @@ test('controlled tabs', function () {
   }),
       rerender = _getComponent.rerender;
 
-  var _getTabs5 = getTabs(),
-      tabs = _getTabs5.tabs,
-      tab0 = _getTabs5.tab0,
-      tab1 = _getTabs5.tab1,
-      tab2 = _getTabs5.tab2; // Expect the second tab to be selected
+  var _getTabs6 = getTabs(),
+      tabs = _getTabs6.tabs,
+      tab0 = _getTabs6.tab0,
+      tab1 = _getTabs6.tab1,
+      tab2 = _getTabs6.tab2; // Expect the second tab to be selected
 
 
   expect(onSelectionChange).not.toHaveBeenCalled();
@@ -309,9 +338,9 @@ test('tab line props', function () {
   }),
       rerender = _getComponent2.rerender;
 
-  var _getTabs6 = getTabs(),
-      tabs = _getTabs6.tabs,
-      tab0 = _getTabs6.tab0;
+  var _getTabs7 = getTabs(),
+      tabs = _getTabs7.tabs,
+      tab0 = _getTabs7.tab0;
 
   var tabLine = _testWrapper.screen.getByRole('presentation'); // Expect the tab line to have a red background
 
@@ -340,9 +369,9 @@ test('tab with icon', function () {
     tabs: newTabs
   });
 
-  var _getTabs7 = getTabs(),
-      tabs = _getTabs7.tabs,
-      tab0 = _getTabs7.tab0;
+  var _getTabs8 = getTabs(),
+      tabs = _getTabs8.tabs,
+      tab0 = _getTabs8.tab0;
 
   var icon = _testWrapper.screen.getByTestId('icon'); // Expect the tab to have the given icon element
 
@@ -350,7 +379,7 @@ test('tab with icon', function () {
   testSingleTab(tabs, tab0, 'toContainElement', [icon]);
 });
 test('tooltip renders on tab\'s hover in `tooltip` mode', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
-  var _getTabs8, tab0;
+  var _getTabs9, tab0;
 
   return _regenerator["default"].wrap(function _callee$(_context) {
     while (1) {
@@ -360,7 +389,7 @@ test('tooltip renders on tab\'s hover in `tooltip` mode', /*#__PURE__*/(0, _asyn
             mode: 'tooltip'
           });
           expect(_testWrapper.screen.queryByRole('tooltip')).not.toBeInTheDocument();
-          _getTabs8 = getTabs(), tab0 = _getTabs8.tab0;
+          _getTabs9 = getTabs(), tab0 = _getTabs9.tab0;
 
           _testWrapper.fireEvent.mouseMove(tab0);
 
@@ -386,8 +415,8 @@ test('tabs without selected keys show null tab panel content', function () {
 test('hover tab style', function () {
   getComponent();
 
-  var _getTabs9 = getTabs(),
-      tab0 = _getTabs9.tab0;
+  var _getTabs10 = getTabs(),
+      tab0 = _getTabs10.tab0;
 
   expect(tab0).not.toHaveClass('is-hovered');
 

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

@@ -128,6 +128,16 @@ test('form wrapper will have default max label column width when no custom width
 
   expect(textAreaContainer).toHaveStyle('grid-template-columns: 40% auto');
 });
+test('passing read only prop applys the is-read-only class to the textarea', function () {
+  var isReadOnly = true;
+  getComponent({
+    isReadOnly: isReadOnly
+  });
+
+  var textArea = _testWrapper.screen.getByLabelText(defaultProps.label);
+
+  expect(textArea).toHaveClass('is-read-only');
+});
 test('form wrapper will have a max label column width when custom width set', function () {
   var labelMode = 'left';
   var containerProps = {