pebble-web 2.25.2-alpha.3 → 2.26.0

package/dist/utils/index.d.ts

@@ -2,4 +2,3 @@ export * from "./strings/capitalize";
 export * from "./numbers/format";
 export * from "./analytics/ga";
 export * from "./dimensions";
-export * from "./testIds";

package/dist/utils/useragent/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-interface UserAgentInfoProviderProps {
+export interface UserAgentInfoProviderProps {
     userAgent: string;
 }
 export interface UserAgentInfo {
@@ -10,4 +10,3 @@ export declare class UserAgentInfoProvider extends React.PureComponent<UserAgent
     constructor(props: UserAgentInfoProviderProps);
     render(): JSX.Element;
 }
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pebble-web",
-  "version": "2.25.2-alpha.3",
+  "version": "2.26.0",
   "author": "ritz078 <rkritesh078@gmail.com>",
   "license": "MIT",
   "main": "dist/pebble-web.js",
@@ -19,7 +19,7 @@
     "build:watch": "chokidar 'src/**/*.ts' 'src/**/*.tsx' -c 'yarn build'",
     "pretest": "tslint ./src/**/*.{ts,tsx} ./stories/**/*.{ts,tsx} ./{tests,typings}/**/*.{ts,tsx}",
     "test": "jest --coverage",
-    "prepublishOnly": "yarn build && yarn test",
+    "_prepublishOnly": "yarn build && yarn test",
     "test:watch": "yarn jest --watchAll"
   },
   "peerDependencies": {
@@ -44,7 +44,7 @@
     "utility-types": "^3.10.0"
   },
   "devDependencies": {
-    "pebble-shared": "^2.25.1"
+    "pebble-shared": "^2.26.0"
   },
   "greenkeeper": {
     "ignore": [

package/src/components/Button.tsx

@@ -23,8 +23,7 @@ const Button: React.FunctionComponent<ButtonProps> = ({
   loading,
   outline,
   size = "small",
-  buttonProps,
-  testId
+  buttonProps
 }: ButtonProps) => {
   const disableAction = disabled || loading;
 
@@ -41,7 +40,6 @@ const Button: React.FunctionComponent<ButtonProps> = ({
       onClick={!disableAction ? onClick : undefined}
       style={{ width }}
       disabled={disabled}
-      data-testid={testId}
       {...buttonProps}
     >
       {loading ? <Loader color={colors.white.base} scale={0.4} /> : children}

package/src/components/Calendar.tsx

@@ -13,7 +13,6 @@ import {
 } from "./styles/Calendar.styles";
 import Button from "./Button";
 import { isSameDay, endOfDay, startOfDay, addDays, subDays } from "date-fns";
-import { getCalendarTestIds, getTestIds } from "../utils/testIds";
 
 class Calendar extends React.PureComponent<CalendarProps, CalendarState> {
   static defaultProps: Partial<CalendarProps> = {
@@ -137,16 +136,9 @@ class Calendar extends React.PureComponent<CalendarProps, CalendarState> {
       onClear,
       maxDate,
       minDate,
-      testId,
       ...rest
     } = this.props;
     const { maxRangeDates } = this.state;
-    const {
-      leftIconId,
-      rightIconId,
-      clearButtonId,
-      applyButtonId
-    } = getTestIds(testId, id => getCalendarTestIds(id));
 
     return (
       <div
@@ -173,18 +165,10 @@ class Calendar extends React.PureComponent<CalendarProps, CalendarState> {
           tileDisabled={this.getDisabledDays}
           onClickDay={this.onDayClick}
           prevLabel={
-            <i
-              style={{ fontSize: 14 }}
-              className="pi pi-chevron-left"
-              data-testid={leftIconId}
-            />
+            <i style={{ fontSize: 14 }} className="pi pi-chevron-left" />
           }
           nextLabel={
-            <i
-              style={{ fontSize: 14 }}
-              className="pi pi-arrow-right"
-              data-testid={rightIconId}
-            />
+            <i style={{ fontSize: 14 }} className="pi pi-arrow-right" />
           }
           maxDate={maxDate || (maxRangeDates && maxRangeDates.future)}
           minDate={minDate || (maxRangeDates && maxRangeDates.past)}
@@ -193,19 +177,11 @@ class Calendar extends React.PureComponent<CalendarProps, CalendarState> {
         {(onClear || onApply) && (
           <div className={buttonsWrapper}>
             {onClear && (
-              <Button
-                onClick={this.onClear}
-                type="secondary"
-                testId={clearButtonId}
-              >
+              <Button onClick={this.onClear} type="secondary">
                 Clear
               </Button>
             )}
-            {onApply && (
-              <Button onClick={this.onApply} testId={applyButtonId}>
-                Apply
-              </Button>
-            )}
+            {onApply && <Button onClick={this.onApply}>Apply</Button>}
           </div>
         )}
       </div>

package/src/components/CheckboxGroup.tsx

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { CheckboxGroupProps } from "./typings/CheckboxGroup";
 import { CheckboxProps } from "./typings/Checkbox";
-import { getOptionTestId } from "../utils/testIds";
 import { getSelectedCheckboxes } from "./utils/getSelectedCheckboxes";
 
 export default class CheckboxGroup<OptionType> extends React.PureComponent<
@@ -16,17 +15,9 @@ export default class CheckboxGroup<OptionType> extends React.PureComponent<
   };
 
   render() {
-    const {
-      children,
-      selected,
-      className,
-      name,
-      disabled,
-      testId
-    } = this.props;
+    const { children, selected, className, name, disabled } = this.props;
 
-    const _children = React.Children.map(children, (_checkbox, i) => {
-      const index = typeof i === "number" ? i : 0;
+    const _children = React.Children.map(children, _checkbox => {
       // `_checkbox as React.ReactElement<CheckboxProps>` is a hack
       // Because React does not allow us to specify what sort of elements
       // you can allow as children and leaves it on you to figure out
@@ -37,8 +28,7 @@ export default class CheckboxGroup<OptionType> extends React.PureComponent<
       return React.cloneElement(checkbox, {
         onChange: this.handleChange,
         checked: selected.indexOf(checkbox.props.value) >= 0,
-        disabled,
-        testId: testId ? getOptionTestId(testId, index) : undefined
+        disabled
       });
     });
 

package/src/components/DateInput.tsx

@@ -94,8 +94,7 @@ export default class DateInput extends React.PureComponent<
       initiallyOpen,
       onOutsideClick,
       controlled,
-      isOpen,
-      testId
+      isOpen
     } = this.props;
 
     const _wrapperClassName = cx(wrapperStyle, wrapperClassName);
@@ -132,7 +131,6 @@ export default class DateInput extends React.PureComponent<
                 }}
                 className={cx(inputStyle, inputProps && inputProps.className)}
                 disabled={disabled}
-                testId={testId}
               />
             )}
           </Rifm>

package/src/components/DropDown.tsx

@@ -48,8 +48,7 @@ class DropDown extends React.PureComponent<DropdownProps, DropdownState> {
       disabled,
       labelClassName,
       controlled,
-      onOutsideClick,
-      testId
+      onOutsideClick
     } = this.props;
 
     const _isDropDownOpen = controlled
@@ -83,7 +82,6 @@ class DropDown extends React.PureComponent<DropdownProps, DropdownState> {
                     onClick={this.toggleDropdown}
                     disabled={disabled}
                     className={labelClassName}
-                    testId={testId}
                   >
                     {buttonLabel}
                   </DropDownButton>

package/src/components/Input.tsx

@@ -15,7 +15,6 @@ import {
 } from "./styles/Input.styles";
 import { colors } from "pebble-shared";
 import Loader from "./Loader";
-import { getMessageTestId } from "../utils/testIds";
 
 function getColor(
   error: string | undefined,
@@ -85,8 +84,7 @@ class Input extends React.PureComponent<InputProps, InputState> {
       onClick,
       loading,
       leftElement,
-      rightElement,
-      testId
+      rightElement
     } = this.props;
     const { isFocused } = this.state;
 
@@ -154,18 +152,9 @@ class Input extends React.PureComponent<InputProps, InputState> {
           {leftElement?.()}
 
           {this.props.textArea ? (
-            <textarea
-              {..._inputProps}
-              {...this.props.inputProps}
-              data-testid={testId}
-            />
+            <textarea {..._inputProps} {...this.props.inputProps} />
           ) : (
-            <input
-              type={type}
-              {..._inputProps}
-              {...this.props.inputProps}
-              data-testid={testId}
-            />
+            <input type={type} {..._inputProps} {...this.props.inputProps} />
           )}
 
           {loading && (
@@ -198,7 +187,6 @@ class Input extends React.PureComponent<InputProps, InputState> {
         {_message && (
           <div
             className={messageStyle}
-            data-testid={testId ? getMessageTestId(testId) : undefined}
             style={{ color: getColor(errorMessage, successMessage) }}
           >
             {_message}

package/src/components/Loader.tsx

@@ -7,8 +7,7 @@ import { cx } from "emotion";
 const Loader: React.FunctionComponent<LoaderProps> = ({
   color = colors.gray.darker,
   scale = 1,
-  className,
-  testId
+  className
 }) => {
   const style = {
     backgroundColor: color
@@ -17,7 +16,6 @@ const Loader: React.FunctionComponent<LoaderProps> = ({
     <div
       className={cx(spinnerStyle, className)}
       style={{ transform: `scale(${scale})` }}
-      data-testid={testId}
     >
       <div style={style} />
       <div style={style} />

package/src/components/Message.tsx

@@ -7,8 +7,7 @@ import { AlertProps } from "./typings/Message";
 const Message: React.FunctionComponent<AlertProps> = ({
   intent,
   className,
-  text,
-  testId
+  text
 }) => {
   const bColor = _colors[intent];
 
@@ -23,7 +22,6 @@ const Message: React.FunctionComponent<AlertProps> = ({
       style={{
         backgroundColor: bColor
       }}
-      data-testid={testId}
     >
       <i className={iconClass} />
       {text}

package/src/components/NativeDateInput.tsx

@@ -12,7 +12,7 @@ export default class NativeDateInput extends React.PureComponent<
   };
 
   render() {
-    const { inputProps, placeholder, value, disabled, testId } = this.props;
+    const { inputProps, placeholder, value, disabled } = this.props;
 
     return (
       <Input
@@ -26,7 +26,6 @@ export default class NativeDateInput extends React.PureComponent<
         fixLabelAtTop
         {...inputProps}
         disabled={disabled}
-        testId={testId}
       />
     );
   }

package/src/components/OptionGroupCheckBox.tsx

@@ -6,7 +6,6 @@ import OptionGroup from "./shared/OptionGroup";
 import { OptionGroupCheckBoxProps } from "./typings/OptionGroupCheckBox";
 import * as styles from "../components/styles/OptionGroupCheckBox.styles";
 import { OptionProps } from "./typings/Option";
-import { getOptionGroupCheckBoxTestIds, getTestIds } from "../utils/testIds";
 
 export default class OptionGroupCheckBox<
   OptionType
@@ -53,7 +52,6 @@ export default class OptionGroupCheckBox<
       onClear,
       isSelected,
       onChange,
-      testId,
       ...rest
     } = this.props;
     const advancedOptionsProps = {
@@ -61,7 +59,6 @@ export default class OptionGroupCheckBox<
       clearVisible: this.clearVisible,
       ...this.props.advancedOptionsProps
     };
-    const testIds = getTestIds(testId, getOptionGroupCheckBoxTestIds);
     return (
       <div className={cx(styles.optionGroupCheckBoxWrap, wrapClassName)}>
         <OptionGroup<OptionType>
@@ -70,25 +67,16 @@ export default class OptionGroupCheckBox<
           isSelected={isSelected || this.isSelected}
           handleChange={this.handleChange}
           multiSelect
-          testId={testId}
         />
 
         {(onApply || onClear) && (
           <div className={styles.optionGroupCheckBoxButtonWrap}>
             {onClear && (
-              <Button
-                type="secondary"
-                onClick={onClear}
-                testId={testIds.clearButtonId}
-              >
+              <Button type="secondary" onClick={onClear}>
                 Clear
               </Button>
             )}
-            {onApply && (
-              <Button onClick={this.onApply} testId={testIds.applyButtonId}>
-                Apply
-              </Button>
-            )}
+            {onApply && <Button onClick={this.onApply}>Apply</Button>}
           </div>
         )}
       </div>

package/src/components/PhoneNumberInput.tsx

@@ -10,7 +10,6 @@ import {
 } from "./styles/PhoneNumberInput.styles";
 import { labelStyle } from "./styles/Input.styles";
 import { colors } from "pebble-shared";
-import { getPhoneNumberInputTestIds, getTestIds } from "../utils/testIds";
 
 export default class PhoneNumberInput<
   OptionType = string
@@ -41,11 +40,8 @@ export default class PhoneNumberInput<
       selectProps,
       inputProps,
       required,
-      placeholder,
-      testId
+      placeholder
     } = this.props;
-
-    const testIds = getTestIds(testId, getPhoneNumberInputTestIds);
     return (
       <div className={cx(wrapper, className)}>
         <label
@@ -65,7 +61,6 @@ export default class PhoneNumberInput<
           selected={countryCode}
           {...selectProps}
           className={cx(selectStyle, selectProps && selectProps.className)}
-          testId={testIds.countryId}
         >
           {this.props.children}
         </Select>
@@ -74,7 +69,6 @@ export default class PhoneNumberInput<
           placeholder=""
           value={phone}
           {...inputProps}
-          testId={testIds.phoneId}
         />
       </div>
     );

package/src/components/PopUp.tsx

@@ -9,7 +9,6 @@ import {
   flexCenter
 } from "./styles/PopUp.styles";
 import { PopUpProps } from "./typings/PopUp";
-import { getPopUpTestIds, getTestIds } from "../utils/testIds";
 
 const PopUp: React.FunctionComponent<PopUpProps> = props => {
   const {
@@ -21,10 +20,8 @@ const PopUp: React.FunctionComponent<PopUpProps> = props => {
     rejectButtonText = "No",
     children,
     approveButtonProps,
-    rejectButtonProps,
-    testId
+    rejectButtonProps
   } = props;
-  const {closeButtonId, approveButtonId, rejectButtonId} = getTestIds(testId, id => getPopUpTestIds(id));
   return (
     <Modal visible={visible} modalClassName={flexCenter}>
       <div className={modalContainer}>
@@ -32,7 +29,6 @@ const PopUp: React.FunctionComponent<PopUpProps> = props => {
           <i
             className={cx("pi", "pi-close", iconCloseClassName)}
             onClick={onClose}
-            data-testid={closeButtonId}
           />
         )}
         {children}
@@ -44,7 +40,6 @@ const PopUp: React.FunctionComponent<PopUpProps> = props => {
                 type="secondary"
                 onClick={onReject}
                 {...rejectButtonProps}
-                testId={rejectButtonId}
               >
                 {rejectButtonText}
               </Button>
@@ -55,7 +50,6 @@ const PopUp: React.FunctionComponent<PopUpProps> = props => {
                 type="primary"
                 onClick={onApprove}
                 {...approveButtonProps}
-                testId={approveButtonId}
               >
                 {approveButtonText}
               </Button>

package/src/components/RadioGroup.tsx

@@ -1,11 +1,6 @@
 import * as React from "react";
 import { RadioProps } from "./typings/Radio";
 import { RadioGroupProps } from "./typings/RadioGroup";
-import {
-  getOptionTestId,
-  getRadioGroupTestIds,
-  getTestIds
-} from "../utils/testIds";
 
 export default class RadioGroup<OptionType> extends React.PureComponent<
   RadioGroupProps<OptionType>
@@ -20,18 +15,9 @@ export default class RadioGroup<OptionType> extends React.PureComponent<
   };
 
   render() {
-    const {
-      children,
-      selected,
-      className,
-      name,
-      disabled,
-      testId
-    } = this.props;
+    const { children, selected, className, name, disabled } = this.props;
 
-    const testIds = getTestIds(testId, getRadioGroupTestIds);
-
-    const _children = React.Children.map(children, (_radio, i) => {
+    const _children = React.Children.map(children, _radio => {
       // `_radio as React.ReactElement<RadioProps>` is a hack
       // Because React does not allow us to specify what sort of elements
       // you can allow as children and leaves it on you to figure out
@@ -40,10 +26,7 @@ export default class RadioGroup<OptionType> extends React.PureComponent<
       return React.cloneElement(radio, {
         onChange: this.handleChange,
         checked: selected === radio.props.value,
-        disabled,
-        testId: testIds.optionId
-          ? getOptionTestId(testIds.optionId, i)
-          : undefined
+        disabled
       });
     });
 

package/src/components/Search.tsx

@@ -27,8 +27,7 @@ class Search extends React.PureComponent<SearchProps> {
       className,
       clearable,
       value,
-      loading,
-      testId
+      loading
     } = this.props;
 
     const wrapperClassName = cx(searchWrapperStyle, {
@@ -51,7 +50,6 @@ class Search extends React.PureComponent<SearchProps> {
           ref={this.searchInputRef}
           value={value}
           {...inputProps}
-          data-testid={testId}
         />
         {loading && <Loader scale={0.4} color={colors.violet.base} />}
         {clearable && (

package/src/components/SecondaryInput.tsx

@@ -12,7 +12,6 @@ import {
   messageStyle,
   placeholderStyle
 } from "./styles/SecondaryInput.styles";
-import { getMessageTestId } from "../utils/testIds";
 import {
   SecondaryInputProps,
   SecondaryInputState
@@ -77,8 +76,7 @@ export default class SecondaryInput extends React.PureComponent<
       message,
       readOnly,
       loading,
-      className,
-      testId
+      className
     } = this.props;
     const { isFocused } = this.state;
 
@@ -121,11 +119,7 @@ export default class SecondaryInput extends React.PureComponent<
           onFocus={this.addFocus}
           onBlur={this.removeFocus}
         >
-          <input
-            {..._inputProps}
-            {...this.props.inputProps}
-            data-testid={testId}
-          />
+          <input {..._inputProps} {...this.props.inputProps} />
           <label className={placeholderClassName}>
             {placeholder}
             {required && (
@@ -140,7 +134,6 @@ export default class SecondaryInput extends React.PureComponent<
         {_message && (
           <div
             className={messageStyle}
-            data-testid={testId ? getMessageTestId(testId) : undefined}
             style={{ color: getColor(errorMessage, successMessage) }}
           >
             {_message}

package/src/components/Select.tsx

@@ -16,7 +16,6 @@ import DropDown from "./DropDown";
 import Input from "./Input";
 import OptionGroupCheckBox from "./OptionGroupCheckBox";
 import OptionGroupRadio from "./OptionGroupRadio";
-import { getSelectInputTestIds, getTestIds } from "../utils/testIds";
 
 function noop() {}
 
@@ -35,17 +34,9 @@ function Select<OptionType>(props: SelectProps<OptionType>) {
     disabled,
     isSelected,
     placement,
-    modifiers,
-    testId
+    modifiers
   } = props;
 
-  const singleSelectTestIds = getTestIds(testId, id =>
-    getSelectInputTestIds(id, false)
-  );
-  const multiSelectTestIds = getTestIds(testId, id =>
-    getSelectInputTestIds(id, true)
-  );
-
   return (
     <div
       className={cx(selectWrapper, className, {
@@ -77,7 +68,6 @@ function Select<OptionType>(props: SelectProps<OptionType>) {
                       onDropdownToggle(isOpen);
                     }
               }
-              data-testid={singleSelectTestIds.inputId}
             >
               <Input
                 className={selectInputWrapper}
@@ -163,7 +153,6 @@ function Select<OptionType>(props: SelectProps<OptionType>) {
                   })
                 }
                 {...commonProps}
-                testId={multiSelectTestIds.optionGroupId}
               >
                 {children}
               </OptionGroupCheckBox>
@@ -178,7 +167,6 @@ function Select<OptionType>(props: SelectProps<OptionType>) {
                   toggle();
                 }}
                 {...commonProps}
-                testId={singleSelectTestIds.optionGroupId}
               >
                 {children}
               </OptionGroupRadio>

package/src/components/Tabs.tsx

@@ -37,7 +37,7 @@ export class Tabs extends React.PureComponent<TabsProps, TabsState> {
             return (
               <span
                 key={`${tab}-${i}`}
-                data-testid={`${tab
+                data-test-id={`${tab
                   .replace(/\d/g, "")
                   .replace("(", "")
                   .replace(")", "")

package/src/components/Text.tsx

@@ -7,19 +7,14 @@ const Text: React.FunctionComponent<TextProps> = ({
   typography,
   color = colors.gray.darker,
   children,
-  className,
-  testId
+  className
 }) => {
   const _className = css({
     ...typography,
     color
   });
 
-  return (
-    <span className={cx(_className, className)} data-testid={testId}>
-      {children}
-    </span>
-  );
+  return <span className={cx(_className, className)}>{children}</span>;
 };
 
 export default Text;

package/src/components/TimePicker.tsx

@@ -78,7 +78,7 @@ const TimePicker: React.FunctionComponent<TimePickerProps> = props => {
               toggleDropdown();
             }}
             className={buttonStyle}
-            data-testid="hour-label"
+            data-test-id="hour-label"
           >
             <span className={css({ marginRight: "15px" })}>
               {selectedHour !== undefined
@@ -128,7 +128,7 @@ const TimePicker: React.FunctionComponent<TimePickerProps> = props => {
               toggleDropdown();
             }}
             className={buttonStyle}
-            data-testid="minute-label"
+            data-test-id="minute-label"
           >
             <span className={css({ marginRight: "15px" })}>
               {selectedMinute !== undefined

package/src/components/Toast.tsx

@@ -124,12 +124,12 @@ class Toast extends React.PureComponent<ToastProps, ToastState> {
   };
 
   componentDidMount() {
-    emitter.on<EventType>("showToast", e => e && this.show(e));
+    emitter.on<EventType>("showToast", this.show);
     emitter.on<EventType>("hideToast", this.hide);
   }
 
   componentWillUnmount() {
-    emitter.off<EventType>("showToast", e => e && this.show(e));
+    emitter.off<EventType>("showToast", this.show);
     emitter.off("hideToast", this.hide);
   }