@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.
- package/bpk-component-accordion/index.js +1 -1
- package/bpk-component-accordion/src/BpkAccordionItem.js +12 -13
- package/bpk-component-accordion/src/BpkAccordionItem.module.css +1 -1
- package/bpk-component-autosuggest/src/BpkAutosuggestSuggestion.js +5 -3
- package/bpk-component-banner-alert/index.js +1 -1
- package/bpk-component-banner-alert/src/AnimateAndFade.js +37 -35
- package/bpk-component-banner-alert/src/BpkBannerAlertInner.js +12 -6
- package/bpk-component-barchart/src/BpkBarchart.js +9 -10
- package/bpk-component-barchart/src/BpkBarchartBar.js +1 -2
- package/bpk-component-barchart/src/BpkBarchartBars.js +2 -2
- package/bpk-component-barchart/src/BpkBarchartDefs.js +1 -2
- package/bpk-component-barchart/src/BpkChartAxis.js +1 -2
- package/bpk-component-barchart/src/BpkChartDataTable.js +1 -2
- package/bpk-component-bottom-sheet/src/BpkBottomSheet.js +4 -6
- package/bpk-component-breadcrumb/src/BpkBreadcrumb.js +1 -2
- package/bpk-component-breadcrumb/src/BpkBreadcrumbItem.js +18 -14
- package/bpk-component-breadcrumb/src/BpkBreadcrumbItem.module.css +1 -1
- package/bpk-component-breakpoint/index.d.ts +2 -1
- package/bpk-component-breakpoint/src/BpkBreakpoint.js +7 -5
- package/bpk-component-breakpoint/src/useMediaQuery.js +7 -6
- package/bpk-component-button/index.js +5 -5
- package/bpk-component-button/src/BpkButtonDestructive.js +10 -9
- package/bpk-component-button/src/BpkButtonFeatured.js +10 -9
- package/bpk-component-button/src/BpkButtonLink.js +11 -10
- package/bpk-component-button/src/BpkButtonLinkOnDark.js +11 -10
- package/bpk-component-button/src/BpkButtonPrimary.js +2 -2
- package/bpk-component-button/src/BpkButtonPrimaryOnDark.js +10 -9
- package/bpk-component-button/src/BpkButtonPrimaryOnLight.js +10 -9
- package/bpk-component-button/src/BpkButtonSecondary.js +10 -10
- package/bpk-component-button/src/BpkButtonSecondaryOnDark.js +10 -9
- package/bpk-component-calendar/index.js +1 -1
- package/bpk-component-calendar/src/BpkCalendarContainer.js +3 -3
- package/bpk-component-calendar/src/BpkCalendarGrid.js +3 -2
- package/bpk-component-calendar/src/BpkCalendarGrid.module.css +1 -1
- package/bpk-component-calendar/src/BpkCalendarGridHeader.js +4 -1
- package/bpk-component-calendar/src/BpkCalendarGridTransition.js +6 -4
- package/bpk-component-calendar/src/BpkCalendarNav.js +10 -5
- package/bpk-component-calendar/src/Week.js +6 -3
- package/bpk-component-calendar/src/composeCalendar.js +9 -4
- package/bpk-component-calendar/src/date-utils.js +14 -14
- package/bpk-component-card/src/BpkCardWrapper.js +1 -2
- package/bpk-component-card/src/BpkDividedCard.js +19 -15
- package/bpk-component-card-button/src/BpkSaveButton.js +14 -6
- package/bpk-component-checkbox/src/BpkCheckbox.js +1 -2
- package/bpk-component-chip/index.d.ts +3 -5
- package/bpk-component-chip/index.js +3 -2
- package/bpk-component-chip/src/BpkDismissibleChip.js +7 -2
- package/bpk-component-chip/src/BpkIconChip.d.ts +25 -0
- package/bpk-component-chip/src/BpkIconChip.js +31 -0
- package/bpk-component-chip/src/BpkSelectableChip.d.ts +0 -2
- package/bpk-component-chip/src/BpkSelectableChip.js +5 -6
- package/bpk-component-chip/src/BpkSelectableChip.module.css +1 -1
- package/bpk-component-chip/src/commonTypes.d.ts +1 -1
- package/bpk-component-chip/src/commonTypes.js +1 -24
- package/bpk-component-close-button/src/BpkCloseButton.js +9 -5
- package/bpk-component-close-button/src/BpkCloseButton.module.css +1 -1
- package/bpk-component-content-cards/src/BpkContentCard.js +9 -4
- package/bpk-component-content-cards/src/BpkContentCards.js +2 -7
- package/bpk-component-content-cards/src/BpkContentCards.module.css +1 -1
- package/bpk-component-datatable/src/BpkDataTable.js +4 -4
- package/bpk-component-datatable/src/BpkDataTableHeader.js +14 -11
- package/bpk-component-datatable/src/BpkDataTableHeader.module.css +1 -1
- package/bpk-component-datepicker/src/BpkDatepicker.js +3 -5
- package/bpk-component-description-list/index.js +1 -1
- package/bpk-component-description-list/src/ComponentFactory.js +10 -5
- package/bpk-component-dialog/src/BpkDialog.js +7 -6
- package/bpk-component-dialog/src/BpkDialog.module.css +1 -1
- package/bpk-component-dialog/src/BpkDialogInner.js +7 -5
- package/bpk-component-drawer/src/BpkDrawer.js +1 -4
- package/bpk-component-drawer/src/BpkDrawerContent.js +8 -7
- package/bpk-component-fieldset/src/BpkFieldset.js +10 -9
- package/bpk-component-flare/index.js +2 -2
- package/bpk-component-flare/src/BpkContentBubble.js +5 -3
- package/bpk-component-flare/src/BpkFlareBar.js +15 -7
- package/bpk-component-floating-notification/src/BpkFloatingNotification.js +10 -4
- package/bpk-component-form-validation/src/BpkFormValidation.js +6 -6
- package/bpk-component-graphic-promotion/src/BpkGraphicPromo.js +10 -14
- package/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.css +1 -1
- package/bpk-component-grid-toggle/src/BpkGridToggle.js +8 -6
- package/bpk-component-horizontal-nav/src/BpkHorizontalNav.js +16 -14
- package/bpk-component-horizontal-nav/src/BpkHorizontalNav.module.css +1 -1
- package/bpk-component-horizontal-nav/src/BpkHorizontalNavItem.js +2 -2
- package/bpk-component-icon/index.js +1 -1
- package/bpk-component-icon/lg/ai.js +1 -2
- package/bpk-component-icon/lg/aircraft.js +1 -2
- package/bpk-component-icon/lg/beach.js +1 -2
- package/bpk-component-icon/lg/call-back.js +1 -2
- package/bpk-component-icon/lg/camper-van.js +1 -2
- package/bpk-component-icon/lg/car-wash.js +1 -2
- package/bpk-component-icon/lg/cars.js +1 -2
- package/bpk-component-icon/lg/clean.js +1 -2
- package/bpk-component-icon/lg/cloakroom.js +1 -2
- package/bpk-component-icon/lg/content--copy.js +1 -2
- package/bpk-component-icon/lg/data.js +1 -2
- package/bpk-component-icon/lg/depart.js +1 -2
- package/bpk-component-icon/lg/dot.js +20 -0
- package/bpk-component-icon/lg/download.js +1 -2
- package/bpk-component-icon/lg/education.js +1 -2
- package/bpk-component-icon/lg/explore.js +1 -2
- package/bpk-component-icon/lg/fast-track.js +1 -2
- package/bpk-component-icon/lg/fast-train.js +1 -2
- package/bpk-component-icon/lg/flight-landing.js +1 -2
- package/bpk-component-icon/lg/flight-takeoff.js +1 -2
- package/bpk-component-icon/lg/flight.js +1 -2
- package/bpk-component-icon/lg/legroom--extra.js +1 -2
- package/bpk-component-icon/lg/legroom--normal.js +1 -2
- package/bpk-component-icon/lg/legroom--reduced.js +1 -2
- package/bpk-component-icon/lg/logout.js +1 -2
- package/bpk-component-icon/lg/lounge.js +1 -2
- package/bpk-component-icon/lg/mail.js +1 -2
- package/bpk-component-icon/lg/mileage.js +1 -2
- package/bpk-component-icon/lg/new-window.js +1 -2
- package/bpk-component-icon/lg/plane-seat.js +1 -2
- package/bpk-component-icon/lg/return.js +1 -2
- package/bpk-component-icon/lg/scales.js +1 -2
- package/bpk-component-icon/lg/share--ios.js +1 -2
- package/bpk-component-icon/lg/social-distancing.js +1 -2
- package/bpk-component-icon/lg/speaker.js +1 -2
- package/bpk-component-icon/lg/taxi.js +1 -2
- package/bpk-component-icon/lg/unmute.js +1 -2
- package/bpk-component-icon/lg/wallet.js +1 -2
- package/bpk-component-icon/lg/weather--cloudy.js +1 -2
- package/bpk-component-icon/lg/weather--partly-cloudy.js +1 -2
- package/bpk-component-icon/lg/weather--rain.js +1 -2
- package/bpk-component-icon/lg/weather--thunderstorm.js +1 -2
- package/bpk-component-icon/lg/window--reduce.js +1 -2
- package/bpk-component-icon/lg/world--emea.js +1 -2
- package/bpk-component-icon/sm/ai.js +1 -2
- package/bpk-component-icon/sm/aircraft.js +1 -2
- package/bpk-component-icon/sm/beach.js +1 -2
- package/bpk-component-icon/sm/bus.js +1 -2
- package/bpk-component-icon/sm/call-back.js +1 -2
- package/bpk-component-icon/sm/camper-van.js +1 -2
- package/bpk-component-icon/sm/car-wash.js +1 -2
- package/bpk-component-icon/sm/cars.js +1 -2
- package/bpk-component-icon/sm/chauffeur.js +1 -2
- package/bpk-component-icon/sm/clean.js +1 -2
- package/bpk-component-icon/sm/content--copy.js +1 -2
- package/bpk-component-icon/sm/data.js +1 -2
- package/bpk-component-icon/sm/depart.js +1 -2
- package/bpk-component-icon/sm/direct.js +1 -2
- package/bpk-component-icon/sm/dot.js +20 -0
- package/bpk-component-icon/sm/download.js +1 -2
- package/bpk-component-icon/sm/education.js +1 -2
- package/bpk-component-icon/sm/explore.js +1 -2
- package/bpk-component-icon/sm/fast-track.js +1 -2
- package/bpk-component-icon/sm/fast-train.js +1 -2
- package/bpk-component-icon/sm/flight-landing.js +1 -2
- package/bpk-component-icon/sm/flight-takeoff.js +1 -2
- package/bpk-component-icon/sm/flight.js +1 -2
- package/bpk-component-icon/sm/hotels--jacuzzi.js +1 -2
- package/bpk-component-icon/sm/infant.js +1 -2
- package/bpk-component-icon/sm/legroom--extra.js +1 -2
- package/bpk-component-icon/sm/legroom--normal.js +1 -2
- package/bpk-component-icon/sm/legroom--reduced.js +1 -2
- package/bpk-component-icon/sm/logout.js +1 -2
- package/bpk-component-icon/sm/mail.js +1 -2
- package/bpk-component-icon/sm/mileage.js +1 -2
- package/bpk-component-icon/sm/new-window.js +1 -2
- package/bpk-component-icon/sm/onsen.js +1 -2
- package/bpk-component-icon/sm/plane-seat.js +1 -2
- package/bpk-component-icon/sm/return.js +1 -2
- package/bpk-component-icon/sm/share--ios.js +1 -2
- package/bpk-component-icon/sm/social-distancing.js +1 -2
- package/bpk-component-icon/sm/taxi.js +1 -2
- package/bpk-component-icon/sm/unmute.js +1 -2
- package/bpk-component-icon/sm/weather--cloudy.js +1 -2
- package/bpk-component-icon/sm/weather--rain.js +1 -2
- package/bpk-component-icon/sm/weather--thunderstorm.js +1 -2
- package/bpk-component-icon/sm/weather--wind.js +1 -2
- package/bpk-component-icon/sm/window--reduce.js +1 -2
- package/bpk-component-icon/src/classNameModifierHOCFactory.js +3 -0
- package/bpk-component-icon/src/withDescription.js +1 -2
- package/bpk-component-icon/src/withRtlSupport.js +1 -1
- package/bpk-component-image/index.js +2 -2
- package/bpk-component-image/src/BpkBackgroundImage.js +4 -3
- package/bpk-component-image/src/BpkImage.js +6 -4
- package/bpk-component-infinite-scroll/src/withInfiniteScroll.js +4 -5
- package/bpk-component-info-banner/src/AnimateAndFade.js +37 -35
- package/bpk-component-info-banner/src/BpkInfoBanner.module.css +1 -1
- package/bpk-component-info-banner/src/BpkInfoBannerInner.js +17 -14
- package/bpk-component-input/index.js +1 -1
- package/bpk-component-input/src/BpkClearButton.js +3 -1
- package/bpk-component-input/src/BpkInput.js +6 -4
- package/bpk-component-input/src/withOpenEvents.js +4 -1
- package/bpk-component-label/src/BpkLabel.js +1 -2
- package/bpk-component-link/index.js +2 -2
- package/bpk-component-list/src/BpkList.js +2 -2
- package/bpk-component-loading-button/src/BpkLoadingButton.js +7 -5
- package/bpk-component-map/index.js +4 -4
- package/bpk-component-map/src/BpkIconMarker.js +2 -3
- package/bpk-component-map/src/BpkMap.js +2 -2
- package/bpk-component-map/src/BpkPriceMarker.js +8 -7
- package/bpk-component-map/src/BpkPriceMarkerV2/BpkPriceMarker.js +2 -3
- package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js +1 -9
- package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.module.css +1 -1
- package/bpk-component-modal/index.js +4 -3
- package/bpk-component-modal/src/BpkModal.d.ts +2 -1
- package/bpk-component-modal/src/BpkModal.js +4 -2
- package/bpk-component-modal/src/BpkModalInner.d.ts +2 -0
- package/bpk-component-modal/src/BpkModalInner.js +25 -10
- package/bpk-component-modal/src/BpkModalInner.module.css +1 -1
- package/bpk-component-modal/src/BpkModalV2/BpKModal.module.css +1 -1
- package/bpk-component-modal/src/BpkModalV2/BpkModal.d.ts +2 -0
- package/bpk-component-modal/src/BpkModalV2/BpkModal.js +20 -10
- package/bpk-component-navigation-bar/index.js +1 -1
- package/bpk-component-navigation-bar/src/BpkNavigationBar.js +8 -7
- package/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.js +7 -7
- package/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.js +8 -8
- package/bpk-component-nudger/index.js +1 -1
- package/bpk-component-nudger/src/BpkConfigurableNudger.js +17 -6
- package/bpk-component-nudger/src/BpkNudger.js +16 -10
- package/bpk-component-nudger/src/BpkNudger.module.css +1 -1
- package/bpk-component-overlay/src/BpkOverlay.js +1 -2
- package/bpk-component-page-indicator/src/BpkPageIndicator.js +1 -2
- package/bpk-component-page-indicator/src/BpkPageIndicator.module.css +1 -1
- package/bpk-component-page-indicator/src/NavButton.js +1 -1
- package/bpk-component-pagination/src/BpkPagination.js +1 -2
- package/bpk-component-pagination/src/BpkPaginationList.js +1 -1
- package/bpk-component-pagination/src/BpkPaginationNudger.js +14 -6
- package/bpk-component-pagination/src/BpkPaginationPage.js +4 -1
- package/bpk-component-phone-input/src/BpkPhoneInput.js +16 -6
- package/bpk-component-popover/src/BpkPopover.js +8 -6
- package/bpk-component-popover/src/BpkPopoverPortal.js +8 -7
- package/bpk-component-popover/src/keyboardFocusScope.js +1 -1
- package/bpk-component-price/src/BpkPrice.js +19 -8
- package/bpk-component-progress/src/BpkProgress.js +1 -2
- package/bpk-component-radio/src/BpkRadio.js +1 -2
- package/bpk-component-rating/src/BpkRating.js +19 -8
- package/bpk-component-rtl-toggle/src/BpkRtlToggle.js +0 -4
- package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGrid.js +7 -5
- package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.js +7 -4
- package/bpk-component-section-header/src/BpkSectionHeader.js +7 -7
- package/bpk-component-section-header/src/BpkSectionHeader.module.css +1 -1
- package/bpk-component-section-list/index.js +1 -1
- package/bpk-component-section-list/src/BpkSectionListItem.js +9 -8
- package/bpk-component-section-list/src/BpkSectionListItem.module.css +1 -1
- package/bpk-component-section-list/src/BpkSectionListSection.js +2 -3
- package/bpk-component-select/src/BpkSelect.js +1 -2
- package/bpk-component-skeleton/index.js +21 -0
- package/bpk-component-skeleton/src/BpkBaseSkeleton.js +30 -0
- package/bpk-component-skeleton/src/BpkBaseSkeleton.module.css +18 -0
- package/bpk-component-skeleton/src/BpkSkeleton.js +38 -0
- package/bpk-component-skeleton/src/BpkSkeleton.module.css +18 -0
- package/bpk-component-skeleton/src/common-types.js +33 -0
- package/bpk-component-slider/src/BpkSlider.js +2 -1
- package/bpk-component-spinner/index.js +3 -3
- package/bpk-component-spinner/src/BpkExtraLargeSpinner.js +8 -7
- package/bpk-component-spinner/src/BpkLargeSpinner.js +8 -7
- package/bpk-component-spinner/src/BpkSpinner.js +8 -7
- package/bpk-component-split-input/src/BpkInputField.js +2 -2
- package/bpk-component-split-input/src/BpkSplitInput.js +3 -3
- package/bpk-component-star-rating/index.js +4 -4
- package/bpk-component-star-rating/src/BpkInteractiveStar.js +6 -3
- package/bpk-component-star-rating/src/BpkInteractiveStarRating.js +1 -1
- package/bpk-component-star-rating/src/BpkStar.js +18 -18
- package/bpk-component-star-rating/src/BpkStar.module.css +1 -1
- package/bpk-component-swap-button/src/BpkSwapButton.js +2 -1
- package/bpk-component-switch/src/BpkSwitch.js +1 -2
- package/bpk-component-table/index.js +2 -2
- package/bpk-component-text/src/BpkText.js +10 -5
- package/bpk-component-theme-toggle/src/BpkThemeToggle.js +7 -6
- package/bpk-component-theme-toggle/src/updateOnThemeChange.js +1 -1
- package/bpk-component-tooltip/src/BpkTooltip.js +2 -3
- package/bpk-component-tooltip/src/BpkTooltipPortal.js +7 -6
- package/bpk-mixins/_chips.scss +9 -0
- package/bpk-react-utils/index.js +3 -3
- package/bpk-react-utils/src/BpkDialogWrapper/BpkDialogWrapper.js +2 -2
- package/bpk-react-utils/src/Portal.js +1 -0
- package/bpk-react-utils/src/withDefaultProps.js +4 -1
- package/bpk-scrim-utils/src/withScrim.js +3 -3
- package/bpk-scrim-utils/src/withScrimmedPortal.js +1 -1
- package/bpk-theming/src/BpkThemeProvider.js +1 -1
- package/package.json +2 -2
- package/unstable__bpk-mixins/_chips.scss +9 -0
- package/bpk-component-button/src/commonButtonTests.js +0 -133
- 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
|
|
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
|
-
|
|
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
|
|
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
|
-
|
|
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
|
|
18
|
-
import
|
|
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
|
|
18
|
-
import
|
|
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
|
|
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
|
|
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(
|
|
47
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
48
48
|
className: iconClassNames,
|
|
49
|
-
|
|
50
|
-
|
|
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
|
|
18
|
+
import { withRtlSupport } from "../../bpk-component-icon";
|
|
19
19
|
import LargeIcon from "../../bpk-component-icon/lg/star";
|
|
20
|
-
import
|
|
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
|
|
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
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
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
|
-
|
|
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-
|
|
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
|
-
|
|
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
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
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
|
|
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(
|
|
84
|
+
children: [/*#__PURE__*/_jsx("span", {
|
|
86
85
|
className: getClassName('bpk-theme-toggle__label'),
|
|
87
|
-
|
|
88
|
-
|
|
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
|
|
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
|
|
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,
|
package/bpk-mixins/_chips.scss
CHANGED
|
@@ -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
|
}
|
package/bpk-react-utils/index.js
CHANGED
|
@@ -16,16 +16,16 @@
|
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
|
-
import
|
|
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
|
|
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
|
+
"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.
|
|
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;
|