@skyscanner/backpack-web 41.18.0 → 41.19.0

package/bpk-component-segmented-control/src/BpkSegmentedControlV2/common-types.d.ts

@@ -0,0 +1,57 @@
+import type { ReactNode } from 'react';
+export declare const SEGMENT_TYPES_V2: {
+    readonly CanvasDefault: "canvas-default";
+    readonly CanvasContrast: "canvas-contrast";
+    readonly SurfaceDefault: "surface-default";
+    readonly SurfaceContrast: "surface-contrast";
+};
+export type SegmentTypesV2 = (typeof SEGMENT_TYPES_V2)[keyof typeof SEGMENT_TYPES_V2];
+export type BpkSegmentedControlV2RootProps = {
+    /**
+     * Slot content — one or more BpkSegmentedControlV2.Item elements.
+     */
+    children: ReactNode;
+    /**
+     * Controlled selected value. When provided, onChange must also be provided.
+     */
+    value?: string;
+    /**
+     * Initial selected value for uncontrolled usage.
+     */
+    defaultValue?: string;
+    /**
+     * Called when the selected segment changes. Receives the value of the newly selected item.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Pre-defined surface theme controlling default token values.
+     * @default 'canvas-default'
+     */
+    type?: SegmentTypesV2;
+    /**
+     * Applies a box shadow to the group container.
+     * @default false
+     */
+    shadow?: boolean;
+    /**
+     * Accessible label for the radiogroup. Always required to satisfy WCAG 4.1.2
+     * (the role="radiogroup" element must have an accessible name).
+     */
+    label: string;
+};
+export type BpkSegmentedControlV2ItemProps = {
+    /**
+     * Unique identifier for this segment within the group.
+     */
+    value: string;
+    /**
+     * Slot content — typically ItemText + ItemControl + ItemHiddenInput.
+     */
+    children: ReactNode;
+};
+export type BpkSegmentedControlV2ItemTextProps = {
+    /**
+     * Visible content of the segment — text, icons, or a combination.
+     */
+    children: ReactNode;
+};

package/bpk-component-segmented-control/src/BpkSegmentedControlV2/common-types.js

@@ -0,0 +1,24 @@
+/*
+ * 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.
+ */
+
+export const SEGMENT_TYPES_V2 = {
+  CanvasDefault: 'canvas-default',
+  CanvasContrast: 'canvas-contrast',
+  SurfaceDefault: 'surface-default',
+  SurfaceContrast: 'surface-contrast'
+};

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

@@ -0,0 +1,13 @@
+import BpkTable from './src/BpkTable';
+import BpkTableBody from './src/BpkTableBody';
+import BpkTableCell from './src/BpkTableCell';
+import BpkTableHead from './src/BpkTableHead';
+import BpkTableHeadCell from './src/BpkTableHeadCell';
+import BpkTableRow from './src/BpkTableRow';
+export type { BpkTableProps } from './src/BpkTable';
+export type { BpkTableHeadProps } from './src/BpkTableHead';
+export type { BpkTableBodyProps } from './src/BpkTableBody';
+export type { BpkTableRowProps } from './src/BpkTableRow';
+export type { BpkTableCellProps } from './src/BpkTableCell';
+export type { BpkTableHeadCellProps } from './src/BpkTableHeadCell';
+export { BpkTable, BpkTableHead, BpkTableBody, BpkTableRow, BpkTableCell, BpkTableHeadCell, };

package/bpk-component-table/index.js

@@ -14,7 +14,9 @@
  * 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 BpkTable from "./src/BpkTable";
+ */
+
+import BpkTable from "./src/BpkTable";
 import BpkTableBody from "./src/BpkTableBody";
 import BpkTableCell from "./src/BpkTableCell";
 import BpkTableHead from "./src/BpkTableHead";

package/bpk-component-table/src/BpkTable.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode, HTMLAttributes } from 'react';
+export interface BpkTableProps extends Omit<HTMLAttributes<HTMLTableElement>, 'className'> {
+    /** The content of the table */
+    children: ReactNode;
+    className?: string | null;
+}
+declare const BpkTable: ({ children, className, ...rest }: BpkTableProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkTable;

package/bpk-component-table/src/BpkTable.js

@@ -14,7 +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 PropTypes from 'prop-types';
+ */
+
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkTable.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -25,18 +26,10 @@ const BpkTable = ({
   ...rest
 }) => {
   const classNames = getClassName('bpk-table', className);
-  return (
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
-    _jsx("table", {
-      className: classNames,
-      ...rest,
-      children: children
-    })
-  );
-};
-BpkTable.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string
+  return /*#__PURE__*/_jsx("table", {
+    className: classNames,
+    ...rest,
+    children: children
+  });
 };
 export default BpkTable;

package/bpk-component-table/src/BpkTableBody.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode, HTMLAttributes } from 'react';
+export interface BpkTableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
+    /** The content of the table */
+    children: ReactNode;
+}
+declare const BpkTableBody: (props: BpkTableBodyProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkTableBody;

package/bpk-component-table/src/BpkTableBody.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -14,12 +15,9 @@
  * 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 { jsx as _jsx } from "react/jsx-runtime";
+ */
+
 const BpkTableBody = props => /*#__PURE__*/_jsx("tbody", {
   ...props
 });
-BpkTableBody.propTypes = {
-  children: PropTypes.node.isRequired
-};
 export default BpkTableBody;

package/bpk-component-table/src/BpkTableCell.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode, HTMLAttributes } from 'react';
+export interface BpkTableCellProps extends Omit<HTMLAttributes<HTMLTableCellElement>, 'className'> {
+    /** The content of the table */
+    children: ReactNode;
+    className?: string | null;
+    wordBreak?: boolean;
+}
+declare const BpkTableCell: ({ children, className, wordBreak, ...rest }: BpkTableCellProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkTableCell;

package/bpk-component-table/src/BpkTableCell.js

@@ -14,7 +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 PropTypes from 'prop-types';
+ */
+
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkTable.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -27,19 +28,10 @@ const BpkTableCell = ({
 }) => {
   const classes = ['bpk-table__cell', wordBreak && 'bpk-table__cell--wordBreak', className];
   const classNames = getClassName(...classes);
-  return (
-    /*#__PURE__*/
-    // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
-    _jsx("td", {
-      className: classNames,
-      ...rest,
-      children: children
-    })
-  );
-};
-BpkTableCell.propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.node.isRequired,
-  wordBreak: PropTypes.bool
+  return /*#__PURE__*/_jsx("td", {
+    className: classNames,
+    ...rest,
+    children: children
+  });
 };
 export default BpkTableCell;

package/bpk-component-table/src/BpkTableHead.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode, HTMLAttributes } from 'react';
+export interface BpkTableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {
+    /** The content of the table */
+    children: ReactNode;
+}
+declare const BpkTableHead: (props: BpkTableHeadProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkTableHead;

package/bpk-component-table/src/BpkTableHead.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -14,12 +15,9 @@
  * 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 { jsx as _jsx } from "react/jsx-runtime";
+ */
+
 const BpkTableHead = props => /*#__PURE__*/_jsx("thead", {
   ...props
 });
-BpkTableHead.propTypes = {
-  children: PropTypes.node.isRequired
-};
 export default BpkTableHead;

package/bpk-component-table/src/BpkTableHeadCell.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode, HTMLAttributes } from 'react';
+export interface BpkTableHeadCellProps extends Omit<HTMLAttributes<HTMLTableCellElement>, 'className'> {
+    /** The content of the table */
+    children: ReactNode;
+    className?: string | null;
+    wordBreak?: boolean;
+}
+declare const BpkTableHeadCell: ({ children, className, wordBreak, ...rest }: BpkTableHeadCellProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkTableHeadCell;

package/bpk-component-table/src/BpkTableHeadCell.js

@@ -14,7 +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 PropTypes from 'prop-types';
+ */
+
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkTable.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -33,9 +34,4 @@ const BpkTableHeadCell = ({
     children: children
   });
 };
-BpkTableHeadCell.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  wordBreak: PropTypes.bool
-};
 export default BpkTableHeadCell;

package/bpk-component-table/src/BpkTableRow.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode, HTMLAttributes } from 'react';
+export interface BpkTableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+    /** The content of the table */
+    children: ReactNode;
+}
+declare const BpkTableRow: (props: BpkTableRowProps) => import("react/jsx-runtime").JSX.Element;
+export default BpkTableRow;

package/bpk-component-table/src/BpkTableRow.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -14,12 +15,9 @@
  * 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 { jsx as _jsx } from "react/jsx-runtime";
+ */
+
 const BpkTableRow = props => /*#__PURE__*/_jsx("tr", {
   ...props
 });
-BpkTableRow.propTypes = {
-  children: PropTypes.node.isRequired
-};
 export default BpkTableRow;

package/bpk-mixins/_badges.scss

@@ -39,9 +39,28 @@
   padding: tokens.bpk-spacing-sm() tokens.bpk-spacing-md();
   align-items: center;
 
-  @include radii.bpk-border-radius-xs;
+  @include utils.bpk-themeable-property(
+    border-radius,
+    --bpk-badge-border-radius,
+    tokens.$bpk-border-radius-xs
+  );
   @include typography.bpk-text;
   @include typography.bpk-footnote;
+  @include utils.bpk-themeable-property(
+    font-size,
+    --bpk-badge-font-size,
+    tokens.$bpk-font-size-sm
+  );
+  @include utils.bpk-themeable-property(
+    font-weight,
+    --bpk-badge-font-weight,
+    tokens.$bpk-font-weight-book
+  );
+  @include utils.bpk-themeable-property(
+    line-height,
+    --bpk-badge-line-height,
+    tokens.$bpk-line-height-sm
+  );
 }
 
 /// Centered badge. Modifies the bpk-badge mixin.
@@ -121,9 +140,21 @@
 ///   }
 
 @mixin bpk-badge--normal {
-  background-color: tokens.$bpk-private-badge-background-normal-day;
-  color: tokens.$bpk-text-primary-day;
-  fill: tokens.$bpk-text-primary-day;
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-badge-normal-background-color,
+    tokens.$bpk-private-badge-background-normal-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-badge-normal-text-color,
+    tokens.$bpk-text-primary-day
+  );
+  @include utils.bpk-themeable-property(
+    fill,
+    --bpk-badge-normal-icon-color,
+    tokens.$bpk-text-primary-day
+  );
 }
 
 /// Warning badge. Modifies the bpk-badge mixin.
@@ -137,9 +168,21 @@
 ///   }
 
 @mixin bpk-badge--warning {
-  background-color: tokens.$bpk-private-badge-background-normal-day;
-  color: tokens.$bpk-text-on-light-day;
-  fill: tokens.$bpk-status-warning-spot-day;
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-badge-warning-background-color,
+    tokens.$bpk-private-badge-background-normal-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-badge-warning-text-color,
+    tokens.$bpk-text-on-light-day
+  );
+  @include utils.bpk-themeable-property(
+    fill,
+    --bpk-badge-warning-icon-color,
+    tokens.$bpk-status-warning-spot-day
+  );
 }
 
 /// Success badge. Modifies the bpk-badge mixin.
@@ -153,9 +196,21 @@
 ///   }
 
 @mixin bpk-badge--success {
-  background-color: tokens.$bpk-private-badge-background-normal-day;
-  color: tokens.$bpk-text-on-light-day;
-  fill: tokens.$bpk-status-success-spot-day;
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-badge-success-background-color,
+    tokens.$bpk-private-badge-background-normal-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-badge-success-text-color,
+    tokens.$bpk-text-on-light-day
+  );
+  @include utils.bpk-themeable-property(
+    fill,
+    --bpk-badge-success-icon-color,
+    tokens.$bpk-status-success-spot-day
+  );
 }
 
 /// Critical badge. Modifies the bpk-badge mixin.
@@ -169,9 +224,21 @@
 ///   }
 
 @mixin bpk-badge--critical {
-  background-color: tokens.$bpk-private-badge-background-normal-day;
-  color: tokens.$bpk-text-on-light-day;
-  fill: tokens.$bpk-status-danger-spot-day;
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-badge-critical-background-color,
+    tokens.$bpk-private-badge-background-normal-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-badge-critical-text-color,
+    tokens.$bpk-text-on-light-day
+  );
+  @include utils.bpk-themeable-property(
+    fill,
+    --bpk-badge-critical-icon-color,
+    tokens.$bpk-status-danger-spot-day
+  );
 }
 
 /// Inverse badge. Modifies the bpk-badge mixin.
@@ -185,9 +252,21 @@
 ///   }
 
 @mixin bpk-badge--inverse {
-  background-color: tokens.$bpk-surface-default-day;
-  color: tokens.$bpk-text-primary-day;
-  fill: tokens.$bpk-text-primary-day;
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-badge-inverse-background-color,
+    tokens.$bpk-surface-default-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-badge-inverse-text-color,
+    tokens.$bpk-text-primary-day
+  );
+  @include utils.bpk-themeable-property(
+    fill,
+    --bpk-badge-inverse-icon-color,
+    tokens.$bpk-text-primary-day
+  );
 }
 
 /// Outline badge. Modifies the bpk-badge mixin.
@@ -201,11 +280,30 @@
 ///   }
 
 @mixin bpk-badge--outline {
-  background-color: transparent;
-  color: tokens.$bpk-text-on-dark-day;
+  // The inset border intentionally shares --bpk-badge-outline-text-color with the text colour.
+  // This means badgeOutlineTextColor controls both the text and the visible border simultaneously.
+  // There is no separate badgeOutlineBorderColor attribute by design — if independent colours are
+  // ever needed, a dedicated CSS variable and theme attribute should be introduced at that point.
   box-shadow: inset 0 0 0 tokens.$bpk-border-size-sm
     tokens.$bpk-text-on-dark-day;
-  fill: tokens.$bpk-text-on-dark-day;
+  box-shadow: inset 0 0 0 tokens.$bpk-border-size-sm
+    var(--bpk-badge-outline-text-color, tokens.$bpk-text-on-dark-day);
+
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-badge-outline-background-color,
+    transparent
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-badge-outline-text-color,
+    tokens.$bpk-text-on-dark-day
+  );
+  @include utils.bpk-themeable-property(
+    fill,
+    --bpk-badge-outline-icon-color,
+    tokens.$bpk-text-on-dark-day
+  );
 }
 
 /// Strong badge. Modifies the bpk-badge mixin.
@@ -219,9 +317,21 @@
 ///   }
 
 @mixin bpk-badge--strong {
-  background-color: tokens.$bpk-core-primary-day;
-  color: tokens.$bpk-text-on-dark-day;
-  fill: tokens.$bpk-text-on-dark-day;
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-badge-strong-background-color,
+    tokens.$bpk-core-primary-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-badge-strong-text-color,
+    tokens.$bpk-text-on-dark-day
+  );
+  @include utils.bpk-themeable-property(
+    fill,
+    --bpk-badge-strong-icon-color,
+    tokens.$bpk-text-on-dark-day
+  );
 }
 
 /// Brand badge. Modifies the bpk-badge mixin.
@@ -235,7 +345,19 @@
 ///   }
 
 @mixin bpk-badge--brand {
-  background-color: tokens.$bpk-core-accent-day;
-  color: tokens.$bpk-text-primary-inverse-day;
-  fill: tokens.$bpk-text-primary-inverse-day;
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-badge-brand-background-color,
+    tokens.$bpk-core-accent-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-badge-brand-text-color,
+    tokens.$bpk-text-primary-inverse-day
+  );
+  @include utils.bpk-themeable-property(
+    fill,
+    --bpk-badge-brand-icon-color,
+    tokens.$bpk-text-primary-inverse-day
+  );
 }