@skyscanner/backpack-web 22.3.0 → 23.0.0

package/bpk-component-tooltip/README.md

@@ -1,65 +0,0 @@
-# bpk-component-tooltip
-
-> Backpack tooltip component.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```js
-import { useRef } from 'react';
-import BpkText from '@skyscanner/backpack-web/bpk-component-text';
-import BpkTooltip from '@skyscanner/backpack-web/bpk-component-tooltip';
-
-const App = () => (
-  const targetRef = useRef(null);
-  const target = (
-    <div ref={targetRef} className={'my-tooltip-target'}>
-      <BpkText textStyle="lg">LHR</BpkText>
-    </div>
-  );
-
-  <BpkTooltip
-    ariaLabel="London Heathrow"
-    id="my-tooltip"
-    target={target}
-  >
-    London Heathrow
-  </BpkTooltip>
-);
-```
-
-## Props
-
-| Property              | PropType                                       | Required | Default Value       |
-| --------------------- | ---------------------------------------------- | -------- | ------------------- |
-| ariaLabel             | string                                         | true     | -                   |
-| id                    | string                                         | true     | -                   |
-| children              | node                                           | true     | -                   |
-| target                | node                                           | true     | -                   |
-| hideOnTouchDevices    | bool                                           | false    | true                |
-| placement             | oneOf(['top', 'right', 'bottom', 'left'])      | false    | 'bottom'            |
-| padded                | bool                                           | false    | true                |
-| portalStyle           | object                                         | false    | null                |
-| portalClassName       | string                                         | false    | null                |
-| popperModifiers       | arrayOf(object)                                | false    | null                |
-| renderTarget          | func                                           | false    | null                |
-| type                  | oneOf(`TOOLTIP_TYPES.light`, `TOOLTIP_TYPES.dark`) | false    | `TOOLTIP_TYPES.light` |
-
-### Prop Details
-
-#### `ariaLabel`
-
-Tooltips are invisible to assistive technologies such as screen readers. To improve accessibility, `ariaLabel` is required to describe the content of the tooltip to assistive technologies.
-
-The label will be used on the `target` element, so any existing `aria-label` attached to `target` will be overridden.
-
-#### `popperModifiers`
-
-Please refer to the [documentation](https://popper.js.org/docs/v2/modifiers/) for the underlying positioning library "Popper.js". You can achieve various behaviours such as allowing the tooltip to overflow the viewport etc.
-
-#### target
-
-`target` should be a DOM element with a `ref` attached to it.

package/bpk-component-tooltip/src/BpkTooltip.module.scss

@@ -1,149 +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.scss';
-
-$bpk-spacing-v2: true;
-$arrow-size: bpk-spacing-md();
-$arrow-inset-margin: -($bpk-one-pixel-rem * 3);
-$light-arrow-border-color: $bpk-line-day;
-$dark-background-color: $bpk-surface-contrast-day;
-
-.bpk-tooltip-portal {
-  z-index: $bpk-zindex-tooltip;
-
-  &--target {
-    display: inline-block;
-  }
-}
-
-.bpk-tooltip {
-  transition: opacity $bpk-duration-sm ease-in-out,
-    transform $bpk-duration-sm ease-in-out;
-  outline: 0;
-  opacity: 1;
-
-  &--appear {
-    opacity: 0;
-
-    .bpk-tooltip-portal[data-popper-placement='top']
-      &:not(.bpk-tooltip--appear-active) {
-      transform: translate(0, -1rem);
-      transition: none;
-    }
-
-    .bpk-tooltip-portal[data-popper-placement='right']
-      &:not(.bpk-tooltip--appear-active) {
-      transform: translate(1rem, 0);
-      transition: none;
-    }
-
-    .bpk-tooltip-portal[data-popper-placement='bottom']
-      &:not(.bpk-tooltip--appear-active) {
-      transform: translate(0, 1rem);
-      transition: none;
-    }
-
-    .bpk-tooltip-portal[data-popper-placement='left']
-      &:not(.bpk-tooltip--appear-active) {
-      transform: translate(-1rem, 0);
-      transition: none;
-    }
-  }
-
-  &--appear-active {
-    transform: translate(0, 0);
-    transition: opacity $bpk-duration-sm ease-in-out,
-      transform $bpk-duration-sm ease-in-out;
-    opacity: 1;
-  }
-
-  &__arrow {
-    position: aboslute;
-    width: $arrow-size;
-    height: $arrow-size;
-    transform: rotate(45deg);
-    border: $bpk-one-pixel-rem solid transparent;
-    background: inherit;
-    background-color: $bpk-surface-default-day;
-
-    .bpk-tooltip-portal[data-popper-placement='top'] & {
-      bottom: $arrow-inset-margin;
-      border-right-color: $light-arrow-border-color;
-      border-bottom-color: $light-arrow-border-color;
-    }
-
-    .bpk-tooltip-portal[data-popper-placement='right'] & {
-      left: $arrow-inset-margin;
-      border-bottom-color: $light-arrow-border-color;
-      border-left-color: $light-arrow-border-color;
-    }
-
-    .bpk-tooltip-portal[data-popper-placement='bottom'] & {
-      top: $arrow-inset-margin;
-      border-top-color: $light-arrow-border-color;
-      border-left-color: $light-arrow-border-color;
-    }
-
-    .bpk-tooltip-portal[data-popper-placement='left'] & {
-      right: $arrow-inset-margin;
-      border-top-color: $light-arrow-border-color;
-      border-right-color: $light-arrow-border-color;
-    }
-
-    &--dark {
-      background-color: $dark-background-color;
-
-      .bpk-tooltip-portal[data-popper-placement='top'] & {
-        border-right-color: $dark-background-color;
-        border-bottom-color: $dark-background-color;
-      }
-
-      .bpk-tooltip-portal[data-popper-placement='right'] & {
-        border-bottom-color: $dark-background-color;
-        border-left-color: $dark-background-color;
-      }
-
-      .bpk-tooltip-portal[data-popper-placement='bottom'] & {
-        border-top-color: $dark-background-color;
-        border-left-color: $dark-background-color;
-      }
-
-      .bpk-tooltip-portal[data-popper-placement='left'] & {
-        border-top-color: $dark-background-color;
-        border-right-color: $dark-background-color;
-      }
-    }
-  }
-
-  &__inner {
-    overflow: hidden;
-
-    @include bpk-layer;
-
-    &--padded {
-      padding: bpk-spacing-md() bpk-spacing-base();
-    }
-
-    &--dark {
-      color: $bpk-text-primary-inverse-day;
-
-      @include bpk-layer($dark-background-color, $dark-background-color);
-    }
-  }
-}

package/bpk-react-utils/README.md

@@ -1,246 +0,0 @@
-# bpk-react-utils
-
-> Miscellaneous React based utilities for use in Backpack components.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Portal.js
-
-Render's children into a new component tree and appends it to `document.body`. Useful for Modals, Popovers, Tooltips etc where
-it's necessary in overcoming z-index issues when absolutely positioning elements.
-
-### Usage
-
-```js
-import { Portal } from '@skyscanner/backpack-web/bpk-react-utils';
-import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
-import { BpkCode } from '@skyscanner/backpack-web/bpk-component-code';
-import { Component } from 'react';
-
-class MyComponent extends Component {
-  constructor() {
-    super();
-
-    this.state = {
-      isOpen: false,
-    };
-  }
-
-  onOpen = () => {
-    this.setState({
-      isOpen: true,
-    });
-  };
-
-  onClose = () => {
-    this.setState({
-      isOpen: false,
-    });
-  };
-
-  render() {
-    return (
-      <div>
-        <BpkButton onClick={this.onOpen}>Open portal</BpkButton>
-        <Portal isOpen={this.state.isOpen} onClose={this.onClose}>
-          <div>
-            I'm now appended to <BpkCode>document.body</BpkCode>
-          </div>
-        </Portal>
-      </div>
-    );
-  }
-}
-```
-
-**NOTE:** Events used to bubble up from the portal into the parent component. Due to the way React works, events do not
-bubble up into the component in the DOM where the portal is rendered (i.e. render target), but instead they bubble up
-into the parent component in the shadow DOM, that is the component where you added the `Portal` in your React code. To
-avoid confusion and bugs caused by this behaviour, we have prevented mouse and keyboard events from bubbling up outside
-the portal.
-
-### Props
-
-| Property          | PropType                | Required | Default Value |
-| ----------------- | ----------------------- | -------- | ------------- |
-| children          | node                    | true     | -             |
-| isOpen            | bool                    | true     | -             |
-| beforeClose       | func                    | false    | null          |
-| onClose           | func                    | false    | noop          |
-| onOpen            | func                    | false    | noop          |
-| onRender          | func                    | false    | noop          |
-| renderTarget      | func                    | false    | null          |
-| target            | oneOf([function, node]) | false    | null          |
-| closeOnEscPressed | bool                    | false    | true          |
-
-## `cssModules.js`
-
-A helpful utility which permits backwards compatibility with hard coded classes and [CSS modules](https://github.com/css-modules/css-modules).
-
-### Usage
-
-```js
-import { cssModules } from '@skyscanner/backpack-web/bpk-react-utils';
-
-import STYLES from './MyComponent.scss';
-
-const getClassName = cssModules(STYLES);
-
-const MyComponent = (props) => (
-  <div className={getClassName('MyComponent')}>
-    <div className={getClassName('MyComponent__inner')}>{props.children}</div>
-  </div>
-);
-```
-
-With CSS modules:
-
-```html
-<div class="_35WloynrPDta8fhSfoHEgE">
-  <div class="_1ghNYY7jOYzUneVCT4piQ9">Some text.</div>
-</div>
-```
-
-Without CSS modules:
-
-```html
-<div class="MyComponent">
-  <div class="MyComponent__inner">Some text.</div>
-</div>
-```
-
-The returned function accepts multiple class names and ignores values other than strings. e.g:
-
-```js
-import { cssModules } from '@skyscanner/backpack-web/bpk-react-utils';
-
-import STYLES from './MyComponent.scss';
-
-const getClassNames = cssModules(STYLES);
-
-const MyComponent = (props) => (
-  <div
-    className={getClassName(
-      'MyComponent',
-      props.disabled && 'MyComponent--disabled',
-    )}
-  >
-    {props.children}
-  </div>
-);
-```
-
-Will result in `MyComponent MyComponent--disabled` if `props.disabled` is true or `MyComponent` otherwise.
-
-## `TransitionInitialMount.js`
-
-A wrapper around `react-transition-group` which makes it easy to transition a
-components initial mount. All you need to provide is two class names and a timeout.
-
-### Usage
-
-```js
-import { TransitionInitialMount } from '@skyscanner/backpack-web/bpk-react-utils';
-
-const MyComponent = (props) => (
-  <TransitionInitialMount
-    appearClassName="my-transition-class--appear"
-    appearActiveClassName="my-transition-class--appear-active"
-    transitionTimeout={300}
-  >
-    <div>Some text.</div>
-  </TransitionInitialMount>
-);
-```
-
-```scss
-@import '~bpk-mixins/index.scss';
-
-.my-transition-class {
-  transition: opacity $bpk-duration-sm ease-in-out;
-  opacity: 1;
-
-  &--appear {
-    opacity: 0;
-  }
-
-  &--appear-active {
-    opacity: 1;
-  }
-}
-```
-
-### Props
-
-| Property              | PropType | Required | Default Value |
-| --------------------- | -------- | -------- | ------------- |
-| children              | node     | true     | -             |
-| appearClassName       | string   | true     | -             |
-| appearActiveClassName | string   | true     | -             |
-| transitionTimeout     | number   | true     | -             |
-
-## `isRTL`
-
-Returns true if the browser is showing content right-to-left.
-
-### Usage
-
-```js
-import { isRTL } from '@skyscanner/backpack-web/bpk-react-utils';
-
-if (isRTL()) {
-  // do RTL stuff
-} else {
-  // do LTR stuff
-}
-```
-
-## `isDeviceIphone`
-
-Returns true if the device is an iPhone.
-
-### Usage
-
-```js
-import { isDeviceIphone } from '@skyscanner/backpack-web/bpk-react-utils';
-
-if (isDeviceIphone()) {
-  // do iPhone specific stuff
-} else {
-  // do other browser/device stuff
-}
-```
-
-## `isDeviceIpad`
-
-Returns true if the device is an iPad.
-
-### Usage
-
-```js
-import { isDeviceIpad } from '@skyscanner/backpack-web/bpk-react-utils';
-
-if (isDeviceIpad()) {
-  // do iPad specific stuff
-} else {
-  // do other browser/device stuff
-}
-```
-
-## `isDeviceIos`
-
-Returns true if the platform is iOS (iPhone/iPad).
-
-### Usage
-
-```js
-import { isDeviceIos } from '@skyscanner/backpack-web/bpk-react-utils';
-
-if (isDeviceIos()) {
-  // do iOS specific stuff
-} else {
-  // do other browser/device stuff
-}
-```

package/bpk-scrim-utils/README.md

@@ -1,47 +0,0 @@
-# bpk-scrim-utils
-
-> Higher order component that adds a scrim behind components and manages scroll states
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-```js
-import { withScrim } from '@skyscanner/backpack-web/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                                                                             |
-
-### Prop Details
-
-#### onClose
-
-This is required unless `closeOnScrimClick` is false.

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.scss';
-
-.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.scss

@@ -1,45 +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.scss';
-
-.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-day;
-  overflow: hidden;
-
-  &--full-screen {
-    @include bpk-breakpoint-mobile {
-      opacity: 1;
-    }
-  }
-
-  &--appear {
-    opacity: 0;
-  }
-
-  &--appear-active {
-    opacity: 0.7;
-  }
-}

package/bpk-theming/README.md

@@ -1,41 +0,0 @@
-# bpk-theming
-
-> Backpack theming utilities.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```js
-import BpkThemeProvider from '@skyscanner/backpack-web/bpk-theming';
-
-import BpkLink, { themeAttributes as linkThemeAttributes } from '@skyscanner/backpack-web/bpk-component-link';
-
-const theme = {
-  linkColor: '#c00',
-  linkHoverColor: '#d00',
-  linkActiveColor: '#a00',
-  linkVisitedColor: '#800',
-};
-
-export default class App extends Component {
-  render() {
-    return (
-      <BpkThemeProvider theme={theme} themeAttributes={[...linkThemeAttributes]}>
-        <BpkLink onClick={() => {}}>Book flight</BpkLink>
-      </BpkThemeProvider>
-    );
-  }
-}
-```
-
-## Props
-
-| Property            | PropType                           | Required         | Default Value |
-| -----------         | ---------------------------------- | ---------------- | ------------- |
-| children            | node                               | true             | -             |
-| themeAttributes     | arrayOf(string)                    | true             | -             |
-| component           | elementType                        | false            | div           |
-| theme               | object                             | false            | null          |