pebble-web 3.0.0-alpha.0 → 3.0.0-alpha.1

package/src/components/Search.tsx

@@ -27,7 +27,8 @@ class Search extends React.PureComponent<SearchProps> {
       className,
       clearable,
       value,
-      loading
+      loading,
+      testId
     } = this.props;
 
     const wrapperClassName = cx(searchWrapperStyle, {
@@ -50,6 +51,7 @@ 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,6 +12,7 @@ import {
   messageStyle,
   placeholderStyle
 } from "./styles/SecondaryInput.styles";
+import { getMessageTestId } from "../utils/testIds";
 import {
   SecondaryInputProps,
   SecondaryInputState
@@ -76,7 +77,8 @@ export default class SecondaryInput extends React.PureComponent<
       message,
       readOnly,
       loading,
-      className
+      className,
+      testId
     } = this.props;
     const { isFocused } = this.state;
 
@@ -119,7 +121,11 @@ export default class SecondaryInput extends React.PureComponent<
           onFocus={this.addFocus}
           onBlur={this.removeFocus}
         >
-          <input {..._inputProps} {...this.props.inputProps} />
+          <input
+            {..._inputProps}
+            {...this.props.inputProps}
+            data-testid={testId}
+          />
           <label className={placeholderClassName}>
             {placeholder}
             {required && (
@@ -134,6 +140,7 @@ 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,6 +16,7 @@ import DropDown from "./DropDown";
 import Input from "./Input";
 import OptionGroupCheckBox from "./OptionGroupCheckBox";
 import OptionGroupRadio from "./OptionGroupRadio";
+import { getSelectInputTestIds, getTestIds } from "../utils/testIds";
 
 function noop() {}
 
@@ -34,9 +35,17 @@ function Select<OptionType>(props: SelectProps<OptionType>) {
     disabled,
     isSelected,
     placement,
-    modifiers
+    modifiers,
+    testId
   } = props;
 
+  const singleSelectTestIds = getTestIds(testId, id =>
+    getSelectInputTestIds(id, false)
+  );
+  const multiSelectTestIds = getTestIds(testId, id =>
+    getSelectInputTestIds(id, true)
+  );
+
   return (
     <div
       className={cx(selectWrapper, className, {
@@ -68,6 +77,7 @@ function Select<OptionType>(props: SelectProps<OptionType>) {
                       onDropdownToggle(isOpen);
                     }
               }
+              data-testid={singleSelectTestIds.inputId}
             >
               <Input
                 className={selectInputWrapper}
@@ -153,6 +163,7 @@ function Select<OptionType>(props: SelectProps<OptionType>) {
                   })
                 }
                 {...commonProps}
+                testId={multiSelectTestIds.optionGroupId}
               >
                 {children}
               </OptionGroupCheckBox>
@@ -167,6 +178,7 @@ 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-test-id={`${tab
+                data-testid={`${tab
                   .replace(/\d/g, "")
                   .replace("(", "")
                   .replace(")", "")

package/src/components/Text.tsx

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

package/src/components/TimePicker.tsx

@@ -78,7 +78,7 @@ const TimePicker: React.FunctionComponent<TimePickerProps> = props => {
               toggleDropdown();
             }}
             className={buttonStyle}
-            data-test-id="hour-label"
+            data-testid="hour-label"
           >
             <span className={css({ marginRight: "15px" })}>
               {selectedHour !== undefined
@@ -128,7 +128,7 @@ const TimePicker: React.FunctionComponent<TimePickerProps> = props => {
               toggleDropdown();
             }}
             className={buttonStyle}
-            data-test-id="minute-label"
+            data-testid="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", this.show);
+    emitter.on<EventType>("showToast", e => e && this.show(e));
     emitter.on<EventType>("hideToast", this.hide);
   }
 
   componentWillUnmount() {
-    emitter.off<EventType>("showToast", this.show);
+    emitter.off<EventType>("showToast", e => e && this.show(e));
     emitter.off("hideToast", this.hide);
   }
 

package/src/components/TypeAhead.tsx

@@ -12,6 +12,7 @@ import OutsideClick from "./OutsideClick";
 import OptionGroupRadio from "./OptionGroupRadio";
 import { animated } from "react-spring";
 import MountTransition from "./shared/MountTransition";
+import { getTestIds, getTypeaheadTestIds } from "../utils/testIds";
 
 function defaultSearchBox<OptionType>(
   { registerChange, onFocus, value }: SearchBoxArgs,
@@ -44,6 +45,7 @@ function defaultSearchBox<OptionType>(
       loading={props.loading}
       required={props.required}
       disabled={props.disabled}
+      testId={props.testId}
     />
   );
 }
@@ -97,9 +99,12 @@ export default class TypeAhead<OptionType> extends React.PureComponent<
       className,
       searchBox = defaultSearchBox,
       dropdownClassName,
-      children
+      children,
+      testId
     } = this.props;
 
+    const testIds = getTestIds(testId, getTypeaheadTestIds);
+
     const { showSuggestions, value } = this.state;
 
     return (
@@ -118,7 +123,10 @@ export default class TypeAhead<OptionType> extends React.PureComponent<
             onFocus: this.onFocus,
             value
           },
-          this.props
+          {
+            ...this.props,
+            testId: testIds.searchBoxId
+          }
         )}
 
         <MountTransition visible={showSuggestions}>
@@ -127,7 +135,10 @@ export default class TypeAhead<OptionType> extends React.PureComponent<
               style={transitionStyles}
               className={cx(optionsWrapper, dropdownClassName)}
             >
-              <OptionGroupRadio onChange={this.onSelect}>
+              <OptionGroupRadio
+                onChange={this.onSelect}
+                testId={testIds.optionGroupId}
+              >
                 {children}
               </OptionGroupRadio>
             </animated.div>

package/src/components/__tests__/__snapshots__/checkboxGroup.test.tsx.snap

@@ -0,0 +1,88 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CheckboxGroup snapshot 1`] = `
+.emotion-0 {
+  margin-right: 10px;
+  font-size: 16px;
+  padding-top: 2px;
+  height: 18px;
+}
+
+.emotion-1 {
+  cursor: pointer;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  outline: none;
+  padding: 10px 0;
+  position: relative;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-weight: 400;
+  color: #101721;
+  font-size: 14px;
+}
+
+.emotion-1[data-disabled='true'] {
+  cursor: not-allowed;
+}
+
+.emotion-1[data-disabled='true'] .i {
+  color: #E0E0E0;
+}
+
+<div
+  aria-label="test"
+  role="checkboxgroup"
+>
+  <div
+    aria-checked={false}
+    className="emotion-1"
+    data-testid="checkbox-group-0"
+    onClick={[Function]}
+    role="checkbox"
+    tabIndex={-1}
+  >
+    <div
+      className="emotion-0"
+    >
+      <i
+        className="pi pi-checkbox-unselected"
+        style={
+          Object {
+            "color": "#E0E0E0",
+          }
+        }
+      />
+    </div>
+     
+    I am a checkbox
+  </div>
+  <div
+    aria-checked={true}
+    className="emotion-1"
+    data-testid="checkbox-group-1"
+    onClick={[Function]}
+    role="checkbox"
+    tabIndex={0}
+  >
+    <div
+      className="emotion-0"
+    >
+      <i
+        className="pi pi-checkbox-selected"
+        style={
+          Object {
+            "color": "#6161FF",
+          }
+        }
+      />
+    </div>
+     
+    I am a checkbox
+  </div>
+</div>
+`;

package/src/components/__tests__/__snapshots__/logo.test.tsx.snap

@@ -10,24 +10,67 @@ exports[`Logo snapshot 1`] = `
     }
   }
   version="1.1"
-  viewBox="0 0 655.35 175.08"
+  viewBox="0 0 896 240"
   xmlSpace="preserve"
-  xmlnsXlink="http://www.w3.org/1999/xlink"
+  xmlns="http://www.w3.org/2000/svg"
 >
   <path
-    className="st0"
-    d="M168.92 65.96l-66.1-64.85v100.61h17.39V40.78l66.11 64.56V4.73h-17.4v61.23zm446.77-18.51L653.4 4.73h-20.6l-41.04 46.48V4.73h-17.4v96.99h17.4V73.34L604 59.84l30.19 41.88h20.33l-38.83-54.27zM422.66 2.92c-27.78 0-50.31 22.53-50.31 50.31s22.52 50.3 50.31 50.3c27.78 0 50.3-22.52 50.3-50.3s-22.52-50.31-50.3-50.31zm0 84.84c-19.05 0-34.54-15.49-34.54-34.53s15.49-34.54 34.54-34.54c19.04 0 34.54 15.49 34.54 34.54 0 19.04-15.5 34.53-34.54 34.53zM0 101.72h18.38L27 82.93h41.75l8.63 18.79h18.51L48.02 0 0 101.72zM33.55 67.9l14.32-31.58L62.21 67.9H33.55zm159.61 33.82h18.37l8.62-18.79h41.75l8.62 18.79h18.51L241.16 0l-48 101.72zm33.53-33.82l14.33-31.58 14.33 31.58h-28.66zm138.43-32.42c0-8.76-3.07-16-9.19-21.84-6.12-5.99-13.5-8.91-22.26-8.91h-37.71v96.99h17.4V67.21h17.25l20.73 34.51h19.62l-23.51-38.68c10.57-4.46 17.67-14.89 17.67-27.56zm-33.25 16.15h-18.51V20.46h19.9c8.34 0 14.6 6.4 14.6 15.31 0 9.32-6.54 15.86-15.99 15.86zm197.61-32.94c9.22 0 17.9 3.59 24.42 10.12l11.15-11.15c-9.82-9.83-22.7-14.74-35.57-14.74-12.87 0-25.75 4.91-35.56 14.74-19.65 19.64-19.65 51.49 0 71.14 9.82 9.82 22.69 14.73 35.56 14.73 12.87 0 25.75-4.91 35.57-14.73L553.9 77.65c-6.52 6.52-15.2 10.11-24.42 10.11-9.23 0-17.89-3.59-24.42-10.11-13.46-13.46-13.46-35.37 0-48.84 6.53-6.52 15.2-10.12 24.42-10.12z"
+    d="M724.793 25.5855C737.421 25.5855 749.287 30.5009 758.217 39.4306L773.482 24.1653C760.041 10.7247 742.412 3.9979 724.793 3.9979C707.167 3.9979 689.548 10.7247 676.104 24.1653C649.213 51.0595 649.213 94.6559 676.104 121.55C689.548 134.997 707.167 141.718 724.793 141.718C742.412 141.718 760.041 134.997 773.482 121.55L758.217 106.282C749.287 115.211 737.421 120.127 724.793 120.127C712.164 120.127 700.292 115.211 691.369 106.282C672.938 87.8567 672.938 57.862 691.369 39.4306C700.292 30.5009 712.164 25.5855 724.793 25.5855ZM454.269 70.6648H428.936V27.9989H456.173C467.598 27.9989 476.175 36.7608 476.175 48.9553C476.175 61.7153 467.223 70.6648 454.269 70.6648ZM499.795 48.574C499.795 36.5735 495.603 26.6639 487.219 18.668C478.842 10.4748 468.748 6.47692 456.741 6.47692H405.123V139.238H428.936V91.9992H452.549L480.936 139.238H507.798L475.6 86.2818C490.076 80.1928 499.795 65.9106 499.795 48.574ZM310.299 92.9528L329.921 49.7214L349.542 92.9528H310.299ZM264.398 139.238H289.54L301.346 113.525H358.495L370.302 139.238H395.634L330.108 -0.000120201L264.398 139.238ZM578.561 120.127C552.499 120.127 531.292 98.9234 531.292 72.8609C531.292 46.7919 552.499 25.5855 578.561 25.5855C604.63 25.5855 625.836 46.7919 625.836 72.8609C625.836 98.9234 604.63 120.127 578.561 120.127ZM578.561 3.9979C540.528 3.9979 509.705 34.8243 509.705 72.8609C509.705 110.888 540.528 141.718 578.561 141.718C616.594 141.718 647.424 110.888 647.424 72.8609C647.424 34.8243 616.594 3.9979 578.561 3.9979ZM842.789 64.9504L894.414 6.47692H866.221L810.029 70.096V6.47692H786.216V139.238H810.029V100.383L826.797 81.909L868.128 139.238H895.933L842.789 64.9504ZM231.211 90.2831L140.73 1.5221V139.238H164.544V55.8104L255.018 144.19V6.47692H231.211"
   />
-  <rect
-    className="st1"
-    height="4.26"
-    id="XMLID_9_"
-    width="654.52"
-    y="123.84"
+  <path
+    d="M0 175.342H895.934V169.516H0V175.342Z"
+  />
+  <path
+    d="M123.257 205.481H131.5L140.374 229.384L149.244 205.481H157.289L143.566 239.661H136.981"
+  />
+  <path
+    d="M185.313 225.215L180.802 214.207L176.295 225.215H185.313ZM177.459 205.241H184.34L198.889 239.418H191.08L187.98 231.807H173.628L170.525 239.418H162.91"
+  />
+  <path
+    d="M210.792 205.481H218.255V232.632H235.178V239.421H210.792"
+  />
+  <path
+    d="M261.157 239.951C256.6 239.951 253.013 238.691 250.396 236.17C247.779 233.648 246.467 229.887 246.467 224.876V205.478H253.933V224.679C253.933 227.46 254.578 229.555 255.873 230.959C257.165 232.363 258.957 233.066 261.252 233.066C263.55 233.066 265.342 232.386 266.634 231.034C267.923 229.67 268.577 227.638 268.577 224.922V205.478H276.041V224.633C276.041 227.217 275.689 229.463 274.998 231.37C274.301 233.28 273.308 234.871 272.016 236.144C270.724 237.422 269.156 238.373 267.311 239.007C265.47 239.635 263.419 239.951 261.157 239.951Z"
+  />
+  <path
+    d="M291.032 205.481H316.581V212.126H298.4V219.011H314.401V225.649H298.4V232.78H316.825V239.421H291.032"
+  />
+  <path
+    d="M342.69 239.905C340.106 239.905 337.567 239.458 335.082 238.57C332.59 237.682 330.328 236.318 328.292 234.477L332.705 229.193C334.253 230.449 335.848 231.455 337.482 232.195C339.109 232.941 340.898 233.309 342.835 233.309C344.386 233.309 345.59 233.03 346.445 232.464C347.303 231.896 347.737 231.113 347.737 230.11V230.015C347.737 229.528 347.641 229.101 347.467 228.729C347.286 228.358 346.948 228.009 346.445 227.687C345.945 227.365 345.251 227.039 344.36 226.717C343.476 226.395 342.322 226.057 340.898 225.698C339.182 225.281 337.633 224.81 336.242 224.294C334.855 223.778 333.671 223.14 332.705 222.377C331.728 221.618 330.982 220.674 330.449 219.537C329.917 218.412 329.647 217.005 329.647 215.325V215.226C329.647 213.678 329.936 212.274 330.518 211.035C331.094 209.785 331.903 208.717 332.945 207.809C333.99 206.905 335.24 206.208 336.69 205.725C338.136 205.245 339.734 204.995 341.48 204.995C343.965 204.995 346.257 205.366 348.338 206.109C350.423 206.859 352.34 207.924 354.079 209.312L350.202 214.94C348.683 213.901 347.201 213.086 345.744 212.488C344.291 211.889 342.834 211.59 341.381 211.59C339.928 211.59 338.837 211.88 338.11 212.438C337.38 213.007 337.018 213.708 337.018 214.549V214.648C337.018 215.197 337.12 215.67 337.334 216.075C337.544 216.482 337.923 216.844 338.472 217.166C339.024 217.488 339.774 217.797 340.727 218.087C341.677 218.379 342.884 218.721 344.34 219.106C346.05 219.556 347.582 220.066 348.92 220.632C350.262 221.2 351.393 221.874 352.313 222.67C353.234 223.462 353.928 224.386 354.398 225.455C354.865 226.523 355.105 227.802 355.105 229.285V229.387C355.105 231.067 354.799 232.553 354.187 233.868C353.576 235.177 352.724 236.275 351.636 237.169C350.541 238.057 349.239 238.731 347.727 239.201C346.208 239.671 344.534 239.905 342.69 239.905Z"
+  />
+  <path
+    d="M406.346 233.119C407.835 233.119 409.206 232.842 410.469 232.29C411.728 231.744 412.8 230.988 413.691 230.012C414.578 229.042 415.272 227.92 415.775 226.642C416.275 225.369 416.528 224.001 416.528 222.545V222.45C416.528 220.993 416.275 219.625 415.775 218.33C415.272 217.038 414.562 215.904 413.641 214.94C412.718 213.967 411.629 213.198 410.37 212.632C409.108 212.07 407.733 211.787 406.247 211.787C404.728 211.787 403.347 212.057 402.104 212.609C400.858 213.162 399.793 213.914 398.905 214.888C398.014 215.858 397.321 216.979 396.821 218.258C396.315 219.533 396.065 220.901 396.065 222.358V222.45C396.065 223.906 396.315 225.28 396.821 226.572C397.321 227.865 398.031 228.996 398.951 229.966C399.872 230.932 400.957 231.702 402.203 232.267C403.446 232.836 404.827 233.119 406.346 233.119ZM406.247 240C403.63 240 401.22 239.54 399.027 238.619C396.828 237.698 394.927 236.452 393.329 234.884C391.728 233.316 390.485 231.475 389.594 229.361C388.707 227.24 388.266 224.975 388.266 222.545V222.45C388.266 220.026 388.713 217.755 389.617 215.641C390.522 213.52 391.778 211.659 393.379 210.061C394.98 208.46 396.883 207.204 399.096 206.28C401.309 205.36 403.729 204.903 406.346 204.903C408.963 204.903 411.373 205.36 413.569 206.28C415.769 207.204 417.666 208.447 419.267 210.015C420.865 211.583 422.107 213.421 422.998 215.539C423.886 217.659 424.333 219.931 424.333 222.358V222.45C424.333 224.876 423.88 227.141 422.972 229.262C422.068 231.379 420.819 233.24 419.217 234.838C417.62 236.436 415.709 237.698 413.497 238.619C411.281 239.54 408.867 240 406.247 240Z"
+  />
+  <path
+    d="M433.024 205.481H441.263L450.137 229.384L459.011 205.481H467.056L453.333 239.661H446.744"
+  />
+  <path
+    d="M478.931 205.481H504.484V212.126H486.299V219.011H502.298V225.649H486.299V232.78H504.721V239.421H478.931"
+  />
+  <path
+    d="M533.882 221.966C535.724 221.966 537.137 221.536 538.127 220.665C539.11 219.797 539.603 218.633 539.603 217.189V217.094C539.603 215.486 539.087 214.283 538.051 213.477C537.016 212.675 535.579 212.271 533.738 212.271H526.32V221.966H533.882ZM518.851 205.481H534.366C538.666 205.481 541.964 206.632 544.255 208.924C546.192 210.867 547.169 213.454 547.169 216.683V216.778C547.169 219.527 546.494 221.769 545.153 223.489C543.812 225.225 542.059 226.494 539.893 227.299L548.181 239.421H539.462L532.186 228.555H526.32V239.421H518.851"
+  />
+  <path
+    d="M579.113 205.481H587.356L596.226 229.384L605.103 205.481H613.149L599.425 239.661H592.833"
+  />
+  <path
+    d="M641.169 225.215L636.661 214.207L632.154 225.215H641.169ZM633.314 205.241H640.199L654.744 239.418H646.939L643.835 231.807H629.487L626.384 239.418H618.769"
+  />
+  <path
+    d="M666.645 205.481H674.111V232.632H691.033V239.421H666.645"
+  />
+  <path
+    d="M717.016 239.951C712.459 239.951 708.872 238.691 706.248 236.17C703.634 233.648 702.326 229.887 702.326 224.876V205.478H709.789V224.679C709.789 227.46 710.437 229.555 711.732 230.959C713.018 232.363 714.819 233.066 717.111 233.066C719.406 233.066 721.201 232.386 722.493 231.034C723.782 229.67 724.433 227.638 724.433 224.922V205.478H731.893V224.633C731.893 227.217 731.548 229.463 730.854 231.37C730.16 233.28 729.167 234.871 727.872 236.144C726.58 237.422 725.012 238.373 723.17 239.007C721.329 239.635 719.278 239.951 717.016 239.951Z"
+  />
+  <path
+    d="M746.888 205.481H772.437V212.126H754.256V219.011H770.254V225.649H754.256V232.78H772.681V239.421H746.888"
+  />
+  <path
+    d="M46.0351 92.9268L65.7915 49.7053L85.5545 92.9268H46.0351ZM0.0288086 139.239H25.3449L37.0824 113.614H94.1982L105.926 139.239H131.242L65.7915 0.000163794"
   />
   <path
-    className="st0"
-    d="M90.05 150.11h6.02l6.48 17.46 6.48-17.46h5.88l-10.02 24.97h-4.81l-10.03-24.97zm39.59-.17h5.03l10.63 24.97h-5.7l-2.28-5.56h-10.47l-2.27 5.56h-5.56l10.62-24.97zm5.75 14.59l-3.3-8.04-3.29 8.04h6.59zM154 150.11h5.46v19.83h12.36v4.96H154v-24.79zm36.79 25.18c-3.33 0-5.95-.92-7.86-2.76-1.91-1.83-2.87-4.59-2.87-8.25v-14.16h5.46v14.02c0 2.03.46 3.56 1.41 4.58.94 1.03 2.26 1.54 3.93 1.54 1.68 0 2.98-.49 3.93-1.49.95-.99 1.42-2.48 1.42-4.46v-14.2h5.46v13.99c0 1.88-.26 3.53-.77 4.92-.51 1.39-1.23 2.55-2.17 3.49-.95.93-2.08 1.63-3.44 2.08-1.35.47-2.85.7-4.5.7zm21.83-25.18h18.66v4.85H218v5.03h11.7v4.85H218v5.2h13.46v4.86h-18.84v-24.79zm37.74 25.15c-1.89 0-3.75-.33-5.57-.98-1.82-.65-3.47-1.64-4.94-2.99l3.21-3.86c1.14.92 2.3 1.65 3.49 2.19 1.2.54 2.51.82 3.91.82 1.13 0 2.01-.21 2.64-.62.63-.41.94-.99.94-1.72v-.07c0-.36-.07-.67-.19-.94-.14-.27-.39-.53-.75-.77-.36-.23-.87-.47-1.52-.71s-1.49-.48-2.53-.74c-1.26-.31-2.38-.64-3.4-1.03-1.01-.38-1.88-.84-2.59-1.4a5.85 5.85 0 0 1-1.65-2.07c-.38-.82-.58-1.86-.58-3.08v-.07c0-1.13.21-2.16.63-3.07.42-.91 1.01-1.7 1.78-2.35.76-.66 1.67-1.17 2.73-1.52 1.06-.35 2.23-.54 3.5-.54 1.83 0 3.5.28 5.02.82 1.52.54 2.92 1.32 4.19 2.34l-2.83 4.11c-1.1-.76-2.2-1.35-3.26-1.79-1.06-.44-2.12-.66-3.19-.66-1.06 0-1.85.21-2.38.62-.53.41-.8.93-.8 1.54v.07c0 .4.08.75.23 1.04.15.29.43.56.84.79.39.24.94.46 1.64.67.7.21 1.57.47 2.63.75 1.26.33 2.37.7 3.35 1.11.98.41 1.81.91 2.48 1.49.68.58 1.18 1.25 1.52 2.04.34.78.52 1.71.52 2.8v.07c0 1.22-.23 2.32-.67 3.27a6.71 6.71 0 0 1-1.86 2.41c-.81.65-1.76 1.14-2.87 1.48-1.11.37-2.33.55-3.67.55zm46.42.07c-1.92 0-3.68-.34-5.28-1.01-1.61-.67-3-1.58-4.16-2.72-1.17-1.15-2.08-2.5-2.73-4.04-.65-1.55-.98-3.2-.98-4.98v-.07c0-1.77.32-3.42.99-4.97a12.64 12.64 0 0 1 2.74-4.07c1.16-1.17 2.57-2.09 4.18-2.77 1.62-.67 3.39-1.01 5.3-1.01 1.91 0 3.67.34 5.28 1.01 1.61.68 2.99 1.59 4.16 2.73 1.16 1.14 2.07 2.49 2.73 4.04.64 1.54.97 3.21.97 4.98v.07c0 1.77-.33 3.43-.99 4.98-.67 1.55-1.57 2.9-2.74 4.07-1.17 1.17-2.56 2.08-4.18 2.76-1.61.66-3.37 1-5.29 1zm.08-5.03c1.08 0 2.09-.2 3.01-.6.92-.4 1.71-.95 2.35-1.66.65-.71 1.16-1.53 1.53-2.47.36-.93.54-1.93.54-2.99v-.07c0-1.06-.18-2.06-.54-3.01-.36-.94-.89-1.77-1.56-2.47a7.49 7.49 0 0 0-2.39-1.68c-.91-.41-1.93-.62-3.01-.62-1.11 0-2.12.21-3.03.6-.91.4-1.69.96-2.34 1.66a7.76 7.76 0 0 0-1.52 2.46c-.37.94-.55 1.94-.55 3v.07c0 1.06.18 2.07.55 3.02.36.94.88 1.76 1.55 2.47.67.71 1.47 1.27 2.38 1.68.91.4 1.91.61 3.03.61zm19.48-20.19h6.02l6.48 17.46 6.48-17.46h5.88l-10.02 24.97h-4.81l-10.03-24.97zm33.54 0h18.66v4.85h-13.28v5.03h11.68v4.85h-11.68v5.2h13.46v4.86h-18.84v-24.79zm29.16 0h11.34c3.13 0 5.54.83 7.22 2.51 1.42 1.42 2.12 3.31 2.12 5.67v.07c0 2.01-.49 3.65-1.47 4.91-.98 1.26-2.26 2.19-3.84 2.77l6.05 8.86h-6.37l-5.31-7.94h-4.3v7.94h-5.45v-24.79zm10.98 12.04c1.35 0 2.39-.32 3.1-.95.72-.64 1.08-1.48 1.08-2.54v-.07c0-1.17-.37-2.06-1.13-2.64-.75-.59-1.8-.88-3.15-.88h-5.42v7.08h5.52zm33.05-12.04h6.02l6.48 17.46 6.48-17.46h5.87l-10.02 24.97h-4.81l-10.02-24.97zm39.59-.17h5.02l10.63 24.97h-5.7l-2.26-5.56h-10.48l-2.27 5.56h-5.56l10.62-24.97zm5.73 14.59l-3.29-8.04-3.29 8.04h6.58zm18.62-14.42h5.46v19.83h12.36v4.96h-17.82v-24.79zm36.8 25.18c-3.34 0-5.95-.92-7.87-2.76-1.91-1.83-2.87-4.59-2.87-8.25v-14.16h5.46v14.02c0 2.03.47 3.56 1.42 4.58.95 1.03 2.26 1.54 3.93 1.54 1.67 0 2.99-.49 3.94-1.49.94-.99 1.41-2.48 1.41-4.46v-14.2h5.46v13.99c0 1.88-.26 3.53-.76 4.92-.51 1.39-1.24 2.55-2.18 3.49-.95.93-2.09 1.63-3.44 2.08-1.36.47-2.85.7-4.5.7zm21.82-25.18h18.67v4.85h-13.28v5.03h11.69v4.85h-11.69v5.2h13.46v4.86h-18.85v-24.79z"
+    d="M77.562 25.0368L65.7916 0.000163794L0.0322266 139.239H25.3549L77.562 25.0368Z"
+    fill="#A84D98"
   />
 </svg>
 `;

package/src/components/__tests__/__snapshots__/optionGroup.test.tsx.snap

@@ -81,7 +81,6 @@ exports[`Component: OptionGroup default snapshot 1`] = `
 
 <div
   className="emotion-24"
-  data-test-id="optiongroup"
   role="radiogroup"
   style={
     Object {
@@ -715,7 +714,6 @@ Array [
 <div
     aria-label="Search"
     className="emotion-36"
-    data-test-id="optiongroup"
     role="group"
     style={
       Object {
@@ -1380,7 +1378,6 @@ Array [
 <div
     aria-label="Search"
     className="emotion-24"
-    data-test-id="optiongroup"
     role="radiogroup"
     style={
       Object {

package/src/components/__tests__/__snapshots__/select.test.tsx.snap

@@ -172,6 +172,7 @@ exports[`Component: Select multi-select: snapshot 1`] = `
     >
       <div
         className="emotion-6"
+        data-testid="test-multi-select-input"
         onClick={[Function]}
       >
         <div
@@ -386,6 +387,7 @@ exports[`Component: Select single-select with searchbox: snapshot 1`] = `
     >
       <div
         className="emotion-6"
+        data-testid="test-single-select-input"
         onClick={[Function]}
       >
         <div
@@ -600,6 +602,7 @@ exports[`Component: Select single-select: snapshot 1`] = `
     >
       <div
         className="emotion-6"
+        data-testid="test-single-select-input"
         onClick={[Function]}
       >
         <div

package/src/components/__tests__/__snapshots__/timepicker.test.tsx.snap

@@ -70,7 +70,7 @@ exports[`TimePicker { selectedHour: 1, selectedMinute: 0 } 1`] = `
     >
       <div
         className="emotion-2"
-        data-test-id="hour-label"
+        data-testid="hour-label"
         onClick={[Function]}
       >
         <span
@@ -109,7 +109,7 @@ exports[`TimePicker { selectedHour: 1, selectedMinute: 0 } 1`] = `
     >
       <div
         className="emotion-2"
-        data-test-id="minute-label"
+        data-testid="minute-label"
         onClick={[Function]}
       >
         <span
@@ -201,7 +201,7 @@ exports[`TimePicker { selectedHour: 1, selectedMinute: 15 } 1`] = `
     >
       <div
         className="emotion-2"
-        data-test-id="hour-label"
+        data-testid="hour-label"
         onClick={[Function]}
       >
         <span
@@ -240,7 +240,7 @@ exports[`TimePicker { selectedHour: 1, selectedMinute: 15 } 1`] = `
     >
       <div
         className="emotion-2"
-        data-test-id="minute-label"
+        data-testid="minute-label"
         onClick={[Function]}
       >
         <span
@@ -332,7 +332,7 @@ exports[`TimePicker { selectedHour: 1, selectedMinute: undefined } 1`] = `
     >
       <div
         className="emotion-2"
-        data-test-id="hour-label"
+        data-testid="hour-label"
         onClick={[Function]}
       >
         <span
@@ -371,7 +371,7 @@ exports[`TimePicker { selectedHour: 1, selectedMinute: undefined } 1`] = `
     >
       <div
         className="emotion-2"
-        data-test-id="minute-label"
+        data-testid="minute-label"
         onClick={[Function]}
       >
         <span
@@ -463,7 +463,7 @@ exports[`TimePicker { selectedHour: 12, selectedMinute: 0 } 1`] = `
     >
       <div
         className="emotion-2"
-        data-test-id="hour-label"
+        data-testid="hour-label"
         onClick={[Function]}
       >
         <span
@@ -502,7 +502,7 @@ exports[`TimePicker { selectedHour: 12, selectedMinute: 0 } 1`] = `
     >
       <div
         className="emotion-2"
-        data-test-id="minute-label"
+        data-testid="minute-label"
         onClick={[Function]}
       >
         <span
@@ -594,7 +594,7 @@ exports[`TimePicker { selectedHour: 12, selectedMinute: 15 } 1`] = `
     >
       <div
         className="emotion-2"
-        data-test-id="hour-label"
+        data-testid="hour-label"
         onClick={[Function]}
       >
         <span
@@ -633,7 +633,7 @@ exports[`TimePicker { selectedHour: 12, selectedMinute: 15 } 1`] = `
     >
       <div
         className="emotion-2"
-        data-test-id="minute-label"
+        data-testid="minute-label"
         onClick={[Function]}
       >
         <span
@@ -725,7 +725,7 @@ exports[`TimePicker { selectedHour: 12, selectedMinute: undefined } 1`] = `
     >
       <div
         className="emotion-2"
-        data-test-id="hour-label"
+        data-testid="hour-label"
         onClick={[Function]}
       >
         <span
@@ -764,7 +764,7 @@ exports[`TimePicker { selectedHour: 12, selectedMinute: undefined } 1`] = `
     >
       <div
         className="emotion-2"
-        data-test-id="minute-label"
+        data-testid="minute-label"
         onClick={[Function]}
       >
         <span
@@ -856,7 +856,7 @@ exports[`TimePicker { selectedHour: undefined, selectedMinute: 0 } 1`] = `
     >
       <div
         className="emotion-2"
-        data-test-id="hour-label"
+        data-testid="hour-label"
         onClick={[Function]}
       >
         <span
@@ -895,7 +895,7 @@ exports[`TimePicker { selectedHour: undefined, selectedMinute: 0 } 1`] = `
     >
       <div
         className="emotion-2"
-        data-test-id="minute-label"
+        data-testid="minute-label"
         onClick={[Function]}
       >
         <span
@@ -987,7 +987,7 @@ exports[`TimePicker { selectedHour: undefined, selectedMinute: 15 } 1`] = `
     >
       <div
         className="emotion-2"
-        data-test-id="hour-label"
+        data-testid="hour-label"
         onClick={[Function]}
       >
         <span
@@ -1026,7 +1026,7 @@ exports[`TimePicker { selectedHour: undefined, selectedMinute: 15 } 1`] = `
     >
       <div
         className="emotion-2"
-        data-test-id="minute-label"
+        data-testid="minute-label"
         onClick={[Function]}
       >
         <span
@@ -1117,7 +1117,7 @@ exports[`TimePicker { selectedHour: undefined, selectedMinute: undefined } 1`] =
     >
       <div
         className="emotion-2"
-        data-test-id="hour-label"
+        data-testid="hour-label"
         onClick={[Function]}
       >
         <span
@@ -1156,7 +1156,7 @@ exports[`TimePicker { selectedHour: undefined, selectedMinute: undefined } 1`] =
     >
       <div
         className="emotion-2"
-        data-test-id="minute-label"
+        data-testid="minute-label"
         onClick={[Function]}
       >
         <span