@skyscanner/backpack-web 6.0.0-alpha.1 → 6.0.0-alpha.2

package/bpk-component-progress/README.md

@@ -1,56 +0,0 @@
-# bpk-component-progress
-
-> Backpack progress bar component.
-
-## Installation
-
-```sh
-npm install bpk-component-progress --save-dev
-```
-
-## Usage
-
-```js
-import React, { Component } from 'react';
-import BpkProgress from 'bpk-component-progress';
-
-const Progress = () => (
-  <BpkProgress
-    min={0}
-    max={100}
-    value={63}
-    aria-label="Searching"
-    onCompleteTransitionEnd={() => alert('Completed!')}
-  />
-);
-
-const Steps = () => (
-  <BpkProgress
-    stepped
-    min={0}
-    max={5}
-    value={1}
-    aria-label="Checkout"
-    getValueText={(value, min, max) => `Step ${value} of ${max}`}
-  />
-);
-```
-
-## Props
-
-| Property                 | PropType                      | Required | Default Value |
-| ------------------------ | ----------------------------- | -------- | ------------- |
-| max                      | number                        | true     | -             |
-| min                      | number                        | true     | -             |
-| value                    | number                        | true     | -             |
-| className                | string                        | false    | null          |
-| getValueText             | func                          | false    | null          |
-| small                    | bool                          | false    | false         |
-| onComplete               | func                          | false    | null          |
-| onCompleteTransitionEnd  | func                          | false    | null          |
-| stepped                  | bool                          | false    | false         |
-| stepColor                | string                        | false    | `colorWhite`    |
-
-## Theme props
-
-* `progressBarFillColor`

package/bpk-component-progress/package.json

@@ -1,30 +0,0 @@
-{
-  "name": "bpk-component-progress",
-  "version": "3.1.11",
-  "description": "Backpack progress bar 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": "5c156b97cb0ba5e75851d3c763334578714c895e",
-  "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
-    "lodash.clamp": "^4.0.3",
-    "prop-types": "^15.7.2"
-  },
-  "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
-  },
-  "devDependencies": {
-    "bpk-component-button": "^6.2.6",
-    "bpk-storybook-utils": "^1.1.10"
-  }
-}

package/bpk-component-progress/src/BpkProgress.module.scss

@@ -1,64 +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-spacing-v2: true;
-
-.bpk-progress {
-  position: relative;
-  height: bpk-spacing-base();
-  border-radius: $bpk-border-radius-pill;
-  background-color: $bpk-color-sky-gray-tint-06;
-  overflow: hidden;
-
-  &--small {
-    height: bpk-spacing-md();
-    border-radius: $bpk-border-radius-xs;
-  }
-
-  &__value {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    content: ' ';
-    width: 0%;
-    transition: width $bpk-duration-base ease-in-out;
-    border-radius: $bpk-border-radius-sm;
-
-    @include bpk-themeable-property(
-      background-color,
-      --bpk-progress-bar-fill-color,
-      $bpk-color-sky-blue
-    );
-
-    &--stepped {
-      border-radius: 0;
-    }
-  }
-
-  &__step {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    width: 2 * $bpk-one-pixel-rem;
-    background: $bpk-color-white;
-  }
-}

package/bpk-component-radio/README.md

@@ -1,43 +0,0 @@
-# bpk-component-radio
-
-> Backpack radio button component.
-
-## Installation
-
-```sh
-npm install bpk-component-radio --save-dev
-```
-
-## Usage
-
-```js
-import React from 'react';
-import BpkRadio from 'bpk-component-radio';
-
-export default () => (
-  <BpkRadio
-    name="return"
-    label="Return"
-    onChange={() => console.log('radio changed')}
-    checked
-  />
-);
-```
-
-## Props
-
-| Property  | PropType | Required | Default Value |
-| --------- | -------- | -------- | ------------- |
-| name      | string   | true     | -             |
-| label     | node     | true     | -             |
-| ariaLabel | string   | false    | props.label   |
-| disabled  | bool     | false    | false         |
-| white     | bool     | false    | false         |
-| valid     | bool     | false    | null          |
-
-## Theme Props
-
-+ `radioCheckedColor`
-
-## Progressive enhancement
-On Internet Explorer 11, radio buttons have the standard built-in appearance.

package/bpk-component-radio/package.json

@@ -1,28 +0,0 @@
-{
-  "name": "bpk-component-radio",
-  "version": "3.1.12",
-  "description": "Backpack radio button 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": "5c156b97cb0ba5e75851d3c763334578714c895e",
-  "dependencies": {
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
-    "prop-types": "^15.7.2"
-  },
-  "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
-  },
-  "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-storybook-utils": "^1.1.10"
-  }
-}

package/bpk-component-radio/src/BpkRadio.module.scss

@@ -1,78 +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-spacing-v2: true;
-
-$bpk-radio-circle-size: $bpk-one-pixel-rem * 8;
-$bpk-radio-size: bpk-spacing-lg() - ($bpk-one-pixel-rem * 4);
-
-.bpk-radio {
-  @include bpk-radio;
-
-  &--white {
-    @include bpk-radio--white;
-  }
-
-  &--disabled {
-    @include bpk-radio--disabled;
-  }
-
-  &--invalid {
-    @include bpk-radio--invalid;
-  }
-
-  &__input {
-    @include bpk-radio__input;
-
-    &:checked {
-      + .bpk-radio__circle {
-        display: block;
-      }
-
-      &:disabled {
-        + .bpk-radio__circle {
-          display: block;
-          background: $bpk-color-sky-gray-tint-04;
-        }
-      }
-    }
-  }
-
-  &__circle {
-    position: absolute;
-    top: bpk-spacing-md() - ($bpk-one-pixel-rem * 2);
-    left: bpk-spacing-md() - ($bpk-one-pixel-rem * 2);
-    display: none;
-    width: $bpk-radio-circle-size;
-    height: $bpk-radio-circle-size;
-    border-radius: 50%;
-
-    @include bpk-themeable-property(
-      background,
-      --bpk-radio-checked-color,
-      $bpk-radio-checked-circle-color
-    );
-
-    @include bpk-rtl {
-      right: bpk-spacing-md() - ($bpk-one-pixel-rem * 2);
-      left: auto;
-    }
-  }
-}

package/bpk-component-rating/README.md

@@ -1,80 +0,0 @@
-# bpk-component-rating
-
-> Backpack rating component.
-
-## Installation
-
-```sh
-npm install bpk-component-rating --save-dev
-```
-
-## Usage
-
-```js
-import React from 'react';
-import BpkRating, { RATING_SIZES, RATING_SCALES } from 'bpk-component-rating';
-
-export default () => (
-  <BpkRating
-    ariaLabel="4.8 Excellent 2,420 reviews"
-    value={4.8}
-    title="Excellent"
-    subtitle="2,420 reviews"
-  />
-
-  // Large size rating
-  <BpkRating
-    ariaLabel="4.4 Very good 120 reviews"
-    title="Very good"
-    subtitle="120 reviews"
-    size={RATING_SIZES.large}
-    value={4.4}
-  />
-
-  // Title only rating
-  <BpkRating
-    ariaLabel="2.3 Bad"
-    title="Bad"
-    value={2.3}
-  />
-
-  // Show scale rating
-  <BpkRating
-    ariaLabel="3.8 Good 530 reviews"
-    title="Good"
-    subtitle="530 reviews"
-    value={3.8}
-  />
-
-  // Hide scale rating
-  <BpkRating
-    ariaLabel="3.8 Good 530 reviews"
-    title="Good"
-    subtitle="530 reviews"
-    value={3.8}
-    showScale={false}
-  />
-
-  // 0-10 scale
-  <BpkRating
-    ariaLabel="9.9 Awesome 6,549 reviews"
-    title="Awesome"
-    subtitle="6,549 reviews"
-    value={9.9}
-    ratingScale={RATING_SCALES.zeroToTen}
-  />
-);
-```
-
-## Props
-
-| Property  | PropType              | Required | Default Value     |
-| --------- | --------------------- | -------- | ----------------- |
-| ariaLabel | string                | true     | -                 |
-| title     | oneOfType(string, node) | true     | -                 |
-| value     | oneOfType(string, number) | true     | -               |
-| className | string                | false    | null              |
-| ratingScale | oneOf(RATING_SCALES) | false    | RATING_SCALES.zeroToFive |
-| size      | oneOf(RATING_SIZES)   | false    | RATING_SIZES.base |
-| subtitle  | string                | false    | null              |
-| showScale  | boolean               | false    | true             |

package/bpk-component-rating/package.json

@@ -1,29 +0,0 @@
-{
-  "name": "bpk-component-rating",
-  "version": "5.0.2",
-  "description": "Backpack rating 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-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
-    "lodash.clamp": "^4.0.3",
-    "prop-types": "^15.5.8"
-  },
-  "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
-  },
-  "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-text": "^7.0.5"
-  }
-}

package/bpk-component-rating/src/BpkRating.module.scss

@@ -1,86 +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';
-
-$bpk-spacing-v2: true;
-
-.bpk-rating {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: baseline;
-
-  &--large {
-    align-items: center;
-  }
-
-  &__value {
-    display: flex;
-    padding-right: bpk-spacing-md();
-    justify-content: center;
-    align-items: baseline;
-    color: $bpk-color-sky-gray;
-
-    @include bpk-rtl {
-      padding-right: 0;
-      padding-left: bpk-spacing-md();
-    }
-  }
-
-  &__text-wrapper {
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
-    white-space: nowrap;
-
-    &--large {
-      flex-direction: column;
-      align-items: flex-start;
-    }
-  }
-
-  &__scale {
-    color: $bpk-color-sky-gray-tint-02;
-  }
-
-  &__title {
-    &--large {
-      padding-top: $bpk-one-pixel-rem;
-    }
-  }
-
-  &__subtitle {
-    padding-left: bpk-spacing-md();
-    color: $bpk-color-sky-gray-tint-02;
-
-    @include bpk-rtl {
-      padding-right: bpk-spacing-md();
-      padding-left: 0;
-    }
-
-    &--large {
-      padding-top: $bpk-one-pixel-rem;
-      padding-left: 0;
-
-      @include bpk-rtl {
-        padding-right: 0;
-        padding-left: 0;
-      }
-    }
-  }
-}

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

@@ -1,26 +0,0 @@
-# bpk-component-rtl-toggle
-
-> Backpack RTL toggle component.
-
-## Installation
-
-```sh
-npm install bpk-component-rtl-toggle --save-dev
-```
-
-## Usage
-
-```js
-import React from 'react';
-import BpkRtlToggle from 'bpk-component-rtl-toggle';
-
-export default () => (
-  <BpkRtlToggle />
-);
-```
-
-## Props
-
-| Property         | PropType | Required | Default Value |
-| ---------------- | -------- | -------- | ------------- |
-| className        | string   | false    | null          |

package/bpk-component-rtl-toggle/package.json

@@ -1,24 +0,0 @@
-{
-  "name": "bpk-component-rtl-toggle",
-  "version": "3.1.11",
-  "description": "Backpack RTL toggle 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": "5c156b97cb0ba5e75851d3c763334578714c895e",
-  "dependencies": {
-    "bpk-component-link": "^3.1.11",
-    "bpk-react-utils": "^5.0.0",
-    "prop-types": "^15.7.2"
-  },
-  "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
-  }
-}

package/bpk-component-scrollable-calendar/README.md

@@ -1,102 +0,0 @@
-# bpk-component-scrollable-calendar
-
-> Backpack scrollable calendar component.
-
-## Installation
-
-```sh
-npm install bpk-component-scrollable-calendar --save-dev
-```
-
-## Usage
-
-```js
-import React, { Component } from 'react';
-import { DateUtils } from 'bpk-component-calendar';
-import BpkScrollableCalendar, { CALENDAR_SELECTION_TYPE } from 'bpk-component-scrollable-calendar';
-import format from 'date-fns/format';
-
-const formatDateFull = date => format(date, 'EEEE, do MMMM yyyy');
-const formatMonth = date => format(date, 'MMMM yyyy');
-const daysOfWeek = [
-  {
-    name: 'Sunday',
-    nameAbbr: 'Sun',
-    index: 0,
-    isWeekend: true,
-  },
-  // ...
-];
-
-export default class App extends Component {
-  constructor() {
-    super();
-
-    this.state = {
-      selectionConfiguration: {
-        type: CALENDAR_SELECTION_TYPE.single,
-        date: null,
-      }
-    };
-  }
-
-  handleDateSelect = (date) => {
-    this.setState({
-      selectionConfiguration: {
-        type: this.props.selectionConfiguration.type,
-        date: date,
-      },
-    });
-  };
-
-  render() {
-    return (
-      <BpkScrollableCalendar
-        id="calendar"
-        onDateSelect={this.handleDateSelect}
-        formatMonth={formatMonth}
-        formatDateFull={formatDateFull}
-        daysOfWeek={daysOfWeek}
-        weekStartsOn={1}
-        selectionConfiguration={this.state.selectionConfiguration}
-        // Subtract one day from today's date to make today selectable by default
-        minDate={DateUtils.addDays(new Date(), -1)}
-        maxDate={DateUtils.addMonths(new Date(), 12)}
-      />
-    );
-  }
-}
-```
-
-### BpkScrollableCalendarGridList
-
-This component is the main scrollable grid of months for the scrollable calendar.
-It is composed of `BpkScrollableCalendarGrid` elements. It uses all the same props
-as `BpkCalendarGrid`, but in addition `minDate` and `maxDate` are required to build
-the actual list.
-
-[Please refer to the props of BpkCalendarGrid here](https://backpack.github.io/components/calendar/?platform=web#bpkcalendargrid).
-
-| Property | PropType | Required | Default Value |
-| -------- | -------- | -------- | ------------- |
-| maxDate  | Date     | true     | -             |
-| minDate  | Date     | true     | -             |
-
-### BpkScrollableCalendarGrid
-
-The BpkScrollableCalendarGrid component displays a month as a table.
-Above this table it displays the month's name in a `BpkText`. When
-used with `BpkScrollableCalendarDate`, it only displays days from
-that specific month. It is built on top of BpkCalendarGrid and
-uses the same props.
-
-[Please refer to the props of BpkCalendarGrid here](https://backpack.github.io/components/calendar/?platform=web#bpkcalendargrid).
-
-### BpkScrollableCalendarDate
-
-The BpkScrollableCalendarDate component is used to render the content of a cell
-(a single day) inside the calendar grid. It is built on top of BpkCalendarDate
-and uses the same props. The only difference is that when isOutside is true,
-null is returned in order to only display of specific month in the calendar grid.
-
-[Please refer to the props of BpkCalendarDate here](https://backpack.github.io/components/calendar?platform=web#bpkcalendardate).

package/bpk-component-scrollable-calendar/package.json

@@ -1,32 +0,0 @@
-{
-  "name": "bpk-component-scrollable-calendar",
-  "version": "6.1.19",
-  "description": "Backpack scrollable calendar 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": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
-  "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-calendar": "^11.1.18",
-    "bpk-component-text": "^7.0.5",
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
-    "date-fns": "^2.21.1",
-    "prop-types": "^15.5.8",
-    "react-virtualized": "^9.22.3"
-  },
-  "devDependencies": {
-    "bpk-storybook-utils": "^1.1.10"
-  },
-  "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
-  }
-}