@skyscanner/backpack-web 25.4.0-alpha → 25.4.1

package/bpk-component-label/README.md

@@ -1,27 +0,0 @@
-# bpk-component-label
-
-> Backpack label component.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```js
-import BpkLabel from '@skyscanner/backpack-web/bpk-component-label';
-
-export default () => (
-  <BpkLabel htmlFor="origin">Origin</BpkLabel>
-)
-```
-
-## Props
-
-| Property  | PropType | Required | Default Value |
-| --------- | -------- | -------- | ------------- |
-| children  | node     | true     | -             |
-| disabled  | bool     | false    | false         |
-| invalid   | bool     | false    | false         |
-| required  | bool     | false    | false         |
-| white     | bool     | false    | false         |

package/bpk-component-label/src/BpkLabel.module.scss

@@ -1,47 +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-label {
-  @include bpk-label;
-
-  &--white {
-    @include bpk-label--white;
-  }
-
-  &--invalid {
-    @include bpk-label--invalid;
-  }
-
-  &--disabled {
-    @include bpk-label--disabled;
-
-    &--white {
-      color: $bpk-text-disabled-on-dark-day;
-    }
-  }
-
-  &__asterisk {
-    @include bpk-themeable-property(
-      color,
-      --bpk-form-validation-text-color,
-      $bpk-form-validation-color
-    );
-  }
-}

package/bpk-component-link/README.md

@@ -1,66 +0,0 @@
-# bpk-component-link
-
-> Backpack link component.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```js
-import BpkLink, { BpkButtonLink } from '@skyscanner/backpack-web/bpk-component-link';
-
-export default () => (
-  <div>
-    Links can be both <BpkLink href="http://www.skyscanner.net/">anchor tags</BpkLink> as well
-    as <BpkButtonLink onClick={() => console.log('link button click!')}>button tags</BpkButtonLink>.
-  </div>
-)
-```
-
-## Single Page App (SPA) Frameworks
-
-If you're using a SPA framework like `react-router-dom` or `Next.js` to navigate between pages without refreshing, then you can wrap `BpkLink` in the component provided by the framework.
-
-[`react-router-dom` `Link` using the `component` prop](https://reactrouter.com/web/api/Link/component-reactcomponent)
-
-[`Next.js` `Link` using a custom component as the child element](https://nextjs.org/docs/api-reference/next/link#if-the-child-is-a-custom-component-that-wraps-an-a-tag)
-
-## Props
-
-### BpkLink
-
-| Property  | PropType | Required | Default Value |
-| --------  | -------- | -------- | ------------- |
-| children  | -        | true     | -             |
-| href      | string   | true     | -             |
-| onClick   | func     | false    | null          |
-| blank     | bool     | false    | false         |
-| rel       | string   | false    | null          |
-| alternate | bool     | false    | false         |
-| ref       | any      | false    | null          |
-
-### BpkButtonLink
-
-| Property  | PropType | Required | Default Value |
-| --------  | -------- | -------- | ------------- |
-| children  | -        | true     | -             |
-| onClick   | func     | true     | -             |
-| alternate | bool     | false    | false         |
-
-## Theme props
-
-For both BpkLink and BpkButtonLink the following theme attributes are required.
-
-* `linkColor`
-* `linkHoverColor`
-* `linkActiveColor`
-* `linkVisitedColor`
-
-Alternate:
-
-* `linkAlternateColor`
-* `linkAlternateHoverColor`
-* `linkAlternateActiveColor`
-* `linkAlternateVisitedColor`

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,209 +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                               |
-| mapId                 | string                                                            | false    | null                             |
-
-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
-      );
-    }
-  }
-}