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

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

@@ -128,44 +128,106 @@ var items = [{
   avatar: _AccountIcon["default"],
   hasSeparator: false
 }];
+var sx = {
+  wrapper: {
+    px: 'lg',
+    py: 'lg',
+    bg: 'accent.99',
+    height: '900px',
+    overflowY: 'scroll'
+  },
+  searchField: {
+    position: 'fixed',
+    mb: 'sm',
+    width: '400px'
+  },
+  listElementWrapper: {
+    px: 'md',
+    bg: 'accent.99',
+    justifyContent: 'center'
+  },
+  separator: {
+    bg: 'accent.90'
+  },
+  tabsWrapper: {
+    px: 'lg',
+    pt: 'xs'
+  },
+  iconButton: {
+    position: 'absolute',
+    top: 0,
+    right: 0
+  },
+  itemLabel: {
+    fontSize: 'sm',
+    fontWeight: 3,
+    lineHeight: '16px',
+    mb: 'xs'
+  },
+  itemValue: {
+    fontWeight: 0,
+    lineHeight: '18px',
+    variant: 'base',
+    mb: 'md'
+  },
+  listElement: {
+    wrapper: {
+      minHeight: '60px'
+    },
+    iconWrapper: {
+      mr: 'auto',
+      alignItems: 'center'
+    },
+    icon: {
+      mr: 'sm',
+      alignSelf: 'center',
+      color: 'accent.40'
+    },
+    avatar: {
+      width: '25px',
+      height: '25px',
+      mr: 'md'
+    },
+    title: {
+      alignSelf: 'start'
+    },
+    subtitle: {
+      fontSize: 'sm',
+      my: '1px',
+      lineHeight: '16px',
+      alignSelf: 'start'
+    },
+    menuWrapper: {
+      alignSelf: 'center'
+    }
+  }
+};
 
 var ListElement = function ListElement(_ref) {
   var item = _ref.item,
       onClosePanel = _ref.onClosePanel;
   return (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    minHeight: "60px"
+    sx: sx.listElement.wrapper
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    mr: "auto",
-    alignItems: "center"
+    sx: sx.listElement.iconWrapper
   }, item.hasIcon ? (0, _react2.jsx)(_index.Icon, {
     icon: item.avatar,
-    alignSelf: "center",
     size: 24,
-    mr: "sm",
-    color: "accent.40"
+    sx: sx.listElement.icon
   }) : (0, _react2.jsx)(_index.Avatar, {
-    mr: "md",
-    sx: {
-      width: '25px',
-      height: '25px'
-    },
+    sx: sx.listElement.avatar,
     src: item.avatar
   }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
     variant: "bodyStrong",
-    alignSelf: "start"
+    sx: sx.listElement.title
   }, item.lastName, ", ", item.firstName), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontSize: 'sm',
-      my: '1px',
-      lineHeight: '16px'
-    },
     variant: "subtitle",
-    alignSelf: "start"
+    sx: sx.listElement.subtitle
   }, item.email))), (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    alignSelf: "center"
+    sx: sx.listElement.menuWrapper
   }, (0, _react2.jsx)(_index.SwitchField, {
     "aria-label": "active user",
     isDefaultSelected: true,
@@ -222,11 +284,7 @@ var Default = function Default() {
   };
 
   return (0, _react2.jsx)(_index.Box, {
-    px: "lg",
-    py: "lg",
-    bg: "accent.99",
-    height: "900px",
-    overflowY: "scroll"
+    sx: sx.wrapper
   }, (0, _react2.jsx)(_index.SearchField, {
     position: "fixed",
     mb: "sm",
@@ -260,18 +318,15 @@ var Default = function Default() {
     restoreFocus: true,
     autoFocus: true
   }, (0, _react2.jsx)(_index.Box, {
-    px: "md",
-    bg: "accent.99",
-    justifyContent: "center"
+    sx: sx.listElementWrapper
   }, (0, _react2.jsx)(ListElement, {
     item: selectedItemId >= 0 ? items[selectedItemId] : [],
     onClosePanel: closePanelHandler
   })), (0, _react2.jsx)(_index.Separator, {
     margin: 0,
-    bg: "accent.90"
+    sx: sx.separator
   }), (0, _react2.jsx)(_index.Box, {
-    px: "lg",
-    pt: "xs"
+    sx: sx.tabsWrapper
   }, (0, _react2.jsx)(_index.Tabs, {
     tabListProps: {
       justifyContent: 'center'
@@ -285,73 +340,33 @@ var Default = function Default() {
     title: "Profile"
   }, selectedItemId >= 0 && (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.IconButton, {
     variant: "inverted",
-    sx: {
-      position: 'absolute',
-      top: 0,
-      right: 0
-    }
+    sx: sx.iconButton
   }, (0, _react2.jsx)(_PencilIcon["default"], {
     size: 20
   })), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontSize: 'sm',
-      fontWeight: 3,
-      lineHeight: '16px'
-    },
-    variant: "base",
-    mb: "xs"
+    sx: sx.itemLabel,
+    variant: "base"
   }, "Full Name"), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontWeight: 0,
-      lineHeight: '18px'
-    },
-    variant: "base",
-    mb: "md"
+    sx: sx.itemValue,
+    variant: "base"
   }, items[selectedItemId].firstName, " ", items[selectedItemId].lastName), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontSize: 'sm',
-      fontWeight: 3,
-      lineHeight: '16px'
-    },
-    variant: "base",
-    mb: "xs"
+    sx: sx.itemLabel,
+    variant: "base"
   }, "First Name"), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontWeight: 0,
-      lineHeight: '18px'
-    },
-    variant: "base",
-    mb: "md"
+    sx: sx.itemValue,
+    variant: "base"
   }, items[selectedItemId].firstName), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontSize: 'sm',
-      fontWeight: 3,
-      lineHeight: '16px'
-    },
-    variant: "base",
-    mb: "xs"
+    sx: sx.itemLabel,
+    variant: "base"
   }, "Last Name"), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontWeight: 0,
-      lineHeight: '18px'
-    },
-    variant: "base",
-    mb: "md"
+    sx: sx.itemValue,
+    variant: "base"
   }, items[selectedItemId].lastName), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontSize: 'sm',
-      fontWeight: 3,
-      lineHeight: '16px'
-    },
-    variant: "base",
-    mb: "xs"
+    sx: sx.itemLabel,
+    variant: "base"
   }, "Email"), (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontWeight: 0,
-      lineHeight: '18px'
-    },
-    variant: "base",
-    mb: "md"
+    sx: sx.itemValue,
+    variant: "base"
   }, items[selectedItemId].email))), (0, _react2.jsx)(_index.Tab, {
     title: "Group Memberships"
   }, (0, _react2.jsx)(_index.Text, null, "Group Memberships")), (0, _react2.jsx)(_index.Tab, {

package/lib/recipes/ListAndPanel.stories.js

@@ -92,44 +92,106 @@ var items = [{
   avatar: AccountIcon,
   hasSeparator: false
 }];
+var sx = {
+  wrapper: {
+    px: 'lg',
+    py: 'lg',
+    bg: 'accent.99',
+    height: '900px',
+    overflowY: 'scroll'
+  },
+  searchField: {
+    position: 'fixed',
+    mb: 'sm',
+    width: '400px'
+  },
+  listElementWrapper: {
+    px: 'md',
+    bg: 'accent.99',
+    justifyContent: 'center'
+  },
+  separator: {
+    bg: 'accent.90'
+  },
+  tabsWrapper: {
+    px: 'lg',
+    pt: 'xs'
+  },
+  iconButton: {
+    position: 'absolute',
+    top: 0,
+    right: 0
+  },
+  itemLabel: {
+    fontSize: 'sm',
+    fontWeight: 3,
+    lineHeight: '16px',
+    mb: 'xs'
+  },
+  itemValue: {
+    fontWeight: 0,
+    lineHeight: '18px',
+    variant: 'base',
+    mb: 'md'
+  },
+  listElement: {
+    wrapper: {
+      minHeight: '60px'
+    },
+    iconWrapper: {
+      mr: 'auto',
+      alignItems: 'center'
+    },
+    icon: {
+      mr: 'sm',
+      alignSelf: 'center',
+      color: 'accent.40'
+    },
+    avatar: {
+      width: '25px',
+      height: '25px',
+      mr: 'md'
+    },
+    title: {
+      alignSelf: 'start'
+    },
+    subtitle: {
+      fontSize: 'sm',
+      my: '1px',
+      lineHeight: '16px',
+      alignSelf: 'start'
+    },
+    menuWrapper: {
+      alignSelf: 'center'
+    }
+  }
+};
 
 var ListElement = function ListElement(_ref) {
   var item = _ref.item,
       onClosePanel = _ref.onClosePanel;
   return ___EmotionJSX(Box, {
     isRow: true,
-    minHeight: "60px"
+    sx: sx.listElement.wrapper
   }, ___EmotionJSX(Box, {
     isRow: true,
-    mr: "auto",
-    alignItems: "center"
+    sx: sx.listElement.iconWrapper
   }, item.hasIcon ? ___EmotionJSX(Icon, {
     icon: item.avatar,
-    alignSelf: "center",
     size: 24,
-    mr: "sm",
-    color: "accent.40"
+    sx: sx.listElement.icon
   }) : ___EmotionJSX(Avatar, {
-    mr: "md",
-    sx: {
-      width: '25px',
-      height: '25px'
-    },
+    sx: sx.listElement.avatar,
     src: item.avatar
   }), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
     variant: "bodyStrong",
-    alignSelf: "start"
+    sx: sx.listElement.title
   }, item.lastName, ", ", item.firstName), ___EmotionJSX(Text, {
-    sx: {
-      fontSize: 'sm',
-      my: '1px',
-      lineHeight: '16px'
-    },
     variant: "subtitle",
-    alignSelf: "start"
+    sx: sx.listElement.subtitle
   }, item.email))), ___EmotionJSX(Box, {
     isRow: true,
-    alignSelf: "center"
+    sx: sx.listElement.menuWrapper
   }, ___EmotionJSX(SwitchField, {
     "aria-label": "active user",
     isDefaultSelected: true,
@@ -186,11 +248,7 @@ export var Default = function Default() {
   };
 
   return ___EmotionJSX(Box, {
-    px: "lg",
-    py: "lg",
-    bg: "accent.99",
-    height: "900px",
-    overflowY: "scroll"
+    sx: sx.wrapper
   }, ___EmotionJSX(SearchField, {
     position: "fixed",
     mb: "sm",
@@ -224,18 +282,15 @@ export var Default = function Default() {
     restoreFocus: true,
     autoFocus: true
   }, ___EmotionJSX(Box, {
-    px: "md",
-    bg: "accent.99",
-    justifyContent: "center"
+    sx: sx.listElementWrapper
   }, ___EmotionJSX(ListElement, {
     item: selectedItemId >= 0 ? items[selectedItemId] : [],
     onClosePanel: closePanelHandler
   })), ___EmotionJSX(Separator, {
     margin: 0,
-    bg: "accent.90"
+    sx: sx.separator
   }), ___EmotionJSX(Box, {
-    px: "lg",
-    pt: "xs"
+    sx: sx.tabsWrapper
   }, ___EmotionJSX(Tabs, {
     tabListProps: {
       justifyContent: 'center'
@@ -249,73 +304,33 @@ export var Default = function Default() {
     title: "Profile"
   }, selectedItemId >= 0 && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(IconButton, {
     variant: "inverted",
-    sx: {
-      position: 'absolute',
-      top: 0,
-      right: 0
-    }
+    sx: sx.iconButton
   }, ___EmotionJSX(PencilIcon, {
     size: 20
   })), ___EmotionJSX(Text, {
-    sx: {
-      fontSize: 'sm',
-      fontWeight: 3,
-      lineHeight: '16px'
-    },
-    variant: "base",
-    mb: "xs"
+    sx: sx.itemLabel,
+    variant: "base"
   }, "Full Name"), ___EmotionJSX(Text, {
-    sx: {
-      fontWeight: 0,
-      lineHeight: '18px'
-    },
-    variant: "base",
-    mb: "md"
+    sx: sx.itemValue,
+    variant: "base"
   }, items[selectedItemId].firstName, " ", items[selectedItemId].lastName), ___EmotionJSX(Text, {
-    sx: {
-      fontSize: 'sm',
-      fontWeight: 3,
-      lineHeight: '16px'
-    },
-    variant: "base",
-    mb: "xs"
+    sx: sx.itemLabel,
+    variant: "base"
   }, "First Name"), ___EmotionJSX(Text, {
-    sx: {
-      fontWeight: 0,
-      lineHeight: '18px'
-    },
-    variant: "base",
-    mb: "md"
+    sx: sx.itemValue,
+    variant: "base"
   }, items[selectedItemId].firstName), ___EmotionJSX(Text, {
-    sx: {
-      fontSize: 'sm',
-      fontWeight: 3,
-      lineHeight: '16px'
-    },
-    variant: "base",
-    mb: "xs"
+    sx: sx.itemLabel,
+    variant: "base"
   }, "Last Name"), ___EmotionJSX(Text, {
-    sx: {
-      fontWeight: 0,
-      lineHeight: '18px'
-    },
-    variant: "base",
-    mb: "md"
+    sx: sx.itemValue,
+    variant: "base"
   }, items[selectedItemId].lastName), ___EmotionJSX(Text, {
-    sx: {
-      fontSize: 'sm',
-      fontWeight: 3,
-      lineHeight: '16px'
-    },
-    variant: "base",
-    mb: "xs"
+    sx: sx.itemLabel,
+    variant: "base"
   }, "Email"), ___EmotionJSX(Text, {
-    sx: {
-      fontWeight: 0,
-      lineHeight: '18px'
-    },
-    variant: "base",
-    mb: "md"
+    sx: sx.itemValue,
+    variant: "base"
   }, items[selectedItemId].email))), ___EmotionJSX(Tab, {
     title: "Group Memberships"
   }, ___EmotionJSX(Text, null, "Group Memberships")), ___EmotionJSX(Tab, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.27.0-alpha.2",
+  "version": "1.27.0-alpha.3",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",