@skyscanner/backpack-web 7.1.0 → 9.0.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 (104) hide show
  1. package/bpk-animate-height/package.json +4 -4
  2. package/bpk-component-accordion/package.json +9 -9
  3. package/bpk-component-aria-live/package.json +9 -9
  4. package/bpk-component-autosuggest/package.json +6 -6
  5. package/bpk-component-badge/package.json +7 -7
  6. package/bpk-component-banner-alert/package.json +11 -11
  7. package/bpk-component-barchart/package.json +10 -10
  8. package/bpk-component-blockquote/package.json +4 -4
  9. package/bpk-component-breadcrumb/package.json +7 -7
  10. package/bpk-component-breakpoint/package.json +6 -6
  11. package/bpk-component-button/package.json +4 -4
  12. package/bpk-component-calendar/package.json +11 -11
  13. package/bpk-component-card/package.json +6 -6
  14. package/bpk-component-checkbox/package.json +7 -7
  15. package/bpk-component-chip/package.json +7 -7
  16. package/bpk-component-close-button/package.json +6 -6
  17. package/bpk-component-code/package.json +4 -4
  18. package/bpk-component-content-container/package.json +4 -4
  19. package/bpk-component-datatable/package.json +6 -6
  20. package/bpk-component-datepicker/README.md +4 -0
  21. package/bpk-component-datepicker/package.json +11 -11
  22. package/bpk-component-datepicker/src/BpkDatepicker.js +18 -13
  23. package/bpk-component-datepicker/src/BpkDatepicker.module.scss +5 -0
  24. package/bpk-component-description-list/package.json +4 -4
  25. package/bpk-component-dialog/package.json +10 -10
  26. package/bpk-component-drawer/package.json +11 -11
  27. package/bpk-component-fieldset/package.json +14 -14
  28. package/bpk-component-flare/package.json +6 -6
  29. package/bpk-component-floating-notification/package.json +7 -7
  30. package/bpk-component-form-validation/package.json +12 -12
  31. package/bpk-component-graphic-promotion/package.json +6 -6
  32. package/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.scss +54 -47
  33. package/bpk-component-grid/package.json +4 -4
  34. package/bpk-component-grid-toggle/package.json +5 -5
  35. package/bpk-component-horizontal-nav/package.json +8 -8
  36. package/bpk-component-icon/lg/account-circle.js +1 -1
  37. package/bpk-component-icon/lg/center-location.js +1 -1
  38. package/bpk-component-icon/lg/face-id.js +1 -1
  39. package/bpk-component-icon/lg/fingerprint.js +1 -1
  40. package/bpk-component-icon/lg/menu.js +1 -1
  41. package/bpk-component-icon/lg/search.js +1 -1
  42. package/bpk-component-icon/package.json +9 -9
  43. package/bpk-component-icon/sm/account-circle.js +1 -1
  44. package/bpk-component-icon/sm/center-location.js +8 -0
  45. package/bpk-component-icon/sm/face-id.js +8 -0
  46. package/bpk-component-icon/sm/fingerprint.js +8 -0
  47. package/bpk-component-icon/sm/menu.js +1 -1
  48. package/bpk-component-icon/sm/search.js +1 -1
  49. package/bpk-component-image/package.json +8 -8
  50. package/bpk-component-infinite-scroll/package.json +8 -8
  51. package/bpk-component-input/package.json +8 -8
  52. package/bpk-component-label/package.json +4 -4
  53. package/bpk-component-link/package.json +6 -6
  54. package/bpk-component-list/package.json +4 -4
  55. package/bpk-component-loading-button/package.json +8 -8
  56. package/bpk-component-map/package.json +8 -8
  57. package/bpk-component-mobile-scroll-container/package.json +5 -5
  58. package/bpk-component-modal/package.json +11 -11
  59. package/bpk-component-navigation-bar/package.json +10 -10
  60. package/bpk-component-nudger/package.json +9 -9
  61. package/bpk-component-overlay/package.json +6 -6
  62. package/bpk-component-pagination/package.json +6 -6
  63. package/bpk-component-panel/package.json +4 -4
  64. package/bpk-component-phone-input/package.json +11 -11
  65. package/bpk-component-popover/README.md +15 -3
  66. package/bpk-component-popover/package.json +10 -10
  67. package/bpk-component-popover/src/BpkPopoverPortal.js +2 -10
  68. package/bpk-component-price/package.json +5 -5
  69. package/bpk-component-progress/package.json +7 -7
  70. package/bpk-component-radio/package.json +6 -6
  71. package/bpk-component-rating/package.json +6 -6
  72. package/bpk-component-rtl-toggle/package.json +4 -4
  73. package/bpk-component-scrollable-calendar/package.json +8 -8
  74. package/bpk-component-section-list/package.json +8 -8
  75. package/bpk-component-select/package.json +5 -5
  76. package/bpk-component-skip-link/package.json +4 -4
  77. package/bpk-component-slider/package.json +6 -6
  78. package/bpk-component-spinner/package.json +5 -5
  79. package/bpk-component-split-input/package.json +5 -5
  80. package/bpk-component-star-rating/package.json +7 -7
  81. package/bpk-component-switch/package.json +4 -4
  82. package/bpk-component-table/package.json +4 -4
  83. package/bpk-component-text/package.json +4 -4
  84. package/bpk-component-textarea/package.json +6 -6
  85. package/bpk-component-theme-toggle/package.json +7 -7
  86. package/bpk-component-ticket/package.json +6 -6
  87. package/bpk-component-tooltip/README.md +12 -1
  88. package/bpk-component-tooltip/package.json +6 -6
  89. package/bpk-component-tooltip/src/BpkTooltip.module.scss +4 -0
  90. package/bpk-component-tooltip/src/BpkTooltipPortal.js +24 -21
  91. package/bpk-react-utils/index.js +0 -3
  92. package/bpk-react-utils/package.json +2 -2
  93. package/bpk-react-utils/src/Portal.js +1 -1
  94. package/bpk-scrim-utils/package.json +4 -4
  95. package/bpk-theming/package.json +3 -3
  96. package/package.json +5 -5
  97. package/bpk-component-navigation-stack/README.md +0 -49
  98. package/bpk-component-navigation-stack/index.js +0 -30
  99. package/bpk-component-navigation-stack/package.json +0 -33
  100. package/bpk-component-navigation-stack/src/BpkNavigationStack.js +0 -128
  101. package/bpk-component-navigation-stack/src/BpkNavigationStack.module.css +0 -18
  102. package/bpk-component-navigation-stack/src/BpkNavigationStack.module.scss +0 -51
  103. package/bpk-component-navigation-stack/src/withNavigationStackState.js +0 -104
  104. package/bpk-react-utils/src/Portal-v1.js +0 -310
package/bpk-component-datepicker/src/BpkDatepicker.js CHANGED
@@ -58,6 +58,7 @@ class BpkDatepicker extends Component {
58
58
  this.state = {
59
59
  isOpen: props.isOpen,
60
60
  };
61
+ this.inputRef = React.createRef();
61
62
  }
62
63
 
63
64
  componentDidUpdate(prevProps, prevState) {
@@ -221,20 +222,24 @@ class BpkDatepicker extends Component {
221
222
  delete rest.isOpen;
222
223
 
223
224
  const input = inputComponent || (
224
- <Input
225
- id={id}
226
- name={`${id}_input`}
227
- value={this.getValue(selectionConfiguration, formatDate)}
225
+ <div
228
226
  className={getClassName('bpk-datepicker__input')}
229
- aria-live="assertive"
230
- aria-atomic="true"
231
- aria-label={this.getLabel(selectionConfiguration, formatDateFull)}
232
- onChange={() => null}
233
- onOpen={this.onOpen}
234
- isOpen={this.state.isOpen}
235
- valid={valid}
236
- {...inputProps}
237
- />
227
+ ref={this.inputRef}
228
+ >
229
+ <Input
230
+ id={id}
231
+ name={`${id}_input`}
232
+ value={this.getValue(selectionConfiguration, formatDate)}
233
+ aria-live="assertive"
234
+ aria-atomic="true"
235
+ aria-label={this.getLabel(selectionConfiguration, formatDateFull)}
236
+ onChange={() => null}
237
+ onOpen={this.onOpen}
238
+ isOpen={this.state.isOpen}
239
+ valid={valid}
240
+ {...inputProps}
241
+ />
242
+ </div>
238
243
  );
239
244
 
240
245
  const calendarProps = {
package/bpk-component-datepicker/src/BpkDatepicker.module.scss CHANGED
@@ -22,4 +22,9 @@
22
22
  &__calendar {
23
23
  margin: 0 auto;
24
24
  }
25
+
26
+ &__input {
27
+ display: inline-block;
28
+ width: 100%;
29
+ }
25
30
  }
package/bpk-component-description-list/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bpk-component-description-list",
3
- "version": "3.2.0",
3
+ "version": "4.0.0",
4
4
  "description": "Backpack description list component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -14,11 +14,11 @@
14
14
  },
15
15
  "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
16
16
  "dependencies": {
17
- "bpk-mixins": "^31.1.1",
18
- "bpk-react-utils": "^6.0.0",
17
+ "bpk-mixins": "^31.2.0",
18
+ "bpk-react-utils": "^7.0.0",
19
19
  "prop-types": "^15.7.2"
20
20
  },
21
21
  "peerDependencies": {
22
- "react": "^16.3.0 || ^17.0.0"
22
+ "react": "^17.0.2"
23
23
  }
24
24
  }
package/bpk-component-dialog/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bpk-component-dialog",
3
- "version": "6.0.0",
3
+ "version": "7.0.0",
4
4
  "description": "Backpack dialog component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -14,19 +14,19 @@
14
14
  },
15
15
  "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
16
16
  "dependencies": {
17
- "bpk-component-close-button": "^3.1.13",
18
- "bpk-component-flare": "^2.1.15",
19
- "bpk-mixins": "^31.1.1",
20
- "bpk-react-utils": "^6.0.0",
21
- "bpk-scrim-utils": "^5.1.11",
17
+ "bpk-component-close-button": "^4.0.0",
18
+ "bpk-component-flare": "^3.0.0",
19
+ "bpk-mixins": "^31.2.0",
20
+ "bpk-react-utils": "^7.0.0",
21
+ "bpk-scrim-utils": "^6.0.0",
22
22
  "prop-types": "^15.7.2"
23
23
  },
24
24
  "peerDependencies": {
25
- "react": "^16.3.0 || ^17.0.0"
25
+ "react": "^17.0.2"
26
26
  },
27
27
  "devDependencies": {
28
- "bpk-component-button": "^6.2.7",
29
- "bpk-component-icon": "^9.2.13",
30
- "bpk-component-text": "^7.0.6"
28
+ "bpk-component-button": "^7.0.0",
29
+ "bpk-component-icon": "^10.0.0",
30
+ "bpk-component-text": "^8.0.0"
31
31
  }
32
32
  }
package/bpk-component-drawer/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bpk-component-drawer",
3
- "version": "6.0.0",
3
+ "version": "7.0.0",
4
4
  "description": "Backpack drawer component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -14,21 +14,21 @@
14
14
  },
15
15
  "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
16
16
  "dependencies": {
17
- "@skyscanner/bpk-foundations-web": "^8.0.0",
18
- "bpk-component-close-button": "^3.1.13",
19
- "bpk-component-icon": "^9.2.13",
20
- "bpk-component-link": "^3.1.12",
21
- "bpk-mixins": "^31.1.1",
22
- "bpk-react-utils": "^6.0.0",
23
- "bpk-scrim-utils": "^5.1.11",
17
+ "@skyscanner/bpk-foundations-web": "^8.3.0",
18
+ "bpk-component-close-button": "^4.0.0",
19
+ "bpk-component-icon": "^10.0.0",
20
+ "bpk-component-link": "^4.0.0",
21
+ "bpk-mixins": "^31.2.0",
22
+ "bpk-react-utils": "^7.0.0",
23
+ "bpk-scrim-utils": "^6.0.0",
24
24
  "prop-types": "^15.7.2",
25
25
  "react-transition-group": "^2.5.3"
26
26
  },
27
27
  "peerDependencies": {
28
- "react": "^16.3.0 || ^17.0.0"
28
+ "react": "^17.0.2"
29
29
  },
30
30
  "devDependencies": {
31
- "bpk-component-button": "^6.2.7",
32
- "bpk-component-text": "^7.0.6"
31
+ "bpk-component-button": "^7.0.0",
32
+ "bpk-component-text": "^8.0.0"
33
33
  }
34
34
  }
package/bpk-component-fieldset/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bpk-component-fieldset",
3
- "version": "4.1.21",
3
+ "version": "5.0.0",
4
4
  "description": "Backpack fieldset component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -14,23 +14,23 @@
14
14
  },
15
15
  "gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
16
16
  "dependencies": {
17
- "bpk-component-form-validation": "^4.2.18",
18
- "bpk-component-label": "^5.1.12",
19
- "bpk-mixins": "^31.1.1",
20
- "bpk-react-utils": "^6.0.0",
17
+ "bpk-component-form-validation": "^5.0.0",
18
+ "bpk-component-label": "^6.0.0",
19
+ "bpk-mixins": "^31.2.0",
20
+ "bpk-react-utils": "^7.0.0",
21
21
  "prop-types": "^15.7.2"
22
22
  },
23
23
  "peerDependencies": {
24
- "react": "^16.3.0 || ^17.0.0"
24
+ "react": "^17.0.2"
25
25
  },
26
26
  "devDependencies": {
27
- "bpk-component-autosuggest": "^6.1.18",
28
- "bpk-component-button": "^6.2.7",
29
- "bpk-component-calendar": "^11.2.1",
30
- "bpk-component-checkbox": "^4.1.14",
31
- "bpk-component-datepicker": "^16.0.2",
32
- "bpk-component-input": "^6.1.18",
33
- "bpk-component-select": "^5.1.12",
34
- "bpk-component-textarea": "^4.2.12"
27
+ "bpk-component-autosuggest": "^7.0.0",
28
+ "bpk-component-button": "^7.0.0",
29
+ "bpk-component-calendar": "^12.0.0",
30
+ "bpk-component-checkbox": "^5.0.0",
31
+ "bpk-component-datepicker": "^18.0.0",
32
+ "bpk-component-input": "^7.0.0",
33
+ "bpk-component-select": "^6.0.0",
34
+ "bpk-component-textarea": "^5.0.0"
35
35
  }
36
36
  }
package/bpk-component-flare/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bpk-component-flare",
3
- "version": "2.1.15",
3
+ "version": "3.0.0",
4
4
  "description": "Backpack FlareBar and ContentBubble component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -17,13 +17,13 @@
17
17
  },
18
18
  "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
19
19
  "dependencies": {
20
- "bpk-component-label": "^5.1.12",
21
- "bpk-component-text": "^7.0.6",
22
- "bpk-mixins": "^31.1.1",
23
- "bpk-react-utils": "^6.0.0",
20
+ "bpk-component-label": "^6.0.0",
21
+ "bpk-component-text": "^8.0.0",
22
+ "bpk-mixins": "^31.2.0",
23
+ "bpk-react-utils": "^7.0.0",
24
24
  "prop-types": "^15.7.2"
25
25
  },
26
26
  "peerDependencies": {
27
- "react": "^16.3.0 || ^17.0.0"
27
+ "react": "^17.0.2"
28
28
  }
29
29
  }
package/bpk-component-floating-notification/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bpk-component-floating-notification",
3
- "version": "1.2.1",
3
+ "version": "2.0.0",
4
4
  "description": "Backpack floating-notification component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -13,14 +13,14 @@
13
13
  "registry": "https://registry.npmjs.org/"
14
14
  },
15
15
  "dependencies": {
16
- "bpk-component-aria-live": "^2.1.21",
17
- "bpk-component-button": "^6.2.7",
18
- "bpk-component-text": "^7.0.6",
19
- "bpk-mixins": "^31.1.1",
20
- "bpk-react-utils": "^6.0.0",
16
+ "bpk-component-aria-live": "^3.0.0",
17
+ "bpk-component-button": "^7.0.0",
18
+ "bpk-component-text": "^8.0.0",
19
+ "bpk-mixins": "^31.2.0",
20
+ "bpk-react-utils": "^7.0.0",
21
21
  "prop-types": "^15.5.8"
22
22
  },
23
23
  "peerDependencies": {
24
- "react": "^16.8.0 || ^17.0.0"
24
+ "react": "^17.0.2"
25
25
  }
26
26
  }
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.18",
3
+ "version": "5.0.0",
4
4
  "description": "Backpack form-validation component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -14,21 +14,21 @@
14
14
  },
15
15
  "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
16
16
  "dependencies": {
17
- "bpk-animate-height": "^4.1.12",
18
- "bpk-mixins": "^31.1.1",
19
- "bpk-react-utils": "^6.0.0",
17
+ "bpk-animate-height": "^5.0.0",
18
+ "bpk-mixins": "^31.2.0",
19
+ "bpk-react-utils": "^7.0.0",
20
20
  "prop-types": "^15.7.2"
21
21
  },
22
22
  "peerDependencies": {
23
- "react": "^16.3.0 || ^17.0.0"
23
+ "react": "^17.0.2"
24
24
  },
25
25
  "devDependencies": {
26
- "@skyscanner/bpk-foundations-web": "^8.0.0",
27
- "bpk-component-button": "^6.2.7",
28
- "bpk-component-checkbox": "^4.1.14",
29
- "bpk-component-icon": "^9.2.13",
30
- "bpk-component-input": "^6.1.18",
31
- "bpk-component-select": "^5.1.12",
32
- "bpk-component-textarea": "^4.2.12"
26
+ "@skyscanner/bpk-foundations-web": "^8.3.0",
27
+ "bpk-component-button": "^7.0.0",
28
+ "bpk-component-checkbox": "^5.0.0",
29
+ "bpk-component-icon": "^10.0.0",
30
+ "bpk-component-input": "^7.0.0",
31
+ "bpk-component-select": "^6.0.0",
32
+ "bpk-component-textarea": "^5.0.0"
33
33
  }
34
34
  }
package/bpk-component-graphic-promotion/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bpk-component-graphic-promotion",
3
- "version": "4.1.0",
3
+ "version": "5.0.0",
4
4
  "description": "Backpack graphic-promotion component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -13,13 +13,13 @@
13
13
  "registry": "https://registry.npmjs.org/"
14
14
  },
15
15
  "dependencies": {
16
- "bpk-component-button": "^6.2.7",
17
- "bpk-component-text": "^7.0.6",
18
- "bpk-mixins": "^31.1.1",
19
- "bpk-react-utils": "^6.0.0",
16
+ "bpk-component-button": "^7.0.0",
17
+ "bpk-component-text": "^8.0.0",
18
+ "bpk-mixins": "^31.2.0",
19
+ "bpk-react-utils": "^7.0.0",
20
20
  "prop-types": "^15.5.8"
21
21
  },
22
22
  "peerDependencies": {
23
- "react": "^16.3.0 || ^17.0.0"
23
+ "react": "^17.0.2"
24
24
  }
25
25
  }
package/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.scss CHANGED
@@ -31,6 +31,42 @@
31
31
  height: 100%;
32
32
  }
33
33
 
34
+ @mixin content-alignment {
35
+ &--start {
36
+ align-items: start;
37
+ }
38
+
39
+ &--center {
40
+ align-items: center;
41
+ }
42
+
43
+ &--end {
44
+ align-items: end;
45
+ }
46
+ }
47
+
48
+ @mixin text-alignment {
49
+ &--start {
50
+ align-items: start;
51
+ text-align: start;
52
+ }
53
+
54
+ &--center {
55
+ align-items: center;
56
+ text-align: center;
57
+ }
58
+
59
+ &--end {
60
+ align-items: start;
61
+ text-align: start;
62
+ }
63
+ }
64
+
65
+ @mixin reset-alignment {
66
+ align-items: start;
67
+ text-align: start;
68
+ }
69
+
34
70
  .bpk-card {
35
71
  @include bpk-card;
36
72
  }
@@ -59,6 +95,8 @@
59
95
  flex-direction: column;
60
96
  justify-content: center;
61
97
 
98
+ @include content-alignment;
99
+
62
100
  @include bpk-breakpoint-above-tablet {
63
101
  height: 28.75rem;
64
102
 
@@ -86,8 +124,8 @@
86
124
  @include bpk-breakpoint-small-tablet {
87
125
  padding: bpk-spacing-xl();
88
126
  justify-content: space-between;
89
- align-items: initial;
90
127
 
128
+ @include reset-alignment;
91
129
  @include bpk-margin-leading(0);
92
130
  @include fill-parent;
93
131
 
@@ -103,24 +141,16 @@
103
141
  @include bpk-breakpoint-small-mobile {
104
142
  padding: bpk-spacing-lg();
105
143
  }
106
-
107
- &--start {
108
- align-items: start;
109
- }
110
-
111
- &--center {
112
- align-items: center;
113
- }
114
-
115
- &--end {
116
- align-items: end;
117
- }
118
144
  }
119
145
 
120
146
  &__tagline {
121
147
  margin-bottom: bpk-spacing-md();
122
148
 
123
- @include bpk-label-1;
149
+ @include bpk-heading-5;
150
+
151
+ @include bpk-breakpoint-tablet {
152
+ @include bpk-label-1;
153
+ }
124
154
 
125
155
  @include bpk-breakpoint-small-tablet {
126
156
  @include bpk-subheading;
@@ -150,15 +180,9 @@
150
180
 
151
181
  @include bpk-breakpoint-small-tablet {
152
182
  margin-bottom: bpk-spacing-md();
153
-
154
- @include bpk-heading-1;
155
183
  }
156
184
 
157
185
  @include bpk-breakpoint-mobile {
158
- @include bpk-hero-5;
159
- }
160
-
161
- @include bpk-breakpoint-small-mobile {
162
186
  @include bpk-heading-2;
163
187
  }
164
188
  }
@@ -166,16 +190,16 @@
166
190
  &__subheading {
167
191
  @include bpk-body-default;
168
192
 
169
- @include bpk-breakpoint-small-tablet {
170
- @include bpk-subheading;
193
+ @include bpk-breakpoint-tablet {
194
+ @include bpk-heading-5;
171
195
  }
172
196
 
173
- @include bpk-breakpoint-mobile {
174
- @include bpk-body-longform;
197
+ @include bpk-breakpoint-small-tablet {
198
+ @include bpk-heading-3;
175
199
  }
176
200
 
177
- @include bpk-breakpoint-small-mobile {
178
- @include bpk-body-default;
201
+ @include bpk-breakpoint-mobile {
202
+ @include bpk-heading-5;
179
203
  }
180
204
  }
181
205
 
@@ -184,6 +208,8 @@
184
208
  display: flex;
185
209
  flex-direction: column;
186
210
 
211
+ @include text-alignment;
212
+
187
213
  @include bpk-breakpoint-above-tablet {
188
214
  width: 22.5rem;
189
215
  }
@@ -194,29 +220,14 @@
194
220
 
195
221
  @include bpk-breakpoint-small-tablet {
196
222
  width: initial;
197
- align-items: initial;
198
- text-align: initial;
199
- }
200
-
201
- &--start {
202
- align-items: start;
203
- text-align: start;
204
- }
205
-
206
- &--center {
207
- align-items: center;
208
- text-align: center;
209
- }
210
223
 
211
- &--end {
212
- align-items: end;
213
- text-align: end;
224
+ @include reset-alignment;
214
225
  }
215
226
  }
216
227
 
217
228
  &__sponsor-content {
218
229
  display: flex;
219
- margin-bottom: bpk-spacing-xl();
230
+ margin-bottom: bpk-spacing-base();
220
231
  flex-direction: column;
221
232
 
222
233
  @include bpk-breakpoint-small-tablet {
@@ -232,10 +243,6 @@
232
243
  @include bpk-breakpoint-small-tablet {
233
244
  margin-bottom: bpk-spacing-md();
234
245
 
235
- @include bpk-heading-4;
236
- }
237
-
238
- @include bpk-breakpoint-mobile {
239
246
  @include bpk-heading-3;
240
247
  }
241
248
 
package/bpk-component-grid/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bpk-component-grid",
3
- "version": "3.1.12",
3
+ "version": "4.0.0",
4
4
  "description": "Backpack grid components.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -14,11 +14,11 @@
14
14
  },
15
15
  "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
16
16
  "dependencies": {
17
- "bpk-mixins": "^31.1.1",
18
- "bpk-react-utils": "^6.0.0",
17
+ "bpk-mixins": "^31.2.0",
18
+ "bpk-react-utils": "^7.0.0",
19
19
  "prop-types": "^15.7.2"
20
20
  },
21
21
  "peerDependencies": {
22
- "react": "^16.3.0 || ^17.0.0"
22
+ "react": "^17.0.2"
23
23
  }
24
24
  }
package/bpk-component-grid-toggle/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bpk-component-grid-toggle",
3
- "version": "3.1.12",
3
+ "version": "4.0.0",
4
4
  "description": "Backpack vertical grid toggle component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -14,12 +14,12 @@
14
14
  },
15
15
  "gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
16
16
  "dependencies": {
17
- "bpk-component-link": "^3.1.12",
18
- "bpk-mixins": "^31.1.1",
19
- "bpk-react-utils": "^6.0.0",
17
+ "bpk-component-link": "^4.0.0",
18
+ "bpk-mixins": "^31.2.0",
19
+ "bpk-react-utils": "^7.0.0",
20
20
  "prop-types": "^15.7.2"
21
21
  },
22
22
  "peerDependencies": {
23
- "react": "^16.3.0 || ^17.0.0"
23
+ "react": "^17.0.2"
24
24
  }
25
25
  }
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.14",
3
+ "version": "6.0.0",
4
4
  "description": "Backpack horizontal nav component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -14,17 +14,17 @@
14
14
  },
15
15
  "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
16
16
  "dependencies": {
17
- "bpk-component-mobile-scroll-container": "^3.1.12",
18
- "bpk-mixins": "^31.1.1",
19
- "bpk-react-utils": "^6.0.0",
17
+ "bpk-component-mobile-scroll-container": "^4.0.0",
18
+ "bpk-mixins": "^31.2.0",
19
+ "bpk-react-utils": "^7.0.0",
20
20
  "prop-types": "^15.7.2"
21
21
  },
22
22
  "peerDependencies": {
23
- "react": "^16.3.0 || ^17.0.0"
23
+ "react": "^17.0.2"
24
24
  },
25
25
  "devDependencies": {
26
- "@skyscanner/bpk-foundations-web": "^8.0.0",
27
- "bpk-component-text": "^7.0.6",
28
- "bpk-storybook-utils": "^1.1.11"
26
+ "@skyscanner/bpk-foundations-web": "^8.3.0",
27
+ "bpk-component-text": "^8.0.0",
28
+ "bpk-storybook-utils": "^2.0.0"
29
29
  }
30
30
  }
package/bpk-component-icon/lg/account-circle.js CHANGED
@@ -5,4 +5,4 @@ export default (({
5
5
  }) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style={{
6
6
  width: "1.5rem",
7
7
  height: "1.5rem"
8
- }} {...props}><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zM9.809 7.254A1.283 1.283 0 0 1 11.12 6h1.763a1.283 1.283 0 0 1 1.31 1.254V9.35a2.194 2.194 0 0 1-4.384 0zM16.5 16a5.28 5.28 0 0 1-4.5 2 5.261 5.261 0 0 1-4.5-2 1.345 1.345 0 0 1 0-1.5 7.204 7.204 0 0 1 4.5-1.497 7.322 7.322 0 0 1 4.5 1.497c.345.28.274 1.15 0 1.5z" /></svg>);
8
+ }} {...props}><path d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10zM6.21 15.975A7.037 7.037 0 0 0 12 19a7.037 7.037 0 0 0 5.79-3.024c.427-.613.174-1.435-.5-1.762A12.06 12.06 0 0 0 12 13c-1.898 0-3.693.436-5.29 1.213-.673.327-.927 1.15-.5 1.762zM10.994 5C10.17 5 9.5 5.618 9.5 6.381v2.31C9.5 9.965 10.62 11 12 11s2.5-1.035 2.5-2.31V6.382C14.5 5.618 13.83 5 13.005 5h-2.01z" /></svg>);
package/bpk-component-icon/lg/center-location.js CHANGED
@@ -5,4 +5,4 @@ export default (({
5
5
  }) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style={{
6
6
  width: "1.5rem",
7
7
  height: "1.5rem"
8
- }} {...props}><path d="M6 4a2 2 0 0 0-2 2v2a1 1 0 0 1-2 0V6a4 4 0 0 1 4-4h2a1 1 0 0 1 0 2H6zm9-1a1 1 0 0 1 1-1h2a4 4 0 0 1 4 4v2a1 1 0 1 1-2 0V6a2 2 0 0 0-2-2h-2a1 1 0 0 1-1-1zM3 15a1 1 0 0 1 1 1v2a2 2 0 0 0 2 2h2a1 1 0 1 1 0 2H6a4 4 0 0 1-4-4v-2a1 1 0 0 1 1-1zm18 0a1 1 0 0 1 1 1v2a4 4 0 0 1-4 4h-2a1 1 0 1 1 0-2h2a2 2 0 0 0 2-2v-2a1 1 0 0 1 1-1zm-8-.738c0-.229.156-.425.37-.503A4.002 4.002 0 0 0 12 6a4 4 0 0 0-1.37 7.76c.214.077.37.273.37.502V17a1 1 0 1 0 2 0v-2.738z" /></svg>);
8
+ }} {...props}><path d="M6 4a2 2 0 0 0-2 2v2a1 1 0 0 1-2 0V6a4 4 0 0 1 4-4h2a1 1 0 0 1 0 2H6zm9-1a1 1 0 0 1 1-1h2a4 4 0 0 1 4 4v2a1 1 0 1 1-2 0V6a2 2 0 0 0-2-2h-2a1 1 0 0 1-1-1zM4 16v2a2 2 0 0 0 2 2h2a1 1 0 1 1 0 2H6a4 4 0 0 1-4-4v-2a1 1 0 1 1 2 0zm17-1a1 1 0 0 1 1 1v2a4 4 0 0 1-4 4h-2a1 1 0 1 1 0-2h2a2 2 0 0 0 2-2v-2a1 1 0 0 1 1-1zm-7.63-1.24a.545.545 0 0 0-.37.502V17a1 1 0 1 1-2 0v-2.738a.545.545 0 0 0-.37-.503A4.002 4.002 0 0 1 12 6a4 4 0 0 1 1.37 7.76z" /></svg>);
package/bpk-component-icon/lg/face-id.js CHANGED
@@ -5,4 +5,4 @@ export default (({
5
5
  }) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style={{
6
6
  width: "1.5rem",
7
7
  height: "1.5rem"
8
- }} {...props}><path d="M4 6a2 2 0 0 1 2-2h2a1 1 0 0 0 0-2H6a4 4 0 0 0-4 4v2a1 1 0 0 0 2 0zm12-4a1 1 0 0 0 0 2h2a2 2 0 0 1 2 2v2a1 1 0 0 0 2 0V6a4 4 0 0 0-4-4zM4 16a1 1 0 0 0-2 0v2a4 4 0 0 0 4 4h2a1 1 0 0 0 0-2H6a2 2 0 0 1-2-2zm18 0a1 1 0 0 0-2 0v2a2 2 0 0 1-2 2h-2a1 1 0 0 0 0 2h2a4 4 0 0 0 4-4zM7 8a1 1 0 0 1 2 0v2a1 1 0 0 1-2 0zm8 0a1 1 0 0 1 2 0v2a1 1 0 0 1-2 0zm.555 8.866a1.07 1.07 0 0 0 .326-1.366.838.838 0 0 0-1.214-.366 4.521 4.521 0 0 1-5.294.027.833.833 0 0 0-1.23.294 1.077 1.077 0 0 0 .262 1.383 6.13 6.13 0 0 0 7.15.028zM12 8.5a1 1 0 0 1 1 1v2.172a3 3 0 0 1-.879 2.12l-.414.415a1 1 0 0 1-1.414-1.414l.414-.414a1 1 0 0 0 .293-.707V9.5a1 1 0 0 1 1-1z" /></svg>);
8
+ }} {...props}><path d="M4 6v2a1 1 0 0 1-2 0V6a4 4 0 0 1 4-4h2a1 1 0 0 1 0 2H6a2 2 0 0 0-2 2zm12-4h2a4 4 0 0 1 4 4v2a1 1 0 1 1-2 0V6a2 2 0 0 0-2-2h-2a1 1 0 1 1 0-2zM4 16v2a2 2 0 0 0 2 2h2a1 1 0 1 1 0 2H6a4 4 0 0 1-4-4v-2a1 1 0 1 1 2 0zm18 0v2a4 4 0 0 1-4 4h-2a1 1 0 1 1 0-2h2a2 2 0 0 0 2-2v-2a1 1 0 1 1 2 0zM7 8a1 1 0 0 1 2 0v2a1 1 0 1 1-2 0V8zm8 0a1 1 0 1 1 2 0v2a1 1 0 1 1-2 0V8zm.555 8.866c-3.028 1.966-5.762.986-7.15-.028-.412-.3-.529-.92-.261-1.383.267-.463.817-.594 1.23-.293.981.717 2.987 1.469 5.293-.028.425-.276.968-.112 1.214.366.245.478.1 1.09-.326 1.366zM12 8.5a1 1 0 0 1 1 1v2.172a3 3 0 0 1-.879 2.12l-.414.415a1 1 0 0 1-1.414-1.414l.414-.414a1 1 0 0 0 .293-.707V9.5a1 1 0 0 1 1-1z" /></svg>);
package/bpk-component-icon/lg/fingerprint.js CHANGED
@@ -5,4 +5,4 @@ export default (({
5
5
  }) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style={{
6
6
  width: "1.5rem",
7
7
  height: "1.5rem"
8
- }} {...props}><path d="M11.562 2.448a1 1 0 0 1-.803 1.164 8.003 8.003 0 0 0-6.55 7.87 6.495 6.495 0 0 1-.485 2.465 1 1 0 0 1-1.864-.724l.014-.035a4.489 4.489 0 0 0 .334-1.707 10.002 10.002 0 0 1 8.19-9.836 1 1 0 0 1 1.164.803zm2.051.086a1 1 0 0 1 1.227-.703h.001a10.004 10.004 0 0 1 7.367 9.65v.5a24.56 24.56 0 0 1-.674 5.733 1 1 0 1 1-1.945-.466 22.56 22.56 0 0 0 .62-5.267v-.5a8.004 8.004 0 0 0-5.894-7.72 1 1 0 0 1-.702-1.227zm-1.405 4.447a4.502 4.502 0 0 0-4.193 2.864 1 1 0 1 1-1.863-.728 6.502 6.502 0 0 1 12.113 0 1 1 0 0 1-1.863.728 4.502 4.502 0 0 0-4.194-2.864zm0 3.5a1 1 0 0 0-1 1v.5a13.462 13.462 0 0 1-.807 4.607 13.468 13.468 0 0 1-2.32 4.033 1 1 0 0 1-1.536-1.28 11.542 11.542 0 0 0 1.976-3.435 11.461 11.461 0 0 0 .687-3.925v-.5a3 3 0 0 1 6 0v.5a17.416 17.416 0 0 1-3.128 9.987 1 1 0 0 1-1.64-1.143 15.414 15.414 0 0 0 2.77-8.844v-.5a1 1 0 0 0-1-1zm-5.5 2.022a1 1 0 0 1 .754 1.196 9.973 9.973 0 0 1-2.207 4.345 1 1 0 1 1-1.509-1.314 7.973 7.973 0 0 0 1.766-3.473 1 1 0 0 1 1.196-.754zm11.02-.022a1 1 0 0 1 .922 1.071 20.89 20.89 0 0 1-2.214 7.94 1 1 0 1 1-1.783-.907 18.894 18.894 0 0 0 2.003-7.18 1 1 0 0 1 1.07-.924z" /></svg>);
8
+ }} {...props}><path d="M10.984 2.967a1 1 0 0 1-.804 1.164A8.003 8.003 0 0 0 3.63 12c0 .871-.172 1.704-.484 2.466a1 1 0 1 1-1.85-.759c.215-.525.334-1.1.334-1.707 0-4.905 3.531-8.984 8.19-9.836a1 1 0 0 1 1.164.803zm2.051.086a1 1 0 0 1 1.228-.703C18.508 3.506 21.63 7.387 21.63 12v.5a24.56 24.56 0 0 1-.674 5.733 1 1 0 1 1-1.945-.466 22.56 22.56 0 0 0 .62-5.267V12a8.004 8.004 0 0 0-5.894-7.72 1 1 0 0 1-.702-1.227zM11.63 7.5a4.502 4.502 0 0 0-4.193 2.864 1 1 0 0 1-1.863-.728 6.502 6.502 0 0 1 12.113 0 1 1 0 0 1-1.863.728A4.502 4.502 0 0 0 11.63 7.5zm0 3.5a1 1 0 0 0-1 1v.5c0 1.616-.284 3.168-.807 4.607a13.468 13.468 0 0 1-2.32 4.033 1 1 0 0 1-1.536-1.28 11.542 11.542 0 0 0 1.976-3.435c.445-1.224.687-2.545.687-3.925V12a3 3 0 1 1 6 0v.5a17.416 17.416 0 0 1-3.128 9.987 1 1 0 0 1-1.64-1.143 15.414 15.414 0 0 0 2.77-8.844V12a1 1 0 0 0-1.002-1zm-5.5 2.022a1 1 0 0 1 .754 1.196 9.973 9.973 0 0 1-2.207 4.345 1 1 0 1 1-1.509-1.314 7.973 7.973 0 0 0 1.766-3.473 1 1 0 0 1 1.196-.754zM17.149 13a1 1 0 0 1 .923 1.071 20.89 20.89 0 0 1-2.214 7.94 1 1 0 1 1-1.783-.907 18.894 18.894 0 0 0 2.003-7.18 1 1 0 0 1 1.07-.924z" /></svg>);
package/bpk-component-icon/lg/menu.js CHANGED
@@ -5,4 +5,4 @@ export default (({
5
5
  }) => <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" style={{
6
6
  width: "1.5rem",
7
7
  height: "1.5rem"
8
- }} {...props}><path d="M21 7H3a.945.945 0 0 1-1-1 .945.945 0 0 1 1-1h18a.945.945 0 0 1 1 1 .945.945 0 0 1-1 1zm-4 5c0-.6-.333-1-.833-1H2.833c-.5 0-.833.4-.833 1s.333 1 .833 1h13.334c.5 0 .833-.4.833-1zm3.889 5a1.006 1.006 0 1 1 0 2H3.11a1.006 1.006 0 1 1 .001-2h17.778z" /></svg>);
8
+ }} {...props}><path d="M21 7H3c-.6 0-1-.4-1-1s.4-1 1-1h18c.6 0 1 .4 1 1s-.4 1-1 1zm1 5c0 .6-.333 1-.833 1H2.833c-.5 0-.833-.4-.833-1s.333-1 .833-1h18.334c.5 0 .833.4.833 1zm-1.111 5c.667 0 1.111.4 1.111 1s-.444 1-1.111 1H3.11C2.444 19 2 18.6 2 18s.444-1 1.111-1H20.89z" /></svg>);