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

package/bpk-component-accordion/src/BpkAccordionItem.module.scss

@@ -1,117 +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-accordion {
-  &__title {
-    height: auto;
-
-    @include bpk-border-bottom-sm($bpk-color-sky-gray-tint-06);
-  }
-
-  &__toggle-button {
-    width: 100%;
-    padding: 0;
-    border: 0;
-    background-color: transparent;
-    text-align: left;
-    cursor: pointer;
-    appearance: none;
-
-    @include bpk-themeable-property(
-      color,
-      --bpk-accordion-color,
-      $bpk-color-sky-blue-shade-03
-    );
-
-    @include bpk-rtl {
-      text-align: right;
-    }
-
-    @include bpk-hover {
-      @include bpk-themeable-property(
-        color,
-        --bpk-accordion-hover-color,
-        $bpk-color-sky-blue-shade-03
-      );
-    }
-
-    &:active {
-      @include bpk-themeable-property(
-        color,
-        --bpk-accordion-active-color,
-        $bpk-color-sky-blue-shade-03
-      );
-    }
-  }
-
-  &__flex-container {
-    display: inline-flex;
-    width: 100%;
-    margin: (bpk-spacing-md()) 0;
-    flex-direction: row;
-  }
-
-  &__title-text {
-    display: inline-block;
-    flex-grow: 1;
-  }
-
-  &__icon-wrapper {
-    display: inline-block;
-  }
-
-  &__leading-icon {
-    @include bpk-margin-trailing(bpk-spacing-md(), true);
-  }
-
-  &__item-expand-icon {
-    @include bpk-themeable-property(
-      fill,
-      --bpk-accordion-color,
-      $bpk-color-sky-blue-shade-03
-    );
-
-    @include bpk-hover {
-      @include bpk-themeable-property(
-        fill,
-        --bpk-accordion-hover-color,
-        $bpk-color-sky-blue-shade-03
-      );
-    }
-
-    &:active {
-      @include bpk-themeable-property(
-        fill,
-        --bpk-accordion-active-color,
-        $bpk-color-sky-blue-shade-03
-      );
-    }
-
-    &--flipped {
-      transform: scaleY(-1);
-    }
-  }
-
-  &__content-container {
-    margin: 0;
-  }
-}

package/bpk-component-aria-live/README.md

@@ -1,42 +0,0 @@
-# bpk-component-aria-live
-
-> Backpack aria-live component.
-
-## Installation
-
-```sh
-npm install bpk-component-aria-live --save-dev
-```
-
-## Usage
-
-```js
-import React from 'react';
-import BpkAriaLive, { ARIA_LIVE_POLITENESS_SETTINGS } from 'bpk-component-aria-live';
-
-export default () => (
-  <>
-    <BpkAriaLive>
-      Information about an interaction section of the page. This will be visible only to accessibility technologies.
-    </BpkAriaLive>
-
-    <BpkAriaLive visible politenessSetting={ARIA_LIVE_POLITENESS_SETTINGS.assertive}>
-      Information about an interaction section of the page. This will be visible to everybody.
-    </BpkAriaLive>
-  </>
-);
-```
-
-## Props
-
-| Property | PropType | Required | Default Value |
-| - | - | - | - |
-| className | string | false | null |
-| politenessSetting | oneOf([`ARIA_LIVE_POLITENESS_SETTINGS.off`, `ARIA_LIVE_POLITENESS_SETTINGS.polite`, `ARIA_LIVE_POLITENESS_SETTINGS.assertive`]) | false | `ARIA_LIVE_POLITENESS_SETTINGS.polite` |
-| visible | bool | false | false |
-
-`aria-relevant` and `aria-atomic` props can also be set.
-
-`aria-relevant` determines what sort of changes should be read out. By default it is `additions` but can be `removals` or `all`. [Read more about `aria-relevant` on MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute).
-
-`aria-atomic` is a boolean which determines whether changes should be read out, or the whole region should be read out. [Read more about `aria-atomic` on MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Use_Case:_Clock).

package/bpk-component-aria-live/package.json

@@ -1,31 +0,0 @@
-{
-  "name": "bpk-component-aria-live",
-  "version": "2.1.18",
-  "description": "Backpack aria-live 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-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
-    "prop-types": "^15.5.8"
-  },
-  "devDependencies": {
-    "bpk-component-chip": "^5.2.16",
-    "bpk-component-code": "^3.1.11",
-    "bpk-component-fieldset": "^4.1.18",
-    "bpk-component-select": "^5.1.11",
-    "bpk-component-switch": "^2.1.12"
-  },
-  "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
-  },
-  "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926"
-}

package/bpk-component-aria-live/src/BpkAriaLive.module.scss

@@ -1,25 +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-aria-live {
-  &--invisible {
-    @include bpk-visually-hidden;
-  }
-}

package/bpk-component-autosuggest/README.md

@@ -1,126 +0,0 @@
-# bpk-component-autosuggest
-
-> Backpack autosuggest component.
-
-## Installation
-
-```sh
-npm install bpk-component-autosuggest --save-dev
-```
-
-## Usage
-
-```js
-import React, { Component } from 'react';
-import BpkLabel from 'bpk-component-label';
-import { withRtlSupport } from 'bpk-component-icon';
-import FlightIcon from 'bpk-component-icon/lg/flight';
-import BpkAutosuggest, { BpkAutosuggestSuggestion } from 'bpk-component-autosuggest';
-
-const BpkFlightIcon = withRtlSupport(FlightIcon);
-
-const offices = [
-  {
-    name: 'Barcelona',
-    code: 'BCN',
-    country: 'Spain',
-  },
-  ...
-];
-
-const getSuggestions = (value) => {
-  const inputValue = value.trim().toLowerCase();
-  const inputLength = inputValue.length;
-
-  return inputLength === 0 ? [] : offices.filter(office =>
-    office.name.toLowerCase().indexOf(inputValue) !== -1,
-  );
-};
-
-const getSuggestionValue = ({ name, code }) => `${name} (${code})`;
-
-const renderSuggestion = suggestion => (
-  <BpkAutosuggestSuggestion
-    value={getSuggestionValue(suggestion)}
-    subHeading={suggestion.country}
-    tertiaryLabel="Airport"
-    indent={suggestion.indent}
-    icon={BpkFlightIcon}
-  />
-);
-
-class MyComponent extends Component {
-  constructor() {
-    super();
-
-    this.state = {
-      value: '',
-      suggestions: [],
-    };
-
-  }
-
-  onChange = (e, { newValue }) => {
-    this.setState({
-      value: newValue,
-    });
-  }
-
-  onSuggestionsFetchRequested = ({ value }) => {
-    this.setState({
-      suggestions: getSuggestions(value),
-    });
-  }
-
-  onSuggestionsClearRequested = () => {
-    this.setState({
-      suggestions: [],
-    });
-  }
-
-  render() {
-    const { value, suggestions } = this.state;
-
-    const inputProps = {
-      id: 'my-autosuggest',
-      name: 'my-autosuggest',
-      placeholder: 'Enter an office name',
-      value,
-      onChange: this.onChange,
-    };
-
-    return (
-      <div>
-        <BpkLabel htmlFor="my-autosuggest">Office</BpkLabel>
-        <BpkAutosuggest
-          suggestions={suggestions}
-          onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
-          onSuggestionsClearRequested={this.onSuggestionsClearRequested}
-          getSuggestionValue={getSuggestionValue}
-          renderSuggestion={renderSuggestion}
-          inputProps={inputProps}
-        />
-      </div>
-    );
-  }
-}
-```
-
-## Props
-
-*BpkAutosuggest:*
-
-[Please refer to `react-autosuggest`'s documentation for a full list of props](https://github.com/moroshko/react-autosuggest#props).
-
-**Note:** The `inputProps` object is passed directly to a [`BpkInput`](https://backpack.github.io/components/text-input?platform=web) component, so its prop types apply also.
-
-*BpkAutosuggestSuggestion:*
-
-| Property          | PropType             | Required | Default Value |
-| ----------------- | -------------------- | -------- | ------------- |
-| value             | string               | true     | -             |
-| subHeading        | string               | false    | null          |
-| tertiaryLabel     | string               | false    | null          |
-| icon              | func                 | false    | null          |
-| indent            | bool                 | false    | false         |
-| className         | string               | false    | null          |

package/bpk-component-autosuggest/package.json

@@ -1,29 +0,0 @@
-{
-  "name": "bpk-component-autosuggest",
-  "version": "6.1.16",
-  "description": "Backpack autosuggest 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": {
-    "bpk-component-input": "^6.1.16",
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
-    "prop-types": "^15.7.2",
-    "react-autosuggest": "^9.4.3"
-  },
-  "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
-  },
-  "devDependencies": {
-    "bpk-component-icon": "^9.2.12"
-  }
-}

package/bpk-component-autosuggest/src/BpkAutosuggest.module.scss

@@ -1,156 +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;
-
-$arrow-size: bpk-spacing-sm() * 3;
-
-.bpk-autosuggest {
-  &__container--open {
-    position: relative;
-  }
-
-  &__suggestions-container {
-    display: none;
-
-    &--open {
-      position: absolute;
-      top: 100%;
-      display: block;
-      z-index: $bpk-zindex-autosuggest;
-      width: 100%;
-      margin-top: bpk-spacing-md() + bpk-spacing-sm();
-
-      &::before {
-        position: absolute;
-        bottom: 100%;
-        left: 50%;
-        content: ' ';
-        display: block;
-        margin-bottom: -$bpk-one-pixel-rem;
-        margin-left: -((bpk-spacing-sm() * 3) + $bpk-one-pixel-rem);
-        border: ($arrow-size + $bpk-one-pixel-rem) solid transparent;
-        border-bottom-color: $bpk-color-sky-gray-tint-06;
-        pointer-events: none;
-      }
-
-      &::after {
-        position: absolute;
-        bottom: 100%;
-        left: 50%;
-        content: ' ';
-        display: block;
-        margin-bottom: -$bpk-one-pixel-rem;
-        margin-left: -(bpk-spacing-md() + bpk-spacing-sm());
-        border: $arrow-size solid transparent;
-        border-bottom-color: $bpk-autosuggest-list-background-color;
-        pointer-events: none;
-      }
-    }
-  }
-
-  &__suggestions-list {
-    min-width: fit-content;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    overflow: hidden;
-
-    @include bpk-layer;
-  }
-
-  &__suggestion-item {
-    cursor: pointer;
-
-    @include bpk-text;
-    @include bpk-body-default;
-
-    &:not(:last-child) {
-      @include bpk-border-bottom-sm($bpk-color-sky-gray-tint-06);
-    }
-
-    &:active {
-      background-color: $bpk-autosuggest-list-item-active-background-color;
-    }
-
-    &--highlighted {
-      background-color: $bpk-autosuggest-list-item-highlighted-background-color;
-    }
-  }
-
-  &__suggestion {
-    display: table;
-    width: 100%;
-    padding: bpk-spacing-base();
-
-    &--indent {
-      padding-left: bpk-spacing-xl();
-    }
-
-    &-icon {
-      display: table-cell;
-      margin-right: bpk-spacing-md();
-      vertical-align: top;
-      fill: $bpk-color-sky-gray-tint-02;
-
-      @include bpk-rtl {
-        margin-right: 0;
-        margin-left: bpk-spacing-md();
-      }
-    }
-
-    &-content {
-      display: table-cell;
-      width: 100%;
-      vertical-align: top;
-    }
-
-    &-inner {
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      justify-content: space-between;
-    }
-
-    &-value {
-      display: block;
-    }
-
-    &-sub-heading {
-      display: table-cell;
-      width: 100%;
-      vertical-align: top;
-
-      @include bpk-text;
-      @include bpk-caption;
-    }
-
-    &-tertiary-label {
-      display: table-cell;
-      align-self: center;
-      color: $bpk-color-sky-gray-tint-02;
-      vertical-align: top;
-      word-break: keep-all;
-
-      @include bpk-text;
-      @include bpk-caption;
-    }
-  }
-}

package/bpk-component-badge/README.md

@@ -1,39 +0,0 @@
-# bpk-component-badge
-
-> Backpack badge component.
-
-## Installation
-
-```sh
-npm install bpk-component-badge --save-dev
-```
-
-## Usage
-
-```js
-import React from 'react';
-import BpkBadge, { BADGE_TYPES } from 'bpk-component-badge';
-
-export default () => (
-  <BpkBadge
-    type={BADGE_TYPES.warning}
-  >
-    My Badge
-  </BpkBadge>
-);
-```
-
-## Props
-
-| Property  | PropType                                                                                                                             | Required | Default Value       |
-| --------- | -------------------------------------------------------------------------------------------------------------------------------------| -------- | ------------------- |
-| centered  | bool                                                                                                                                 | false    | null                |
-| className | string                                                                                                                               | false    | null                |
-| docked    | oneOf('left', 'right')                                                                                                               | false    | null                |
-| type      | oneOf(BADGE_TYPES.warning, BADGE_TYPES.success, BADGE_TYPES.destructive, BADGE_TYPES.light, BADGE_TYPES.inverse, BADGE_TYPES.outline)| false    | BADGE_TYPES.warning |
-
-## Theme props
-
-* `badgeBackgroundColor`
-* `badgeSuccessBackgroundColor`
-* `badgeDestructiveBackgroundColor`

package/bpk-component-badge/package.json

@@ -1,29 +0,0 @@
-{
-  "name": "bpk-component-badge",
-  "version": "4.1.12",
-  "description": "Backpack badge 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",
-    "prop-types": "^15.7.2"
-  },
-  "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
-  },
-  "devDependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-icon": "^9.2.12",
-    "bpk-storybook-utils": "^1.1.10"
-  }
-}