@skyscanner/backpack-web 34.0.0 → 34.1.0

package/bpk-component-bottom-sheet/src/BpkBottomSheet.d.ts

@@ -1,7 +1,6 @@
 import type { SyntheticEvent, ReactNode } from "react";
-export type Props = {
+interface CommonProps {
     actionText?: string;
-    ariaLabelledby: string;
     children: ReactNode;
     closeLabel?: string;
     closeOnEscPressed?: boolean;
@@ -14,6 +13,11 @@ export type Props = {
     title?: string;
     wide?: boolean;
     isOpen: boolean;
-};
-declare const BpkBottomSheet: ({ actionText, ariaLabelledby, children, closeLabel, closeOnEscPressed, closeOnScrimClick, id, isOpen, onAction, onClose, title, wide }: Props) => JSX.Element;
+}
+export type Props = CommonProps & ({
+    ariaLabelledby: string;
+} | {
+    ariaLabel: string;
+});
+declare const BpkBottomSheet: ({ actionText, children, closeLabel, closeOnEscPressed, closeOnScrimClick, id, isOpen, onAction, onClose, title, wide, ...ariaProps }: Props) => JSX.Element;
 export default BpkBottomSheet;

package/bpk-component-bottom-sheet/src/BpkBottomSheet.js

@@ -30,7 +30,6 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 const getClassName = cssModules(STYLES);
 const BpkBottomSheet = ({
   actionText = '',
-  ariaLabelledby,
   children,
   closeLabel = '',
   closeOnEscPressed = false,
@@ -40,7 +39,8 @@ const BpkBottomSheet = ({
   onAction = () => null,
   onClose,
   title = '',
-  wide = false
+  wide = false,
+  ...ariaProps
 }) => {
   const [exiting, setExiting] = useState(false);
   const animationTimeout = 240;
@@ -56,7 +56,7 @@ const BpkBottomSheet = ({
   return /*#__PURE__*/_jsx(BpkBreakpoint, {
     query: BREAKPOINTS.ABOVE_MOBILE,
     children: isAboveMobile => /*#__PURE__*/_jsx(BpkDialogWrapper, {
-      ariaLabelledby: ariaLabelledby,
+      ...ariaProps,
       dialogClassName: dialogClassName,
       id: id,
       isOpen: isOpen,

package/bpk-component-close-button/src/BpkCloseButton.js

@@ -56,7 +56,7 @@ BpkCloseButton.propTypes = {
   onClick: PropTypes.func.isRequired,
   className: PropTypes.string,
   customIcon: PropTypes.func,
-  onDark: PropTypes.Boolean
+  onDark: PropTypes.bool
 };
 BpkCloseButton.defaultProps = {
   className: null,

package/bpk-component-loading-button/src/BpkLoadingButton.js

@@ -60,14 +60,22 @@ const getLoadingIcon = props => {
 const BpkLoadingButton = props => {
   const {
     children,
+    destructive,
     disabled,
+    featured,
     icon,
     iconDisabled,
     iconLoading,
     iconOnly,
     iconPosition,
     large,
+    link,
+    linkOnDark,
     loading,
+    primaryOnDark,
+    primaryOnLight,
+    secondary,
+    secondaryOnDark,
     ...rest
   } = props;
   const showBtnDisabled = disabled || loading;
@@ -77,28 +85,28 @@ const BpkLoadingButton = props => {
   const loadingIcon = getLoadingIcon(props);
   const iconClassNames = getClassName('bpk-loading-button__icon');
   let type = BUTTON_TYPES.primary;
-  if (props.link) {
+  if (link) {
     type = BUTTON_TYPES.link;
   }
-  if (props.linkOnDark) {
+  if (linkOnDark) {
     type = BUTTON_TYPES.linkOnDark;
   }
-  if (props.featured) {
+  if (featured) {
     type = BUTTON_TYPES.featured;
   }
-  if (props.destructive) {
+  if (destructive) {
     type = BUTTON_TYPES.destructive;
   }
-  if (props.secondaryOnDark) {
+  if (secondaryOnDark) {
     type = BUTTON_TYPES.secondaryOnDark;
   }
-  if (props.secondary) {
+  if (secondary) {
     type = BUTTON_TYPES.secondary;
   }
-  if (props.primaryOnLight) {
+  if (primaryOnLight) {
     type = BUTTON_TYPES.primaryOnLight;
   }
-  if (props.primaryOnDark) {
+  if (primaryOnDark) {
     type = BUTTON_TYPES.primaryOnDark;
   }
   return /*#__PURE__*/_jsx(BpkButtonV2, {

package/bpk-component-rating/index.d.ts

@@ -0,0 +1,4 @@
+import BpkRating from './src/BpkRating';
+import { RATING_SIZES, RATING_SCALES } from './src/common-types';
+export default BpkRating;
+export { RATING_SIZES, RATING_SCALES };

package/bpk-component-rating/src/BpkRating.d.ts

@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+import type { ReactNode } from 'react';
+import { RATING_SIZES, RATING_SCALES } from './common-types';
+type ValueOf<T> = T[keyof T];
+type Props = {
+    ariaLabel: string;
+    className?: string;
+    ratingScale: ValueOf<typeof RATING_SCALES>;
+    showScale?: boolean;
+    size: ValueOf<typeof RATING_SIZES>;
+    subtitle?: string;
+    title?: string | ReactNode;
+    value: string | number;
+};
+declare const BpkRating: {
+    (props: Props): JSX.Element;
+    propTypes: {
+        ariaLabel: PropTypes.Validator<string>;
+        value: PropTypes.Validator<NonNullable<NonNullable<string | number | null | undefined>>>;
+        className: PropTypes.Requireable<string>;
+        ratingScale: PropTypes.Requireable<string>;
+        size: PropTypes.Requireable<string>;
+        subtitle: PropTypes.Requireable<string>;
+        showScale: PropTypes.Requireable<boolean>;
+        title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+    };
+    defaultProps: {
+        className: null;
+        ratingScale: "zeroToFive";
+        size: "base";
+        subtitle: null;
+        showScale: boolean;
+        title: null;
+    };
+};
+export default BpkRating;

package/bpk-component-rating/src/BpkRating.js

@@ -14,13 +14,15 @@
  * 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 PropTypes from 'prop-types';
 import clamp from 'lodash.clamp';
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { cssModules } from "../../bpk-react-utils";
 import { RATING_SIZES, RATING_SCALES } from "./common-types";
 import STYLES from "./BpkRating.module.css";
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const getMinValue = () =>
 // Currently the min value is zero no matter what scale is used.
@@ -51,8 +53,8 @@ const BpkRating = props => {
   const valueStyles = getClassName('bpk-rating__value');
   const scaleStyles = getClassName('bpk-rating__scale');
   const textWrapperStyles = getClassName('bpk-rating__text-wrapper', size === RATING_SIZES.large && 'bpk-rating__text-wrapper--large');
-  const titleStyles = getClassName(subtitle && 'bpk-rating__title--with-subtitle', size === RATING_SIZES.large && 'bpk-rating__title--large');
-  const subtitleStyles = getClassName('bpk-rating__subtitle', size === RATING_SIZES.large && 'bpk-rating__subtitle--large');
+  const titleStyles = getClassName(subtitle && 'bpk-rating__title--with-subtitle');
+  const subtitleStyles = getClassName('bpk-rating__subtitle');
   let valueTextSize = TEXT_STYLES.label1;
   let scaleTextSize = TEXT_STYLES.caption;
   let titleTextSize = TEXT_STYLES.label1;
@@ -66,59 +68,53 @@ const BpkRating = props => {
   const minValue = getMinValue();
   const maxValue = getMaxValue(ratingScale);
   let adjustedValue = value;
-  if (adjustedValue >= maxValue || adjustedValue <= minValue) {
-    adjustedValue = clamp(adjustedValue, minValue, maxValue);
+  if (typeof adjustedValue === "number") {
+    if (adjustedValue >= maxValue || adjustedValue <= minValue) {
+      adjustedValue = clamp(adjustedValue, minValue, maxValue);
+    }
   }
-  return (
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsxs("div", {
-      className: classNames,
-      "aria-label": ariaLabel,
-      role: "figure",
-      ...rest,
-      children: [/*#__PURE__*/_jsxs(BpkText, {
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames,
+    "aria-label": ariaLabel,
+    role: "figure",
+    ...rest,
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: valueStyles,
+      children: [/*#__PURE__*/_jsx(BpkText, {
         textStyle: valueTextSize,
-        tagName: "span"
-        // TODO: className to be removed
-        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-        ,
-        className: valueStyles,
+        tagName: "span",
         "aria-hidden": "true",
-        children: [adjustedValue, showScale && /*#__PURE__*/_jsxs(BpkText, {
-          textStyle: scaleTextSize
-          // TODO: className to be removed
-          // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-          ,
+        children: adjustedValue
+      }), showScale && /*#__PURE__*/_jsx(BpkText, {
+        textStyle: scaleTextSize,
+        tagName: "span",
+        "aria-hidden": "true",
+        children: /*#__PURE__*/_jsxs("span", {
           className: scaleStyles,
-          tagName: "span",
-          "aria-hidden": "true",
           children: ["/", maxValue]
-        })]
-      }), /*#__PURE__*/_jsxs("div", {
-        className: textWrapperStyles,
-        children: [title && /*#__PURE__*/_jsx(BpkText, {
-          textStyle: titleTextSize
-          // TODO: className to be removed
-          // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-          ,
+        })
+      })]
+    }), /*#__PURE__*/_jsxs("div", {
+      className: textWrapperStyles,
+      children: [title && /*#__PURE__*/_jsx(BpkText, {
+        textStyle: titleTextSize,
+        tagName: "span",
+        "aria-hidden": "true",
+        children: /*#__PURE__*/_jsx("span", {
           className: titleStyles,
-          tagName: "span",
-          "aria-hidden": "true",
           children: title
-        }), subtitle && /*#__PURE__*/_jsx(BpkText
-        // TODO: className to be removed
-        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-        , {
+        })
+      }), subtitle && /*#__PURE__*/_jsx(BpkText, {
+        textStyle: subtitleTextSize,
+        tagName: "span",
+        "aria-hidden": "true",
+        children: /*#__PURE__*/_jsx("span", {
           className: subtitleStyles,
-          textStyle: subtitleTextSize,
-          tagName: "span",
-          "aria-hidden": "true",
           children: subtitle
-        })]
+        })
       })]
-    })
-  );
+    })]
+  });
 };
 BpkRating.propTypes = {
   ariaLabel: PropTypes.string.isRequired,

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.
  */
-.bpk-rating{display:flex;flex-flow:row nowrap;align-items:baseline}.bpk-rating--large{align-items:center}.bpk-rating__value{display:flex;padding-right:.5rem;justify-content:center;align-items:baseline;color:#161616}html[dir=rtl] .bpk-rating__value{padding-right:0;padding-left:.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:#626971}.bpk-rating__title--with-subtitle{padding-right:.5rem}html[dir=rtl] .bpk-rating__title--with-subtitle{padding-right:0;padding-left:.5rem}.bpk-rating__title--large{padding-top:.0625rem}.bpk-rating__subtitle{color:#626971}
+.bpk-rating{display:flex;flex-flow:row nowrap;align-items:baseline}.bpk-rating--large{align-items:center}.bpk-rating__value{padding-inline-end:.5rem}.bpk-rating__text-wrapper{display:flex;flex-direction:row;align-items:baseline;white-space:nowrap}.bpk-rating__text-wrapper--large{padding-top:.0625rem;flex-direction:column;align-items:flex-start}.bpk-rating__scale{color:#626971}.bpk-rating__title--with-subtitle{padding-right:.5rem}html[dir=rtl] .bpk-rating__title--with-subtitle{padding-right:0;padding-left:.5rem}.bpk-rating__subtitle{color:#626971}

package/bpk-component-rating/src/common-types.d.ts

@@ -0,0 +1,8 @@
+export declare const RATING_SIZES: {
+    readonly base: "base";
+    readonly large: "large";
+};
+export declare const RATING_SCALES: {
+    readonly zeroToFive: "zeroToFive";
+    readonly zeroToTen: "zeroToTen";
+};

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

@@ -14,7 +14,9 @@
  * 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 RATING_SIZES = {
+ */
+
+export const RATING_SIZES = {
   base: 'base',
   large: 'large'
 };

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

@@ -83,10 +83,6 @@ const BpkScrollableCalendarGridList = props => {
       focusedDate: focusedDate,
       preventKeyboardFocus: rest.preventKeyboardFocus,
       "aria-hidden": index !== 1
-      // TODO: className to be removed
-      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
-      ,
-      className: getClassName('bpk-scrollable-calendar-grid-list__item')
     })
   });
   const calculateOffsetInPixels = numberOfMonths => {

package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-scrollable-calendar-grid-list{position:relative;width:100%;height:100%;min-height:26.25rem;overflow-x:hidden;box-sizing:border-box;-ms-overflow-style:-ms-autohiding-scrollbar}.bpk-scrollable-calendar-grid-list__item{display:inline-table}
+.bpk-scrollable-calendar-grid-list{position:relative;width:100%;height:100%;min-height:26.25rem;overflow-x:hidden;box-sizing:border-box;-ms-overflow-style:-ms-autohiding-scrollbar}

package/bpk-react-utils/index.d.ts

@@ -37,6 +37,6 @@ declare const _default: {
     isDeviceIpad: () => boolean;
     isDeviceIos: () => boolean;
     isRTL: () => boolean;
-    BpkDialogWrapper: (props: import("./src/BpkDialogWrapper/BpkDialogWrapper").Props) => JSX.Element | null;
+    BpkDialogWrapper: ({ children, closeOnEscPressed, closeOnScrimClick, dialogClassName, exiting, id, isOpen, onClose, timeout, transitionClassNames, ...ariaProps }: import("./src/BpkDialogWrapper/BpkDialogWrapper").Props) => JSX.Element | null;
 };
 export default _default;

package/bpk-react-utils/src/BpkDialogWrapper/BpkDialogWrapper.d.ts

@@ -1,6 +1,5 @@
 import type { SyntheticEvent, ReactNode } from "react";
-export interface Props {
-    ariaLabelledby: string;
+interface CommonProps {
     children: ReactNode;
     closeOnEscPressed?: boolean;
     closeOnScrimClick?: boolean;
@@ -21,4 +20,10 @@ export interface Props {
         exit?: number;
     };
 }
-export declare const BpkDialogWrapper: (props: Props) => JSX.Element | null;
+export type Props = CommonProps & ({
+    ariaLabelledby: string;
+} | {
+    ariaLabel: string;
+});
+export declare const BpkDialogWrapper: ({ children, closeOnEscPressed, closeOnScrimClick, dialogClassName, exiting, id, isOpen, onClose, timeout, transitionClassNames, ...ariaProps }: Props) => JSX.Element | null;
+export {};

package/bpk-react-utils/src/BpkDialogWrapper/BpkDialogWrapper.js

@@ -36,23 +36,22 @@ const setPageProperties = ({
     document.body.style.width = isDialogOpen ? '100%' : 'auto';
   }
 };
-export const BpkDialogWrapper = props => {
-  const {
-    ariaLabelledby,
-    children,
-    closeOnEscPressed = false,
-    closeOnScrimClick = false,
-    dialogClassName = '',
-    exiting = false,
-    id,
-    isOpen,
-    onClose,
-    timeout = {
-      appear: 0,
-      exit: 0
-    },
-    transitionClassNames = {}
-  } = props;
+export const BpkDialogWrapper = ({
+  children,
+  closeOnEscPressed = false,
+  closeOnScrimClick = false,
+  dialogClassName = '',
+  exiting = false,
+  id,
+  isOpen,
+  onClose,
+  timeout = {
+    appear: 0,
+    exit: 0
+  },
+  transitionClassNames = {},
+  ...ariaProps
+}) => {
   const ref = useRef(null);
   const [dialogTarget, setDialogTarget] = useState(null);
   useEffect(() => {
@@ -107,6 +106,14 @@ export const BpkDialogWrapper = props => {
       window.removeEventListener('keydown', handleKeyDown);
     };
   }, [id, isOpen, onClose, closeOnEscPressed, closeOnScrimClick]);
+  const aria = {
+    ...("ariaLabelledby" in ariaProps ? {
+      "aria-labelledby": ariaProps.ariaLabelledby
+    } : undefined),
+    ...("ariaLabel" in ariaProps ? {
+      "aria-label": ariaProps.ariaLabel
+    } : undefined)
+  };
   return isOpen ? /*#__PURE__*/_jsxs("div", {
     className: getClassName('bpk-dialog-wrapper', !dialogSupported && 'bpk-dialog-wrapper--polyfill'),
     children: [!dialogSupported && /*#__PURE__*/_jsx("div", {
@@ -120,6 +127,7 @@ export const BpkDialogWrapper = props => {
       exit: exiting,
       timeout: timeout,
       children: /*#__PURE__*/_jsx("dialog", {
+        ...aria,
         id: id,
         className: getClassName('bpk-dialog-wrapper--container', dialogClassName),
         onCancel: e => {
@@ -130,7 +138,6 @@ export const BpkDialogWrapper = props => {
             });
           }
         },
-        "aria-labelledby": ariaLabelledby,
         "data-open": isOpen,
         ref: ref,
         children: /*#__PURE__*/_jsx("div", {

package/package.json

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