[BD-7310][BpkMap] Add a BpkPriceMarkerV2 component (#3007)

[BD-7310][BpkMap] Add a BpkPriceMarkerV2 component (#3007)

examples/bpk-component-map/examples.js

@@ -25,21 +25,25 @@ import { action } from '../bpk-storybook-utils';
 import BpkText from '../../packages/bpk-component-text';
 import { withRtlSupport } from '../../packages/bpk-component-icon';
 import LandmarkIconSm from '../../packages/bpk-component-icon/sm/landmark';
+import AirportsIconSm from '../../packages/bpk-component-icon/sm/airports';
 import FoodIconSm from '../../packages/bpk-component-icon/sm/food';
 import ParkingIconSm from '../../packages/bpk-component-icon/sm/parking';
 import HotelIconSm from '../../packages/bpk-component-icon/sm/hotels';
 import BpkMap, {
   BpkOverlayView,
   BpkIconMarker,
   BpkPriceMarker,
+  BpkPriceMarkerV2,
   PRICE_MARKER_STATUSES,
+  MARKER_STATUSES,
   withGoogleMapsScript,
 } from '../../packages/bpk-component-map';
 
 const BpkMapWithLoading = withGoogleMapsScript(BpkMap);
 
 const AlignedHotelIconSm = withRtlSupport(HotelIconSm);
 const AlignedLandmarkIconSm = withRtlSupport(LandmarkIconSm);
+const AlignedAirportsIconSm = withRtlSupport(AirportsIconSm);
 const AlignedFoodIconSm = withRtlSupport(FoodIconSm);
 const AlignedParkingIconSm = withRtlSupport(ParkingIconSm);
 
@@ -76,6 +80,7 @@ const venues = [
     price: '£48',
     disabled: false,
     icon: <AlignedLandmarkIconSm />,
+    airportsIcon: <AlignedAirportsIconSm />,
   },
   {
     id: '2',
@@ -85,6 +90,7 @@ const venues = [
     price: '£151',
     disabled: false,
     icon: <AlignedFoodIconSm />,
+    airportsIcon: <AlignedAirportsIconSm />,
   },
   {
     id: '3',
@@ -94,6 +100,7 @@ const venues = [
     price: '£62',
     disabled: false,
     icon: <AlignedHotelIconSm />,
+    airportsIcon: <AlignedAirportsIconSm />,
   },
   {
     id: '4',
@@ -103,6 +110,7 @@ const venues = [
     price: '£342',
     disabled: false,
     icon: <AlignedHotelIconSm />,
+    airportsIcon: <AlignedAirportsIconSm />,
   },
   {
     id: '5',
@@ -112,6 +120,7 @@ const venues = [
     price: 'Sold out',
     disabled: true,
     icon: <AlignedParkingIconSm />,
+    airportsIcon: <AlignedAirportsIconSm />,
   },
 ];
 
@@ -177,6 +186,71 @@ class StatefulBpkPriceMarker extends Component<
   }
 }
 
+class StatefulBpkPriceMarkerV2 extends Component<
+  { action: () => mixed, airportsIconWithPrice: boolean },
+  PriceMarkerState,
+> {
+  static defaultProps = {
+    action: () => null,
+  };
+
+  constructor(props: { action: () => mixed, airportsIconWithPrice: boolean }) {
+    super(props);
+    this.state = {
+      selectedId: '2',
+      viewedVenues: ['1'],
+    };
+  }
+
+  getStatus = (id: string) => {
+    if (this.state.selectedId === id) {
+      return MARKER_STATUSES.selected;
+    }
+    if (this.state.viewedVenues.includes(id)) {
+      return MARKER_STATUSES.previous_selected;
+    }
+    return MARKER_STATUSES.unselected;
+  };
+
+  selectVenue = (id: string) => {
+    this.setState((prevState) => ({
+      selectedId: id,
+      viewedVenues: [...prevState.viewedVenues, id],
+    }));
+  };
+
+  render() {
+    return (
+      <StoryMap
+        zoom={15}
+        center={{ latitude: 55.944665, longitude: -3.1964903 }}
+      >
+        {venues
+          .filter((venue) => venue.disabled === false)
+          .map((venue) => (
+            <BpkPriceMarkerV2
+              id={venue.id}
+              label={venue.price}
+              icon={
+                this.props.airportsIconWithPrice ? venue.airportsIcon : null
+              }
+              position={{
+                latitude: venue.latitude,
+                longitude: venue.longitude,
+              }}
+              onClick={() => {
+                this.props.action();
+                this.selectVenue(venue.id);
+              }}
+              status={this.getStatus(venue.id)}
+              accessibilityLabel="Click the price marker"
+            />
+          ))}
+      </StoryMap>
+    );
+  }
+}
+
 class StatefulBpkIconMarker extends Component<
   { action: () => mixed },
   { selectedId: string },
@@ -290,6 +364,20 @@ const WithPriceMarkersExample = () => (
   <StatefulBpkPriceMarker action={action('Price marker clicked')} />
 );
 
+const WithPriceMarkersV2Example = () => (
+  <StatefulBpkPriceMarkerV2
+    action={action('Price marker clicked')}
+    airportsIconWithPrice={false}
+  />
+);
+
+const WithIconPriceMarkersV2Example = () => (
+  <StatefulBpkPriceMarkerV2
+    action={action('Price marker clicked')}
+    airportsIconWithPrice
+  />
+);
+
 const MultipleMapsExample = () => (
   <>
     <span>first map:</span>
@@ -305,6 +393,13 @@ const MultipleMapsExample = () => (
   </>
 );
 
+const VisualTestExample = () => (
+  <>
+    <WithPriceMarkersV2Example />
+    <WithIconPriceMarkersV2Example />
+  </>
+);
+
 export {
   SimpleExample,
   DragDisabledAndHiddenControlsExample,
@@ -315,5 +410,8 @@ export {
   WithAMarkerExample,
   WithIconMarkersExample,
   WithPriceMarkersExample,
+  WithPriceMarkersV2Example,
+  WithIconPriceMarkersV2Example,
   MultipleMapsExample,
+  VisualTestExample,
 };

examples/bpk-component-map/examples.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)}}.pass-node-wrapper{display:flex;align-items:center}.pass-node-wrapper-text{padding-left:0.5rem}.pass-node-wrapper-icon{fill:#fff}

examples/bpk-component-map/stories.js

@@ -27,7 +27,10 @@ import {
   WithAMarkerExample,
   WithIconMarkersExample,
   WithPriceMarkersExample,
+  WithPriceMarkersV2Example,
+  WithIconPriceMarkersV2Example,
   MultipleMapsExample,
+  VisualTestExample,
 } from './examples';
 
 export default {
@@ -53,4 +56,10 @@ export const IconMarkers = WithIconMarkersExample;
 
 export const PriceMarkers = WithPriceMarkersExample;
 
+export const PriceMarkersV2 = WithPriceMarkersV2Example;
+
+export const WithIconPriceMarkersV2 = WithIconPriceMarkersV2Example;
+
+export const VisualTest = VisualTestExample;
+
 export const MultiMaps = MultipleMapsExample;

package.json

@@ -121,8 +121,8 @@
     "@babel/register": "^7.18.9",
     "@percy/cli": "^1.20.0",
     "@percy/storybook": "^4.3.6",
-    "@skyscanner/bpk-foundations-web": "^17.1.0",
-    "@skyscanner/bpk-svgs": "^18.1.1",
+    "@skyscanner/bpk-foundations-web": "^17.2.0",
+    "@skyscanner/bpk-svgs": "^18.1.2",
     "@skyscanner/stylelint-config-skyscanner": "^10.0.0",
     "@storybook/addon-a11y": "^7.1.1",
     "@storybook/addon-actions": "^7.1.1",

packages/bpk-component-map/README.md

@@ -14,12 +14,15 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
 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 AirportsIconSm from '../../packages/bpk-component-icon/sm/airports';
 import BpkMap, {
   BpkIconMarker,
   BpkOverlayView,
 } from '@skyscanner/backpack-web/bpk-component-map';
 
 const AlignedLandmarkIconSm = withRtlSupport(LandmarkIconSm);
+const AlignedAirportsIconSm = withRtlSupport(AirportsIconSm);
+
 
 export default () => (
   <BpkMap
@@ -92,6 +95,54 @@ export default () => (
 );
 ```
 
+### BpkPriceMarkerV2
+
+BpkPriceMarker V2 version that is the BpkPriceMarker redesign.
+
+```js
+import BpkMap, { BpkPriceMarkerV2, 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,
+    }}
+  >
+    <BpkPriceMarkerV2
+      label="£120"
+      position={{ latitude: 27.9881, longitude: 86.925 }}
+      onClick={() => {
+        console.log("Price marker pressed.")
+      }}
+      status={MARKER_STATUSES.selected}
+      accessibilityLabel="Price marker pressed."
+    />
+    <BpkPriceMarkerV2
+      label="£120"
+      position={{ latitude: 27.9881, longitude: 86.925 }}
+      onClick={() => {
+        console.log("Price marker pressed.")
+      }}
+      status={MARKER_STATUSES.previous_selected}
+      accessibilityLabel="Have seen Price marker before"
+    />
+    <BpkPriceMarkerV2
+      label="£120"
+      icon={<AlignedAirportsIconSm />}
+      position={{ latitude: 27.9881, longitude: 86.925 }}
+      onClick={() => {
+        console.log("Click the Price marker with icon.")
+      }}
+      accessibilityLabel="Click the Price marker with icon"
+    />
+  </BpkMap>
+);
+```
+
 ## Accompanying HOCs
 
 ### withGoogleMapsScript
@@ -181,6 +232,19 @@ When using `withGoogleMapsScript`, some additional props are available:
 | status         | oneOf(`PRICE_MARKER_STATUSES.default`, `PRICE_MARKER_STATUSES.focused`, `PRICE_MARKER_STATUSES.viewed`)                                        | false    | `PRICE_MARKER_STATUSES.default`             |
 | buttonProps    | object                                       | false    | null          |
 
+### BpkPriceMarkerV2
+
+| Property           | PropType                                                                                            | Required | Default Value               |
+|--------------------|-----------------------------------------------------------------------------------------------------|----------|-----------------------------|
+| accessibilityLabel | string                                                                                              | true     | -                           |
+| label              | string                                                                                              | true     | -                           |
+| icon               | ReactNode                                                                                           | false    | -                           |
+| position           | {latitude: number, longitude: number}                                                               | true     | -                           |
+| className          | string                                                                                              | false    | -                           |
+| onClick            | func                                                                                                | false    | -                           |
+| status             | oneOf(`MARKER_STATUSES.unselected`, `MARKER_STATUSES.selected`, `MARKER_STATUSES.previous_selected`)| false    |`MARKER_STATUSES.unselected` |
+| buttonProps        | object                                                                                              | false    | -                           |
+
 ### BpkOverlayView
 
 | Property | PropType                                     | Required | Default Value |

packages/bpk-component-map/index.js

@@ -23,6 +23,9 @@ import BpkIconMarker, {
   type Props as IconMarkerProps,
 } from './src/BpkIconMarker';
 import BpkPriceMarker, { PRICE_MARKER_STATUSES } from './src/BpkPriceMarker';
+import BpkPriceMarkerV2, {
+  MARKER_STATUSES,
+} from './src/BpkPriceMarkerV2/BpkPriceMarker';
 import BpkOverlayView from './src/BpkOverlayView';
 import withGoogleMapsScript from './src/withGoogleMapsScript';
 import { type LatLong } from './src/common-types';
@@ -37,9 +40,11 @@ export type BpkIconMarkerProps = IconMarkerProps;
 export {
   BpkIconMarker,
   BpkPriceMarker,
+  BpkPriceMarkerV2,
   BpkOverlayView,
   withGoogleMapsScript,
   defaultIconMarkerThemeAttributes,
   priceMarkerThemeAttributes,
   PRICE_MARKER_STATUSES,
+  MARKER_STATUSES,
 };