@skyscanner/backpack-web 22.3.0 → 23.0.0

package/bpk-component-page-indicator/src/BpkPageIndicator.module.scss

@@ -1,91 +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;
-$dot-size: bpk-spacing-md();
-$dot-margin: bpk-spacing-sm();
-$displayed-total: 5;
-/* stylelint-disable-next-line scss/operator-no-newline-after */
-$container-width: $dot-size * $displayed-total + $dot-margin * $displayed-total *
-  2;
-
-.bpk-page-indicator {
-  display: flex;
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-
-  &__showNav {
-    justify-content: space-between;
-  }
-
-  &__container {
-    max-width: $container-width;
-    min-height: $dot-size;
-    overflow: hidden;
-  }
-
-  &__indicators-container {
-    --direction: -1;
-
-    /* stylelint-disable scss/operator-no-newline-after */
-    transform: translateX(
-      calc(
-        var(--direction) * var(--scroll-index, 0) * #{$dot-size + $dot-margin *
-          2}
-      )
-    );
-    /* stylelint-enable scss/operator-no-newline-after */
-    transition: transform $bpk-duration-sm ease-in-out;
-    white-space: nowrap;
-
-    @include bpk-rtl {
-      --direction: 1;
-    }
-  }
-
-  &__indicator {
-    display: inline-block;
-    width: $dot-size;
-    height: $dot-size;
-    padding: 0;
-    border: none;
-    border-radius: 50%;
-    margin-inline: $dot-margin;
-
-    &--default {
-      background-color: $bpk-line-day;
-    }
-
-    &--overImage {
-      background-color: $bpk-line-on-dark-day;
-    }
-
-    &--active {
-      &-default {
-        background-color: $bpk-text-secondary-day;
-      }
-
-      &-overImage {
-        background-color: $bpk-text-on-dark-day;
-      }
-    }
-  }
-}

package/bpk-component-pagination/README.md

@@ -1,56 +0,0 @@
-# bpk-component-pagination
-
-> Backpack pagination component.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```js
-import BpkPagination from '@skyscanner/backpack-web/bpk-component-pagination';
-
-const Pagination = () => (
-  <BpkPagination
-    pageCount={20}
-    selectedPageIndex={0}
-    onPageChange={pageIndex => alert(`page ${pageIndex + 1}`)}
-    previousLabel="previous"
-    nextLabel="next"
-    visibleRange={3}
-    pageLabel={(page, isSelected) => `page ${page}`}
-  />
-);
-
-```
-
-## Props
-
-| Property          | PropType             | Required | Default Value |
-| ----------------- | -------------------- | -------- | ------------- |
-| pageCount         | number               | true     | -             |
-| selectedPageIndex | number               | true     | -             |
-| previousLabel     | string               | true     | -             |
-| nextLabel         | string               | true     | -             |
-| paginationLabel   | string               | true     | -             |
-| pageLabel         | func                 | true     | -             |
-| onPageChange      | func                 | false    | null          |
-| visibleRange      | number               | false    | 3             |
-| className         | string               | false    | null          |
-
-## Theme Props
-
-* `buttonSecondaryTextColor`
-* `buttonSecondaryHoverTextColor`
-* `buttonSecondaryActiveTextColor`
-* `buttonSecondaryBorderColor`
-* `buttonSecondaryHoverBorderColor`
-* `buttonSecondaryActiveBorderColor`
-* `buttonSecondaryBackgroundColor`
-* `buttonSecondaryHoverBackgroundColor`
-* `buttonSecondaryActiveBackgroundColor`
-* `paginationNudgerActiveColor`
-* `paginationNudgerColor`
-* `paginationNudgerHoverColor`
-* `paginationSelectedBackgroundColor`

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

@@ -1,22 +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.
- */
-
-.bpk-pagination {
-  display: flex;
-  justify-content: center;
-}

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

@@ -1,46 +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;
-
-.bpk-pagination-page-list {
-  display: flex;
-  margin: 0;
-  padding: 0 bpk-spacing-md();
-  align-items: baseline;
-  list-style: none;
-
-  &__item {
-    margin-right: bpk-spacing-md();
-
-    @include bpk-rtl {
-      margin-right: 0;
-      margin-left: bpk-spacing-md();
-
-      &:last-child {
-        margin-left: 0;
-      }
-    }
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-}

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

@@ -1,34 +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;
-
-.bpk-pagination-nudger {
-  display: flex;
-  width: bpk-spacing-xl() + bpk-spacing-sm();
-  height: bpk-spacing-xl() + bpk-spacing-sm();
-  padding: $bpk-one-pixel-rem * 10;
-
-  &__text {
-    &--hidden {
-      @include bpk-visually-hidden;
-    }
-  }
-}

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

@@ -1,59 +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;
-
-.bpk-pagination-page {
-  min-width: $bpk-button-height;
-  height: $bpk-button-height;
-  padding: 0 $bpk-one-pixel-rem * 16;
-  border-radius: $bpk-border-radius-xs * 2;
-  color: $bpk-text-primary-day;
-
-  @include bpk-border-sm(
-    var(--bpk-pagination-selected-background-color, $bpk-line-day)
-  );
-  @include bpk-label-1;
-
-  @include bpk-hover {
-    background-color: transparent;
-
-    @include bpk-border-sm($bpk-core-primary-day);
-  }
-
-  &:active {
-    background-color: transparent;
-
-    @include bpk-border-sm($bpk-core-primary-day);
-  }
-}
-
-.bpk-pagination-page--selected {
-  color: $bpk-text-primary-inverse-day;
-  box-shadow: none;
-
-  @include bpk-hover {
-    color: $bpk-text-primary-day;
-  }
-
-  &:active {
-    color: $bpk-text-primary-day;
-  }
-}

package/bpk-component-panel/README.md

@@ -1,30 +0,0 @@
-# bpk-component-panel
-
-> Backpack panel component.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```js
-import BpkPanel from '@skyscanner/backpack-web/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/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.scss';
-
-.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,98 +0,0 @@
-# bpk-component-phone-input
-
-> Backpack phone input component.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```js
-import { Component } from 'react';
-import BpkPhoneInput from '@skyscanner/backpack-web/bpk-component-phone-input';
-import BpkImage from '@skyscanner/backpack-web/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/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.scss';
-
-$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,138 +0,0 @@
-# bpk-component-popover
-
-> Backpack popover component.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```js
-import { createRef } from 'react';
-import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
-import BpkPopover from '@skyscanner/backpack-web/bpk-component-popover';
-import BpkText from '@skyscanner/backpack-web/bpk-component-text';
-
-class App extends Component {
-  constructor() {
-    super();
-
-    this.ref = 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`