@skyscanner/backpack-web 22.3.0 → 23.0.0

package/bpk-component-content-cards/src/BpkContentCards.module.scss

@@ -1,51 +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.
- */
-
-/* stylelint-disable selector-class-pattern */
-/* stylelint-disable selector-max-compound-selectors */
-@import '~bpk-mixins/index.scss';
-
-$bpk-spacing-v2: true;
-
-.bpk-content-cards {
-  &--header-text {
-    margin-bottom: bpk-spacing-base();
-
-    @include bpk-heading-2;
-
-    @include bpk-breakpoint-mobile {
-      @include bpk-heading-3;
-    }
-  }
-
-  &--layout {
-    display: grid;
-    grid-template-columns: repeat(
-      auto-fit,
-      minmax($bpk-one-pixel-rem * 50, 1fr)
-    );
-    grid-auto-flow: column;
-    gap: bpk-spacing-lg();
-
-    @include bpk-breakpoint-small-tablet {
-      grid-template-columns: 1fr;
-      grid-auto-flow: row;
-      gap: bpk-spacing-lg();
-    }
-  }
-}

package/bpk-component-datatable/README.md

@@ -1,196 +0,0 @@
-# bpk-component-datatable
-
-> Backpack datatable component.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```js
-import { BpkDataTable, BpkDataTableColumn } from '@skyscanner/backpack-web/bpk-component-datatable';
-
-const rows = [
-  { name: 'Jose', description: 'Software Engineer' },
-  { name: 'Rolf', description: 'Manager' }
-]
-
-const onRowClick = row => alert(JSON.stringify(row));
-
-export default () => (
-  <BpkDataTable rows={rows} height={200} onRowClick={onRowClick}>
-    <BpkDataTableColumn
-      label={'Name'}
-      dataKey={'name'}
-      width={100}
-    />
-    <BpkDataTableColumn
-      label={'Description'}
-      dataKey={'description'}
-      width={100}
-      flexGrow={1}
-    />
-  </BpkDataTable>
-);
-```
-
-By default `BpkDataTable` sorts the column using the value of `dataKey`. For use cases where the data might more complex and requires custom sorting you can pass a `sort` function along with `sortBy` and `sortDirection`.
-
-```js
-import { Fragment } from 'react';
-import { BpkDataTable, BpkDataTableColumn } from '@skyscanner/backpack-web/bpk-component-datatable';
-
-const complexRows = [
-    {
-      name: 'Jose',
-      description: 'Software Engineer',
-      seat: { office: 'London', desk: 10 },
-    },
-    {
-      name: 'Rolf',
-      description: 'Manager',
-      seat: { office: 'Barcelona', desk: 12 },
-    },
-    {
-      name: 'John',
-      description: 'Software Engineer',
-      seat: { office: 'Barcelona', desk: 15 },
-    },
-];
-
-let sortByValue = 'seat';
-let sortDirectionValue = 'DESC';
-const sortFunction = (rowA, rowB, id, desc) => {
-  const deskA = rowA.values.seat.desk;
-  const deskB = rowB.values.seat.desk;
-
-  if (deskA === deskB) {
-      return 0;
-  } else {
-      return deskA > deskB ? 1 : -1;
-  }
-}
-
-export default () => (
-  <BpkDataTable
-    rows={complexRows}
-    height={200}
-    sort={sortFunction}
-    sortBy={sortByValue}
-    sortDirection={sortDirectionValue}
-  >
-    <BpkDataTableColumn
-      label="Name"
-      dataKey="name"
-      width={100}
-    />
-    <BpkDataTableColumn
-      label="Description"
-      dataKey="description"
-      width={100}
-    />
-    <BpkDataTableColumn
-      label="Seat"
-      dataKey="seat"
-      width={100}
-      flexGrow={1}
-      cellRenderer={({ cellData }) => (
-        <Fragment>
-          {cellData.office} - {cellData.desk}
-        </Fragment>
-      )}
-    />
-  </BpkDataTable>
-);
-```
-
-## Props
-
-### BpkDataTable
-
-| Property               | PropType                    | Required | Default Value        |
-| ---------------------- | --------------------------- | -------- | -------------------- |
-| rows                   | arrayOf(Object)             | true     | -                    |
-| children               | arrayOf(BpkDataTableColumn) | true     | -                    |
-| height                 | oneOfType(number, string)   | true     | -                    |
-| width                  | oneOfType(number, string)   | false    | full width of parent |
-| headerHeight           | oneOfType(number, string)   | false    | 60                   |
-| rowClassName           | string                      | false    | null                 |
-| rowHeight              | oneOfType(number, string)   | false    | 60                   |
-| rowStyle               | object                      | false    | {}                   |
-| onRowClick             | func                        | false    | null                 |
-| className              | string                      | false    | null                 |
-| defaultColumnSortIndex | number                      | false    | 0                    |
-| sort                   | func                        | false    | null                 |
-| sortBy                 | string                      | false    | null                 |
-| sortDirection          | oneOf('ASC', 'DESC')        | false    | 'ASC'                |
-
-
-### BpkDataTableColumn
-
-| Property               | PropType                    | Required | Default Value        |
-| ---------------------- | --------------------------- | -------- | -------------------- |
-| dataKey                | string                      | true     | -                    |
-| width                  | number                      | true     | -                    |
-| flexGrow               | number                      | false    | 0                    |
-| label                  | string                      | false    | null                 |
-| headerRenderer         | func                        | false    | null                 |
-| headerClassName        | string                      | false    | null                 |
-| headerStyle            | object                      | false    | {}                   |
-| cellRenderer           | func                        | false    | null                 |
-| cellDataGetter         | func                        | false    | null                 |
-| disableSort            | bool                        | false    | false                |
-| defaultSortDirection   | oneOf('ASC', 'DESC')        | false    | 'ASC'                |
-| className              | string                      | false    | null                 |
-
-### Prop Details
-
-
-#### sort, sortBy, sortDirection
-
-For custom sorting, pass a `sort` function.
-Use `sortBy` to specify which column the custom sorting will be applied to.
-Use `sortDirection` to set the direction of sorting. By default, it will be ascending.
-
-#### defaultColumnSortIndex
-
-The data will be sorted by default based on this column.
-
-#### headerRenderer
-
-To handle more complex header data that needs any custom processing, pass a function or component to `headerRenderer` prop. This will only be formatting the header value - all styling will be handled by the component.
-It should implement the following signature:
-
-```
-  function ({
-  dataKey: string, disableSort: boolean, label: string
-  }): element
-```
-
-#### cellDataGetter
-
-To handle more complex cell data that needs any custom processing, pass a function or component to `cellDataGetter` prop. This will only be formatting the cell value - all styling will be handled by the component.
-It should implement the following signature:
-
-```
-function ({
-  dataKey: string,
-  rowData: any
-}): any
-```
-
-#### cellRenderer
-
-To handle more complex cell data that needs any custom processing, pass a function or component to `cellRenderer` prop. This will only be formatting the cell value - all styling will be handled by the component. To maintain backward compatibility, both `cellRenderer` and `cellDataGetter` will be supported, however, they are interchangeable as they both can only format the cell value.
-It should implement the following signature:
-
-```
-function ({
-  cellData: any,
-  columnIndex: number,
-  dataKey: string,
-  rowData: any,
-  rowIndex: any,
-}): node
-```

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

@@ -1,90 +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-border-size-datatable: $bpk-border-size-xl * 2;
-
-@mixin bpk-datatable-border-left() {
-  @include _bpk-border-left(
-    $bpk-border-size-datatable,
-    $bpk-core-accent-day,
-    inset
-  );
-}
-
-@mixin bpk-datatable-border-right() {
-  @include _bpk-border-right(
-    $bpk-border-size-datatable,
-    $bpk-core-accent-day,
-    inset
-  );
-}
-
-.bpk-data-table {
-  width: 100%;
-
-  &__header-row {
-    overflow: hidden;
-  }
-
-  &__row {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    border: $bpk-border-size-sm solid $bpk-line-day;
-    border-bottom: none;
-    outline-offset: -(4 * $bpk-one-pixel-rem);
-    color: $bpk-text-primary-day;
-
-    @include bpk-footnote;
-
-    &:last-child:not(.bpk-data-table__header-row) {
-      border-bottom: $bpk-border-size-sm solid $bpk-line-day;
-    }
-
-    &--clickable:not(.bpk-data-table__header-row):hover {
-      background-color: $bpk-canvas-contrast-day;
-      cursor: pointer;
-
-      @include bpk-datatable-border-left;
-
-      @include bpk-rtl {
-        @include bpk-datatable-border-right;
-      }
-    }
-
-    &--selected {
-      background-color: $bpk-status-warning-fill-day;
-
-      @include bpk-datatable-border-left;
-
-      @include bpk-rtl {
-        @include bpk-datatable-border-right;
-      }
-    }
-  }
-
-  &__cell {
-    margin: bpk-spacing-base();
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-}

package/bpk-component-datatable/src/BpkDataTableHeader.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.scss';
-
-$bpk-spacing-v2: true;
-$bpk-margin-size-sort-icons: bpk-spacing-sm() + bpk-spacing-md();
-
-.bpk-data-table-column__header {
-  display: flex;
-  height: 100%;
-  margin: bpk-spacing-base();
-  flex-direction: row;
-  align-items: center;
-  outline-offset: -(bpk-spacing-sm());
-
-  @include bpk-label-2;
-
-  &:hover {
-    cursor: pointer;
-  }
-}
-
-.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-line-day;
-
-  &:hover {
-    fill: $bpk-line-day;
-  }
-
-  &--selected {
-    &,
-    &:hover {
-      fill: $bpk-core-accent-day;
-    }
-  }
-}
-
-.bpk-data-table-column__sort-icon--up {
-  margin-bottom: -(bpk-spacing-sm());
-}

package/bpk-component-datepicker/README.md

@@ -1,179 +0,0 @@
-# bpk-component-datepicker
-
-> Backpack datepicker component.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```js
-import { Component } from 'react';
-import BpkDatepicker, { CALENDAR_SELECTION_TYPE } from '@skyscanner/backpack-web/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 { Component } from 'react';
-import BpkDatepicker from '@skyscanner/backpack-web/bpk-component-datepicker';
-import {
-  BpkCalendarNav,
-  BpkCalendarGridHeader,
-  BpkCalendarGridWithTransition,
-  BpkCalendarDate,
-  withCalendarState,
-  composeCalendar,
-} from '@skyscanner/backpack-web/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
-
-#### inputComponent
-
-`inputComponent` prop is not required. However, if you do pass an `inputComponent` it should be a DOM node with a `ref` attached to it.
-
-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/src/BpkDatepicker.module.scss

@@ -1,30 +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-datepicker {
-  &__calendar {
-    margin: 0 auto;
-  }
-
-  &__input {
-    display: inline-block;
-    width: 100%;
-  }
-}

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

@@ -1,43 +0,0 @@
-# bpk-component-description-list
-
-> Backpack description list component.
-
-## Installation
-
-Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
-
-## Usage
-
-```js
-import { BpkDescriptionList, BpkDescriptionTerm, BpkDescriptionDetails } from '@skyscanner/backpack-web/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/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.scss';
-
-.bpk-description-list {
-  margin: 0;
-
-  &__term {
-    @include bpk-label-1;
-  }
-
-  &__details {
-    margin: 0;
-    margin-left: $bpk-spacing-base;
-
-    @include bpk-rtl {
-      margin-right: $bpk-spacing-base;
-      margin-left: 0;
-    }
-  }
-}