@pingux/astro 1.0.0-alpha.9 → 1.1.0-alpha.0

package/lib/cjs/components/ListViewItem/ListViewItem.js

@@ -32,8 +32,6 @@ var _ListViewContext = require("../ListView/ListViewContext");
 
 var _Box = _interopRequireDefault(require("../Box"));
 
-var _Separator = _interopRequireDefault(require("../Separator"));
-
 var _hooks = require("../../hooks");
 
 var _react2 = require("@emotion/react");
@@ -90,7 +88,8 @@ var ListViewItem = function ListViewItem(props) {
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
     isHovered: isHovered,
     isSelected: isSelected,
-    isFocused: isDisabled ? false : isFocusVisible
+    isFocused: isDisabled ? false : isFocusVisible,
+    hasSeparator: hasSeparator
   }),
       classNames = _useStatusClasses.classNames;
 
@@ -111,9 +110,7 @@ var ListViewItem = function ListViewItem(props) {
     isSelected: isSelected,
     className: classNames,
     "data-id": dataId
-  }, listItemProps), item.rendered)), hasSeparator && (0, _react2.jsx)(_Separator["default"], {
-    m: "0px"
-  }));
+  }, listItemProps), item.rendered)));
 };
 
 ListViewItem.propTypes = {

package/lib/cjs/components/MultivaluesField/MultivaluesField.js

@@ -337,7 +337,7 @@ var MultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
       }, (0, _react2.jsx)(_.Icon, {
         icon: _CloseIcon["default"],
         color: "white",
-        size: 10
+        size: 14
       })));
     }
 

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 = {

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

@@ -8,16 +8,20 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports.Disabled = exports.isOpen = exports.withDelayProp = exports.withDirectionProp = exports.withAlignProp = exports.Default = exports["default"] = void 0;
+exports.TextWithTooltip = exports.ChipWithTooltip = exports.IconWithTooltip = exports.Disabled = exports.isOpen = exports.withDelayProp = exports.withDirectionProp = exports.withAlignProp = exports.Default = exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _EarthIcon = _interopRequireDefault(require("mdi-react/EarthIcon"));
 
+var _PersonIcon = _interopRequireDefault(require("mdi-react/PersonIcon"));
+
 var _index = require("../../index");
 
 var _IconButton = _interopRequireDefault(require("../IconButton"));
 
+var _Text = _interopRequireDefault(require("../Text"));
+
 var _react2 = require("@emotion/react");
 
 var _default = {
@@ -80,4 +84,43 @@ Disabled.parameters = {
       story: 'The tooltip can be disabled without disabling the button press events.'
     }
   }
-};
+};
+
+var IconWithTooltip = function IconWithTooltip() {
+  return (0, _react2.jsx)(_index.Box, {
+    pl: 50
+  }, (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_IconButton["default"], {
+    variant: "tooltipIconButton"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _PersonIcon["default"]
+  })), (0, _react2.jsx)(_index.Tooltip, null, "Useful tooltip")));
+};
+
+exports.IconWithTooltip = IconWithTooltip;
+
+var ChipWithTooltip = function ChipWithTooltip() {
+  return (0, _react2.jsx)(_index.Box, {
+    pl: 50
+  }, (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, {
+    variant: "tooltipChip",
+    bg: "neutral.10"
+  }, (0, _react2.jsx)(_Text["default"], {
+    variant: "label",
+    sx: {
+      textTransform: 'uppercase'
+    },
+    color: "white"
+  }, "Some text")), (0, _react2.jsx)(_index.Tooltip, null, "Useful tooltip")));
+};
+
+exports.ChipWithTooltip = ChipWithTooltip;
+
+var TextWithTooltip = function TextWithTooltip() {
+  return (0, _react2.jsx)(_index.Box, {
+    pl: 50
+  }, (0, _react2.jsx)(_index.TooltipTrigger, null, (0, _react2.jsx)(_index.Button, {
+    variant: "tooltipInline"
+  }, "Some text"), (0, _react2.jsx)(_index.Tooltip, null, "Useful tooltip")));
+};
+
+exports.TextWithTooltip = TextWithTooltip;