@skyscanner/backpack-web 41.7.0-beta-v1 → 41.7.0-beta-v3

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

@@ -1,10 +1,12 @@
 export { BpkProvider } from './src/BpkProvider';
 export { BpkBox } from './src/BpkBox';
+export { BpkVessel } from './src/BpkVessel';
 export { BpkFlex } from './src/BpkFlex';
 export { BpkGrid } from './src/BpkGrid';
 export { BpkGridItem } from './src/BpkGridItem';
 export type { BpkProviderProps } from './src/BpkProvider';
 export type { BpkBoxProps } from './src/BpkBox';
+export type { BpkVesselProps } from './src/BpkVessel';
 export type { BpkFlexProps } from './src/BpkFlex';
 export type { BpkGridProps } from './src/BpkGrid';
 export type { BpkGridItemProps } from './src/BpkGridItem';

package/bpk-component-layout/index.js

@@ -18,6 +18,7 @@
 
 export { BpkProvider } from "./src/BpkProvider";
 export { BpkBox } from "./src/BpkBox";
+export { BpkVessel } from "./src/BpkVessel";
 export { BpkFlex } from "./src/BpkFlex";
 export { BpkGrid } from "./src/BpkGrid";
 export { BpkGridItem } from "./src/BpkGridItem";

package/bpk-component-layout/src/BpkVessel.d.ts

@@ -0,0 +1,46 @@
+import type { BpkVesselProps } from './types';
+/**
+ * A "migration hatch" layout primitive designed to ease component migration.
+ *
+ * BpkVessel renders an HTML element (default: div) and accepts all standard
+ * HTML attributes for maximum migration flexibility.
+ *
+ * **When to use:**
+ * - During component migration when you need to maintain existing className/style usage
+ * - When you need to pass testing attributes (data-testid) or accessibility props
+ * - As a temporary solution while refactoring components
+ *
+ * **Important:**
+ * - This is a temporary migration tool, not a permanent solution
+ * - Accepts all React.HTMLAttributes (styling, events, aria, data-*, etc.)
+ * - Plan to migrate to BpkBox once legacy styling is removed
+ *
+ * @example
+ * ```tsx
+ * <BpkVessel
+ *   className="legacy-class"
+ *   style={{ padding: '16px', transition: 'opacity 0.3s' }}
+ *   data-testid="migration-wrapper"
+ *   onClick={handleClick}
+ * >
+ *   Content
+ * </BpkVessel>
+ *
+ * <BpkVessel
+ *   as="section"
+ *   className="legacy-section"
+ *   aria-label="Main content"
+ *   role="region"
+ *   dir="rtl"
+ * >
+ *   Section Content
+ * </BpkVessel>
+ * ```
+ *
+ * @todo Migration component - pending removal after component migration is complete.
+ *       Replace usages with BpkBox once legacy className/style dependencies are refactored.
+ *
+ * @returns {JSX.Element} An HTML element with all props applied.
+ */
+export declare const BpkVessel: ({ as: Element, children, ...restProps }: BpkVesselProps) => import("react/jsx-runtime").JSX.Element;
+export type { BpkVesselProps };

package/bpk-component-layout/src/BpkVessel.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * 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.
+ */
+
+/**
+ * A "migration hatch" layout primitive designed to ease component migration.
+ *
+ * BpkVessel renders an HTML element (default: div) and accepts all standard
+ * HTML attributes for maximum migration flexibility.
+ *
+ * **When to use:**
+ * - During component migration when you need to maintain existing className/style usage
+ * - When you need to pass testing attributes (data-testid) or accessibility props
+ * - As a temporary solution while refactoring components
+ *
+ * **Important:**
+ * - This is a temporary migration tool, not a permanent solution
+ * - Accepts all React.HTMLAttributes (styling, events, aria, data-*, etc.)
+ * - Plan to migrate to BpkBox once legacy styling is removed
+ *
+ * @example
+ * ```tsx
+ * <BpkVessel
+ *   className="legacy-class"
+ *   style={{ padding: '16px', transition: 'opacity 0.3s' }}
+ *   data-testid="migration-wrapper"
+ *   onClick={handleClick}
+ * >
+ *   Content
+ * </BpkVessel>
+ *
+ * <BpkVessel
+ *   as="section"
+ *   className="legacy-section"
+ *   aria-label="Main content"
+ *   role="region"
+ *   dir="rtl"
+ * >
+ *   Section Content
+ * </BpkVessel>
+ * ```
+ *
+ * @todo Migration component - pending removal after component migration is complete.
+ *       Replace usages with BpkBox once legacy className/style dependencies are refactored.
+ *
+ * @returns {JSX.Element} An HTML element with all props applied.
+ */
+export const BpkVessel = ({
+  as: Element = 'div',
+  children,
+  ...restProps
+}) => /*#__PURE__*/_jsx(Element, {
+  ...restProps,
+  children: children
+});

package/bpk-component-layout/src/types.d.ts

@@ -103,6 +103,48 @@ export interface BpkBoxProps extends BpkCommonLayoutProps, BpkBoxSpecificProps {
     onFocus?: BoxEventProps['onFocus'];
     onBlur?: BoxEventProps['onBlur'];
 }
+/**
+ * Valid HTML elements that can be used with BpkVessel
+ */
+export type VesselElement = 'div' | 'span' | 'section' | 'article' | 'nav' | 'main' | 'aside' | 'header' | 'footer';
+/**
+ * Props for BpkVessel component.
+ *
+ * BpkVessel is a "migration hatch" that renders an HTML element
+ * and accepts all standard HTML attributes for maximum migration flexibility.
+ *
+ * Accepts all React.HTMLAttributes including:
+ * - Styling: className, style
+ * - Testing: data-testid, data-cy, data-*
+ * - Accessibility: aria-*, role, tabIndex
+ * - Basic HTML: id, title, dir, lang, hidden, etc.
+ * - All standard DOM events: onClick, onChange, onFocus, etc.
+ *
+ * @example
+ * ```tsx
+ * <BpkVessel
+ *   className="legacy-wrapper"
+ *   style={{ padding: '16px', transition: 'opacity 0.3s' }}
+ *   data-testid="migration-wrapper"
+ *   onClick={handleClick}
+ * >
+ *   Content
+ * </BpkVessel>
+ *
+ * <BpkVessel
+ *   as="section"
+ *   className="legacy-section"
+ *   aria-label="Main content"
+ *   role="region"
+ *   dir="rtl"
+ * >
+ *   Section Content
+ * </BpkVessel>
+ * ```
+ */
+export type BpkVesselProps = {
+    as?: VesselElement;
+} & React.HTMLAttributes<HTMLElement>;
 /**
  * Component-specific props for BpkFlex
  * Includes all Flex props except those in BpkCommonLayoutProps

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "41.7.0-beta-v1",
+  "version": "41.7.0-beta-v3",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",