@skyscanner/backpack-web 22.3.1 → 23.1.0-beta.1

package/bpk-component-link/src/BpkLink.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-link {
-  @include bpk-link;
-
-  &--active {
-    @include bpk-link--active;
-  }
-
-  &--alternate {
-    @include bpk-link--alternate;
-  }
-}

package/bpk-component-list/README.md

@@ -1,48 +0,0 @@
-# bpk-component-list
-
-> Backpack list component.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```js
-import { BpkList, BpkListItem } from '@skyscanner/backpack-web/bpk-component-list';
-
-export default () => (
-  <BpkList>
-    <BpkListItem>Apples</BpkListItem>
-    <BpkListItem>
-      Oranges
-      <BpkList ordered>
-        <BpkListItem>Tangerines</BpkListItem>
-        <BpkListItem>Nectarines</BpkListItem>
-        <BpkListItem>Satsuma</BpkListItem>
-      </BpkList>
-    </BpkListItem>
-    <BpkListItem>Pears</BpkListItem>
-  </BpkList>
-);
-```
-
-## Props
-
-### BpkList
-
-| Property       | PropType | Required | Default Value |
-| -------------- | -------- | -------- | ------------- |
-| children       | -        | true     | -             |
-| ordered        | bool     | false    | false         |
-| className      | string   | false    | null          |
-| ariaLabel      | string   | false    | null          |
-| ariaLabelledby | string   | false    | null          |
-| title          | string   | false    | null          |
-
-### BpkListItem
-
-| Property  | PropType | Required | Default Value |
-| --------- | -------- | -------- | ------------- |
-| children  | -        | true     | -             |
-| className | string   | false    | null          |

package/bpk-component-list/src/BpkList.module.scss

@@ -1,37 +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-list {
-  @include bpk-list;
-
-  &__item {
-    @include bpk-list-item;
-  }
-
-  & & {
-    @include bpk-list--nested;
-
-    /* stylelint-disable selector-max-compound-selectors */
-
-    > li {
-      margin-bottom: 0;
-    }
-  }
-}

package/bpk-component-loading-button/README.md

@@ -1,45 +0,0 @@
-# bpk-component-loading-button
-
-> Backpack loading button component.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```js
-import BpkLoadingButton from '@skyscanner/backpack-web/bpk-component-loading-button';
-import BaggageIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/baggage';
-import { withButtonAlignment, withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';
-
-const AlignedBaggageIcon = withButtonAlignment(withRtlSupport(BaggageIcon));
-const icon = <AlignedBaggageIcon />;
-
-export default () => (
-  <div>
-    <BpkLoadingButton>Primary</BpkLoadingButton>
-    <BpkLoadingButton large>Large primary</BpkLoadingButton>
-    <BpkLoadingButton secondary>Secondary</BpkLoadingButton>
-    <BpkLoadingButton iconOnly>
-      <span className="visually-hidden">Search</span>
-    </BpkLoadingButton>
-    <BpkLoadingButton icon={icon} iconDisabled={icon}>Custom Icon</BpkLoadingButton>
-  </div>
-);
-```
-
-## Props
-
-| Property     | PropType             | Required | Default Value          |
-| ------------ | -------------------- | -------- | ---------------------- |
-| children     | node                 | true     | -                      |
-| className    | string               | false    | null                   |
-| disabled     | bool                 | false    | false                  |
-| secondary    | bool                 | false    | false                  |
-| destructive  | bool                 | false    | false                  |
-| loading      | bool                 | false    | false                  |
-| iconOnly     | bool                 | false    | false                  |
-| icon         | element              | false    | null                   |
-| iconDisabled | element              | false    | null                   |
-| iconPosition | oneOf(ICON_POSITION) | false    | ICON_POSITION.TRAILING |

package/bpk-component-loading-button/src/BpkLoadingButton.module.scss

@@ -1,67 +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-loading-button {
-  $button-padding-x: bpk-spacing-base() * 2;
-  $button-padding-y: bpk-spacing-lg() / 2;
-  $button-large-padding-y: bpk-spacing-lg();
-  $button-icon-only-padding-x: $bpk-button-height - $bpk-icon-size-sm; // this is in order to ensure icons are centred in icon-only buttons
-  /* stylelint-disable-next-line scss/operator-no-newline-after */
-  $button-large-icon-only-padding-x: $bpk-button-large-height -
-    $bpk-icon-size-lg; // this is in order to ensure icons are centred in icon-only buttons
-
-  position: relative;
-  overflow: hidden;
-
-  &--link {
-    visibility: hidden;
-  }
-
-  &__icon {
-    position: absolute;
-    display: inline-flex;
-    visibility: visible;
-    z-index: 1;
-    width: calc(100% - #{$button-padding-x});
-    height: calc(100% - #{$button-padding-y});
-    justify-content: center;
-    align-items: center;
-    background-color: inherit;
-
-    &--large {
-      height: calc(100% - #{$button-large-padding-y});
-    }
-
-    &--icon-only {
-      width: calc(100% - #{$button-icon-only-padding-x});
-    }
-
-    &--large-icon-only {
-      width: calc(100% - #{$button-large-icon-only-padding-x});
-    }
-
-    &--link {
-      width: 100%;
-      background: unset;
-    }
-  }
-}

package/bpk-component-map/README.md

@@ -1,208 +0,0 @@
-# bpk-component-map
-
-> Backpack map component.
-
-Requires **React 16.8+**
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```js
-import BpkText from '@skyscanner/backpack-web/bpk-component-text';
-import { withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';
-import LandmarkIconSm from '@skyscanner/backpack-web/bpk-component-icon/sm/landmark';
-import BpkMap, {
-  BpkIconMarker,
-  BpkOverlayView,
-} from '@skyscanner/backpack-web/bpk-component-map';
-
-const AlignedLandmarkIconSm = withRtlSupport(LandmarkIconSm);
-
-export default () => (
-  <BpkMap
-    zoom={15}
-    showControls={false}
-    panEnabled={false}
-    center={{
-      latitude: 27.9881,
-      longitude: 86.925,
-    }}
-  >
-    <BpkIconMarker
-      icon={<AlignedLandmarkIconSm />}
-      position={{ latitude: 27.9881, longitude: 86.925 }}
-      onClick={() => {}}
-    />
-    <BpkIconMarker
-      icon={<AlignedLandmarkIconSm />}
-      position={{ latitude: 27.9881, longitude: 86.925 }}
-      onClick={() => {}}
-      selected
-    />
-    <BpkIconMarker
-      icon={<AlignedLandmarkIconSm />}
-      position={{ latitude: 27.9881, longitude: 86.927 }}
-      onClick={() => {}}
-      disabled
-    />
-    <BpkOverlayView position={{ latitude: 27.9881, longitude: 86.925 }}>
-      <BpkText>Shibuya Crossing</BpkText>
-    </BpkOverlayView>
-  </BpkMap>
-);
-```
-
-### BpkPriceMarker
-
-Price markers are used to display clickable prices on a map.
-
-```js
-import BpkMap, { BpkPriceMarker, PRICE_MARKER_STATUSES } from '@skyscanner/backpack-web/bpk-component-map';
-
-export default () => (
-  <BpkMap
-    zoom={15}
-    showControls={false}
-    panEnabled={false}
-    center={{
-      latitude: 27.9881,
-      longitude: 86.925,
-    }}
-  >
-    <BpkPriceMarker
-      label="£120"
-      position={{ latitude: 27.9881, longitude: 86.925 }}
-      onClick={() => {
-        console.log("Price marker pressed.")
-      }}
-      status={PRICE_MARKER_STATUSES.focused}
-    />
-    <BpkPriceMarker
-      label="£120"
-      position={{ latitude: 27.9881, longitude: 86.925 }}
-      onClick={() => {
-        console.log("Price marker pressed.")
-      }}
-      status={PRICE_MARKER_STATUSES.viewed}
-    />
-  </BpkMap>
-);
-```
-
-## Accompanying HOCs
-
-### withGoogleMapsScript
-
-`withGoogleMapsScript` is a HOC that loads the Google Maps JavaScript, then loads the map. This is useful for when you don't already have the Google Maps JavaScript loaded.
-
-If you intend to include multiple maps on one page, it's better to load the Google Maps JavaScript in this HOC, as it ensures that script will not be re-downloaded every time it's used.
-
-```js
-import BpkMap, { withGoogleMapsScript } from '@skyscanner/backpack-web/bpk-component-map';
-
-const BpkMapWithScript = withGoogleMapsScript(BpkMap);
-
-export default () => (
-  <BpkMapWithScript
-    googleMapsApiKey='YOUR_API_KEY'
-    zoom={15}
-    center={{
-      latitude: 27.9881,
-      longitude: 86.925,
-    }}
-    showControls={false}
-    panEnabled={false}
-  />
-);
-```
-
-## Props
-
-### BpkMap
-
-| Property              | PropType                                                                                        | Required | Default Value                    |
-| --------------------- | ----------------------------------------------------------------- | -------- | -------------------------------- |
-| bounds                | shape({north: number, east: number, south: number, west: number}) | false    | null                             |
-| center                | shape({latitude: number, longitude: number})                      | false    | null                             |
-| className             | string                                                            | false    | null                             |
-| greedyGestureHandling | bool                                                              | false    | false                            |
-| mapOptionStyles       | array                                                             | false    | null                             |
-| mapRef                | func                                                              | false    | null                             |
-| onRegionChange        | func                                                              | false    | null                             |
-| onZoom                | func                                                              | false    | null                             |
-| onTilesLoaded         | func                                                              | false    | null                             |
-| panEnabled            | bool                                                              | false    | true                             |
-| showControls          | bool                                                              | false    | true                             |
-| zoom                  | number                                                            | false    | 15                               |
-
-Note: One of `bounds` and `center` must be provided.
-
-#### withGoogleMapsScript
-
-When using `withGoogleMapsScript`, some additional props are available:
-
-| Property                  | PropType | Required | Default Value                     |
-| ------------------------- | -------- | -------- | --------------------------------- |
-| googleMapsApiKey          | string   | true     | -                                 |
-| libraries                 | array    | false    | ['geometry', 'drawing', 'places'] |
-| loadingElement            | node     | false    | BpkSpinner                        |
-| preventGoogleFontsLoading | bool     | false    | false                             |
-
-### BpkIconMarker
-
-| Property       | PropType                                     | Required | Default Value        |
-| -------------- | -------------------------------------------- | -------- | -------------------- |
-| icon           | node                                         | true     | -                    |
-| position       | shape({latitude: number, longitude: number}) | true     | -                    |
-| className      | string                                       | false    | null                 |
-| disabled       | bool                                         | false    | false                |
-| onClick        | func                                         | false    | null                 |
-| selected       | bool                                         | false    | false                |
-| buttonProps    | object                                       | false    | null                 |
-
-#### `icon`
-
-`BpkIconMarker` only supports small icons from the Backpack icon set. Large icons should not be used with `BpkIconMarker`.
-
-### BpkPriceMarker
-
-| Property       | PropType                                     | Required | Default Value |
-| -------------- | -------------------------------------------- | -------- | ------------- |
-| label          | string                                       | true     | -             |
-| position       | shape({latitude: number, longitude: number}) | true     | -             |
-| arrowClassName | string                                       | false    | null          |
-| className      | string                                       | false    | null          |
-| disabled       | bool                                         | false    | false         |
-| onClick        | func                                         | false    | null          |
-| status         | oneOf(`PRICE_MARKER_STATUSES.default`, `PRICE_MARKER_STATUSES.focused`, `PRICE_MARKER_STATUSES.viewed`)                                        | false    | `PRICE_MARKER_STATUSES.default`             |
-| buttonProps    | object                                       | false    | null          |
-
-### BpkOverlayView
-
-| Property | PropType                                     | Required | Default Value |
-| -------- | -------------------------------------------- | -------- | ------------- |
-| children | node                                         | true     | -             |
-| position | shape({latitude: number, longitude: number}) | true     | -             |
-
-## Theme Props
-
-Icon markers:
-
-- `iconMarkerDefaultBackgroundColor`
-- `iconMarkerDefaultSelectedColor`
-- `iconMarkerDefaultDisabledBackgroundColor`
-- `iconMarkerDefaultDisabledColor`
-
-Price markers:
-
-- `priceMarkerBackgroundColor`
-
-- `priceMarkerSelectedBorderColor`
-- `priceMarkerSelectedColor`
-
-- `priceMarkerViewedBackgroundColor`
-- `priceMarkerViewedBorderColor`
-- `priceMarkerViewedColor`

package/bpk-component-map/src/BpkIconMarker.module.scss

@@ -1,79 +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-icon-marker {
-  &__wrapper {
-    position: relative;
-    z-index: 1;
-    padding: bpk-spacing-base() (bpk-spacing-base() - ($bpk-one-pixel-rem * 3));
-    border: none; // Prevent default <button> styling.
-    background: none; // Prevent default <button> styling.
-
-    &--selected {
-      z-index: 2;
-      padding: (bpk-spacing-sm() * 4) bpk-spacing-base();
-    }
-  }
-
-  &__icon {
-    $marker-width: $bpk-one-pixel-rem * 26;
-
-    position: absolute;
-
-    // This ensures that the icon is positioned exactly in the
-    // centre of the marker.
-    top: 0.3rem;
-    left: ($marker-width - $bpk-icon-size-sm) / 2;
-    color: $bpk-surface-default-day;
-
-    > svg {
-      fill: currentcolor;
-    }
-
-    &--interactive {
-      cursor: pointer;
-    }
-
-    &--disabled {
-      @include bpk-themeable-property(
-        color,
-        --bpk-icon-marker-default-disabled-color,
-        $bpk-status-success-spot-day
-      );
-    }
-
-    &--selected {
-      $selected-marker-width: $bpk-one-pixel-rem * 32;
-
-      // This ensures that the icon is positioned exactly in the
-      // centre of the marker.
-      top: bpk-spacing-md();
-      left: ($selected-marker-width - $bpk-icon-size-sm) / 2;
-
-      @include bpk-themeable-property(
-        color,
-        --bpk-icon-marker-default-selected-color,
-        $bpk-status-success-spot-day
-      );
-    }
-  }
-}

package/bpk-component-map/src/BpkIconMarkerBackground.module.scss

@@ -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 '~bpk-mixins/index.scss';
-
-.bpk-icon-marker-background {
-  position: absolute;
-  top: 0;
-  left: 0;
-
-  @include bpk-themeable-property(
-    fill,
-    --bpk-icon-marker-default-background-color,
-    $bpk-status-success-spot-day
-  );
-
-  &--interactive {
-    cursor: pointer;
-  }
-
-  &--disabled {
-    @include bpk-themeable-property(
-      fill,
-      --bpk-icon-marker-default-disabled-background-color,
-      $bpk-status-success-fill-day
-    );
-  }
-
-  &--selected {
-    fill: $bpk-surface-default-day;
-
-    @include bpk-themeable-property(
-      stroke,
-      --bpk-icon-marker-default-selected-color,
-      $bpk-status-success-spot-day
-    );
-  }
-}