@skyscanner/backpack-web 41.2.0 → 41.4.0

package/bpk-component-autosuggest/index.js

@@ -16,6 +16,6 @@
  * limitations under the License.
  */import BpkAutosuggest from "./src/BpkAutosuggest";
 import BpkAutosuggestSuggestion from "./src/BpkAutosuggestSuggestion";
-import BpkAutosuggestV2 from "./src/BpkAutosuggestV2/BpkAutosuggest";
+import BpkAutosuggestV2, { defaultTheme } from "./src/BpkAutosuggestV2/BpkAutosuggest";
 export default BpkAutosuggest;
-export { BpkAutosuggestSuggestion, BpkAutosuggestV2 };
+export { BpkAutosuggestSuggestion, BpkAutosuggestV2, defaultTheme };

package/bpk-component-autosuggest/src/BpkAutosuggestV2/BpkAutosuggest.d.ts

@@ -64,5 +64,18 @@ export type BpkAutoSuggestProps<T> = {
     }) => void;
     focusInputOnSuggestionClick?: boolean;
 };
+export declare const defaultTheme: {
+    container: string;
+    containerOpen: string;
+    suggestionsContainer: string;
+    suggestionsContainerOpen: string;
+    suggestionsList: string;
+    suggestion: string;
+    suggestionHighlighted: string;
+    sectionContainer: string;
+    sectionTitle: string;
+    input: string;
+    visuallyHidden: string;
+};
 declare const BpkAutosuggest: import("react").ForwardRefExoticComponent<BpkAutoSuggestProps<any> & import("react").RefAttributes<HTMLInputElement>>;
 export default BpkAutosuggest;

package/bpk-component-autosuggest/src/BpkAutosuggestV2/BpkAutosuggest.js

@@ -17,7 +17,7 @@
  */
 
 import { useEffect, forwardRef, useRef } from 'react';
-import { useFloating, offset, flip, shift, size, arrow as floatingArrow, FloatingArrow, autoUpdate, FloatingPortal } from '@floating-ui/react';
+import { useFloating, offset, shift, size, arrow as floatingArrow, FloatingArrow, autoUpdate, FloatingPortal } from '@floating-ui/react';
 import { useCombobox } from 'downshift';
 import { surfaceHighlightDay } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 import BpkInput from "../../../bpk-component-input";
@@ -25,7 +25,7 @@ import { cssModules } from "../../../bpk-react-utils";
 import STYLES from "./BpkAutosuggest.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const defaultTheme = {
+export const defaultTheme = {
   container: getClassName('bpk-autosuggest__container'),
   containerOpen: getClassName('bpk-autosuggest__container--open'),
   suggestionsContainer: getClassName('bpk-autosuggest__suggestions-container'),
@@ -235,7 +235,7 @@ const BpkAutosuggest = /*#__PURE__*/forwardRef(({
     ...(isDesktop && {
       strategy: 'fixed'
     }),
-    middleware: isDesktop ? [offset(4), flip(), shift(), size({
+    middleware: isDesktop ? [offset(4), shift(), size({
       apply({
         elements,
         rects

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

@@ -20,7 +20,7 @@ import { useCallback, useState } from 'react';
 import BpkBreakpoint, { BREAKPOINTS } from "../../bpk-component-breakpoint";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkCloseButton from "../../bpk-component-close-button";
-import { BpkButtonLink } from "../../bpk-component-link";
+import BpkLink from "../../bpk-component-link";
 import BpkNavigationBar from "../../bpk-component-navigation-bar";
 import { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
 import { BpkDialogWrapper, cssModules } from "../../bpk-react-utils";
@@ -126,7 +126,8 @@ const BpkBottomSheet = ({
             label: closeLabel,
             onClick: handleClose
           }),
-          trailingButton: actionText && onAction ? /*#__PURE__*/_jsx(BpkButtonLink, {
+          trailingButton: actionText && onAction ? /*#__PURE__*/_jsx(BpkLink, {
+            as: "button",
             onClick: onAction,
             children: actionText
           }) : null

package/bpk-component-card-list/src/BpkCardList.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 import BpkBreakpoint, { BREAKPOINTS } from "../../bpk-component-breakpoint";
-import { BpkButtonV2 } from "../../bpk-component-button";
+import BpkButton from "../../bpk-component-button";
 import BpkSectionHeader from "../../bpk-component-section-header";
 import { cssModules } from "../../bpk-react-utils";
 import BpkCardListGridStack from "./BpkCardListGridStack";
@@ -53,7 +53,7 @@ const BpkCardList = props => {
     }
     return accessoryDesktop !== ACCESSORY_DESKTOP_TYPES.button;
   };
-  const headerButton = buttonContent && /*#__PURE__*/_jsx(BpkButtonV2, {
+  const headerButton = buttonContent && /*#__PURE__*/_jsx(BpkButton, {
     onClick: onButtonClick,
     href: buttonHref,
     "data-testid": "bpk-card-list-header-button",

package/bpk-component-card-list/src/BpkCardListGridStack/BpkCardListGridStack.js

@@ -17,7 +17,7 @@
  */
 
 import { Children, useState } from 'react';
-import { BpkButtonV2 } from "../../../bpk-component-button";
+import BpkButton from "../../../bpk-component-button";
 import { cssModules } from "../../../bpk-react-utils";
 import ExpandAccessoryContent from "../BpkExpand/ExpandAccessoryContent";
 import { ACCESSORY_DESKTOP_TYPES } from "../common-types";
@@ -58,7 +58,7 @@ const BpkCardListGridStack = props => {
   });
   const buttonAccessoryContent = /*#__PURE__*/_jsx("div", {
     className: getClassName('bpk-card-list-grid-stack__accessory__button'),
-    children: /*#__PURE__*/_jsx(BpkButtonV2, {
+    children: /*#__PURE__*/_jsx(BpkButton, {
       "data-testid": "bpk-card-list__accessory-button",
       onClick: onButtonClick,
       href: buttonHref,

package/bpk-component-card-list/src/BpkCardListRowRail/BpkCardListCarousel.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{display:flex;overflow-x:hidden;box-sizing:border-box;gap:.25rem;margin-block:-1.5rem;padding-block:1.5rem;scroll-snap-stop:always;scroll-snap-type:x mandatory;scrollbar-width:none}@media(max-width: 32rem){.bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{overflow-x:scroll}}.bpk-card-list-row-rail__row::-webkit-scrollbar,.bpk-card-list-row-rail__rail::-webkit-scrollbar{display:none}.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{position:relative;padding:0 .5rem;flex:0 0 calc((100% - .5rem*(var(--initially-shown-cards, 3) - 1))/var(--initially-shown-cards, 3));overflow:visible;box-sizing:border-box;scroll-snap-align:start}@media(max-width: 32rem){.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{flex:0 0 calc((100% - .5rem*(var(--initially-shown-cards, 3) - 1))/max(1,var(--initially-shown-cards, 3) - .8))}.bpk-card-list-row-rail__row__card:first-child,.bpk-card-list-row-rail__rail__card:first-child{padding-left:.25rem}html[dir=rtl] .bpk-card-list-row-rail__row__card:first-child,html[dir=rtl] .bpk-card-list-row-rail__rail__card:first-child{padding-right:.25rem;padding-left:.5rem}}.bpk-card-list-row-rail__rail{-webkit-overflow-scrolling:touch}
+.bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{display:flex;overflow-x:hidden;box-sizing:border-box;gap:.25rem;margin-inline:-0.5rem;scroll-snap-stop:always;scroll-snap-type:x mandatory;scrollbar-width:none}@media(max-width: 32rem){.bpk-card-list-row-rail__row,.bpk-card-list-row-rail__rail{overflow-x:scroll}}.bpk-card-list-row-rail__row::-webkit-scrollbar,.bpk-card-list-row-rail__rail::-webkit-scrollbar{display:none}.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{position:relative;padding:0 .5rem;flex:0 0 calc((100% - .5rem*(var(--initially-shown-cards, 3) - 1))/var(--initially-shown-cards, 3));overflow:visible;box-sizing:border-box;scroll-snap-align:start}@media(max-width: 32rem){.bpk-card-list-row-rail__row__card,.bpk-card-list-row-rail__rail__card{flex-basis:calc((100% - .5rem*(var(--initially-shown-cards, 3) - 1))/max(1,var(--initially-shown-cards, 3) - .8))}}.bpk-card-list-row-rail__row__card{flex-basis:calc((100% - .25rem*(var(--initially-shown-cards, 3) - 1))/var(--initially-shown-cards, 3))}.bpk-card-list-row-rail__rail{-webkit-overflow-scrolling:touch}

package/bpk-component-card-list/src/BpkExpand/ExpandAccessoryContent.js

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { BUTTON_TYPES, BpkButtonV2 } from "../../../bpk-component-button";
+import BpkButton, { BUTTON_TYPES } from "../../../bpk-component-button";
 import { withButtonAlignment, withRtlSupport } from "../../../bpk-component-icon";
 import ChevronDown from "../../../bpk-component-icon/sm/chevron-down";
 import ChevronUp from "../../../bpk-component-icon/sm/chevron-up";
@@ -27,7 +27,7 @@ const ExpandAccessoryContent = ({
   children,
   collapsed,
   onExpandToggle
-}) => /*#__PURE__*/_jsxs(BpkButtonV2, {
+}) => /*#__PURE__*/_jsxs(BpkButton, {
   "data-testid": "bpk-card-list__accessory-expand-button",
   type: BUTTON_TYPES.link,
   onClick: onExpandToggle,

package/bpk-component-chip-group/src/Nudger.js

@@ -17,7 +17,7 @@
  */
 
 import { useEffect, useState } from 'react';
-import { BpkButtonV2, BUTTON_TYPES } from "../../bpk-component-button";
+import BpkButton, { BUTTON_TYPES } from "../../bpk-component-button";
 import { CHIP_TYPES } from "../../bpk-component-chip";
 import { withButtonAlignment } from "../../bpk-component-icon/index";
 import ArrowLeft from "../../bpk-component-icon/sm/long-arrow-left";
@@ -76,7 +76,7 @@ const Nudger = ({
   const classNames = getClassName('bpk-chip-group-nudger', `bpk-chip-group-nudger--${leading ? "leading" : "trailing"}`);
   return show ? /*#__PURE__*/_jsx("div", {
     className: classNames,
-    children: /*#__PURE__*/_jsx(BpkButtonV2, {
+    children: /*#__PURE__*/_jsx(BpkButton, {
       title: ariaLabel,
       type: CHIP_STYLE_TO_BUTTON_STYLE[chipStyle],
       iconOnly: true,

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

@@ -0,0 +1,6 @@
+import BpkCode from './src/BpkCode';
+import BpkCodeBlock from './src/BpkCodeBlock';
+import type { Props as BpkCodeProps } from './src/BpkCode';
+import type { Props as BpkCodeBlockProps } from './src/BpkCodeBlock';
+export type { BpkCodeProps, BpkCodeBlockProps };
+export { BpkCode, BpkCodeBlock };

package/bpk-component-code/index.js

@@ -14,6 +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 BpkCode from "./src/BpkCode";
+ */
+
+import BpkCode from "./src/BpkCode";
 import BpkCodeBlock from "./src/BpkCodeBlock";
 export { BpkCode, BpkCodeBlock };

package/bpk-component-code/src/BpkCode.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export type Props = {
+    children: ReactNode;
+    alternate?: boolean;
+    className?: string;
+    [rest: string]: any;
+};
+declare const BpkCode: ({ alternate, children, className, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkCode;

package/bpk-component-code/src/BpkCode.js

@@ -14,42 +14,23 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import PropTypes from 'prop-types';
+ */
+
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkCode.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkCode = props => {
-  const {
-    alternate,
-    children,
-    className,
-    ...rest
-  } = props;
-  const classNames = [getClassName('bpk-code')];
-  if (alternate) {
-    classNames.push(getClassName('bpk-code--alternate'));
-  }
-  if (className) {
-    classNames.push(className);
-  }
-  return (
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsx("code", {
-      className: classNames.join(' '),
-      ...rest,
-      children: children
-    })
-  );
-};
-BpkCode.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  alternate: PropTypes.bool
-};
-BpkCode.defaultProps = {
-  className: null,
-  alternate: false
+const BpkCode = ({
+  alternate = false,
+  children,
+  className,
+  ...rest
+}) => {
+  const classNames = getClassName('bpk-code', alternate && 'bpk-code--alternate', className);
+  return /*#__PURE__*/_jsx("code", {
+    className: classNames,
+    ...rest,
+    children: children
+  });
 };
 export default BpkCode;

package/bpk-component-code/src/BpkCodeBlock.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from 'react';
+export type Props = {
+    children: ReactNode;
+    alternate?: boolean;
+    className?: string;
+    [rest: string]: any;
+};
+declare const BpkCodeBlock: ({ alternate, children, className, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BpkCodeBlock;

package/bpk-component-code/src/BpkCodeBlock.js

@@ -14,40 +14,27 @@
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */import PropTypes from 'prop-types';
+ */
+
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkCodeBlock.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkCodeBlock = props => {
-  const {
-    alternate,
-    children,
-    className,
-    ...rest
-  } = props;
+const BpkCodeBlock = ({
+  alternate = false,
+  children,
+  className,
+  ...rest
+}) => {
   const preClassNames = getClassName('bpk-code__pre', alternate && 'bpk-code__pre--alternate', className);
   const codeClassNames = getClassName('bpk-code', 'bpk-code--block');
-  return (
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsx("pre", {
-      className: preClassNames,
-      ...rest,
-      children: /*#__PURE__*/_jsx("code", {
-        className: codeClassNames,
-        children: children
-      })
+  return /*#__PURE__*/_jsx("pre", {
+    className: preClassNames,
+    ...rest,
+    children: /*#__PURE__*/_jsx("code", {
+      className: codeClassNames,
+      children: children
     })
-  );
-};
-BpkCodeBlock.propTypes = {
-  children: PropTypes.node.isRequired,
-  alternate: PropTypes.bool,
-  className: PropTypes.string
-};
-BpkCodeBlock.defaultProps = {
-  alternate: false,
-  className: null
+  });
 };
 export default BpkCodeBlock;

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

@@ -21,7 +21,7 @@ import { animations } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
 
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkCloseButton from "../../bpk-component-close-button";
-import { BpkButtonLink } from "../../bpk-component-link";
+import BpkLink 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";
@@ -93,7 +93,8 @@ const BpkDrawerContent = ({
           id: headingId,
           className: headerClassNames.join(' '),
           children: title
-        }), "\xA0", closeText ? /*#__PURE__*/_jsx(BpkButtonLink, {
+        }), "\xA0", closeText ? /*#__PURE__*/_jsx(BpkLink, {
+          as: "button",
           onClick: onClose,
           children: closeText
         }) : /*#__PURE__*/_jsx("div", {

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

@@ -19,7 +19,7 @@
 import { useEffect, useState } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import BpkAriaLive from "../../bpk-component-aria-live";
-import { BUTTON_TYPES, BpkButtonV2 } from "../../bpk-component-button";
+import BpkButton, { BUTTON_TYPES } from "../../bpk-component-button";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkFloatingNotification.module.css";
@@ -80,7 +80,7 @@ const BpkFloatingNotification = props => {
         children: text
       }), ctaText && /*#__PURE__*/_jsx("div", {
         className: getClassName('bpk-floating-notification__cta'),
-        children: /*#__PURE__*/_jsx(BpkButtonV2, {
+        children: /*#__PURE__*/_jsx(BpkButton, {
           type: BUTTON_TYPES.linkOnDark,
           implicit: true,
           onClick: onClick,

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

@@ -16,7 +16,7 @@
  * limitations under the License.
  */
 
-import { BpkButtonV2, BUTTON_TYPES } from "../../bpk-component-button";
+import BpkButton, { 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";
@@ -152,7 +152,7 @@ const BpkGraphicPromo = ({
           }), subheading && /*#__PURE__*/_jsx("p", {
             className: getClassName('bpk-graphic-promo__subheading'),
             children: subheading
-          }), /*#__PURE__*/_jsx(BpkButtonV2, {
+          }), /*#__PURE__*/_jsx(BpkButton, {
             type: BUTTON_TYPES.primaryOnDark
             // TODO: className to be removed
             // eslint-disable-next-line @skyscanner/rules/forbid-component-props

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

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

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

@@ -1,6 +1,15 @@
 import BpkButtonLink, { type Props as BpkButtonLinkProps } from './src/BpkButtonLink';
-import BpkLink, { type Props as BpkLinkProps } from './src/BpkLink';
+import BpkLink from './src/BpkLink';
 import themeAttributes, { linkAlternateThemeAttributes } from './src/themeAttributes';
-export type { BpkButtonLinkProps, BpkLinkProps };
+import type { BpkLinkProps } from './src/common-types';
+/**
+ * @deprecated Use BpkLinkProps for polymorphic usage
+ */
+export type { BpkButtonLinkProps };
+/**
+ * @deprecated Use `<BpkLink as="button" />` instead.
+ */
+export { BpkButtonLink };
+export type { BpkLinkProps };
 export default BpkLink;
-export { BpkButtonLink, themeAttributes, linkAlternateThemeAttributes };
+export { themeAttributes, linkAlternateThemeAttributes };

package/bpk-component-link/index.js

@@ -19,5 +19,14 @@
 import BpkButtonLink from "./src/BpkButtonLink";
 import BpkLink from "./src/BpkLink";
 import themeAttributes, { linkAlternateThemeAttributes } from "./src/themeAttributes";
+
+/**
+ * @deprecated Use BpkLinkProps for polymorphic usage
+ */
+
+/**
+ * @deprecated Use `<BpkLink as="button" />` instead.
+ */
+export { BpkButtonLink };
 export default BpkLink;
-export { BpkButtonLink, themeAttributes, linkAlternateThemeAttributes };
+export { themeAttributes, linkAlternateThemeAttributes };

package/bpk-component-link/src/BpkButtonLink.d.ts

@@ -1,5 +1,8 @@
 import type { ReactNode, MouseEvent, ButtonHTMLAttributes } from 'react';
 import themeAttributes from './themeAttributes';
+/**
+ * @deprecated Use `BpkLinkProps<'button'>` instead.
+ */
 export interface Props extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'className' | 'onClick'> {
     /** The content of the link. */
     children: ReactNode;
@@ -8,6 +11,11 @@ export interface Props extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'cl
     alternate?: boolean;
     implicit?: boolean;
 }
+/**
+ * @deprecated Use `<BpkLink as="button" />` instead.
+ * BpkButtonLink is maintained for backwards compatibility but will be removed in a future major version.
+ * @returns {JSX.Element} A button styled as a link.
+ */
 declare const BpkButtonLink: ({ alternate, children, className, implicit, onClick, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export { themeAttributes };
 export default BpkButtonLink;

package/bpk-component-link/src/BpkButtonLink.js

@@ -21,6 +21,16 @@ import themeAttributes from "./themeAttributes";
 import STYLES from "./BpkLink.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
+
+/**
+ * @deprecated Use `BpkLinkProps<'button'>` instead.
+ */
+
+/**
+ * @deprecated Use `<BpkLink as="button" />` instead.
+ * BpkButtonLink is maintained for backwards compatibility but will be removed in a future major version.
+ * @returns {JSX.Element} A button styled as a link.
+ */
 const BpkButtonLink = ({
   alternate = false,
   children,

package/bpk-component-link/src/BpkLink.d.ts

@@ -1,16 +1,3 @@
-import type { ReactNode, MouseEvent, AnchorHTMLAttributes } from 'react';
-import themeAttributes, { linkAlternateThemeAttributes } from './themeAttributes';
-export interface Props extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'className' | 'rel'> {
-    /** The content of the link. */
-    children: ReactNode;
-    href: string | null;
-    className?: string | null;
-    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
-    blank?: boolean;
-    rel?: string | null;
-    alternate?: boolean;
-    implicit?: boolean;
-}
-declare const BpkLink: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLAnchorElement>>;
+import type { PolymorphicComponent } from './common-types';
+declare const BpkLink: PolymorphicComponent;
 export default BpkLink;
-export { themeAttributes, linkAlternateThemeAttributes };

package/bpk-component-link/src/BpkLink.js

@@ -18,54 +18,99 @@
 
 import { forwardRef } from 'react';
 import { cssModules } from "../../bpk-react-utils";
-import themeAttributes, { linkAlternateThemeAttributes } from "./themeAttributes";
 import STYLES from "./BpkLink.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
-const BpkLink = /*#__PURE__*/forwardRef(({
+
+/**
+ * Processes anchor-specific props and returns the transformed props.
+ * Handles href, blank (target="_blank"), and rel attributes.
+ * @param {Object} props - The props to process.
+ * @returns {Object} The transformed anchor props.
+ */
+const processAnchorProps = props => {
+  const {
+    blank,
+    href,
+    rel,
+    ...otherProps
+  } = props;
+  return {
+    ...otherProps,
+    href: href ?? undefined,
+    ...(blank ? {
+      target: '_blank',
+      rel: rel || 'noopener noreferrer'
+    } : {}),
+    ...(!blank && rel ? {
+      rel
+    } : {})
+  };
+};
+
+/**
+ * Processes button-specific props and returns the transformed props.
+ * Ensures button has type="button" by default to prevent form submission.
+ * @param {Object} props - The props to process.
+ * @returns {Object} The transformed button props.
+ */
+const processButtonProps = props => ({
+  type: 'button',
+  ...props // Allow override if explicitly provided
+});
+const getClassNames = (alternate, implicit, className) => {
+  const classNames = [getClassName('bpk-link'), className, implicit && getClassName('bpk-link--implicit'), alternate && getClassName('bpk-link--alternate')].filter(Boolean);
+
+  // Lookup table for underlined modifier based on implicit/alternate combination
+  const underlinedModifierMap = {
+    'true-true': 'bpk-link-underlined-implicit--alternate',
+    'true-false': 'bpk-link-underlined--implicit',
+    'false-true': 'bpk-link-underlined--alternate'
+  };
+  const underlinedModifier = underlinedModifierMap[`${implicit}-${alternate}`] || null;
+  const underlinedClassNames = [getClassName('bpk-link-underlined'), underlinedModifier && getClassName(underlinedModifier)].filter(Boolean);
+  return {
+    linkClassName: classNames.join(' '),
+    underlinedClassName: underlinedClassNames.join(' ')
+  };
+};
+const BpkLinkInner = ({
   alternate = false,
-  blank = false,
+  as: Element = 'a',
   children,
   className = null,
-  href,
   implicit = false,
-  onClick = () => {},
-  rel: propRel = null,
   ...rest
 }, ref) => {
-  const classNames = [getClassName('bpk-link')];
-  const underlinedClassNames = [getClassName('bpk-link-underlined')];
-  const target = blank ? '_blank' : undefined;
-  const rel = blank ? propRel || 'noopener noreferrer' : propRel;
-  if (className) {
-    classNames.push(className);
-  }
-  if (implicit) {
-    classNames.push(getClassName('bpk-link--implicit'));
-  }
-  if (alternate) {
-    classNames.push(getClassName('bpk-link--alternate'));
-  }
-  if (implicit && !alternate) {
-    underlinedClassNames.push(getClassName('bpk-link-underlined--implicit'));
-  } else if (alternate && !implicit) {
-    underlinedClassNames.push(getClassName('bpk-link-underlined--alternate'));
-  } else if (implicit && alternate) {
-    underlinedClassNames.push(getClassName('bpk-link-underlined-implicit--alternate'));
+  const {
+    linkClassName,
+    underlinedClassName
+  } = getClassNames(alternate, implicit, className);
+
+  // Process element-specific props based on the rendered element type
+  const baseProps = rest;
+  let elementProps = baseProps;
+  if (Element === 'a') {
+    elementProps = processAnchorProps(baseProps);
+  } else if (Element === 'button') {
+    elementProps = processButtonProps(baseProps);
   }
-  return /*#__PURE__*/_jsx("a", {
-    className: classNames.join(' '),
-    href: href ?? undefined,
-    onClick: onClick,
-    target: target,
-    rel: rel ?? undefined,
-    ref: ref,
-    ...rest,
-    children: /*#__PURE__*/_jsx("span", {
-      className: underlinedClassNames.join(' '),
-      children: children
+  return (
+    /*#__PURE__*/
+    // Allowed: className and ref are passed to the underlying DOM element
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    _jsx(Element, {
+      className: linkClassName,
+      ref: ref,
+      ...elementProps,
+      children: /*#__PURE__*/_jsx("span", {
+        className: underlinedClassName,
+        children: children
+      })
     })
-  });
-});
-export default BpkLink;
-export { themeAttributes, linkAlternateThemeAttributes };
+  );
+};
+
+// A polymorphic link component that can render as different HTML elements.
+const BpkLink = /*#__PURE__*/forwardRef(BpkLinkInner);
+export default BpkLink;