@pingux/astro 2.161.1-alpha.0 → 2.161.1-alpha.2

package/lib/cjs/components/Avatar/Avatar.js

@@ -44,14 +44,15 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "is-".concat(color), color), "size-".concat(size), size), "font-size-".concat(size), src ? false : size), 'is-square', isSquare), 'is-image', src), 'is-logo', isLogo)),
     classNames = _useStatusClasses.classNames;
   if (src) {
-    return (0, _react2.jsx)(_themeUi.Box, {
+    return (0, _react2.jsx)(_themeUi.Box, (0, _extends2["default"])({
       variant: "avatar",
       className: classNames
-    }, (0, _react2.jsx)(_themeUi.Avatar, (0, _extends2["default"])({
+    }, others), (0, _react2.jsx)(_themeUi.Avatar, {
       ref: ref,
       alt: alt,
-      src: src
-    }, others)));
+      src: src,
+      size: size
+    }));
   }
   return (0, _react2.jsx)(_themeUi.Box, (0, _extends2["default"])({
     variant: "avatar",

package/lib/cjs/components/Avatar/stories/AvatarNextGen.js

@@ -10,6 +10,8 @@ var _react = _interopRequireDefault(require("react"));
 var _index = require("../../../index");
 var _react2 = require("@emotion/react");
 var AvatarNextGen = function AvatarNextGen() {
-  return (0, _react2.jsx)(_index.Avatar, null);
+  return (0, _react2.jsx)(_index.Avatar, {
+    color: "cyan"
+  });
 };
 var _default = exports["default"] = AvatarNextGen;

package/lib/cjs/components/PanelHeader/PanelHeader.js

@@ -61,7 +61,7 @@ var PanelHeader = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     }
   }));
   var renderAvatar = (0, _react2.jsx)(_index.Avatar, (0, _extends2["default"])({
-    color: "green",
+    color: image !== null && image !== void 0 && image.src ? false : 'green',
     src: image === null || image === void 0 ? void 0 : image.src,
     isSquare: !!(image !== null && image !== void 0 && image.src),
     size: "avatar.lg",

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithSubtext = exports.WithImage = exports.WithExtraLongText = exports.WithControls = exports.WithBreadcrumbs = exports.Default = exports.BreadcrumbsWithExtraLongText = void 0;
+exports["default"] = exports.WithSubtext = exports.WithImage = exports.WithExtraLongText = exports.WithControls = exports.WithBreadcrumbs = exports.WithAvatar = exports.Default = exports.BreadcrumbsWithExtraLongText = 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"));
@@ -90,12 +90,15 @@ var WithImage = exports.WithImage = function WithImage(args) {
   return (0, _react2.jsx)(_index.PanelHeader, (0, _extends2["default"])({}, args, {
     data: {
       image: {
-        src: _images.pingImg,
+        src: _images.userImagePanelHeader,
         alt: 'Ping Identity Logo',
-        'aria-label': 'Ping Identity Logo',
-        avatarDefaultText: 'FV'
+        'aria-label': 'Ping Identity Logo'
       },
+      avatarDefaultText: 'FV',
       text: 'Fons Vernall'
+    },
+    avatarProps: {
+      size: 'lg'
     }
   }));
 };
@@ -105,6 +108,28 @@ WithImage.parameters = {
     url: _figmaLinks.FIGMA_LINKS.panelHeader.withImage
   }
 };
+var WithAvatar = exports.WithAvatar = function WithAvatar(args) {
+  return (0, _react2.jsx)(_index.PanelHeader, (0, _extends2["default"])({}, args, {
+    data: {
+      image: {
+        src: _images.pingImg,
+        alt: 'Ping Identity Logo',
+        'aria-label': 'Ping Identity Logo'
+      },
+      text: 'Fons Vernall'
+    },
+    avatarProps: {
+      size: 'lg',
+      isLogo: true
+    }
+  }));
+};
+WithAvatar.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.panelHeader.WithAvatar
+  }
+};
 var WithBreadcrumbs = exports.WithBreadcrumbs = function WithBreadcrumbs() {
   var breadcrumbs = (0, _react2.jsx)(_index.Breadcrumbs, {
     icon: _ChevronRightIcon["default"]
@@ -123,7 +148,7 @@ var WithBreadcrumbs = exports.WithBreadcrumbs = function WithBreadcrumbs() {
     slots: {
       rightOfData: breadcrumbs
     }
-  });
+  }, (0, _react2.jsx)(_index.PanelHeaderCloseButton, null));
 };
 var BreadcrumbsWithExtraLongText = exports.BreadcrumbsWithExtraLongText = function BreadcrumbsWithExtraLongText() {
   var breadcrumbs = (0, _react2.jsx)(_index.Box, {
@@ -145,7 +170,7 @@ var BreadcrumbsWithExtraLongText = exports.BreadcrumbsWithExtraLongText = functi
     slots: {
       rightOfData: breadcrumbs
     }
-  });
+  }, (0, _react2.jsx)(_index.PanelHeaderCloseButton, null));
 };
 var WithExtraLongText = exports.WithExtraLongText = function WithExtraLongText(_ref4) {
   var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref4), _ref4));

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

@@ -127,30 +127,27 @@ var Default = exports.Default = function Default(args) {
   }, (0, _react2.jsx)(_index.Box, {
     sx: sx.contentContainer
   }, (0, _react2.jsx)(_index.Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Duis Aute"), (0, _react2.jsx)(_index.Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Quis autem vel eum iure reprehenderit qui in ea voluptate"))), (0, _react2.jsx)(_index.Item, {
     key: "step2",
     textValue: "Lorem Ipsum"
   }, (0, _react2.jsx)(_index.Box, {
     sx: sx.contentContainer
   }, (0, _react2.jsx)(_index.Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Lorem Ipsum"), (0, _react2.jsx)(_index.Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Sed ut perspiciatis unde omnis"))), (0, _react2.jsx)(_index.Item, {
     key: "step3",
     textValue: "Excepteur Sint"
   }, (0, _react2.jsx)(_index.Box, {
     sx: sx.contentContainer
   }, (0, _react2.jsx)(_index.Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Excepteur Sint"), (0, _react2.jsx)(_index.Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam"))));
 };
 var DisabledToolTips = exports.DisabledToolTips = function DisabledToolTips(args) {
@@ -162,30 +159,27 @@ var DisabledToolTips = exports.DisabledToolTips = function DisabledToolTips(args
   }, (0, _react2.jsx)(_index.Box, {
     sx: sx.contentContainer
   }, (0, _react2.jsx)(_index.Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Duis Aute"), (0, _react2.jsx)(_index.Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Quis autem vel eum iure reprehenderit qui in ea voluptate"))), (0, _react2.jsx)(_index.Item, {
     key: "step2",
     textValue: "Lorem Ipsum"
   }, (0, _react2.jsx)(_index.Box, {
     sx: sx.contentContainer
   }, (0, _react2.jsx)(_index.Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Lorem Ipsum"), (0, _react2.jsx)(_index.Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Sed ut perspiciatis unde omnis"))), (0, _react2.jsx)(_index.Item, {
     key: "step3",
     textValue: "Excepteur Sint"
   }, (0, _react2.jsx)(_index.Box, {
     sx: sx.contentContainer
   }, (0, _react2.jsx)(_index.Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Excepteur Sint"), (0, _react2.jsx)(_index.Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam"))));
 };
 Default.parameters = {
@@ -207,30 +201,27 @@ var WithCustomTooltip = exports.WithCustomTooltip = function WithCustomTooltip(a
   }, (0, _react2.jsx)(_index.Box, {
     sx: sx.contentContainer
   }, (0, _react2.jsx)(_index.Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Duis Aute"), (0, _react2.jsx)(_index.Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Quis autem vel eum iure reprehenderit qui in ea voluptate"))), (0, _react2.jsx)(_index.Item, {
     key: "step2",
     textValue: "Lorem Ipsum"
   }, (0, _react2.jsx)(_index.Box, {
     sx: sx.contentContainer
   }, (0, _react2.jsx)(_index.Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Lorem Ipsum"), (0, _react2.jsx)(_index.Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Sed ut perspiciatis unde omnis"))), (0, _react2.jsx)(_index.Item, {
     key: "step3",
     textValue: "Excepteur Sint"
   }, (0, _react2.jsx)(_index.Box, {
     sx: sx.contentContainer
   }, (0, _react2.jsx)(_index.Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Excepteur Sint"), (0, _react2.jsx)(_index.Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam"))));
 };
 var ControlledStepper = exports.ControlledStepper = function ControlledStepper() {
@@ -249,10 +240,9 @@ var ControlledStepper = exports.ControlledStepper = function ControlledStepper()
     }, (0, _react2.jsx)(_index.Box, {
       sx: sx.contentContainer
     }, (0, _react2.jsx)(_index.Text, {
-      fontSize: "lg",
-      fontWeight: "3"
+      variant: "stepperTabContentHeader"
     }, item.title), (0, _react2.jsx)(_index.Text, {
-      fontSize: "md"
+      variant: "stepperTabContent"
     }, item.children)));
   });
 };
@@ -301,10 +291,9 @@ var Panel = exports.Panel = function Panel() {
       }, (0, _react2.jsx)(_index.Box, {
         sx: sx.contentContainer
       }, (0, _react2.jsx)(_index.Text, {
-        fontSize: "lg",
-        fontWeight: "3"
+        variant: "stepperTabContentHeader"
       }, item.title), (0, _react2.jsx)(_index.Text, {
-        fontSize: "md"
+        variant: "stepperTabContent"
       }, item.children)));
     })))
   );
@@ -328,7 +317,7 @@ var VerticalStepper = exports.VerticalStepper = function VerticalStepper() {
     }, (0, _react2.jsx)(_index.Box, {
       sx: sx.verticalContentContainer
     }, (0, _react2.jsx)(_index.Text, {
-      fontSize: "md"
+      variant: "stepperTabContent"
     }, item.children)));
   });
 };

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

@@ -23,7 +23,7 @@ var wrapper = {
 var tabs = {
   outline: 'none',
   borderBottom: 'none',
-  mb: 0,
+  mb: 'lg',
   justifyContent: 'center',
   '&.is-horizontal': {
     width: '100%'

package/lib/cjs/components/Text/Text.styles.d.ts

@@ -6431,6 +6431,13 @@ export declare const text: {
         variant?: string;
         label?: string;
     };
+    stepperTabContent: {
+        fontSize: string;
+    };
+    stepperTabContentHeader: {
+        fontSize: string;
+        fontWeight: number;
+    };
     H1: {
         lineHeight: string;
         fontWeight: number;

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

@@ -170,6 +170,13 @@ var listViewItemExpandedText = {
   fontSize: 'md',
   color: 'text.primary'
 };
+var stepperTabContent = {
+  fontSize: 'md'
+};
+var stepperTabContentHeader = {
+  fontSize: 'lg',
+  fontWeight: 3
+};
 var text = exports.text = _objectSpread(_objectSpread(_objectSpread({
   base: base,
   bodyStrong: bodyStrong,
@@ -288,5 +295,7 @@ var text = exports.text = _objectSpread(_objectSpread(_objectSpread({
   copyRightText: copyRightText,
   attachmentTitle: attachmentTitle,
   messagesText: _objectSpread({}, base),
-  stepperLabel: stepperLabel
+  stepperLabel: stepperLabel,
+  stepperTabContent: stepperTabContent,
+  stepperTabContentHeader: stepperTabContentHeader
 });

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/avatar.d.ts

@@ -1,5 +1,4 @@
 export declare const avatar: {
-    backgroundColor: string;
     color: string;
     cursor: string;
     '&.is-orange': {

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/avatar.js

@@ -6,7 +6,6 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports.avatar = void 0;
 var avatar = exports.avatar = {
-  backgroundColor: 'cyan',
   color: 'black',
   cursor: 'pointer',
   '&.is-orange': {

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/stepper.d.ts

@@ -0,0 +1,15 @@
+declare const _default: {
+    step: {
+        active: {
+            '&.is-horizontal': {
+                color: string;
+            };
+        };
+        inactive: {
+            '&.is-horizontal': {
+                backgroundColor: string;
+            };
+        };
+    };
+};
+export default _default;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/stepper.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var step = {
+  active: {
+    '&.is-horizontal': {
+      color: 'black'
+    }
+  },
+  inactive: {
+    '&.is-horizontal': {
+      backgroundColor: 'black'
+    }
+  }
+};
+var _default = exports["default"] = {
+  step: step
+};

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.d.ts

@@ -68,7 +68,6 @@ declare const _default: {
         };
     };
     avatar: {
-        backgroundColor: string;
         color: string;
         cursor: string;
         '&.is-orange': {
@@ -533,6 +532,20 @@ declare const _default: {
             backgroundColor: string;
         };
     };
+    stepper: {
+        step: {
+            active: {
+                '&.is-horizontal': {
+                    color: string;
+                };
+            };
+            inactive: {
+                '&.is-horizontal': {
+                    backgroundColor: string;
+                };
+            };
+        };
+    };
     footer: {
         container: {
             backgroundColor: string;

package/lib/cjs/styles/themeOverrides/nextGenDarkMode/variants/variants.js

@@ -17,6 +17,7 @@ var _message = require("./message");
 var _navbar = require("./navbar");
 var _rangeCalendar = _interopRequireDefault(require("./rangeCalendar"));
 var _skeleton = _interopRequireDefault(require("./skeleton"));
+var _stepper = _interopRequireDefault(require("./stepper"));
 var listBox = {
   container: {
     backgroundColor: 'backgroundBase',
@@ -190,6 +191,7 @@ var _default = exports["default"] = {
   tab: tab,
   iconBadge: _iconBadge["default"],
   skeleton: _skeleton["default"],
+  stepper: _stepper["default"],
   footer: _footer.footer,
   tooltip: tooltip,
   popoverMenu: {

package/lib/cjs/styles/themes/next-gen/next-gen.d.ts

@@ -1973,6 +1973,18 @@ declare const _default: {
             fontSize: string;
             lineHeight: string;
             color: string;
+            marginTop: string;
+        };
+        stepperTabContent: {
+            fontSize: string;
+            color: string;
+            lineHeight: string;
+        };
+        stepperTabContentHeader: {
+            color: string;
+            fontSize: string;
+            fontWeight: number;
+            fontFamily: string;
         };
         H1: {
             fontSize: string;
@@ -3674,8 +3686,6 @@ declare const _default: {
             };
         };
         avatar: {
-            backgroundColor: string;
-            color: string;
             cursor: string;
             '&.is-orange': {
                 backgroundColor: string;
@@ -5283,7 +5293,8 @@ declare const _default: {
                 mr: string;
             };
             line: {
-                mr: string;
+                mx: string;
+                maxWidth: string;
                 borderBottomWidth: string;
                 borderBottomColor: string;
                 '&.is-inactive': {
@@ -5293,29 +5304,32 @@ declare const _default: {
             };
             step: {
                 active: {
-                    '&:before': {
-                        content: string;
-                        height: string;
-                        width: string;
-                        top: number;
-                        left: number;
+                    '&.is-horizontal': {
+                        '&:before': {
+                            content: string;
+                            height: string;
+                            width: string;
+                            top: number;
+                            left: number;
+                            position: string;
+                            borderRadius: string;
+                            borderStyle: string;
+                            borderColor: string;
+                            borderWidth: string;
+                            zIndex: number;
+                        };
+                        borderWidth: string;
+                        width: number;
+                        height: number;
+                        minWidth: number;
+                        minHeight: number;
                         position: string;
-                        borderRadius: string;
-                        borderStyle: string;
+                        fontWeight: number;
+                        fontSize: string;
+                        backgroundColor: string;
                         borderColor: string;
-                        borderWidth: string;
+                        color: string;
                     };
-                    borderWidth: string;
-                    width: number;
-                    height: number;
-                    minWidth: number;
-                    minHeight: number;
-                    position: string;
-                    fontWeight: number;
-                    fontSize: string;
-                    backgroundColor: string;
-                    borderColor: string;
-                    color: string;
                 };
                 completed: {
                     borderColor: string;
@@ -5329,17 +5343,19 @@ declare const _default: {
                     fontSize: string;
                 };
                 inactive: {
-                    borderWidth: string;
-                    width: number;
-                    height: number;
-                    minWidth: number;
-                    minHeight: number;
-                    position: string;
-                    fontWeight: number;
-                    fontSize: string;
-                    backgroundColor: string;
-                    borderColor: string;
-                    color: string;
+                    '&.is-horizontal': {
+                        borderWidth: string;
+                        width: number;
+                        height: number;
+                        minWidth: number;
+                        minHeight: number;
+                        position: string;
+                        fontWeight: number;
+                        fontSize: string;
+                        backgroundColor: string;
+                        borderColor: string;
+                        color: string;
+                    };
                 };
             };
         };

package/lib/cjs/styles/themes/next-gen/variants/avatar.d.ts

@@ -1,6 +1,4 @@
 export declare const avatar: {
-    backgroundColor: string;
-    color: string;
     cursor: string;
     '&.is-orange': {
         backgroundColor: string;

package/lib/cjs/styles/themes/next-gen/variants/avatar.js

@@ -8,8 +8,6 @@ _Object$defineProperty(exports, "__esModule", {
 exports.avatar = void 0;
 var _sizes = _interopRequireDefault(require("../sizes"));
 var avatar = exports.avatar = {
-  backgroundColor: 'lightcyan',
-  color: 'darkcyan',
   cursor: 'pointer',
   '&.is-orange': {
     backgroundColor: 'lightorange',

package/lib/cjs/styles/themes/next-gen/variants/stepper.d.ts

@@ -3,7 +3,8 @@ declare const _default: {
         mr: string;
     };
     line: {
-        mr: string;
+        mx: string;
+        maxWidth: string;
         borderBottomWidth: string;
         borderBottomColor: string;
         '&.is-inactive': {
@@ -13,29 +14,32 @@ declare const _default: {
     };
     step: {
         active: {
-            '&:before': {
-                content: string;
-                height: string;
-                width: string;
-                top: number;
-                left: number;
+            '&.is-horizontal': {
+                '&:before': {
+                    content: string;
+                    height: string;
+                    width: string;
+                    top: number;
+                    left: number;
+                    position: string;
+                    borderRadius: string;
+                    borderStyle: string;
+                    borderColor: string;
+                    borderWidth: string;
+                    zIndex: number;
+                };
+                borderWidth: string;
+                width: number;
+                height: number;
+                minWidth: number;
+                minHeight: number;
                 position: string;
-                borderRadius: string;
-                borderStyle: string;
+                fontWeight: number;
+                fontSize: string;
+                backgroundColor: string;
                 borderColor: string;
-                borderWidth: string;
+                color: string;
             };
-            borderWidth: string;
-            width: number;
-            height: number;
-            minWidth: number;
-            minHeight: number;
-            position: string;
-            fontWeight: number;
-            fontSize: string;
-            backgroundColor: string;
-            borderColor: string;
-            color: string;
         };
         completed: {
             borderColor: string;
@@ -49,17 +53,19 @@ declare const _default: {
             fontSize: string;
         };
         inactive: {
-            borderWidth: string;
-            width: number;
-            height: number;
-            minWidth: number;
-            minHeight: number;
-            position: string;
-            fontWeight: number;
-            fontSize: string;
-            backgroundColor: string;
-            borderColor: string;
-            color: string;
+            '&.is-horizontal': {
+                borderWidth: string;
+                width: number;
+                height: number;
+                minWidth: number;
+                minHeight: number;
+                position: string;
+                fontWeight: number;
+                fontSize: string;
+                backgroundColor: string;
+                borderColor: string;
+                color: string;
+            };
         };
     };
 };