@skyscanner/backpack-web 29.5.3 → 30.0.0

package/bpk-component-floating-notification/src/BpkFloatingNotification.js

@@ -18,7 +18,7 @@
 import { useEffect, useState, ReactElement } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import BpkAriaLive from "../../bpk-component-aria-live";
-import BpkButton from "../../bpk-component-button";
+import { BUTTON_TYPES, BpkButtonV2 } from "../../bpk-component-button";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkFloatingNotification.module.css";
@@ -59,7 +59,6 @@ const BpkFloatingNotification = props => {
     timeout: 400,
     appear: animateOnEnter,
     exit: animateOnExit,
-    unmountOnExit: true,
     onExited: onExit,
     children: /*#__PURE__*/_jsxs("div", {
       className: classNames,
@@ -77,8 +76,8 @@ const BpkFloatingNotification = props => {
       }), /*#__PURE__*/_jsx(BpkAriaLive, {
         "aria-hidden": true,
         children: text
-      }), ctaText && /*#__PURE__*/_jsx(BpkButton, {
-        link: true,
+      }), ctaText && /*#__PURE__*/_jsx(BpkButtonV2, {
+        type: BUTTON_TYPES.linkOnDark,
         onClick: onClick,
         className: getClassName('bpk-floating-notification__button'),
         children: ctaText

package/bpk-component-map/src/BpkIconMarker.js

@@ -27,7 +27,6 @@ const BpkIconMarker = props => {
   const {
     buttonProps,
     className,
-    disabled,
     icon,
     onClick,
     position,
@@ -35,7 +34,7 @@ const BpkIconMarker = props => {
     ...rest
   } = props;
   const wrapperClassNames = getClassName('bpk-icon-marker__wrapper', selected && 'bpk-icon-marker__wrapper--selected', className);
-  const iconClassNames = getClassName('bpk-icon-marker__icon', onClick && !disabled && 'bpk-icon-marker__icon--interactive', disabled && 'bpk-icon-marker__icon--disabled', selected && 'bpk-icon-marker__icon--selected');
+  const iconClassNames = getClassName('bpk-icon-marker__icon', onClick && 'bpk-icon-marker__icon--interactive', selected && 'bpk-icon-marker__icon--selected');
   return (
     /*#__PURE__*/
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
@@ -46,11 +45,9 @@ const BpkIconMarker = props => {
         type: "button",
         className: wrapperClassNames,
         onClick: onClick,
-        disabled: disabled,
         ...buttonProps,
         children: [/*#__PURE__*/_jsx(BpkIconMarkerBackground, {
-          disabled: disabled,
-          interactive: onClick !== null && !disabled,
+          interactive: onClick !== null,
           selected: selected
         }), /*#__PURE__*/_jsx("div", {
           className: iconClassNames,
@@ -64,7 +61,6 @@ BpkIconMarker.propTypes = {
   icon: PropTypes.node.isRequired,
   position: LatLongPropType.isRequired,
   className: PropTypes.string,
-  disabled: PropTypes.bool,
   onClick: PropTypes.func,
   selected: PropTypes.bool,
   buttonProps: PropTypes.object // eslint-disable-line react/forbid-prop-types
@@ -72,7 +68,6 @@ BpkIconMarker.propTypes = {
 
 BpkIconMarker.defaultProps = {
   className: null,
-  disabled: false,
   onClick: null,
   selected: false,
   buttonProps: null

package/bpk-component-map/src/BpkIconMarker.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-icon-marker__wrapper{position:absolute;top:-32px;left:-13px;z-index:1;padding:16px 13px;border:none;background:none}.bpk-icon-marker__wrapper--selected{top:-40px;left:-16px;z-index:2;padding:20px 16px}.bpk-icon-marker__icon{position:absolute;top:4.8px;left:5px;color:#fff}.bpk-icon-marker__icon>svg{position:absolute;width:16px !important;height:16px !important;fill:currentcolor}.bpk-icon-marker__icon--interactive{cursor:pointer}.bpk-icon-marker__icon--disabled{color:#0c838a;color:var(--bpk-icon-marker-default-disabled-color, #0c838a)}.bpk-icon-marker__icon--selected{top:8px;left:8px;color:#0c838a;color:var(--bpk-icon-marker-default-selected-color, #0c838a)}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-icon-marker__wrapper{position:absolute;top:-32px;left:-13px;z-index:1;padding:16px 13px;border:none;background:none}.bpk-icon-marker__wrapper--selected{top:-40px;left:-16px;z-index:2;padding:20px 16px}.bpk-icon-marker__icon{position:absolute;top:4.8px;left:5px;color:#fff}.bpk-icon-marker__icon>svg{position:absolute;width:16px !important;height:16px !important;fill:currentcolor}.bpk-icon-marker__icon--interactive{cursor:pointer}.bpk-icon-marker__icon--selected{top:8px;left:8px;color:#fff;color:var(--bpk-icon-marker-default-selected-color, #fff)}

package/bpk-component-map/src/BpkIconMarkerBackground.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
 */
-@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-icon-marker-background{position:absolute;top:0;left:0;fill:#0c838a;fill:var(--bpk-icon-marker-default-background-color, #0c838a)}.bpk-icon-marker-background--interactive{cursor:pointer}.bpk-icon-marker-background--disabled{fill:#d4fff2;fill:var(--bpk-icon-marker-default-disabled-background-color, #d4fff2)}.bpk-icon-marker-background--selected{fill:#fff;stroke:#0c838a;stroke:var(--bpk-icon-marker-default-selected-color, #0c838a)}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-icon-marker-background{position:absolute;top:0;left:0;fill:#8e47ba;fill:var(--bpk-icon-marker-default-background-color, #8e47ba)}.bpk-icon-marker-background--interactive{cursor:pointer}.bpk-icon-marker-background--disabled{fill:#d4fff2;fill:var(--bpk-icon-marker-default-disabled-background-color, #d4fff2)}.bpk-icon-marker-background--selected{fill:#05203c;stroke:#05203c;stroke:var(--bpk-icon-marker-default-selected-color, #05203c)}

package/bpk-component-page-indicator/src/NavButton.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */import PropTypes from 'prop-types';
 import { withButtonAlignment, withRtlSupport } from "../../bpk-component-icon";
-import BpkButton from "../../bpk-component-button";
+import { BUTTON_TYPES, BpkButtonV2 } from "../../bpk-component-button";
 import LeftArrowIcon from "../../bpk-component-icon/lg/chevron-left";
 import RightArrowIcon from "../../bpk-component-icon/lg/chevron-right";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -35,9 +35,9 @@ const NavButton = props => {
     disabled,
     onClick
   } = props;
-  return /*#__PURE__*/_jsx(BpkButton, {
+  return /*#__PURE__*/_jsx(BpkButtonV2, {
     iconOnly: true,
-    link: true,
+    type: BUTTON_TYPES.link,
     onClick: e => {
       if (direction === DIRECTIONS.PREV) {
         onClick(e, currentIndex - 1, direction);

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

@@ -18,7 +18,7 @@
 
 import PropTypes from 'prop-types';
 import { cssModules } from "../../bpk-react-utils";
-import BpkButton from "../../bpk-component-button";
+import { BpkButtonV2, BUTTON_TYPES } from "../../bpk-component-button";
 import { withRtlSupport } from "../../bpk-component-icon";
 import ArrowLeftIcon from "../../bpk-component-icon/sm/arrow-left";
 import ArrowRightIcon from "../../bpk-component-icon/sm/arrow-right";
@@ -40,8 +40,8 @@ const BpkPaginationNudger = props => {
     label,
     onNudge
   } = props;
-  return /*#__PURE__*/_jsxs(BpkButton, {
-    link: true,
+  return /*#__PURE__*/_jsxs(BpkButtonV2, {
+    type: BUTTON_TYPES.link,
     onClick: onNudge,
     disabled: disabled,
     className: getClassName('bpk-pagination-nudger'),

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

@@ -17,7 +17,7 @@
  */
 
 import PropTypes from 'prop-types';
-import BpkButton from "../../bpk-component-button";
+import { BpkButtonV2, BUTTON_TYPES } from "../../bpk-component-button";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkPaginationPage.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -33,8 +33,8 @@ const BpkPaginationPage = props => {
   if (isSelected) {
     classNames.push(getClassName('bpk-pagination-page--selected'));
   }
-  return /*#__PURE__*/_jsx(BpkButton, {
-    primaryOnDark: !isSelected,
+  return /*#__PURE__*/_jsx(BpkButtonV2, {
+    type: !isSelected ? BUTTON_TYPES.primaryOnDark : BUTTON_TYPES.primary,
     onClick: onSelect,
     className: classNames.join(' '),
     "aria-label": pageLabel(page, isSelected),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "29.5.3",
+  "version": "30.0.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -42,13 +42,13 @@
     "react-responsive": "^9.0.2",
     "react-slider": "^2.0.6",
     "react-table": "^7.8.0",
-    "react-transition-group": "^2.5.3",
     "react-virtualized-auto-sizer": "^1.0.20",
     "react-window": "^1.8.7"
   },
   "peerDependencies": {
     "node-sass": ">=4.12.0",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-transition-group": "^4.4.5"
   }
 }