@pingux/astro 1.30.0 → 1.31.0-alpha.1

package/lib/cjs/components/LinkSelectField/LinkSelectField.js

@@ -69,6 +69,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var placeholder = props.placeholder,
+      isDisabled = props.isDisabled,
       status = props.status;
 
   var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(props),
@@ -94,7 +95,8 @@ var LinkSelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
   var trigger = (0, _react2.jsx)(_.Button, (0, _extends2["default"])({
     className: fieldControlProps.className,
     ref: triggerRef,
-    variant: "link"
+    variant: "link",
+    tabIndex: isDisabled ? -1 : 0
   }, triggerProps, ariaProps), (0, _react2.jsx)(_.Text, {
     variant: "label",
     color: "active"

package/lib/cjs/components/ListView/ListView.js

@@ -106,6 +106,8 @@ function useListLayout(state) {
  * view, or edit items in this list. This virtualized component supports
  * asynchronous data in infinitely scrollable lists.
  *
+ * Can be used as in recipe: https://uilibrary.ping-eng.com/astro/?path=/docs/recipes-list-with-panel--default
+ *
  * NOTE: be careful with putting focusable elements inside ListView.
  * It is using a grid (useList hook) with its own event listeners under the hood.
  * [react-specttrum-github-issue](https://github.com/adobe/react-spectrum/issues/2801)

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

@@ -8,12 +8,14 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.Default = void 0;
+exports["default"] = exports.WithError = exports.Default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _CreateIcon = _interopRequireDefault(require("mdi-react/CreateIcon"));
 
+var _AlertCircleIcon = _interopRequireDefault(require("mdi-react/AlertCircleIcon"));
+
 var _index = require("../index");
 
 var _react2 = require("@emotion/react");
@@ -22,126 +24,157 @@ var _default = {
   title: 'Recipes/Attribute Mapping Read Only Field'
 };
 exports["default"] = _default;
+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 Default = function Default() {
-  var Row = function Row(props) {
-    var withChip = props.withChip,
-        withTooltip = props.withTooltip,
-        leftValue = props.leftValue,
-        rightValue = props.rightValue;
-    return (0, _react2.jsx)(_index.Box, {
-      isRow: true,
-      alignItems: "center",
-      mt: "10px"
-    }, (0, _react2.jsx)(_index.TextField, {
-      isReadOnly: true,
-      value: leftValue,
-      labelProps: {
-        mb: 0
-      },
-      controlProps: {
-        variant: 'input.small',
-        'aria-label': "input ".concat(leftValue),
-        sx: {
-          width: '165px'
-        }
-      }
-    }), (0, _react2.jsx)(_index.Separator, {
+var Row = function Row(props) {
+  var withChip = props.withChip,
+      withTooltip = props.withTooltip,
+      withError = props.withError,
+      leftValue = props.leftValue,
+      rightValue = props.rightValue;
+  return (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    sx: sx.fieldRowWrapper
+  }, (0, _react2.jsx)(_index.TextField, {
+    isReadOnly: true,
+    value: leftValue,
+    labelProps: {
+      mb: 0
+    },
+    controlProps: {
+      variant: 'input.small',
+      'aria-label': "input ".concat(leftValue),
       sx: {
-        width: '21px',
-        ml: '2px',
-        mr: '2px'
-      }
-    }), (0, _react2.jsx)(_index.TextField, {
-      isReadOnly: true,
-      value: rightValue,
-      labelProps: {
-        mb: 0
-      },
-      controlProps: {
-        variant: 'input.small',
-        'aria-label': "input ".concat(rightValue),
-        sx: {
-          width: '165px'
-        }
+        width: '165px'
       }
-    }), withChip && (0, _react2.jsx)(_index.Chip, {
-      label: "Required",
+    },
+    slots: withError && {
+      inContainer: (0, _react2.jsx)(_index.Icon, {
+        icon: _AlertCircleIcon["default"],
+        sx: sx.alertCircleIcon
+      })
+    }
+  }), (0, _react2.jsx)(_index.Separator, {
+    sx: sx.separator
+  }), (0, _react2.jsx)(_index.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 && (0, _react2.jsx)(_index.Box, {
-      ml: "5px",
-      height: "15px",
-      width: "15px"
-    }, (0, _react2.jsx)(_index.HelpHint, {
-      tooltipProps: {
-        direction: 'bottom'
+        width: '165px'
       }
-    }, "Population set to default")));
-  };
+    }
+  }), withChip && (0, _react2.jsx)(_index.Chip, {
+    label: "Required",
+    sx: sx.chip
+  }), withTooltip && (0, _react2.jsx)(_index.Box, {
+    sx: sx.tooltipBox
+  }, (0, _react2.jsx)(_index.HelpHint, {
+    tooltipProps: {
+      direction: 'bottom'
+    }
+  }, "Population set to default")));
+};
 
-  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
+var Title = function Title() {
+  return (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    alignItems: "center",
-    mb: "15px"
+    sx: sx.attributeMappingTitleWrapper
   }, (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontSize: 'lg',
-      lineHeight: '21px',
-      fontWeight: 3,
-      color: 'text.primary'
-    }
+    sx: sx.attributeMappingTitle
   }, "Attribute Mapping"), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.IconButton, {
-    ml: "5px",
+    sx: sx.createIconButton,
     variant: "inverted",
     "aria-label": "edit header button"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _CreateIcon["default"],
     size: 18
-  })))), (0, _react2.jsx)(_index.Box, {
-    backgroundColor: "accent.99",
-    width: "450px",
-    padding: "10px 10px 25px 10px"
+  }))));
+};
+
+var Default = function Default() {
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(Title, null), (0, _react2.jsx)(_index.Box, {
+    sx: sx.defaultFieldsWrapperBox
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
     sx: {
       width: '100%'
     }
   }, (0, _react2.jsx)(_index.Box, {
-    sx: {
-      width: 'calc(50% - 22px)'
-    }
+    sx: sx.fieldColumnTitleWrapper
   }, (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontWeight: 3,
-      fontSize: 'md',
-      lineHeight: '18px',
-      mb: '5px'
-    }
+    sx: sx.fieldColumnTitle
   }, "PingOne")), (0, _react2.jsx)(_index.Box, {
-    sx: {
-      width: 'calc(50% - 22px)'
-    }
+    sx: sx.fieldColumnTitleWrapper
   }, (0, _react2.jsx)(_index.Text, {
-    sx: {
-      fontWeight: 3,
-      fontSize: 'md',
-      lineHeight: '18px',
-      mb: '5px'
-    }
+    sx: sx.fieldColumnTitle
   }, "Google Suites"))), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(Row, {
     withChip: true,
     leftValue: "UserId",
@@ -162,4 +195,61 @@ var Default = function Default() {
   })));
 };
 
-exports.Default = Default;
+exports.Default = Default;
+
+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 (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(Title, null), withError && (0, _react2.jsx)(_index.Box, {
+    sx: withErrorSx.errorBox
+  }, (0, _react2.jsx)(_index.Icon, {
+    size: 24,
+    icon: _AlertCircleIcon["default"],
+    color: "#A31300"
+  }), (0, _react2.jsx)(_index.Text, {
+    sx: withErrorSx.text
+  }, "This attribute is unavailable. Please map the attribute again or re-map to a different attribute.")), (0, _react2.jsx)(_index.Box, {
+    sx: sx.defaultFieldsWrapperBox
+  }, (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    sx: {
+      width: '100%'
+    }
+  }, (0, _react2.jsx)(_index.Box, {
+    sx: sx.fieldColumnTitleWrapper
+  }, (0, _react2.jsx)(_index.Text, {
+    sx: sx.fieldColumnTitle
+  }, "PingOne")), (0, _react2.jsx)(_index.Box, {
+    sx: sx.fieldColumnTitleWrapper
+  }, (0, _react2.jsx)(_index.Text, {
+    sx: sx.fieldColumnTitle
+  }, "Google Suites"))), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(Row, {
+    withChip: true,
+    leftValue: "UserId",
+    rightValue: "mdorey"
+  }), (0, _react2.jsx)(Row, {
+    withError: withError,
+    leftValue: "givenName",
+    rightValue: "firstName"
+  }), (0, _react2.jsx)(Row, {
+    withError: withError,
+    leftValue: "familyName",
+    rightValue: "lastName"
+  })));
+};
+
+exports.WithError = WithError;

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

@@ -34,6 +34,8 @@ var _MoreVertIcon = _interopRequireDefault(require("mdi-react/MoreVertIcon"));
 
 var _PencilIcon = _interopRequireDefault(require("mdi-react/PencilIcon"));
 
+var _PlusIcon = _interopRequireDefault(require("mdi-react/PlusIcon"));
+
 var _index = require("../index");
 
 var _hooks = require("../hooks");
@@ -264,6 +266,8 @@ var Default = function Default() {
       onPanelClose = _useOverlayPanelState.onClose;
 
   var panelTriggerRef = (0, _react.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);
@@ -285,7 +289,34 @@ var Default = function Default() {
 
   return (0, _react2.jsx)(_index.Box, {
     sx: sx.wrapper
-  }, (0, _react2.jsx)(_index.SearchField, {
+  }, (0, _react2.jsx)(_index.Box, {
+    mb: "md"
+  }, (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, (0, _react2.jsx)(_index.Link, {
+    href: "https://uilibrary.ping-eng.com/",
+    sx: {
+      fontSize: '13px'
+    }
+  }, " Learn more"))), (0, _react2.jsx)(_index.SearchField, {
     position: "fixed",
     mb: "sm",
     width: "400px",

package/lib/components/LinkSelectField/LinkSelectField.js

@@ -33,6 +33,7 @@ import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
   var placeholder = props.placeholder,
+      isDisabled = props.isDisabled,
       status = props.status;
 
   var _getAriaAttributeProp = getAriaAttributeProps(props),
@@ -59,7 +60,8 @@ var LinkSelectField = /*#__PURE__*/forwardRef(function (props, ref) {
   var trigger = ___EmotionJSX(Button, _extends({
     className: fieldControlProps.className,
     ref: triggerRef,
-    variant: "link"
+    variant: "link",
+    tabIndex: isDisabled ? -1 : 0
   }, triggerProps, ariaProps), ___EmotionJSX(Text, {
     variant: "label",
     color: "active"

package/lib/components/ListView/ListView.js

@@ -60,6 +60,8 @@ export function useListLayout(state) {
  * view, or edit items in this list. This virtualized component supports
  * asynchronous data in infinitely scrollable lists.
  *
+ * Can be used as in recipe: https://uilibrary.ping-eng.com/astro/?path=/docs/recipes-list-with-panel--default
+ *
  * NOTE: be careful with putting focusable elements inside ListView.
  * It is using a grid (useList hook) with its own event listeners under the hood.
  * [react-specttrum-github-issue](https://github.com/adobe/react-spectrum/issues/2801)