@skyscanner/backpack-web 33.3.1 → 34.0.0-premajor

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

@@ -22,9 +22,9 @@ been hard coded to have disabled={false}, selected and a trailing
 accessory view of a close icon.
 */
 
-import { cssModules } from "../../bpk-react-utils";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import CloseCircleIconSm from "../../bpk-component-icon/sm/close-circle";
+import { cssModules } from "../../bpk-react-utils";
 import BpkSelectableChip from "./BpkSelectableChip";
 import { CHIP_TYPES } from "./commonTypes";
 import STYLES from "./BpkSelectableChip.module.css";
@@ -42,12 +42,17 @@ const BpkDismissibleChip = ({
     ...rest,
     leadingAccessoryView: leadingAccessoryView,
     disabled: false,
-    trailingAccessoryView: /*#__PURE__*/_jsx(CloseCircleIconSm, {
+    trailingAccessoryView: /*#__PURE__*/_jsx(CloseCircleIconSm
+    // TODO: className to be removed
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    , {
       className: iconClassNames
     }),
     selected: true,
     type: type,
     role: "button" // Override role="checkbox" because this chip is not selectable.
+    // TODO: className to be removed
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
     ,
     className: classNames
   });

package/bpk-component-chip/src/BpkIconChip.d.ts

@@ -0,0 +1,25 @@
+/*
+ * 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 type { ReactNode } from 'react';
+import type { CommonProps as Props } from './commonTypes';
+export type BpkIconChipProps = {
+    leadingAccessoryView: ReactNode;
+} & Omit<Props, 'trailingAccessoryView' | 'leadingAccessoryView' | 'children'>;
+declare const BpkIconChip: ({ className, ...rest }: BpkIconChipProps) => JSX.Element;
+export default BpkIconChip;

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

@@ -0,0 +1,31 @@
+/*
+ * 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.
+ */
+
+/*
+The icon chip component is just a selectable chip that's
+been hard coded to have no text or trailing icon and padding/margin
+to match.
+*/
+
+import BpkSelectableChip from "./BpkSelectableChip";
+import { jsx as _jsx } from "react/jsx-runtime";
+const BpkIconChip = props => /*#__PURE__*/_jsx(BpkSelectableChip, {
+  ...props,
+  children: null
+});
+export default BpkIconChip;

package/bpk-component-chip/src/BpkSelectableChip.d.ts

@@ -17,9 +17,7 @@
  */
 
 import type { ReactNode } from 'react';
-
 import type { CommonProps } from './commonTypes';
-
 export interface Props extends CommonProps {
   role?: string;
   trailingAccessoryView?: ReactNode;

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

@@ -16,12 +16,11 @@
  * limitations under the License.
  */
 
-import { cssModules } from "../../bpk-react-utils";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
-import STYLES from "./BpkSelectableChip.module.css";
+import { cssModules } from "../../bpk-react-utils";
 import { CHIP_TYPES } from "./commonTypes";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import STYLES from "./BpkSelectableChip.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkSelectableChip = ({
   accessibilityLabel,
@@ -35,7 +34,7 @@ const BpkSelectableChip = ({
   type = CHIP_TYPES.default,
   ...rest
 }) => {
-  const classNames = getClassName('bpk-chip', `bpk-chip--${type}`, disabled && 'bpk-chip--disabled', disabled && `bpk-chip--${type}-disabled`, !disabled && selected && `bpk-chip--${type}-selected`, className);
+  const classNames = getClassName('bpk-chip', `bpk-chip--${type}`, disabled && 'bpk-chip--disabled', disabled && `bpk-chip--${type}-disabled`, !children && 'bpk-chip--icon-only', !disabled && selected && `bpk-chip--${type}-selected`, className);
   return /*#__PURE__*/_jsxs("button", {
     "aria-checked": role === 'button' || role === 'tab' ? undefined : selected,
     className: classNames,
@@ -45,7 +44,7 @@ const BpkSelectableChip = ({
     type: "button",
     ...rest,
     children: [leadingAccessoryView && /*#__PURE__*/_jsx("span", {
-      className: getClassName('bpk-chip__leading-accessory-view'),
+      className: getClassName('bpk-chip__leading-accessory-view', !children && 'bpk-chip--icon-only__leading-accessory-view'),
       children: leadingAccessoryView
     }), /*#__PURE__*/_jsx(BpkText, {
       textStyle: TEXT_STYLES.footnote,

package/bpk-component-chip/src/BpkSelectableChip.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-chip{display:inline-flex;height:2rem;padding:0 1rem;align-items:center;border:none;border-radius:.5rem;cursor:pointer}.bpk-chip__leading-accessory-view{display:inline-flex;fill:currentcolor;margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-chip__leading-accessory-view{margin-left:.5rem;margin-right:0}.bpk-chip__trailing-accessory-view{display:inline-flex;fill:currentcolor;margin-left:.5rem;margin-right:-0.5rem}html[dir=rtl] .bpk-chip__trailing-accessory-view{margin-right:.5rem}html[dir=rtl] .bpk-chip__trailing-accessory-view{margin-left:-0.5rem}.bpk-chip--on-dark{background-color:rgba(0,0,0,0);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.5) inset}.bpk-no-touch-support .bpk-chip--on-dark:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #fff inset}:global(.bpk-no-touch-support) .bpk-chip--on-dark:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #fff inset}.bpk-chip--on-dark:active:not(:disabled){box-shadow:0 0 0 1px #fff inset}.bpk-chip--on-dark-selected{color:#161616;color:var(--bpk-chip-on-dark-selected-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-chip-on-dark-selected-background-color, rgb(255, 255, 255));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--on-dark-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}:global(.bpk-no-touch-support) .bpk-chip--on-dark-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--on-dark-selected:active:not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--on-dark-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--on-dark-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--on-dark-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--on-dark-dismissible__trailing-accessory-view{fill:#626971}.bpk-chip--on-dark-disabled{box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--default{background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #c1c7cf inset}.bpk-no-touch-support .bpk-chip--default:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #05203c inset}:global(.bpk-no-touch-support) .bpk-chip--default:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #05203c inset}.bpk-chip--default:active:not(:disabled){box-shadow:0 0 0 1px #05203c inset}.bpk-chip--default-selected{color:#fff;color:var(--bpk-chip-default-selected-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-chip-default-selected-background-color, rgb(5, 32, 60));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--default-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}:global(.bpk-no-touch-support) .bpk-chip--default-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--default-selected:active:not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--default-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--default-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--default-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--default-dismissible__trailing-accessory-view{fill:rgba(255,255,255,.5)}.bpk-chip--default-disabled{box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--on-image{background-color:#fff;color:#161616;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-no-touch-support .bpk-chip--on-image:hover:not(:active):not(:disabled){background-color:#eff3f8}:global(.bpk-no-touch-support) .bpk-chip--on-image:hover:not(:active):not(:disabled){background-color:#eff3f8}.bpk-chip--on-image:active:not(:disabled){background-color:#eff3f8}.bpk-chip--on-image-selected{color:#fff;color:var(--bpk-chip-on-image-selected-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-chip--on-image-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-hover-background-color, rgb(5, 32, 60))}:global(.bpk-no-touch-support) .bpk-chip--on-image-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-hover-background-color, rgb(5, 32, 60))}.bpk-chip--on-image-selected:active:not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-active-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-chip--on-image-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--on-image-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--on-image-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--on-image-dismissible__trailing-accessory-view{fill:rgba(255,255,255,.5)}.bpk-chip--on-image-disabled{box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-chip--disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}
+.bpk-chip{display:inline-flex;height:2rem;padding:0 1rem;align-items:center;border:none;border-radius:.5rem;cursor:pointer}.bpk-chip__leading-accessory-view{display:inline-flex;fill:currentcolor;margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-chip__leading-accessory-view{margin-left:.5rem;margin-right:0}.bpk-chip__trailing-accessory-view{display:inline-flex;fill:currentcolor;margin-left:.5rem;margin-right:-0.5rem}html[dir=rtl] .bpk-chip__trailing-accessory-view{margin-right:.5rem}html[dir=rtl] .bpk-chip__trailing-accessory-view{margin-left:-0.5rem}.bpk-chip--on-dark{background-color:rgba(0,0,0,0);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.5) inset}.bpk-no-touch-support .bpk-chip--on-dark:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #fff inset}:global(.bpk-no-touch-support) .bpk-chip--on-dark:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #fff inset}.bpk-chip--on-dark:active:not(:disabled){box-shadow:0 0 0 1px #fff inset}.bpk-chip--on-dark-selected{color:#161616;color:var(--bpk-chip-on-dark-selected-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-chip-on-dark-selected-background-color, rgb(255, 255, 255));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--on-dark-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}:global(.bpk-no-touch-support) .bpk-chip--on-dark-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--on-dark-selected:active:not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--on-dark-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--on-dark-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--on-dark-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--on-dark-dismissible__trailing-accessory-view{fill:#626971}.bpk-chip--on-dark-disabled{box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--default{background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #c1c7cf inset}.bpk-no-touch-support .bpk-chip--default:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #05203c inset}:global(.bpk-no-touch-support) .bpk-chip--default:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #05203c inset}.bpk-chip--default:active:not(:disabled){box-shadow:0 0 0 1px #05203c inset}.bpk-chip--default-selected{color:#fff;color:var(--bpk-chip-default-selected-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-chip-default-selected-background-color, rgb(5, 32, 60));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--default-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}:global(.bpk-no-touch-support) .bpk-chip--default-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--default-selected:active:not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--default-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--default-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--default-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--default-dismissible__trailing-accessory-view{fill:rgba(255,255,255,.5)}.bpk-chip--default-disabled{box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--on-image{background-color:#fff;color:#161616;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-no-touch-support .bpk-chip--on-image:hover:not(:active):not(:disabled){background-color:#eff3f8}:global(.bpk-no-touch-support) .bpk-chip--on-image:hover:not(:active):not(:disabled){background-color:#eff3f8}.bpk-chip--on-image:active:not(:disabled){background-color:#eff3f8}.bpk-chip--on-image-selected{color:#fff;color:var(--bpk-chip-on-image-selected-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-chip--on-image-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-hover-background-color, rgb(5, 32, 60))}:global(.bpk-no-touch-support) .bpk-chip--on-image-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-hover-background-color, rgb(5, 32, 60))}.bpk-chip--on-image-selected:active:not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-active-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-chip--on-image-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--on-image-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--on-image-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--on-image-dismissible__trailing-accessory-view{fill:rgba(255,255,255,.5)}.bpk-chip--on-image-disabled{box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-chip--disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-chip--icon-only{padding-inline-end:.5rem;padding-inline-start:.5rem}.bpk-chip--icon-only__leading-accessory-view{margin-left:0;margin-right:0}html[dir=rtl] .bpk-chip--icon-only__leading-accessory-view{margin-left:0;margin-right:0}

package/bpk-component-chip/src/commonTypes.d.ts

@@ -26,7 +26,7 @@ export declare const CHIP_TYPES: {
 };
 interface ButtonProps extends Omit<ComponentProps<'button'>, 'type'> {
   onClick: (event: SyntheticEvent<HTMLButtonElement>) => void | null;
-  children: ReactNode | string;
+  children?: ReactNode | string;
   type?: typeof CHIP_TYPES[keyof typeof CHIP_TYPES];
 }
 export interface CommonProps extends ButtonProps {

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

@@ -43,8 +43,9 @@ const BpkCloseButton = props => {
       "aria-label": label,
       className: classNames.join(' '),
       ...rest,
-      children: /*#__PURE__*/_jsx(Icon, {
-        className: getClassName('bpk-close-button__icon')
+      children: /*#__PURE__*/_jsx("span", {
+        className: getClassName('bpk-close-button__icon'),
+        children: /*#__PURE__*/_jsx(Icon, {})
       })
     })
   );

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.125rem;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);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}

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

@@ -21,8 +21,7 @@ import BpkText from "../../bpk-component-text";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkContentCard.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkContentCard = ({
   card,
@@ -41,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-content-cards/src/BpkContentCards.js

@@ -17,14 +17,10 @@
  */
 /* eslint react/no-array-index-key: 0 */
 
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
-import BpkText from "../../bpk-component-text";
-// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { cssModules } from "../../bpk-react-utils";
 import BpkContentCard from "./BpkContentCard";
 import STYLES from "./BpkContentCards.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkContentCards = ({
   cards,
@@ -34,8 +30,7 @@ const BpkContentCards = ({
     return null;
   }
   return /*#__PURE__*/_jsxs("div", {
-    children: [/*#__PURE__*/_jsx(BpkText, {
-      tagName: "h2",
+    children: [/*#__PURE__*/_jsx("h2", {
       className: getClassName('bpk-content-cards--header-text'),
       children: heading
     }), /*#__PURE__*/_jsx("div", {

package/bpk-component-content-cards/src/BpkContentCards.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-content-cards--header-text{margin-bottom:1rem;font-size:2rem;line-height:2.5rem;font-weight:700}@media(max-width: 32rem){.bpk-content-cards--header-text{font-size:1.5rem;line-height:1.75rem;font-weight:700}}.bpk-content-cards--layout{display:grid;grid-template-columns:repeat(auto-fit, minmax(3.125rem, 1fr));grid-auto-flow:column;gap:1.5rem}@media(max-width: 48rem){.bpk-content-cards--layout{grid-template-columns:1fr;grid-auto-flow:row;gap:1.5rem}}
+.bpk-content-cards--header-text{margin-top:0;margin-bottom:1rem;font-size:2rem;line-height:2.5rem;font-weight:700}@media(max-width: 32rem){.bpk-content-cards--header-text{font-size:1.5rem;line-height:1.75rem;font-weight:700}}.bpk-content-cards--layout{display:grid;grid-template-columns:repeat(auto-fit, minmax(3.125rem, 1fr));grid-auto-flow:column;gap:1.5rem}@media(max-width: 48rem){.bpk-content-cards--layout{grid-template-columns:1fr;grid-auto-flow:row;gap:1.5rem}}

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

@@ -17,15 +17,15 @@
  */
 
 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 STYLES from "./BpkDataTable.module.css";
-import { SORT_DIRECTION_TYPES } from "./common-types";
 import BpkDataTableHeader from "./BpkDataTableHeader";
+import { SORT_DIRECTION_TYPES } from "./common-types";
 import { createColumnsSchema } from "./utils";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import STYLES from "./BpkDataTable.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const KEYCODES = {
   ENTER: 13,

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

@@ -16,16 +16,15 @@
  * 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 STYLES from "./BpkDataTableHeader.module.css";
+import { cssModules } from "../../bpk-react-utils";
 import { SORT_DIRECTION_TYPES } from "./common-types";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import STYLES from "./BpkDataTableHeader.module.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const DownIcon = withRtlSupport(BpkSmallArrowDownIcon);
 const UpIcon = withRtlSupport(BpkSmallArrowUpIcon);
 const getClassName = cssModules(STYLES);
@@ -111,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,17 +17,15 @@
  */
 
 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 } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+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));

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,14 +16,13 @@
  * 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";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkDialog = ({
   children,
@@ -56,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,13 +16,12 @@
  * 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 } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkDialogInner = props => {
   const {
@@ -49,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,12 +17,11 @@
  */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 } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkDrawerContent = props => {
   const {
@@ -89,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,12 +16,11 @@
  * 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 } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkFieldset = props => {
   const {
@@ -83,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

@@ -20,8 +20,7 @@ import PropTypes from 'prop-types';
 import { cssModules } from "../../bpk-react-utils";
 import BpkFlareBar from "./BpkFlareBar";
 import STYLES from "./bpk-content-bubble.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
 const BpkContentBubble = props => {
   const {
@@ -59,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
       })]