@skyscanner/backpack-web 3.1.0 → 4.0.0

package/bpk-component-flare/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-flare",
-  "version": "2.1.13",
+  "version": "2.1.14",
   "description": "Backpack FlareBar and ContentBubble component.",
   "license": "Apache-2.0",
   "repository": {
@@ -17,10 +17,10 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-label": "^5.1.10",
-    "bpk-component-text": "^7.0.4",
+    "bpk-component-label": "^5.1.11",
+    "bpk-component-text": "^7.0.5",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.2",
+    "bpk-react-utils": "^5.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {

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.1",
+  "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.6",
+    "bpk-component-text": "^7.0.5",
+    "bpk-mixins": "^31.1.1",
+    "bpk-react-utils": "^5.0.0",
+    "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.15",
   "description": "Backpack form-validation component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-animate-height": "^4.1.10",
+    "bpk-animate-height": "^4.1.11",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.2",
+    "bpk-react-utils": "^5.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
@@ -24,11 +24,11 @@
   },
   "devDependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "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-select": "^5.1.10",
-    "bpk-component-textarea": "^4.2.10"
+    "bpk-component-button": "^6.2.6",
+    "bpk-component-checkbox": "^4.1.13",
+    "bpk-component-icon": "^9.2.12",
+    "bpk-component-input": "^6.1.15",
+    "bpk-component-select": "^5.1.11",
+    "bpk-component-textarea": "^4.2.11"
   }
 }

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-graphic-promotion",
-  "version": "3.0.4",
+  "version": "3.1.1",
   "description": "Backpack graphic-promotion component.",
   "license": "Apache-2.0",
   "repository": {
@@ -13,11 +13,10 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "bpk-component-button": "^6.2.5",
-    "bpk-component-card": "^4.1.11",
-    "bpk-component-text": "^7.0.4",
+    "bpk-component-button": "^6.2.6",
+    "bpk-component-text": "^7.0.5",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.2",
+    "bpk-react-utils": "^5.0.0",
     "prop-types": "^15.5.8"
   },
   "peerDependencies": {

package/bpk-component-graphic-promotion/src/BpkGraphicPromo.js

@@ -23,12 +23,20 @@ import React from 'react';
 import { cssModules } from '../../bpk-react-utils';
 import BpkText from '../../bpk-component-text';
 import BpkButton from '../../bpk-component-button';
-import BpkCard from '../../bpk-component-card';
 
 import STYLES from './BpkGraphicPromo.module.scss';
 
 const getClassName = cssModules(STYLES);
 
+const ACCESSIBILITY_KEYS = {
+  Enter: 13 /* Enter */,
+  Space: 32 /* Space */,
+};
+
+const isAccessibilityClick = (event: React.KeyboardEvent<HTMLElement>) =>
+  Object.keys(ACCESSIBILITY_KEYS).includes(event.key) ||
+  Object.values(ACCESSIBILITY_KEYS).includes(event.keyCode || event.which);
+
 export const TEXT_ALIGN = {
   start: 'start',
   center: 'center',
@@ -94,8 +102,10 @@ const BpkGraphicPromo = (props: Props) => {
     event.stopPropagation();
     onClick();
   };
+  const onKeyWrapper = (event: React.KeyboardEvent<HTMLElement>) =>
+    isAccessibilityClick(event) && onClick();
 
-  const cardClasses = getClassName('bpk-graphic-promo', className);
+  const cardClasses = getClassName('bpk-card', 'bpk-graphic-promo', className);
   const containerClasses = getClassName(
     'bpk-graphic-promo__container',
     `bpk-graphic-promo__container--${textAlign}`,
@@ -104,13 +114,19 @@ const BpkGraphicPromo = (props: Props) => {
 
   const getTextClasses = (baseClass: string) =>
     getClassName(baseClass, `${baseClass}--${textAlign}`);
+
   return (
-    <BpkCard
+    // The card appears as a single component for the screen reader; its children are hidden. The card handles mouse
+    // clicks and key presses (Enter/Space) for the whole component, as described here:
+    // https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets
+    <div
       className={cardClasses}
       style={style}
-      onClick={onClickWrapper}
+      role="link"
       aria-label={constructAriaLabel(props)}
-      padded={false}
+      tabIndex={0}
+      onClick={onClickWrapper}
+      onKeyDown={onKeyWrapper}
     >
       <div className={containerClasses} aria-hidden>
         <div className={getTextClasses('bpk-graphic-promo__sponsor-content')}>
@@ -163,7 +179,7 @@ const BpkGraphicPromo = (props: Props) => {
           </BpkButton>
         </div>
       </div>
-    </BpkCard>
+    </div>
   );
 };
 

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

@@ -19,6 +19,10 @@
 @import '~bpk-mixins/index';
 @import './custom-breakpoints.module';
 
+.bpk-card {
+  @include bpk-card;
+}
+
 .bpk-graphic-promo {
   max-width: 65.5rem;
   margin-right: auto;
@@ -30,8 +34,6 @@
   box-shadow: none;
 
   @include breakpoint-landscape {
-    pointer-events: none;
-
     &__sponsor-label {
       margin-bottom: bpk-spacing-sm();
 
@@ -172,6 +174,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 +186,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 +249,6 @@
   }
 
   &__cta {
-    pointer-events: auto;
-
     @include breakpoint-landscape {
       margin-top: bpk-spacing-xl();
     }

package/bpk-component-grid/package.json

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

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

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

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

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-horizontal-nav",
-  "version": "5.1.11",
+  "version": "5.1.12",
   "description": "Backpack horizontal nav component.",
   "license": "Apache-2.0",
   "repository": {
@@ -14,9 +14,9 @@
   },
   "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
   "dependencies": {
-    "bpk-component-mobile-scroll-container": "^3.1.10",
+    "bpk-component-mobile-scroll-container": "^3.1.11",
     "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^4.1.2",
+    "bpk-react-utils": "^5.0.0",
     "prop-types": "^15.7.2"
   },
   "peerDependencies": {
@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-text": "^7.0.4",
-    "bpk-storybook-utils": "^1.1.9"
+    "bpk-component-text": "^7.0.5",
+    "bpk-storybook-utils": "^1.1.10"
   }
 }

package/bpk-component-icon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bpk-component-icon",
-  "version": "9.2.11",
+  "version": "9.2.12",
   "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": "^4.1.2",
+    "bpk-react-utils": "^5.0.0",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
-    "bpk-component-button": "^6.2.5",
-    "bpk-component-list": "^4.0.3",
-    "bpk-component-text": "^7.0.4"
+    "bpk-component-button": "^6.2.6",
+    "bpk-component-list": "^4.0.4",
+    "bpk-component-text": "^7.0.5"
   },
   "peerDependencies": {
     "react": "^16.3.0 || ^17.0.0"