@pingux/astro 1.27.0-alpha.0 → 1.27.0-alpha.10

package/lib/recipes/EditableInput.stories.js

@@ -37,6 +37,48 @@ var inputProps = {
   label: 'Example label',
   ariaLabel: 'Example aria label'
 };
+var sx = {
+  editablePreview: {
+    whiteSpace: 'pre-line',
+    width: '100%',
+    overflowWrap: 'break-word',
+    minHeight: '45px',
+    paddingLeft: 'xs',
+    justifyContent: 'flex-end',
+    paddingBottom: 'xs',
+    borderBottomColor: 'active',
+    color: 'neutral.10',
+    fontSize: 'md',
+    fontWeight: 1,
+    lineHeight: '18px',
+    '&:focus': {
+      outline: 'none',
+      boxShadow: 'focus',
+      borderColor: 'active',
+      borderWidth: '1px',
+      borderStyle: 'solid'
+    }
+  },
+  editableInputWrapper: {
+    marginRight: '30px',
+    flexGrow: 1
+  },
+  editableInpuTextArea: {
+    maxHeight: '150px'
+  },
+  editableControlWrapper: {
+    position: 'absolute',
+    right: '0',
+    top: '27.5%',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  },
+  editableControlIconButton: {
+    marginRight: 'md',
+    width: '20px',
+    height: '20px'
+  }
+};
 export var Default = function Default() {
   return ___EmotionJSX(Editable, {
     value: "Some value..."
@@ -90,6 +132,13 @@ var EditablePreview = function EditablePreview() {
       hasFocus = _useState4[0],
       setFocus = _useState4[1];
 
+  var editablePreviewDynamicSx = {
+    backgroundColor: hasFocus ? 'accent.95' : 'white',
+    borderBottom: editableContext.isEditing ? '0px' : '1px dashed',
+    '&:hover': {
+      background: editableContext.isEditing ? 'white' : 'accent.95'
+    }
+  };
   useEffect(function () {
     if (hasFocus && editableContext.isEditing) {
       setFocus(false);
@@ -116,8 +165,8 @@ var EditablePreview = function EditablePreview() {
     "aria-hidden": editableContext.isEditing,
     onClick: handleClick,
     onKeyDown: handleKeyDown,
-    "aria-readonly": "false",
     "aria-label": "Inline editable text field",
+    role: "textbox",
     onFocus: function onFocus() {
       return setFocus(true);
     },
@@ -125,32 +174,7 @@ var EditablePreview = function EditablePreview() {
       return setFocus(false);
     },
     placeholder: "Click or press enter to edit text",
-    sx: {
-      whiteSpace: 'pre-line',
-      backgroundColor: hasFocus ? 'accent.95' : 'white',
-      width: '100%',
-      overflowWrap: 'break-word',
-      minHeight: '45px',
-      paddingLeft: 'xs',
-      justifyContent: 'flex-end',
-      paddingBottom: 'xs',
-      borderBottom: editableContext.isEditing ? '0px' : '1px dashed',
-      borderBottomColor: 'active',
-      color: 'neutral.10',
-      fontSize: 'md',
-      fontWeight: 1,
-      lineHeight: '18px',
-      '&:hover': {
-        background: editableContext.isEditing ? 'white' : 'accent.95'
-      },
-      '&:focus': {
-        outline: 'none',
-        boxShadow: 'focus',
-        borderColor: 'active',
-        borderWidth: '1px',
-        borderStyle: 'solid'
-      }
-    }
+    sx: _objectSpread(_objectSpread({}, editablePreviewDynamicSx), sx.editablePreview)
   }, editableContext.value);
 };
 /**
@@ -219,10 +243,7 @@ var EditableInput = function EditableInput(props) {
   return ___EmotionJSX(Box, {
     display: editableContext.isEditing ? 'flex' : 'none',
     "aria-hidden": !editableContext.isEditing,
-    sx: {
-      marginRight: '30px',
-      flexGrow: 1
-    }
+    sx: sx.editableInputWrapper
   }, ___EmotionJSX(TextAreaField, {
     rows: 1,
     ref: editableInput,
@@ -233,9 +254,7 @@ var EditableInput = function EditableInput(props) {
     onKeyDown: handleKeyDown,
     value: editingValue,
     "aria-label": ariaLabel,
-    sx: {
-      maxHeight: '150px'
-    },
+    sx: sx.editableInpuTextArea,
     isUnresizable: true
   }));
 };
@@ -286,22 +305,12 @@ var EditableControl = function EditableControl(props) {
     display: editableContext.isEditing ? 'flex' : 'none',
     "aria-hidden": !editableContext.isEditing,
     isRow: true,
-    sx: {
-      position: 'absolute',
-      right: '0',
-      top: '27.5%',
-      alignItems: 'center',
-      justifyContent: 'space-between'
-    }
+    sx: sx.editableControlWrapper
   }, ___EmotionJSX(IconButton, {
     onPress: handleSubmit,
     "aria-label": confirmBtn.ariaLabel,
     variant: confirmBtn.variant,
-    mr: "15px",
-    sx: {
-      width: '20px',
-      height: '20px'
-    }
+    sx: sx.editableControlIconButton
   }, ___EmotionJSX(Icon, {
     icon: CheckIcon
   })), ___EmotionJSX(IconButton, {

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.27.0-alpha.0",
+  "version": "1.27.0-alpha.10",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",
@@ -121,6 +121,7 @@
     "@react-stately/radio": "^3.2.0",
     "@react-stately/searchfield": "^3.1.1",
     "@react-stately/select": "^3.1.1",
+    "@react-stately/selection": "~3.10.2",
     "@react-stately/slider": "^3.0.7",
     "@react-stately/tabs": "^3.0.1",
     "@react-stately/toggle": "^3.2.0",
@@ -137,7 +138,7 @@
     "emotion-normalize": "^11.0.1",
     "lodash": "^4.17.21",
     "mdi-react": "^7.4.0",
-    "moment": "^2.29.1",
+    "moment": "^2.29.4",
     "prism-react-renderer": "1.2.1",
     "prismjs": "^1.27.0",
     "prop-types": "^15.7.2",