@skyscanner/backpack-web 6.1.0 → 7.0.0-alpha.1

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

@@ -1,40 +0,0 @@
-/*
- * 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 { type PropType } from 'prop-types';
-
-// We disable eslint on the below line because it breaks the flow type definitions and the FlowIssue comment below
-// We can remove this when we migrate this file to TypeScript.
-// $FlowIssue[value-as-type] - PropType is imported as a type so is incorrectly reporting the PropType is not a valid type
-const deprecated = (propType: PropType, alternativeSuggestion: string) => // eslint-disable-line
-  (
-    props: { [string]: any },
-    propName: string,
-    componentName: string,
-    ...rest: [any]
-  ) => {
-    if (props[propName] != null) {
-      const message = `Warning: "${propName}" property of "${componentName}" has been deprecated. ${alternativeSuggestion}`;
-      // eslint-disable-next-line no-console
-      console.warn(message);
-    }
-    return propType(props, propName, componentName, ...rest);
-  };
-
-export default deprecated;

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

@@ -1,31 +0,0 @@
-/*
- * 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 */
-
-const isDeviceIphone = () =>
-  /iPhone/i.test(
-    typeof window !== 'undefined' ? window.navigator.platform : '',
-  );
-
-const isDeviceIpad = () =>
-  /iPad/i.test(typeof window !== 'undefined' ? window.navigator.platform : '');
-
-const isDeviceIos = () => isDeviceIphone() || isDeviceIpad();
-
-export { isDeviceIphone, isDeviceIpad, isDeviceIos };

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

@@ -1,36 +0,0 @@
-/*
- * 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 */
-
-const DIRECTIONS = {
-  LTR: 'ltr',
-  RTL: 'rtl',
-};
-
-const getDirection = () =>
-  (
-    (typeof document !== 'undefined' &&
-      document.documentElement !== null &&
-      document.documentElement.getAttribute('dir')) ||
-    DIRECTIONS.LTR
-  ).toLowerCase();
-
-const isRTL = () => getDirection() === DIRECTIONS.RTL;
-
-export default isRTL;

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

@@ -1,78 +0,0 @@
-/*
- * 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,
-};
-
-type DefaultProps = {
-  className?: ?string,
-};
-
-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 (
-      // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-      <WrappedComponent
-        className={classNames.join(' ')}
-        {...defaultRest}
-        {...rest}
-      >
-        {children}
-      </WrappedComponent>
-    );
-  };
-
-  component.propTypes = {
-    children: PropTypes.node,
-    className: PropTypes.string,
-  };
-  component.defaultProps = {
-    children: null,
-    className: null,
-  };
-
-  component.displayName = wrapDisplayName(WrappedComponent, 'withDefaultProps');
-
-  return component;
-};
-
-export default withDefaultProps;

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

@@ -1,31 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2022 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.
- */
-
-const wrapDisplayName = (Component, hoc) => {
-  if (!Component) {
-    return `${hoc}()`;
-  }
-
-  if (typeof Component === 'string') {
-    return `${hoc}(${Component})`;
-  }
-
-  return `${hoc}(${Component.displayName || Component.name || 'Component'})`;
-};
-
-export default wrapDisplayName;

package/bpk-scrim-utils/README.md

@@ -1,50 +0,0 @@
-# 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,24 +0,0 @@
-/*
- * 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

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

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

@@ -1,53 +0,0 @@
-/*
- * 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

@@ -1,18 +0,0 @@
-/*
- * 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

@@ -1,32 +0,0 @@
-/*
- * 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

@@ -1,18 +0,0 @@
-/*
- * 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

@@ -1,51 +0,0 @@
-/*
- * 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,39 +0,0 @@
-/*
- * 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

@@ -1,115 +0,0 @@
-/*
- * 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 = '';
-};