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

package/lib/components/Avatar/Avatar.js

@@ -34,14 +34,15 @@ var Avatar = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useStatusClasses = useStatusClasses(className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "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 ___EmotionJSX(Box, {
+    return ___EmotionJSX(Box, _extends({
       variant: "avatar",
       className: classNames
-    }, ___EmotionJSX(ThemeUIAvatar, _extends({
+    }, others), ___EmotionJSX(ThemeUIAvatar, {
       ref: ref,
       alt: alt,
-      src: src
-    }, others)));
+      src: src,
+      size: size
+    }));
   }
   return ___EmotionJSX(Box, _extends({
     variant: "avatar",

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

@@ -2,6 +2,8 @@ import React from 'react';
 import { Avatar } from '../../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var AvatarNextGen = function AvatarNextGen() {
-  return ___EmotionJSX(Avatar, null);
+  return ___EmotionJSX(Avatar, {
+    color: "cyan"
+  });
 };
 export default AvatarNextGen;

package/lib/components/PanelHeader/PanelHeader.js

@@ -51,7 +51,7 @@ var PanelHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }
   }));
   var renderAvatar = ___EmotionJSX(Avatar, _extends({
-    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/components/PanelHeader/PanelHeader.stories.js

@@ -6,7 +6,7 @@ import ChevronRightIcon from '@pingux/mdi-react/ChevronRightIcon';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Breadcrumbs, Item, PanelHeader, PanelHeaderCloseButton, PanelHeaderMenu, PanelHeaderSwitchField } from '../../index';
 import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.ts';
-import { pingImg } from '../../utils/devUtils/constants/images';
+import { pingImg, userImagePanelHeader } from '../../utils/devUtils/constants/images';
 import { SharedItemArgTypes } from '../ListViewItem/listViewItemAttributes';
 import PanelHeaderReadMe from './PanelHeader.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -82,12 +82,15 @@ export var WithImage = function WithImage(args) {
   return ___EmotionJSX(PanelHeader, _extends({}, args, {
     data: {
       image: {
-        src: pingImg,
+        src: 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'
     }
   }));
 };
@@ -97,6 +100,28 @@ WithImage.parameters = {
     url: FIGMA_LINKS.panelHeader.withImage
   }
 };
+export var WithAvatar = function WithAvatar(args) {
+  return ___EmotionJSX(PanelHeader, _extends({}, args, {
+    data: {
+      image: {
+        src: pingImg,
+        alt: 'Ping Identity Logo',
+        'aria-label': 'Ping Identity Logo'
+      },
+      text: 'Fons Vernall'
+    },
+    avatarProps: {
+      size: 'lg',
+      isLogo: true
+    }
+  }));
+};
+WithAvatar.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.panelHeader.WithAvatar
+  }
+};
 export var WithBreadcrumbs = function WithBreadcrumbs() {
   var breadcrumbs = ___EmotionJSX(Breadcrumbs, {
     icon: ChevronRightIcon
@@ -115,7 +140,7 @@ export var WithBreadcrumbs = function WithBreadcrumbs() {
     slots: {
       rightOfData: breadcrumbs
     }
-  });
+  }, ___EmotionJSX(PanelHeaderCloseButton, null));
 };
 export var BreadcrumbsWithExtraLongText = function BreadcrumbsWithExtraLongText() {
   var breadcrumbs = ___EmotionJSX(Box, {
@@ -137,7 +162,7 @@ export var BreadcrumbsWithExtraLongText = function BreadcrumbsWithExtraLongText(
     slots: {
       rightOfData: breadcrumbs
     }
-  });
+  }, ___EmotionJSX(PanelHeaderCloseButton, null));
 };
 export var WithExtraLongText = function WithExtraLongText(_ref4) {
   var args = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));

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

@@ -115,30 +115,27 @@ export var Default = function Default(args) {
   }, ___EmotionJSX(Box, {
     sx: sx.contentContainer
   }, ___EmotionJSX(Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Duis Aute"), ___EmotionJSX(Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Quis autem vel eum iure reprehenderit qui in ea voluptate"))), ___EmotionJSX(Item, {
     key: "step2",
     textValue: "Lorem Ipsum"
   }, ___EmotionJSX(Box, {
     sx: sx.contentContainer
   }, ___EmotionJSX(Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Lorem Ipsum"), ___EmotionJSX(Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Sed ut perspiciatis unde omnis"))), ___EmotionJSX(Item, {
     key: "step3",
     textValue: "Excepteur Sint"
   }, ___EmotionJSX(Box, {
     sx: sx.contentContainer
   }, ___EmotionJSX(Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Excepteur Sint"), ___EmotionJSX(Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam"))));
 };
 export var DisabledToolTips = function DisabledToolTips(args) {
@@ -150,30 +147,27 @@ export var DisabledToolTips = function DisabledToolTips(args) {
   }, ___EmotionJSX(Box, {
     sx: sx.contentContainer
   }, ___EmotionJSX(Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Duis Aute"), ___EmotionJSX(Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Quis autem vel eum iure reprehenderit qui in ea voluptate"))), ___EmotionJSX(Item, {
     key: "step2",
     textValue: "Lorem Ipsum"
   }, ___EmotionJSX(Box, {
     sx: sx.contentContainer
   }, ___EmotionJSX(Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Lorem Ipsum"), ___EmotionJSX(Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Sed ut perspiciatis unde omnis"))), ___EmotionJSX(Item, {
     key: "step3",
     textValue: "Excepteur Sint"
   }, ___EmotionJSX(Box, {
     sx: sx.contentContainer
   }, ___EmotionJSX(Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Excepteur Sint"), ___EmotionJSX(Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam"))));
 };
 Default.parameters = {
@@ -195,30 +189,27 @@ export var WithCustomTooltip = function WithCustomTooltip(args) {
   }, ___EmotionJSX(Box, {
     sx: sx.contentContainer
   }, ___EmotionJSX(Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Duis Aute"), ___EmotionJSX(Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Quis autem vel eum iure reprehenderit qui in ea voluptate"))), ___EmotionJSX(Item, {
     key: "step2",
     textValue: "Lorem Ipsum"
   }, ___EmotionJSX(Box, {
     sx: sx.contentContainer
   }, ___EmotionJSX(Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Lorem Ipsum"), ___EmotionJSX(Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Sed ut perspiciatis unde omnis"))), ___EmotionJSX(Item, {
     key: "step3",
     textValue: "Excepteur Sint"
   }, ___EmotionJSX(Box, {
     sx: sx.contentContainer
   }, ___EmotionJSX(Text, {
-    fontSize: "lg",
-    fontWeight: "3"
+    variant: "stepperTabContentHeader"
   }, "Excepteur Sint"), ___EmotionJSX(Text, {
-    fontSize: "md"
+    variant: "stepperTabContent"
   }, "Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam"))));
 };
 export var ControlledStepper = function ControlledStepper() {
@@ -237,10 +228,9 @@ export var ControlledStepper = function ControlledStepper() {
     }, ___EmotionJSX(Box, {
       sx: sx.contentContainer
     }, ___EmotionJSX(Text, {
-      fontSize: "lg",
-      fontWeight: "3"
+      variant: "stepperTabContentHeader"
     }, item.title), ___EmotionJSX(Text, {
-      fontSize: "md"
+      variant: "stepperTabContent"
     }, item.children)));
   });
 };
@@ -289,10 +279,9 @@ export var Panel = function Panel() {
       }, ___EmotionJSX(Box, {
         sx: sx.contentContainer
       }, ___EmotionJSX(Text, {
-        fontSize: "lg",
-        fontWeight: "3"
+        variant: "stepperTabContentHeader"
       }, item.title), ___EmotionJSX(Text, {
-        fontSize: "md"
+        variant: "stepperTabContent"
       }, item.children)));
     })))
   );
@@ -316,7 +305,7 @@ export var VerticalStepper = function VerticalStepper() {
     }, ___EmotionJSX(Box, {
       sx: sx.verticalContentContainer
     }, ___EmotionJSX(Text, {
-      fontSize: "md"
+      variant: "stepperTabContent"
     }, item.children)));
   });
 };

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

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

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

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

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

@@ -1,5 +1,4 @@
 export var avatar = {
-  backgroundColor: 'cyan',
   color: 'black',
   cursor: 'pointer',
   '&.is-orange': {

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

@@ -0,0 +1,15 @@
+var step = {
+  active: {
+    '&.is-horizontal': {
+      color: 'black'
+    }
+  },
+  inactive: {
+    '&.is-horizontal': {
+      backgroundColor: 'black'
+    }
+  }
+};
+export default {
+  step: step
+};

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

@@ -9,6 +9,7 @@ import { message } from './message';
 import { navBar } from './navbar';
 import rangeCalendar from './rangeCalendar';
 import skeleton from './skeleton';
+import stepper from './stepper';
 var listBox = {
   container: {
     backgroundColor: 'backgroundBase',
@@ -182,6 +183,7 @@ export default {
   tab: tab,
   iconBadge: iconBadge,
   skeleton: skeleton,
+  stepper: stepper,
   footer: footer,
   tooltip: tooltip,
   popoverMenu: {

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

@@ -1,7 +1,5 @@
 import sizes from '../sizes';
 export var avatar = {
-  backgroundColor: 'lightcyan',
-  color: 'darkcyan',
   cursor: 'pointer',
   '&.is-orange': {
     backgroundColor: 'lightorange',

package/lib/styles/themes/next-gen/variants/stepper.js

@@ -9,8 +9,10 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+import spacing from '../spacing';
 var line = {
-  mr: 'xs',
+  mx: "".concat(spacing.xs, " !important"),
+  maxWidth: '82px',
   borderBottomWidth: '2px',
   borderBottomColor: 'active',
   '&.is-inactive': {
@@ -32,32 +34,37 @@ var tab = {
   mr: 'xs'
 };
 var step = {
-  active: _objectSpread(_objectSpread({
-    backgroundColor: 'active',
-    borderColor: 'active',
-    color: 'backgroundBase'
-  }, stepBase), {}, {
-    '&:before': {
-      content: '""',
-      height: '24px',
-      width: '24px',
-      top: 0,
-      left: 0,
-      position: 'absolute',
-      borderRadius: '100%',
-      borderStyle: 'solid',
-      borderColor: 'backgroundBase',
-      borderWidth: '2px'
-    }
-  }),
+  active: {
+    '&.is-horizontal': _objectSpread(_objectSpread({
+      backgroundColor: 'active',
+      borderColor: 'active',
+      color: 'white'
+    }, stepBase), {}, {
+      '&:before': {
+        content: '""',
+        height: '24px',
+        width: '24px',
+        top: 0,
+        left: 0,
+        position: 'absolute',
+        borderRadius: '100%',
+        borderStyle: 'solid',
+        borderColor: 'backgroundBase',
+        borderWidth: '2px',
+        zIndex: 0
+      }
+    })
+  },
   completed: _objectSpread(_objectSpread({}, stepBase), {}, {
     borderColor: 'active'
   }),
-  inactive: _objectSpread({
-    backgroundColor: 'backgroundBase',
-    borderColor: 'blue-200',
-    color: 'active'
-  }, stepBase)
+  inactive: {
+    '&.is-horizontal': _objectSpread({
+      backgroundColor: 'backgroundBase',
+      borderColor: 'blue-200',
+      color: 'active'
+    }, stepBase)
+  }
 };
 export default {
   tab: tab,

package/lib/styles/themes/next-gen/variants/text.js

@@ -94,6 +94,14 @@ var buttonSubtitle = {
   fontSize: '13px',
   fontWeight: 2
 };
+var stepperTabContent = {
+  fontSize: 'md',
+  color: 'font.base',
+  lineHeight: 'body'
+};
+var stepperTabContentHeader = _objectSpread(_objectSpread({}, hTags.H2), {}, {
+  color: 'font.base'
+});
 export var text = _objectSpread(_objectSpread({
   base: {
     lineHeight: 'body'
@@ -198,6 +206,9 @@ export var text = _objectSpread(_objectSpread({
   panelHeaderSubtext: {
     fontSize: 'md',
     lineHeight: 'body',
-    color: 'font.light'
-  }
+    color: 'font.light',
+    marginTop: '0px !important'
+  },
+  stepperTabContent: stepperTabContent,
+  stepperTabContentHeader: stepperTabContentHeader
 });