@pingux/astro 2.26.0-alpha.1 → 2.26.0-alpha.3

package/lib/cjs/components/Badge/Badge.stories.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Default = exports.CountBadge = exports.BadgeWithLeftSlotAndIcon = exports.BadgeWithIcon = exports.BadgeWithCustomColors = void 0;
+exports["default"] = exports.StatusBadgeVariants = exports.Default = exports.CountBadge = exports.BadgeWithLeftSlotAndIcon = exports.BadgeWithIcon = exports.BadgeWithCustomColors = void 0;
 var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
@@ -212,4 +212,34 @@ var BadgeWithLeftSlotAndIcon = function BadgeWithLeftSlotAndIcon() {
     }
   })));
 };
-exports.BadgeWithLeftSlotAndIcon = BadgeWithLeftSlotAndIcon;
+exports.BadgeWithLeftSlotAndIcon = BadgeWithLeftSlotAndIcon;
+var StatusBadgeVariants = function StatusBadgeVariants(_ref6) {
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref6), _ref6));
+  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Badge, (0, _extends2["default"])({
+    variant: "criticalStatusBadge"
+  }, args, {
+    label: "Critical",
+    mb: "lg"
+  })), (0, _react2.jsx)(_index.Badge, (0, _extends2["default"])({
+    variant: "warningStatusBadge"
+  }, args, {
+    label: "Warning",
+    mb: "lg"
+  })), (0, _react2.jsx)(_index.Badge, (0, _extends2["default"])({
+    variant: "healthyStatusBadge"
+  }, args, {
+    label: "Healthy",
+    mb: "lg"
+  })), (0, _react2.jsx)(_index.Badge, (0, _extends2["default"])({
+    variant: "activeStatusBadge"
+  }, args, {
+    label: "Active"
+  })));
+};
+exports.StatusBadgeVariants = StatusBadgeVariants;
+StatusBadgeVariants.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.badge.statusVariants
+  }
+};

package/lib/cjs/components/Badge/Badge.styles.js

@@ -138,6 +138,55 @@ var countNeutral = _objectSpread(_objectSpread({}, countDefault), {}, {
     textTransform: 'uppercase'
   }
 });
+var convenienceDefault = _objectSpread(_objectSpread({}, baseBadge), {}, {
+  backgroundColor: '#4462ED !important',
+  '& span': {
+    fontWeight: 1
+  }
+});
+var calloutBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
+  height: '21px',
+  backgroundColor: '#FFF !important',
+  border: 'solid 1px',
+  '& span': {
+    color: 'text.primary'
+  }
+});
+var errorCalloutBadge = _objectSpread(_objectSpread({}, calloutBadge), {}, {
+  borderColor: 'critical.bright'
+});
+var warningCalloutBadge = _objectSpread(_objectSpread({}, calloutBadge), {}, {
+  borderColor: '#E86900'
+});
+var successCalloutBadge = _objectSpread(_objectSpread({}, calloutBadge), {}, {
+  borderColor: 'success.bright'
+});
+var infoCalloutBadge = _objectSpread(_objectSpread({}, calloutBadge), {}, {
+  borderColor: 'text.secondary'
+});
+var statusBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
+  border: 'solid 1px',
+  height: '21px',
+  '& span': {
+    color: 'text.primary'
+  }
+});
+var criticalStatusBadge = _objectSpread(_objectSpread({}, statusBadge), {}, {
+  borderColor: 'critical.bright',
+  backgroundColor: '#FFEBE7 !important'
+});
+var warningStatusBadge = _objectSpread(_objectSpread({}, statusBadge), {}, {
+  borderColor: '#E86900',
+  backgroundColor: '#FFF6F2 !important'
+});
+var healthyStatusBadge = _objectSpread(_objectSpread({}, statusBadge), {}, {
+  borderColor: 'success.bright',
+  backgroundColor: '#E5FFE9 !important'
+});
+var activeStatusBadge = _objectSpread(_objectSpread({}, statusBadge), {}, {
+  borderColor: 'active',
+  backgroundColor: '#F7F8FD !important'
+});
 var _default = {
   baseBadge: baseBadge,
   environmentBadge: environmentBadge,
@@ -148,6 +197,15 @@ var _default = {
   deleteButton: deleteButton,
   countBadge: countBadge,
   countNeutral: countNeutral,
-  badgeDeleteButton: badgeDeleteButton
+  badgeDeleteButton: badgeDeleteButton,
+  convenienceDefault: convenienceDefault,
+  errorCalloutBadge: errorCalloutBadge,
+  warningCalloutBadge: warningCalloutBadge,
+  successCalloutBadge: successCalloutBadge,
+  infoCalloutBadge: infoCalloutBadge,
+  criticalStatusBadge: criticalStatusBadge,
+  warningStatusBadge: warningStatusBadge,
+  healthyStatusBadge: healthyStatusBadge,
+  activeStatusBadge: activeStatusBadge
 };
 exports["default"] = _default;

package/lib/cjs/components/Badge/Convenience/ConvenienceBadges.stories.js

@@ -0,0 +1,75 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Default = exports.CalloutBadges = void 0;
+var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _storybookDocsLayout = _interopRequireDefault(require("../../../../.storybook/storybookDocsLayout"));
+var _index = require("../../../index");
+var _figmaLinks = require("../../../utils/designUtils/figmaLinks.js");
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Components/Badge/Convenience',
+  component: _index.DefaultBadge,
+  argTypes: {
+    label: {
+      control: {
+        type: 'text'
+      }
+    },
+    isUppercase: {
+      control: {
+        type: 'boolean'
+      }
+    }
+  },
+  args: {},
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      },
+      page: function page() {
+        return (0, _react2.jsx)(_storybookDocsLayout["default"], null);
+      }
+    }
+  }
+};
+exports["default"] = _default;
+var Default = function Default(_ref) {
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref), _ref));
+  return (0, _react2.jsx)(_index.DefaultBadge, args);
+};
+exports.Default = Default;
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.badge.convenienceDefault
+  }
+};
+var CalloutBadges = function CalloutBadges(_ref2) {
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref2), _ref2));
+  return (0, _react2.jsx)(_index.Box, {
+    gap: "lg"
+  }, (0, _react2.jsx)(_index.ErrorCalloutBadge, (0, _extends2["default"])({
+    label: "You\u2019ve Got Problems"
+  }, args)), (0, _react2.jsx)(_index.WarningCalloutBadge, (0, _extends2["default"])({
+    label: "You\u2019ve Got Issues"
+  }, args)), (0, _react2.jsx)(_index.SuccessCalloutBadge, (0, _extends2["default"])({
+    label: "It Worked!"
+  }, args)), (0, _react2.jsx)(_index.InfoCalloutBadge, (0, _extends2["default"])({
+    label: "Oh by the Way"
+  }, args)));
+};
+exports.CalloutBadges = CalloutBadges;
+CalloutBadges.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.badge.calloutBadges
+  }
+};

package/lib/cjs/components/Badge/Convenience/ConvenienceBadges.test.js

@@ -0,0 +1,66 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _ = require("../../..");
+var _testAxe = _interopRequireDefault(require("../../../utils/testUtils/testAxe"));
+var _react3 = require("@emotion/react");
+var testId = 'test-separator';
+var defaultProps = {
+  'data-testid': testId,
+  label: 'Test Label'
+};
+var getDefaultBadgeComponent = function getDefaultBadgeComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _react2.render)((0, _react3.jsx)(_.DefaultBadge, (0, _extends2["default"])({}, defaultProps, props)));
+};
+var getErrorCalloutBadgeComponent = function getErrorCalloutBadgeComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _react2.render)((0, _react3.jsx)(_.ErrorCalloutBadge, (0, _extends2["default"])({}, defaultProps, props)));
+};
+var getInfoCalloutBadgeComponent = function getInfoCalloutBadgeComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _react2.render)((0, _react3.jsx)(_.InfoCalloutBadge, (0, _extends2["default"])({}, defaultProps, props)));
+};
+var getSuccessCalloutBadgeComponent = function getSuccessCalloutBadgeComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _react2.render)((0, _react3.jsx)(_.SuccessCalloutBadge, (0, _extends2["default"])({}, defaultProps, props)));
+};
+var getWarningCalloutBadgeComponent = function getWarningCalloutBadgeComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _react2.render)((0, _react3.jsx)(_.WarningCalloutBadge, (0, _extends2["default"])({}, defaultProps, props)));
+};
+
+// Need to be added to each test file to test accessibility using axe.
+(0, _testAxe["default"])(getDefaultBadgeComponent);
+(0, _testAxe["default"])(getErrorCalloutBadgeComponent);
+(0, _testAxe["default"])(getInfoCalloutBadgeComponent);
+(0, _testAxe["default"])(getSuccessCalloutBadgeComponent);
+(0, _testAxe["default"])(getWarningCalloutBadgeComponent);
+test('renders DefaultBadge component', function () {
+  getDefaultBadgeComponent();
+  var badge = _react2.screen.getByTestId(testId);
+  expect(badge).toBeInTheDocument();
+});
+test('renders ErrorCalloutBadge component', function () {
+  getErrorCalloutBadgeComponent();
+  var badge = _react2.screen.getByTestId(testId);
+  expect(badge).toBeInTheDocument();
+});
+test('renders InfoCalloutBadge component', function () {
+  getInfoCalloutBadgeComponent();
+  var badge = _react2.screen.getByTestId(testId);
+  expect(badge).toBeInTheDocument();
+});
+test('renders SuccessCalloutBadge component', function () {
+  getSuccessCalloutBadgeComponent();
+  var badge = _react2.screen.getByTestId(testId);
+  expect(badge).toBeInTheDocument();
+});
+test('renders WarningCalloutBadge component', function () {
+  getWarningCalloutBadgeComponent();
+  var badge = _react2.screen.getByTestId(testId);
+  expect(badge).toBeInTheDocument();
+});

package/lib/cjs/components/Badge/Convenience/DefaultBadge.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../../..");
+var _react2 = require("@emotion/react");
+var DefaultBadge = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
+  return (0, _react2.jsx)(_.Badge, (0, _extends2["default"])({
+    ref: ref,
+    label: "default",
+    isUppercase: true,
+    variant: "convenienceDefault"
+  }, props));
+});
+var _default = DefaultBadge;
+exports["default"] = _default;

package/lib/cjs/components/Badge/Convenience/ErrorCalloutBadge.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _AlertCircleIcon = _interopRequireDefault(require("@pingux/mdi-react/AlertCircleIcon"));
+var _ = require("../../..");
+var _react2 = require("@emotion/react");
+var ErrorCalloutBadge = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
+  return (0, _react2.jsx)(_.Badge, (0, _extends2["default"])({
+    ref: ref,
+    variant: "errorCalloutBadge",
+    slots: {
+      leftIcon: (0, _react2.jsx)(_.Icon, {
+        icon: _AlertCircleIcon["default"],
+        size: 15,
+        color: "critical.bright"
+      })
+    }
+  }, props));
+});
+var _default = ErrorCalloutBadge;
+exports["default"] = _default;

package/lib/cjs/components/Badge/Convenience/InfoCalloutBadge.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _InformationIcon = _interopRequireDefault(require("@pingux/mdi-react/InformationIcon"));
+var _ = require("../../..");
+var _react2 = require("@emotion/react");
+var InfoCalloutBadge = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
+  return (0, _react2.jsx)(_.Badge, (0, _extends2["default"])({
+    ref: ref,
+    variant: "infoCalloutBadge",
+    slots: {
+      leftIcon: (0, _react2.jsx)(_.Icon, {
+        icon: _InformationIcon["default"],
+        size: 15,
+        color: "text.secondary"
+      })
+    }
+  }, props));
+});
+var _default = InfoCalloutBadge;
+exports["default"] = _default;

package/lib/cjs/components/Badge/Convenience/SuccessCalloutBadge.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _CheckCircleIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckCircleIcon"));
+var _ = require("../../..");
+var _react2 = require("@emotion/react");
+var SuccessCalloutBadge = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
+  return (0, _react2.jsx)(_.Badge, (0, _extends2["default"])({
+    ref: ref,
+    variant: "successCalloutBadge",
+    slots: {
+      leftIcon: (0, _react2.jsx)(_.Icon, {
+        icon: _CheckCircleIcon["default"],
+        size: 15,
+        color: "success.bright"
+      })
+    }
+  }, props));
+});
+var _default = SuccessCalloutBadge;
+exports["default"] = _default;

package/lib/cjs/components/Badge/Convenience/WarningCalloutBadge.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _AlertIcon = _interopRequireDefault(require("@pingux/mdi-react/AlertIcon"));
+var _ = require("../../..");
+var _react2 = require("@emotion/react");
+var WarningCalloutBadge = /*#__PURE__*/_react["default"].forwardRef(function (props, ref) {
+  return (0, _react2.jsx)(_.Badge, (0, _extends2["default"])({
+    ref: ref,
+    variant: "warningCalloutBadge",
+    slots: {
+      leftIcon: (0, _react2.jsx)(_.Icon, {
+        icon: _AlertIcon["default"],
+        size: 15,
+        color: "#E86900"
+      })
+    }
+  }, props));
+});
+var _default = WarningCalloutBadge;
+exports["default"] = _default;

package/lib/cjs/components/PasswordField/PasswordField.stories.js

@@ -304,7 +304,8 @@ var Warning = function Warning() {
     onVisibleChange: onVisibleChange,
     isVisible: isVisible,
     label: "Example Label",
-    status: "warning"
+    status: "warning",
+    helperText: "This might match a password you\u2019ve used before."
   });
 };
 exports.Warning = Warning;
@@ -320,7 +321,8 @@ var Success = function Success() {
     onVisibleChange: onVisibleChange,
     isVisible: isVisible,
     label: "Example Label",
-    status: "success"
+    status: "success",
+    helperText: "This password meets requirements."
   });
 };
 exports.Success = Success;

package/lib/cjs/index.d.ts

@@ -15,6 +15,11 @@ export { default as Avatar } from './components/Avatar';
 export * from './components/Avatar';
 export { default as Badge } from './components/Badge';
 export * from './components/Badge';
+export { default as DefaultBadge } from './components/Badge/Convenience/DefaultBadge';
+export { default as ErrorCalloutBadge } from './components/Badge/Convenience/ErrorCalloutBadge';
+export { default as InfoCalloutBadge } from './components/Badge/Convenience/InfoCalloutBadge';
+export { default as SuccessCalloutBadge } from './components/Badge/Convenience/SuccessCalloutBadge';
+export { default as WarningCalloutBadge } from './components/Badge/Convenience/WarningCalloutBadge';
 export { default as Box } from './components/Box';
 export * from './components/Box';
 export { default as Bracket } from './components/Bracket';

package/lib/cjs/index.js

@@ -21,6 +21,11 @@ var _exportNames = {
   AstroProvider: true,
   Avatar: true,
   Badge: true,
+  DefaultBadge: true,
+  ErrorCalloutBadge: true,
+  InfoCalloutBadge: true,
+  SuccessCalloutBadge: true,
+  WarningCalloutBadge: true,
   Box: true,
   Bracket: true,
   Breadcrumbs: true,
@@ -347,6 +352,12 @@ _Object$defineProperty(exports, "DatePicker", {
     return _DatePicker["default"];
   }
 });
+_Object$defineProperty(exports, "DefaultBadge", {
+  enumerable: true,
+  get: function get() {
+    return _DefaultBadge["default"];
+  }
+});
 _Object$defineProperty(exports, "EditButton", {
   enumerable: true,
   get: function get() {
@@ -359,6 +370,12 @@ _Object$defineProperty(exports, "EnvironmentBreadcrumb", {
     return _EnvironmentBreadcrumb["default"];
   }
 });
+_Object$defineProperty(exports, "ErrorCalloutBadge", {
+  enumerable: true,
+  get: function get() {
+    return _ErrorCalloutBadge["default"];
+  }
+});
 _Object$defineProperty(exports, "FieldHelperText", {
   enumerable: true,
   get: function get() {
@@ -413,6 +430,12 @@ _Object$defineProperty(exports, "ImageUploadField", {
     return _ImageUploadField["default"];
   }
 });
+_Object$defineProperty(exports, "InfoCalloutBadge", {
+  enumerable: true,
+  get: function get() {
+    return _InfoCalloutBadge["default"];
+  }
+});
 _Object$defineProperty(exports, "Input", {
   enumerable: true,
   get: function get() {
@@ -671,6 +694,12 @@ _Object$defineProperty(exports, "Stepper", {
     return _Stepper["default"];
   }
 });
+_Object$defineProperty(exports, "SuccessCalloutBadge", {
+  enumerable: true,
+  get: function get() {
+    return _SuccessCalloutBadge["default"];
+  }
+});
 _Object$defineProperty(exports, "Switch", {
   enumerable: true,
   get: function get() {
@@ -773,6 +802,12 @@ _Object$defineProperty(exports, "TreeView", {
     return _TreeView["default"];
   }
 });
+_Object$defineProperty(exports, "WarningCalloutBadge", {
+  enumerable: true,
+  get: function get() {
+    return _WarningCalloutBadge["default"];
+  }
+});
 _Object$defineProperty(exports, "useOverlayPosition", {
   enumerable: true,
   get: function get() {
@@ -893,6 +928,11 @@ _forEachInstanceProperty(_context8 = _Object$keys(_Badge)).call(_context8, funct
     }
   });
 });
+var _DefaultBadge = _interopRequireDefault(require("./components/Badge/Convenience/DefaultBadge"));
+var _ErrorCalloutBadge = _interopRequireDefault(require("./components/Badge/Convenience/ErrorCalloutBadge"));
+var _InfoCalloutBadge = _interopRequireDefault(require("./components/Badge/Convenience/InfoCalloutBadge"));
+var _SuccessCalloutBadge = _interopRequireDefault(require("./components/Badge/Convenience/SuccessCalloutBadge"));
+var _WarningCalloutBadge = _interopRequireDefault(require("./components/Badge/Convenience/WarningCalloutBadge"));
 var _Box = _interopRequireWildcard(require("./components/Box"));
 _forEachInstanceProperty(_context9 = _Object$keys(_Box)).call(_context9, function (key) {
   if (key === "default" || key === "__esModule") return;

package/lib/cjs/utils/designUtils/figmaLinks.js

@@ -17,7 +17,10 @@ var FIGMA_LINKS = {
   },
   badge: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=1899-11550&t=VgqEexa1CXAXfPpp-0',
-    countBadge: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=4255%3A12558&t=3b86het2R9G2Zyo2-1'
+    countBadge: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=4255%3A12558&t=3b86het2R9G2Zyo2-1',
+    statusVariants: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=43214%3A600&mode=design&t=1lk7azcFoekl7S8N-1',
+    convenienceDefault: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=43601%3A18124&mode=dev',
+    calloutBadges: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=12854-33198&mode=design&t=cJyYBxLFH8D5XxOw-0'
   },
   breadcrumbs: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=1162-11924&t=8Wwd3tIBh3GEjCJB-0'

package/lib/components/Badge/Badge.stories.js

@@ -198,4 +198,33 @@ export var BadgeWithLeftSlotAndIcon = function BadgeWithLeftSlotAndIcon() {
       name: 'Clear Icon'
     }
   })));
+};
+export var StatusBadgeVariants = function StatusBadgeVariants(_ref6) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref6), _ref6));
+  return ___EmotionJSX(Box, null, ___EmotionJSX(Badge, _extends({
+    variant: "criticalStatusBadge"
+  }, args, {
+    label: "Critical",
+    mb: "lg"
+  })), ___EmotionJSX(Badge, _extends({
+    variant: "warningStatusBadge"
+  }, args, {
+    label: "Warning",
+    mb: "lg"
+  })), ___EmotionJSX(Badge, _extends({
+    variant: "healthyStatusBadge"
+  }, args, {
+    label: "Healthy",
+    mb: "lg"
+  })), ___EmotionJSX(Badge, _extends({
+    variant: "activeStatusBadge"
+  }, args, {
+    label: "Active"
+  })));
+};
+StatusBadgeVariants.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.badge.statusVariants
+  }
 };

package/lib/components/Badge/Badge.styles.js

@@ -128,6 +128,55 @@ var countNeutral = _objectSpread(_objectSpread({}, countDefault), {}, {
     textTransform: 'uppercase'
   }
 });
+var convenienceDefault = _objectSpread(_objectSpread({}, baseBadge), {}, {
+  backgroundColor: '#4462ED !important',
+  '& span': {
+    fontWeight: 1
+  }
+});
+var calloutBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
+  height: '21px',
+  backgroundColor: '#FFF !important',
+  border: 'solid 1px',
+  '& span': {
+    color: 'text.primary'
+  }
+});
+var errorCalloutBadge = _objectSpread(_objectSpread({}, calloutBadge), {}, {
+  borderColor: 'critical.bright'
+});
+var warningCalloutBadge = _objectSpread(_objectSpread({}, calloutBadge), {}, {
+  borderColor: '#E86900'
+});
+var successCalloutBadge = _objectSpread(_objectSpread({}, calloutBadge), {}, {
+  borderColor: 'success.bright'
+});
+var infoCalloutBadge = _objectSpread(_objectSpread({}, calloutBadge), {}, {
+  borderColor: 'text.secondary'
+});
+var statusBadge = _objectSpread(_objectSpread({}, baseBadge), {}, {
+  border: 'solid 1px',
+  height: '21px',
+  '& span': {
+    color: 'text.primary'
+  }
+});
+var criticalStatusBadge = _objectSpread(_objectSpread({}, statusBadge), {}, {
+  borderColor: 'critical.bright',
+  backgroundColor: '#FFEBE7 !important'
+});
+var warningStatusBadge = _objectSpread(_objectSpread({}, statusBadge), {}, {
+  borderColor: '#E86900',
+  backgroundColor: '#FFF6F2 !important'
+});
+var healthyStatusBadge = _objectSpread(_objectSpread({}, statusBadge), {}, {
+  borderColor: 'success.bright',
+  backgroundColor: '#E5FFE9 !important'
+});
+var activeStatusBadge = _objectSpread(_objectSpread({}, statusBadge), {}, {
+  borderColor: 'active',
+  backgroundColor: '#F7F8FD !important'
+});
 export default {
   baseBadge: baseBadge,
   environmentBadge: environmentBadge,
@@ -138,5 +187,14 @@ export default {
   deleteButton: deleteButton,
   countBadge: countBadge,
   countNeutral: countNeutral,
-  badgeDeleteButton: badgeDeleteButton
+  badgeDeleteButton: badgeDeleteButton,
+  convenienceDefault: convenienceDefault,
+  errorCalloutBadge: errorCalloutBadge,
+  warningCalloutBadge: warningCalloutBadge,
+  successCalloutBadge: successCalloutBadge,
+  infoCalloutBadge: infoCalloutBadge,
+  criticalStatusBadge: criticalStatusBadge,
+  warningStatusBadge: warningStatusBadge,
+  healthyStatusBadge: healthyStatusBadge,
+  activeStatusBadge: activeStatusBadge
 };

package/lib/components/Badge/Convenience/ConvenienceBadges.stories.js

@@ -0,0 +1,64 @@
+import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import DocsLayout from '../../../../.storybook/storybookDocsLayout';
+import { Box, DefaultBadge, ErrorCalloutBadge, InfoCalloutBadge, SuccessCalloutBadge, WarningCalloutBadge } from '../../../index';
+import { FIGMA_LINKS } from '../../../utils/designUtils/figmaLinks.js';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Components/Badge/Convenience',
+  component: DefaultBadge,
+  argTypes: {
+    label: {
+      control: {
+        type: 'text'
+      }
+    },
+    isUppercase: {
+      control: {
+        type: 'boolean'
+      }
+    }
+  },
+  args: {},
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      },
+      page: function page() {
+        return ___EmotionJSX(DocsLayout, null);
+      }
+    }
+  }
+};
+export var Default = function Default(_ref) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+  return ___EmotionJSX(DefaultBadge, args);
+};
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.badge.convenienceDefault
+  }
+};
+export var CalloutBadges = function CalloutBadges(_ref2) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
+  return ___EmotionJSX(Box, {
+    gap: "lg"
+  }, ___EmotionJSX(ErrorCalloutBadge, _extends({
+    label: "You\u2019ve Got Problems"
+  }, args)), ___EmotionJSX(WarningCalloutBadge, _extends({
+    label: "You\u2019ve Got Issues"
+  }, args)), ___EmotionJSX(SuccessCalloutBadge, _extends({
+    label: "It Worked!"
+  }, args)), ___EmotionJSX(InfoCalloutBadge, _extends({
+    label: "Oh by the Way"
+  }, args)));
+};
+CalloutBadges.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.badge.calloutBadges
+  }
+};

package/lib/components/Badge/Convenience/ConvenienceBadges.test.js

@@ -0,0 +1,63 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DefaultBadge, ErrorCalloutBadge, InfoCalloutBadge, SuccessCalloutBadge, WarningCalloutBadge } from '../../..';
+import axeTest from '../../../utils/testUtils/testAxe';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'test-separator';
+var defaultProps = {
+  'data-testid': testId,
+  label: 'Test Label'
+};
+var getDefaultBadgeComponent = function getDefaultBadgeComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(DefaultBadge, _extends({}, defaultProps, props)));
+};
+var getErrorCalloutBadgeComponent = function getErrorCalloutBadgeComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(ErrorCalloutBadge, _extends({}, defaultProps, props)));
+};
+var getInfoCalloutBadgeComponent = function getInfoCalloutBadgeComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(InfoCalloutBadge, _extends({}, defaultProps, props)));
+};
+var getSuccessCalloutBadgeComponent = function getSuccessCalloutBadgeComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(SuccessCalloutBadge, _extends({}, defaultProps, props)));
+};
+var getWarningCalloutBadgeComponent = function getWarningCalloutBadgeComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(WarningCalloutBadge, _extends({}, defaultProps, props)));
+};
+
+// Need to be added to each test file to test accessibility using axe.
+axeTest(getDefaultBadgeComponent);
+axeTest(getErrorCalloutBadgeComponent);
+axeTest(getInfoCalloutBadgeComponent);
+axeTest(getSuccessCalloutBadgeComponent);
+axeTest(getWarningCalloutBadgeComponent);
+test('renders DefaultBadge component', function () {
+  getDefaultBadgeComponent();
+  var badge = screen.getByTestId(testId);
+  expect(badge).toBeInTheDocument();
+});
+test('renders ErrorCalloutBadge component', function () {
+  getErrorCalloutBadgeComponent();
+  var badge = screen.getByTestId(testId);
+  expect(badge).toBeInTheDocument();
+});
+test('renders InfoCalloutBadge component', function () {
+  getInfoCalloutBadgeComponent();
+  var badge = screen.getByTestId(testId);
+  expect(badge).toBeInTheDocument();
+});
+test('renders SuccessCalloutBadge component', function () {
+  getSuccessCalloutBadgeComponent();
+  var badge = screen.getByTestId(testId);
+  expect(badge).toBeInTheDocument();
+});
+test('renders WarningCalloutBadge component', function () {
+  getWarningCalloutBadgeComponent();
+  var badge = screen.getByTestId(testId);
+  expect(badge).toBeInTheDocument();
+});

package/lib/components/Badge/Convenience/DefaultBadge.js

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { Badge } from '../../..';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var DefaultBadge = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return ___EmotionJSX(Badge, _extends({
+    ref: ref,
+    label: "default",
+    isUppercase: true,
+    variant: "convenienceDefault"
+  }, props));
+});
+export default DefaultBadge;

package/lib/components/Badge/Convenience/ErrorCalloutBadge.js

@@ -0,0 +1,19 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import AlertCircle from '@pingux/mdi-react/AlertCircleIcon';
+import { Badge, Icon } from '../../..';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var ErrorCalloutBadge = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return ___EmotionJSX(Badge, _extends({
+    ref: ref,
+    variant: "errorCalloutBadge",
+    slots: {
+      leftIcon: ___EmotionJSX(Icon, {
+        icon: AlertCircle,
+        size: 15,
+        color: "critical.bright"
+      })
+    }
+  }, props));
+});
+export default ErrorCalloutBadge;

package/lib/components/Badge/Convenience/InfoCalloutBadge.js

@@ -0,0 +1,19 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import Information from '@pingux/mdi-react/InformationIcon';
+import { Badge, Icon } from '../../..';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var InfoCalloutBadge = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return ___EmotionJSX(Badge, _extends({
+    ref: ref,
+    variant: "infoCalloutBadge",
+    slots: {
+      leftIcon: ___EmotionJSX(Icon, {
+        icon: Information,
+        size: 15,
+        color: "text.secondary"
+      })
+    }
+  }, props));
+});
+export default InfoCalloutBadge;

package/lib/components/Badge/Convenience/SuccessCalloutBadge.js

@@ -0,0 +1,19 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import CheckCircle from '@pingux/mdi-react/CheckCircleIcon';
+import { Badge, Icon } from '../../..';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var SuccessCalloutBadge = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return ___EmotionJSX(Badge, _extends({
+    ref: ref,
+    variant: "successCalloutBadge",
+    slots: {
+      leftIcon: ___EmotionJSX(Icon, {
+        icon: CheckCircle,
+        size: 15,
+        color: "success.bright"
+      })
+    }
+  }, props));
+});
+export default SuccessCalloutBadge;

package/lib/components/Badge/Convenience/WarningCalloutBadge.js

@@ -0,0 +1,19 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import Alert from '@pingux/mdi-react/AlertIcon';
+import { Badge, Icon } from '../../..';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var WarningCalloutBadge = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  return ___EmotionJSX(Badge, _extends({
+    ref: ref,
+    variant: "warningCalloutBadge",
+    slots: {
+      leftIcon: ___EmotionJSX(Icon, {
+        icon: Alert,
+        size: 15,
+        color: "#E86900"
+      })
+    }
+  }, props));
+});
+export default WarningCalloutBadge;

package/lib/components/PasswordField/PasswordField.stories.js

@@ -283,7 +283,8 @@ export var Warning = function Warning() {
     onVisibleChange: onVisibleChange,
     isVisible: isVisible,
     label: "Example Label",
-    status: "warning"
+    status: "warning",
+    helperText: "This might match a password you\u2019ve used before."
   });
 };
 export var Success = function Success() {
@@ -298,7 +299,8 @@ export var Success = function Success() {
     onVisibleChange: onVisibleChange,
     isVisible: isVisible,
     label: "Example Label",
-    status: "success"
+    status: "success",
+    helperText: "This password meets requirements."
   });
 };
 export var DynamicRequired = function DynamicRequired() {

package/lib/index.js

@@ -19,6 +19,11 @@ export { default as Avatar } from './components/Avatar';
 export * from './components/Avatar';
 export { default as Badge } from './components/Badge';
 export * from './components/Badge';
+export { default as DefaultBadge } from './components/Badge/Convenience/DefaultBadge';
+export { default as ErrorCalloutBadge } from './components/Badge/Convenience/ErrorCalloutBadge';
+export { default as InfoCalloutBadge } from './components/Badge/Convenience/InfoCalloutBadge';
+export { default as SuccessCalloutBadge } from './components/Badge/Convenience/SuccessCalloutBadge';
+export { default as WarningCalloutBadge } from './components/Badge/Convenience/WarningCalloutBadge';
 export { default as Box } from './components/Box';
 export * from './components/Box';
 export { default as Bracket } from './components/Bracket';

package/lib/utils/designUtils/figmaLinks.js

@@ -10,7 +10,10 @@ export var FIGMA_LINKS = {
   },
   badge: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=1899-11550&t=VgqEexa1CXAXfPpp-0',
-    countBadge: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=4255%3A12558&t=3b86het2R9G2Zyo2-1'
+    countBadge: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=4255%3A12558&t=3b86het2R9G2Zyo2-1',
+    statusVariants: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=43214%3A600&mode=design&t=1lk7azcFoekl7S8N-1',
+    convenienceDefault: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=43601%3A18124&mode=dev',
+    calloutBadges: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=12854-33198&mode=design&t=cJyYBxLFH8D5XxOw-0'
   },
   breadcrumbs: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=1162-11924&t=8Wwd3tIBh3GEjCJB-0'

package/package.json

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