@skyscanner/backpack-web 6.0.0 → 7.0.0-alpha.2

package/bpk-component-input/src/withOpenEvents-test.js

@@ -0,0 +1,161 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _withOpenEvents = _interopRequireDefault(require("./withOpenEvents"));
+
+var _BpkInput = _interopRequireDefault(require("./BpkInput"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+const Input = (0, _withOpenEvents.default)(_BpkInput.default);
+describe('withOpenEvents', () => {
+  it('should render correctly', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(Input, {
+      id: "my-input",
+      name: "my-input",
+      value: "value",
+      hasTouchSupport: false,
+      onChange: () => null
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should attach different event handlers when touch is supported', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(Input, {
+      id: "my-input",
+      name: "my-input",
+      value: "value",
+      hasTouchSupport: true,
+      onChange: () => null
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should render correctly with "className" prop', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(Input, {
+      id: "my-input",
+      name: "my-input",
+      value: "value",
+      className: "my-custom-class",
+      onChange: () => null
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should open on click', async () => {
+    const onOpen = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(Input, {
+      id: "my-input",
+      name: "my-input",
+      value: "value",
+      onOpen: onOpen,
+      onChange: () => null
+    }));
+    expect(onOpen).not.toHaveBeenCalled();
+
+    const input = _react2.screen.getByRole('textbox');
+
+    await _userEvent.default.click(input);
+    expect(onOpen).toHaveBeenCalled();
+  });
+  it('should open on focus', () => {
+    const onOpen = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(Input, {
+      id: "my-input",
+      name: "my-input",
+      value: "value",
+      onOpen: onOpen,
+      onChange: () => null
+    }));
+    expect(onOpen).not.toHaveBeenCalled();
+
+    const input = _react2.screen.getByRole('textbox');
+
+    _react2.fireEvent.focus(input);
+
+    expect(onOpen).toHaveBeenCalled();
+  });
+  it('should open on touch', () => {
+    const onOpen = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(Input, {
+      id: "my-input",
+      name: "my-input",
+      value: "value",
+      onOpen: onOpen,
+      hasTouchSupport: true,
+      onChange: () => null
+    }));
+    expect(onOpen).not.toHaveBeenCalled();
+
+    const input = _react2.screen.getByRole('textbox');
+
+    _react2.fireEvent.focus(input);
+
+    _react2.fireEvent.touchEnd(input);
+
+    expect(onOpen).toHaveBeenCalled();
+  });
+  it('should open on "Enter" key', () => {
+    const onOpen = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(Input, {
+      id: "my-input",
+      name: "my-input",
+      value: "value",
+      onOpen: onOpen,
+      onChange: () => null
+    }));
+    expect(onOpen).not.toHaveBeenCalled();
+
+    const input = _react2.screen.getByRole('textbox');
+
+    _react2.fireEvent.keyDown(input, {
+      keyCode: 13
+    });
+
+    expect(onOpen).toHaveBeenCalled();
+  });
+  it('should open on "Space" key', () => {
+    const onOpen = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(Input, {
+      id: "my-input",
+      name: "my-input",
+      value: "value",
+      onOpen: onOpen,
+      onChange: () => null
+    }));
+    expect(onOpen).not.toHaveBeenCalled();
+
+    const input = _react2.screen.getByRole('textbox');
+
+    _react2.fireEvent.keyUp(input, {
+      keyCode: 32
+    });
+
+    expect(onOpen).toHaveBeenCalled();
+  });
+});

package/bpk-component-input/src/withOpenEvents.js

@@ -1,89 +1,93 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2016 Skyscanner Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { cssModules, wrapDisplayName } from '../../bpk-react-utils';
-
-import STYLES from './BpkInput.module.scss';
-
-const getClassName = cssModules(STYLES);
+"use strict";
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _bpkReactUtils = require("bpk-react-utils");
+
+var _BpkInputModule = _interopRequireDefault(require("./BpkInput.module.scss"));
+
+const _excluded = ["className", "hasTouchSupport", "onBlur", "onClick", "onFocus", "onKeyDown", "onKeyUp", "onOpen", "onTouchEnd"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+const getClassName = (0, _bpkReactUtils.cssModules)(_BpkInputModule.default);
 const KEYCODES = {
   ENTER: 13,
-  SPACEBAR: 32,
+  SPACEBAR: 32
 };
 
-const handleKeyEvent = (keyCode, callback) => (e) => {
+const handleKeyEvent = (keyCode, callback) => e => {
   if (e.keyCode === keyCode) {
     e.preventDefault();
     callback();
   }
 };
 
-const withEventHandler = (fn, eventHandler) => (e) => {
+const withEventHandler = (fn, eventHandler) => e => {
   fn(e);
+
   if (eventHandler) {
     eventHandler(e);
   }
 };
 
-const withOpenEvents = (InputComponent) => {
-  class WithOpenEvents extends React.Component {
+const withOpenEvents = InputComponent => {
+  class WithOpenEvents extends _react.default.Component {
     constructor(props) {
       super(props);
 
-      this.focusCanOpen = true;
-    }
+      _defineProperty(this, "handleTouchEnd", event => {
+        // preventDefault fixes an issue on Android and iOS in which the popover closes immediately
+        // because a touch event is registered on one of the dates.
+        // We can only run preventDefault when the input is already focused - otherwise it would never set
+        // focus on it, and when closing the modal/popover focus would return to the previously focused
+        // element (which is annoying if it's an autosuggest or another datepicker, for example).
+        if (document && event.target === document.activeElement) {
+          event.preventDefault();
+
+          if (this.props.onOpen) {
+            this.props.onOpen();
+          }
+        }
+      });
 
-    handleTouchEnd = (event) => {
-      // preventDefault fixes an issue on Android and iOS in which the popover closes immediately
-      // because a touch event is registered on one of the dates.
-      // We can only run preventDefault when the input is already focused - otherwise it would never set
-      // focus on it, and when closing the modal/popover focus would return to the previously focused
-      // element (which is annoying if it's an autosuggest or another datepicker, for example).
-      if (document && event.target === document.activeElement) {
-        event.preventDefault();
-        if (this.props.onOpen) {
+      _defineProperty(this, "handleFocus", () => {
+        if (this.focusCanOpen && this.props.onOpen) {
           this.props.onOpen();
         }
-      }
-    };
+      });
+
+      _defineProperty(this, "handleBlur", () => {
+        // If the input loses focus when the target is open, it should not open on a subsequent focus.
+        // Fixes an issue with IE9.
+        if (this.props.isOpen) {
+          this.focusCanOpen = false;
+        } else {
+          this.focusCanOpen = true;
+        }
+      });
 
-    handleFocus = () => {
-      if (this.focusCanOpen && this.props.onOpen) {
-        this.props.onOpen();
-      }
-    };
-
-    handleBlur = () => {
-      // If the input loses focus when the target is open, it should not open on a subsequent focus.
-      // Fixes an issue with IE9.
-      if (this.props.isOpen) {
-        this.focusCanOpen = false;
-      } else {
-        this.focusCanOpen = true;
-      }
-    };
+      this.focusCanOpen = true;
+    }
 
     render() {
-      const {
+      const _this$props = this.props,
+            {
         className,
         hasTouchSupport,
         onBlur,
@@ -92,79 +96,60 @@ const withOpenEvents = (InputComponent) => {
         onKeyDown,
         onKeyUp,
         onOpen,
-        onTouchEnd,
-        ...rest
-      } = this.props;
+        onTouchEnd
+      } = _this$props,
+            rest = _objectWithoutProperties(_this$props, _excluded);
 
       delete rest.isOpen;
-
       const classNames = [getClassName('bpk-input--with-open-events')];
+
       if (className) {
         classNames.push(className);
       }
 
       const eventHandlers = {
         onClick: withEventHandler(onOpen, onClick),
-        onKeyDown: withEventHandler(
-          handleKeyEvent(KEYCODES.ENTER, onOpen),
-          onKeyDown,
-        ),
-        onKeyUp: withEventHandler(
-          handleKeyEvent(KEYCODES.SPACEBAR, onOpen),
-          onKeyUp,
-        ),
+        onKeyDown: withEventHandler(handleKeyEvent(KEYCODES.ENTER, onOpen), onKeyDown),
+        onKeyUp: withEventHandler(handleKeyEvent(KEYCODES.SPACEBAR, onOpen), onKeyUp)
       };
 
       if (hasTouchSupport) {
         // Prevents the mobile keyboard from opening (iOS / Android), while not announcing it as 'read only' to a screen reader
         eventHandlers.readOnly = 'readOnly';
         eventHandlers['aria-readonly'] = false;
+        eventHandlers.onTouchEnd = withEventHandler(this.handleTouchEnd, onTouchEnd);
+      } // Needed on desktop to allow the intended behaviour of opening on focus
+      // Needed on mobile as some Android devices do not trigger onClick or onTouch when TalkBack is active but do trigger onFocus
 
-        eventHandlers.onTouchEnd = withEventHandler(
-          this.handleTouchEnd,
-          onTouchEnd,
-        );
-      }
 
-      // Needed on desktop to allow the intended behaviour of opening on focus
-      // Needed on mobile as some Android devices do not trigger onClick or onTouch when TalkBack is active but do trigger onFocus
       eventHandlers.onFocus = withEventHandler(this.handleFocus, onFocus);
       eventHandlers.onBlur = withEventHandler(this.handleBlur, onBlur);
-
-      return (
-        <InputComponent
-          className={classNames.join(' ')}
-          {...eventHandlers}
-          {...rest}
-        />
-      );
+      return /*#__PURE__*/_react.default.createElement(InputComponent, _extends({
+        className: classNames.join(' ')
+      }, eventHandlers, rest));
     }
+
   }
 
   WithOpenEvents.propTypes = {
     // Custom props
-    isOpen: PropTypes.bool,
-    hasTouchSupport: PropTypes.bool,
-    onOpen: PropTypes.func,
+    isOpen: _propTypes.default.bool,
+    hasTouchSupport: _propTypes.default.bool,
+    onOpen: _propTypes.default.func,
     // Input props
-    className: PropTypes.string,
-    onClick: PropTypes.func,
-    onFocus: PropTypes.func,
-    onBlur: PropTypes.func,
-    onTouchEnd: PropTypes.func,
-    onKeyDown: PropTypes.func,
-    onKeyUp: PropTypes.func,
+    className: _propTypes.default.string,
+    onClick: _propTypes.default.func,
+    onFocus: _propTypes.default.func,
+    onBlur: _propTypes.default.func,
+    onTouchEnd: _propTypes.default.func,
+    onKeyDown: _propTypes.default.func,
+    onKeyUp: _propTypes.default.func
   };
-
   WithOpenEvents.defaultProps = {
     // Custom props
     isOpen: false,
-    hasTouchSupport: !!(
-      typeof window !== 'undefined' &&
-      ('ontouchstart' in window ||
-        // eslint-disable-next-line no-undef
-        (window.DocumentTouch && document instanceof DocumentTouch))
-    ),
+    hasTouchSupport: !!(typeof window !== 'undefined' && ('ontouchstart' in window || // eslint-disable-next-line no-undef
+    window.DocumentTouch && document instanceof DocumentTouch)),
     onOpen: null,
     // Input props
     className: null,
@@ -173,15 +158,11 @@ const withOpenEvents = (InputComponent) => {
     onBlur: null,
     onTouchEnd: null,
     onKeyDown: null,
-    onKeyUp: null,
+    onKeyUp: null
   };
-
-  WithOpenEvents.displayName = wrapDisplayName(
-    InputComponent,
-    'withOpenEvents',
-  );
-
+  WithOpenEvents.displayName = (0, _bpkReactUtils.wrapDisplayName)(InputComponent, 'withOpenEvents');
   return WithOpenEvents;
 };
 
-export default withOpenEvents;
+var _default = withOpenEvents;
+exports.default = _default;

package/bpk-component-label/index.js

@@ -1,3 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _BpkLabel = _interopRequireDefault(require("./src/BpkLabel"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -15,10 +26,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* @flow strict */
-
-import BpkLabel, { type Props } from './src/BpkLabel';
-
-export type BpkLabelProps = Props;
-
-export default BpkLabel;
+var _default = _BpkLabel.default;
+exports.default = _default;

package/bpk-component-label/src/BpkLabel-test.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _BpkLabel = _interopRequireDefault(require("./BpkLabel"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+describe('BpkLabel', () => {
+  it('should render correctly', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkLabel.default, null, "Origin"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should render correctly with a "white" attribute', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkLabel.default, {
+      white: true
+    }, "Origin"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should render correctly with a "required" attribute', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkLabel.default, {
+      required: true
+    }, "Origin"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should render correctly with "valid" attribute false', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkLabel.default, {
+      valid: false
+    }, "Origin"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should render correctly with "valid" attribute false and "required" attributes', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkLabel.default, {
+      required: true,
+      valid: false
+    }, "Origin"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should render correctly without an asterisk when disabled and required', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkLabel.default, {
+      disabled: true,
+      required: true
+    }, "Origin"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should render correctly with a "className" attribute', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkLabel.default, {
+      className: "test"
+    }, "Origin"));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});