@pingux/astro 2.14.1-alpha.0 → 2.14.1-alpha.1

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

@@ -18,7 +18,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _AddIcon = _interopRequireDefault(require("@pingux/mdi-react/AddIcon"));
 var _AlertCircleIcon = _interopRequireDefault(require("@pingux/mdi-react/AlertCircleIcon"));
 var _CogsIcon = _interopRequireDefault(require("@pingux/mdi-react/CogsIcon"));
-var _CreateIcon = _interopRequireDefault(require("@pingux/mdi-react/CreateIcon"));
 var _DeleteIcon = _interopRequireDefault(require("@pingux/mdi-react/DeleteIcon"));
 var _uuid = require("uuid");
 var _index = require("../index");
@@ -36,33 +35,26 @@ var sx = {
     position: 'absolute',
     right: '4px',
     top: '4px',
-    fill: '#A31300'
-  },
-  attributeMappingTitle: {
-    fontSize: 'lg',
-    lineHeight: '21px',
-    fontWeight: 3,
-    color: 'text.primary'
-  },
-  attributeMappingTitleWrapper: {
-    marginBottom: 'md',
-    alignItems: 'center'
+    fill: 'critical.bright'
   },
   badge: {
-    width: 'xx',
-    height: '22px',
     alignSelf: 'center',
-    minWidth: 'fit-content',
     border: '1px solid',
     borderColor: 'neutral.80',
-    backgroundColor: 'white !important',
-    marginLeft: 8,
+    backgroundColor: 'white',
+    marginLeft: 'sm',
     '& span': {
-      fontSize: 'sm',
       lineHeight: 1,
-      color: '#253746'
+      color: 'text.primary'
     }
   },
+  container: {
+    px: 'sm',
+    pt: 'sm',
+    pb: 'lg',
+    width: '450px',
+    backgroundColor: 'accent.99'
+  },
   calloutSx: {
     width: '450px',
     marginBottom: 'xs',
@@ -71,11 +63,6 @@ var sx = {
   createIconButton: {
     marginLeft: 'xs'
   },
-  defaultFieldsWrapperBox: {
-    padding: '10px 10px 24px 10px',
-    width: '450px',
-    backgroundColor: 'accent.99'
-  },
   fieldColumnTitle: {
     fontWeight: 3,
     fontSize: 'md',
@@ -90,13 +77,8 @@ var sx = {
     marginTop: 'sm'
   },
   separator: {
-    width: '21px',
+    width: '20px',
     margin: '0 2px'
-  },
-  tooltipBox: {
-    marginLeft: 'xs',
-    height: 'md',
-    width: 'md'
   }
 };
 var editSx = {
@@ -165,7 +147,6 @@ var editSx = {
 var helperTextId = (0, _uuid.v4)();
 var Row = function Row(props) {
   var withBadge = props.withBadge,
-    withTooltip = props.withTooltip,
     withError = props.withError,
     leftValue = props.leftValue,
     rightValue = props.rightValue;
@@ -213,35 +194,11 @@ var Row = function Row(props) {
   }), withBadge && (0, _react2.jsx)(_index.Badge, {
     label: "Required",
     sx: sx.badge
-  }), withTooltip && (0, _react2.jsx)(_index.Box, {
-    sx: sx.tooltipBox
-  }, (0, _react2.jsx)(_index.HelpHint, {
-    tooltipProps: {
-      direction: 'bottom'
-    }
-  }, "Population set to default")));
-};
-var Title = function Title() {
-  return (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    sx: sx.attributeMappingTitleWrapper
-  }, (0, _react2.jsx)(_index.Text, {
-    sx: sx.attributeMappingTitle
-  }, "Attribute Mapping"), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.IconButton, {
-    sx: sx.createIconButton,
-    variant: "inverted",
-    "aria-label": "edit header button"
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _CreateIcon["default"],
-    size: "sm",
-    title: {
-      name: 'Create Icon'
-    }
-  }))));
+  }));
 };
 var Display = function Display() {
-  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(Title, null), (0, _react2.jsx)(_index.Box, {
-    sx: sx.defaultFieldsWrapperBox
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
+    sx: sx.container
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
     sx: {
@@ -251,27 +208,23 @@ var Display = function Display() {
     sx: sx.fieldColumnTitleWrapper
   }, (0, _react2.jsx)(_index.Text, {
     sx: sx.fieldColumnTitle
-  }, "PingOne")), (0, _react2.jsx)(_index.Box, {
+  }, "Application")), (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, {
+  }, "PingOne"))), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(Row, {
     withBadge: true,
-    leftValue: "UserId",
-    rightValue: "mdorey"
+    leftValue: "username",
+    rightValue: "User ID"
   }), (0, _react2.jsx)(Row, {
-    leftValue: "givenName",
-    rightValue: "firstName"
+    leftValue: "firstName",
+    rightValue: "Given Name"
   }), (0, _react2.jsx)(Row, {
-    leftValue: "familyName",
-    rightValue: "lastName"
+    leftValue: "lastName",
+    rightValue: "Family Name"
   }), (0, _react2.jsx)(Row, {
-    withTooltip: true,
     leftValue: "population",
-    rightValue: "population"
-  }), (0, _react2.jsx)(Row, {
-    leftValue: "password",
-    rightValue: "password"
+    rightValue: "Population"
   })));
 };
 exports.Display = Display;
@@ -283,7 +236,7 @@ Display.parameters = {
 };
 var DisplayWithError = function DisplayWithError() {
   var withError = true;
-  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(Title, null), (0, _react2.jsx)(_index.Callout, {
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Callout, {
     status: _statuses["default"].ERROR,
     sx: sx.calloutSx
   }, (0, _react2.jsx)(_index.Text, null, "You\u2019ve got problems. Allow me to tell you about them in some detail so that you can address them.", (0, _react2.jsx)(_index.Link, {
@@ -292,7 +245,7 @@ var DisplayWithError = function DisplayWithError() {
     "aria-label": "".concat(_statuses["default"].ERROR, "-callout"),
     variant: "app"
   }, ' ', "Read More"))), (0, _react2.jsx)(_index.Box, {
-    sx: sx.defaultFieldsWrapperBox
+    sx: sx.container
   }, (0, _react2.jsx)(_index.Box, {
     isRow: true,
     sx: {
@@ -302,22 +255,24 @@ var DisplayWithError = function DisplayWithError() {
     sx: sx.fieldColumnTitleWrapper
   }, (0, _react2.jsx)(_index.Text, {
     sx: sx.fieldColumnTitle
-  }, "PingOne")), (0, _react2.jsx)(_index.Box, {
+  }, "Application")), (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, {
+  }, "PingOne"))), (0, _react2.jsx)(_index.Separator, null), (0, _react2.jsx)(Row, {
     withBadge: true,
-    leftValue: "UserId",
-    rightValue: "mdorey"
+    leftValue: "username",
+    rightValue: "User ID"
   }), (0, _react2.jsx)(Row, {
-    withError: withError,
-    leftValue: "givenName",
-    rightValue: "firstName"
+    leftValue: "firstName",
+    rightValue: "Given Name"
+  }), (0, _react2.jsx)(Row, {
+    leftValue: "lastName",
+    rightValue: "Family Name"
   }), (0, _react2.jsx)(Row, {
     withError: withError,
-    leftValue: "familyName",
-    rightValue: "lastName"
+    leftValue: "population",
+    rightValue: "Population"
   })));
 };
 exports.DisplayWithError = DisplayWithError;

package/lib/recipes/AttributeMapping.stories.js

@@ -7,10 +7,9 @@ import React, { memo, useEffect, useRef, useState } from 'react';
 import AddIcon from '@pingux/mdi-react/AddIcon';
 import AlertCircleIcon from '@pingux/mdi-react/AlertCircleIcon';
 import CogsIcon from '@pingux/mdi-react/CogsIcon';
-import CreateIcon from '@pingux/mdi-react/CreateIcon';
 import DeleteIcon from '@pingux/mdi-react/DeleteIcon';
 import { v4 as uuid } from 'uuid';
-import { Badge, Box, Button, Callout, ComboBoxField, HelpHint, Icon, IconButton, Item, Link, ScrollBox, Separator, Text, TextField } from '../index';
+import { Badge, Box, Button, Callout, ComboBoxField, Icon, IconButton, Item, Link, ScrollBox, Separator, Text, TextField } from '../index';
 import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks.js';
 import statuses from '../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -22,33 +21,26 @@ var sx = {
     position: 'absolute',
     right: '4px',
     top: '4px',
-    fill: '#A31300'
-  },
-  attributeMappingTitle: {
-    fontSize: 'lg',
-    lineHeight: '21px',
-    fontWeight: 3,
-    color: 'text.primary'
-  },
-  attributeMappingTitleWrapper: {
-    marginBottom: 'md',
-    alignItems: 'center'
+    fill: 'critical.bright'
   },
   badge: {
-    width: 'xx',
-    height: '22px',
     alignSelf: 'center',
-    minWidth: 'fit-content',
     border: '1px solid',
     borderColor: 'neutral.80',
-    backgroundColor: 'white !important',
-    marginLeft: 8,
+    backgroundColor: 'white',
+    marginLeft: 'sm',
     '& span': {
-      fontSize: 'sm',
       lineHeight: 1,
-      color: '#253746'
+      color: 'text.primary'
     }
   },
+  container: {
+    px: 'sm',
+    pt: 'sm',
+    pb: 'lg',
+    width: '450px',
+    backgroundColor: 'accent.99'
+  },
   calloutSx: {
     width: '450px',
     marginBottom: 'xs',
@@ -57,11 +49,6 @@ var sx = {
   createIconButton: {
     marginLeft: 'xs'
   },
-  defaultFieldsWrapperBox: {
-    padding: '10px 10px 24px 10px',
-    width: '450px',
-    backgroundColor: 'accent.99'
-  },
   fieldColumnTitle: {
     fontWeight: 3,
     fontSize: 'md',
@@ -76,13 +63,8 @@ var sx = {
     marginTop: 'sm'
   },
   separator: {
-    width: '21px',
+    width: '20px',
     margin: '0 2px'
-  },
-  tooltipBox: {
-    marginLeft: 'xs',
-    height: 'md',
-    width: 'md'
   }
 };
 var editSx = {
@@ -151,7 +133,6 @@ var editSx = {
 var helperTextId = uuid();
 var Row = function Row(props) {
   var withBadge = props.withBadge,
-    withTooltip = props.withTooltip,
     withError = props.withError,
     leftValue = props.leftValue,
     rightValue = props.rightValue;
@@ -199,35 +180,11 @@ var Row = function Row(props) {
   }), withBadge && ___EmotionJSX(Badge, {
     label: "Required",
     sx: sx.badge
-  }), withTooltip && ___EmotionJSX(Box, {
-    sx: sx.tooltipBox
-  }, ___EmotionJSX(HelpHint, {
-    tooltipProps: {
-      direction: 'bottom'
-    }
-  }, "Population set to default")));
-};
-var Title = function Title() {
-  return ___EmotionJSX(Box, {
-    isRow: true,
-    sx: sx.attributeMappingTitleWrapper
-  }, ___EmotionJSX(Text, {
-    sx: sx.attributeMappingTitle
-  }, "Attribute Mapping"), ___EmotionJSX(Box, null, ___EmotionJSX(IconButton, {
-    sx: sx.createIconButton,
-    variant: "inverted",
-    "aria-label": "edit header button"
-  }, ___EmotionJSX(Icon, {
-    icon: CreateIcon,
-    size: "sm",
-    title: {
-      name: 'Create Icon'
-    }
-  }))));
+  }));
 };
 export var Display = function Display() {
-  return ___EmotionJSX(Box, null, ___EmotionJSX(Title, null), ___EmotionJSX(Box, {
-    sx: sx.defaultFieldsWrapperBox
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
+    sx: sx.container
   }, ___EmotionJSX(Box, {
     isRow: true,
     sx: {
@@ -237,27 +194,23 @@ export var Display = function Display() {
     sx: sx.fieldColumnTitleWrapper
   }, ___EmotionJSX(Text, {
     sx: sx.fieldColumnTitle
-  }, "PingOne")), ___EmotionJSX(Box, {
+  }, "Application")), ___EmotionJSX(Box, {
     sx: sx.fieldColumnTitleWrapper
   }, ___EmotionJSX(Text, {
     sx: sx.fieldColumnTitle
-  }, "Google Suites"))), ___EmotionJSX(Separator, null), ___EmotionJSX(Row, {
+  }, "PingOne"))), ___EmotionJSX(Separator, null), ___EmotionJSX(Row, {
     withBadge: true,
-    leftValue: "UserId",
-    rightValue: "mdorey"
+    leftValue: "username",
+    rightValue: "User ID"
   }), ___EmotionJSX(Row, {
-    leftValue: "givenName",
-    rightValue: "firstName"
+    leftValue: "firstName",
+    rightValue: "Given Name"
   }), ___EmotionJSX(Row, {
-    leftValue: "familyName",
-    rightValue: "lastName"
+    leftValue: "lastName",
+    rightValue: "Family Name"
   }), ___EmotionJSX(Row, {
-    withTooltip: true,
     leftValue: "population",
-    rightValue: "population"
-  }), ___EmotionJSX(Row, {
-    leftValue: "password",
-    rightValue: "password"
+    rightValue: "Population"
   })));
 };
 Display.parameters = {
@@ -268,7 +221,7 @@ Display.parameters = {
 };
 export var DisplayWithError = function DisplayWithError() {
   var withError = true;
-  return ___EmotionJSX(Box, null, ___EmotionJSX(Title, null), ___EmotionJSX(Callout, {
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Callout, {
     status: statuses.ERROR,
     sx: sx.calloutSx
   }, ___EmotionJSX(Text, null, "You\u2019ve got problems. Allow me to tell you about them in some detail so that you can address them.", ___EmotionJSX(Link, {
@@ -277,7 +230,7 @@ export var DisplayWithError = function DisplayWithError() {
     "aria-label": "".concat(statuses.ERROR, "-callout"),
     variant: "app"
   }, ' ', "Read More"))), ___EmotionJSX(Box, {
-    sx: sx.defaultFieldsWrapperBox
+    sx: sx.container
   }, ___EmotionJSX(Box, {
     isRow: true,
     sx: {
@@ -287,22 +240,24 @@ export var DisplayWithError = function DisplayWithError() {
     sx: sx.fieldColumnTitleWrapper
   }, ___EmotionJSX(Text, {
     sx: sx.fieldColumnTitle
-  }, "PingOne")), ___EmotionJSX(Box, {
+  }, "Application")), ___EmotionJSX(Box, {
     sx: sx.fieldColumnTitleWrapper
   }, ___EmotionJSX(Text, {
     sx: sx.fieldColumnTitle
-  }, "Google Suites"))), ___EmotionJSX(Separator, null), ___EmotionJSX(Row, {
+  }, "PingOne"))), ___EmotionJSX(Separator, null), ___EmotionJSX(Row, {
     withBadge: true,
-    leftValue: "UserId",
-    rightValue: "mdorey"
+    leftValue: "username",
+    rightValue: "User ID"
   }), ___EmotionJSX(Row, {
-    withError: withError,
-    leftValue: "givenName",
-    rightValue: "firstName"
+    leftValue: "firstName",
+    rightValue: "Given Name"
+  }), ___EmotionJSX(Row, {
+    leftValue: "lastName",
+    rightValue: "Family Name"
   }), ___EmotionJSX(Row, {
     withError: withError,
-    leftValue: "familyName",
-    rightValue: "lastName"
+    leftValue: "population",
+    rightValue: "Population"
   })));
 };
 export var Edit = function Edit() {

package/package.json

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