@skyscanner/backpack-web 25.3.0 → 25.4.0-alpha

package/bpk-component-split-input/src/BpkInputField.module.scss

@@ -0,0 +1,34 @@
+/*
+ * 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.
+ */
+/* stylelint-disable */
+@import '~bpk-mixins/index.scss';
+
+.bpk-input-field {
+  display: flex;
+  max-width: 3*bpk-spacing-xxl();
+  margin-right: bpk-spacing-sm();
+  align-items: center;
+
+  input {
+    text-align: center;
+  }
+}
+
+.bpk-input-field:last-child {
+  margin-right: $bpk-spacing-none;
+}

package/bpk-component-split-input/src/BpkSplitInput.js

@@ -1,43 +1,32 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "INPUT_TYPES", {
-  enumerable: true,
-  get: function () {
-    return _bpkComponentInput.INPUT_TYPES;
-  }
-});
-exports.default = void 0;
-var _react = require("react");
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _bpkReactUtils = require("../../bpk-react-utils");
-var _bpkComponentInput = require("../../bpk-component-input");
-var _BpkInputField = _interopRequireDefault(require("./BpkInputField"));
-var _BpkSplitInputModule = _interopRequireDefault(require("./BpkSplitInput.module.css"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /*
-                                                                                                                                                                                                                                                                                                                                                                                           * 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 getClassName = (0, _bpkReactUtils.cssModules)(_BpkSplitInputModule.default);
+/*
+ * 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.
+ */
+/* @flow strict */
+
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+
+import { cssModules } from '../../bpk-react-utils';
+import { INPUT_TYPES } from '../../bpk-component-input';
+
+import InputField from './BpkInputField';
+import STYLES from './BpkSplitInput.module.scss';
+
+const getClassName = cssModules(STYLES);
 
 // keyCode constants
 const BACKSPACE = 8;
@@ -46,201 +35,211 @@ const RIGHT_ARROW = 39;
 const DELETE = 46;
 const SPACEBAR = 32;
 const ENTER = 13;
-class BpkSplitInput extends _react.Component {
+
+class BpkSplitInput extends Component {
   constructor(props) {
     super(props);
-    _defineProperty(this, "onInputChange", input => {
-      this.setState({
-        inputValue: input
-      });
-      const {
-        onChange
-      } = this.props;
-      const value = input.join('');
-      onChange(value);
-    });
-    _defineProperty(this, "updateInputValue", value => {
-      const {
-        focusedInput,
-        inputValue
-      } = this.state;
-      inputValue[focusedInput] = value;
-      this.onInputChange(inputValue);
-    });
-    _defineProperty(this, "handleSubmit", () => {
-      const {
-        onSubmit
-      } = this.props;
-      const {
-        inputValue
-      } = this.state;
-      if (this.validateInput(inputValue)) {
-        const value = inputValue.join('');
-        onSubmit(value);
-      }
-    });
-    _defineProperty(this, "validateInput", inputValue => {
-      let index = 0;
-      while (index < inputValue.length) {
-        if (!this.isInputValid(inputValue[index])) {
-          this.setState({
-            focusedInput: index
-          });
-          return false;
-        }
-        index += 1;
-      }
-      return true;
-    });
-    _defineProperty(this, "isNumeric", () => this.props.type === _bpkComponentInput.INPUT_TYPES.number);
-    _defineProperty(this, "isInputValid", value => {
-      const isTypeValid = this.isNumeric() ? /^\d$/.test(value) : typeof value === 'string';
-      return isTypeValid && value.trim().length === 1;
-    });
-    _defineProperty(this, "focusInput", inputIndex => {
-      const {
-        inputLength
-      } = this.props;
-      const focusedInput = Math.max(Math.min(inputLength - 1, inputIndex), 0);
-      this.setState({
-        focusedInput
-      });
-    });
-    _defineProperty(this, "focusNextInput", () => {
-      const {
-        focusedInput
-      } = this.state;
-      this.focusInput(focusedInput + 1);
-    });
-    _defineProperty(this, "focusPreviousInput", () => {
-      const {
-        focusedInput
-      } = this.state;
-      this.focusInput(focusedInput - 1);
-    });
-    _defineProperty(this, "handleOnPaste", e => {
-      e.preventDefault();
-      const {
-        inputLength
-      } = this.props;
-      const {
-        focusedInput,
-        inputValue
-      } = this.state;
-      const pastedData = e.clipboardData.getData('text/plain').slice(0, inputLength - focusedInput).split('');
-      const charsReceived = pastedData.length;
-      let firstInvalidInputPosition;
-      let position = focusedInput;
-      for (position; position < charsReceived; position += 1) {
-        const firstElement = pastedData.shift();
-        if (this.isInputValid(firstElement)) {
-          inputValue[position] = firstElement;
-        } else if (typeof firstInvalidInputPosition === 'undefined') {
-          firstInvalidInputPosition = position;
-        }
-      }
-      this.focusInput(typeof firstInvalidInputPosition !== 'undefined' ? firstInvalidInputPosition : position);
-      this.onInputChange(inputValue);
-    });
-    _defineProperty(this, "handleOnKeyDown", e => {
-      if (e.keyCode === BACKSPACE || e.key === 'Backspace') {
-        e.preventDefault();
-        this.updateInputValue('');
-        this.focusPreviousInput();
-      } else if (e.keyCode === DELETE || e.key === 'Delete') {
-        e.preventDefault();
-        this.updateInputValue('');
-      } else if (e.keyCode === LEFT_ARROW || e.key === 'Left' || e.key === 'ArrowLeft') {
-        e.preventDefault();
-        this.focusPreviousInput();
-      } else if (e.keyCode === RIGHT_ARROW || e.key === 'Right' || e.key === 'ArrowRight') {
-        e.preventDefault();
-        this.focusNextInput();
-      } else if (e.keyCode === ENTER || e.key === 'Enter') {
-        e.preventDefault();
-        this.handleSubmit();
-      } else if (e.keyCode === SPACEBAR || e.key === ' ' || e.key === 'Spacebar' || e.key === 'Space') {
-        e.preventDefault();
-      }
-    });
-    _defineProperty(this, "handleOnChange", e => {
-      const {
-        value
-      } = e.target;
-      if (this.isInputValid(value)) {
-        this.updateInputValue(value);
-        this.focusNextInput();
-      }
-    });
-    _defineProperty(this, "handleOnFocus", (e, index) => {
-      this.setState({
-        focusedInput: index
-      });
-      e.target.select();
-    });
-    _defineProperty(this, "renderInputs", () => {
-      const {
-        focusedInput,
-        inputValue
-      } = this.state;
-      const {
-        id,
-        inputLength,
-        label,
-        large,
-        name,
-        placeholder,
-        type
-      } = this.props;
-      const inputs = [];
-      for (let index = 0; index < inputLength; index += 1) {
-        inputs.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(_BpkInputField.default, {
-          index: index,
-          focus: focusedInput === index,
-          id: `${id}-${index}`,
-          label: label,
-          name: name,
-          type: type,
-          large: large,
-          value: inputValue && inputValue[index],
-          placeholder: placeholder,
-          onChange: this.handleOnChange,
-          onInput: this.handleOnChange,
-          onKeyDown: this.handleOnKeyDown,
-          onPaste: this.handleOnPaste,
-          onFocus: e => this.handleOnFocus(e, index)
-        }, index));
-      }
-      return inputs;
-    });
+
     this.state = {
       focusedInput: 0,
-      inputValue: []
+      inputValue: [],
     };
   }
+
+  onInputChange = (input) => {
+    this.setState({ inputValue: input });
+    const { onChange } = this.props;
+    const value = input.join('');
+    onChange(value);
+  };
+
+  updateInputValue = (value) => {
+    const { focusedInput, inputValue } = this.state;
+    inputValue[focusedInput] = value;
+
+    this.onInputChange(inputValue);
+  };
+
+  handleSubmit = () => {
+    const { onSubmit } = this.props;
+    const { inputValue } = this.state;
+    if (this.validateInput(inputValue)) {
+      const value = inputValue.join('');
+      onSubmit(value);
+    }
+  };
+
+  validateInput = (inputValue) => {
+    let index = 0;
+    while (index < inputValue.length) {
+      if (!this.isInputValid(inputValue[index])) {
+        this.setState({ focusedInput: index });
+        return false;
+      }
+      index += 1;
+    }
+    return true;
+  };
+
+  isNumeric = () => this.props.type === INPUT_TYPES.number;
+
+  isInputValid = (value) => {
+    const isTypeValid = this.isNumeric()
+      ? /^\d$/.test(value)
+      : typeof value === 'string';
+    return isTypeValid && value.trim().length === 1;
+  };
+
+  focusInput = (inputIndex) => {
+    const { inputLength } = this.props;
+    const focusedInput = Math.max(Math.min(inputLength - 1, inputIndex), 0);
+    this.setState({ focusedInput });
+  };
+
+  focusNextInput = () => {
+    const { focusedInput } = this.state;
+    this.focusInput(focusedInput + 1);
+  };
+
+  focusPreviousInput = () => {
+    const { focusedInput } = this.state;
+    this.focusInput(focusedInput - 1);
+  };
+
+  handleOnPaste = (e) => {
+    e.preventDefault();
+    const { inputLength } = this.props;
+    const { focusedInput, inputValue } = this.state;
+
+    const pastedData = e.clipboardData
+      .getData('text/plain')
+      .slice(0, inputLength - focusedInput)
+      .split('');
+    const charsReceived = pastedData.length;
+
+    let firstInvalidInputPosition;
+    let position = focusedInput;
+    for (position; position < charsReceived; position += 1) {
+      const firstElement = pastedData.shift();
+      if (this.isInputValid(firstElement)) {
+        inputValue[position] = firstElement;
+      } else if (typeof firstInvalidInputPosition === 'undefined') {
+        firstInvalidInputPosition = position;
+      }
+    }
+    this.focusInput(
+      typeof firstInvalidInputPosition !== 'undefined'
+        ? firstInvalidInputPosition
+        : position,
+    );
+    this.onInputChange(inputValue);
+  };
+
+  handleOnKeyDown = (e) => {
+    if (e.keyCode === BACKSPACE || e.key === 'Backspace') {
+      e.preventDefault();
+      this.updateInputValue('');
+      this.focusPreviousInput();
+    } else if (e.keyCode === DELETE || e.key === 'Delete') {
+      e.preventDefault();
+      this.updateInputValue('');
+    } else if (
+      e.keyCode === LEFT_ARROW ||
+      e.key === 'Left' ||
+      e.key === 'ArrowLeft'
+    ) {
+      e.preventDefault();
+      this.focusPreviousInput();
+    } else if (
+      e.keyCode === RIGHT_ARROW ||
+      e.key === 'Right' ||
+      e.key === 'ArrowRight'
+    ) {
+      e.preventDefault();
+      this.focusNextInput();
+    } else if (e.keyCode === ENTER || e.key === 'Enter') {
+      e.preventDefault();
+      this.handleSubmit();
+    } else if (
+      e.keyCode === SPACEBAR ||
+      e.key === ' ' ||
+      e.key === 'Spacebar' ||
+      e.key === 'Space'
+    ) {
+      e.preventDefault();
+    }
+  };
+
+  handleOnChange = (e) => {
+    const { value } = e.target;
+    if (this.isInputValid(value)) {
+      this.updateInputValue(value);
+      this.focusNextInput();
+    }
+  };
+
+  handleOnFocus = (e, index) => {
+    this.setState({ focusedInput: index });
+    e.target.select();
+  };
+
+  renderInputs = () => {
+    const { focusedInput, inputValue } = this.state;
+    const { id, inputLength, label, large, name, placeholder, type } =
+      this.props;
+    const inputs = [];
+    for (let index = 0; index < inputLength; index += 1) {
+      inputs.push(
+        <InputField
+          key={index}
+          index={index}
+          focus={focusedInput === index}
+          id={`${id}-${index}`}
+          label={label}
+          name={name}
+          type={type}
+          large={large}
+          value={inputValue && inputValue[index]}
+          placeholder={placeholder}
+          onChange={this.handleOnChange}
+          onInput={this.handleOnChange}
+          onKeyDown={this.handleOnKeyDown}
+          onPaste={this.handleOnPaste}
+          onFocus={(e) => this.handleOnFocus(e, index)}
+        />,
+      );
+    }
+
+    return inputs;
+  };
+
   render() {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: getClassName('bpk-split-input'),
-      children: this.renderInputs()
-    });
+    return (
+      <div className={getClassName('bpk-split-input')}>
+        {this.renderInputs()}
+      </div>
+    );
   }
 }
+
 BpkSplitInput.propTypes = {
-  type: _propTypes.default.oneOf([_bpkComponentInput.INPUT_TYPES.text, _bpkComponentInput.INPUT_TYPES.number]),
-  id: _propTypes.default.string.isRequired,
-  label: _propTypes.default.string.isRequired,
-  name: _propTypes.default.string.isRequired,
-  inputLength: _propTypes.default.number,
-  placeholder: _propTypes.default.string,
-  onChange: _propTypes.default.func.isRequired,
-  onSubmit: _propTypes.default.func.isRequired,
-  large: _propTypes.default.bool
+  type: PropTypes.oneOf([INPUT_TYPES.text, INPUT_TYPES.number]),
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  inputLength: PropTypes.number,
+  placeholder: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  onSubmit: PropTypes.func.isRequired,
+  large: PropTypes.bool,
 };
+
 BpkSplitInput.defaultProps = {
-  type: _bpkComponentInput.INPUT_TYPES.number,
+  type: INPUT_TYPES.number,
   inputLength: 4,
   large: true,
-  placeholder: ''
+  placeholder: '',
 };
-var _default = BpkSplitInput;
-exports.default = _default;
+
+export default BpkSplitInput;
+export { INPUT_TYPES };

package/bpk-component-split-input/src/BpkSplitInput.module.scss

@@ -0,0 +1,36 @@
+/*
+ * 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.
+ */
+
+ /* stylelint-disable */
+
+@import '~bpk-mixins/index.scss';
+
+.bpk-split-input {
+  @include bpk-body-default;
+  display: flex;
+  width: 100%;
+  padding-top: bpk-spacing-sm();
+  flex-direction: row;
+  align-items: center;
+  direction: ltr;
+
+  &__textbox {
+    display: flex;
+    align-items: center;
+  }
+}

package/bpk-component-star-rating/README.md

@@ -0,0 +1,96 @@
+# bpk-component-star-rating
+
+> Backpack rating star component.
+
+## Installation
+
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
+
+## Usage
+
+```js
+import BpkStarRating, {
+  BpkStar,
+  STAR_TYPES,
+  BpkInteractiveStarRating,
+  withInteractiveStarRatingState
+} from '@skyscanner/backpack-web/bpk-component-star-rating';
+
+const InteractiveStarRating = withInteractiveStarRatingState(BpkInteractiveStarRating);
+
+export default () => (
+  <div>
+    <BpkStar
+      type={STAR_TYPES.HALF}
+    />
+    <BpkStarRating
+      rating={3.5}
+      large
+      ratingLabel={(rating, maxRating) => `Rated ${rating} out of ${maxRating} stars`}
+    />
+    <InteractiveStarRating
+      id="large-star-rating"
+      onRatingSelect={(rating) => console.log(rating)}
+      getStarLabel={(rating, maxRating) => `${rating} out of ${maxRating} stars`}
+    />
+  </div>
+);
+```
+
+## Props
+
+### BpkStarRating
+
+| Property       | PropType                | Required | Default Value       |
+| -------------- | ----------------------- | -------- | ------------------- |
+| ratingLabel    | oneOfType(string, func) | true     | -                   |
+| className      | string                  | false    | null                |
+| large          | bool                    | false    | false               |
+| maxRating      | number                  | false    | 5                   |
+| rating         | number                  | false    | 0                   |
+| rounding       | oneOf(ROUNDING_TYPES)   | false    | ROUNDING_TYPES.down |
+
+### BpkStar
+
+| Property    | PropType          | Required | Default Value |
+| ----------- | ----------------- | -------- | ------------- |
+| type        | oneOf(STAR_TYPES) | true     | -             |
+| className   | string            | false    | null          |
+| large       | bool              | false    | false         |
+
+### withInteractiveStarRatingState()
+
+| Property       | PropType | Required | Default Value |
+| -------------- | -------- | -------- | ------------- |
+| onRatingSelect | func     | false    | () => null    |
+
+### BpkInteractiveStarRating
+
+| Property       | PropType | Required | Default Value |
+| -------------- | -------- | -------- | ------------- |
+| getStarLabel   | func     | true     | -             |
+| id             | string   | true     | -             |
+| className      | string   | false    | null          |
+| hoverRating    | number   | false    | 0             |
+| large          | bool     | false    | false         |
+| maxRating      | number   | false    | 5             |
+| onMouseLeave   | func     | false    | () => null    |
+| onRatingHover  | func     | false    | () => null    |
+| onRatingSelect | func     | false    | () => null    |
+| rating         | number   | false    | 0             |
+
+### BpkInteractiveStar
+
+| Property     | PropType          | Required | Default Value |
+| ------------ | ----------------- | -------- | ------------- |
+| label        | bool              | true     | -             |
+| name         | bool              | true     | -             |
+| type         | oneOf(STAR_TYPES) | true     | -             |
+| value        | number            | true     | -             |
+| onClick      | func              | true     | -             |
+| onMouseEnter | func              | true     | -             |
+| selected     | bool              | false    | false         |
+
+## Theme Props
+
+* `starRatingFilledColor`