pebble-web 2.25.2-alpha.1 → 2.25.2-alpha.3

package/dist/pebble-web.es.js

@@ -625,6 +625,76 @@ const buttonsWrapper = /*#__PURE__*/css({ ...flexSpaceBetween,
   marginTop: 20
 }, ";label:buttonsWrapper;" + ( "" ));
 
+function getTestIds(id, builder) {
+  return id ? builder(id) : {};
+}
+function getOptionTestId(id, index) {
+  return `${id}-${index}`;
+}
+function getRadioGroupTestIds(id) {
+  return {
+    optionId: `${id}-option`
+  };
+}
+function getOptionGroupTestIds(id) {
+  return {
+    searchBoxId: `${id}-search`,
+    optionId: `${id}-option`,
+    selectVisibleId: `${id}-select-visible`,
+    clearVisibleId: `${id}-clear-visible`
+  };
+}
+const getOptionGroupRadioTestIds = id => getOptionGroupTestIds(id);
+function getOptionGroupCheckBoxTestIds(id) {
+  return {
+    applyButtonId: `${id}-apply-btn`,
+    clearButtonId: `${id}-clear-btn`,
+    ...getOptionGroupTestIds(id)
+  };
+}
+function getPhoneNumberInputTestIds(id) {
+  return {
+    phoneId: `${id}-phone`,
+    countryId: `${id}-country`,
+    countryInputIds: getSelectInputTestIds(`${id}-country`)
+  };
+}
+function getMessageTestId(id) {
+  return `${id}-message`;
+}
+function getSelectInputTestIds(id, multiSelect = false) {
+  const optionGroupId = `${id}-option-group`;
+  const baseIds = {
+    inputId: `${id}-input`,
+    optionGroupId
+  };
+  return { ...(multiSelect ? getOptionGroupCheckBoxTestIds(optionGroupId) : getOptionGroupRadioTestIds(optionGroupId)),
+    ...baseIds
+  };
+}
+function getTypeaheadTestIds(id) {
+  const optionGroupId = `${id}-option-group`;
+  return {
+    optionGroupId,
+    ...getOptionGroupRadioTestIds(optionGroupId)
+  };
+}
+function getCalendarTestIds(id) {
+  return {
+    leftIconId: `${id}-left-icon`,
+    rightIconId: `${id}-right-icon`,
+    applyButtonId: `${id}-apply-btn`,
+    clearButtonId: `${id}-clear-btn`
+  };
+}
+function getPopUpTestIds(id) {
+  return {
+    closeButtonId: `${id}-close-btn`,
+    approveButtonId: `${id}-approve-btn`,
+    rejectButtonId: `${id}-reject-btn`
+  };
+}
+
 class Calendar extends PureComponent {
   constructor() {
     super(...arguments);
@@ -738,11 +808,18 @@ class Calendar extends PureComponent {
       onClear,
       maxDate,
       minDate,
+      testId,
       ...rest
     } = this.props;
     const {
       maxRangeDates
     } = this.state;
+    const {
+      leftIconId,
+      rightIconId,
+      clearButtonId,
+      applyButtonId
+    } = getTestIds(testId, id => getCalendarTestIds(id));
     return /*#__PURE__*/createElement("div", {
       className: cx(wrapperStyle, {
         [/*#__PURE__*/css( {
@@ -767,13 +844,15 @@ class Calendar extends PureComponent {
         style: {
           fontSize: 14
         },
-        className: "pi pi-chevron-left"
+        className: "pi pi-chevron-left",
+        "data-testid": leftIconId
       }),
       nextLabel: /*#__PURE__*/createElement("i", {
         style: {
           fontSize: 14
         },
-        className: "pi pi-arrow-right"
+        className: "pi pi-arrow-right",
+        "data-testid": rightIconId
       }),
       maxDate: maxDate || maxRangeDates && maxRangeDates.future,
       minDate: minDate || maxRangeDates && maxRangeDates.past
@@ -781,9 +860,11 @@ class Calendar extends PureComponent {
       className: buttonsWrapper
     }, onClear && /*#__PURE__*/createElement(Button, {
       onClick: this.onClear,
-      type: "secondary"
+      type: "secondary",
+      testId: clearButtonId
     }, "Clear"), onApply && /*#__PURE__*/createElement(Button, {
-      onClick: this.onApply
+      onClick: this.onApply,
+      testId: applyButtonId
     }, "Apply")));
   }
 }
@@ -912,14 +993,17 @@ class CheckboxGroup extends PureComponent {
       selected,
       className,
       name,
-      disabled
+      disabled,
+      testId
     } = this.props;
-    const _children = Children.map(children, _checkbox => {
+    const _children = Children.map(children, (_checkbox, i) => {
+      const index = typeof i === "number" ? i : 0;
       const checkbox = _checkbox;
       return cloneElement(checkbox, {
         onChange: this.handleChange,
         checked: selected.indexOf(checkbox.props.value) >= 0,
-        disabled
+        disabled,
+        testId: testId ? getOptionTestId(testId, index) : undefined
       });
     });
     return /*#__PURE__*/createElement("div", {
@@ -1339,6 +1423,7 @@ class Input extends PureComponent {
       }
     }), _message && /*#__PURE__*/createElement("div", {
       className: messageStyle,
+      "data-testid": testId ? getMessageTestId(testId) : undefined,
       style: {
         color: getColor(errorMessage, successMessage)
       }
@@ -2137,58 +2222,6 @@ const searchBoxScrolledStyle = /*#__PURE__*/css({
   padding: onScrollPadding
 }, ";label:searchBoxScrolledStyle;" + ( "" ));
 
-function getTestIds(id, builder) {
-  return id ? builder(id) : {};
-}
-function getOptionTestId(id, index) {
-  return `${id}-${index}`;
-}
-function getRadioGroupTestIds(id) {
-  return {
-    optionId: `${id}-option`
-  };
-}
-function getOptionGroupTestIds(id) {
-  return {
-    searchBoxId: `${id}-search`,
-    optionId: `${id}-option`,
-    selectVisibleId: `${id}-select-visible`,
-    clearVisibleId: `${id}-clear-visible`
-  };
-}
-const getOptionGroupRadioTestIds = id => getOptionGroupTestIds(id);
-function getOptionGroupCheckBoxTestIds(id) {
-  return {
-    applyButtonId: `${id}-apply-btn`,
-    clearButtonId: `${id}-clear-btn`,
-    ...getOptionGroupTestIds(id)
-  };
-}
-function getPhoneNumberInputTestIds(id) {
-  return {
-    phoneId: `${id}-phone`,
-    countryId: `${id}-country`,
-    countryInputIds: getSelectInputTestIds(`${id}-country`)
-  };
-}
-function getSelectInputTestIds(id, multiSelect = false) {
-  const optionGroupId = `${id}-option-group`;
-  const baseIds = {
-    inputId: `${id}-input`,
-    optionGroupId
-  };
-  return { ...(multiSelect ? getOptionGroupCheckBoxTestIds(optionGroupId) : getOptionGroupRadioTestIds(optionGroupId)),
-    ...baseIds
-  };
-}
-function getTypeaheadTestIds(id) {
-  const optionGroupId = `${id}-option-group`;
-  return {
-    optionGroupId,
-    ...getOptionGroupRadioTestIds(optionGroupId)
-  };
-}
-
 class OptionGroup extends PureComponent {
   constructor() {
     super(...arguments);
@@ -2828,8 +2861,14 @@ const PopUp = props => {
     rejectButtonText = "No",
     children,
     approveButtonProps,
-    rejectButtonProps
+    rejectButtonProps,
+    testId
   } = props;
+  const {
+    closeButtonId,
+    approveButtonId,
+    rejectButtonId
+  } = getTestIds(testId, id => getPopUpTestIds(id));
   return /*#__PURE__*/createElement(Modal, {
     visible: visible,
     modalClassName: flexCenter
@@ -2837,18 +2876,23 @@ const PopUp = props => {
     className: modalContainer$1
   }, onClose && /*#__PURE__*/createElement("i", {
     className: cx("pi", "pi-close", iconCloseClassName),
-    onClick: onClose
+    onClick: onClose,
+    "data-testid": closeButtonId
   }), children, (onReject || onApprove) && /*#__PURE__*/createElement("div", {
     className: buttonsContainer
   }, onReject && /*#__PURE__*/createElement(Button, Object.assign({
     size: "large",
     type: "secondary",
     onClick: onReject
-  }, rejectButtonProps), rejectButtonText), onApprove && /*#__PURE__*/createElement(Button, Object.assign({
+  }, rejectButtonProps, {
+    testId: rejectButtonId
+  }), rejectButtonText), onApprove && /*#__PURE__*/createElement(Button, Object.assign({
     size: "large",
     type: "primary",
     onClick: onApprove
-  }, approveButtonProps), approveButtonText))));
+  }, approveButtonProps, {
+    testId: approveButtonId
+  }), approveButtonText))));
 };
 
 const selectedTabStyle = /*#__PURE__*/css({
@@ -3320,6 +3364,7 @@ class SecondaryInput extends PureComponent {
       scale: 0.4
     })), _message && /*#__PURE__*/createElement("div", {
       className: messageStyle$1,
+      "data-testid": testId ? getMessageTestId(testId) : undefined,
       style: {
         color: getColor$1(errorMessage, successMessage)
       }
@@ -4330,9 +4375,12 @@ var index = /*#__PURE__*/Object.freeze({
     getOptionGroupRadioTestIds: getOptionGroupRadioTestIds,
     getOptionGroupCheckBoxTestIds: getOptionGroupCheckBoxTestIds,
     getPhoneNumberInputTestIds: getPhoneNumberInputTestIds,
+    getMessageTestId: getMessageTestId,
     getSelectInputTestIds: getSelectInputTestIds,
-    getTypeaheadTestIds: getTypeaheadTestIds
+    getTypeaheadTestIds: getTypeaheadTestIds,
+    getCalendarTestIds: getCalendarTestIds,
+    getPopUpTestIds: getPopUpTestIds
 });
 
-export { BrowserBasedDateInput, Button, Calendar, Checkbox, CheckboxGroup, DateInput, DropDown, DropDownButton, Input, Loader, Logo, Message, Modal, NativeDateInput, Option, OptionGroup, OptionGroupCheckBox, OptionGroupRadio, OutsideClick, PhoneNumberInput, PopUp, PebblePopper as Popper, PresetCalendar, Radio, RadioGroup, Rating, Search, SecondaryInput, Select, SideBar, Slider, Stepper, Switch, TabSection, Tabs, Tag, Text, TimePicker, Toast, Tooltip, TypeAhead, UserAgentInfoContext, UserAgentInfoProvider, constants, getOptionGroupCheckBoxTestIds, getOptionGroupRadioTestIds, getOptionGroupTestIds, getOptionTestId, getPhoneNumberInputTestIds, getRadioGroupTestIds, getSelectInputTestIds, getTestIds, getTypeaheadTestIds, mixins, styles, typography, index as utils };
+export { BrowserBasedDateInput, Button, Calendar, Checkbox, CheckboxGroup, DateInput, DropDown, DropDownButton, Input, Loader, Logo, Message, Modal, NativeDateInput, Option, OptionGroup, OptionGroupCheckBox, OptionGroupRadio, OutsideClick, PhoneNumberInput, PopUp, PebblePopper as Popper, PresetCalendar, Radio, RadioGroup, Rating, Search, SecondaryInput, Select, SideBar, Slider, Stepper, Switch, TabSection, Tabs, Tag, Text, TimePicker, Toast, Tooltip, TypeAhead, UserAgentInfoContext, UserAgentInfoProvider, constants, getCalendarTestIds, getMessageTestId, getOptionGroupCheckBoxTestIds, getOptionGroupRadioTestIds, getOptionGroupTestIds, getOptionTestId, getPhoneNumberInputTestIds, getPopUpTestIds, getRadioGroupTestIds, getSelectInputTestIds, getTestIds, getTypeaheadTestIds, mixins, styles, typography, index as utils };
 //# sourceMappingURL=pebble-web.es.js.map