@skyscanner/backpack-web 3.2.0 → 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-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-scrollable-calendar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-scrollable-calendar",
-  "version": "6.1.16",
+  "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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",