@skyscanner/backpack-web 42.1.0 → 42.3.0

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

@@ -4,10 +4,11 @@ import BpkTableCell from './src/BpkTableCell';
 import BpkTableHead from './src/BpkTableHead';
 import BpkTableHeadCell from './src/BpkTableHeadCell';
 import BpkTableRow from './src/BpkTableRow';
+import { TABLE_BODY_TYPES } from './src/common-types';
 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, };
+export { BpkTable, BpkTableHead, BpkTableBody, BpkTableRow, BpkTableCell, BpkTableHeadCell, TABLE_BODY_TYPES, };

package/bpk-component-table/index.js

@@ -22,4 +22,5 @@ import BpkTableCell from "./src/BpkTableCell";
 import BpkTableHead from "./src/BpkTableHead";
 import BpkTableHeadCell from "./src/BpkTableHeadCell";
 import BpkTableRow from "./src/BpkTableRow";
-export { BpkTable, BpkTableHead, BpkTableBody, BpkTableRow, BpkTableCell, BpkTableHeadCell };
+import { TABLE_BODY_TYPES } from "./src/common-types";
+export { BpkTable, BpkTableHead, BpkTableBody, BpkTableRow, BpkTableCell, BpkTableHeadCell, TABLE_BODY_TYPES };

package/bpk-component-table/src/BpkTable.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-table{width:100%;margin-bottom:.5rem;border-collapse:collapse;table-layout:fixed;box-shadow:0 0 0 1px #c1c7cf}.bpk-table__cell{padding:1rem}.bpk-table__cell--head{background-color:#eff3f8;text-align:left;font-size:1rem;line-height:1.5rem;font-weight:700}html[dir=rtl] .bpk-table__cell--head{text-align:right}.bpk-table__cell--wordBreak{white-space:normal;overflow-wrap:break-word}
+.bpk-table{width:100%;margin-bottom:.5rem;border-collapse:collapse;table-layout:fixed;box-shadow:0 0 0 1px #c1c7cf}.bpk-table__body--striped tr:nth-child(even){background-color:#eff3f8}.bpk-table__cell{padding:1rem}.bpk-table__cell--head{background-color:#eff3f8;text-align:left;font-size:1rem;line-height:1.5rem;font-weight:700}html[dir=rtl] .bpk-table__cell--head{text-align:right}.bpk-table__cell--wordBreak{white-space:normal;overflow-wrap:break-word}

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

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

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

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
 /*
  * Backpack - Skyscanner's Design System
  *
@@ -17,7 +16,23 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * limitations under the License.
  */
 
-const BpkTableBody = props => /*#__PURE__*/_jsx("tbody", {
-  ...props
-});
+import { cssModules, getDataComponentAttribute } from "../../bpk-react-utils";
+import { TABLE_BODY_TYPES } from "./common-types";
+import STYLES from "./BpkTable.module.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+const getClassName = cssModules(STYLES);
+const BpkTableBody = ({
+  children,
+  className,
+  type = TABLE_BODY_TYPES.default,
+  ...rest
+}) => {
+  const classNames = getClassName(type === TABLE_BODY_TYPES.striped && 'bpk-table__body--striped', className);
+  return /*#__PURE__*/_jsx("tbody", {
+    ...rest,
+    className: classNames || undefined,
+    ...getDataComponentAttribute('TableBody'),
+    children: children
+  });
+};
 export default BpkTableBody;

package/bpk-component-table/src/common-types.d.ts

@@ -0,0 +1,5 @@
+export declare const TABLE_BODY_TYPES: {
+    readonly default: "default";
+    readonly striped: "striped";
+};
+export type TableBodyType = (typeof TABLE_BODY_TYPES)[keyof typeof TABLE_BODY_TYPES];

package/bpk-component-table/src/common-types.js

@@ -0,0 +1,22 @@
+/*
+ * 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 TABLE_BODY_TYPES = {
+  default: 'default',
+  striped: 'striped'
+};

package/bpk-react-utils/src/Portal.d.ts

@@ -1,5 +1,5 @@
 import { Component } from 'react';
-import type { ReactNode } from 'react';
+import type { JSX, ReactNode } from 'react';
 type InteractionEvents = TouchEvent | MouseEvent | KeyboardEvent;
 type Props = {
     children: string | ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyscanner/backpack-web",
-  "version": "42.1.0",
+  "version": "42.3.0",
   "description": "Backpack Design System web library",
   "repository": {
     "type": "git",
@@ -37,7 +37,7 @@
     "d3-scale": "^4.0.2",
     "downshift": "^9.0.10",
     "intersection-observer": "^0.12.2",
-    "lodash": "^4.17.20",
+    "lodash": "^4.17.23",
     "lodash.clamp": "^4.0.3",
     "lodash.debounce": "^4.0.8",
     "normalize.css": "4.2.0",

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckbox.d.ts

@@ -1,9 +0,0 @@
-declare const BpkCheckbox: {
-    Root: ({ checked, children, defaultChecked, disabled, id, invalid, name, onCheckedChange, required, value, }: import("./BpkCheckboxRoot").BpkCheckboxRootProps) => import("react/jsx-runtime").JSX.Element;
-    Control: ({ children }: import("./BpkCheckboxControl").BpkCheckboxControlProps) => import("react/jsx-runtime").JSX.Element;
-    Indicator: () => null;
-    Label: ({ children }: import("./BpkCheckboxLabel").BpkCheckboxLabelProps) => import("react/jsx-runtime").JSX.Element;
-    Description: ({ children }: import("./BpkCheckboxDescription").BpkCheckboxDescriptionProps) => import("react/jsx-runtime").JSX.Element;
-    HiddenInput: () => import("react/jsx-runtime").JSX.Element;
-};
-export default BpkCheckbox;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxControl.d.ts

@@ -1,6 +0,0 @@
-import type { ReactNode } from 'react';
-export type BpkCheckboxControlProps = {
-    children: ReactNode;
-};
-declare const BpkCheckboxControl: ({ children }: BpkCheckboxControlProps) => import("react/jsx-runtime").JSX.Element;
-export default BpkCheckboxControl;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxDescription.d.ts

@@ -1,6 +0,0 @@
-import type { ReactNode } from 'react';
-export type BpkCheckboxDescriptionProps = {
-    children: ReactNode;
-};
-declare const BpkCheckboxDescription: ({ children }: BpkCheckboxDescriptionProps) => import("react/jsx-runtime").JSX.Element;
-export default BpkCheckboxDescription;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxHiddenInput.d.ts

@@ -1,2 +0,0 @@
-declare const BpkCheckboxHiddenInput: () => import("react/jsx-runtime").JSX.Element;
-export default BpkCheckboxHiddenInput;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxIndicator.d.ts

@@ -1,2 +0,0 @@
-declare const BpkCheckboxIndicator: () => null;
-export default BpkCheckboxIndicator;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxLabel.d.ts

@@ -1,6 +0,0 @@
-import type { ReactNode } from 'react';
-export type BpkCheckboxLabelProps = {
-    children: ReactNode;
-};
-declare const BpkCheckboxLabel: ({ children }: BpkCheckboxLabelProps) => import("react/jsx-runtime").JSX.Element;
-export default BpkCheckboxLabel;

package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxRoot.d.ts

@@ -1,16 +0,0 @@
-import type { ReactNode } from 'react';
-export type BpkCheckedState = boolean | 'indeterminate';
-export type BpkCheckboxRootProps = {
-    children: ReactNode;
-    checked?: BpkCheckedState;
-    defaultChecked?: BpkCheckedState;
-    disabled?: boolean;
-    id?: string;
-    invalid?: boolean;
-    name?: string;
-    onCheckedChange?: (checked: BpkCheckedState) => void;
-    required?: boolean;
-    value?: string;
-};
-declare const BpkCheckboxRoot: ({ checked, children, defaultChecked, disabled, id, invalid, name, onCheckedChange, required, value, }: BpkCheckboxRootProps) => import("react/jsx-runtime").JSX.Element;
-export default BpkCheckboxRoot;