@pingux/astro 1.27.0-alpha.14 → 1.27.0-alpha.15

package/lib/recipes/FlippableCaretMenuButton.stories.js

@@ -31,6 +31,40 @@ export default {
   title: 'Recipes/FlippableCaretMenuButton'
 };
 var buttonArray = ['Web App', 'Native App', 'Single Page App', 'Non-Interactive', 'Worker', 'Advanced Configuration', 'Built-in admin console for this environment', 'Built-in Application portal'];
+var sx = {
+  openButton: {
+    height: '30px',
+    borderRadius: 'md',
+    fontSize: '13px',
+    mb: 'sm'
+  },
+  closeIconButton: {
+    position: 'absolute',
+    top: '14px',
+    right: 'sm'
+  },
+  buttonsContainer: {
+    p: 'lg',
+    flexDirection: 'initial !important',
+    alignContent: 'space-between',
+    flexWrap: 'wrap'
+  },
+  selectedButton: {
+    mb: 'sm',
+    mr: '4px',
+    height: '30px',
+    borderRadius: '15px',
+    fontSize: '13px'
+  },
+  unSelectedButton: {
+    mb: 'sm',
+    mr: '4px',
+    borderColor: 'neutral.80',
+    height: '30px',
+    borderRadius: '15px',
+    fontSize: '13px'
+  }
+};
 export var Default = function Default() {
   var buttonRef = useRef();
   var popoverRef = useRef();
@@ -89,14 +123,9 @@ export var Default = function Default() {
 
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Button, {
     ref: buttonRef,
-    mb: "sm",
     variant: "inline",
     onPress: onChange,
-    sx: {
-      height: '30px',
-      borderRadius: '15px',
-      fontSize: '13px'
-    }
+    sx: sx.openButton
   }, ___EmotionJSX(Box, {
     isRow: true,
     alignItems: "center"
@@ -119,36 +148,15 @@ export var Default = function Default() {
     onPress: function onPress() {
       return setIsOpen(false);
     },
-    sx: {
-      position: 'absolute',
-      top: 14,
-      right: 10
-    }
+    sx: sx.closeIconButton
   }, ___EmotionJSX(Icon, {
     icon: CloseIcon
   })), ___EmotionJSX(Box, {
-    sx: {
-      p: 'lg',
-      flexDirection: 'initial !important',
-      alignContent: 'space-between',
-      flexWrap: 'wrap'
-    }
+    sx: sx.buttonsContainer
   }, _mapInstanceProperty(buttonArray).call(buttonArray, function (item) {
     return ___EmotionJSX(Button, {
-      mb: "sm",
       variant: "inline",
-      sx: _includesInstanceProperty(selectedButtons).call(selectedButtons, item) ? {
-        mr: '4px',
-        height: '30px',
-        borderRadius: '15px',
-        fontSize: '13px'
-      } : {
-        mr: '4px',
-        borderColor: 'neutral.80',
-        height: '30px',
-        borderRadius: '15px',
-        fontSize: '13px'
-      },
+      sx: _includesInstanceProperty(selectedButtons).call(selectedButtons, item) ? sx.selectedButton : sx.unSelectedButton,
       key: item,
       onPress: function onPress() {
         return toggleButton(item);

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/lib/recipes/MaskedValue.stories.js

@@ -23,6 +23,13 @@ export default {
     }
   }
 };
+var sx = {
+  showHideButton: {
+    width: 'fit-content',
+    marginLeft: 'sm',
+    alignSelf: 'auto'
+  }
+};
 export var Default = function Default(_ref) {
   var _context;
 
@@ -52,11 +59,7 @@ export var Default = function Default(_ref) {
     onPress: function onPress() {
       return setIsMasked(!isMasked);
     },
-    sx: {
-      width: 'fit-content',
-      marginLeft: 10,
-      alignSelf: 'auto'
-    }
+    sx: sx.showHideButton
   }, ___EmotionJSX(Icon, {
     icon: isMasked ? EyeOffIcon : EyeIcon
   }))));

package/lib/recipes/NeutralInput.stories.js

@@ -4,10 +4,13 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/NeutralCheckboxField'
 };
+var sx = {
+  checkboxColor: {
+    color: 'neutral.10'
+  }
+};
 export var Default = function Default() {
   return ___EmotionJSX(CheckboxField, {
-    controlProps: {
-      color: 'neutral.10'
-    }
+    sx: sx.checkboxColor
   }, "Click me");
 };

package/lib/recipes/PageHeader.stories.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import PlusIcon from 'mdi-react/PlusIcon';
+import { Box, Button, IconButton, Icon, Text } from '../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Recipes/Page Header'
+};
+export var Default = function Default() {
+  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.';
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
+    align: "center",
+    isRow: true,
+    mb: "xs",
+    role: "heading",
+    "aria-level": "1"
+  }, ___EmotionJSX(Text, {
+    variant: "title",
+    fontWeight: 3
+  }, heading), ___EmotionJSX(Button, {
+    variant: "inlinePrimary",
+    ml: "sm"
+  }, ___EmotionJSX(Icon, {
+    icon: PlusIcon,
+    color: "white",
+    size: 13,
+    mr: "4px"
+  }), "\xA0", "Add")), ___EmotionJSX(Text, {
+    variant: "bodyWeak"
+  }, description)), ___EmotionJSX(Box, {
+    mt: "xl"
+  }, ___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)));
+};