@pingux/astro 1.31.0-alpha.0 → 1.31.0-alpha.2

package/lib/cjs/components/ListView/ListView.js

@@ -106,6 +106,8 @@ function useListLayout(state) {
  * view, or edit items in this list. This virtualized component supports
  * asynchronous data in infinitely scrollable lists.
  *
+ * Can be used as in recipe: https://uilibrary.ping-eng.com/astro/?path=/docs/recipes-list-with-panel--default
+ *
  * NOTE: be careful with putting focusable elements inside ListView.
  * It is using a grid (useList hook) with its own event listeners under the hood.
  * [react-specttrum-github-issue](https://github.com/adobe/react-spectrum/issues/2801)

package/lib/cjs/components/TabPicker/TabPicker.js

@@ -229,6 +229,7 @@ var TabPicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     ref: menuRef
   }, (0, _map["default"])(items).call(items, function (tab) {
     return (0, _react2.jsx)(_collections.Item, {
+      role: tab.role,
       key: tab.key
     }, tab.name);
   })));

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

@@ -298,11 +298,13 @@ var WithList = function WithList() {
     list: [{
       key: 'tab1list',
       name: 'Tab 1 list',
-      children: 'Tab 1 from list'
+      children: 'Tab 1 from list',
+      role: 'listitem'
     }, {
       key: 'tab2list',
       name: 'Tab 2 list',
-      children: 'Tab 2 from list'
+      children: 'Tab 2 from list',
+      role: 'listitem'
     }]
   }]);
   return (0, _react2.jsx)(_Tabs["default"], {

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

@@ -63,11 +63,13 @@ var tabsWithList = [{
   list: [{
     key: 'tab1list',
     name: 'Tab 1 list',
-    children: 'Tab 1 from list'
+    children: 'Tab 1 from list',
+    role: 'listitem'
   }, {
     key: 'tab2list',
     name: 'Tab 2 list',
-    children: 'Tab 2 from list'
+    children: 'Tab 2 from list',
+    role: 'listitem'
   }]
 }];
 var defaultProps = {
@@ -545,7 +547,7 @@ test('will render tab with list if provided', /*#__PURE__*/(0, _asyncToGenerator
 
           expect(_testWrapper.screen.queryByRole('menu')).toBeInTheDocument();
           testTabPanel(0);
-          menuItems = _testWrapper.screen.queryAllByRole('menuitemradio');
+          menuItems = _testWrapper.screen.queryAllByRole('listitem');
           expect(menuItems).toHaveLength(tabsWithList[1].list.length);
           expect(menuItems[0]).not.toHaveFocus();
 
@@ -596,7 +598,7 @@ test('tab list is accessible via keyboard', function () {
   expect(_testWrapper.screen.queryByRole('menu')).toBeInTheDocument();
   testTabPanel(0);
 
-  var menuItems = _testWrapper.screen.queryAllByRole('menuitemradio');
+  var menuItems = _testWrapper.screen.queryAllByRole('listitem');
 
   expect(menuItems).toHaveLength(tabsWithList[1].list.length);
   expect(menuItems[0]).toHaveFocus();

package/lib/cjs/recipes/ListAndPanel.stories.js

@@ -34,6 +34,8 @@ var _MoreVertIcon = _interopRequireDefault(require("mdi-react/MoreVertIcon"));
 
 var _PencilIcon = _interopRequireDefault(require("mdi-react/PencilIcon"));
 
+var _PlusIcon = _interopRequireDefault(require("mdi-react/PlusIcon"));
+
 var _index = require("../index");
 
 var _hooks = require("../hooks");
@@ -264,6 +266,8 @@ var Default = function Default() {
       onPanelClose = _useOverlayPanelState.onClose;
 
   var panelTriggerRef = (0, _react.useRef)();
+  var heading = 'Title of the Page';
+  var description = 'The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page.';
 
   var closePanelHandler = function closePanelHandler() {
     onPanelClose(panelState, panelTriggerRef);
@@ -285,7 +289,34 @@ var Default = function Default() {
 
   return (0, _react2.jsx)(_index.Box, {
     sx: sx.wrapper
-  }, (0, _react2.jsx)(_index.SearchField, {
+  }, (0, _react2.jsx)(_index.Box, {
+    mb: "md"
+  }, (0, _react2.jsx)(_index.Box, {
+    align: "center",
+    isRow: true,
+    mb: "xs",
+    role: "heading",
+    "aria-level": "1"
+  }, (0, _react2.jsx)(_index.Text, {
+    variant: "title",
+    fontWeight: 3
+  }, heading), (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "icon button",
+    ml: "sm",
+    mt: "3px",
+    variant: "inverted"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _PlusIcon["default"],
+    color: "white",
+    size: 13
+  }))), (0, _react2.jsx)(_index.Text, {
+    variant: "bodyWeak"
+  }, description, (0, _react2.jsx)(_index.Link, {
+    href: "https://uilibrary.ping-eng.com/",
+    sx: {
+      fontSize: '13px'
+    }
+  }, " Learn more"))), (0, _react2.jsx)(_index.SearchField, {
     position: "fixed",
     mb: "sm",
     width: "400px",

package/lib/components/ListView/ListView.js

@@ -60,6 +60,8 @@ export function useListLayout(state) {
  * view, or edit items in this list. This virtualized component supports
  * asynchronous data in infinitely scrollable lists.
  *
+ * Can be used as in recipe: https://uilibrary.ping-eng.com/astro/?path=/docs/recipes-list-with-panel--default
+ *
  * NOTE: be careful with putting focusable elements inside ListView.
  * It is using a grid (useList hook) with its own event listeners under the hood.
  * [react-specttrum-github-issue](https://github.com/adobe/react-spectrum/issues/2801)

package/lib/components/TabPicker/TabPicker.js

@@ -190,6 +190,7 @@ var TabPicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ref: menuRef
   }, _mapInstanceProperty(items).call(items, function (tab) {
     return ___EmotionJSX(Tab, {
+      role: tab.role,
       key: tab.key
     }, tab.name);
   })));

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

@@ -235,11 +235,13 @@ export var WithList = function WithList() {
     list: [{
       key: 'tab1list',
       name: 'Tab 1 list',
-      children: 'Tab 1 from list'
+      children: 'Tab 1 from list',
+      role: 'listitem'
     }, {
       key: 'tab2list',
       name: 'Tab 2 list',
-      children: 'Tab 2 from list'
+      children: 'Tab 2 from list',
+      role: 'listitem'
     }]
   }]);
 

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

@@ -43,11 +43,13 @@ var tabsWithList = [{
   list: [{
     key: 'tab1list',
     name: 'Tab 1 list',
-    children: 'Tab 1 from list'
+    children: 'Tab 1 from list',
+    role: 'listitem'
   }, {
     key: 'tab2list',
     name: 'Tab 2 list',
-    children: 'Tab 2 from list'
+    children: 'Tab 2 from list',
+    role: 'listitem'
   }]
 }];
 var defaultProps = {
@@ -495,7 +497,7 @@ test('will render tab with list if provided', /*#__PURE__*/_asyncToGenerator( /*
           userEvent.click(menuBtn);
           expect(screen.queryByRole('menu')).toBeInTheDocument();
           testTabPanel(0);
-          menuItems = screen.queryAllByRole('menuitemradio');
+          menuItems = screen.queryAllByRole('listitem');
           expect(menuItems).toHaveLength(tabsWithList[1].list.length);
           expect(menuItems[0]).not.toHaveFocus();
           userEvent.click(menuItems[0]);
@@ -538,7 +540,7 @@ test('tab list is accessible via keyboard', function () {
   });
   expect(screen.queryByRole('menu')).toBeInTheDocument();
   testTabPanel(0);
-  var menuItems = screen.queryAllByRole('menuitemradio');
+  var menuItems = screen.queryAllByRole('listitem');
   expect(menuItems).toHaveLength(tabsWithList[1].list.length);
   expect(menuItems[0]).toHaveFocus();
   fireEvent.keyDown(menuItems[0], {

package/lib/recipes/ListAndPanel.stories.js

@@ -7,7 +7,8 @@ import AccountIcon from 'mdi-react/AccountIcon';
 import CloseIcon from 'mdi-react/CloseIcon';
 import MoreVertIcon from 'mdi-react/MoreVertIcon';
 import PencilIcon from 'mdi-react/PencilIcon';
-import { Avatar, Box, Icon, IconButton, ListView, Menu, OverlayPanel, PopoverMenu, SearchField, Separator, SwitchField, Tab, Tabs, Text } from '../index';
+import PlusIcon from 'mdi-react/PlusIcon';
+import { Avatar, Box, Icon, IconButton, Link, ListView, Menu, OverlayPanel, PopoverMenu, SearchField, Separator, SwitchField, Tab, Tabs, Text } from '../index';
 import { useOverlayPanelState } from '../hooks';
 import { pingImg } from '../utils/devUtils/constants/images';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -228,6 +229,8 @@ export var Default = function Default() {
       onPanelClose = _useOverlayPanelState.onClose;
 
   var panelTriggerRef = useRef();
+  var heading = 'Title of the Page';
+  var description = 'The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page.';
 
   var closePanelHandler = function closePanelHandler() {
     onPanelClose(panelState, panelTriggerRef);
@@ -249,7 +252,34 @@ export var Default = function Default() {
 
   return ___EmotionJSX(Box, {
     sx: sx.wrapper
-  }, ___EmotionJSX(SearchField, {
+  }, ___EmotionJSX(Box, {
+    mb: "md"
+  }, ___EmotionJSX(Box, {
+    align: "center",
+    isRow: true,
+    mb: "xs",
+    role: "heading",
+    "aria-level": "1"
+  }, ___EmotionJSX(Text, {
+    variant: "title",
+    fontWeight: 3
+  }, heading), ___EmotionJSX(IconButton, {
+    "aria-label": "icon button",
+    ml: "sm",
+    mt: "3px",
+    variant: "inverted"
+  }, ___EmotionJSX(Icon, {
+    icon: PlusIcon,
+    color: "white",
+    size: 13
+  }))), ___EmotionJSX(Text, {
+    variant: "bodyWeak"
+  }, description, ___EmotionJSX(Link, {
+    href: "https://uilibrary.ping-eng.com/",
+    sx: {
+      fontSize: '13px'
+    }
+  }, " Learn more"))), ___EmotionJSX(SearchField, {
     position: "fixed",
     mb: "sm",
     width: "400px",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.31.0-alpha.0",
+  "version": "1.31.0-alpha.2",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",