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

package/bpk-component-blockquote/README.md

@@ -1,32 +0,0 @@
-# bpk-component-blockquote
-
-> Backpack blockquote component.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```js
-import BpkBlockquote from '@skyscanner/backpack-web/bpk-component-blockquote';
-
-export default () => (
-  <BpkBlockquote extraSpace>
-    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.
-  </BpkBlockquote>
-);
-```
-
-## Props
-
-| Property    | PropType | Required | Default Value |
-| ----------- | -------- | -------- | ------------- |
-| children    | -        | true     | -             |
-| extraSpace  | bool     | false    | false         |
-
-## Theme Props
-
-* `blockquoteBarColor`

package/bpk-component-blockquote/src/BpkBlockquote.module.scss

@@ -1,29 +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-blockquote {
-  @include bpk-blockquote;
-}
-
-.bpk-blockquote--extra-spacing {
-  @include bpk-blockquote--extra-spacing;
-}

package/bpk-component-breadcrumb/README.md

@@ -1,56 +0,0 @@
-# bpk-component-breadcrumb
-
-> Backpack breadcrumb component.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-```js
-import { Component } from 'react';
-import BpkBreadcrumb, { BpkBreadcrumbItem } from '@skyscanner/backpack-web/bpk-component-breadcrumb';
-
-
-export default class App extends Component {
-  render() {
-    return (
-      <BpkBreadcrumb label="breadcrumb">
-        <BpkBreadcrumbItem href="/">Home</BpkBreadcrumbItem>
-        <BpkBreadcrumbItem href="/page-1">Page 1</BpkBreadcrumbItem>
-        <BpkBreadcrumbItem active>
-          Page 2
-        </BpkBreadcrumbItem>
-      </BpkBreadcrumb>
-    );
-  }
-}
-
-```
-
-## Structured Data
-
-[JSON-LD](https://json-ld.org/) schema mark up can be used to
-add [structured data](https://developers.google.com/search/docs/guides/intro-structured-data)
-to the component to improve the SEO of the component through the `schemaMetaData` property.
-
-## Props
-
-### BpkBreadcrumb
-
-| Property           | PropType                             | Required | Default Value |
-| ------------------ | ------------------------------------ | -------- | ------------- |
-| children           | node                                 | true     | -             |
-| label              | string                               | true     | -             |
-| schemaMetaData     | array({url: string, label: string})  | false    | null          |
-
-
-
-### BpkBreadcrumbItem
-
-| Property           | PropType                   | Required | Default Value |
-| ------------------ | -------------------------- | -------- | ------------- |
-| children           | node                       | true     | -             |
-| href               | string                     | false    | null          |
-| active             | bool                       | false    | false         |
-| linkProps          | object                     | false    | null          |

package/bpk-component-breadcrumb/src/BpkBreadcrumb.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.scss';
-
-.bpk-breadcrumb {
-  display: flex;
-  margin: 0;
-  padding: 0;
-  flex-wrap: wrap;
-  list-style-type: none;
-}

package/bpk-component-breadcrumb/src/BpkBreadcrumbItem.module.scss

@@ -1,40 +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-breadcrumb-item {
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-
-  &__link {
-    @include bpk-text;
-  }
-
-  &__active-item {
-    color: $bpk-text-secondary-day;
-  }
-
-  &__arrow {
-    margin: 0 bpk-spacing-sm();
-    fill: $bpk-text-disabled-day;
-  }
-}

package/bpk-component-breakpoint/README.md

@@ -1,31 +0,0 @@
-# bpk-component-breakpoint
-
-> Backpack breakpoint component.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```js
-import BpkBreakpoint, { BREAKPOINTS } from '@skyscanner/backpack-web/bpk-component-breakpoint';
-
-export default () => (
-  <BpkBreakpoint query={BREAKPOINTS.MOBILE}>
-    {isActive => (isActive ? <span>Mobile viewport is active</span> : <span>Mobile viewport is inactive</span>)}
-  </BpkBreakpoint>
-
-  <BpkBreakpoint query={BREAKPOINTS.TABLET}>
-    <span>Tablet viewport is active</span>
-  </BpkBreakpoint>
-);
-```
-
-## Props
-
-| Property  | PropType               | Required | Default Value |
-| --------- | ---------------------- | -------- | ------------- |
-| children  | oneOfType(node, func)  | true     | -             |
-| query     | oneOf(BREAKPOINTS)     | true     | -             |
-| legacy    | bool                   | false    | false         |

package/bpk-component-button/README.md

@@ -1,135 +0,0 @@
-# bpk-component-button
-
-> Backpack button component.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```js
-import { withButtonAlignment, withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';
-import ArrowIcon from '@skyscanner/backpack-web/bpk-component-icon/sm/long-arrow-right';
-import BpkButton from '@skyscanner/backpack-web/bpk-component-button';
-
-const AlignedArrowIcon = withButtonAlignment(withRtlSupport(ArrowIcon));
-
-export default () => (
-  <div>
-    <BpkButton>Primary</BpkButton>
-    <BpkButton large>Large primary</BpkButton>
-    <BpkButton secondary>Secondary</BpkButton>
-    <BpkButton secondaryOnDark>SecondaryOnDark</BpkButton>
-    <BpkButton link>Link</BpkButton>
-    <BpkButton linkOnDark>LinkOnDark</BpkButton>
-    <BpkButton primaryOnDark>PrimaryOnDark</BpkButton>
-    <BpkButton primaryOnLight>PrimaryOnLight</BpkButton>
-    <BpkButton iconOnly>
-      <AlignedArrowIcon />
-      <span className="visually-hidden">Search</span>
-    </BpkButton>
-  </div>
-);
-```
-
-## Props
-
-| Property        | PropType             | Required | Default Value |
-| --------------- | -------------------- | -------- | ------------- |
-| children        | -                    | true     | -             |
-| destructive     | bool                 | false    | false         |
-| featured        | bool                 | false    | false         |
-| link            | bool                 | false    | false         |
-| linkOnDark      | bool                 | false    | false         |
-| secondary       | bool                 | false    | false         |
-| secondaryOnDark | bool                 | false    | false         |
-| primaryOnDark   | bool                 | false    | false         |
-| primaryOnLight  | bool                 | false    | false         |
-| blank           | bool                 | false    | false         |
-| className       | string               | false    | null          |
-| disabled        | bool                 | false    | false         |
-| href            | string               | false    | null          |
-| iconOnly        | bool                 | false    | false         |
-| large           | bool                 | false    | false         |
-| onClick         | func                 | false    | null          |
-| rel             | string               | false    | null          |
-| submit          | bool                 | false    | false         |
-
-## Theme Props
-
-### Primary:
-
-* `buttonPrimaryTextColor`
-* `buttonPrimaryHoverTextColor`
-* `buttonPrimaryActiveTextColor`
-* `buttonPrimaryGradientStartColor`
-* `buttonPrimaryGradientEndColor`
-* `buttonPrimaryBackgroundColor`
-* `buttonPrimaryHoverBackgroundColor`
-* `buttonPrimaryActiveBackgroundColor`
-
-### Primary on dark:
-
-* `buttonPrimaryOnDarkTextColor`
-* `buttonPrimaryOnDarkHoverTextColor`
-* `buttonPrimaryOnDarkActiveTextColor`
-* `buttonPrimaryOnDarkBackgroundColor`
-* `buttonPrimaryOnDarkHoverBackgroundColor`
-* `buttonPrimaryOnDarkActiveBackgroundColor`
-
-### Primary on light:
-
-* `buttonPrimaryOnLightTextColor`
-* `buttonPrimaryOnLightHoverTextColor`
-* `buttonPrimaryOnLightActiveTextColor`
-* `buttonPrimaryOnLightBackgroundColor`
-* `buttonPrimaryOnLightHoverBackgroundColor`
-* `buttonPrimaryOnLightActiveBackgroundColor`
-
-### Secondary:
-
-* `buttonSecondaryTextColor`
-* `buttonSecondaryHoverTextColor`
-* `buttonSecondaryActiveTextColor`
-* `buttonSecondaryBorderColor`
-* `buttonSecondaryHoverBorderColor`
-* `buttonSecondaryActiveBorderColor`
-* `buttonSecondaryBackgroundColor`
-* `buttonSecondaryHoverBackgroundColor`
-* `buttonSecondaryActiveBackgroundColor`
-
-### Secondary on dark:
-
-* `buttonSecondaryOnDarkTextColor`
-* `buttonSecondaryOnDarkHoverTextColor`
-* `buttonSecondaryOnDarkActiveTextColor`
-* `buttonSecondaryOnDarkBackgroundColor`
-* `buttonSecondaryOnDarkHoverBackgroundColor`
-* `buttonSecondaryOnDarkActiveBackgroundColor`
-
-### Featured:
-
-* `buttonFeaturedTextColor`
-* `buttonFeaturedHoverTextColor`
-* `buttonFeaturedActiveTextColor`
-* `buttonFeaturedGradientStartColor`
-* `buttonFeaturedGradientEndColor`
-* `buttonFeaturedBackgroundColor`
-* `buttonFeaturedHoverBackgroundColor`
-* `buttonFeaturedActiveBackgroundColor`
-
-### Destructive:
-
-* `buttonDestructiveTextColor`
-* `buttonDestructiveHoverTextColor`
-* `buttonDestructiveActiveTextColor`
-* `buttonDestructiveBorderColor`
-* `buttonDestructiveHoverBorderColor`
-* `buttonDestructiveActiveBorderColor`
-* `buttonDestructiveBackgroundColor`
-* `buttonDestructiveHoverBackgroundColor`
-* `buttonDestructiveActiveBackgroundColor`
-
-### All button types:
-* `buttonFontSize` (Optional)

package/bpk-component-button/src/BpkButtonBase.module.scss

@@ -1,50 +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.
- */
-
-/* @flow strict */
-
-@import '~bpk-mixins/index.scss';
-
-.bpk-button {
-  @include bpk-button;
-
-  &--large {
-    @include bpk-button--large;
-  }
-
-  &--icon-only {
-    border-radius: $bpk-button-border-radius;
-
-    @include bpk-button--icon-only;
-  }
-
-  &--large-icon-only {
-    border-radius: $bpk-button-border-radius;
-
-    @include bpk-button--large-icon-only;
-  }
-
-  /* stylelint-disable selector-max-compound-selectors */
-  span > svg {
-    display: block;
-  }
-
-  svg {
-    fill: currentcolor;
-  }
-}

package/bpk-component-button/src/BpkButtonDestructive.module.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.scss';
-
-.bpk-button--destructive {
-  @include bpk-button--secondary;
-  @include bpk-button--destructive;
-}

package/bpk-component-button/src/BpkButtonFeatured.module.scss

@@ -1,23 +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-button--featured {
-  @include bpk-button--featured;
-}

package/bpk-component-button/src/BpkButtonLink.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-button {
-  &--link {
-    @include bpk-button--link;
-  }
-}

package/bpk-component-button/src/BpkButtonLinkOnDark.module.scss

@@ -1,23 +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-button--link-on-dark {
-  @include bpk-button--link-on-dark;
-}

package/bpk-component-button/src/BpkButtonPrimaryOnDark.module.scss

@@ -1,23 +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-button--primary-on-dark {
-  @include bpk-button--primary-on-dark;
-}

package/bpk-component-button/src/BpkButtonPrimaryOnLight.module.scss

@@ -1,23 +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-button--primary-on-light {
-  @include bpk-button--primary-on-light;
-}

package/bpk-component-button/src/BpkButtonSecondary.module.scss

@@ -1,23 +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-button--secondary {
-  @include bpk-button--secondary;
-}

package/bpk-component-button/src/BpkButtonSecondaryOnDark.module.scss

@@ -1,23 +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-button--secondary-on-dark {
-  @include bpk-button--secondary-on-dark;
-}

package/bpk-component-calendar/DOCS.md

@@ -1,23 +0,0 @@
-Default export is `BpkCalendarContainer` - This provides an out of the box calendar.
-
-HOCs -
-
-  - `withCalendarState` default export creates calendar using all our exports to construct component - which keeps track of the calendar state. In theory a custom state manager could be used for the calendar but would require a lot more effort to create and maintain from a consumer perspective.
-
-  - `composeCalendar` - takes 4 input components that can be customised outside of the default exports for custom calendar implementations. Which will then construct a calendar based on the inputs provided or exclude them if they are not passed.
-    - `BpkCalendarNav`, `BpkCalenderGridHeader` - are optional components for rendering the calendar
-    - `BpkCalendarGrid`, `BpkCalendarDate` - are required for creating the calendar component but can be customised to design requirements.
-
-  - `addCalendarGridTransition` - transitions the weeks grid when changing months, this works by hiding the current month and moving the next or previous month into view.
-
-Calendar components -
-
-  - `BpkCalendarNav` - component used to change the month that is being displayed by using buttons and a select box at the top of the component.
-
-  - `BpkCalendarGrid` - is a table that creates the main calender and provides hidden headings for screen readers - consists of:
-
-    - `BpkCalendarGridHeader` - Is used to display a list of weekday (Sun - Sat) as the headings of the table that is independent from the dates so that it is fixed whilst transitioning through each month view in the calendar.
-
-    - `Week` - This is a container that will take the `DateComponent` to display each of the dates in the calendar
-
-  - `BpkCalendarDate` - is each date cell that would be displayed inside the calendar grid. This would be used to customise how each date cell is displayed e.g. coloured or with special pricing displayed.