@skyscanner/backpack-web 6.1.0 → 7.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 (23) hide show
  1. package/bpk-component-aria-live/package.json +2 -2
  2. package/bpk-component-calendar/package.json +2 -2
  3. package/bpk-component-calendar/src/BpkCalendarDate.js +0 -3
  4. package/bpk-component-calendar/src/BpkCalendarDate.module.css +1 -1
  5. package/bpk-component-calendar/src/BpkCalendarDate.module.scss +1 -6
  6. package/bpk-component-calendar/src/BpkCalendarGridHeader.module.css +1 -1
  7. package/bpk-component-calendar/src/BpkCalendarGridHeader.module.scss +1 -4
  8. package/bpk-component-datatable/package.json +1 -1
  9. package/bpk-component-datatable/src/BpkDataTable.module.css +1 -1
  10. package/bpk-component-datatable/src/BpkDataTable.module.scss +4 -1
  11. package/bpk-component-datepicker/package.json +2 -2
  12. package/bpk-component-description-list/package.json +1 -1
  13. package/bpk-component-description-list/src/BpkDescriptionList.module.css +1 -1
  14. package/bpk-component-description-list/src/BpkDescriptionList.module.scss +1 -1
  15. package/bpk-component-fieldset/package.json +3 -3
  16. package/bpk-component-graphic-promotion/README.md +2 -0
  17. package/bpk-component-graphic-promotion/package.json +1 -1
  18. package/bpk-component-graphic-promotion/src/BpkGraphicPromo.js +3 -1
  19. package/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.scss +144 -141
  20. package/bpk-component-phone-input/package.json +2 -2
  21. package/bpk-component-scrollable-calendar/package.json +2 -2
  22. package/package.json +1 -1
  23. 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.20",
4
4
  "description": "Backpack aria-live component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -20,7 +20,7 @@
20
20
  "devDependencies": {
21
21
  "bpk-component-chip": "^5.2.17",
22
22
  "bpk-component-code": "^3.1.12",
23
- "bpk-component-fieldset": "^4.1.19",
23
+ "bpk-component-fieldset": "^4.1.20",
24
24
  "bpk-component-select": "^5.1.12",
25
25
  "bpk-component-switch": "^2.1.13"
26
26
  },
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.0",
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.20",
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-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.1",
4
4
  "description": "Backpack datepicker component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -15,7 +15,7 @@
15
15
  "gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
16
16
  "dependencies": {
17
17
  "bpk-component-breakpoint": "^4.0.4",
18
- "bpk-component-calendar": "^11.1.19",
18
+ "bpk-component-calendar": "^11.2.0",
19
19
  "bpk-component-input": "^6.1.17",
20
20
  "bpk-component-modal": "^5.0.0",
21
21
  "bpk-component-popover": "^6.0.0",
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.20",
4
4
  "description": "Backpack fieldset component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -26,9 +26,9 @@
26
26
  "devDependencies": {
27
27
  "bpk-component-autosuggest": "^6.1.17",
28
28
  "bpk-component-button": "^6.2.7",
29
- "bpk-component-calendar": "^11.1.19",
29
+ "bpk-component-calendar": "^11.2.0",
30
30
  "bpk-component-checkbox": "^4.1.14",
31
- "bpk-component-datepicker": "^16.0.0",
31
+ "bpk-component-datepicker": "^16.0.1",
32
32
  "bpk-component-input": "^6.1.17",
33
33
  "bpk-component-select": "^5.1.12",
34
34
  "bpk-component-textarea": "^4.2.12"
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.0.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: 80rem;
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-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.20",
4
4
  "description": "Backpack phone input component.",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -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.20",
31
31
  "bpk-component-image": "^5.1.14"
32
32
  }
33
33
  }
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.0",
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.0",
19
19
  "bpk-component-text": "^7.0.6",
20
20
  "bpk-mixins": "^31.1.1",
21
21
  "bpk-react-utils": "^6.0.0",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyscanner/backpack-web",
3
- "version": "6.1.0",
3
+ "version": "7.0.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
- }