@skyscanner/backpack-web 22.1.0 → 22.3.0

package/bpk-component-link/README.md

@@ -39,6 +39,7 @@ If you're using a SPA framework like `react-router-dom` or `Next.js` to navigate
 | blank     | bool     | false    | false         |
 | rel       | string   | false    | null          |
 | alternate | bool     | false    | false         |
+| ref       | any      | false    | null          |
 
 ### BpkButtonLink
 

package/bpk-component-link/src/BpkLink.js

@@ -17,9 +17,9 @@
  */
 
 /* @flow strict */
-
 import PropTypes from 'prop-types';
 import type { Node } from 'react';
+import { forwardRef } from 'react';
 
 import { cssModules } from '../../bpk-react-utils';
 
@@ -40,7 +40,7 @@ type Props = {
   alternate: boolean,
 };
 
-const BpkLink = (props: Props) => {
+const BpkLink = forwardRef((props: Props, ref) => {
   const {
     alternate,
     blank,
@@ -72,12 +72,13 @@ const BpkLink = (props: Props) => {
       onClick={onClick}
       target={target}
       rel={rel}
+      ref={ref}
       {...rest}
     >
       {children}
     </a>
   );
-};
+});
 
 BpkLink.propTypes = {
   children: PropTypes.oneOfType([

package/bpk-component-navigation-bar/src/BpkNavigationBar.module.scss

@@ -32,15 +32,14 @@ $bpk-spacing-v2: true;
   @include bpk-themeable-property(
     background-color,
     --bpk-navigation-bar-background-color,
-    $bpk-core-accent-day
+    $bpk-surface-default-day
   );
-  @include bpk-border-bottom-sm($bpk-line-day);
 
   &__title {
     @include bpk-themeable-property(
       color,
       --bpk-navigation-bar-title-color,
-      $bpk-text-primary-inverse-day
+      $bpk-text-primary-day
     );
   }
 
@@ -73,5 +72,7 @@ $bpk-spacing-v2: true;
     position: sticky;
     top: 0;
     z-index: $bpk-zindex-tooltip - 1; // Allow tooltips/modals/... to be displayed above the navigation bar
+
+    @include bpk-box-shadow-sm;
   }
 }

package/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.module.scss

@@ -22,14 +22,14 @@
   @include bpk-themeable-property(
     color,
     --bpk-navigation-bar-button-link-color,
-    $bpk-text-primary-inverse-day
+    $bpk-text-primary-day
   );
 
   @include bpk-hover {
     @include bpk-themeable-property(
       color,
       --bpk-navigation-bar-button-link-hover-color,
-      $bpk-text-primary-inverse-day
+      $bpk-text-primary-day
     );
   }
 
@@ -37,7 +37,7 @@
     @include bpk-themeable-property(
       color,
       --bpk-navigation-bar-button-link-active-color,
-      $bpk-text-primary-inverse-day
+      $bpk-text-primary-day
     );
   }
 
@@ -45,7 +45,7 @@
     @include bpk-themeable-property(
       color,
       --bpk-navigation-bar-button-link-visited-color,
-      $bpk-text-primary-inverse-day
+      $bpk-text-primary-day
     );
   }
 }

package/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.module.scss

@@ -22,14 +22,14 @@
   @include bpk-themeable-property(
     color,
     --bpk-navigation-bar-icon-button-color,
-    $bpk-text-primary-inverse-day
+    $bpk-text-primary-day
   );
 
   @include bpk-hover {
     @include bpk-themeable-property(
       color,
       --bpk-navigation-bar-icon-button-hover-color,
-      $bpk-text-primary-inverse-day
+      $bpk-text-primary-day
     );
   }
 
@@ -37,7 +37,7 @@
     @include bpk-themeable-property(
       color,
       --bpk-navigation-bar-icon-button-active-color,
-      $bpk-text-primary-inverse-day
+      $bpk-text-primary-day
     );
   }
 }

package/bpk-component-rating/README.md

@@ -35,6 +35,13 @@ export default () => (
     value={2.3}
   />
 
+  // Subtitle only rating
+  <BpkRating
+    ariaLabel="4.8 2,420 reviews"
+    value={4.8}
+    subtitle="2,420 reviews"
+  />
+
   // Show scale rating
   <BpkRating
     ariaLabel="3.8 Good 530 reviews"
@@ -68,8 +75,8 @@ export default () => (
 | Property  | PropType              | Required | Default Value     |
 | --------- | --------------------- | -------- | ----------------- |
 | ariaLabel | string                | true     | -                 |
-| title     | oneOfType(string, node) | true     | -                 |
 | value     | oneOfType(string, number) | true     | -               |
+| title     | oneOfType(string, node) | false     | -                 |
 | className | string                | false    | null              |
 | ratingScale | oneOf(RATING_SCALES) | false    | RATING_SCALES.zeroToFive |
 | size      | oneOf(RATING_SIZES)   | false    | RATING_SIZES.base |

package/bpk-component-rating/src/BpkRating.js

@@ -51,7 +51,7 @@ type Props = {
   showScale: ?boolean,
   size: $Values<typeof RATING_SIZES>,
   subtitle: ?string,
-  title: string | Node,
+  title: ?string | Node,
   value: string | number,
 };
 
@@ -71,7 +71,7 @@ const BpkRating = (props: Props) => {
   const classNames = getClassName(
     'bpk-rating',
     className,
-    size === RATING_SIZES.large && subtitle && 'bpk-rating--large',
+    size === RATING_SIZES.large && title && subtitle && 'bpk-rating--large',
   );
   const valueStyles = getClassName('bpk-rating__value');
   const scaleStyles = getClassName('bpk-rating__scale');
@@ -80,6 +80,7 @@ const BpkRating = (props: Props) => {
     size === RATING_SIZES.large && 'bpk-rating__text-wrapper--large',
   );
   const titleStyles = getClassName(
+    subtitle && 'bpk-rating__title--with-subtitle',
     size === RATING_SIZES.large && 'bpk-rating__title--large',
   );
   const subtitleStyles = getClassName(
@@ -132,14 +133,16 @@ const BpkRating = (props: Props) => {
       </BpkText>
 
       <div className={textWrapperStyles}>
-        <BpkText
-          textStyle={titleTextSize}
-          className={titleStyles}
-          tagName="span"
-          aria-hidden="true"
-        >
-          {title}
-        </BpkText>
+        {title && (
+          <BpkText
+            textStyle={titleTextSize}
+            className={titleStyles}
+            tagName="span"
+            aria-hidden="true"
+          >
+            {title}
+          </BpkText>
+        )}
 
         {subtitle && (
           <BpkText
@@ -158,13 +161,13 @@ const BpkRating = (props: Props) => {
 
 BpkRating.propTypes = {
   ariaLabel: PropTypes.string.isRequired,
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
   className: PropTypes.string,
   ratingScale: PropTypes.oneOf(Object.keys(RATING_SCALES)),
   size: PropTypes.oneOf(Object.keys(RATING_SIZES)),
   subtitle: PropTypes.string,
   showScale: PropTypes.bool,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 };
 
 BpkRating.defaultProps = {
@@ -173,6 +176,7 @@ BpkRating.defaultProps = {
   size: RATING_SIZES.base,
   subtitle: null,
   showScale: true,
+  title: null,
 };
 
 export default BpkRating;

package/bpk-component-rating/src/BpkRating.module.scss

@@ -59,28 +59,25 @@ $bpk-spacing-v2: true;
   }
 
   &__title {
+    &--with-subtitle {
+      padding-right: bpk-spacing-md();
+
+      @include bpk-rtl {
+        padding-right: 0;
+        padding-left: bpk-spacing-md();
+      }
+    }
+
     &--large {
       padding-top: $bpk-one-pixel-rem;
     }
   }
 
   &__subtitle {
-    padding-left: bpk-spacing-md();
     color: $bpk-text-secondary-day;
 
-    @include bpk-rtl {
-      padding-right: bpk-spacing-md();
-      padding-left: 0;
-    }
-
     &--large {
-      padding-top: $bpk-one-pixel-rem;
-      padding-left: 0;
-
-      @include bpk-rtl {
-        padding-right: 0;
-        padding-left: 0;
-      }
+      // padding-top: $bpk-one-pixel-rem;
     }
   }
 }

package/bpk-react-utils/README.md

@@ -26,30 +26,28 @@ class MyComponent extends Component {
     this.state = {
       isOpen: false,
     };
-
   }
 
   onOpen = () => {
     this.setState({
       isOpen: true,
     });
-  }
+  };
 
   onClose = () => {
     this.setState({
       isOpen: false,
     });
-  }
+  };
 
   render() {
     return (
       <div>
         <BpkButton onClick={this.onOpen}>Open portal</BpkButton>
-        <Portal
-          isOpen={this.state.isOpen}
-          onClose={this.onClose}
-        >
-          <div>I'm now appended to <BpkCode>document.body</BpkCode></div>
+        <Portal isOpen={this.state.isOpen} onClose={this.onClose}>
+          <div>
+            I'm now appended to <BpkCode>document.body</BpkCode>
+          </div>
         </Portal>
       </div>
     );
@@ -57,19 +55,25 @@ class MyComponent extends Component {
 }
 ```
 
+**NOTE:** Events used to bubble up from the portal into the parent component. Due to the way React works, events do not
+bubble up into the component in the DOM where the portal is rendered (i.e. render target), but instead they bubble up
+into the parent component in the shadow DOM, that is the component where you added the `Portal` in your React code. To
+avoid confusion and bugs caused by this behaviour, we have prevented mouse and keyboard events from bubbling up outside
+the portal.
+
 ### Props
 
-| Property              | PropType                | Required | Default Value |
-| --------------------- | ----------------------- | -------- | ------------- |
-| children              | node                    | true     | -             |
-| isOpen                | bool                    | true     | -             |
-| beforeClose           | func                    | false    | null          |
-| onClose               | func                    | false    | noop          |
-| onOpen                | func                    | false    | noop          |
-| onRender              | func                    | false    | noop          |
-| renderTarget          | func                    | false    | null          |
-| target                | oneOf([function, node]) | false    | null          |
-| closeOnEscPressed     | bool                    | false    | true          |
+| Property          | PropType                | Required | Default Value |
+| ----------------- | ----------------------- | -------- | ------------- |
+| children          | node                    | true     | -             |
+| isOpen            | bool                    | true     | -             |
+| beforeClose       | func                    | false    | null          |
+| onClose           | func                    | false    | noop          |
+| onOpen            | func                    | false    | noop          |
+| onRender          | func                    | false    | noop          |
+| renderTarget      | func                    | false    | null          |
+| target            | oneOf([function, node]) | false    | null          |
+| closeOnEscPressed | bool                    | false    | true          |
 
 ## `cssModules.js`
 
@@ -86,9 +90,7 @@ const getClassName = cssModules(STYLES);
 
 const MyComponent = (props) => (
   <div className={getClassName('MyComponent')}>
-    <div className={getClassName('MyComponent__inner')}>
-      {props.children}
-    </div>
+    <div className={getClassName('MyComponent__inner')}>{props.children}</div>
   </div>
 );
 ```
@@ -97,9 +99,7 @@ With CSS modules:
 
 ```html
 <div class="_35WloynrPDta8fhSfoHEgE">
-  <div class="_1ghNYY7jOYzUneVCT4piQ9">
-    Some text.
-  </div>
+  <div class="_1ghNYY7jOYzUneVCT4piQ9">Some text.</div>
 </div>
 ```
 
@@ -107,9 +107,7 @@ Without CSS modules:
 
 ```html
 <div class="MyComponent">
-  <div class="MyComponent__inner">
-    Some text.
-  </div>
+  <div class="MyComponent__inner">Some text.</div>
 </div>
 ```
 
@@ -123,8 +121,13 @@ import STYLES from './MyComponent.scss';
 const getClassNames = cssModules(STYLES);
 
 const MyComponent = (props) => (
-  <div className={getClassName('MyComponent', props.disabled && 'MyComponent--disabled')}>
-   {props.children}
+  <div
+    className={getClassName(
+      'MyComponent',
+      props.disabled && 'MyComponent--disabled',
+    )}
+  >
+    {props.children}
   </div>
 );
 ```

package/bpk-react-utils/src/Portal.js

@@ -263,7 +263,22 @@ class Portal extends Component {
       return null;
     }
 
-    return createPortal(children, portalElement);
+    const stopPropagationHandler = (e) => e.stopPropagation();
+
+    return createPortal(
+      <div
+        onClick={stopPropagationHandler}
+        onMouseDown={stopPropagationHandler}
+        onMouseUp={stopPropagationHandler}
+        onKeyDown={stopPropagationHandler}
+        onKeyUp={stopPropagationHandler}
+        tabIndex={-1}
+        role="none"
+      >
+        {children}
+      </div>,
+      portalElement,
+    );
   }
 }
 

package/package.json

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