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

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,36 @@
+import type { BpkVesselProps } from './types';
+/**
+ * A "migration hatch" layout primitive designed to ease component migration.
+ *
+ * BpkVessel renders an HTML element (default: div) and only accepts
+ * className and style props for legacy styling during migration.
+ *
+ * **When to use:**
+ * - During component migration when you need to maintain existing className/style usage
+ * - As a temporary solution while refactoring components
+ *
+ * **Important:**
+ * - This is a temporary migration tool, not a permanent solution
+ * - Only accepts: `as`, `className`, `style`, and `children` props
+ *
+ * @example
+ * ```tsx
+ * <BpkVessel
+ *   className="legacy-class"
+ *   style={{ padding: '16px', transition: 'opacity 0.3s' }}
+ * >
+ *   Content
+ * </BpkVessel>
+ *
+ * <BpkVessel
+ *   as="section"
+ *   className="legacy-section"
+ * >
+ *   Section Content
+ * </BpkVessel>
+ * ```
+ *
+ * @returns {JSX.Element} An HTML element with className and style applied.
+ */
+export declare const BpkVessel: ({ as: Element, children, className, style, }: BpkVesselProps) => import("react/jsx-runtime").JSX.Element;
+export type { BpkVesselProps };

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

@@ -0,0 +1,66 @@
+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 only accepts
+ * className and style props for legacy styling during migration.
+ *
+ * **When to use:**
+ * - During component migration when you need to maintain existing className/style usage
+ * - As a temporary solution while refactoring components
+ *
+ * **Important:**
+ * - This is a temporary migration tool, not a permanent solution
+ * - Only accepts: `as`, `className`, `style`, and `children` props
+ *
+ * @example
+ * ```tsx
+ * <BpkVessel
+ *   className="legacy-class"
+ *   style={{ padding: '16px', transition: 'opacity 0.3s' }}
+ * >
+ *   Content
+ * </BpkVessel>
+ *
+ * <BpkVessel
+ *   as="section"
+ *   className="legacy-section"
+ * >
+ *   Section Content
+ * </BpkVessel>
+ * ```
+ *
+ * @returns {JSX.Element} An HTML element with className and style applied.
+ */
+export const BpkVessel = ({
+  as: Element = 'div',
+  children,
+  className,
+  style
+}) =>
+/*#__PURE__*/
+// Allowed, Element is always a DOM element.
+// eslint-disable-next-line @skyscanner/rules/forbid-component-props
+_jsx(Element, {
+  className: className,
+  style: style,
+  children: children
+});

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 import type StackOptionKeys from './BpkStack.constant';
 import type { BpkCommonLayoutProps } from './commonProps';
 import type { BpkSpacingValue, BpkResponsiveValue, BpkBasisValue } from './tokens';
@@ -103,6 +103,39 @@ 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 only accepts className and style props.
+ *
+ * @example
+ * ```tsx
+ * <BpkVessel
+ *   className="legacy-wrapper"
+ *   style={{ padding: '16px', transition: 'opacity 0.3s' }}
+ * >
+ *   Content
+ * </BpkVessel>
+ *
+ * <BpkVessel
+ *   as="section"
+ *   className="legacy-section"
+ * >
+ *   Section Content
+ * </BpkVessel>
+ * ```
+ */
+export type BpkVesselProps = {
+    as?: VesselElement;
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+};
 /**
  * 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-v2",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",