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

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/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/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.1",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",