@skyscanner/backpack-web 8.0.0 → 9.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 (104) hide show
  1. package/bpk-animate-height/package.json +4 -4
  2. package/bpk-component-accordion/index.js +0 -2
  3. package/bpk-component-accordion/package.json +9 -9
  4. package/bpk-component-accordion/src/BpkAccordionItem.module.scss +3 -44
  5. package/bpk-component-aria-live/package.json +9 -9
  6. package/bpk-component-autosuggest/package.json +6 -6
  7. package/bpk-component-badge/README.md +7 -7
  8. package/bpk-component-badge/package.json +7 -7
  9. package/bpk-component-badge/src/BpkBadge.js +2 -0
  10. package/bpk-component-badge/src/BpkBadge.module.scss +4 -0
  11. package/bpk-component-banner-alert/package.json +11 -11
  12. package/bpk-component-barchart/package.json +10 -10
  13. package/bpk-component-blockquote/package.json +4 -4
  14. package/bpk-component-breadcrumb/package.json +7 -7
  15. package/bpk-component-breakpoint/package.json +6 -6
  16. package/bpk-component-button/package.json +4 -4
  17. package/bpk-component-calendar/package.json +11 -11
  18. package/bpk-component-card/package.json +6 -6
  19. package/bpk-component-checkbox/package.json +7 -7
  20. package/bpk-component-chip/package.json +7 -7
  21. package/bpk-component-close-button/package.json +6 -6
  22. package/bpk-component-code/package.json +4 -4
  23. package/bpk-component-content-container/package.json +4 -4
  24. package/bpk-component-datatable/package.json +6 -6
  25. package/bpk-component-datepicker/package.json +11 -11
  26. package/bpk-component-description-list/package.json +4 -4
  27. package/bpk-component-dialog/package.json +10 -10
  28. package/bpk-component-drawer/package.json +11 -11
  29. package/bpk-component-fieldset/package.json +14 -14
  30. package/bpk-component-flare/package.json +6 -6
  31. package/bpk-component-flare/src/bpk-flare-bar.module.scss +2 -2
  32. package/bpk-component-floating-notification/package.json +7 -7
  33. package/bpk-component-form-validation/package.json +12 -12
  34. package/bpk-component-graphic-promotion/package.json +6 -6
  35. package/bpk-component-graphic-promotion/src/BpkGraphicPromo.js +6 -1
  36. package/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.scss +54 -47
  37. package/bpk-component-grid/package.json +4 -4
  38. package/bpk-component-grid-toggle/package.json +5 -5
  39. package/bpk-component-horizontal-nav/package.json +8 -8
  40. package/bpk-component-icon/lg/account-circle.js +1 -1
  41. package/bpk-component-icon/lg/center-location.js +1 -1
  42. package/bpk-component-icon/lg/face-id.js +1 -1
  43. package/bpk-component-icon/lg/fingerprint.js +1 -1
  44. package/bpk-component-icon/lg/menu.js +1 -1
  45. package/bpk-component-icon/lg/search.js +1 -1
  46. package/bpk-component-icon/package.json +9 -9
  47. package/bpk-component-icon/sm/account-circle.js +1 -1
  48. package/bpk-component-icon/sm/center-location.js +8 -0
  49. package/bpk-component-icon/sm/face-id.js +8 -0
  50. package/bpk-component-icon/sm/fingerprint.js +8 -0
  51. package/bpk-component-icon/sm/menu.js +1 -1
  52. package/bpk-component-icon/sm/search.js +1 -1
  53. package/bpk-component-image/package.json +8 -8
  54. package/bpk-component-infinite-scroll/package.json +8 -8
  55. package/bpk-component-input/package.json +8 -8
  56. package/bpk-component-label/package.json +4 -4
  57. package/bpk-component-link/package.json +6 -6
  58. package/bpk-component-list/package.json +4 -4
  59. package/bpk-component-loading-button/package.json +8 -8
  60. package/bpk-component-map/package.json +8 -8
  61. package/bpk-component-mobile-scroll-container/package.json +5 -5
  62. package/bpk-component-modal/package.json +11 -11
  63. package/bpk-component-navigation-bar/package.json +10 -10
  64. package/bpk-component-nudger/package.json +9 -9
  65. package/bpk-component-nudger/src/BpkConfigurableNudger.js +1 -1
  66. package/bpk-component-overlay/package.json +6 -6
  67. package/bpk-component-pagination/package.json +6 -6
  68. package/bpk-component-panel/package.json +4 -4
  69. package/bpk-component-phone-input/package.json +11 -11
  70. package/bpk-component-popover/package.json +10 -10
  71. package/bpk-component-price/package.json +5 -5
  72. package/bpk-component-progress/package.json +7 -7
  73. package/bpk-component-radio/package.json +6 -6
  74. package/bpk-component-rating/package.json +6 -6
  75. package/bpk-component-rtl-toggle/package.json +4 -4
  76. package/bpk-component-scrollable-calendar/package.json +8 -8
  77. package/bpk-component-section-list/package.json +8 -8
  78. package/bpk-component-select/package.json +5 -5
  79. package/bpk-component-skip-link/package.json +4 -4
  80. package/bpk-component-slider/package.json +6 -6
  81. package/bpk-component-spinner/package.json +5 -5
  82. package/bpk-component-split-input/package.json +5 -5
  83. package/bpk-component-star-rating/package.json +7 -7
  84. package/bpk-component-switch/package.json +4 -4
  85. package/bpk-component-table/package.json +4 -4
  86. package/bpk-component-text/package.json +4 -4
  87. package/bpk-component-textarea/package.json +6 -6
  88. package/bpk-component-theme-toggle/package.json +7 -7
  89. package/bpk-component-ticket/package.json +6 -6
  90. package/bpk-component-tooltip/package.json +6 -6
  91. package/bpk-react-utils/index.js +0 -3
  92. package/bpk-react-utils/package.json +2 -2
  93. package/bpk-scrim-utils/package.json +4 -4
  94. package/bpk-theming/package.json +3 -3
  95. package/package.json +5 -5
  96. package/bpk-component-accordion/src/themeAttributes.js +0 -25
  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-code/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bpk-component-code",
3
- "version": "3.1.13",
3
+ "version": "4.0.1",
4
4
  "description": "Backpack code 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.1",
17
+ "bpk-mixins": "^31.4.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-content-container/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bpk-component-content-container",
3
- "version": "5.0.7",
3
+ "version": "6.0.1",
4
4
  "description": "Backpack content container 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.1",
17
+ "bpk-mixins": "^31.4.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-datatable/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bpk-component-datatable",
3
- "version": "4.2.1",
3
+ "version": "5.0.1",
4
4
  "description": "Backpack datatable 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-icon": "^9.2.14",
18
- "bpk-mixins": "^31.1.1",
19
- "bpk-react-utils": "^6.0.1",
17
+ "bpk-component-icon": "^10.0.1",
18
+ "bpk-mixins": "^31.4.0",
19
+ "bpk-react-utils": "^7.0.0",
20
20
  "lodash": "^4.17.20",
21
21
  "prop-types": "^15.7.2",
22
22
  "react-virtualized": "^9.22.3"
23
23
  },
24
24
  "peerDependencies": {
25
- "react": "^16.3.0 || ^17.0.0"
25
+ "react": "^17.0.2"
26
26
  },
27
27
  "devDependencies": {
28
- "@skyscanner/bpk-foundations-web": "^8.0.0"
28
+ "@skyscanner/bpk-foundations-web": "^8.5.0"
29
29
  }
30
30
  }
package/bpk-component-datepicker/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bpk-component-datepicker",
3
- "version": "17.0.0",
3
+ "version": "18.0.1",
4
4
  "description": "Backpack datepicker component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -14,20 +14,20 @@
14
14
  },
15
15
  "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
16
16
  "dependencies": {
17
- "bpk-component-breakpoint": "^4.0.5",
18
- "bpk-component-calendar": "^11.2.2",
19
- "bpk-component-input": "^6.1.19",
20
- "bpk-component-modal": "^5.0.1",
21
- "bpk-component-popover": "^7.0.0",
22
- "bpk-mixins": "^31.1.1",
23
- "bpk-react-utils": "^6.0.1",
17
+ "bpk-component-breakpoint": "^5.0.1",
18
+ "bpk-component-calendar": "^12.0.1",
19
+ "bpk-component-input": "^7.0.1",
20
+ "bpk-component-modal": "^6.0.1",
21
+ "bpk-component-popover": "^8.0.1",
22
+ "bpk-mixins": "^31.4.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
  "devDependencies": {
30
- "@skyscanner/bpk-foundations-web": "^8.0.0",
31
- "bpk-storybook-utils": "^1.1.12"
30
+ "@skyscanner/bpk-foundations-web": "^8.5.0",
31
+ "bpk-storybook-utils": "^2.0.1"
32
32
  }
33
33
  }
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.1",
3
+ "version": "4.0.1",
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.1",
17
+ "bpk-mixins": "^31.4.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.1",
3
+ "version": "7.0.1",
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.14",
18
- "bpk-component-flare": "^2.1.16",
19
- "bpk-mixins": "^31.1.1",
20
- "bpk-react-utils": "^6.0.1",
21
- "bpk-scrim-utils": "^5.1.12",
17
+ "bpk-component-close-button": "^4.0.1",
18
+ "bpk-component-flare": "^3.0.1",
19
+ "bpk-mixins": "^31.4.0",
20
+ "bpk-react-utils": "^7.0.0",
21
+ "bpk-scrim-utils": "^6.0.1",
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.8",
29
- "bpk-component-icon": "^9.2.14",
30
- "bpk-component-text": "^7.0.7"
28
+ "bpk-component-button": "^7.0.1",
29
+ "bpk-component-icon": "^10.0.1",
30
+ "bpk-component-text": "^8.0.1"
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.1",
3
+ "version": "7.0.1",
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.14",
19
- "bpk-component-icon": "^9.2.14",
20
- "bpk-component-link": "^3.1.13",
21
- "bpk-mixins": "^31.1.1",
22
- "bpk-react-utils": "^6.0.1",
23
- "bpk-scrim-utils": "^5.1.12",
17
+ "@skyscanner/bpk-foundations-web": "^8.5.0",
18
+ "bpk-component-close-button": "^4.0.1",
19
+ "bpk-component-icon": "^10.0.1",
20
+ "bpk-component-link": "^4.0.1",
21
+ "bpk-mixins": "^31.4.0",
22
+ "bpk-react-utils": "^7.0.0",
23
+ "bpk-scrim-utils": "^6.0.1",
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.8",
32
- "bpk-component-text": "^7.0.7"
31
+ "bpk-component-button": "^7.0.1",
32
+ "bpk-component-text": "^8.0.1"
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.22",
3
+ "version": "5.0.1",
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.19",
18
- "bpk-component-label": "^5.1.13",
19
- "bpk-mixins": "^31.1.1",
20
- "bpk-react-utils": "^6.0.1",
17
+ "bpk-component-form-validation": "^5.0.1",
18
+ "bpk-component-label": "^6.0.1",
19
+ "bpk-mixins": "^31.4.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.19",
28
- "bpk-component-button": "^6.2.8",
29
- "bpk-component-calendar": "^11.2.2",
30
- "bpk-component-checkbox": "^4.1.15",
31
- "bpk-component-datepicker": "^17.0.0",
32
- "bpk-component-input": "^6.1.19",
33
- "bpk-component-select": "^5.1.13",
34
- "bpk-component-textarea": "^4.2.13"
27
+ "bpk-component-autosuggest": "^7.0.1",
28
+ "bpk-component-button": "^7.0.1",
29
+ "bpk-component-calendar": "^12.0.1",
30
+ "bpk-component-checkbox": "^5.0.1",
31
+ "bpk-component-datepicker": "^18.0.1",
32
+ "bpk-component-input": "^7.0.1",
33
+ "bpk-component-select": "^6.0.1",
34
+ "bpk-component-textarea": "^5.0.1"
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.16",
3
+ "version": "3.0.1",
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.13",
21
- "bpk-component-text": "^7.0.7",
22
- "bpk-mixins": "^31.1.1",
23
- "bpk-react-utils": "^6.0.1",
20
+ "bpk-component-label": "^6.0.1",
21
+ "bpk-component-text": "^8.0.1",
22
+ "bpk-mixins": "^31.4.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-flare/src/bpk-flare-bar.module.scss CHANGED
@@ -44,7 +44,7 @@ $bpk-spacing-v2: true;
44
44
  height: $bpk-flare-height-desktop;
45
45
  margin-left: 50%;
46
46
  transform: translateX(-50%);
47
- fill: $bpk-color-white;
47
+ fill: $bpk-surface-default-day;
48
48
 
49
49
  @include bpk-rtl {
50
50
  margin-right: 50%;
@@ -63,7 +63,7 @@ $bpk-spacing-v2: true;
63
63
  left: 0;
64
64
  width: $bpk-flare-corner-radius;
65
65
  height: $bpk-flare-corner-radius;
66
- fill: $bpk-color-white;
66
+ fill: $bpk-surface-default-day;
67
67
 
68
68
  &--trailing {
69
69
  right: 0;
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.2",
3
+ "version": "2.0.1",
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.22",
17
- "bpk-component-button": "^6.2.8",
18
- "bpk-component-text": "^7.0.7",
19
- "bpk-mixins": "^31.1.1",
20
- "bpk-react-utils": "^6.0.1",
16
+ "bpk-component-aria-live": "^3.0.1",
17
+ "bpk-component-button": "^7.0.1",
18
+ "bpk-component-text": "^8.0.1",
19
+ "bpk-mixins": "^31.4.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.19",
3
+ "version": "5.0.1",
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.13",
18
- "bpk-mixins": "^31.1.1",
19
- "bpk-react-utils": "^6.0.1",
17
+ "bpk-animate-height": "^5.0.1",
18
+ "bpk-mixins": "^31.4.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.8",
28
- "bpk-component-checkbox": "^4.1.15",
29
- "bpk-component-icon": "^9.2.14",
30
- "bpk-component-input": "^6.1.19",
31
- "bpk-component-select": "^5.1.13",
32
- "bpk-component-textarea": "^4.2.13"
26
+ "@skyscanner/bpk-foundations-web": "^8.5.0",
27
+ "bpk-component-button": "^7.0.1",
28
+ "bpk-component-checkbox": "^5.0.1",
29
+ "bpk-component-icon": "^10.0.1",
30
+ "bpk-component-input": "^7.0.1",
31
+ "bpk-component-select": "^6.0.1",
32
+ "bpk-component-textarea": "^5.0.1"
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.1",
3
+ "version": "5.0.1",
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.8",
17
- "bpk-component-text": "^7.0.7",
18
- "bpk-mixins": "^31.1.1",
19
- "bpk-react-utils": "^6.0.1",
16
+ "bpk-component-button": "^7.0.1",
17
+ "bpk-component-text": "^8.0.1",
18
+ "bpk-mixins": "^31.4.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.js CHANGED
@@ -122,6 +122,7 @@ const BpkGraphicPromo = (props: Props) => {
122
122
  // clicks and key presses (Enter/Space) for the whole component, as described here:
123
123
  // https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets
124
124
  <div
125
+ id={contentId}
125
126
  className={cardClasses}
126
127
  style={style}
127
128
  role="link"
@@ -130,7 +131,11 @@ const BpkGraphicPromo = (props: Props) => {
130
131
  onClick={onClickWrapper}
131
132
  onKeyDown={onKeyWrapper}
132
133
  >
133
- <div id={contentId} className={containerClasses} aria-hidden>
134
+ <div
135
+ id={contentId && `${contentId}__content`}
136
+ className={containerClasses}
137
+ aria-hidden
138
+ >
134
139
  <div className={getTextClasses('bpk-graphic-promo__sponsor-content')}>
135
140
  {sponsor && (
136
141
  <>
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.13",
3
+ "version": "4.0.1",
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.1",
17
+ "bpk-mixins": "^31.4.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.13",
3
+ "version": "4.0.1",
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.13",
18
- "bpk-mixins": "^31.1.1",
19
- "bpk-react-utils": "^6.0.1",
17
+ "bpk-component-link": "^4.0.1",
18
+ "bpk-mixins": "^31.4.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
  }