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

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

@@ -1,3 +1,16 @@
+"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
  *
@@ -15,34 +28,29 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+const DateType = () => props => {
+  const {
+    endDate,
+    startDate
+  } = props; // No range selected
 
-import PropTypes from 'prop-types';
-
-import { isBefore, isSameDay } from './date-utils';
-
-const DateType = () => (props) => {
-  const { endDate, startDate } = props;
-
-  // No range selected
   if (!startDate && !endDate) {
     return null;
-  }
+  } // End date without a start date is not allowed
+
 
-  // End date without a start date is not allowed
   if (!startDate && endDate) {
     return new Error(`Cannot specify \`endDate\` without \`startDate\`.`);
-  }
+  } // Start date without an end date is always valid
+
 
-  // Start date without an end date is always valid
   if (startDate && !endDate) {
     return null;
-  }
+  } // Start date cannot be after end date
 
-  // Start date cannot be after end date
-  if (isBefore(endDate, startDate) && !isSameDay(endDate, startDate)) {
-    return new Error(
-      `Start date \`${startDate}\` cannot be after end date \`${endDate}\`.`,
-    );
+
+  if ((0, _dateUtils.isBefore)(endDate, startDate) && !(0, _dateUtils.isSameDay)(endDate, startDate)) {
+    return new Error(`Start date \`${startDate}\` cannot be after end date \`${endDate}\`.`);
   }
 
   return null;
@@ -50,43 +58,44 @@ const DateType = () => (props) => {
 
 const CALENDAR_SELECTION_TYPE = {
   single: 'single',
-  range: 'range',
+  range: 'range'
 };
+exports.CALENDAR_SELECTION_TYPE = CALENDAR_SELECTION_TYPE;
 
-const SelectionConfigurationSingle = PropTypes.shape({
-  type: PropTypes.oneOf([CALENDAR_SELECTION_TYPE.single]),
-  date: PropTypes.instanceOf(Date),
+const SelectionConfigurationSingle = _propTypes.default.shape({
+  type: _propTypes.default.oneOf([CALENDAR_SELECTION_TYPE.single]),
+  date: _propTypes.default.instanceOf(Date)
 });
 
-const SelectionConfigurationRange = PropTypes.shape({
-  type: PropTypes.oneOf([CALENDAR_SELECTION_TYPE.range]),
+const SelectionConfigurationRange = _propTypes.default.shape({
+  type: _propTypes.default.oneOf([CALENDAR_SELECTION_TYPE.range]),
   startDate: DateType(),
-  endDate: DateType(),
+  endDate: DateType()
 });
 
-const SelectionConfiguration = PropTypes.oneOfType([
-  SelectionConfigurationSingle,
-  SelectionConfigurationRange,
-]);
+const SelectionConfiguration = _propTypes.default.oneOfType([SelectionConfigurationSingle, SelectionConfigurationRange]);
 
-const WeekDay = PropTypes.shape({
-  name: PropTypes.string,
-  nameAbbr: PropTypes.string,
-  index: PropTypes.number,
-  isWeekend: PropTypes.bool,
+const WeekDay = _propTypes.default.shape({
+  name: _propTypes.default.string,
+  nameAbbr: _propTypes.default.string,
+  index: _propTypes.default.number,
+  isWeekend: _propTypes.default.bool
 });
 
-const WeekDayKey = PropTypes.string;
-const DaysOfWeek = PropTypes.arrayOf(WeekDay);
-const DateModifiers = PropTypes.objectOf(PropTypes.func);
-const ReactComponent = PropTypes.oneOfType([PropTypes.string, PropTypes.func]);
+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]);
 
-export { CALENDAR_SELECTION_TYPE };
-export default {
+var _default = {
   SelectionConfiguration,
   DateModifiers,
   DaysOfWeek,
   ReactComponent,
   WeekDay,
-  WeekDayKey,
+  WeekDayKey
 };
+exports.default = _default;

package/bpk-component-calendar/src/date-utils.js

@@ -1,3 +1,170 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "addDays", {
+  enumerable: true,
+  get: function () {
+    return _addDays.default;
+  }
+});
+Object.defineProperty(exports, "addMonths", {
+  enumerable: true,
+  get: function () {
+    return _addMonths.default;
+  }
+});
+exports.dateToBoundaries = void 0;
+exports.daysInMonth = daysInMonth;
+Object.defineProperty(exports, "differenceInCalendarMonths", {
+  enumerable: true,
+  get: function () {
+    return _differenceInCalendarMonths.default;
+  }
+});
+Object.defineProperty(exports, "endOfMonth", {
+  enumerable: true,
+  get: function () {
+    return _endOfMonth.default;
+  }
+});
+Object.defineProperty(exports, "format", {
+  enumerable: true,
+  get: function () {
+    return _format.default;
+  }
+});
+exports.formatIsoMonth = exports.formatIsoDate = void 0;
+exports.getCalendarMonthWeeks = getCalendarMonthWeeks;
+Object.defineProperty(exports, "getDay", {
+  enumerable: true,
+  get: function () {
+    return _getDay.default;
+  }
+});
+exports.getFirstDayOfWeekend = getFirstDayOfWeekend;
+exports.getLastDayOfWeekend = getLastDayOfWeekend;
+exports.getMonthRange = getMonthRange;
+exports.getMonthsInRange = getMonthsInRange;
+Object.defineProperty(exports, "isAfter", {
+  enumerable: true,
+  get: function () {
+    return _isAfter.default;
+  }
+});
+Object.defineProperty(exports, "isBefore", {
+  enumerable: true,
+  get: function () {
+    return _isBefore.default;
+  }
+});
+Object.defineProperty(exports, "isSameDay", {
+  enumerable: true,
+  get: function () {
+    return _isSameDay.default;
+  }
+});
+Object.defineProperty(exports, "isSameMonth", {
+  enumerable: true,
+  get: function () {
+    return _isSameMonth.default;
+  }
+});
+Object.defineProperty(exports, "isSameWeek", {
+  enumerable: true,
+  get: function () {
+    return _isSameWeek.default;
+  }
+});
+Object.defineProperty(exports, "isSaturday", {
+  enumerable: true,
+  get: function () {
+    return _isSaturday.default;
+  }
+});
+Object.defineProperty(exports, "isSunday", {
+  enumerable: true,
+  get: function () {
+    return _isSunday.default;
+  }
+});
+Object.defineProperty(exports, "isToday", {
+  enumerable: true,
+  get: function () {
+    return _isToday.default;
+  }
+});
+Object.defineProperty(exports, "isWithinRange", {
+  enumerable: true,
+  get: function () {
+    return _isWithinInterval.default;
+  }
+});
+Object.defineProperty(exports, "lastDayOfMonth", {
+  enumerable: true,
+  get: function () {
+    return _lastDayOfMonth.default;
+  }
+});
+exports.setMonthYear = exports.parseIsoDate = exports.orderDaysOfWeek = void 0;
+Object.defineProperty(exports, "startOfDay", {
+  enumerable: true,
+  get: function () {
+    return _startOfDay.default;
+  }
+});
+Object.defineProperty(exports, "startOfMonth", {
+  enumerable: true,
+  get: function () {
+    return _startOfMonth.default;
+  }
+});
+
+var _startOfMonth = _interopRequireDefault(require("date-fns/startOfMonth"));
+
+var _endOfMonth = _interopRequireDefault(require("date-fns/endOfMonth"));
+
+var _lastDayOfMonth = _interopRequireDefault(require("date-fns/lastDayOfMonth"));
+
+var _getDay = _interopRequireDefault(require("date-fns/getDay"));
+
+var _isWithinInterval = _interopRequireDefault(require("date-fns/isWithinInterval"));
+
+var _isToday = _interopRequireDefault(require("date-fns/isToday"));
+
+var _isSaturday = _interopRequireDefault(require("date-fns/isSaturday"));
+
+var _isSunday = _interopRequireDefault(require("date-fns/isSunday"));
+
+var _isSameDay = _interopRequireDefault(require("date-fns/isSameDay"));
+
+var _isSameWeek = _interopRequireDefault(require("date-fns/isSameWeek"));
+
+var _isSameMonth = _interopRequireDefault(require("date-fns/isSameMonth"));
+
+var _isBefore = _interopRequireDefault(require("date-fns/isBefore"));
+
+var _isAfter = _interopRequireDefault(require("date-fns/isAfter"));
+
+var _differenceInCalendarMonths = _interopRequireDefault(require("date-fns/differenceInCalendarMonths"));
+
+var _addDays = _interopRequireDefault(require("date-fns/addDays"));
+
+var _addMonths = _interopRequireDefault(require("date-fns/addMonths"));
+
+var _setMonth = _interopRequireDefault(require("date-fns/setMonth"));
+
+var _setYear = _interopRequireDefault(require("date-fns/setYear"));
+
+var _startOfDay = _interopRequireDefault(require("date-fns/startOfDay"));
+
+var _parseISO = _interopRequireDefault(require("date-fns/parseISO"));
+
+var _format = _interopRequireDefault(require("date-fns/format"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -15,33 +182,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import startOfMonth from 'date-fns/startOfMonth';
-import endOfMonth from 'date-fns/endOfMonth';
-import lastDayOfMonth from 'date-fns/lastDayOfMonth';
-import getDay from 'date-fns/getDay';
-import isWithinRange from 'date-fns/isWithinInterval';
-import isToday from 'date-fns/isToday';
-import isSaturday from 'date-fns/isSaturday';
-import isSunday from 'date-fns/isSunday';
-import isSameDay from 'date-fns/isSameDay';
-import isSameWeek from 'date-fns/isSameWeek';
-import isSameMonth from 'date-fns/isSameMonth';
-import isBefore from 'date-fns/isBefore';
-import isAfter from 'date-fns/isAfter';
-import differenceInCalendarMonths from 'date-fns/differenceInCalendarMonths';
-import addDays from 'date-fns/addDays';
-import addMonths from 'date-fns/addMonths';
-import setMonth from 'date-fns/setMonth';
-import setYear from 'date-fns/setYear';
-import startOfDay from 'date-fns/startOfDay';
-import parseISO from 'date-fns/parseISO';
-import format from 'date-fns/format';
-
 const ONE_MINUTE_IN_MS = 60 * 1000;
-const ONE_HOUR_IN_MS = 60 * ONE_MINUTE_IN_MS;
-
-// TODO: Update to use date-fns functions.
+const ONE_HOUR_IN_MS = 60 * ONE_MINUTE_IN_MS; // TODO: Update to use date-fns functions.
 // see: https://github.com/date-fns/date-fns/issues/571 and https://bugs.webkit.org/show_bug.cgi?id=188001
 //
 // Safari has a problem with DST when the transition occurrs during midnight. To test set your timezone
@@ -62,17 +204,16 @@ function daysInMonth(year, month) {
 
 function dateAtStartOfDay(year, month, day) {
   const date = utc(year, month, day);
-  const tzOffset = date.getTimezoneOffset();
-
-  // Date is utc so we add/subtract the timezone hours.
+  const tzOffset = date.getTimezoneOffset(); // Date is utc so we add/subtract the timezone hours.
   // Using setTime is consistent on every browser so we have the same result everywhere.
-  date.setTime(date.getTime() + tzOffset * ONE_MINUTE_IN_MS);
 
-  // Bug in Safari that only occurs when the transition from/to DST is during midnight (e.g. Brazil and Chile).
+  date.setTime(date.getTime() + tzOffset * ONE_MINUTE_IN_MS); // Bug in Safari that only occurs when the transition from/to DST is during midnight (e.g. Brazil and Chile).
   // We want the exact day provided in the arguments so we adjust accordingly.
+
   if (day !== date.getDate() && date.getHours() === 23) {
     date.setTime(date.getTime() + ONE_HOUR_IN_MS);
   }
+
   return date;
 }
 
@@ -91,132 +232,121 @@ function startOfWeek(year, month, day, weekStartsOn) {
 }
 
 function getCalendarMonthWeeks(date, weekStartsOn) {
-  let [year, month, day] = startOfWeek(
-    date.getFullYear(),
-    date.getMonth(),
-    1,
-    weekStartsOn,
-  );
-
+  let [year, month, day] = startOfWeek(date.getFullYear(), date.getMonth(), 1, weekStartsOn);
   const weeksInMonth = [];
 
   for (let i = 0; i < 6; i += 1) {
     const currWeek = [];
+
     for (let j = 0; j < 7; j += 1) {
       currWeek.push(dateAtStartOfDay(year, month, day));
       [year, month, day] = addDay(year, month, day);
     }
+
     weeksInMonth.push(currWeek);
   }
+
   return weeksInMonth;
 }
 
 function getLastDayOfWeekend(daysOfWeek) {
-  const weekend = daysOfWeek.map((day) => day.isWeekend);
+  const weekend = daysOfWeek.map(day => day.isWeekend);
 
   if (weekend[0] && weekend[6]) {
     // weekend stretches over turn the of the week
     return daysOfWeek[weekend.indexOf(false) - 1].index;
   }
+
   return daysOfWeek[weekend.lastIndexOf(true)].index;
 }
 
 function getFirstDayOfWeekend(daysOfWeek) {
-  const weekend = daysOfWeek.map((day) => day.isWeekend);
+  const weekend = daysOfWeek.map(day => day.isWeekend);
 
   if (weekend[0] && weekend[6]) {
     // weekend stretches over turn the of the week
     return daysOfWeek[weekend.lastIndexOf(false) + 1].index;
   }
+
   return daysOfWeek[weekend.indexOf(true)].index;
 }
 
 const orderDaysOfWeek = (daysOfWeek, weekStartsOn) => {
   // Sorted in [sun, mon, ..., sat]
-  const sortedDaysOfWeek = daysOfWeek.slice().sort((a, b) => a.index - b.index);
-  // Ordered according to weekStartsOn, e.g. [mon, tue, ..., sun]
-  return [
-    ...sortedDaysOfWeek.slice(weekStartsOn),
-    ...sortedDaysOfWeek.slice(0, weekStartsOn),
-  ];
-};
+  const sortedDaysOfWeek = daysOfWeek.slice().sort((a, b) => a.index - b.index); // Ordered according to weekStartsOn, e.g. [mon, tue, ..., sun]
 
+  return [...sortedDaysOfWeek.slice(weekStartsOn), ...sortedDaysOfWeek.slice(0, weekStartsOn)];
+};
 /* Takes arbitrary dates and returns the beginning of the first and enf of the last month containing these dates  */
+
+
+exports.orderDaysOfWeek = orderDaysOfWeek;
+
 function getMonthRange(from, to) {
   return {
-    min: startOfMonth(from),
-    max: endOfMonth(to),
+    min: (0, _startOfMonth.default)(from),
+    max: (0, _endOfMonth.default)(to)
   };
 }
 
 function getMonthsInRange(from, to) {
-  const { max, min } = getMonthRange(from, to);
-  let currentMonth = startOfMonth(from);
+  const {
+    max,
+    min
+  } = getMonthRange(from, to);
+  let currentMonth = (0, _startOfMonth.default)(from);
   const monthsInRange = [];
 
-  while (isWithinRange(currentMonth, { start: min, end: max })) {
+  while ((0, _isWithinInterval.default)(currentMonth, {
+    start: min,
+    end: max
+  })) {
     monthsInRange.push(currentMonth);
-    currentMonth = addMonths(currentMonth, 1);
+    currentMonth = (0, _addMonths.default)(currentMonth, 1);
   }
 
   return monthsInRange;
 }
-
 /*
 Adjusts a date, if necessary, to fit within a range.
 If date passed in is null, it'll return the minimum date.
 */
+
+
 const dateToBoundaries = (date, minDate, maxDate) => {
   if (!date) {
     return minDate;
   }
-  if (isWithinRange(date, { start: minDate, end: maxDate })) {
+
+  if ((0, _isWithinInterval.default)(date, {
+    start: minDate,
+    end: maxDate
+  })) {
     return date;
   }
-  if (isBefore(date, minDate)) {
+
+  if ((0, _isBefore.default)(date, minDate)) {
     return minDate;
   }
+
   return maxDate;
 };
 
+exports.dateToBoundaries = dateToBoundaries;
+
 const setMonthYear = (date, newMonth, newYear) => {
   const dateToUse = date || new Date(newYear, newMonth, 1);
-  return setYear(setMonth(dateToUse, newMonth), newYear);
+  return (0, _setYear.default)((0, _setMonth.default)(dateToUse, newMonth), newYear);
 };
 
-const parseIsoDate = parseISO;
-const formatIsoDate = (date) => format(date, 'yyyy-MM-dd');
-const formatIsoMonth = (date) => format(date, 'yyyy-MM');
-
-export {
-  getCalendarMonthWeeks,
-  getFirstDayOfWeekend,
-  getLastDayOfWeekend,
-  getMonthsInRange,
-  getMonthRange,
-  getDay,
-  dateToBoundaries,
-  isWithinRange,
-  isSaturday,
-  isSunday,
-  isToday,
-  isSameDay,
-  isSameWeek,
-  isSameMonth,
-  isBefore,
-  isAfter,
-  differenceInCalendarMonths,
-  addMonths,
-  addDays,
-  orderDaysOfWeek,
-  setMonthYear,
-  startOfMonth,
-  lastDayOfMonth,
-  startOfDay,
-  format,
-  daysInMonth,
-  formatIsoDate,
-  formatIsoMonth,
-  parseIsoDate,
-  endOfMonth,
-};
+exports.setMonthYear = setMonthYear;
+const parseIsoDate = _parseISO.default;
+exports.parseIsoDate = parseIsoDate;
+
+const formatIsoDate = date => (0, _format.default)(date, 'yyyy-MM-dd');
+
+exports.formatIsoDate = formatIsoDate;
+
+const formatIsoMonth = date => (0, _format.default)(date, 'yyyy-MM');
+
+exports.formatIsoMonth = formatIsoMonth;

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

@@ -0,0 +1,28 @@
+"use strict";
+
+var _themeAttributes = _interopRequireDefault(require("./themeAttributes"));
+
+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('themeAttributes', () => {
+  it('should export the expected themeAttributes', () => {
+    expect(_themeAttributes.default).toEqual(['calendarDateTextColor', 'calendarDateTextHoverColor', 'calendarDateTextActiveColor', 'calendarDateTextFocusColor', 'calendarDateTextSelectedColor', 'calendarDateSelectedBackgroundColor', 'calendarDateFocusedBorderColor', 'calendarNudgerIconColor', 'calendarNudgerIconHoverColor', 'calendarNudgerIconActiveColor']);
+  });
+});

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

@@ -1,3 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -15,16 +22,5 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-export default [
-  'calendarDateTextColor',
-  'calendarDateTextHoverColor',
-  'calendarDateTextActiveColor',
-  'calendarDateTextFocusColor',
-  'calendarDateTextSelectedColor',
-  'calendarDateSelectedBackgroundColor',
-  'calendarDateFocusedBorderColor',
-  'calendarNudgerIconColor',
-  'calendarNudgerIconHoverColor',
-  'calendarNudgerIconActiveColor',
-];
+var _default = ['calendarDateTextColor', 'calendarDateTextHoverColor', 'calendarDateTextActiveColor', 'calendarDateTextFocusColor', 'calendarDateTextSelectedColor', 'calendarDateSelectedBackgroundColor', 'calendarDateFocusedBorderColor', 'calendarNudgerIconColor', 'calendarNudgerIconHoverColor', 'calendarNudgerIconActiveColor'];
+exports.default = _default;

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

@@ -1,3 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isTransitionEndSupported = exports.getTransformStyles = exports.getCalendarGridWidth = void 0;
+
+var _base = require("@skyscanner/bpk-foundations-web/tokens/base.es6");
+
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -15,47 +24,46 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import {
-  calendarDaySize,
-  calendarDaySpacing,
-} from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-
 const CSS_UNIT_REGEX = /(^[+-]?(?:\d*\.)?\d+)(.+)/i;
 
-const splitToken = (value) => {
+const splitToken = value => {
   const match = value.match(CSS_UNIT_REGEX);
+
   if (!match) {
-    throw new Error(
-      `Invalid token value. Expecting a valid css unit, got ${value}`,
-    );
+    throw new Error(`Invalid token value. Expecting a valid css unit, got ${value}`);
   }
+
   const [_, val, unit] = match; // eslint-disable-line no-unused-vars
+
   return [parseFloat(val), unit];
 };
 
-export const getCalendarGridWidth = (multiplier = 1) => {
-  const [sizeValue, sizeUnit] = splitToken(calendarDaySize);
-  const [spacingValue, spacingUnit] = splitToken(calendarDaySpacing);
+const getCalendarGridWidth = (multiplier = 1) => {
+  const [sizeValue, sizeUnit] = splitToken(_base.calendarDaySize);
+  const [spacingValue, spacingUnit] = splitToken(_base.calendarDaySpacing);
 
   if (sizeUnit !== spacingUnit) {
-    throw new Error(
-      `'calendarDaySize' and 'calendarDaySpacing' must use the same unit. Got ${sizeUnit} and ${spacingUnit}`,
-    );
+    throw new Error(`'calendarDaySize' and 'calendarDaySpacing' must use the same unit. Got ${sizeUnit} and ${spacingUnit}`);
   }
+
   const width = multiplier * (7 * (sizeValue + 2 * spacingValue));
   return `${width}${sizeUnit}`;
 };
 
-export const getTransformStyles = (transformValue) => {
+exports.getCalendarGridWidth = getCalendarGridWidth;
+
+const getTransformStyles = transformValue => {
   const transform = `translateX(${transformValue})`;
   return {
     transform,
     msTransform: transform,
     MozTransform: transform,
-    WebkitTransform: transform,
+    WebkitTransform: transform
   };
 };
 
-export const isTransitionEndSupported = () =>
-  !!(typeof window !== 'undefined' && 'TransitionEvent' in window);
+exports.getTransformStyles = getTransformStyles;
+
+const isTransitionEndSupported = () => !!(typeof window !== 'undefined' && 'TransitionEvent' in window);
+
+exports.isTransitionEndSupported = isTransitionEndSupported;