@skyscanner/backpack-web 42.14.0 → 42.15.0

package/bpk-component-carousel/src/BpkCarousel.d.ts

@@ -1,3 +1,3 @@
 import type { Props } from './types';
-declare const BpkCarousel: ({ accessibilityLabels, bottom, images, initialImageIndex, onImageChanged, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const BpkCarousel: ({ accessibilityLabels, bottom, images, initialImageIndex, onImageChanged, pageIndicatorVariant, showPageIndicatorNav, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BpkCarousel;

package/bpk-component-carousel/src/BpkCarousel.js

@@ -30,11 +30,14 @@ const BpkCarousel = ({
   bottom,
   images,
   initialImageIndex = 0,
-  onImageChanged = null
+  onImageChanged = null,
+  pageIndicatorVariant = VARIANT.overImageSpaced,
+  showPageIndicatorNav
 }) => {
   const [shownImageIndex, updateShownImageIndex] = useState(initialImageIndex);
   const imagesRef = useRef([]);
   const isDesktop = useMediaQuery(BREAKPOINTS.ABOVE_TABLET);
+  const showNav = showPageIndicatorNav ?? isDesktop;
   const handleIndicatorClick = (e, newIndex) => {
     e.stopPropagation();
     let target = newIndex;
@@ -59,12 +62,12 @@ const BpkCarousel = ({
       children: /*#__PURE__*/_jsx(BpkPageIndicator, {
         currentIndex: shownImageIndex,
         totalIndicators: images.length,
-        variant: VARIANT.overImageSpaced,
+        variant: pageIndicatorVariant,
         indicatorLabel: accessibilityLabels.indicatorLabel ?? "Go to slide",
         prevNavLabel: accessibilityLabels.prevNavLabel ?? "Previous slide",
         nextNavLabel: accessibilityLabels.nextNavLabel ?? "Next slide",
-        showNav: isDesktop,
-        onClick: isDesktop ? handleIndicatorClick : () => {}
+        showNav: showNav,
+        onClick: showNav ? handleIndicatorClick : () => {}
       })
     })]
   });

package/bpk-component-carousel/src/BpkCarousel.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-carousel{position:relative;width:100%;height:100%}.bpk-carousel__page-indicator-over-image{position:absolute;right:0;bottom:.25rem;left:0;display:flex;margin:auto 1rem;justify-content:center;overflow:clip}
+.bpk-carousel{position:relative;width:100%;height:100%}.bpk-carousel__page-indicator-over-image{position:absolute;right:0;bottom:.25rem;left:0;display:flex;margin:auto 1rem;justify-content:center}

package/bpk-component-carousel/src/BpkCarouselImage.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-carousel-image{display:inline-flex;width:100%;min-width:0;height:100%;min-height:0;justify-content:center;scroll-snap-align:start;scroll-snap-stop:always;isolation:isolate}.bpk-carousel-image img{max-width:100%;max-height:100%;object-fit:initial}
+.bpk-carousel-image{display:inline-flex;width:100%;min-width:0;height:100%;min-height:0;justify-content:center;scroll-snap-align:start;scroll-snap-stop:always;isolation:isolate}.bpk-carousel-image img{display:block;max-width:100%;max-height:100%;object-fit:initial}

package/bpk-component-carousel/src/types.d.ts

@@ -1,10 +1,12 @@
 import type { ReactNode } from "react";
+import type { VARIANT } from '../../bpk-component-page-indicator';
 export type OnImageChangedHandler = ((shownImageIndex: number) => void) | null | undefined;
 export type AccessibilityLabels = {
     indicatorLabel?: string;
     prevNavLabel?: string;
     nextNavLabel?: string;
 };
+export type PageIndicatorVariant = typeof VARIANT.overImageSpaced | typeof VARIANT.carousel;
 export type Props = {
     images: ReactNode[];
     initialImageIndex?: number;
@@ -14,4 +16,10 @@ export type Props = {
     */
     bottom?: number;
     accessibilityLabels?: AccessibilityLabels;
+    pageIndicatorVariant?: PageIndicatorVariant;
+    /**
+     * Force the page indicator's nav buttons on or off.
+     * When omitted, the nav buttons are shown on desktop breakpoints only.
+     */
+    showPageIndicatorNav?: boolean;
 };

package/bpk-component-page-indicator/src/BpkPageIndicator.d.ts

@@ -1,11 +1,9 @@
 import type { MouseEvent } from 'react';
 import { DIRECTIONS } from './NavButton';
-export declare const VARIANT: {
-    readonly default: "default";
-    readonly overImage: "overImage";
-    readonly overImageSpaced: "overImageSpaced";
-};
-type Variant = (typeof VARIANT)[keyof typeof VARIANT];
+import { VARIANT } from './common-types';
+import type { Variant } from './common-types';
+export { VARIANT };
+export type { Variant };
 type Direction = (typeof DIRECTIONS)[keyof typeof DIRECTIONS];
 export type Props = {
     indicatorLabel?: string;

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

@@ -19,16 +19,13 @@
 import { BUTTON_TYPES } from "../../bpk-component-button";
 import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
 import NavButton, { DIRECTIONS } from "./NavButton";
+import { VARIANT } from "./common-types";
 import STYLES from "./BpkPageIndicator.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const DISPLAYED_TOTAL = 5;
 const START_SCROLL_INDEX = Math.floor(DISPLAYED_TOTAL / 2);
-export const VARIANT = {
-  default: 'default',
-  overImage: 'overImage',
-  overImageSpaced: 'overImageSpaced'
-};
+export { VARIANT };
 const BpkPageIndicator = ({
   className = undefined,
   currentIndex,
@@ -50,7 +47,7 @@ const BpkPageIndicator = ({
     '--scroll-index': totalIndicators > DISPLAYED_TOTAL ? Math.min(currentIndex - START_SCROLL_INDEX, totalIndicators - DISPLAYED_TOTAL) : 0
   };
   return /*#__PURE__*/_jsx("div", {
-    className: variant === VARIANT.overImageSpaced ? getClassName('bpk-page-indicator-fullWidth__container') : className,
+    className: variant === VARIANT.overImageSpaced || variant === VARIANT.carousel ? getClassName('bpk-page-indicator-fullWidth__container') : className,
     "aria-hidden": isInteractive ? 'false' : 'true',
     "data-testid": "indicator-container",
     children: /*#__PURE__*/_jsxs("div", {
@@ -59,10 +56,11 @@ const BpkPageIndicator = ({
       children: [showNav && /*#__PURE__*/_jsx(NavButton, {
         currentIndex: currentIndex,
         onClick: onClick,
-        disabled: variant === VARIANT.overImageSpaced ? totalIndicators <= 1 : currentIndex === 0 || totalIndicators <= 1,
+        disabled: variant === VARIANT.overImageSpaced || variant === VARIANT.carousel ? totalIndicators <= 1 : currentIndex === 0 || totalIndicators <= 1,
         direction: DIRECTIONS.PREV,
         ariaLabel: prevNavLabel,
-        type: variant === VARIANT.overImageSpaced ? BUTTON_TYPES.secondaryOnDark : BUTTON_TYPES.link
+        variant: variant,
+        type: variant === VARIANT.overImageSpaced || variant === VARIANT.carousel ? BUTTON_TYPES.secondaryOnDark : BUTTON_TYPES.link
       }), /*#__PURE__*/_jsx("div", {
         className: getClassName('bpk-page-indicator__container'),
         children: /*#__PURE__*/_jsx("div", {
@@ -85,10 +83,11 @@ const BpkPageIndicator = ({
       }), showNav && /*#__PURE__*/_jsx(NavButton, {
         currentIndex: currentIndex,
         onClick: onClick,
-        disabled: variant === VARIANT.overImageSpaced ? totalIndicators <= 1 : currentIndex === totalIndicators - 1 || totalIndicators <= 1,
+        disabled: variant === VARIANT.overImageSpaced || variant === VARIANT.carousel ? totalIndicators <= 1 : currentIndex === totalIndicators - 1 || totalIndicators <= 1,
         ariaLabel: nextNavLabel,
         direction: DIRECTIONS.NEXT,
-        type: variant === VARIANT.overImageSpaced ? BUTTON_TYPES.secondaryOnDark : BUTTON_TYPES.link
+        variant: variant,
+        type: variant === VARIANT.overImageSpaced || variant === VARIANT.carousel ? BUTTON_TYPES.secondaryOnDark : BUTTON_TYPES.link
       })]
     })
   });

package/bpk-component-page-indicator/src/BpkPageIndicator.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-page-indicator-fullWidth__container{width:100%}.bpk-page-indicator{display:flex;width:100%;justify-content:center;align-items:center}.bpk-page-indicator__showNav{justify-content:space-between}.bpk-page-indicator__container{max-width:5rem;min-height:.5rem;overflow:hidden}.bpk-page-indicator__indicators-container{--direction: -1;transform:translateX(calc(var(--direction) * var(--scroll-index, 0) * 1rem));transition:transform 200ms ease-in-out;white-space:nowrap}html[dir=rtl] .bpk-page-indicator__indicators-container{--direction: 1}.bpk-page-indicator__indicator{display:inline-block;width:.5rem;height:.5rem;padding:0;border:none;border-radius:50%;margin-inline:.25rem}.bpk-page-indicator__indicator:hover{cursor:pointer}.bpk-page-indicator__indicator--default{background-color:#c1c7cf}.bpk-page-indicator__indicator--overImage,.bpk-page-indicator__indicator--overImageSpaced{background-color:hsla(0,0%,100%,.5)}.bpk-page-indicator__indicator--active-default{background-color:#626971;pointer-events:none}.bpk-page-indicator__indicator--active-overImage,.bpk-page-indicator__indicator--active-overImageSpaced{background-color:#fff;pointer-events:none}
+.bpk-page-indicator-fullWidth__container{width:100%}.bpk-page-indicator{display:flex;width:100%;justify-content:center;align-items:center}.bpk-page-indicator__showNav{justify-content:space-between}.bpk-page-indicator__container{max-width:5rem;min-height:.5rem;overflow:hidden}.bpk-page-indicator__indicators-container{--direction: -1;transform:translateX(calc(var(--direction) * var(--scroll-index, 0) * 1rem));transition:transform 200ms ease-in-out;white-space:nowrap}html[dir=rtl] .bpk-page-indicator__indicators-container{--direction: 1}.bpk-page-indicator__indicator{display:inline-block;width:.5rem;height:.5rem;padding:0;border:none;border-radius:50%;margin-inline:.25rem}.bpk-page-indicator__indicator:hover{cursor:pointer}.bpk-page-indicator__indicator--default{background-color:#c1c7cf}.bpk-page-indicator__indicator--overImage,.bpk-page-indicator__indicator--overImageSpaced,.bpk-page-indicator__indicator--carousel{background-color:hsla(0,0%,100%,.5)}.bpk-page-indicator__indicator--active-default{background-color:#626971;pointer-events:none}.bpk-page-indicator__indicator--active-overImage,.bpk-page-indicator__indicator--active-overImageSpaced,.bpk-page-indicator__indicator--active-carousel{background-color:#fff;pointer-events:none}.bpk-page-indicator__nav-carousel{--bpk-button-border-radius: 50%;--bpk-button-secondary-on-dark-background-color: rgba(255, 255, 255, 0.5);--bpk-button-secondary-on-dark-hover-background-color: rgba(255, 255, 255, 0.8);--bpk-button-secondary-on-dark-active-background-color: rgba(255, 255, 255, 0.8);--bpk-button-secondary-on-dark-text-color: rgb(22, 22, 22);--bpk-button-secondary-on-dark-hover-text-color: rgb(22, 22, 22);--bpk-button-secondary-on-dark-active-text-color: rgb(22, 22, 22)}.bpk-page-indicator__nav-carousel-button{display:inline-flex;width:2rem;height:2rem;min-height:2rem;padding:0;justify-content:center;align-items:center}

package/bpk-component-page-indicator/src/NavButton.d.ts

@@ -1,5 +1,6 @@
 import type { MouseEvent } from 'react';
 import { BUTTON_TYPES } from '../../bpk-component-button';
+import type { Variant } from './common-types';
 export declare const DIRECTIONS: {
     readonly PREV: "PREV";
     readonly INDICATORS: "INDICATORS";
@@ -14,6 +15,7 @@ type Props = {
     disabled?: boolean;
     onClick?: (event: MouseEvent<HTMLButtonElement>, newIndex: number, direction: Direction) => void;
     type?: ButtonType;
+    variant?: Variant;
 };
-declare const NavButton: ({ ariaLabel, currentIndex, direction, disabled, onClick, type, }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const NavButton: ({ ariaLabel, currentIndex, direction, disabled, onClick, type, variant, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default NavButton;

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

@@ -17,36 +17,58 @@
  */
 
 import BpkButton, { BUTTON_TYPES } from "../../bpk-component-button";
-import { withLargeButtonAlignment, withRtlSupport } from "../../bpk-component-icon";
-import LeftArrowIcon from "../../bpk-component-icon/lg/chevron-left";
-import RightArrowIcon from "../../bpk-component-icon/lg/chevron-right";
+import { withButtonAlignment, withRtlSupport } from "../../bpk-component-icon";
+import SmallLeftArrowIcon from "../../bpk-component-icon/sm/chevron-left";
+import SmallRightArrowIcon from "../../bpk-component-icon/sm/chevron-right";
+import { cssModules } from "../../bpk-react-utils";
+import { VARIANT } from "./common-types";
+import STYLES from "./BpkPageIndicator.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
 export const DIRECTIONS = {
   PREV: 'PREV',
   INDICATORS: 'INDICATORS',
   NEXT: 'NEXT'
 };
-const AlignedLeftArrowIcon = withLargeButtonAlignment(withRtlSupport(LeftArrowIcon));
-const AlignedRightArrowIcon = withLargeButtonAlignment(withRtlSupport(RightArrowIcon));
+const AlignedLeftArrowIcon = withButtonAlignment(withRtlSupport(SmallLeftArrowIcon));
+const AlignedRightArrowIcon = withButtonAlignment(withRtlSupport(SmallRightArrowIcon));
+const RtlSmallLeftArrowIcon = withRtlSupport(SmallLeftArrowIcon);
+const RtlSmallRightArrowIcon = withRtlSupport(SmallRightArrowIcon);
 const NavButton = ({
   ariaLabel,
   currentIndex,
   direction,
   disabled = false,
   onClick = () => {},
-  type = BUTTON_TYPES.link
-}) => /*#__PURE__*/_jsx(BpkButton, {
-  iconOnly: true,
-  type: type,
-  onClick: e => {
-    if (direction === DIRECTIONS.PREV) {
-      onClick(e, currentIndex - 1, direction);
-    } else {
-      onClick(e, currentIndex + 1, direction);
-    }
-  },
-  "aria-label": ariaLabel,
-  disabled: disabled,
-  children: direction === DIRECTIONS.PREV ? /*#__PURE__*/_jsx(AlignedLeftArrowIcon, {}) : /*#__PURE__*/_jsx(AlignedRightArrowIcon, {})
-});
+  type = BUTTON_TYPES.link,
+  variant
+}) => {
+  const isCarousel = variant === VARIANT.carousel;
+  const PrevIcon = isCarousel ? RtlSmallLeftArrowIcon : AlignedLeftArrowIcon;
+  const NextIcon = isCarousel ? RtlSmallRightArrowIcon : AlignedRightArrowIcon;
+  const button = /*#__PURE__*/_jsx(BpkButton, {
+    iconOnly: true,
+    type: type
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    ,
+    className: isCarousel ? getClassName('bpk-page-indicator__nav-carousel-button') : undefined,
+    onClick: e => {
+      if (direction === DIRECTIONS.PREV) {
+        onClick(e, currentIndex - 1, direction);
+      } else {
+        onClick(e, currentIndex + 1, direction);
+      }
+    },
+    "aria-label": ariaLabel,
+    disabled: disabled,
+    children: direction === DIRECTIONS.PREV ? /*#__PURE__*/_jsx(PrevIcon, {}) : /*#__PURE__*/_jsx(NextIcon, {})
+  });
+  if (isCarousel) {
+    return /*#__PURE__*/_jsx("span", {
+      className: getClassName('bpk-page-indicator__nav-carousel'),
+      children: button
+    });
+  }
+  return button;
+};
 export default NavButton;

package/bpk-component-page-indicator/src/common-types.d.ts

@@ -0,0 +1,7 @@
+export declare const VARIANT: {
+    readonly default: "default";
+    readonly overImage: "overImage";
+    readonly overImageSpaced: "overImageSpaced";
+    readonly carousel: "carousel";
+};
+export type Variant = (typeof VARIANT)[keyof typeof VARIANT];

package/bpk-component-page-indicator/src/common-types.js

@@ -0,0 +1,24 @@
+/*
+ * 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.
+ */
+
+export const VARIANT = {
+  default: 'default',
+  overImage: 'overImage',
+  overImageSpaced: 'overImageSpaced',
+  carousel: 'carousel'
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "42.14.0",
+  "version": "42.15.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -28,7 +28,7 @@
     "@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": "^24.4.1",
+    "@skyscanner/bpk-foundations-web": "^24.5.0",
     "@skyscanner/bpk-svgs": "^20.11.0",
     "tabbable": "^6.4.0",
     "d3-path": "^3.1.0",