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

package/bpk-component-datepicker/src/BpkDatepicker-test.js

@@ -1,377 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@testing-library/react");
-
-require("@testing-library/jest-dom");
-
-var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-
-var _testUtils = require("../../bpk-component-calendar/test-utils");
-
-var _dateUtils = require("../../bpk-component-calendar/src/date-utils");
-
-var _bpkComponentCalendar = require("../../bpk-component-calendar");
-
-var _BpkDatepicker = _interopRequireDefault(require("./BpkDatepicker"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-jest.mock('./../node_modules/bpk-component-popover/node_modules/@popperjs/core', () => {
-  const PopperJS = jest.requireActual('./../node_modules/bpk-component-popover/node_modules/@popperjs/core');
-  return _objectSpread(_objectSpread({
-    __esModule: true
-  }, PopperJS), {}, {
-    createPopper: jest.fn(() => ({
-      update: jest.fn(),
-      destroy: jest.fn()
-    }))
-  });
-});
-
-const formatDate = date => (0, _dateUtils.format)(date, 'dd/MM/yyyy');
-
-const inputProps = {
-  onChange: () => null,
-  placeholder: 'placeholder',
-  large: true
-};
-describe('BpkDatepicker', () => {
-  it('should render correctly', () => {
-    const {
-      asFragment
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkDatepicker.default, {
-      id: "myDatepicker",
-      closeButtonText: "Close",
-      daysOfWeek: _testUtils.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: _testUtils.formatMonth,
-      formatDateFull: _testUtils.formatDateFull,
-      inputProps: inputProps,
-      minDate: new Date(2010, 1, 15),
-      maxDate: new Date(2010, 2, 15),
-      selectionConfiguration: {
-        type: _bpkComponentCalendar.CALENDAR_SELECTION_TYPE.single,
-        date: new Date(2010, 1, 15)
-      }
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  it('should render range correctly', () => {
-    const {
-      asFragment
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkDatepicker.default, {
-      id: "myDatepicker",
-      closeButtonText: "Close",
-      daysOfWeek: _testUtils.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: _testUtils.formatMonth,
-      formatDateFull: _testUtils.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
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkDatepicker.default, {
-      valid: false,
-      id: "myDatepicker",
-      closeButtonText: "Close",
-      daysOfWeek: _testUtils.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: _testUtils.formatMonth,
-      formatDateFull: _testUtils.formatDateFull,
-      inputProps: inputProps,
-      minDate: new Date(2010, 1, 15),
-      maxDate: new Date(2010, 2, 15),
-      selectionConfiguration: {
-        type: _bpkComponentCalendar.CALENDAR_SELECTION_TYPE.single,
-        date: new Date(2010, 1, 15)
-      }
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  it('should render correctly with datepicker open', () => {
-    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkDatepicker.default, {
-      id: "myDatepicker",
-      closeButtonText: "Close",
-      daysOfWeek: _testUtils.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: _testUtils.formatMonth,
-      formatDateFull: _testUtils.formatDateFull,
-      inputProps: inputProps,
-      minDate: new Date(2010, 1, 15),
-      maxDate: new Date(2010, 2, 15),
-      selectionConfiguration: {
-        type: _bpkComponentCalendar.CALENDAR_SELECTION_TYPE.single,
-        date: new Date(2010, 1, 15)
-      },
-      isOpen: true
-    }));
-
-    const calendarDialog = _react2.screen.queryByRole('dialog', {
-      name: 'Departure date'
-    });
-
-    expect(calendarDialog).toBeInTheDocument();
-  });
-  it('"readOnly" can be overriden in "inputProps"', () => {
-    const noReadOnlyInputProps = _objectSpread(_objectSpread({}, inputProps), {}, {
-      readOnly: false
-    });
-
-    const {
-      asFragment
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkDatepicker.default, {
-      id: "myDatepicker",
-      closeButtonText: "Close",
-      daysOfWeek: _testUtils.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: _testUtils.formatMonth,
-      formatDateFull: _testUtils.formatDateFull,
-      inputProps: noReadOnlyInputProps,
-      minDate: new Date(2010, 1, 15),
-      maxDate: new Date(2010, 2, 15),
-      selectionConfiguration: {
-        type: _bpkComponentCalendar.CALENDAR_SELECTION_TYPE.single,
-        date: new Date(2010, 1, 15)
-      }
-    }));
-    expect(asFragment()).toMatchSnapshot();
-  });
-  it('should open on click', async () => {
-    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkDatepicker.default, {
-      id: "myDatepicker",
-      closeButtonText: "Close",
-      daysOfWeek: _testUtils.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: _testUtils.formatMonth,
-      formatDateFull: _testUtils.formatDateFull,
-      inputProps: inputProps,
-      minDate: new Date(2010, 1, 15),
-      maxDate: new Date(2010, 2, 15),
-      selectionConfiguration: {
-        type: _bpkComponentCalendar.CALENDAR_SELECTION_TYPE.single,
-        date: new Date(2010, 1, 15)
-      }
-    }));
-
-    const inputField = _react2.screen.getByRole('textbox', {
-      name: /15th February 2010/i
-    });
-
-    await _userEvent.default.click(inputField);
-
-    const calendarDialog = _react2.screen.getByRole('dialog', {
-      name: 'Departure date'
-    });
-
-    expect(calendarDialog).toBeInTheDocument();
-  });
-  it('should open on focus', () => {
-    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkDatepicker.default, {
-      id: "myDatepicker",
-      closeButtonText: "Close",
-      daysOfWeek: _testUtils.weekDays,
-      changeMonthLabel: "Change month",
-      previousMonthLabel: "Go to previous month",
-      nextMonthLabel: "Go to next month",
-      title: "Departure date",
-      getApplicationElement: () => document.createElement('div'),
-      formatDate: formatDate,
-      formatMonth: _testUtils.formatMonth,
-      formatDateFull: _testUtils.formatDateFull,
-      inputProps: inputProps,
-      minDate: new Date(2010, 1, 15),
-      maxDate: new Date(2010, 2, 15),
-      selectionConfiguration: {
-        type: _bpkComponentCalendar.CALENDAR_SELECTION_TYPE.single,
-        date: new Date(2010, 1, 15)
-      },
-      weekStartsOn: 1
-    }));
-
-    const inputField = _react2.screen.getByRole('textbox', {
-      name: /15th February 2010/i
-    });
-
-    _react2.fireEvent.focus(inputField);
-
-    const calendarDialog = _react2.screen.getByRole('dialog', {
-      name: 'Departure date'
-    });
-
-    expect(calendarDialog).toBeInTheDocument();
-  });
-  it('should open when the isOpen prop is changed from the outside', () => {
-    const getDatepicker = isOpen => /*#__PURE__*/_react.default.createElement(_BpkDatepicker.default, {
-      id: "myDatepicker",
-      closeButtonText: "Close",
-      daysOfWeek: _testUtils.weekDays,
-      changeMonthLabel: "Change month",
-      previousMonthLabel: "Go to previous month",
-      nextMonthLabel: "Go to next month",
-      title: "Departure date",
-      getApplicationElement: () => document.createElement('div'),
-      formatDate: formatDate,
-      formatMonth: _testUtils.formatMonth,
-      formatDateFull: _testUtils.formatDateFull,
-      inputProps: inputProps,
-      minDate: new Date(2010, 1, 15),
-      maxDate: new Date(2010, 2, 15),
-      selectionConfiguration: {
-        type: _bpkComponentCalendar.CALENDAR_SELECTION_TYPE.single,
-        date: new Date(2010, 1, 15)
-      },
-      weekStartsOn: 1,
-      isOpen: isOpen
-    });
-
-    const {
-      rerender
-    } = (0, _react2.render)(getDatepicker(false));
-    rerender(getDatepicker(true));
-
-    const calendarDialog = _react2.screen.getByRole('dialog', {
-      name: 'Departure date'
-    });
-
-    expect(calendarDialog).toBeInTheDocument();
-  });
-  it('should call onOpenChange when a date is selected', async () => {
-    const onOpenChangeMock = jest.fn();
-    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkDatepicker.default, {
-      id: "myDatepicker",
-      closeButtonText: "Close",
-      daysOfWeek: _testUtils.weekDays,
-      changeMonthLabel: "Change month",
-      previousMonthLabel: "Go to previous month",
-      nextMonthLabel: "Go to next month",
-      title: "Departure date",
-      getApplicationElement: () => document.createElement('div'),
-      formatDate: formatDate,
-      formatMonth: _testUtils.formatMonth,
-      formatDateFull: _testUtils.formatDateFull,
-      inputProps: inputProps,
-      weekStartsOn: 1,
-      minDate: new Date(2010, 1, 15),
-      maxDate: new Date(2010, 2, 15),
-      selectionConfiguration: {
-        type: _bpkComponentCalendar.CALENDAR_SELECTION_TYPE.single,
-        date: new Date(2010, 1, 15)
-      },
-      onOpenChange: onOpenChangeMock
-    }));
-
-    const inputField = _react2.screen.getByRole('textbox', {
-      name: /15th February 2010/i
-    });
-
-    await _userEvent.default.click(inputField);
-
-    const calendarDialog = _react2.screen.queryByRole('dialog', {
-      name: 'Departure date'
-    });
-
-    expect(calendarDialog).toBeInTheDocument();
-    expect(onOpenChangeMock).toHaveBeenCalledWith(true);
-
-    const dateButton = _react2.screen.getByRole('button', {
-      name: /15th February 2010/i
-    });
-
-    await _userEvent.default.click(dateButton);
-    expect(onOpenChangeMock).toHaveBeenCalledWith(false);
-  });
-  it('should close when `onClose` is called', async () => {
-    const onOpenChangeMock = jest.fn();
-    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkDatepicker.default, {
-      id: "myDatepicker",
-      closeButtonText: "Close",
-      daysOfWeek: _testUtils.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: _testUtils.formatMonth,
-      formatDateFull: _testUtils.formatDateFull,
-      inputProps: inputProps,
-      minDate: new Date(2010, 1, 15),
-      maxDate: new Date(2010, 2, 15),
-      selectionConfiguration: {
-        type: _bpkComponentCalendar.CALENDAR_SELECTION_TYPE.single,
-        date: new Date(2010, 1, 15)
-      },
-      onOpenChange: onOpenChangeMock,
-      isOpen: true
-    }));
-
-    const calendarDialog = _react2.screen.queryByRole('dialog', {
-      name: 'Departure date'
-    });
-
-    expect(calendarDialog).toBeInTheDocument();
-
-    const closeButton = _react2.screen.getByRole('button', {
-      name: 'Close'
-    });
-
-    await _userEvent.default.click(closeButton);
-    expect(calendarDialog).not.toBeInTheDocument();
-    expect(onOpenChangeMock).toHaveBeenCalledWith(false);
-  });
-});

package/bpk-component-datepicker/src/BpkDatepicker.css

@@ -1,18 +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.
-*/
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-datepicker__calendar{margin:0 auto}