npm - @skyscanner/backpack-web - Versions diffs - 6.1.0 → 8.0.0 - Mend

@skyscanner/backpack-web 6.1.0 → 8.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (95) hide show

package/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.scss CHANGED Viewed

@@ -17,14 +17,26 @@
  */
 @import '~bpk-mixins/index';
-@import './custom-breakpoints.module';
+@mixin aspect-ratio($ratio) {
+  padding-top: $ratio;
+  box-sizing: border-box;
+}
+@mixin fill-parent {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 100%;
+}
 .bpk-card {
   @include bpk-card;
 }
 .bpk-graphic-promo {
-  max-width: 65.5rem;
+  max-width: 76.5rem;
   margin-right: auto;
   margin-left: auto;
   background-color: $bpk-color-sky-blue;
@@ -33,227 +45,218 @@
   color: $bpk-color-white;
   box-shadow: none;
-  @include breakpoint-landscape {
-    &__sponsor-label {
-      margin-bottom: bpk-spacing-sm();
+  @include bpk-breakpoint-small-tablet {
+    @include aspect-ratio(133%);
+  }
-      @include bpk-label-1;
-    }
+  /* remove shadow and hightlights from Backpack Card */
+  &::after {
+    display: none;
+  }
-    &__sponsor-content {
-      margin-bottom: bpk-spacing-xl();
-    }
+  &__container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
-    &__tagline {
-      margin-bottom: bpk-spacing-md();
+    @include bpk-breakpoint-above-tablet {
+      height: 28.75rem;
-      @include bpk-label-1;
-    }
+      @include bpk-margin-leading(bpk-spacing-xxxl(), false);
+      @include bpk-margin-trailing(bpk-spacing-xxl(), false);
-    &__subheading {
-      @include bpk-body-default;
+      /* adjusting for 1.5rem difference between margins */
+      &--center > * {
+        @include bpk-margin-trailing(bpk-spacing-lg());
+      }
     }
-    &__headline {
-      @include breakpoint-landscape-desktop {
-        @include bpk-hero-5;
+    @include bpk-breakpoint-tablet {
+      height: 22.5rem;
+      @include bpk-margin-leading(bpk-spacing-xxl(), false);
+      @include bpk-margin-trailing(bpk-spacing-xl(), false);
+      /* adjusting for 1.5rem difference between margins */
+      &--center > * {
+        @include bpk-margin-trailing(bpk-spacing-md());
       }
+    }
+    @include bpk-breakpoint-small-tablet {
+      padding: bpk-spacing-xl();
+      justify-content: space-between;
+      align-items: initial;
-      @include breakpoint-landscape-tablet {
-        @include bpk-heading-1;
+      @include bpk-margin-leading(0);
+      @include fill-parent;
+      &--inverted {
+        flex-direction: column-reverse;
       }
-      &:not(:last-child) {
-        margin-bottom: bpk-spacing-md();
+      > * {
+        @include bpk-margin-leading(0);
       }
     }
-  }
-  @include breakpoint-portrait-large {
-    &__sponsor-label {
-      margin-bottom: bpk-spacing-md();
+    @include bpk-breakpoint-small-mobile {
+      padding: bpk-spacing-lg();
+    }
-      @include bpk-heading-4;
+    &--start {
+      align-items: start;
     }
-    &__tagline {
-      margin-bottom: bpk-spacing-md();
+    &--center {
+      align-items: center;
+    }
-      @include bpk-subheading;
+    &--end {
+      align-items: end;
     }
+  }
-    &__headline {
-      margin-bottom: bpk-spacing-md();
+  &__tagline {
+    margin-bottom: bpk-spacing-md();
-      @include bpk-hero-4;
-    }
+    @include bpk-label-1;
-    &__subheading {
+    @include bpk-breakpoint-small-tablet {
       @include bpk-subheading;
     }
+    @include bpk-breakpoint-small-mobile {
+      @include bpk-label-1;
+    }
   }
-  @include breakpoint-portrait-medium {
-    &__sponsor-label {
-      margin-bottom: bpk-spacing-md();
+  &__headline {
+    @include bpk-breakpoint-above-tablet {
+      @include bpk-hero-5;
-      @include bpk-heading-3;
+      &:not(:last-child) {
+        margin-bottom: bpk-spacing-md();
+      }
     }
-    &__tagline {
-      margin-bottom: bpk-spacing-md();
+    @include bpk-breakpoint-tablet {
+      @include bpk-heading-1;
-      @include bpk-subheading;
+      &:not(:last-child) {
+        margin-bottom: bpk-spacing-md();
+      }
     }
-    &__headline {
+    @include bpk-breakpoint-small-tablet {
       margin-bottom: bpk-spacing-md();
-      @include bpk-hero-5;
+      @include bpk-heading-1;
     }
-    &__subheading {
-      @include bpk-body-longform;
+    @include bpk-breakpoint-mobile {
+      @include bpk-hero-5;
     }
-  }
-  @include breakpoint-portrait-small {
-    &__sponsor-label {
-      margin-bottom: bpk-spacing-sm();
-      @include bpk-label-1;
+    @include bpk-breakpoint-small-mobile {
+      @include bpk-heading-2;
     }
+  }
-    &__tagline {
-      margin-bottom: bpk-spacing-md();
+  &__subheading {
+    @include bpk-body-default;
-      @include bpk-label-1;
+    @include bpk-breakpoint-small-tablet {
+      @include bpk-subheading;
     }
-    &__headline {
-      margin-bottom: bpk-spacing-md();
-      @include bpk-heading-2;
+    @include bpk-breakpoint-mobile {
+      @include bpk-body-longform;
     }
-    &__subheading {
+    @include bpk-breakpoint-small-mobile {
       @include bpk-body-default;
     }
   }
-  &__container {
+  &__promo-content,
+  &__sponsor-content {
     display: flex;
     flex-direction: column;
-    @include breakpoint-landscape {
-      justify-content: center;
-      &--start {
-        align-items: start;
-      }
-      &--center {
-        align-items: center;
-      }
-      &--end {
-        align-items: end;
-      }
-    }
-    @include breakpoint-portrait {
-      justify-content: space-between;
-      &--inverted {
-        flex-direction: column-reverse;
-      }
+    @include bpk-breakpoint-above-tablet {
+      width: 22.5rem;
     }
-    @include breakpoint-landscape-desktop {
-      height: 25rem;
-      @include bpk-margin-leading(bpk-spacing-xxxl(), false);
-      @include bpk-margin-trailing(bpk-spacing-xxl(), false);
-      /* adjusting for 1.5rem different between margins */
-      &--center > * {
-        @include bpk-margin-trailing(bpk-spacing-lg());
-      }
+    @include bpk-breakpoint-tablet {
+      width: 20rem;
     }
-    @include breakpoint-landscape-tablet {
-      height: 25rem;
-      @include bpk-margin-leading(bpk-spacing-xxl(), false);
-      @include bpk-margin-trailing(bpk-spacing-xl(), false);
-      /* adjusting for 0.5rem different between margins */
-      &--center > * {
-        @include bpk-margin-trailing(bpk-spacing-md());
-      }
+    @include bpk-breakpoint-small-tablet {
+      width: initial;
+      align-items: initial;
+      text-align: initial;
     }
-    @include breakpoint-portrait-large {
-      height: 58.3125rem;
-      padding: bpk-spacing-xl();
+    &--start {
+      align-items: start;
+      text-align: start;
     }
-    @include breakpoint-portrait-medium {
-      height: 42.625rem;
-      padding: bpk-spacing-xl();
+    &--center {
+      align-items: center;
+      text-align: center;
     }
-    @include breakpoint-portrait-small {
-      height: 31.25rem;
-      padding: bpk-spacing-lg();
+    &--end {
+      align-items: end;
+      text-align: end;
     }
   }
-  &__sponsor-content,
-  &__promo-content {
+  &__sponsor-content {
     display: flex;
+    margin-bottom: bpk-spacing-xl();
     flex-direction: column;
-    @include breakpoint-landscape {
-      &--start {
-        align-items: start;
-        text-align: start;
-      }
+    @include bpk-breakpoint-small-tablet {
+      margin-bottom: initial;
+    }
+  }
-      &--center {
-        align-items: center;
-        text-align: center;
-      }
+  &__sponsor-label {
+    margin-bottom: bpk-spacing-sm();
-      &--end {
-        align-items: start;
-        text-align: start;
-      }
-    }
+    @include bpk-label-1;
-    @include breakpoint-landscape-desktop {
-      width: 22.5rem;
+    @include bpk-breakpoint-small-tablet {
+      margin-bottom: bpk-spacing-md();
+      @include bpk-heading-4;
     }
-    @include breakpoint-landscape-tablet {
-      width: 20rem;
+    @include bpk-breakpoint-mobile {
+      @include bpk-heading-3;
     }
-  }
-  &::after {
-    display: none;
+    @include bpk-breakpoint-small-mobile {
+      margin-bottom: bpk-spacing-sm();
+      @include bpk-label-1;
+    }
   }
   &__sponsor-logo {
-    width: 9.25rem;
+    width: auto;
+    max-width: 9.25rem;
+    height: auto;
+    max-height: 3.75rem;
   }
   &__cta {
-    @include breakpoint-landscape {
-      margin-top: bpk-spacing-xl();
-    }
+    margin-top: bpk-spacing-xl();
-    @include breakpoint-portrait {
+    @include bpk-breakpoint-small-tablet {
       display: none;
     }
   }

package/bpk-component-grid/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-grid",
-  "version": "3.1.12",
+  "version": "3.1.13",
   "description": "Backpack grid components.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-react-utils": "^6.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-grid-toggle/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-grid-toggle",
-  "version": "3.1.12",
+  "version": "3.1.13",
   "description": "Backpack vertical grid toggle component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-component-link": "^3.1.12",
+    "bpk-component-link": "^3.1.13",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-react-utils": "^6.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-horizontal-nav",
-  "version": "5.1.14",
+  "version": "5.1.15",
   "description": "Backpack horizontal nav component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-mobile-scroll-container": "^3.1.12",
+    "bpk-component-mobile-scroll-container": "^3.1.13",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-react-utils": "^6.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-text": "^7.0.6",
-    "bpk-storybook-utils": "^1.1.11"
+    "bpk-component-text": "^7.0.7",
+    "bpk-storybook-utils": "^1.1.12"
   }
 }

package/bpk-component-icon/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-icon",
-  "version": "9.2.13",
+  "version": "9.2.14",
   "description": "Backpack icon components.",
   "license": "Apache-2.0",
   "repository": {
@@ -20,13 +20,13 @@
     "@skyscanner/bpk-foundations-web": "^8.0.0",
     "@skyscanner/bpk-svgs": "^14.1.9",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-react-utils": "^6.0.1",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-component-button": "^6.2.7",
-    "bpk-component-list": "^4.0.5",
-    "bpk-component-text": "^7.0.6"
+    "bpk-component-button": "^6.2.8",
+    "bpk-component-list": "^4.0.6",
+    "bpk-component-text": "^7.0.7"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

package/bpk-component-image/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-image",
-  "version": "5.1.14",
+  "version": "5.1.15",
   "description": "Backpack image component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,9 +15,9 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-spinner": "^5.1.12",
+    "bpk-component-spinner": "^5.1.13",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-react-utils": "^6.0.1",
     "prop-types": "^15.7.2",
     "react-transition-group": "^2.5.3"
   },
@@ -25,7 +25,7 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-mobile-scroll-container": "^3.1.12",
-    "bpk-component-text": "^7.0.6"
+    "bpk-component-mobile-scroll-container": "^3.1.13",
+    "bpk-component-text": "^7.0.7"
   }
 }

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-infinite-scroll",
-  "version": "4.1.12",
+  "version": "4.1.13",
   "description": "Backpack infinite scroll component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-react-utils": "^6.0.1",
     "intersection-observer": "^0.7.0",
     "prop-types": "^15.7.2"
   },
@@ -23,9 +23,9 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-button": "^6.2.7",
-    "bpk-component-list": "^4.0.5",
-    "bpk-component-spinner": "^5.1.12",
-    "bpk-storybook-utils": "^1.1.11"
+    "bpk-component-button": "^6.2.8",
+    "bpk-component-list": "^4.0.6",
+    "bpk-component-spinner": "^5.1.13",
+    "bpk-storybook-utils": "^1.1.12"
   }
 }

package/bpk-component-input/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-input",
-  "version": "6.1.17",
+  "version": "6.1.19",
   "description": "Backpack input component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,17 +14,17 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "bpk-component-icon": "^9.2.13",
+    "bpk-component-icon": "^9.2.14",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-react-utils": "^6.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-banner-alert": "^6.1.17",
-    "bpk-component-label": "^5.1.12",
-    "bpk-storybook-utils": "^1.1.11"
+    "bpk-component-banner-alert": "^6.1.19",
+    "bpk-component-label": "^5.1.13",
+    "bpk-storybook-utils": "^1.1.12"
   }
 }

package/bpk-component-label/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-label",
-  "version": "5.1.12",
+  "version": "5.1.13",
   "description": "Backpack label component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-react-utils": "^6.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-link/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-link",
-  "version": "3.1.12",
+  "version": "3.1.13",
   "description": "Backpack link component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-react-utils": "^6.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
@@ -23,6 +23,6 @@
   },
   "devDependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-storybook-utils": "^1.1.11"
+    "bpk-storybook-utils": "^1.1.12"
   }
 }

package/bpk-component-list/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-list",
-  "version": "4.0.5",
+  "version": "4.0.6",
   "description": "Backpack list component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-react-utils": "^6.0.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-loading-button",
-  "version": "6.1.7",
+  "version": "6.1.8",
   "description": "Backpack loading button component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,15 +14,15 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-button": "^6.2.7",
-    "bpk-component-icon": "^9.2.13",
-    "bpk-component-spinner": "^5.1.12",
+    "bpk-component-button": "^6.2.8",
+    "bpk-component-icon": "^9.2.14",
+    "bpk-component-spinner": "^5.1.13",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.0",
+    "bpk-react-utils": "^6.0.1",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-storybook-utils": "^1.1.11"
+    "bpk-storybook-utils": "^1.1.12"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"