@skyscanner/backpack-web 6.0.0 → 7.1.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 (39) hide show
  1. package/bpk-component-aria-live/package.json +3 -3
  2. package/bpk-component-autosuggest/package.json +2 -2
  3. package/bpk-component-banner-alert/package.json +2 -2
  4. package/bpk-component-barchart/data.json +0 -82
  5. package/bpk-component-barchart/package.json +1 -1
  6. package/bpk-component-calendar/package.json +2 -2
  7. package/bpk-component-calendar/src/BpkCalendarDate.js +0 -3
  8. package/bpk-component-calendar/src/BpkCalendarDate.module.css +1 -1
  9. package/bpk-component-calendar/src/BpkCalendarDate.module.scss +1 -6
  10. package/bpk-component-calendar/src/BpkCalendarGridHeader.module.css +1 -1
  11. package/bpk-component-calendar/src/BpkCalendarGridHeader.module.scss +1 -4
  12. package/bpk-component-chip/package.json +2 -2
  13. package/bpk-component-datatable/package.json +1 -1
  14. package/bpk-component-datatable/src/BpkDataTable.module.css +1 -1
  15. package/bpk-component-datatable/src/BpkDataTable.module.scss +4 -1
  16. package/bpk-component-datepicker/package.json +4 -4
  17. package/bpk-component-description-list/package.json +1 -1
  18. package/bpk-component-description-list/src/BpkDescriptionList.module.css +1 -1
  19. package/bpk-component-description-list/src/BpkDescriptionList.module.scss +1 -1
  20. package/bpk-component-fieldset/package.json +6 -6
  21. package/bpk-component-floating-notification/package.json +2 -1
  22. package/bpk-component-floating-notification/src/BpkFloatingNotification.js +3 -1
  23. package/bpk-component-form-validation/package.json +2 -2
  24. package/bpk-component-graphic-promotion/README.md +2 -0
  25. package/bpk-component-graphic-promotion/package.json +1 -1
  26. package/bpk-component-graphic-promotion/src/BpkGraphicPromo.js +3 -1
  27. package/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.scss +144 -141
  28. package/bpk-component-horizontal-nav/package.json +1 -1
  29. package/bpk-component-horizontal-nav/src/BpkHorizontalNav.js +6 -11
  30. package/bpk-component-input/package.json +2 -2
  31. package/bpk-component-phone-input/package.json +3 -3
  32. package/bpk-component-popover/package.json +2 -2
  33. package/bpk-component-popover/src/BpkPopoverPortal.js +2 -2
  34. package/bpk-component-scrollable-calendar/package.json +2 -2
  35. package/bpk-component-split-input/package.json +2 -2
  36. package/bpk-component-tooltip/package.json +1 -1
  37. package/bpk-component-tooltip/src/BpkTooltipPortal.js +2 -2
  38. package/package.json +1 -1
  39. package/bpk-component-graphic-promotion/src/custom-breakpoints.module.scss +0 -70
package/bpk-component-aria-live/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bpk-component-aria-live",
3
- "version": "2.1.19",
3
+ "version": "2.1.21",
4
4
  "description": "Backpack aria-live component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -18,9 +18,9 @@
18
18
  "prop-types": "^15.5.8"
19
19
  },
20
20
  "devDependencies": {
21
- "bpk-component-chip": "^5.2.17",
21
+ "bpk-component-chip": "^5.2.18",
22
22
  "bpk-component-code": "^3.1.12",
23
- "bpk-component-fieldset": "^4.1.19",
23
+ "bpk-component-fieldset": "^4.1.21",
24
24
  "bpk-component-select": "^5.1.12",
25
25
  "bpk-component-switch": "^2.1.13"
26
26
  },
package/bpk-component-autosuggest/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bpk-component-autosuggest",
3
- "version": "6.1.17",
3
+ "version": "6.1.18",
4
4
  "description": "Backpack autosuggest component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -14,7 +14,7 @@
14
14
  },
15
15
  "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
16
16
  "dependencies": {
17
- "bpk-component-input": "^6.1.17",
17
+ "bpk-component-input": "^6.1.18",
18
18
  "bpk-mixins": "^31.1.1",
19
19
  "bpk-react-utils": "^6.0.0",
20
20
  "prop-types": "^15.7.2",
package/bpk-component-banner-alert/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bpk-component-banner-alert",
3
- "version": "6.1.17",
3
+ "version": "6.1.18",
4
4
  "description": "Backpack banner alert component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -24,7 +24,7 @@
24
24
  "react-transition-group": "^2.5.3"
25
25
  },
26
26
  "devDependencies": {
27
- "bpk-component-aria-live": "^2.1.19",
27
+ "bpk-component-aria-live": "^2.1.21",
28
28
  "bpk-component-button": "^6.2.7",
29
29
  "bpk-storybook-utils": "^1.1.11"
30
30
  },
package/bpk-component-barchart/data.json CHANGED
@@ -15,88 +15,6 @@
15
15
  {
16
16
  "month": "Apr",
17
17
  "price": 448
18
- },
19
- {
20
- "month": "May",
21
- "price": 344
22
- },
23
- {
24
- "month": "Jun",
25
- "price": 322
26
- },
27
- {
28
- "month": "Jul",
29
- "price": 340
30
- },
31
- {
32
- "month": "Aug",
33
- "price": 327
34
- },
35
- {
36
- "month": "Sep",
37
- "price": 444
38
- },
39
- {
40
- "month": "Oct",
41
- "price": 422
42
- },
43
- {
44
- "month": "Nov",
45
- "price": 344
46
- },
47
- {
48
- "month": "Dec",
49
- "price": 301
50
- }
51
- ],
52
- "prices2": [
53
- {
54
- "month": "Jan",
55
- "price": 305
56
- },
57
- {
58
- "month": "Feb",
59
- "price": 348
60
- },
61
- {
62
- "month": "Mar",
63
- "price": 418
64
- },
65
- {
66
- "month": "Apr",
67
- "price": 448
68
- },
69
- {
70
- "month": "May",
71
- "price": 344
72
- },
73
- {
74
- "month": "Jun",
75
- "price": 322
76
- },
77
- {
78
- "month": "Jul",
79
- "price": 840
80
- },
81
- {
82
- "month": "Aug",
83
- "price": 927
84
- },
85
- {
86
- "month": "Sep",
87
- "price": 444
88
- },
89
- {
90
- "month": "Oct",
91
- "price": 422
92
- },
93
- {
94
- "month": "Nov",
95
- "price": 344
96
- },
97
- {
98
- "month": "Dec",
99
- "price": 601
100
18
  }
101
19
  ]
102
20
  }
package/bpk-component-barchart/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bpk-component-barchart",
3
- "version": "4.2.13",
3
+ "version": "4.2.14",
4
4
  "description": "Backpack bar chart component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
package/bpk-component-calendar/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bpk-component-calendar",
3
- "version": "11.1.19",
3
+ "version": "11.2.1",
4
4
  "description": "Backpack calendar component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -15,7 +15,7 @@
15
15
  "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
16
16
  "dependencies": {
17
17
  "@skyscanner/bpk-foundations-web": "^8.0.0",
18
- "bpk-component-aria-live": "^2.1.19",
18
+ "bpk-component-aria-live": "^2.1.21",
19
19
  "bpk-component-icon": "^9.2.13",
20
20
  "bpk-component-select": "^5.1.12",
21
21
  "bpk-mixins": "^31.1.1",
package/bpk-component-calendar/src/BpkCalendarDate.js CHANGED
@@ -143,9 +143,6 @@ class BpkCalendarDate extends PureComponent {
143
143
  if (isOutside) {
144
144
  classNames.push(getClassName('bpk-calendar-date--outside'));
145
145
  }
146
- if (isToday) {
147
- classNames.push(getClassName('bpk-calendar-date--today'));
148
- }
149
146
 
150
147
  if (selectionType !== SELECTION_TYPES.none) {
151
148
  classNames.push(getClassName(`bpk-calendar-date--${selectionType}`));
package/bpk-component-calendar/src/BpkCalendarDate.module.css CHANGED
@@ -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
- @keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar-date{width:2.25rem;height:2.25rem;padding:0;border:none;border-radius:1.125rem;background-color:transparent;font-size:1rem;text-align:center;cursor:pointer;appearance:none;box-sizing:border-box;color:#111236;color:var(--bpk-calendar-date-text-color, #111236)}.bpk-no-touch-support .bpk-calendar-date:hover:not(:active):not(:disabled):not(.bpk-calendar-date--selected){background-color:#f1f2f8;color:#444560;color:var(--bpk-calendar-date-text-hover-color, #444560)}:global(.bpk-no-touch-support) .bpk-calendar-date:hover:not(:active):not(:disabled):not(.bpk-calendar-date--selected){background-color:#f1f2f8;color:#444560;color:var(--bpk-calendar-date-text-hover-color, #444560)}.bpk-calendar-date--colored{color:#fff}.bpk-calendar-date--colored-default{background-color:#68697f}.bpk-calendar-date--colored-positive{background-color:#00a698}.bpk-calendar-date--colored-neutral{background-color:#ffb54d}.bpk-calendar-date--colored-negative{background-color:#d1435b}.bpk-calendar-date:not(.bpk-calendar-date--selected):active{background-color:#dddde5;color:#111236;color:var(--bpk-calendar-date-text-active-color, #111236)}.bpk-calendar-date--outside{background-color:transparent;color:#b2b2bf}.bpk-calendar-date--today{font-weight:bold}.bpk-calendar-date--selected{font-weight:bold;cursor:default;background-color:#084eb2;background-color:var(--bpk-calendar-date-selected-background-color, #084eb2);color:#fff;color:var(--bpk-calendar-date-text-selected-color, #fff)}.bpk-calendar-date--middle{background-color:#cddff8;color:#111236}.bpk-calendar-date--single{background-color:#0770e3}.bpk-calendar-date--start{background-color:#0770e3}.bpk-calendar-date--end{background-color:#0770e3}.bpk-calendar-date--focused:not(:disabled):not(.bpk-calendar-date--selected):not(.bpk-calendar-date--colored){box-shadow:0 0 0 2px #0770e3 inset;box-shadow:0 0 0 2px var(--bpk-calendar-date-focused-border-color, #0770e3) inset;color:#0770e3;color:var(--bpk-calendar-date-text-focus-color, #0770e3)}.bpk-calendar-date--focused:not(:disabled):not(.bpk-calendar-date--selected).bpk-calendar-date--colored{border:0.125rem solid #0770e3;box-shadow:0 0 0 1px #fff inset}.bpk-calendar-date:disabled,.bpk-calendar-date--blocked{background-color:transparent;color:#dddde5;cursor:not-allowed}.bpk-no-touch-support .bpk-calendar-date:disabled:hover:not(:active):not(:disabled),.bpk-no-touch-support .bpk-calendar-date--blocked:hover:not(:active):not(:disabled){color:#dddde5}:global(.bpk-no-touch-support) .bpk-calendar-date:disabled:hover:not(:active):not(:disabled),:global(.bpk-no-touch-support) .bpk-calendar-date--blocked:hover:not(:active):not(:disabled){color:#dddde5}.bpk-calendar-date:disabled:active,.bpk-calendar-date--blocked:active{color:#dddde5}
18
+ @keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar-date{width:2.25rem;height:2.25rem;padding:0;border:none;border-radius:1.125rem;background-color:transparent;text-align:center;cursor:pointer;appearance:none;box-sizing:border-box;font-size:1rem;line-height:1.5rem;font-weight:700;color:#111236;color:var(--bpk-calendar-date-text-color, #111236)}.bpk-no-touch-support .bpk-calendar-date:hover:not(:active):not(:disabled):not(.bpk-calendar-date--selected){background-color:#f1f2f8;color:#444560;color:var(--bpk-calendar-date-text-hover-color, #444560)}:global(.bpk-no-touch-support) .bpk-calendar-date:hover:not(:active):not(:disabled):not(.bpk-calendar-date--selected){background-color:#f1f2f8;color:#444560;color:var(--bpk-calendar-date-text-hover-color, #444560)}.bpk-calendar-date--colored{color:#fff}.bpk-calendar-date--colored-default{background-color:#68697f}.bpk-calendar-date--colored-positive{background-color:#00a698}.bpk-calendar-date--colored-neutral{background-color:#ffb54d}.bpk-calendar-date--colored-negative{background-color:#d1435b}.bpk-calendar-date:not(.bpk-calendar-date--selected):active{background-color:#dddde5;color:#111236;color:var(--bpk-calendar-date-text-active-color, #111236)}.bpk-calendar-date--outside{background-color:transparent;color:#b2b2bf}.bpk-calendar-date--selected{cursor:default;background-color:#084eb2;background-color:var(--bpk-calendar-date-selected-background-color, #084eb2);color:#fff;color:var(--bpk-calendar-date-text-selected-color, #fff)}.bpk-calendar-date--middle{background-color:#cddff8;color:#111236}.bpk-calendar-date--single{background-color:#0770e3}.bpk-calendar-date--start{background-color:#0770e3}.bpk-calendar-date--end{background-color:#0770e3}.bpk-calendar-date--focused:not(:disabled):not(.bpk-calendar-date--selected):not(.bpk-calendar-date--colored){box-shadow:0 0 0 2px #0770e3 inset;box-shadow:0 0 0 2px var(--bpk-calendar-date-focused-border-color, #0770e3) inset;color:#0770e3;color:var(--bpk-calendar-date-text-focus-color, #0770e3)}.bpk-calendar-date--focused:not(:disabled):not(.bpk-calendar-date--selected).bpk-calendar-date--colored{border:0.125rem solid #0770e3;box-shadow:0 0 0 1px #fff inset}.bpk-calendar-date:disabled,.bpk-calendar-date--blocked{background-color:transparent;color:#dddde5;cursor:not-allowed}.bpk-no-touch-support .bpk-calendar-date:disabled:hover:not(:active):not(:disabled),.bpk-no-touch-support .bpk-calendar-date--blocked:hover:not(:active):not(:disabled){color:#dddde5}:global(.bpk-no-touch-support) .bpk-calendar-date:disabled:hover:not(:active):not(:disabled),:global(.bpk-no-touch-support) .bpk-calendar-date--blocked:hover:not(:active):not(:disabled){color:#dddde5}.bpk-calendar-date:disabled:active,.bpk-calendar-date--blocked:active{color:#dddde5}
package/bpk-component-calendar/src/BpkCalendarDate.module.scss CHANGED
@@ -27,12 +27,12 @@ $bpk-spacing-v2: true;
27
27
  border: none;
28
28
  border-radius: $bpk-border-radius-pill;
29
29
  background-color: transparent;
30
- font-size: $bpk-font-size-base;
31
30
  text-align: center;
32
31
  cursor: pointer;
33
32
  appearance: none;
34
33
  box-sizing: border-box;
35
34
 
35
+ @include bpk-label-1;
36
36
  @include bpk-themeable-property(
37
37
  color,
38
38
  --bpk-calendar-date-text-color,
@@ -86,12 +86,7 @@ $bpk-spacing-v2: true;
86
86
  color: $bpk-calendar-day-outside-color;
87
87
  }
88
88
 
89
- &--today {
90
- font-weight: bold;
91
- }
92
-
93
89
  &--selected {
94
- font-weight: bold;
95
90
  cursor: default;
96
91
 
97
92
  @include bpk-themeable-property(
package/bpk-component-calendar/src/BpkCalendarGridHeader.module.css CHANGED
@@ -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
- @keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar-header{display:table;width:100%;table-layout:fixed}.bpk-calendar-header--table-head{display:none}.bpk-calendar-header__week{display:table-row;list-style:none;text-align:center;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-calendar-header__weekday{display:table-cell;height:2.25rem;padding:0 .5rem;font-weight:normal;box-shadow:0 1px 0 0 #dddde5;vertical-align:middle;box-sizing:content-box}.bpk-calendar-header__weekday--weekend{font-weight:bold}
18
+ @keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}@keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-calendar-header{display:table;width:100%;table-layout:fixed}.bpk-calendar-header--table-head{display:none}.bpk-calendar-header__week{display:table-row;list-style:none;text-align:center;margin:0;font-size:.75rem;line-height:1rem;font-weight:400}.bpk-calendar-header__weekday{display:table-cell;height:2.25rem;padding:0 .5rem;box-shadow:0 1px 0 0 #dddde5;vertical-align:middle;box-sizing:content-box;font-size:.875rem;line-height:1.25rem;font-weight:400}
package/bpk-component-calendar/src/BpkCalendarGridHeader.module.scss CHANGED
@@ -41,13 +41,10 @@
41
41
  display: table-cell;
42
42
  height: $bpk-calendar-day-size;
43
43
  padding: 0 $bpk-calendar-day-spacing;
44
- font-weight: normal;
45
44
  box-shadow: $shadow-bottom;
46
45
  vertical-align: middle;
47
46
  box-sizing: content-box;
48
47
 
49
- &--weekend {
50
- font-weight: bold;
51
- }
48
+ @include bpk-footnote;
52
49
  }
53
50
  }
package/bpk-component-chip/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bpk-component-chip",
3
- "version": "5.2.17",
3
+ "version": "5.2.18",
4
4
  "description": "Backpack chip component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -23,7 +23,7 @@
23
23
  "react": "^16.3.0 || ^17.0.0"
24
24
  },
25
25
  "devDependencies": {
26
- "bpk-component-aria-live": "^2.1.19",
26
+ "bpk-component-aria-live": "^2.1.21",
27
27
  "bpk-component-text": "^7.0.6"
28
28
  }
29
29
  }
package/bpk-component-datatable/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bpk-component-datatable",
3
- "version": "4.1.13",
3
+ "version": "4.2.0",
4
4
  "description": "Backpack datatable component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
package/bpk-component-datatable/src/BpkDataTable.module.css CHANGED
@@ -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
- @keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-data-table{width:100%}.bpk-data-table__header-column{display:flex;height:100%;margin:1rem;flex-direction:row;align-items:center;outline-offset:-.25rem}.bpk-data-table__header-column:hover{cursor:pointer}.bpk-data-table__row{display:flex;flex-direction:row;align-items:center;border:1px solid #f1f2f8;border-bottom:none;outline-offset:-.25rem;color:#444560;font-weight:normal}.bpk-data-table__row:last-child{border-bottom:1px solid #f1f2f8}.bpk-data-table__row--clickable:not(.bpk-data-table__header-row):hover{background-color:#f1f2f8;cursor:pointer;box-shadow:6px 0 0 0 #0770e3 inset}html[dir='rtl'] .bpk-data-table__row--clickable:not(.bpk-data-table__header-row):hover{box-shadow:-6px 0 0 0 #0770e3 inset}.bpk-data-table__row--selected{background-color:#dddde5;box-shadow:6px 0 0 0 #0770e3 inset}html[dir='rtl'] .bpk-data-table__row--selected{box-shadow:-6px 0 0 0 #0770e3 inset}
18
+ @keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-data-table{width:100%}.bpk-data-table__header-column{display:flex;height:100%;margin:1rem;flex-direction:row;align-items:center;outline-offset:-.25rem;font-size:.875rem;line-height:1.25rem;font-weight:700}.bpk-data-table__header-column:hover{cursor:pointer}.bpk-data-table__row{display:flex;flex-direction:row;align-items:center;border:1px solid #f1f2f8;border-bottom:none;outline-offset:-.25rem;color:#444560;font-size:.875rem;line-height:1.25rem;font-weight:400}.bpk-data-table__row:last-child{border-bottom:1px solid #f1f2f8}.bpk-data-table__row--clickable:not(.bpk-data-table__header-row):hover{background-color:#f1f2f8;cursor:pointer;box-shadow:6px 0 0 0 #0770e3 inset}html[dir='rtl'] .bpk-data-table__row--clickable:not(.bpk-data-table__header-row):hover{box-shadow:-6px 0 0 0 #0770e3 inset}.bpk-data-table__row--selected{background-color:#dddde5;box-shadow:6px 0 0 0 #0770e3 inset}html[dir='rtl'] .bpk-data-table__row--selected{box-shadow:-6px 0 0 0 #0770e3 inset}
package/bpk-component-datatable/src/BpkDataTable.module.scss CHANGED
@@ -49,6 +49,8 @@ $bpk-border-size-datatable: $bpk-border-size-xl * 2;
49
49
  align-items: center;
50
50
  outline-offset: -(4 * $bpk-one-pixel-rem);
51
51
 
52
+ @include bpk-label-2;
53
+
52
54
  &:hover {
53
55
  cursor: pointer;
54
56
  }
@@ -62,7 +64,8 @@ $bpk-border-size-datatable: $bpk-border-size-xl * 2;
62
64
  border-bottom: none;
63
65
  outline-offset: -(4 * $bpk-one-pixel-rem);
64
66
  color: $bpk-color-sky-gray-tint-01;
65
- font-weight: normal;
67
+
68
+ @include bpk-footnote;
66
69
 
67
70
  &:last-child {
68
71
  border-bottom: $bpk-border-size-sm solid $bpk-color-sky-gray-tint-07;
package/bpk-component-datepicker/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bpk-component-datepicker",
3
- "version": "16.0.0",
3
+ "version": "16.0.2",
4
4
  "description": "Backpack datepicker component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -15,10 +15,10 @@
15
15
  "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
16
16
  "dependencies": {
17
17
  "bpk-component-breakpoint": "^4.0.4",
18
- "bpk-component-calendar": "^11.1.19",
19
- "bpk-component-input": "^6.1.17",
18
+ "bpk-component-calendar": "^11.2.1",
19
+ "bpk-component-input": "^6.1.18",
20
20
  "bpk-component-modal": "^5.0.0",
21
- "bpk-component-popover": "^6.0.0",
21
+ "bpk-component-popover": "^6.0.1",
22
22
  "bpk-mixins": "^31.1.1",
23
23
  "bpk-react-utils": "^6.0.0",
24
24
  "prop-types": "^15.7.2"
package/bpk-component-description-list/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bpk-component-description-list",
3
- "version": "3.1.12",
3
+ "version": "3.2.0",
4
4
  "description": "Backpack description list component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
package/bpk-component-description-list/src/BpkDescriptionList.module.css CHANGED
@@ -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
- @keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-description-list{margin:0}.bpk-description-list__term{font-weight:700}.bpk-description-list__details{margin:0;margin-left:1.5rem}html[dir='rtl'] .bpk-description-list__details{margin-right:1.5rem;margin-left:0}
18
+ @keyframes bpk-keyframe-spin{100%{transform:rotate(1turn)}}.bpk-description-list{margin:0}.bpk-description-list__term{font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-description-list__details{margin:0;margin-left:1.5rem}html[dir='rtl'] .bpk-description-list__details{margin-right:1.5rem;margin-left:0}
package/bpk-component-description-list/src/BpkDescriptionList.module.scss CHANGED
@@ -22,7 +22,7 @@
22
22
  margin: 0;
23
23
 
24
24
  &__term {
25
- font-weight: $bpk-font-weight-bold;
25
+ @include bpk-label-1;
26
26
  }
27
27
 
28
28
  &__details {
package/bpk-component-fieldset/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bpk-component-fieldset",
3
- "version": "4.1.19",
3
+ "version": "4.1.21",
4
4
  "description": "Backpack fieldset component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -14,7 +14,7 @@
14
14
  },
15
15
  "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
16
16
  "dependencies": {
17
- "bpk-component-form-validation": "^4.2.17",
17
+ "bpk-component-form-validation": "^4.2.18",
18
18
  "bpk-component-label": "^5.1.12",
19
19
  "bpk-mixins": "^31.1.1",
20
20
  "bpk-react-utils": "^6.0.0",
@@ -24,12 +24,12 @@
24
24
  "react": "^16.3.0 || ^17.0.0"
25
25
  },
26
26
  "devDependencies": {
27
- "bpk-component-autosuggest": "^6.1.17",
27
+ "bpk-component-autosuggest": "^6.1.18",
28
28
  "bpk-component-button": "^6.2.7",
29
- "bpk-component-calendar": "^11.1.19",
29
+ "bpk-component-calendar": "^11.2.1",
30
30
  "bpk-component-checkbox": "^4.1.14",
31
- "bpk-component-datepicker": "^16.0.0",
32
- "bpk-component-input": "^6.1.17",
31
+ "bpk-component-datepicker": "^16.0.2",
32
+ "bpk-component-input": "^6.1.18",
33
33
  "bpk-component-select": "^5.1.12",
34
34
  "bpk-component-textarea": "^4.2.12"
35
35
  }
package/bpk-component-floating-notification/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bpk-component-floating-notification",
3
- "version": "1.1.0",
3
+ "version": "1.2.1",
4
4
  "description": "Backpack floating-notification component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -13,6 +13,7 @@
13
13
  "registry": "https://registry.npmjs.org/"
14
14
  },
15
15
  "dependencies": {
16
+ "bpk-component-aria-live": "^2.1.21",
16
17
  "bpk-component-button": "^6.2.7",
17
18
  "bpk-component-text": "^7.0.6",
18
19
  "bpk-mixins": "^31.1.1",
package/bpk-component-floating-notification/src/BpkFloatingNotification.js CHANGED
@@ -21,6 +21,7 @@ import PropTypes from 'prop-types';
21
21
  import React, { useEffect, useState, ReactElement } from 'react';
22
22
  import { CSSTransition } from 'react-transition-group';
23
23
 
24
+ import BpkAriaLive from '../../bpk-component-aria-live';
24
25
  import BpkButton from '../../bpk-component-button';
25
26
  import BpkText, { TEXT_STYLES } from '../../bpk-component-text';
26
27
  import { cssModules } from '../../bpk-react-utils';
@@ -107,7 +108,7 @@ const BpkFloatingNotification = (props: Props) => {
107
108
  <div className={classNames} {...rest}>
108
109
  {Icon && (
109
110
  <div className={iconClassNames}>
110
- <Icon />
111
+ <Icon aria-hidden />
111
112
  </div>
112
113
  )}
113
114
  <BpkText
@@ -117,6 +118,7 @@ const BpkFloatingNotification = (props: Props) => {
117
118
  >
118
119
  {text}
119
120
  </BpkText>
121
+ <BpkAriaLive aria-hidden>{text}</BpkAriaLive>
120
122
  {ctaText && (
121
123
  <BpkButton link onClick={onClick} className={buttonClassNames}>
122
124
  {ctaText}
package/bpk-component-form-validation/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bpk-component-form-validation",
3
- "version": "4.2.17",
3
+ "version": "4.2.18",
4
4
  "description": "Backpack form-validation component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -27,7 +27,7 @@
27
27
  "bpk-component-button": "^6.2.7",
28
28
  "bpk-component-checkbox": "^4.1.14",
29
29
  "bpk-component-icon": "^9.2.13",
30
- "bpk-component-input": "^6.1.17",
30
+ "bpk-component-input": "^6.1.18",
31
31
  "bpk-component-select": "^5.1.12",
32
32
  "bpk-component-textarea": "^4.2.12"
33
33
  }
package/bpk-component-graphic-promotion/README.md CHANGED
@@ -14,6 +14,7 @@ import BpkGraphicPromo from 'bpk-component-graphic-promotion';
14
14
 
15
15
  export default () => (
16
16
  <BpkGraphicPromo
17
+ contentId="graphic-promo-1"
17
18
  tagline="Tagline"
18
19
  headline="Ride your wave"
19
20
  subheading="Portugal and 6 more countries have just been added to the UK travel green list"
@@ -34,6 +35,7 @@ export default () => (
34
35
 
35
36
  | Property | PropType | Required | Default Value |
36
37
  | ---------------- | ----------------- | -------- | ------------- |
38
+ | contentId | string | false | null |
37
39
  | buttonText | string | true | - |
38
40
  | headline | string | true | - |
39
41
  | invertVertically | bool | true | - |
package/bpk-component-graphic-promotion/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bpk-component-graphic-promotion",
3
- "version": "3.1.2",
3
+ "version": "4.1.0",
4
4
  "description": "Backpack graphic-promotion component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
package/bpk-component-graphic-promotion/src/BpkGraphicPromo.js CHANGED
@@ -45,6 +45,7 @@ export const TEXT_ALIGN = {
45
45
 
46
46
  export type Props = {
47
47
  className: ?string,
48
+ contentId: ?string,
48
49
  tagline: ?string,
49
50
  headline: string,
50
51
  subheading: ?string,
@@ -87,6 +88,7 @@ const BpkGraphicPromo = (props: Props) => {
87
88
  const {
88
89
  buttonText,
89
90
  className,
91
+ contentId,
90
92
  headline,
91
93
  invertVertically,
92
94
  onClick,
@@ -128,7 +130,7 @@ const BpkGraphicPromo = (props: Props) => {
128
130
  onClick={onClickWrapper}
129
131
  onKeyDown={onKeyWrapper}
130
132
  >
131
- <div className={containerClasses} aria-hidden>
133
+ <div id={contentId} className={containerClasses} aria-hidden>
132
134
  <div className={getTextClasses('bpk-graphic-promo__sponsor-content')}>
133
135
  {sponsor && (
134
136
  <>
package/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.scss CHANGED
@@ -17,14 +17,26 @@
17
17
  */
18
18
 
19
19
  @import '~bpk-mixins/index';
20
- @import './custom-breakpoints.module';
20
+
21
+ @mixin aspect-ratio($ratio) {
22
+ padding-top: $ratio;
23
+ box-sizing: border-box;
24
+ }
25
+
26
+ @mixin fill-parent {
27
+ position: absolute;
28
+ top: 0;
29
+ right: 0;
30
+ left: 0;
31
+ height: 100%;
32
+ }
21
33
 
22
34
  .bpk-card {
23
35
  @include bpk-card;
24
36
  }
25
37
 
26
38
  .bpk-graphic-promo {
27
- max-width: 65.5rem;
39
+ max-width: 76.5rem;
28
40
  margin-right: auto;
29
41
  margin-left: auto;
30
42
  background-color: $bpk-color-sky-blue;
@@ -33,227 +45,218 @@
33
45
  color: $bpk-color-white;
34
46
  box-shadow: none;
35
47
 
36
- @include breakpoint-landscape {
37
- &__sponsor-label {
38
- margin-bottom: bpk-spacing-sm();
48
+ @include bpk-breakpoint-small-tablet {
49
+ @include aspect-ratio(133%);
50
+ }
39
51
 
40
- @include bpk-label-1;
41
- }
52
+ /* remove shadow and hightlights from Backpack Card */
53
+ &::after {
54
+ display: none;
55
+ }
42
56
 
43
- &__sponsor-content {
44
- margin-bottom: bpk-spacing-xl();
45
- }
57
+ &__container {
58
+ display: flex;
59
+ flex-direction: column;
60
+ justify-content: center;
46
61
 
47
- &__tagline {
48
- margin-bottom: bpk-spacing-md();
62
+ @include bpk-breakpoint-above-tablet {
63
+ height: 28.75rem;
49
64
 
50
- @include bpk-label-1;
51
- }
65
+ @include bpk-margin-leading(bpk-spacing-xxxl(), false);
66
+ @include bpk-margin-trailing(bpk-spacing-xxl(), false);
52
67
 
53
- &__subheading {
54
- @include bpk-body-default;
68
+ /* adjusting for 1.5rem difference between margins */
69
+ &--center > * {
70
+ @include bpk-margin-trailing(bpk-spacing-lg());
71
+ }
55
72
  }
56
73
 
57
- &__headline {
58
- @include breakpoint-landscape-desktop {
59
- @include bpk-hero-5;
74
+ @include bpk-breakpoint-tablet {
75
+ height: 22.5rem;
76
+
77
+ @include bpk-margin-leading(bpk-spacing-xxl(), false);
78
+ @include bpk-margin-trailing(bpk-spacing-xl(), false);
79
+
80
+ /* adjusting for 1.5rem difference between margins */
81
+ &--center > * {
82
+ @include bpk-margin-trailing(bpk-spacing-md());
60
83
  }
84
+ }
85
+
86
+ @include bpk-breakpoint-small-tablet {
87
+ padding: bpk-spacing-xl();
88
+ justify-content: space-between;
89
+ align-items: initial;
61
90
 
62
- @include breakpoint-landscape-tablet {
63
- @include bpk-heading-1;
91
+ @include bpk-margin-leading(0);
92
+ @include fill-parent;
93
+
94
+ &--inverted {
95
+ flex-direction: column-reverse;
64
96
  }
65
97
 
66
- &:not(:last-child) {
67
- margin-bottom: bpk-spacing-md();
98
+ > * {
99
+ @include bpk-margin-leading(0);
68
100
  }
69
101
  }
70
- }
71
102
 
72
- @include breakpoint-portrait-large {
73
- &__sponsor-label {
74
- margin-bottom: bpk-spacing-md();
103
+ @include bpk-breakpoint-small-mobile {
104
+ padding: bpk-spacing-lg();
105
+ }
75
106
 
76
- @include bpk-heading-4;
107
+ &--start {
108
+ align-items: start;
77
109
  }
78
110
 
79
- &__tagline {
80
- margin-bottom: bpk-spacing-md();
111
+ &--center {
112
+ align-items: center;
113
+ }
81
114
 
82
- @include bpk-subheading;
115
+ &--end {
116
+ align-items: end;
83
117
  }
118
+ }
84
119
 
85
- &__headline {
86
- margin-bottom: bpk-spacing-md();
120
+ &__tagline {
121
+ margin-bottom: bpk-spacing-md();
87
122
 
88
- @include bpk-hero-4;
89
- }
123
+ @include bpk-label-1;
90
124
 
91
- &__subheading {
125
+ @include bpk-breakpoint-small-tablet {
92
126
  @include bpk-subheading;
93
127
  }
128
+
129
+ @include bpk-breakpoint-small-mobile {
130
+ @include bpk-label-1;
131
+ }
94
132
  }
95
133
 
96
- @include breakpoint-portrait-medium {
97
- &__sponsor-label {
98
- margin-bottom: bpk-spacing-md();
134
+ &__headline {
135
+ @include bpk-breakpoint-above-tablet {
136
+ @include bpk-hero-5;
99
137
 
100
- @include bpk-heading-3;
138
+ &:not(:last-child) {
139
+ margin-bottom: bpk-spacing-md();
140
+ }
101
141
  }
102
142
 
103
- &__tagline {
104
- margin-bottom: bpk-spacing-md();
143
+ @include bpk-breakpoint-tablet {
144
+ @include bpk-heading-1;
105
145
 
106
- @include bpk-subheading;
146
+ &:not(:last-child) {
147
+ margin-bottom: bpk-spacing-md();
148
+ }
107
149
  }
108
150
 
109
- &__headline {
151
+ @include bpk-breakpoint-small-tablet {
110
152
  margin-bottom: bpk-spacing-md();
111
153
 
112
- @include bpk-hero-5;
154
+ @include bpk-heading-1;
113
155
  }
114
156
 
115
- &__subheading {
116
- @include bpk-body-longform;
157
+ @include bpk-breakpoint-mobile {
158
+ @include bpk-hero-5;
117
159
  }
118
- }
119
-
120
- @include breakpoint-portrait-small {
121
- &__sponsor-label {
122
- margin-bottom: bpk-spacing-sm();
123
160
 
124
- @include bpk-label-1;
161
+ @include bpk-breakpoint-small-mobile {
162
+ @include bpk-heading-2;
125
163
  }
164
+ }
126
165
 
127
- &__tagline {
128
- margin-bottom: bpk-spacing-md();
166
+ &__subheading {
167
+ @include bpk-body-default;
129
168
 
130
- @include bpk-label-1;
169
+ @include bpk-breakpoint-small-tablet {
170
+ @include bpk-subheading;
131
171
  }
132
172
 
133
- &__headline {
134
- margin-bottom: bpk-spacing-md();
135
-
136
- @include bpk-heading-2;
173
+ @include bpk-breakpoint-mobile {
174
+ @include bpk-body-longform;
137
175
  }
138
176
 
139
- &__subheading {
177
+ @include bpk-breakpoint-small-mobile {
140
178
  @include bpk-body-default;
141
179
  }
142
180
  }
143
181
 
144
- &__container {
182
+ &__promo-content,
183
+ &__sponsor-content {
145
184
  display: flex;
146
185
  flex-direction: column;
147
186
 
148
- @include breakpoint-landscape {
149
- justify-content: center;
150
-
151
- &--start {
152
- align-items: start;
153
- }
154
-
155
- &--center {
156
- align-items: center;
157
- }
158
-
159
- &--end {
160
- align-items: end;
161
- }
162
- }
163
-
164
- @include breakpoint-portrait {
165
- justify-content: space-between;
166
-
167
- &--inverted {
168
- flex-direction: column-reverse;
169
- }
187
+ @include bpk-breakpoint-above-tablet {
188
+ width: 22.5rem;
170
189
  }
171
190
 
172
- @include breakpoint-landscape-desktop {
173
- height: 25rem;
174
-
175
- @include bpk-margin-leading(bpk-spacing-xxxl(), false);
176
- @include bpk-margin-trailing(bpk-spacing-xxl(), false);
177
-
178
- /* adjusting for 1.5rem different between margins */
179
- &--center > * {
180
- @include bpk-margin-trailing(bpk-spacing-lg());
181
- }
191
+ @include bpk-breakpoint-tablet {
192
+ width: 20rem;
182
193
  }
183
194
 
184
- @include breakpoint-landscape-tablet {
185
- height: 25rem;
186
-
187
- @include bpk-margin-leading(bpk-spacing-xxl(), false);
188
- @include bpk-margin-trailing(bpk-spacing-xl(), false);
189
-
190
- /* adjusting for 0.5rem different between margins */
191
- &--center > * {
192
- @include bpk-margin-trailing(bpk-spacing-md());
193
- }
195
+ @include bpk-breakpoint-small-tablet {
196
+ width: initial;
197
+ align-items: initial;
198
+ text-align: initial;
194
199
  }
195
200
 
196
- @include breakpoint-portrait-large {
197
- height: 58.3125rem;
198
- padding: bpk-spacing-xl();
201
+ &--start {
202
+ align-items: start;
203
+ text-align: start;
199
204
  }
200
205
 
201
- @include breakpoint-portrait-medium {
202
- height: 42.625rem;
203
- padding: bpk-spacing-xl();
206
+ &--center {
207
+ align-items: center;
208
+ text-align: center;
204
209
  }
205
210
 
206
- @include breakpoint-portrait-small {
207
- height: 31.25rem;
208
- padding: bpk-spacing-lg();
211
+ &--end {
212
+ align-items: end;
213
+ text-align: end;
209
214
  }
210
215
  }
211
216
 
212
- &__sponsor-content,
213
- &__promo-content {
217
+ &__sponsor-content {
214
218
  display: flex;
219
+ margin-bottom: bpk-spacing-xl();
215
220
  flex-direction: column;
216
221
 
217
- @include breakpoint-landscape {
218
- &--start {
219
- align-items: start;
220
- text-align: start;
221
- }
222
+ @include bpk-breakpoint-small-tablet {
223
+ margin-bottom: initial;
224
+ }
225
+ }
222
226
 
223
- &--center {
224
- align-items: center;
225
- text-align: center;
226
- }
227
+ &__sponsor-label {
228
+ margin-bottom: bpk-spacing-sm();
227
229
 
228
- &--end {
229
- align-items: start;
230
- text-align: start;
231
- }
232
- }
230
+ @include bpk-label-1;
233
231
 
234
- @include breakpoint-landscape-desktop {
235
- width: 22.5rem;
232
+ @include bpk-breakpoint-small-tablet {
233
+ margin-bottom: bpk-spacing-md();
234
+
235
+ @include bpk-heading-4;
236
236
  }
237
237
 
238
- @include breakpoint-landscape-tablet {
239
- width: 20rem;
238
+ @include bpk-breakpoint-mobile {
239
+ @include bpk-heading-3;
240
240
  }
241
- }
242
241
 
243
- &::after {
244
- display: none;
242
+ @include bpk-breakpoint-small-mobile {
243
+ margin-bottom: bpk-spacing-sm();
244
+
245
+ @include bpk-label-1;
246
+ }
245
247
  }
246
248
 
247
249
  &__sponsor-logo {
248
- width: 9.25rem;
250
+ width: auto;
251
+ max-width: 9.25rem;
252
+ height: auto;
253
+ max-height: 3.75rem;
249
254
  }
250
255
 
251
256
  &__cta {
252
- @include breakpoint-landscape {
253
- margin-top: bpk-spacing-xl();
254
- }
257
+ margin-top: bpk-spacing-xl();
255
258
 
256
- @include breakpoint-portrait {
259
+ @include bpk-breakpoint-small-tablet {
257
260
  display: none;
258
261
  }
259
262
  }
package/bpk-component-horizontal-nav/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bpk-component-horizontal-nav",
3
- "version": "5.1.13",
3
+ "version": "5.1.14",
4
4
  "description": "Backpack horizontal nav component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
package/bpk-component-horizontal-nav/src/BpkHorizontalNav.js CHANGED
@@ -18,7 +18,6 @@
18
18
  /* @flow strict */
19
19
 
20
20
  import PropTypes from 'prop-types';
21
- import ReactDOM from 'react-dom';
22
21
  import React, { Component, type Node } from 'react';
23
22
 
24
23
  import { cssModules } from '../../bpk-react-utils';
@@ -99,17 +98,11 @@ class BpkHorizontalNav extends Component<Props> {
99
98
  return;
100
99
  }
101
100
 
102
- // Using find dom node is preferable here over changing the underlying mechanism of BpkHorizontalNavItem to accomodate dom-node refs
103
- // eslint-disable-next-line react/no-find-dom-node
104
- const selectedItemRef = ((ReactDOM.findDOMNode(
105
- this.selectedItemRef,
106
- ): any): Element);
107
-
108
101
  if (!this.scrollRef) {
109
102
  return;
110
103
  }
111
104
 
112
- const selectedItemPos = getPos(selectedItemRef);
105
+ const selectedItemPos = getPos(this.selectedItemRef);
113
106
  if (!selectedItemPos) {
114
107
  return;
115
108
  }
@@ -168,10 +161,10 @@ class BpkHorizontalNav extends Component<Props> {
168
161
  if (autoScrollToSelected || type === HORIZONTAL_NAV_TYPES.light) {
169
162
  children = React.Children.map(rawChildren, (child) => {
170
163
  const childProps = {};
171
-
164
+ let childRef;
172
165
  if (autoScrollToSelected) {
173
166
  if (child && child.props && child.props.selected) {
174
- childProps.ref = (ref) => {
167
+ childRef = (ref) => {
175
168
  this.selectedItemRef = ref;
176
169
  };
177
170
  }
@@ -181,7 +174,9 @@ class BpkHorizontalNav extends Component<Props> {
181
174
  childProps.type = HORIZONTAL_NAV_TYPES.light;
182
175
  }
183
176
 
184
- return child ? React.cloneElement(child, childProps) : null;
177
+ return child ? (
178
+ <div ref={childRef}>{React.cloneElement(child, childProps)}</div>
179
+ ) : null;
185
180
  });
186
181
  }
187
182
 
package/bpk-component-input/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bpk-component-input",
3
- "version": "6.1.17",
3
+ "version": "6.1.18",
4
4
  "description": "Backpack input component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -23,7 +23,7 @@
23
23
  "react": "^16.3.0 || ^17.0.0"
24
24
  },
25
25
  "devDependencies": {
26
- "bpk-component-banner-alert": "^6.1.17",
26
+ "bpk-component-banner-alert": "^6.1.18",
27
27
  "bpk-component-label": "^5.1.12",
28
28
  "bpk-storybook-utils": "^1.1.11"
29
29
  }
package/bpk-component-phone-input/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bpk-component-phone-input",
3
- "version": "7.1.19",
3
+ "version": "7.1.21",
4
4
  "description": "Backpack phone input component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -15,7 +15,7 @@
15
15
  "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
16
16
  "dependencies": {
17
17
  "@skyscanner/bpk-foundations-web": "^8.0.0",
18
- "bpk-component-input": "^6.1.17",
18
+ "bpk-component-input": "^6.1.18",
19
19
  "bpk-component-label": "^5.1.12",
20
20
  "bpk-component-select": "^5.1.12",
21
21
  "bpk-component-text": "^7.0.6",
@@ -27,7 +27,7 @@
27
27
  "react": "^16.3.0 || ^17.0.0"
28
28
  },
29
29
  "devDependencies": {
30
- "bpk-component-fieldset": "^4.1.19",
30
+ "bpk-component-fieldset": "^4.1.21",
31
31
  "bpk-component-image": "^5.1.14"
32
32
  }
33
33
  }
package/bpk-component-popover/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bpk-component-popover",
3
- "version": "6.0.0",
3
+ "version": "6.0.1",
4
4
  "description": "Backpack popover component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -30,6 +30,6 @@
30
30
  "devDependencies": {
31
31
  "bpk-component-button": "^6.2.7",
32
32
  "bpk-component-content-container": "^5.0.6",
33
- "bpk-component-input": "^6.1.17"
33
+ "bpk-component-input": "^6.1.18"
34
34
  }
35
35
  }
package/bpk-component-popover/src/BpkPopoverPortal.js CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
  /* @flow strict */
20
20
 
21
- import { createPopper, basePlacements } from '@popperjs/core';
21
+ import { createPopper } from '@popperjs/core';
22
22
  import PropTypes from 'prop-types';
23
23
  import React, { Component, type Node } from 'react';
24
24
  import focusStore from 'a11y-focus-store';
@@ -51,7 +51,7 @@ export const propTypes = {
51
51
  target: PropTypes.oneOfType([PropTypes.func, PropTypes.node]).isRequired,
52
52
  isOpen: PropTypes.bool.isRequired,
53
53
  onClose: PropTypes.func.isRequired,
54
- placement: PropTypes.oneOf(basePlacements),
54
+ placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
55
55
  portalStyle: PropTypes.object, // eslint-disable-line react/forbid-prop-types
56
56
  portalClassName: PropTypes.string,
57
57
  renderTarget: PropTypes.func,
package/bpk-component-scrollable-calendar/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bpk-component-scrollable-calendar",
3
- "version": "6.1.20",
3
+ "version": "6.2.1",
4
4
  "description": "Backpack scrollable calendar component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -15,7 +15,7 @@
15
15
  "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
16
16
  "dependencies": {
17
17
  "@skyscanner/bpk-foundations-web": "^8.0.0",
18
- "bpk-component-calendar": "^11.1.19",
18
+ "bpk-component-calendar": "^11.2.1",
19
19
  "bpk-component-text": "^7.0.6",
20
20
  "bpk-mixins": "^31.1.1",
21
21
  "bpk-react-utils": "^6.0.0",
package/bpk-component-split-input/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bpk-component-split-input",
3
- "version": "1.1.0",
3
+ "version": "1.1.1",
4
4
  "description": "Backpack split-input component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -13,7 +13,7 @@
13
13
  "registry": "https://registry.npmjs.org/"
14
14
  },
15
15
  "dependencies": {
16
- "bpk-component-input": "^6.1.17",
16
+ "bpk-component-input": "^6.1.18",
17
17
  "bpk-mixins": "^31.1.1",
18
18
  "bpk-react-utils": "^6.0.0",
19
19
  "prop-types": "^15.5.8"
package/bpk-component-tooltip/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bpk-component-tooltip",
3
- "version": "7.0.2",
3
+ "version": "7.0.3",
4
4
  "description": "Backpack tooltip component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
package/bpk-component-tooltip/src/BpkTooltipPortal.js CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
  /* @flow strict */
20
20
 
21
- import { createPopper, basePlacements } from '@popperjs/core';
21
+ import { createPopper } from '@popperjs/core';
22
22
  import PropTypes from 'prop-types';
23
23
  import React, { Component, type Node, type Element } from 'react';
24
24
 
@@ -67,7 +67,7 @@ class BpkTooltipPortal extends Component<Props, State> {
67
67
  ariaLabel: PropTypes.string.isRequired,
68
68
  target: PropTypes.node.isRequired,
69
69
  children: PropTypes.node.isRequired,
70
- placement: PropTypes.oneOf(basePlacements),
70
+ placement: PropTypes.oneOf(['top', 'right', 'bottom', 'left', 'auto']),
71
71
  hideOnTouchDevices: PropTypes.bool,
72
72
  portalStyle: PropTypes.object, // eslint-disable-line react/forbid-prop-types
73
73
  portalClassName: PropTypes.string,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyscanner/backpack-web",
3
- "version": "6.0.0",
3
+ "version": "7.1.0",
4
4
  "description": "Backpack Design System web library",
5
5
  "repository": {
6
6
  "type": "git",
package/bpk-component-graphic-promotion/src/custom-breakpoints.module.scss DELETED
@@ -1,70 +0,0 @@
1
- /*
2
- * Backpack - Skyscanner's Design System
3
- *
4
- * Copyright 2022 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
- // FIXME: Replace the custom breakpoints with on es from Backpack when ready. (ST-4102)
20
-
21
- $breakpoint-landscape-desktop-min: 50.01rem;
22
- $breakpoint-landscape-tablet-max: 50rem;
23
- $breakpoint-landscape-tablet-min: 43.76rem;
24
- $breakpoint-portrait-large-max: 43.75rem;
25
- $breakpoint-portrait-large-min: 32.01rem;
26
- $breakpoint-portrait-medium-max: 32rem;
27
- $breakpoint-portrait-medium-min: 26.51rem;
28
- $breakpoint-portrait-small-max: 26.5rem;
29
-
30
- @mixin breakpoint-landscape-desktop {
31
- @media (min-width: $breakpoint-landscape-desktop-min) {
32
- @content;
33
- }
34
- }
35
-
36
- @mixin breakpoint-landscape-tablet {
37
- @media (min-width: $breakpoint-landscape-tablet-min) and (max-width: $breakpoint-landscape-tablet-max) {
38
- @content;
39
- }
40
- }
41
-
42
- @mixin breakpoint-portrait-large {
43
- @media (min-width: $breakpoint-portrait-large-min) and (max-width: $breakpoint-portrait-large-max) {
44
- @content;
45
- }
46
- }
47
-
48
- @mixin breakpoint-portrait-medium {
49
- @media (min-width: $breakpoint-portrait-medium-min) and (max-width: $breakpoint-portrait-medium-max) {
50
- @content;
51
- }
52
- }
53
-
54
- @mixin breakpoint-portrait-small {
55
- @media (max-width: $breakpoint-portrait-small-max) {
56
- @content;
57
- }
58
- }
59
-
60
- @mixin breakpoint-landscape {
61
- @media (min-width: $breakpoint-landscape-tablet-min) {
62
- @content;
63
- }
64
- }
65
-
66
- @mixin breakpoint-portrait {
67
- @media (max-width: $breakpoint-portrait-large-max) {
68
- @content;
69
- }
70
- }