@spaced-out/ui-design-system 0.5.10 → 0.5.12-beta.0

package/lib/components/CollapsibleCard/CollapsibleCard.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.CollapsibleCardContent = exports.CollapsibleCardAction = exports.CollapsibleCard = exports.COLLAPSIBLE_CARD_SEMANTIC = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _Button = require("../Button");
 var _Icon = require("../Icon");
 var _Truncate = require("../Truncate");
@@ -23,10 +24,15 @@ const COLLAPSIBLE_CARD_SEMANTIC = exports.COLLAPSIBLE_CARD_SEMANTIC = Object.fre
 const CollapsibleCardAction = _ref => {
   let {
     children,
-    className
+    className,
+    testId
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: (0, _classify.default)(_CollapsibleCardModule.default.actionContainer, className),
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'wrapper'
+    }),
     children: children
   });
 };
@@ -34,10 +40,15 @@ exports.CollapsibleCardAction = CollapsibleCardAction;
 const CollapsibleCardContent = _ref2 => {
   let {
     children,
-    className
+    className,
+    testId
   } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: (0, _classify.default)(_CollapsibleCardModule.default.contentContainer, className),
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'wrapper'
+    }),
     children: children
   });
 };
@@ -52,14 +63,18 @@ const CollapsibleCard = exports.CollapsibleCard = /*#__PURE__*/React.forwardRef(
     children,
     semantic = 'neutral',
     headerIconName,
-    headerIconType = 'solid'
+    headerIconType = 'solid',
+    testId
   } = _ref3;
   const [collapsibleCardIsOpen, setCollapsibleCardIsOpen] = React.useState(Boolean(isOpen));
   React.useEffect(() => {
     setCollapsibleCardIsOpen(Boolean(isOpen));
   }, [isOpen]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    "data-testid": "CollapsibleCard",
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'wrapper'
+    }),
     className: (0, _classify.default)(_CollapsibleCardModule.default.wrapper, classNames?.wrapper),
     ref: ref,
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.UnstyledButton, {
@@ -70,6 +85,10 @@ const CollapsibleCard = exports.CollapsibleCard = /*#__PURE__*/React.forwardRef(
         onChange?.(e, !collapsibleCardIsOpen, id);
         setCollapsibleCardIsOpen(!collapsibleCardIsOpen);
       },
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'header-button'
+      }),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: _CollapsibleCardModule.default.headerContent,
         children: [!!headerIconName && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -78,22 +97,42 @@ const CollapsibleCard = exports.CollapsibleCard = /*#__PURE__*/React.forwardRef(
             name: headerIconName,
             type: headerIconType,
             size: "small",
-            className: _CollapsibleCardModule.default[semantic]
+            className: _CollapsibleCardModule.default[semantic],
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'header-icon'
+            })
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Truncate.Truncate, {
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'title'
+          }),
           children: title
         })]
       }), collapsibleCardIsOpen ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
         name: "chevron-up",
         color: "secondary",
-        size: "small"
+        size: "small",
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'chevron-up'
+        })
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
         name: "chevron-down",
         color: "secondary",
-        size: "small"
+        size: "small",
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'chevron-down'
+        })
       })]
     }), collapsibleCardIsOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classify.default)(_CollapsibleCardModule.default.content, classNames?.content),
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'content'
+      }),
       children: children
     })]
   });

package/lib/components/Combobox/Combobox.d.ts

@@ -72,6 +72,7 @@ export interface ComboboxProps {
     dropdownName?: string;
     dropdownPlaceholder?: string;
     dropdownBoxRef?: React.Ref<HTMLDivElement>;
+    testId?: string;
 }
 export declare const Combobox: Flow.AbstractComponent<ComboboxProps, HTMLDivElement>;
 export {};

package/lib/components/Combobox/Combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/Combobox.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../../src/components/Combobox/Combobox.tsx"],"names":[],"mappings":"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"}

package/lib/components/Combobox/Combobox.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Combobox = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _Dropdown = require("../Dropdown");
 var _Input = require("../Input");
 var _Text = require("../Text");
@@ -57,7 +58,8 @@ const Combobox = exports.Combobox = /*#__PURE__*/React.forwardRef((props, ref) =
     onDropdownContainerClick,
     dropdownName,
     dropdownPlaceholder,
-    dropdownBoxRef
+    dropdownBoxRef,
+    testId
   } = props;
   const inputRef = React.useRef(null);
   const dropdownRef = React.useRef(null);
@@ -104,15 +106,31 @@ const Combobox = exports.Combobox = /*#__PURE__*/React.forwardRef((props, ref) =
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     ref: ref,
     className: (0, _classify.default)(_ComboboxModule.default.wrapper, classNames?.wrapper),
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'root'
+    }),
     children: [Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: _ComboboxModule.default.info,
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'label'
+      }),
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: _ComboboxModule.default.infoContent,
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.FormLabelSmall, {
           color: "secondary",
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'label-text'
+          }),
           children: label ?? ''
         }), "\xA0", required && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.FormLabelSmall, {
           color: "danger",
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'required'
+          }),
           children: "*"
         })]
       })
@@ -122,6 +140,10 @@ const Combobox = exports.Combobox = /*#__PURE__*/React.forwardRef((props, ref) =
       }, classNames?.box),
       onClick: !(disabled || locked) ? onContainerClick : undefined,
       ref: boxRef,
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'box'
+      }),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.Dropdown, {
         ref: dropdownRef,
         menu: menu,
@@ -147,7 +169,11 @@ const Combobox = exports.Combobox = /*#__PURE__*/React.forwardRef((props, ref) =
         onBlur: onDropdownBlur,
         onKeyDown: onDropdownKeyDown,
         onContainerClick: onDropdownContainerClick,
-        name: dropdownName
+        name: dropdownName,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'dropdown'
+        })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.Input, {
         ref: inputRef,
         boxRef: inputBoxRef,
@@ -182,15 +208,31 @@ const Combobox = exports.Combobox = /*#__PURE__*/React.forwardRef((props, ref) =
         maxLength: maxLength,
         pattern: pattern,
         min: min,
-        max: max
+        max: max,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'input'
+        })
       })]
     }), (Boolean(helperText) || error) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: _ComboboxModule.default.info,
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'helper'
+      }),
       children: error && errorText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
         color: "danger",
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'error'
+        }),
         children: errorText
       }) : typeof helperText === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
         color: disabled ? 'disabled' : 'secondary',
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'helper-text'
+        }),
         children: helperText
       }) : helperText
     })]

package/lib/components/DateRangePicker/Calendar.d.ts

@@ -16,7 +16,8 @@ interface CalendarProps {
     };
     today: string;
     t: ((key: string, fallback: string) => string) | null | undefined;
+    testId?: string;
 }
-export declare const Calendar: ({ value, minDate, maxDate, handlers, hoverDay, dateRange, inHoverRange, today, t, }: CalendarProps) => React.JSX.Element;
+export declare const Calendar: ({ value, minDate, maxDate, handlers, hoverDay, dateRange, inHoverRange, today, t, testId, }: CalendarProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=Calendar.d.ts.map

package/lib/components/DateRangePicker/Calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,WAAW,CAAC;AACzC,OAAO,KAAK,EAAC,OAAO,EAAE,iBAAiB,EAAC,MAAM,WAAW,CAAC;AAuB1D,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;IACrB,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,QAAQ,EAAE;QACR,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,eAAe,EAAE,CACf,MAAM,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,EAC9C,MAAM,EAAE,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,OAAO,iBAAiB,CAAC,KAC/D,IAAI,CAAC;KACX,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;CACnE;AAED,eAAO,MAAM,QAAQ,GAAI,qFAUtB,aAAa,sBAgDf,CAAC"}
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,WAAW,CAAC;AACzC,OAAO,KAAK,EAAC,OAAO,EAAE,iBAAiB,EAAC,MAAM,WAAW,CAAC;AAwB1D,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;IACrB,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,QAAQ,EAAE;QACR,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,eAAe,EAAE,CACf,MAAM,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,EAC9C,MAAM,EAAE,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,OAAO,iBAAiB,CAAC,KAC/D,IAAI,CAAC;KACX,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IAClE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,QAAQ,GAAI,6FAWtB,aAAa,sBA4Df,CAAC"}

package/lib/components/DateRangePicker/Calendar.js

@@ -8,6 +8,7 @@ var React = _interopRequireWildcard(require("react"));
 var _moment = _interopRequireDefault(require("moment"));
 var _utils = require("../../utils");
 var _dateRangePicker = require("../../utils/date-range-picker");
+var _qa = require("../../utils/qa");
 var _Day = require("./Day");
 var _Text = require("../Text");
 var _CalendarModule = _interopRequireDefault(require("./Calendar.module.css"));
@@ -24,19 +25,36 @@ const Calendar = _ref => {
     dateRange,
     inHoverRange,
     today,
-    t
+    t,
+    testId
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: _CalendarModule.default.calendar,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: `calendar-${value}`
+    }),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: _CalendarModule.default.calendarRow,
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'weekdays'
+      }),
       children: _utils.WEEKDAYS.map(day => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
         className: _CalendarModule.default.calendarRowItem,
         color: _Text.TEXT_COLORS.tertiary,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: `weekday-${day}`
+        }),
         children: (0, _dateRangePicker.getTranslation)(t, day)
       }, day))
     }), (0, _utils.getDaysInMonth)(value).map((week, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: _CalendarModule.default.calendarRow,
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: `week-${index}`
+      }),
       children: week.map(date => {
         const isRangeValid = (0, _utils.isStartDateEndDateSame)(dateRange);
         const isStart = (0, _utils.isStartOfRange)(dateRange, date);
@@ -58,7 +76,11 @@ const Calendar = _ref => {
           highlighted: highlighted && !isRangeValid,
           startOfRange: isStart && !isRangeValid,
           value: dateValue.date().toString(),
-          hoverDay: hoverDay
+          hoverDay: hoverDay,
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: `day-${date}`
+          })
         }, date);
       })
     }, week[index]))]

package/lib/components/DateRangePicker/DateRangePicker.d.ts

@@ -16,6 +16,7 @@ export interface DateRangePickerProps {
     endDateLabel?: string;
     t?: ((key: string, fallback: string) => string) | null | undefined;
     locale?: string;
+    testId?: string;
 }
 export declare const DateRangePicker: Flow.AbstractComponent<DateRangePickerProps, HTMLDivElement>;
 export {};

package/lib/components/DateRangePicker/DateRangePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/DateRangePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAIrD,OAAO,KAAK,EAEV,oBAAoB,EACpB,qBAAqB,EACtB,MAAM,WAAW,CAAC;AAyBnB,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,oBAAoB;IACnC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,iBAAiB,CAAC,EAAE,qBAAqB,CAAC;IAC1C,OAAO,EAAE,CAAC,uBAAuB,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClE,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC/C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,eAAe,EAAE,IAAI,CAAC,iBAAiB,CAClD,oBAAoB,EACpB,cAAc,CA8Jf,CAAC"}
+{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/DateRangePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAIrD,OAAO,KAAK,EAEV,oBAAoB,EACpB,qBAAqB,EACtB,MAAM,WAAW,CAAC;AAyBnB,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,oBAAoB;IACnC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,iBAAiB,CAAC,EAAE,qBAAqB,CAAC;IAC1C,OAAO,EAAE,CAAC,uBAAuB,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClE,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC/C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,eAAe,EAAE,IAAI,CAAC,iBAAiB,CAClD,oBAAoB,EACpB,cAAc,CAgKf,CAAC"}

package/lib/components/DateRangePicker/DateRangePicker.js

@@ -28,7 +28,8 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/React.forwardRef(
     startDateLabel,
     endDateLabel,
     t,
-    locale
+    locale,
+    testId
   } = _ref;
   const localTimezone = _momentTimezone.default.tz.guess();
   const {
@@ -137,6 +138,7 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/React.forwardRef(
     startDateLabel: startDateLabel,
     endDateLabel: endDateLabel,
     t: t,
-    locale: locale
+    locale: locale,
+    testId: testId
   });
 });

package/lib/components/DateRangePicker/DateRangeWrapper.d.ts

@@ -27,6 +27,7 @@ interface DateRangeWrapperProps {
     endDateLabel?: string;
     t?: ((key: string, fallback: string) => string) | null | undefined;
     locale?: string;
+    testId?: string;
 }
 export declare const DateRangeWrapper: Flow.AbstractComponent<DateRangeWrapperProps, HTMLDivElement>;
 export {};

package/lib/components/DateRangePicker/DateRangeWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/DateRangeWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAGrD,OAAO,KAAK,EAAC,SAAS,EAAE,qBAAqB,EAAC,MAAM,WAAW,CAAC;AAChE,OAAO,EAML,OAAO,EACP,iBAAiB,EAClB,MAAM,WAAW,CAAC;AA8CnB,UAAU,qBAAqB;IAC7B,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC5C,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,CAAC,uBAAuB,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE;QACR,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,eAAe,EAAE,CACf,MAAM,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,EAC9C,MAAM,EAAE,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,OAAO,iBAAiB,CAAC,KAC/D,IAAI,CAAC;KACX,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAyFD,eAAO,MAAM,gBAAgB,EAAE,IAAI,CAAC,iBAAiB,CACnD,qBAAqB,EACrB,cAAc,CA8Mf,CAAC"}
+{"version":3,"file":"DateRangeWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/DateRangeWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAGrD,OAAO,KAAK,EAAC,SAAS,EAAE,qBAAqB,EAAC,MAAM,WAAW,CAAC;AAChE,OAAO,EAML,OAAO,EACP,iBAAiB,EAClB,MAAM,WAAW,CAAC;AAgDnB,UAAU,qBAAqB;IAC7B,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC5C,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,CAAC,uBAAuB,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE;QACR,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,eAAe,EAAE,CACf,MAAM,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,EAC9C,MAAM,EAAE,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,OAAO,iBAAiB,CAAC,KAC/D,IAAI,CAAC;KACX,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAoGD,eAAO,MAAM,gBAAgB,EAAE,IAAI,CAAC,iBAAiB,CACnD,qBAAqB,EACrB,cAAc,CA4Pf,CAAC"}

package/lib/components/DateRangePicker/DateRangeWrapper.js

@@ -9,6 +9,7 @@ var _moment = _interopRequireDefault(require("moment"));
 var _utils = require("../../utils");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _dateRangePicker = require("../../utils/date-range-picker");
+var _qa = require("../../utils/qa");
 var _Button = require("../Button");
 var _Card = require("../Card");
 var _Calendar = require("./Calendar");
@@ -33,7 +34,8 @@ const CalendarHeader = _ref => {
     onClickNext,
     nextDisabled,
     prevDisabled,
-    onClickPrevious
+    onClickPrevious,
+    testId
   } = _ref;
   const availableYears = (0, _utils.generateAvailableYears)({
     marker,
@@ -53,6 +55,10 @@ const CalendarHeader = _ref => {
   const MONTHS = (0, _utils.getMonths)(t);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: _DateRangeWrapperModule.default.calendarHeader,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: `header-${marker}`
+    }),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.ClickableIcon, {
       ariaLabel: (0, _dateRangePicker.getTranslation)(t, 'Select Previous Month'),
       size: "small",
@@ -61,7 +67,11 @@ const CalendarHeader = _ref => {
         [_DateRangeWrapperModule.default.disabledIcon]: prevDisabled
       }),
       onClick: () => !prevDisabled && onClickPrevious(),
-      color: prevDisabled ? 'disabled' : 'secondary'
+      color: prevDisabled ? 'disabled' : 'secondary',
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: `prev-button-${marker}`
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.Dropdown, {
       size: "small",
       disabled: !availableMonths.length || (0, _dateRangePicker.isAfter)(minDate, maxDate),
@@ -73,7 +83,11 @@ const CalendarHeader = _ref => {
         setMonth((0, _utils.getMonthEndDate)(_moment.default.utc(date).set('M', Number(event.key))));
       },
       dropdownInputText: MONTHS[_moment.default.utc(date).month()].label,
-      scrollMenuToBottom: true
+      scrollMenuToBottom: true,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: `month-dropdown-${marker}`
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.Dropdown, {
       disabled: !availableYears.length || (0, _dateRangePicker.isAfter)(minDate, maxDate),
       menu: {
@@ -85,7 +99,11 @@ const CalendarHeader = _ref => {
         setMonth((0, _utils.getMonthEndDate)(_moment.default.utc(date).set('y', Number(event.key))));
       },
       dropdownInputText: _moment.default.utc(date).year().toString(),
-      scrollMenuToBottom: true
+      scrollMenuToBottom: true,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: `year-dropdown-${marker}`
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.ClickableIcon, {
       size: "small",
       ariaLabel: (0, _dateRangePicker.getTranslation)(t, 'Select Next Month'),
@@ -94,7 +112,11 @@ const CalendarHeader = _ref => {
         [_DateRangeWrapperModule.default.disabledIcon]: nextDisabled
       }),
       onClick: () => !nextDisabled && onClickNext(),
-      color: nextDisabled ? 'disabled' : 'secondary'
+      color: nextDisabled ? 'disabled' : 'secondary',
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: `next-button-${marker}`
+      })
     })]
   });
 };
@@ -120,7 +142,8 @@ const DateRangeWrapper = exports.DateRangeWrapper = /*#__PURE__*/React.forwardRe
     startDateLabel,
     endDateLabel,
     t,
-    locale
+    locale,
+    testId
   } = _ref2;
   const canNavigateCloser = _moment.default.utc(rangeStartMonth).year() !== _moment.default.utc(rangeEndMonth).year() || Math.abs(_moment.default.utc(rangeStartMonth).month() - _moment.default.utc(rangeEndMonth).month()) > 1;
   const handleApplyClick = () => {
@@ -149,7 +172,8 @@ const DateRangeWrapper = exports.DateRangeWrapper = /*#__PURE__*/React.forwardRe
     minDate,
     maxDate,
     today,
-    t
+    t,
+    testId
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusManager.FocusManager, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.Card, {
@@ -157,24 +181,48 @@ const DateRangeWrapper = exports.DateRangeWrapper = /*#__PURE__*/React.forwardRe
         wrapper: (0, _classify.default)(_DateRangeWrapperModule.default.dateRangeWrapper, cardWrapperClass)
       },
       ref: ref,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'card'
+      }),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.CardHeader, {
         className: _DateRangeWrapperModule.default.cardHeader,
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'header'
+        }),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
           className: _DateRangeWrapperModule.default.selectedDate,
           color: _Text.TEXT_COLORS.secondary,
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'start-date-label'
+          }),
           children: `${startDateLabel || (0, _dateRangePicker.getTranslation)(t, 'Start Date')}: ${(0, _dateRangePicker.getFormattedDate)(_utils.MARKERS.DATE_RANGE_START, dateRange, locale)}`
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
           name: "minus",
           size: _Icon.ICON_SIZE.small,
           type: _Icon.ICON_TYPE.regular,
-          color: _Text.TEXT_COLORS.secondary
+          color: _Text.TEXT_COLORS.secondary,
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'separator-icon'
+          })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
           className: _DateRangeWrapperModule.default.selectedDate,
           color: _Text.TEXT_COLORS.secondary,
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'end-date-label'
+          }),
           children: `${endDateLabel || (0, _dateRangePicker.getTranslation)(t, 'End Date')}: ${(0, _dateRangePicker.getFormattedDate)(_utils.MARKERS.DATE_RANGE_END, dateRange, locale)}`
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: _DateRangeWrapperModule.default.calendarMenuContainer,
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'calendar-menu-container'
+        }),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CalendarHeader, {
           t: t,
           marker: _utils.MARKERS.DATE_RANGE_START,
@@ -187,7 +235,8 @@ const DateRangeWrapper = exports.DateRangeWrapper = /*#__PURE__*/React.forwardRe
           minDate: minDate,
           maxDate: maxDate,
           onClickNext: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_START, _utils.NAVIGATION_ACTION.NEXT),
-          onClickPrevious: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_START, _utils.NAVIGATION_ACTION.PREV)
+          onClickPrevious: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_START, _utils.NAVIGATION_ACTION.PREV),
+          testId: testId
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CalendarHeader, {
           t: t,
           marker: _utils.MARKERS.DATE_RANGE_END,
@@ -200,25 +249,50 @@ const DateRangeWrapper = exports.DateRangeWrapper = /*#__PURE__*/React.forwardRe
           minDate: minDate,
           maxDate: maxDate,
           onClickNext: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_END, _utils.NAVIGATION_ACTION.NEXT),
-          onClickPrevious: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_END, _utils.NAVIGATION_ACTION.PREV)
+          onClickPrevious: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_END, _utils.NAVIGATION_ACTION.PREV),
+          testId: testId
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.CardContent, {
         className: _DateRangeWrapperModule.default.dateRangeCalendars,
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'calendars'
+        }),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Calendar.Calendar, {
           marker: _utils.MARKERS.DATE_RANGE_START,
           value: rangeStartMonth,
-          ...commonProps
+          ...commonProps,
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'start-calendar'
+          })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: _DateRangeWrapperModule.default.divider
+          className: _DateRangeWrapperModule.default.divider,
+          "data-testid": (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'divider'
+          })
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Calendar.Calendar, {
           marker: _utils.MARKERS.DATE_RANGE_END,
           value: rangeEndMonth,
-          ...commonProps
+          ...commonProps,
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'end-calendar'
+          })
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.CardFooter, {
         className: _DateRangeWrapperModule.default.cardFooter,
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'footer'
+        }),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardTitle, {
           className: _DateRangeWrapperModule.default.timezoneDropdownContainer,
+          "data-testid": (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'timezone-container'
+          }),
           children: !hideTimezone && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.Dropdown, {
             menu: {
               selectedKeys: [timezone],
@@ -239,18 +313,34 @@ const DateRangeWrapper = exports.DateRangeWrapper = /*#__PURE__*/React.forwardRe
               box: _DateRangeWrapperModule.default.timezoneDropdown
             },
             onChange: event => setTimezone(event.key),
-            size: "small"
+            size: "small",
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'timezone-dropdown'
+            })
           })
         }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.CardActions, {
+          "data-testid": (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'actions'
+          }),
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
             type: "ghost",
             onClick: onCancel,
             size: "small",
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'cancel-button'
+            }),
             children: (0, _dateRangePicker.getTranslation)(t, 'Cancel')
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
             onClick: handleApplyClick,
             size: "small",
             disabled: !(dateRange.startDate && dateRange.endDate),
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: 'apply-button'
+            }),
             children: (0, _dateRangePicker.getTranslation)(t, 'Apply')
           })]
         })]

package/lib/components/DateRangePicker/Day.d.ts

@@ -11,7 +11,8 @@ interface DayProps {
     startOfRange: boolean;
     onClick: () => void;
     onHover: () => void;
+    testId?: string;
 }
-export declare const Day: ({ date, value, filled, onHover, onClick, disabled, hoverDay, outlined, endOfRange, highlighted, startOfRange, }: DayProps) => React.JSX.Element;
+export declare const Day: ({ date, value, filled, onHover, onClick, disabled, hoverDay, outlined, endOfRange, highlighted, startOfRange, testId, }: DayProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=Day.d.ts.map

package/lib/components/DateRangePicker/Day.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Day.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/Day.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,UAAU,QAAQ;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAYD,eAAO,MAAM,GAAG,GAAI,iHAYjB,QAAQ,sBAwBV,CAAC"}
+{"version":3,"file":"Day.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/Day.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,UAAU,QAAQ;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,EAAE,OAAO,CAAC;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAYD,eAAO,MAAM,GAAG,GAAI,yHAajB,QAAQ,sBA0BV,CAAC"}