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

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/OneWayToBidirectionalArrow.stories.js

@@ -19,6 +19,29 @@ var items = [{
   name: 'Third Option',
   id: '3'
 }];
+var sx = {
+  actionIcon: {
+    color: 'neutral.30'
+  },
+  dragVerticalIcon: {
+    color: 'neutral.50'
+  },
+  iconButton: {
+    ml: 'xs'
+  },
+  iconButtonToggleContainer: {
+    mx: 'sm',
+    flexShrink: 0
+  },
+  iconContainer: {
+    alignItems: 'center',
+    ml: '12px',
+    mr: '12px'
+  },
+  outerContainer: {
+    alignItems: 'center'
+  }
+};
 export var Default = function Default() {
   var CustomOnSvg = function CustomOnSvg(props) {
     return ___EmotionJSX("svg", _extends({
@@ -66,24 +89,22 @@ export var Default = function Default() {
   };
 
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
-    sx: {
-      alignItems: 'center'
-    },
+    sx: sx.outerContainer,
     isRow: true
   }, ___EmotionJSX(Icon, {
     icon: DragVerticalIcon,
     size: 25,
-    color: "neutral.50"
+    sx: sx.dragVerticalIcon
   }), ___EmotionJSX(ComboBoxField, {
     items: items,
     defaultSelectedKey: "Last Name",
+    "aria-label": "Row one value",
     containerProps: {
       width: '275px'
     },
     labelProps: {
       mb: 0
     },
-    "aria-label": "Row one value",
     controlProps: {
       'aria-label': 'test'
     }
@@ -93,10 +114,7 @@ export var Default = function Default() {
       "data-id": item.name
     }, item.name);
   }), ___EmotionJSX(Box, {
-    sx: {
-      mx: 'sm',
-      flexShrink: 0
-    }
+    sx: sx.iconButtonToggleContainer
   }, ___EmotionJSX(IconButtonToggle, {
     toggledIcon: CustomOnSvg,
     defaultIcon: CustomOffSvg,
@@ -126,35 +144,29 @@ export var Default = function Default() {
     }, item.name);
   }), ___EmotionJSX(Box, {
     isRow: true,
-    alignItems: "center",
-    sx: {
-      marginLeft: '12px',
-      marginRight: '12px'
-    }
+    sx: sx.iconContainer
   }, ___EmotionJSX(IconButton, {
     "aria-label": "Edit"
   }, ___EmotionJSX(Icon, {
     icon: CogsIcon,
-    color: "neutral.30",
+    sx: sx.actionIcon,
     size: 20,
     title: "edit icon"
   })), ___EmotionJSX(IconButton, {
-    ml: "5px",
+    sx: sx.iconButton,
     "aria-label": "Delete"
   }, ___EmotionJSX(Icon, {
     icon: DeleteIcon,
-    color: "neutral.30",
+    sx: sx.actionIcon,
     size: 20,
     title: "delete icon"
   })))), ___EmotionJSX(Box, {
-    sx: {
-      alignItems: 'center'
-    },
+    sx: sx.outerContainer,
     isRow: true
   }, ___EmotionJSX(Icon, {
     icon: DragVerticalIcon,
     size: 25,
-    color: "neutral.50"
+    sx: sx.dragVerticalIcon
   }), ___EmotionJSX(ComboBoxField, {
     items: items,
     defaultSelectedKey: "Last Name",
@@ -174,10 +186,7 @@ export var Default = function Default() {
       "data-id": item.name
     }, item.name);
   }), ___EmotionJSX(Box, {
-    sx: {
-      mx: 'sm',
-      flexShrink: 0
-    }
+    sx: sx.iconButtonToggleContainer
   }, ___EmotionJSX(IconButtonToggle, {
     toggledIcon: CustomRightSvg,
     defaultIcon: CustomRightSvg,
@@ -207,24 +216,20 @@ export var Default = function Default() {
     }, item.name);
   }), ___EmotionJSX(Box, {
     isRow: true,
-    alignItems: "center",
-    sx: {
-      marginLeft: '12px',
-      marginRight: '12px'
-    }
+    sx: sx.iconContainer
   }, ___EmotionJSX(IconButton, {
     "aria-label": "Edit"
   }, ___EmotionJSX(Icon, {
     icon: CogsIcon,
-    color: "neutral.30",
+    sx: sx.actionIcon,
     size: 20,
     title: "edit icon"
   })), ___EmotionJSX(IconButton, {
-    ml: "5px",
+    sx: sx.iconButton,
     "aria-label": "Delete"
   }, ___EmotionJSX(Icon, {
     icon: DeleteIcon,
-    color: "neutral.30",
+    sx: sx.actionIcon,
     size: 20,
     title: "delete icon"
   })))));

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)));
+};