@skyscanner/backpack-web 0.0.1

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

@@ -0,0 +1,24 @@
+/*
+ * 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 withScrim from './src/withScrim';
+
+export { withScrim };
+export default {
+  withScrim,
+};

package/bpk-scrim-utils/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "bpk-scrim-utils",
+  "version": "5.1.0",
+  "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": "^26.1.0",
+    "bpk-react-utils": "^4.1.0"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  }
+}

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

@@ -0,0 +1,52 @@
+/*
+ * 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 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.bool,
+  onClose: PropTypes.func,
+};
+
+BpkScrim.defaultProps = {
+  dark: false,
+  onClose: null,
+};
+
+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

@@ -0,0 +1,39 @@
+/*
+ * 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 */
+
+// eslint-disable-next-line import/prefer-default-export
+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.`,
+    );
+  }
+
+  return null;
+};

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

@@ -0,0 +1,115 @@
+/*
+ * 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.
+ */
+
+let scrollOffset = 0;
+
+const getWindow = () => (typeof window !== 'undefined' ? window : null);
+
+const getBodyElement = () =>
+  typeof document !== 'undefined' && typeof document.body !== 'undefined'
+    ? document.body
+    : null;
+
+const getScrollBarWidth = () => {
+  let scrollBarWidth = 0;
+
+  const window = getWindow();
+  const body = getBodyElement();
+
+  if (body === null && window === null) {
+    return '';
+  }
+
+  const bodyIsOverflowing = body.clientWidth < window.innerWidth;
+
+  if (bodyIsOverflowing) {
+    const scrollDiv = document.createElement('div');
+
+    scrollDiv.style.position = 'absolute';
+    scrollDiv.style.top = '-9999px';
+    scrollDiv.style.width = '50px';
+    scrollDiv.style.height = '50px';
+    scrollDiv.style.overflow = 'scroll';
+
+    body.appendChild(scrollDiv);
+    scrollBarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
+    body.removeChild(scrollDiv);
+  }
+
+  return scrollBarWidth === 0 ? '' : `${scrollBarWidth}px`;
+};
+
+export const storeScroll = () => {
+  const window = getWindow();
+
+  if (window) {
+    scrollOffset = window.pageYOffset;
+  }
+};
+
+export const restoreScroll = () => {
+  const window = getWindow();
+
+  if (window) {
+    window.scrollTo(0, scrollOffset);
+  }
+};
+
+export const fixBody = () => {
+  const body = getBodyElement();
+
+  if (!body) {
+    return;
+  }
+
+  body.style.position = 'fixed';
+};
+
+export const unfixBody = () => {
+  const body = getBodyElement();
+
+  if (!body) {
+    return;
+  }
+
+  body.style.position = '';
+};
+
+export const lockScroll = () => {
+  const body = getBodyElement();
+
+  if (!body) {
+    return;
+  }
+
+  const paddingRight = getScrollBarWidth();
+
+  body.style.overflow = 'hidden';
+  body.style.paddingRight = paddingRight;
+};
+
+export const unlockScroll = () => {
+  const body = getBodyElement();
+
+  if (!body) {
+    return;
+  }
+
+  body.style.overflow = '';
+  body.style.paddingRight = '';
+};

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

@@ -0,0 +1,161 @@
+/*
+ * 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 focusScope from 'a11y-focus-scope';
+import focusStore from 'a11y-focus-store';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import {
+  cssModules,
+  isDeviceIpad,
+  isDeviceIphone,
+  wrapDisplayName,
+} from 'bpk-react-utils';
+
+import BpkScrim from './BpkScrim';
+import {
+  fixBody,
+  lockScroll,
+  restoreScroll,
+  storeScroll,
+  unfixBody,
+  unlockScroll,
+} from './scroll-utils';
+import STYLES from './bpk-scrim-content.module.scss';
+import { onClosePropType } from './customPropTypes';
+
+const getClassName = cssModules(STYLES);
+
+const withScrim = (WrappedComponent) => {
+  class WithScrim extends Component {
+    static propTypes = {
+      getApplicationElement: PropTypes.func.isRequired,
+      onClose: onClosePropType,
+      dark: PropTypes.bool,
+      isIphone: PropTypes.bool,
+      isIpad: PropTypes.bool,
+      containerClassName: PropTypes.string,
+      closeOnScrimClick: PropTypes.bool,
+    };
+
+    static defaultProps = {
+      dark: false,
+      onClose: null,
+      isIphone: isDeviceIphone(),
+      isIpad: isDeviceIpad(),
+      containerClassName: null,
+      closeOnScrimClick: true,
+    };
+
+    componentDidMount() {
+      const { getApplicationElement, isIpad, isIphone } = this.props;
+      const applicationElement = getApplicationElement();
+
+      // iPhones need to have the application element hidden
+      // and scrolling stored to prevent some weird display
+      // issues from happening.
+      if (isIphone && applicationElement) {
+        storeScroll();
+        applicationElement.style.display = 'none';
+      } else {
+        // The method used for `lockScroll` does not prevent scrolling on iPad.
+        // On iPad we instead set `position: fixed` on `body` to prevent scrolling
+        // and resolve virtual keyboard issues.
+        if (isIpad) {
+          storeScroll();
+          fixBody();
+        } else {
+          lockScroll();
+        }
+        if (applicationElement) {
+          applicationElement.setAttribute('aria-hidden', 'true');
+        }
+      }
+
+      focusStore.storeFocus();
+      if (this.dialogElement) {
+        focusScope.scopeFocus(this.dialogElement);
+      }
+    }
+
+    componentWillUnmount() {
+      const { getApplicationElement, isIpad, isIphone } = this.props;
+      const applicationElement = getApplicationElement();
+
+      if (isIphone && applicationElement) {
+        applicationElement.style.display = '';
+        restoreScroll();
+      } else {
+        if (isIpad) {
+          unfixBody();
+          restoreScroll();
+        } else {
+          unlockScroll();
+        }
+        if (applicationElement) {
+          applicationElement.removeAttribute('aria-hidden');
+        }
+      }
+
+      focusScope.unscopeFocus();
+      focusStore.restoreFocus();
+    }
+
+    dialogRef = (ref) => {
+      this.dialogElement = ref;
+    };
+
+    render() {
+      const {
+        closeOnScrimClick,
+        containerClassName,
+        dark,
+        getApplicationElement,
+        isIpad,
+        isIphone,
+        onClose,
+        ...rest
+      } = this.props;
+
+      const classNames = [getClassName('bpk-scrim-content')];
+
+      if (containerClassName) {
+        classNames.push(containerClassName);
+      }
+
+      return (
+        <div className={classNames.join(' ')}>
+          <BpkScrim onClose={closeOnScrimClick ? onClose : null} dark={dark} />
+          <WrappedComponent
+            {...rest}
+            isIphone={isIphone}
+            isIpad={isIpad}
+            dialogRef={this.dialogRef}
+            onClose={onClose}
+          />
+        </div>
+      );
+    }
+  }
+
+  WithScrim.displayName = wrapDisplayName(WrappedComponent, 'withScrim');
+
+  return WithScrim;
+};
+
+export default withScrim;

package/bpk-tether/.eslintrc

@@ -0,0 +1,6 @@
+{
+  "rules": {
+    "import/no-unresolved": "off",
+    "import/extensions": "off"
+  }
+}

package/bpk-tether/README.md

@@ -0,0 +1,52 @@
+# bpk-tether
+
+> Wrapper around the Tether library, along with related utilities
+
+## Installation
+
+```sh
+npm install bpk-tether --save-dev
+```
+
+## Tether Wrapper
+
+A wrapper around the [Tether](http://tether.io/) library which extends the `Tether` object to emit a `position` event.
+
+### Usage
+
+```js
+import { Tether } from 'bpk-tether';
+
+this.tether = new Tether({
+  classPrefix: 'bpk-popover-tether',
+  element: popoverElement,
+  target: targetElement,
+  tetherOptions: tetherOptions,
+});
+
+this.tether.on('position', position => console.log('Tether was repositioned', position));
+```
+
+## getArrowPositionCallback
+
+When using Tether to create a popover or tooltip with an arrow pointing towards the target element, we want to have
+this arrow point to the target element at all times. To achieve this, the `getArrowPositionCallback` function returns
+a callback to be used on the `position` event. When invoked, it repositions the arrow element to stick to the target
+element.
+
+### Usage
+
+```js
+import { Tether } from 'bpk-tether';
+
+const classPrefix = 'bpk-popover-tether';
+
+this.tether = new Tether({
+  classPrefix,
+  element: tetherElement,
+  target: targetElement,
+  tetherOptions: tetherOptions,
+});
+
+this.tether.on('position', getArrowPositionCallback(tetherElement, 'arrow-id', classPrefix));
+```

package/bpk-tether/index.js

@@ -0,0 +1,24 @@
+/*
+ * 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 TetherWrapper from './src/TetherWrapper';
+import getArrowPositionCallback from './src/getArrowPositionCallback';
+import applyRTLTransforms from './src/applyRTLTransforms';
+
+export default TetherWrapper;
+export { getArrowPositionCallback, applyRTLTransforms };