@skyscanner/backpack-web 37.5.0 → 37.7.0

package/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-horizontal-nav__item{display:inline-block;display:flex}.bpk-horizontal-nav__item--space-around{margin-right:auto;margin-left:auto}.bpk-horizontal-nav__link{display:inline-block;display:flex;padding:.875rem 1.5rem;border:0;border-radius:0;background:none;text-decoration:none;cursor:pointer;fill:currentcolor}.bpk-horizontal-nav__link--default{color:#626971;color:var(--bpk-horizontal-nav-link-color, rgb(98, 105, 113))}.bpk-no-touch-support .bpk-horizontal-nav__link--default:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #e0e4e9 inset;color:#626971;color:var(--bpk-horizontal-nav-link-hover-color, rgb(98, 105, 113))}:global(.bpk-no-touch-support) .bpk-horizontal-nav__link--default:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #e0e4e9 inset;color:#626971;color:var(--bpk-horizontal-nav-link-hover-color, rgb(98, 105, 113))}.bpk-horizontal-nav__link--default:active{box-shadow:0 -3px 0 0 #c1c7cf inset;color:#626971;color:var(--bpk-horizontal-nav-link-active-color, rgb(98, 105, 113))}.bpk-horizontal-nav__link--default-disabled{color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-horizontal-nav__link--default-disabled:active{color:rgba(0,0,0,.2);box-shadow:unset}.bpk-horizontal-nav__link--default-selected{box-shadow:0 -3px 0 0 #0062e3 inset;box-shadow:0 -3px 0 0 var(--bpk-horizontal-nav-bar-selected-color, rgb(0, 98, 227)) inset;color:#0062e3;color:var(--bpk-horizontal-nav-link-selected-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-horizontal-nav__link--default-selected:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #0062e3 inset;box-shadow:0 -3px 0 0 var(--bpk-horizontal-nav-bar-selected-color, rgb(0, 98, 227)) inset}:global(.bpk-no-touch-support) .bpk-horizontal-nav__link--default-selected:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #0062e3 inset;box-shadow:0 -3px 0 0 var(--bpk-horizontal-nav-bar-selected-color, rgb(0, 98, 227)) inset}.bpk-horizontal-nav__link--default-selected:active{box-shadow:0 -3px 0 0 #0062e3 inset;box-shadow:0 -3px 0 0 var(--bpk-horizontal-nav-bar-selected-color, rgb(0, 98, 227)) inset}.bpk-horizontal-nav__link--light{color:#fff}.bpk-no-touch-support .bpk-horizontal-nav__link--light:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #fff inset}:global(.bpk-no-touch-support) .bpk-horizontal-nav__link--light:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #fff inset}.bpk-horizontal-nav__link--light:active{box-shadow:0 -3px 0 0 #fff inset}.bpk-horizontal-nav__link--light-disabled{color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-horizontal-nav__link--light-disabled:active{color:rgba(0,0,0,.2);box-shadow:unset}.bpk-horizontal-nav__link--light-selected{color:#fff;box-shadow:0 -3px 0 0 #fff inset}.bpk-no-touch-support .bpk-horizontal-nav__link--light-selected:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #fff inset}:global(.bpk-no-touch-support) .bpk-horizontal-nav__link--light-selected:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #fff inset}.bpk-horizontal-nav__link--light-selected:active{box-shadow:0 -3px 0 0 #fff inset}
+.bpk-horizontal-nav__item{display:inline-block;display:flex}.bpk-horizontal-nav__item--space-around{margin-right:auto;margin-left:auto}.bpk-horizontal-nav__link{display:inline-block;display:flex;padding:.875rem 1.5rem;border:0;border-radius:0;background:none;text-decoration:none;cursor:pointer;fill:currentcolor}.bpk-horizontal-nav__link:focus-visible{outline-offset:-0.125rem}.bpk-horizontal-nav__link--default{color:#626971;color:var(--bpk-horizontal-nav-link-color, rgb(98, 105, 113))}.bpk-no-touch-support .bpk-horizontal-nav__link--default:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #e0e4e9 inset;color:#626971;color:var(--bpk-horizontal-nav-link-hover-color, rgb(98, 105, 113))}:global(.bpk-no-touch-support) .bpk-horizontal-nav__link--default:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #e0e4e9 inset;color:#626971;color:var(--bpk-horizontal-nav-link-hover-color, rgb(98, 105, 113))}.bpk-horizontal-nav__link--default:active{box-shadow:0 -3px 0 0 #c1c7cf inset;color:#626971;color:var(--bpk-horizontal-nav-link-active-color, rgb(98, 105, 113))}.bpk-horizontal-nav__link--default-disabled{color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-horizontal-nav__link--default-disabled:active{color:rgba(0,0,0,.2);box-shadow:unset}.bpk-horizontal-nav__link--default-selected{box-shadow:0 -3px 0 0 #0062e3 inset;box-shadow:0 -3px 0 0 var(--bpk-horizontal-nav-bar-selected-color, rgb(0, 98, 227)) inset;color:#0062e3;color:var(--bpk-horizontal-nav-link-selected-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-horizontal-nav__link--default-selected:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #0062e3 inset;box-shadow:0 -3px 0 0 var(--bpk-horizontal-nav-bar-selected-color, rgb(0, 98, 227)) inset}:global(.bpk-no-touch-support) .bpk-horizontal-nav__link--default-selected:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #0062e3 inset;box-shadow:0 -3px 0 0 var(--bpk-horizontal-nav-bar-selected-color, rgb(0, 98, 227)) inset}.bpk-horizontal-nav__link--default-selected:active{box-shadow:0 -3px 0 0 #0062e3 inset;box-shadow:0 -3px 0 0 var(--bpk-horizontal-nav-bar-selected-color, rgb(0, 98, 227)) inset}.bpk-horizontal-nav__link--light{color:#fff}.bpk-no-touch-support .bpk-horizontal-nav__link--light:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #fff inset}:global(.bpk-no-touch-support) .bpk-horizontal-nav__link--light:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #fff inset}.bpk-horizontal-nav__link--light:active{box-shadow:0 -3px 0 0 #fff inset}.bpk-horizontal-nav__link--light-disabled{color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-horizontal-nav__link--light-disabled:active{color:rgba(0,0,0,.2);box-shadow:unset}.bpk-horizontal-nav__link--light-selected{color:#fff;box-shadow:0 -3px 0 0 #fff inset}.bpk-no-touch-support .bpk-horizontal-nav__link--light-selected:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #fff inset}:global(.bpk-no-touch-support) .bpk-horizontal-nav__link--light-selected:hover:not(:active):not(:disabled){box-shadow:0 -3px 0 0 #fff inset}.bpk-horizontal-nav__link--light-selected:active{box-shadow:0 -3px 0 0 #fff inset}

package/bpk-component-map/index.js

@@ -18,8 +18,9 @@
 import BpkMap from "./src/BpkMap";
 import BpkOverlayView from "./src/BpkOverlayView";
 import BpkPriceMarker, { PRICE_MARKER_STATUSES } from "./src/BpkPriceMarker";
-import { BpkPriceMarkerV2, MARKER_STATUSES } from "./src/BpkPriceMarkerV2/BpkPriceMarker";
+import { BpkPriceMarkerV2 } from "./src/BpkPriceMarkerV2/BpkPriceMarker";
+import BpkPriceMarkerButton, { MARKER_STATUSES } from "./src/BpkPriceMarkerV2/BpkPriceMarkerButton";
 import { defaultIconMarkerThemeAttributes, priceMarkerThemeAttributes } from "./src/themeAttributes";
 import withGoogleMapsScript from "./src/withGoogleMapsScript";
 export default BpkMap;
-export { BpkIconMarker, BpkPriceMarker, BpkPriceMarkerV2, BpkOverlayView, withGoogleMapsScript, defaultIconMarkerThemeAttributes, priceMarkerThemeAttributes, PRICE_MARKER_STATUSES, MARKER_STATUSES };
+export { BpkIconMarker, BpkPriceMarker, BpkPriceMarkerV2, BpkOverlayView, withGoogleMapsScript, defaultIconMarkerThemeAttributes, priceMarkerThemeAttributes, PRICE_MARKER_STATUSES, MARKER_STATUSES, BpkPriceMarkerButton };

package/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker.d.ts

@@ -1,24 +1,10 @@
-import type { MouseEvent, ReactNode } from 'react';
-export declare const MARKER_STATUSES: {
-    readonly unselected: "unselected";
-    readonly selected: "selected";
-    readonly previous_selected: "previous_selected";
-};
-export type Status = (typeof MARKER_STATUSES)[keyof typeof MARKER_STATUSES];
+import type { Props as BpkPriceMarkerButtonProps } from './BpkPriceMarkerButton';
 type Props = {
-    label: string;
-    icon?: ReactNode;
     accessibilityLabel: string;
     position: {
         latitude: number;
         longitude: number;
     };
-    className?: string;
-    onClick?: (event: MouseEvent) => void;
-    buttonProps?: {
-        [key: string]: string;
-    };
-    status?: Status;
-};
+} & BpkPriceMarkerButtonProps;
 export declare const BpkPriceMarkerV2: (props: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker.js

@@ -16,17 +16,10 @@
  * limitations under the License.
  */
 
-import BpkText, { TEXT_STYLES } from "../../../bpk-component-text";
-import { cssModules } from "../../../bpk-react-utils";
 import BpkBasicMapMarker from "../BpkBasicMapMarker";
-import STYLES from "./BpkPriceMarker.module.css";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const getClassName = cssModules(STYLES);
-export const MARKER_STATUSES = {
-  unselected: 'unselected',
-  selected: 'selected',
-  previous_selected: 'previous_selected'
-};
+import BpkPriceMarkerButton, { MARKER_STATUSES } from "./BpkPriceMarkerButton";
+import { jsx as _jsx } from "react/jsx-runtime";
+// eslint-disable-next-line import/prefer-default-export
 export const BpkPriceMarkerV2 = props => {
   const {
     accessibilityLabel,
@@ -39,24 +32,20 @@ export const BpkPriceMarkerV2 = props => {
     status = MARKER_STATUSES.unselected,
     ...rest
   } = props;
-  const markerWrapperClassNames = getClassName('bpk-price-marker__wrapper');
-  const classNames = getClassName('bpk-price-marker', onClick && 'bpk-price-marker--dynamic', `bpk-price-marker-${status}`, icon && `bpk-price-marker-${status}--icon`, className);
+  const allButtonProps = {
+    className,
+    icon,
+    label,
+    onClick,
+    status,
+    buttonProps
+  };
   return /*#__PURE__*/_jsx(BpkBasicMapMarker, {
     position: position,
     "aria-label": accessibilityLabel,
     ...rest,
-    children: /*#__PURE__*/_jsx("button", {
-      type: "button",
-      className: markerWrapperClassNames,
-      onClick: onClick,
-      ...buttonProps,
-      children: /*#__PURE__*/_jsxs("div", {
-        className: classNames,
-        children: [icon, /*#__PURE__*/_jsx(BpkText, {
-          textStyle: TEXT_STYLES.label3,
-          children: label
-        })]
-      })
+    children: /*#__PURE__*/_jsx(BpkPriceMarkerButton, {
+      ...allButtonProps
     })
   });
 };

package/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarkerButton.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+export declare const MARKER_STATUSES: {
+    readonly unselected: "unselected";
+    readonly selected: "selected";
+    readonly previous_selected: "previous_selected";
+};
+export type Status = (typeof MARKER_STATUSES)[keyof typeof MARKER_STATUSES];
+export type Props = {
+    label: string;
+    icon?: ReactNode;
+    className?: string | null;
+    onClick?: () => void;
+    buttonProps?: {
+        [key: string]: string;
+    };
+    status?: Status;
+};
+declare const BpkPriceMarkerButton: ({ buttonProps, className, icon, label, onClick, status, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkPriceMarkerButton;

package/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarkerButton.js

@@ -0,0 +1,53 @@
+/*
+ * 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 BpkText, { TEXT_STYLES } from "../../../bpk-component-text";
+import { cssModules } from "../../../bpk-react-utils";
+import STYLES from "./BpkPriceMarkerButton.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+export const MARKER_STATUSES = {
+  unselected: 'unselected',
+  selected: 'selected',
+  previous_selected: 'previous_selected'
+};
+const BpkPriceMarkerButton = ({
+  buttonProps = {},
+  className = null,
+  icon,
+  label,
+  onClick,
+  status = MARKER_STATUSES.unselected
+}) => {
+  const markerWrapperClassNames = getClassName('bpk-price-marker-button__wrapper');
+  const markerClassNames = getClassName('bpk-price-marker-button', onClick && 'bpk-price-marker-button--dynamic', `bpk-price-marker-button-${status}`, icon && `bpk-price-marker-button-${status}--icon`, className);
+  return /*#__PURE__*/_jsx("button", {
+    type: "button",
+    className: markerWrapperClassNames,
+    onClick: onClick,
+    ...buttonProps,
+    children: /*#__PURE__*/_jsxs("div", {
+      className: markerClassNames,
+      children: [icon, /*#__PURE__*/_jsx(BpkText, {
+        textStyle: TEXT_STYLES.label3,
+        children: label
+      })]
+    })
+  });
+};
+export default BpkPriceMarkerButton;

package/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarkerButton.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-button{display:flex;height:1.5rem;padding:0 .5rem;justify-content:center;align-items:center;border-radius:.5rem;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3);gap:.5rem}.bpk-price-marker-button--dynamic{cursor:pointer}.bpk-price-marker-button-unselected{background-color:#fff;color:#161616}.bpk-price-marker-button-unselected--icon{fill:#161616}.bpk-price-marker-button-previous_selected{background-color:#cfe4ff;color:#161616}.bpk-price-marker-button-previous_selected--icon{fill:#161616}.bpk-price-marker-button-selected{background-color:#05203c;color:#fff}.bpk-price-marker-button-selected--icon{fill:#fff}.bpk-price-marker-button__wrapper{position:relative;display:flex;padding:0;flex-direction:column;align-items:center;border:none;background:none}

package/bpk-component-progress/src/BpkProgress.js

@@ -44,7 +44,8 @@ const propTypes = {
   className: PropTypes.string,
   onComplete: PropTypes.func,
   onCompleteTransitionEnd: PropTypes.func,
-  getValueText: PropTypes.func
+  getValueText: PropTypes.func,
+  tabIndex: PropTypes.number
 };
 const defaultProps = {
   className: null,

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

@@ -35,7 +35,7 @@ const BpkScrollableCalendarGrid = ({
     children: [/*#__PURE__*/_jsx("span", {
       className: getClassName('bpk-scrollable-calendar-grid__title'),
       children: /*#__PURE__*/_jsx(BpkText, {
-        tagName: "h1",
+        tagName: "h2",
         textStyle: TEXT_STYLES.heading4,
         children: formatMonth(month)
       })

package/package.json

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

package/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker.module.css

@@ -1,18 +0,0 @@
-/*
- * 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{display:flex;height:1.5rem;padding:0 .5rem;justify-content:center;align-items:center;border-radius:.5rem;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3);gap:.5rem}.bpk-price-marker--dynamic{cursor:pointer}.bpk-price-marker-unselected{background-color:#fff;color:#161616}.bpk-price-marker-unselected--icon{fill:#161616}.bpk-price-marker-previous_selected{background-color:#cfe4ff;color:#161616}.bpk-price-marker-previous_selected--icon{fill:#161616}.bpk-price-marker-selected{background-color:#05203c;color:#fff}.bpk-price-marker-selected--icon{fill:#fff}.bpk-price-marker__wrapper{position:relative;display:flex;padding:0;flex-direction:column;align-items:center;border:none;background:none}