@skyscanner/backpack-web 6.1.0 → 7.0.0-alpha.1

package/bpk-component-datatable/src/bpkHeaderRenderer.js

@@ -1,110 +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 React from 'react';
-import { SortDirection } from 'react-virtualized';
-
-import { cssModules } from '../../bpk-react-utils';
-import BpkSmallArrowDownIcon from '../../bpk-component-icon/sm/arrow-down';
-import BpkSmallArrowUpIcon from '../../bpk-component-icon/sm/arrow-up';
-import { withRtlSupport } from '../../bpk-component-icon';
-
-import { hasClassName } from './utils';
-import STYLES from './BpkDataTableColumn.module.scss';
-import { type SortDirectionType, type SortProps } from './sort-types';
-
-const DownIcon = withRtlSupport(BpkSmallArrowDownIcon);
-const UpIcon = withRtlSupport(BpkSmallArrowUpIcon);
-
-const getClassName = cssModules(STYLES);
-const upIconClassName = getClassName('bpk-data-table-column__sort-icon--up');
-const downIconClassName = getClassName(
-  'bpk-data-table-column__sort-icon--down',
-);
-
-export const getSortIconDirection = (element: Element): ?SortDirectionType => {
-  if (
-    hasClassName(element, upIconClassName) ||
-    hasClassName(element.parentElement, upIconClassName)
-  ) {
-    return SortDirection.ASC;
-  }
-  if (
-    hasClassName(element, downIconClassName) ||
-    hasClassName(element.parentElement, downIconClassName)
-  ) {
-    return SortDirection.DESC;
-  }
-  return null;
-};
-
-type Props = {
-  dataKey: string,
-  label: string,
-  disableSort: boolean,
-  ...$Exact<SortProps>,
-};
-export default ({
-  dataKey,
-  disableSort,
-  label,
-  sortBy,
-  sortDirection,
-}: Props) => {
-  const children = [
-    <span
-      className={getClassName('bpk-data-table-column__header')}
-      key="label"
-      title={label}
-    >
-      {label}
-    </span>,
-  ];
-
-  if (!disableSort) {
-    const upIconClassNames = [
-      getClassName('bpk-data-table-column__sort-icon'),
-      upIconClassName,
-    ];
-
-    const downIconClassNames = [
-      getClassName('bpk-data-table-column__sort-icon'),
-      downIconClassName,
-    ];
-
-    if (sortBy === dataKey) {
-      (sortDirection === SortDirection.ASC
-        ? upIconClassNames
-        : downIconClassNames
-      ).push(getClassName('bpk-data-table-column__sort-icon--selected'));
-    }
-
-    children.push(
-      <div
-        className={getClassName('bpk-data-table-column__sort-icons')}
-        key="sort"
-      >
-        <UpIcon className={upIconClassNames.join(' ')} />
-        <DownIcon className={downIconClassNames.join(' ')} />
-      </div>,
-    );
-  }
-
-  return children;
-};

package/bpk-component-datatable/src/common-types.js

@@ -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 type { ChildrenArray, Element } from 'react';
-
-import BpkDataTableColumn from './BpkDataTableColumn';
-import type {
-  SortDirectionType as _SortDirectionType,
-  SortProps as _SortProps,
-} from './sort-types';
-
-export type ColumnType = {
-  toColumn(column: any, key: string): any,
-};
-
-export type DataTableProps = {
-  headerClassName: ?string,
-  rowClassName: ?string,
-};
-
-export type Props<Row> = {
-  ...$Exact<DataTableProps>,
-  rows: Array<Row>,
-  children: ChildrenArray<Element<typeof BpkDataTableColumn> & ColumnType>,
-  width: ?number,
-  headerHeight: number,
-  className: ?string,
-  defaultColumnSortIndex: number,
-  onRowClick: (Row) => mixed,
-  ...$Exact<_SortProps>,
-};
-
-export type SortDirectionType = _SortDirectionType;
-export type SortProps = _SortProps;

package/bpk-component-datatable/src/hasChildrenOfType.js

@@ -1,59 +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 { Children, type AbstractComponent } from 'react';
-
-export function getDisplayName(Component: AbstractComponent<any>): string {
-  return (
-    Component.displayName ||
-    Component.name ||
-    (typeof Component === 'string' && Component.length > 0
-      ? Component
-      : 'Unknown')
-  );
-}
-
-const hasChildrenOfType =
-  (type: AbstractComponent<any>, atLeast: number = 1) =>
-  (props: { [string]: any }, propType: string, componentName: string) => {
-    if (Children.count(props[propType]) < atLeast) {
-      const inflectedNoun = atLeast === 1 ? 'child' : 'children';
-      return Error(
-        `${componentName} requires at least ${atLeast} '${getDisplayName(
-          type,
-        )}' ${inflectedNoun}.`,
-      );
-    }
-
-    const children = Children.toArray(props[propType]);
-    for (let i = 0; i < children.length; i += 1) {
-      const child = children[i];
-      if (child.type !== type && !(child.type.prototype instanceof type)) {
-        return Error(
-          `${componentName} only allows '${getDisplayName(
-            type,
-          )}' as children. Found '${getDisplayName(child.type)}'.`,
-        );
-      }
-    }
-
-    return undefined;
-  };
-
-export default hasChildrenOfType;

package/bpk-component-datatable/src/sort-types.js

@@ -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.
- */
-
-/* @flow strict */
-
-// This file exists to break a cycle that would otherwise happen between
-// BpkDataTableColumn.js and common-types.js
-export type SortDirectionType = 'ASC' | ' DESC';
-
-export type SortProps = {
-  sortBy: ?string,
-  sortDirection: ?SortDirectionType,
-  sort: ?Function,
-};

package/bpk-component-datatable/src/sorter.js

@@ -1,166 +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 React from 'react';
-import _sortBy from 'lodash/sortBy';
-import { SortDirection } from 'react-virtualized';
-
-import { getSortIconDirection } from './bpkHeaderRenderer';
-import type { Props, SortProps, SortDirectionType } from './common-types';
-
-export type Sorter<Row> = {
-  rowCount: number,
-  getRow(indext: number): Row,
-  propsChange(props: Props<Row>): void,
-  onHeaderClick(sortBy: string, eventTarget: Element, column: any): Sorter<Row>,
-  sortProps: SortProps,
-};
-
-const getSortDirection = (
-  sortProps: SortProps,
-  newSortBy: ?string,
-  newSortDirection: ?SortDirectionType,
-  defaultSortDirection: SortDirectionType,
-): SortDirectionType => {
-  const { sortBy, sortDirection } = sortProps;
-  if (newSortDirection != null) {
-    return newSortDirection;
-  }
-  if (sortBy === newSortBy) {
-    return sortDirection === SortDirection.ASC
-      ? SortDirection.DESC
-      : SortDirection.ASC;
-  }
-  return defaultSortDirection;
-};
-
-class NaiveSorter<Row> {
-  sortProps: SortProps;
-
-  list: Array<Row>;
-
-  sortedList: Array<Row>;
-
-  rowCount: number;
-
-  constructor(props: Props<Row>) {
-    const children = React.Children.toArray(props.children);
-
-    const sortBy =
-      React.Children.count(props.children) > 0
-        ? children[props.defaultColumnSortIndex].props.dataKey
-        : undefined;
-    const sortDirection =
-      children[props.defaultColumnSortIndex].props.defaultSortDirection ||
-      SortDirection.ASC;
-
-    this.sortProps = {
-      sortBy,
-      sortDirection,
-      sort: null,
-    };
-    this.list = props.rows;
-    this.sort();
-  }
-
-  getRow(index: number): Row {
-    return this.sortedList[index];
-  }
-
-  sort() {
-    const sorted = _sortBy(this.list, this.sortProps.sortBy);
-    if (this.sortProps.sortDirection === 'DESC') {
-      sorted.reverse();
-    }
-    this.sortedList = sorted;
-    this.rowCount = this.sortedList.length;
-  }
-
-  propsChange(nextProps: Props<Row>) {
-    this.list = nextProps.rows;
-    this.sort();
-  }
-
-  onHeaderClick(sortBy: string, eventTarget: Element, column): Sorter<Row> {
-    const sortDirection = getSortDirection(
-      this.sortProps,
-      sortBy,
-      getSortIconDirection(eventTarget),
-      column.props.defaultSortDirection || SortDirection.ASC,
-    );
-
-    this.sortProps = {
-      sortBy,
-      sortDirection,
-      sort: null,
-    };
-
-    this.sort();
-    return this;
-  }
-}
-
-class PropSorter<Row> {
-  sortProps: SortProps;
-
-  list: Array<Row>;
-
-  rowCount: number;
-
-  constructor(props: Props<Row>) {
-    this.sortProps = {
-      sortBy: props.sortBy,
-      sortDirection: props.sortDirection,
-      sort: props.sort,
-    };
-    this.list = props.rows;
-    this.rowCount = props.rows.length;
-  }
-
-  getRow(index: number): Row {
-    return this.list[index];
-  }
-
-  propsChange(nextProps: Props<Row>) {
-    this.sortProps = {
-      sortBy: nextProps.sortBy,
-      sortDirection: nextProps.sortDirection,
-      sort: nextProps.sort,
-    };
-    this.list = nextProps.rows;
-    this.rowCount = nextProps.rows.length;
-  }
-
-  onHeaderClick(): Sorter<Row> {
-    return this;
-  }
-}
-
-const makeSorter = <Row>(props: Props<Row>): Sorter<Row> => {
-  if (
-    props.sort !== null &&
-    props.sortBy !== null &&
-    props.sortDirection !== null
-  ) {
-    return new PropSorter(props);
-  }
-  return new NaiveSorter(props);
-};
-
-export default makeSorter;

package/bpk-component-datatable/src/utils.js

@@ -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.
- */
-/* @flow strict */
-
-// eslint-disable-next-line import/prefer-default-export
-export const hasClassName = (node: ?Element, className: ?string): boolean => {
-  if (node == null) {
-    return false;
-  }
-
-  const nodeClassName = node.getAttribute('class');
-  return (
-    nodeClassName != null && nodeClassName.split(' ').indexOf(className) !== -1
-  );
-};

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/index.js

@@ -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 { CALENDAR_SELECTION_TYPE } from '../bpk-component-calendar';
-
-import BpkDatepicker from './src/BpkDatepicker';
-import themeAttributes from './src/themeAttributes';
-
-export default BpkDatepicker;
-export { CALENDAR_SELECTION_TYPE, themeAttributes };

package/bpk-component-datepicker/package.json

@@ -1,33 +0,0 @@
-{
-  "name": "bpk-component-datepicker",
-  "version": "16.0.0",
-  "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.4",
-    "bpk-component-calendar": "^11.1.19",
-    "bpk-component-input": "^6.1.17",
-    "bpk-component-modal": "^5.0.0",
-    "bpk-component-popover": "^6.0.0",
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^6.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.11"
-  }
-}