@skyscanner/backpack-web 4.0.0 → 5.0.0

package/bpk-component-aria-live/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-aria-live",
-  "version": "2.1.17",
+  "version": "2.1.18",
   "description": "Backpack aria-live component.",
   "license": "Apache-2.0",
   "repository": {
@@ -18,9 +18,9 @@
     "prop-types": "^15.5.8"
   },
   "devDependencies": {
-    "bpk-component-chip": "^5.2.15",
+    "bpk-component-chip": "^5.2.16",
     "bpk-component-code": "^3.1.11",
-    "bpk-component-fieldset": "^4.1.17",
+    "bpk-component-fieldset": "^4.1.18",
     "bpk-component-select": "^5.1.11",
     "bpk-component-switch": "^2.1.12"
   },

package/bpk-component-autosuggest/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-autosuggest",
-  "version": "6.1.15",
+  "version": "6.1.16",
   "description": "Backpack autosuggest component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "bpk-component-input": "^6.1.15",
+    "bpk-component-input": "^6.1.16",
     "bpk-mixins": "^31.1.1",
     "bpk-react-utils": "^5.0.0",
     "prop-types": "^15.7.2",

package/bpk-component-banner-alert/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-banner-alert",
-  "version": "6.1.15",
+  "version": "6.1.16",
   "description": "Backpack banner alert component.",
   "license": "Apache-2.0",
   "repository": {
@@ -24,7 +24,7 @@
     "react-transition-group": "^2.5.3"
   },
   "devDependencies": {
-    "bpk-component-aria-live": "^2.1.17",
+    "bpk-component-aria-live": "^2.1.18",
     "bpk-component-button": "^6.2.6",
     "bpk-storybook-utils": "^1.1.10"
   },

package/bpk-component-calendar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-calendar",
-  "version": "11.1.17",
+  "version": "11.1.18",
   "description": "Backpack calendar component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-aria-live": "^2.1.17",
+    "bpk-component-aria-live": "^2.1.18",
     "bpk-component-icon": "^9.2.12",
     "bpk-component-select": "^5.1.11",
     "bpk-mixins": "^31.1.1",

package/bpk-component-chip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-chip",
-  "version": "5.2.15",
+  "version": "5.2.16",
   "description": "Backpack chip component.",
   "license": "Apache-2.0",
   "repository": {
@@ -23,7 +23,7 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-aria-live": "^2.1.17",
+    "bpk-component-aria-live": "^2.1.18",
     "bpk-component-text": "^7.0.5"
   }
 }

package/bpk-component-datepicker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-datepicker",
-  "version": "15.2.17",
+  "version": "15.2.18",
   "description": "Backpack datepicker component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,10 +15,10 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "bpk-component-breakpoint": "^4.0.3",
-    "bpk-component-calendar": "^11.1.17",
-    "bpk-component-input": "^6.1.15",
-    "bpk-component-modal": "^4.0.0",
-    "bpk-component-popover": "^5.0.2",
+    "bpk-component-calendar": "^11.1.18",
+    "bpk-component-input": "^6.1.16",
+    "bpk-component-modal": "^4.0.1",
+    "bpk-component-popover": "^5.0.3",
     "bpk-mixins": "^31.1.1",
     "bpk-react-utils": "^5.0.0",
     "prop-types": "^15.7.2"

package/bpk-component-fieldset/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-fieldset",
-  "version": "4.1.17",
+  "version": "4.1.18",
   "description": "Backpack fieldset component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "bpk-component-form-validation": "^4.2.15",
+    "bpk-component-form-validation": "^4.2.16",
     "bpk-component-label": "^5.1.11",
     "bpk-mixins": "^31.1.1",
     "bpk-react-utils": "^5.0.0",
@@ -24,12 +24,12 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-autosuggest": "^6.1.15",
+    "bpk-component-autosuggest": "^6.1.16",
     "bpk-component-button": "^6.2.6",
-    "bpk-component-calendar": "^11.1.17",
+    "bpk-component-calendar": "^11.1.18",
     "bpk-component-checkbox": "^4.1.13",
-    "bpk-component-datepicker": "^15.2.17",
-    "bpk-component-input": "^6.1.15",
+    "bpk-component-datepicker": "^15.2.18",
+    "bpk-component-input": "^6.1.16",
     "bpk-component-select": "^5.1.11",
     "bpk-component-textarea": "^4.2.11"
   }

package/bpk-component-form-validation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-form-validation",
-  "version": "4.2.15",
+  "version": "4.2.16",
   "description": "Backpack form-validation component.",
   "license": "Apache-2.0",
   "repository": {
@@ -27,7 +27,7 @@
     "bpk-component-button": "^6.2.6",
     "bpk-component-checkbox": "^4.1.13",
     "bpk-component-icon": "^9.2.12",
-    "bpk-component-input": "^6.1.15",
+    "bpk-component-input": "^6.1.16",
     "bpk-component-select": "^5.1.11",
     "bpk-component-textarea": "^4.2.11"
   }

package/bpk-component-input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-input",
-  "version": "6.1.15",
+  "version": "6.1.16",
   "description": "Backpack input component.",
   "license": "Apache-2.0",
   "repository": {
@@ -23,7 +23,7 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-banner-alert": "^6.1.15",
+    "bpk-component-banner-alert": "^6.1.16",
     "bpk-component-label": "^5.1.11",
     "bpk-storybook-utils": "^1.1.10"
   }

package/bpk-component-modal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-modal",
-  "version": "4.0.0",
+  "version": "4.0.1",
   "description": "Backpack modal component.",
   "license": "Apache-2.0",
   "repository": {

package/bpk-component-modal/src/BpkModal.js

@@ -22,7 +22,7 @@ import PropTypes from 'prop-types';
 import React, { type Element } from 'react';
 
 import { withScrim } from '../../bpk-scrim-utils';
-import { Portal, cssModules, isDeviceIphone } from '../../bpk-react-utils';
+import { PortalV1, cssModules, isDeviceIphone } from '../../bpk-react-utils';
 
 import STYLES from './BpkModal.module.scss';
 import BpkModalInner, {
@@ -79,7 +79,7 @@ const BpkModal = (props: Props) => {
   }
 
   return (
-    <Portal
+    <PortalV1
       isOpen={isOpen}
       onClose={onClose}
       target={target}
@@ -96,7 +96,7 @@ const BpkModal = (props: Props) => {
         isIphone={isIphone}
         {...rest}
       />
-    </Portal>
+    </PortalV1>
   );
 };
 

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-phone-input",
-  "version": "7.1.17",
+  "version": "7.1.18",
   "description": "Backpack phone input component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-input": "^6.1.15",
+    "bpk-component-input": "^6.1.16",
     "bpk-component-label": "^5.1.11",
     "bpk-component-select": "^5.1.11",
     "bpk-component-text": "^7.0.5",
@@ -27,7 +27,7 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-fieldset": "^4.1.17",
+    "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.2",
+  "version": "5.0.3",
   "description": "Backpack popover component.",
   "license": "Apache-2.0",
   "repository": {
@@ -30,6 +30,6 @@
   "devDependencies": {
     "bpk-component-button": "^6.2.6",
     "bpk-component-content-container": "^5.0.5",
-    "bpk-component-input": "^6.1.15"
+    "bpk-component-input": "^6.1.16"
   }
 }

package/bpk-component-price/README.md

@@ -12,14 +12,15 @@ npm install bpk-component-price --save-dev
 
 ```js
 import React from 'react';
-import BpkPrice, { SIZES } from 'bpk-component-price';
+import BpkPrice, { SIZES, ALIGNS } from 'bpk-component-price';
 
 export default () => (
   <BpkPrice
     size={SIZES.large}
+    align={ALIGNS.left}
     subtitle="£209"
     title="£1,830"
-    description="/ night"
+    description="a night"
   />
 );
 ```
@@ -30,6 +31,7 @@ export default () => (
 | --------- | -------- | -------- | ------------- |
 | title     | string   | true     | -             |
 | size | oneOf(SIZES)   | false    | SIZES.small         |
+| align | oneOf(ALIGNS)   | false    | ALIGNS.left         |
 | subtitle  | string   | false    | null          |
 | description | string   | false    | null          |
 | className | string   | false    | null          |

package/bpk-component-price/index.js

@@ -17,7 +17,8 @@
  */
 /* @flow strict */
 
-import BpkPrice, { SIZES } from './src/BpkPrice';
+import BpkPrice from './src/BpkPrice';
+import { SIZES, ALIGNS } from './src/common-types';
 
 export default BpkPrice;
-export { SIZES };
+export { SIZES, ALIGNS };

package/bpk-component-price/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-price",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "Backpack price component.",
   "license": "Apache-2.0",
   "repository": {

package/bpk-component-price/src/BpkPrice.js

@@ -24,15 +24,12 @@ import { cssModules } from '../../bpk-react-utils';
 import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
 
 import STYLES from './BpkPrice.module.scss';
-
-export const SIZES = {
-  small: 'small',
-  large: 'large',
-};
+import { SIZES, ALIGNS } from './common-types';
 
 type Props = {
   title: string,
   size: $Values<typeof SIZES>,
+  align: $Values<typeof ALIGNS>,
   className: ?string,
   subtitle: ?string,
   description: ?string,
@@ -41,15 +38,17 @@ type Props = {
 const getClassName = cssModules(STYLES);
 
 const BpkPrice = (props: Props) => {
-  const { className, description, size, subtitle, title, ...rest } = props;
+  const { align, className, description, size, subtitle, title, ...rest } =
+    props;
 
   const isSmall = size === SIZES.small;
+  const isAlignRight = align === ALIGNS.right;
 
   return (
     <div
       className={getClassName(
         'bpk-price',
-        isSmall && 'bpk-price--small',
+        isAlignRight && 'bpk-price--right',
         className,
       )}
       // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
@@ -64,9 +63,15 @@ const BpkPrice = (props: Props) => {
           {subtitle}
         </BpkText>
       )}
-      <div className={isSmall && getClassName('bpk-price__titleColumn')}>
+      <div
+        className={isAlignRight && getClassName('bpk-price__column-container')}
+      >
         <BpkText
           textStyle={isSmall ? TEXT_STYLES.heading4 : TEXT_STYLES.xxl}
+          className={getClassName(
+            'bpk-price__title',
+            !isAlignRight && 'bpk-price__spacing',
+          )}
           tagName="span"
         >
           {title}
@@ -75,10 +80,7 @@ const BpkPrice = (props: Props) => {
           <BpkText
             textStyle={isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm}
             tagName="span"
-            className={getClassName(
-              'bpk-price__description',
-              !isSmall && 'bpk-price__descriptionSpacing',
-            )}
+            className={getClassName('bpk-price__description')}
           >
             {description}
           </BpkText>
@@ -91,6 +93,7 @@ const BpkPrice = (props: Props) => {
 BpkPrice.propTypes = {
   title: PropTypes.string.isRequired,
   size: PropTypes.oneOf(Object.keys(SIZES)),
+  align: PropTypes.oneOf(Object.keys(ALIGNS)),
   className: PropTypes.string,
   subtitle: PropTypes.string,
   description: PropTypes.string,
@@ -98,6 +101,7 @@ BpkPrice.propTypes = {
 
 BpkPrice.defaultProps = {
   size: SIZES.small,
+  align: ALIGNS.left,
   className: null,
   subtitle: null,
   description: null,

package/bpk-component-price/src/BpkPrice.module.scss

@@ -22,7 +22,7 @@
   display: flex;
   flex-direction: column;
 
-  &--small {
+  &--right {
     text-align: right;
 
     @include bpk-rtl {
@@ -35,21 +35,27 @@
     text-decoration-line: line-through;
   }
 
-  &__titleColumn {
+  &__column-container {
     display: flex;
     flex-direction: column;
   }
 
-  &__description {
-    color: $bpk-color-sky-gray-tint-02;
+  &__title {
+    word-break: break-all;
+  }
 
-    &Spacing {
-      margin-left: bpk-spacing-sm();
+  &__spacing::after {
+    content: '';
+    margin-right: bpk-spacing-sm();
 
-      @include bpk-rtl {
-        margin-right: bpk-spacing-sm();
-        margin-left: unset;
-      }
+    @include bpk-rtl {
+      margin-right: unset;
+      margin-left: bpk-spacing-sm();
     }
   }
+
+  &__description {
+    color: $bpk-color-sky-gray-tint-02;
+    white-space: nowrap;
+  }
 }

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

@@ -0,0 +1,29 @@
+/*
+ * 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 */
+
+export const SIZES = {
+  small: 'small',
+  large: 'large',
+};
+
+export const ALIGNS = {
+  left: 'left',
+  right: 'right',
+};

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-scrollable-calendar",
-  "version": "6.1.18",
+  "version": "6.1.19",
   "description": "Backpack scrollable calendar component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-calendar": "^11.1.17",
+    "bpk-component-calendar": "^11.1.18",
     "bpk-component-text": "^7.0.5",
     "bpk-mixins": "^31.1.1",
     "bpk-react-utils": "^5.0.0",

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;