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

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

@@ -1,22 +1,35 @@
-"use strict";
+/*
+ * 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 from 'react';
+
+import { cssModules, deprecated } from '../../bpk-react-utils';
+
+import CustomPropTypes, { CALENDAR_SELECTION_TYPE } from './custom-proptypes';
+import STYLES from './BpkCalendar.module.scss';
+
+const getClassName = cssModules(STYLES);
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _react = _interopRequireDefault(require("react"));
-var _bpkReactUtils = require("../../bpk-react-utils");
-var _customProptypes = _interopRequireWildcard(require("./custom-proptypes"));
-var _BpkCalendarModule = _interopRequireDefault(require("./BpkCalendar.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 }; }
-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); }
-const getClassName = (0, _bpkReactUtils.cssModules)(_BpkCalendarModule.default);
 const composeCalendar = (Nav, GridHeader, Grid, CalendarDate) => {
-  const BpkCalendar = props => {
+  const BpkCalendar = (props) => {
     const classNames = [getClassName('bpk-calendar')];
+
     const {
       changeMonthLabel,
       className,
@@ -45,20 +58,23 @@ const composeCalendar = (Nav, GridHeader, Grid, CalendarDate) => {
       previousMonthLabel,
       selectionConfiguration,
       weekDayKey,
-      weekStartsOn
+      weekStartsOn,
     } = props;
+
     if (className) {
       classNames.push(className);
     }
     if (fixedWidth) {
       classNames.push(getClassName('bpk-calendar--fixed'));
     }
+
     const headerClasses = [];
     // If the Nav is present add `bpk-calendar__header` which
     // adds spacing between the nav and header.
     if (Nav) {
       headerClasses.push(getClassName('bpk-calendar__header'));
     }
+
     const gridClasses = [];
     // If the GridHeader is not present add `bpk-calendar__grid` which
     // adds spacing between the nav and grid.
@@ -68,79 +84,98 @@ const composeCalendar = (Nav, GridHeader, Grid, CalendarDate) => {
     if (gridClassName) {
       gridClasses.push(gridClassName);
     }
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: classNames.join(' ')
-    }, Nav && /*#__PURE__*/_react.default.createElement(Nav, _extends({
-      changeMonthLabel: changeMonthLabel,
-      formatMonth: formatMonth,
-      id: `${id}__bpk_calendar_nav`,
-      maxDate: maxDate,
-      minDate: minDate,
-      month: month,
-      nextMonthLabel: nextMonthLabel,
-      onMonthChange: onMonthChange,
-      previousMonthLabel: previousMonthLabel
-    }, navProps)), GridHeader && /*#__PURE__*/_react.default.createElement(GridHeader, _extends({
-      daysOfWeek: daysOfWeek,
-      weekStartsOn: weekStartsOn,
-      weekDayKey: weekDayKey,
-      className: headerClasses.join(' ')
-    }, headerProps)), /*#__PURE__*/_react.default.createElement(Grid, _extends({
-      DateComponent: CalendarDate,
-      dateModifiers: dateModifiers,
-      daysOfWeek: daysOfWeek,
-      formatDateFull: formatDateFull,
-      formatMonth: formatMonth,
-      month: month,
-      onDateClick: onDateClick,
-      onDateKeyDown: onDateKeyDown,
-      preventKeyboardFocus: preventKeyboardFocus,
-      weekStartsOn: weekStartsOn,
-      maxDate: maxDate,
-      minDate: minDate,
-      focusedDate: focusedDate,
-      markToday: markToday,
-      markOutsideDays: markOutsideDays,
-      className: gridClasses.join(' '),
-      dateProps: dateProps,
-      selectionConfiguration: selectionConfiguration
-    }, gridProps)));
+
+    return (
+      <div className={classNames.join(' ')}>
+        {Nav && (
+          <Nav
+            changeMonthLabel={changeMonthLabel}
+            formatMonth={formatMonth}
+            id={`${id}__bpk_calendar_nav`}
+            maxDate={maxDate}
+            minDate={minDate}
+            month={month}
+            nextMonthLabel={nextMonthLabel}
+            onMonthChange={onMonthChange}
+            previousMonthLabel={previousMonthLabel}
+            {...navProps}
+          />
+        )}
+        {GridHeader && (
+          <GridHeader
+            daysOfWeek={daysOfWeek}
+            weekStartsOn={weekStartsOn}
+            weekDayKey={weekDayKey}
+            className={headerClasses.join(' ')}
+            {...headerProps}
+          />
+        )}
+        <Grid
+          DateComponent={CalendarDate}
+          dateModifiers={dateModifiers}
+          daysOfWeek={daysOfWeek}
+          formatDateFull={formatDateFull}
+          formatMonth={formatMonth}
+          month={month}
+          onDateClick={onDateClick}
+          onDateKeyDown={onDateKeyDown}
+          preventKeyboardFocus={preventKeyboardFocus}
+          weekStartsOn={weekStartsOn}
+          maxDate={maxDate}
+          minDate={minDate}
+          focusedDate={focusedDate}
+          markToday={markToday}
+          markOutsideDays={markOutsideDays}
+          className={gridClasses.join(' ')}
+          dateProps={dateProps}
+          selectionConfiguration={selectionConfiguration}
+          {...gridProps}
+        />
+      </div>
+    );
   };
+
   BpkCalendar.propTypes = {
     // Required
-    changeMonthLabel: Nav ? _propTypes.default.string.isRequired : _propTypes.default.string,
-    daysOfWeek: _customProptypes.default.DaysOfWeek.isRequired,
-    formatDateFull: _propTypes.default.func.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: Nav ? _propTypes.default.string.isRequired : _propTypes.default.string,
-    previousMonthLabel: Nav ? _propTypes.default.string.isRequired : _propTypes.default.string,
-    weekStartsOn: _propTypes.default.number.isRequired,
+    changeMonthLabel: Nav ? PropTypes.string.isRequired : PropTypes.string,
+    daysOfWeek: CustomPropTypes.DaysOfWeek.isRequired,
+    formatDateFull: PropTypes.func.isRequired,
+    formatMonth: PropTypes.func.isRequired,
+    id: PropTypes.string.isRequired,
+    maxDate: PropTypes.instanceOf(Date).isRequired,
+    minDate: PropTypes.instanceOf(Date).isRequired,
+    month: PropTypes.instanceOf(Date).isRequired,
+    nextMonthLabel: Nav ? PropTypes.string.isRequired : PropTypes.string,
+    previousMonthLabel: Nav ? PropTypes.string.isRequired : PropTypes.string,
+    weekStartsOn: PropTypes.number.isRequired,
     // Optional
-    className: _propTypes.default.string,
-    dateModifiers: _customProptypes.default.DateModifiers,
-    fixedWidth: _propTypes.default.bool,
-    focusedDate: _propTypes.default.instanceOf(Date),
-    markOutsideDays: _propTypes.default.bool,
-    markToday: _propTypes.default.bool,
-    onMonthChange: _propTypes.default.func,
-    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'),
+    className: PropTypes.string,
+    dateModifiers: CustomPropTypes.DateModifiers,
+    fixedWidth: PropTypes.bool,
+    focusedDate: PropTypes.instanceOf(Date),
+    markOutsideDays: PropTypes.bool,
+    markToday: PropTypes.bool,
+    onMonthChange: PropTypes.func,
+    onDateClick: PropTypes.func,
+    onDateKeyDown: PropTypes.func,
+    preventKeyboardFocus: PropTypes.bool,
+    selectionConfiguration: CustomPropTypes.SelectionConfiguration,
+    selectedDate: deprecated(
+      PropTypes.instanceOf(Date),
+      'Use selectionConfiguration to set selectedDate',
+    ),
     // eslint-disable-next-line react/require-default-props
-    showWeekendSeparator: (0, _bpkReactUtils.deprecated)(_propTypes.default.bool, 'The showWeekendSeparator prop in composeCalendar is now deprecated as no longer part of the calendar, so is no longer required'),
-    gridClassName: _propTypes.default.string,
-    weekDayKey: _propTypes.default.string,
+    showWeekendSeparator: deprecated(
+      PropTypes.bool,
+      'The showWeekendSeparator prop in composeCalendar is now deprecated as no longer part of the calendar, so is no longer required',
+    ),
+    gridClassName: PropTypes.string,
+    weekDayKey: PropTypes.string,
     /* eslint-disable react/forbid-prop-types */
-    navProps: _propTypes.default.object,
-    headerProps: _propTypes.default.object,
-    gridProps: _propTypes.default.object,
-    dateProps: _propTypes.default.object
+    navProps: PropTypes.object,
+    headerProps: PropTypes.object,
+    gridProps: PropTypes.object,
+    dateProps: PropTypes.object,
     /* eslint-enable */
   };
 
@@ -159,8 +194,8 @@ const composeCalendar = (Nav, GridHeader, Grid, CalendarDate) => {
     preventKeyboardFocus: false,
     previousMonthLabel: null,
     selectionConfiguration: {
-      type: _customProptypes.CALENDAR_SELECTION_TYPE.single,
-      date: null
+      type: CALENDAR_SELECTION_TYPE.single,
+      date: null,
     },
     selectedDate: null,
     gridClassName: null,
@@ -168,9 +203,10 @@ const composeCalendar = (Nav, GridHeader, Grid, CalendarDate) => {
     navProps: null,
     headerProps: null,
     gridProps: null,
-    dateProps: null
+    dateProps: null,
   };
+
   return BpkCalendar;
 };
-var _default = composeCalendar;
-exports.default = _default;
+
+export default composeCalendar;

package/bpk-component-calendar/src/custom-proptypes.js

@@ -1,12 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.CALENDAR_SELECTION_TYPE = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _dateUtils = require("./date-utils");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -25,11 +16,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * limitations under the License.
  */
 
-const DateType = () => props => {
-  const {
-    endDate,
-    startDate
-  } = props;
+import PropTypes from 'prop-types';
+
+import { isBefore, isSameDay } from './date-utils';
+
+const DateType = () => (props) => {
+  const { endDate, startDate } = props;
 
   // No range selected
   if (!startDate && !endDate) {
@@ -47,42 +39,54 @@ const DateType = () => props => {
   }
 
   // Start date cannot be after end date
-  if ((0, _dateUtils.isBefore)(endDate, startDate) && !(0, _dateUtils.isSameDay)(endDate, startDate)) {
-    return new Error(`Start date \`${startDate}\` cannot be after end date \`${endDate}\`.`);
+  if (isBefore(endDate, startDate) && !isSameDay(endDate, startDate)) {
+    return new Error(
+      `Start date \`${startDate}\` cannot be after end date \`${endDate}\`.`,
+    );
   }
+
   return null;
 };
+
 const CALENDAR_SELECTION_TYPE = {
   single: 'single',
-  range: 'range'
+  range: 'range',
 };
-exports.CALENDAR_SELECTION_TYPE = CALENDAR_SELECTION_TYPE;
-const SelectionConfigurationSingle = _propTypes.default.shape({
-  type: _propTypes.default.oneOf([CALENDAR_SELECTION_TYPE.single]),
-  date: _propTypes.default.instanceOf(Date)
+
+const SelectionConfigurationSingle = PropTypes.shape({
+  type: PropTypes.oneOf([CALENDAR_SELECTION_TYPE.single]),
+  date: PropTypes.instanceOf(Date),
 });
-const SelectionConfigurationRange = _propTypes.default.shape({
-  type: _propTypes.default.oneOf([CALENDAR_SELECTION_TYPE.range]),
+
+const SelectionConfigurationRange = PropTypes.shape({
+  type: PropTypes.oneOf([CALENDAR_SELECTION_TYPE.range]),
   startDate: DateType(),
-  endDate: DateType()
+  endDate: DateType(),
 });
-const SelectionConfiguration = _propTypes.default.oneOfType([SelectionConfigurationSingle, SelectionConfigurationRange]);
-const WeekDay = _propTypes.default.shape({
-  name: _propTypes.default.string,
-  nameAbbr: _propTypes.default.string,
-  index: _propTypes.default.number,
-  isWeekend: _propTypes.default.bool
+
+const SelectionConfiguration = PropTypes.oneOfType([
+  SelectionConfigurationSingle,
+  SelectionConfigurationRange,
+]);
+
+const WeekDay = PropTypes.shape({
+  name: PropTypes.string,
+  nameAbbr: PropTypes.string,
+  index: PropTypes.number,
+  isWeekend: PropTypes.bool,
 });
-const WeekDayKey = _propTypes.default.string;
-const DaysOfWeek = _propTypes.default.arrayOf(WeekDay);
-const DateModifiers = _propTypes.default.objectOf(_propTypes.default.func);
-const ReactComponent = _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]);
-var _default = {
+
+const WeekDayKey = PropTypes.string;
+const DaysOfWeek = PropTypes.arrayOf(WeekDay);
+const DateModifiers = PropTypes.objectOf(PropTypes.func);
+const ReactComponent = PropTypes.oneOfType([PropTypes.string, PropTypes.func]);
+
+export { CALENDAR_SELECTION_TYPE };
+export default {
   SelectionConfiguration,
   DateModifiers,
   DaysOfWeek,
   ReactComponent,
   WeekDay,
-  WeekDayKey
+  WeekDayKey,
 };
-exports.default = _default;