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

package/bpk-component-calendar/src/BpkCalendarNav-test.js

@@ -0,0 +1,116 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _format = _interopRequireDefault(require("date-fns/format"));
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _BpkCalendarNav = _interopRequireDefault(require("./BpkCalendarNav"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/*
+ * 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.
+ */
+const formatMonth = date => (0, _format.default)(date, 'MMMM yyyy');
+
+describe('BpkCalendarNav', () => {
+  it('should render correctly', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkCalendarNav.default, {
+      month: new Date(2010, 1, 1),
+      minDate: new Date(2010, 1, 1),
+      maxDate: new Date(2010, 2, 1),
+      formatMonth: formatMonth,
+      changeMonthLabel: "Change month",
+      previousMonthLabel: "Go to previous month",
+      nextMonthLabel: "Go to next month",
+      id: "myCalendarNav"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should disable inputs when disabled', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkCalendarNav.default, {
+      month: new Date(2010, 1, 1),
+      minDate: new Date(2010, 1, 1),
+      maxDate: new Date(2010, 2, 1),
+      formatMonth: formatMonth,
+      changeMonthLabel: "Change month",
+      previousMonthLabel: "Go to previous month",
+      nextMonthLabel: "Go to next month",
+      disabled: true,
+      id: "myCalendarNav"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should use given previousMonth and nextMonth labels correctly', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkCalendarNav.default, {
+      month: new Date(2010, 1, 1),
+      minDate: new Date(2010, 1, 1),
+      maxDate: new Date(2010, 2, 1),
+      formatMonth: formatMonth,
+      changeMonthLabel: "Change month",
+      previousMonthLabel: "Go to previous month",
+      nextMonthLabel: "Go to next month",
+      disabled: true,
+      id: "myCalendarNav"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should call the onMonthChange callback when nudging/selecting month', async () => {
+    const onMonthChange = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkCalendarNav.default, {
+      month: new Date(2010, 1, 1),
+      minDate: new Date(2010, 0, 1),
+      maxDate: new Date(2010, 2, 1),
+      formatMonth: formatMonth,
+      changeMonthLabel: "Change month",
+      previousMonthLabel: "Go to previous month",
+      nextMonthLabel: "Go to next month",
+      onMonthChange: onMonthChange,
+      id: "myCalendarNav"
+    }));
+    expect(onMonthChange.mock.calls.length).toBe(0); // Previous month
+
+    const prevMonthButton = _react2.screen.getByRole('button', {
+      name: 'Go to previous month'
+    });
+
+    await _userEvent.default.click(prevMonthButton);
+    expect(onMonthChange.mock.calls.length).toBe(1); // Next month
+
+    const nextMonthButton = _react2.screen.getByRole('button', {
+      name: 'Go to next month'
+    });
+
+    await _userEvent.default.click(nextMonthButton);
+    expect(onMonthChange.mock.calls.length).toBe(2); // Select month
+
+    const select = _react2.screen.getByRole('combobox');
+
+    await _userEvent.default.selectOptions(select, 'March 2010');
+    expect(onMonthChange.mock.calls.length).toBe(3);
+  });
+});

package/bpk-component-calendar/src/BpkCalendarNav.js

@@ -0,0 +1,179 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _arrowLeft = _interopRequireDefault(require("bpk-component-icon/lg/arrow-left"));
+
+var _arrowRight = _interopRequireDefault(require("bpk-component-icon/lg/arrow-right"));
+
+var _bpkComponentSelect = _interopRequireDefault(require("bpk-component-select"));
+
+var _bpkReactUtils = require("bpk-react-utils");
+
+var _bpkComponentAriaLive = _interopRequireDefault(require("bpk-component-aria-live"));
+
+var _dateUtils = require("./date-utils");
+
+var _BpkCalendarNavModule = _interopRequireDefault(require("./BpkCalendarNav.module.scss"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/*
+ * 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.
+ */
+const getClassName = (0, _bpkReactUtils.cssModules)(_BpkCalendarNavModule.default);
+
+const changeMonth = ({
+  callback,
+  max,
+  min,
+  month,
+  source
+}) => event => {
+  // Safeguard for disabled buttons is due to React bug in Chrome: https://github.com/facebook/react/issues/8308
+  // PR: https://github.com/facebook/react/pull/8329 - unresolved as of 22/12/2016
+  if ((0, _dateUtils.isWithinRange)(month, {
+    start: min,
+    end: max
+  })) {
+    event.persist();
+    callback(event, {
+      month,
+      source
+    });
+  }
+};
+
+const BpkCalendarNav = props => {
+  const {
+    changeMonthLabel,
+    disabled,
+    formatMonth,
+    id,
+    maxDate,
+    minDate,
+    month,
+    nextMonthLabel,
+    onMonthChange,
+    previousMonthLabel
+  } = props;
+  const baseMonth = (0, _dateUtils.startOfMonth)(month);
+  const {
+    max,
+    min
+  } = (0, _dateUtils.getMonthRange)(minDate, maxDate);
+  const navigatableMonths = (0, _dateUtils.getMonthsInRange)(minDate, maxDate);
+  const prevMonth = (0, _dateUtils.addMonths)(baseMonth, -1);
+  const nextMonth = (0, _dateUtils.addMonths)(baseMonth, 1);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: getClassName('bpk-calendar-nav')
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      display: 'table-row'
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: getClassName('bpk-calendar-nav__nudger')
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: getClassName('bpk-calendar-nav__button'),
+    id: `${id}_month_nudger_previous`,
+    onClick: changeMonth({
+      month: prevMonth,
+      min,
+      max,
+      callback: onMonthChange,
+      source: 'PREV'
+    }),
+    disabled: disabled || !(0, _dateUtils.isWithinRange)(prevMonth, {
+      start: min,
+      end: max
+    })
+  }, /*#__PURE__*/_react.default.createElement(_arrowLeft.default, {
+    className: getClassName('bpk-calendar-nav__icon')
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: getClassName('bpk-calendar-nav__text--hidden')
+  }, previousMonthLabel))), /*#__PURE__*/_react.default.createElement("div", {
+    className: getClassName('bpk-calendar-nav__month')
+  }, /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: `${id}_select`,
+    className: getClassName('bpk-calendar-nav__text--hidden')
+  }, changeMonthLabel), /*#__PURE__*/_react.default.createElement(_bpkComponentSelect.default, {
+    id: `${id}_select`,
+    name: "months",
+    value: (0, _dateUtils.formatIsoMonth)(baseMonth),
+    disabled: disabled,
+    onChange: event => {
+      event.persist();
+      onMonthChange(event, {
+        month: (0, _dateUtils.parseIsoDate)(event.target.value),
+        source: 'SELECT'
+      });
+    }
+  }, navigatableMonths.map(m => /*#__PURE__*/_react.default.createElement("option", {
+    value: (0, _dateUtils.formatIsoMonth)(m),
+    key: m.toString()
+  }, formatMonth(m))))), /*#__PURE__*/_react.default.createElement("div", {
+    className: getClassName('bpk-calendar-nav__nudger')
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: getClassName('bpk-calendar-nav__button'),
+    id: `${id}_month_nudger_next`,
+    onClick: changeMonth({
+      month: nextMonth,
+      min,
+      max,
+      callback: onMonthChange,
+      source: 'NEXT'
+    }),
+    disabled: disabled || !(0, _dateUtils.isWithinRange)((0, _dateUtils.addMonths)(baseMonth, 1), {
+      start: min,
+      end: max
+    })
+  }, /*#__PURE__*/_react.default.createElement(_arrowRight.default, {
+    className: getClassName('bpk-calendar-nav__icon')
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    className: getClassName('bpk-calendar-nav__text--hidden')
+  }, nextMonthLabel))), /*#__PURE__*/_react.default.createElement(_bpkComponentAriaLive.default, null, formatMonth(baseMonth))));
+};
+
+BpkCalendarNav.propTypes = {
+  // Required
+  changeMonthLabel: _propTypes.default.string.isRequired,
+  formatMonth: _propTypes.default.func.isRequired,
+  id: _propTypes.default.string.isRequired,
+  maxDate: _propTypes.default.instanceOf(Date).isRequired,
+  minDate: _propTypes.default.instanceOf(Date).isRequired,
+  month: _propTypes.default.instanceOf(Date).isRequired,
+  nextMonthLabel: _propTypes.default.string.isRequired,
+  previousMonthLabel: _propTypes.default.string.isRequired,
+  // Optional
+  onMonthChange: _propTypes.default.func,
+  disabled: _propTypes.default.bool
+};
+BpkCalendarNav.defaultProps = {
+  onMonthChange: null,
+  disabled: false
+};
+var _default = BpkCalendarNav;
+exports.default = _default;

package/bpk-component-calendar/src/Week-test.js

@@ -0,0 +1,154 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+require("@testing-library/jest-dom");
+
+var _startOfDay = _interopRequireDefault(require("date-fns/startOfDay"));
+
+var _ = require("..");
+
+var _Week = _interopRequireDefault(require("./Week"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+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; }
+
+const mockDateComponent = jest.fn();
+
+const DummyDateComponent = props => {
+  mockDateComponent(props);
+  return /*#__PURE__*/_react.default.createElement("div", null);
+};
+
+const initialProps = _objectSpread(_objectSpread({}, _Week.default.defaultProps), {}, {
+  DateComponent: DummyDateComponent,
+  dateModifiers: {},
+  dates: [new Date(1980, 4, 31), new Date(1980, 5, 1), new Date(1980, 5, 2), new Date(1980, 5, 3), new Date(1980, 5, 4), new Date(1980, 5, 5), new Date(1980, 5, 6)].map(_startOfDay.default),
+  formatDateFull: d => d.toString(),
+  preventKeyboardFocus: false,
+  markToday: true,
+  markOutsideDays: true,
+  isKeyboardFocusable: true,
+  month: new Date(1980, 5, 1),
+  weekStartsOn: 0
+});
+
+describe('Week', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+  it('should render correctly', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Week.default, initialProps));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should set "isOutside" prop correctly when "markOutsideDays" attribute equals to "true"', () => {
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Week.default, _extends({}, initialProps, {
+      markOutsideDays: true
+    })));
+    expect(mockDateComponent).toHaveBeenCalledWith(expect.objectContaining({
+      date: new Date(1980, 4, 31),
+      isOutside: true
+    }));
+  });
+  it('should set "isSelected" prop correctly when selectionConfiguration type is "range"', () => {
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Week.default, _extends({}, initialProps, {
+      selectionConfiguration: {
+        type: _.CALENDAR_SELECTION_TYPE.range,
+        startDate: new Date(1980, 5, 1),
+        endDate: new Date(1980, 5, 3)
+      }
+    })));
+    expect(mockDateComponent).toHaveBeenCalledWith(expect.objectContaining({
+      date: new Date(1980, 5, 1),
+      isSelected: true
+    }));
+    expect(mockDateComponent).toHaveBeenCalledWith(expect.objectContaining({
+      date: new Date(1980, 5, 2),
+      isSelected: true
+    }));
+    expect(mockDateComponent).toHaveBeenCalledWith(expect.objectContaining({
+      date: new Date(1980, 5, 3),
+      isSelected: true
+    }));
+  });
+  it('should set "isSelected" prop correctly when selectionConfiguration type is "single"', () => {
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Week.default, _extends({}, initialProps, {
+      selectionConfiguration: {
+        type: _.CALENDAR_SELECTION_TYPE.single,
+        date: new Date(1980, 5, 5)
+      }
+    })));
+    expect(mockDateComponent).toHaveBeenCalledWith(expect.objectContaining({
+      date: new Date(1980, 5, 5),
+      isSelected: true
+    }));
+  });
+  it('should not have any selected dates when selectionConfiguration has null date', () => {
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Week.default, _extends({}, initialProps, {
+      selectionConfiguration: {
+        type: _.CALENDAR_SELECTION_TYPE.single,
+        date: null
+      }
+    })));
+    expect(mockDateComponent).not.toHaveBeenCalledWith(expect.objectContaining({
+      isSelected: true
+    }));
+  });
+  it('should set "selectionType" prop correctly when selectionConfiguration type is "single"', () => {
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Week.default, _extends({}, initialProps, {
+      selectionConfiguration: {
+        type: _.CALENDAR_SELECTION_TYPE.single,
+        date: new Date(1980, 5, 5)
+      }
+    })));
+    expect(mockDateComponent).toHaveBeenCalledWith(expect.objectContaining({
+      date: new Date(1980, 5, 5),
+      selectionType: _.SELECTION_TYPES.single
+    }));
+  });
+  it('should set "selectionType" prop correctly when selectionConfiguration type is "range" and has no "endDate"', () => {
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Week.default, _extends({}, initialProps, {
+      selectionConfiguration: {
+        type: _.CALENDAR_SELECTION_TYPE.range,
+        startDate: new Date(1980, 5, 5),
+        endDate: null
+      }
+    })));
+    expect(mockDateComponent).toHaveBeenCalledWith(expect.objectContaining({
+      date: new Date(1980, 5, 5),
+      selectionType: _.SELECTION_TYPES.single
+    }));
+  });
+  it('should set "selectionType" prop correctly when selectionConfiguration type is "range"', () => {
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_Week.default, _extends({}, initialProps, {
+      selectionConfiguration: {
+        type: _.CALENDAR_SELECTION_TYPE.range,
+        startDate: new Date(1980, 5, 4),
+        endDate: new Date(1980, 5, 6)
+      }
+    })));
+    expect(mockDateComponent).toHaveBeenCalledWith(expect.objectContaining({
+      date: new Date(1980, 5, 4),
+      selectionType: _.SELECTION_TYPES.start
+    }));
+    expect(mockDateComponent).toHaveBeenCalledWith(expect.objectContaining({
+      date: new Date(1980, 5, 5),
+      selectionType: _.SELECTION_TYPES.middle
+    }));
+    expect(mockDateComponent).toHaveBeenCalledWith(expect.objectContaining({
+      date: new Date(1980, 5, 6),
+      selectionType: _.SELECTION_TYPES.end
+    }));
+  });
+});