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

package/bpk-component-text/src/BpkText.module.scss

@@ -1,139 +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-text {
-  @include bpk-text;
-
-  &--xs {
-    @include bpk-text--xs;
-  }
-
-  &--sm {
-    @include bpk-text--sm;
-  }
-
-  &--base {
-    @include bpk-text--base;
-  }
-
-  &--lg {
-    @include bpk-text--lg;
-  }
-
-  &--xl {
-    @include bpk-text--xl;
-  }
-
-  &--xxl {
-    @include bpk-text--xxl;
-  }
-
-  &--xxxl {
-    @include bpk-text--xxxl;
-  }
-
-  &--xxxxl {
-    @include bpk-text--xxxxl;
-  }
-
-  &--xxxxxl {
-    @include bpk-text--xxxxxl;
-  }
-
-  &--caption {
-    @include bpk-caption;
-  }
-
-  &--footnote {
-    @include bpk-footnote;
-  }
-
-  &--label-1 {
-    @include bpk-label-1;
-  }
-
-  &--label-2 {
-    @include bpk-label-2;
-  }
-
-  &--label-3 {
-    @include bpk-label-3;
-  }
-
-  &--body-default {
-    @include bpk-body-default;
-  }
-
-  &--body-longform {
-    @include bpk-body-longform;
-  }
-
-  &--subheading {
-    @include bpk-subheading;
-  }
-
-  &--heading-1 {
-    @include bpk-heading-1;
-  }
-
-  &--heading-2 {
-    @include bpk-heading-2;
-  }
-
-  &--heading-3 {
-    @include bpk-heading-3;
-  }
-
-  &--heading-4 {
-    @include bpk-heading-4;
-  }
-
-  &--heading-5 {
-    @include bpk-heading-5;
-  }
-
-  &--hero-1 {
-    @include bpk-hero-1;
-  }
-
-  &--hero-2 {
-    @include bpk-hero-2;
-  }
-
-  &--hero-3 {
-    @include bpk-hero-3;
-  }
-
-  &--hero-4 {
-    @include bpk-hero-4;
-  }
-
-  &--hero-5 {
-    @include bpk-hero-5;
-  }
-
-  &--bold {
-    @include bpk-text--bold;
-  }
-
-  &--black {
-    @include bpk-text--black;
-  }
-}

package/bpk-component-textarea/README.md

@@ -1,31 +0,0 @@
-# bpk-component-textarea
-
-> Backpack textarea component.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```js
-import BpkTextarea from '@skyscanner/backpack-web/bpk-component-textarea';
-
-export default () => (
-  <BpkTextarea
-    id="textarea"
-    name="textarea"
-    value="Lorem ipsum dolor sit amet, consectetur adipisicing elit."
-  />
-);
-```
-
-## Props
-
-| Property     | PropType             | Required  | Default Value    |
-| ------------ | -------------------- | --------- | ---------------- |
-| id           | string               | true      | -                |
-| name         | string               | true      | -                |
-| value        | string               | true      | -                |
-| valid        | bool                 | false     | null             |
-| large        | bool                 | false     | false            |

package/bpk-component-textarea/src/BpkTextarea.module.scss

@@ -1,33 +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-textarea {
-  @include bpk-textarea;
-
-  &--invalid {
-    @include bpk-textarea--invalid;
-  }
-
-  &--large {
-    @include bpk-textarea--large;
-  }
-}

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

@@ -1,26 +0,0 @@
-# bpk-component-theme-toggle
-
-> Backpack Theme Switcher component.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```js
-import BpkThemeToggle from '@skyscanner/backpack-web/bpk-component-theme-toggle';
-
-export default () => (
-  <BpkThemeToggle />
-);
-```
-
-## HOC usage
-
-```js
-import { updateOnThemeChange } from '@skyscanner/backpack-web/bpk-component-theme-toggle';
-import BpkThemeProvider from '@skyscanner/backpack-web/bpk-theming';
-
-const EnhancedThemeProvider = updateOnThemeChange(BpkThemeProvider);
-```

package/bpk-component-theme-toggle/src/BpkThemeToggle.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.scss';
-
-.bpk-theme-toggle {
-  &__label {
-    @include bpk-visually-hidden;
-  }
-}

package/bpk-component-ticket/README.md

@@ -1,34 +0,0 @@
-# bpk-component-ticket
-
-> Backpack ticket component.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```js
-import BpkTicket from '@skyscanner/backpack-web/bpk-component-ticket';
-
-export default () => (
-  <BpkTicket stub="Lorem ipsum dolor sit amet.">
-    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.
-  </BpkTicket>
-);
-```
-
-## Props
-
-| Property      | PropType | Required | Default Value |
-| ------------- | -------- | -------- | ------------- |
-| children      | node     | true     | -             |
-| stub          | node     | true     | -             |
-| href          | string   | false    | null          |
-| padded        | bool     | false    | true          |
-| vertical      | bool     | false    | false         |
-| stubProps     | object   | false    | {}            |
-| stubClassName | string   | false    | null          |
-

package/bpk-component-ticket/src/BpkTicket.module.scss

@@ -1,144 +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;
-
-@mixin hidden-box-shadow-after {
-  z-index: 0;
-
-  &::after {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    content: '';
-    display: block;
-    z-index: -1;
-    transition: opacity 200ms ease-in-out;
-    border-radius: inherit;
-    box-shadow: $bpk-box-shadow-sm;
-    opacity: 0;
-    pointer-events: none; // To prevent the pseudo element absorbing click events
-  }
-}
-
-.bpk-ticket {
-  $ticket-padding: bpk-spacing-base();
-
-  position: relative;
-  display: block;
-  display: flex;
-  flex-direction: row;
-  align-items: stretch;
-  flex: none;
-  color: $bpk-text-primary-day;
-  text-decoration: none;
-  box-shadow: $bpk-box-shadow-sm;
-  cursor: pointer;
-
-  @include bpk-border-radius-md;
-  @include hidden-box-shadow-after;
-
-  @include bpk-hover {
-    &::after {
-      opacity: 1;
-    }
-
-    .bpk-ticket__paper::after {
-      opacity: 1;
-    }
-  }
-
-  &--vertical {
-    flex-direction: column;
-  }
-
-  &__paper {
-    position: relative;
-    background-color: $bpk-card-background-color;
-  }
-
-  @mixin main-styles {
-    &--horizontal {
-      border-radius: $bpk-border-radius-md 0 0 $bpk-border-radius-md;
-
-      @include bpk-rtl {
-        border-radius: 0 $bpk-border-radius-md $bpk-border-radius-md 0;
-      }
-    }
-
-    &--vertical {
-      border-radius: $bpk-border-radius-md $bpk-border-radius-md 0 0;
-    }
-  }
-
-  &__main {
-    flex: 2 1 auto;
-
-    @include main-styles;
-
-    &--padded {
-      padding: $ticket-padding;
-    }
-  }
-
-  &__main-inner {
-    height: 100%;
-    overflow: hidden;
-
-    @include main-styles;
-  }
-
-  @mixin stub-styles {
-    &--horizontal {
-      min-width: 30%;
-      border-radius: 0 $bpk-border-radius-md $bpk-border-radius-md 0;
-      box-shadow: inset $bpk-one-pixel-rem 0 0 $bpk-line-day;
-
-      @include bpk-rtl {
-        border-radius: $bpk-border-radius-md 0 0 $bpk-border-radius-md;
-        box-shadow: inset (-$bpk-one-pixel-rem) 0 0 $bpk-line-day;
-      }
-    }
-
-    &--vertical {
-      border-radius: 0 0 $bpk-border-radius-md $bpk-border-radius-md;
-      box-shadow: inset 0 $bpk-one-pixel-rem 0 $bpk-line-day;
-    }
-  }
-
-  &__stub {
-    flex: 1 1 auto;
-
-    @include stub-styles;
-
-    &--padded {
-      padding: $ticket-padding;
-    }
-  }
-
-  &__stub-inner {
-    height: 100%;
-    overflow: hidden;
-
-    @include stub-styles;
-  }
-}

package/bpk-component-tooltip/README.md

@@ -1,65 +0,0 @@
-# bpk-component-tooltip
-
-> Backpack tooltip component.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```js
-import { useRef } from 'react';
-import BpkText from '@skyscanner/backpack-web/bpk-component-text';
-import BpkTooltip from '@skyscanner/backpack-web/bpk-component-tooltip';
-
-const App = () => (
-  const targetRef = useRef(null);
-  const target = (
-    <div ref={targetRef} className={'my-tooltip-target'}>
-      <BpkText textStyle="lg">LHR</BpkText>
-    </div>
-  );
-
-  <BpkTooltip
-    ariaLabel="London Heathrow"
-    id="my-tooltip"
-    target={target}
-  >
-    London Heathrow
-  </BpkTooltip>
-);
-```
-
-## Props
-
-| Property              | PropType                                       | Required | Default Value       |
-| --------------------- | ---------------------------------------------- | -------- | ------------------- |
-| ariaLabel             | string                                         | true     | -                   |
-| id                    | string                                         | true     | -                   |
-| children              | node                                           | true     | -                   |
-| target                | node                                           | true     | -                   |
-| hideOnTouchDevices    | bool                                           | false    | true                |
-| placement             | oneOf(['top', 'right', 'bottom', 'left'])      | false    | 'bottom'            |
-| padded                | bool                                           | false    | true                |
-| portalStyle           | object                                         | false    | null                |
-| portalClassName       | string                                         | false    | null                |
-| popperModifiers       | arrayOf(object)                                | false    | null                |
-| renderTarget          | func                                           | false    | null                |
-| type                  | oneOf(`TOOLTIP_TYPES.light`, `TOOLTIP_TYPES.dark`) | false    | `TOOLTIP_TYPES.light` |
-
-### Prop Details
-
-#### `ariaLabel`
-
-Tooltips are invisible to assistive technologies such as screen readers. To improve accessibility, `ariaLabel` is required to describe the content of the tooltip to assistive technologies.
-
-The label will be used on the `target` element, so any existing `aria-label` attached to `target` will be overridden.
-
-#### `popperModifiers`
-
-Please refer to the [documentation](https://popper.js.org/docs/v2/modifiers/) for the underlying positioning library "Popper.js". You can achieve various behaviours such as allowing the tooltip to overflow the viewport etc.
-
-#### target
-
-`target` should be a DOM element with a `ref` attached to it.

package/bpk-component-tooltip/src/BpkTooltip.module.scss

@@ -1,149 +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;
-$arrow-size: bpk-spacing-md();
-$arrow-inset-margin: -($bpk-one-pixel-rem * 3);
-$light-arrow-border-color: $bpk-line-day;
-$dark-background-color: $bpk-surface-contrast-day;
-
-.bpk-tooltip-portal {
-  z-index: $bpk-zindex-tooltip;
-
-  &--target {
-    display: inline-block;
-  }
-}
-
-.bpk-tooltip {
-  transition: opacity $bpk-duration-sm ease-in-out,
-    transform $bpk-duration-sm ease-in-out;
-  outline: 0;
-  opacity: 1;
-
-  &--appear {
-    opacity: 0;
-
-    .bpk-tooltip-portal[data-popper-placement='top']
-      &:not(.bpk-tooltip--appear-active) {
-      transform: translate(0, -1rem);
-      transition: none;
-    }
-
-    .bpk-tooltip-portal[data-popper-placement='right']
-      &:not(.bpk-tooltip--appear-active) {
-      transform: translate(1rem, 0);
-      transition: none;
-    }
-
-    .bpk-tooltip-portal[data-popper-placement='bottom']
-      &:not(.bpk-tooltip--appear-active) {
-      transform: translate(0, 1rem);
-      transition: none;
-    }
-
-    .bpk-tooltip-portal[data-popper-placement='left']
-      &:not(.bpk-tooltip--appear-active) {
-      transform: translate(-1rem, 0);
-      transition: none;
-    }
-  }
-
-  &--appear-active {
-    transform: translate(0, 0);
-    transition: opacity $bpk-duration-sm ease-in-out,
-      transform $bpk-duration-sm ease-in-out;
-    opacity: 1;
-  }
-
-  &__arrow {
-    position: aboslute;
-    width: $arrow-size;
-    height: $arrow-size;
-    transform: rotate(45deg);
-    border: $bpk-one-pixel-rem solid transparent;
-    background: inherit;
-    background-color: $bpk-surface-default-day;
-
-    .bpk-tooltip-portal[data-popper-placement='top'] & {
-      bottom: $arrow-inset-margin;
-      border-right-color: $light-arrow-border-color;
-      border-bottom-color: $light-arrow-border-color;
-    }
-
-    .bpk-tooltip-portal[data-popper-placement='right'] & {
-      left: $arrow-inset-margin;
-      border-bottom-color: $light-arrow-border-color;
-      border-left-color: $light-arrow-border-color;
-    }
-
-    .bpk-tooltip-portal[data-popper-placement='bottom'] & {
-      top: $arrow-inset-margin;
-      border-top-color: $light-arrow-border-color;
-      border-left-color: $light-arrow-border-color;
-    }
-
-    .bpk-tooltip-portal[data-popper-placement='left'] & {
-      right: $arrow-inset-margin;
-      border-top-color: $light-arrow-border-color;
-      border-right-color: $light-arrow-border-color;
-    }
-
-    &--dark {
-      background-color: $dark-background-color;
-
-      .bpk-tooltip-portal[data-popper-placement='top'] & {
-        border-right-color: $dark-background-color;
-        border-bottom-color: $dark-background-color;
-      }
-
-      .bpk-tooltip-portal[data-popper-placement='right'] & {
-        border-bottom-color: $dark-background-color;
-        border-left-color: $dark-background-color;
-      }
-
-      .bpk-tooltip-portal[data-popper-placement='bottom'] & {
-        border-top-color: $dark-background-color;
-        border-left-color: $dark-background-color;
-      }
-
-      .bpk-tooltip-portal[data-popper-placement='left'] & {
-        border-top-color: $dark-background-color;
-        border-right-color: $dark-background-color;
-      }
-    }
-  }
-
-  &__inner {
-    overflow: hidden;
-
-    @include bpk-layer;
-
-    &--padded {
-      padding: bpk-spacing-md() bpk-spacing-base();
-    }
-
-    &--dark {
-      color: $bpk-text-primary-inverse-day;
-
-      @include bpk-layer($dark-background-color, $dark-background-color);
-    }
-  }
-}