@pingux/astro 2.30.0-alpha.2 → 2.30.0-alpha.3

package/lib/cjs/recipes/{CollapsiblePanel.stories.hidden.js → CollapsiblePanel.stories.js}

@@ -108,9 +108,6 @@ var data = [{
 var sx = {
   listViewItem: {
     bg: 'white',
-    width: '100%',
-    justifyContent: 'space-between',
-    alignItems: 'center',
     '&.is-hovered': {
       bg: 'accent.99'
     }
@@ -122,8 +119,7 @@ var sx = {
     minHeight: 22,
     justifyContent: 'center',
     alignItems: 'center',
-    p: 'xs',
-    maxWidth: '50%'
+    p: 'xs'
   },
   defaultSelectedTitle: {
     fontSize: 'sm',
@@ -237,48 +233,31 @@ var Default = function Default() {
     mr: "sm",
     onChange: setSearchValue
   }), (0, _react2.jsx)(_index.ListView, {
-    items: filteredItems,
-    style: {
-      width: '100%',
-      outline: 'none'
-    }
+    items: filteredItems
   }, function (item) {
     return (0, _react2.jsx)(_index.Item, {
       key: item.key,
       textValue: item.name,
-      "data-id": item.key,
-      listItemProps: {
-        isRow: true,
-        sx: sx.listViewItem
-      }
-    }, (0, _react2.jsx)(_index.Box, {
-      isRow: true
-    }, (0, _react2.jsx)(_index.Icon, {
-      icon: _AccountGroupIcon["default"],
-      alignSelf: "center",
-      mr: "md",
-      color: "accent.40",
-      size: 25,
-      flexShrink: 1,
-      title: {
-        name: 'Account Group Icon'
-      }
-    }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
-      isRow: true
-    }, (0, _react2.jsx)(_index.Text, {
-      variant: "listTitle",
-      mb: "xs",
-      mr: "xs"
-    }, item.name), (0, _react2.jsx)(_index.Badge, {
-      label: item.badgeValue,
-      bg: "accent.99",
-      textColor: "text.secondary",
-      sx: {
-        minWidth: 'max-content'
+      "data-id": item.key
+    }, (0, _react2.jsx)(_index.ListViewItem, {
+      sx: sx.listViewItem,
+      data: {
+        icon: _AccountGroupIcon["default"],
+        text: item.name,
+        subtext: item.subtitle
+      },
+      slots: {
+        rightOfData: (0, _react2.jsx)(_index.Badge, {
+          label: item.badgeValue,
+          bg: "accent.99",
+          textColor: "text.secondary",
+          sx: {
+            minWidth: 'max-content'
+          },
+          ml: "xs"
+        })
       }
-    })), (0, _react2.jsx)(_index.Text, {
-      variant: "listSubtitle"
-    }, item.subtitle))), item.isDefaultSelected ? (0, _react2.jsx)(_index.Box, {
+    }, item.isDefaultSelected ? (0, _react2.jsx)(_index.Box, {
       isRow: true,
       sx: sx.defaultSelectedBox
     }, (0, _react2.jsx)(_index.Icon, {
@@ -308,7 +287,7 @@ var Default = function Default() {
       onClick: function onClick() {
         return checkBoxRef.current.focus();
       }
-    }));
+    })));
   })), (0, _react2.jsx)(_index.CollapsiblePanel, {
     items: selectedItems,
     selectedFilterCount: selectedItems.length.toString(),

package/lib/recipes/{CollapsiblePanel.stories.hidden.js → CollapsiblePanel.stories.js}

@@ -21,7 +21,7 @@ import ChevronRightIcon from '@pingux/mdi-react/ChevronRightIcon';
 import Clear from '@pingux/mdi-react/CloseIcon';
 import SearchIcon from '@pingux/mdi-react/SearchIcon';
 import { useFilter } from '@react-aria/i18n';
-import { Badge, Box, Breadcrumbs, CheckboxField, CollapsiblePanel, CollapsiblePanelItem, Icon, IconButton, Item, ListView, SearchField, Text } from '../index';
+import { Badge, Box, Breadcrumbs, CheckboxField, CollapsiblePanel, CollapsiblePanelItem, Icon, IconButton, Item, ListView, ListViewItem, SearchField, Text } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/CollapsiblePanel with List'
@@ -95,9 +95,6 @@ var data = [{
 var sx = {
   listViewItem: {
     bg: 'white',
-    width: '100%',
-    justifyContent: 'space-between',
-    alignItems: 'center',
     '&.is-hovered': {
       bg: 'accent.99'
     }
@@ -109,8 +106,7 @@ var sx = {
     minHeight: 22,
     justifyContent: 'center',
     alignItems: 'center',
-    p: 'xs',
-    maxWidth: '50%'
+    p: 'xs'
   },
   defaultSelectedTitle: {
     fontSize: 'sm',
@@ -224,48 +220,31 @@ export var Default = function Default() {
     mr: "sm",
     onChange: setSearchValue
   }), ___EmotionJSX(ListView, {
-    items: filteredItems,
-    style: {
-      width: '100%',
-      outline: 'none'
-    }
+    items: filteredItems
   }, function (item) {
     return ___EmotionJSX(Item, {
       key: item.key,
       textValue: item.name,
-      "data-id": item.key,
-      listItemProps: {
-        isRow: true,
-        sx: sx.listViewItem
-      }
-    }, ___EmotionJSX(Box, {
-      isRow: true
-    }, ___EmotionJSX(Icon, {
-      icon: AccountGroupIcon,
-      alignSelf: "center",
-      mr: "md",
-      color: "accent.40",
-      size: 25,
-      flexShrink: 1,
-      title: {
-        name: 'Account Group Icon'
-      }
-    }), ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
-      isRow: true
-    }, ___EmotionJSX(Text, {
-      variant: "listTitle",
-      mb: "xs",
-      mr: "xs"
-    }, item.name), ___EmotionJSX(Badge, {
-      label: item.badgeValue,
-      bg: "accent.99",
-      textColor: "text.secondary",
-      sx: {
-        minWidth: 'max-content'
+      "data-id": item.key
+    }, ___EmotionJSX(ListViewItem, {
+      sx: sx.listViewItem,
+      data: {
+        icon: AccountGroupIcon,
+        text: item.name,
+        subtext: item.subtitle
+      },
+      slots: {
+        rightOfData: ___EmotionJSX(Badge, {
+          label: item.badgeValue,
+          bg: "accent.99",
+          textColor: "text.secondary",
+          sx: {
+            minWidth: 'max-content'
+          },
+          ml: "xs"
+        })
       }
-    })), ___EmotionJSX(Text, {
-      variant: "listSubtitle"
-    }, item.subtitle))), item.isDefaultSelected ? ___EmotionJSX(Box, {
+    }, item.isDefaultSelected ? ___EmotionJSX(Box, {
       isRow: true,
       sx: sx.defaultSelectedBox
     }, ___EmotionJSX(Icon, {
@@ -295,7 +274,7 @@ export var Default = function Default() {
       onClick: function onClick() {
         return checkBoxRef.current.focus();
       }
-    }));
+    })));
   })), ___EmotionJSX(CollapsiblePanel, {
     items: selectedItems,
     selectedFilterCount: selectedItems.length.toString(),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.30.0-alpha.2",
+  "version": "2.30.0-alpha.3",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",