@skyscanner/backpack-web 9.2.0-beta.3 → 10.0.0

package/bpk-component-image/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-image",
-  "version": "6.0.1",
+  "version": "6.0.3",
   "description": "Backpack image component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.5.0",
-    "bpk-component-spinner": "^6.0.1",
-    "bpk-mixins": "^31.4.0",
+    "@skyscanner/bpk-foundations-web": "^9.2.0",
+    "bpk-component-spinner": "^6.0.3",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2",
     "react-transition-group": "^2.5.3"
@@ -25,7 +25,7 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-mobile-scroll-container": "^4.0.1",
-    "bpk-component-text": "^8.0.1"
+    "bpk-component-mobile-scroll-container": "^4.0.3",
+    "bpk-component-text": "^8.0.3"
   }
 }

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-infinite-scroll",
-  "version": "5.0.1",
+  "version": "5.0.3",
   "description": "Backpack infinite scroll component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.4.0",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "intersection-observer": "^0.7.0",
     "prop-types": "^15.7.2"
@@ -23,9 +23,9 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-button": "^7.0.1",
-    "bpk-component-list": "^5.0.1",
-    "bpk-component-spinner": "^6.0.1",
-    "bpk-storybook-utils": "^2.0.1"
+    "bpk-component-button": "^7.0.3",
+    "bpk-component-list": "^5.1.0",
+    "bpk-component-spinner": "^6.0.3",
+    "bpk-storybook-utils": "^2.0.3"
   }
 }

package/bpk-component-input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-input",
-  "version": "7.0.1",
+  "version": "7.0.3",
   "description": "Backpack input component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "bpk-component-icon": "^10.0.1",
-    "bpk-mixins": "^31.4.0",
+    "bpk-component-icon": "^10.0.3",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
@@ -23,8 +23,8 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-banner-alert": "^7.0.1",
-    "bpk-component-label": "^6.0.1",
-    "bpk-storybook-utils": "^2.0.1"
+    "bpk-component-banner-alert": "^7.0.3",
+    "bpk-component-label": "^6.0.3",
+    "bpk-storybook-utils": "^2.0.3"
   }
 }

package/bpk-component-label/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-label",
-  "version": "6.0.1",
+  "version": "6.0.3",
   "description": "Backpack label component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.4.0",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },

package/bpk-component-link/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-link",
-  "version": "4.0.1",
+  "version": "4.0.3",
   "description": "Backpack link component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.4.0",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
@@ -22,7 +22,7 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.5.0",
-    "bpk-storybook-utils": "^2.0.1"
+    "@skyscanner/bpk-foundations-web": "^9.2.0",
+    "bpk-storybook-utils": "^2.0.3"
   }
 }

package/bpk-component-list/README.md

@@ -34,11 +34,14 @@ export default () => (
 
 ### BpkList
 
-| Property  | PropType | Required | Default Value |
-| --------- | -------- | -------- | ------------- |
-| children  | -        | true     | -             |
-| ordered   | bool     | false    | false         |
-| className | string   | false    | null          |
+| Property       | PropType | Required | Default Value |
+| -------------- | -------- | -------- | ------------- |
+| children       | -        | true     | -             |
+| ordered        | bool     | false    | false         |
+| className      | string   | false    | null          |
+| ariaLabel      | string   | false    | null          |
+| ariaLabelledby | string   | false    | null          |
+| title          | string   | false    | null          |
 
 ### BpkListItem
 

package/bpk-component-list/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-list",
-  "version": "5.0.1",
+  "version": "5.1.0",
   "description": "Backpack list component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.4.0",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },

package/bpk-component-list/src/BpkList.js

@@ -31,15 +31,28 @@ type Props = {
   children: Node,
   ordered: boolean,
   className: ?string,
+  ariaLabel: ?string,
+  ariaLabelledby: ?string,
+  title: ?string,
 };
 
 const BpkList = (props: Props) => {
-  const { children, className, ordered } = props;
+  const { ariaLabel, ariaLabelledby, children, className, ordered, title } =
+    props;
 
   const TagName: any = ordered ? 'ol' : 'ul';
   const classNames: string = getClassName('bpk-list', className);
 
-  return <TagName className={classNames}>{children}</TagName>;
+  return (
+    <TagName
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledby}
+      title={title}
+      className={classNames}
+    >
+      {children}
+    </TagName>
+  );
 };
 
 BpkList.propTypes = {
@@ -54,6 +67,9 @@ BpkList.propTypes = {
 BpkList.defaultProps = {
   ordered: false,
   className: null,
+  ariaLabel: null,
+  ariaLabelledby: null,
+  title: null,
 };
 
 export default BpkList;

package/bpk-component-loading-button/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-loading-button",
-  "version": "7.0.1",
+  "version": "7.0.3",
   "description": "Backpack loading button component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,15 +14,15 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-button": "^7.0.1",
-    "bpk-component-icon": "^10.0.1",
-    "bpk-component-spinner": "^6.0.1",
-    "bpk-mixins": "^31.4.0",
+    "bpk-component-button": "^7.0.3",
+    "bpk-component-icon": "^10.0.3",
+    "bpk-component-spinner": "^6.0.3",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^2.0.1"
+    "bpk-storybook-utils": "^2.0.3"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-map",
-  "version": "7.0.1",
+  "version": "7.1.1",
   "description": "Backpack map component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,8 +15,8 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "@react-google-maps/api": "^2.8.1",
-    "bpk-component-spinner": "^6.0.1",
-    "bpk-mixins": "^31.4.0",
+    "bpk-component-spinner": "^6.0.3",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.5.8"
   },
@@ -24,9 +24,9 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-icon": "^10.0.1",
-    "bpk-component-text": "^8.0.1",
-    "bpk-storybook-utils": "^2.0.1",
+    "bpk-component-icon": "^10.0.3",
+    "bpk-component-text": "^8.0.3",
+    "bpk-storybook-utils": "^2.0.3",
     "prop-types": "^15.5.8"
   }
 }

package/bpk-component-map/src/BpkIconMarker.module.scss

@@ -40,7 +40,7 @@ $bpk-spacing-v2: true;
     // centre of the marker.
     top: 0.3rem;
     left: bpk-spacing-sm();
-    color: $bpk-color-white;
+    color: $bpk-surface-default-day;
 
     > svg {
       fill: currentColor;
@@ -54,7 +54,7 @@ $bpk-spacing-v2: true;
       @include bpk-themeable-property(
         color,
         --bpk-icon-marker-default-disabled-color,
-        $bpk-color-monteverde
+        $bpk-status-success-spot-day
       );
     }
 
@@ -67,7 +67,7 @@ $bpk-spacing-v2: true;
       @include bpk-themeable-property(
         color,
         --bpk-icon-marker-default-selected-color,
-        $bpk-color-monteverde
+        $bpk-status-success-spot-day
       );
     }
   }

package/bpk-component-map/src/BpkIconMarkerBackground.module.scss

@@ -26,7 +26,7 @@
   @include bpk-themeable-property(
     fill,
     --bpk-icon-marker-default-background-color,
-    $bpk-color-monteverde
+    $bpk-status-success-spot-day
   );
 
   &--interactive {
@@ -37,17 +37,17 @@
     @include bpk-themeable-property(
       fill,
       --bpk-icon-marker-default-disabled-background-color,
-      $bpk-color-sagano
+      $bpk-status-success-fill-day
     );
   }
 
   &--selected {
-    fill: $bpk-color-white;
+    fill: $bpk-surface-default-day;
 
     @include bpk-themeable-property(
       stroke,
       --bpk-icon-marker-default-selected-color,
-      $bpk-color-monteverde
+      $bpk-status-success-spot-day
     );
   }
 }

package/bpk-component-map/src/BpkPriceMarker.module.scss

@@ -33,17 +33,17 @@ $bpk-spacing-v2: true;
   }
 
   &-default {
-    color: $bpk-color-white;
+    color: $bpk-text-primary-inverse-day;
 
     @include bpk-themeable-property(
       border-color,
       --bpk-price-marker-background-color,
-      $bpk-color-sky-blue
+      $bpk-core-accent-day
     );
     @include bpk-themeable-property(
       background-color,
       --bpk-price-marker-background-color,
-      $bpk-color-sky-blue
+      $bpk-core-accent-day
     );
   }
 
@@ -51,42 +51,42 @@ $bpk-spacing-v2: true;
     @include bpk-themeable-property(
       color,
       --bpk-price-marker-viewed-color,
-      $bpk-color-sky-blue
+      rgba($bpk-text-on-dark-day, 0.8)
     );
     @include bpk-themeable-property(
       border-color,
       --bpk-price-marker-viewed-border-color,
-      $bpk-color-sky-blue-tint-03
+      $bpk-core-accent-day
     );
     @include bpk-themeable-property(
       background-color,
       --bpk-price-marker-viewed-background-color,
-      $bpk-color-sky-blue-tint-03
+      $bpk-core-accent-day
     );
   }
 
   &-focused {
     padding: (bpk-spacing-sm() + ($bpk-one-pixel-rem * 2)) bpk-spacing-md();
-    background-color: $bpk-color-white;
+    background-color: $bpk-surface-default-day;
 
     @include bpk-themeable-property(
       border-color,
       --bpk-price-marker-selected-border-color,
-      $bpk-color-sky-blue
+      $bpk-core-accent-day
     );
     @include bpk-themeable-property(
       color,
       --bpk-price-marker-selected-color,
-      $bpk-color-sky-blue
+      $bpk-text-link-day
     );
   }
 
   &-disabled {
     // We want the disabled marker appear under any other markers that maybe rendered around it
     z-index: -2;
-    border-color: $bpk-color-sky-gray-tint-07;
-    background-color: $bpk-color-sky-gray-tint-07;
-    color: $bpk-color-sky-gray-tint-04;
+    border-color: $bpk-canvas-day;
+    background-color: $bpk-canvas-day;
+    color: $bpk-text-disabled-day;
   }
 
   &__wrapper {
@@ -108,13 +108,13 @@ $bpk-spacing-v2: true;
     height: bpk-spacing-base();
     transform: rotate(45deg);
     border-radius: 25%;
-    background-color: $bpk-color-sky-blue;
+    background-color: $bpk-core-accent-day;
 
     &-default {
       @include bpk-themeable-property(
         background-color,
         --bpk-price-marker-background-color,
-        $bpk-color-sky-blue
+        $bpk-core-accent-day
       );
     }
 
@@ -122,7 +122,7 @@ $bpk-spacing-v2: true;
       @include bpk-themeable-property(
         background-color,
         --bpk-price-marker-viewed-border-color,
-        $bpk-color-sky-blue-tint-03
+        $bpk-core-accent-day
       );
     }
 
@@ -133,14 +133,14 @@ $bpk-spacing-v2: true;
       @include bpk-themeable-property(
         background-color,
         --bpk-price-marker-selected-border-color,
-        $bpk-color-sky-blue
+        $bpk-core-accent-day
       );
     }
 
     &-disabled {
       // We want the arrow pointer to appear under the disabled marker which is already z-index: -2
       z-index: -3;
-      background-color: $bpk-color-sky-gray-tint-07;
+      background-color: $bpk-canvas-day;
     }
   }
 }

package/bpk-component-map/src/DefaultLoadingElement.module.scss

@@ -24,5 +24,5 @@
   justify-content: center;
   align-items: center;
   flex: 1;
-  background-color: $bpk-color-sky-gray-tint-06;
+  background-color: $bpk-surface-highlight-day;
 }

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-mobile-scroll-container",
-  "version": "4.0.1",
+  "version": "4.0.3",
   "description": "Backpack mobile scroll container component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.4.0",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "lodash.debounce": "^4.0.8",
     "prop-types": "^15.7.2"
@@ -23,6 +23,6 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.5.0"
+    "@skyscanner/bpk-foundations-web": "^9.2.0"
   }
 }

package/bpk-component-modal/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-modal",
-  "version": "6.0.1",
+  "version": "6.0.3",
   "description": "Backpack modal component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,20 +14,20 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-close-button": "^4.0.1",
-    "bpk-component-icon": "^10.0.1",
-    "bpk-component-link": "^4.0.1",
-    "bpk-component-navigation-bar": "^4.0.1",
-    "bpk-mixins": "^31.4.0",
+    "bpk-component-close-button": "^4.0.3",
+    "bpk-component-icon": "^10.0.3",
+    "bpk-component-link": "^4.0.3",
+    "bpk-component-navigation-bar": "^4.0.3",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
-    "bpk-scrim-utils": "^6.0.1",
+    "bpk-scrim-utils": "^6.0.3",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-button": "^7.0.1",
-    "bpk-component-text": "^8.0.1"
+    "bpk-component-button": "^7.0.3",
+    "bpk-component-text": "^8.0.3"
   }
 }

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-navigation-bar",
-  "version": "4.0.1",
+  "version": "4.0.3",
   "description": "Backpack nativation bar component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,10 +14,10 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-close-button": "^4.0.1",
-    "bpk-component-link": "^4.0.1",
-    "bpk-component-text": "^8.0.1",
-    "bpk-mixins": "^31.4.0",
+    "bpk-component-close-button": "^4.0.3",
+    "bpk-component-link": "^4.0.3",
+    "bpk-component-text": "^8.0.3",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
@@ -25,8 +25,8 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.5.0",
-    "bpk-component-icon": "^10.0.1",
-    "bpk-storybook-utils": "^2.0.1"
+    "@skyscanner/bpk-foundations-web": "^9.2.0",
+    "bpk-component-icon": "^10.0.3",
+    "bpk-storybook-utils": "^2.0.3"
   }
 }

package/bpk-component-nudger/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-nudger",
-  "version": "8.0.1",
+  "version": "8.0.3",
   "description": "Backpack nudger component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,10 +14,10 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.5.0",
-    "bpk-component-button": "^7.0.1",
-    "bpk-component-icon": "^10.0.1",
-    "bpk-mixins": "^31.4.0",
+    "@skyscanner/bpk-foundations-web": "^9.2.0",
+    "bpk-component-button": "^7.0.3",
+    "bpk-component-icon": "^10.0.3",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "lodash.clamp": "^4.0.3",
     "prop-types": "^15.7.2"
@@ -26,7 +26,7 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-label": "^6.0.1",
-    "bpk-storybook-utils": "^2.0.1"
+    "bpk-component-label": "^6.0.3",
+    "bpk-storybook-utils": "^2.0.3"
   }
 }

package/bpk-component-overlay/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-overlay",
-  "version": "3.0.1",
+  "version": "3.0.3",
   "description": "Backpack overlay component.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,7 +13,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "bpk-mixins": "^31.4.0",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.5.8"
   },
@@ -21,8 +21,8 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-image": "^6.0.1",
-    "bpk-component-text": "^8.0.1"
+    "bpk-component-image": "^6.0.3",
+    "bpk-component-text": "^8.0.3"
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8"
 }

package/bpk-component-pagination/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-pagination",
-  "version": "5.0.1",
+  "version": "5.0.3",
   "description": "Backpack pagination component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-button": "^7.0.1",
-    "bpk-mixins": "^31.4.0",
+    "bpk-component-button": "^7.0.3",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },
@@ -23,6 +23,6 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-icon": "^10.0.1"
+    "bpk-component-icon": "^10.0.3"
   }
 }

package/bpk-component-panel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-panel",
-  "version": "4.1.0",
+  "version": "4.1.2",
   "description": "Backpack panel component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.4.0",
+    "bpk-mixins": "^31.6.1",
     "bpk-react-utils": "^7.0.0",
     "prop-types": "^15.7.2"
   },