@pingux/astro 1.30.0 → 1.31.0-alpha.1

package/lib/recipes/AttributeMappingReadOnlyField.stories.js

@@ -1,129 +1,162 @@
 import React from 'react';
 import CreateIcon from 'mdi-react/CreateIcon';
+import AlertCircleIcon from 'mdi-react/AlertCircleIcon';
 import { Box, Chip, IconButton, Text, Icon, Separator, TextField, HelpHint } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Attribute Mapping Read Only Field'
 };
-export var Default = function Default() {
-  var Row = function Row(props) {
-    var withChip = props.withChip,
-        withTooltip = props.withTooltip,
-        leftValue = props.leftValue,
-        rightValue = props.rightValue;
-    return ___EmotionJSX(Box, {
-      isRow: true,
-      alignItems: "center",
-      mt: "10px"
-    }, ___EmotionJSX(TextField, {
-      isReadOnly: true,
-      value: leftValue,
-      labelProps: {
-        mb: 0
-      },
-      controlProps: {
-        variant: 'input.small',
-        'aria-label': "input ".concat(leftValue),
-        sx: {
-          width: '165px'
-        }
-      }
-    }), ___EmotionJSX(Separator, {
+var sx = {
+  alertCircleIcon: {
+    position: 'absolute',
+    right: '4px',
+    top: '4px',
+    fill: '#A31300'
+  },
+  attributeMappingTitle: {
+    fontSize: 'lg',
+    lineHeight: '21px',
+    fontWeight: 3,
+    color: 'text.primary'
+  },
+  attributeMappingTitleWrapper: {
+    marginBottom: 'md',
+    alignItems: 'center'
+  },
+  chip: {
+    width: 'xx',
+    height: '22px',
+    alignSelf: 'center',
+    minWidth: 'fit-content',
+    border: '1px solid',
+    borderColor: 'neutral.80',
+    backgroundColor: 'white !important',
+    marginLeft: 8,
+    '& span': {
+      fontSize: 'sm',
+      lineHeight: 1,
+      color: '#253746'
+    }
+  },
+  createIconButton: {
+    marginLeft: 'xs'
+  },
+  defaultFieldsWrapperBox: {
+    padding: '10px 10px 24px 10px',
+    width: '450px',
+    backgroundColor: 'accent.99'
+  },
+  fieldColumnTitle: {
+    fontWeight: 3,
+    fontSize: 'md',
+    lineHeight: '18px',
+    marginBottom: 'xs'
+  },
+  fieldColumnTitleWrapper: {
+    width: 'calc(50% - 22px)'
+  },
+  fieldRowWrapper: {
+    alignItems: 'center',
+    marginTop: 'sm'
+  },
+  separator: {
+    width: '21px',
+    margin: '0 2px'
+  },
+  tooltipBox: {
+    marginLeft: 'xs',
+    height: 'md',
+    width: 'md'
+  }
+};
+
+var Row = function Row(props) {
+  var withChip = props.withChip,
+      withTooltip = props.withTooltip,
+      withError = props.withError,
+      leftValue = props.leftValue,
+      rightValue = props.rightValue;
+  return ___EmotionJSX(Box, {
+    isRow: true,
+    sx: sx.fieldRowWrapper
+  }, ___EmotionJSX(TextField, {
+    isReadOnly: true,
+    value: leftValue,
+    labelProps: {
+      mb: 0
+    },
+    controlProps: {
+      variant: 'input.small',
+      'aria-label': "input ".concat(leftValue),
       sx: {
-        width: '21px',
-        ml: '2px',
-        mr: '2px'
-      }
-    }), ___EmotionJSX(TextField, {
-      isReadOnly: true,
-      value: rightValue,
-      labelProps: {
-        mb: 0
-      },
-      controlProps: {
-        variant: 'input.small',
-        'aria-label': "input ".concat(rightValue),
-        sx: {
-          width: '165px'
-        }
+        width: '165px'
       }
-    }), withChip && ___EmotionJSX(Chip, {
-      label: "Required",
+    },
+    slots: withError && {
+      inContainer: ___EmotionJSX(Icon, {
+        icon: AlertCircleIcon,
+        sx: sx.alertCircleIcon
+      })
+    }
+  }), ___EmotionJSX(Separator, {
+    sx: sx.separator
+  }), ___EmotionJSX(TextField, {
+    isReadOnly: true,
+    value: rightValue,
+    labelProps: {
+      mb: 0
+    },
+    controlProps: {
+      variant: 'input.small',
+      'aria-label': "input ".concat(rightValue),
       sx: {
-        width: '65px',
-        height: '22px',
-        alignSelf: 'center',
-        minWidth: 'fit-content',
-        border: '1px solid',
-        borderColor: 'neutral.80',
-        backgroundColor: 'white !important',
-        ml: 8,
-        '& span': {
-          fontSize: 'sm',
-          lineHeight: 1,
-          color: '#253746'
-        }
-      }
-    }), withTooltip && ___EmotionJSX(Box, {
-      ml: "5px",
-      height: "15px",
-      width: "15px"
-    }, ___EmotionJSX(HelpHint, {
-      tooltipProps: {
-        direction: 'bottom'
+        width: '165px'
       }
-    }, "Population set to default")));
-  };
+    }
+  }), withChip && ___EmotionJSX(Chip, {
+    label: "Required",
+    sx: sx.chip
+  }), withTooltip && ___EmotionJSX(Box, {
+    sx: sx.tooltipBox
+  }, ___EmotionJSX(HelpHint, {
+    tooltipProps: {
+      direction: 'bottom'
+    }
+  }, "Population set to default")));
+};
 
-  return ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
+var Title = function Title() {
+  return ___EmotionJSX(Box, {
     isRow: true,
-    alignItems: "center",
-    mb: "15px"
+    sx: sx.attributeMappingTitleWrapper
   }, ___EmotionJSX(Text, {
-    sx: {
-      fontSize: 'lg',
-      lineHeight: '21px',
-      fontWeight: 3,
-      color: 'text.primary'
-    }
+    sx: sx.attributeMappingTitle
   }, "Attribute Mapping"), ___EmotionJSX(Box, null, ___EmotionJSX(IconButton, {
-    ml: "5px",
+    sx: sx.createIconButton,
     variant: "inverted",
     "aria-label": "edit header button"
   }, ___EmotionJSX(Icon, {
     icon: CreateIcon,
     size: 18
-  })))), ___EmotionJSX(Box, {
-    backgroundColor: "accent.99",
-    width: "450px",
-    padding: "10px 10px 25px 10px"
+  }))));
+};
+
+export var Default = function Default() {
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Title, null), ___EmotionJSX(Box, {
+    sx: sx.defaultFieldsWrapperBox
   }, ___EmotionJSX(Box, {
     isRow: true,
     sx: {
       width: '100%'
     }
   }, ___EmotionJSX(Box, {
-    sx: {
-      width: 'calc(50% - 22px)'
-    }
+    sx: sx.fieldColumnTitleWrapper
   }, ___EmotionJSX(Text, {
-    sx: {
-      fontWeight: 3,
-      fontSize: 'md',
-      lineHeight: '18px',
-      mb: '5px'
-    }
+    sx: sx.fieldColumnTitle
   }, "PingOne")), ___EmotionJSX(Box, {
-    sx: {
-      width: 'calc(50% - 22px)'
-    }
+    sx: sx.fieldColumnTitleWrapper
   }, ___EmotionJSX(Text, {
-    sx: {
-      fontWeight: 3,
-      fontSize: 'md',
-      lineHeight: '18px',
-      mb: '5px'
-    }
+    sx: sx.fieldColumnTitle
   }, "Google Suites"))), ___EmotionJSX(Separator, null), ___EmotionJSX(Row, {
     withChip: true,
     leftValue: "UserId",
@@ -142,4 +175,58 @@ export var Default = function Default() {
     leftValue: "password",
     rightValue: "password"
   })));
+};
+export var WithError = function WithError() {
+  var withError = true;
+  var withErrorSx = {
+    errorBox: {
+      flexDirection: 'row !important',
+      alignItems: 'center',
+      padding: '13px 12px 13px 15px',
+      gap: 'md',
+      border: '1px solid #A31300',
+      width: '450px',
+      marginBottom: 'xs'
+    },
+    text: {
+      fontSize: 'sm',
+      lineHeight: '15px'
+    }
+  };
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Title, null), withError && ___EmotionJSX(Box, {
+    sx: withErrorSx.errorBox
+  }, ___EmotionJSX(Icon, {
+    size: 24,
+    icon: AlertCircleIcon,
+    color: "#A31300"
+  }), ___EmotionJSX(Text, {
+    sx: withErrorSx.text
+  }, "This attribute is unavailable. Please map the attribute again or re-map to a different attribute.")), ___EmotionJSX(Box, {
+    sx: sx.defaultFieldsWrapperBox
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    sx: {
+      width: '100%'
+    }
+  }, ___EmotionJSX(Box, {
+    sx: sx.fieldColumnTitleWrapper
+  }, ___EmotionJSX(Text, {
+    sx: sx.fieldColumnTitle
+  }, "PingOne")), ___EmotionJSX(Box, {
+    sx: sx.fieldColumnTitleWrapper
+  }, ___EmotionJSX(Text, {
+    sx: sx.fieldColumnTitle
+  }, "Google Suites"))), ___EmotionJSX(Separator, null), ___EmotionJSX(Row, {
+    withChip: true,
+    leftValue: "UserId",
+    rightValue: "mdorey"
+  }), ___EmotionJSX(Row, {
+    withError: withError,
+    leftValue: "givenName",
+    rightValue: "firstName"
+  }), ___EmotionJSX(Row, {
+    withError: withError,
+    leftValue: "familyName",
+    rightValue: "lastName"
+  })));
 };

package/lib/recipes/ListAndPanel.stories.js

@@ -7,7 +7,8 @@ import AccountIcon from 'mdi-react/AccountIcon';
 import CloseIcon from 'mdi-react/CloseIcon';
 import MoreVertIcon from 'mdi-react/MoreVertIcon';
 import PencilIcon from 'mdi-react/PencilIcon';
-import { Avatar, Box, Icon, IconButton, ListView, Menu, OverlayPanel, PopoverMenu, SearchField, Separator, SwitchField, Tab, Tabs, Text } from '../index';
+import PlusIcon from 'mdi-react/PlusIcon';
+import { Avatar, Box, Icon, IconButton, Link, ListView, Menu, OverlayPanel, PopoverMenu, SearchField, Separator, SwitchField, Tab, Tabs, Text } from '../index';
 import { useOverlayPanelState } from '../hooks';
 import { pingImg } from '../utils/devUtils/constants/images';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -228,6 +229,8 @@ export var Default = function Default() {
       onPanelClose = _useOverlayPanelState.onClose;
 
   var panelTriggerRef = useRef();
+  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.';
 
   var closePanelHandler = function closePanelHandler() {
     onPanelClose(panelState, panelTriggerRef);
@@ -249,7 +252,34 @@ export var Default = function Default() {
 
   return ___EmotionJSX(Box, {
     sx: sx.wrapper
-  }, ___EmotionJSX(SearchField, {
+  }, ___EmotionJSX(Box, {
+    mb: "md"
+  }, ___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, ___EmotionJSX(Link, {
+    href: "https://uilibrary.ping-eng.com/",
+    sx: {
+      fontSize: '13px'
+    }
+  }, " Learn more"))), ___EmotionJSX(SearchField, {
     position: "fixed",
     mb: "sm",
     width: "400px",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.30.0",
+  "version": "1.31.0-alpha.1",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",