@skyscanner/backpack-web 3.3.0 → 4.1.0

package/bpk-component-flare/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-flare",
-  "version": "2.1.13",
+  "version": "2.1.14",
   "description": "Backpack FlareBar and ContentBubble component.",
   "license": "Apache-2.0",
   "repository": {
@@ -17,10 +17,10 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-label": "^5.1.10",
-    "bpk-component-text": "^7.0.4",
+    "bpk-component-label": "^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": {

package/bpk-component-floating-notification/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-floating-notification",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Backpack floating-notification component.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,10 +13,10 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "bpk-component-button": "^6.2.5",
-    "bpk-component-text": "^7.0.4",
+    "bpk-component-button": "^6.2.6",
+    "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-form-validation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-form-validation",
-  "version": "4.2.14",
+  "version": "4.2.16",
   "description": "Backpack form-validation component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-animate-height": "^4.1.10",
+    "bpk-animate-height": "^4.1.11",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.2",
+    "bpk-react-utils": "^5.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
@@ -24,11 +24,11 @@
   },
   "devDependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-button": "^6.2.5",
-    "bpk-component-checkbox": "^4.1.12",
-    "bpk-component-icon": "^9.2.11",
-    "bpk-component-input": "^6.1.14",
-    "bpk-component-select": "^5.1.10",
-    "bpk-component-textarea": "^4.2.10"
+    "bpk-component-button": "^6.2.6",
+    "bpk-component-checkbox": "^4.1.13",
+    "bpk-component-icon": "^9.2.12",
+    "bpk-component-input": "^6.1.16",
+    "bpk-component-select": "^5.1.11",
+    "bpk-component-textarea": "^4.2.11"
   }
 }

package/bpk-component-graphic-promotion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-graphic-promotion",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "Backpack graphic-promotion component.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,11 +13,10 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "bpk-component-button": "^6.2.5",
-    "bpk-component-card": "^4.1.11",
-    "bpk-component-text": "^7.0.4",
+    "bpk-component-button": "^6.2.6",
+    "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-graphic-promotion/src/BpkGraphicPromo.js

@@ -23,12 +23,20 @@ import React from 'react';
 import { cssModules } from '../../bpk-react-utils';
 import BpkText from '../../bpk-component-text';
 import BpkButton from '../../bpk-component-button';
-import BpkCard from '../../bpk-component-card';
 
 import STYLES from './BpkGraphicPromo.module.scss';
 
 const getClassName = cssModules(STYLES);
 
+const ACCESSIBILITY_KEYS = {
+  Enter: 13 /* Enter */,
+  Space: 32 /* Space */,
+};
+
+const isAccessibilityClick = (event: React.KeyboardEvent<HTMLElement>) =>
+  Object.keys(ACCESSIBILITY_KEYS).includes(event.key) ||
+  Object.values(ACCESSIBILITY_KEYS).includes(event.keyCode || event.which);
+
 export const TEXT_ALIGN = {
   start: 'start',
   center: 'center',
@@ -94,8 +102,10 @@ const BpkGraphicPromo = (props: Props) => {
     event.stopPropagation();
     onClick();
   };
+  const onKeyWrapper = (event: React.KeyboardEvent<HTMLElement>) =>
+    isAccessibilityClick(event) && onClick();
 
-  const cardClasses = getClassName('bpk-graphic-promo', className);
+  const cardClasses = getClassName('bpk-card', 'bpk-graphic-promo', className);
   const containerClasses = getClassName(
     'bpk-graphic-promo__container',
     `bpk-graphic-promo__container--${textAlign}`,
@@ -104,13 +114,19 @@ const BpkGraphicPromo = (props: Props) => {
 
   const getTextClasses = (baseClass: string) =>
     getClassName(baseClass, `${baseClass}--${textAlign}`);
+
   return (
-    <BpkCard
+    // The card appears as a single component for the screen reader; its children are hidden. The card handles mouse
+    // clicks and key presses (Enter/Space) for the whole component, as described here:
+    // https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets
+    <div
       className={cardClasses}
       style={style}
-      onClick={onClickWrapper}
+      role="link"
       aria-label={constructAriaLabel(props)}
-      padded={false}
+      tabIndex={0}
+      onClick={onClickWrapper}
+      onKeyDown={onKeyWrapper}
     >
       <div className={containerClasses} aria-hidden>
         <div className={getTextClasses('bpk-graphic-promo__sponsor-content')}>
@@ -163,7 +179,7 @@ const BpkGraphicPromo = (props: Props) => {
           </BpkButton>
         </div>
       </div>
-    </BpkCard>
+    </div>
   );
 };
 

package/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.scss

@@ -19,6 +19,10 @@
 @import '~bpk-mixins/index';
 @import './custom-breakpoints.module';
 
+.bpk-card {
+  @include bpk-card;
+}
+
 .bpk-graphic-promo {
   max-width: 65.5rem;
   margin-right: auto;

package/bpk-component-grid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-grid",
-  "version": "3.1.10",
+  "version": "3.1.11",
   "description": "Backpack grid components.",
   "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-grid-toggle/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-grid-toggle",
-  "version": "3.1.10",
+  "version": "3.1.11",
   "description": "Backpack vertical grid toggle component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-component-link": "^3.1.10",
+    "bpk-component-link": "^3.1.11",
     "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-horizontal-nav/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-horizontal-nav",
-  "version": "5.1.11",
+  "version": "5.1.12",
   "description": "Backpack horizontal nav component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-mobile-scroll-container": "^3.1.10",
+    "bpk-component-mobile-scroll-container": "^3.1.11",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.2",
+    "bpk-react-utils": "^5.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-text": "^7.0.4",
-    "bpk-storybook-utils": "^1.1.9"
+    "bpk-component-text": "^7.0.5",
+    "bpk-storybook-utils": "^1.1.10"
   }
 }

package/bpk-component-icon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-icon",
-  "version": "9.2.11",
+  "version": "9.2.12",
   "description": "Backpack icon components.",
   "license": "Apache-2.0",
   "repository": {
@@ -20,13 +20,13 @@
     "@skyscanner/bpk-foundations-web": "^8.0.0",
     "@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"
   },
   "devDependencies": {
-    "bpk-component-button": "^6.2.5",
-    "bpk-component-list": "^4.0.3",
-    "bpk-component-text": "^7.0.4"
+    "bpk-component-button": "^6.2.6",
+    "bpk-component-list": "^4.0.4",
+    "bpk-component-text": "^7.0.5"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

package/bpk-component-image/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-image",
-  "version": "5.1.12",
+  "version": "5.1.13",
   "description": "Backpack image component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,9 +15,9 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-spinner": "^5.1.10",
+    "bpk-component-spinner": "^5.1.11",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.2",
+    "bpk-react-utils": "^5.0.0",
     "prop-types": "^15.7.2",
     "react-transition-group": "^2.5.3"
   },
@@ -25,7 +25,7 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-mobile-scroll-container": "^3.1.10",
-    "bpk-component-text": "^7.0.4"
+    "bpk-component-mobile-scroll-container": "^3.1.11",
+    "bpk-component-text": "^7.0.5"
   }
 }

package/bpk-component-infinite-scroll/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-infinite-scroll",
-  "version": "4.1.10",
+  "version": "4.1.11",
   "description": "Backpack infinite scroll 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",
     "intersection-observer": "^0.7.0",
     "prop-types": "^15.7.2"
   },
@@ -23,9 +23,9 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-button": "^6.2.5",
-    "bpk-component-list": "^4.0.3",
-    "bpk-component-spinner": "^5.1.10",
-    "bpk-storybook-utils": "^1.1.9"
+    "bpk-component-button": "^6.2.6",
+    "bpk-component-list": "^4.0.4",
+    "bpk-component-spinner": "^5.1.11",
+    "bpk-storybook-utils": "^1.1.10"
   }
 }

package/bpk-component-input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-input",
-  "version": "6.1.14",
+  "version": "6.1.16",
   "description": "Backpack input component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,17 +14,17 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "bpk-component-icon": "^9.2.11",
+    "bpk-component-icon": "^9.2.12",
     "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-banner-alert": "^6.1.14",
-    "bpk-component-label": "^5.1.10",
-    "bpk-storybook-utils": "^1.1.9"
+    "bpk-component-banner-alert": "^6.1.16",
+    "bpk-component-label": "^5.1.11",
+    "bpk-storybook-utils": "^1.1.10"
   }
 }

package/bpk-component-label/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-label",
-  "version": "5.1.10",
+  "version": "5.1.11",
   "description": "Backpack label 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-link/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-link",
-  "version": "3.1.10",
+  "version": "3.1.11",
   "description": "Backpack link 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-list/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-list",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "description": "Backpack list 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-loading-button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-loading-button",
-  "version": "6.1.5",
+  "version": "6.1.6",
   "description": "Backpack loading button component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,15 +14,15 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-button": "^6.2.5",
-    "bpk-component-icon": "^9.2.11",
-    "bpk-component-spinner": "^5.1.10",
+    "bpk-component-button": "^6.2.6",
+    "bpk-component-icon": "^9.2.12",
+    "bpk-component-spinner": "^5.1.11",
     "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-map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-map",
-  "version": "6.0.6",
+  "version": "6.0.7",
   "description": "Backpack map component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,18 +15,18 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "@react-google-maps/api": "^2.8.1",
-    "bpk-component-spinner": "^5.1.10",
+    "bpk-component-spinner": "^5.1.11",
     "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.8.3 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-icon": "^9.2.11",
-    "bpk-component-text": "^7.0.4",
-    "bpk-storybook-utils": "^1.1.9",
+    "bpk-component-icon": "^9.2.12",
+    "bpk-component-text": "^7.0.5",
+    "bpk-storybook-utils": "^1.1.10",
     "prop-types": "^15.5.8"
   }
 }

package/bpk-component-mobile-scroll-container/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-mobile-scroll-container",
-  "version": "3.1.10",
+  "version": "3.1.11",
   "description": "Backpack mobile scroll container 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",
     "lodash.debounce": "^4.0.8",
     "prop-types": "^15.7.2"
   },

package/bpk-component-modal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-modal",
-  "version": "3.1.12",
+  "version": "4.0.1",
   "description": "Backpack modal component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,20 +14,20 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-close-button": "^3.1.11",
-    "bpk-component-icon": "^9.2.11",
-    "bpk-component-link": "^3.1.10",
-    "bpk-component-navigation-bar": "^3.1.12",
+    "bpk-component-close-button": "^3.1.12",
+    "bpk-component-icon": "^9.2.12",
+    "bpk-component-link": "^3.1.11",
+    "bpk-component-navigation-bar": "^3.1.13",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.2",
-    "bpk-scrim-utils": "^5.1.9",
+    "bpk-react-utils": "^5.0.0",
+    "bpk-scrim-utils": "^5.1.10",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-button": "^6.2.5",
-    "bpk-component-text": "^7.0.4"
+    "bpk-component-button": "^6.2.6",
+    "bpk-component-text": "^7.0.5"
   }
 }

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-navigation-bar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-navigation-bar",
-  "version": "3.1.12",
+  "version": "3.1.13",
   "description": "Backpack nativation bar component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,11 +14,11 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "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": {
@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-icon": "^9.2.11",
-    "bpk-storybook-utils": "^1.1.9"
+    "bpk-component-icon": "^9.2.12",
+    "bpk-storybook-utils": "^1.1.10"
   }
 }

package/bpk-component-navigation-stack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-navigation-stack",
-  "version": "3.1.12",
+  "version": "3.1.13",
   "description": "Backpack navigation stack 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-transition-group": "^2.5.3"
   },
@@ -24,9 +24,9 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-button": "^6.2.5",
-    "bpk-component-icon": "^9.2.11",
-    "bpk-component-navigation-bar": "^3.1.12",
-    "bpk-component-rtl-toggle": "^3.1.10"
+    "bpk-component-button": "^6.2.6",
+    "bpk-component-icon": "^9.2.12",
+    "bpk-component-navigation-bar": "^3.1.13",
+    "bpk-component-rtl-toggle": "^3.1.11"
   }
 }