@skyscanner/backpack-web 21.0.2 → 22.0.0-beta.1

package/bpk-component-graphic-promotion/README.md

@@ -1,67 +0,0 @@
-# bpk-component-graphic-promotion
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```tsx
-import BpkGraphicPromo from '@skyscanner/backpack-web/bpk-component-graphic-promotion';
-
-export default () => (
-  <BpkGraphicPromo
-    buttonText="Learn more"
-    contentId="graphic-promo-1"
-    headline="Ride your wave"
-    invertVertically
-    onClick={() => redirect("https://www.sponsor-name.com/promotion")}
-    sponsor={{
-      label: 'Sponsored',
-      logo: './path/to/sponsor/logo.png',
-      altText: 'Sponsor Name',
-    }}
-    subheading="Portugal and 6 more countries have just been added to the UK travel green list"
-    tagline="Tagline"
-    textAlign={TEXT_ALIGN.start}
-  />
-);
-```
-
-## Props
-
-| Property         | PropType          | Required | Default Value |
-| ---------------- | ----------------- | -------- | ------------- |
-| buttonText       | string            | true     | -             |
-| headline         | string            | true     | -             |
-| onClick          | func              | true     | -             |
-| textAlign        | oneOf(TEXT_ALIGN) | true     | -             |
-| className        | string            | false    | null          |
-| contentId        | string            | false    | null          |
-| invertVertically | bool              | false    | false         |
-| sponsor          | object            | false    | null          |
-| style            | object            | false    | {}            |
-| subheading       | string            | false    | null          |
-| tagline          | string            | false    | null          |
-
-### Prop Details
-
-#### sponsor
-
-An object that groups together all the sponsor related properties. This should only be provided if the graphic promo is sponsored, in which case all of the object's properties are required.
-
-The object consists of the following fields:
-
-- `altText`: string
-- `label`: string
-- `logo`: string
-
-##### Example
-
-```ts
-const sponsor = {
-  label: 'Sponsored',
-  altText: 'Skyscanner',
-  logo: './path/to/skyscanner/logo.png',
-};
-```

package/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.scss

@@ -1,270 +0,0 @@
-/*
- * Backpack - Skyscanner's Design System
- *
- * Copyright 2022 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';
-
-@mixin aspect-ratio($ratio) {
-  padding-top: $ratio;
-  box-sizing: border-box;
-}
-
-@mixin fill-parent {
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
-  height: 100%;
-}
-
-@mixin content-alignment {
-  &--start {
-    align-items: start;
-  }
-
-  &--center {
-    align-items: center;
-  }
-
-  &--end {
-    align-items: end;
-  }
-}
-
-@mixin text-alignment {
-  &--start {
-    align-items: start;
-    text-align: start;
-  }
-
-  &--center {
-    align-items: center;
-    text-align: center;
-  }
-
-  &--end {
-    align-items: start;
-    text-align: start;
-  }
-}
-
-@mixin reset-alignment {
-  align-items: start;
-  text-align: start;
-}
-
-.bpk-card {
-  @include bpk-card;
-}
-
-.bpk-graphic-promo {
-  max-width: 76.5rem;
-  margin-right: auto;
-  margin-left: auto;
-  background-color: $bpk-surface-contrast-day;
-  background-position: center;
-  background-size: cover;
-  color: $bpk-text-on-dark-day;
-  box-shadow: none;
-
-  @include bpk-breakpoint-small-tablet {
-    @include aspect-ratio(133%);
-  }
-
-  /* remove shadow and hightlights from Backpack Card */
-  &::after {
-    display: none;
-  }
-
-  &__container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    @include content-alignment;
-
-    @include bpk-breakpoint-above-tablet {
-      height: 28.75rem;
-
-      @include bpk-margin-leading(bpk-spacing-xxxl(), false);
-      @include bpk-margin-trailing(bpk-spacing-xxl(), false);
-
-      /* adjusting for 1.5rem difference between margins */
-      &--center > * {
-        @include bpk-margin-trailing(bpk-spacing-lg());
-      }
-    }
-
-    @include bpk-breakpoint-tablet {
-      height: 22.5rem;
-
-      @include bpk-margin-leading(bpk-spacing-xxl(), false);
-      @include bpk-margin-trailing(bpk-spacing-xl(), false);
-
-      /* adjusting for 1.5rem difference between margins */
-      &--center > * {
-        @include bpk-margin-trailing(bpk-spacing-md());
-      }
-    }
-
-    @include bpk-breakpoint-small-tablet {
-      padding: bpk-spacing-xl();
-      justify-content: space-between;
-
-      @include reset-alignment;
-      @include bpk-margin-leading(0);
-      @include fill-parent;
-
-      &--inverted {
-        flex-direction: column-reverse;
-      }
-
-      > * {
-        @include bpk-margin-leading(0);
-      }
-    }
-
-    @include bpk-breakpoint-small-mobile {
-      padding: bpk-spacing-lg();
-    }
-  }
-
-  &__tagline {
-    margin-bottom: bpk-spacing-md();
-
-    @include bpk-heading-5;
-
-    @include bpk-breakpoint-tablet {
-      @include bpk-label-1;
-    }
-
-    @include bpk-breakpoint-small-tablet {
-      @include bpk-subheading;
-    }
-
-    @include bpk-breakpoint-small-mobile {
-      @include bpk-label-1;
-    }
-  }
-
-  &__headline {
-    @include bpk-breakpoint-above-tablet {
-      @include bpk-hero-5;
-
-      &:not(:last-child) {
-        margin-bottom: bpk-spacing-md();
-      }
-    }
-
-    @include bpk-breakpoint-tablet {
-      @include bpk-heading-1;
-
-      &:not(:last-child) {
-        margin-bottom: bpk-spacing-md();
-      }
-    }
-
-    @include bpk-breakpoint-small-tablet {
-      margin-bottom: bpk-spacing-md();
-    }
-
-    @include bpk-breakpoint-mobile {
-      @include bpk-heading-2;
-    }
-  }
-
-  &__subheading {
-    @include bpk-body-default;
-
-    @include bpk-breakpoint-tablet {
-      @include bpk-heading-5;
-    }
-
-    @include bpk-breakpoint-small-tablet {
-      @include bpk-heading-3;
-    }
-
-    @include bpk-breakpoint-mobile {
-      @include bpk-heading-5;
-    }
-  }
-
-  &__promo-content,
-  &__sponsor-content {
-    display: flex;
-    flex-direction: column;
-
-    @include text-alignment;
-
-    @include bpk-breakpoint-above-tablet {
-      width: 22.5rem;
-    }
-
-    @include bpk-breakpoint-tablet {
-      width: 20rem;
-    }
-
-    @include bpk-breakpoint-small-tablet {
-      width: initial;
-
-      @include reset-alignment;
-    }
-  }
-
-  &__sponsor-content {
-    display: flex;
-    margin-bottom: bpk-spacing-base();
-    flex-direction: column;
-
-    @include bpk-breakpoint-small-tablet {
-      margin-bottom: initial;
-    }
-  }
-
-  &__sponsor-label {
-    margin-bottom: bpk-spacing-sm();
-
-    @include bpk-label-1;
-
-    @include bpk-breakpoint-small-tablet {
-      margin-bottom: bpk-spacing-md();
-
-      @include bpk-heading-3;
-    }
-
-    @include bpk-breakpoint-small-mobile {
-      margin-bottom: bpk-spacing-sm();
-
-      @include bpk-label-1;
-    }
-  }
-
-  &__sponsor-logo {
-    width: auto;
-    max-width: 9.25rem;
-    height: auto;
-    max-height: 3.75rem;
-  }
-
-  &__cta {
-    margin-top: bpk-spacing-xl();
-
-    @include bpk-breakpoint-small-tablet {
-      display: none;
-    }
-  }
-}

package/bpk-component-grid-toggle/README.md

@@ -1,24 +0,0 @@
-# bpk-component-grid-toggle
-
-> Backpack vertical grid toggle component.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```js
-import BpkGridToggle from '@skyscanner/backpack-web/bpk-component-grid-toggle';
-
-export default () => (
-  <BpkGridToggle />
-);
-```
-
-## Props
-
-| Property         | PropType | Required | Default Value |
-| ---------------- | -------- | -------- | ------------- |
-| className        | string   | false    | null          |
-| targetContainer  | string   | false    | 'body'        |

package/bpk-component-grid-toggle/src/BpkGridToggle.module.scss

@@ -1,52 +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-vertical-grid {
-  &--on {
-    position: relative;
-
-    &::after {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      content: '';
-      display: block;
-      z-index: 9999;
-      width: auto;
-      height: auto;
-      background: linear-gradient(
-          to bottom,
-          rgba($bpk-status-danger-spot-day, 0.3) 0,
-          transparent $bpk-one-pixel-rem
-        )
-        repeat left 0;
-      background-size: $bpk-spacing-xs $bpk-spacing-xs;
-      pointer-events: none;
-    }
-
-    &:active {
-      &::after {
-        display: none;
-      }
-    }
-  }
-}

package/bpk-component-horizontal-nav/README.md

@@ -1,101 +0,0 @@
-# bpk-component-horizontal-nav
-
-> Backpack horizontal nav component.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```js
-import { Component } from 'react';
-import BpkHorizontalNav, { BpkHorizontalNavItem } from '@skyscanner/backpack-web/bpk-component-horizontal-nav';
-
-export default class App extends Component {
-  constructor() {
-    super();
-    this.state = {
-      selected: 'flights',
-    };
-  }
-
-  onClick = (e) => {
-    this.setState({
-      selected: e.target.name,
-    });
-  }
-
-  render() {
-    return (
-      <BpkHorizontalNav>
-        <BpkHorizontalNavItem
-          name="flights"
-          selected={this.state.selected === 'flights'}
-          onClick={this.onClick}
-        >
-          Flights
-        </BpkHorizontalNavItem>
-        <BpkHorizontalNavItem
-          name="hotels"
-          selected={this.state.selected === 'hotels'}
-          onClick={this.onClick}
-        >
-          Hotels
-        </BpkHorizontalNavItem>
-        <BpkHorizontalNavItem
-          name="car-hire"
-          selected={this.state.selected === 'car-hire'}
-          onClick={this.onClick}
-        >
-          Car hire
-        </BpkHorizontalNavItem>
-      </BpkHorizontalNav>
-    );
-  }
-};
-```
-
-## Props
-
-### BpkHorizontalNav
-
-| Property                          | PropType | Required | Default Value |
-| --------------------------------- | -------- | -------- | ------------- |
-| children                          | node     | true     | -             |
-| autoScrollToSelected              | bool     | false    | false         |
-| className                         | string   | false    | null          |
-| leadingScrollIndicatorClassName   | string   | false    | null          |
-| showUnderline                     | bool     | false    | true          |
-| trailingScrollIndicatorClassName  | string   | false    | null          |
-| type                              | oneOf('default', 'light') | false | 'default' |
-
-#### `autoScrollToSelected`
-
-Ensures that the selected item is within view when loaded on narrow-screened devices.
-
-#### `showUnderline`
-
-When set to `false`, the bottom border on the component isn't included. This refers
-to the underline on the whole `BpkHorizontalNav`, not the line that appears under the selected item.
-
-### BpkHorizontalNavItem
-
-| Property    | PropType | Required | Default Value |
-| ----------- | -------- | -------- | ------------- |
-| children    | node     | true     | -             |
-| className   | string   | false    | null          |
-| spaceAround | bool     | false    | false         |
-| selected    | bool     | false    | false         |
-| disabled    | bool     | false    | false         |
-| href        | string   | false    | null          |
-
-**Note:** `disabled` and `selected` are mutually exclusive for true values, i.e. only one of them can be true for a given nav item.
-
-## Theme Props
-
-* `horizontalNavLinkColor`
-* `horizontalNavLinkHoverColor`
-* `horizontalNavLinkActiveColor`
-* `horizontalNavLinkSelectedColor`
-* `horizontalNavBarSelectedColor`

package/bpk-component-horizontal-nav/src/BpkHorizontalNav.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-horizontal-nav {
-  &--show-default-underline {
-    @include bpk-border-bottom-sm($bpk-line-day, '');
-  }
-
-  &--show-light-underline {
-    @include bpk-border-bottom-sm($bpk-line-day, '');
-  }
-
-  &__list {
-    display: flex;
-    margin: 0;
-    padding: 0;
-    align-items: stretch;
-    list-style-type: none;
-  }
-}

package/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.module.scss

@@ -1,152 +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-horizontal-nav {
-  &__item {
-    display: inline-block;
-    display: flex;
-
-    &--space-around {
-      margin-right: auto;
-      margin-left: auto;
-    }
-  }
-
-  &__link {
-    display: inline-block;
-    display: flex;
-    padding: (bpk-spacing-base() - (2 * $bpk-one-pixel-rem)) bpk-spacing-lg();
-    border: 0;
-    border-radius: 0;
-    background: none;
-    text-decoration: none;
-    cursor: pointer;
-    fill: currentcolor;
-
-    &--default {
-      @include bpk-themeable-property(
-        color,
-        --bpk-horizontal-nav-link-color,
-        $bpk-text-secondary-day
-      );
-
-      @include bpk-hover {
-        @include bpk-border-bottom-xl($bpk-surface-highlight-day);
-        @include bpk-themeable-property(
-          color,
-          --bpk-horizontal-nav-link-hover-color,
-          $bpk-text-secondary-day
-        );
-      }
-
-      &:active {
-        @include bpk-border-bottom-xl($bpk-line-day);
-        @include bpk-themeable-property(
-          color,
-          --bpk-horizontal-nav-link-active-color,
-          $bpk-text-secondary-day
-        );
-      }
-
-      &-disabled {
-        color: $bpk-text-disabled-day;
-        cursor: not-allowed;
-
-        &:active {
-          color: $bpk-text-disabled-day;
-          box-shadow: unset;
-        }
-      }
-
-      &-selected {
-        @include bpk-border-bottom-xl($bpk-horizontal-nav-bar-selected-color);
-        @include bpk-border-bottom-xl(
-          var(
-            --bpk-horizontal-nav-bar-selected-color,
-            $bpk-horizontal-nav-bar-selected-color
-          )
-        );
-        @include bpk-themeable-property(
-          color,
-          --bpk-horizontal-nav-link-selected-color,
-          $bpk-text-link-day
-        );
-
-        @include bpk-hover {
-          @include bpk-border-bottom-xl($bpk-horizontal-nav-bar-selected-color);
-          @include bpk-border-bottom-xl(
-            var(
-              --bpk-horizontal-nav-bar-selected-color,
-              $bpk-horizontal-nav-bar-selected-color
-            )
-          );
-        }
-
-        &:active {
-          @include bpk-border-bottom-xl($bpk-horizontal-nav-bar-selected-color);
-          @include bpk-border-bottom-xl(
-            var(
-              --bpk-horizontal-nav-bar-selected-color,
-              $bpk-horizontal-nav-bar-selected-color
-            )
-          );
-        }
-      }
-    }
-
-    &--light {
-      color: $bpk-text-on-dark-day;
-
-      @include bpk-hover {
-        @include bpk-border-bottom-xl($bpk-text-on-dark-day);
-      }
-
-      &:active {
-        @include bpk-border-bottom-xl($bpk-text-on-dark-day);
-      }
-
-      &-disabled {
-        color: $bpk-text-disabled-day;
-        cursor: not-allowed;
-
-        &:active {
-          color: $bpk-text-disabled-day;
-          box-shadow: unset;
-        }
-      }
-
-      &-selected {
-        color: $bpk-text-on-dark-day;
-
-        @include bpk-border-bottom-xl($bpk-text-on-dark-day);
-
-        @include bpk-hover {
-          @include bpk-border-bottom-xl($bpk-text-on-dark-day);
-        }
-
-        &:active {
-          @include bpk-border-bottom-xl($bpk-text-on-dark-day);
-        }
-      }
-    }
-  }
-}