@skyscanner/backpack-web 36.17.0 → 36.18.0

package/README.md

@@ -68,6 +68,7 @@ To contribute please see [contributing.md](CONTRIBUTING.md).
 [`bpk-component-panel`](/packages/bpk-component-panel)
 [`bpk-component-phone-input`](/packages/bpk-component-phone-input)
 [`bpk-component-popover`](/packages/bpk-component-popover)
+[`bpk-component-price-range`](/packages/bpk-component-price-range)
 [`bpk-component-progress`](/packages/bpk-component-progress)
 [`bpk-component-radio`](/packages/bpk-component-radio)
 [`bpk-component-rtl-toggle`](/packages/bpk-component-rtl-toggle)

package/bpk-component-inset-banner/src/BpkInsetBanner.js

@@ -75,8 +75,8 @@ const BpkInsetBanner = ({
           label: callToAction?.popverLabel || '',
           placement: callToAction?.popoverPlacement || 'bottom',
           onClose: e => {
-            e.stopPropagation();
-            e.preventDefault();
+            e?.stopPropagation();
+            e?.preventDefault();
           },
           closeButtonText: callToAction?.buttonCloseLabel,
           closeButtonIcon: callToAction?.closeBtnIcon,

package/bpk-component-popover/src/BpkPopover.d.ts

@@ -3,6 +3,7 @@ import type { Placement } from '@floating-ui/react';
 declare const EVENT_SOURCES: {
     CLOSE_BUTTON: string;
     CLOSE_LINK: string;
+    CLOSE_OUTSIDE: string;
 };
 type CloseButtonProps = {
     /**
@@ -16,7 +17,7 @@ export type Props = CloseButtonProps & {
     children: ReactNode;
     id: string;
     label: string;
-    onClose: (event: SyntheticEvent<HTMLButtonElement>, props: {
+    onClose: (event: SyntheticEvent<HTMLButtonElement> | null, props: {
         source: (typeof EVENT_SOURCES)[keyof typeof EVENT_SOURCES];
     }) => void;
     className?: string | null;

package/bpk-component-popover/src/BpkPopover.js

@@ -32,7 +32,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 const getClassName = cssModules(STYLES);
 const EVENT_SOURCES = {
   CLOSE_BUTTON: 'CLOSE_BUTTON',
-  CLOSE_LINK: 'CLOSE_LINK'
+  CLOSE_LINK: 'CLOSE_LINK',
+  CLOSE_OUTSIDE: 'CLOSE_OUTSIDE'
 };
 
 // The stroke width is used to set the border width of the arrow.
@@ -75,13 +76,21 @@ const BpkPopover = ({
     }
   }, [isOpen]);
   const arrowRef = useRef(null);
+  const onFloatingChange = isFloatingOpen => {
+    setIsOpenState(isFloatingOpen);
+    if (!isFloatingOpen && onClose) {
+      onClose(null, {
+        source: EVENT_SOURCES.CLOSE_OUTSIDE
+      });
+    }
+  };
   const {
     context,
     floatingStyles,
     refs
   } = useFloating({
     open: isOpenState,
-    onOpenChange: setIsOpenState,
+    onOpenChange: onFloatingChange,
     placement,
     middleware: [showArrow && offset(17), shift(), showArrow && arrow({
       element: arrowRef

package/bpk-component-price-range/index.d.ts

@@ -0,0 +1,3 @@
+import BpkPriceRange, { type Props as BpkPriceRangeProps } from './src/BpkPriceRange';
+export type { BpkPriceRangeProps };
+export default BpkPriceRange;

package/bpk-component-price-range/index.js

@@ -0,0 +1,20 @@
+/*
+ * 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 BpkPriceRange from "./src/BpkPriceRange";
+export default BpkPriceRange;

package/bpk-component-price-range/src/BpkPriceMarker.d.ts

@@ -0,0 +1,7 @@
+import type { MarkerType } from './common-types';
+type Props = {
+    priceLabel: string;
+    type: MarkerType;
+};
+declare const _default: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLDivElement>>;
+export default _default;

package/bpk-component-price-range/src/BpkPriceMarker.js

@@ -0,0 +1,38 @@
+/*
+ * 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 { forwardRef } from 'react';
+import BpkText, { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
+import { cssModules } from "../../bpk-react-utils";
+import STYLES from "./BpkPriceMarker.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkPriceMarker = ({
+  priceLabel,
+  type
+}, ref) => /*#__PURE__*/_jsxs("div", {
+  className: getClassName('bpk-price-marker', `bpk-price-marker--${type}`),
+  ref: ref,
+  children: [/*#__PURE__*/_jsx(BpkText, {
+    textStyle: TEXT_STYLES.label2,
+    children: priceLabel
+  }), /*#__PURE__*/_jsx("div", {
+    className: getClassName('bpk-price-marker__arrow')
+  })]
+});
+export default /*#__PURE__*/forwardRef(BpkPriceMarker);

package/bpk-component-price-range/src/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.
+ */
+.bpk-price-marker{position:relative;display:flex;z-index:1;flex-direction:column;align-items:center;flex:none;border:none;border-radius:.25rem;background:none;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3);margin-block-end:.375rem}.bpk-price-marker span{display:inline-flex;z-index:1;padding:.125rem .5rem;border-radius:.25rem;color:#fff}.bpk-price-marker__arrow{position:absolute;top:50%;z-index:0;width:1rem;height:1rem;transform:rotate(45deg);border-radius:25%;background-color:inherit}.bpk-price-marker--low{background-color:#0c838a}.bpk-price-marker--medium{background-color:#05203c}.bpk-price-marker--high{background-color:#e70866}

package/bpk-component-price-range/src/BpkPriceRange.d.ts

@@ -0,0 +1,16 @@
+type Marker = {
+    price: string;
+    percentage: number;
+};
+export type Props = {
+    min?: number;
+    max?: number;
+    showPriceIndicator?: boolean;
+    marker: Marker;
+    segments: {
+        low: Marker;
+        high: Marker;
+    };
+};
+declare const BpkPriceRange: ({ marker, max, min, segments, showPriceIndicator, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkPriceRange;

package/bpk-component-price-range/src/BpkPriceRange.js

@@ -0,0 +1,116 @@
+/*
+ * 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 { useEffect, useRef, useState } from 'react';
+import clamp from 'lodash/clamp';
+import BpkText, { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
+import { cssModules } from "../../bpk-react-utils";
+import BpkPriceMarker from "./BpkPriceMarker";
+import { MARKER_TYPES } from "./common-types";
+import STYLES from "./BpkPriceRange.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkPriceRange = ({
+  marker,
+  max = 100,
+  min = 0,
+  segments,
+  showPriceIndicator = true
+}) => {
+  const linesRef = useRef(null);
+  const indicatorRef = useRef(null);
+  const [linesWidth, setLinesWidth] = useState(0);
+  const [prefilledWidth, setPrefilledWidth] = useState(0);
+  const calcPercentage = current => (clamp(current, min, max) - min) / (max - min);
+  const indicatorPercent = calcPercentage(marker.percentage);
+  let type;
+  if (marker.percentage < segments.low.percentage) {
+    type = MARKER_TYPES.LOW;
+  } else if (marker.percentage > segments.high.percentage) {
+    type = MARKER_TYPES.HIGH;
+  } else {
+    type = MARKER_TYPES.MEDIUM;
+  }
+  useEffect(() => {
+    const resizeObserver = new ResizeObserver(entries => {
+      if (entries[0].contentRect) {
+        // listen to the width of the lines
+        setLinesWidth(entries[0].contentRect.width);
+      }
+    });
+    if (linesRef.current) {
+      resizeObserver.observe(linesRef.current);
+    }
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+  useEffect(() => {
+    // to calculate the spacing ahead of the price indicator
+    if (indicatorRef.current && linesWidth) {
+      const estimatedWidth = indicatorPercent * linesWidth - indicatorRef.current.scrollWidth / 2;
+      const maxPrefilledWidth = linesWidth - indicatorRef.current.scrollWidth;
+      const actualPrefilledWidth = clamp(estimatedWidth, 0, maxPrefilledWidth);
+      setPrefilledWidth(actualPrefilledWidth);
+    }
+  }, [indicatorPercent, linesWidth]);
+  const linesClassName = getClassName('bpk-price-range__lines', showPriceIndicator && 'bpk-price-range__lines--large');
+  const lowClassName = getClassName('bpk-price-range__line--low', showPriceIndicator && 'bpk-price-range__line--lowLarge');
+  const highClassName = getClassName('bpk-price-range__line--high', showPriceIndicator && 'bpk-price-range__line--highLarge');
+  const mediumClassName = getClassName('bpk-price-range__line--medium');
+  const dotClassName = getClassName(`bpk-price-range__line--${type}`, 'bpk-price-range__line--dot');
+  return /*#__PURE__*/_jsxs("div", {
+    style: {
+      '--low': calcPercentage(segments.low.percentage),
+      '--high': calcPercentage(segments.high.percentage),
+      '--prefilled-width': `${prefilledWidth}px`
+    },
+    className: getClassName('bpk-price-range', showPriceIndicator && 'bpk-price-range--large'),
+    ref: linesRef,
+    children: [showPriceIndicator && /*#__PURE__*/_jsx("div", {
+      className: getClassName('bpk-price-range__marker'),
+      children: /*#__PURE__*/_jsx(BpkPriceMarker, {
+        ref: indicatorRef,
+        priceLabel: marker.price,
+        type: type
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: linesClassName,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: lowClassName
+      }), /*#__PURE__*/_jsx("div", {
+        className: mediumClassName
+      }), /*#__PURE__*/_jsx("div", {
+        className: highClassName
+      }), !showPriceIndicator && /*#__PURE__*/_jsx("div", {
+        className: dotClassName,
+        ref: indicatorRef
+      })]
+    }), showPriceIndicator && /*#__PURE__*/_jsxs("div", {
+      className: getClassName('bpk-price-range__ranges'),
+      children: [/*#__PURE__*/_jsx(BpkText, {
+        textStyle: TEXT_STYLES.footnote,
+        children: segments.low.price
+      }), /*#__PURE__*/_jsx(BpkText, {
+        textStyle: TEXT_STYLES.footnote,
+        children: segments.high.price
+      })]
+    })]
+  });
+};
+export default BpkPriceRange;

package/bpk-component-price-range/src/BpkPriceRange.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.
+ */
+.bpk-price-range{display:flex;width:100%;flex-direction:column;padding-block:.25rem;row-gap:.25rem}.bpk-price-range--large{padding-block:0}.bpk-price-range__lines{position:relative;display:flex;height:.25rem;flex:none;gap:.125rem}.bpk-price-range__lines--large{height:.5rem}.bpk-price-range__line--low{width:calc(100%*var(--low));height:100%;background-color:#0c838a;border-end-start-radius:.5rem;border-start-start-radius:.5rem}.bpk-price-range__line--lowLarge{border-end-start-radius:.75rem;border-start-start-radius:.75rem}.bpk-price-range__line--medium{width:calc(100%*(var(--high) - var(--low)));height:100%;background-color:#05203c}.bpk-price-range__line--high{width:calc(100%*(1 - var(--high)));height:100%;background-color:#e70866;border-end-end-radius:.5rem;border-start-end-radius:.5rem}.bpk-price-range__line--highLarge{border-end-end-radius:.75rem;border-start-end-radius:.75rem}.bpk-price-range__line--dot{position:absolute;top:50%;display:flex;width:.75rem;height:.75rem;justify-content:center;align-items:center;transform:translate(0, -50%);border-radius:50%;margin-inline-start:var(--prefilled-width)}.bpk-price-range__line--dot::after{content:"";display:block;width:.25rem;height:.25rem;border-radius:50%;background-color:#fff}.bpk-price-range__marker{width:fit-content;margin-inline-start:var(--prefilled-width)}.bpk-price-range__ranges{position:relative;display:flex;width:100%;height:1.25rem}.bpk-price-range__ranges span{position:absolute;display:inline-block;transform:translate(-50%, 0)}html[dir=rtl] .bpk-price-range__ranges span{transform:translate(50%, 0)}.bpk-price-range__ranges span:first-child{inset-inline-start:calc(100%*var(--low))}.bpk-price-range__ranges span:last-child{inset-inline-start:calc(100%*var(--high))}

package/bpk-component-price-range/src/common-types.d.ts

@@ -0,0 +1,6 @@
+export declare const MARKER_TYPES: {
+    readonly LOW: "low";
+    readonly MEDIUM: "medium";
+    readonly HIGH: "high";
+};
+export type MarkerType = (typeof MARKER_TYPES)[keyof typeof MARKER_TYPES];

package/bpk-component-price-range/src/common-types.js

@@ -0,0 +1,23 @@
+/*
+ * 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.
+ */
+
+export const MARKER_TYPES = {
+  LOW: 'low',
+  MEDIUM: 'medium',
+  HIGH: 'high'
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "36.17.0",
+  "version": "36.18.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",