@skyscanner/backpack-web 42.0.0-test → 42.1.0

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/_buttons.scss

@@ -26,6 +26,112 @@
 /// @group buttons
 ////
 
+// --- Private: pressed/hover colour declarations ---
+// These mixins centralise pressed/hover token references.
+// hover and loading can include the same mixin — token values
+// are defined exactly once.
+
+@mixin _bpk-button-primary-hover {
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-button-primary-hover-background-color,
+    tokens.$bpk-private-button-primary-pressed-background-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-button-primary-hover-text-color,
+    tokens.$bpk-text-on-dark-day
+  );
+}
+
+@mixin _bpk-button-primary-on-dark-hover {
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-button-primary-on-dark-hover-background-color,
+    tokens.$bpk-private-button-primary-on-dark-pressed-background-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-button-primary-on-dark-hover-text-color,
+    tokens.$bpk-text-on-light-day
+  );
+}
+
+@mixin _bpk-button-primary-on-light-hover {
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-button-primary-on-light-hover-background-color,
+    tokens.$bpk-private-button-primary-on-light-pressed-background-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-button-primary-on-light-hover-text-color,
+    tokens.$bpk-text-on-dark-night
+  );
+}
+
+@mixin _bpk-button-secondary-hover {
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-button-secondary-hover-background-color,
+    tokens.$bpk-private-button-secondary-pressed-background-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-button-secondary-hover-text-color,
+    tokens.$bpk-text-primary-day
+  );
+}
+
+@mixin _bpk-button-secondary-on-dark-hover {
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-button-secondary-on-dark-hover-background-color,
+    tokens.$bpk-private-button-secondary-on-dark-pressed-background-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-button-secondary-on-dark-hover-text-color,
+    tokens.$bpk-text-on-dark-day
+  );
+}
+
+@mixin _bpk-button-destructive-hover {
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-button-destructive-hover-background-color,
+    tokens.$bpk-private-button-destructive-pressed-background-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-button-destructive-hover-text-color,
+    tokens.$bpk-text-primary-inverse-day
+  );
+}
+
+@mixin _bpk-button-featured-hover {
+  @include utils.bpk-themeable-property(
+    background-color,
+    --bpk-button-featured-hover-background-color,
+    tokens.$bpk-private-button-featured-pressed-background-day
+  );
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-button-featured-hover-text-color,
+    tokens.$bpk-text-primary-inverse-day
+  );
+}
+
+@mixin _bpk-button-link-on-dark-hover {
+  @include utils.bpk-themeable-property(
+    color,
+    --bpk-button-link-on-dark-hover-text-color,
+    tokens.$bpk-private-button-link-on-dark-pressed-foreground-day
+  );
+}
+
+// --- End private mixins ---
+
 /// Standard button.
 ///
 /// @example scss
@@ -63,16 +169,7 @@
   );
 
   @include utils.bpk-hover {
-    @include utils.bpk-themeable-property(
-      color,
-      --bpk-button-primary-hover-text-color,
-      tokens.$bpk-text-on-dark-day
-    );
-    @include utils.bpk-themeable-property(
-      background-color,
-      --bpk-button-primary-hover-background-color,
-      tokens.$bpk-private-button-primary-pressed-background-day
-    );
+    @include _bpk-button-primary-hover;
   }
 
   &:active {
@@ -93,6 +190,11 @@
     color: tokens.$bpk-text-disabled-day;
     cursor: not-allowed;
   }
+
+  // Loading state override: restore hover/pressed appearance while disabled.
+  &.bpk-button--loading:disabled {
+    @include _bpk-button-primary-hover;
+  }
 }
 
 /// Large button. Modifies the bpk-button mixin.
@@ -133,16 +235,7 @@
   );
 
   @include utils.bpk-hover {
-    @include utils.bpk-themeable-property(
-      color,
-      --bpk-button-primary-on-dark-hover-text-color,
-      tokens.$bpk-text-on-light-day
-    );
-    @include utils.bpk-themeable-property(
-      background-color,
-      --bpk-button-primary-on-dark-hover-background-color,
-      tokens.$bpk-private-button-primary-on-dark-pressed-background-day
-    );
+    @include _bpk-button-primary-on-dark-hover;
   }
 
   &:active {
@@ -162,6 +255,11 @@
     background-color: tokens.$bpk-private-button-primary-on-dark-disabled-background-day;
     color: tokens.$bpk-private-button-primary-on-dark-disabled-foreground-day;
   }
+
+  // Loading state override: restore hover/pressed appearance while disabled.
+  &.bpk-button--loading:disabled {
+    @include _bpk-button-primary-on-dark-hover;
+  }
 }
 
 /// PrimaryOnLight button. Modifies the bpk-button mixin.
@@ -187,16 +285,7 @@
   );
 
   @include utils.bpk-hover {
-    @include utils.bpk-themeable-property(
-      color,
-      --bpk-button-primary-on-light-hover-text-color,
-      tokens.$bpk-text-on-dark-night
-    );
-    @include utils.bpk-themeable-property(
-      background-color,
-      --bpk-button-primary-on-light-hover-background-color,
-      tokens.$bpk-private-button-primary-on-light-pressed-background-day
-    );
+    @include _bpk-button-primary-on-light-hover;
   }
 
   &:active {
@@ -216,6 +305,11 @@
     background-color: tokens.$bpk-private-button-primary-on-light-disabled-background-day;
     color: tokens.$bpk-private-button-primary-on-light-disabled-foreground-day;
   }
+
+  // Loading state override: restore hover/pressed appearance while disabled.
+  &.bpk-button--loading:disabled {
+    @include _bpk-button-primary-on-light-hover;
+  }
 }
 
 /// Secondary button. Modifies the bpk-button mixin.
@@ -241,16 +335,7 @@
   );
 
   @include utils.bpk-hover {
-    @include utils.bpk-themeable-property(
-      color,
-      --bpk-button-secondary-hover-text-color,
-      tokens.$bpk-text-primary-day
-    );
-    @include utils.bpk-themeable-property(
-      background-color,
-      --bpk-button-secondary-hover-background-color,
-      tokens.$bpk-private-button-secondary-pressed-background-day
-    );
+    @include _bpk-button-secondary-hover;
   }
 
   &:active {
@@ -270,6 +355,11 @@
     background-color: tokens.$bpk-private-button-disabled-background-day;
     color: tokens.$bpk-text-disabled-day;
   }
+
+  // Loading state override: restore hover/pressed appearance while disabled.
+  &.bpk-button--loading:disabled {
+    @include _bpk-button-secondary-hover;
+  }
 }
 
 /// Secondary on dark button. Modifies the bpk-button mixin.
@@ -295,16 +385,7 @@
   );
 
   @include utils.bpk-hover {
-    @include utils.bpk-themeable-property(
-      color,
-      --bpk-button-secondary-on-dark-hover-text-color,
-      tokens.$bpk-text-on-dark-day
-    );
-    @include utils.bpk-themeable-property(
-      background-color,
-      --bpk-button-secondary-on-dark-hover-background-color,
-      tokens.$bpk-private-button-secondary-on-dark-pressed-background-day
-    );
+    @include _bpk-button-secondary-on-dark-hover;
   }
 
   &:active {
@@ -324,6 +405,11 @@
     background-color: tokens.$bpk-private-button-secondary-on-dark-disabled-background-day;
     color: tokens.$bpk-private-button-secondary-on-dark-disabled-foreground-day;
   }
+
+  // Loading state override: restore hover/pressed appearance while disabled.
+  &.bpk-button--loading:disabled {
+    @include _bpk-button-secondary-on-dark-hover;
+  }
 }
 
 /// Destructive button. Modifies the bpk-button & bpk-button--secondary lib.
@@ -351,16 +437,7 @@
   );
 
   @include utils.bpk-hover {
-    @include utils.bpk-themeable-property(
-      color,
-      --bpk-button-destructive-hover-text-color,
-      tokens.$bpk-text-primary-inverse-day
-    );
-    @include utils.bpk-themeable-property(
-      background-color,
-      --bpk-button-destructive-hover-background-color,
-      tokens.$bpk-private-button-destructive-pressed-background-day
-    );
+    @include _bpk-button-destructive-hover;
   }
 
   &:active {
@@ -380,6 +457,11 @@
     background-color: tokens.$bpk-private-button-disabled-background-day;
     color: tokens.$bpk-text-disabled-day;
   }
+
+  // Loading state override: restore hover/pressed appearance while disabled.
+  &.bpk-button--loading:disabled {
+    @include _bpk-button-destructive-hover;
+  }
 }
 
 /// Link-style button. Modifies the bpk-button mixin.
@@ -429,6 +511,18 @@
     text-decoration: none;
   }
 
+  // Loading state override: restore pressed appearance while disabled.
+  &.bpk-button--loading:disabled,
+  &.bpk-button--loading:disabled:active {
+    background: none;
+
+    @include utils.bpk-themeable-property(
+      color,
+      --bpk-button-link-loading-color,
+      tokens.$bpk-text-primary-day
+    );
+  }
+
   &-large {
     padding: $vertical-padding-large 0;
   }
@@ -437,7 +531,7 @@
 /// Link on dark button. Modifies the bpk-button & bpk-button--link lib.
 ///
 /// @require {mixin} bpk-button
-
+///
 /// @example scss
 ///   .selector {
 ///     @include bpk-button();
@@ -453,11 +547,7 @@
   );
 
   @include utils.bpk-hover {
-    @include utils.bpk-themeable-property(
-      color,
-      --bpk-button-link-on-dark-hover-text-color,
-      tokens.$bpk-private-button-link-on-dark-pressed-foreground-day
-    );
+    @include _bpk-button-link-on-dark-hover;
   }
 
   &:active {
@@ -484,6 +574,12 @@
       tokens.$bpk-private-button-link-on-dark-disabled-foreground-day
     );
   }
+
+  // Loading state override: restore pressed/hover appearance while disabled.
+  &.bpk-button--loading:disabled,
+  &.bpk-button--loading:disabled:active {
+    @include _bpk-button-link-on-dark-hover;
+  }
 }
 
 /// Button link icon only aligned. Modifies the bpk-button mixin.
@@ -584,16 +680,7 @@
   );
 
   @include utils.bpk-hover {
-    @include utils.bpk-themeable-property(
-      color,
-      --bpk-button-featured-hover-text-color,
-      tokens.$bpk-text-primary-inverse-day
-    );
-    @include utils.bpk-themeable-property(
-      background-color,
-      --bpk-button-featured-hover-background-color,
-      tokens.$bpk-private-button-featured-pressed-background-day
-    );
+    @include _bpk-button-featured-hover;
   }
 
   &:active {
@@ -613,6 +700,11 @@
     background-color: tokens.$bpk-private-button-disabled-background-day;
     color: tokens.$bpk-text-disabled-day;
   }
+
+  // Loading state override: restore hover/pressed appearance while disabled.
+  &.bpk-button--loading:disabled {
+    @include _bpk-button-featured-hover;
+  }
 }
 
 /// Full width button. Modifies the bpk-button to horizontally fill its container