@skyscanner/backpack-web 3.3.0 → 4.1.0

package/bpk-component-nudger/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-nudger",
-  "version": "7.0.4",
+  "version": "7.0.5",
   "description": "Backpack nudger component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,10 +15,10 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-button": "^6.2.5",
-    "bpk-component-icon": "^9.2.11",
+    "bpk-component-button": "^6.2.6",
+    "bpk-component-icon": "^9.2.12",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.2",
+    "bpk-react-utils": "^5.0.0",
     "lodash.clamp": "^4.0.3",
     "prop-types": "^15.7.2"
   },
@@ -26,7 +26,7 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-label": "^5.1.10",
-    "bpk-storybook-utils": "^1.1.9"
+    "bpk-component-label": "^5.1.11",
+    "bpk-storybook-utils": "^1.1.10"
   }
 }

package/bpk-component-overlay/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-overlay",
-  "version": "2.1.12",
+  "version": "2.1.13",
   "description": "Backpack overlay component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,15 +14,15 @@
   },
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.2",
+    "bpk-react-utils": "^5.0.0",
     "prop-types": "^15.5.8"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-image": "^5.1.12",
-    "bpk-component-text": "^7.0.4"
+    "bpk-component-image": "^5.1.13",
+    "bpk-component-text": "^7.0.5"
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8"
 }

package/bpk-component-pagination/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-pagination",
-  "version": "4.0.9",
+  "version": "4.0.10",
   "description": "Backpack pagination component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,15 +14,15 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-button": "^6.2.5",
+    "bpk-component-button": "^6.2.6",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.2",
+    "bpk-react-utils": "^5.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-icon": "^9.2.11"
+    "bpk-component-icon": "^9.2.12"
   }
 }

package/bpk-component-panel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-panel",
-  "version": "3.1.10",
+  "version": "3.1.11",
   "description": "Backpack panel component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.2",
+    "bpk-react-utils": "^5.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-phone-input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-phone-input",
-  "version": "7.1.16",
+  "version": "7.1.18",
   "description": "Backpack phone input component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,19 +15,19 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-input": "^6.1.14",
-    "bpk-component-label": "^5.1.10",
-    "bpk-component-select": "^5.1.10",
-    "bpk-component-text": "^7.0.4",
+    "bpk-component-input": "^6.1.16",
+    "bpk-component-label": "^5.1.11",
+    "bpk-component-select": "^5.1.11",
+    "bpk-component-text": "^7.0.5",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.2",
+    "bpk-react-utils": "^5.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-fieldset": "^4.1.16",
-    "bpk-component-image": "^5.1.12"
+    "bpk-component-fieldset": "^4.1.18",
+    "bpk-component-image": "^5.1.13"
   }
 }

package/bpk-component-popover/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-popover",
-  "version": "5.0.1",
+  "version": "5.0.3",
   "description": "Backpack popover component.",
   "license": "Apache-2.0",
   "repository": {
@@ -17,19 +17,19 @@
     "@popperjs/core": "^2.11.5",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
-    "bpk-component-close-button": "^3.1.11",
-    "bpk-component-link": "^3.1.10",
-    "bpk-component-text": "^7.0.4",
+    "bpk-component-close-button": "^3.1.12",
+    "bpk-component-link": "^3.1.11",
+    "bpk-component-text": "^7.0.5",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.2",
+    "bpk-react-utils": "^5.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-button": "^6.2.5",
-    "bpk-component-content-container": "^5.0.4",
-    "bpk-component-input": "^6.1.14"
+    "bpk-component-button": "^6.2.6",
+    "bpk-component-content-container": "^5.0.5",
+    "bpk-component-input": "^6.1.16"
   }
 }

package/bpk-component-popover/src/BpkPopoverPortal.js

@@ -23,7 +23,7 @@ import PropTypes from 'prop-types';
 import React, { Component, type Node } from 'react';
 import focusStore from 'a11y-focus-store';
 
-import { Portal, cssModules } from '../../bpk-react-utils';
+import { PortalV1, cssModules } from '../../bpk-react-utils';
 
 import keyboardFocusScope from './keyboardFocusScope';
 import STYLES from './BpkPopover.module.scss';
@@ -217,7 +217,7 @@ class BpkPopoverPortal extends Component<Props> {
     }
 
     return (
-      <Portal
+      <PortalV1
         beforeClose={this.beforeClose}
         className={classNames.join(' ')}
         isOpen={isOpen}
@@ -229,7 +229,7 @@ class BpkPopoverPortal extends Component<Props> {
       >
         {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
         <BpkPopover onClose={this.onClose} {...rest} />
-      </Portal>
+      </PortalV1>
     );
   }
 }

package/bpk-component-price/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-price",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Backpack price component.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,9 +13,9 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "bpk-component-text": "^7.0.4",
+    "bpk-component-text": "^7.0.5",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.2",
+    "bpk-react-utils": "^5.0.0",
     "prop-types": "^15.5.8"
   },
   "peerDependencies": {

package/bpk-component-progress/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-progress",
-  "version": "3.1.10",
+  "version": "3.1.11",
   "description": "Backpack progress bar component.",
   "license": "Apache-2.0",
   "repository": {
@@ -16,7 +16,7 @@
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.2",
+    "bpk-react-utils": "^5.0.0",
     "lodash.clamp": "^4.0.3",
     "prop-types": "^15.7.2"
   },
@@ -24,7 +24,7 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-button": "^6.2.5",
-    "bpk-storybook-utils": "^1.1.9"
+    "bpk-component-button": "^6.2.6",
+    "bpk-storybook-utils": "^1.1.10"
   }
 }

package/bpk-component-radio/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-radio",
-  "version": "3.1.11",
+  "version": "3.1.12",
   "description": "Backpack radio button component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.2",
+    "bpk-react-utils": "^5.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
@@ -23,6 +23,6 @@
   },
   "devDependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-storybook-utils": "^1.1.9"
+    "bpk-storybook-utils": "^1.1.10"
   }
 }

package/bpk-component-rating/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-rating",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "description": "Backpack rating component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.2",
+    "bpk-react-utils": "^5.0.0",
     "lodash.clamp": "^4.0.3",
     "prop-types": "^15.5.8"
   },
@@ -24,6 +24,6 @@
   },
   "devDependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-text": "^7.0.4"
+    "bpk-component-text": "^7.0.5"
   }
 }

package/bpk-component-rtl-toggle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-rtl-toggle",
-  "version": "3.1.10",
+  "version": "3.1.11",
   "description": "Backpack RTL toggle component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-component-link": "^3.1.10",
-    "bpk-react-utils": "^4.1.2",
+    "bpk-component-link": "^3.1.11",
+    "bpk-react-utils": "^5.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-scrollable-calendar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-scrollable-calendar",
-  "version": "6.1.17",
+  "version": "6.1.19",
   "description": "Backpack scrollable calendar component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,16 +15,16 @@
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-calendar": "^11.1.16",
-    "bpk-component-text": "^7.0.4",
+    "bpk-component-calendar": "^11.1.18",
+    "bpk-component-text": "^7.0.5",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.2",
+    "bpk-react-utils": "^5.0.0",
     "date-fns": "^2.21.1",
     "prop-types": "^15.5.8",
     "react-virtualized": "^9.22.3"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^1.1.9"
+    "bpk-storybook-utils": "^1.1.10"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

package/bpk-component-section-list/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-section-list",
-  "version": "3.2.11",
+  "version": "3.2.12",
   "description": "Backpack section list component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,14 +15,14 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-icon": "^9.2.11",
-    "bpk-component-text": "^7.0.4",
+    "bpk-component-icon": "^9.2.12",
+    "bpk-component-text": "^7.0.5",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.2",
+    "bpk-react-utils": "^5.0.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^1.1.9"
+    "bpk-storybook-utils": "^1.1.10"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

package/bpk-component-select/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-select",
-  "version": "5.1.10",
+  "version": "5.1.11",
   "description": "Backpack select component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,11 +15,11 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.2",
+    "bpk-react-utils": "^5.0.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^1.1.9"
+    "bpk-storybook-utils": "^1.1.10"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

package/bpk-component-skip-link/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-skip-link",
-  "version": "2.1.10",
+  "version": "2.1.11",
   "description": "Backpack skip-link component.",
   "main": "index.js",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.2",
+    "bpk-react-utils": "^5.0.0",
     "prop-types": "^15.5.8"
   },
   "publishConfig": {

package/bpk-component-slider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-slider",
-  "version": "3.1.10",
+  "version": "3.1.11",
   "description": "Backpack slider component.",
   "license": "Apache-2.0",
   "repository": {
@@ -16,7 +16,7 @@
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.2",
+    "bpk-react-utils": "^5.0.0",
     "prop-types": "^15.7.2",
     "react-slider": "^1.3.1"
   },
@@ -24,6 +24,6 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-rtl-toggle": "^3.1.10"
+    "bpk-component-rtl-toggle": "^3.1.11"
   }
 }

package/bpk-component-spinner/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-spinner",
-  "version": "5.1.10",
+  "version": "5.1.11",
   "description": "Backpack spinner components.",
   "license": "Apache-2.0",
   "repository": {
@@ -16,7 +16,7 @@
   "dependencies": {
     "@skyscanner/bpk-svgs": "^14.1.9",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.2",
+    "bpk-react-utils": "^5.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-split-input/README.md

@@ -0,0 +1,42 @@
+# bpk-component-split-input
+
+> Backpack split-input component.
+
+## Installation
+
+```sh
+npm install bpk-component-split-input --save-dev
+```
+
+## Usage
+
+```js
+import React from 'react';
+import BpkSplitInput, { INPUT_TYPES } from 'bpk-component-split-input';
+
+export default () => (
+  <BpkSplitInput
+    type={INPUT_TYPES.number}
+    name="otpInput"
+    id="otpInput"
+    label="otp input"
+    onChange={(e) => console.log('On Input Change')}
+    onSubmit={(e) => console.log('On Submit')}
+  />
+);
+```
+
+## Props
+
+
+| Property         | PropType                   | Required            | Default Value            |
+| ---------------- | -------------------------- | ------------------- | ------------------------ |
+| id               | string                     | true                | -                        |
+| name             | string                     | true                | -                        |
+| type             | INPUT_TYPES (one of)       | false               | INPUT_TYPES.number       |
+| inputLength      | number                     | false               | 4                        |
+| placeholder      | string                     | false               | -                        |
+| label            | string                     | true                | -                        |
+| large            | bool                       | false               | true                     |
+| onChange         | bool                       | true                | -                        |
+| onSubmit         | bool                       | true                | -                        |

package/bpk-component-split-input/index.js

@@ -0,0 +1,27 @@
+/*
+ * 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 BpkSplitInput, {
+  type Props as BpkSplitInputProps,
+  INPUT_TYPES,
+} from './src/BpkSplitInput';
+
+export type { BpkSplitInputProps };
+export { INPUT_TYPES };
+export default BpkSplitInput;

package/bpk-component-split-input/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "bpk-component-split-input",
+  "version": "1.0.0",
+  "description": "Backpack split-input 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/"
+  },
+  "dependencies": {
+    "bpk-component-input": "^6.1.16",
+    "bpk-mixins": "^31.1.1",
+    "bpk-react-utils": "^5.0.0",
+    "prop-types": "^15.5.8"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  }
+}

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

@@ -0,0 +1,71 @@
+/*
+ * 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 BpkInput from '../../bpk-component-input';
+import { cssModules } from '../../bpk-react-utils';
+
+import STYLES from './BpkInputField.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+class BpkInputField extends Component {
+  componentDidUpdate(prevProps) {
+    const { focus } = this.props;
+    if (prevProps.focus !== focus && this.input && focus) {
+      this.input.focus();
+      this.input.select();
+    }
+  }
+
+  render() {
+    const { focus, id, index, label, value, ...rest } = this.props;
+    return (
+      <div key={index} className={getClassName('BpkInputField')}>
+        <BpkInput
+          id={id}
+          autoComplete="off"
+          maxLength="1"
+          aria-label={`${label} ${index}`}
+          inputRef={(input) => {
+            this.input = input;
+          }}
+          value={value || ''}
+          {...rest}
+        />
+      </div>
+    );
+  }
+}
+
+BpkInputField.propTypes = {
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  value: PropTypes.string,
+  focus: PropTypes.bool.isRequired,
+  index: PropTypes.number.isRequired,
+};
+
+BpkInputField.defaultProps = {
+  value: '',
+};
+
+export default BpkInputField;

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;
+}