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

package/bpk-component-map/README.md

@@ -0,0 +1,211 @@
+# bpk-component-map
+
+> Backpack map component.
+
+Requires **React 16.8+**
+
+## Installation
+
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
+
+## Usage
+
+```js
+import React from 'react';
+import BpkText from '@skyscanner/backpack-web/bpk-component-text';
+import { withRtlSupport } from '@skyscanner/backpack-web/bpk-component-icon';
+import LandmarkIconSm from '@skyscanner/backpack-web/bpk-component-icon/sm/landmark';
+import BpkMap, {
+  BpkIconMarker,
+  BpkOverlayView,
+} from '@skyscanner/backpack-web/bpk-component-map';
+
+const AlignedLandmarkIconSm = withRtlSupport(LandmarkIconSm);
+
+export default () => (
+  <BpkMap
+    zoom={15}
+    showControls={false}
+    panEnabled={false}
+    center={{
+      latitude: 27.9881,
+      longitude: 86.925,
+    }}
+  >
+    <BpkIconMarker
+      icon={<AlignedLandmarkIconSm />}
+      position={{ latitude: 27.9881, longitude: 86.925 }}
+      onClick={() => {}}
+    />
+    <BpkIconMarker
+      icon={<AlignedLandmarkIconSm />}
+      position={{ latitude: 27.9881, longitude: 86.925 }}
+      onClick={() => {}}
+      selected
+    />
+    <BpkIconMarker
+      icon={<AlignedLandmarkIconSm />}
+      position={{ latitude: 27.9881, longitude: 86.927 }}
+      onClick={() => {}}
+      disabled
+    />
+    <BpkOverlayView position={{ latitude: 27.9881, longitude: 86.925 }}>
+      <BpkText>Shibuya Crossing</BpkText>
+    </BpkOverlayView>
+  </BpkMap>
+);
+```
+
+### BpkPriceMarker
+
+Price markers are used to display clickable prices on a map.
+
+```js
+import React from 'react';
+import BpkMap, { BpkPriceMarker, PRICE_MARKER_STATUSES } from '@skyscanner/backpack-web/bpk-component-map';
+
+export default () => (
+  <BpkMap
+    zoom={15}
+    showControls={false}
+    panEnabled={false}
+    center={{
+      latitude: 27.9881,
+      longitude: 86.925,
+    }}
+  >
+    <BpkPriceMarker
+      label="£120"
+      position={{ latitude: 27.9881, longitude: 86.925 }}
+      onClick={() => {
+        console.log("Price marker pressed.")
+      }}
+      status={PRICE_MARKER_STATUSES.focused}
+    />
+    <BpkPriceMarker
+      label="£120"
+      position={{ latitude: 27.9881, longitude: 86.925 }}
+      onClick={() => {
+        console.log("Price marker pressed.")
+      }}
+      status={PRICE_MARKER_STATUSES.viewed}
+    />
+  </BpkMap>
+);
+```
+
+## Accompanying HOCs
+
+### withGoogleMapsScript
+
+`withGoogleMapsScript` is a HOC that loads the Google Maps JavaScript, then loads the map. This is useful for when you don't already have the Google Maps JavaScript loaded.
+
+If you intend to include multiple maps on one page, it's better to load the Google Maps JavaScript in this HOC, as it ensures that script will not be re-downloaded every time it's used.
+
+```js
+import React from 'react';
+import BpkMap, { withGoogleMapsScript } from '@skyscanner/backpack-web/bpk-component-map';
+
+const BpkMapWithScript = withGoogleMapsScript(BpkMap);
+
+export default () => (
+  <BpkMapWithScript
+    googleMapsApiKey='YOUR_API_KEY'
+    zoom={15}
+    center={{
+      latitude: 27.9881,
+      longitude: 86.925,
+    }}
+    showControls={false}
+    panEnabled={false}
+  />
+);
+```
+
+## Props
+
+### BpkMap
+
+| Property              | PropType                                                                                        | Required | Default Value                    |
+| --------------------- | ----------------------------------------------------------------- | -------- | -------------------------------- |
+| bounds                | shape({north: number, east: number, south: number, west: number}) | false    | null                             |
+| center                | shape({latitude: number, longitude: number})                      | false    | null                             |
+| className             | string                                                            | false    | null                             |
+| greedyGestureHandling | bool                                                              | false    | false                            |
+| mapOptionStyles       | array                                                             | false    | null                             |
+| mapRef                | func                                                              | false    | null                             |
+| onRegionChange        | func                                                              | false    | null                             |
+| onZoom                | func                                                              | false    | null                             |
+| onTilesLoaded         | func                                                              | false    | null                             |
+| panEnabled            | bool                                                              | false    | true                             |
+| showControls          | bool                                                              | false    | true                             |
+| zoom                  | number                                                            | false    | 15                               |
+
+Note: One of `bounds` and `center` must be provided.
+
+#### withGoogleMapsScript
+
+When using `withGoogleMapsScript`, some additional props are available:
+
+| Property                  | PropType | Required | Default Value                     |
+| ------------------------- | -------- | -------- | --------------------------------- |
+| googleMapsApiKey          | string   | true     | -                                 |
+| libraries                 | array    | false    | ['geometry', 'drawing', 'places'] |
+| loadingElement            | node     | false    | BpkSpinner                        |
+| preventGoogleFontsLoading | bool     | false    | false                             |
+
+### BpkIconMarker
+
+| Property       | PropType                                     | Required | Default Value        |
+| -------------- | -------------------------------------------- | -------- | -------------------- |
+| icon           | node                                         | true     | -                    |
+| position       | shape({latitude: number, longitude: number}) | true     | -                    |
+| className      | string                                       | false    | null                 |
+| disabled       | bool                                         | false    | false                |
+| onClick        | func                                         | false    | null                 |
+| selected       | bool                                         | false    | false                |
+| buttonProps    | object                                       | false    | null                 |
+
+#### `icon`
+
+`BpkIconMarker` only supports small icons from the Backpack icon set. Large icons should not be used with `BpkIconMarker`.
+
+### BpkPriceMarker
+
+| Property       | PropType                                     | Required | Default Value |
+| -------------- | -------------------------------------------- | -------- | ------------- |
+| label          | string                                       | true     | -             |
+| position       | shape({latitude: number, longitude: number}) | true     | -             |
+| arrowClassName | string                                       | false    | null          |
+| className      | string                                       | false    | null          |
+| disabled       | bool                                         | false    | false         |
+| onClick        | func                                         | false    | null          |
+| status         | oneOf(`PRICE_MARKER_STATUSES.default`, `PRICE_MARKER_STATUSES.focused`, `PRICE_MARKER_STATUSES.viewed`)                                        | false    | `PRICE_MARKER_STATUSES.default`             |
+| buttonProps    | object                                       | false    | null          |
+
+### BpkOverlayView
+
+| Property | PropType                                     | Required | Default Value |
+| -------- | -------------------------------------------- | -------- | ------------- |
+| children | node                                         | true     | -             |
+| position | shape({latitude: number, longitude: number}) | true     | -             |
+
+## Theme Props
+
+Icon markers:
+
+- `iconMarkerDefaultBackgroundColor`
+- `iconMarkerDefaultSelectedColor`
+- `iconMarkerDefaultDisabledBackgroundColor`
+- `iconMarkerDefaultDisabledColor`
+
+Price markers:
+
+- `priceMarkerBackgroundColor`
+
+- `priceMarkerSelectedBorderColor`
+- `priceMarkerSelectedColor`
+
+- `priceMarkerViewedBackgroundColor`
+- `priceMarkerViewedBorderColor`
+- `priceMarkerViewedColor`

package/bpk-component-map/index.js

@@ -1,60 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "BpkIconMarker", {
-  enumerable: true,
-  get: function () {
-    return _BpkIconMarker.default;
-  }
-});
-Object.defineProperty(exports, "BpkOverlayView", {
-  enumerable: true,
-  get: function () {
-    return _BpkOverlayView.default;
-  }
-});
-Object.defineProperty(exports, "BpkPriceMarker", {
-  enumerable: true,
-  get: function () {
-    return _BpkPriceMarker.default;
-  }
-});
-Object.defineProperty(exports, "PRICE_MARKER_STATUSES", {
-  enumerable: true,
-  get: function () {
-    return _BpkPriceMarker.PRICE_MARKER_STATUSES;
-  }
-});
-exports.default = void 0;
-Object.defineProperty(exports, "defaultIconMarkerThemeAttributes", {
-  enumerable: true,
-  get: function () {
-    return _themeAttributes.defaultIconMarkerThemeAttributes;
-  }
-});
-Object.defineProperty(exports, "priceMarkerThemeAttributes", {
-  enumerable: true,
-  get: function () {
-    return _themeAttributes.priceMarkerThemeAttributes;
-  }
-});
-Object.defineProperty(exports, "withGoogleMapsScript", {
-  enumerable: true,
-  get: function () {
-    return _withGoogleMapsScript.default;
-  }
-});
-var _BpkMap = _interopRequireDefault(require("./src/BpkMap"));
-var _BpkIconMarker = _interopRequireDefault(require("./src/BpkIconMarker"));
-var _BpkPriceMarker = _interopRequireWildcard(require("./src/BpkPriceMarker"));
-var _BpkOverlayView = _interopRequireDefault(require("./src/BpkOverlayView"));
-var _withGoogleMapsScript = _interopRequireDefault(require("./src/withGoogleMapsScript"));
-var _themeAttributes = require("./src/themeAttributes");
-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
  *
@@ -72,5 +15,31 @@ 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 = _BpkMap.default;
-exports.default = _default;
+
+/* @flow strict */
+
+import BpkMap from './src/BpkMap';
+import BpkIconMarker, {
+  type Props as IconMarkerProps,
+} from './src/BpkIconMarker';
+import BpkPriceMarker, { PRICE_MARKER_STATUSES } from './src/BpkPriceMarker';
+import BpkOverlayView from './src/BpkOverlayView';
+import withGoogleMapsScript from './src/withGoogleMapsScript';
+import { type LatLong } from './src/common-types';
+import {
+  defaultIconMarkerThemeAttributes,
+  priceMarkerThemeAttributes,
+} from './src/themeAttributes';
+
+export default BpkMap;
+export type BpkMapLatLong = LatLong;
+export type BpkIconMarkerProps = IconMarkerProps;
+export {
+  BpkIconMarker,
+  BpkPriceMarker,
+  BpkOverlayView,
+  withGoogleMapsScript,
+  defaultIconMarkerThemeAttributes,
+  priceMarkerThemeAttributes,
+  PRICE_MARKER_STATUSES,
+};

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

@@ -1,40 +1,57 @@
-"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.
+ */
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _BpkOverlayView = _interopRequireDefault(require("./BpkOverlayView"));
-var _commonTypes = require("./common-types");
-const _excluded = ["children", "position"];
-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); }
-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 getPixelPositionOffset = (width, height) => ({
+/* @flow strict */
+
+import React, { type Node } from 'react';
+import PropTypes from 'prop-types';
+
+import BpkOverlayView from './BpkOverlayView';
+import { LatLongPropType, type LatLong } from './common-types';
+
+type Props = {
+  children: Node,
+  position: LatLong,
+};
+
+const getPixelPositionOffset = (width: number, height: number) => ({
   x: -(width / 2),
-  y: -height
+  y: -height,
 });
-const BpkBasicMapMarker = props => {
-  const {
-      children,
-      position
-    } = props,
-    rest = _objectWithoutProperties(props, _excluded);
+
+const BpkBasicMapMarker = (props: Props) => {
+  const { children, position, ...rest } = props;
+
   return (
-    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _react.default.createElement(_BpkOverlayView.default, _extends({
-      position: position,
-      getPixelPositionOffset: getPixelPositionOffset
-    }, rest), children)
+    <BpkOverlayView
+      position={position}
+      getPixelPositionOffset={getPixelPositionOffset}
+      {...rest}
+    >
+      {children}
+    </BpkOverlayView>
   );
 };
+
 BpkBasicMapMarker.propTypes = {
-  children: _propTypes.default.node.isRequired,
-  position: _commonTypes.LatLongPropType.isRequired
+  children: PropTypes.node.isRequired,
+  position: LatLongPropType.isRequired,
 };
-var _default = BpkBasicMapMarker;
-exports.default = _default;
+
+export default BpkBasicMapMarker;

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

@@ -1,62 +1,100 @@
-"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.
+ */
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _bpkReactUtils = require("../../bpk-react-utils");
-var _BpkIconMarkerBackground = _interopRequireDefault(require("./BpkIconMarkerBackground"));
-var _commonTypes = require("./common-types");
-var _BpkBasicMapMarker = _interopRequireDefault(require("./BpkBasicMapMarker"));
-var _BpkIconMarkerModule = _interopRequireDefault(require("./BpkIconMarker.module.css"));
-const _excluded = ["buttonProps", "className", "disabled", "icon", "onClick", "position", "selected"];
-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); }
-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 getClassName = (0, _bpkReactUtils.cssModules)(_BpkIconMarkerModule.default);
-const BpkIconMarker = props => {
+/* @flow strict */
+
+import React, { type Node } from 'react';
+import PropTypes from 'prop-types';
+
+import { cssModules } from '../../bpk-react-utils';
+
+import BpkIconMarkerBackground from './BpkIconMarkerBackground';
+import { LatLongPropType, type LatLong } from './common-types';
+import BpkBasicMapMarker from './BpkBasicMapMarker';
+import STYLES from './BpkIconMarker.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+export type Props = {
+  icon: Node,
+  position: LatLong,
+  disabled: boolean,
+  selected: boolean,
+  className: ?string,
+  onClick: ?(event: SyntheticEvent<>) => mixed,
+  buttonProps: ?{ [string]: any },
+};
+
+const BpkIconMarker = (props: Props) => {
   const {
-      buttonProps,
-      className,
-      disabled,
-      icon,
-      onClick,
-      position,
-      selected
-    } = props,
-    rest = _objectWithoutProperties(props, _excluded);
-  const wrapperClassNames = getClassName('bpk-icon-marker__wrapper', selected && 'bpk-icon-marker__wrapper--selected', className);
-  const iconClassNames = getClassName('bpk-icon-marker__icon', onClick && !disabled && 'bpk-icon-marker__icon--interactive', disabled && 'bpk-icon-marker__icon--disabled', selected && 'bpk-icon-marker__icon--selected');
+    buttonProps,
+    className,
+    disabled,
+    icon,
+    onClick,
+    position,
+    selected,
+    ...rest
+  } = props;
+
+  const wrapperClassNames = getClassName(
+    'bpk-icon-marker__wrapper',
+    selected && 'bpk-icon-marker__wrapper--selected',
+    className,
+  );
+
+  const iconClassNames = getClassName(
+    'bpk-icon-marker__icon',
+    onClick && !disabled && 'bpk-icon-marker__icon--interactive',
+    disabled && 'bpk-icon-marker__icon--disabled',
+    selected && 'bpk-icon-marker__icon--selected',
+  );
+
   return (
-    /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _react.default.createElement(_BpkBasicMapMarker.default, _extends({
-      position: position
-    }, rest), /*#__PURE__*/_react.default.createElement("button", _extends({
-      type: "button",
-      className: wrapperClassNames,
-      onClick: onClick,
-      disabled: disabled
-    }, buttonProps), /*#__PURE__*/_react.default.createElement(_BpkIconMarkerBackground.default, {
-      disabled: disabled,
-      interactive: onClick !== null && !disabled,
-      selected: selected
-    }), /*#__PURE__*/_react.default.createElement("div", {
-      className: iconClassNames
-    }, icon)))
+    <BpkBasicMapMarker position={position} {...rest}>
+      {/* $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'. */}
+      <button
+        type="button"
+        className={wrapperClassNames}
+        onClick={onClick}
+        disabled={disabled}
+        {...buttonProps}
+      >
+        <BpkIconMarkerBackground
+          disabled={disabled}
+          interactive={onClick !== null && !disabled}
+          selected={selected}
+        />
+        <div className={iconClassNames}>{icon}</div>
+      </button>
+    </BpkBasicMapMarker>
   );
 };
+
 BpkIconMarker.propTypes = {
-  icon: _propTypes.default.node.isRequired,
-  position: _commonTypes.LatLongPropType.isRequired,
-  className: _propTypes.default.string,
-  disabled: _propTypes.default.bool,
-  onClick: _propTypes.default.func,
-  selected: _propTypes.default.bool,
-  buttonProps: _propTypes.default.object // eslint-disable-line react/forbid-prop-types
+  icon: PropTypes.node.isRequired,
+  position: LatLongPropType.isRequired,
+  className: PropTypes.string,
+  disabled: PropTypes.bool,
+  onClick: PropTypes.func,
+  selected: PropTypes.bool,
+  buttonProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
 };
 
 BpkIconMarker.defaultProps = {
@@ -64,7 +102,7 @@ BpkIconMarker.defaultProps = {
   disabled: false,
   onClick: null,
   selected: false,
-  buttonProps: null
+  buttonProps: null,
 };
-var _default = BpkIconMarker;
-exports.default = _default;
+
+export default BpkIconMarker;

package/bpk-component-map/src/BpkIconMarker.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-icon-marker__wrapper{position:relative;z-index:1;padding:1rem .8125rem;border:none;background:none}.bpk-icon-marker__wrapper--selected{z-index:2;padding:1rem 1rem}.bpk-icon-marker__icon{position:absolute;top:0.3rem;left:.3125rem;color:#fff}.bpk-icon-marker__icon>svg{fill:currentcolor}.bpk-icon-marker__icon--interactive{cursor:pointer}.bpk-icon-marker__icon--disabled{color:#0c838a;color:var(--bpk-icon-marker-default-disabled-color, #0c838a)}.bpk-icon-marker__icon--selected{top:0.5rem;left:.5rem;color:#0c838a;color:var(--bpk-icon-marker-default-selected-color, #0c838a)}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-icon-marker__wrapper{position:relative;z-index:1;padding:1rem .8125rem;border:none;background:none}.bpk-icon-marker__wrapper--selected{z-index:2;padding:1rem 1rem}.bpk-icon-marker__icon{position:absolute;top:0.3rem;left:0.25rem;color:#fff}.bpk-icon-marker__icon>svg{fill:currentColor}.bpk-icon-marker__icon--interactive{cursor:pointer}.bpk-icon-marker__icon--disabled{color:#00a698;color:var(--bpk-icon-marker-default-disabled-color, #00a698)}.bpk-icon-marker__icon--selected{top:0.5rem;left:0.4rem;color:#00a698;color:var(--bpk-icon-marker-default-selected-color, #00a698)}

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

@@ -0,0 +1,79 @@
+/*
+ * 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.scss';
+
+$bpk-spacing-v2: true;
+
+.bpk-icon-marker {
+  &__wrapper {
+    position: relative;
+    z-index: 1;
+    padding: bpk-spacing-base() (bpk-spacing-base() - ($bpk-one-pixel-rem * 3));
+    border: none; // Prevent default <button> styling.
+    background: none; // Prevent default <button> styling.
+
+    &--selected {
+      z-index: 2;
+      padding: (bpk-spacing-sm() * 4) bpk-spacing-base();
+    }
+  }
+
+  &__icon {
+    $marker-width: $bpk-one-pixel-rem * 26;
+
+    position: absolute;
+
+    // This ensures that the icon is positioned exactly in the
+    // centre of the marker.
+    top: 0.3rem;
+    left: ($marker-width - $bpk-icon-size-sm) / 2;
+    color: $bpk-surface-default-day;
+
+    > svg {
+      fill: currentcolor;
+    }
+
+    &--interactive {
+      cursor: pointer;
+    }
+
+    &--disabled {
+      @include bpk-themeable-property(
+        color,
+        --bpk-icon-marker-default-disabled-color,
+        $bpk-status-success-spot-day
+      );
+    }
+
+    &--selected {
+      $selected-marker-width: $bpk-one-pixel-rem * 32;
+
+      // This ensures that the icon is positioned exactly in the
+      // centre of the marker.
+      top: bpk-spacing-md();
+      left: ($selected-marker-width - $bpk-icon-size-sm) / 2;
+
+      @include bpk-themeable-property(
+        color,
+        --bpk-icon-marker-default-selected-color,
+        $bpk-status-success-spot-day
+      );
+    }
+  }
+}