@skyscanner/backpack-web 25.4.0-alpha → 25.4.1

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

@@ -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/src/BpkDatepicker-test.tsx

@@ -1,390 +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 { render, screen, fireEvent } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import userEvent from '@testing-library/user-event';
-
-import {
-  weekDays,
-  formatMonth,
-  formatDateFull,
-} from '../../bpk-component-calendar/test-utils';
-import { format } from '../../bpk-component-calendar/src/date-utils';
-import { CALENDAR_SELECTION_TYPE } from '../../bpk-component-calendar';
-
-import BpkDatepicker from './BpkDatepicker';
-
-jest.mock('@popperjs/core', () => {
-  const PopperJS = jest.requireActual('@popperjs/core');
-  return {
-    __esModule: true,
-    ...PopperJS,
-    createPopper: jest.fn(() => ({
-      update: jest.fn(),
-      destroy: jest.fn(),
-    })),
-  };
-});
-
-const formatDate = (date: Date) => format(date, 'dd/MM/yyyy');
-
-const inputProps = {
-  onChange: () => null,
-  placeholder: 'placeholder',
-  large: true,
-};
-
-describe('BpkDatepicker', () => {
-  it('should render correctly', () => {
-    const { asFragment } = render(
-      <BpkDatepicker
-        id="myDatepicker"
-        closeButtonText="Close"
-        daysOfWeek={weekDays}
-        changeMonthLabel="Change month"
-        previousMonthLabel="Go to previous month"
-        nextMonthLabel="Go to next month"
-        title="Departure date"
-        weekStartsOn={1}
-        getApplicationElement={() => document.createElement('div')}
-        formatDate={formatDate}
-        formatMonth={formatMonth}
-        formatDateFull={formatDateFull}
-        inputProps={inputProps}
-        minDate={new Date(2010, 1, 15)}
-        maxDate={new Date(2010, 2, 15)}
-        selectionConfiguration={{
-          type: CALENDAR_SELECTION_TYPE.single,
-          date: new Date(2010, 1, 15),
-        }}
-      />,
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should render range correctly', () => {
-    const { asFragment } = render(
-      <BpkDatepicker
-        id="myDatepicker"
-        closeButtonText="Close"
-        daysOfWeek={weekDays}
-        changeMonthLabel="Change month"
-        previousMonthLabel="Go to previous month"
-        nextMonthLabel="Go to next month"
-        title="Departure date"
-        weekStartsOn={1}
-        getApplicationElement={() => document.createElement('div')}
-        formatDate={formatDate}
-        formatMonth={formatMonth}
-        formatDateFull={formatDateFull}
-        inputProps={inputProps}
-        minDate={new Date(2010, 1, 15)}
-        maxDate={new Date(2010, 2, 15)}
-        selectionConfiguration={{
-          type: 'range',
-          startDate: new Date(2010, 1, 15),
-          endDate: new Date(2010, 1, 20),
-        }}
-      />,
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should render correctly when not valid', () => {
-    const { asFragment } = render(
-      <BpkDatepicker
-        valid={false}
-        id="myDatepicker"
-        closeButtonText="Close"
-        daysOfWeek={weekDays}
-        changeMonthLabel="Change month"
-        previousMonthLabel="Go to previous month"
-        nextMonthLabel="Go to next month"
-        title="Departure date"
-        weekStartsOn={1}
-        getApplicationElement={() => document.createElement('div')}
-        formatDate={formatDate}
-        formatMonth={formatMonth}
-        formatDateFull={formatDateFull}
-        inputProps={inputProps}
-        minDate={new Date(2010, 1, 15)}
-        maxDate={new Date(2010, 2, 15)}
-        selectionConfiguration={{
-          type: CALENDAR_SELECTION_TYPE.single,
-          date: new Date(2010, 1, 15),
-        }}
-      />,
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should render correctly with datepicker open', () => {
-    render(
-      <BpkDatepicker
-        id="myDatepicker"
-        closeButtonText="Close"
-        daysOfWeek={weekDays}
-        changeMonthLabel="Change month"
-        previousMonthLabel="Go to previous month"
-        nextMonthLabel="Go to next month"
-        title="Departure date"
-        weekStartsOn={1}
-        getApplicationElement={() => document.createElement('div')}
-        formatDate={formatDate}
-        formatMonth={formatMonth}
-        formatDateFull={formatDateFull}
-        inputProps={inputProps}
-        minDate={new Date(2010, 1, 15)}
-        maxDate={new Date(2010, 2, 15)}
-        selectionConfiguration={{
-          type: CALENDAR_SELECTION_TYPE.single,
-          date: new Date(2010, 1, 15),
-        }}
-        isOpen
-      />,
-    );
-
-    const calendarDialog = screen.queryByRole('dialog', {
-      name: 'Departure date',
-    });
-    expect(calendarDialog).toBeInTheDocument();
-  });
-
-  it('"readOnly" can be overriden in "inputProps"', () => {
-    const noReadOnlyInputProps = { ...inputProps, readOnly: false };
-    const { asFragment } = render(
-      <BpkDatepicker
-        id="myDatepicker"
-        closeButtonText="Close"
-        daysOfWeek={weekDays}
-        changeMonthLabel="Change month"
-        previousMonthLabel="Go to previous month"
-        nextMonthLabel="Go to next month"
-        title="Departure date"
-        weekStartsOn={1}
-        getApplicationElement={() => document.createElement('div')}
-        formatDate={formatDate}
-        formatMonth={formatMonth}
-        formatDateFull={formatDateFull}
-        inputProps={noReadOnlyInputProps}
-        minDate={new Date(2010, 1, 15)}
-        maxDate={new Date(2010, 2, 15)}
-        selectionConfiguration={{
-          type: CALENDAR_SELECTION_TYPE.single,
-          date: new Date(2010, 1, 15),
-        }}
-      />,
-    );
-    expect(asFragment()).toMatchSnapshot();
-  });
-
-  it('should open on click', async () => {
-    render(
-      <BpkDatepicker
-        id="myDatepicker"
-        closeButtonText="Close"
-        daysOfWeek={weekDays}
-        changeMonthLabel="Change month"
-        previousMonthLabel="Go to previous month"
-        nextMonthLabel="Go to next month"
-        title="Departure date"
-        weekStartsOn={1}
-        getApplicationElement={() => document.createElement('div')}
-        formatDate={formatDate}
-        formatMonth={formatMonth}
-        formatDateFull={formatDateFull}
-        inputProps={inputProps}
-        minDate={new Date(2010, 1, 15)}
-        maxDate={new Date(2010, 2, 15)}
-        selectionConfiguration={{
-          type: CALENDAR_SELECTION_TYPE.single,
-          date: new Date(2010, 1, 15),
-        }}
-      />,
-    );
-
-    const inputField = screen.getByRole('textbox', {
-      name: /15th February 2010/i,
-    });
-    await userEvent.click(inputField);
-
-    const calendarDialog = screen.getByRole('dialog', {
-      name: 'Departure date',
-    });
-    expect(calendarDialog).toBeInTheDocument();
-  });
-
-  it('should open on focus', () => {
-    render(
-      <BpkDatepicker
-        id="myDatepicker"
-        closeButtonText="Close"
-        daysOfWeek={weekDays}
-        changeMonthLabel="Change month"
-        previousMonthLabel="Go to previous month"
-        nextMonthLabel="Go to next month"
-        title="Departure date"
-        getApplicationElement={() => document.createElement('div')}
-        formatDate={formatDate}
-        formatMonth={formatMonth}
-        formatDateFull={formatDateFull}
-        inputProps={inputProps}
-        minDate={new Date(2010, 1, 15)}
-        maxDate={new Date(2010, 2, 15)}
-        selectionConfiguration={{
-          type: CALENDAR_SELECTION_TYPE.single,
-          date: new Date(2010, 1, 15),
-        }}
-        weekStartsOn={1}
-      />,
-    );
-
-    const inputField = screen.getByRole('textbox', {
-      name: /15th February 2010/i,
-    });
-    fireEvent.focus(inputField);
-
-    const calendarDialog = screen.getByRole('dialog', {
-      name: 'Departure date',
-    });
-    expect(calendarDialog).toBeInTheDocument();
-  });
-
-  it('should open when the isOpen prop is changed from the outside', () => {
-    const getDatepicker = (isOpen: boolean) => (
-      <BpkDatepicker
-        id="myDatepicker"
-        closeButtonText="Close"
-        daysOfWeek={weekDays}
-        changeMonthLabel="Change month"
-        previousMonthLabel="Go to previous month"
-        nextMonthLabel="Go to next month"
-        title="Departure date"
-        getApplicationElement={() => document.createElement('div')}
-        formatDate={formatDate}
-        formatMonth={formatMonth}
-        formatDateFull={formatDateFull}
-        inputProps={inputProps}
-        minDate={new Date(2010, 1, 15)}
-        maxDate={new Date(2010, 2, 15)}
-        selectionConfiguration={{
-          type: CALENDAR_SELECTION_TYPE.single,
-          date: new Date(2010, 1, 15),
-        }}
-        weekStartsOn={1}
-        isOpen={isOpen}
-      />
-    );
-
-    const { rerender } = render(getDatepicker(false));
-
-    rerender(getDatepicker(true));
-
-    const calendarDialog = screen.getByRole('dialog', {
-      name: 'Departure date',
-    });
-    expect(calendarDialog).toBeInTheDocument();
-  });
-
-  it('should call onOpenChange when a date is selected', async () => {
-    const onOpenChangeMock = jest.fn();
-
-    render(
-      <BpkDatepicker
-        id="myDatepicker"
-        closeButtonText="Close"
-        daysOfWeek={weekDays}
-        changeMonthLabel="Change month"
-        previousMonthLabel="Go to previous month"
-        nextMonthLabel="Go to next month"
-        title="Departure date"
-        getApplicationElement={() => document.createElement('div')}
-        formatDate={formatDate}
-        formatMonth={formatMonth}
-        formatDateFull={formatDateFull}
-        inputProps={inputProps}
-        weekStartsOn={1}
-        minDate={new Date(2010, 1, 15)}
-        maxDate={new Date(2010, 2, 15)}
-        selectionConfiguration={{
-          type: CALENDAR_SELECTION_TYPE.single,
-          date: new Date(2010, 1, 15),
-        }}
-        onOpenChange={onOpenChangeMock}
-      />,
-    );
-
-    const inputField = screen.getByRole('textbox', {
-      name: /15th February 2010/i,
-    });
-    await userEvent.click(inputField);
-
-    const calendarDialog = screen.queryByRole('dialog', {
-      name: 'Departure date',
-    });
-    expect(calendarDialog).toBeInTheDocument();
-    expect(onOpenChangeMock).toHaveBeenCalledWith(true);
-
-    const dateButton = screen.getByRole('button', {
-      name: /15th February 2010/i,
-    });
-    await userEvent.click(dateButton);
-    expect(onOpenChangeMock).toHaveBeenCalledWith(false);
-  });
-
-  it('should close when `onClose` is called', async () => {
-    const onOpenChangeMock = jest.fn();
-
-    render(
-      <BpkDatepicker
-        id="myDatepicker"
-        closeButtonText="Close"
-        daysOfWeek={weekDays}
-        changeMonthLabel="Change month"
-        previousMonthLabel="Go to previous month"
-        nextMonthLabel="Go to next month"
-        title="Departure date"
-        weekStartsOn={1}
-        getApplicationElement={() => document.createElement('div')}
-        formatDate={formatDate}
-        formatMonth={formatMonth}
-        formatDateFull={formatDateFull}
-        inputProps={inputProps}
-        minDate={new Date(2010, 1, 15)}
-        maxDate={new Date(2010, 2, 15)}
-        selectionConfiguration={{
-          type: CALENDAR_SELECTION_TYPE.single,
-          date: new Date(2010, 1, 15),
-        }}
-        onOpenChange={onOpenChangeMock}
-        isOpen
-      />,
-    );
-
-    const calendarDialog = screen.queryByRole('dialog', {
-      name: 'Departure date',
-    });
-    expect(calendarDialog).toBeInTheDocument();
-
-    const closeButton = screen.getByRole('button', { name: 'Close' });
-    await userEvent.click(closeButton);
-    expect(calendarDialog).not.toBeInTheDocument();
-    expect(onOpenChangeMock).toHaveBeenCalledWith(false);
-  });
-});

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%;
-  }
-}