@skyscanner/backpack-web 33.4.0 → 34.0.0-premajor

package/bpk-component-button/src/BpkButtonSecondaryOnDark.js

@@ -14,8 +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 { defaultProps, propTypes } from "./common-types";
-import BpkButtonBase, { cssModules } from "./BpkButtonBase";
+ */import BpkButtonBase, { cssModules } from "./BpkButtonBase";
+import { defaultProps, propTypes } from "./common-types";
 import STYLES from "./BpkButtonSecondaryOnDark.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -29,14 +29,15 @@ const BpkButtonSecondaryOnDark = props => {
     classNames.push(className);
   }
   const classNamesFinal = classNames.join(' ');
-  return (
-    /*#__PURE__*/
+  return /*#__PURE__*/_jsx(BpkButtonBase
+  // TODO: className to be removed
+  // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+  , {
+    className: classNamesFinal
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
-    _jsx(BpkButtonBase, {
-      className: classNamesFinal,
-      ...rest
-    })
-  );
+    ,
+    ...rest
+  });
 };
 BpkButtonSecondaryOnDark.propTypes = {
   ...propTypes

package/bpk-component-calendar/index.js

@@ -17,10 +17,10 @@
  */
 
 import BpkCalendarContainer, { withCalendarState } from "./src/BpkCalendarContainer";
+import BpkCalendarDate, { ROW_TYPES, SELECTION_TYPES } from "./src/BpkCalendarDate";
 import BpkCalendarGrid, { BpkCalendarGridWithTransition } from "./src/BpkCalendarGrid";
 import BpkCalendarGridHeader from "./src/BpkCalendarGridHeader";
 import BpkCalendarNav from "./src/BpkCalendarNav";
-import BpkCalendarDate, { ROW_TYPES, SELECTION_TYPES } from "./src/BpkCalendarDate";
 import composeCalendar from "./src/composeCalendar";
 import { CALENDAR_SELECTION_TYPE } from "./src/custom-proptypes";
 import CustomPropTypes, { BpkCalendarGridPropTypes, BpkCalendarDatePropTypes // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.

package/bpk-component-calendar/src/BpkCalendarContainer.js

@@ -18,12 +18,12 @@
 
 import { Component } from 'react';
 import { isRTL } from "../../bpk-react-utils";
-import { CALENDAR_SELECTION_TYPE } from "./custom-proptypes";
-import BpkCalendarNav from "./BpkCalendarNav";
+import BpkCalendarDate from "./BpkCalendarDate";
 import { BpkCalendarGridWithTransition } from "./BpkCalendarGrid";
 import BpkCalendarGridHeader from "./BpkCalendarGridHeader";
-import BpkCalendarDate from "./BpkCalendarDate";
+import BpkCalendarNav from "./BpkCalendarNav";
 import composeCalendar from "./composeCalendar";
+import { CALENDAR_SELECTION_TYPE } from "./custom-proptypes";
 import { addDays, addMonths, dateToBoundaries, isAfter, isSameMonth, isSameDay, lastDayOfMonth, setMonthYear, startOfDay, startOfMonth } from "./date-utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**

package/bpk-component-calendar/src/BpkCalendarGrid.js

@@ -18,10 +18,10 @@
 
 import { Component } from 'react';
 import { cssModules, isDeviceIos } from "../../bpk-react-utils";
+import { addCalendarGridTransition } from "./BpkCalendarGridTransition";
 import Week from "./Week";
-import { addMonths, formatIsoDate, getCalendarMonthWeeks, isSameMonth } from "./date-utils";
 import { CALENDAR_SELECTION_TYPE } from "./custom-proptypes";
-import { addCalendarGridTransition } from "./BpkCalendarGridTransition";
+import { addMonths, formatIsoDate, getCalendarMonthWeeks, isSameMonth } from "./date-utils";
 import STYLES from "./BpkCalendarGrid.module.css";
 
 // This should be imported after `./BpkCalendarGrid.module.css`.

package/bpk-component-calendar/src/BpkCalendarGrid.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-calendar-grid{width:100%;border-collapse:separate;border-spacing:0}.bpk-calendar-grid--animating{z-index:1;transition:transform .2s ease-in-out}.bpk-calendar-grid__caption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-calendar-grid__date{width:100%;text-align:center}.bpk-calendar-grid__date--start{background-image:linear-gradient(to right, rgb(255, 255, 255) 50%, rgb(227, 240, 255) 50%)}html[dir=rtl] .bpk-calendar-grid__date--start{background-image:linear-gradient(to left, rgb(255, 255, 255) 50%, rgb(227, 240, 255) 50%)}.bpk-calendar-grid__date--middle{background-color:#e3f0ff}.bpk-calendar-grid__date--end{background-image:linear-gradient(to left, rgb(255, 255, 255) 50%, rgb(227, 240, 255) 50%)}html[dir=rtl] .bpk-calendar-grid__date--end{background-image:linear-gradient(to right, rgb(255, 255, 255) 50%, rgb(227, 240, 255) 50%)}.bpk-calendar-grid__week{display:flex;padding-top:1.5rem}
+.bpk-calendar-grid{border-collapse:separate;border-spacing:0}.bpk-calendar-grid--animating{z-index:1;transition:transform .2s ease-in-out}.bpk-calendar-grid__caption{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.bpk-calendar-grid__date{width:100%;text-align:center}.bpk-calendar-grid__date--start{background-image:linear-gradient(to right, rgb(255, 255, 255) 50%, rgb(227, 240, 255) 50%)}html[dir=rtl] .bpk-calendar-grid__date--start{background-image:linear-gradient(to left, rgb(255, 255, 255) 50%, rgb(227, 240, 255) 50%)}.bpk-calendar-grid__date--middle{background-color:#e3f0ff}.bpk-calendar-grid__date--end{background-image:linear-gradient(to left, rgb(255, 255, 255) 50%, rgb(227, 240, 255) 50%)}html[dir=rtl] .bpk-calendar-grid__date--end{background-image:linear-gradient(to right, rgb(255, 255, 255) 50%, rgb(227, 240, 255) 50%)}.bpk-calendar-grid__week{display:flex;padding-top:1.5rem}

package/bpk-component-calendar/src/BpkCalendarGridHeader.js

@@ -29,7 +29,10 @@ const WeekDayComponent = ({
   Element,
   weekDay,
   weekDayKey = 'nameAbbr'
-}) => /*#__PURE__*/_jsx(Element, {
+}) => /*#__PURE__*/_jsx(Element
+// TODO: className to be removed
+// eslint-disable-next-line @skyscanner/rules/forbid-component-props
+, {
   className: getClassName('bpk-calendar-header__weekday'),
   title: weekDay.name,
   children: /*#__PURE__*/_jsx("span", {

package/bpk-component-calendar/src/BpkCalendarGridTransition.js

@@ -18,8 +18,8 @@
 
 import { Component, createElement as _createElement } from 'react';
 import { cssModules, isRTL } from "../../bpk-react-utils";
-import { getCalendarGridWidth, getTransformStyles, isTransitionEndSupported } from "./utils";
 import { addMonths, isSameMonth, formatIsoMonth, differenceInCalendarMonths, dateToBoundaries, startOfDay, setMonthYear, isWithinRange, getMonthRange } from "./date-utils";
+import { getCalendarGridWidth, getTransformStyles, isTransitionEndSupported } from "./utils";
 import STYLES from "./BpkCalendarGridTransition.module.css";
 import { jsx as _jsx } from "react/jsx-runtime";
 const getClassName = cssModules(STYLES);
@@ -141,7 +141,10 @@ class BpkCalendarGridTransition extends Component {
           preventKeyboardFocus: index !== 1 || rest.preventKeyboardFocus,
           isKeyboardFocusable: !isTransitioning && index === 1,
           focusedDate: index === 1 ? focusedDate : getFocusedDateForMonth(m, focusedDate, rest.minDate, rest.maxDate),
-          "aria-hidden": index !== 1,
+          "aria-hidden": index !== 1
+          // TODO: className to be removed
+          // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+          ,
           className: getClassName('bpk-calendar-grid-transition__grid')
         }) : /*#__PURE__*/_jsx("div", {
           className: getClassName('bpk-calendar-grid-transition__dummy')

package/bpk-component-calendar/src/BpkCalendarNav.js

@@ -16,6 +16,7 @@
  * limitations under the License.
  */
 
+import BpkAriaLive from "../../bpk-component-aria-live";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import ArrowLeftIcon from "../../bpk-component-icon/lg/arrow-left";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
@@ -23,7 +24,6 @@ import ArrowRightIcon from "../../bpk-component-icon/lg/arrow-right";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkSelect from "../../bpk-component-select";
 import { cssModules } from "../../bpk-react-utils";
-import BpkAriaLive from "../../bpk-component-aria-live";
 import { addMonths, formatIsoMonth, getMonthRange, getMonthsInRange, isWithinRange, parseIsoDate, startOfMonth } from "./date-utils";
 import STYLES from "./BpkCalendarNav.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -91,7 +91,10 @@ const BpkCalendarNav = ({
             start: min,
             end: max
           }),
-          children: [/*#__PURE__*/_jsx(ArrowLeftIcon, {
+          children: [/*#__PURE__*/_jsx(ArrowLeftIcon
+          // TODO: className to be removed
+          // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+          , {
             className: getClassName('bpk-calendar-nav__icon')
           }), /*#__PURE__*/_jsx("span", {
             className: getClassName('bpk-calendar-nav__text--hidden'),
@@ -138,7 +141,10 @@ const BpkCalendarNav = ({
             start: min,
             end: max
           }),
-          children: [/*#__PURE__*/_jsx(ArrowRightIcon, {
+          children: [/*#__PURE__*/_jsx(ArrowRightIcon
+          // TODO: className to be removed
+          // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+          , {
             className: getClassName('bpk-calendar-nav__icon')
           }), /*#__PURE__*/_jsx("span", {
             className: getClassName('bpk-calendar-nav__text--hidden'),

package/bpk-component-calendar/src/Week.js

@@ -18,9 +18,9 @@
 
 import { Component } from 'react';
 import { cssModules } from "../../bpk-react-utils";
-import { isSameDay, isSameWeek, isSameMonth, isToday, isWithinRange, startOfMonth, endOfMonth } from "./date-utils";
-import { CALENDAR_SELECTION_TYPE } from "./custom-proptypes";
 import { SELECTION_TYPES } from "./BpkCalendarDate";
+import { CALENDAR_SELECTION_TYPE } from "./custom-proptypes";
+import { isSameDay, isSameWeek, isSameMonth, isToday, isWithinRange, startOfMonth, endOfMonth } from "./date-utils";
 // TODO: Move this to `Week.scss`
 // This should be using its own css file as `BpkCalendarGrid` is also importing `BpkCalendarGrid.module.css`
 // and the order of css imports can break the component.
@@ -278,7 +278,10 @@ class Week extends Component {
           end: maxDate
         }) : false;
         const dateSelectionType = getSelectionType(date, selectionConfiguration, formatDateFull, month, weekStartsOn, ignoreOutsideDate);
-        return /*#__PURE__*/_jsx(DateContainer, {
+        return /*#__PURE__*/_jsx(DateContainer
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        , {
           className: cellClassName,
           isEmptyCell: !isSameMonth(date, month) && ignoreOutsideDate,
           isBlocked: isBlocked,

package/bpk-component-calendar/src/composeCalendar.js

@@ -94,7 +94,10 @@ const composeCalendar = (Nav, GridHeader, Grid, CalendarDate) => {
       }), GridHeader && /*#__PURE__*/_jsx(GridHeader, {
         daysOfWeek: daysOfWeek,
         weekStartsOn: weekStartsOn,
-        weekDayKey: weekDayKey,
+        weekDayKey: weekDayKey
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        ,
         className: headerClasses.join(' '),
         ...headerProps
       }), /*#__PURE__*/_jsx(Grid, {
@@ -112,7 +115,10 @@ const composeCalendar = (Nav, GridHeader, Grid, CalendarDate) => {
         minDate: minDate,
         focusedDate: focusedDate,
         markToday: markToday,
-        markOutsideDays: markOutsideDays,
+        markOutsideDays: markOutsideDays
+        // TODO: className to be removed
+        // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+        ,
         className: gridClasses.join(' '),
         dateProps: dateProps,
         selectionConfiguration: selectionConfiguration,

package/bpk-component-calendar/src/date-utils.js

@@ -16,27 +16,27 @@
  * limitations under the License.
  */
 
-import { startOfMonth } from 'date-fns/startOfMonth';
+import { addDays } from 'date-fns/addDays';
+import { addMonths } from 'date-fns/addMonths';
+import { differenceInCalendarMonths } from 'date-fns/differenceInCalendarMonths';
 import { endOfMonth } from 'date-fns/endOfMonth';
-import { lastDayOfMonth } from 'date-fns/lastDayOfMonth';
+import { format } from 'date-fns/format';
 import { getDay } from 'date-fns/getDay';
-import { isWithinInterval as isWithinRange } from 'date-fns/isWithinInterval';
-import { isToday } from 'date-fns/isToday';
-import { isSaturday } from 'date-fns/isSaturday';
-import { isSunday } from 'date-fns/isSunday';
+import { isAfter } from 'date-fns/isAfter';
+import { isBefore } from 'date-fns/isBefore';
 import { isSameDay } from 'date-fns/isSameDay';
-import { isSameWeek } from 'date-fns/isSameWeek';
 import { isSameMonth } from 'date-fns/isSameMonth';
-import { isBefore } from 'date-fns/isBefore';
-import { isAfter } from 'date-fns/isAfter';
-import { differenceInCalendarMonths } from 'date-fns/differenceInCalendarMonths';
-import { addDays } from 'date-fns/addDays';
-import { addMonths } from 'date-fns/addMonths';
+import { isSameWeek } from 'date-fns/isSameWeek';
+import { isSaturday } from 'date-fns/isSaturday';
+import { isSunday } from 'date-fns/isSunday';
+import { isToday } from 'date-fns/isToday';
+import { isWithinInterval as isWithinRange } from 'date-fns/isWithinInterval';
+import { lastDayOfMonth } from 'date-fns/lastDayOfMonth';
+import { parseISO } from 'date-fns/parseISO';
 import { setMonth } from 'date-fns/setMonth';
 import { setYear } from 'date-fns/setYear';
 import { startOfDay } from 'date-fns/startOfDay';
-import { parseISO } from 'date-fns/parseISO';
-import { format } from 'date-fns/format';
+import { startOfMonth } from 'date-fns/startOfMonth';
 const ONE_MINUTE_IN_MS = 60 * 1000;
 const ONE_HOUR_IN_MS = 60 * ONE_MINUTE_IN_MS;
 

package/bpk-component-card/src/BpkDividedCard.js

@@ -36,18 +36,23 @@ const BpkDividedCard = ({
 }) => {
   const isVertical = orientation === ORIENTATION.vertical;
   const classNames = getClassName('bpk-divided-card', isVertical ? 'bpk-divided-card--vertical' : 'bpk-divided-card--horizontal', !isElevated && 'bpk-divided-card--no-elevation', className);
-  return /*#__PURE__*/_jsxs(BpkCard, {
-    className: classNames,
-    href: href,
-    padded: false,
-    ...rest,
-    children: [/*#__PURE__*/_jsx("div", {
-      className: getClassName(!isVertical && 'bpk-divided-card__primary--horizontal'),
-      children: primaryContent
-    }), /*#__PURE__*/_jsx("div", {
-      className: getClassName(isVertical ? 'bpk-divided-card__secondary--vertical' : 'bpk-divided-card__secondary--horizontal'),
-      children: secondaryContent
-    })]
-  });
+  return (
+    /*#__PURE__*/
+    // TODO: className to be removed
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    _jsxs(BpkCard, {
+      className: classNames,
+      href: href,
+      padded: false,
+      ...rest,
+      children: [/*#__PURE__*/_jsx("div", {
+        className: getClassName(!isVertical && 'bpk-divided-card__primary--horizontal'),
+        children: primaryContent
+      }), /*#__PURE__*/_jsx("div", {
+        className: getClassName(isVertical ? 'bpk-divided-card__secondary--vertical' : 'bpk-divided-card__secondary--horizontal'),
+        children: secondaryContent
+      })]
+    })
+  );
 };
 export default BpkDividedCard;

package/bpk-component-card-button/src/BpkSaveButton.js

@@ -18,6 +18,7 @@
 
 import { useState } from 'react';
 import { BpkButtonV2 } from "../../bpk-component-button";
+import { withLargeButtonAlignment } from "../../bpk-component-icon";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkHeartIcon from "../../bpk-component-icon/lg/heart";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
@@ -26,7 +27,6 @@ import BpkHeartOutlineIcon from "../../bpk-component-icon/lg/heart--outline";
 import BpkHeartIconSm from "../../bpk-component-icon/sm/heart";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import BpkHeartOutlineIconSm from "../../bpk-component-icon/sm/heart--outline";
-import { withLargeButtonAlignment } from "../../bpk-component-icon";
 import { cssModules } from "../../bpk-react-utils";
 import STYLES from "./BpkSaveButton.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -56,7 +56,10 @@ const BpkSaveButton = ({
   const HeartIcon = smallSize ? AlignedHeartIconSm : AlignedHeartIcon;
   const HeartOutLineIcon = smallSize ? AlignedHeartOutlineIconSm : AlignedHeartOutlineIcon;
   return /*#__PURE__*/_jsxs(BpkButtonV2, {
-    "aria-label": accessibilityLabel,
+    "aria-label": accessibilityLabel
+    // TODO: className to be removed
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    ,
     className: getClassName('bpk-save-button', smallSize && 'bpk-save-button__small', `bpk-save-button__${style}`),
     onClick: e => {
       onCheckedChange(e);
@@ -65,9 +68,15 @@ const BpkSaveButton = ({
       }
     },
     iconOnly: true,
-    children: [/*#__PURE__*/_jsx(HeartIcon, {
+    children: [/*#__PURE__*/_jsx(HeartIcon
+    // TODO: className to be removed
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    , {
       className: getClassName('bpk-save-button__icon', 'bpk-save-button__heartIcon', toggle && checked && 'bpk-save-button__heartIcon--toggle', `bpk-save-button__heartIcon--${checked ? 'show' : 'hide'}`, `bpk-save-button__heartIcon--${style}`)
-    }), /*#__PURE__*/_jsx(HeartOutLineIcon, {
+    }), /*#__PURE__*/_jsx(HeartOutLineIcon
+    // TODO: className to be removed
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    , {
       className: getClassName('bpk-save-button__icon', 'bpk-save-button__heartOutlineIcon', `bpk-save-button__heartOutlineIcon--${checked ? 'hide' : 'show'}`, `bpk-save-button__heartOutlineIcon--${style}`)
     })]
   });

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

@@ -16,17 +16,15 @@
  * limitations under the License.
  */
 
-import BpkSelectableChip, {
-  type Props as SelectableProps,
-} from './src/BpkSelectableChip';
+import BpkSelectableChip, { type Props as SelectableProps } from './src/BpkSelectableChip';
 import BpkDismissibleChip from './src/BpkDismissibleChip';
 import BpkDropdownChip from './src/BpkDropdownChip';
+import BpkIconChip from './src/BpkIconChip';
 import type { CommonProps } from './src/commonTypes';
 import { CHIP_TYPES } from './src/commonTypes';
 import themeAttributes from './src/themeAttributes';
-
 export type BpkSelectableChipProps = SelectableProps;
 export type BpkDismissibleChipProps = CommonProps;
 export type BpkDropdownChipProps = CommonProps;
 export default BpkSelectableChip;
-export { BpkDismissibleChip, BpkDropdownChip, CHIP_TYPES, themeAttributes };
+export { BpkDismissibleChip, BpkDropdownChip, BpkIconChip, CHIP_TYPES, themeAttributes };

package/bpk-component-chip/index.js

@@ -16,10 +16,11 @@
  * limitations under the License.
  */
 
-import BpkSelectableChip from "./src/BpkSelectableChip";
 import BpkDismissibleChip from "./src/BpkDismissibleChip";
 import BpkDropdownChip from "./src/BpkDropdownChip";
+import BpkIconChip from "./src/BpkIconChip";
+import BpkSelectableChip from "./src/BpkSelectableChip";
 import { CHIP_TYPES } from "./src/commonTypes";
 import themeAttributes from "./src/themeAttributes";
 export default BpkSelectableChip;
-export { BpkDismissibleChip, BpkDropdownChip, CHIP_TYPES, themeAttributes };
+export { BpkDismissibleChip, BpkDropdownChip, BpkIconChip, CHIP_TYPES, themeAttributes };

package/bpk-component-chip/src/BpkDismissibleChip.js

@@ -22,9 +22,9 @@ been hard coded to have disabled={false}, selected and a trailing
 accessory view of a close icon.
 */
 
-import { cssModules } from "../../bpk-react-utils";
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import CloseCircleIconSm from "../../bpk-component-icon/sm/close-circle";
+import { cssModules } from "../../bpk-react-utils";
 import BpkSelectableChip from "./BpkSelectableChip";
 import { CHIP_TYPES } from "./commonTypes";
 import STYLES from "./BpkSelectableChip.module.css";
@@ -42,12 +42,17 @@ const BpkDismissibleChip = ({
     ...rest,
     leadingAccessoryView: leadingAccessoryView,
     disabled: false,
-    trailingAccessoryView: /*#__PURE__*/_jsx(CloseCircleIconSm, {
+    trailingAccessoryView: /*#__PURE__*/_jsx(CloseCircleIconSm
+    // TODO: className to be removed
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    , {
       className: iconClassNames
     }),
     selected: true,
     type: type,
     role: "button" // Override role="checkbox" because this chip is not selectable.
+    // TODO: className to be removed
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
     ,
     className: classNames
   });

package/bpk-component-chip/src/BpkIconChip.d.ts

@@ -0,0 +1,25 @@
+/*
+ * 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.
+ */
+
+import type { ReactNode } from 'react';
+import type { CommonProps as Props } from './commonTypes';
+export type BpkIconChipProps = {
+    leadingAccessoryView: ReactNode;
+} & Omit<Props, 'trailingAccessoryView' | 'leadingAccessoryView' | 'children'>;
+declare const BpkIconChip: ({ className, ...rest }: BpkIconChipProps) => JSX.Element;
+export default BpkIconChip;

package/bpk-component-chip/src/BpkIconChip.js

@@ -0,0 +1,31 @@
+/*
+ * 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.
+ */
+
+/*
+The icon chip component is just a selectable chip that's
+been hard coded to have no text or trailing icon and padding/margin
+to match.
+*/
+
+import BpkSelectableChip from "./BpkSelectableChip";
+import { jsx as _jsx } from "react/jsx-runtime";
+const BpkIconChip = props => /*#__PURE__*/_jsx(BpkSelectableChip, {
+  ...props,
+  children: null
+});
+export default BpkIconChip;

package/bpk-component-chip/src/BpkSelectableChip.d.ts

@@ -17,9 +17,7 @@
  */
 
 import type { ReactNode } from 'react';
-
 import type { CommonProps } from './commonTypes';
-
 export interface Props extends CommonProps {
   role?: string;
   trailingAccessoryView?: ReactNode;

package/bpk-component-chip/src/BpkSelectableChip.js

@@ -16,8 +16,8 @@
  * limitations under the License.
  */
 
-import { cssModules } from "../../bpk-react-utils";
 import BpkText, { TEXT_STYLES } from "../../bpk-component-text";
+import { cssModules } from "../../bpk-react-utils";
 import { CHIP_TYPES } from "./commonTypes";
 import STYLES from "./BpkSelectableChip.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -34,7 +34,7 @@ const BpkSelectableChip = ({
   type = CHIP_TYPES.default,
   ...rest
 }) => {
-  const classNames = getClassName('bpk-chip', `bpk-chip--${type}`, disabled && 'bpk-chip--disabled', disabled && `bpk-chip--${type}-disabled`, !disabled && selected && `bpk-chip--${type}-selected`, className);
+  const classNames = getClassName('bpk-chip', `bpk-chip--${type}`, disabled && 'bpk-chip--disabled', disabled && `bpk-chip--${type}-disabled`, !children && 'bpk-chip--icon-only', !disabled && selected && `bpk-chip--${type}-selected`, className);
   return /*#__PURE__*/_jsxs("button", {
     "aria-checked": role === 'button' || role === 'tab' ? undefined : selected,
     className: classNames,
@@ -44,7 +44,7 @@ const BpkSelectableChip = ({
     type: "button",
     ...rest,
     children: [leadingAccessoryView && /*#__PURE__*/_jsx("span", {
-      className: getClassName('bpk-chip__leading-accessory-view'),
+      className: getClassName('bpk-chip__leading-accessory-view', !children && 'bpk-chip--icon-only__leading-accessory-view'),
       children: leadingAccessoryView
     }), /*#__PURE__*/_jsx(BpkText, {
       textStyle: TEXT_STYLES.footnote,

package/bpk-component-chip/src/BpkSelectableChip.module.css

@@ -15,4 +15,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-.bpk-chip{display:inline-flex;height:2rem;padding:0 1rem;align-items:center;border:none;border-radius:.5rem;cursor:pointer}.bpk-chip__leading-accessory-view{display:inline-flex;fill:currentcolor;margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-chip__leading-accessory-view{margin-left:.5rem;margin-right:0}.bpk-chip__trailing-accessory-view{display:inline-flex;fill:currentcolor;margin-left:.5rem;margin-right:-0.5rem}html[dir=rtl] .bpk-chip__trailing-accessory-view{margin-right:.5rem}html[dir=rtl] .bpk-chip__trailing-accessory-view{margin-left:-0.5rem}.bpk-chip--on-dark{background-color:rgba(0,0,0,0);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.5) inset}.bpk-no-touch-support .bpk-chip--on-dark:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #fff inset}:global(.bpk-no-touch-support) .bpk-chip--on-dark:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #fff inset}.bpk-chip--on-dark:active:not(:disabled){box-shadow:0 0 0 1px #fff inset}.bpk-chip--on-dark-selected{color:#161616;color:var(--bpk-chip-on-dark-selected-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-chip-on-dark-selected-background-color, rgb(255, 255, 255));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--on-dark-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}:global(.bpk-no-touch-support) .bpk-chip--on-dark-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--on-dark-selected:active:not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--on-dark-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--on-dark-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--on-dark-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--on-dark-dismissible__trailing-accessory-view{fill:#626971}.bpk-chip--on-dark-disabled{box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--default{background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #c1c7cf inset}.bpk-no-touch-support .bpk-chip--default:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #05203c inset}:global(.bpk-no-touch-support) .bpk-chip--default:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #05203c inset}.bpk-chip--default:active:not(:disabled){box-shadow:0 0 0 1px #05203c inset}.bpk-chip--default-selected{color:#fff;color:var(--bpk-chip-default-selected-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-chip-default-selected-background-color, rgb(5, 32, 60));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--default-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}:global(.bpk-no-touch-support) .bpk-chip--default-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--default-selected:active:not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--default-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--default-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--default-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--default-dismissible__trailing-accessory-view{fill:rgba(255,255,255,.5)}.bpk-chip--default-disabled{box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--on-image{background-color:#fff;color:#161616;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-no-touch-support .bpk-chip--on-image:hover:not(:active):not(:disabled){background-color:#eff3f8}:global(.bpk-no-touch-support) .bpk-chip--on-image:hover:not(:active):not(:disabled){background-color:#eff3f8}.bpk-chip--on-image:active:not(:disabled){background-color:#eff3f8}.bpk-chip--on-image-selected{color:#fff;color:var(--bpk-chip-on-image-selected-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-chip--on-image-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-hover-background-color, rgb(5, 32, 60))}:global(.bpk-no-touch-support) .bpk-chip--on-image-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-hover-background-color, rgb(5, 32, 60))}.bpk-chip--on-image-selected:active:not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-active-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-chip--on-image-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--on-image-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--on-image-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--on-image-dismissible__trailing-accessory-view{fill:rgba(255,255,255,.5)}.bpk-chip--on-image-disabled{box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-chip--disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}
+.bpk-chip{display:inline-flex;height:2rem;padding:0 1rem;align-items:center;border:none;border-radius:.5rem;cursor:pointer}.bpk-chip__leading-accessory-view{display:inline-flex;fill:currentcolor;margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-chip__leading-accessory-view{margin-left:.5rem;margin-right:0}.bpk-chip__trailing-accessory-view{display:inline-flex;fill:currentcolor;margin-left:.5rem;margin-right:-0.5rem}html[dir=rtl] .bpk-chip__trailing-accessory-view{margin-right:.5rem}html[dir=rtl] .bpk-chip__trailing-accessory-view{margin-left:-0.5rem}.bpk-chip--on-dark{background-color:rgba(0,0,0,0);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.5) inset}.bpk-no-touch-support .bpk-chip--on-dark:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #fff inset}:global(.bpk-no-touch-support) .bpk-chip--on-dark:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #fff inset}.bpk-chip--on-dark:active:not(:disabled){box-shadow:0 0 0 1px #fff inset}.bpk-chip--on-dark-selected{color:#161616;color:var(--bpk-chip-on-dark-selected-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-chip-on-dark-selected-background-color, rgb(255, 255, 255));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--on-dark-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}:global(.bpk-no-touch-support) .bpk-chip--on-dark-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--on-dark-selected:active:not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--on-dark-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--on-dark-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--on-dark-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--on-dark-dismissible__trailing-accessory-view{fill:#626971}.bpk-chip--on-dark-disabled{box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--default{background-color:rgba(0,0,0,0);color:#161616;box-shadow:0 0 0 1px #c1c7cf inset}.bpk-no-touch-support .bpk-chip--default:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #05203c inset}:global(.bpk-no-touch-support) .bpk-chip--default:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px #05203c inset}.bpk-chip--default:active:not(:disabled){box-shadow:0 0 0 1px #05203c inset}.bpk-chip--default-selected{color:#fff;color:var(--bpk-chip-default-selected-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-chip-default-selected-background-color, rgb(5, 32, 60));box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--default-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}:global(.bpk-no-touch-support) .bpk-chip--default-selected:hover:not(:active):not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--default-selected:active:not(:disabled){box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-no-touch-support .bpk-chip--default-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--default-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--default-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--default-dismissible__trailing-accessory-view{fill:rgba(255,255,255,.5)}.bpk-chip--default-disabled{box-shadow:0 0 0 1px rgba(0,0,0,0) inset}.bpk-chip--on-image{background-color:#fff;color:#161616;box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-no-touch-support .bpk-chip--on-image:hover:not(:active):not(:disabled){background-color:#eff3f8}:global(.bpk-no-touch-support) .bpk-chip--on-image:hover:not(:active):not(:disabled){background-color:#eff3f8}.bpk-chip--on-image:active:not(:disabled){background-color:#eff3f8}.bpk-chip--on-image-selected{color:#fff;color:var(--bpk-chip-on-image-selected-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-chip--on-image-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-hover-background-color, rgb(5, 32, 60))}:global(.bpk-no-touch-support) .bpk-chip--on-image-selected:hover:not(:active):not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-hover-background-color, rgb(5, 32, 60))}.bpk-chip--on-image-selected:active:not(:disabled){background-color:#05203c;background-color:var(--bpk-chip-on-image-selected-active-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-chip--on-image-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}:global(.bpk-no-touch-support) .bpk-chip--on-image-dismissible:hover:not(:active):not(:disabled) svg{fill:currentcolor}.bpk-chip--on-image-dismissible:active:not(:disabled) svg{fill:currentcolor}.bpk-chip--on-image-dismissible__trailing-accessory-view{fill:rgba(255,255,255,.5)}.bpk-chip--on-image-disabled{box-shadow:0px 1px 3px 0px rgba(37,32,31,.3)}.bpk-chip--disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2);cursor:not-allowed}.bpk-chip--icon-only{padding-inline-end:.5rem;padding-inline-start:.5rem}.bpk-chip--icon-only__leading-accessory-view{margin-left:0;margin-right:0}html[dir=rtl] .bpk-chip--icon-only__leading-accessory-view{margin-left:0;margin-right:0}

package/bpk-component-chip/src/commonTypes.d.ts

@@ -26,7 +26,7 @@ export declare const CHIP_TYPES: {
 };
 interface ButtonProps extends Omit<ComponentProps<'button'>, 'type'> {
   onClick: (event: SyntheticEvent<HTMLButtonElement>) => void | null;
-  children: ReactNode | string;
+  children?: ReactNode | string;
   type?: typeof CHIP_TYPES[keyof typeof CHIP_TYPES];
 }
 export interface CommonProps extends ButtonProps {

package/bpk-component-chip/src/commonTypes.js

@@ -16,33 +16,10 @@
  * limitations under the License.
  */
 
-import PropTypes from 'prop-types';
 export const CHIP_TYPES = {
   default: 'default',
   onDark: 'on-dark',
   onImage: 'on-image'
 };
 
-// onClick and children are already part of the button props, but we need to specify that they are required
-
-// TODO: Remove once chip examples have been migrated to TS
-export const COMMON_PROP_TYPES = {
-  accessibilityLabel: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired,
-  onClick: PropTypes.func.isRequired,
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  leadingAccessoryView: PropTypes.node,
-  selected: PropTypes.bool,
-  trailingAccessoryView: PropTypes.node,
-  type: PropTypes.oneOf(Object.values(CHIP_TYPES))
-};
-
-// TODO: Remove once chip examples have been migrated to TS
-export const COMMON_DEFAULT_PROPS = {
-  disabled: false,
-  leadingAccessoryView: null,
-  selected: false,
-  trailingAccessoryView: null,
-  type: CHIP_TYPES.default
-};
+// onClick is already part of the button props, but we need to specify that they are required

package/bpk-component-content-cards/src/BpkContentCard.js

@@ -40,11 +40,17 @@ const BpkContentCard = ({
       loading: "lazy"
     })
   }), /*#__PURE__*/_jsxs("div", {
-    children: [/*#__PURE__*/_jsx(BpkText, {
+    children: [/*#__PURE__*/_jsx(BpkText
+    // TODO: className to be removed.
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    , {
       className: getClassName('bpk-content-card--headline'),
       tagName: "h3",
       children: card.headline
-    }), /*#__PURE__*/_jsx(BpkText, {
+    }), /*#__PURE__*/_jsx(BpkText
+    // TODO: className to be removed.
+    // eslint-disable-next-line @skyscanner/rules/forbid-component-props
+    , {
       className: getClassName('bpk-content-card--description'),
       tagName: "p",
       children: card.description

package/bpk-component-datatable/src/BpkDataTable.js

@@ -21,8 +21,8 @@ import { useMemo, useState } from 'react';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { useTable, useSortBy } from 'react-table';
 import { cssModules } from "../../bpk-react-utils";
-import { SORT_DIRECTION_TYPES } from "./common-types";
 import BpkDataTableHeader from "./BpkDataTableHeader";
+import { SORT_DIRECTION_TYPES } from "./common-types";
 import { createColumnsSchema } from "./utils";
 import STYLES from "./BpkDataTable.module.css";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";