@skyscanner/backpack-web 36.12.0 → 36.13.1

package/bpk-component-calendar/src/BpkCalendarGrid.d.ts

@@ -13,6 +13,11 @@ type DefaultProps = {
     minDate: Date;
     onDateClick: () => void;
     onDateKeyDown: () => void;
+    /**
+     * A function to format a human-readable month, for example: "January 2018":
+     * If you just need to quickly prototype, use the following from [`date-fns`](https://date-fns.org/docs/format#usage)
+     */
+    formatMonth: (month: Date) => string;
     preventKeyboardFocus: boolean;
     /**
      * An object to indicate which configuration of the calendar is being used. Choices are `single` date selection or `range` date selection.

package/bpk-component-calendar/src/BpkCalendarGrid.js

@@ -21,7 +21,7 @@ import { cssModules, isDeviceIos } from "../../bpk-react-utils";
 import { addCalendarGridTransition } from "./BpkCalendarGridTransition";
 import BpkCalendarWeek from "./BpkCalendarWeek";
 import { CALENDAR_SELECTION_TYPE } from "./custom-proptypes";
-import { addMonths, getCalendar, getCalendarNoCustomLabel, isSameMonth } from "./date-utils";
+import { addMonths, getCalendar, getCalendarNoCustomLabel, isSameMonth, format } from "./date-utils";
 import STYLES from "./BpkCalendarGrid.module.css";
 
 // This should be imported after `./BpkCalendarGrid.module.css`.
@@ -47,6 +47,7 @@ class BpkCalendarGrid extends Component {
     minDate: new Date(),
     onDateClick: () => {},
     onDateKeyDown: () => {},
+    formatMonth: month => format(month, 'MMMM yyyy'),
     preventKeyboardFocus: false,
     selectionConfiguration: {
       type: CALENDAR_SELECTION_TYPE.single,
@@ -84,6 +85,7 @@ class BpkCalendarGrid extends Component {
       dateModifiers,
       dateProps,
       focusedDate,
+      formatMonth,
       ignoreOutsideDate,
       isKeyboardFocusable,
       markOutsideDays,
@@ -105,6 +107,7 @@ class BpkCalendarGrid extends Component {
       className: classNames,
       "aria-hidden": !isKeyboardFocusable,
       role: "grid",
+      "aria-label": formatMonth(month),
       children: /*#__PURE__*/_jsx("div", {
         role: "rowgroup",
         children: calendarMonthWeeks.map(dates => /*#__PURE__*/_jsx(BpkCalendarWeek, {

package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.d.ts

@@ -1,5 +1,6 @@
 import type { ReactNode, ElementType, CSSProperties } from 'react';
 import { Component } from 'react';
+import type { DebouncedFunc } from 'lodash';
 declare const computeScrollBarAwareHeight: (scrollerEl: HTMLElement | null, innerEl: HTMLElement | null) => string | null;
 declare const computeScrollIndicatorClassName: (scrollerEl: HTMLElement | null, leadingIndicatorClassName?: string, trailingIndicatorClassName?: string) => string[] | null;
 type Props = {
@@ -18,11 +19,12 @@ type State = {
     scrollIndicatorClassName: string | null;
 };
 declare class BpkMobileScrollContainer extends Component<Props, State> {
+    debouncedResize: DebouncedFunc<() => void>;
     static defaultProps: Partial<Props>;
     constructor(props: Props);
     componentDidMount(): void;
     componentWillUnmount(): void;
-    onWindowResize: import("lodash").DebouncedFunc<() => void>;
+    onWindowResize: () => void;
     setScrollIndicatorClassName: () => void;
     setScrollBarAwareHeight: () => void;
     innerEl: HTMLElement | null;

package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js

@@ -62,21 +62,22 @@ class BpkMobileScrollContainer extends Component {
       computedHeight: 'auto',
       scrollIndicatorClassName: null
     };
+    this.debouncedResize = debounce(this.onWindowResize, 100);
   }
   componentDidMount() {
     requestAnimationFrame(() => {
       this.setScrollBarAwareHeight();
       this.setScrollIndicatorClassName();
     });
-    window.addEventListener('resize', this.onWindowResize);
+    window.addEventListener('resize', this.debouncedResize);
   }
   componentWillUnmount() {
-    window.removeEventListener('resize', this.onWindowResize);
+    window.removeEventListener('resize', this.debouncedResize);
   }
-  onWindowResize = debounce(() => {
+  onWindowResize = () => {
     this.setScrollBarAwareHeight();
     this.setScrollIndicatorClassName();
-  }, 100);
+  };
   setScrollIndicatorClassName = () => {
     const classNames = computeScrollIndicatorClassName(this.scrollerEl, this.props.leadingIndicatorClassName, this.props.trailingIndicatorClassName);
     if (!classNames) {

package/bpk-component-price/src/BpkPrice.js

@@ -40,6 +40,7 @@ const BpkPrice = props => {
   const {
     align,
     className,
+    icon,
     leadingClassName,
     leadingText,
     previousPrice,
@@ -51,6 +52,25 @@ const BpkPrice = props => {
   const defaultTextStyle = getDefaultTextStyle(size);
   const priceTextStyle = getPriceTextStyle(size);
   const isAlignRight = align === ALIGNS.right;
+  const getTrailingTextNode = () => {
+    if (!trailingText) {
+      return null;
+    }
+    const textNode = /*#__PURE__*/_jsx(BpkText, {
+      textStyle: defaultTextStyle,
+      tagName: "span",
+      children: trailingText
+    });
+    // When aligned right, use a <div> as the text appears on a separate line.
+    // When aligned left, use a <span> as the test is inline.
+    return isAlignRight ? /*#__PURE__*/_jsx("div", {
+      className: getClassName('bpk-price__trailing'),
+      children: textNode
+    }) : /*#__PURE__*/_jsx("span", {
+      className: getClassName('bpk-price__trailing'),
+      children: textNode
+    });
+  };
   return /*#__PURE__*/_jsxs("div", {
     className: getClassName('bpk-price', isAlignRight && 'bpk-price--right', className)
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
@@ -78,23 +98,22 @@ const BpkPrice = props => {
         children: leadingText
       })]
     }), /*#__PURE__*/_jsxs("div", {
-      className: getClassName(isAlignRight && 'bpk-price__column-container'),
+      className: getClassName(isAlignRight && 'bpk-price__main--right'),
       children: [/*#__PURE__*/_jsx("span", {
-        className: getClassName('bpk-price__price', !isAlignRight && 'bpk-price__spacing'),
+        className: getClassName('bpk-price__price',
+        // When aligning right, we use the gap property to add space between the price and the icon.
+        // When aligning left, we use the ::after pseudo-element instead to achieve the desired wrapping behaviour.
+        !isAlignRight && 'bpk-price__spacing'),
         children: /*#__PURE__*/_jsx(BpkText, {
           textStyle: priceTextStyle,
           tagName: "span",
           children: price
         })
-      }), trailingText && /*#__PURE__*/_jsx("span", {
-        className: getClassName('bpk-price__trailing'),
-        children: /*#__PURE__*/_jsx(BpkText, {
-          textStyle: defaultTextStyle,
-          tagName: "span",
-          children: trailingText
-        })
-      })]
-    })]
+      }), icon && /*#__PURE__*/_jsx("span", {
+        className: getClassName('bpk-price__icon', !isAlignRight && 'bpk-price__spacing'),
+        children: icon
+      }), !isAlignRight && getTrailingTextNode()]
+    }), isAlignRight && getTrailingTextNode()]
   });
 };
 BpkPrice.propTypes = {

package/bpk-component-price/src/BpkPrice.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-price{display:flex;flex-direction:column;color:#626971}.bpk-price--right{text-align:right}html[dir=rtl] .bpk-price--right{text-align:left}.bpk-price__leading{display:flex;flex-direction:row}.bpk-price__leading--right{display:flex;justify-content:flex-end}.bpk-price__previous-price{display:flex;color:#e70866;text-decoration-line:line-through}.bpk-price__separator{display:flex;margin:0 .25rem}.bpk-price__column-container{display:flex;flex-direction:column}.bpk-price__price{display:contents;color:#161616;word-break:break-all}.bpk-price__spacing::after{content:"";margin-right:.25rem}html[dir=rtl] .bpk-price__spacing::after{margin-right:unset;margin-left:.25rem}.bpk-price__trailing{display:contents;white-space:nowrap}
+.bpk-price{display:flex;flex-direction:column;color:#626971}.bpk-price--right{align-items:flex-end}.bpk-price__leading{display:flex;flex-direction:row}.bpk-price__leading--right{display:flex;justify-content:flex-end}.bpk-price__previous-price{display:flex;color:#e70866;text-decoration-line:line-through}.bpk-price__separator{display:flex;margin:0 .25rem}.bpk-price__main--right{display:flex;align-items:center;gap:.25rem}.bpk-price__price{display:contents;color:#161616;word-break:break-all}.bpk-price__spacing::after{content:"";margin-inline-end:.25rem}.bpk-price__icon{display:contents}.bpk-price__trailing{display:contents;white-space:nowrap}

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.js

@@ -42,6 +42,7 @@ const BpkScrollableCalendarGrid = ({
     }), /*#__PURE__*/_jsx(BpkCalendarGrid, {
       month: month,
       ignoreOutsideDate: true,
+      formatMonth: formatMonth,
       ...rest
     })]
   });

package/package.json

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