@skyscanner/backpack-web 9.1.0-alpha.1 → 9.2.0-beta.2

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

@@ -1,92 +1,58 @@
-"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"));
-
-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; }
-
-var STYLES = {
-  "bpk-calendar-date": "BpkCalendarDate-module__bpk-calendar-date___1xqI0",
-  "bpk-no-touch-support": "BpkCalendarDate-module__bpk-no-touch-support___9RF2O",
-  "bpk-calendar-date--selected": "BpkCalendarDate-module__bpk-calendar-date--selected___2GMW5",
-  "bpk-calendar-date--colored": "BpkCalendarDate-module__bpk-calendar-date--colored___3An-K",
-  "bpk-calendar-date--colored-default": "BpkCalendarDate-module__bpk-calendar-date--colored-default___KN_yJ",
-  "bpk-calendar-date--colored-positive": "BpkCalendarDate-module__bpk-calendar-date--colored-positive___cdXPU",
-  "bpk-calendar-date--colored-neutral": "BpkCalendarDate-module__bpk-calendar-date--colored-neutral___2Gv7S",
-  "bpk-calendar-date--colored-negative": "BpkCalendarDate-module__bpk-calendar-date--colored-negative___3uCrO",
-  "bpk-calendar-date--outside": "BpkCalendarDate-module__bpk-calendar-date--outside___1rIDK",
-  "bpk-calendar-date--middle": "BpkCalendarDate-module__bpk-calendar-date--middle___2944J",
-  "bpk-calendar-date--single": "BpkCalendarDate-module__bpk-calendar-date--single___1EBC2",
-  "bpk-calendar-date--start": "BpkCalendarDate-module__bpk-calendar-date--start___1G5sw",
-  "bpk-calendar-date--end": "BpkCalendarDate-module__bpk-calendar-date--end___d6MsB",
-  "bpk-calendar-date--focused": "BpkCalendarDate-module__bpk-calendar-date--focused___pF7RH",
-  "bpk-calendar-date--blocked": "BpkCalendarDate-module__bpk-calendar-date--blocked___2G6FJ",
-  "bpk-keyframe-spin": "BpkCalendarDate-module__bpk-keyframe-spin___2up0V"
-};
-const getClassName = (0, _bpkReactUtils.cssModules)(STYLES);
-const CELL_TYPES = {
+/*
+ * 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 = {
   default: 'default',
   negative: 'negative',
   neutral: 'neutral',
-  positive: 'positive'
+  positive: 'positive',
 };
-exports.CELL_TYPES = CELL_TYPES;
-const SELECTION_TYPES = {
+
+export const SELECTION_TYPES = {
   none: 'none',
   single: 'single',
   start: 'start',
   middle: 'middle',
   end: 'end',
-  sameDay: 'sameDay'
+  sameDay: 'sameDay',
 };
-exports.SELECTION_TYPES = SELECTION_TYPES;
-const ROW_TYPES = {
+
+export 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;
 
-class BpkCalendarDate extends _react.PureComponent {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "getButtonRef", button => {
-      this.button = button;
-    });
-  }
+const navigatedByMonthNudger = () =>
+  document.activeElement.id &&
+  document.activeElement.id.indexOf('month_nudger') !== -1;
 
+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
@@ -98,25 +64,40 @@ class BpkCalendarDate extends _react.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
-
+    }
 
-    if (!prevProps.isFocused && this.props.isFocused && this.props.isKeyboardFocusable) {
+    // Giving focus after keyboard navigation
+    if (
+      !prevProps.isFocused &&
+      this.props.isFocused &&
+      this.props.isKeyboardFocusable
+    ) {
       this.button.focus();
       return;
-    } // Giving focus after changing months with transition
-
+    }
 
-    if (this.props.isFocused && !prevProps.isKeyboardFocusable && this.props.isKeyboardFocusable) {
+    // Giving focus after changing months with transition
+    if (
+      this.props.isFocused &&
+      !prevProps.isKeyboardFocusable &&
+      this.props.isKeyboardFocusable
+    ) {
       this.button.focus();
     }
   }
 
+  getButtonRef = (button) => {
+    this.button = button;
+  };
+
   render() {
-    const _this$props = this.props,
-          {
+    const {
       cellType,
       className,
       date,
@@ -130,14 +111,17 @@ class BpkCalendarDate extends _react.PureComponent {
       onClick,
       onDateKeyDown,
       selectionType,
-      style
-    } = _this$props,
-          buttonProps = _objectWithoutProperties(_this$props, _excluded);
+      style,
+      ...buttonProps
+    } = this.props;
 
     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}`),
+        );
       }
     });
 
@@ -149,15 +133,12 @@ class BpkCalendarDate extends _react.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'));
     }
@@ -171,51 +152,55 @@ class BpkCalendarDate extends _react.PureComponent {
     }
 
     delete buttonProps.preventKeyboardFocus;
-    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()));
-  }
 
+    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>
+    );
+  }
 }
 
-const propTypes = {
+export const propTypes = {
   // Required
-  date: _propTypes.default.instanceOf(Date).isRequired,
+  date: PropTypes.instanceOf(Date).isRequired,
   // Optional
-  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
+  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,
 };
-exports.propTypes = propTypes;
-BpkCalendarDate.propTypes = _objectSpread({}, propTypes);
-const defaultProps = {
+
+BpkCalendarDate.propTypes = { ...propTypes };
+
+export const defaultProps = {
   className: null,
   cellType: null,
   isBlocked: false,
@@ -229,9 +214,11 @@ const defaultProps = {
   onDateKeyDown: null,
   preventKeyboardFocus: true,
   selectionType: SELECTION_TYPES.none,
-  style: null
+  style: null,
+};
+
+BpkCalendarDate.defaultProps = {
+  ...defaultProps,
 };
-exports.defaultProps = defaultProps;
-BpkCalendarDate.defaultProps = _objectSpread({}, defaultProps);
-var _default = BpkCalendarDate;
-exports.default = _default;
+
+export default BpkCalendarDate;

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

@@ -0,0 +1,18 @@
+/*
+ * 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.
+*/
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar-date{width:2.25rem;height:2.25rem;padding:0;border:none;border-radius:1.125rem;background-color:transparent;text-align:center;cursor:pointer;appearance:none;box-sizing:border-box;font-size:1rem;line-height:1.5rem;font-weight:700;color:#111236;color:var(--bpk-calendar-date-text-color, #111236)}.bpk-no-touch-support .bpk-calendar-date:hover:not(:active):not(:disabled):not(.bpk-calendar-date--selected){background-color:#f1f2f8;color:#444560;color:var(--bpk-calendar-date-text-hover-color, #444560)}:global(.bpk-no-touch-support) .bpk-calendar-date:hover:not(:active):not(:disabled):not(.bpk-calendar-date--selected){background-color:#f1f2f8;color:#444560;color:var(--bpk-calendar-date-text-hover-color, #444560)}.bpk-calendar-date--colored{color:#fff}.bpk-calendar-date--colored-default{background-color:#68697f}.bpk-calendar-date--colored-positive{background-color:#00a698}.bpk-calendar-date--colored-neutral{background-color:#ffb54d}.bpk-calendar-date--colored-negative{background-color:#d1435b}.bpk-calendar-date:not(.bpk-calendar-date--selected):active{background-color:#dddde5;color:#111236;color:var(--bpk-calendar-date-text-active-color, #111236)}.bpk-calendar-date--outside{background-color:transparent;color:#b2b2bf}.bpk-calendar-date--selected{cursor:default;background-color:#084eb2;background-color:var(--bpk-calendar-date-selected-background-color, #084eb2);color:#fff;color:var(--bpk-calendar-date-text-selected-color, #fff)}.bpk-calendar-date--middle{background-color:#cddff8;color:#111236}.bpk-calendar-date--single{background-color:#0770e3}.bpk-calendar-date--start{background-color:#0770e3}.bpk-calendar-date--end{background-color:#0770e3}.bpk-calendar-date--focused:not(:disabled):not(.bpk-calendar-date--selected):not(.bpk-calendar-date--colored){box-shadow:0 0 0 2px #0770e3 inset;box-shadow:0 0 0 2px var(--bpk-calendar-date-focused-border-color, #0770e3) inset;color:#0770e3;color:var(--bpk-calendar-date-text-focus-color, #0770e3)}.bpk-calendar-date--focused:not(:disabled):not(.bpk-calendar-date--selected).bpk-calendar-date--colored{border:0.125rem solid #0770e3;box-shadow:0 0 0 1px #fff inset}.bpk-calendar-date:disabled,.bpk-calendar-date--blocked{background-color:transparent;color:#dddde5;cursor:not-allowed}.bpk-no-touch-support .bpk-calendar-date:disabled:hover:not(:active):not(:disabled),.bpk-no-touch-support .bpk-calendar-date--blocked:hover:not(:active):not(:disabled){color:#dddde5}:global(.bpk-no-touch-support) .bpk-calendar-date:disabled:hover:not(:active):not(:disabled),:global(.bpk-no-touch-support) .bpk-calendar-date--blocked:hover:not(:active):not(:disabled){color:#dddde5}.bpk-calendar-date:disabled:active,.bpk-calendar-date--blocked:active{color:#dddde5}

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

@@ -0,0 +1,159 @@
+/*
+ * 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';
+
+$bpk-spacing-v2: true;
+
+.bpk-calendar-date {
+  width: $bpk-calendar-day-size;
+  height: $bpk-calendar-day-size;
+  padding: 0;
+  border: none;
+  border-radius: $bpk-border-radius-pill;
+  background-color: transparent;
+  text-align: center;
+  cursor: pointer;
+  appearance: none;
+  box-sizing: border-box;
+
+  @include bpk-label-1;
+  @include bpk-themeable-property(
+    color,
+    --bpk-calendar-date-text-color,
+    $bpk-calendar-day-color
+  );
+
+  @include bpk-hover {
+    &:not(.bpk-calendar-date--selected) {
+      background-color: $bpk-calendar-day-hover-background-color;
+
+      @include bpk-themeable-property(
+        color,
+        --bpk-calendar-date-text-hover-color,
+        $bpk-calendar-day-hover-color
+      );
+    }
+  }
+
+  &--colored {
+    color: $bpk-color-white;
+
+    &-default {
+      background-color: $bpk-color-sky-gray-tint-02;
+    }
+
+    &-positive {
+      background-color: $bpk-color-monteverde;
+    }
+
+    &-neutral {
+      background-color: $bpk-color-erfoud;
+    }
+
+    &-negative {
+      background-color: $bpk-color-panjin;
+    }
+  }
+
+  &:not(.bpk-calendar-date--selected):active {
+    background-color: $bpk-calendar-day-active-background-color;
+
+    @include bpk-themeable-property(
+      color,
+      --bpk-calendar-date-text-active-color,
+      $bpk-calendar-day-active-color
+    );
+  }
+
+  &--outside {
+    background-color: transparent;
+    color: $bpk-calendar-day-outside-color;
+  }
+
+  &--selected {
+    cursor: default;
+
+    @include bpk-themeable-property(
+      background-color,
+      --bpk-calendar-date-selected-background-color,
+      $bpk-calendar-day-selected-background-color
+    );
+    @include bpk-themeable-property(
+      color,
+      --bpk-calendar-date-text-selected-color,
+      $bpk-calendar-day-selected-color
+    );
+  }
+
+  &--middle {
+    background-color: $bpk-color-sky-blue-tint-03;
+    color: $bpk-color-sky-gray;
+  }
+
+  &--single {
+    background-color: $bpk-color-sky-blue;
+  }
+
+  &--start {
+    background-color: $bpk-color-sky-blue;
+  }
+
+  &--end {
+    background-color: $bpk-color-sky-blue;
+  }
+
+  &--focused:not(:disabled):not(.bpk-calendar-date--selected) {
+    &:not(.bpk-calendar-date--colored) {
+      box-shadow: 0 0 0 2px $bpk-calendar-day-focused-border-color inset;
+      box-shadow: 0 0 0 2px
+        var(
+          --bpk-calendar-date-focused-border-color,
+          $bpk-calendar-day-focused-border-color
+        )
+        inset;
+
+      @include bpk-themeable-property(
+        color,
+        --bpk-calendar-date-text-focus-color,
+        $bpk-calendar-day-focused-color
+      );
+    }
+
+    &.bpk-calendar-date--colored {
+      border: (bpk-spacing-sm() / 2) solid
+        $bpk-calendar-day-focused-border-color;
+      box-shadow: 0 0 0 1px $bpk-color-white inset;
+    }
+  }
+
+  &:disabled,
+  &--blocked {
+    background-color: transparent;
+    color: $bpk-calendar-day-disabled-color;
+    cursor: not-allowed;
+
+    @include bpk-hover {
+      color: $bpk-calendar-day-disabled-color;
+    }
+
+    &:active {
+      color: $bpk-calendar-day-disabled-color;
+    }
+  }
+}