@skyscanner/backpack-web 29.2.0 → 29.3.0

package/bpk-component-map/index.js

@@ -17,8 +17,9 @@
  */import BpkMap from "./src/BpkMap";
 import BpkIconMarker 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 { defaultIconMarkerThemeAttributes, priceMarkerThemeAttributes } from "./src/themeAttributes";
 export default BpkMap;
-export { BpkIconMarker, BpkPriceMarker, BpkOverlayView, withGoogleMapsScript, defaultIconMarkerThemeAttributes, priceMarkerThemeAttributes, PRICE_MARKER_STATUSES };
+export { BpkIconMarker, BpkPriceMarker, BpkPriceMarkerV2, BpkOverlayView, withGoogleMapsScript, defaultIconMarkerThemeAttributes, priceMarkerThemeAttributes, PRICE_MARKER_STATUSES, MARKER_STATUSES };

package/bpk-component-map/src/BpkBasicMapMarker.d.ts

@@ -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 type { Node } from 'react';
+import { type LatLong } from './common-types';
+
+export type Props = {
+  children: Node;
+  position: LatLong;
+};
+
+declare const BpkBasicMapMarker: ({ children, position }: Props) => JSX.Element;
+
+export default BpkBasicMapMarker;

package/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker.d.ts

@@ -0,0 +1,53 @@
+/*
+ * 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 type { Node } from 'react';
+import { MouseEvent, ReactNode } from 'react';
+
+export const MARKER_STATUSES = {
+  unselected: 'unselected',
+  selected: 'selected',
+  previous_selected: 'previous_selected',
+} as const;
+
+export type Status = (typeof MARKER_STATUSES)[keyof typeof MARKER_STATUSES];
+
+type Props = {
+  label: string;
+  icon?: ReactNode;
+  accessibilityLabel: string;
+  position: {
+    latitude: number;
+    longitude: number;
+  };
+  className?: string;
+  onClick?: (event: MouseEvent) => void;
+  buttonProps?: { [key: string]: string };
+  status?: Status;
+};
+
+declare const BpkPriceMarkerV2: ({
+  label,
+  position,
+  className,
+  onClick,
+  buttonProps,
+  status,
+  style,
+}: Props) => JSX.Element;
+
+export default BpkPriceMarkerV2;

package/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker.js

@@ -0,0 +1,64 @@
+/*
+ * 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 { cssModules } from "../../../bpk-react-utils";
+import BpkText, { TEXT_STYLES } from "../../../bpk-component-text";
+import BpkBasicMapMarker from "../BpkBasicMapMarker";
+import STYLES from "./BpkPriceMarker.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+export const MARKER_STATUSES = {
+  unselected: 'unselected',
+  selected: 'selected',
+  previous_selected: 'previous_selected'
+};
+const BpkPriceMarkerV2 = props => {
+  const {
+    accessibilityLabel,
+    buttonProps,
+    className,
+    icon,
+    label,
+    onClick,
+    position,
+    status = MARKER_STATUSES.unselected,
+    ...rest
+  } = props;
+  const markerWrapperClassNames = getClassName('bpk-price-marker__wrapper');
+  const classNames = getClassName('bpk-price-marker', onClick && 'bpk-price-marker--dynamic', `bpk-price-marker-${status}`, icon && `bpk-price-marker-${status}--icon`, className);
+  return /*#__PURE__*/_jsx(BpkBasicMapMarker, {
+    position: position,
+    "aria-label": accessibilityLabel,
+    ...rest,
+    children: /*#__PURE__*/_jsx("button", {
+      type: "button",
+      className: markerWrapperClassNames,
+      onClick: onClick,
+      ...buttonProps,
+      children: /*#__PURE__*/_jsxs("div", {
+        className: classNames,
+        children: [icon, /*#__PURE__*/_jsx(BpkText, {
+          textStyle: TEXT_STYLES.label2,
+          children: label
+        })]
+      })
+    })
+  });
+};
+export default BpkPriceMarkerV2;

package/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker.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-price-marker{display:flex;height:1.5rem;padding:0 0.5rem;justify-content:center;align-items:center;border-radius:.5rem;gap:0.5rem}.bpk-price-marker--dynamic{cursor:pointer}.bpk-price-marker-unselected{background-color:#fff;color:#161616}.bpk-price-marker-unselected--icon{fill:#161616}.bpk-price-marker-previous_selected{background-color:#cfe4ff;color:#161616}.bpk-price-marker-previous_selected--icon{fill:#161616}.bpk-price-marker-selected{background-color:#05203c;color:#fff}.bpk-price-marker-selected--icon{fill:#fff}.bpk-price-marker__wrapper{position:relative;display:flex;padding:0;flex-direction:column;align-items:center;border:none;background:none}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "29.2.0",
+  "version": "29.3.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -24,8 +24,8 @@
   "dependencies": {
     "@popperjs/core": "^2.11.5",
     "@react-google-maps/api": "^2.12.0",
-    "@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",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
     "d3-path": "^2.0.0",