@pingux/astro 2.208.4-alpha.0 → 2.210.0-alpha.0

package/lib/components/PhoneNumberField/PhoneNumberField.test.js

@@ -0,0 +1,155 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { createEvent, fireEvent, render, screen } from '@testing-library/react';
+import { universalComponentTests } from '../../utils/testUtils/universalComponentTest';
+import { universalFieldComponentTests } from '../../utils/testUtils/universalFormSubmitTest';
+import PhoneNumberField from '.';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'test-phone-number-field';
+var testLabel = 'Test Label';
+var defaultProps = {
+  'data-testid': testId,
+  label: testLabel
+};
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(PhoneNumberField, _extends({}, defaultProps, props)));
+};
+universalFieldComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(PhoneNumberField, _extends({}, defaultProps, props));
+  },
+  testValue: '+12345678',
+  testLabel: testLabel,
+  componentType: 'PhoneNumberField'
+});
+universalComponentTests({
+  renderComponent: function renderComponent(props) {
+    return ___EmotionJSX(PhoneNumberField, _extends({}, defaultProps, props));
+  }
+});
+afterEach(function () {
+  jest.clearAllMocks();
+});
+test('default render has label, phone input, and country combobox', function () {
+  getComponent();
+  expect(screen.getByTestId(testId)).toBeInTheDocument();
+  expect(screen.getByText(testLabel)).toBeInstanceOf(HTMLLabelElement);
+  expect(screen.getByRole('textbox')).toBeInTheDocument();
+  expect(screen.getByRole('combobox')).toBeInTheDocument();
+});
+test('typing a non-numeric character does not update phone input value', function () {
+  getComponent();
+  var phoneInput = screen.getByRole('textbox');
+  fireEvent.change(phoneInput, {
+    target: {
+      value: 'a'
+    }
+  });
+  expect(phoneInput).toHaveValue('');
+});
+test('typing a "+" character is accepted', function () {
+  getComponent();
+  var phoneInput = screen.getByRole('textbox');
+  fireEvent.change(phoneInput, {
+    target: {
+      value: '+'
+    }
+  });
+  expect(phoneInput).toHaveValue('+');
+});
+test('typing "+" followed by digits is valid', function () {
+  getComponent();
+  var phoneInput = screen.getByRole('textbox');
+  fireEvent.change(phoneInput, {
+    target: {
+      value: '+123'
+    }
+  });
+  expect(phoneInput).toHaveValue('+123');
+});
+test('typing "+" followed by a letter is not accepted', function () {
+  getComponent();
+  var phoneInput = screen.getByRole('textbox');
+  fireEvent.change(phoneInput, {
+    target: {
+      value: '+a'
+    }
+  });
+  expect(phoneInput).toHaveValue('');
+});
+test('pasting a string with spaces and dashes strips non-numeric characters and dial code', function () {
+  getComponent();
+  var phoneInput = screen.getByRole('textbox');
+  var pasteEvent = createEvent.paste(phoneInput, {
+    clipboardData: {
+      getData: function getData() {
+        return '+1 (800) 555-1234';
+      }
+    }
+  });
+  fireEvent(phoneInput, pasteEvent);
+  expect(phoneInput).toHaveValue('8005551234');
+});
+test('pasting a string without leading "+" strips all non-numeric characters', function () {
+  getComponent();
+  var phoneInput = screen.getByRole('textbox');
+  var pasteEvent = createEvent.paste(phoneInput, {
+    clipboardData: {
+      getData: function getData() {
+        return '800-555-1234';
+      }
+    }
+  });
+  fireEvent(phoneInput, pasteEvent);
+  expect(phoneInput).toHaveValue('8005551234');
+});
+test('onChange callback is called with a valid phone number change', function () {
+  var onChange = jest.fn();
+  getComponent({
+    onChange: onChange
+  });
+  var phoneInput = screen.getByRole('textbox');
+  fireEvent.change(phoneInput, {
+    target: {
+      value: '+12345678'
+    }
+  });
+  expect(onChange).toHaveBeenCalled();
+});
+test('onChange callback is not called when an invalid character is typed', function () {
+  var onChange = jest.fn();
+  getComponent({
+    onChange: onChange
+  });
+  var phoneInput = screen.getByRole('textbox');
+  fireEvent.change(phoneInput, {
+    target: {
+      value: 'abc'
+    }
+  });
+  expect(onChange).not.toHaveBeenCalled();
+});
+test('isDisabled disables the phone input', function () {
+  getComponent({
+    isDisabled: true
+  });
+  var phoneInput = screen.getByRole('textbox');
+  expect(phoneInput).toBeDisabled();
+});
+test('helperText renders FieldHelperText content', function () {
+  var helperText = 'Enter your phone number';
+  getComponent({
+    helperText: helperText
+  });
+  expect(screen.getByText(helperText)).toBeInTheDocument();
+});
+test('controlled countryValue sets initial selected country', function () {
+  getComponent({
+    countryValue: 'US'
+  });
+  var phoneInput = screen.getByRole('textbox');
+  expect(phoneInput).toBeInTheDocument();
+  // The combobox should be present and the phone input available
+  expect(screen.getByRole('combobox')).toBeInTheDocument();
+});

package/lib/components/PhoneNumberField/index.js

@@ -0,0 +1 @@
+export { default } from './PhoneNumberField';

package/lib/index.js

@@ -151,6 +151,8 @@ export { default as PanelHeaderMenu } from './components/PanelHeader/controls/Pa
 export { default as PanelHeaderSwitchField } from './components/PanelHeader/controls/PanelHeaderSwitchField';
 export { default as PasswordField } from './components/PasswordField';
 export * from './components/PasswordField';
+export { default as PhoneNumberField } from './components/PhoneNumberField';
+export * from './components/PhoneNumberField';
 export { default as PopoverContainer } from './components/PopoverContainer';
 export * from './components/PopoverContainer';
 export { default as PopoverMenu } from './components/PopoverMenu';

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', 'MaterialSymbolIcon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavList', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RangeCalendar', 'RequirementsList', 'RockerButtonGroup', 'SearchField', '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'];
+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', 'MaterialSymbolIcon', 'IconBadge', 'IconButton', 'IconWrapper', 'ImageUploadField', 'Loader', 'Link', 'LinkSelectField', 'ListView', 'ListViewItem', 'Message', 'Messages', 'Modal', 'MultiValuesField', 'MultivaluesField', 'NavBar', 'NavList', 'NavigationHeader', 'NextGen ListViewItem', 'NumberField', 'OverlayPanel', 'PageHeader', 'Pagination', 'PanelHeader', 'PasswordField', 'PhoneNumberField', 'PopoverMenu', 'ProgressBar', 'RadioField', 'RadioGroupField', 'RangeCalendar', 'RequirementsList', 'RockerButtonGroup', 'SearchField', '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/types/index.js

@@ -42,6 +42,7 @@ export * from './navBar';
 export * from './navSideBar';
 export * from './overlayPanel';
 export * from './passwordField';
+export * from './phoneNumberField';
 export * from './popoverContainer';
 export * from './popoverMenu';
 export * from './progressBar';

package/lib/types/phoneNumberField.js

@@ -0,0 +1 @@
+export {};

package/lib/utils/designUtils/figmaLinks.js

@@ -163,6 +163,9 @@ export var FIGMA_LINKS = {
     withAvatar: 'https://www.figma.com/design/XDGxYAgQkcHDVjyu8OGrBv/Onyx-Specs?node-id=4470-24174&m=dev',
     withExtraLongText: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=44688%3A39713&mode=dev'
   },
+  phoneNumberField: {
+    "default": 'https://www.figma.com/design/XDGxYAgQkcHDVjyu8OGrBv/Onyx-Specs?node-id=8496-31873'
+  },
   popoverMenu: {
     "default": 'https://www.figma.com/file/Oa6VYtJcUJzEJuuRp0p4ls/Astro?type=design&node-id=0%3A3073&t=We3h7LaaFJQnxdSy-1'
   },

package/lib/utils/testUtils/universalFormSubmitTest.js

@@ -129,6 +129,7 @@ var useDefaultProps = function useDefaultProps(componentType) {
           name: name
         };
       case 'PasswordField':
+      case 'PhoneNumberField':
         return {
           value: value,
           onChange: function onChange(e) {
@@ -205,6 +206,7 @@ var getDefaultProps = function getDefaultProps(componentType, testValue) {
         name: name
       };
     case 'PasswordField':
+    case 'PhoneNumberField':
     case 'ComboBoxField':
     case 'NumberField':
     case 'MultivaluesField':
@@ -399,7 +401,7 @@ export var universalFieldComponentTests = function universalFieldComponentTests(
             fireEvent.click(screen.getAllByRole('option', {
               name: testValue
             })[0]);
-            _context2.next = 41;
+            _context2.next = 45;
             break;
           case 19:
             if (!(componentType === 'NumberField')) {
@@ -411,7 +413,7 @@ export var universalFieldComponentTests = function universalFieldComponentTests(
                 value: testValue
               }
             });
-            _context2.next = 41;
+            _context2.next = 45;
             break;
           case 23:
             if (!(componentType === 'RadioGroupField')) {
@@ -419,7 +421,7 @@ export var universalFieldComponentTests = function universalFieldComponentTests(
               break;
             }
             fireEvent.click(screen.getByLabelText(testValue));
-            _context2.next = 41;
+            _context2.next = 45;
             break;
           case 27:
             if (!(componentType === 'PasswordField')) {
@@ -431,25 +433,37 @@ export var universalFieldComponentTests = function universalFieldComponentTests(
                 value: testValue
               }
             });
-            _context2.next = 41;
+            _context2.next = 45;
             break;
           case 31:
+            if (!(componentType === 'PhoneNumberField')) {
+              _context2.next = 35;
+              break;
+            }
+            fireEvent.change(screen.getByRole('textbox'), {
+              target: {
+                value: testValue
+              }
+            });
+            _context2.next = 45;
+            break;
+          case 35:
             if (!(componentType === 'DatePicker')) {
-              _context2.next = 40;
+              _context2.next = 44;
               break;
             }
             iconButton = screen.queryAllByRole('button');
-            _context2.next = 35;
+            _context2.next = 39;
             return userEvent.click(iconButton[0]);
-          case 35:
+          case 39:
             cells = screen.getAllByRole('gridcell');
             selected = _findInstanceProperty(cells).call(cells, function (cell) {
               return cell.getAttribute('aria-selected') === 'true';
             });
             expect(selected === null || selected === void 0 ? void 0 : selected.children[0]).toHaveAttribute('aria-label', 'Wednesday, August 10, 2022 selected');
-            _context2.next = 41;
+            _context2.next = 45;
             break;
-          case 40:
+          case 44:
             if (componentType === 'SliderField') {
               fireEvent.change(screen.getByRole('slider'), {
                 target: {
@@ -463,7 +477,7 @@ export var universalFieldComponentTests = function universalFieldComponentTests(
                 }
               });
             }
-          case 41:
+          case 45:
             fireEvent.submit(screen.getByRole('form', {
               hidden: true,
               name: /test form 2/i
@@ -471,7 +485,7 @@ export var universalFieldComponentTests = function universalFieldComponentTests(
             expect(handleFormSubmit).toHaveBeenCalledWith({
               testName: String(testValue)
             });
-          case 43:
+          case 47:
           case "end":
             return _context2.stop();
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.208.4-alpha.0",
+  "version": "2.210.0-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",
@@ -158,6 +158,7 @@
     "@storybook/addon-console": "^3.0.0",
     "@storybook/addon-designs": "^11.0.0",
     "@storybook/addon-docs": "^10.2.8",
+    "@storybook/addon-mcp": "^0.7.0",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^10.2.8",
     "@storybook/react-vite": "^10.2.8",