@skyscanner/backpack-web 4.0.0 → 5.0.0

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';
+
+.BpkInputField {
+  display: flex;
+  max-width: 3*bpk-spacing-xxl();
+  margin-right: bpk-spacing-xs();
+  align-items: center;
+
+  input {
+    text-align: center;
+  }
+}
+
+.BpkInputField:last-child {
+  margin-right: $bpk-spacing-none;
+}

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

@@ -0,0 +1,243 @@
+/*
+ * 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 React, { 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;
+const LEFT_ARROW = 37;
+const RIGHT_ARROW = 39;
+const DELETE = 46;
+const SPACEBAR = 32;
+const ENTER = 13;
+
+class BpkSplitInput extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      focusedInput: 0,
+      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 (
+      <div className={getClassName('BpkSplitInput')}>{this.renderInputs()}</div>
+    );
+  }
+}
+
+BpkSplitInput.propTypes = {
+  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: INPUT_TYPES.number,
+  inputLength: 4,
+  large: true,
+  placeholder: '',
+};
+
+export default BpkSplitInput;
+export { INPUT_TYPES };

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

@@ -0,0 +1,18 @@
+/*
+ * 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.
+*/
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-split-input{display:flex}

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';
+
+.BpkSplitInput {
+  @include bpk-body-default;
+  display: flex;
+  width: 100%;
+  padding-top: bpk-spacing-xs();
+  flex-direction: row;
+  align-items: center;
+  direction: ltr;
+
+  &__textbox {
+    display: flex;
+    align-items: center;
+  }
+}

package/bpk-component-star-rating/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-star-rating",
-  "version": "3.1.12",
+  "version": "3.1.13",
   "description": "Backpack rating star component.",
   "license": "Apache-2.0",
   "repository": {

package/bpk-component-ticket/README.md

@@ -34,5 +34,4 @@ export default () => (
 | vertical      | bool     | false    | false         |
 | stubProps     | object   | false    | {}            |
 | stubClassName | string   | false    | null          |
-| withNotches   | bool     | false    | true          |
 

package/bpk-component-ticket/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-ticket",
-  "version": "4.1.12",
+  "version": "5.0.0",
   "description": "Backpack ticket component.",
   "license": "Apache-2.0",
   "repository": {

package/bpk-component-ticket/src/BpkTicket.js

@@ -33,7 +33,6 @@ type Props = {
   stubProps: { [string]: any },
   padded: boolean,
   vertical: boolean,
-  withNotches: boolean,
   className: ?string,
   stubClassName: ?string,
   href: ?string,
@@ -49,7 +48,6 @@ const BpkTicket = (props: Props) => {
     stubClassName,
     stubProps,
     vertical,
-    withNotches,
     ...rest
   } = props;
 
@@ -57,7 +55,6 @@ const BpkTicket = (props: Props) => {
     'bpk-ticket',
     className,
     vertical && 'bpk-ticket--vertical',
-    withNotches && 'bpk-ticket--with-notches',
   );
 
   const mainClassNames = getClassName(
@@ -66,7 +63,6 @@ const BpkTicket = (props: Props) => {
     padded && 'bpk-ticket__main--padded',
     vertical && 'bpk-ticket__main--vertical',
     !vertical && 'bpk-ticket__main--horizontal',
-    withNotches && 'bpk-ticket__paper--with-notches',
   );
 
   const mainInnerClassNames = getClassName(
@@ -82,7 +78,6 @@ const BpkTicket = (props: Props) => {
     padded && 'bpk-ticket__stub--padded',
     vertical && 'bpk-ticket__stub--vertical',
     !vertical && 'bpk-ticket__stub--horizontal',
-    withNotches && 'bpk-ticket__paper--with-notches',
   );
 
   const stubInnerClassNames = getClassName(
@@ -91,30 +86,6 @@ const BpkTicket = (props: Props) => {
     !vertical && 'bpk-ticket__stub-inner--horizontal',
   );
 
-  const punchlineClassNames = getClassName(
-    'bpk-ticket__punchline',
-    vertical &&
-      (withNotches
-        ? 'bpk-ticket__punchline--horizontal-with-notches'
-        : 'bpk-ticket__punchline--horizontal'),
-    !vertical &&
-      (withNotches
-        ? 'bpk-ticket__punchline--vertical-with-notches'
-        : 'bpk-ticket__punchline--vertical'),
-  );
-
-  const startNotchClassNames = getClassName(
-    'bpk-ticket__notch',
-    vertical && 'bpk-ticket__notch--left',
-    !vertical && 'bpk-ticket__notch--top',
-  );
-
-  const endNotchClassNames = getClassName(
-    'bpk-ticket__notch',
-    vertical && 'bpk-ticket__notch--right',
-    !vertical && 'bpk-ticket__notch--bottom',
-  );
-
   const mainContent = padded ? (
     children
   ) : (
@@ -131,15 +102,6 @@ const BpkTicket = (props: Props) => {
     <div key="main" className={mainClassNames}>
       {mainContent}
     </div>,
-    <div
-      key="punchline"
-      className={punchlineClassNames}
-      role="presentation"
-      aria-hidden="true"
-    >
-      {withNotches && <div className={startNotchClassNames} />}
-      {withNotches && <div className={endNotchClassNames} />}
-    </div>,
     // $FlowFixMe[cannot-spread-indexer] - inexact rest. See 'decisions/flowfixme.md'.
     <div key="stub" className={stubClassNames} {...stubProps}>
       {stubContent}
@@ -172,7 +134,6 @@ BpkTicket.propTypes = {
   vertical: PropTypes.bool,
   stubClassName: PropTypes.string,
   stubProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-  withNotches: PropTypes.bool,
 };
 
 BpkTicket.defaultProps = {
@@ -182,7 +143,6 @@ BpkTicket.defaultProps = {
   vertical: false,
   stubClassName: null,
   stubProps: {},
-  withNotches: true,
 };
 
 export default BpkTicket;

package/bpk-component-ticket/src/BpkTicket.module.scss

@@ -41,7 +41,6 @@ $bpk-spacing-v2: true;
 }
 
 .bpk-ticket {
-  $notch-size: bpk-spacing-md();
   $ticket-padding: bpk-spacing-base();
 
   position: relative;
@@ -49,12 +48,14 @@ $bpk-spacing-v2: true;
   display: flex;
   flex-direction: row;
   align-items: stretch;
+  flex: none;
   color: $bpk-card-color;
   text-decoration: none;
+  box-shadow: 0 5px 12px rgba($bpk-button-outline-background-color, 0.08),
+    0 3px 12px rgba($bpk-button-outline-background-color, 0.08);
   cursor: pointer;
 
-  @include bpk-box-shadow-sm;
-  @include bpk-border-radius-sm;
+  @include bpk-border-radius-md;
   @include hidden-box-shadow-after;
 
   @include bpk-hover {
@@ -71,35 +72,22 @@ $bpk-spacing-v2: true;
     flex-direction: column;
   }
 
-  &--with-notches {
-    box-shadow: none;
-
-    &::after {
-      content: none;
-    }
-  }
-
   &__paper {
     position: relative;
     background-color: $bpk-card-background-color;
-
-    &--with-notches {
-      @include bpk-box-shadow-sm;
-      @include hidden-box-shadow-after;
-    }
   }
 
   @mixin main-styles {
     &--horizontal {
-      border-radius: $bpk-border-radius-sm 0 0 $bpk-border-radius-sm;
+      border-radius: $bpk-border-radius-md 0 0 $bpk-border-radius-md;
 
       @include bpk-rtl {
-        border-radius: 0 $bpk-border-radius-sm $bpk-border-radius-sm 0;
+        border-radius: 0 $bpk-border-radius-md $bpk-border-radius-md 0;
       }
     }
 
     &--vertical {
-      border-radius: $bpk-border-radius-sm $bpk-border-radius-sm 0 0;
+      border-radius: $bpk-border-radius-md $bpk-border-radius-md 0 0;
     }
   }
 
@@ -123,15 +111,18 @@ $bpk-spacing-v2: true;
   @mixin stub-styles {
     &--horizontal {
       min-width: 30%;
-      border-radius: 0 $bpk-border-radius-sm $bpk-border-radius-sm 0;
+      border-radius: 0 $bpk-border-radius-md $bpk-border-radius-md 0;
+      box-shadow: inset $bpk-one-pixel-rem 0 0 $bpk-color-sky-gray-tint-05;
 
       @include bpk-rtl {
-        border-radius: $bpk-border-radius-sm 0 0 $bpk-border-radius-sm;
+        border-radius: $bpk-border-radius-md 0 0 $bpk-border-radius-md;
+        box-shadow: inset (-$bpk-one-pixel-rem) 0 0 $bpk-color-sky-gray-tint-05;
       }
     }
 
     &--vertical {
-      border-radius: 0 0 $bpk-border-radius-sm $bpk-border-radius-sm;
+      border-radius: 0 0 $bpk-border-radius-md $bpk-border-radius-md;
+      box-shadow: inset 0 $bpk-one-pixel-rem 0 $bpk-color-sky-gray-tint-05;
     }
   }
 
@@ -151,147 +142,4 @@ $bpk-spacing-v2: true;
 
     @include stub-styles;
   }
-
-  &__punchline {
-    position: relative;
-    z-index: 1;
-    flex: 0 0 auto;
-    background-color: $bpk-card-background-color;
-
-    &--horizontal {
-      height: $bpk-one-pixel-rem * 2;
-      background-image: linear-gradient(
-        $bpk-color-sky-gray-tint-06,
-        $bpk-color-sky-gray-tint-06
-      );
-      background-repeat: repeat-x;
-      background-position: 0 50%;
-      background-size: 8 * $bpk-one-pixel-rem 2 * $bpk-one-pixel-rem;
-    }
-
-    &--horizontal-with-notches {
-      height: $notch-size * 2;
-      margin: auto $notch-size;
-      padding: 0 $notch-size;
-      background-image: linear-gradient(
-        $bpk-color-sky-gray-tint-06,
-        $bpk-color-sky-gray-tint-06
-      );
-      background-repeat: repeat-x;
-      background-position: 0 50%;
-      background-size: 8 * $bpk-one-pixel-rem 2 * $bpk-one-pixel-rem;
-    }
-
-    &--vertical {
-      width: $bpk-one-pixel-rem * 2;
-      background-image: linear-gradient(
-        $bpk-color-sky-gray-tint-06,
-        $bpk-color-sky-gray-tint-06
-      );
-      background-repeat: repeat-y;
-      background-position: 50% 0;
-      background-size: 2 * $bpk-one-pixel-rem 8 * $bpk-one-pixel-rem;
-    }
-
-    &--vertical-with-notches {
-      width: $notch-size * 2;
-      margin: $notch-size auto;
-      padding: $notch-size 0;
-      background-image: linear-gradient(
-        $bpk-color-sky-gray-tint-06,
-        $bpk-color-sky-gray-tint-06
-      );
-      background-repeat: repeat-y;
-      background-position: 50% 0;
-      background-size: 2 * $bpk-one-pixel-rem 8 * $bpk-one-pixel-rem;
-    }
-
-    &--fallback {
-      display: table-cell;
-      width: 2 * $bpk-one-pixel-rem;
-      background-image: linear-gradient(
-        $bpk-color-sky-gray-tint-06,
-        $bpk-color-sky-gray-tint-06
-      );
-      background-repeat: repeat-y;
-      background-position: 50% 0;
-      background-size: 2 * $bpk-one-pixel-rem 8 * $bpk-one-pixel-rem;
-    }
-  }
-
-  &__notch {
-    position: absolute;
-    width: $notch-size * 2;
-    height: $notch-size;
-    overflow: hidden;
-
-    &::after {
-      position: relative;
-      content: '';
-      display: block;
-      width: $notch-size * 4;
-      height: $notch-size * 4;
-      transform: translate3d(
-        0,
-        0,
-        0
-      ); // BPK-1011 fix rendering bug in safari 11
-
-      border: $notch-size solid $bpk-color-white;
-      border-radius: $notch-size * 2;
-      box-shadow: $bpk-box-shadow-sm inset;
-    }
-
-    &--top {
-      top: -$notch-size;
-
-      &::after {
-        right: -50%;
-        bottom: 200%;
-        left: -50%;
-      }
-    }
-
-    &--right {
-      right: -$notch-size;
-      width: $notch-size;
-      height: $notch-size * 2;
-
-      &::after {
-        right: 100%;
-        bottom: 50%;
-
-        @include bpk-rtl {
-          right: auto;
-          left: 200%;
-        }
-      }
-    }
-
-    &--bottom {
-      bottom: -$notch-size;
-
-      &::after {
-        right: -50%;
-        bottom: 100%;
-        left: -50%;
-      }
-    }
-
-    &--left {
-      left: -$notch-size;
-      width: $notch-size;
-      height: $notch-size * 2;
-
-      &::after {
-        right: 200%;
-        bottom: 50%;
-
-        @include bpk-rtl {
-          right: auto;
-          left: 100%;
-        }
-      }
-    }
-  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",