@skyscanner/backpack-web 21.0.0 → 21.0.1

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 (13) hide show
  1. package/bpk-component-banner-alert/README.md +3 -2
  2. package/bpk-component-breakpoint/src/BpkBreakpoint.js +1 -1
  3. package/bpk-component-calendar/src/BpkCalendarNav.module.scss +2 -2
  4. package/bpk-component-checkbox/src/BpkCheckbox.module.scss +1 -1
  5. package/bpk-component-form-validation/src/BpkFormValidation.module.scss +1 -1
  6. package/bpk-component-icon/index.js +8 -4
  7. package/bpk-component-pagination/src/BpkPaginationPage.module.scss +1 -1
  8. package/bpk-component-radio/src/BpkRadio.module.scss +1 -1
  9. package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.js +4 -2
  10. package/bpk-component-select/src/BpkSelect.module.scss +6 -1
  11. package/bpk-component-theme-toggle/src/theming.js +3 -6
  12. package/bpk-component-ticket/src/BpkTicket.module.scss +1 -1
  13. package/package.json +4 -4
package/bpk-component-banner-alert/README.md CHANGED
@@ -77,6 +77,7 @@ const BannerAlertExpandableState = withBannerAlertState(BpkBannerAlertExpandable
77
77
  />
78
78
 
79
79
  <BannerAlertDismissableState
80
+ dismissButtonLabel="Dismiss"
80
81
  message="Successful alert that will disappear after 5 seconds."
81
82
  hideAfter={5}
82
83
  type={ALERT_TYPES.SUCCESS}
@@ -112,10 +113,10 @@ const BannerAlertExpandableState = withBannerAlertState(BpkBannerAlertExpandable
112
113
  | ------------------ | ---------------------- | -------- | ------------- |
113
114
  | type | ALERT_TYPES (one of) | true | - |
114
115
  | message | node | true | - |
116
+ | dismissButtonLabel | string | true | - |
115
117
  | animateOnEnter | bool | false | false |
116
118
  | animateOnLeave | bool | false | false |
117
119
  | bannerClassName | string | false | null |
118
- | dismissButtonLabel | string | false | null |
119
120
  | icon | BpkIcon | false | null |
120
121
  | onDismiss | func | false | null |
121
122
  | show | bool | false | true |
@@ -126,6 +127,7 @@ const BannerAlertExpandableState = withBannerAlertState(BpkBannerAlertExpandable
126
127
  | ------------------ | ---------------------- | -------- | ------------- |
127
128
  | type | ALERT_TYPES (one of) | true | - |
128
129
  | message | node | true | - |
130
+ | toggleButtonLabel | string | true | - |
129
131
  | animateOnEnter | bool | false | false |
130
132
  | animateOnLeave | bool | false | false |
131
133
  | bannerClassName | string | false | null |
@@ -133,7 +135,6 @@ const BannerAlertExpandableState = withBannerAlertState(BpkBannerAlertExpandable
133
135
  | icon | BpkIcon | false | null |
134
136
  | onExpandToggle | func | false | null |
135
137
  | show | bool | false | true |
136
- | toggleButtonLabel | string | false | null |
137
138
 
138
139
  ### withBannerAlertState(BpkBannerAlert)
139
140
 
package/bpk-component-breakpoint/src/BpkBreakpoint.js CHANGED
@@ -21,7 +21,7 @@
21
21
  import PropTypes from 'prop-types';
22
22
  import type { Node } from 'react';
23
23
  import MediaQuery from 'react-responsive';
24
- import TOKENS from '@skyscanner/bpk-foundations-web/tokens/breakpoints.common';
24
+ import TOKENS from '@skyscanner/bpk-foundations-web/tokens/base.common';
25
25
 
26
26
  const BREAKPOINTS = {
27
27
  SMALL_MOBILE: TOKENS.breakpointQuerySmallMobile,
package/bpk-component-calendar/src/BpkCalendarNav.module.scss CHANGED
@@ -37,8 +37,8 @@
37
37
 
38
38
  &__button {
39
39
  width: 100%;
40
- height: $bpk-select-height;
41
- padding: $bpk-select-padding-top 0 $bpk-select-padding-bottom 0;
40
+ height: $bpk-input-height;
41
+ padding: bpk-spacing-md() - (2 * $bpk-one-pixel-rem) 0;
42
42
  border: none;
43
43
  background: none;
44
44
  cursor: pointer;
package/bpk-component-checkbox/src/BpkCheckbox.module.scss CHANGED
@@ -73,6 +73,6 @@ $bpk-spacing-v2: true;
73
73
  }
74
74
 
75
75
  &__asterisk {
76
- color: $bpk-required-color;
76
+ color: $bpk-status-danger-spot-day;
77
77
  }
78
78
  }
package/bpk-component-form-validation/src/BpkFormValidation.module.scss CHANGED
@@ -31,7 +31,7 @@
31
31
  --bpk-form-validation-icon-fill,
32
32
  $bpk-form-validation-color
33
33
  );
34
- @include bpk-margin-trailing($bpk-spacing-xs);
34
+ @include bpk-margin-trailing(bpk-spacing-sm());
35
35
  }
36
36
 
37
37
  &--appear {
package/bpk-component-icon/index.js CHANGED
@@ -19,8 +19,8 @@
19
19
  import {
20
20
  iconSizeSm,
21
21
  iconSizeLg,
22
- buttonLineHeight,
23
- buttonLargeLineHeight,
22
+ privateButtonLineHeight,
23
+ privateButtonLargeLineHeight,
24
24
  } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
25
25
 
26
26
  import withAlignment from './src/withAlignment';
@@ -29,11 +29,15 @@ import withDescription from './src/withDescription';
29
29
 
30
30
  // Wrapper functions to provide backwards compatibility
31
31
  function withButtonAlignment(WrappedComponent) {
32
- return withAlignment(WrappedComponent, buttonLineHeight, iconSizeSm);
32
+ return withAlignment(WrappedComponent, privateButtonLineHeight, iconSizeSm);
33
33
  }
34
34
 
35
35
  function withLargeButtonAlignment(WrappedComponent) {
36
- return withAlignment(WrappedComponent, buttonLargeLineHeight, iconSizeLg);
36
+ return withAlignment(
37
+ WrappedComponent,
38
+ privateButtonLargeLineHeight,
39
+ iconSizeLg,
40
+ );
37
41
  }
38
42
 
39
43
  export {
package/bpk-component-pagination/src/BpkPaginationPage.module.scss CHANGED
@@ -47,7 +47,7 @@ $bpk-spacing-v2: true;
47
47
 
48
48
  .bpk-pagination-page--selected {
49
49
  color: $bpk-text-primary-inverse-day;
50
- box-shadow: $bpk-button-selected-box-shadow;
50
+ box-shadow: none;
51
51
 
52
52
  @include bpk-hover {
53
53
  color: $bpk-text-primary-day;
package/bpk-component-radio/src/BpkRadio.module.scss CHANGED
@@ -74,7 +74,7 @@ $bpk-radio-size: bpk-spacing-lg() - ($bpk-one-pixel-rem * 4);
74
74
  @include bpk-themeable-property(
75
75
  background,
76
76
  --bpk-radio-checked-color,
77
- $bpk-radio-checked-circle-color
77
+ $bpk-text-link-day
78
78
  );
79
79
 
80
80
  @include bpk-rtl {
package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.js CHANGED
@@ -99,8 +99,10 @@ class BpkScrollableCalendarGridList extends Component {
99
99
  setComponentHeight = () => {
100
100
  const outerNode = this.outerDiv;
101
101
  if (outerNode) {
102
- const newHeight = outerNode.clientHeight;
103
- this.setState({ outerHeight: newHeight });
102
+ if (outerNode.clientHeight > 0) {
103
+ const newHeight = outerNode.clientHeight;
104
+ this.setState({ outerHeight: newHeight });
105
+ }
104
106
  } else {
105
107
  this.setState({ outerHeight: ESTIMATED_MONTH_ITEM_HEIGHT });
106
108
  }
package/bpk-component-select/src/BpkSelect.module.scss CHANGED
@@ -76,7 +76,7 @@ $bpk-spacing-v2: true;
76
76
 
77
77
  @include bpk-rtl {
78
78
  padding-right: bpk-spacing-xxl() + bpk-spacing-base();
79
- padding-left: $bpk-select-padding-right;
79
+ padding-left: bpk-spacing-xxl();
80
80
 
81
81
  @media screen\0 {
82
82
  padding-right: bpk-spacing-xxl() + bpk-spacing-sm() !important; /* stylelint-disable-line declaration-no-important */
@@ -117,6 +117,11 @@ $select-image-large-height: 24 * $bpk-one-pixel-rem;
117
117
  left: bpk-spacing-base();
118
118
  width: $select-image-large-width;
119
119
  height: $select-image-large-height;
120
+
121
+ @include bpk-rtl {
122
+ right: bpk-spacing-base();
123
+ left: auto;
124
+ }
120
125
  }
121
126
 
122
127
  &--disabled {
package/bpk-component-theme-toggle/src/theming.js CHANGED
@@ -16,9 +16,6 @@
16
16
  * limitations under the License.
17
17
  */
18
18
  import {
19
- horizontalNavLinkColor,
20
- horizontalNavLinkHoverColor,
21
- horizontalNavLinkActiveColor,
22
19
  colorSkyGrayTint02,
23
20
  colorSkyGrayTint06,
24
21
  colorWhite,
@@ -136,9 +133,9 @@ const generateTheme = ({
136
133
 
137
134
  horizontalNavBarSelectedColor: primaryColor500,
138
135
  horizontalNavLinkSelectedColor: primaryColor500,
139
- horizontalNavLinkColor,
140
- horizontalNavLinkHoverColor,
141
- horizontalNavLinkActiveColor,
136
+ horizontalNavLinkColor: primaryColor500,
137
+ horizontalNavLinkHoverColor: primaryColor500,
138
+ horizontalNavLinkActiveColor: primaryColor500,
142
139
 
143
140
  selectInvalidBorderColor: secondaryColor500,
144
141
 
package/bpk-component-ticket/src/BpkTicket.module.scss CHANGED
@@ -49,7 +49,7 @@ $bpk-spacing-v2: true;
49
49
  flex-direction: row;
50
50
  align-items: stretch;
51
51
  flex: none;
52
- color: $bpk-card-color;
52
+ color: $bpk-text-primary-day;
53
53
  text-decoration: none;
54
54
  box-shadow: $bpk-box-shadow-sm;
55
55
  cursor: pointer;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyscanner/backpack-web",
3
- "version": "21.0.0",
3
+ "version": "21.0.1",
4
4
  "description": "Backpack Design System web library",
5
5
  "repository": {
6
6
  "type": "git",
@@ -24,11 +24,11 @@
24
24
  "dependencies": {
25
25
  "@popperjs/core": "^2.11.5",
26
26
  "@react-google-maps/api": "^2.12.0",
27
- "@skyscanner/bpk-foundations-web": "^14.0.0",
28
- "@skyscanner/bpk-svgs": "^16.2.0",
27
+ "@skyscanner/bpk-foundations-web": "^15.1.0",
28
+ "@skyscanner/bpk-svgs": "^16.2.3",
29
29
  "a11y-focus-scope": "^1.1.3",
30
30
  "a11y-focus-store": "^1.0.0",
31
- "bpk-mixins": "^39.1.1",
31
+ "bpk-mixins": "^40.1.0",
32
32
  "d3-path": "^2.0.0",
33
33
  "d3-scale": "^4.0.2",
34
34
  "date-fns": "^2.21.1",