@skyscanner/backpack-web 9.3.0 → 11.1.0

package/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 $bpk-spacing-v2: true;
 
@@ -40,7 +40,7 @@ $bpk-spacing-v2: true;
     background: none;
     text-decoration: none;
     cursor: pointer;
-    fill: currentColor;
+    fill: currentcolor;
 
     &--default {
       @include bpk-themeable-property(
@@ -50,7 +50,7 @@ $bpk-spacing-v2: true;
       );
 
       @include bpk-hover {
-        @include bpk-border-bottom-xl($bpk-color-sky-gray-tint-06);
+        @include bpk-border-bottom-xl($bpk-surface-highlight-day);
         @include bpk-themeable-property(
           color,
           --bpk-horizontal-nav-link-hover-color,
@@ -59,7 +59,7 @@ $bpk-spacing-v2: true;
       }
 
       &:active {
-        @include bpk-border-bottom-xl($bpk-color-sky-gray-tint-05);
+        @include bpk-border-bottom-xl($bpk-line-day);
         @include bpk-themeable-property(
           color,
           --bpk-horizontal-nav-link-active-color,
@@ -68,11 +68,11 @@ $bpk-spacing-v2: true;
       }
 
       &-disabled {
-        color: $bpk-color-sky-gray-tint-06;
+        color: $bpk-text-disabled-day;
         cursor: not-allowed;
 
         &:active {
-          color: $bpk-color-sky-gray-tint-06;
+          color: $bpk-text-disabled-day;
           box-shadow: unset;
         }
       }
@@ -114,37 +114,37 @@ $bpk-spacing-v2: true;
     }
 
     &--light {
-      color: $bpk-color-white;
+      color: $bpk-text-on-dark-day;
 
       @include bpk-hover {
-        @include bpk-border-bottom-xl($bpk-color-white);
+        @include bpk-border-bottom-xl($bpk-text-on-dark-day);
       }
 
       &:active {
-        @include bpk-border-bottom-xl($bpk-color-white);
+        @include bpk-border-bottom-xl($bpk-text-on-dark-day);
       }
 
       &-disabled {
-        color: $bpk-color-sky-gray-tint-06;
+        color: $bpk-text-disabled-day;
         cursor: not-allowed;
 
         &:active {
-          color: $bpk-color-sky-gray-tint-06;
+          color: $bpk-text-disabled-day;
           box-shadow: unset;
         }
       }
 
       &-selected {
-        color: $bpk-color-white;
+        color: $bpk-text-on-dark-day;
 
-        @include bpk-border-bottom-xl($bpk-color-white);
+        @include bpk-border-bottom-xl($bpk-text-on-dark-day);
 
         @include bpk-hover {
-          @include bpk-border-bottom-xl($bpk-color-white);
+          @include bpk-border-bottom-xl($bpk-text-on-dark-day);
         }
 
         &:active {
-          @include bpk-border-bottom-xl($bpk-color-white);
+          @include bpk-border-bottom-xl($bpk-text-on-dark-day);
         }
       }
     }

package/bpk-component-icon/README.md

@@ -27,7 +27,7 @@ export default () => (
 
 *`icons.scss`:*
 ```scss
-@import '~bpk-mixins';
+@import '~bpk-mixins/index.scss';
 
 .abc-icon__flight {
   fill: currentColor; // see https://css-tricks.com/currentcolor/

package/bpk-component-icon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-icon",
-  "version": "10.0.2",
+  "version": "10.0.5",
   "description": "Backpack icon components.",
   "license": "Apache-2.0",
   "repository": {
@@ -17,16 +17,16 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0",
-    "@skyscanner/bpk-svgs": "^14.3.8",
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0",
+    "@skyscanner/bpk-foundations-web": "^9.3.0",
+    "@skyscanner/bpk-svgs": "^14.4.3",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-component-button": "^7.0.2",
-    "bpk-component-list": "^5.0.2",
-    "bpk-component-text": "^8.0.2"
+    "bpk-component-button": "^7.0.5",
+    "bpk-component-list": "^5.1.2",
+    "bpk-component-text": "^8.0.5"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-icon/src/BpkIcon.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-icon {
   &--align-to-button {

package/bpk-component-icon/src/withDescription.module.scss

@@ -15,7 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-icon-description {
   @include bpk-visually-hidden;

package/bpk-component-image/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-image",
-  "version": "6.0.2",
+  "version": "6.0.5",
   "description": "Backpack image component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,10 +14,10 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0",
-    "bpk-component-spinner": "^6.0.2",
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0",
+    "@skyscanner/bpk-foundations-web": "^9.3.0",
+    "bpk-component-spinner": "^6.0.5",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
     "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.2",
-    "bpk-component-text": "^8.0.2"
+    "bpk-component-mobile-scroll-container": "^4.0.5",
+    "bpk-component-text": "^8.0.5"
   }
 }

package/bpk-component-image/src/BpkBackgroundImage.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 @import './BpkImage.module.scss';
 
 .bpk-background-image {

package/bpk-component-image/src/BpkImage.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 @mixin bpk-image__spinner {
   position: absolute;

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-infinite-scroll",
-  "version": "5.0.2",
+  "version": "5.0.5",
   "description": "Backpack infinite scroll component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
     "intersection-observer": "^0.7.0",
     "prop-types": "^15.7.2"
   },
@@ -23,9 +23,9 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-button": "^7.0.2",
-    "bpk-component-list": "^5.0.2",
-    "bpk-component-spinner": "^6.0.2",
-    "bpk-storybook-utils": "^2.0.2"
+    "bpk-component-button": "^7.0.5",
+    "bpk-component-list": "^5.1.2",
+    "bpk-component-spinner": "^6.0.5",
+    "bpk-storybook-utils": "^2.0.5"
   }
 }

package/bpk-component-infinite-scroll/src/withInfiniteScroll.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-sentinel {
   // this is necessary for when the user doesn't define a custom loading component

package/bpk-component-input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-input",
-  "version": "7.0.2",
+  "version": "7.0.5",
   "description": "Backpack input component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,17 +14,17 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "bpk-component-icon": "^10.0.2",
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-component-icon": "^10.0.5",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-banner-alert": "^7.0.2",
-    "bpk-component-label": "^6.0.2",
-    "bpk-storybook-utils": "^2.0.2"
+    "bpk-component-banner-alert": "^7.0.5",
+    "bpk-component-label": "^6.0.5",
+    "bpk-storybook-utils": "^2.0.5"
   }
 }

package/bpk-component-input/src/BpkClearButton.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins';
+@import '~bpk-mixins/index.scss';
 
 .bpk-clear-button {
   padding: 0;
@@ -35,6 +35,6 @@
   }
 
   &__icon {
-    fill: currentColor;
+    fill: currentcolor;
   }
 }

package/bpk-component-input/src/BpkInput.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 $bpk-spacing-v2: true;
 

package/bpk-component-label/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-label",
-  "version": "6.0.2",
+  "version": "6.0.5",
   "description": "Backpack label component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-label/src/BpkLabel.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-label {
   @include bpk-label;

package/bpk-component-link/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-link",
-  "version": "4.0.2",
+  "version": "4.0.5",
   "description": "Backpack link component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,15 +14,15 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0",
-    "bpk-storybook-utils": "^2.0.2"
+    "@skyscanner/bpk-foundations-web": "^9.3.0",
+    "bpk-storybook-utils": "^2.0.5"
   }
 }

package/bpk-component-link/src/BpkLink.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-link {
   @include bpk-link;

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.2",
+  "version": "5.1.2",
   "description": "Backpack list component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

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-list/src/BpkList.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-list {
   @include bpk-list;

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-loading-button",
-  "version": "7.0.2",
+  "version": "7.0.5",
   "description": "Backpack loading button component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,15 +14,15 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-button": "^7.0.2",
-    "bpk-component-icon": "^10.0.2",
-    "bpk-component-spinner": "^6.0.2",
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-component-button": "^7.0.5",
+    "bpk-component-icon": "^10.0.5",
+    "bpk-component-spinner": "^6.0.5",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^2.0.2"
+    "bpk-storybook-utils": "^2.0.5"
   },
   "peerDependencies": {
     "react": "^17.0.2"

package/bpk-component-loading-button/src/BpkLoadingButton.module.scss

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 $bpk-spacing-v2: true;
 

package/bpk-component-map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-map",
-  "version": "7.1.0",
+  "version": "7.1.3",
   "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": "^6.0.2",
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-component-spinner": "^6.0.5",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
     "prop-types": "^15.5.8"
   },
   "peerDependencies": {
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "bpk-component-icon": "^10.0.2",
-    "bpk-component-text": "^8.0.2",
-    "bpk-storybook-utils": "^2.0.2",
+    "bpk-component-icon": "^10.0.5",
+    "bpk-component-text": "^8.0.5",
+    "bpk-storybook-utils": "^2.0.5",
     "prop-types": "^15.5.8"
   }
 }

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

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins';
+@import '~bpk-mixins/index.scss';
 
 $bpk-spacing-v2: true;
 
@@ -36,6 +36,7 @@ $bpk-spacing-v2: true;
 
   &__icon {
     position: absolute;
+
     // This ensures that the icon is positioned exactly in the
     // centre of the marker.
     top: 0.3rem;
@@ -43,7 +44,7 @@ $bpk-spacing-v2: true;
     color: $bpk-surface-default-day;
 
     > svg {
-      fill: currentColor;
+      fill: currentcolor;
     }
 
     &--interactive {

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

@@ -16,7 +16,7 @@
 //  * limitations under the License.
 //  */
 
-@import '~bpk-mixins';
+@import '~bpk-mixins/index.scss';
 
 .bpk-icon-marker-background {
   position: absolute;

package/bpk-component-map/src/BpkMap.js

@@ -184,6 +184,7 @@ BpkMap.propTypes = {
     PropTypes.shape({
       featureType: PropTypes.string,
       elementType: PropTypes.string,
+      // eslint-disable-next-line react/forbid-prop-types
       stylers: PropTypes.arrayOf(PropTypes.object).isRequired,
     }),
   ),

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

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins';
+@import '~bpk-mixins/index.scss';
 
 $bpk-spacing-v2: true;
 
@@ -100,8 +100,10 @@ $bpk-spacing-v2: true;
 
   &__arrow {
     position: absolute;
+
     // Position the arrow correctly under the price marker
     top: 1.3rem;
+
     // We want the arrow pointer to appear under the marker which is already
     z-index: -1;
     width: bpk-spacing-base();

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

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .bpk-map-default-loading-element {
   display: flex;

package/bpk-component-mobile-scroll-container/README.md

@@ -42,7 +42,7 @@ export default () => (
 
 *`MyComponent.scss`:*
 ```scss
-@import '~bpk-mixins/index';
+@import '~bpk-mixins/index.scss';
 
 .my-component {
   display: flex;

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-mobile-scroll-container",
-  "version": "4.0.2",
+  "version": "4.0.5",
   "description": "Backpack mobile scroll container component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^31.5.0",
-    "bpk-react-utils": "^7.0.0",
+    "bpk-mixins": "^31.6.3",
+    "bpk-react-utils": "^7.0.1",
     "lodash.debounce": "^4.0.8",
     "prop-types": "^15.7.2"
   },
@@ -23,6 +23,6 @@
     "react": "^17.0.2"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^9.0.0"
+    "@skyscanner/bpk-foundations-web": "^9.3.0"
   }
 }