@skyscanner/backpack-web 0.0.4 → 0.1.0

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

@@ -0,0 +1,255 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2022 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@import '~bpk-mixins/index';
+@import './custom-breakpoints.module';
+
+.bpk-graphic-promo {
+  max-width: 65.5rem;
+  margin-right: auto;
+  margin-left: auto;
+  background-color: $bpk-color-sky-blue;
+  background-position: center;
+  background-size: cover;
+  box-shadow: none;
+
+  @include breakpoint-landscape {
+    pointer-events: none;
+
+    &__sponsor-label {
+      margin-bottom: bpk-spacing-sm();
+
+      @include bpk-label-1;
+    }
+
+    &__sponsor-content {
+      margin-bottom: bpk-spacing-xl();
+    }
+
+    &__tagline {
+      margin-bottom: bpk-spacing-md();
+
+      @include bpk-label-1;
+    }
+
+    &__subheading {
+      @include bpk-body-default;
+    }
+
+    &__headline {
+      @include breakpoint-landscape-desktop {
+        @include bpk-hero-5;
+      }
+
+      @include breakpoint-landscape-tablet {
+        @include bpk-heading-1;
+      }
+
+      &:not(:last-child) {
+        margin-bottom: bpk-spacing-md();
+      }
+    }
+  }
+
+  @include breakpoint-portrait-large {
+    &__sponsor-label {
+      margin-bottom: bpk-spacing-md();
+
+      @include bpk-heading-4;
+    }
+
+    &__tagline {
+      margin-bottom: bpk-spacing-md();
+
+      @include bpk-subheading;
+    }
+
+    &__headline {
+      margin-bottom: bpk-spacing-md();
+
+      @include bpk-hero-4;
+    }
+
+    &__subheading {
+      @include bpk-subheading;
+    }
+  }
+
+  @include breakpoint-portrait-medium {
+    &__sponsor-label {
+      margin-bottom: bpk-spacing-md();
+
+      @include bpk-heading-3;
+    }
+
+    &__tagline {
+      margin-bottom: bpk-spacing-md();
+
+      @include bpk-subheading;
+    }
+
+    &__headline {
+      margin-bottom: bpk-spacing-md();
+
+      @include bpk-hero-5;
+    }
+
+    &__subheading {
+      @include bpk-body-longform;
+    }
+  }
+
+  @include breakpoint-portrait-small {
+    &__sponsor-label {
+      margin-bottom: bpk-spacing-sm();
+
+      @include bpk-label-1;
+    }
+
+    &__tagline {
+      margin-bottom: bpk-spacing-md();
+
+      @include bpk-label-1;
+    }
+
+    &__headline {
+      margin-bottom: bpk-spacing-md();
+
+      @include bpk-heading-2;
+    }
+
+    &__subheading {
+      @include bpk-body-default;
+    }
+  }
+
+  &__container {
+    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 breakpoint-landscape-desktop {
+      height: 25rem;
+
+      @include bpk-margin-leading(bpk-spacing-xxxl(), false);
+      @include bpk-margin-trailing(bpk-spacing-xxl(), false);
+    }
+
+    @include breakpoint-landscape-tablet {
+      height: 25rem;
+
+      @include bpk-margin-leading(bpk-spacing-xxl(), false);
+      @include bpk-margin-trailing(bpk-spacing-xl(), false);
+    }
+
+    @include breakpoint-portrait-large {
+      height: 58.3125rem;
+      padding: bpk-spacing-xl();
+    }
+
+    @include breakpoint-portrait-medium {
+      height: 42.625rem;
+      padding: bpk-spacing-xl();
+    }
+
+    @include breakpoint-portrait-small {
+      height: 31.25rem;
+      padding: bpk-spacing-lg();
+    }
+  }
+
+  &__sponsor-content,
+  &__promo-content {
+    display: flex;
+    flex-direction: column;
+
+    @include breakpoint-landscape {
+      &--start {
+        align-items: start;
+        text-align: start;
+      }
+
+      &--center {
+        align-items: center;
+        text-align: center;
+      }
+
+      &--end {
+        align-items: start;
+        text-align: start;
+      }
+    }
+
+    @include breakpoint-landscape-desktop {
+      width: 22.5rem;
+    }
+
+    @include breakpoint-landscape-tablet {
+      width: 20rem;
+    }
+  }
+
+  &::after {
+    display: none;
+  }
+
+  &__sponsor-logo {
+    width: 9.25rem;
+  }
+
+  &__cta {
+    // Remove the following 2 lines once the new Button style is reasdy in Backpack. (ST-4135)
+    background: $bpk-color-white;
+    color: black; /* stylelint-disable-line */
+    pointer-events: auto;
+
+    // Remove the following line once the new Button style is reasdy in Backpack. (ST-4135)
+    @include bpk-label-1;
+
+    @include breakpoint-landscape {
+      margin-top: bpk-spacing-xl();
+    }
+
+    @include breakpoint-portrait {
+      display: none;
+    }
+  }
+}

package/bpk-component-graphic-promotion/src/custom-breakpoints.module.scss

@@ -0,0 +1,70 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2022 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// FIXME: Replace the custom breakpoints with on es from Backpack when ready. (ST-4102)
+
+$breakpoint-landscape-desktop-min: 50.01rem;
+$breakpoint-landscape-tablet-max: 50rem;
+$breakpoint-landscape-tablet-min: 43.76rem;
+$breakpoint-portrait-large-max: 43.75rem;
+$breakpoint-portrait-large-min: 32.01rem;
+$breakpoint-portrait-medium-max: 32rem;
+$breakpoint-portrait-medium-min: 26.51rem;
+$breakpoint-portrait-small-max: 26.5rem;
+
+@mixin breakpoint-landscape-desktop {
+  @media (min-width: $breakpoint-landscape-desktop-min) {
+    @content;
+  }
+}
+
+@mixin breakpoint-landscape-tablet {
+  @media (min-width: $breakpoint-landscape-tablet-min) and (max-width: $breakpoint-landscape-tablet-max) {
+    @content;
+  }
+}
+
+@mixin breakpoint-portrait-large {
+  @media (min-width: $breakpoint-portrait-large-min) and (max-width: $breakpoint-portrait-large-max) {
+    @content;
+  }
+}
+
+@mixin breakpoint-portrait-medium {
+  @media (min-width: $breakpoint-portrait-medium-min) and (max-width: $breakpoint-portrait-medium-max) {
+    @content;
+  }
+}
+
+@mixin breakpoint-portrait-small {
+  @media (max-width: $breakpoint-portrait-small-max) {
+    @content;
+  }
+}
+
+@mixin breakpoint-landscape {
+  @media (min-width: $breakpoint-landscape-tablet-min) {
+    @content;
+  }
+}
+
+@mixin breakpoint-portrait {
+  @media (max-width: $breakpoint-portrait-large-max) {
+    @content;
+  }
+}

package/bpk-component-grid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-grid",
-  "version": "3.1.0",
+  "version": "3.1.4",
   "description": "Backpack grid components.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,8 +14,8 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-mixins": "^28.1.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-grid/src/BpkGridColumn.js

@@ -18,7 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules } from '../../bpk-react-utils';
+import { cssModules } from 'bpk-react-utils';
 
 import STYLES from './BpkGridColumn.module.scss';
 

package/bpk-component-grid/src/BpkGridContainer.js

@@ -18,7 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules } from '../../bpk-react-utils';
+import { cssModules } from 'bpk-react-utils';
 
 import STYLES from './BpkGridContainer.module.scss';
 

package/bpk-component-grid/src/BpkGridRow.js

@@ -18,7 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules } from '../../bpk-react-utils';
+import { cssModules } from 'bpk-react-utils';
 
 import STYLES from './BpkGridRow.module.scss';
 

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-grid-toggle",
-  "version": "3.1.0",
+  "version": "3.1.4",
   "description": "Backpack vertical grid toggle component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
   "dependencies": {
-    "bpk-component-link": "^3.1.0",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-component-link": "^3.1.4",
+    "bpk-mixins": "^28.1.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-grid-toggle/src/BpkGridToggle.js

@@ -18,8 +18,8 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { cssModules } from '../../bpk-react-utils';
-import { BpkButtonLink } from '../../bpk-component-link';
+import { cssModules } from 'bpk-react-utils';
+import { BpkButtonLink } from 'bpk-component-link';
 
 import STYLES from './BpkGridToggle.module.scss';
 

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-horizontal-nav",
-  "version": "5.1.1",
+  "version": "5.1.5",
   "description": "Backpack horizontal nav component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,17 +14,17 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-mobile-scroll-container": "^3.1.0",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-component-mobile-scroll-container": "^3.1.4",
+    "bpk-mixins": "^28.1.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-component-text": "^6.1.1",
-    "bpk-storybook-utils": "^1.1.0"
+    "@skyscanner/bpk-foundations-web": "^6.1.0",
+    "bpk-component-text": "^6.1.5",
+    "bpk-storybook-utils": "^1.1.3"
   }
 }

package/bpk-component-horizontal-nav/src/BpkHorizontalNav.js

@@ -19,9 +19,9 @@
 
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
-import { cssModules } from '../../bpk-react-utils';
+import { cssModules } from 'bpk-react-utils';
 import React, { Component, type Node } from 'react';
-import BpkMobileScrollContainer from '../../bpk-component-mobile-scroll-container';
+import BpkMobileScrollContainer from 'bpk-component-mobile-scroll-container';
 
 import STYLES from './BpkHorizontalNav.module.scss';
 

package/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.js

@@ -19,7 +19,7 @@
 
 import React, { Component, type Node } from 'react';
 import PropTypes from 'prop-types';
-import { cssModules } from '../../bpk-react-utils';
+import { cssModules } from 'bpk-react-utils';
 
 import { HORIZONTAL_NAV_TYPES } from './BpkHorizontalNav';
 import STYLES from './BpkHorizontalNavItem.module.scss';

package/bpk-component-icon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-icon",
-  "version": "9.2.1",
+  "version": "9.2.5",
   "description": "Backpack icon components.",
   "license": "Apache-2.0",
   "repository": {
@@ -17,16 +17,16 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "@skyscanner/bpk-svgs": "^14.0.19",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "@skyscanner/bpk-foundations-web": "^6.1.0",
+    "@skyscanner/bpk-svgs": "^14.1.5",
+    "bpk-mixins": "^28.1.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-component-button": "^5.1.0",
-    "bpk-component-list": "^3.1.0",
-    "bpk-component-text": "^6.1.1"
+    "bpk-component-button": "^6.1.0",
+    "bpk-component-list": "^3.1.4",
+    "bpk-component-text": "^6.1.5"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"

package/bpk-component-icon/src/classNameModifierHOCFactory.js

@@ -18,7 +18,7 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import { wrapDisplayName } from '../../bpk-react-utils';
+import { wrapDisplayName } from 'bpk-react-utils';
 
 export default (displayName, classNamesToAdd = []) =>
   (ComposedComponent) => {

package/bpk-component-icon/src/withAlignment.js

@@ -17,14 +17,15 @@
  */
 
 import React from 'react';
-import { wrapDisplayName } from '../../bpk-react-utils';
+import { wrapDisplayName } from 'bpk-react-utils';
 
 export default function withAlignment(Component, objectHeight, subjectHeight) {
   const WithAlignment = (props) => {
     const objectHeightDecimal = `${objectHeight}`.replace('rem', '');
     const subjectHeightDecimal = `${subjectHeight}`.replace('rem', '');
-    const marginTopCalculated = `${Math.max(0, objectHeightDecimal - subjectHeightDecimal) / 2
-      }rem`;
+    const marginTopCalculated = `${
+      Math.max(0, objectHeightDecimal - subjectHeightDecimal) / 2
+    }rem`;
 
     return (
       <span

package/bpk-component-icon/src/withDescription.js

@@ -18,7 +18,7 @@
 /* @flow strict */
 
 import React, { type AbstractComponent } from 'react';
-import { cssModules, wrapDisplayName } from '../../bpk-react-utils';
+import { cssModules, wrapDisplayName } from 'bpk-react-utils';
 
 import STYLES from './withDescription.module.scss';
 

package/bpk-component-icon/src/withRtlSupport.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { cssModules } from '../../bpk-react-utils';
+import { cssModules } from 'bpk-react-utils';
 
 import STYLES from './BpkIcon.module.scss';
 import classNameModifierHOCFactory from './classNameModifierHOCFactory';

package/bpk-component-image/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-image",
-  "version": "5.1.1",
+  "version": "5.1.5",
   "description": "Backpack image component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-spinner": "^5.1.0",
-    "bpk-mixins": "^26.1.0",
-    "bpk-react-utils": "^4.1.0",
+    "bpk-component-spinner": "^5.1.4",
+    "bpk-mixins": "^28.1.0",
+    "bpk-react-utils": "^4.1.1",
     "prop-types": "^15.7.2",
     "react-transition-group": "^2.5.3"
   },
@@ -24,8 +24,8 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^5.0.0",
-    "bpk-component-mobile-scroll-container": "^3.1.0",
-    "bpk-component-text": "^6.1.1"
+    "@skyscanner/bpk-foundations-web": "^6.1.0",
+    "bpk-component-mobile-scroll-container": "^3.1.4",
+    "bpk-component-text": "^6.1.5"
   }
 }

package/bpk-component-image/src/BpkBackgroundImage.js

@@ -19,8 +19,8 @@
 
 import React, { type Node, Component } from 'react';
 import PropTypes from 'prop-types';
-import { cssModules, deprecated } from '../../bpk-react-utils';
-import { BpkSpinner } from '../../bpk-component-spinner';
+import { cssModules, deprecated } from 'bpk-react-utils';
+import { BpkSpinner } from 'bpk-component-spinner';
 import CSSTransition from 'react-transition-group/CSSTransition';
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 

package/bpk-component-image/src/BpkImage.js

@@ -19,8 +19,8 @@
 
 import React, { type Node, Component } from 'react';
 import PropTypes from 'prop-types';
-import { cssModules, deprecated } from '../../bpk-react-utils';
-import { BpkSpinner } from '../../bpk-component-spinner';
+import { cssModules, deprecated } from 'bpk-react-utils';
+import { BpkSpinner } from 'bpk-component-spinner';
 import CSSTransition from 'react-transition-group/CSSTransition';
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 

package/bpk-component-image/src/withLazyLoading.js

@@ -19,7 +19,7 @@
 
 import React, { type Node, type ComponentType } from 'react';
 import PropTypes from 'prop-types';
-import { wrapDisplayName } from '../../bpk-react-utils';
+import { wrapDisplayName } from 'bpk-react-utils';
 import throttle from 'lodash/throttle';
 
 type WithLazyLoadingProps = {