@skyscanner/backpack-web 17.1.0-beta.1 → 17.1.0

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

@@ -1,60 +1,87 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.propTypes = exports.default = exports.BpkCalendarGridWithTransition = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireWildcard(require("react"));
-var _bpkReactUtils = require("../../bpk-react-utils");
-var _BpkCalendarGridHeader = _interopRequireDefault(require("./BpkCalendarGridHeader"));
-var _Week = _interopRequireDefault(require("./Week"));
-var _dateUtils = require("./date-utils");
-var _customProptypes = _interopRequireWildcard(require("./custom-proptypes"));
-var _BpkCalendarGridModule = _interopRequireDefault(require("./BpkCalendarGrid.module.css"));
-var _BpkCalendarGridTransition = require("./BpkCalendarGridTransition");
-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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-// This should be imported after `./BpkCalendarGrid.module.css`.
+/*
+ * 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, { Component } from 'react';
+
+import { cssModules, deprecated, isDeviceIos } from '../../bpk-react-utils';
+
+import BpkCalendarGridHeader from './BpkCalendarGridHeader';
+import Week from './Week';
+import {
+  addMonths,
+  formatIsoDate,
+  getCalendarMonthWeeks,
+  isSameMonth,
+  orderDaysOfWeek,
+} from './date-utils';
+import CustomPropTypes, { CALENDAR_SELECTION_TYPE } from './custom-proptypes';
+import STYLES from './BpkCalendarGrid.module.scss';
+import { addCalendarGridTransition } from './BpkCalendarGridTransition';
+// This should be imported after `./BpkCalendarGrid.module.scss`.
 // Because of how css specificity works the class `bpk-calendar-grid-transition__grid` needs to be defined
-// after `bpk-calendar-grid` (defined by BpkCalendarGrid.module.css) so it can override width and display of the calendar
+// after `bpk-calendar-grid` (defined by BpkCalendarGrid.module.scss) so it can override width and display of the calendar
 
 // This is because the calendar with transiction is expected to have a fixed width and whenever `bpk-calendar-grid-transition__grid`
 // class is applyed it should override the calendar style.
 
-// NOTE that ./Week is also importing ./BpkCalendarGrid.module.css so adding this after `./Week` would also do the job but
+// NOTE that ./Week is also importing ./BpkCalendarGrid.module.scss so adding this after `./Week` would also do the job but
 // for clarity we should leave it here.
 
-const getClassName = (0, _bpkReactUtils.cssModules)(_BpkCalendarGridModule.default);
+const getClassName = cssModules(STYLES);
 
 /*
   BpkCalendarGrid - the grid representing a whole month
 */
-class BpkCalendarGrid extends _react.Component {
+class BpkCalendarGrid extends Component {
   constructor(props) {
     super(props);
 
     // We cache expensive calculations (and identities) in state
     this.state = {
-      calendarMonthWeeks: (0, _dateUtils.getCalendarMonthWeeks)(props.month, props.weekStartsOn),
-      daysOfWeek: (0, _dateUtils.orderDaysOfWeek)(props.daysOfWeek, props.weekStartsOn)
+      calendarMonthWeeks: getCalendarMonthWeeks(
+        props.month,
+        props.weekStartsOn,
+      ),
+      daysOfWeek: orderDaysOfWeek(props.daysOfWeek, props.weekStartsOn),
     };
   }
+
   UNSAFE_componentWillReceiveProps(nextProps) {
     // We cache expensive calculations (and identities) in state
-    if (nextProps.daysOfWeek !== this.props.daysOfWeek || !(0, _dateUtils.isSameMonth)(nextProps.month, this.props.month) || nextProps.weekStartsOn !== this.props.weekStartsOn) {
+    if (
+      nextProps.daysOfWeek !== this.props.daysOfWeek ||
+      !isSameMonth(nextProps.month, this.props.month) ||
+      nextProps.weekStartsOn !== this.props.weekStartsOn
+    ) {
       this.setState({
-        calendarMonthWeeks: (0, _dateUtils.getCalendarMonthWeeks)(nextProps.month, nextProps.weekStartsOn),
-        daysOfWeek: (0, _dateUtils.orderDaysOfWeek)(nextProps.daysOfWeek, nextProps.weekStartsOn)
+        calendarMonthWeeks: getCalendarMonthWeeks(
+          nextProps.month,
+          nextProps.weekStartsOn,
+        ),
+        daysOfWeek: orderDaysOfWeek(
+          nextProps.daysOfWeek,
+          nextProps.weekStartsOn,
+        ),
       });
     }
   }
+
   render() {
     const {
       DateComponent,
@@ -78,80 +105,94 @@ class BpkCalendarGrid extends _react.Component {
       selectionConfiguration,
       selectionEnd,
       selectionStart,
-      weekStartsOn
+      weekStartsOn,
     } = this.props;
-    const {
-      calendarMonthWeeks,
-      daysOfWeek
-    } = this.state;
+
+    const { calendarMonthWeeks, daysOfWeek } = this.state;
+
     const classNames = getClassName('bpk-calendar-grid', className);
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: classNames,
-      "aria-hidden": !isKeyboardFocusable
-    }, /*#__PURE__*/_react.default.createElement("caption", {
-      className: getClassName('bpk-calendar-grid__caption'),
-      hidden: true
-    }, formatMonth(month)), /*#__PURE__*/_react.default.createElement(_BpkCalendarGridHeader.default, {
-      isTableHead: true,
-      daysOfWeek: daysOfWeek,
-      weekStartsOn: weekStartsOn
-    }), /*#__PURE__*/_react.default.createElement("div", null, calendarMonthWeeks.map(dates => /*#__PURE__*/_react.default.createElement(_Week.default, {
-      key: (0, _dateUtils.formatIsoDate)(dates[0]),
-      month: month,
-      dates: dates,
-      onDateClick: onDateClick,
-      onDateKeyDown: onDateKeyDown,
-      formatDateFull: formatDateFull,
-      DateComponent: DateComponent,
-      dateModifiers: dateModifiers,
-      preventKeyboardFocus: preventKeyboardFocus,
-      isKeyboardFocusable: isKeyboardFocusable,
-      weekStartsOn: weekStartsOn,
-      markToday: markToday,
-      markOutsideDays: markOutsideDays,
-      selectionConfiguration: selectionConfiguration,
-      selectionEnd: selectionEnd,
-      selectionStart: selectionStart,
-      focusedDate: focusedDate,
-      minDate: minDate,
-      maxDate: maxDate,
-      ignoreOutsideDate: ignoreOutsideDate,
-      dateProps: dateProps,
-      cellClassName: cellClassName
-    }))));
+
+    return (
+      <div className={classNames} aria-hidden={!isKeyboardFocusable}>
+        <caption className={getClassName('bpk-calendar-grid__caption')} hidden>
+          {formatMonth(month)}
+        </caption>
+        <BpkCalendarGridHeader
+          isTableHead
+          daysOfWeek={daysOfWeek}
+          weekStartsOn={weekStartsOn}
+        />
+        <div>
+          {calendarMonthWeeks.map((dates) => (
+            <Week
+              key={formatIsoDate(dates[0])}
+              month={month}
+              dates={dates}
+              onDateClick={onDateClick}
+              onDateKeyDown={onDateKeyDown}
+              formatDateFull={formatDateFull}
+              DateComponent={DateComponent}
+              dateModifiers={dateModifiers}
+              preventKeyboardFocus={preventKeyboardFocus}
+              isKeyboardFocusable={isKeyboardFocusable}
+              weekStartsOn={weekStartsOn}
+              markToday={markToday}
+              markOutsideDays={markOutsideDays}
+              selectionConfiguration={selectionConfiguration}
+              selectionEnd={selectionEnd}
+              selectionStart={selectionStart}
+              focusedDate={focusedDate}
+              minDate={minDate}
+              maxDate={maxDate}
+              ignoreOutsideDate={ignoreOutsideDate}
+              dateProps={dateProps}
+              cellClassName={cellClassName}
+            />
+          ))}
+        </div>
+      </div>
+    );
   }
 }
-const propTypes = {
+
+export const propTypes = {
   // Required
-  DateComponent: _propTypes.default.elementType.isRequired,
-  daysOfWeek: _customProptypes.default.DaysOfWeek.isRequired,
-  formatDateFull: _propTypes.default.func.isRequired,
-  formatMonth: _propTypes.default.func.isRequired,
-  month: _propTypes.default.instanceOf(Date).isRequired,
-  weekStartsOn: _propTypes.default.number.isRequired,
+  DateComponent: PropTypes.elementType.isRequired,
+  daysOfWeek: CustomPropTypes.DaysOfWeek.isRequired,
+  formatDateFull: PropTypes.func.isRequired,
+  formatMonth: PropTypes.func.isRequired,
+  month: PropTypes.instanceOf(Date).isRequired,
+  weekStartsOn: PropTypes.number.isRequired,
   // Optional
-  className: _propTypes.default.string,
-  cellClassName: _propTypes.default.string,
-  dateModifiers: _customProptypes.default.DateModifiers,
-  focusedDate: _propTypes.default.instanceOf(Date),
-  isKeyboardFocusable: _propTypes.default.bool,
-  markOutsideDays: _propTypes.default.bool,
-  markToday: _propTypes.default.bool,
-  maxDate: _propTypes.default.instanceOf(Date),
-  minDate: _propTypes.default.instanceOf(Date),
-  onDateClick: _propTypes.default.func,
-  onDateKeyDown: _propTypes.default.func,
-  preventKeyboardFocus: _propTypes.default.bool,
-  selectionConfiguration: _customProptypes.default.SelectionConfiguration,
-  selectedDate: (0, _bpkReactUtils.deprecated)(_propTypes.default.instanceOf(Date), 'Use selectionConfiguration to set selectedDate'),
-  selectionEnd: _propTypes.default.instanceOf(Date),
-  selectionStart: _propTypes.default.instanceOf(Date),
-  showWeekendSeparator: (0, _bpkReactUtils.deprecated)(_propTypes.default.bool, 'The showWeekendSeparator prop in BpkCalendarGrid is now deprecated as no longer part of the calendar, so is no longer required'),
-  ignoreOutsideDate: _propTypes.default.bool,
-  dateProps: _propTypes.default.object
+  className: PropTypes.string,
+  cellClassName: PropTypes.string,
+  dateModifiers: CustomPropTypes.DateModifiers,
+  focusedDate: PropTypes.instanceOf(Date),
+  isKeyboardFocusable: PropTypes.bool,
+  markOutsideDays: PropTypes.bool,
+  markToday: PropTypes.bool,
+  maxDate: PropTypes.instanceOf(Date),
+  minDate: PropTypes.instanceOf(Date),
+  onDateClick: PropTypes.func,
+  onDateKeyDown: PropTypes.func,
+  preventKeyboardFocus: PropTypes.bool,
+  selectionConfiguration: CustomPropTypes.SelectionConfiguration,
+  selectedDate: deprecated(
+    PropTypes.instanceOf(Date),
+    'Use selectionConfiguration to set selectedDate',
+  ),
+  selectionEnd: PropTypes.instanceOf(Date),
+  selectionStart: PropTypes.instanceOf(Date),
+  showWeekendSeparator: deprecated(
+    PropTypes.bool,
+    'The showWeekendSeparator prop in BpkCalendarGrid is now deprecated as no longer part of the calendar, so is no longer required',
+  ),
+  ignoreOutsideDate: PropTypes.bool,
+  dateProps: PropTypes.object,
 };
-exports.propTypes = propTypes;
-BpkCalendarGrid.propTypes = _objectSpread({}, propTypes);
+
+BpkCalendarGrid.propTypes = { ...propTypes };
+
 BpkCalendarGrid.defaultProps = {
   className: null,
   dateModifiers: {},
@@ -159,25 +200,24 @@ BpkCalendarGrid.defaultProps = {
   isKeyboardFocusable: true,
   markOutsideDays: true,
   markToday: true,
-  maxDate: (0, _dateUtils.addMonths)(new Date(), 12),
+  maxDate: addMonths(new Date(), 12),
   minDate: new Date(),
   onDateClick: null,
   onDateKeyDown: null,
   preventKeyboardFocus: false,
   selectedDate: null,
-  selectionConfiguration: {
-    type: _customProptypes.CALENDAR_SELECTION_TYPE.single,
-    date: null
-  },
+  selectionConfiguration: { type: CALENDAR_SELECTION_TYPE.single, date: null },
   selectionEnd: null,
   selectionStart: null,
   ignoreOutsideDate: false,
   dateProps: null,
-  cellClassName: null
+  cellClassName: null,
 };
 
 // On iOS, having transitions causes accessibility issues, so we disable it (KOA-4467).
-const BpkCalendarGridWithTransition = (0, _bpkReactUtils.isDeviceIos)() ? BpkCalendarGrid : (0, _BpkCalendarGridTransition.addCalendarGridTransition)(BpkCalendarGrid);
-exports.BpkCalendarGridWithTransition = BpkCalendarGridWithTransition;
-var _default = BpkCalendarGrid;
-exports.default = _default;
+const BpkCalendarGridWithTransition = isDeviceIos()
+  ? BpkCalendarGrid
+  : addCalendarGridTransition(BpkCalendarGrid);
+
+export default BpkCalendarGrid;
+export { BpkCalendarGridWithTransition };

package/bpk-component-calendar/src/BpkCalendarGrid.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar-grid{width:100%;border-collapse:separate;border-spacing:0}.bpk-calendar-grid--animating{z-index:1;transition:transform 0.2s ease-in-out}.bpk-calendar-grid__caption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-calendar-grid__date{width:100%;text-align:center}.bpk-calendar-grid__date--start{background-image:linear-gradient(to right, #fff 50%, #e0e3e5 50%)}.bpk-calendar-grid__date--middle{background-color:#e0e3e5}.bpk-calendar-grid__date--end{background-image:linear-gradient(to left, #fff 50%, #e0e3e5 50%)}.bpk-calendar-grid__week{display:flex;padding-top:1.5rem}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar-grid{width:100%;border-collapse:separate;border-spacing:0}.bpk-calendar-grid--animating{z-index:1;transition:transform 0.2s ease-in-out}.bpk-calendar-grid__caption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-calendar-grid__date{width:100%;text-align:center}.bpk-calendar-grid__date--start{background-image:linear-gradient(to right, #fff 50%, #cddff8 50%)}.bpk-calendar-grid__date--middle{background-color:#cddff8}.bpk-calendar-grid__date--end{background-image:linear-gradient(to left, #fff 50%, #cddff8 50%)}.bpk-calendar-grid__week{display:flex;padding-top:1.5rem}

package/bpk-component-calendar/src/BpkCalendarGrid.module.scss

@@ -0,0 +1,65 @@
+/*
+ * 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';
+@import 'variables.scss';
+
+.bpk-calendar-grid {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+
+  &--animating {
+    z-index: 1;
+    transition: transform 0.2s ease-in-out;
+  }
+
+  &__caption {
+    @include bpk-visually-hidden;
+  }
+
+  &__date {
+    width: 100%;
+    text-align: center;
+
+    &--start {
+      background-image: linear-gradient(
+        to right,
+        $bpk-surface-default-day 50%,
+        $bpk-surface-highlight-day 50%
+      );
+    }
+
+    &--middle {
+      background-color: $bpk-surface-highlight-day;
+    }
+
+    &--end {
+      background-image: linear-gradient(
+        to left,
+        $bpk-surface-default-day 50%,
+        $bpk-surface-highlight-day 50%
+      );
+    }
+  }
+
+  &__week {
+    display: flex;
+    padding-top: bpk-spacing-lg();
+  }
+}

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

@@ -1,18 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = 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 _dateUtils = require("./date-utils");
-var _BpkCalendarGridHeaderModule = _interopRequireDefault(require("./BpkCalendarGridHeader.module.css"));
-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
  *
@@ -31,42 +16,53 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * limitations under the License.
  */
 
-const getClassName = (0, _bpkReactUtils.cssModules)(_BpkCalendarGridHeaderModule.default);
+import PropTypes from 'prop-types';
+import React, { PureComponent } from 'react';
+
+import { cssModules, deprecated } from '../../bpk-react-utils';
+
+import CustomPropTypes from './custom-proptypes';
+import { orderDaysOfWeek } from './date-utils';
+import STYLES from './BpkCalendarGridHeader.module.scss';
+
+const getClassName = cssModules(STYLES);
 
 /*
   WeekDay - table header cells such as "Mon", "Tue", "Wed"...
 */
-const WeekDay = props => {
-  const {
-    Element,
-    weekDay,
-    weekDayKey
-  } = props;
-  return /*#__PURE__*/_react.default.createElement(Element, {
-    className: getClassName('bpk-calendar-header__weekday'),
-    title: weekDay.name
-  }, /*#__PURE__*/_react.default.createElement("span", null, weekDay[weekDayKey]));
+const WeekDay = (props) => {
+  const { Element, weekDay, weekDayKey } = props;
+
+  return (
+    <Element
+      className={getClassName('bpk-calendar-header__weekday')}
+      title={weekDay.name}
+    >
+      <span>{weekDay[weekDayKey]}</span>
+    </Element>
+  );
 };
+
 WeekDay.propTypes = {
-  Element: _customProptypes.default.ReactComponent.isRequired,
-  weekDay: _customProptypes.default.WeekDay.isRequired,
-  weekDayKey: _customProptypes.default.WeekDayKey
+  Element: CustomPropTypes.ReactComponent.isRequired,
+  weekDay: CustomPropTypes.WeekDay.isRequired,
+  weekDayKey: CustomPropTypes.WeekDayKey,
 };
+
 WeekDay.defaultProps = {
-  weekDayKey: 'nameAbbr'
+  weekDayKey: 'nameAbbr',
 };
-class BpkCalendarGridHeader extends _react.PureComponent {
+
+class BpkCalendarGridHeader extends PureComponent {
   render() {
-    const {
-      className,
-      isTableHead,
-      weekDayKey,
-      weekStartsOn
-    } = this.props;
+    const { className, isTableHead, weekDayKey, weekStartsOn } = this.props;
+
     const Header = isTableHead ? 'thead' : 'header';
     const List = isTableHead ? 'tr' : 'ol';
     const Item = isTableHead ? 'th' : 'li';
-    const daysOfWeek = (0, _dateUtils.orderDaysOfWeek)(this.props.daysOfWeek, weekStartsOn);
+
+    const daysOfWeek = orderDaysOfWeek(this.props.daysOfWeek, weekStartsOn);
+
     const classNames = [getClassName('bpk-calendar-header')];
     if (isTableHead) {
       classNames.push(getClassName('bpk-calendar-header--table-head'));
@@ -74,32 +70,41 @@ class BpkCalendarGridHeader extends _react.PureComponent {
     if (className) {
       classNames.push(className);
     }
-    return /*#__PURE__*/_react.default.createElement(Header, {
-      className: classNames.join(' '),
-      "aria-hidden": true
-    }, /*#__PURE__*/_react.default.createElement(List, {
-      className: getClassName('bpk-calendar-header__week')
-    }, daysOfWeek.map(weekDay => /*#__PURE__*/_react.default.createElement(WeekDay, {
-      Element: Item,
-      key: weekDay.index,
-      weekDay: weekDay,
-      weekDayKey: weekDayKey
-    }))));
+
+    return (
+      <Header className={classNames.join(' ')} aria-hidden>
+        <List className={getClassName('bpk-calendar-header__week')}>
+          {daysOfWeek.map((weekDay) => (
+            <WeekDay
+              Element={Item}
+              key={weekDay.index}
+              weekDay={weekDay}
+              weekDayKey={weekDayKey}
+            />
+          ))}
+        </List>
+      </Header>
+    );
   }
 }
+
 BpkCalendarGridHeader.propTypes = {
-  daysOfWeek: _customProptypes.default.DaysOfWeek.isRequired,
-  weekStartsOn: _propTypes.default.number.isRequired,
-  isTableHead: _propTypes.default.bool,
-  className: _propTypes.default.string,
-  weekDayKey: _customProptypes.default.WeekDayKey,
+  daysOfWeek: CustomPropTypes.DaysOfWeek.isRequired,
+  weekStartsOn: PropTypes.number.isRequired,
+  isTableHead: PropTypes.bool,
+  className: PropTypes.string,
+  weekDayKey: CustomPropTypes.WeekDayKey,
   // eslint-disable-next-line react/require-default-props,react/no-unused-prop-types
-  showWeekendSeparator: (0, _bpkReactUtils.deprecated)(_propTypes.default.bool, 'The showWeekendSeparator prop in BpkCalendarGridHeader is now deprecated as no longer part of the calendar, so is no longer required')
+  showWeekendSeparator: deprecated(
+    PropTypes.bool,
+    'The showWeekendSeparator prop in BpkCalendarGridHeader is now deprecated as no longer part of the calendar, so is no longer required',
+  ),
 };
+
 BpkCalendarGridHeader.defaultProps = {
   isTableHead: false,
   className: null,
-  weekDayKey: 'nameAbbr'
+  weekDayKey: 'nameAbbr',
 };
-var _default = BpkCalendarGridHeader;
-exports.default = _default;
+
+export default BpkCalendarGridHeader;

package/bpk-component-calendar/src/BpkCalendarGridHeader.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar-header{display:table;width:100%;table-layout:fixed}.bpk-calendar-header--table-head{display:none}.bpk-calendar-header__week{display:table-row;list-style:none;text-align:center;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-calendar-header__weekday{display:table-cell;height:2.25rem;padding:0 .5rem;box-shadow:0 1px 0 0 #c2c9cd;vertical-align:middle;box-sizing:content-box;font-size:.875rem;line-height:1.25rem;font-weight:400}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar-header{display:table;width:100%;table-layout:fixed}.bpk-calendar-header--table-head{display:none}.bpk-calendar-header__week{display:table-row;list-style:none;text-align:center;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-calendar-header__weekday{display:table-cell;height:2.25rem;padding:0 .5rem;box-shadow:0 1px 0 0 #dddde5;vertical-align:middle;box-sizing:content-box;font-size:.875rem;line-height:1.25rem;font-weight:400}

package/{bpk-storybook-utils/src/BpkStorybookUtils.js → bpk-component-calendar/src/BpkCalendarGridHeader.module.scss}

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.action = void 0;
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -21,18 +15,36 @@ exports.default = exports.action = void 0;
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-/* eslint-disable global-require, no-console, import/no-mutable-exports */
-let action = (...args) => () => console.info(args);
-exports.action = action;
-try {
-  const storybookAction = require('@storybook/addon-actions').action;
-  if (storybookAction) {
-    exports.action = action = storybookAction;
+
+@import '~bpk-mixins/index.scss';
+@import 'variables.scss';
+
+.bpk-calendar-header {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+
+  &--table-head {
+    display: none;
+  }
+
+  &__week {
+    display: table-row;
+    list-style: none;
+    text-align: center;
+
+    @include bpk-text;
+    @include bpk-caption;
+  }
+
+  &__weekday {
+    display: table-cell;
+    height: $bpk-calendar-day-size;
+    padding: 0 $bpk-calendar-day-spacing;
+    box-shadow: $shadow-bottom;
+    vertical-align: middle;
+    box-sizing: content-box;
+
+    @include bpk-footnote;
   }
-} catch (e) {
-  console.info('Storybook action is not available. Falling back to `console.log`.');
 }
-var _default = {
-  action
-};
-exports.default = _default;