@skyscanner/backpack-web 6.0.0-alpha.0 → 6.0.0-alpha.1

package/bpk-component-popover/src/BpkPopoverPortal.js

@@ -1,145 +1,151 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.propTypes = exports.defaultProps = exports.default = void 0;
-
-var _core = require("@popperjs/core");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _a11yFocusStore = _interopRequireDefault(require("a11y-focus-store"));
-
-var _bpkReactUtils = require("../../bpk-react-utils");
-
-var _keyboardFocusScope = _interopRequireDefault(require("./keyboardFocusScope"));
-
-var _BpkPopoverModule = _interopRequireDefault(require("./BpkPopover.css"));
-
-var _BpkPopover = _interopRequireWildcard(require("./BpkPopover"));
-
-const _excluded = ["isOpen", "onClose", "placement", "popperModifiers", "portalClassName", "portalStyle", "renderTarget", "target"];
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-const getClassName = (0, _bpkReactUtils.cssModules)(_BpkPopoverModule.default);
-
-const propTypes = _objectSpread(_objectSpread({}, _BpkPopover.propTypes), {}, {
-  target: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]).isRequired,
-  isOpen: _propTypes.default.bool.isRequired,
-  onClose: _propTypes.default.func.isRequired,
-  placement: _propTypes.default.oneOf(_core.basePlacements),
-  portalStyle: _propTypes.default.object,
-  // eslint-disable-line react/forbid-prop-types
-  portalClassName: _propTypes.default.string,
-  renderTarget: _propTypes.default.func,
-  popperModifiers: _propTypes.default.object // eslint-disable-line react/forbid-prop-types
-
-});
-
-exports.propTypes = propTypes;
-
-const defaultProps = _objectSpread(_objectSpread({}, _BpkPopover.defaultProps), {}, {
+/*
+ * 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 { createPopper, basePlacements } from '@popperjs/core';
+import PropTypes from 'prop-types';
+import React, { Component, type Node } from 'react';
+import focusStore from 'a11y-focus-store';
+import { Portal, cssModules } from '../../bpk-react-utils';
+
+import keyboardFocusScope from './keyboardFocusScope';
+import STYLES from './BpkPopover.module.scss';
+import BpkPopover, {
+  propTypes as popoverPropTypes,
+  defaultProps as popoverDefaultProps,
+  type Props as PopoverProps,
+} from './BpkPopover';
+
+const getClassName = cssModules(STYLES);
+
+export type Props = {
+  ...$Exact<PopoverProps>,
+  target: (() => ?HTMLElement) | Node,
+  isOpen: boolean,
+  placement: ?('top' | 'right' | 'bottom' | 'left'),
+  portalStyle: ?Object,
+  portalClassName: ?string,
+  renderTarget: ?() => ?HTMLElement,
+  popperModifiers: ?Object,
+};
+
+export const propTypes = {
+  ...popoverPropTypes,
+  target: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  placement: PropTypes.oneOf(basePlacements),
+  portalStyle: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  portalClassName: PropTypes.string,
+  renderTarget: PropTypes.func,
+  popperModifiers: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+};
+
+export const defaultProps = {
+  ...popoverDefaultProps,
   placement: 'bottom',
   portalStyle: null,
   portalClassName: null,
   renderTarget: null,
-  popperModifiers: null
-});
-
-exports.defaultProps = defaultProps;
-
-class BpkPopoverPortal extends _react.Component {
-  constructor() {
-    super();
+  popperModifiers: null,
+};
 
-    _defineProperty(this, "popper", void 0);
+class BpkPopoverPortal extends Component<Props> {
+  popper: ?typeof createPopper;
 
-    _defineProperty(this, "suppressRestoreFocus", void 0);
+  suppressRestoreFocus: boolean;
 
-    _defineProperty(this, "previousTargetElement", void 0);
+  previousTargetElement: ?HTMLElement;
 
-    _defineProperty(this, "onRender", (popoverElement, targetElement) => {
-      this.position(popoverElement, targetElement);
-    });
+  static propTypes = propTypes;
 
-    _defineProperty(this, "onClose", (event, information) => {
-      // If the user has clicked outside the popover then we don't want focus to be restored
-      // otherwise it will be stolen back from the element they clicked on.
-      // Here we suppress restoring focus before the consumer is told about the close and updates state.
-      this.suppressRestoreFocus = information.source === 'DOCUMENT_CLICK';
+  static defaultProps = defaultProps;
 
-      if (this.props.onClose) {
-        this.props.onClose(event, information);
-      }
-    });
-
-    _defineProperty(this, "beforeClose", done => {
-      if (this.popper) {
-        this.popper.destroy();
-        this.popper = null;
-        this.previousTargetElement = null;
-      }
+  constructor() {
+    super();
 
-      _keyboardFocusScope.default.unscopeFocus();
+    this.popper = null;
+    this.previousTargetElement = null;
+    this.ref = React.createRef();
+  }
 
-      if (!this.suppressRestoreFocus) {
-        _a11yFocusStore.default.restoreFocus();
+  onRender = (popoverElement: HTMLElement, targetElement: ?HTMLElement) => {
+    this.position(popoverElement, targetElement);
+  };
+
+  // The order of events here is as follows:
+  // - `onClose` is called by `Portal`
+  // - The consumer changes `isOpen` to `false`
+  // - `beforeClose` is called by `Portal`
+  // - `beforeClose` calls the `done` callback which closes the `Portal`
+
+  // `onClose` is called by the `Portal` to inform the consumer that `isOpen` should be made false.
+  // Before we pass this information to the consumer, we want to note if restoring focus should be suppressed
+  onClose = (event: Object, information: { source: string }) => {
+    // If the user has clicked outside the popover then we don't want focus to be restored
+    // otherwise it will be stolen back from the element they clicked on.
+    // Here we suppress restoring focus before the consumer is told about the close and updates state.
+    this.suppressRestoreFocus = information.source === 'DOCUMENT_CLICK';
+
+    if (this.props.onClose) {
+      this.props.onClose(event, information);
+    }
+  };
 
-        this.suppressRestoreFocus = false;
-      }
+  // `beforeClose` is called by the `Portal` when `isOpen` is changed to false.
+  // As a result, `onClose` is called first, followed by `beforeClose`.
+  beforeClose = (done: () => void) => {
+    if (this.popper) {
+      this.popper.destroy();
+      this.popper = null;
+      this.previousTargetElement = null;
+    }
 
-      done();
-    });
+    keyboardFocusScope.unscopeFocus();
+    if (!this.suppressRestoreFocus) {
+      focusStore.restoreFocus();
+      this.suppressRestoreFocus = false;
+    }
 
-    this.popper = null;
-    this.previousTargetElement = null;
-  }
+    done();
+  };
 
-  position(popoverElement, targetElement) {
+  position(popoverElement: HTMLElement, targetElement: ?HTMLElement) {
     if (!targetElement) {
       return;
     }
 
-    const targetElementHasChanged = targetElement !== this.previousTargetElement;
+    const targetElementHasChanged =
+      targetElement !== this.previousTargetElement;
 
     if (targetElementHasChanged && this.popper) {
       this.popper.destroy();
       this.popper = null;
-    } // Custom modifier that makes the arrow display at the edge of the target.
-
+    }
 
+    // Custom modifier that makes the arrow display at the edge of the target.
     const applyArrowHide = {
       name: 'applyArrowHide',
       enabled: true,
       phase: 'write',
-
-      fn({
-        state
-      }) {
-        const {
-          arrow
-        } = state.elements;
-
+      fn({ state }) {
+        const { arrow } = state.elements;
         if (arrow) {
           if (state.modifiersData.arrow.centerOffset !== 0) {
             arrow.setAttribute('data-hide', '');
@@ -147,50 +153,52 @@ class BpkPopoverPortal extends _react.Component {
             arrow.removeAttribute('data-hide');
           }
         }
-      }
+      },
+    };
 
-    }; // The default modifiers for the popper
+    // The default modifiers for the popper
     // Note that GPU acceleration should be disabled otherwise Popper will use `translate3d`
     // which can cause blurriness in Safari and Chrome.
-
-    const stdModifiers = [{
-      name: 'computeStyles',
-      options: {
-        gpuAcceleration: false
-      }
-    }, {
-      name: 'offset',
-      options: {
-        offset: [0, 17]
-      }
-    }, applyArrowHide];
+    const stdModifiers = [
+      {
+        name: 'computeStyles',
+        options: {
+          gpuAcceleration: false,
+        },
+      },
+      {
+        name: 'offset',
+        options: {
+          offset: [0, 17],
+        },
+      },
+      applyArrowHide,
+    ];
 
     if (!this.popper) {
-      this.popper = (0, _core.createPopper)(targetElement, popoverElement, {
+      this.popper = createPopper(targetElement, popoverElement, {
         placement: this.props.placement,
         onFirstUpdate: () => {
           if (targetElement) {
             targetElement.focus();
           }
-
-          _a11yFocusStore.default.storeFocus();
-
-          _keyboardFocusScope.default.scopeFocus(popoverElement);
+          focusStore.storeFocus();
+          keyboardFocusScope.scopeFocus(popoverElement);
         },
-        modifiers: this.props.popperModifiers ? [...this.props.popperModifiers, ...stdModifiers] : stdModifiers
+        modifiers: this.props.popperModifiers
+          ? [...this.props.popperModifiers, ...stdModifiers]
+          : stdModifiers,
       });
     }
 
     this.previousTargetElement = targetElement;
-
     if (this.popper) {
       this.popper.update();
     }
   }
 
   render() {
-    const _this$props = this.props,
-          {
+    const {
       isOpen,
       onClose,
       placement,
@@ -198,9 +206,9 @@ class BpkPopoverPortal extends _react.Component {
       portalClassName,
       portalStyle,
       renderTarget,
-      target
-    } = _this$props,
-          rest = _objectWithoutProperties(_this$props, _excluded);
+      target,
+      ...rest
+    } = this.props;
 
     const classNames = [getClassName('bpk-popover-portal')];
 
@@ -208,25 +216,32 @@ class BpkPopoverPortal extends _react.Component {
       classNames.push(portalClassName);
     }
 
-    return /*#__PURE__*/_react.default.createElement(_bpkReactUtils.PortalV1, {
-      beforeClose: this.beforeClose,
-      className: classNames.join(' '),
-      isOpen: isOpen,
-      onClose: this.onClose,
-      onRender: this.onRender,
-      style: portalStyle,
-      renderTarget: renderTarget,
-      target: target
-    }, /*#__PURE__*/_react.default.createElement(_BpkPopover.default, _extends({
-      onClose: this.onClose
-    }, rest)));
+    const targetElement =
+      typeof target === 'function' ? (
+        target
+      ) : (
+        <div ref={this.ref}>{target}</div>
+      );
+
+    return (
+      <>
+        {typeof targetElement !== 'function' && targetElement}
+        <Portal
+          beforeClose={this.beforeClose}
+          className={classNames.join(' ')}
+          isOpen={isOpen}
+          onClose={this.onClose}
+          onRender={this.onRender}
+          style={portalStyle}
+          renderTarget={renderTarget}
+          target={targetElement}
+        >
+          {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
+          <BpkPopover onClose={this.onClose} {...rest} />
+        </Portal>
+      </>
+    );
   }
-
 }
 
-_defineProperty(BpkPopoverPortal, "propTypes", propTypes);
-
-_defineProperty(BpkPopoverPortal, "defaultProps", defaultProps);
-
-var _default = BpkPopoverPortal;
-exports.default = _default;
+export default BpkPopoverPortal;

package/bpk-component-popover/src/constants.js

@@ -1,10 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.ARROW_ID = void 0;
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -22,9 +15,9 @@ exports.default = exports.ARROW_ID = void 0;
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const ARROW_ID = 'js-bpk-popover-arrow';
-exports.ARROW_ID = ARROW_ID;
-var _default = {
-  ARROW_ID
-};
-exports.default = _default;
+
+/* @flow strict */
+
+export const ARROW_ID = 'js-bpk-popover-arrow';
+
+export default { ARROW_ID };

package/bpk-component-popover/src/keyboardFocusScope.js

@@ -1,16 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _tabbable = _interopRequireDefault(require("tabbable"));
-
-var _focusin = _interopRequireDefault(require("focusin"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -28,23 +15,27 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 // This code is based on that from `a11y-focus-scope`.
 // Instead of completely preventing focus leaving the target element,
 // it only prevents it leaving due to keyboard events.
 // Clicks outside the target element will move focus as normal.
+
+import tabbable from 'tabbable';
+import focusin from 'focusin';
+
 let polyfilled = false;
 let focusTrapped = false;
 
-const init = element => {
+const init = (element) => {
   // lazily polyfill focusin for firefox
   if (!polyfilled) {
-    _focusin.default.polyfill();
-
+    focusin.polyfill();
     polyfilled = true;
   }
 
   const focus = () => {
-    ((0, _tabbable.default)(element)[0] || element).focus();
+    (tabbable(element)[0] || element).focus();
   };
 
   const enableFocusTrapping = () => {
@@ -55,7 +46,7 @@ const init = element => {
     focusTrapped = false;
   };
 
-  const checkFocus = event => {
+  const checkFocus = (event) => {
     if (!focusTrapped) {
       return;
     }
@@ -65,12 +56,14 @@ const init = element => {
     }
   };
 
-  focus(); // As we only want to trap focus for keyboard navigation, we enable focus trapping on keydown and disable it again on keyup.
-  // This means that focus is trapped when pressing the tab key, but not trapped for other navigation events such as mouse clicks.
+  focus();
 
+  // As we only want to trap focus for keyboard navigation, we enable focus trapping on keydown and disable it again on keyup.
+  // This means that focus is trapped when pressing the tab key, but not trapped for other navigation events such as mouse clicks.
   document.addEventListener('keydown', enableFocusTrapping);
   document.addEventListener('focusin', checkFocus);
   document.addEventListener('keyup', disableFocusTrapping);
+
   return () => {
     document.removeEventListener('keydown', enableFocusTrapping);
     document.removeEventListener('focusin', checkFocus);
@@ -80,7 +73,7 @@ const init = element => {
 
 let teardownFn;
 
-const scopeFocus = element => {
+const scopeFocus = (element) => {
   if (teardownFn) teardownFn();
   teardownFn = init(element);
 };
@@ -90,8 +83,4 @@ const unscopeFocus = () => {
   teardownFn = null;
 };
 
-var _default = {
-  scopeFocus,
-  unscopeFocus
-};
-exports.default = _default;
+export default { scopeFocus, unscopeFocus };

package/bpk-component-popover/src/themeAttributes.js

@@ -1,12 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _bpkComponentLink = require("../../bpk-component-link");
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -24,5 +15,9 @@ var _bpkComponentLink = require("../../bpk-component-link");
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var _default = [..._bpkComponentLink.themeAttributes];
-exports.default = _default;
+
+/* @flow strict */
+
+import { themeAttributes as linkAttributes } from '../../bpk-component-link';
+
+export default [...linkAttributes];

package/bpk-component-price/README.md

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

package/bpk-component-price/index.js

@@ -1,28 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "ALIGNS", {
-  enumerable: true,
-  get: function () {
-    return _commonTypes.ALIGNS;
-  }
-});
-Object.defineProperty(exports, "SIZES", {
-  enumerable: true,
-  get: function () {
-    return _commonTypes.SIZES;
-  }
-});
-exports.default = void 0;
-
-var _BpkPrice = _interopRequireDefault(require("./src/BpkPrice"));
-
-var _commonTypes = require("./src/common-types");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -40,5 +15,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var _default = _BpkPrice.default;
-exports.default = _default;
+/* @flow strict */
+
+import BpkPrice from './src/BpkPrice';
+import { SIZES, ALIGNS } from './src/common-types';
+
+export default BpkPrice;
+export { SIZES, ALIGNS };

package/bpk-component-price/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "bpk-component-price",
+  "version": "1.1.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.5",
+    "bpk-mixins": "^31.1.1",
+    "bpk-react-utils": "^5.0.0",
+    "prop-types": "^15.5.8"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  }
+}