@skyscanner/backpack-web 6.0.0 → 6.1.0

package/bpk-component-barchart/data.json

@@ -15,88 +15,6 @@
     {
       "month": "Apr",
       "price": 448
-    },
-    {
-      "month": "May",
-      "price": 344
-    },
-    {
-      "month": "Jun",
-      "price": 322
-    },
-    {
-      "month": "Jul",
-      "price": 340
-    },
-    {
-      "month": "Aug",
-      "price": 327
-    },
-    {
-      "month": "Sep",
-      "price": 444
-    },
-    {
-      "month": "Oct",
-      "price": 422
-    },
-    {
-      "month": "Nov",
-      "price": 344
-    },
-    {
-      "month": "Dec",
-      "price": 301
-    }
-  ],
-  "prices2": [
-    {
-      "month": "Jan",
-      "price": 305
-    },
-    {
-      "month": "Feb",
-      "price": 348
-    },
-    {
-      "month": "Mar",
-      "price": 418
-    },
-    {
-      "month": "Apr",
-      "price": 448
-    },
-    {
-      "month": "May",
-      "price": 344
-    },
-    {
-      "month": "Jun",
-      "price": 322
-    },
-    {
-      "month": "Jul",
-      "price": 840
-    },
-    {
-      "month": "Aug",
-      "price": 927
-    },
-    {
-      "month": "Sep",
-      "price": 444
-    },
-    {
-      "month": "Oct",
-      "price": 422
-    },
-    {
-      "month": "Nov",
-      "price": 344
-    },
-    {
-      "month": "Dec",
-      "price": 601
     }
   ]
 }

package/bpk-component-barchart/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-barchart",
-  "version": "4.2.13",
+  "version": "4.2.14",
   "description": "Backpack bar chart component.",
   "license": "Apache-2.0",
   "repository": {

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-floating-notification",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Backpack floating-notification component.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,6 +13,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
+    "bpk-component-aria-live": "^2.1.19",
     "bpk-component-button": "^6.2.7",
     "bpk-component-text": "^7.0.6",
     "bpk-mixins": "^31.1.1",

package/bpk-component-floating-notification/src/BpkFloatingNotification.js

@@ -21,6 +21,7 @@ import PropTypes from 'prop-types';
 import React, { useEffect, useState, ReactElement } from 'react';
 import { CSSTransition } from 'react-transition-group';
 
+import BpkAriaLive from '../../bpk-component-aria-live';
 import BpkButton from '../../bpk-component-button';
 import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
 import { cssModules } from '../../bpk-react-utils';
@@ -107,7 +108,7 @@ const BpkFloatingNotification = (props: Props) => {
       <div className={classNames} {...rest}>
         {Icon && (
           <div className={iconClassNames}>
-            <Icon />
+            <Icon aria-hidden />
           </div>
         )}
         <BpkText
@@ -117,6 +118,7 @@ const BpkFloatingNotification = (props: Props) => {
         >
           {text}
         </BpkText>
+        <BpkAriaLive aria-hidden>{text}</BpkAriaLive>
         {ctaText && (
           <BpkButton link onClick={onClick} className={buttonClassNames}>
             {ctaText}

package/bpk-component-horizontal-nav/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-horizontal-nav",
-  "version": "5.1.13",
+  "version": "5.1.14",
   "description": "Backpack horizontal nav component.",
   "license": "Apache-2.0",
   "repository": {

package/bpk-component-horizontal-nav/src/BpkHorizontalNav.js

@@ -18,7 +18,6 @@
 /* @flow strict */
 
 import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
 import React, { Component, type Node } from 'react';
 
 import { cssModules } from '../../bpk-react-utils';
@@ -99,17 +98,11 @@ class BpkHorizontalNav extends Component<Props> {
       return;
     }
 
-    // Using find dom node is preferable here over changing the underlying mechanism of BpkHorizontalNavItem to accomodate dom-node refs
-    // eslint-disable-next-line react/no-find-dom-node
-    const selectedItemRef = ((ReactDOM.findDOMNode(
-      this.selectedItemRef,
-    ): any): Element);
-
     if (!this.scrollRef) {
       return;
     }
 
-    const selectedItemPos = getPos(selectedItemRef);
+    const selectedItemPos = getPos(this.selectedItemRef);
     if (!selectedItemPos) {
       return;
     }
@@ -168,10 +161,10 @@ class BpkHorizontalNav extends Component<Props> {
     if (autoScrollToSelected || type === HORIZONTAL_NAV_TYPES.light) {
       children = React.Children.map(rawChildren, (child) => {
         const childProps = {};
-
+        let childRef;
         if (autoScrollToSelected) {
           if (child && child.props && child.props.selected) {
-            childProps.ref = (ref) => {
+            childRef = (ref) => {
               this.selectedItemRef = ref;
             };
           }
@@ -181,7 +174,9 @@ class BpkHorizontalNav extends Component<Props> {
           childProps.type = HORIZONTAL_NAV_TYPES.light;
         }
 
-        return child ? React.cloneElement(child, childProps) : null;
+        return child ? (
+          <div ref={childRef}>{React.cloneElement(child, childProps)}</div>
+        ) : null;
       });
     }
 

package/package.json

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