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

package/bpk-component-datatable/src/BpkDataTable.module.scss

@@ -1,92 +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-border-size-datatable: $bpk-border-size-xl * 2;
-
-@mixin bpk-datatable-border-left() {
-  @include _bpk-border-left(
-    $bpk-border-size-datatable,
-    $bpk-color-sky-blue,
-    inset
-  );
-}
-
-@mixin bpk-datatable-border-right() {
-  @include _bpk-border-right(
-    $bpk-border-size-datatable,
-    $bpk-color-sky-blue,
-    inset
-  );
-}
-
-.bpk-data-table {
-  width: 100%;
-
-  &__header-column {
-    display: flex;
-    height: 100%;
-    margin: bpk-spacing-base();
-    flex-direction: row;
-    align-items: center;
-    outline-offset: -(4 * $bpk-one-pixel-rem);
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-
-  &__row {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    border: $bpk-border-size-sm solid $bpk-color-sky-gray-tint-07;
-    border-bottom: none;
-    outline-offset: -(4 * $bpk-one-pixel-rem);
-    color: $bpk-color-sky-gray-tint-01;
-    font-weight: normal;
-
-    &:last-child {
-      border-bottom: $bpk-border-size-sm solid $bpk-color-sky-gray-tint-07;
-    }
-
-    &--clickable:not(.bpk-data-table__header-row):hover {
-      background-color: $bpk-color-sky-gray-tint-07;
-      cursor: pointer;
-
-      @include bpk-datatable-border-left;
-
-      @include bpk-rtl {
-        @include bpk-datatable-border-right;
-      }
-    }
-
-    &--selected {
-      background-color: $bpk-color-sky-gray-tint-06;
-
-      @include bpk-datatable-border-left;
-
-      @include bpk-rtl {
-        @include bpk-datatable-border-right;
-      }
-    }
-  }
-}

package/bpk-component-datatable/src/BpkDataTableColumn.module.scss

@@ -1,65 +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-margin-size-sort-icons: bpk-spacing-sm() + bpk-spacing-md();
-
-.bpk-data-table-column {
-  margin: bpk-spacing-base();
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.bpk-data-table-column__header {
-  display: inline-block;
-  max-width: 100%;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.bpk-data-table-column__sort-icons {
-  margin: 0 0 0 $bpk-margin-size-sort-icons;
-
-  @include bpk-rtl {
-    margin: 0 $bpk-margin-size-sort-icons 0 0;
-  }
-}
-
-.bpk-data-table-column__sort-icon {
-  display: block;
-  fill: $bpk-color-sky-gray-tint-04;
-
-  &:hover {
-    fill: $bpk-color-sky-gray-tint-02;
-  }
-
-  &--selected {
-    &,
-    &:hover {
-      fill: $bpk-color-sky-blue-shade-01;
-    }
-  }
-}
-
-.bpk-data-table-column__sort-icon--up {
-  margin-bottom: -(bpk-spacing-sm());
-}

package/bpk-component-datepicker/README.md

@@ -1,177 +0,0 @@
-# bpk-component-datepicker
-
-> Backpack datepicker component.
-
-## Installation
-
-```sh
-npm install bpk-component-datepicker --save-dev
-```
-
-## Usage
-
-```js
-import React, { Component } from 'react';
-import BpkDatepicker, { CALENDAR_SELECTION_TYPE } from 'bpk-component-datepicker';
-import format from 'date-fns/format';
-
-const formatDate = date => format(date, 'dd/MM/yyyy');
-const formatDateFull = date => format(date, '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 (
-      <BpkDatepicker
-        id="datepicker"
-        daysOfWeek={daysOfWeek}
-        weekStartsOn={1}
-        changeMonthLabel="Change month"
-        closeButtonText="Close"
-        title="Departure date"
-        getApplicationElement={() => document.getElementById('pagewrap')}
-        formatDate={formatDate}
-        formatMonth={formatMonth}
-        formatDateFull={formatDateFull}
-        onDateSelect={this.handleDateSelect}
-        selectionConfiguration={this.state.selectionConfiguration}
-      />
-    );
-  }
-}
-```
-
-By default `BpkCalendar` is used but the calendar component is fully configurable through the `calendarComponent` prop.
-
-```js
-import React, { Component } from 'react';
-import BpkDatepicker from 'bpk-component-datepicker';
-import {
-  BpkCalendarNav,
-  BpkCalendarGridHeader,
-  BpkCalendarGridWithTransition,
-  BpkCalendarDate,
-  withCalendarState,
-  composeCalendar,
-} from 'bpk-component-calendar';
-import { colorSagano } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-
-const ColoredCalendarDate = props =>
-  <BpkCalendarDate {...props} style={{ backgroundColor: colorSagano }} />;
-
-const CalendarWithColoredDates = withCalendarState(
-  composeCalendar(
-    BpkCalendarNav,
-    BpkCalendarGridHeader,
-    BpkCalendarGridWithTransition,
-    ColoredCalendarDate,
-  ),
-);
-
-const CustomPicker = () => (
-  <BpkDatepicker
-    id="datepicker"
-    calendarComponent={CalendarWithColoredDates}
-    daysOfWeek={daysOfWeek}
-    weekStartsOn={1}
-    changeMonthLabel="Change month"
-    closeButtonText="Close"
-    title="Departure date"
-    getApplicationElement={() => document.getElementById('pagewrap')}
-    formatDate={formatDate}
-    formatMonth={formatMonth}
-    formatDateFull={formatDateFull}
-    onDateSelect={this.handleDateSelect}
-    selectionConfiguration={this.state.selectionConfiguration}
-  />
-);
-```
-
-> **Theming:** In order to theme the modal, a `renderTarget` needs to be supplied as a function which returns a DOM node
-> in the scope of a `BpkThemeProvider`.
-
-## Props
-
-For more information on some these props, check the BpkCalendar documentation.
-
-> **Note:** Because this component uses a modal on mobile viewports, you need to let it know what
-> the root element of your application is by returning it's DOM node via the function passed to the
-> `getApplicationElement` prop (see the example above) - this is to "hide" your application from
-> screen readers whilst the datepicker is open. The `pagewrap` element id is a convention we use internally at Skyscanner. In most cases it should "just work".
-
-| Property              | PropType              | Required | Default Value                       |
-| --------------------- | --------------------- | -------- | ----------------------------------- |
-| changeMonthLabel      | string                | true     | -                                   |
-| closeButtonText       | string                | true     | -                                   |
-| title                 | string                | true     | -                                   |
-| id                    | string                | true     | -                                   |
-| getApplicationElement | func                  | true     | -                                   |
-| daysOfWeek            | arrayOf(object)       | true     | -                                   |
-| weekStartsOn          | number                | true     | -                                   |
-| formatDate            | func                  | true     | -                                   |
-| formatDateFull        | func                  | true     | -                                   |
-| formatMonth           | func                  | true     | -                                   |
-| calendarComponent     | elementType           | false    | BpkCalendar                         |
-| inputComponent        | elementType           | false    | BpkInput                            |
-| dateModifiers         | object                | false    | {} (\*)                             |
-| fixedWidth            | bool                  | false    | true                                |
-| inputProps            | object                | false    | {}                                  |
-| markOutsideDays       | bool                  | false    | true (\*)                           |
-| markToday             | bool                  | false    | true (\*)                           |
-| maxDate               | Date                  | false    | new Date() + 1 year (\*)            |
-| minDate               | Date                  | false    | new Date() (\*)                     |
-| onDateSelect          | func                  | false    | null                                |
-| initiallyFocusedDate  | Date                  | false    | null                                |
-| renderTarget          | func                  | false    | null                                |
-| isOpen                | bool                  | false    | false                               |
-| onOpenChange          | func                  | false    | null                                |
-| valid                 | bool                  | false    | null                                |
-| selectionConfiguration| object               | false               | { type: CALENDAR_SELECTION_TYPE.single, date: null }  |
-
-> (\*) Default value is defined on child component
-
-## Theme Props
-
-- `calendarDateTextColor`
-- `calendarDateTextHoverColor`
-- `calendarDateTextActiveColor`
-- `calendarDateTextFocusColor`
-- `calendarDateTextSelectedColor`
-- `calendarDateSelectedBackgroundColor`
-- `calendarDateFocusedBorderColor`
-- `calendarNudgerIconColor`
-- `calendarNudgerIconHoverColor`
-- `calendarNudgerIconActiveColor`
-- `linkColor`
-- `linkHoverColor`
-- `linkActiveColor`
-- `linkVisitedColor`

package/bpk-component-datepicker/package.json

@@ -1,33 +0,0 @@
-{
-  "name": "bpk-component-datepicker",
-  "version": "15.2.18",
-  "description": "Backpack datepicker 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-breakpoint": "^4.0.3",
-    "bpk-component-calendar": "^11.1.18",
-    "bpk-component-input": "^6.1.16",
-    "bpk-component-modal": "^4.0.1",
-    "bpk-component-popover": "^5.0.3",
-    "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-datepicker/src/BpkDatepicker.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';
-
-.bpk-datepicker {
-  &__calendar {
-    margin: 0 auto;
-  }
-}

package/bpk-component-description-list/README.md

@@ -1,46 +0,0 @@
-# bpk-component-description-list
-
-> Backpack description list component.
-
-## Installation
-
-```sh
-npm install bpk-component-description-list --save-dev
-```
-
-## Usage
-
-```js
-import React from 'react';
-import { BpkDescriptionList, BpkDescriptionTerm, BpkDescriptionDetails } from 'bpk-component-description-list';
-
-export default () => (
-  <BpkDescriptionList>
-    <BpkDescriptionTerm>Apple</BpkDescriptionTerm>
-    <BpkDescriptionDetails>A fruit</BpkDescriptionDetails>
-  </BpkDescriptionList>
-);
-```
-
-## Props
-
-### BpkDescriptionList
-
-| Property  | PropType | Required | Default Value |
-| --------- | -------- | -------- | ------------- |
-| children  | -        | true     | -             |
-| className | string   | false    | null          |
-
-### BpkDescriptionTerm
-
-| Property  | PropType | Required | Default Value |
-| --------- | -------- | -------- | ------------- |
-| children  | -        | true     | -             |
-| className | string   | false    | null          |
-
-### BpkDescriptionDetails
-
-| Property  | PropType | Required | Default Value |
-| --------- | -------- | -------- | ------------- |
-| children  | -        | true     | -             |
-| className | string   | false    | null          |

package/bpk-component-description-list/package.json

@@ -1,24 +0,0 @@
-{
-  "name": "bpk-component-description-list",
-  "version": "3.1.11",
-  "description": "Backpack description list 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"
-  }
-}

package/bpk-component-description-list/src/BpkDescriptionList.module.scss

@@ -1,37 +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-description-list {
-  margin: 0;
-
-  &__term {
-    font-weight: $bpk-font-weight-bold;
-  }
-
-  &__details {
-    margin: 0;
-    margin-left: $bpk-spacing-base;
-
-    @include bpk-rtl {
-      margin-right: $bpk-spacing-base;
-      margin-left: 0;
-    }
-  }
-}

package/bpk-component-dialog/README.md

@@ -1,105 +0,0 @@
-# bpk-component-dialog
-
-> Backpack dialog component.
-
-## Installation
-
-```sh
-npm install bpk-component-dialog --save-dev
-```
-
-## Usage
-
-```js
-import React, { Component } from 'react';
-import BpkDialog from 'bpk-component-dialog';
-import BpkButton from 'bpk-component-button';
-
-class App extends Component {
-  constructor() {
-    super();
-
-    this.state = {
-      isOpen: false,
-    };
-  }
-
-  onOpen = () => {
-    this.setState({
-      isOpen: true,
-    });
-  };
-
-  onClose = () => {
-    this.setState({
-      isOpen: false,
-    });
-  };
-
-  render() {
-    return (
-      <div id="dialog-container">
-        <div id="pagewrap">
-          <BpkButton onClick={this.onOpen}>Open dialog</BpkButton>
-        </div>
-        <BpkDialog
-          ariaLabel="example dialog to showcase component"
-          closeLabel="Close dialog"
-          id="my-dialog"
-          className="my-classname"
-          isOpen={this.state.isOpen}
-          onClose={this.onClose}
-          getApplicationElement={() => document.getElementById('pagewrap')}
-          renderTarget={() => document.getElementById('dialog-container')}
-        >
-          This is a dialog. You can put anything you want in here.
-        </BpkDialog>
-      </div>
-    );
-  }
-}
-```
-
-> **Note:** In order to "hide" your application from screen readers whilst the dialog is open you need to let it know what
-> the root element for your application is by returning it's DOM node via the function passed to the
-> `getApplicationElement` prop (see the example above). The `pagewrap` element id is a convention we use internally at Skyscanner. In most cases it should "just work".
-
-## Props
-
-| Property              | PropType | Required | Default Value    |
-| --------------------- | -------- | -------- | ---------------- |
-| ariaLabel             | string   | true     | -                |
-| children              | node     | true     | -                |
-| getApplicationElement | func     | true     | -                |
-| id                    | string   | true     | -                |
-| isOpen                | bool     | true     | -                |
-| className             | string   | false    | null             |
-| closeLabel            | string   | false    | null             |
-| dismissible           | bool     | false    | true             |
-| flare                 | bool     | false    | false            |
-| flareClassName        | string   | false    | null             |
-| headerIcon            | node     | false    | null             |
-| headerIconType        | oneOf(HEADER_ICON_TYPES.primary, HEADER_ICON_TYPES.warning, HEADER_ICON_TYPES.destructive) | false    | HEADER_ICON_TYPES.primary |
-| onClose               | func     | false    | See prop details |
-| renderTarget          | func     | false    | null             |
-
-### Prop Details
-
-#### onClose
-
-This is required unless `dismissible` is false.
-
-#### flareClassName
-
-This will change the style of the default flare view. Should you wish to apply an image to the flare you would pass the image using the CSS property `background-image`.
-
-#### getApplicationElement
-
-This is a function that should return the DOM node of the root of your application, the node returned will be hidden from screen readers when the dialog is displayed. Be careful to return the correct node from this, as on iPhone this element is actually hidden from view also.
-
-## Theme Props
-
-- `linkColor`
-- `linkHoverColor`
-- `linkActiveColor`
-- `linkVisitedColor`

package/bpk-component-dialog/package.json

@@ -1,32 +0,0 @@
-{
-  "name": "bpk-component-dialog",
-  "version": "5.0.0",
-  "description": "Backpack dialog 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-close-button": "^3.1.12",
-    "bpk-component-flare": "^2.1.14",
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
-    "bpk-scrim-utils": "^5.1.10",
-    "prop-types": "^15.7.2"
-  },
-  "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
-  },
-  "devDependencies": {
-    "bpk-component-button": "^6.2.6",
-    "bpk-component-icon": "^9.2.12",
-    "bpk-component-text": "^7.0.5"
-  }
-}