@pingux/astro 1.26.1-alpha.6 → 1.26.1-alpha.7

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

@@ -117,6 +117,44 @@ var items = [{
   logo: _EmailIcon["default"],
   id: '8'
 }];
+var sx = {
+  appBox: {
+    alignSelf: 'center',
+    maxWidth: '260px'
+  },
+  appTitle: {
+    alignSelf: 'center',
+    fontWeight: '700',
+    mr: 'auto'
+  },
+  appDesc: {
+    alignSelf: 'center',
+    fontSize: '15px',
+    mr: 'auto'
+  },
+  pinIconBox: {
+    alignSelf: 'center',
+    ml: 'md',
+    '&.is-hovered': {
+      bg: 'transparent'
+    },
+    '&.is-pressed': {
+      'path': {
+        fill: 'active'
+      }
+    }
+  },
+  listViewRow: {
+    bg: 'red',
+    padding: '-4px'
+  },
+  listViewItem: {
+    bg: 'white',
+    '&.is-hovered': {
+      bg: 'accent.99'
+    }
+  }
+};
 
 var Default = function Default() {
   var buttonRef = (0, _react.useRef)();
@@ -197,42 +235,21 @@ var Default = function Default() {
       ml: "-10px"
     }), (0, _react2.jsx)(_index.Box, {
       alignSelf: "center",
-      sx: {
-        maxWidth: '260px'
-      }
+      sx: sx.appBox
     }, (0, _react2.jsx)(_index.Text, {
       variant: "itemTitle",
-      alignSelf: "center",
-      mr: "auto",
-      sx: {
-        fontWeight: '700'
-      }
+      sx: sx.appTitle
     }, item.application), (0, _react2.jsx)(_index.Text, {
       variant: "itemSubtitle",
-      alignSelf: "center",
-      mr: "auto",
-      sx: {
-        fontSize: '15px'
-      }
+      sx: sx.appDesc
     }, item.description)), (0, _react2.jsx)(_index.Box, {
       alignSelf: "center"
     }, (0, _react2.jsx)(_index.IconButton, {
       "aria-label": "Pin ".concat(item.application),
-      ml: "md",
-      alignSelf: "center",
       onPress: function onPress() {
         return onPinPress();
       },
-      sx: {
-        '&.is-hovered': {
-          bg: 'transparent'
-        },
-        '&.is-pressed': {
-          'path': {
-            fill: 'active'
-          }
-        }
-      }
+      sx: sx.pinIconBox
     }, (0, _react2.jsx)(_index.Icon, {
       icon: _PinIcon["default"],
       sx: {
@@ -287,10 +304,7 @@ var Default = function Default() {
       return setIsOpen(!isOpen);
     },
     rowProps: {
-      sx: {
-        bg: 'red',
-        padding: '-4px'
-      }
+      sx: sx.listViewRow
     },
     padding: "-4px"
   }, function (item) {
@@ -300,12 +314,7 @@ var Default = function Default() {
       "data-id": item.key,
       hasSeparator: false,
       listItemProps: {
-        sx: {
-          bg: 'white',
-          '&.is-hovered': {
-            bg: 'accent.99'
-          }
-        }
+        sx: sx.listViewItem
       }
     }, (0, _react2.jsx)(InnerHtml, {
       item: item

package/lib/recipes/ApplicationSearchDropdown.stories.js

@@ -76,6 +76,44 @@ var items = [{
   logo: Email,
   id: '8'
 }];
+var sx = {
+  appBox: {
+    alignSelf: 'center',
+    maxWidth: '260px'
+  },
+  appTitle: {
+    alignSelf: 'center',
+    fontWeight: '700',
+    mr: 'auto'
+  },
+  appDesc: {
+    alignSelf: 'center',
+    fontSize: '15px',
+    mr: 'auto'
+  },
+  pinIconBox: {
+    alignSelf: 'center',
+    ml: 'md',
+    '&.is-hovered': {
+      bg: 'transparent'
+    },
+    '&.is-pressed': {
+      'path': {
+        fill: 'active'
+      }
+    }
+  },
+  listViewRow: {
+    bg: 'red',
+    padding: '-4px'
+  },
+  listViewItem: {
+    bg: 'white',
+    '&.is-hovered': {
+      bg: 'accent.99'
+    }
+  }
+};
 export var Default = function Default() {
   var buttonRef = useRef();
   var popoverRef = useRef();
@@ -155,42 +193,21 @@ export var Default = function Default() {
       ml: "-10px"
     }), ___EmotionJSX(Box, {
       alignSelf: "center",
-      sx: {
-        maxWidth: '260px'
-      }
+      sx: sx.appBox
     }, ___EmotionJSX(Text, {
       variant: "itemTitle",
-      alignSelf: "center",
-      mr: "auto",
-      sx: {
-        fontWeight: '700'
-      }
+      sx: sx.appTitle
     }, item.application), ___EmotionJSX(Text, {
       variant: "itemSubtitle",
-      alignSelf: "center",
-      mr: "auto",
-      sx: {
-        fontSize: '15px'
-      }
+      sx: sx.appDesc
     }, item.description)), ___EmotionJSX(Box, {
       alignSelf: "center"
     }, ___EmotionJSX(IconButton, {
       "aria-label": "Pin ".concat(item.application),
-      ml: "md",
-      alignSelf: "center",
       onPress: function onPress() {
         return onPinPress();
       },
-      sx: {
-        '&.is-hovered': {
-          bg: 'transparent'
-        },
-        '&.is-pressed': {
-          'path': {
-            fill: 'active'
-          }
-        }
-      }
+      sx: sx.pinIconBox
     }, ___EmotionJSX(Icon, {
       icon: Pin,
       sx: {
@@ -245,10 +262,7 @@ export var Default = function Default() {
       return setIsOpen(!isOpen);
     },
     rowProps: {
-      sx: {
-        bg: 'red',
-        padding: '-4px'
-      }
+      sx: sx.listViewRow
     },
     padding: "-4px"
   }, function (item) {
@@ -258,12 +272,7 @@ export var Default = function Default() {
       "data-id": item.key,
       hasSeparator: false,
       listItemProps: {
-        sx: {
-          bg: 'white',
-          '&.is-hovered': {
-            bg: 'accent.99'
-          }
-        }
+        sx: sx.listViewItem
       }
     }, ___EmotionJSX(InnerHtml, {
       item: item

package/package.json

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