@pingux/astro 2.164.1-alpha.0 → 2.165.0

package/lib/components/PageHeader/PageHeader.js

@@ -18,23 +18,26 @@ var PageHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }
   };
   var _useGetTheme = useGetTheme(),
-    pageHeaderTitleMargin = _useGetTheme.pageHeaderTitleMargin;
+    pageHeaderTitleMargin = _useGetTheme.pageHeaderTitleMargin,
+    pageHeaderAddIconMargin = _useGetTheme.pageHeaderAddIconMargin,
+    pageHeaderAddIconSize = _useGetTheme.pageHeaderAddIconSize;
   var renderButton = buttonProps && ___EmotionJSX(IconButton, _extends({
     "aria-label": "icon button",
-    ml: "sm",
+    ml: pageHeaderAddIconMargin,
     variant: "inverted"
   }, buttonProps), ___EmotionJSX(Icon, {
     icon: PlusIcon,
-    size: "sm"
+    size: pageHeaderAddIconSize
   }));
   return ___EmotionJSX(Box, _extends({
     ref: ref
   }, other), ___EmotionJSX(Box, {
     isRow: true,
-    mb: pageHeaderTitleMargin
+    mb: pageHeaderTitleMargin,
+    alignItems: "center"
   }, ___EmotionJSX(Text, {
     as: "h1",
-    variant: "H1"
+    variant: "pageHeaderTitle"
   }, title), renderButton), ___EmotionJSX(Text, {
     variant: "pageHeaderBody",
     sx: linkStyles

package/lib/components/PageHeader/PageHeader.stories.js

@@ -29,7 +29,7 @@ export var Default = function Default(args) {
     buttonProps: {
       onPress: function onPress() {}
     },
-    title: "Lorem ipsum"
+    title: "Lorem Ipsum"
   }, args), description, ___EmotionJSX(Link, {
     href: "https://uilibrary.ping-eng.com/"
   }, "Learn more"));
@@ -50,7 +50,7 @@ Default.parameters = {
 };
 export var WithoutButton = function WithoutButton(args) {
   return ___EmotionJSX(PageHeader, _extends({
-    title: "Lorem ipsum"
+    title: "Lorem Ipsum"
   }, args), description, ___EmotionJSX(Link, {
     href: "https://uilibrary.ping-eng.com/"
   }, "Learn more"));
@@ -74,7 +74,7 @@ export var WithoutLink = function WithoutLink(args) {
     buttonProps: {
       onPress: function onPress() {}
     },
-    title: "Lorem ipsum"
+    title: "Lorem Ipsum"
   }, args), description);
 };
 WithoutLink.parameters = {
@@ -88,7 +88,7 @@ export var Customization = function Customization(args) {
     buttonProps: {
       bg: 'critical.bright'
     },
-    title: "Lorem ipsum"
+    title: "Lorem Ipsum"
   }, args), description, ___EmotionJSX(Link, {
     href: "https://uilibrary.ping-eng.com/"
   }, "Learn more"));

package/lib/components/PageHeader/PageHeader.test.js

@@ -21,6 +21,7 @@ function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymb
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
 import userEvent from '@testing-library/user-event';
+import * as themeHook from '../../hooks';
 import { Link, PageHeader } from '../../index';
 import { render, screen } from '../../utils/testUtils/testWrapper';
 import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
@@ -96,4 +97,23 @@ test('when the button is pressed, it calls the onPress callback', /*#__PURE__*/_
         return _context.stop();
     }
   }, _callee);
-})));
+})));
+test('for default theme, it applies correct styles', function () {
+  getComponent();
+  var button = screen.getByRole('button', {
+    name: /icon button/i
+  });
+  expect(button).toHaveStyleRule('margin-left', '10px');
+});
+test('for onyx theme, it applies correct styles', function () {
+  jest.spyOn(themeHook, 'useGetTheme').mockReturnValue({
+    pageHeaderTitleMargin: 'md',
+    pageHeaderAddIconMargin: 'md',
+    pageHeaderAddIconSize: 'md'
+  });
+  getComponent();
+  var button = screen.getByRole('button', {
+    name: /icon button/i
+  });
+  expect(button).toHaveStyleRule('margin-left', '15px');
+});

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

@@ -294,6 +294,7 @@ export var text = _objectSpread(_objectSpread(_objectSpread({
   attachmentTitle: attachmentTitle,
   messagesText: _objectSpread({}, base),
   stepperLabel: stepperLabel,
+  pageHeaderTitle: _objectSpread({}, HTags.H1),
   stepperTabContent: stepperTabContent,
   stepperTabContentHeader: stepperTabContentHeader
 });

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

@@ -40,5 +40,11 @@ export var text = {
         color: 'white'
       }
     }
+  },
+  pageHeaderBody: {
+    color: 'text.secondary'
+  },
+  pageHeaderTitle: {
+    color: 'gray-100'
   }
 };

package/lib/styles/themes/astro/customProperties/index.js

@@ -9,6 +9,8 @@ var iconBadgeCircleColor = 'white';
 var rockerButtonGap = '3px';
 var accordionItemMarginLeft = 'sm';
 var pageHeaderTitleMargin = 'xs';
+var pageHeaderAddIconMargin = 'sm';
+var pageHeaderAddIconSize = 'sm';
 var activeColor = '#4462ED';
 var backgroundBaseColor = 'white';
 var defaultLoaderSize = 16;
@@ -30,6 +32,8 @@ export var astroThemeValues = {
   iFrameContentDivBackgroundColor: iFrameContentDivBackgroundColor,
   copyButtonSize: copyButtonSize,
   pageHeaderTitleMargin: pageHeaderTitleMargin,
+  pageHeaderAddIconMargin: pageHeaderAddIconMargin,
+  pageHeaderAddIconSize: pageHeaderAddIconSize,
   breadcrumbIconSize: breadcrumbIconSize,
   breadcrumbIconMargin: breadcrumbIconMargin,
   rockerButtonGap: rockerButtonGap,

package/lib/styles/themes/next-gen/customProperties/customSizes.js

@@ -2,7 +2,9 @@ var copyButtonSize = 'sm';
 var breadcrumbIconSize = 'sm';
 var breadcrumbIconMargin = 'md';
 var accordionItemMarginLeft = 'md';
-var pageHeaderTitleMargin = 'md';
+var pageHeaderTitleMargin = 'sm';
+var pageHeaderAddIconMargin = 'md';
+var pageHeaderAddIconSize = 'md';
 var defaultLoaderSize = 32;
 export default {
   copyButtonSize: copyButtonSize,
@@ -10,5 +12,7 @@ export default {
   breadcrumbIconMargin: breadcrumbIconMargin,
   accordionItemMarginLeft: accordionItemMarginLeft,
   pageHeaderTitleMargin: pageHeaderTitleMargin,
+  pageHeaderAddIconMargin: pageHeaderAddIconMargin,
+  pageHeaderAddIconSize: pageHeaderAddIconSize,
   defaultLoaderSize: defaultLoaderSize
 };

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

@@ -349,7 +349,8 @@ var baseIconButtonStyle = {
   borderRadius: '28px',
   border: 'none',
   cursor: 'pointer',
-  boxShadow: 'none !important'
+  boxShadow: 'none !important',
+  alignSelf: 'center'
 };
 var baseIconButton = _objectSpread(_objectSpread({}, baseIconButtonStyle), {}, {
   path: {

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

@@ -109,8 +109,9 @@ export var text = _objectSpread(_objectSpread({
   buttonSubtitle: buttonSubtitle,
   buttonTitle: buttonTitle,
   pageHeaderBody: {
-    lineHeight: '150%',
-    color: 'text.primary'
+    lineHeight: 'body',
+    color: 'text.primary',
+    fontSize: 'md'
   },
   sideNavHeader: {
     py: 'sm',
@@ -210,6 +211,11 @@ export var text = _objectSpread(_objectSpread({
     color: 'font.light',
     marginTop: '0px !important'
   },
+  pageHeaderTitle: {
+    lineHeight: 'xs',
+    fontSize: 'xxx',
+    fontWeight: 2
+  },
   requirementsListText: {
     color: 'font.base',
     fontSize: 'md',