@skyscanner/backpack-web 33.4.0 → 33.6.0

package/bpk-component-chip/src/commonTypes.js

@@ -16,33 +16,10 @@
  * limitations under the License.
  */
 
-import PropTypes from 'prop-types';
 export const CHIP_TYPES = {
   default: 'default',
   onDark: 'on-dark',
   onImage: 'on-image'
 };
 
-// onClick and children are already part of the button props, but we need to specify that they are required
-
-// TODO: Remove once chip examples have been migrated to TS
-export const COMMON_PROP_TYPES = {
-  accessibilityLabel: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired,
-  onClick: PropTypes.func.isRequired,
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  leadingAccessoryView: PropTypes.node,
-  selected: PropTypes.bool,
-  trailingAccessoryView: PropTypes.node,
-  type: PropTypes.oneOf(Object.values(CHIP_TYPES))
-};
-
-// TODO: Remove once chip examples have been migrated to TS
-export const COMMON_DEFAULT_PROPS = {
-  disabled: false,
-  leadingAccessoryView: null,
-  selected: false,
-  trailingAccessoryView: null,
-  type: CHIP_TYPES.default
-};
+// onClick is already part of the button props, but we need to specify that they are required

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

@@ -21,14 +21,15 @@ import STYLES from "./BpkCloseButton.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkCloseButton = props => {
-  const classNames = [getClassName('bpk-close-button')];
   const {
     className,
     customIcon,
     label,
     onClick,
+    onDark,
     ...rest
   } = props;
+  const classNames = [onDark ? getClassName('bpk-close-button__onDark') : getClassName('bpk-close-button__default')];
   const Icon = customIcon || CloseIcon;
   if (className) {
     classNames.push(className);
@@ -44,7 +45,7 @@ const BpkCloseButton = props => {
       className: classNames.join(' '),
       ...rest,
       children: /*#__PURE__*/_jsx("span", {
-        className: getClassName('bpk-close-button__icon'),
+        className: getClassName('bpk-close-button-icon'),
         children: /*#__PURE__*/_jsx(Icon, {})
       })
     })
@@ -54,10 +55,12 @@ BpkCloseButton.propTypes = {
   label: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
   className: PropTypes.string,
-  customIcon: PropTypes.func
+  customIcon: PropTypes.func,
+  onDark: PropTypes.Boolean
 };
 BpkCloseButton.defaultProps = {
   className: null,
-  customIcon: null
+  customIcon: null,
+  onDark: false
 };
 export default BpkCloseButton;

package/bpk-component-close-button/src/BpkCloseButton.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-close-button{width:1.5rem;height:1.5rem;margin-right:-0.125rem;margin-left:-0.125rem;padding:0;border:0;background-color:rgba(0,0,0,0);color:#626971;cursor:pointer;appearance:none;position:relative}.bpk-close-button::before{position:absolute;top:calc(-2.75rem/2 + 50%);left:calc(-2.75rem/2 + 50%);content:"";width:2.75rem;height:2.75rem}.bpk-no-touch-support .bpk-close-button:hover:not(:active):not(:disabled){color:#161616}:global(.bpk-no-touch-support) .bpk-close-button:hover:not(:active):not(:disabled){color:#161616}.bpk-close-button:active{color:#161616}.bpk-close-button__icon{vertical-align:-0.21875rem;fill:currentcolor}
+.bpk-close-button{width:1.5rem;height:1.5rem;margin-right:-0.125rem;margin-left:-0.125rem;padding:0;border:0;background-color:rgba(0,0,0,0);font-size:1.5rem;cursor:pointer;appearance:none;position:relative}.bpk-close-button::before{position:absolute;top:calc(-2.75rem/2 + 50%);left:calc(-2.75rem/2 + 50%);content:"";width:2.75rem;height:2.75rem}.bpk-close-button__default{color:#161616;composes:bpk-close-button}.bpk-no-touch-support .bpk-close-button__default:hover:not(:active):not(:disabled){color:#161616}:global(.bpk-no-touch-support) .bpk-close-button__default:hover:not(:active):not(:disabled){color:#161616}.bpk-close-button__default:active{color:#161616}.bpk-close-button__onDark{color:#fff;composes:bpk-close-button}.bpk-no-touch-support .bpk-close-button__onDark:hover:not(:active):not(:disabled){color:#fff}:global(.bpk-no-touch-support) .bpk-close-button__onDark:hover:not(:active):not(:disabled){color:#fff}.bpk-close-button__onDark:active{color:#fff}.bpk-close-button-icon{fill:currentcolor}

package/bpk-component-content-cards/src/BpkContentCard.js

@@ -40,11 +40,17 @@ const BpkContentCard = ({
       loading: "lazy"
     })
   }), /*#__PURE__*/_jsxs("div", {
-    children: [/*#__PURE__*/_jsx(BpkText, {
+    children: [/*#__PURE__*/_jsx(BpkText
+    // TODO: className to be removed.
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    , {
       className: getClassName('bpk-content-card--headline'),
       tagName: "h3",
       children: card.headline
-    }), /*#__PURE__*/_jsx(BpkText, {
+    }), /*#__PURE__*/_jsx(BpkText
+    // TODO: className to be removed.
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    , {
       className: getClassName('bpk-content-card--description'),
       tagName: "p",
       children: card.description

package/bpk-component-datatable/src/BpkDataTable.js

@@ -21,8 +21,8 @@ import { useMemo, useState } from 'react';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { useTable, useSortBy } from 'react-table';
 import { cssModules } from "../../bpk-react-utils";
-import { SORT_DIRECTION_TYPES } from "./common-types";
 import BpkDataTableHeader from "./BpkDataTableHeader";
+import { SORT_DIRECTION_TYPES } from "./common-types";
 import { createColumnsSchema } from "./utils";
 import STYLES from "./BpkDataTable.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/bpk-component-datatable/src/BpkDataTableHeader.js

@@ -16,12 +16,12 @@
  * limitations under the License.
  */
 
-import { cssModules } from "../../bpk-react-utils";
+import { withRtlSupport } from "../../bpk-component-icon";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkSmallArrowDownIcon from "../../bpk-component-icon/sm/arrow-down";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkSmallArrowUpIcon from "../../bpk-component-icon/sm/arrow-up";
-import { withRtlSupport } from "../../bpk-component-icon";
+import { cssModules } from "../../bpk-react-utils";
 import { SORT_DIRECTION_TYPES } from "./common-types";
 import STYLES from "./BpkDataTableHeader.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -110,12 +110,16 @@ const BpkDataTableHeader = ({
     }), !disableSortBy && /*#__PURE__*/_jsxs("div", {
       className: getClassName('bpk-data-table-column__sort-icons'),
       "aria-hidden": true,
-      children: [/*#__PURE__*/_jsx(UpIcon, {
-        onClick: () => column.toggleSortBy(false),
-        className: upIconClassNames
-      }), /*#__PURE__*/_jsx(DownIcon, {
-        onClick: () => column.toggleSortBy(true),
-        className: downIconClassNames
+      children: [/*#__PURE__*/_jsx("div", {
+        className: upIconClassNames,
+        children: /*#__PURE__*/_jsx(UpIcon, {
+          onClick: () => column.toggleSortBy(false)
+        })
+      }), /*#__PURE__*/_jsx("div", {
+        className: downIconClassNames,
+        children: /*#__PURE__*/_jsx(DownIcon, {
+          onClick: () => column.toggleSortBy(true)
+        })
       })]
     }, "sort")]
   });

package/bpk-component-datatable/src/BpkDataTableHeader.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-data-table-column__header{display:flex;height:100%;margin:1rem;flex-direction:row;align-items:center;outline-offset:-0.25rem;font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-data-table-column__header:hover{cursor:pointer}.bpk-data-table-column__sort-icons{margin:0 0 0 .75rem}html[dir=rtl] .bpk-data-table-column__sort-icons{margin:0 .75rem 0 0}.bpk-data-table-column__sort-icon{display:block;fill:#c1c7cf}.bpk-data-table-column__sort-icon:hover{fill:#c1c7cf}.bpk-data-table-column__sort-icon--selected,.bpk-data-table-column__sort-icon--selected:hover{fill:#0062e3}.bpk-data-table-column__sort-icon--up{margin-bottom:-0.25rem}
+.bpk-data-table-column__header{display:flex;height:100%;margin:1rem;flex-direction:row;align-items:center;outline-offset:-0.25rem;font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-data-table-column__header:hover{cursor:pointer}.bpk-data-table-column__sort-icons{margin:0 0 0 .75rem}html[dir=rtl] .bpk-data-table-column__sort-icons{margin:0 .75rem 0 0}.bpk-data-table-column__sort-icon{display:block;line-height:.5rem;fill:#c1c7cf}.bpk-data-table-column__sort-icon:hover{fill:#c1c7cf}.bpk-data-table-column__sort-icon--selected,.bpk-data-table-column__sort-icon--selected:hover{fill:#0062e3}.bpk-data-table-column__sort-icon--up{margin-bottom:-0.25rem}

package/bpk-component-datepicker/src/BpkDatepicker.js

@@ -17,16 +17,13 @@
  */
 
 import { createRef, Component } from 'react';
+import BpkBreakpoint, { BREAKPOINTS } from "../../bpk-component-breakpoint";
+import { composeCalendar, BpkCalendarGridHeader, BpkCalendarGrid, BpkCalendarDate, withCalendarState, CALENDAR_SELECTION_TYPE, DateUtils, BpkCalendarNav } from "../../bpk-component-calendar";
 import BpkInput, { withOpenEvents } from "../../bpk-component-input";
 import BpkModal from "../../bpk-component-modal";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkPopover from "../../bpk-component-popover";
-import { cssModules } from "../../bpk-react-utils";
-import BpkBreakpoint, { BREAKPOINTS } from "../../bpk-component-breakpoint";
-import { composeCalendar, BpkCalendarGridHeader, BpkCalendarGrid, BpkCalendarDate, withCalendarState, CALENDAR_SELECTION_TYPE, DateUtils, BpkCalendarNav } from "../../bpk-component-calendar";
-import STYLES from "./BpkDatepicker.module.css";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const getClassName = cssModules(STYLES);
 const Input = withOpenEvents(BpkInput);
 const DefaultCalendar = withCalendarState(composeCalendar(BpkCalendarNav, BpkCalendarGridHeader, BpkCalendarGrid, BpkCalendarDate));
 class BpkDatepicker extends Component {
@@ -192,7 +189,6 @@ class BpkDatepicker extends Component {
     delete rest.onOpenChange;
     delete rest.isOpen;
     const input = inputComponent || /*#__PURE__*/_jsx("div", {
-      className: getClassName('bpk-datepicker__input'),
       ref: this.inputRef,
       children: /*#__PURE__*/_jsx(Input, {
         id: id,
@@ -210,7 +206,6 @@ class BpkDatepicker extends Component {
     });
     const calendarProps = {
       id: `${id}-calendar`,
-      className: getClassName('bpk-datepicker__calendar'),
       changeMonthLabel,
       dateModifiers,
       daysOfWeek,

package/bpk-component-description-list/index.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
+import BpkDescriptionDetails from "./src/BpkDescriptionDetails";
 import BpkDescriptionList from "./src/BpkDescriptionList";
 import BpkDescriptionTerm from "./src/BpkDescriptionTerm";
-import BpkDescriptionDetails from "./src/BpkDescriptionDetails";
 export { BpkDescriptionList, BpkDescriptionTerm, BpkDescriptionDetails };

package/bpk-component-description-list/src/ComponentFactory.js

@@ -31,11 +31,16 @@ const buildComponent = (TagName, baseClassName) => {
     if (className) {
       classNames.push(className);
     }
-    return /*#__PURE__*/_jsx(TagName, {
-      className: classNames.join(' '),
-      ...rest,
-      children: children
-    });
+    return (
+      /*#__PURE__*/
+      // TODO: className to be removed
+      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+      _jsx(TagName, {
+        className: classNames.join(' '),
+        ...rest,
+        children: children
+      })
+    );
   };
   Component.propTypes = {
     children: PropTypes.node.isRequired,

package/bpk-component-dialog/src/BpkDialog.js

@@ -16,9 +16,9 @@
  * limitations under the License.
  */
 
-import { cssModules, Portal } from "../../bpk-react-utils";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkCloseButton from "../../bpk-component-close-button";
+import { cssModules, Portal } from "../../bpk-react-utils";
 import BpkDialogInner from "./BpkDialogInner";
 import { HEADER_ICON_TYPES } from "./common-types";
 import STYLES from "./BpkDialog.module.css";
@@ -55,10 +55,12 @@ const BpkDialog = ({
       children: [headerIcon && /*#__PURE__*/_jsx("div", {
         className: headerIconClassNames,
         children: headerIcon
-      }), dismissible && /*#__PURE__*/_jsx(BpkCloseButton, {
+      }), dismissible && /*#__PURE__*/_jsx("span", {
         className: closeButtonClassNames,
-        label: closeLabel,
-        onClick: onClose
+        children: /*#__PURE__*/_jsx(BpkCloseButton, {
+          label: closeLabel,
+          onClick: onClose
+        })
       }), children]
     })
   });

package/bpk-component-dialog/src/BpkDialog.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-dialog__container{display:flex;padding:1.5rem}@media screen\0 {.bpk-dialog__container{display:block}}.bpk-dialog__close-button{float:right;margin:0 0 1rem 1rem}html[dir=rtl] .bpk-dialog__close-button{float:left;margin:0 1rem 1rem 0}.bpk-dialog--with-icon{margin-top:2rem}.bpk-dialog__icon{position:absolute;top:0;left:50%;display:flex;width:3.5rem;height:3.5rem;margin-top:-1.75rem;margin-left:-1.75rem;justify-content:center;align-items:center;border:4px #fff solid;border-radius:50%}.bpk-dialog__icon--primary{background-color:#0062e3}.bpk-dialog__icon--warning{background-color:#f55d42}.bpk-dialog__icon--destructive{background-color:#e70866}.bpk-dialog__icon>svg{fill:#fff}
+.bpk-dialog__container{display:flex;padding:1.5rem}@media screen\0 {.bpk-dialog__container{display:block}}.bpk-dialog__close-button{float:right;margin:0 .125rem 1rem 1rem}html[dir=rtl] .bpk-dialog__close-button{float:left;margin:0 1rem 1rem .125rem}.bpk-dialog--with-icon{margin-top:2rem}.bpk-dialog__icon{position:absolute;top:0;left:50%;display:flex;width:3.5rem;height:3.5rem;margin-top:-1.75rem;margin-left:-1.75rem;justify-content:center;align-items:center;border:4px #fff solid;border-radius:50%}.bpk-dialog__icon--primary{background-color:#0062e3}.bpk-dialog__icon--warning{background-color:#f55d42}.bpk-dialog__icon--destructive{background-color:#e70866}.bpk-dialog__icon>svg{fill:#fff}

package/bpk-component-dialog/src/BpkDialogInner.js

@@ -16,10 +16,10 @@
  * limitations under the License.
  */
 
-import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
-import { withScrim } from "../../bpk-scrim-utils";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { BpkContentBubble } from "../../bpk-component-flare";
+import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
+import { withScrim } from "../../bpk-scrim-utils";
 import STYLES from "./BpkDialogInner.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -48,7 +48,10 @@ const BpkDialogInner = props => {
       "aria-label": ariaLabel,
       className: classNames,
       ref: dialogRef,
-      children: [flare && /*#__PURE__*/_jsx(BpkContentBubble, {
+      children: [flare && /*#__PURE__*/_jsx(BpkContentBubble
+      // TODO: className to be removed
+      // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+      , {
         className: flareClassNames
       }), /*#__PURE__*/_jsx("div", {
         className: contentClassNames,

package/bpk-component-drawer/src/BpkDrawer.js

@@ -16,12 +16,10 @@
  * limitations under the License.
  */import PropTypes from 'prop-types';
 import { Component } from 'react';
-import { Portal, cssModules } from "../../bpk-react-utils";
+import { Portal } from "../../bpk-react-utils";
 import { withScrim } from "../../bpk-scrim-utils";
 import BpkDrawerContent from "./BpkDrawerContent";
-import STYLES from "./BpkDrawer.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
-const getClassName = cssModules(STYLES);
 const BpkScrimDrawerContent = withScrim(BpkDrawerContent);
 class BpkDrawer extends Component {
   constructor() {
@@ -63,7 +61,6 @@ class BpkDrawer extends Component {
         isDrawerShown: isDrawerShown,
         onClose: this.hide,
         onCloseAnimationComplete: this.onCloseAnimationComplete,
-        containerClassName: getClassName('bpk-drawer__container'),
         ...rest
       })
     });

package/bpk-component-drawer/src/BpkDrawerContent.js

@@ -17,9 +17,9 @@
  */import PropTypes from 'prop-types';
 import Transition from 'react-transition-group/Transition';
 import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
-import { cssModules } from "../../bpk-react-utils";
-import { BpkButtonLink } from "../../bpk-component-link";
 import BpkCloseButton from "../../bpk-component-close-button";
+import { BpkButtonLink } from "../../bpk-component-link";
+import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkDrawerContent.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -88,10 +88,12 @@ const BpkDrawerContent = props => {
         }), "\xA0", closeText ? /*#__PURE__*/_jsx(BpkButtonLink, {
           onClick: onClose,
           children: closeText
-        }) : /*#__PURE__*/_jsx(BpkCloseButton, {
+        }) : /*#__PURE__*/_jsx("div", {
           className: getClassName('bpk-drawer__close-button'),
-          label: closeLabel,
-          onClick: onClose
+          children: /*#__PURE__*/_jsx(BpkCloseButton, {
+            label: closeLabel,
+            onClick: onClose
+          })
         })]
       }), /*#__PURE__*/_jsx("div", {
         className: contentClassNames.join(' '),

package/bpk-component-fieldset/src/BpkFieldset.js

@@ -16,8 +16,8 @@
  * limitations under the License.
  */import PropTypes from 'prop-types';
 import { cloneElement } from 'react';
-import BpkLabel from "../../bpk-component-label";
 import BpkFormValidation from "../../bpk-component-form-validation";
+import BpkLabel from "../../bpk-component-label";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkFieldset.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -82,13 +82,15 @@ const BpkFieldset = props => {
     _jsxs("fieldset", {
       className: classNames.join(' '),
       ...rest,
-      children: [!isCheckbox && /*#__PURE__*/_jsx(BpkLabel, {
+      children: [!isCheckbox && /*#__PURE__*/_jsx("div", {
         className: getClassName('bpk-fieldset__label'),
-        htmlFor: childId,
-        required: required,
-        disabled: disabled,
-        valid: isValid,
-        children: label
+        children: /*#__PURE__*/_jsx(BpkLabel, {
+          htmlFor: childId,
+          required: required,
+          disabled: disabled,
+          valid: isValid,
+          children: label
+        })
       }), clonedChildren, description && /*#__PURE__*/_jsx("span", {
         className: getClassName('bpk-fieldset__description'),
         id: descriptionId,

package/bpk-component-flare/index.js

@@ -14,7 +14,7 @@
  * 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 BpkFlareBar from "./src/BpkFlareBar";
-import BpkContentBubble from "./src/BpkContentBubble";
+ */import BpkContentBubble from "./src/BpkContentBubble";
+import BpkFlareBar from "./src/BpkFlareBar";
 export default BpkFlareBar;
 export { BpkFlareBar, BpkContentBubble };

package/bpk-component-flare/src/BpkContentBubble.js

@@ -58,7 +58,10 @@ const BpkContentBubble = props => {
         className: contentClassNames.join(' '),
         children: content && content
       }), showPointer && /*#__PURE__*/_jsx(BpkFlareBar, {
-        rounded: rounded,
+        rounded: rounded
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        ,
         className: getClassName('bpk-content-bubble__pointer'),
         ...flareProps
       })]

package/bpk-component-flare/src/BpkFlareBar.js

@@ -18,8 +18,8 @@
 
 import PropTypes from 'prop-types';
 import { cssModules } from "../../bpk-react-utils";
-import Pointer from "./__generated__/js/pointer";
 import CornerRadius from "./__generated__/js/corner-radius";
+import Pointer from "./__generated__/js/pointer";
 import STYLES from "./bpk-flare-bar.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -45,11 +45,20 @@ const BpkFlareBar = props => {
   return /*#__PURE__*/_jsxs("div", {
     className: classNames.join(' '),
     ...rest,
-    children: [/*#__PURE__*/_jsx(Pointer, {
+    children: [/*#__PURE__*/_jsx(Pointer
+    // TODO: className to be removed
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    , {
       className: curveClassNames.join(' ')
-    }), rounded && /*#__PURE__*/_jsx(CornerRadius, {
+    }), rounded && /*#__PURE__*/_jsx(CornerRadius
+    // TODO: className to be removed
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    , {
       className: leftCornerRadiusClassNames.join(' ')
-    }), rounded && /*#__PURE__*/_jsx(CornerRadius, {
+    }), rounded && /*#__PURE__*/_jsx(CornerRadius
+    // TODO: className to be removed
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    , {
       className: rightCornerRadiusClassNames.join(' ')
     })]
   });

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

@@ -70,7 +70,10 @@ const BpkFloatingNotification = props => {
         })
       }), /*#__PURE__*/_jsx(BpkText, {
         tagName: "p",
-        textStyle: TEXT_STYLES.bodyDefault,
+        textStyle: TEXT_STYLES.bodyDefault
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        ,
         className: getClassName('bpk-floating-notification__text'),
         children: text
       }), /*#__PURE__*/_jsx(BpkAriaLive, {
@@ -78,7 +81,10 @@ const BpkFloatingNotification = props => {
         children: text
       }), ctaText && /*#__PURE__*/_jsx(BpkButtonV2, {
         type: BUTTON_TYPES.linkOnDark,
-        onClick: onClick,
+        onClick: onClick
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        ,
         className: getClassName('bpk-floating-notification__button'),
         children: ctaText
       })]

package/bpk-component-floating-notification/src/BpkFloatingNotification.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-floating-notification{position:absolute;right:0;bottom:2rem;left:0;display:flex;max-width:25rem;margin:auto;padding:1.5rem;transition:opacity 400ms ease-in-out,transform 400ms ease-in-out;border-radius:.75rem;background:#05203c;color:#fff;box-shadow:0px 12px 50px 0px rgba(37,32,31,.25),0px 4px 14px 0px rgba(37,32,31,.25)}@media(max-width: 32rem){.bpk-floating-notification{max-width:100%;padding:1rem}}.bpk-floating-notification--leave{transform:translateY(0);opacity:1}.bpk-floating-notification--leave-active{transform:translateY(2rem);opacity:0}.bpk-floating-notification--leave-done{opacity:0}.bpk-floating-notification--appear{transform:translateY(2rem);opacity:0}.bpk-floating-notification--appear-active{transform:translateY(0);opacity:1}.bpk-floating-notification__button{min-height:0;padding:0;color:#fff;margin-inline-start:auto;word-break:keep-all}.bpk-floating-notification__icon{margin-right:.5rem;margin-left:.25rem;flex-shrink:0;transform:translateY(0.25rem);text-align:bottom;fill:#fff}.bpk-floating-notification__text{margin-inline-end:.5rem}
+.bpk-floating-notification{position:absolute;right:0;bottom:2rem;left:0;display:flex;z-index:2;max-width:25rem;margin:auto;padding:1.5rem;transition:opacity 400ms ease-in-out,transform 400ms ease-in-out;border-radius:.75rem;background:#05203c;color:#fff;box-shadow:0px 12px 50px 0px rgba(37,32,31,.25),0px 4px 14px 0px rgba(37,32,31,.25)}@media(max-width: 32rem){.bpk-floating-notification{max-width:100%;padding:1rem}}.bpk-floating-notification--leave{transform:translateY(0);opacity:1}.bpk-floating-notification--leave-active{transform:translateY(2rem);opacity:0}.bpk-floating-notification--leave-done{opacity:0}.bpk-floating-notification--appear{transform:translateY(2rem);opacity:0}.bpk-floating-notification--appear-active{transform:translateY(0);opacity:1}.bpk-floating-notification__button{min-height:0;padding:0;color:#fff;margin-inline-start:auto;word-break:keep-all}.bpk-floating-notification__icon{margin-right:.5rem;margin-left:.25rem;flex-shrink:0;transform:translateY(0.25rem);text-align:bottom;fill:#fff}.bpk-floating-notification__text{margin-inline-end:.5rem}

package/bpk-component-form-validation/src/BpkFormValidation.js

@@ -19,9 +19,9 @@
 import PropTypes from 'prop-types';
 import { lineHeightSm, iconSizeSm } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import AnimateHeight from "../../bpk-animate-height";
-import { cssModules } from "../../bpk-react-utils";
-import BpkSmallExclamationIcon from "../../bpk-component-icon/sm/exclamation-circle";
 import { withAlignment } from "../../bpk-component-icon";
+import BpkSmallExclamationIcon from "../../bpk-component-icon/sm/exclamation-circle";
+import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkFormValidation.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -46,8 +46,9 @@ const BpkFormValidation = props => {
       children: /*#__PURE__*/_jsxs("div", {
         className: classNames,
         ...rest,
-        children: [/*#__PURE__*/_jsx(AlignedExclamationIcon, {
-          className: getClassName('bpk-form-validation__icon')
+        children: [/*#__PURE__*/_jsx("span", {
+          className: getClassName('bpk-form-validation__icon'),
+          children: /*#__PURE__*/_jsx(AlignedExclamationIcon, {})
         }), children]
       })
     })

package/bpk-component-graphic-promotion/src/BpkGraphicPromo.js

@@ -16,9 +16,8 @@
  * limitations under the License.
  */
 
-import { cssModules } from "../../bpk-react-utils";
-import BpkText from "../../bpk-component-text";
 import { BpkButtonV2, BUTTON_TYPES } from "../../bpk-component-button";
+import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkGraphicPromo.module.css";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -101,8 +100,7 @@ const BpkGraphicPromo = ({
         children: [/*#__PURE__*/_jsx("div", {
           className: getTextClasses('bpk-graphic-promo__sponsor-content'),
           children: sponsor && /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsx(BpkText, {
-              tagName: "span",
+            children: [/*#__PURE__*/_jsx("span", {
               className: getClassName('bpk-graphic-promo__sponsor-label'),
               children: sponsor.label
             }), /*#__PURE__*/_jsx("img", {
@@ -113,20 +111,20 @@ const BpkGraphicPromo = ({
           })
         }), /*#__PURE__*/_jsxs("div", {
           className: getTextClasses('bpk-graphic-promo__promo-content'),
-          children: [!sponsor && tagline && /*#__PURE__*/_jsx(BpkText, {
-            tagName: "span",
+          children: [!sponsor && tagline && /*#__PURE__*/_jsx("span", {
             className: getClassName('bpk-graphic-promo__tagline'),
             children: tagline
-          }), /*#__PURE__*/_jsx(BpkText, {
-            tagName: "h2",
+          }), /*#__PURE__*/_jsx("h2", {
             className: getClassName('bpk-graphic-promo__headline'),
             children: headline
-          }), subheading && /*#__PURE__*/_jsx(BpkText, {
-            tagName: "p",
+          }), subheading && /*#__PURE__*/_jsx("p", {
             className: getClassName('bpk-graphic-promo__subheading'),
             children: subheading
           }), /*#__PURE__*/_jsx(BpkButtonV2, {
-            type: BUTTON_TYPES.primaryOnDark,
+            type: BUTTON_TYPES.primaryOnDark
+            // TODO: className to be removed
+            // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+            ,
             className: getClassName('bpk-graphic-promo__cta'),
             onClick: onClickWrapper,
             tabIndex: -1 /* button is not focusable for accessibility */,

package/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-card{position:relative;display:block;background-color:#fff;color:#161616;text-decoration:none;cursor:pointer;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3);border-radius:.75rem}.bpk-no-touch-support .bpk-card:hover:not(:active):not(:disabled)::after{opacity:1}:global(.bpk-no-touch-support) .bpk-card:hover:not(:active):not(:disabled)::after{opacity:1}.bpk-card::after{position:absolute;top:0;right:0;bottom:0;left:0;content:"";transition:opacity 200ms ease-in-out;opacity:0;pointer-events:none;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25);border-radius:.75rem}@media screen\0 {.bpk-card::after{z-index:-1}}.bpk-card:active::after{box-shadow:none}.bpk-graphic-promo{max-width:76.5rem;margin-right:auto;margin-left:auto;background-color:#05203c;background-position:center;background-size:cover;color:#fff;box-shadow:none}@media(max-width: 48rem){.bpk-graphic-promo{padding-top:133%;box-sizing:border-box}}.bpk-graphic-promo::after{display:none}.bpk-graphic-promo__container{display:flex;flex-direction:column;justify-content:center}.bpk-graphic-promo__container--start{align-items:start}.bpk-graphic-promo__container--center{align-items:center}.bpk-graphic-promo__container--end{align-items:end}@media(min-width: 64.0625rem){.bpk-graphic-promo__container{height:28.75rem;margin-left:4rem;margin-right:2.5rem}html[dir=rtl] .bpk-graphic-promo__container{margin-right:4rem}html[dir=rtl] .bpk-graphic-promo__container{margin-left:2.5rem}.bpk-graphic-promo__container--center>*{margin-left:0;margin-right:1.5rem}html[dir=rtl] .bpk-graphic-promo__container--center>*{margin-left:1.5rem;margin-right:0}}@media(max-width: 64rem){.bpk-graphic-promo__container{height:22.5rem;margin-left:2.5rem;margin-right:2rem}html[dir=rtl] .bpk-graphic-promo__container{margin-right:2.5rem}html[dir=rtl] .bpk-graphic-promo__container{margin-left:2rem}.bpk-graphic-promo__container--center>*{margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-graphic-promo__container--center>*{margin-left:.5rem;margin-right:0}}@media(max-width: 48rem){.bpk-graphic-promo__container{padding:2rem;justify-content:space-between;align-items:start;text-align:start;margin-left:0;margin-right:0;position:absolute;top:0;right:0;left:0;height:100%}html[dir=rtl] .bpk-graphic-promo__container{margin-left:0;margin-right:0}.bpk-graphic-promo__container--inverted{flex-direction:column-reverse}.bpk-graphic-promo__container>*{margin-left:0;margin-right:0}html[dir=rtl] .bpk-graphic-promo__container>*{margin-left:0;margin-right:0}}@media(max-width: 22.4375rem){.bpk-graphic-promo__container{padding:1.5rem}}.bpk-graphic-promo__tagline{margin-bottom:.5rem;font-size:1rem;line-height:1.25rem;font-weight:700}@media(max-width: 64rem){.bpk-graphic-promo__tagline{font-size:1rem;line-height:1.5rem;font-weight:700}}@media(max-width: 48rem){.bpk-graphic-promo__tagline{font-size:1.5rem;line-height:2rem;font-weight:400}}@media(max-width: 22.4375rem){.bpk-graphic-promo__tagline{font-size:1rem;line-height:1.5rem;font-weight:700}}@media(min-width: 64.0625rem){.bpk-graphic-promo__headline{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-graphic-promo__headline:not(:last-child){margin-bottom:.5rem}}@media(max-width: 64rem){.bpk-graphic-promo__headline{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-graphic-promo__headline:not(:last-child){margin-bottom:.5rem}}@media(max-width: 48rem){.bpk-graphic-promo__headline{margin-bottom:.5rem}}@media(max-width: 32rem){.bpk-graphic-promo__headline{font-size:2rem;line-height:2.5rem;font-weight:700}}.bpk-graphic-promo__subheading{font-size:1rem;line-height:1.5rem;font-weight:400}@media(max-width: 64rem){.bpk-graphic-promo__subheading{font-size:1rem;line-height:1.25rem;font-weight:700}}@media(max-width: 48rem){.bpk-graphic-promo__subheading{font-size:1.5rem;line-height:1.75rem;font-weight:700}}@media(max-width: 32rem){.bpk-graphic-promo__subheading{font-size:1rem;line-height:1.25rem;font-weight:700}}.bpk-graphic-promo__promo-content,.bpk-graphic-promo__sponsor-content{display:flex;flex-direction:column}.bpk-graphic-promo__promo-content--start,.bpk-graphic-promo__sponsor-content--start{align-items:start;text-align:start}.bpk-graphic-promo__promo-content--center,.bpk-graphic-promo__sponsor-content--center{align-items:center;text-align:center}.bpk-graphic-promo__promo-content--end,.bpk-graphic-promo__sponsor-content--end{align-items:start;text-align:start}@media(min-width: 64.0625rem){.bpk-graphic-promo__promo-content,.bpk-graphic-promo__sponsor-content{width:22.5rem}}@media(max-width: 64rem){.bpk-graphic-promo__promo-content,.bpk-graphic-promo__sponsor-content{width:20rem}}@media(max-width: 48rem){.bpk-graphic-promo__promo-content,.bpk-graphic-promo__sponsor-content{width:initial;align-items:start;text-align:start}}.bpk-graphic-promo__sponsor-content{display:flex;margin-bottom:1rem;flex-direction:column}@media(max-width: 48rem){.bpk-graphic-promo__sponsor-content{margin-bottom:initial}}.bpk-graphic-promo__sponsor-label{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:700}@media(max-width: 48rem){.bpk-graphic-promo__sponsor-label{margin-bottom:.5rem;font-size:1.5rem;line-height:1.75rem;font-weight:700}}@media(max-width: 22.4375rem){.bpk-graphic-promo__sponsor-label{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:700}}.bpk-graphic-promo__sponsor-logo{width:auto;max-width:9.25rem;height:auto;max-height:3.75rem}.bpk-graphic-promo__cta{margin-top:2rem}@media(max-width: 48rem){.bpk-graphic-promo__cta{display:none}}
+.bpk-card{position:relative;display:block;background-color:#fff;color:#161616;text-decoration:none;cursor:pointer;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3);border-radius:.75rem}.bpk-no-touch-support .bpk-card:hover:not(:active):not(:disabled)::after{opacity:1}:global(.bpk-no-touch-support) .bpk-card:hover:not(:active):not(:disabled)::after{opacity:1}.bpk-card::after{position:absolute;top:0;right:0;bottom:0;left:0;content:"";transition:opacity 200ms ease-in-out;opacity:0;pointer-events:none;box-shadow:0px 4px 14px 0px rgba(37,32,31,.25);border-radius:.75rem}@media screen\0 {.bpk-card::after{z-index:-1}}.bpk-card:active::after{box-shadow:none}.bpk-graphic-promo{max-width:76.5rem;margin-right:auto;margin-left:auto;background-color:#05203c;background-position:center;background-size:cover;color:#fff;box-shadow:none}@media(max-width: 48rem){.bpk-graphic-promo{padding-top:133%;box-sizing:border-box}}.bpk-graphic-promo::after{display:none}.bpk-graphic-promo__container{display:flex;flex-direction:column;justify-content:center}.bpk-graphic-promo__container--start{align-items:start}.bpk-graphic-promo__container--center{align-items:center}.bpk-graphic-promo__container--end{align-items:end}@media(min-width: 64.0625rem){.bpk-graphic-promo__container{height:28.75rem;margin-left:4rem;margin-right:2.5rem}html[dir=rtl] .bpk-graphic-promo__container{margin-right:4rem}html[dir=rtl] .bpk-graphic-promo__container{margin-left:2.5rem}.bpk-graphic-promo__container--center>*{margin-left:0;margin-right:1.5rem}html[dir=rtl] .bpk-graphic-promo__container--center>*{margin-left:1.5rem;margin-right:0}}@media(max-width: 64rem){.bpk-graphic-promo__container{height:22.5rem;margin-left:2.5rem;margin-right:2rem}html[dir=rtl] .bpk-graphic-promo__container{margin-right:2.5rem}html[dir=rtl] .bpk-graphic-promo__container{margin-left:2rem}.bpk-graphic-promo__container--center>*{margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-graphic-promo__container--center>*{margin-left:.5rem;margin-right:0}}@media(max-width: 48rem){.bpk-graphic-promo__container{padding:2rem;justify-content:space-between;align-items:start;text-align:start;margin-left:0;margin-right:0;position:absolute;top:0;right:0;left:0;height:100%}html[dir=rtl] .bpk-graphic-promo__container{margin-left:0;margin-right:0}.bpk-graphic-promo__container--inverted{flex-direction:column-reverse}.bpk-graphic-promo__container>*{margin-left:0;margin-right:0}html[dir=rtl] .bpk-graphic-promo__container>*{margin-left:0;margin-right:0}}@media(max-width: 22.4375rem){.bpk-graphic-promo__container{padding:1.5rem}}.bpk-graphic-promo__tagline{margin-bottom:.5rem;font-size:1rem;line-height:1.25rem;font-weight:700}@media(max-width: 64rem){.bpk-graphic-promo__tagline{font-size:1rem;line-height:1.5rem;font-weight:700}}@media(max-width: 48rem){.bpk-graphic-promo__tagline{font-size:1.5rem;line-height:2rem;font-weight:400}}@media(max-width: 22.4375rem){.bpk-graphic-promo__tagline{font-size:1rem;line-height:1.5rem;font-weight:700}}.bpk-graphic-promo__headline{margin:0}@media(min-width: 64.0625rem){.bpk-graphic-promo__headline{font-size:3rem;line-height:3.5rem;font-weight:700;letter-spacing:-0.02em}.bpk-graphic-promo__headline:not(:last-child){margin-bottom:.5rem}}@media(max-width: 64rem){.bpk-graphic-promo__headline{font-size:2.5rem;line-height:3rem;font-weight:700}.bpk-graphic-promo__headline:not(:last-child){margin-bottom:.5rem}}@media(max-width: 48rem){.bpk-graphic-promo__headline{margin-bottom:.5rem}}@media(max-width: 32rem){.bpk-graphic-promo__headline{font-size:2rem;line-height:2.5rem;font-weight:700}}.bpk-graphic-promo__subheading{margin:0;font-size:1rem;line-height:1.5rem;font-weight:400}@media(max-width: 64rem){.bpk-graphic-promo__subheading{font-size:1rem;line-height:1.25rem;font-weight:700}}@media(max-width: 48rem){.bpk-graphic-promo__subheading{font-size:1.5rem;line-height:1.75rem;font-weight:700}}@media(max-width: 32rem){.bpk-graphic-promo__subheading{font-size:1rem;line-height:1.25rem;font-weight:700}}.bpk-graphic-promo__promo-content,.bpk-graphic-promo__sponsor-content{display:flex;flex-direction:column}.bpk-graphic-promo__promo-content--start,.bpk-graphic-promo__sponsor-content--start{align-items:start;text-align:start}.bpk-graphic-promo__promo-content--center,.bpk-graphic-promo__sponsor-content--center{align-items:center;text-align:center}.bpk-graphic-promo__promo-content--end,.bpk-graphic-promo__sponsor-content--end{align-items:start;text-align:start}@media(min-width: 64.0625rem){.bpk-graphic-promo__promo-content,.bpk-graphic-promo__sponsor-content{width:22.5rem}}@media(max-width: 64rem){.bpk-graphic-promo__promo-content,.bpk-graphic-promo__sponsor-content{width:20rem}}@media(max-width: 48rem){.bpk-graphic-promo__promo-content,.bpk-graphic-promo__sponsor-content{width:initial;align-items:start;text-align:start}}.bpk-graphic-promo__sponsor-content{display:flex;margin-bottom:1rem;flex-direction:column}@media(max-width: 48rem){.bpk-graphic-promo__sponsor-content{margin-bottom:initial}}.bpk-graphic-promo__sponsor-label{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:700}@media(max-width: 48rem){.bpk-graphic-promo__sponsor-label{margin-bottom:.5rem;font-size:1.5rem;line-height:1.75rem;font-weight:700}}@media(max-width: 22.4375rem){.bpk-graphic-promo__sponsor-label{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:700}}.bpk-graphic-promo__sponsor-logo{width:auto;max-width:9.25rem;height:auto;max-height:3.75rem}.bpk-graphic-promo__cta{margin-top:2rem}@media(max-width: 48rem){.bpk-graphic-promo__cta{display:none}}

package/bpk-component-grid-toggle/src/BpkGridToggle.js

@@ -18,10 +18,10 @@
 
 import PropTypes from 'prop-types';
 import { Component } from 'react';
-import { cssModules } from "../../bpk-react-utils";
 import { BpkButtonLink } from "../../bpk-component-link";
+import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkGridToggle.module.css";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const GRID_CLASS_NAME = getClassName('bpk-vertical-grid--on');
 class BpkGridToggle extends Component {
@@ -58,11 +58,13 @@ class BpkGridToggle extends Component {
       gridEnabled
     } = this.state;
     const onOrOff = gridEnabled ? 'off' : 'on';
-    return /*#__PURE__*/_jsxs(BpkButtonLink, {
-      title: "Keyboard Shortcut: ctrl + cmd + g",
-      onClick: this.toggleGrid,
+    return /*#__PURE__*/_jsx("span", {
       className: className,
-      children: ["Baseline grid ", onOrOff]
+      children: /*#__PURE__*/_jsxs(BpkButtonLink, {
+        title: "Keyboard Shortcut: ctrl + cmd + g",
+        onClick: this.toggleGrid,
+        children: ["Baseline grid ", onOrOff]
+      })
     });
   }
 }