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

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

@@ -1,68 +1,81 @@
-"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.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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-// This should be imported after `./BpkCalendarGrid.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 {
+  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.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.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
+    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,
+        ),
       });
     }
   }
@@ -90,82 +103,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: {},
@@ -179,18 +204,18 @@ BpkCalendarGrid.defaultProps = {
   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
-}; // On iOS, having transitions causes accessibility issues, so we disable it (KOA-4467).
+  cellClassName: null,
+};
+
+// On iOS, having transitions causes accessibility issues, so we disable it (KOA-4467).
+const BpkCalendarGridWithTransition = isDeviceIos()
+  ? BpkCalendarGrid
+  : addCalendarGridTransition(BpkCalendarGrid);
 
-const BpkCalendarGridWithTransition = (0, _bpkReactUtils.isDeviceIos)() ? BpkCalendarGrid : (0, _BpkCalendarGridTransition.addCalendarGridTransition)(BpkCalendarGrid);
-exports.BpkCalendarGridWithTransition = BpkCalendarGridWithTransition;
-var _default = BpkCalendarGrid;
-exports.default = _default;
+export default BpkCalendarGrid;
+export { BpkCalendarGridWithTransition };

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

@@ -0,0 +1,64 @@
+/*
+ * 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';
+@import 'variables';
+
+.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-color-white 50%,
+        $bpk-color-sky-blue-tint-03 50%
+      );
+    }
+
+    &--middle {
+      background-color: $bpk-color-sky-blue-tint-03;
+    }
+
+    &--end {
+      background-image: linear-gradient(
+        to left,
+        $bpk-color-white 50%,
+        $bpk-color-sky-blue-tint-03 50%
+      );
+    }
+  }
+  &__week {
+    display: flex;
+    padding-top: bpk-spacing-lg();
+  }
+}

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

@@ -1,28 +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.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
  *
@@ -40,82 +15,95 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * See the License for the specific language governing permissions and
  * 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 classNames = [getClassName('bpk-calendar-header')];
 
+    const daysOfWeek = orderDaysOfWeek(this.props.daysOfWeek, weekStartsOn);
+
+    const classNames = [getClassName('bpk-calendar-header')];
     if (isTableHead) {
       classNames.push(getClassName('bpk-calendar-header--table-head'));
     }
-
     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.scss

@@ -0,0 +1,53 @@
+/*
+ * 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';
+@import 'variables';
+
+.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;
+    font-weight: normal;
+    box-shadow: $shadow-bottom;
+    vertical-align: middle;
+    box-sizing: content-box;
+
+    &--weekend {
+      font-weight: bold;
+    }
+  }
+}