@skyscanner/backpack-web 33.3.1 → 33.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (277) hide show
  1. package/bpk-component-accordion/index.js +1 -1
  2. package/bpk-component-accordion/src/BpkAccordionItem.js +12 -13
  3. package/bpk-component-accordion/src/BpkAccordionItem.module.css +1 -1
  4. package/bpk-component-autosuggest/src/BpkAutosuggestSuggestion.js +5 -3
  5. package/bpk-component-banner-alert/index.js +1 -1
  6. package/bpk-component-banner-alert/src/AnimateAndFade.js +37 -35
  7. package/bpk-component-banner-alert/src/BpkBannerAlertInner.js +12 -6
  8. package/bpk-component-barchart/src/BpkBarchart.js +9 -10
  9. package/bpk-component-barchart/src/BpkBarchartBar.js +1 -2
  10. package/bpk-component-barchart/src/BpkBarchartBars.js +2 -2
  11. package/bpk-component-barchart/src/BpkBarchartDefs.js +1 -2
  12. package/bpk-component-barchart/src/BpkChartAxis.js +1 -2
  13. package/bpk-component-barchart/src/BpkChartDataTable.js +1 -2
  14. package/bpk-component-bottom-sheet/src/BpkBottomSheet.js +4 -6
  15. package/bpk-component-breadcrumb/src/BpkBreadcrumb.js +1 -2
  16. package/bpk-component-breadcrumb/src/BpkBreadcrumbItem.js +18 -14
  17. package/bpk-component-breadcrumb/src/BpkBreadcrumbItem.module.css +1 -1
  18. package/bpk-component-breakpoint/index.d.ts +2 -1
  19. package/bpk-component-breakpoint/src/BpkBreakpoint.js +7 -5
  20. package/bpk-component-breakpoint/src/useMediaQuery.js +7 -6
  21. package/bpk-component-button/index.js +5 -5
  22. package/bpk-component-button/src/BpkButtonDestructive.js +10 -9
  23. package/bpk-component-button/src/BpkButtonFeatured.js +10 -9
  24. package/bpk-component-button/src/BpkButtonLink.js +11 -10
  25. package/bpk-component-button/src/BpkButtonLinkOnDark.js +11 -10
  26. package/bpk-component-button/src/BpkButtonPrimary.js +2 -2
  27. package/bpk-component-button/src/BpkButtonPrimaryOnDark.js +10 -9
  28. package/bpk-component-button/src/BpkButtonPrimaryOnLight.js +10 -9
  29. package/bpk-component-button/src/BpkButtonSecondary.js +10 -10
  30. package/bpk-component-button/src/BpkButtonSecondaryOnDark.js +10 -9
  31. package/bpk-component-calendar/index.js +1 -1
  32. package/bpk-component-calendar/src/BpkCalendarContainer.js +3 -3
  33. package/bpk-component-calendar/src/BpkCalendarGrid.js +3 -2
  34. package/bpk-component-calendar/src/BpkCalendarGrid.module.css +1 -1
  35. package/bpk-component-calendar/src/BpkCalendarGridHeader.js +4 -1
  36. package/bpk-component-calendar/src/BpkCalendarGridTransition.js +6 -4
  37. package/bpk-component-calendar/src/BpkCalendarNav.js +10 -5
  38. package/bpk-component-calendar/src/Week.js +6 -3
  39. package/bpk-component-calendar/src/composeCalendar.js +9 -4
  40. package/bpk-component-calendar/src/date-utils.js +14 -14
  41. package/bpk-component-card/src/BpkCardWrapper.js +1 -2
  42. package/bpk-component-card/src/BpkDividedCard.js +19 -15
  43. package/bpk-component-card-button/src/BpkSaveButton.js +14 -6
  44. package/bpk-component-checkbox/src/BpkCheckbox.js +1 -2
  45. package/bpk-component-chip/index.d.ts +3 -5
  46. package/bpk-component-chip/index.js +3 -2
  47. package/bpk-component-chip/src/BpkDismissibleChip.js +7 -2
  48. package/bpk-component-chip/src/BpkIconChip.d.ts +25 -0
  49. package/bpk-component-chip/src/BpkIconChip.js +31 -0
  50. package/bpk-component-chip/src/BpkSelectableChip.d.ts +0 -2
  51. package/bpk-component-chip/src/BpkSelectableChip.js +5 -6
  52. package/bpk-component-chip/src/BpkSelectableChip.module.css +1 -1
  53. package/bpk-component-chip/src/commonTypes.d.ts +1 -1
  54. package/bpk-component-chip/src/commonTypes.js +1 -24
  55. package/bpk-component-close-button/src/BpkCloseButton.js +9 -5
  56. package/bpk-component-close-button/src/BpkCloseButton.module.css +1 -1
  57. package/bpk-component-content-cards/src/BpkContentCard.js +9 -4
  58. package/bpk-component-content-cards/src/BpkContentCards.js +2 -7
  59. package/bpk-component-content-cards/src/BpkContentCards.module.css +1 -1
  60. package/bpk-component-datatable/src/BpkDataTable.js +4 -4
  61. package/bpk-component-datatable/src/BpkDataTableHeader.js +14 -11
  62. package/bpk-component-datatable/src/BpkDataTableHeader.module.css +1 -1
  63. package/bpk-component-datepicker/src/BpkDatepicker.js +3 -5
  64. package/bpk-component-description-list/index.js +1 -1
  65. package/bpk-component-description-list/src/ComponentFactory.js +10 -5
  66. package/bpk-component-dialog/src/BpkDialog.js +7 -6
  67. package/bpk-component-dialog/src/BpkDialog.module.css +1 -1
  68. package/bpk-component-dialog/src/BpkDialogInner.js +7 -5
  69. package/bpk-component-drawer/src/BpkDrawer.js +1 -4
  70. package/bpk-component-drawer/src/BpkDrawerContent.js +8 -7
  71. package/bpk-component-fieldset/src/BpkFieldset.js +10 -9
  72. package/bpk-component-flare/index.js +2 -2
  73. package/bpk-component-flare/src/BpkContentBubble.js +5 -3
  74. package/bpk-component-flare/src/BpkFlareBar.js +15 -7
  75. package/bpk-component-floating-notification/src/BpkFloatingNotification.js +10 -4
  76. package/bpk-component-form-validation/src/BpkFormValidation.js +6 -6
  77. package/bpk-component-graphic-promotion/src/BpkGraphicPromo.js +10 -14
  78. package/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.css +1 -1
  79. package/bpk-component-grid-toggle/src/BpkGridToggle.js +8 -6
  80. package/bpk-component-horizontal-nav/src/BpkHorizontalNav.js +16 -14
  81. package/bpk-component-horizontal-nav/src/BpkHorizontalNav.module.css +1 -1
  82. package/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.js +2 -2
  83. package/bpk-component-icon/index.js +1 -1
  84. package/bpk-component-icon/lg/ai.js +1 -2
  85. package/bpk-component-icon/lg/aircraft.js +1 -2
  86. package/bpk-component-icon/lg/beach.js +1 -2
  87. package/bpk-component-icon/lg/call-back.js +1 -2
  88. package/bpk-component-icon/lg/camper-van.js +1 -2
  89. package/bpk-component-icon/lg/car-wash.js +1 -2
  90. package/bpk-component-icon/lg/cars.js +1 -2
  91. package/bpk-component-icon/lg/clean.js +1 -2
  92. package/bpk-component-icon/lg/cloakroom.js +1 -2
  93. package/bpk-component-icon/lg/content--copy.js +1 -2
  94. package/bpk-component-icon/lg/data.js +1 -2
  95. package/bpk-component-icon/lg/depart.js +1 -2
  96. package/bpk-component-icon/lg/dot.js +20 -0
  97. package/bpk-component-icon/lg/download.js +1 -2
  98. package/bpk-component-icon/lg/education.js +1 -2
  99. package/bpk-component-icon/lg/explore.js +1 -2
  100. package/bpk-component-icon/lg/fast-track.js +1 -2
  101. package/bpk-component-icon/lg/fast-train.js +1 -2
  102. package/bpk-component-icon/lg/flight-landing.js +1 -2
  103. package/bpk-component-icon/lg/flight-takeoff.js +1 -2
  104. package/bpk-component-icon/lg/flight.js +1 -2
  105. package/bpk-component-icon/lg/legroom--extra.js +1 -2
  106. package/bpk-component-icon/lg/legroom--normal.js +1 -2
  107. package/bpk-component-icon/lg/legroom--reduced.js +1 -2
  108. package/bpk-component-icon/lg/logout.js +1 -2
  109. package/bpk-component-icon/lg/lounge.js +1 -2
  110. package/bpk-component-icon/lg/mail.js +1 -2
  111. package/bpk-component-icon/lg/mileage.js +1 -2
  112. package/bpk-component-icon/lg/new-window.js +1 -2
  113. package/bpk-component-icon/lg/plane-seat.js +1 -2
  114. package/bpk-component-icon/lg/return.js +1 -2
  115. package/bpk-component-icon/lg/scales.js +1 -2
  116. package/bpk-component-icon/lg/share--ios.js +1 -2
  117. package/bpk-component-icon/lg/social-distancing.js +1 -2
  118. package/bpk-component-icon/lg/speaker.js +1 -2
  119. package/bpk-component-icon/lg/taxi.js +1 -2
  120. package/bpk-component-icon/lg/unmute.js +1 -2
  121. package/bpk-component-icon/lg/wallet.js +1 -2
  122. package/bpk-component-icon/lg/weather--cloudy.js +1 -2
  123. package/bpk-component-icon/lg/weather--partly-cloudy.js +1 -2
  124. package/bpk-component-icon/lg/weather--rain.js +1 -2
  125. package/bpk-component-icon/lg/weather--thunderstorm.js +1 -2
  126. package/bpk-component-icon/lg/window--reduce.js +1 -2
  127. package/bpk-component-icon/lg/world--emea.js +1 -2
  128. package/bpk-component-icon/sm/ai.js +1 -2
  129. package/bpk-component-icon/sm/aircraft.js +1 -2
  130. package/bpk-component-icon/sm/beach.js +1 -2
  131. package/bpk-component-icon/sm/bus.js +1 -2
  132. package/bpk-component-icon/sm/call-back.js +1 -2
  133. package/bpk-component-icon/sm/camper-van.js +1 -2
  134. package/bpk-component-icon/sm/car-wash.js +1 -2
  135. package/bpk-component-icon/sm/cars.js +1 -2
  136. package/bpk-component-icon/sm/chauffeur.js +1 -2
  137. package/bpk-component-icon/sm/clean.js +1 -2
  138. package/bpk-component-icon/sm/content--copy.js +1 -2
  139. package/bpk-component-icon/sm/data.js +1 -2
  140. package/bpk-component-icon/sm/depart.js +1 -2
  141. package/bpk-component-icon/sm/direct.js +1 -2
  142. package/bpk-component-icon/sm/dot.js +20 -0
  143. package/bpk-component-icon/sm/download.js +1 -2
  144. package/bpk-component-icon/sm/education.js +1 -2
  145. package/bpk-component-icon/sm/explore.js +1 -2
  146. package/bpk-component-icon/sm/fast-track.js +1 -2
  147. package/bpk-component-icon/sm/fast-train.js +1 -2
  148. package/bpk-component-icon/sm/flight-landing.js +1 -2
  149. package/bpk-component-icon/sm/flight-takeoff.js +1 -2
  150. package/bpk-component-icon/sm/flight.js +1 -2
  151. package/bpk-component-icon/sm/hotels--jacuzzi.js +1 -2
  152. package/bpk-component-icon/sm/infant.js +1 -2
  153. package/bpk-component-icon/sm/legroom--extra.js +1 -2
  154. package/bpk-component-icon/sm/legroom--normal.js +1 -2
  155. package/bpk-component-icon/sm/legroom--reduced.js +1 -2
  156. package/bpk-component-icon/sm/logout.js +1 -2
  157. package/bpk-component-icon/sm/mail.js +1 -2
  158. package/bpk-component-icon/sm/mileage.js +1 -2
  159. package/bpk-component-icon/sm/new-window.js +1 -2
  160. package/bpk-component-icon/sm/onsen.js +1 -2
  161. package/bpk-component-icon/sm/plane-seat.js +1 -2
  162. package/bpk-component-icon/sm/return.js +1 -2
  163. package/bpk-component-icon/sm/share--ios.js +1 -2
  164. package/bpk-component-icon/sm/social-distancing.js +1 -2
  165. package/bpk-component-icon/sm/taxi.js +1 -2
  166. package/bpk-component-icon/sm/unmute.js +1 -2
  167. package/bpk-component-icon/sm/weather--cloudy.js +1 -2
  168. package/bpk-component-icon/sm/weather--rain.js +1 -2
  169. package/bpk-component-icon/sm/weather--thunderstorm.js +1 -2
  170. package/bpk-component-icon/sm/weather--wind.js +1 -2
  171. package/bpk-component-icon/sm/window--reduce.js +1 -2
  172. package/bpk-component-icon/src/classNameModifierHOCFactory.js +3 -0
  173. package/bpk-component-icon/src/withDescription.js +1 -2
  174. package/bpk-component-icon/src/withRtlSupport.js +1 -1
  175. package/bpk-component-image/index.js +2 -2
  176. package/bpk-component-image/src/BpkBackgroundImage.js +4 -3
  177. package/bpk-component-image/src/BpkImage.js +6 -4
  178. package/bpk-component-infinite-scroll/src/withInfiniteScroll.js +4 -5
  179. package/bpk-component-info-banner/src/AnimateAndFade.js +37 -35
  180. package/bpk-component-info-banner/src/BpkInfoBanner.module.css +1 -1
  181. package/bpk-component-info-banner/src/BpkInfoBannerInner.js +17 -14
  182. package/bpk-component-input/index.js +1 -1
  183. package/bpk-component-input/src/BpkClearButton.js +3 -1
  184. package/bpk-component-input/src/BpkInput.js +6 -4
  185. package/bpk-component-input/src/withOpenEvents.js +4 -1
  186. package/bpk-component-label/src/BpkLabel.js +1 -2
  187. package/bpk-component-link/index.js +2 -2
  188. package/bpk-component-list/src/BpkList.js +2 -2
  189. package/bpk-component-loading-button/src/BpkLoadingButton.js +7 -5
  190. package/bpk-component-map/index.js +4 -4
  191. package/bpk-component-map/src/BpkIconMarker.js +2 -3
  192. package/bpk-component-map/src/BpkMap.js +2 -2
  193. package/bpk-component-map/src/BpkPriceMarker.js +8 -7
  194. package/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker.js +2 -3
  195. package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js +1 -9
  196. package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.module.css +1 -1
  197. package/bpk-component-modal/index.js +4 -3
  198. package/bpk-component-modal/src/BpkModal.d.ts +2 -1
  199. package/bpk-component-modal/src/BpkModal.js +4 -2
  200. package/bpk-component-modal/src/BpkModalInner.d.ts +2 -0
  201. package/bpk-component-modal/src/BpkModalInner.js +25 -10
  202. package/bpk-component-modal/src/BpkModalInner.module.css +1 -1
  203. package/bpk-component-modal/src/BpkModalV2/BpKModal.module.css +1 -1
  204. package/bpk-component-modal/src/BpkModalV2/BpkModal.d.ts +2 -0
  205. package/bpk-component-modal/src/BpkModalV2/BpkModal.js +20 -10
  206. package/bpk-component-navigation-bar/index.js +1 -1
  207. package/bpk-component-navigation-bar/src/BpkNavigationBar.js +8 -7
  208. package/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.js +7 -7
  209. package/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.js +8 -8
  210. package/bpk-component-nudger/index.js +1 -1
  211. package/bpk-component-nudger/src/BpkConfigurableNudger.js +17 -6
  212. package/bpk-component-nudger/src/BpkNudger.js +16 -10
  213. package/bpk-component-nudger/src/BpkNudger.module.css +1 -1
  214. package/bpk-component-overlay/src/BpkOverlay.js +1 -2
  215. package/bpk-component-page-indicator/src/BpkPageIndicator.js +1 -2
  216. package/bpk-component-page-indicator/src/BpkPageIndicator.module.css +1 -1
  217. package/bpk-component-page-indicator/src/NavButton.js +1 -1
  218. package/bpk-component-pagination/src/BpkPagination.js +1 -2
  219. package/bpk-component-pagination/src/BpkPaginationList.js +1 -1
  220. package/bpk-component-pagination/src/BpkPaginationNudger.js +14 -6
  221. package/bpk-component-pagination/src/BpkPaginationPage.js +4 -1
  222. package/bpk-component-phone-input/src/BpkPhoneInput.js +16 -6
  223. package/bpk-component-popover/src/BpkPopover.js +8 -6
  224. package/bpk-component-popover/src/BpkPopoverPortal.js +8 -7
  225. package/bpk-component-popover/src/keyboardFocusScope.js +1 -1
  226. package/bpk-component-price/src/BpkPrice.js +19 -8
  227. package/bpk-component-progress/src/BpkProgress.js +1 -2
  228. package/bpk-component-radio/src/BpkRadio.js +1 -2
  229. package/bpk-component-rating/src/BpkRating.js +19 -8
  230. package/bpk-component-rtl-toggle/src/BpkRtlToggle.js +0 -4
  231. package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.js +7 -5
  232. package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.js +7 -4
  233. package/bpk-component-section-header/src/BpkSectionHeader.js +7 -7
  234. package/bpk-component-section-header/src/BpkSectionHeader.module.css +1 -1
  235. package/bpk-component-section-list/index.js +1 -1
  236. package/bpk-component-section-list/src/BpkSectionListItem.js +9 -8
  237. package/bpk-component-section-list/src/BpkSectionListItem.module.css +1 -1
  238. package/bpk-component-section-list/src/BpkSectionListSection.js +2 -3
  239. package/bpk-component-select/src/BpkSelect.js +1 -2
  240. package/bpk-component-skeleton/index.js +21 -0
  241. package/bpk-component-skeleton/src/BpkBaseSkeleton.js +30 -0
  242. package/bpk-component-skeleton/src/BpkBaseSkeleton.module.css +18 -0
  243. package/bpk-component-skeleton/src/BpkSkeleton.js +38 -0
  244. package/bpk-component-skeleton/src/BpkSkeleton.module.css +18 -0
  245. package/bpk-component-skeleton/src/common-types.js +33 -0
  246. package/bpk-component-slider/src/BpkSlider.js +2 -1
  247. package/bpk-component-spinner/index.js +3 -3
  248. package/bpk-component-spinner/src/BpkExtraLargeSpinner.js +8 -7
  249. package/bpk-component-spinner/src/BpkLargeSpinner.js +8 -7
  250. package/bpk-component-spinner/src/BpkSpinner.js +8 -7
  251. package/bpk-component-split-input/src/BpkInputField.js +2 -2
  252. package/bpk-component-split-input/src/BpkSplitInput.js +3 -3
  253. package/bpk-component-star-rating/index.js +4 -4
  254. package/bpk-component-star-rating/src/BpkInteractiveStar.js +6 -3
  255. package/bpk-component-star-rating/src/BpkInteractiveStarRating.js +1 -1
  256. package/bpk-component-star-rating/src/BpkStar.js +18 -18
  257. package/bpk-component-star-rating/src/BpkStar.module.css +1 -1
  258. package/bpk-component-swap-button/src/BpkSwapButton.js +2 -1
  259. package/bpk-component-switch/src/BpkSwitch.js +1 -2
  260. package/bpk-component-table/index.js +2 -2
  261. package/bpk-component-text/src/BpkText.js +10 -5
  262. package/bpk-component-theme-toggle/src/BpkThemeToggle.js +7 -6
  263. package/bpk-component-theme-toggle/src/updateOnThemeChange.js +1 -1
  264. package/bpk-component-tooltip/src/BpkTooltip.js +2 -3
  265. package/bpk-component-tooltip/src/BpkTooltipPortal.js +7 -6
  266. package/bpk-mixins/_chips.scss +9 -0
  267. package/bpk-react-utils/index.js +3 -3
  268. package/bpk-react-utils/src/BpkDialogWrapper/BpkDialogWrapper.js +2 -2
  269. package/bpk-react-utils/src/Portal.js +1 -0
  270. package/bpk-react-utils/src/withDefaultProps.js +4 -1
  271. package/bpk-scrim-utils/src/withScrim.js +3 -3
  272. package/bpk-scrim-utils/src/withScrimmedPortal.js +1 -1
  273. package/bpk-theming/src/BpkThemeProvider.js +1 -1
  274. package/package.json +2 -2
  275. package/unstable__bpk-mixins/_chips.scss +9 -0
  276. package/bpk-component-button/src/commonButtonTests.js +0 -133
  277. package/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.module.css +0 -18
@@ -75,10 +75,9 @@ LgSpinner.defaultProps = {
75
75
  viewBox: "0 0 24 24"
76
76
  };
77
77
  import { cssModules } from "../../bpk-react-utils";
78
- import STYLES from "./BpkSpinner.module.css";
79
78
  import SPINNER_TYPES from "./spinnerTypes";
80
- import { jsx as _jsx } from "react/jsx-runtime";
81
- import { jsxs as _jsxs } from "react/jsx-runtime";
79
+ import STYLES from "./BpkSpinner.module.css";
80
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
82
81
  const getClassName = cssModules(STYLES);
83
82
  const BpkLargeSpinner = props => {
84
83
  const {
@@ -88,11 +87,13 @@ const BpkLargeSpinner = props => {
88
87
  ...rest
89
88
  } = props;
90
89
  const classNames = getClassName('bpk-spinner', 'bpk-spinner--large', `bpk-spinner--${type}`, alignToButton && 'bpk-spinner--align-to-large-button', className);
91
-
92
- // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
93
- return /*#__PURE__*/_jsx(LgSpinner, {
90
+ return /*#__PURE__*/_jsx("span", {
94
91
  className: classNames,
95
- ...rest
92
+ children: /*#__PURE__*/_jsx(LgSpinner
93
+ // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
94
+ , {
95
+ ...rest
96
+ })
96
97
  });
97
98
  };
98
99
  BpkLargeSpinner.propTypes = {
@@ -62,10 +62,9 @@ SmSpinner.defaultProps = {
62
62
  viewBox: "0 0 16 16"
63
63
  };
64
64
  import { cssModules } from "../../bpk-react-utils";
65
- import STYLES from "./BpkSpinner.module.css";
66
65
  import SPINNER_TYPES from "./spinnerTypes";
67
- import { jsx as _jsx } from "react/jsx-runtime";
68
- import { jsxs as _jsxs } from "react/jsx-runtime";
66
+ import STYLES from "./BpkSpinner.module.css";
67
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
69
68
  const getClassName = cssModules(STYLES);
70
69
  const BpkSpinner = props => {
71
70
  const {
@@ -75,11 +74,13 @@ const BpkSpinner = props => {
75
74
  ...rest
76
75
  } = props;
77
76
  const classNames = getClassName('bpk-spinner', `bpk-spinner--${type}`, alignToButton && 'bpk-spinner--align-to-button', className);
78
-
79
- // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
80
- return /*#__PURE__*/_jsx(SmSpinner, {
77
+ return /*#__PURE__*/_jsx("span", {
81
78
  className: classNames,
82
- ...rest
79
+ children: /*#__PURE__*/_jsx(SmSpinner
80
+ // $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
81
+ , {
82
+ ...rest
83
+ })
83
84
  });
84
85
  };
85
86
  BpkSpinner.propTypes = {
@@ -14,8 +14,8 @@
14
14
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
- */import { Component } from 'react';
18
- import PropTypes from 'prop-types';
17
+ */import PropTypes from 'prop-types';
18
+ import { Component } from 'react';
19
19
  import BpkInput from "../../bpk-component-input";
20
20
  import { cssModules } from "../../bpk-react-utils";
21
21
  import STYLES from "./BpkInputField.module.css";
@@ -14,10 +14,10 @@
14
14
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
- */import { Component } from 'react';
18
- import PropTypes from 'prop-types';
19
- import { cssModules } from "../../bpk-react-utils";
17
+ */import PropTypes from 'prop-types';
18
+ import { Component } from 'react';
20
19
  import { INPUT_TYPES } from "../../bpk-component-input";
20
+ import { cssModules } from "../../bpk-react-utils";
21
21
  import InputField from "./BpkInputField";
22
22
  import STYLES from "./BpkSplitInput.module.css";
23
23
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -14,11 +14,11 @@
14
14
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
- */import BpkStar, { BpkStarNonRtl, STAR_TYPES } from "./src/BpkStar";
18
- import BpkInteractiveStar from "./src/BpkInteractiveStar";
19
- import BpkStarRating, { ROUNDING_TYPES } from "./src/BpkStarRating";
17
+ */import BpkInteractiveStar from "./src/BpkInteractiveStar";
20
18
  import BpkInteractiveStarRating from "./src/BpkInteractiveStarRating";
21
- import withInteractiveStarRatingState from "./src/withInteractiveStarRatingState";
19
+ import BpkStar, { BpkStarNonRtl, STAR_TYPES } from "./src/BpkStar";
20
+ import BpkStarRating, { ROUNDING_TYPES } from "./src/BpkStarRating";
22
21
  import themeAttributes from "./src/themeAttributes";
22
+ import withInteractiveStarRatingState from "./src/withInteractiveStarRatingState";
23
23
  export { BpkStar, BpkStarNonRtl, STAR_TYPES, ROUNDING_TYPES, BpkInteractiveStar, BpkInteractiveStarRating, withInteractiveStarRatingState, themeAttributes };
24
24
  export default BpkStarRating;
@@ -44,10 +44,13 @@ const BpkInteractiveStar = props => {
44
44
  className: buttonClassNames,
45
45
  "aria-pressed": selected,
46
46
  type: "button",
47
- children: /*#__PURE__*/_jsx(BpkStarNonRtl, {
47
+ children: /*#__PURE__*/_jsx("div", {
48
48
  className: iconClassNames,
49
- type: type,
50
- ...rest
49
+ children: /*#__PURE__*/_jsx(BpkStarNonRtl, {
50
+ type: type
51
+ /* $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md */,
52
+ ...rest
53
+ })
51
54
  })
52
55
  });
53
56
  };
@@ -16,8 +16,8 @@
16
16
  * limitations under the License.
17
17
  */import PropTypes from 'prop-types';
18
18
  import { cssModules } from "../../bpk-react-utils";
19
- import { STAR_TYPES } from "./BpkStar";
20
19
  import BpkInteractiveStar from "./BpkInteractiveStar";
20
+ import { STAR_TYPES } from "./BpkStar";
21
21
  import STYLES from "./BpkStarRating.module.css";
22
22
  import { jsx as _jsx } from "react/jsx-runtime";
23
23
  const getClassName = cssModules(STYLES);
@@ -15,13 +15,13 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */import PropTypes from 'prop-types';
18
- import SmallIcon from "../../bpk-component-icon/sm/star";
18
+ import { withRtlSupport } from "../../bpk-component-icon";
19
19
  import LargeIcon from "../../bpk-component-icon/lg/star";
20
- import OutlineSmallIcon from "../../bpk-component-icon/sm/star-outline";
20
+ import HalfLargeIcon from "../../bpk-component-icon/lg/star-half";
21
21
  import OutlineLargeIcon from "../../bpk-component-icon/lg/star-outline";
22
+ import SmallIcon from "../../bpk-component-icon/sm/star";
22
23
  import HalfSmallIcon from "../../bpk-component-icon/sm/star-half";
23
- import HalfLargeIcon from "../../bpk-component-icon/lg/star-half";
24
- import { withRtlSupport } from "../../bpk-component-icon";
24
+ import OutlineSmallIcon from "../../bpk-component-icon/sm/star-outline";
25
25
  import { cssModules } from "../../bpk-react-utils";
26
26
  import STYLES from "./BpkStar.module.css";
27
27
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -54,26 +54,26 @@ const BpkStar = props => {
54
54
  /*#__PURE__*/
55
55
  // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
56
56
  _jsx("span", {
57
- className: containerClassNames,
57
+ className: [containerClassNames, halfIconClassNames],
58
58
  ...rest,
59
- children: /*#__PURE__*/_jsx(HalfIcon, {
60
- className: halfIconClassNames
61
- })
59
+ children: /*#__PURE__*/_jsx(HalfIcon, {})
62
60
  })
63
61
  );
64
62
  }
65
- return type === STAR_TYPES.FULL ?
66
- /*#__PURE__*/
67
- // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
68
- _jsx(Icon, {
63
+ return type === STAR_TYPES.FULL ? /*#__PURE__*/_jsx("span", {
69
64
  className: iconClassNames,
70
- ...rest
71
- }) :
72
- /*#__PURE__*/
73
- // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
74
- _jsx(OutlineIcon, {
65
+ children: /*#__PURE__*/_jsx(Icon
66
+ // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
67
+ , {
68
+ ...rest
69
+ })
70
+ }) : /*#__PURE__*/_jsx("span", {
75
71
  className: iconClassNames,
76
- ...rest
72
+ children: /*#__PURE__*/_jsx(OutlineIcon
73
+ // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
74
+ , {
75
+ ...rest
76
+ })
77
77
  });
78
78
  };
79
79
  BpkStar.propTypes = {
@@ -15,4 +15,4 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
- .bpk-star{display:inline-block;vertical-align:text-bottom;fill:rgba(0,0,0,.2)}.bpk-star--large{width:1.5rem;height:1.5rem;vertical-align:bottom}.bpk-star--half{position:absolute;left:0}.bpk-star--filled{fill:#f55d42;fill:var(--bpk-star-rating-filled-color, rgb(245, 93, 66))}.bpk-star__container{display:inline-block;width:1rem;height:1rem}.bpk-star__container--half-star{position:relative;vertical-align:text-bottom}.bpk-star__container--large{width:1.5rem;height:1.5rem;vertical-align:bottom}
18
+ .bpk-star{display:inline-flex;width:1rem;height:1rem;vertical-align:text-bottom;fill:rgba(0,0,0,.2)}.bpk-star--large{width:1.5rem;height:1.5rem;vertical-align:bottom}.bpk-star--half{position:absolute;left:0}.bpk-star--filled{fill:#f55d42;fill:var(--bpk-star-rating-filled-color, rgb(245, 93, 66))}.bpk-star__container{display:inline-flex;width:1rem;height:1rem}.bpk-star__container--half-star{position:relative;vertical-align:text-bottom}.bpk-star__container--large{width:1.5rem;height:1.5rem;vertical-align:bottom}
@@ -17,9 +17,10 @@
17
17
  */
18
18
 
19
19
  import { useState } from 'react';
20
- import { cssModules } from "../../bpk-react-utils";
20
+
21
21
  // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
22
22
  import SwapVertical from "../../bpk-component-icon/sm/swap--vertical";
23
+ import { cssModules } from "../../bpk-react-utils";
23
24
  import STYLES from "./BpkSwapButton.module.css";
24
25
  import { jsx as _jsx } from "react/jsx-runtime";
25
26
  const getClassName = cssModules(STYLES);
@@ -17,8 +17,7 @@
17
17
  */import PropTypes from 'prop-types';
18
18
  import { cssModules } from "../../bpk-react-utils";
19
19
  import STYLES from "./BpkSwitch.module.css";
20
- import { jsx as _jsx } from "react/jsx-runtime";
21
- import { jsxs as _jsxs } from "react/jsx-runtime";
20
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
22
21
  const getClassName = cssModules(STYLES);
23
22
  const BpkSwitch = props => {
24
23
  const {
@@ -15,9 +15,9 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */import BpkTable from "./src/BpkTable";
18
- import BpkTableHead from "./src/BpkTableHead";
19
18
  import BpkTableBody from "./src/BpkTableBody";
20
- import BpkTableRow from "./src/BpkTableRow";
21
19
  import BpkTableCell from "./src/BpkTableCell";
20
+ import BpkTableHead from "./src/BpkTableHead";
22
21
  import BpkTableHeadCell from "./src/BpkTableHeadCell";
22
+ import BpkTableRow from "./src/BpkTableRow";
23
23
  export { BpkTable, BpkTableHead, BpkTableBody, BpkTableRow, BpkTableCell, BpkTableHeadCell };
@@ -57,10 +57,15 @@ const BpkText = ({
57
57
  ...rest
58
58
  }) => {
59
59
  const classNames = getClassName('bpk-text', `bpk-text--${textStyle}`, className);
60
- return /*#__PURE__*/_jsx(TagName, {
61
- className: classNames,
62
- ...rest,
63
- children: children
64
- });
60
+ return (
61
+ /*#__PURE__*/
62
+ // Allowed, TagName is always a dom element.
63
+ // eslint-disable-next-line @skyscanner/rules/forbid-component-props
64
+ _jsx(TagName, {
65
+ className: classNames,
66
+ ...rest,
67
+ children: children
68
+ })
69
+ );
65
70
  };
66
71
  export default BpkText;
@@ -20,11 +20,10 @@ import { Component } from 'react';
20
20
  import BpkLabel from "../../bpk-component-label";
21
21
  import BpkSelect from "../../bpk-component-select";
22
22
  import { cssModules } from "../../bpk-react-utils";
23
- import STYLES from "./BpkThemeToggle.module.css";
24
23
  import bpkCustomThemes from "./theming";
25
24
  import { getHtmlElement, THEME_CHANGE_EVENT } from "./utils";
26
- import { jsx as _jsx } from "react/jsx-runtime";
27
- import { jsxs as _jsxs } from "react/jsx-runtime";
25
+ import STYLES from "./BpkThemeToggle.module.css";
26
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
28
27
  const inputId = 'theme-select';
29
28
  const getClassName = cssModules(STYLES);
30
29
  const availableThemes = Object.keys(bpkCustomThemes);
@@ -82,10 +81,12 @@ class BpkThemeToggle extends Component {
82
81
  } = this.props;
83
82
  return /*#__PURE__*/_jsxs("div", {
84
83
  ...rest,
85
- children: [/*#__PURE__*/_jsx(BpkLabel, {
84
+ children: [/*#__PURE__*/_jsx("span", {
86
85
  className: getClassName('bpk-theme-toggle__label'),
87
- htmlFor: inputId,
88
- children: "Change theme"
86
+ children: /*#__PURE__*/_jsx(BpkLabel, {
87
+ htmlFor: inputId,
88
+ children: "Change theme"
89
+ })
89
90
  }), /*#__PURE__*/_jsxs(BpkSelect, {
90
91
  id: inputId,
91
92
  name: inputId,
@@ -16,8 +16,8 @@
16
16
  * limitations under the License.
17
17
  */
18
18
 
19
- import { Component } from 'react';
20
19
  import PropTypes from 'prop-types';
20
+ import { Component } from 'react';
21
21
  import { wrapDisplayName } from "../../bpk-react-utils";
22
22
  import { getHtmlElement, THEME_CHANGE_EVENT } from "./utils";
23
23
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -23,10 +23,9 @@ The actual component that developers create (i.e. the default export from this p
23
23
  */
24
24
 
25
25
  import { TransitionInitialMount, cssModules } from "../../bpk-react-utils";
26
- import STYLES from "./BpkTooltip.module.css";
27
26
  import { ARROW_ID, TOOLTIP_TYPES } from "./constants";
28
- import { jsx as _jsx } from "react/jsx-runtime";
29
- import { jsxs as _jsxs } from "react/jsx-runtime";
27
+ import STYLES from "./BpkTooltip.module.css";
28
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
30
29
  const getClassName = cssModules(STYLES);
31
30
  const BpkTooltip = ({
32
31
  children,
@@ -16,15 +16,13 @@
16
16
  * limitations under the License.
17
17
  */
18
18
 
19
- import { createPopper } from '@popperjs/core';
20
19
  import { cloneElement, Component } from 'react';
20
+ import { createPopper } from '@popperjs/core';
21
21
  import { Portal, cssModules } from "../../bpk-react-utils";
22
22
  import BpkTooltip from "./BpkTooltip";
23
- import STYLES from "./BpkTooltip.module.css";
24
23
  import { TOOLTIP_TYPES } from "./constants";
25
- import { jsx as _jsx } from "react/jsx-runtime";
26
- import { Fragment as _Fragment } from "react/jsx-runtime";
27
- import { jsxs as _jsxs } from "react/jsx-runtime";
24
+ import STYLES from "./BpkTooltip.module.css";
25
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
28
26
  const getClassName = cssModules(STYLES);
29
27
  const hasTouchSupport = () => !!(typeof window !== 'undefined' && ('ontouchstart' in window || navigator.maxTouchPoints > 0));
30
28
  class BpkTooltipPortal extends Component {
@@ -139,7 +137,10 @@ class BpkTooltipPortal extends Component {
139
137
  onOpen: this.onOpen,
140
138
  onClose: this.closeTooltip,
141
139
  style: portalStyle,
142
- renderTarget: renderTarget,
140
+ renderTarget: renderTarget
141
+ // TODO: className to be removed
142
+ // eslint-disable-next-line @skyscanner/rules/forbid-component-props
143
+ ,
143
144
  className: classNames.join(' '),
144
145
  children: /*#__PURE__*/_jsx(BpkTooltip, {
145
146
  padded: padded,
@@ -237,4 +237,13 @@
237
237
  color: $bpk-text-disabled-day;
238
238
  cursor: not-allowed;
239
239
  }
240
+
241
+ &--icon-only {
242
+ padding-inline-end: bpk-spacing-md();
243
+ padding-inline-start: bpk-spacing-md();
244
+
245
+ &__leading-accessory-view {
246
+ @include bpk-margin-trailing(0);
247
+ }
248
+ }
240
249
  }
@@ -16,16 +16,16 @@
16
16
  * limitations under the License.
17
17
  */
18
18
 
19
- import wrapDisplayName from "./src/wrapDisplayName";
19
+ import { BpkDialogWrapper } from "./src/BpkDialogWrapper/BpkDialogWrapper";
20
20
  import Portal from "./src/Portal";
21
21
  import TransitionInitialMount from "./src/TransitionInitialMount";
22
22
  import cssModules from "./src/cssModules";
23
23
  // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
24
24
  import deprecated from "./src/deprecated";
25
25
  import { isDeviceIphone, isDeviceIpad, isDeviceIos } from "./src/deviceDetection";
26
- import withDefaultProps from "./src/withDefaultProps";
27
26
  import isRTL from "./src/isRTL";
28
- import { BpkDialogWrapper } from "./src/BpkDialogWrapper/BpkDialogWrapper";
27
+ import withDefaultProps from "./src/withDefaultProps";
28
+ import wrapDisplayName from "./src/wrapDisplayName";
29
29
  export { Portal, TransitionInitialMount, cssModules, deprecated, withDefaultProps, wrapDisplayName, isDeviceIphone, isDeviceIpad, isDeviceIos, isRTL, BpkDialogWrapper };
30
30
  export default {
31
31
  Portal,
@@ -17,12 +17,12 @@
17
17
  */
18
18
 
19
19
  import { useEffect, useRef, useState } from "react";
20
+
20
21
  // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
21
22
  import CSSTransition from 'react-transition-group/CSSTransition';
22
23
  import cssModules from "../cssModules";
23
24
  import STYLES from "./BpkDialogWrapper.module.css";
24
- import { jsx as _jsx } from "react/jsx-runtime";
25
- import { jsxs as _jsxs } from "react/jsx-runtime";
25
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
26
26
  const getClassName = cssModules(STYLES);
27
27
  ;
28
28
  // TODO: this check if the browser support the HTML dialog element. We can remove it once we drop support as a business for Safari 14
@@ -18,6 +18,7 @@
18
18
 
19
19
  import { Component } from 'react';
20
20
  import { createPortal } from 'react-dom';
21
+
21
22
  // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
22
23
  import assign from 'object-assign';
23
24
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -35,7 +35,10 @@ const withDefaultProps = (WrappedComponent, defaultProps) => {
35
35
  if (innerClassName) {
36
36
  classNames.push(innerClassName);
37
37
  }
38
- return /*#__PURE__*/_jsx(WrappedComponent, {
38
+ return /*#__PURE__*/_jsx(WrappedComponent
39
+ // General HOC difficult/impossible to remove
40
+ // eslint-disable-next-line @skyscanner/rules/forbid-component-props
41
+ , {
39
42
  className: classNames.join(' '),
40
43
  ...defaultRest,
41
44
  ...rest,
@@ -16,17 +16,17 @@
16
16
  * limitations under the License.
17
17
  */
18
18
 
19
+ import { Component } from 'react';
20
+
19
21
  // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
20
22
  import focusScope from 'a11y-focus-scope';
21
23
  // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
22
24
  import focusStore from 'a11y-focus-store';
23
- import { Component } from 'react';
24
25
  import { cssModules, isDeviceIpad, isDeviceIphone, wrapDisplayName } from "../../bpk-react-utils";
25
26
  import BpkScrim from "./BpkScrim";
26
27
  import { fixBody, lockScroll, restoreScroll, storeScroll, unfixBody, unlockScroll } from "./scroll-utils";
27
28
  import STYLES from "./bpk-scrim-content.module.css";
28
- import { jsx as _jsx } from "react/jsx-runtime";
29
- import { jsxs as _jsxs } from "react/jsx-runtime";
29
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
30
30
  const getClassName = cssModules(STYLES);
31
31
  const withScrim = WrappedComponent => {
32
32
  class WithScrim extends Component {
@@ -18,8 +18,8 @@
18
18
 
19
19
  import { useState, useEffect } from 'react';
20
20
  import { createPortal } from 'react-dom';
21
- import withScrim from "./withScrim";
22
21
  import BpkScrim from "./BpkScrim";
22
+ import withScrim from "./withScrim";
23
23
  import { jsx as _jsx } from "react/jsx-runtime";
24
24
  const getPortalElement = target => {
25
25
  const portalElement = target && typeof target === 'function' ? target() : null;
@@ -16,8 +16,8 @@
16
16
  * limitations under the License.
17
17
  */
18
18
 
19
- import { Component } from 'react';
20
19
  import PropTypes from 'prop-types';
20
+ import { Component } from 'react';
21
21
  import { jsx as _jsx } from "react/jsx-runtime";
22
22
  const uniq = (arr = []) => {
23
23
  const seen = {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyscanner/backpack-web",
3
- "version": "33.3.1",
3
+ "version": "33.5.0",
4
4
  "description": "Backpack Design System web library",
5
5
  "repository": {
6
6
  "type": "git",
@@ -24,7 +24,7 @@
24
24
  "dependencies": {
25
25
  "@popperjs/core": "^2.11.5",
26
26
  "@react-google-maps/api": "^2.12.0",
27
- "@skyscanner/bpk-foundations-web": "^17.5.3",
27
+ "@skyscanner/bpk-foundations-web": "^17.9.0",
28
28
  "@skyscanner/bpk-svgs": "^19.1.0",
29
29
  "a11y-focus-scope": "^1.1.3",
30
30
  "a11y-focus-store": "^1.0.0",
@@ -237,4 +237,13 @@
237
237
  color: tokens.$bpk-text-disabled-day;
238
238
  cursor: not-allowed;
239
239
  }
240
+
241
+ &--icon-only {
242
+ padding-inline-end: tokens.bpk-spacing-md();
243
+ padding-inline-start: tokens.bpk-spacing-md();
244
+
245
+ &__leading-accessory-view {
246
+ @include margins.bpk-margin-trailing(0);
247
+ }
248
+ }
240
249
  }
@@ -1,133 +0,0 @@
1
- /*
2
- * Backpack - Skyscanner's Design System
3
- *
4
- * Copyright 2016 Skyscanner Ltd
5
- *
6
- * Licensed under the Apache License, Version 2.0 (the "License");
7
- * you may not use this file except in compliance with the License.
8
- * You may obtain a copy of the License at
9
- *
10
- * http://www.apache.org/licenses/LICENSE-2.0
11
- *
12
- * Unless required by applicable law or agreed to in writing, software
13
- * distributed under the License is distributed on an "AS IS" BASIS,
14
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
15
- * See the License for the specific language governing permissions and
16
- * limitations under the License.
17
- */
18
-
19
- import { render } from '@testing-library/react';
20
- import { jsx as _jsx } from "react/jsx-runtime";
21
- const commonButtonTests = ButtonToTest => {
22
- describe('ButtonToTest', () => {
23
- it('should render correctly', () => {
24
- const {
25
- asFragment
26
- } = render( /*#__PURE__*/_jsx(ButtonToTest, {
27
- children: "My button"
28
- }));
29
- expect(asFragment()).toMatchSnapshot();
30
- });
31
- it('should render correctly with a "href" attribute', () => {
32
- const {
33
- asFragment
34
- } = render( /*#__PURE__*/_jsx(ButtonToTest, {
35
- href: "#",
36
- children: "My button"
37
- }));
38
- expect(asFragment()).toMatchSnapshot();
39
- });
40
- it('should render correctly with a "disabled" attribute', () => {
41
- const {
42
- asFragment
43
- } = render( /*#__PURE__*/_jsx(ButtonToTest, {
44
- disabled: true,
45
- children: "My button"
46
- }));
47
- expect(asFragment()).toMatchSnapshot();
48
- });
49
- it('should render correctly with a "large" attribute', () => {
50
- const {
51
- asFragment
52
- } = render( /*#__PURE__*/_jsx(ButtonToTest, {
53
- large: true,
54
- children: "My button"
55
- }));
56
- expect(asFragment()).toMatchSnapshot();
57
- });
58
- it('should render correctly with an "iconOnly" attribute', () => {
59
- const {
60
- asFragment
61
- } = render( /*#__PURE__*/_jsx(ButtonToTest, {
62
- iconOnly: true,
63
- children: "My button"
64
- }));
65
- expect(asFragment()).toMatchSnapshot();
66
- });
67
- it('should respect the class names entered as a string', () => {
68
- const {
69
- asFragment
70
- } = render( /*#__PURE__*/_jsx(ButtonToTest, {
71
- large: true,
72
- className: "custom-class-1 custom-class-2",
73
- children: "My button"
74
- }));
75
- expect(asFragment()).toMatchSnapshot();
76
- });
77
- it('should add only bpk specific classes if className prop is set to empty string', () => {
78
- const {
79
- asFragment
80
- } = render( /*#__PURE__*/_jsx(ButtonToTest, {
81
- large: true,
82
- className: "",
83
- children: "My button"
84
- }));
85
- expect(asFragment()).toMatchSnapshot();
86
- });
87
- it('should render correctly with "blank" attribute', () => {
88
- const {
89
- asFragment
90
- } = render( /*#__PURE__*/_jsx(ButtonToTest, {
91
- href: "#",
92
- blank: true,
93
- children: "My button"
94
- }));
95
- expect(asFragment()).toMatchSnapshot();
96
- });
97
- it('should render correctly with "rel" attribute', () => {
98
- const {
99
- asFragment
100
- } = render( /*#__PURE__*/_jsx(ButtonToTest, {
101
- href: "#",
102
- rel: "rel-attr",
103
- children: "My button"
104
- }));
105
- expect(asFragment()).toMatchSnapshot();
106
- });
107
- it('should render correctly with "blank" and "rel" attributes', () => {
108
- const {
109
- asFragment
110
- } = render( /*#__PURE__*/_jsx(ButtonToTest, {
111
- href: "#",
112
- blank: true,
113
- rel: "rel-overwrite",
114
- children: "My button"
115
- }));
116
- expect(asFragment()).toMatchSnapshot();
117
- });
118
- it('should render correctly with "disabled" and "href" attributes', () => {
119
- const {
120
- asFragment
121
- } = render( /*#__PURE__*/_jsx(ButtonToTest, {
122
- href: "#",
123
- disabled: true,
124
- children: "My button"
125
- }));
126
- expect(asFragment()).toMatchSnapshot();
127
- });
128
- });
129
- };
130
-
131
- // We export these to reuse them in other tests for buttons.
132
- // eslint-disable-next-line jest/no-export
133
- export default commonButtonTests;