@spaced-out/ui-design-system 0.5.11 → 0.5.12

package/lib/components/Typeahead/Typeahead.js

@@ -11,6 +11,7 @@ var _space = require("../../styles/variables/_space");
 var _classify = require("../../utils/classify");
 var _clickAway = require("../../utils/click-away");
 var _mergeRefs = require("../../utils/merge-refs");
+var _qa = require("../../utils/qa");
 var _Menu = require("../Menu");
 var _SearchInput = require("../SearchInput");
 var _Tooltip = require("../Tooltip");
@@ -35,6 +36,7 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onFocus,
     clickAwayRef,
     elevation = 'modal',
+    testId,
     ...inputProps
   } = _ref;
   const menuOptions = menu?.options;
@@ -71,7 +73,10 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
         triggerRef
       } = _ref2;
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        "data-testid": "Typeahead",
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'root'
+        }),
         className: (0, _classify.classify)(_TypeaheadModule.default.typeaheadContainer, classNames?.wrapper),
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchInput.SearchInput, {
           ...inputProps,
@@ -107,7 +112,11 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
           },
           onClear: () => {
             onClear?.();
-          }
+          },
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: 'search-input'
+          })
         }), isOpen && !isLoading && menu && menuOptions && !!menuOptions.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.FloatingPortal, {
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.FloatingFocusManager, {
             modal: false,
@@ -117,6 +126,10 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
               ref: (0, _mergeRefs.mergeRefs)([refs.setFloating, boundaryRef]),
               className: _TypeaheadModule.default.menuWrapper,
+              "data-testid": (0, _qa.generateTestId)({
+                base: testId,
+                slot: 'menu-wrapper'
+              }),
               style: {
                 position: strategy,
                 top: y ?? _space.spaceNone,
@@ -134,6 +147,10 @@ const BaseTypeahead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Menu.Menu, {
                 ...menu,
                 options: menuOptions,
+                testId: (0, _qa.generateTestId)({
+                  base: testId,
+                  slot: 'menu'
+                }),
                 onSelect: (option, e) => {
                   onSelect?.(option, e);
                   if (

package/lib/components/WeekdayPicker/WeekdayPicker.d.ts

@@ -31,6 +31,7 @@ export interface WeekdayPickerProps {
     label?: React.ReactNode;
     helperText?: React.ReactNode;
     disableMultiSelect?: boolean;
+    testId?: string;
 }
 export declare const WeekdayPicker: Flow.AbstractComponent<WeekdayPickerProps, HTMLDivElement>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"WeekdayPicker.d.ts","sourceRoot":"","sources":["../../../src/components/WeekdayPicker/WeekdayPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAqBrD,eAAO,MAAM,mBAAmB;;;EAG9B,CAAC;AAEH,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC,CAAC;AAEH,KAAK,iBAAiB,GACpB,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,CAAC;AAEjE,MAAM,WAAW,OAAO;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,gBAAgB,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IAClC,cAAc,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/B,gBAAgB,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACjC,eAAe,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,CACT,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,EAC5B,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG,SAAS,KACxD,OAAO,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AA6DD,eAAO,MAAM,aAAa,EAAE,IAAI,CAAC,iBAAiB,CAChD,kBAAkB,EAClB,cAAc,CAsHf,CAAC"}
+{"version":3,"file":"WeekdayPicker.d.ts","sourceRoot":"","sources":["../../../src/components/WeekdayPicker/WeekdayPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAsBrD,eAAO,MAAM,mBAAmB;;;EAG9B,CAAC;AAEH,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,CAAC,CAAC;AAEH,KAAK,iBAAiB,GACpB,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,OAAO,mBAAmB,CAAC,CAAC;AAEjE,MAAM,WAAW,OAAO;IACtB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,CAAC,EAAE,iBAAiB,CAAC;IACzB,gBAAgB,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IAClC,cAAc,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC/B,gBAAgB,CAAC,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACjC,eAAe,CAAC,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IACjC,QAAQ,CAAC,EAAE,CACT,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,EAC5B,IAAI,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG,SAAS,KACxD,OAAO,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAoED,eAAO,MAAM,aAAa,EAAE,IAAI,CAAC,iBAAiB,CAChD,kBAAkB,EAClB,cAAc,CAwHf,CAAC"}

package/lib/components/WeekdayPicker/WeekdayPicker.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.WeekdayPicker = exports.WEEKDAY_PICKER_SIZE = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
 var _Button = require("../Button");
 var _WeekdayPickerModule = _interopRequireDefault(require("./WeekdayPicker.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -46,7 +47,8 @@ const DayButton = _ref => {
     onClick,
     classNames,
     size,
-    readOnly
+    readOnly,
+    testId
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.UnstyledButton, {
     className: (0, _classify.default)(_WeekdayPickerModule.default.weekdayButton, {
@@ -63,6 +65,11 @@ const DayButton = _ref => {
     "aria-label": `Select ${day.label}`,
     tabIndex: isDisabled || readOnly ? -1 : 0,
     role: "checkbox",
+    testId: (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'day-button',
+      index: day.key
+    }),
     children: [day.secondaryLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classify.default)(_WeekdayPickerModule.default.secondaryLabel, {
         [_WeekdayPickerModule.default.secondaryLabelSelected]: isSelected,
@@ -86,7 +93,8 @@ const WeekdayPicker = exports.WeekdayPicker = /*#__PURE__*/React.forwardRef((_re
     ariaLabel = 'Select weekdays',
     label,
     helperText,
-    disableMultiSelect = false
+    disableMultiSelect = false,
+    testId
   } = _ref2;
   const [selectedDays, setSelectedDays] = React.useState(selectedWeekDays);
   const handleDayToggle = (day, event) => {
@@ -112,7 +120,10 @@ const WeekdayPicker = exports.WeekdayPicker = /*#__PURE__*/React.forwardRef((_re
     onChange?.(updatedSelectedDays, event);
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    "data-testid": "Weekday-Picker",
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'wrapper'
+    }),
     ref: ref,
     className: (0, _classify.default)(_WeekdayPickerModule.default.weekdayPickerContainer, classNames.wrapper, {
       [_WeekdayPickerModule.default.weekdayReadOnly]: readOnly
@@ -148,7 +159,8 @@ const WeekdayPicker = exports.WeekdayPicker = /*#__PURE__*/React.forwardRef((_re
             selectedButton: classNames.selectedButton
           },
           size: size,
-          readOnly: readOnly
+          readOnly: readOnly,
+          testId: testId
         }, day.key);
       })
     }), !!helperText && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.5.11",
+  "version": "0.5.12",
   "description": "Sense UI components library",
   "author": {
     "name": "Spaced Out"