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

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';
-
-.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';
-
-.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';
-
-.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';
-
-.bpk-button--secondary-on-dark {
-  @include bpk-button--secondary-on-dark;
-}

package/bpk-component-calendar/DOCS.md

@@ -1,29 +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.
-
-  It has a `cellType` prop which can be used to set a custom colour. An exported `CELL_TYPES` object offers the following cell types:
-    - `CELL_TYPES.positive` - sets the calendar cell to `Monteverde`
-    - `CELL_TYPES.neutral` - sets the calendar cell to `Erfoud`
-    - `CELL_TYPES.negative` - sets the calendar cell to `Panjin`
-    - `CELL_TYPES.default` - sets the calendar cell to `Sky Gray Tint 02`

package/bpk-component-calendar/README.md

@@ -1,406 +0,0 @@
-# bpk-component-calendar
-
-> Backpack calendar component.
-
-## Installation
-
-```sh
-npm install bpk-component-calendar --save-dev
-```
-
-## Usage
-
-```js
-import React, { Component } from 'react';
-import BpkCalendar from 'bpk-component-calendar';
-import BpkInput, { INPUT_TYPES } from 'bpk-component-input';
-import format from 'date-fns/format';
-
-const formatDateFull = date => format(date, 'EEEE, 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 (
-      <div>
-        <BpkInput
-          id='dateInput'
-          type={INPUT_TYPES.text}
-          name='date'
-          value={(this.state.selectionConfiguration.date || '').toString()}
-          placeholder='Departure date'
-        />
-        <BpkCalendar
-          id='calendar'
-          onDateSelect={this.handleDateSelect}
-          formatMonth={formatMonth}
-          formatDateFull={formatDateFull}
-          daysOfWeek={daysOfWeek}
-          weekStartsOn={1}
-          changeMonthLabel="Change month"
-          nextMonthLabel="Next month"
-          previousMonthLabel="Previous month"
-          selectionConfiguration={this.state.selectionConfiguration}
-        />
-      </div>
-    )
-  }
-}
-```
-
-### Component structure
-
-A calendar is composed of four basic components: a month navigation, a grid header, a grid, and the date components.
-
-These components are all stateless and can be composed into a calendar using the `composeCalendar` higher-order component.
-
-Another higher-order component, `withCalendarState`, can be used to provide focus management and keyboard navigation.
-
-The default export of this package uses the following set of components:
-
-| Calendar component | Default                      |
-| ------------------ | ---------------------------- |
-| Month navigation   | BpkCalendarNav               |
-| Grid header        | BpkCalendarGridHeader        |
-| Grid               | TransitioningBpkCalendarGrid |
-| Date               | BpkCalendarDate              |
-
-Composition and state are implemented using the aforementioned higher-order components:
-
-```js
-withCalendarState(composeCalendar(
-  BpkCalendarNav,
-  BpkCalendarGridHeader,
-  TransitioningBpkCalendarGrid,
-  BpkCalendarDate,
-))
-```
-
-### Building a custom calendar
-
-A custom calendar can be created by swapping out any default component for an alternative:
-
-```js
-composeCalendar(
-  MyNavigation,
-  MyHeader,
-  MyGrid,
-  MyDate,
-)
-```
-
-The navigation and header components are optional. If they are not needed, the arguments to `composeCalendar` should be set to `null`:
-
-```js
-composeCalendar(
-  null,
-  null,
-  MyGrid,
-  MyDate,
-)
-```
-
-In many cases, you might want to keep most of the components and replace only one or two:
-
-```js
-composeCalendar(
-  BpkCalendarNav,
-  BpkCalendarGridHeader,
-  BpkCalendarGrid,
-  MyDate,
-)
-```
-
-Finally, focus management and support for keyboard input can be added using `withCalendarState`:
-
-```js
-withCalendarState(composeCalendar(
-  BpkCalendarNav,
-  BpkCalendarGridHeader,
-  BpkCalendarGrid,
-  MyDate,
-))
-```
-
-> When implementing a replacement for any of the default calendar components, make sure it
-> implements the same API (props see below) and provides all the relevant accessibility
-> properties, such as ARIA attributes and `tabIndex`.
-
-## Props
-
-| Property              | PropType             | Required            | Default Value    |
-| --------------------- | -------------------- | ------------------- | ---------------- |
-| daysOfWeek            | object               | true                | -                |
-| formatDateFull        | func                 | true                | -                |
-| formatMonth           | func                 | true                | -                |
-| id                    | string               | true                | -                |
-| weekStartsOn          | number               | true                | -                |
-| changeMonthLabel      | string               | if Nav !== null     | -                |
-| nextMonthLabel        | string               | if Nav !== null     | -                |
-| previousMonthLabel    | string               | if Nav !== null     | -                |
-| className             | string               | false               | null             |
-| fixedWidth            | bool                 | false               | true             |
-| gridClassName         | string               | false               | null             |
-| initiallyFocusedDate  | Date                 | false               | null             |
-| markOutsideDays       | bool                 | false               | true             |
-| markToday             | bool                 | false               | true             |
-| maxDate               | Date                 | false               | new Date() + 1 year |
-| minDate               | Date                 | false               | new Date()       |
-| onDateSelect          | func                 | false               | null             |
-| onMonthChange         | func                 | false               | null             |
-| selectionConfiguration| object               | false               | { type: CALENDAR_SELECTION_TYPE.single, date: null }  |
-| navProps              | object               | false               | null             |
-| headerProps           | object               | false               | null             |
-| gridProps             | object               | false               | null             |
-| dateProps             | object               | false               | null             |
-| weekDayKey            | string               | false               | nameAbbr         |
-
-Some of the more complex props and props for sub-components are detailed below.
-
-### BpkCalendarNav
-
-The BpkCalendarNav component is used to change the month that is being displayed by using
-buttons and a select box.
-
-| Property              | PropType             | Required | Default Value    |
-| --------------------- | -------------------- | -------- | ---------------- |
-| changeMonthLabel      | string               | true     | -                |
-| nextMonthLabel        | string               | true     | -                |
-| previousMonthLabel    | string               | true     | -                |
-| formatMonth           | func                 | true     | -                |
-| id                    | string               | true     | -                |
-| maxDate               | Date                 | true     | -                |
-| minDate               | Date                 | true     | -                |
-| month                 | Date                 | true     | -                |
-| onMonthChange         | func                 | false    | null             |
-| disabled              | bool                 | false    | false            |
-
-### BpkCalendarGridHeader
-
-The BpkCalendarGridHeader component displays the header of `BpkCalendarGrid`, listing
-the days of the week. This is needed as a separate component, as the header should stay
-in place while the rest of the grid transitions when changing months.
-
-| Property              | PropType             | Required | Default Value    |
-| --------------------- | -------------------- | -------- | ---------------- |
-| daysOfWeek            | object               | true     | -                |
-| weekStartsOn          | number               | true     | -                |
-| className             | string               | false    | null             |
-| weekDayKey            | string               | false    | nameAbbr         |
-
-### BpkCalendarGrid
-
-The BpkCalendarGrid component displays a month as a table.
-
-| Property              | PropType             | Required | Default Value    |
-| --------------------- | -------------------- | -------- | ---------------- |
-| DateComponent         | elementType          | true     | -                |
-| daysOfWeek            | array(object)        | true     | -                |
-| formatDateFull        | func                 | true     | -                |
-| formatMonth           | func                 | true     | -                |
-| month                 | Date                 | true     | -                |
-| weekStartsOn          | number               | true     | -                |
-| selectionConfiguration| object               | false    | { type: CALENDAR_SELECTION_TYPE.single, date: null }  |
-| focusedDate           | Date                 | false    | null             |
-| isKeyboardFocusable   | bool                 | false    | true             |
-| markOutsideDays       | bool                 | false    | true             |
-| markToday             | bool                 | false    | true             |
-| maxDate               | Date                 | false    | new Date() + 1 year |
-| minDate               | Date                 | false    | new Date()       |
-| onDateClick           | func                 | false    | null             |
-| onDateKeyDown         | func                 | false    | null             |
-| preventKeyboardFocus  | bool                 | false    | false            |
-
-### BpkCalendarDate
-
-The BpkCalendarDate component is used to render the content of a cell
-(a single day) inside the calendar grid.
-
-| Property              | PropType             | Required | Default Value    |
-| --------------------- | -------------------- | -------- | ---------------- |
-| date                  | Date                 | true     | -                |
-| cellType              | oneOf(CELL_TYPES.default, CELL_TYPES.positive, CELL_TYPES.neutral, CELL_TYPES.negative)                     | false    | null             |
-| isBlocked             | bool                 | false    | false            |
-| isFocused             | bool                 | false    | false            |
-| isKeyboardFocusable   | bool                 | false    | true             |
-| isOutside             | bool                 | false    | false            |
-| isSelected            | bool                 | false    | false            |
-| isToday               | bool                 | false    | false            |
-| onClick               | func                 | false    | null             |
-| onDateKeyDown         | func                 | false    | null             |
-| preventKeyboardFocus  | bool                 | false    | true             |
-| selectionType         | oneOf(SELECTION_TYPES.single, SELECTION_TYPES.start, SELECTION_TYPES.middle, SELECTION_TYPES.end)      | false    | SELECTION_TYPES.single             |
-| style                 | object               | false    | null             |
-
-#### `cellType` prop
-
-This prop determines what the colour date cell is to be displayed.
-
-- `CELL_TYPES.positive` - sets the calendar cell to `Monteverde`
-- `CELL_TYPES.neutral` - sets the calendar cell to `Erfoud`
-- `CELL_TYPES.negative` - sets the calendar cell to `Panjin`
-- `CELL_TYPES.default` - sets the calendar cell to `Sky Gray Tint 02`
-
-#### `selectionType` prop
-
-This property determines which selected styles will be applied to the date cell. If using ranges use `start`, `middle` and `end` to apply the correct range styles.
-
-- `SELECTION_TYPES.single` - When the date is selected individually i.e. Not as part of a range
-- `SELECTION_TYPES.start` - When a start date is selected in a range calendar i.e. First date in the range
-- `SELECTION_TYPES.middle` - When a date is in a range between start and end date i.e. Date in the middle of two dates
-- `SELECTION_TYPES.end` - When an end date is selected in a range calendar i.e. Last date in the range
-
-### Prop details
-
-#### selectionConfiguration
-
-An object to indicate which configuration of the calendar is being used. Choices are `single` date selection or `range` date selection.
-
-##### Single date
-
-```json
-{
-  type: CALENDAR_SELECTION_TYPE.single,
-  date: date e.g. new Date()
-}
-```
-
-##### Range
-
-```json
-{
-  type: CALENDAR_SELECTION_TYPE.range,
-  startDate: date e.g. new Date(),
-  endDate: date e.g. new Date()
-}
-```
-
-#### daysOfWeek
-
-An array of objects describing the days of the week:
-
-```json
-[
-  {
-    "name": "Sunday",
-    "nameAbbr": "Sun",
-    "nameNarrow": "S",
-    "index": 0,
-    "isWeekend": true
-  },
-  {
-    "name": "Monday",
-    "nameAbbr": "Mon",
-    "nameNarrow": "M",
-    "index": 1,
-    "isWeekend": false
-  },
-  {
-    "name": "Tuesday",
-    "nameAbbr": "Tue",
-    "nameNarrow": "T",
-    "index": 2,
-    "isWeekend": false
-  },
-  ...
-]
-```
-
-#### weekDayKey
-
-Key to be used to pick the desired weekDay format from the `daysOfWeek` object, for example: `nameAbbr` or `nameNarrow`.
-
-#### fixedWidth
-
-If set to true (default), it sets a fixed width on the calendar container. This is necessary to support
-transitions and to create the right size for the Datepicker component.
-
-If set to false, the calendar is of fluid width and will take up the space of its parent container.
-
-#### formatDateFull
-
-A function to format a full, human-readable date, for example: "Monday, 8th January 2018":
-
-```js
-import format from 'date-fns/format';
-
-const formatDateFull = date => format(date, 'EEEE, do MMMM yyyy');
-```
-
-#### formatMonth
-
-A function to format a human-readable month, for example: "January 2018":
-
-If you just need to quickly prototype, use the following from [`date-fns`](https://date-fns.org/docs/format#usage):
-
-```js
-import format from 'date-fns/format';
-
-const formatMonth = date => format(date, 'MMMM yyyy');
-```
-
-#### weekStartsOn
-
-First day of the week. 0 = Sunday, 1 = Monday, ..., 6 = Saturday.
-
-#### onMonthChange
-
-```javascript
-const onMonthChange = (event, {
-  month: <Date>, // The first day of the selected month
-  source: <string>, // One of `PREV`, `NEXT`, `SELECT`, `GRID`
-}) => {
-  ...
-}
-```
-
-#### initiallyFocusedDate
-
-Sets the date that is focused initially, this prop has no effect if `selectedDate` or the deprecated `date` prop are specified in which case the date specified in those props is focused. If no selected date is set and `initiallyFocusedDate` is not set the focused date is the `minDate`(defaults to today if it has not been explicitly set).
-
-#### navProps, headerProps, gridProps, dateProps
-
-These are useful if your custom implementation of one of these components requires additional properties. They will be passed, unmodified, to the respective component.
-
-## Theme Props
-
-* `calendarDateTextColor`
-* `calendarDateTextHoverColor`
-* `calendarDateTextActiveColor`
-* `calendarDateTextFocusColor`
-* `calendarDateTextSelectedColor`
-* `calendarDateSelectedBackgroundColor`
-* `calendarDateFocusedBorderColor`
-* `calendarNudgerIconColor`
-* `calendarNudgerIconHoverColor`
-* `calendarNudgerIconActiveColor`
-

package/bpk-component-calendar/package.json

@@ -1,34 +0,0 @@
-{
-  "name": "bpk-component-calendar",
-  "version": "11.1.18",
-  "description": "Backpack calendar 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": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
-  "dependencies": {
-    "@skyscanner/bpk-foundations-web": "^8.0.0",
-    "bpk-component-aria-live": "^2.1.18",
-    "bpk-component-icon": "^9.2.12",
-    "bpk-component-select": "^5.1.11",
-    "bpk-mixins": "^31.1.1",
-    "bpk-react-utils": "^5.0.0",
-    "date-fns": "^2.21.1",
-    "prop-types": "^15.7.2"
-  },
-  "peerDependencies": {
-    "react": "^16.3.0 || ^17.0.0"
-  },
-  "devDependencies": {
-    "bpk-component-button": "^6.2.6",
-    "bpk-component-text": "^7.0.5",
-    "bpk-storybook-utils": "^1.1.10"
-  }
-}