@skyscanner/backpack-web 31.9.3 → 31.10.1

package/bpk-component-floating-notification/src/BpkFloatingNotification.d.ts

@@ -0,0 +1,45 @@
+/*
+ * 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 { ReactNode, ReactElement, MouseEvent } from 'react';
+
+export type Props = {
+  animateOnEnter?: boolean;
+  animateOnExit?: boolean;
+  className?: string;
+  ctaText?: string;
+  hideAfter?: number;
+  icon?: () => ReactElement;
+  onClick?: (e: MouseEvent) => void;
+  onExit?: () => void;
+  text: string;
+  [rest: string]: any;
+};
+declare const BpkFloatingNotification: ({
+  animateOnEnter,
+  animateOnExit,
+  className,
+  ctaText,
+  hideAfter,
+  icon,
+  onClick,
+  onExit,
+  text,
+  ...rest
+}: Props) => JSX.Element;
+export default BpkFloatingNotification;

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

@@ -14,8 +14,8 @@
  * 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 PropTypes from 'prop-types';
-import { useEffect, useState, ReactElement } from 'react';
+ */import { useEffect, useState } from 'react';
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { CSSTransition } from 'react-transition-group';
 import BpkAriaLive from "../../bpk-component-aria-live";
 import { BUTTON_TYPES, BpkButtonV2 } from "../../bpk-component-button";
@@ -28,11 +28,11 @@ const getClassName = cssModules(STYLES);
 const BpkFloatingNotification = props => {
   const [showMessage, setShowMessage] = useState(true);
   const {
-    animateOnEnter,
-    animateOnExit,
+    animateOnEnter = true,
+    animateOnExit = true,
     className,
     ctaText,
-    hideAfter,
+    hideAfter = 4000,
     icon: Icon,
     onClick,
     onExit,
@@ -85,25 +85,4 @@ const BpkFloatingNotification = props => {
     })
   });
 };
-BpkFloatingNotification.propTypes = {
-  animateOnEnter: PropTypes.bool,
-  animateOnExit: PropTypes.bool,
-  className: PropTypes.string,
-  ctaText: PropTypes.string,
-  hideAfter: PropTypes.number,
-  icon: PropTypes.ReactElement,
-  onClick: PropTypes.func,
-  onExit: PropTypes.func,
-  text: PropTypes.string.isRequired
-};
-BpkFloatingNotification.defaultProps = {
-  animateOnEnter: true,
-  animateOnExit: true,
-  className: null,
-  ctaText: null,
-  hideAfter: 4000,
-  icon: null,
-  onClick: null,
-  onExit: null
-};
 export default BpkFloatingNotification;

package/bpk-component-rating/src/BpkRating.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-rating{display:flex;flex-flow:row nowrap;align-items:baseline}.bpk-rating--large{align-items:center}.bpk-rating__value{display:flex;padding-right:0.5rem;justify-content:center;align-items:baseline;color:#161616}html[dir='rtl'] .bpk-rating__value{padding-right:0;padding-left:0.5rem}.bpk-rating__text-wrapper{display:flex;flex-direction:row;align-items:baseline;white-space:nowrap}.bpk-rating__text-wrapper--large{flex-direction:column;align-items:flex-start}.bpk-rating__scale{color:#545860}.bpk-rating__title--with-subtitle{padding-right:0.5rem}html[dir='rtl'] .bpk-rating__title--with-subtitle{padding-right:0;padding-left:0.5rem}.bpk-rating__title--large{padding-top:.0625rem}.bpk-rating__subtitle{color:#545860}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-rating{display:flex;flex-flow:row nowrap;align-items:baseline}.bpk-rating--large{align-items:center}.bpk-rating__value{display:flex;padding-right:0.5rem;justify-content:center;align-items:baseline;color:#161616}html[dir='rtl'] .bpk-rating__value{padding-right:0;padding-left:0.5rem;direction:ltr}.bpk-rating__text-wrapper{display:flex;flex-direction:row;align-items:baseline;white-space:nowrap}.bpk-rating__text-wrapper--large{flex-direction:column;align-items:flex-start}.bpk-rating__scale{color:#545860}.bpk-rating__title--with-subtitle{padding-right:0.5rem}html[dir='rtl'] .bpk-rating__title--with-subtitle{padding-right:0;padding-left:0.5rem}.bpk-rating__title--large{padding-top:.0625rem}.bpk-rating__subtitle{color:#545860}

package/bpk-component-swap-button/src/BpkSwapButton.js

@@ -55,8 +55,8 @@ const BpkSwapButton = props => {
         onClick();
         handleRotation();
       },
-      children: /*#__PURE__*/_jsx(SwapVertical, {
-        className: getClassName('bpk-swap-button__icon')
+      children: /*#__PURE__*/_jsx("span", {
+        children: /*#__PURE__*/_jsx(SwapVertical, {})
       })
     })
   });

package/bpk-component-swap-button/src/BpkSwapButton.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-swap-button{width:2.5rem;height:2.5rem;transform:translateY(-50%) rotate(90deg)}@media (max-width: 48rem){.bpk-swap-button{transform:rotate(0deg)}}.bpk-swap-button :focus-visible{box-shadow:0 0 0 0.125rem #fff,0 0 0 0.25rem #0062e3}.bpk-swap-button__button{display:flex;width:100%;height:100%;justify-content:center;align-items:center;transition:transform 400ms;border:3px solid #05203c;border-radius:50%;background-color:#fff}@media (max-width: 48rem){.bpk-swap-button__button{border:2px solid #05203c}}.bpk-no-touch-support .bpk-swap-button__button:hover:not(:active):not(:disabled){background-color:#e0e3e5}:global(.bpk-no-touch-support) .bpk-swap-button__button:hover:not(:active):not(:disabled){background-color:#e0e3e5}.bpk-swap-button__button--canvas-default{border:3px solid #fff;background-color:#eff1f2}.bpk-swap-button__button--canvas-contrast{border:3px solid #eff1f2}.bpk-swap-button__icon{max-width:1rem;max-height:1rem}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-swap-button{transform:translateY(-50%) rotate(90deg)}@media (max-width: 48rem){.bpk-swap-button{transform:rotate(0deg)}}.bpk-swap-button :focus-visible{box-shadow:0 0 0 0.125rem #fff,0 0 0 0.25rem #0062e3}.bpk-swap-button__button{display:flex;width:2.5rem;height:2.5rem;justify-content:center;align-items:center;transition:transform 400ms;border:3px solid #05203c;border-radius:50%;background-color:#fff}@media (max-width: 48rem){.bpk-swap-button__button{border:2px solid #05203c}}.bpk-no-touch-support .bpk-swap-button__button:hover:not(:active):not(:disabled){background-color:#e0e3e5}:global(.bpk-no-touch-support) .bpk-swap-button__button:hover:not(:active):not(:disabled){background-color:#e0e3e5}.bpk-swap-button__button span{display:inline-flex;line-height:1rem}.bpk-swap-button__button--canvas-default{border:3px solid #fff;background-color:#eff1f2}.bpk-swap-button__button--canvas-contrast{border:3px solid #eff1f2}

package/package.json

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