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

package/bpk-component-floating-notification/src/BpkFloatingNotification.module.scss

@@ -1,96 +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-floating-notification {
-  position: absolute;
-  right: 0;
-  bottom: bpk-spacing-xl();
-  left: 0;
-  display: flex;
-  max-width: bpk-spacing-xxl() * 10;
-  margin: auto;
-  padding: bpk-spacing-lg();
-  transition: opacity $bpk-duration-base ease-in-out,
-    transform $bpk-duration-base ease-in-out;
-  border-radius: $bpk-border-radius-md;
-  background: $bpk-color-sky-blue-shade-03;
-  color: $bpk-color-white;
-  box-shadow: $bpk-box-shadow-xl, $bpk-box-shadow-lg;
-
-  @include bpk-breakpoint-mobile {
-    max-width: 100%;
-    padding: bpk-spacing-base();
-  }
-
-  &--leave {
-    transform: translateY(0);
-    opacity: 1;
-
-    &-active {
-      transform: translateY(bpk-spacing-xl());
-      opacity: 0;
-    }
-
-    &-done {
-      opacity: 0;
-    }
-  }
-
-  &--appear {
-    transform: translateY(bpk-spacing-xl());
-    opacity: 0;
-
-    &-active {
-      transform: translateY(0);
-      opacity: 1;
-    }
-  }
-
-  &__button {
-    min-height: 0;
-    margin: 0 0 auto auto;
-    padding: 0;
-    color: $bpk-color-sky-blue-tint-01;
-
-    &--dark {
-      color: $bpk-link-color;
-    }
-  }
-
-  &__icon {
-    margin: bpk-spacing-sm() bpk-spacing-md() 0 bpk-spacing-sm();
-    flex-shrink: 0;
-    text-align: bottom;
-    fill: $bpk-color-white;
-
-    &--dark {
-      fill: $bpk-color-sky-gray;
-    }
-  }
-
-  &__text {
-    margin-right: bpk-spacing-md();
-  }
-
-  &--dark {
-    background: $bpk-color-white;
-    color: $bpk-color-sky-gray;
-  }
-}

package/bpk-component-form-validation/README.md

@@ -1,33 +0,0 @@
-# bpk-component-form-validation
-
-> Backpack form validation component.
-
-## Installation
-
-```sh
-npm install bpk-component-form-validation --save-dev
-```
-
-## Usage
-
-```js
-import React from 'react';
-import BpkFormValidation from 'bpk-component-form-validation';
-
-export default () => (
-  <BpkFormValidation id="my-form-validation" expanded>
-    A validation message.
-  </BpkFormValidation>,
-)
-```
-
-## Props
-
-| Property       | PropType | Required | Default Value |
-| -------------- | -------- | -------- | ------------- |
-| children       | node     | true     | -             |
-| id             | string   | true     | -             |
-| expanded       | bool     | true     | -             |
-| isCheckbox     | bool     | false    | false         |
-| className      | string   | false    | null          |
-| containerProps | object   | false    | {}            |

package/bpk-component-form-validation/package.json

@@ -1,34 +0,0 @@
-{
-  "name": "bpk-component-form-validation",
-  "version": "5.0.0",
-  "description": "Backpack form-validation 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": {
-    "bpk-animate-height": "^5.0.0",
-    "bpk-mixins": "^31.2.0",
-    "bpk-react-utils": "^7.0.0",
-    "prop-types": "^15.7.2"
-  },
-  "peerDependencies": {
-    "react": "^17.0.2"
-  },
-  "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.3.0",
-    "bpk-component-button": "^7.0.0",
-    "bpk-component-checkbox": "^5.0.0",
-    "bpk-component-icon": "^10.0.0",
-    "bpk-component-input": "^7.0.0",
-    "bpk-component-select": "^6.0.0",
-    "bpk-component-textarea": "^5.0.0"
-  }
-}

package/bpk-component-form-validation/src/BpkFormValidation.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-form-validation{position:relative;transform:translateY(-.75rem);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;opacity:0;color:#d1435b;color:var(--bpk-form-validation-text-color, #d1435b)}.bpk-form-validation__container{margin-top:0.5rem;font-size:.75rem}.bpk-form-validation__icon{fill:#d1435b;fill:var(--bpk-form-validation-icon-fill, #d1435b);margin-left:0;margin-right:.375rem}html[dir='rtl'] .bpk-form-validation__icon{margin-left:.375rem;margin-right:0}.bpk-form-validation--appear{transform:translateY(0);opacity:1}.bpk-form-validation--is-checkbox{display:inline-block}

package/bpk-component-form-validation/src/BpkFormValidation.module.scss

@@ -1,44 +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-form-validation {
-  @include bpk-form-validation;
-
-  &__container {
-    @include bpk-form-validation__container;
-  }
-
-  &__icon {
-    @include bpk-themeable-property(
-      fill,
-      --bpk-form-validation-icon-fill,
-      $bpk-form-validation-color
-    );
-    @include bpk-margin-trailing($bpk-spacing-xs);
-  }
-
-  &--appear {
-    @include bpk-form-validation--appear;
-  }
-
-  &--is-checkbox {
-    @include bpk-form-validation--is-checkbox;
-  }
-}

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

@@ -1,70 +0,0 @@
-# bpk-component-graphic-promotion
-
-## Installation
-
-```sh
-npm install bpk-component-graphic-promotion --save-dev
-```
-
-## Usage
-
-```js
-import React from 'react';
-import BpkGraphicPromo from 'bpk-component-graphic-promotion';
-
-export default () => (
-  <BpkGraphicPromo
-    contentId="graphic-promo-1"
-    tagline="Tagline"
-    headline="Ride your wave"
-    subheading="Portugal and 6 more countries have just been added to the UK travel green list"
-    sponsor={{
-      label: 'Sponsored',
-      logo: './path/to/sponsor/logo.png',
-      altText: 'Sponsor Name',
-    }}
-    buttonText="Learn more"
-    onClick={() => redirect("https://www.sponsor-name.com/promotion")}
-    textAlign={TEXT_ALIGN.start}
-    invertVertically
-  />
-);
-```
-
-## Props
-
-| Property         | PropType          | Required | Default Value |
-| ---------------- | ----------------- | -------- | ------------- |
-| contentId        | string            | false    | null          |
-| buttonText       | string            | true     | -             |
-| headline         | string            | true     | -             |
-| invertVertically | bool              | true     | -             |
-| onClick          | func              | true     | -             |
-| textAlign        | oneOf(TEXT_ALIGN) | true     | -             |
-| className        | string            | false    | null          |
-| style            | object            | false    | {}            |
-| tagline          | string            | false    | null          |
-| sponsor          | object            | false    | null          |
-| subheading       | 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
-
-```typescript
-const sponsor = {
-  label: 'Sponsored',
-  altText: 'Skyscanner',
-  logo: './path/to/skyscanner/logo.png',
-};
-```

package/bpk-component-graphic-promotion/package.json

@@ -1,25 +0,0 @@
-{
-  "name": "bpk-component-graphic-promotion",
-  "version": "5.0.0",
-  "description": "Backpack graphic-promotion 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/"
-  },
-  "dependencies": {
-    "bpk-component-button": "^7.0.0",
-    "bpk-component-text": "^8.0.0",
-    "bpk-mixins": "^31.2.0",
-    "bpk-react-utils": "^7.0.0",
-    "prop-types": "^15.5.8"
-  },
-  "peerDependencies": {
-    "react": "^17.0.2"
-  }
-}

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';
-
-@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-color-sky-blue;
-  background-position: center;
-  background-size: cover;
-  color: $bpk-color-white;
-  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/README.md

@@ -1,90 +0,0 @@
-# bpk-component-grid
-
-> Backpack grid components.
-
-## Installation
-
-```sh
-npm install bpk-component-grid --save-dev
-```
-
-## Usage
-
-```js
-import React from 'react';
-import { BpkGridContainer, BpkGridRow, BpkGridColumn } from 'bpk-component-grid';
-
-export default () => (
-  <BpkGridContainer>
-    <BpkGridRow>
-      <BpkGridColumn width={8} tabletWidth={12}>
-        Search controls
-      </BpkGridColumn>
-      <BpkGridColumn width={4} tabletWidth={0}>
-        MPU
-      </BpkGridColumn>
-    </BpkGridRow>
-    <BpkGridRow>
-      <BpkGridColumn width={12}>
-        Provider logos
-      </BpkGridColumn>
-    </BpkGridRow>
-    <BpkGridRow>
-      <BpkGridColumn width={4} mobileWidth={12}>
-        Content panel
-      </BpkGridColumn>
-      <BpkGridColumn width={4} mobileWidth={12}>
-        Content panel
-      </BpkGridColumn>
-      <BpkGridColumn width={4} mobileWidth={12}>
-        Content panel
-      </BpkGridColumn>
-    </BpkGridRow>
-    <BpkGridRow>
-      <BpkGridColumn width={3} tabletWidth={6} mobileWidth={12}>
-        Confidence statement
-      </BpkGridColumn>
-      <BpkGridColumn width={3} tabletWidth={6} mobileWidth={12}>
-        Confidence statement
-      </BpkGridColumn>
-      <BpkGridColumn width={3} tabletWidth={6} mobileWidth={12}>
-        Confidence statement
-      </BpkGridColumn>
-      <BpkGridColumn width={3} tabletWidth={6} mobileWidth={12}>
-        Confidence statement
-      </BpkGridColumn>
-    </BpkGridRow>
-  </BpkGridContainer>
-);
-```
-
-## Props
-
-### BpkGridContainer
-
-| Property  | PropType | Required | Default Value |
-| --------- | -------- | -------- | ------------- |
-| children  | node     | true     | -             |
-| debug     | bool     | false    | false         |
-| fullWidth | bool     | false    | false         |
-
-### BpkGridRow
-
-| Property  | PropType | Required | Default Value |
-| --------- | -------- | -------- | ------------- |
-| children  | node     | true     | -             |
-| padded    | bool     | false    | true          |
-
-### BpkGridColumn
-
-| Property     | PropType | Required | Default Value |
-| ------------ | -------- | -------- | ------------- |
-| children     | node     | true     | -             |
-| width        | number   | true     | -             |
-| mobileWidth  | number   | false    | null          |
-| tabletWidth  | number   | false    | null          |
-| offset       | number   | false    | null          |
-| mobileOffset | number   | false    | null          |
-| tabletOffset | number   | false    | null          |
-| padded       | bool     | false    | true          |
-| debug        | bool     | false    | false         |

package/bpk-component-grid/package.json

@@ -1,24 +0,0 @@
-{
-  "name": "bpk-component-grid",
-  "version": "4.0.0",
-  "description": "Backpack grid components.",
-  "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.2.0",
-    "bpk-react-utils": "^7.0.0",
-    "prop-types": "^15.7.2"
-  },
-  "peerDependencies": {
-    "react": "^17.0.2"
-  }
-}