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

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

@@ -0,0 +1,164 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _BpkCalendarDate = _interopRequireWildcard(require("./BpkCalendarDate"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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 createNodeMock = () => ({
+  focus: () => null
+});
+
+describe('BpkCalendarDate', () => {
+  it('should render correctly', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkCalendarDate.default, {
+      date: new Date(2010, 1, 15)
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should render a disabled button', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkCalendarDate.default, {
+      date: new Date(2010, 1, 15),
+      disabled: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should render a blocked button as disabled with aria-hidden applied', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkCalendarDate.default, {
+      date: new Date(2010, 1, 15),
+      isBlocked: true
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should render with a click and keyDown handler', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkCalendarDate.default, {
+      date: new Date(2010, 1, 15),
+      onClick: () => null,
+      onKeyDown: () => null
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should render a focused button with tabIndex', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkCalendarDate.default, {
+      date: new Date(2010, 1, 15),
+      isFocused: true
+    }), {
+      createNodeMock
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should pass props through to button', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkCalendarDate.default, {
+      date: new Date(2010, 1, 15),
+      "aria-label": "Nothing happened on this day in 2010"
+    }), {
+      createNodeMock
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should set a custom class', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkCalendarDate.default, {
+      date: new Date(2010, 1, 15),
+      className: "userlandClassName"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  describe('cellType tests', () => {
+    it('should render correctly with default style', () => {
+      const {
+        asFragment
+      } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkCalendarDate.default, {
+        cellType: _BpkCalendarDate.CELL_TYPES.default,
+        date: new Date(2010, 1, 15)
+      }));
+      expect(asFragment()).toMatchSnapshot();
+    });
+    it('should render correctly with positive style', () => {
+      const {
+        asFragment
+      } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkCalendarDate.default, {
+        cellType: _BpkCalendarDate.CELL_TYPES.positive,
+        date: new Date(2010, 1, 15)
+      }));
+      expect(asFragment()).toMatchSnapshot();
+    });
+    it('should render correctly with neutral style', () => {
+      const {
+        asFragment
+      } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkCalendarDate.default, {
+        cellType: _BpkCalendarDate.CELL_TYPES.neutral,
+        date: new Date(2010, 1, 15)
+      }));
+      expect(asFragment()).toMatchSnapshot();
+    });
+    it('should render correctly with negative style', () => {
+      const {
+        asFragment
+      } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkCalendarDate.default, {
+        cellType: _BpkCalendarDate.CELL_TYPES.negative,
+        date: new Date(2010, 1, 15)
+      }));
+      expect(asFragment()).toMatchSnapshot();
+    });
+    it('should render a disabled button', () => {
+      const {
+        asFragment
+      } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkCalendarDate.default, {
+        cellType: _BpkCalendarDate.CELL_TYPES.default,
+        date: new Date(2010, 1, 15),
+        disabled: true
+      }));
+      expect(asFragment()).toMatchSnapshot();
+    });
+    it('should render a focused button with tabIndex', () => {
+      const {
+        asFragment
+      } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkCalendarDate.default, {
+        cellType: _BpkCalendarDate.CELL_TYPES.default,
+        date: new Date(2010, 1, 15),
+        isFocused: true
+      }), {
+        createNodeMock
+      });
+      expect(asFragment()).toMatchSnapshot();
+    });
+  });
+});

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

@@ -1,58 +1,76 @@
-/*
- * 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 PropTypes from 'prop-types';
-import React, { PureComponent } from 'react';
-import { cssModules } from '../../bpk-react-utils';
-
-import CustomPropTypes from './custom-proptypes';
-import STYLES from './BpkCalendarDate.module.scss';
-
-const getClassName = cssModules(STYLES);
-
-export const CELL_TYPES = {
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.defaultProps = exports.default = exports.SELECTION_TYPES = exports.ROW_TYPES = exports.CELL_TYPES = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _bpkReactUtils = require("../../bpk-react-utils");
+
+var _customProptypes = _interopRequireDefault(require("./custom-proptypes"));
+
+var _BpkCalendarDateModule = _interopRequireDefault(require("./BpkCalendarDate.css"));
+
+const _excluded = ["cellType", "className", "date", "isBlocked", "isFocused", "isKeyboardFocusable", "isOutside", "isSelected", "isToday", "modifiers", "onClick", "onDateKeyDown", "selectionType", "style"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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 _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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = 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 getClassName = (0, _bpkReactUtils.cssModules)(_BpkCalendarDateModule.default);
+const CELL_TYPES = {
   default: 'default',
   negative: 'negative',
   neutral: 'neutral',
-  positive: 'positive',
+  positive: 'positive'
 };
-
-export const SELECTION_TYPES = {
+exports.CELL_TYPES = CELL_TYPES;
+const SELECTION_TYPES = {
   none: 'none',
   single: 'single',
   start: 'start',
   middle: 'middle',
   end: 'end',
-  sameDay: 'sameDay',
+  sameDay: 'sameDay'
 };
-
-export const ROW_TYPES = {
+exports.SELECTION_TYPES = SELECTION_TYPES;
+const ROW_TYPES = {
   start: 'start',
   middle: 'middle',
   end: 'end',
-  both: 'both',
+  both: 'both'
 };
+exports.ROW_TYPES = ROW_TYPES;
+
+const navigatedByMonthNudger = () => document.activeElement.id && document.activeElement.id.indexOf('month_nudger') !== -1;
 
-const navigatedByMonthNudger = () =>
-  document.activeElement.id &&
-  document.activeElement.id.indexOf('month_nudger') !== -1;
+class BpkCalendarDate extends _react.PureComponent {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "getButtonRef", button => {
+      this.button = button;
+    });
+  }
 
-class BpkCalendarDate extends PureComponent {
   componentDidMount() {
     if (!this.props.preventKeyboardFocus && this.props.isFocused) {
       // If we got here by clicking the nudger, don't focus this date
@@ -64,40 +82,25 @@ class BpkCalendarDate extends PureComponent {
   }
 
   componentDidUpdate(prevProps) {
-    if (
-      !this.props.isKeyboardFocusable ||
-      this.props.preventKeyboardFocus ||
-      navigatedByMonthNudger()
-    ) {
+    if (!this.props.isKeyboardFocusable || this.props.preventKeyboardFocus || navigatedByMonthNudger()) {
       return;
-    }
+    } // Giving focus after keyboard navigation
+
 
-    // Giving focus after keyboard navigation
-    if (
-      !prevProps.isFocused &&
-      this.props.isFocused &&
-      this.props.isKeyboardFocusable
-    ) {
+    if (!prevProps.isFocused && this.props.isFocused && this.props.isKeyboardFocusable) {
       this.button.focus();
       return;
-    }
+    } // Giving focus after changing months with transition
+
 
-    // Giving focus after changing months with transition
-    if (
-      this.props.isFocused &&
-      !prevProps.isKeyboardFocusable &&
-      this.props.isKeyboardFocusable
-    ) {
+    if (this.props.isFocused && !prevProps.isKeyboardFocusable && this.props.isKeyboardFocusable) {
       this.button.focus();
     }
   }
 
-  getButtonRef = (button) => {
-    this.button = button;
-  };
-
   render() {
-    const {
+    const _this$props = this.props,
+          {
       cellType,
       className,
       date,
@@ -111,17 +114,14 @@ class BpkCalendarDate extends PureComponent {
       onClick,
       onDateKeyDown,
       selectionType,
-      style,
-      ...buttonProps
-    } = this.props;
+      style
+    } = _this$props,
+          buttonProps = _objectWithoutProperties(_this$props, _excluded);
 
     const classNames = [getClassName('bpk-calendar-date')];
-
-    Object.keys(modifiers).forEach((modifier) => {
+    Object.keys(modifiers).forEach(modifier => {
       if (modifiers[modifier](this.props)) {
-        classNames.push(
-          getClassName(`bpk-calendar-date--modifier-${modifier}`),
-        );
+        classNames.push(getClassName(`bpk-calendar-date--modifier-${modifier}`));
       }
     });
 
@@ -133,15 +133,19 @@ class BpkCalendarDate extends PureComponent {
     if (isFocused) {
       classNames.push(getClassName('bpk-calendar-date--focused'));
     }
+
     if (isSelected) {
       classNames.push(getClassName('bpk-calendar-date--selected'));
     }
+
     if (isBlocked) {
       classNames.push(getClassName('bpk-calendar-date--blocked'));
     }
+
     if (isOutside) {
       classNames.push(getClassName('bpk-calendar-date--outside'));
     }
+
     if (isToday) {
       classNames.push(getClassName('bpk-calendar-date--today'));
     }
@@ -155,55 +159,51 @@ class BpkCalendarDate extends PureComponent {
     }
 
     delete buttonProps.preventKeyboardFocus;
-
-    return (
-      <button
-        type="button"
-        style={style}
-        className={classNames.join(' ')}
-        aria-hidden={isBlocked}
-        aria-label={date.getDate()}
-        disabled={isBlocked}
-        tabIndex={isKeyboardFocusable && isFocused ? '0' : '-1'}
-        onClick={() => {
-          if (onClick) {
-            onClick(date);
-          }
-        }}
-        onKeyDown={onDateKeyDown}
-        aria-pressed={isSelected}
-        ref={this.getButtonRef}
-        {...buttonProps}
-      >
-        <span aria-hidden="true">{date.getDate()}</span>
-      </button>
-    );
+    return /*#__PURE__*/_react.default.createElement("button", _extends({
+      type: "button",
+      style: style,
+      className: classNames.join(' '),
+      "aria-hidden": isBlocked,
+      "aria-label": date.getDate(),
+      disabled: isBlocked,
+      tabIndex: isKeyboardFocusable && isFocused ? '0' : '-1',
+      onClick: () => {
+        if (onClick) {
+          onClick(date);
+        }
+      },
+      onKeyDown: onDateKeyDown,
+      "aria-pressed": isSelected,
+      ref: this.getButtonRef
+    }, buttonProps), /*#__PURE__*/_react.default.createElement("span", {
+      "aria-hidden": "true"
+    }, date.getDate()));
   }
+
 }
 
-export const propTypes = {
+const propTypes = {
   // Required
-  date: PropTypes.instanceOf(Date).isRequired,
+  date: _propTypes.default.instanceOf(Date).isRequired,
   // Optional
-  cellType: PropTypes.oneOf(Object.keys(CELL_TYPES)),
-  className: PropTypes.string,
-  isBlocked: PropTypes.bool,
-  isFocused: PropTypes.bool,
-  isKeyboardFocusable: PropTypes.bool,
-  isOutside: PropTypes.bool,
-  isSelected: PropTypes.bool,
-  isToday: PropTypes.bool,
-  modifiers: CustomPropTypes.DateModifiers,
-  onClick: PropTypes.func,
-  onDateKeyDown: PropTypes.func,
-  preventKeyboardFocus: PropTypes.bool,
-  selectionType: PropTypes.oneOf(Object.keys(SELECTION_TYPES)),
-  style: PropTypes.object,
+  cellType: _propTypes.default.oneOf(Object.keys(CELL_TYPES)),
+  className: _propTypes.default.string,
+  isBlocked: _propTypes.default.bool,
+  isFocused: _propTypes.default.bool,
+  isKeyboardFocusable: _propTypes.default.bool,
+  isOutside: _propTypes.default.bool,
+  isSelected: _propTypes.default.bool,
+  isToday: _propTypes.default.bool,
+  modifiers: _customProptypes.default.DateModifiers,
+  onClick: _propTypes.default.func,
+  onDateKeyDown: _propTypes.default.func,
+  preventKeyboardFocus: _propTypes.default.bool,
+  selectionType: _propTypes.default.oneOf(Object.keys(SELECTION_TYPES)),
+  style: _propTypes.default.object
 };
-
-BpkCalendarDate.propTypes = { ...propTypes };
-
-export const defaultProps = {
+exports.propTypes = propTypes;
+BpkCalendarDate.propTypes = _objectSpread({}, propTypes);
+const defaultProps = {
   className: null,
   cellType: null,
   isBlocked: false,
@@ -217,11 +217,9 @@ export const defaultProps = {
   onDateKeyDown: null,
   preventKeyboardFocus: true,
   selectionType: SELECTION_TYPES.none,
-  style: null,
+  style: null
 };
-
-BpkCalendarDate.defaultProps = {
-  ...defaultProps,
-};
-
-export default BpkCalendarDate;
+exports.defaultProps = defaultProps;
+BpkCalendarDate.defaultProps = _objectSpread({}, defaultProps);
+var _default = BpkCalendarDate;
+exports.default = _default;

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

@@ -0,0 +1,140 @@
+"use strict";
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _isWeekend = _interopRequireDefault(require("date-fns/isWeekend"));
+
+var _base = require("@skyscanner/bpk-foundations-web/tokens/base.es6");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _testUtils = require("../test-utils");
+
+var _BpkCalendarGrid = _interopRequireDefault(require("./BpkCalendarGrid"));
+
+var _BpkCalendarDate = _interopRequireDefault(require("./BpkCalendarDate"));
+
+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.
+ */
+describe('BpkCalendarGrid', () => {
+  it('should render correctly with a different "weekStartsOn" attribute', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkCalendarGrid.default, {
+      month: new Date('2016-10'),
+      formatMonth: _testUtils.formatMonth,
+      formatDateFull: _testUtils.formatDateFull,
+      DateComponent: _BpkCalendarDate.default,
+      daysOfWeek: _testUtils.weekDays,
+      weekStartsOn: 3
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should render correctly with a "dateModifiers" attribute', () => {
+    const modifiers = {
+      someClass: () => true
+    };
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkCalendarGrid.default, {
+      month: new Date('2016-10'),
+      formatMonth: _testUtils.formatMonth,
+      formatDateFull: _testUtils.formatDateFull,
+      DateComponent: _BpkCalendarDate.default,
+      daysOfWeek: _testUtils.weekDays,
+      weekStartsOn: 1,
+      dateModifiers: modifiers
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should render correctly with a custom date component', () => {
+    const MyCustomDate = props => {
+      const cx = {
+        backgroundColor: _base.colorPanjin,
+        width: '50%',
+        height: '50%',
+        borderRadius: '5rem',
+        margin: '25%'
+      };
+
+      if ((0, _isWeekend.default)(props.date)) {
+        cx.backgroundColor = _base.colorMonteverde;
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        style: cx
+      });
+    };
+
+    MyCustomDate.propTypes = {
+      date: _propTypes.default.instanceOf(Date).isRequired
+    };
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkCalendarGrid.default, {
+      month: new Date('2016-10'),
+      formatMonth: _testUtils.formatMonth,
+      formatDateFull: _testUtils.formatDateFull,
+      DateComponent: MyCustomDate,
+      daysOfWeek: _testUtils.weekDays,
+      weekStartsOn: 1
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  it('should call the onDateClick callback', async () => {
+    const onDateClick = jest.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkCalendarGrid.default, {
+      month: new Date('2016-10'),
+      formatMonth: _testUtils.formatMonth,
+      formatDateFull: _testUtils.formatDateFull,
+      DateComponent: _BpkCalendarDate.default,
+      daysOfWeek: _testUtils.weekDays,
+      weekStartsOn: 0,
+      onDateClick: onDateClick
+    }));
+    expect(onDateClick.mock.calls.length).toBe(0);
+
+    const date = _react2.screen.getByRole('button', {
+      name: /15th October 2016/i
+    });
+
+    await _userEvent.default.click(date);
+    expect(onDateClick.mock.calls.length).toBe(1);
+    expect(onDateClick.mock.calls[0][0]).toEqual(new Date(2016, 9, 15));
+  });
+  it('should render correctly with "weekDayKey" attribute set to nameNarrow', () => {
+    const {
+      asFragment
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_BpkCalendarGrid.default, {
+      month: new Date('2016-10'),
+      formatMonth: _testUtils.formatMonth,
+      formatDateFull: _testUtils.formatDateFull,
+      DateComponent: _BpkCalendarDate.default,
+      daysOfWeek: _testUtils.weekDays,
+      weekStartsOn: 0,
+      weekDayKey: "nameNarrow"
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+});