@pingux/astro 2.14.1-alpha.3 → 2.15.0-alpha.0

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

@@ -8,7 +8,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Edit = exports.DisplayWithError = exports.Display = void 0;
+exports["default"] = exports.Edit = exports.DisplayWithError = exports.DisplayRow = exports.Display = void 0;
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
@@ -145,57 +145,6 @@ var editSx = {
   }
 };
 var helperTextId = (0, _uuid.v4)();
-var Row = function Row(props) {
-  var withBadge = props.withBadge,
-    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: '165px'
-      }
-    },
-    "aria-labelledby": withError && helperTextId,
-    slots: withError && {
-      inContainer: (0, _react2.jsx)(_index.Icon, {
-        icon: _AlertCircleIcon["default"],
-        sx: sx.alertCircleIcon,
-        title: {
-          name: 'Alert Circle Icon'
-        }
-      })
-    }
-  }), (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: '165px'
-      }
-    }
-  }), withBadge && (0, _react2.jsx)(_index.Badge, {
-    label: "Required",
-    sx: sx.badge
-  }));
-};
 var Display = function Display() {
   return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
     sx: sx.container
@@ -212,17 +161,17 @@ var Display = function Display() {
     sx: sx.fieldColumnTitleWrapper
   }, (0, _react2.jsx)(_index.Text, {
     sx: sx.fieldColumnTitle
-  }, "PingOne"))), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(Row, {
+  }, "PingOne"))), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(DisplayRow, {
     withBadge: true,
     leftValue: "username",
     rightValue: "User ID"
-  }), (0, _react2.jsx)(Row, {
+  }), (0, _react2.jsx)(DisplayRow, {
     leftValue: "firstName",
     rightValue: "Given Name"
-  }), (0, _react2.jsx)(Row, {
+  }), (0, _react2.jsx)(DisplayRow, {
     leftValue: "lastName",
     rightValue: "Family Name"
-  }), (0, _react2.jsx)(Row, {
+  }), (0, _react2.jsx)(DisplayRow, {
     leftValue: "population",
     rightValue: "Population"
   })));
@@ -259,17 +208,17 @@ var DisplayWithError = function DisplayWithError() {
     sx: sx.fieldColumnTitleWrapper
   }, (0, _react2.jsx)(_index.Text, {
     sx: sx.fieldColumnTitle
-  }, "PingOne"))), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(Row, {
+  }, "PingOne"))), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(DisplayRow, {
     withBadge: true,
     leftValue: "username",
     rightValue: "User ID"
-  }), (0, _react2.jsx)(Row, {
+  }), (0, _react2.jsx)(DisplayRow, {
     leftValue: "firstName",
     rightValue: "Given Name"
-  }), (0, _react2.jsx)(Row, {
+  }), (0, _react2.jsx)(DisplayRow, {
     leftValue: "lastName",
     rightValue: "Family Name"
-  }), (0, _react2.jsx)(Row, {
+  }), (0, _react2.jsx)(DisplayRow, {
     withError: withError,
     leftValue: "population",
     rightValue: "Population"
@@ -375,6 +324,61 @@ Edit.parameters = {
     url: _figmaLinks.FIGMA_LINKS.attributeMappings.edit
   }
 };
+var DisplayRow = function DisplayRow(props) {
+  var _props$withBadge = props.withBadge,
+    withBadge = _props$withBadge === void 0 ? false : _props$withBadge,
+    withError = props.withError,
+    _props$leftValue = props.leftValue,
+    leftValue = _props$leftValue === void 0 ? 'UserId' : _props$leftValue,
+    _props$rightValue = props.rightValue,
+    rightValue = _props$rightValue === void 0 ? 'mdorey' : _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: '165px'
+      }
+    },
+    "aria-labelledby": withError && helperTextId,
+    slots: withError && {
+      inContainer: (0, _react2.jsx)(_index.Icon, {
+        icon: _AlertCircleIcon["default"],
+        sx: sx.alertCircleIcon,
+        title: {
+          name: 'Alert Circle Icon'
+        }
+      })
+    }
+  }), (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: '165px'
+      }
+    }
+  }), withBadge && (0, _react2.jsx)(_index.Badge, {
+    label: "Required",
+    sx: sx.badge
+  }));
+};
+exports.DisplayRow = DisplayRow;
 var EditRow = /*#__PURE__*/(0, _react.memo)(function (props) {
   var isDisabled = props.isDisabled,
     isNewRow = props.isNewRow,

package/lib/recipes/AttributeMapping.stories.js

@@ -131,57 +131,6 @@ var editSx = {
   }
 };
 var helperTextId = uuid();
-var Row = function Row(props) {
-  var withBadge = props.withBadge,
-    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: '165px'
-      }
-    },
-    "aria-labelledby": withError && helperTextId,
-    slots: withError && {
-      inContainer: ___EmotionJSX(Icon, {
-        icon: AlertCircleIcon,
-        sx: sx.alertCircleIcon,
-        title: {
-          name: 'Alert Circle Icon'
-        }
-      })
-    }
-  }), ___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: '165px'
-      }
-    }
-  }), withBadge && ___EmotionJSX(Badge, {
-    label: "Required",
-    sx: sx.badge
-  }));
-};
 export var Display = function Display() {
   return ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
     sx: sx.container
@@ -198,17 +147,17 @@ export var Display = function Display() {
     sx: sx.fieldColumnTitleWrapper
   }, ___EmotionJSX(Text, {
     sx: sx.fieldColumnTitle
-  }, "PingOne"))), ___EmotionJSX(Separator, null), ___EmotionJSX(Row, {
+  }, "PingOne"))), ___EmotionJSX(Separator, null), ___EmotionJSX(DisplayRow, {
     withBadge: true,
     leftValue: "username",
     rightValue: "User ID"
-  }), ___EmotionJSX(Row, {
+  }), ___EmotionJSX(DisplayRow, {
     leftValue: "firstName",
     rightValue: "Given Name"
-  }), ___EmotionJSX(Row, {
+  }), ___EmotionJSX(DisplayRow, {
     leftValue: "lastName",
     rightValue: "Family Name"
-  }), ___EmotionJSX(Row, {
+  }), ___EmotionJSX(DisplayRow, {
     leftValue: "population",
     rightValue: "Population"
   })));
@@ -244,17 +193,17 @@ export var DisplayWithError = function DisplayWithError() {
     sx: sx.fieldColumnTitleWrapper
   }, ___EmotionJSX(Text, {
     sx: sx.fieldColumnTitle
-  }, "PingOne"))), ___EmotionJSX(Separator, null), ___EmotionJSX(Row, {
+  }, "PingOne"))), ___EmotionJSX(Separator, null), ___EmotionJSX(DisplayRow, {
     withBadge: true,
     leftValue: "username",
     rightValue: "User ID"
-  }), ___EmotionJSX(Row, {
+  }), ___EmotionJSX(DisplayRow, {
     leftValue: "firstName",
     rightValue: "Given Name"
-  }), ___EmotionJSX(Row, {
+  }), ___EmotionJSX(DisplayRow, {
     leftValue: "lastName",
     rightValue: "Family Name"
-  }), ___EmotionJSX(Row, {
+  }), ___EmotionJSX(DisplayRow, {
     withError: withError,
     leftValue: "population",
     rightValue: "Population"
@@ -358,6 +307,60 @@ Edit.parameters = {
     url: FIGMA_LINKS.attributeMappings.edit
   }
 };
+export var DisplayRow = function DisplayRow(props) {
+  var _props$withBadge = props.withBadge,
+    withBadge = _props$withBadge === void 0 ? false : _props$withBadge,
+    withError = props.withError,
+    _props$leftValue = props.leftValue,
+    leftValue = _props$leftValue === void 0 ? 'UserId' : _props$leftValue,
+    _props$rightValue = props.rightValue,
+    rightValue = _props$rightValue === void 0 ? 'mdorey' : _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: '165px'
+      }
+    },
+    "aria-labelledby": withError && helperTextId,
+    slots: withError && {
+      inContainer: ___EmotionJSX(Icon, {
+        icon: AlertCircleIcon,
+        sx: sx.alertCircleIcon,
+        title: {
+          name: 'Alert Circle Icon'
+        }
+      })
+    }
+  }), ___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: '165px'
+      }
+    }
+  }), withBadge && ___EmotionJSX(Badge, {
+    label: "Required",
+    sx: sx.badge
+  }));
+};
 var EditRow = /*#__PURE__*/memo(function (props) {
   var isDisabled = props.isDisabled,
     isNewRow = props.isNewRow,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.14.1-alpha.3",
+  "version": "2.15.0-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",