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

package/bpk-component-calendar/src/BpkCalendarDate.module.scss

@@ -1,164 +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-calendar-date {
-  width: $bpk-calendar-day-size;
-  height: $bpk-calendar-day-size;
-  padding: 0;
-  border: none;
-  border-radius: $bpk-border-radius-pill;
-  background-color: transparent;
-  font-size: $bpk-font-size-base;
-  text-align: center;
-  cursor: pointer;
-  appearance: none;
-  box-sizing: border-box;
-
-  @include bpk-themeable-property(
-    color,
-    --bpk-calendar-date-text-color,
-    $bpk-calendar-day-color
-  );
-
-  @include bpk-hover {
-    &:not(.bpk-calendar-date--selected) {
-      background-color: $bpk-calendar-day-hover-background-color;
-
-      @include bpk-themeable-property(
-        color,
-        --bpk-calendar-date-text-hover-color,
-        $bpk-calendar-day-hover-color
-      );
-    }
-  }
-
-  &--colored {
-    color: $bpk-color-white;
-
-    &-default {
-      background-color: $bpk-color-sky-gray-tint-02;
-    }
-
-    &-positive {
-      background-color: $bpk-color-monteverde;
-    }
-
-    &-neutral {
-      background-color: $bpk-color-erfoud;
-    }
-
-    &-negative {
-      background-color: $bpk-color-panjin;
-    }
-  }
-
-  &:not(.bpk-calendar-date--selected):active {
-    background-color: $bpk-calendar-day-active-background-color;
-
-    @include bpk-themeable-property(
-      color,
-      --bpk-calendar-date-text-active-color,
-      $bpk-calendar-day-active-color
-    );
-  }
-
-  &--outside {
-    background-color: transparent;
-    color: $bpk-calendar-day-outside-color;
-  }
-
-  &--today {
-    font-weight: bold;
-  }
-
-  &--selected {
-    font-weight: bold;
-    cursor: default;
-
-    @include bpk-themeable-property(
-      background-color,
-      --bpk-calendar-date-selected-background-color,
-      $bpk-calendar-day-selected-background-color
-    );
-    @include bpk-themeable-property(
-      color,
-      --bpk-calendar-date-text-selected-color,
-      $bpk-calendar-day-selected-color
-    );
-  }
-
-  &--middle {
-    background-color: $bpk-color-sky-blue-tint-03;
-    color: $bpk-color-sky-gray;
-  }
-
-  &--single {
-    background-color: $bpk-color-sky-blue;
-  }
-
-  &--start {
-    background-color: $bpk-color-sky-blue;
-  }
-
-  &--end {
-    background-color: $bpk-color-sky-blue;
-  }
-
-  &--focused:not(:disabled):not(.bpk-calendar-date--selected) {
-    &:not(.bpk-calendar-date--colored) {
-      box-shadow: 0 0 0 2px $bpk-calendar-day-focused-border-color inset;
-      box-shadow: 0 0 0 2px
-        var(
-          --bpk-calendar-date-focused-border-color,
-          $bpk-calendar-day-focused-border-color
-        )
-        inset;
-
-      @include bpk-themeable-property(
-        color,
-        --bpk-calendar-date-text-focus-color,
-        $bpk-calendar-day-focused-color
-      );
-    }
-
-    &.bpk-calendar-date--colored {
-      border: (bpk-spacing-sm() / 2) solid
-        $bpk-calendar-day-focused-border-color;
-      box-shadow: 0 0 0 1px $bpk-color-white inset;
-    }
-  }
-
-  &:disabled,
-  &--blocked {
-    background-color: transparent;
-    color: $bpk-calendar-day-disabled-color;
-    cursor: not-allowed;
-
-    @include bpk-hover {
-      color: $bpk-calendar-day-disabled-color;
-    }
-
-    &:active {
-      color: $bpk-calendar-day-disabled-color;
-    }
-  }
-}

package/bpk-component-calendar/src/BpkCalendarGrid.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';
-@import 'variables';
-
-.bpk-calendar-grid {
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-
-  &--animating {
-    z-index: 1;
-    transition: transform 0.2s ease-in-out;
-  }
-
-  &__caption {
-    @include bpk-visually-hidden;
-  }
-
-  &__date {
-    width: 100%;
-    text-align: center;
-
-    &--start {
-      background-image: linear-gradient(
-        to right,
-        $bpk-color-white 50%,
-        $bpk-color-sky-blue-tint-03 50%
-      );
-    }
-
-    &--middle {
-      background-color: $bpk-color-sky-blue-tint-03;
-    }
-
-    &--end {
-      background-image: linear-gradient(
-        to left,
-        $bpk-color-white 50%,
-        $bpk-color-sky-blue-tint-03 50%
-      );
-    }
-  }
-  &__week {
-    display: flex;
-    padding-top: bpk-spacing-lg();
-  }
-}

package/bpk-component-calendar/src/BpkCalendarGridHeader.module.scss

@@ -1,53 +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';
-@import 'variables';
-
-.bpk-calendar-header {
-  display: table;
-  width: 100%;
-  table-layout: fixed;
-
-  &--table-head {
-    display: none;
-  }
-
-  &__week {
-    display: table-row;
-    list-style: none;
-    text-align: center;
-
-    @include bpk-text;
-    @include bpk-caption;
-  }
-
-  &__weekday {
-    display: table-cell;
-    height: $bpk-calendar-day-size;
-    padding: 0 $bpk-calendar-day-spacing;
-    font-weight: normal;
-    box-shadow: $shadow-bottom;
-    vertical-align: middle;
-    box-sizing: content-box;
-
-    &--weekend {
-      font-weight: bold;
-    }
-  }
-}

package/bpk-component-calendar/src/BpkCalendarGridTransition.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';
-@import 'variables';
-
-.bpk-calendar-grid-transition {
-  position: relative;
-  overflow: hidden;
-
-  &__dummy {
-    display: inline-block;
-    width: $calendar-width;
-  }
-
-  &__strip {
-    left: 0;
-    display: block;
-    z-index: 0;
-    width: 3 * $calendar-width;
-
-    &--transitioning {
-      z-index: 1;
-      transition: transform $bpk-duration-sm ease-in-out;
-    }
-  }
-
-  &__grid {
-    display: inline-table;
-    width: $calendar-width;
-  }
-}

package/bpk-component-calendar/src/BpkCalendarNav.module.scss

@@ -1,89 +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';
-@import 'variables';
-
-.bpk-calendar-nav {
-  display: table;
-
-  &__month {
-    display: table-cell;
-    text-align: center;
-  }
-
-  &__nudger {
-    display: table-cell;
-    padding: 0 $bpk-calendar-day-spacing;
-    text-align: center;
-    vertical-align: middle;
-    box-sizing: border-box;
-  }
-
-  &__button {
-    width: 100%;
-    height: $bpk-select-height;
-    padding: $bpk-select-padding-top 0 $bpk-select-padding-bottom 0;
-    border: none;
-    background: none;
-    cursor: pointer;
-    appearance: none;
-
-    @include bpk-themeable-property(
-      color,
-      --bpk-calendar-nudger-icon-color,
-      $bpk-calendar-nav-icon-fill
-    );
-
-    @include bpk-hover {
-      @include bpk-themeable-property(
-        color,
-        --bpk-calendar-nudger-icon-hover-color,
-        $bpk-calendar-nav-icon-hover-fill
-      );
-    }
-
-    &:active {
-      @include bpk-themeable-property(
-        color,
-        --bpk-calendar-nudger-icon-active-color,
-        $bpk-calendar-nav-icon-active-fill
-      );
-    }
-
-    .bpk-calendar-nav__icon {
-      fill: currentColor;
-
-      @include bpk-icon--rtl-support;
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-
-      .bpk-calendar-nav__icon {
-        fill: $bpk-calendar-nav-icon-disabled-fill;
-      }
-    }
-  }
-
-  &__text {
-    &--hidden {
-      @include bpk-visually-hidden;
-    }
-  }
-}

package/bpk-component-calendar/src/_variables.scss

@@ -1,24 +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';
-
-$shadow-bottom: 0 1px 0 0 $bpk-color-sky-gray-tint-06; /* stylelint-disable-line unit-disallowed-list */
-$shadow-left: -1px 0 0 0 $bpk-color-sky-gray-tint-06; /* stylelint-disable-line unit-disallowed-list */
-$shadow-right: 1px 0 0 0 $bpk-color-sky-gray-tint-06; /* stylelint-disable-line unit-disallowed-list */
-$calendar-width: 7 * ($bpk-calendar-day-size + (2 * $bpk-calendar-day-spacing));

package/bpk-component-card/README.md

@@ -1,34 +0,0 @@
-# bpk-component-card
-
-> Backpack card component.
-
-## Installation
-
-```sh
-npm install bpk-component-card --save-dev
-```
-
-## Usage
-
-```js
-import React from 'react';
-import BpkCard from 'bpk-component-card';
-
-export default () => (
-  <BpkCard>
-    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
-    commodo ligula eget dolor. Aenean massa. Cum sociis natoque
-    penatibus et magnis dis parturient montes, nascetur ridiculus mus.
-  </BpkCard>
-);
-```
-
-## Props
-
-| Property  | PropType | Required | Default Value |
-| --------- | -------- | -------- | ------------- |
-| children  | -        | true     | -             |
-| className | string   | false    | null          |
-| href      | string   | false    | null          |
-| atomic    | bool     | false    | true          |
-| padded    | bool     | false    | true          |

package/bpk-component-card/package.json

@@ -1,28 +0,0 @@
-{
-  "name": "bpk-component-card",
-  "version": "4.1.12",
-  "description": "Backpack card 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"
-  },
-  "devDependencies": {
-    "bpk-component-link": "^3.1.11",
-    "bpk-component-text": "^7.0.5"
-  },
-  "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
-  }
-}

package/bpk-component-card/src/BpkCard.module.scss

@@ -1,27 +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-card {
-  @include bpk-card;
-
-  &--padded {
-    @include bpk-card--padded;
-  }
-}

package/bpk-component-checkbox/README.md

@@ -1,47 +0,0 @@
-# bpk-component-checkbox
-
-> Backpack checkbox component.
-
-## Installation
-
-```sh
-npm install bpk-component-checkbox --save-dev
-```
-
-## Usage
-
-```js
-import React from 'react';
-import BpkCheckbox from 'bpk-component-checkbox';
-
-export default () => (
-  <BpkCheckbox
-    name="prefer-directs"
-    onChange={() => console.log('prefer directs changed!')}
-    label="Prefer directs"
-    checked
-  />
-);
-```
-
-## Props
-
-| Property      | PropType | Required | Default Value |
-| ------------- | -------- | -------- | ------------- |
-| name          | string   | true     | -             |
-| label         | node     | true     | -             |
-| checked       | bool     | false    | false         |
-| disabled      | bool     | false    | false         |
-| indeterminate | bool     | false    | false         |
-| required      | bool     | false    | false         |
-| smallLabel    | bool     | false    | false         |
-| valid         | bool     | false    | null          |
-| white         | bool     | false    | false         |
-
-## `indeterminate` prop
-
-The indeterminate prop is only a visual clue, it does not affect the checked state of the checkbox. If `indeterminate` is flagged then the checkbox will be displayed with a minus sign in the box.  This is used when there is a checkbox group and the parent displays this state when not all child checkboxes are selected.
-
-## Theme Props
-
-+ `checkboxCheckedColor`

package/bpk-component-checkbox/package.json

@@ -1,29 +0,0 @@
-{
-  "name": "bpk-component-checkbox",
-  "version": "4.1.13",
-  "description": "Backpack checkbox 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-component-icon": "^9.2.12",
-    "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-checkbox/src/BpkCheckbox.module.scss

@@ -1,70 +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-checkbox {
-  @include bpk-checkbox;
-
-  &__label {
-    @include bpk-checkbox__label;
-
-    &--small {
-      @include bpk-checkbox__label--small;
-    }
-  }
-
-  &--white {
-    @include bpk-checkbox--white;
-  }
-
-  &--disabled {
-    @include bpk-checkbox--disabled;
-  }
-
-  &--invalid {
-    @include bpk-checkbox--invalid;
-  }
-
-  &__input {
-    @include bpk-checkbox__input;
-
-    &-indeterminate {
-      &::before {
-        position: absolute;
-        top: bpk-spacing-sm() + $bpk-one-pixel-rem;
-        left: bpk-spacing-sm() / 2;
-        content: '';
-        width: bpk-spacing-xxl() / 4;
-        height: bpk-spacing-sm() - $bpk-one-pixel-rem;
-        border-radius: $bpk-border-size-lg;
-        background-color: $bpk-color-white;
-      }
-    }
-
-    &-white {
-      background-color: $bpk-color-white;
-    }
-  }
-
-  &__asterisk {
-    color: $bpk-required-color;
-  }
-}