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

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

@@ -40,8 +40,6 @@ var _index = require("../index");
 
 var _hooks = require("../hooks");
 
-var _images = require("../utils/devUtils/constants/images");
-
 var _react2 = require("@emotion/react");
 
 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); }
@@ -62,12 +60,14 @@ var items = [{
   email: 'idixie2@elegantthemes.com',
   firstName: 'Cacilia',
   lastName: 'Dixie',
-  avatar: _images.pingImg
+  hasIcon: true,
+  avatar: _AccountIcon["default"]
 }, {
   email: 'dfowler0@rambler.ru',
   firstName: 'Stavro',
   lastName: 'Fowler',
-  avatar: _images.pingImg
+  hasIcon: true,
+  avatar: _AccountIcon["default"]
 }, {
   email: 'jgolde8@jimdo.com',
   firstName: 'Celisse',
@@ -127,8 +127,7 @@ var items = [{
   firstName: 'Andromache',
   lastName: 'Idel',
   hasIcon: true,
-  avatar: _AccountIcon["default"],
-  hasSeparator: false
+  avatar: _AccountIcon["default"]
 }];
 var sx = {
   wrapper: {
@@ -181,7 +180,7 @@ var sx = {
       alignItems: 'center'
     },
     icon: {
-      mr: 'sm',
+      mr: 'md',
       alignSelf: 'center',
       color: 'accent.40'
     },
@@ -191,7 +190,8 @@ var sx = {
       mr: 'md'
     },
     title: {
-      alignSelf: 'start'
+      alignSelf: 'start',
+      fontSize: 'md'
     },
     subtitle: {
       fontSize: 'sm',
@@ -214,13 +214,10 @@ var ListElement = function ListElement(_ref) {
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
     sx: sx.listElement.iconWrapper
-  }, item.hasIcon ? (0, _react2.jsx)(_index.Icon, {
+  }, (0, _react2.jsx)(_index.Icon, {
     icon: item.avatar,
-    size: 24,
+    size: "md",
     sx: sx.listElement.icon
-  }) : (0, _react2.jsx)(_index.Avatar, {
-    sx: sx.listElement.avatar,
-    src: item.avatar
   }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
     variant: "bodyStrong",
     sx: sx.listElement.title
@@ -240,8 +237,7 @@ var ListElement = function ListElement(_ref) {
     mr: onClosePanel ? 'sm' : 0
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _MoreVertIcon["default"],
-    color: "white",
-    size: "sm"
+    size: "md"
   })), (0, _react2.jsx)(_index.Menu, null, (0, _react2.jsx)(_collections.Item, {
     key: "enable"
   }, "Enable user"), (0, _react2.jsx)(_collections.Item, {
@@ -273,7 +269,7 @@ var Default = function Default() {
       onPanelClose = _useOverlayPanelState.onClose;
 
   var panelTriggerRef = (0, _react.useRef)();
-  var heading = 'Title of the Page';
+  var heading = 'Users';
   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() {
@@ -296,28 +292,28 @@ var Default = function Default() {
 
   return (0, _react2.jsx)(_index.Box, {
     sx: sx.wrapper
-  }, (0, _react2.jsx)(_index.Box, {
-    mb: "md"
-  }, (0, _react2.jsx)(_index.Box, {
+  }, (0, _react2.jsx)(_index.Box, null, (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
+    fontSize: "xx",
+    fontWeight: 3,
+    fontColor: "text.primary"
   }, 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: "xs"
+    size: "sm"
   }))), (0, _react2.jsx)(_index.Text, {
-    variant: "bodyWeak"
+    fontSize: "sm",
+    color: "text.secondary",
+    fontWeight: 0,
+    width: "800px"
   }, description, (0, _react2.jsx)(_index.Link, {
     href: "https://uilibrary.ping-eng.com/",
     sx: {
@@ -325,10 +321,13 @@ var Default = function Default() {
     }
   }, " Learn more"))), (0, _react2.jsx)(_index.SearchField, {
     position: "fixed",
-    mb: "sm",
+    mb: "lg",
+    mt: "lg",
     width: "400px",
     placeholder: "Search",
     "aria-label": "search"
+  }), (0, _react2.jsx)(_index.Separator, {
+    margin: 0
   }), (0, _react2.jsx)(_index.ListView, {
     items: items,
     onSelectionChange: selectItemHandler,
@@ -338,7 +337,7 @@ var Default = function Default() {
     return (0, _react2.jsx)(_collections.Item, {
       key: item.email,
       textValue: item.email,
-      hasSeparator: item.hasSeparator,
+      hasSeparator: true,
       listItemProps: {
         pl: 15,
         minHeight: 75

package/lib/recipes/ListAndPanel.stories.js

@@ -8,9 +8,8 @@ import CloseIcon from 'mdi-react/CloseIcon';
 import MoreVertIcon from 'mdi-react/MoreVertIcon';
 import PencilIcon from 'mdi-react/PencilIcon';
 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 { 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";
 export default {
   title: 'Recipes/List with Panel'
@@ -25,12 +24,14 @@ var items = [{
   email: 'idixie2@elegantthemes.com',
   firstName: 'Cacilia',
   lastName: 'Dixie',
-  avatar: pingImg
+  hasIcon: true,
+  avatar: AccountIcon
 }, {
   email: 'dfowler0@rambler.ru',
   firstName: 'Stavro',
   lastName: 'Fowler',
-  avatar: pingImg
+  hasIcon: true,
+  avatar: AccountIcon
 }, {
   email: 'jgolde8@jimdo.com',
   firstName: 'Celisse',
@@ -90,8 +91,7 @@ var items = [{
   firstName: 'Andromache',
   lastName: 'Idel',
   hasIcon: true,
-  avatar: AccountIcon,
-  hasSeparator: false
+  avatar: AccountIcon
 }];
 var sx = {
   wrapper: {
@@ -144,7 +144,7 @@ var sx = {
       alignItems: 'center'
     },
     icon: {
-      mr: 'sm',
+      mr: 'md',
       alignSelf: 'center',
       color: 'accent.40'
     },
@@ -154,7 +154,8 @@ var sx = {
       mr: 'md'
     },
     title: {
-      alignSelf: 'start'
+      alignSelf: 'start',
+      fontSize: 'md'
     },
     subtitle: {
       fontSize: 'sm',
@@ -177,13 +178,10 @@ var ListElement = function ListElement(_ref) {
   }, ___EmotionJSX(Box, {
     isRow: true,
     sx: sx.listElement.iconWrapper
-  }, item.hasIcon ? ___EmotionJSX(Icon, {
+  }, ___EmotionJSX(Icon, {
     icon: item.avatar,
-    size: 24,
+    size: "md",
     sx: sx.listElement.icon
-  }) : ___EmotionJSX(Avatar, {
-    sx: sx.listElement.avatar,
-    src: item.avatar
   }), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
     variant: "bodyStrong",
     sx: sx.listElement.title
@@ -203,8 +201,7 @@ var ListElement = function ListElement(_ref) {
     mr: onClosePanel ? 'sm' : 0
   }, ___EmotionJSX(Icon, {
     icon: MoreVertIcon,
-    color: "white",
-    size: "sm"
+    size: "md"
   })), ___EmotionJSX(Menu, null, ___EmotionJSX(Item, {
     key: "enable"
   }, "Enable user"), ___EmotionJSX(Item, {
@@ -236,7 +233,7 @@ export var Default = function Default() {
       onPanelClose = _useOverlayPanelState.onClose;
 
   var panelTriggerRef = useRef();
-  var heading = 'Title of the Page';
+  var heading = 'Users';
   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() {
@@ -259,28 +256,28 @@ export var Default = function Default() {
 
   return ___EmotionJSX(Box, {
     sx: sx.wrapper
-  }, ___EmotionJSX(Box, {
-    mb: "md"
-  }, ___EmotionJSX(Box, {
+  }, ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
     align: "center",
     isRow: true,
     mb: "xs",
     role: "heading",
     "aria-level": "1"
   }, ___EmotionJSX(Text, {
-    variant: "title",
-    fontWeight: 3
+    fontSize: "xx",
+    fontWeight: 3,
+    fontColor: "text.primary"
   }, heading), ___EmotionJSX(IconButton, {
     "aria-label": "icon button",
     ml: "sm",
-    mt: "3px",
     variant: "inverted"
   }, ___EmotionJSX(Icon, {
     icon: PlusIcon,
-    color: "white",
-    size: "xs"
+    size: "sm"
   }))), ___EmotionJSX(Text, {
-    variant: "bodyWeak"
+    fontSize: "sm",
+    color: "text.secondary",
+    fontWeight: 0,
+    width: "800px"
   }, description, ___EmotionJSX(Link, {
     href: "https://uilibrary.ping-eng.com/",
     sx: {
@@ -288,10 +285,13 @@ export var Default = function Default() {
     }
   }, " Learn more"))), ___EmotionJSX(SearchField, {
     position: "fixed",
-    mb: "sm",
+    mb: "lg",
+    mt: "lg",
     width: "400px",
     placeholder: "Search",
     "aria-label": "search"
+  }), ___EmotionJSX(Separator, {
+    margin: 0
   }), ___EmotionJSX(ListView, {
     items: items,
     onSelectionChange: selectItemHandler,
@@ -301,7 +301,7 @@ export var Default = function Default() {
     return ___EmotionJSX(Item, {
       key: item.email,
       textValue: item.email,
-      hasSeparator: item.hasSeparator,
+      hasSeparator: true,
       listItemProps: {
         pl: 15,
         minHeight: 75

package/package.json

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