@skyscanner/backpack-web 3.0.1 → 3.3.0

package/bpk-component-accordion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-accordion",
-  "version": "5.0.10",
+  "version": "5.0.11",
   "description": "Backpack accordion component.",
   "license": "Apache-2.0",
   "repository": {

package/bpk-component-aria-live/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-aria-live",
-  "version": "2.1.15",
+  "version": "2.1.16",
   "description": "Backpack aria-live component.",
   "license": "Apache-2.0",
   "repository": {
@@ -18,9 +18,9 @@
     "prop-types": "^15.5.8"
   },
   "devDependencies": {
-    "bpk-component-chip": "^5.2.13",
+    "bpk-component-chip": "^5.2.14",
     "bpk-component-code": "^3.1.10",
-    "bpk-component-fieldset": "^4.1.15",
+    "bpk-component-fieldset": "^4.1.16",
     "bpk-component-select": "^5.1.10",
     "bpk-component-switch": "^2.1.11"
   },

package/bpk-component-autosuggest/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-autosuggest",
-  "version": "6.1.13",
+  "version": "6.1.14",
   "description": "Backpack autosuggest component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "bpk-component-input": "^6.1.13",
+    "bpk-component-input": "^6.1.14",
     "bpk-mixins": "^31.1.1",
     "bpk-react-utils": "^4.1.2",
     "prop-types": "^15.7.2",

package/bpk-component-banner-alert/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-banner-alert",
-  "version": "6.1.13",
+  "version": "6.1.14",
   "description": "Backpack banner alert component.",
   "license": "Apache-2.0",
   "repository": {
@@ -24,7 +24,7 @@
     "react-transition-group": "^2.5.3"
   },
   "devDependencies": {
-    "bpk-component-aria-live": "^2.1.15",
+    "bpk-component-aria-live": "^2.1.16",
     "bpk-component-button": "^6.2.5",
     "bpk-storybook-utils": "^1.1.9"
   },

package/bpk-component-calendar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-calendar",
-  "version": "11.1.15",
+  "version": "11.1.16",
   "description": "Backpack calendar component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-aria-live": "^2.1.15",
+    "bpk-component-aria-live": "^2.1.16",
     "bpk-component-icon": "^9.2.11",
     "bpk-component-select": "^5.1.10",
     "bpk-mixins": "^31.1.1",

package/bpk-component-chip/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-chip",
-  "version": "5.2.13",
+  "version": "5.2.14",
   "description": "Backpack chip component.",
   "license": "Apache-2.0",
   "repository": {
@@ -23,7 +23,7 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-aria-live": "^2.1.15",
+    "bpk-component-aria-live": "^2.1.16",
     "bpk-component-text": "^7.0.4"
   }
 }

package/bpk-component-datepicker/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-datepicker",
-  "version": "15.2.15",
+  "version": "15.2.16",
   "description": "Backpack datepicker component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,10 +15,10 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "bpk-component-breakpoint": "^4.0.2",
-    "bpk-component-calendar": "^11.1.15",
-    "bpk-component-input": "^6.1.13",
+    "bpk-component-calendar": "^11.1.16",
+    "bpk-component-input": "^6.1.14",
     "bpk-component-modal": "^3.1.12",
-    "bpk-component-popover": "^5.0.0",
+    "bpk-component-popover": "^5.0.1",
     "bpk-mixins": "^31.1.1",
     "bpk-react-utils": "^4.1.2",
     "prop-types": "^15.7.2"

package/bpk-component-fieldset/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-fieldset",
-  "version": "4.1.15",
+  "version": "4.1.16",
   "description": "Backpack fieldset component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,7 +14,7 @@
   },
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
-    "bpk-component-form-validation": "^4.2.13",
+    "bpk-component-form-validation": "^4.2.14",
     "bpk-component-label": "^5.1.10",
     "bpk-mixins": "^31.1.1",
     "bpk-react-utils": "^4.1.2",
@@ -24,12 +24,12 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-autosuggest": "^6.1.13",
+    "bpk-component-autosuggest": "^6.1.14",
     "bpk-component-button": "^6.2.5",
-    "bpk-component-calendar": "^11.1.15",
+    "bpk-component-calendar": "^11.1.16",
     "bpk-component-checkbox": "^4.1.12",
-    "bpk-component-datepicker": "^15.2.15",
-    "bpk-component-input": "^6.1.13",
+    "bpk-component-datepicker": "^15.2.16",
+    "bpk-component-input": "^6.1.14",
     "bpk-component-select": "^5.1.10",
     "bpk-component-textarea": "^4.2.10"
   }

package/bpk-component-floating-notification/README.md

@@ -0,0 +1,53 @@
+# bpk-component-floating-notification
+
+## Installation
+
+```sh
+npm install bpk-component-floating-notification --save-dev
+```
+
+## Usage
+
+```js
+import React from 'react';
+import BpkFloatingNotification from 'bpk-component-floating-notification';
+import BpkIconHeart from '../../packages/bpk-component-icon/sm/heart';
+
+export default () => (
+  <BpkFloatingNotification
+    ctaText="View"
+    type={TYPE.dark}
+    icon={BpkIconHeart}
+    onClick={() => {}}
+    text="Killer Combo saved to New York and Miami 🎉"
+  />
+);
+```
+
+## Props
+
+| Property       | PropType     | Required | Default Value |
+| -------------- | ------------ | -------- | ------------- |
+| animateOnEnter | bool         | false    | true          |
+| animateOnExit  | bool         | false    | true          |
+| className      | string       | false    | null          |
+| ctaText        | string       | false    | null          |
+| hideAfter      | number       | false    | 4000          |
+| icon           | ReactElement | false    | null          |
+| onClick        | func         | false    | null          |
+| text           | string       | true     | -             |
+| type           | oneOf(TYPE)  | false    | TYPE.light    |
+
+### Prop Details
+
+#### hideAfter
+
+This prop controls the amount of time that the notification stays visible before the exit animation begins.
+
+The default value is 4 seconds (4000 milliseconds).
+
+#### type
+
+By default the component is rendered in the light theme (`TYPE.light`) which uses a dark background and white text for the notification. This contrasts against a white page.
+
+The dark theme (`TYPE.dark`) displays the notification with a white background and black text. This contrasts against a dark page.

package/bpk-component-floating-notification/index.js

@@ -0,0 +1,27 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 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.
+ */
+/* @flow strict */
+
+import BpkFloatingNotification, {
+  type Props as BpkFloatingNotificationProps,
+  TYPE,
+} from './src/BpkFloatingNotification';
+
+export type { BpkFloatingNotificationProps };
+export { TYPE };
+export default BpkFloatingNotification;

package/bpk-component-floating-notification/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "bpk-component-floating-notification",
+  "version": "1.0.0",
+  "description": "Backpack floating-notification component.",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:Skyscanner/backpack.git"
+  },
+  "author": "Backpack Design System <backpack@skyscanner.net>",
+  "main": "index.js",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "bpk-component-button": "^6.2.5",
+    "bpk-component-text": "^7.0.4",
+    "bpk-mixins": "^31.1.1",
+    "bpk-react-utils": "^4.1.2",
+    "prop-types": "^15.5.8"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0"
+  }
+}

package/bpk-component-floating-notification/src/BpkFloatingNotification.js

@@ -0,0 +1,150 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 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.
+ */
+/* @flow strict */
+
+import PropTypes from 'prop-types';
+import React, { useEffect, useState, ReactElement } from 'react';
+import { CSSTransition } from 'react-transition-group';
+
+import BpkButton from '../../bpk-component-button';
+import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
+import { cssModules } from '../../bpk-react-utils';
+
+import STYLES from './BpkFloatingNotification.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+export const TYPE = {
+  light: 'light',
+  dark: 'dark',
+};
+
+export type Props = {
+  animateOnEnter: ?boolean,
+  animateOnExit: ?boolean,
+  className: ?string,
+  ctaText: ?string,
+  hideAfter: ?number,
+  icon: ?() => ReactElement,
+  onClick: ?() => void,
+  text: string,
+  type: ?TYPE,
+};
+
+const BpkFloatingNotification = (props: Props) => {
+  const [showMessage, setShowMessage] = useState(true);
+
+  const {
+    animateOnEnter,
+    animateOnExit,
+    className,
+    ctaText,
+    hideAfter,
+    icon: Icon,
+    onClick,
+    text,
+    type,
+    ...rest
+  } = props;
+
+  const classNames = getClassName(
+    'bpk-floating-notification',
+    type === TYPE.dark && 'bpk-floating-notification--dark',
+    className,
+  );
+
+  const iconClassNames = getClassName(
+    'bpk-floating-notification__icon',
+    type === TYPE.dark && 'bpk-floating-notification__icon--dark',
+  );
+
+  const buttonClassNames = getClassName(
+    'bpk-floating-notification__button',
+    type === TYPE.dark && 'bpk-floating-notification__button--dark',
+  );
+
+  useEffect(() => {
+    let timer;
+    if (hideAfter) {
+      timer = setTimeout(() => setShowMessage(false), hideAfter);
+    }
+    return () => timer && clearTimeout(timer);
+  });
+
+  return (
+    <CSSTransition
+      in={showMessage}
+      classNames={{
+        exit: getClassName('bpk-floating-notification--leave'),
+        exitActive: getClassName('bpk-floating-notification--leave-active'),
+        exitDone: getClassName('bpk-floating-notification--leave-done'),
+        appear: getClassName('bpk-floating-notification--appear'),
+        appearActive: getClassName('bpk-floating-notification--appear-active'),
+      }}
+      timeout={400}
+      appear={animateOnEnter}
+      exit={animateOnExit}
+      unmountOnExit
+    >
+      <div className={classNames} {...rest}>
+        {Icon && (
+          <div className={iconClassNames}>
+            <Icon />
+          </div>
+        )}
+        <BpkText
+          tagName="p"
+          textStyle={TEXT_STYLES.bodyDefault}
+          className={getClassName('bpk-floating-notification__text')}
+        >
+          {text}
+        </BpkText>
+        {ctaText && (
+          <BpkButton link onClick={onClick} className={buttonClassNames}>
+            {ctaText}
+          </BpkButton>
+        )}
+      </div>
+    </CSSTransition>
+  );
+};
+
+BpkFloatingNotification.propTypes = {
+  animateOnEnter: PropTypes.bool,
+  animateOnExit: PropTypes.bool,
+  className: PropTypes.string,
+  ctaText: PropTypes.string,
+  hideAfter: PropTypes.number,
+  icon: PropTypes.ReactElement,
+  onClick: PropTypes.func,
+  text: PropTypes.string.isRequired,
+  type: PropTypes.oneOf(Object.values(TYPE)),
+};
+
+BpkFloatingNotification.defaultProps = {
+  animateOnEnter: true,
+  animateOnExit: true,
+  className: null,
+  ctaText: null,
+  hideAfter: 4000,
+  icon: null,
+  onClick: null,
+  type: TYPE.light,
+};
+
+export default BpkFloatingNotification;

package/bpk-component-floating-notification/src/BpkFloatingNotification.module.css

@@ -0,0 +1,18 @@
+/*
+ * Backpack - Skyscanner's Design System
+ * 
+ * Copyright 2016 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.
+*/
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-floating-notification{display:flex}

package/bpk-component-floating-notification/src/BpkFloatingNotification.module.scss

@@ -0,0 +1,96 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 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';
+
+.bpk-floating-notification {
+  position: absolute;
+  right: 0;
+  bottom: bpk-spacing-xl();
+  left: 0;
+  display: flex;
+  max-width: bpk-spacing-xxl() * 10;
+  margin: auto;
+  padding: bpk-spacing-lg();
+  transition: opacity $bpk-duration-base ease-in-out,
+    transform $bpk-duration-base ease-in-out;
+  border-radius: $bpk-border-radius-md;
+  background: $bpk-color-sky-blue-shade-03;
+  color: $bpk-color-white;
+  box-shadow: $bpk-box-shadow-xl, $bpk-box-shadow-lg;
+
+  @include bpk-breakpoint-mobile {
+    max-width: 100%;
+    padding: bpk-spacing-base();
+  }
+
+  &--leave {
+    transform: translateY(0);
+    opacity: 1;
+
+    &-active {
+      transform: translateY(bpk-spacing-xl());
+      opacity: 0;
+    }
+
+    &-done {
+      opacity: 0;
+    }
+  }
+
+  &--appear {
+    transform: translateY(bpk-spacing-xl());
+    opacity: 0;
+
+    &-active {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  &__button {
+    min-height: 0;
+    margin: 0 0 auto auto;
+    padding: 0;
+    color: $bpk-color-sky-blue-tint-01;
+
+    &--dark {
+      color: $bpk-link-color;
+    }
+  }
+
+  &__icon {
+    margin: bpk-spacing-sm() bpk-spacing-md() 0 bpk-spacing-sm();
+    flex-shrink: 0;
+    text-align: bottom;
+    fill: $bpk-color-white;
+
+    &--dark {
+      fill: $bpk-color-sky-gray;
+    }
+  }
+
+  &__text {
+    margin-right: bpk-spacing-md();
+  }
+
+  &--dark {
+    background: $bpk-color-white;
+    color: $bpk-color-sky-gray;
+  }
+}

package/bpk-component-form-validation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-form-validation",
-  "version": "4.2.13",
+  "version": "4.2.14",
   "description": "Backpack form-validation component.",
   "license": "Apache-2.0",
   "repository": {
@@ -27,7 +27,7 @@
     "bpk-component-button": "^6.2.5",
     "bpk-component-checkbox": "^4.1.12",
     "bpk-component-icon": "^9.2.11",
-    "bpk-component-input": "^6.1.13",
+    "bpk-component-input": "^6.1.14",
     "bpk-component-select": "^5.1.10",
     "bpk-component-textarea": "^4.2.10"
   }

package/bpk-component-graphic-promotion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-graphic-promotion",
-  "version": "3.0.4",
+  "version": "3.1.0",
   "description": "Backpack graphic-promotion component.",
   "license": "Apache-2.0",
   "repository": {

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

@@ -30,8 +30,6 @@
   box-shadow: none;
 
   @include breakpoint-landscape {
-    pointer-events: none;
-
     &__sponsor-label {
       margin-bottom: bpk-spacing-sm();
 
@@ -172,6 +170,11 @@
 
       @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 breakpoint-landscape-tablet {
@@ -179,6 +182,11 @@
 
       @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 breakpoint-portrait-large {
@@ -237,8 +245,6 @@
   }
 
   &__cta {
-    pointer-events: auto;
-
     @include breakpoint-landscape {
       margin-top: bpk-spacing-xl();
     }

package/bpk-component-image/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-image",
-  "version": "5.1.11",
+  "version": "5.1.12",
   "description": "Backpack image component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,6 +14,7 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
+    "@skyscanner/bpk-foundations-web": "^8.0.0",
     "bpk-component-spinner": "^5.1.10",
     "bpk-mixins": "^31.1.1",
     "bpk-react-utils": "^4.1.2",
@@ -24,7 +25,6 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.0.0",
     "bpk-component-mobile-scroll-container": "^3.1.10",
     "bpk-component-text": "^7.0.4"
   }

package/bpk-component-input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-input",
-  "version": "6.1.13",
+  "version": "6.1.14",
   "description": "Backpack input component.",
   "license": "Apache-2.0",
   "repository": {
@@ -23,7 +23,7 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-banner-alert": "^6.1.13",
+    "bpk-component-banner-alert": "^6.1.14",
     "bpk-component-label": "^5.1.10",
     "bpk-storybook-utils": "^1.1.9"
   }

package/bpk-component-map/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-map",
-  "version": "6.0.5",
+  "version": "6.0.6",
   "description": "Backpack map component.",
   "license": "Apache-2.0",
   "repository": {

package/bpk-component-overlay/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-overlay",
-  "version": "2.1.11",
+  "version": "2.1.12",
   "description": "Backpack overlay component.",
   "license": "Apache-2.0",
   "repository": {
@@ -21,7 +21,7 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-image": "^5.1.11",
+    "bpk-component-image": "^5.1.12",
     "bpk-component-text": "^7.0.4"
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8"

package/bpk-component-phone-input/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-phone-input",
-  "version": "7.1.15",
+  "version": "7.1.16",
   "description": "Backpack phone input component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-input": "^6.1.13",
+    "bpk-component-input": "^6.1.14",
     "bpk-component-label": "^5.1.10",
     "bpk-component-select": "^5.1.10",
     "bpk-component-text": "^7.0.4",
@@ -27,7 +27,7 @@
     "react": "^16.3.0 || ^17.0.0"
   },
   "devDependencies": {
-    "bpk-component-fieldset": "^4.1.15",
-    "bpk-component-image": "^5.1.11"
+    "bpk-component-fieldset": "^4.1.16",
+    "bpk-component-image": "^5.1.12"
   }
 }

package/bpk-component-popover/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-popover",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "description": "Backpack popover component.",
   "license": "Apache-2.0",
   "repository": {
@@ -30,6 +30,6 @@
   "devDependencies": {
     "bpk-component-button": "^6.2.5",
     "bpk-component-content-container": "^5.0.4",
-    "bpk-component-input": "^6.1.13"
+    "bpk-component-input": "^6.1.14"
   }
 }

package/bpk-component-price/README.md

@@ -0,0 +1,35 @@
+# bpk-component-price
+
+> Backpack example component.
+
+## Installation
+
+```sh
+npm install bpk-component-price --save-dev
+```
+
+## Usage
+
+```js
+import React from 'react';
+import BpkPrice, { SIZES } from 'bpk-component-price';
+
+export default () => (
+  <BpkPrice
+    size={SIZES.large}
+    subtitle="£209"
+    title="£1,830"
+    description="/ night"
+  />
+);
+```
+
+## Props
+
+| Property  | PropType | Required | Default Value |
+| --------- | -------- | -------- | ------------- |
+| title     | string   | true     | -             |
+| size | oneOf(SIZES)   | false    | SIZES.small         |
+| subtitle  | string   | false    | null          |
+| description | string   | false    | null          |
+| className | string   | false    | null          |

package/bpk-component-price/index.js

@@ -0,0 +1,23 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 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.
+ */
+/* @flow strict */
+
+import BpkPrice, { SIZES } from './src/BpkPrice';
+
+export default BpkPrice;
+export { SIZES };

package/bpk-component-price/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "bpk-component-price",
+  "version": "1.0.0",
+  "description": "Backpack price component.",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:Skyscanner/backpack.git"
+  },
+  "author": "Backpack Design System <backpack@skyscanner.net>",
+  "main": "index.js",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "bpk-component-text": "^7.0.4",
+    "bpk-mixins": "^31.1.1",
+    "bpk-react-utils": "^4.1.2",
+    "prop-types": "^15.5.8"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  }
+}

package/bpk-component-price/src/BpkPrice.js

@@ -0,0 +1,106 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 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.
+ */
+/* @flow strict */
+
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import { cssModules } from '../../bpk-react-utils';
+import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
+
+import STYLES from './BpkPrice.module.scss';
+
+export const SIZES = {
+  small: 'small',
+  large: 'large',
+};
+
+type Props = {
+  title: string,
+  size: $Values<typeof SIZES>,
+  className: ?string,
+  subtitle: ?string,
+  description: ?string,
+};
+
+const getClassName = cssModules(STYLES);
+
+const BpkPrice = (props: Props) => {
+  const { className, description, size, subtitle, title, ...rest } = props;
+
+  const isSmall = size === SIZES.small;
+
+  return (
+    <div
+      className={getClassName(
+        'bpk-price',
+        isSmall && 'bpk-price--small',
+        className,
+      )}
+      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
+      {...rest}
+    >
+      {subtitle && (
+        <BpkText
+          className={getClassName('bpk-price__subtitle')}
+          textStyle={isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm}
+          tagName="span"
+        >
+          {subtitle}
+        </BpkText>
+      )}
+      <div className={isSmall && getClassName('bpk-price__titleColumn')}>
+        <BpkText
+          textStyle={isSmall ? TEXT_STYLES.heading4 : TEXT_STYLES.xxl}
+          tagName="span"
+        >
+          {title}
+        </BpkText>
+        {description && (
+          <BpkText
+            textStyle={isSmall ? TEXT_STYLES.xs : TEXT_STYLES.sm}
+            tagName="span"
+            className={getClassName(
+              'bpk-price__description',
+              !isSmall && 'bpk-price__descriptionSpacing',
+            )}
+          >
+            {description}
+          </BpkText>
+        )}
+      </div>
+    </div>
+  );
+};
+
+BpkPrice.propTypes = {
+  title: PropTypes.string.isRequired,
+  size: PropTypes.oneOf(Object.keys(SIZES)),
+  className: PropTypes.string,
+  subtitle: PropTypes.string,
+  description: PropTypes.string,
+};
+
+BpkPrice.defaultProps = {
+  size: SIZES.small,
+  className: null,
+  subtitle: null,
+  description: null,
+};
+
+export default BpkPrice;

package/bpk-component-price/src/BpkPrice.module.scss

@@ -0,0 +1,55 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 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';
+
+.bpk-price {
+  display: flex;
+  flex-direction: column;
+
+  &--small {
+    text-align: right;
+
+    @include bpk-rtl {
+      text-align: left;
+    }
+  }
+
+  &__subtitle {
+    color: $bpk-color-sky-gray-tint-02;
+    text-decoration-line: line-through;
+  }
+
+  &__titleColumn {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__description {
+    color: $bpk-color-sky-gray-tint-02;
+
+    &Spacing {
+      margin-left: bpk-spacing-sm();
+
+      @include bpk-rtl {
+        margin-right: bpk-spacing-sm();
+        margin-left: unset;
+      }
+    }
+  }
+}

package/bpk-component-scrollable-calendar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-scrollable-calendar",
-  "version": "6.1.15",
+  "version": "6.1.17",
   "description": "Backpack scrollable calendar component.",
   "license": "Apache-2.0",
   "repository": {
@@ -15,7 +15,7 @@
   "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
   "dependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-calendar": "^11.1.15",
+    "bpk-component-calendar": "^11.1.16",
     "bpk-component-text": "^7.0.4",
     "bpk-mixins": "^31.1.1",
     "bpk-react-utils": "^4.1.2",

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-theme-toggle",
-  "version": "3.1.10",
+  "version": "3.1.11",
   "description": "Backpack theme toggle component.",
   "license": "Apache-2.0",
   "repository": {
@@ -19,7 +19,6 @@
     "bpk-component-select": "^5.1.10",
     "bpk-mixins": "^31.1.1",
     "bpk-react-utils": "^4.1.2",
-    "konami": "^1.6.2",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

package/bpk-component-theme-toggle/src/BpkThemeToggle.js

@@ -17,7 +17,6 @@
  */
 
 import React from 'react';
-import Konami from 'konami';
 
 import BpkLabel from '../../bpk-component-label';
 import BpkSelect from '../../bpk-component-select';
@@ -48,17 +47,10 @@ class BpkThemeToggle extends React.Component {
 
   componentDidMount() {
     document.addEventListener('keydown', this.handleKeyDown);
-    this.easterEgg = new Konami(() => {
-      this.konamiInterval = setInterval(this.cycleTheme, 200);
-    });
   }
 
   componentWillUnmount() {
     document.removeEventListener('keydown', this.handleKeyDown);
-
-    if (this.konamiInterval) {
-      clearInterval(this.konamiInterval);
-    }
   }
 
   handleKeyDown = (e) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "3.0.1",
+  "version": "3.3.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -22,13 +22,16 @@
     "access": "public"
   },
   "dependencies": {
+    "@popperjs/core": "^2.11.5",
+    "@react-google-maps/api": "^2.12.0",
     "@skyscanner/bpk-foundations-web": "^8.0.0",
+    "@skyscanner/bpk-svgs": "^14.1.9",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
     "bpk-mixins": "^31.1.1",
-    "date-fns": "^2.21.1",
     "d3-path": "^2.0.0",
     "d3-scale": "^4.0.2",
+    "date-fns": "^2.21.1",
     "intersection-observer": "^0.7.0",
     "lodash": "^4.17.20",
     "lodash.clamp": "^4.0.3",