@skyscanner/backpack-web 33.4.0 → 33.6.0

package/bpk-component-spinner/src/BpkSpinner.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-spinner{width:1rem;height:1rem;animation:bpk-keyframe-spin 600ms linear infinite}.bpk-spinner--primary{fill:#0062e3;fill:var(--bpk-spinner-primary-color, rgb(0, 98, 227))}.bpk-spinner--light{fill:#fff}.bpk-spinner--dark{fill:#161616}.bpk-spinner--large{width:1.5rem;height:1.5rem}.bpk-spinner--extra-large{width:2rem;height:2rem}.bpk-spinner--align-to-button{vertical-align:baseline}.bpk-spinner--align-to-large-button{margin-top:0rem;vertical-align:top}
+@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-spinner{display:block;width:1rem;height:1rem;animation:bpk-keyframe-spin 600ms linear infinite}.bpk-spinner--primary{fill:#0062e3;fill:var(--bpk-spinner-primary-color, rgb(0, 98, 227))}.bpk-spinner--light{fill:#fff}.bpk-spinner--dark{fill:#161616}.bpk-spinner--large{width:1.5rem;height:1.5rem}.bpk-spinner--extra-large{width:2rem;height:2rem}.bpk-spinner--align-to-button{vertical-align:baseline}.bpk-spinner--align-to-large-button{margin-top:0rem;vertical-align:top}

package/bpk-component-split-input/src/BpkInputField.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 { Component } from 'react';
-import PropTypes from 'prop-types';
+ */import PropTypes from 'prop-types';
+import { Component } from 'react';
 import BpkInput from "../../bpk-component-input";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkInputField.module.css";

package/bpk-component-split-input/src/BpkSplitInput.js

@@ -14,10 +14,10 @@
  * 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 { Component } from 'react';
-import PropTypes from 'prop-types';
-import { cssModules } from "../../bpk-react-utils";
+ */import PropTypes from 'prop-types';
+import { Component } from 'react';
 import { INPUT_TYPES } from "../../bpk-component-input";
+import { cssModules } from "../../bpk-react-utils";
 import InputField from "./BpkInputField";
 import STYLES from "./BpkSplitInput.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";

package/bpk-component-star-rating/index.js

@@ -14,11 +14,11 @@
  * 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 BpkStar, { BpkStarNonRtl, STAR_TYPES } from "./src/BpkStar";
-import BpkInteractiveStar from "./src/BpkInteractiveStar";
-import BpkStarRating, { ROUNDING_TYPES } from "./src/BpkStarRating";
+ */import BpkInteractiveStar from "./src/BpkInteractiveStar";
 import BpkInteractiveStarRating from "./src/BpkInteractiveStarRating";
-import withInteractiveStarRatingState from "./src/withInteractiveStarRatingState";
+import BpkStar, { BpkStarNonRtl, STAR_TYPES } from "./src/BpkStar";
+import BpkStarRating, { ROUNDING_TYPES } from "./src/BpkStarRating";
 import themeAttributes from "./src/themeAttributes";
+import withInteractiveStarRatingState from "./src/withInteractiveStarRatingState";
 export { BpkStar, BpkStarNonRtl, STAR_TYPES, ROUNDING_TYPES, BpkInteractiveStar, BpkInteractiveStarRating, withInteractiveStarRatingState, themeAttributes };
 export default BpkStarRating;

package/bpk-component-star-rating/src/BpkInteractiveStar.js

@@ -44,10 +44,13 @@ const BpkInteractiveStar = props => {
     className: buttonClassNames,
     "aria-pressed": selected,
     type: "button",
-    children: /*#__PURE__*/_jsx(BpkStarNonRtl, {
+    children: /*#__PURE__*/_jsx("div", {
       className: iconClassNames,
-      type: type,
-      ...rest
+      children: /*#__PURE__*/_jsx(BpkStarNonRtl, {
+        type: type
+        /* $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md */,
+        ...rest
+      })
     })
   });
 };

package/bpk-component-star-rating/src/BpkInteractiveStarRating.js

@@ -16,8 +16,8 @@
  * limitations under the License.
  */import PropTypes from 'prop-types';
 import { cssModules } from "../../bpk-react-utils";
-import { STAR_TYPES } from "./BpkStar";
 import BpkInteractiveStar from "./BpkInteractiveStar";
+import { STAR_TYPES } from "./BpkStar";
 import STYLES from "./BpkStarRating.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

package/bpk-component-star-rating/src/BpkStar.js

@@ -15,13 +15,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import PropTypes from 'prop-types';
-import SmallIcon from "../../bpk-component-icon/sm/star";
+import { withRtlSupport } from "../../bpk-component-icon";
 import LargeIcon from "../../bpk-component-icon/lg/star";
-import OutlineSmallIcon from "../../bpk-component-icon/sm/star-outline";
+import HalfLargeIcon from "../../bpk-component-icon/lg/star-half";
 import OutlineLargeIcon from "../../bpk-component-icon/lg/star-outline";
+import SmallIcon from "../../bpk-component-icon/sm/star";
 import HalfSmallIcon from "../../bpk-component-icon/sm/star-half";
-import HalfLargeIcon from "../../bpk-component-icon/lg/star-half";
-import { withRtlSupport } from "../../bpk-component-icon";
+import OutlineSmallIcon from "../../bpk-component-icon/sm/star-outline";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkStar.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -54,26 +54,26 @@ const BpkStar = props => {
       /*#__PURE__*/
       // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
       _jsx("span", {
-        className: containerClassNames,
+        className: [containerClassNames, halfIconClassNames],
         ...rest,
-        children: /*#__PURE__*/_jsx(HalfIcon, {
-          className: halfIconClassNames
-        })
+        children: /*#__PURE__*/_jsx(HalfIcon, {})
       })
     );
   }
-  return type === STAR_TYPES.FULL ?
-  /*#__PURE__*/
-  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
-  _jsx(Icon, {
+  return type === STAR_TYPES.FULL ? /*#__PURE__*/_jsx("span", {
     className: iconClassNames,
-    ...rest
-  }) :
-  /*#__PURE__*/
-  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
-  _jsx(OutlineIcon, {
+    children: /*#__PURE__*/_jsx(Icon
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
+    , {
+      ...rest
+    })
+  }) : /*#__PURE__*/_jsx("span", {
     className: iconClassNames,
-    ...rest
+    children: /*#__PURE__*/_jsx(OutlineIcon
+    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
+    , {
+      ...rest
+    })
   });
 };
 BpkStar.propTypes = {

package/bpk-component-star-rating/src/BpkStar.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-star{display:inline-block;vertical-align:text-bottom;fill:rgba(0,0,0,.2)}.bpk-star--large{width:1.5rem;height:1.5rem;vertical-align:bottom}.bpk-star--half{position:absolute;left:0}.bpk-star--filled{fill:#f55d42;fill:var(--bpk-star-rating-filled-color, rgb(245, 93, 66))}.bpk-star__container{display:inline-block;width:1rem;height:1rem}.bpk-star__container--half-star{position:relative;vertical-align:text-bottom}.bpk-star__container--large{width:1.5rem;height:1.5rem;vertical-align:bottom}
+.bpk-star{display:inline-flex;width:1rem;height:1rem;vertical-align:text-bottom;fill:rgba(0,0,0,.2)}.bpk-star--large{width:1.5rem;height:1.5rem;vertical-align:bottom}.bpk-star--half{position:absolute;left:0}.bpk-star--filled{fill:#f55d42;fill:var(--bpk-star-rating-filled-color, rgb(245, 93, 66))}.bpk-star__container{display:inline-flex;width:1rem;height:1rem}.bpk-star__container--half-star{position:relative;vertical-align:text-bottom}.bpk-star__container--large{width:1.5rem;height:1.5rem;vertical-align:bottom}

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

@@ -17,9 +17,10 @@
  */
 
 import { useState } from 'react';
-import { cssModules } from "../../bpk-react-utils";
+
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import SwapVertical from "../../bpk-component-icon/sm/swap--vertical";
+import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkSwapButton.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);

package/bpk-component-table/index.js

@@ -15,9 +15,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */import BpkTable from "./src/BpkTable";
-import BpkTableHead from "./src/BpkTableHead";
 import BpkTableBody from "./src/BpkTableBody";
-import BpkTableRow from "./src/BpkTableRow";
 import BpkTableCell from "./src/BpkTableCell";
+import BpkTableHead from "./src/BpkTableHead";
 import BpkTableHeadCell from "./src/BpkTableHeadCell";
+import BpkTableRow from "./src/BpkTableRow";
 export { BpkTable, BpkTableHead, BpkTableBody, BpkTableRow, BpkTableCell, BpkTableHeadCell };

package/bpk-component-text/src/BpkText.js

@@ -57,10 +57,15 @@ const BpkText = ({
   ...rest
 }) => {
   const classNames = getClassName('bpk-text', `bpk-text--${textStyle}`, className);
-  return /*#__PURE__*/_jsx(TagName, {
-    className: classNames,
-    ...rest,
-    children: children
-  });
+  return (
+    /*#__PURE__*/
+    // Allowed, TagName is always a dom element.
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    _jsx(TagName, {
+      className: classNames,
+      ...rest,
+      children: children
+    })
+  );
 };
 export default BpkText;

package/bpk-component-theme-toggle/src/BpkThemeToggle.js

@@ -81,10 +81,12 @@ class BpkThemeToggle extends Component {
     } = this.props;
     return /*#__PURE__*/_jsxs("div", {
       ...rest,
-      children: [/*#__PURE__*/_jsx(BpkLabel, {
+      children: [/*#__PURE__*/_jsx("span", {
         className: getClassName('bpk-theme-toggle__label'),
-        htmlFor: inputId,
-        children: "Change theme"
+        children: /*#__PURE__*/_jsx(BpkLabel, {
+          htmlFor: inputId,
+          children: "Change theme"
+        })
       }), /*#__PURE__*/_jsxs(BpkSelect, {
         id: inputId,
         name: inputId,

package/bpk-component-theme-toggle/src/updateOnThemeChange.js

@@ -16,8 +16,8 @@
  * limitations under the License.
  */
 
-import { Component } from 'react';
 import PropTypes from 'prop-types';
+import { Component } from 'react';
 import { wrapDisplayName } from "../../bpk-react-utils";
 import { getHtmlElement, THEME_CHANGE_EVENT } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";

package/bpk-component-tooltip/src/BpkTooltipPortal.js

@@ -137,7 +137,10 @@ class BpkTooltipPortal extends Component {
         onOpen: this.onOpen,
         onClose: this.closeTooltip,
         style: portalStyle,
-        renderTarget: renderTarget,
+        renderTarget: renderTarget
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        ,
         className: classNames.join(' '),
         children: /*#__PURE__*/_jsx(BpkTooltip, {
           padded: padded,

package/bpk-mixins/_chips.scss

@@ -237,4 +237,13 @@
     color: $bpk-text-disabled-day;
     cursor: not-allowed;
   }
+
+  &--icon-only {
+    padding-inline-end: bpk-spacing-md();
+    padding-inline-start: bpk-spacing-md();
+
+    &__leading-accessory-view {
+      @include bpk-margin-trailing(0);
+    }
+  }
 }

package/bpk-react-utils/index.js

@@ -16,16 +16,16 @@
  * limitations under the License.
  */
 
-import wrapDisplayName from "./src/wrapDisplayName";
+import { BpkDialogWrapper } from "./src/BpkDialogWrapper/BpkDialogWrapper";
 import Portal from "./src/Portal";
 import TransitionInitialMount from "./src/TransitionInitialMount";
 import cssModules from "./src/cssModules";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import deprecated from "./src/deprecated";
 import { isDeviceIphone, isDeviceIpad, isDeviceIos } from "./src/deviceDetection";
-import withDefaultProps from "./src/withDefaultProps";
 import isRTL from "./src/isRTL";
-import { BpkDialogWrapper } from "./src/BpkDialogWrapper/BpkDialogWrapper";
+import withDefaultProps from "./src/withDefaultProps";
+import wrapDisplayName from "./src/wrapDisplayName";
 export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper };
 export default {
   Portal,

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

@@ -35,7 +35,10 @@ const withDefaultProps = (WrappedComponent, defaultProps) => {
     if (innerClassName) {
       classNames.push(innerClassName);
     }
-    return /*#__PURE__*/_jsx(WrappedComponent, {
+    return /*#__PURE__*/_jsx(WrappedComponent
+    // General HOC difficult/impossible to remove
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    , {
       className: classNames.join(' '),
       ...defaultRest,
       ...rest,

package/bpk-scrim-utils/src/withScrimmedPortal.js

@@ -18,8 +18,8 @@
 
 import { useState, useEffect } from 'react';
 import { createPortal } from 'react-dom';
-import withScrim from "./withScrim";
 import BpkScrim from "./BpkScrim";
+import withScrim from "./withScrim";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getPortalElement = target => {
   const portalElement = target && typeof target === 'function' ? target() : null;

package/bpk-theming/src/BpkThemeProvider.js

@@ -16,8 +16,8 @@
  * limitations under the License.
  */
 
-import { Component } from 'react';
 import PropTypes from 'prop-types';
+import { Component } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 const uniq = (arr = []) => {
   const seen = {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "33.4.0",
+  "version": "33.6.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -24,7 +24,7 @@
   "dependencies": {
     "@popperjs/core": "^2.11.5",
     "@react-google-maps/api": "^2.12.0",
-    "@skyscanner/bpk-foundations-web": "^17.5.3",
+    "@skyscanner/bpk-foundations-web": "^17.9.0",
     "@skyscanner/bpk-svgs": "^19.1.0",
     "a11y-focus-scope": "^1.1.3",
     "a11y-focus-store": "^1.0.0",

package/unstable__bpk-mixins/_chips.scss

@@ -237,4 +237,13 @@
     color: tokens.$bpk-text-disabled-day;
     cursor: not-allowed;
   }
+
+  &--icon-only {
+    padding-inline-end: tokens.bpk-spacing-md();
+    padding-inline-start: tokens.bpk-spacing-md();
+
+    &__leading-accessory-view {
+      @include margins.bpk-margin-trailing(0);
+    }
+  }
 }

package/bpk-component-button/src/commonButtonTests.js

@@ -1,133 +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.
- */
-
-import { render } from '@testing-library/react';
-import { jsx as _jsx } from "react/jsx-runtime";
-const commonButtonTests = ButtonToTest => {
-  describe('ButtonToTest', () => {
-    it('should render correctly', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/_jsx(ButtonToTest, {
-        children: "My button"
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-    it('should render correctly with a "href" attribute', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/_jsx(ButtonToTest, {
-        href: "#",
-        children: "My button"
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-    it('should render correctly with a "disabled" attribute', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/_jsx(ButtonToTest, {
-        disabled: true,
-        children: "My button"
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-    it('should render correctly with a "large" attribute', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/_jsx(ButtonToTest, {
-        large: true,
-        children: "My button"
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-    it('should render correctly with an "iconOnly" attribute', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/_jsx(ButtonToTest, {
-        iconOnly: true,
-        children: "My button"
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-    it('should respect the class names entered as a string', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/_jsx(ButtonToTest, {
-        large: true,
-        className: "custom-class-1 custom-class-2",
-        children: "My button"
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-    it('should add only bpk specific classes if className prop is set to empty string', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/_jsx(ButtonToTest, {
-        large: true,
-        className: "",
-        children: "My button"
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-    it('should render correctly with "blank" attribute', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/_jsx(ButtonToTest, {
-        href: "#",
-        blank: true,
-        children: "My button"
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-    it('should render correctly with "rel" attribute', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/_jsx(ButtonToTest, {
-        href: "#",
-        rel: "rel-attr",
-        children: "My button"
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-    it('should render correctly with "blank" and "rel" attributes', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/_jsx(ButtonToTest, {
-        href: "#",
-        blank: true,
-        rel: "rel-overwrite",
-        children: "My button"
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-    it('should render correctly with "disabled" and "href" attributes', () => {
-      const {
-        asFragment
-      } = render( /*#__PURE__*/_jsx(ButtonToTest, {
-        href: "#",
-        disabled: true,
-        children: "My button"
-      }));
-      expect(asFragment()).toMatchSnapshot();
-    });
-  });
-};
-
-// We export these to reuse them in other tests for buttons.
-// eslint-disable-next-line jest/no-export
-export default commonButtonTests;

package/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.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-navigation-bar-button-link{color:#161616;color:var(--bpk-navigation-bar-button-link-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-navigation-bar-button-link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-navigation-bar-button-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-navigation-bar-button-link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-navigation-bar-button-link-hover-color, rgb(22, 22, 22))}.bpk-navigation-bar-button-link:active{color:#161616;color:var(--bpk-navigation-bar-button-link-active-color, rgb(22, 22, 22))}.bpk-navigation-bar-button-link:visited{color:#161616;color:var(--bpk-navigation-bar-button-link-visited-color, rgb(22, 22, 22))}.bpk-navigation-bar-button-link--on-dark{color:#fff}.bpk-no-touch-support .bpk-navigation-bar-button-link--on-dark:hover:not(:active):not(:disabled){color:#fff}:global(.bpk-no-touch-support) .bpk-navigation-bar-button-link--on-dark:hover:not(:active):not(:disabled){color:#fff}.bpk-navigation-bar-button-link--on-dark:active{color:#fff}.bpk-navigation-bar-button-link--on-dark:visited{color:#fff}