@skyscanner/backpack-web 41.1.0 → 41.3.0

package/bpk-component-pagination/src/BpkPaginationNudger.js

@@ -17,7 +17,7 @@
  */
 
 import PropTypes from 'prop-types';
-import { BpkButtonV2, BUTTON_TYPES } from "../../bpk-component-button";
+import BpkButton, { BUTTON_TYPES } from "../../bpk-component-button";
 import { withRtlSupport, withButtonAlignment } from "../../bpk-component-icon";
 import ArrowLeftIcon from "../../bpk-component-icon/sm/arrow-left";
 import ArrowRightIcon from "../../bpk-component-icon/sm/arrow-right";
@@ -37,7 +37,7 @@ const BpkPaginationNudger = props => {
   } = props;
   return /*#__PURE__*/_jsx("div", {
     className: getClassName('bpk-pagination-nudger'),
-    children: /*#__PURE__*/_jsxs(BpkButtonV2, {
+    children: /*#__PURE__*/_jsxs(BpkButton, {
       type: BUTTON_TYPES.link,
       onClick: onNudge,
       disabled: disabled,

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

@@ -22,7 +22,7 @@ import { surfaceHighlightDay } from '@skyscanner/bpk-foundations-web/tokens/base
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkCloseButton from "../../bpk-component-close-button";
-import { BpkButtonLink } from "../../bpk-component-link";
+import BpkLink from "../../bpk-component-link";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
 import { ARROW_ID } from "./constants";
@@ -179,7 +179,8 @@ const BpkPopover = ({
                     setIsOpenState(false);
                   },
                   ...closeButtonProps
-                }) : closeButtonText && /*#__PURE__*/_jsx(BpkButtonLink, {
+                }) : closeButtonText && /*#__PURE__*/_jsx(BpkLink, {
+                  as: "button",
                   onClick: event => {
                     bindEventSource(EVENT_SOURCES.CLOSE_LINK, onClose, event);
                     setIsOpenState(false);
@@ -196,13 +197,15 @@ const BpkPopover = ({
                 children: children
               }), actionText && onAction && /*#__PURE__*/_jsx("div", {
                 className: getClassName('bpk-popover__action'),
-                children: /*#__PURE__*/_jsx(BpkButtonLink, {
+                children: /*#__PURE__*/_jsx(BpkLink, {
+                  as: "button",
                   onClick: onAction,
                   children: actionText
                 })
               }), !labelAsTitle && closeButtonText && /*#__PURE__*/_jsx("footer", {
                 className: getClassName('bpk-popover__footer'),
-                children: /*#__PURE__*/_jsx(BpkButtonLink, {
+                children: /*#__PURE__*/_jsx(BpkLink, {
+                  as: "button",
                   onClick: event => {
                     bindEventSource(EVENT_SOURCES.CLOSE_LINK, onClose, event);
                     setIsOpenState(false);

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

@@ -25,6 +25,9 @@ const getPriceTextStyle = size => {
   if (size === SIZES.small) {
     return TEXT_STYLES.heading4;
   }
+  if (size === SIZES.medium) {
+    return TEXT_STYLES.heading3;
+  }
   if (size === SIZES.large) {
     return TEXT_STYLES.xxl;
   }

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

@@ -17,6 +17,7 @@
  */export const SIZES = {
   xsmall: 'xsmall',
   small: 'small',
+  medium: 'medium',
   large: 'large'
 };
 export const ALIGNS = {

package/bpk-component-rtl-toggle/src/BpkRtlToggle.js

@@ -17,7 +17,7 @@
  */
 
 import { Component } from 'react';
-import { BpkButtonLink } from "../../bpk-component-link";
+import BpkLink from "../../bpk-component-link";
 import { getHtmlElement, DIRECTIONS, DIRECTION_CHANGE_EVENT } from "./utils";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const getDirection = () => {
@@ -59,7 +59,8 @@ class BpkRtlToggle extends Component {
   };
   render() {
     const onOrOff = this.state.direction === DIRECTIONS.RTL ? 'off' : 'on';
-    return /*#__PURE__*/_jsxs(BpkButtonLink, {
+    return /*#__PURE__*/_jsxs(BpkLink, {
+      as: "button",
       title: "Keyboard Shortcut: ctrl + cmd + r",
       onClick: this.toggleRtl,
       children: ["RTL ", onOrOff]

package/bpk-component-snippet/src/BpkSnippet.js

@@ -17,7 +17,7 @@
  */
 
 import BpkBreakpoint, { BREAKPOINTS } from "../../bpk-component-breakpoint";
-import { BpkButtonV2, BUTTON_TYPES } from "../../bpk-component-button";
+import BpkButton, { BUTTON_TYPES } from "../../bpk-component-button";
 import BpkImage, { BORDER_RADIUS_STYLES, withLazyLoading } from "../../bpk-component-image";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
 import { cssModules } from "../../bpk-react-utils";
@@ -120,7 +120,7 @@ const BpkSnippet = ({
           textStyle: isMobile ? BODY_STYLE.bodyDefault : bodyStyle,
           children: bodyText
         })
-      }), buttonText && onClick && /*#__PURE__*/_jsx(BpkButtonV2, {
+      }), buttonText && onClick && /*#__PURE__*/_jsx(BpkButton, {
         type: buttonStyle,
         onClick: onClick,
         children: buttonText

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "41.1.0",
+  "version": "41.3.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -27,8 +27,8 @@
     "@radix-ui/react-compose-refs": "^1.1.1",
     "@radix-ui/react-slider": "1.3.5",
     "@react-google-maps/api": "^2.19.3",
-    "@skyscanner/bpk-foundations-web": "^23.0.0",
-    "@skyscanner/bpk-svgs": "^20.9.0",
+    "@skyscanner/bpk-foundations-web": "^24.0.0",
+    "@skyscanner/bpk-svgs": "^20.11.0",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",
     "d3-path": "^3.1.0",