@skyscanner/backpack-web 22.1.0 → 22.2.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/package.json

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