@skyscanner/backpack-web 9.1.0-alpha.1 → 9.2.0-beta.2

package/bpk-react-utils/src/deviceDetection.js

@@ -1,10 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isDeviceIphone = exports.isDeviceIpad = exports.isDeviceIos = void 0;
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -22,14 +15,17 @@ exports.isDeviceIphone = exports.isDeviceIpad = exports.isDeviceIos = void 0;
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const isDeviceIphone = () => /iPhone/i.test(typeof window !== 'undefined' ? window.navigator.platform : '');
 
-exports.isDeviceIphone = isDeviceIphone;
+/* @flow strict */
 
-const isDeviceIpad = () => /iPad/i.test(typeof window !== 'undefined' ? window.navigator.platform : '');
+const isDeviceIphone = () =>
+  /iPhone/i.test(
+    typeof window !== 'undefined' ? window.navigator.platform : '',
+  );
 
-exports.isDeviceIpad = isDeviceIpad;
+const isDeviceIpad = () =>
+  /iPad/i.test(typeof window !== 'undefined' ? window.navigator.platform : '');
 
 const isDeviceIos = () => isDeviceIphone() || isDeviceIpad();
 
-exports.isDeviceIos = isDeviceIos;
+export { isDeviceIphone, isDeviceIpad, isDeviceIos };

package/bpk-react-utils/src/isRTL.js

@@ -1,10 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -22,14 +15,22 @@ exports.default = void 0;
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+/* @flow strict */
+
 const DIRECTIONS = {
   LTR: 'ltr',
-  RTL: 'rtl'
+  RTL: 'rtl',
 };
 
-const getDirection = () => (typeof document !== 'undefined' && document.documentElement !== null && document.documentElement.getAttribute('dir') || DIRECTIONS.LTR).toLowerCase();
+const getDirection = () =>
+  (
+    (typeof document !== 'undefined' &&
+      document.documentElement !== null &&
+      document.documentElement.getAttribute('dir')) ||
+    DIRECTIONS.LTR
+  ).toLowerCase();
 
 const isRTL = () => getDirection() === DIRECTIONS.RTL;
 
-var _default = isRTL;
-exports.default = _default;
+export default isRTL;

package/bpk-react-utils/src/withDefaultProps.js

@@ -1,70 +1,78 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _wrapDisplayName = _interopRequireDefault(require("./wrapDisplayName"));
-
-const _excluded = ["className"],
-      _excluded2 = ["children", "className"];
-
-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; }
+/*
+ * 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, { type Node, type AbstractComponent } from 'react';
+
+import wrapDisplayName from './wrapDisplayName';
+
+type Props = {
+  children: ?Node,
+  className: ?string,
+};
 
-const withDefaultProps = (WrappedComponent, defaultProps) => {
-  const {
-    className: defaultClassName
-  } = defaultProps,
-        defaultRest = _objectWithoutProperties(defaultProps, _excluded);
+type DefaultProps = {
+  className?: ?string,
+};
 
-  const component = props => {
-    const {
-      children,
-      className: innerClassName
-    } = props,
-          rest = _objectWithoutProperties(props, _excluded2);
+const withDefaultProps = (
+  WrappedComponent: AbstractComponent<any>,
+  defaultProps: DefaultProps,
+) => {
+  const { className: defaultClassName, ...defaultRest } = defaultProps;
 
+  const component = (props: Props) => {
+    const { children, className: innerClassName, ...rest } = props;
     const classNames = [];
 
     if (defaultClassName) {
       classNames.push(defaultClassName);
     }
-
     if (innerClassName) {
       classNames.push(innerClassName);
     }
 
     return (
-      /*#__PURE__*/
       // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-      _react.default.createElement(WrappedComponent, _extends({
-        className: classNames.join(' ')
-      }, defaultRest, rest), children)
+      <WrappedComponent
+        className={classNames.join(' ')}
+        {...defaultRest}
+        {...rest}
+      >
+        {children}
+      </WrappedComponent>
     );
   };
 
   component.propTypes = {
-    children: _propTypes.default.node,
-    className: _propTypes.default.string
+    children: PropTypes.node,
+    className: PropTypes.string,
   };
   component.defaultProps = {
     children: null,
-    className: null
+    className: null,
   };
-  component.displayName = (0, _wrapDisplayName.default)(WrappedComponent, 'withDefaultProps');
+
+  component.displayName = wrapDisplayName(WrappedComponent, 'withDefaultProps');
+
   return component;
 };
 
-var _default = withDefaultProps;
-exports.default = _default;
+export default withDefaultProps;

package/bpk-react-utils/src/wrapDisplayName.js

@@ -1,10 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -22,6 +15,7 @@ exports.default = void 0;
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 const wrapDisplayName = (Component, hoc) => {
   if (!Component) {
     return `${hoc}()`;
@@ -34,5 +28,4 @@ const wrapDisplayName = (Component, hoc) => {
   return `${hoc}(${Component.displayName || Component.name || 'Component'})`;
 };
 
-var _default = wrapDisplayName;
-exports.default = _default;
+export default wrapDisplayName;

package/bpk-scrim-utils/README.md

@@ -0,0 +1,50 @@
+# bpk-scrim-utils
+
+> Higher order component that adds a scrim behind components and manages scroll states
+
+## Installation
+
+```sh
+npm install bpk-scrim-utils --save-dev
+```
+
+```js
+import { withScrim } from 'bpk-scrim-utils';
+
+const Box = props => (
+  <div ref={props.dialogRef}>
+    <BpkButton onClick={props.onClose}>Close</BpkButton>
+    Hello
+  </div>
+);
+
+const BoxWithScrim = withScrim(Box);
+```
+
+`withScrim` sends all props it receives down to the component, except `getApplicationElement` and `padded`. It also adds some props that are used for a11y and closing the modal:
+
+* `dialogRef` should be set as the ref on the visible container on top of the scrim; it is used to set focus
+* `onClose` should be set as the `onClick` action on a button or a link
+* `isIphone` can be used to apply iPhone only styles or behaviour, as it has different scrolling behaviour
+
+`containerClassName` can be used to apply styles to the full-screen container into which the enriched component is inserted
+(e.g. `display: flex` or `display: grid`)
+
+> **Note:** the `pagewrap` element id is a convention we use internally at Skyscanner. In most cases it should "just work".
+
+### Props
+
+| Property              | PropType | Required | Default Value                                                                    |
+| --------------------- | -------- | -------- | -------------------------------------------------------------------------------- |
+| onClose               | func     | true     | See prop details                                                                 |
+| getApplicationElement | func     | true     | -                                                                                |
+| isIphone              | bool     | false    | `/iPhone/i.test(typeof window !== 'undefined' ? window.navigator.platform : '')` |
+| containerClassName    | string   | false    | ''                                                                               |
+| closeOnScrimClick     | bool     | false    | true                                                                             |
+| dark                  | bool     | false    | false                                                                            |
+
+### Prop Details
+
+#### onClose
+
+This is required unless `closeOnScrimClick` is false.

package/bpk-scrim-utils/index.js

@@ -1,20 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-Object.defineProperty(exports, "withScrim", {
-  enumerable: true,
-  get: function () {
-    return _withScrim.default;
-  }
-});
-
-var _withScrim = _interopRequireDefault(require("./src/withScrim"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -32,7 +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 = {
-  withScrim: _withScrim.default
+
+import withScrim from './src/withScrim';
+
+export { withScrim };
+export default {
+  withScrim,
 };
-exports.default = _default;

package/bpk-scrim-utils/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "bpk-scrim-utils",
+  "version": "6.0.1",
+  "description": "Higher order component that adds an overlay behind components and manages scroll states.",
+  "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/"
+  },
+  "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
+  "dependencies": {
+    "a11y-focus-scope": "^1.1.3",
+    "a11y-focus-store": "^1.0.0",
+    "bpk-mixins": "^31.4.0",
+    "bpk-react-utils": "^7.0.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.2"
+  }
+}

package/bpk-scrim-utils/src/BpkScrim.js

@@ -1,18 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _bpkReactUtils = require("../../bpk-react-utils");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -30,34 +15,38 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var STYLES = {
-  "bpk-scrim": "bpk-scrim-module__bpk-scrim___Nib-L",
-  "bpk-scrim--dark": "bpk-scrim-module__bpk-scrim--dark___2_4mc",
-  "bpk-scrim--full-screen": "bpk-scrim-module__bpk-scrim--full-screen___3slO2",
-  "bpk-scrim--appear": "bpk-scrim-module__bpk-scrim--appear___3x2rM",
-  "bpk-scrim--appear-active": "bpk-scrim-module__bpk-scrim--appear-active___1rqe8",
-  "bpk-keyframe-spin": "bpk-scrim-module__bpk-keyframe-spin___3TeCj"
-};
-const getClassName = (0, _bpkReactUtils.cssModules)(STYLES);
 
-const BpkScrim = props => /*#__PURE__*/_react.default.createElement(_bpkReactUtils.TransitionInitialMount, {
-  appearClassName: getClassName('bpk-scrim--appear'),
-  appearActiveClassName: getClassName('bpk-scrim--appear-active'),
-  transitionTimeout: 200
-}, /*#__PURE__*/_react.default.createElement("div", {
-  role: "presentation",
-  className: getClassName('bpk-scrim', props.dark && 'bpk-scrim--dark'),
-  onMouseDown: props.onClose,
-  onTouchStart: props.onClose
-}));
+import React from 'react';
+import PropTypes from 'prop-types';
+import { TransitionInitialMount, cssModules } from 'bpk-react-utils';
+
+import STYLES from './bpk-scrim.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const BpkScrim = (props) => (
+  <TransitionInitialMount
+    appearClassName={getClassName('bpk-scrim--appear')}
+    appearActiveClassName={getClassName('bpk-scrim--appear-active')}
+    transitionTimeout={200}
+  >
+    <div
+      role="presentation"
+      className={getClassName('bpk-scrim', props.dark && 'bpk-scrim--dark')}
+      onMouseDown={props.onClose}
+      onTouchStart={props.onClose}
+    />
+  </TransitionInitialMount>
+);
 
 BpkScrim.propTypes = {
-  dark: _propTypes.default.bool,
-  onClose: _propTypes.default.func
+  dark: PropTypes.bool,
+  onClose: PropTypes.func,
 };
+
 BpkScrim.defaultProps = {
   dark: false,
-  onClose: null
+  onClose: null,
 };
-var _default = BpkScrim;
-exports.default = _default;
+
+export default BpkScrim;

package/bpk-scrim-utils/src/bpk-scrim-content.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-scrim-content{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;overflow:auto;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}

package/bpk-scrim-utils/src/bpk-scrim-content.module.scss

@@ -0,0 +1,32 @@
+/*
+ * 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-scrim-content {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $bpk-zindex-scrim;
+  overflow: auto;
+  overflow-x: hidden;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}

package/bpk-scrim-utils/src/bpk-scrim.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-scrim{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;transition:opacity 200ms ease-in-out;background-color:#b2b2bf;opacity:.7;overflow:hidden}.bpk-scrim--dark{background-color:#111236;opacity:.95}@media (max-width: 32.25rem){.bpk-scrim--full-screen{opacity:1}}.bpk-scrim--appear{opacity:0}.bpk-scrim--appear-active{opacity:.7}

package/bpk-scrim-utils/src/bpk-scrim.module.scss

@@ -0,0 +1,51 @@
+/*
+ * 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-scrim {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: $bpk-zindex-scrim;
+  transition: opacity $bpk-duration-sm ease-in-out;
+  background-color: $bpk-scrim-background-color;
+  opacity: $bpk-scrim-opacity;
+  overflow: hidden;
+
+  &--dark {
+    background-color: $bpk-scrim-dark-background-color;
+    opacity: $bpk-scrim-dark-opacity;
+  }
+
+  &--full-screen {
+    @include bpk-breakpoint-mobile {
+      opacity: $bpk-scrim-mobile-opacity;
+    }
+  }
+
+  &--appear {
+    opacity: $bpk-scrim-initial-opacity;
+  }
+
+  &--appear-active {
+    opacity: $bpk-scrim-opacity;
+  }
+}

package/bpk-scrim-utils/src/customPropTypes.js

@@ -1,10 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.onClosePropType = void 0;
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -22,15 +15,25 @@ exports.onClosePropType = void 0;
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
+/* @flow strict */
+
 // eslint-disable-next-line import/prefer-default-export
-const onClosePropType = (props, propName, componentName) => {
+export const onClosePropType = (
+  props: Object,
+  propName: string,
+  componentName: string,
+): ?Error => {
   const onCloseValue = props[propName];
 
-  if (props.closeOnScrimClick && (!onCloseValue || typeof onCloseValue !== 'function')) {
-    return new Error(`Invalid prop \`${propName}\` supplied to \`${componentName}\`. There must an onClose handler if closeOnScrimClick is true.`);
+  if (
+    props.closeOnScrimClick &&
+    (!onCloseValue || typeof onCloseValue !== 'function')
+  ) {
+    return new Error(
+      `Invalid prop \`${propName}\` supplied to \`${componentName}\`. There must an onClose handler if closeOnScrimClick is true.`,
+    );
   }
 
   return null;
 };
-
-exports.onClosePropType = onClosePropType;