@pingux/astro 2.164.0 → 2.164.1-alpha.1

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

@@ -28,6 +28,7 @@ export declare const badgeDeleteButton: {
     outline: string;
     border: string;
     boxShadow: string;
+    alignSelf: string;
 };
 export declare const badges: {
     baseBadge: {
@@ -782,6 +783,7 @@ export declare const badges: {
         outline: string;
         border: string;
         boxShadow: string;
+        alignSelf: string;
     };
     itemBadgeWithSlot: {
         border: string;

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

@@ -531,6 +531,7 @@ declare const buttons: {
             border: string;
             cursor: string;
             boxShadow: string;
+            alignSelf: string;
         };
         invertedBadgeDeleteButton: {
             transition: string;
@@ -559,6 +560,7 @@ declare const buttons: {
             border: string;
             cursor: string;
             boxShadow: string;
+            alignSelf: string;
         };
         clearSelectionButton: {
             top: string;
@@ -587,6 +589,7 @@ declare const buttons: {
             border: string;
             cursor: string;
             boxShadow: string;
+            alignSelf: string;
         };
     };
     withIcon: {
@@ -868,6 +871,7 @@ declare const buttons: {
             border: string;
             cursor: string;
             boxShadow: string;
+            alignSelf: string;
         };
         onyx: {
             path: {
@@ -900,6 +904,7 @@ declare const buttons: {
             border: string;
             cursor: string;
             boxShadow: string;
+            alignSelf: string;
         };
         responseToolbar: {
             '&.is-not-loaded': {
@@ -933,6 +938,7 @@ declare const buttons: {
             border: string;
             cursor: string;
             boxShadow: string;
+            alignSelf: string;
         };
         modalCloseButton: {
             path: {
@@ -962,6 +968,7 @@ declare const buttons: {
             border: string;
             cursor: string;
             boxShadow: string;
+            alignSelf: string;
         };
         modalHeaderCloseButton: {
             top: string;
@@ -994,6 +1001,7 @@ declare const buttons: {
             border: string;
             cursor: string;
             boxShadow: string;
+            alignSelf: string;
         };
         badge: {
             deleteButton: {
@@ -1027,6 +1035,7 @@ declare const buttons: {
                 outline: string;
                 border: string;
                 boxShadow: string;
+                alignSelf: string;
             };
         };
         messageCloseButton: {
@@ -1068,6 +1077,7 @@ declare const buttons: {
             border: string;
             cursor: string;
             boxShadow: string;
+            alignSelf: string;
         };
         headerNav: {
             path: {
@@ -1097,6 +1107,7 @@ declare const buttons: {
             border: string;
             cursor: string;
             boxShadow: string;
+            alignSelf: string;
         };
         copyButton: {
             default: {
@@ -1141,6 +1152,7 @@ declare const buttons: {
             border: string;
             cursor: string;
             boxShadow: string;
+            alignSelf: string;
         };
         inverted: {
             '&.is-hovered': {
@@ -1165,6 +1177,7 @@ declare const buttons: {
             border: string;
             cursor: string;
             boxShadow: string;
+            alignSelf: string;
         };
         searchClearButton: {
             path: {
@@ -1188,6 +1201,7 @@ declare const buttons: {
             border: string;
             cursor: string;
             boxShadow: string;
+            alignSelf: string;
         };
         filter: {
             width: string;
@@ -1220,6 +1234,7 @@ declare const buttons: {
             border: string;
             cursor: string;
             boxShadow: string;
+            alignSelf: string;
         };
         hintButton: {
             backgroundColor: string;
@@ -1278,6 +1293,7 @@ declare const buttons: {
             borderRadius: string;
             cursor: string;
             boxShadow: string;
+            alignSelf: string;
         };
     };
     modalCloseButton: {
@@ -1308,6 +1324,7 @@ declare const buttons: {
         border: string;
         cursor: string;
         boxShadow: string;
+        alignSelf: string;
     };
     aiChat: {
         maxWidth: string;

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

@@ -356,7 +356,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/cjs/styles/themes/next-gen/variants/text.d.ts

@@ -31,6 +31,11 @@ export declare const text: {
         color: string;
         marginTop: string;
     };
+    pageHeaderTitle: {
+        lineHeight: string;
+        fontSize: string;
+        fontWeight: number;
+    };
     requirementsListText: {
         color: string;
         fontSize: string;
@@ -137,6 +142,7 @@ export declare const text: {
     pageHeaderBody: {
         lineHeight: string;
         color: string;
+        fontSize: string;
     };
     sideNavHeader: {
         py: string;

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

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

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

@@ -28,6 +28,7 @@ export declare const badgeDeleteButton: {
     outline: string;
     border: string;
     boxShadow: string;
+    alignSelf: string;
 };
 declare const _default: {
     accordion: {

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/components/TimeField/TimeField.styles.js

@@ -32,7 +32,7 @@ var inputField = _objectSpread(_objectSpread({}, input), {}, {
 var segment = {
   '&:focus-visible': {
     outline: '1px solid',
-    outlineColor: 'active',
+    outlineColor: 'focus',
     borderRadius: 4
   }
 };

package/lib/components/TimeField/TimeSegment.js

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _trimInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/trim";
 import React, { useCallback, useRef } from 'react';
 import { useFocusManager } from 'react-aria';
 import { useDateSegment } from '@react-aria/datepicker';
@@ -43,6 +44,6 @@ var TimeSegment = function TimeSegment(props) {
     ref: ref,
     variant: "forms.timeField.segment",
     onKeyUp: handleKeyEvents
-  }), text);
+  }), _trimInstanceProperty(text).call(text));
 };
 export default TimeSegment;

package/lib/components/TimeField/stories/OnyxTimeField.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Box, TimeField } from '../../..';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var OnyxTimeField = function OnyxTimeField() {
+  return ___EmotionJSX(Box, {
+    gap: "md",
+    p: "md"
+  }, ___EmotionJSX(TimeField, {
+    "aria-label": "timeField-default"
+  }), ___EmotionJSX(TimeField, {
+    "aria-label": "timeField-default",
+    defaultValue: "12:30",
+    hourCycle: 12,
+    granularity: "second"
+  }), ___EmotionJSX(TimeField, {
+    "aria-label": "timeField-default",
+    isDisabled: true
+  }), ___EmotionJSX(TimeField, {
+    "aria-label": "timeField-default",
+    isReadOnly: true
+  }), ___EmotionJSX(TimeField, {
+    "aria-label": "timeField-default",
+    isRequired: true,
+    label: "Lorem Ipsum"
+  }), ___EmotionJSX(TimeField, {
+    "aria-label": "timeField-default",
+    defaultValue: "12:30",
+    isInvalid: true
+  }));
+};
+export default OnyxTimeField;

package/lib/components/TimeField/stories/TimeFieldOnyx.chromatic.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AstroProvider, OnyxTheme } from '../../..';
+import OnyxTimeField from './OnyxTimeField';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Onyx TimeField'
+};
+export var Default = function Default() {
+  return ___EmotionJSX(AstroProvider, {
+    theme: OnyxTheme
+  }, ___EmotionJSX(OnyxTimeField, null));
+};

package/lib/components/TimeField/stories/TimeFieldOnyxDark.chromatic.stories.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { AstroProvider, OnyxDarkTheme } from '../../..';
+import OnyxTimeField from './OnyxTimeField';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Onyx Dark TimeField'
+};
+export var Default = function Default() {
+  return ___EmotionJSX(AstroProvider, {
+    theme: OnyxDarkTheme
+  }, ___EmotionJSX(OnyxTimeField, null));
+};

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

@@ -35,6 +35,7 @@ export var checkbox = {
   color: 'text.primary'
 };
 var label = {
+  color: 'gray-100',
   radioGroup: {
     color: 'white'
   },

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/convertedComponentList.js

@@ -1,4 +1,4 @@
-var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RangeCalendar', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SearchNav', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary', 'Avatar', 'Box'];
+var nextGenConvertedComponents = ['AccordionGridGroup', 'AccordionGroup', 'ArrayField', 'AstroProvider', 'Avatar', 'Badge', 'Base Components', 'Breadcrumbs', 'Button', 'ButtonBar', 'Callout', 'Card', 'CheckboxField', 'CodeView', 'ColorField', 'ComboBoxField', 'CopyText', 'DataTable', 'EnvironmentBreadcrumb', 'GridList', 'HelpHint', 'Icon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RangeCalendar', 'RequirementsList', 'RockerButtonGroup', 'SearchField', 'SearchNav', 'SelectField', 'Skeleton', 'SliderField', 'Stepper', 'Sticker Sheet', 'SwitchField', 'StatusIcon', 'Table', 'TableBase', 'Tabs', 'Text', 'TextAreaField', 'TextField', 'TooltipTrigger', 'ArrayField', 'ColorField', 'LinkSelectField', 'NumberField', 'SwitchField', 'Base Components', 'SliderField', 'ServerErrorBoundary', 'Avatar', 'Box', 'TimeField'];
 export var componentSpecificNextGenBlacklist = {
   AstroProvider: ['Default', 'With Custom Theme Override'],
   Messages: ['Customization'],

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/forms.js

@@ -92,6 +92,39 @@ export var radio = {
     }
   }
 };
+export var timeField = {
+  inputField: _objectSpread(_objectSpread({}, input), {}, {
+    color: 'font.base',
+    alignItems: 'center',
+    justifyContent: 'center',
+    lineHeight: 'body',
+    minWidth: '105px',
+    '&:focus-within:not(.is-read-only)': {
+      borderColor: 'focus',
+      outline: '1px solid',
+      outlineColor: 'focus',
+      outlineOffset: '0px'
+    },
+    '&.is-read-only': {
+      border: '1px solid',
+      borderColor: 'border.input',
+      backgroundColor: 'disabled'
+    },
+    '&.is-disabled': {
+      opacity: 1,
+      border: '1px solid',
+      borderColor: 'border.input',
+      backgroundColor: 'disabled'
+    }
+  }),
+  segment: {
+    px: '2px',
+    textTransform: 'uppercase',
+    '&:empty': {
+      px: 0
+    }
+  }
+};
 export default {
   input: input,
   label: label,
@@ -101,5 +134,6 @@ export default {
   radio: radio,
   search: search,
   "switch": switchable,
-  numberField: numberField
+  numberField: numberField,
+  timeField: timeField
 };

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',