@skyscanner/backpack-web 6.0.0-alpha.0 → 6.0.0

package/bpk-component-input/src/BpkInput.module.scss

@@ -0,0 +1,86 @@
+/*
+ * 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 '~bpk-mixins/index';
+
+$bpk-spacing-v2: true;
+
+.bpk-input {
+  @include bpk-input;
+
+  &__container {
+    @include bpk-input__container;
+  }
+
+  &__clear-button {
+    display: none;
+
+    @include bpk-input__clear-button;
+
+    &--persistent {
+      display: inherit;
+    }
+  }
+
+  &--valid {
+    @include bpk-input--valid;
+  }
+
+  &--invalid {
+    @include bpk-input--invalid;
+  }
+
+  &--clearable {
+    @include bpk-input--clearable;
+
+    // Display the clear button when a clearable input is focused.
+    &:focus + .bpk-input__clear-button {
+      display: inherit;
+    }
+  }
+
+  &--large {
+    @include bpk-input--large;
+  }
+
+  // When persistent, set background to override any validity icons
+  // appearing and make the clear button always display.
+  &--persistent-clearable {
+    background: $bpk-input-background;
+  }
+
+  &--docked {
+    @include bpk-input--docked;
+
+    &-first {
+      @include bpk-input--docked-first-child;
+    }
+
+    &-middle {
+      @include bpk-input--docked-middle-child;
+    }
+
+    &-last {
+      @include bpk-input--docked-last-child;
+    }
+  }
+
+  &--with-open-events {
+    cursor: pointer;
+  }
+}

package/bpk-component-input/src/common-types.js

@@ -1,14 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.propTypes = exports.defaultProps = exports.clearablePropType = exports.INPUT_TYPES = exports.CLEAR_BUTTON_MODES = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -26,66 +15,105 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const CLEAR_BUTTON_MODES = {
+
+/* @flow strict */
+
+import PropTypes from 'prop-types';
+
+export const CLEAR_BUTTON_MODES = {
   never: 'never',
   whileEditing: 'whileEditing',
-  always: 'always'
+  always: 'always',
 };
-exports.CLEAR_BUTTON_MODES = CLEAR_BUTTON_MODES;
-const INPUT_TYPES = {
+
+export const INPUT_TYPES = {
   text: 'text',
   email: 'email',
   number: 'number',
   password: 'password',
-  tel: 'tel'
+  tel: 'tel',
 };
-exports.INPUT_TYPES = INPUT_TYPES;
 
-const clearablePropType = (props, propName, componentName) => {
-  const createError = message => new Error(`Invalid prop \`${propName}\` supplied to \`${componentName}\`. ${message}.`);
+export type Props = {
+  id: string,
+  name: string,
+  value: string,
+  type: $Keys<typeof INPUT_TYPES>,
+  className: ?string,
+  valid: ?boolean,
+  large: boolean,
+  docked: boolean,
+  dockedFirst: boolean,
+  dockedMiddle: boolean,
+  dockedLast: boolean,
+  inputRef: ?(?HTMLInputElement) => mixed,
+  clearButtonMode: $Keys<typeof CLEAR_BUTTON_MODES>,
+  clearButtonLabel: ?string,
+  onClear: ?(event: SyntheticEvent<HTMLButtonElement>) => mixed,
+};
 
-  const propBeingChecked = props[propName];
+export const clearablePropType = (
+  props: Props,
+  propName: string,
+  componentName: string,
+): ?Error => {
+  const createError = (message) =>
+    new Error(
+      `Invalid prop \`${propName}\` supplied to \`${componentName}\`. ${message}.`,
+    );
 
-  if (props.clearButtonMode && props.clearButtonMode !== CLEAR_BUTTON_MODES.never) {
+  const propBeingChecked = props[propName];
+  if (
+    props.clearButtonMode &&
+    props.clearButtonMode !== CLEAR_BUTTON_MODES.never
+  ) {
     if (!propBeingChecked) {
-      return createError(`When \`clearButtonMode\` is not 'never', \`${propName}\` must be supplied`);
+      return createError(
+        `When \`clearButtonMode\` is not 'never', \`${propName}\` must be supplied`,
+      );
     }
 
     switch (propName) {
       case 'clearButtonLabel':
-        return typeof propBeingChecked === 'string' ? null : createError(`\`clearButtonLabel\` must be a string`);
-
+        return typeof propBeingChecked === 'string'
+          ? null
+          : createError(`\`clearButtonLabel\` must be a string`);
       case 'onClear':
-        return typeof propBeingChecked === 'function' ? null : createError(`\`onClear\` must be a function`);
-
+        return typeof propBeingChecked === 'function'
+          ? null
+          : createError(`\`onClear\` must be a function`);
       default:
         return null;
     }
   }
-
   return null;
 };
 
-exports.clearablePropType = clearablePropType;
-const propTypes = {
-  id: _propTypes.default.string.isRequired,
-  name: _propTypes.default.string.isRequired,
-  value: _propTypes.default.string.isRequired,
-  type: _propTypes.default.oneOf([INPUT_TYPES.text, INPUT_TYPES.email, INPUT_TYPES.number, INPUT_TYPES.password, INPUT_TYPES.tel]),
-  className: _propTypes.default.string,
-  valid: _propTypes.default.bool,
-  large: _propTypes.default.bool,
-  docked: _propTypes.default.bool,
-  dockedFirst: _propTypes.default.bool,
-  dockedMiddle: _propTypes.default.bool,
-  dockedLast: _propTypes.default.bool,
-  inputRef: _propTypes.default.func,
-  clearButtonMode: _propTypes.default.oneOf(Object.keys(CLEAR_BUTTON_MODES)),
+export const propTypes = {
+  id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  type: PropTypes.oneOf([
+    INPUT_TYPES.text,
+    INPUT_TYPES.email,
+    INPUT_TYPES.number,
+    INPUT_TYPES.password,
+    INPUT_TYPES.tel,
+  ]),
+  className: PropTypes.string,
+  valid: PropTypes.bool,
+  large: PropTypes.bool,
+  docked: PropTypes.bool,
+  dockedFirst: PropTypes.bool,
+  dockedMiddle: PropTypes.bool,
+  dockedLast: PropTypes.bool,
+  inputRef: PropTypes.func,
+  clearButtonMode: PropTypes.oneOf(Object.keys(CLEAR_BUTTON_MODES)),
   clearButtonLabel: clearablePropType,
-  onClear: clearablePropType
+  onClear: clearablePropType,
 };
-exports.propTypes = propTypes;
-const defaultProps = {
+
+export const defaultProps = {
   type: INPUT_TYPES.text,
   className: null,
   valid: null,
@@ -97,6 +125,5 @@ const defaultProps = {
   inputRef: null,
   clearButtonMode: CLEAR_BUTTON_MODES.never,
   clearButtonLabel: null,
-  onClear: null
+  onClear: null,
 };
-exports.defaultProps = defaultProps;

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

@@ -1,10 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -22,5 +15,5 @@ exports.default = void 0;
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var _default = ['inputInvalidBorderColor'];
-exports.default = _default;
+
+export default ['inputInvalidBorderColor'];

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

@@ -1,93 +1,89 @@
-"use strict";
+/*
+ * 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);
 
-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.css"));
-
-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.default.Component {
+const withOpenEvents = (InputComponent) => {
+  class WithOpenEvents extends React.Component {
     constructor(props) {
       super(props);
 
-      _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();
-          }
-        }
-      });
+      this.focusCanOpen = true;
+    }
 
-      _defineProperty(this, "handleFocus", () => {
-        if (this.focusCanOpen && 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) {
           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;
-        }
-      });
+      }
+    };
 
-      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;
+      }
+    };
 
     render() {
-      const _this$props = this.props,
-            {
+      const {
         className,
         hasTouchSupport,
         onBlur,
@@ -96,60 +92,79 @@ const withOpenEvents = InputComponent => {
         onKeyDown,
         onKeyUp,
         onOpen,
-        onTouchEnd
-      } = _this$props,
-            rest = _objectWithoutProperties(_this$props, _excluded);
+        onTouchEnd,
+        ...rest
+      } = this.props;
 
       delete rest.isOpen;
-      const classNames = [getClassName('bpk-input--with-open-events')];
 
+      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 /*#__PURE__*/_react.default.createElement(InputComponent, _extends({
-        className: classNames.join(' ')
-      }, eventHandlers, rest));
-    }
 
+      return (
+        <InputComponent
+          className={classNames.join(' ')}
+          {...eventHandlers}
+          {...rest}
+        />
+      );
+    }
   }
 
   WithOpenEvents.propTypes = {
     // Custom props
-    isOpen: _propTypes.default.bool,
-    hasTouchSupport: _propTypes.default.bool,
-    onOpen: _propTypes.default.func,
+    isOpen: PropTypes.bool,
+    hasTouchSupport: PropTypes.bool,
+    onOpen: PropTypes.func,
     // Input props
-    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
+    className: PropTypes.string,
+    onClick: PropTypes.func,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
+    onTouchEnd: PropTypes.func,
+    onKeyDown: PropTypes.func,
+    onKeyUp: PropTypes.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,
@@ -158,11 +173,15 @@ const withOpenEvents = InputComponent => {
     onBlur: null,
     onTouchEnd: null,
     onKeyDown: null,
-    onKeyUp: null
+    onKeyUp: null,
   };
-  WithOpenEvents.displayName = (0, _bpkReactUtils.wrapDisplayName)(InputComponent, 'withOpenEvents');
+
+  WithOpenEvents.displayName = wrapDisplayName(
+    InputComponent,
+    'withOpenEvents',
+  );
+
   return WithOpenEvents;
 };
 
-var _default = withOpenEvents;
-exports.default = _default;
+export default withOpenEvents;

package/bpk-component-label/README.md

@@ -0,0 +1,30 @@
+# bpk-component-label
+
+> Backpack label component.
+
+## Installation
+
+```sh
+npm install bpk-component-label --save-dev
+```
+
+## Usage
+
+```js
+import React from 'react';
+import BpkLabel from 'bpk-component-label';
+
+export default () => (
+  <BpkLabel htmlFor="origin">Origin</BpkLabel>
+)
+```
+
+## Props
+
+| Property  | PropType | Required | Default Value |
+| --------- | -------- | -------- | ------------- |
+| children  | node     | true     | -             |
+| disabled  | bool     | false    | false         |
+| invalid   | bool     | false    | false         |
+| required  | bool     | false    | false         |
+| white     | bool     | false    | false         |

package/bpk-component-label/index.js

@@ -1,14 +1,3 @@
-"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
  *
@@ -26,5 +15,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var _default = _BpkLabel.default;
-exports.default = _default;
+/* @flow strict */
+
+import BpkLabel, { type Props } from './src/BpkLabel';
+
+export type BpkLabelProps = Props;
+
+export default BpkLabel;

package/bpk-component-label/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "bpk-component-label",
+  "version": "5.1.12",
+  "description": "Backpack label component.",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:Skyscanner/backpack.git"
+  },
+  "author": "Backpack Design System <backpack@skyscanner.net>",
+  "main": "index.js",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
+  "dependencies": {
+    "bpk-mixins": "^31.1.1",
+    "bpk-react-utils": "^6.0.0",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  }
+}