@pingux/astro 1.27.0 → 1.28.0

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

@@ -54,6 +54,13 @@ var _default = {
   }
 };
 exports["default"] = _default;
+var sx = {
+  showHideButton: {
+    width: 'fit-content',
+    marginLeft: 'sm',
+    alignSelf: 'auto'
+  }
+};
 
 var Default = function Default(_ref) {
   var _context;
@@ -84,11 +91,7 @@ var Default = function Default(_ref) {
     onPress: function onPress() {
       return setIsMasked(!isMasked);
     },
-    sx: {
-      width: 'fit-content',
-      marginLeft: 10,
-      alignSelf: 'auto'
-    }
+    sx: sx.showHideButton
   }, (0, _react2.jsx)(_index.Icon, {
     icon: isMasked ? _EyeOffOutlineIcon["default"] : _EyeOutlineIcon["default"]
   }))));

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

@@ -20,12 +20,15 @@ var _default = {
   title: 'Recipes/NeutralCheckboxField'
 };
 exports["default"] = _default;
+var sx = {
+  checkboxColor: {
+    color: 'neutral.10'
+  }
+};
 
 var Default = function Default() {
   return (0, _react2.jsx)(_CheckboxField["default"], {
-    controlProps: {
-      color: 'neutral.10'
-    }
+    sx: sx.checkboxColor
   }, "Click me");
 };
 

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

@@ -40,6 +40,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'
+  }
+};
 
 var Default = function Default() {
   var CustomOnSvg = function CustomOnSvg(props) {
@@ -88,24 +111,22 @@ var Default = function Default() {
   };
 
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Box["default"], {
-    sx: {
-      alignItems: 'center'
-    },
+    sx: sx.outerContainer,
     isRow: true
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _DragVerticalIcon["default"],
     size: 25,
-    color: "neutral.50"
+    sx: sx.dragVerticalIcon
   }), (0, _react2.jsx)(_index.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'
     }
@@ -115,10 +136,7 @@ var Default = function Default() {
       "data-id": item.name
     }, item.name);
   }), (0, _react2.jsx)(_Box["default"], {
-    sx: {
-      mx: 'sm',
-      flexShrink: 0
-    }
+    sx: sx.iconButtonToggleContainer
   }, (0, _react2.jsx)(_index.IconButtonToggle, {
     toggledIcon: CustomOnSvg,
     defaultIcon: CustomOffSvg,
@@ -148,35 +166,29 @@ var Default = function Default() {
     }, item.name);
   }), (0, _react2.jsx)(_Box["default"], {
     isRow: true,
-    alignItems: "center",
-    sx: {
-      marginLeft: '12px',
-      marginRight: '12px'
-    }
+    sx: sx.iconContainer
   }, (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "Edit"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _CogsIcon["default"],
-    color: "neutral.30",
+    sx: sx.actionIcon,
     size: 20,
     title: "edit icon"
   })), (0, _react2.jsx)(_index.IconButton, {
-    ml: "5px",
+    sx: sx.iconButton,
     "aria-label": "Delete"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _DeleteIcon["default"],
-    color: "neutral.30",
+    sx: sx.actionIcon,
     size: 20,
     title: "delete icon"
   })))), (0, _react2.jsx)(_Box["default"], {
-    sx: {
-      alignItems: 'center'
-    },
+    sx: sx.outerContainer,
     isRow: true
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _DragVerticalIcon["default"],
     size: 25,
-    color: "neutral.50"
+    sx: sx.dragVerticalIcon
   }), (0, _react2.jsx)(_index.ComboBoxField, {
     items: items,
     defaultSelectedKey: "Last Name",
@@ -196,10 +208,7 @@ var Default = function Default() {
       "data-id": item.name
     }, item.name);
   }), (0, _react2.jsx)(_Box["default"], {
-    sx: {
-      mx: 'sm',
-      flexShrink: 0
-    }
+    sx: sx.iconButtonToggleContainer
   }, (0, _react2.jsx)(_index.IconButtonToggle, {
     toggledIcon: CustomRightSvg,
     defaultIcon: CustomRightSvg,
@@ -229,24 +238,20 @@ var Default = function Default() {
     }, item.name);
   }), (0, _react2.jsx)(_Box["default"], {
     isRow: true,
-    alignItems: "center",
-    sx: {
-      marginLeft: '12px',
-      marginRight: '12px'
-    }
+    sx: sx.iconContainer
   }, (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "Edit"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _CogsIcon["default"],
-    color: "neutral.30",
+    sx: sx.actionIcon,
     size: 20,
     title: "edit icon"
   })), (0, _react2.jsx)(_index.IconButton, {
-    ml: "5px",
+    sx: sx.iconButton,
     "aria-label": "Delete"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _DeleteIcon["default"],
-    color: "neutral.30",
+    sx: sx.actionIcon,
     size: 20,
     title: "delete icon"
   })))));

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

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _PlusIcon = _interopRequireDefault(require("mdi-react/PlusIcon"));
+
+var _index = require("../index");
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Recipes/Page Header'
+};
+exports["default"] = _default;
+
+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 (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
+    align: "center",
+    isRow: true,
+    mb: "xs",
+    role: "heading",
+    "aria-level": "1"
+  }, (0, _react2.jsx)(_index.Text, {
+    variant: "title",
+    fontWeight: 3
+  }, heading), (0, _react2.jsx)(_index.Button, {
+    variant: "inlinePrimary",
+    ml: "sm"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _PlusIcon["default"],
+    color: "white",
+    size: 13,
+    mr: "4px"
+  }), "\xA0", "Add")), (0, _react2.jsx)(_index.Text, {
+    variant: "bodyWeak"
+  }, description)), (0, _react2.jsx)(_index.Box, {
+    mt: "xl"
+  }, (0, _react2.jsx)(_index.Box, {
+    align: "center",
+    isRow: true,
+    mb: "xs",
+    role: "heading",
+    "aria-level": "1"
+  }, (0, _react2.jsx)(_index.Text, {
+    variant: "title",
+    fontWeight: 3
+  }, heading), (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "icon button",
+    ml: "sm",
+    mt: "3px",
+    variant: "inverted"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _PlusIcon["default"],
+    color: "white",
+    size: 13
+  }))), (0, _react2.jsx)(_index.Text, {
+    variant: "bodyWeak"
+  }, description)));
+};
+
+exports.Default = Default;