@skyscanner/backpack-web 8.0.0 → 9.1.0-alpha.1

package/bpk-component-pagination/src/BpkPaginationNudger.module.scss

@@ -1,74 +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-spacing-v2: true;
-
-.bpk-pagination-nudger {
-  text-align: center;
-  vertical-align: middle;
-
-  &__button {
-    height: $bpk-button-height;
-    padding: 0 bpk-spacing-md();
-    border: none;
-    background: none;
-    cursor: pointer;
-    appearance: none;
-
-    @include bpk-themeable-property(
-      color,
-      --bpk-pagination-nudger-color,
-      $bpk-color-sky-blue
-    );
-
-    @include bpk-hover {
-      @include bpk-themeable-property(
-        color,
-        --bpk-pagination-nudger-hover-color,
-        $bpk-color-sky-blue-shade-02
-      );
-    }
-
-    &:active {
-      @include bpk-themeable-property(
-        color,
-        --bpk-pagination-nudger-active-color,
-        $bpk-color-sky-blue
-      );
-    }
-
-    &:disabled {
-      color: $bpk-color-sky-gray-tint-06;
-      cursor: not-allowed;
-    }
-
-    .bpk-pagination-nudger__icon {
-      fill: currentColor;
-
-      @include bpk-icon--rtl-support;
-    }
-  }
-
-  &__text {
-    &--hidden {
-      @include bpk-visually-hidden;
-    }
-  }
-}

package/bpk-component-pagination/src/BpkPaginationPage.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-pagination-page{min-width:2.25rem;height:2.25rem;padding:0;border-radius:50%}.bpk-pagination-page--selected{background-image:none;color:#fff;box-shadow:none;cursor:auto;background-color:#042759;background-color:var(--bpk-pagination-selected-background-color, #042759);box-shadow:0 0 0 2px #042759 inset;box-shadow:0 0 0 2px var(--bpk-pagination-selected-background-color, #042759) inset}.bpk-no-touch-support .bpk-pagination-page--selected:hover:not(:active):not(:disabled){background-image:none;color:#fff;box-shadow:none;background-color:#042759;background-color:var(--bpk-pagination-selected-background-color, #042759);box-shadow:0 0 0 2px #042759 inset;box-shadow:0 0 0 2px var(--bpk-pagination-selected-background-color, #042759) inset}:global(.bpk-no-touch-support) .bpk-pagination-page--selected:hover:not(:active):not(:disabled){background-image:none;color:#fff;box-shadow:none;background-color:#042759;background-color:var(--bpk-pagination-selected-background-color, #042759);box-shadow:0 0 0 2px #042759 inset;box-shadow:0 0 0 2px var(--bpk-pagination-selected-background-color, #042759) inset}.bpk-pagination-page--selected:active{background-image:none;color:#fff;box-shadow:none;background-color:#042759;background-color:var(--bpk-pagination-selected-background-color, #042759);box-shadow:0 0 0 2px #042759 inset;box-shadow:0 0 0 2px var(--bpk-pagination-selected-background-color, #042759) inset}.bpk-pagination-page--selected:disabled{box-shadow:none}

package/bpk-component-pagination/src/BpkPaginationPage.module.scss

@@ -1,92 +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-spacing-v2: true;
-
-.bpk-pagination-page {
-  min-width: $bpk-button-height;
-  height: $bpk-button-height;
-  padding: 0;
-  border-radius: 50%;
-
-  @include bpk-label-1;
-}
-
-.bpk-pagination-page--selected {
-  background-image: $bpk-button-secondary-background-image;
-  color: $bpk-button-selected-color;
-  box-shadow: $bpk-button-selected-box-shadow;
-  cursor: auto;
-
-  @include bpk-themeable-property(
-    background-color,
-    --bpk-pagination-selected-background-color,
-    $bpk-color-sky-blue-shade-02
-  );
-  @include bpk-border-lg($bpk-color-sky-blue-shade-02);
-  @include bpk-border-lg(
-    var(
-      --bpk-pagination-selected-background-color,
-      $bpk-color-sky-blue-shade-02
-    )
-  );
-
-  @include bpk-hover {
-    background-image: $bpk-button-selected-hover-background-image;
-    color: $bpk-button-selected-hover-color;
-    box-shadow: $bpk-button-selected-hover-box-shadow;
-
-    @include bpk-themeable-property(
-      background-color,
-      --bpk-pagination-selected-background-color,
-      $bpk-color-sky-blue-shade-02
-    );
-    @include bpk-border-lg($bpk-color-sky-blue-shade-02);
-    @include bpk-border-lg(
-      var(
-        --bpk-pagination-selected-background-color,
-        $bpk-color-sky-blue-shade-02
-      )
-    );
-  }
-
-  &:active {
-    background-image: $bpk-button-selected-active-background-image;
-    color: $bpk-button-selected-active-color;
-    box-shadow: $bpk-button-selected-active-box-shadow;
-
-    @include bpk-themeable-property(
-      background-color,
-      --bpk-pagination-selected-background-color,
-      $bpk-color-sky-blue-shade-02
-    );
-    @include bpk-border-lg($bpk-color-sky-blue-shade-02);
-    @include bpk-border-lg(
-      var(
-        --bpk-pagination-selected-background-color,
-        $bpk-color-sky-blue-shade-02
-      )
-    );
-  }
-
-  &:disabled {
-    box-shadow: $bpk-button-selected-disabled-box-shadow;
-  }
-}

package/bpk-component-panel/README.md

@@ -1,33 +0,0 @@
-# bpk-component-panel
-
-> Backpack panel component.
-
-## Installation
-
-```sh
-npm install bpk-component-panel --save-dev
-```
-
-## Usage
-
-```js
-import React from 'react';
-import BpkPanel from 'bpk-component-panel';
-
-export default () => (
-  <BpkPanel>
-    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
-    commodo ligula eget dolor. Aenean massa. Cum sociis natoque
-    penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-  </BpkPanel>
-);
-```
-
-## Props
-
-| Property  | PropType | Required | Default Value |
-| --------- | -------- | -------- | ------------- |
-| children  | -        | true     | -             |
-| padded    | bool     | false    | true          |
-| fullWidth | bool     | false    | false         |
-| className | string   | false    | null          |

package/bpk-component-panel/package.json

@@ -1,24 +0,0 @@
-{
-  "name": "bpk-component-panel",
-  "version": "3.1.13",
-  "description": "Backpack panel 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/"
-  },
-  "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
-  "dependencies": {
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.1",
-    "prop-types": "^15.7.2"
-  },
-  "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
-  }
-}

package/bpk-component-panel/src/BpkPanel.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-panel{display:block;background-color:#fff;box-shadow:0 0 0 1px #dddde5 inset;border-radius:.75rem}.bpk-panel--padded{padding:.75rem}.bpk-panel--full-width{border-radius:0;box-shadow:#dddde5 0 -.0625rem 0 0 inset,#dddde5 0 .0625rem 0 0 inset}

package/bpk-component-panel/src/BpkPanel.module.scss

@@ -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.
- */
-
-@import '~bpk-mixins/index';
-
-.bpk-panel {
-  @include bpk-panel;
-
-  &--padded {
-    @include bpk-panel--padded;
-  }
-
-  &--full-width {
-    @include bpk-panel--full-width;
-  }
-}

package/bpk-component-phone-input/README.md

@@ -1,100 +0,0 @@
-# bpk-component-phone-input
-
-> Backpack phone input component.
-
-## Installation
-
-```sh
-npm install bpk-component-phone-input --save-dev
-```
-
-## Usage
-
-```js
-import React, { Component } from 'react';
-import BpkPhoneInput from 'bpk-component-phone-input';
-import BpkImage from 'bpk-component-image';
-
-const DIALING_CODE_TO_ID_MAP = {
-  '44': 'uk',
-  '55': 'br',
-};
-
-const getFlag = dialingCode => {
-  const countryCode = DIALING_CODE_TO_ID_MAP[dialingCode];
-  const url = `/resources/${countryCode}.png`;
-
-  return <BpkImage altText="Flag" height={38} width={50} src={url} />;
-};
-
-export default class extends Component {
-  constructor(props) {
-    super(props);
-    this.state = { dialingCode: '44', phoneNumber: '' };
-  }
-
-  onChange = evt => {
-    this.setState({ phoneNumber: evt.target.value });
-  };
-
-  onDialingCodeChange = evt => {
-    this.setState({ dialingCode: evt.target.value });
-  };
-
-  render() {
-    return (
-      <BpkPhoneInput
-        id="phone-input-id"
-        name="Telephone input"
-        label="Telephone number"
-        onChange={this.onChange}
-        onDialingCodeChange={this.onDialingCodeChange}
-        value={this.state.phoneNumber}
-        dialingCode={this.state.dialingCode}
-        dialingCodes={[
-          { code: '44', description: '+44' },
-          { code: '55', description: '+55' },
-        ]}
-        dialingCodeProps={{
-          id: 'dialing-code',
-          name: 'Dialing code',
-          label: 'Dialing code',
-          'aria-label': 'Dialing code',
-          image: getFlag(this.state.dialingCode),
-        }}
-      />
-    );
-  }
-}
-```
-
-## Props
-
-| Property            | PropType                                              | Required | Default Value |
-| ------------------- | ----------------------------------------------------- | -------- | ------------- |
-| dialingCode         | string                                                | true     | -             |
-| dialingCodeProps    | shape({ id: string, name: string, label: string })    | true     | -             |
-| dialingCodes        | arrayOf(shape({ code: string, description: string })) | true     | -             |
-| id                  | string                                                | true     | -             |
-| name                | string                                                | true     | -             |
-| label               | string                                                | true     | -             |
-| onChange            | func                                                  | true     | -             |
-| onDialingCodeChange | func                                                  | true     | -             |
-| value               | string                                                | true     | -             |
-| className           | string                                                | false    | null          |
-| dialingCodeMask     | boolean                                               | false    | null          |
-| disabled            | boolean                                               | false    | false         |
-| large               | boolean                                               | false    | false         |
-| valid               | boolean                                               | false    | null          |
-| wrapperProps        | object                                                | false    | {}            |
-
-### dialingCodeProps
-
-Note that `id`, `name` and `label` are required but more properties can be provided, e.g. `dialingCodeProps={{ id: 'id', name: 'name', label: 'label', className: 'some-class' }}`. All
-properties will be forwarded to the underlying `BpkSelect` component.
-
-### dialingCodes
-
-The same is true for `dialingCodes`. Each object **must** have a `code` and `description`, but can have more properties and those
-will be forwarded the the `option` element they represent.
-Note that, when using the `dialingCodeMask` option, all `dialingCodes` values must have a `numberPrefix` attribute.

package/bpk-component-phone-input/package.json

@@ -1,33 +0,0 @@
-{
-  "name": "bpk-component-phone-input",
-  "version": "7.1.22",
-  "description": "Backpack phone input 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/"
-  },
-  "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
-  "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-input": "^6.1.19",
-    "bpk-component-label": "^5.1.13",
-    "bpk-component-select": "^5.1.13",
-    "bpk-component-text": "^7.0.7",
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.1",
-    "prop-types": "^15.7.2"
-  },
-  "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
-  },
-  "devDependencies": {
-    "bpk-component-fieldset": "^4.1.22",
-    "bpk-component-image": "^5.1.15"
-  }
-}

package/bpk-component-phone-input/src/BpkPhoneInput.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-phone-input{display:flex;column-gap:0.5rem}@media (max-width: 32.25rem){.bpk-phone-input{flex-wrap:wrap}.bpk-phone-input__phone-number{width:100%;margin-top:1rem}}.bpk-phone-input__phone-number{flex:auto}.bpk-phone-input__label{margin-bottom:0.5rem}

package/bpk-component-phone-input/src/BpkPhoneInput.module.scss

@@ -1,42 +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-spacing-v2: true;
-
-.bpk-phone-input {
-  display: flex;
-  column-gap: bpk-spacing-md();
-
-  @include bpk-breakpoint-mobile {
-    flex-wrap: wrap;
-
-    &__phone-number {
-      width: 100%;
-      margin-top: bpk-spacing-base();
-    }
-  }
-
-  &__phone-number {
-    flex: auto;
-  }
-
-  &__label {
-    margin-bottom: bpk-spacing-md();
-  }
-}

package/bpk-component-popover/README.md

@@ -1,140 +0,0 @@
-# bpk-component-popover
-
-> Backpack popover component.
-
-## Installation
-
-```sh
-npm install bpk-component-popover --save-dev
-```
-
-## Usage
-
-```js
-import React, { Component } from 'react';
-import BpkButton from 'bpk-component-button';
-import BpkPopover from 'bpk-component-popover';
-import BpkText from 'bpk-component-text';
-
-class App extends Component {
-  constructor() {
-    super();
-
-    this.ref = React.createRef();
-    this.state = {
-      isOpen: false,
-    };
-
-  }
-
-  openPopover = () => {
-    this.setState({
-      isOpen: true,
-    });
-  }
-
-  closePopover = () => {
-    this.setState({
-      isOpen: false,
-    });
-  }
-
-  const target = (
-    <div ref={this.ref} className={'my-popover-target'}>
-      <BpkButton
-        onClick={this.openPopover}>
-          Open
-      </BpkButton>
-    </div>
-  )
-
-  render() {
-    return (
-      <div id="popover-container">
-        <BpkPopover
-          id="my-popover"
-          target={target}
-          onClose={this.closePopover}
-          isOpen={this.state.isOpen}
-          label="My popover"
-          closeButtonText="Close"
-          renderTarget={() =>
-            document.getElementById('popover-container')
-          }
-          closeButtonProps={{
-            tabIndex: 0,
-          }}
-        >
-          <BpkText>My popover content</BpkText>
-        </BpkPopover>
-      </div>
-    );
-  }
-}
-```
-
-> **Theming:** In order to theme the modal, a `renderTarget` needs to be supplied as a function which returns a DOM node
-  in the scope of a `BpkThemeProvider`.
-
-## Props
-
-| Property              | PropType                                  | Required | Default Value |
-| --------------------- | ----------------------------------------- | -------- | ------------- |
-| children              | node                                      | true     | -             |
-| closeButtonText       | string                                    | true     | -             |
-| id                    | string                                    | true     | -             |
-| isOpen                | bool                                      | true     | -             |
-| label                 | string                                    | true     | -             |
-| onClose               | func                                      | true     | -             |
-| target                | element or func                           | true     | -             |
-| closeButtonIcon       | bool                                      | false    | true          |
-| closeButtonProps      | object                                    | false    | null          |
-| labelAsTitle          | bool                                      | false    | false         |
-| padded                | bool                                      | false    | true          |
-| placement             | oneOf(['top', 'right', 'bottom', 'left']) | false    | 'bottom'      |
-| popperModifiers       | arrayOf(object)                           | false    | null          |
-| portalClassName       | string                                    | false    | null          |
-| portalStyle           | object                                    | false    | null          |
-| renderTarget          | func                                      | false    | null          |
-
-In order to attach the popover to a regular DOM element, provide a function which returns it to `target`:
-
-```js
-<BpkPopover
-  id="my-popover"
-  target={() => document.getElementById('mydiv')}
-  onClose={this.closePopover}
-  isOpen={this.state.isOpen}
-  label="My popover"
-  closeButtonText="Close"
->
-  <BpkText>My popover content</BpkText>
-</BpkPopover>
-```
-
-### Prop Details
-
-#### onClose
-
-```js
-const onClose = (event, {
-  source: <string>, // One of `DOCUMENT_CLICK`, `CLOSE_BUTTON`, `CLOSE_LINK`, `ESCAPE`
-}) => {
-  ...
-}
-```
-
-#### 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 popover to overflow the viewport etc.
-
-#### target
-
-`target` can be a DOM element with a `ref` attached to it or a function that returns a DOM element.
-
-## Theme Props
-
-* `linkColor`
-* `linkHoverColor`
-* `linkActiveColor`
-* `linkVisitedColor`

package/bpk-component-popover/package.json

@@ -1,35 +0,0 @@
-{
-  "name": "bpk-component-popover",
-  "version": "7.0.0",
-  "description": "Backpack popover 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/"
-  },
-  "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
-  "dependencies": {
-    "@popperjs/core": "^2.11.5",
-    "a11y-focus-scope": "^1.1.3",
-    "a11y-focus-store": "^1.0.0",
-    "bpk-component-close-button": "^3.1.14",
-    "bpk-component-link": "^3.1.13",
-    "bpk-component-text": "^7.0.7",
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.0.1",
-    "prop-types": "^15.7.2"
-  },
-  "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
-  },
-  "devDependencies": {
-    "bpk-component-button": "^6.2.8",
-    "bpk-component-content-container": "^5.0.7",
-    "bpk-component-input": "^6.1.19"
-  }
-}