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

package/bpk-component-map/src/BpkPriceMarker.module.scss

@@ -0,0 +1,146 @@
+/*
+ * 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';
+
+$bpk-spacing-v2: true;
+
+.bpk-price-marker {
+  display: flex;
+  padding: (bpk-spacing-sm() - $bpk-one-pixel-rem) bpk-spacing-md();
+  justify-content: center;
+  align-items: center;
+  border: $bpk-border-size-xl solid;
+  border-radius: $bpk-border-radius-sm;
+
+  &--dynamic {
+    cursor: pointer;
+  }
+
+  &-default {
+    color: $bpk-color-white;
+
+    @include bpk-themeable-property(
+      border-color,
+      --bpk-price-marker-background-color,
+      $bpk-color-sky-blue
+    );
+    @include bpk-themeable-property(
+      background-color,
+      --bpk-price-marker-background-color,
+      $bpk-color-sky-blue
+    );
+  }
+
+  &-viewed {
+    @include bpk-themeable-property(
+      color,
+      --bpk-price-marker-viewed-color,
+      $bpk-color-sky-blue
+    );
+    @include bpk-themeable-property(
+      border-color,
+      --bpk-price-marker-viewed-border-color,
+      $bpk-color-sky-blue-tint-03
+    );
+    @include bpk-themeable-property(
+      background-color,
+      --bpk-price-marker-viewed-background-color,
+      $bpk-color-sky-blue-tint-03
+    );
+  }
+
+  &-focused {
+    padding: (bpk-spacing-sm() + ($bpk-one-pixel-rem * 2)) bpk-spacing-md();
+    background-color: $bpk-color-white;
+
+    @include bpk-themeable-property(
+      border-color,
+      --bpk-price-marker-selected-border-color,
+      $bpk-color-sky-blue
+    );
+    @include bpk-themeable-property(
+      color,
+      --bpk-price-marker-selected-color,
+      $bpk-color-sky-blue
+    );
+  }
+
+  &-disabled {
+    // We want the disabled marker appear under any other markers that maybe rendered around it
+    z-index: -2;
+    border-color: $bpk-color-sky-gray-tint-07;
+    background-color: $bpk-color-sky-gray-tint-07;
+    color: $bpk-color-sky-gray-tint-04;
+  }
+
+  &__wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border: none;
+    background: none;
+  }
+
+  &__arrow {
+    position: absolute;
+    // Position the arrow correctly under the price marker
+    top: 1.3rem;
+    // We want the arrow pointer to appear under the marker which is already
+    z-index: -1;
+    width: bpk-spacing-base();
+    height: bpk-spacing-base();
+    transform: rotate(45deg);
+    border-radius: 25%;
+    background-color: $bpk-color-sky-blue;
+
+    &-default {
+      @include bpk-themeable-property(
+        background-color,
+        --bpk-price-marker-background-color,
+        $bpk-color-sky-blue
+      );
+    }
+
+    &-viewed {
+      @include bpk-themeable-property(
+        background-color,
+        --bpk-price-marker-viewed-border-color,
+        $bpk-color-sky-blue-tint-03
+      );
+    }
+
+    &-focused {
+      // Position the arrow correctly under the price marker
+      top: 1.8rem;
+
+      @include bpk-themeable-property(
+        background-color,
+        --bpk-price-marker-selected-border-color,
+        $bpk-color-sky-blue
+      );
+    }
+
+    &-disabled {
+      // We want the arrow pointer to appear under the disabled marker which is already z-index: -2
+      z-index: -3;
+      background-color: $bpk-color-sky-gray-tint-07;
+    }
+  }
+}

package/bpk-component-map/src/DefaultLoadingElement.js

@@ -1,20 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _bpkComponentSpinner = require("../../bpk-component-spinner");
-
-var _bpkReactUtils = require("../../bpk-react-utils");
-
-var _DefaultLoadingElementModule = _interopRequireDefault(require("./DefaultLoadingElement.css"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -32,13 +15,20 @@ 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)(_DefaultLoadingElementModule.default);
+/* @flow strict */
+
+import React from 'react';
+import { BpkLargeSpinner, SPINNER_TYPES } from '../../bpk-component-spinner';
+import { cssModules } from '../../bpk-react-utils';
+
+import STYLES from './DefaultLoadingElement.module.scss';
+
+const getClassName = cssModules(STYLES);
 
-const DefaultLoadingElement = () => /*#__PURE__*/_react.default.createElement("div", {
-  className: getClassName('bpk-map-default-loading-element')
-}, /*#__PURE__*/_react.default.createElement(_bpkComponentSpinner.BpkLargeSpinner, {
-  type: _bpkComponentSpinner.SPINNER_TYPES.primary
-}));
+const DefaultLoadingElement = () => (
+  <div className={getClassName('bpk-map-default-loading-element')}>
+    <BpkLargeSpinner type={SPINNER_TYPES.primary} />
+  </div>
+);
 
-var _default = DefaultLoadingElement;
-exports.default = _default;
+export default DefaultLoadingElement;

package/bpk-component-map/src/DefaultLoadingElement.module.scss

@@ -0,0 +1,28 @@
+/*
+ * 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-map-default-loading-element {
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+  background-color: $bpk-color-sky-gray-tint-06;
+}

package/bpk-component-map/src/common-types.js

@@ -1,14 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LatLongPropType = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -26,9 +15,17 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const LatLongPropType = _propTypes.default.shape({
-  latitude: _propTypes.default.number.isRequired,
-  longitude: _propTypes.default.number.isRequired
-});
 
-exports.LatLongPropType = LatLongPropType;
+/* @flow strict */
+
+import PropTypes from 'prop-types';
+
+export type LatLong = {
+  latitude: number,
+  longitude: number,
+};
+
+export const LatLongPropType = PropTypes.shape({
+  latitude: PropTypes.number.isRequired,
+  longitude: PropTypes.number.isRequired,
+});

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

@@ -1,10 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.priceMarkerThemeAttributes = exports.defaultIconMarkerThemeAttributes = exports.default = void 0;
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -22,12 +15,24 @@ exports.priceMarkerThemeAttributes = exports.defaultIconMarkerThemeAttributes =
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const defaultIconMarkerThemeAttributes = ['iconMarkerDefaultBackgroundColor', 'iconMarkerDefaultSelectedColor', 'iconMarkerDefaultDisabledColor', 'iconMarkerDefaultDisabledBackgroundColor'];
-exports.defaultIconMarkerThemeAttributes = defaultIconMarkerThemeAttributes;
-const priceMarkerThemeAttributes = ['priceMarkerBackgroundColor', 'priceMarkerSelectedBorderColor', 'priceMarkerSelectedColor', 'priceMarkerViewedBackgroundColor', 'priceMarkerViewedBorderColor', 'priceMarkerViewedColor'];
-exports.priceMarkerThemeAttributes = priceMarkerThemeAttributes;
-var _default = {
+
+export const defaultIconMarkerThemeAttributes = [
+  'iconMarkerDefaultBackgroundColor',
+  'iconMarkerDefaultSelectedColor',
+  'iconMarkerDefaultDisabledColor',
+  'iconMarkerDefaultDisabledBackgroundColor',
+];
+
+export const priceMarkerThemeAttributes = [
+  'priceMarkerBackgroundColor',
+  'priceMarkerSelectedBorderColor',
+  'priceMarkerSelectedColor',
+  'priceMarkerViewedBackgroundColor',
+  'priceMarkerViewedBorderColor',
+  'priceMarkerViewedColor',
+];
+
+export default {
   defaultIconMarkerThemeAttributes,
-  priceMarkerThemeAttributes
+  priceMarkerThemeAttributes,
 };
-exports.default = _default;

package/bpk-component-map/src/withGoogleMapsScript.js

@@ -1,48 +1,53 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.LibraryShapeType = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _api = require("@react-google-maps/api");
-
-var _DefaultLoadingElement = _interopRequireDefault(require("./DefaultLoadingElement"));
-
-const _excluded = ["googleMapsApiKey", "libraries", "loadingElement", "preventGoogleFontsLoading"];
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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; }
-
-const LibraryShapeType = _propTypes.default.arrayOf(_propTypes.default.oneOf(['drawing', 'geometry', 'localContext', 'places', 'visualization']));
-
-exports.LibraryShapeType = LibraryShapeType;
-
-function withGoogleMapsScript(Component) {
-  const WithGoogleMapsScript = _ref => {
-    let {
-      googleMapsApiKey,
-      libraries,
-      loadingElement,
-      preventGoogleFontsLoading
-    } = _ref,
-        rest = _objectWithoutProperties(_ref, _excluded);
-
-    const {
-      isLoaded,
-      loadError
-    } = (0, _api.useJsApiLoader)({
+/*
+ * 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.
+ */
+/* @flow strict */
+
+import React, { type ComponentType } from 'react';
+import PropTypes from 'prop-types';
+import { useJsApiLoader } from '@react-google-maps/api';
+
+import DefaultLoadingElement from './DefaultLoadingElement';
+
+export const LibraryShapeType = PropTypes.arrayOf(
+  PropTypes.oneOf([
+    'drawing',
+    'geometry',
+    'localContext',
+    'places',
+    'visualization',
+  ]),
+);
+
+function withGoogleMapsScript(Component: ComponentType<any>) {
+  const WithGoogleMapsScript = ({
+    googleMapsApiKey,
+    libraries,
+    loadingElement,
+    preventGoogleFontsLoading,
+    ...rest
+  }: {
+    [string]: any,
+  }) => {
+    const { isLoaded, loadError } = useJsApiLoader({
       googleMapsApiKey,
       libraries,
       preventGoogleFontsLoading,
-      version: '3.46'
+      version: '3.46',
     });
 
     if (!isLoaded) {
@@ -53,22 +58,23 @@ function withGoogleMapsScript(Component) {
       throw new Error('Google maps cannot be loaded!');
     }
 
-    return /*#__PURE__*/_react.default.createElement(Component, rest);
+    return <Component {...rest} />;
   };
 
   WithGoogleMapsScript.propTypes = {
-    loadingElement: _propTypes.default.node,
-    googleMapsApiKey: _propTypes.default.string.isRequired,
+    loadingElement: PropTypes.node,
+    googleMapsApiKey: PropTypes.string.isRequired,
     libraries: LibraryShapeType,
-    preventGoogleFontsLoading: _propTypes.default.bool
+    preventGoogleFontsLoading: PropTypes.bool,
   };
+
   WithGoogleMapsScript.defaultProps = {
-    loadingElement: /*#__PURE__*/_react.default.createElement(_DefaultLoadingElement.default, null),
+    loadingElement: <DefaultLoadingElement />,
     preventGoogleFontsLoading: false,
-    libraries: ['geometry', 'drawing', 'places']
+    libraries: ['geometry', 'drawing', 'places'],
   };
+
   return WithGoogleMapsScript;
 }
 
-var _default = withGoogleMapsScript;
-exports.default = _default;
+export default withGoogleMapsScript;

package/bpk-component-mobile-scroll-container/README.md

@@ -0,0 +1,74 @@
+# bpk-component-mobile-scroll-container
+
+> Backpack mobile scroll container component.
+
+## Installation
+
+```sh
+npm install bpk-component-mobile-scroll-container --save-dev
+```
+
+## Usage
+
+```js
+import React from 'react';
+import { cssModules } from 'bpk-react-utils';
+import BpkMobileScrollContainer from 'bpk-component-mobile-scroll-container';
+
+import STYLES from './MyComponent.scss';
+
+const getClassName = cssModules(STYLES);
+
+export default () => (
+  <BpkMobileScrollContainer>
+    <div className={getClassName('my-component')}>
+      {new Array(10).fill().map((item, index) => {
+        const classNames = ['my-component__item'];
+
+        if (index % 2 === 0) {
+          classNames.push('my-component__item--alternate');
+        }
+
+        return (
+          <div key={index} className={classNames.map(getClassName).join(' ')}>
+            {index}
+          </div>
+        );
+      })}
+    </div>
+  </BpkMobileScrollContainer>
+);
+```
+
+*`MyComponent.scss`:*
+```scss
+@import '~bpk-mixins/index';
+
+.my-component {
+  display: flex;
+
+  &__item {
+    display: flex;
+    min-width: $bpk-spacing-xxl * 5;
+    height: $bpk-spacing-xxl * 5;
+    justify-content: center;
+    align-items: center;
+    background-color: $bpk-color-sky-gray-tint-07;
+
+    &--alternate {
+      background-color: $bpk-color-sky-gray-tint-06;
+    }
+  }
+}
+```
+
+## Props
+
+| Property                    | PropType | Required | Default Value |
+| --------------------------- | -------- | -------- | ------------- |
+| children                    | node     | true     | -             |
+| className                   | string   | false    | null          |
+| leadingIndicatorClassName   | string   | false    | null          |
+| scrollerRef                 | func     | false    | null          |
+| trailingIndicatorClassName  | string   | false    | null          |
+| showScrollbar               | bool     | false    | false         |

package/bpk-component-mobile-scroll-container/index.js

@@ -1,14 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _BpkMobileScrollContainer = _interopRequireDefault(require("./src/BpkMobileScrollContainer"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -26,5 +15,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-var _default = _BpkMobileScrollContainer.default;
-exports.default = _default;
+
+/* @flow strict */
+
+import BpkMobileScrollContainer from './src/BpkMobileScrollContainer';
+
+export default BpkMobileScrollContainer;

package/bpk-component-mobile-scroll-container/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "bpk-component-mobile-scroll-container",
+  "version": "3.1.11",
+  "description": "Backpack mobile scroll container component.",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:Skyscanner/backpack.git"
+  },
+  "author": "Backpack Design System <backpack@skyscanner.net>",
+  "main": "index.js",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
+  "dependencies": {
+    "bpk-mixins": "^31.1.1",
+    "bpk-react-utils": "^5.0.0",
+    "lodash.debounce": "^4.0.8",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react": "^16.3.0 || ^17.0.0"
+  },
+  "devDependencies": {
+    "@skyscanner/bpk-foundations-web": "^8.0.0"
+  }
+}