@skyscanner/backpack-web 11.2.0 → 13.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.
- package/bpk-component-banner-alert/src/BpkBannerAlert.module.scss +1 -1
- package/bpk-component-banner-alert/src/common-types.js +1 -1
- package/bpk-component-close-button/src/BpkCloseButton.module.scss +3 -3
- package/bpk-component-content-cards/src/BpkContentCard.module.scss +1 -1
- package/bpk-component-datatable/src/BpkDataTable.module.scss +7 -7
- package/bpk-component-datatable/src/BpkDataTableHeader.module.scss +3 -3
- package/bpk-component-dialog/src/BpkDialog.module.scss +5 -5
- package/bpk-component-dialog/src/BpkDialogInner.module.scss +1 -1
- package/bpk-component-drawer/src/BpkDrawerContent.module.scss +2 -2
- package/bpk-component-graphic-promotion/src/BpkGraphicPromo.module.scss +2 -2
- package/bpk-component-image/src/BpkImage.module.scss +2 -2
- package/bpk-component-modal/src/BpkModalInner.module.scss +1 -1
- package/bpk-component-nudger/src/BpkNudger.module.scss +1 -1
- package/bpk-component-popover/src/BpkPopover.module.scss +10 -10
- package/bpk-component-progress/README.md +0 -1
- package/bpk-component-progress/src/BpkProgress.js +15 -22
- package/bpk-component-progress/src/BpkProgress.module.scss +3 -3
- package/bpk-component-rating/src/BpkRating.module.scss +3 -3
- package/bpk-component-section-list/src/BpkSectionListItem.module.scss +6 -6
- package/bpk-component-section-list/src/BpkSectionListSection.module.scss +1 -1
- package/bpk-component-skip-link/src/BpkSkipLink.module.scss +2 -3
- package/bpk-component-spinner/src/BpkSpinner.module.scss +4 -3
- package/bpk-component-star-rating/src/BpkStar.module.scss +2 -2
- package/bpk-component-table/README.md +4 -4
- package/bpk-component-table/src/BpkTable.js +7 -4
- package/bpk-component-table/src/BpkTableHeadCell.js +7 -4
- package/bpk-component-ticket/src/BpkTicket.module.scss +5 -6
- package/bpk-component-tooltip/src/BpkTooltip.module.scss +4 -4
- package/package.json +4 -4
|
@@ -31,18 +31,18 @@ $button-padding: $bpk-spacing-xs / 2;
|
|
|
31
31
|
padding: 0;
|
|
32
32
|
border: 0;
|
|
33
33
|
background-color: transparent;
|
|
34
|
-
color: $bpk-
|
|
34
|
+
color: $bpk-text-secondary-day;
|
|
35
35
|
cursor: pointer;
|
|
36
36
|
appearance: none;
|
|
37
37
|
|
|
38
38
|
@include bpk-touch-tappable;
|
|
39
39
|
|
|
40
40
|
@include bpk-hover {
|
|
41
|
-
color: $bpk-
|
|
41
|
+
color: $bpk-text-primary-day;
|
|
42
42
|
}
|
|
43
43
|
|
|
44
44
|
&:active {
|
|
45
|
-
color: $bpk-
|
|
45
|
+
color: $bpk-text-primary-day;
|
|
46
46
|
}
|
|
47
47
|
|
|
48
48
|
&__icon {
|
|
@@ -24,7 +24,7 @@ $bpk-border-size-datatable: $bpk-border-size-xl * 2;
|
|
|
24
24
|
@mixin bpk-datatable-border-left() {
|
|
25
25
|
@include _bpk-border-left(
|
|
26
26
|
$bpk-border-size-datatable,
|
|
27
|
-
$bpk-
|
|
27
|
+
$bpk-core-accent-day,
|
|
28
28
|
inset
|
|
29
29
|
);
|
|
30
30
|
}
|
|
@@ -32,7 +32,7 @@ $bpk-border-size-datatable: $bpk-border-size-xl * 2;
|
|
|
32
32
|
@mixin bpk-datatable-border-right() {
|
|
33
33
|
@include _bpk-border-right(
|
|
34
34
|
$bpk-border-size-datatable,
|
|
35
|
-
$bpk-
|
|
35
|
+
$bpk-core-accent-day,
|
|
36
36
|
inset
|
|
37
37
|
);
|
|
38
38
|
}
|
|
@@ -48,19 +48,19 @@ $bpk-border-size-datatable: $bpk-border-size-xl * 2;
|
|
|
48
48
|
display: flex;
|
|
49
49
|
flex-direction: row;
|
|
50
50
|
align-items: center;
|
|
51
|
-
border: $bpk-border-size-sm solid $bpk-
|
|
51
|
+
border: $bpk-border-size-sm solid $bpk-line-day;
|
|
52
52
|
border-bottom: none;
|
|
53
53
|
outline-offset: -(4 * $bpk-one-pixel-rem);
|
|
54
|
-
color: $bpk-
|
|
54
|
+
color: $bpk-text-primary-day;
|
|
55
55
|
|
|
56
56
|
@include bpk-footnote;
|
|
57
57
|
|
|
58
58
|
&:last-child:not(.bpk-data-table__header-row) {
|
|
59
|
-
border-bottom: $bpk-border-size-sm solid $bpk-
|
|
59
|
+
border-bottom: $bpk-border-size-sm solid $bpk-line-day;
|
|
60
60
|
}
|
|
61
61
|
|
|
62
62
|
&--clickable:not(.bpk-data-table__header-row):hover {
|
|
63
|
-
background-color: $bpk-
|
|
63
|
+
background-color: $bpk-canvas-contrast-day;
|
|
64
64
|
cursor: pointer;
|
|
65
65
|
|
|
66
66
|
@include bpk-datatable-border-left;
|
|
@@ -71,7 +71,7 @@ $bpk-border-size-datatable: $bpk-border-size-xl * 2;
|
|
|
71
71
|
}
|
|
72
72
|
|
|
73
73
|
&--selected {
|
|
74
|
-
background-color: $bpk-
|
|
74
|
+
background-color: $bpk-status-warning-fill-day;
|
|
75
75
|
|
|
76
76
|
@include bpk-datatable-border-left;
|
|
77
77
|
|
|
@@ -46,16 +46,16 @@ $bpk-margin-size-sort-icons: bpk-spacing-sm() + bpk-spacing-md();
|
|
|
46
46
|
|
|
47
47
|
.bpk-data-table-column__sort-icon {
|
|
48
48
|
display: block;
|
|
49
|
-
fill: $bpk-
|
|
49
|
+
fill: $bpk-line-day;
|
|
50
50
|
|
|
51
51
|
&:hover {
|
|
52
|
-
fill: $bpk-
|
|
52
|
+
fill: $bpk-line-day;
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
&--selected {
|
|
56
56
|
&,
|
|
57
57
|
&:hover {
|
|
58
|
-
fill: $bpk-
|
|
58
|
+
fill: $bpk-core-accent-day;
|
|
59
59
|
}
|
|
60
60
|
}
|
|
61
61
|
}
|
|
@@ -58,23 +58,23 @@ $bpk-spacing-v2: true;
|
|
|
58
58
|
margin-left: -$size / 2;
|
|
59
59
|
justify-content: center;
|
|
60
60
|
align-items: center;
|
|
61
|
-
border: $bpk-border-size-lg $bpk-
|
|
61
|
+
border: ($bpk-border-size-lg * 2) $bpk-surface-default-day solid;
|
|
62
62
|
border-radius: 50%;
|
|
63
63
|
|
|
64
64
|
&--primary {
|
|
65
|
-
background-color: $bpk-
|
|
65
|
+
background-color: $bpk-core-accent-day;
|
|
66
66
|
}
|
|
67
67
|
|
|
68
68
|
&--warning {
|
|
69
|
-
background-color: $bpk-
|
|
69
|
+
background-color: $bpk-status-warning-spot-day;
|
|
70
70
|
}
|
|
71
71
|
|
|
72
72
|
&--destructive {
|
|
73
|
-
background-color: $bpk-
|
|
73
|
+
background-color: $bpk-status-danger-spot-day;
|
|
74
74
|
}
|
|
75
75
|
|
|
76
76
|
> svg {
|
|
77
|
-
fill: $bpk-
|
|
77
|
+
fill: $bpk-text-primary-inverse-day;
|
|
78
78
|
}
|
|
79
79
|
}
|
|
80
80
|
}
|
|
@@ -32,7 +32,7 @@ $bpk-spacing-v2: true;
|
|
|
32
32
|
transform: translate(100%);
|
|
33
33
|
transition: transform $bpk-duration-sm ease;
|
|
34
34
|
outline: 0;
|
|
35
|
-
background: $bpk-
|
|
35
|
+
background: $bpk-surface-default-day;
|
|
36
36
|
overflow-y: scroll;
|
|
37
37
|
|
|
38
38
|
@include bpk-box-shadow-xl;
|
|
@@ -78,7 +78,7 @@ $bpk-spacing-v2: true;
|
|
|
78
78
|
align-items: center;
|
|
79
79
|
flex: 0 0;
|
|
80
80
|
|
|
81
|
-
@include bpk-border-bottom-sm($bpk-
|
|
81
|
+
@include bpk-border-bottom-sm($bpk-line-day);
|
|
82
82
|
}
|
|
83
83
|
|
|
84
84
|
&__heading {
|
|
@@ -75,10 +75,10 @@
|
|
|
75
75
|
max-width: 76.5rem;
|
|
76
76
|
margin-right: auto;
|
|
77
77
|
margin-left: auto;
|
|
78
|
-
background-color: $bpk-
|
|
78
|
+
background-color: $bpk-surface-contrast-day;
|
|
79
79
|
background-position: center;
|
|
80
80
|
background-size: cover;
|
|
81
|
-
color: $bpk-
|
|
81
|
+
color: $bpk-text-on-dark-day;
|
|
82
82
|
box-shadow: none;
|
|
83
83
|
|
|
84
84
|
@include bpk-breakpoint-small-tablet {
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
}
|
|
54
54
|
|
|
55
55
|
@mixin bpk-image--no-background {
|
|
56
|
-
background-color:
|
|
56
|
+
background-color: $bpk-surface-contrast-day;
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
@mixin bpk-image {
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
display: block;
|
|
62
62
|
max-width: 100%;
|
|
63
63
|
transition: background-color $bpk-duration-base ease-in-out;
|
|
64
|
-
background-color: $bpk-
|
|
64
|
+
background-color: $bpk-surface-highlight-day;
|
|
65
65
|
overflow: hidden;
|
|
66
66
|
transition-delay: $bpk-duration-base;
|
|
67
67
|
}
|
|
@@ -61,26 +61,26 @@ $arrow-inset-margin: -($bpk-one-pixel-rem * 11);
|
|
|
61
61
|
|
|
62
62
|
.bpk-popover-portal[data-popper-placement='top'] & {
|
|
63
63
|
bottom: $arrow-inset-margin;
|
|
64
|
-
border-right-color: $bpk-
|
|
65
|
-
border-bottom-color: $bpk-
|
|
64
|
+
border-right-color: $bpk-surface-highlight-day;
|
|
65
|
+
border-bottom-color: $bpk-surface-highlight-day;
|
|
66
66
|
}
|
|
67
67
|
|
|
68
68
|
.bpk-popover-portal[data-popper-placement='right'] & {
|
|
69
69
|
left: $arrow-inset-margin;
|
|
70
|
-
border-bottom-color: $bpk-
|
|
71
|
-
border-left-color: $bpk-
|
|
70
|
+
border-bottom-color: $bpk-surface-highlight-day;
|
|
71
|
+
border-left-color: $bpk-surface-highlight-day;
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
.bpk-popover-portal[data-popper-placement='bottom'] & {
|
|
75
75
|
top: $arrow-inset-margin;
|
|
76
|
-
border-top-color: $bpk-
|
|
77
|
-
border-left-color: $bpk-
|
|
76
|
+
border-top-color: $bpk-surface-highlight-day;
|
|
77
|
+
border-left-color: $bpk-surface-highlight-day;
|
|
78
78
|
}
|
|
79
79
|
|
|
80
80
|
.bpk-popover-portal[data-popper-placement='left'] & {
|
|
81
81
|
right: $arrow-inset-margin;
|
|
82
|
-
border-top-color: $bpk-
|
|
83
|
-
border-right-color: $bpk-
|
|
82
|
+
border-top-color: $bpk-surface-highlight-day;
|
|
83
|
+
border-right-color: $bpk-surface-highlight-day;
|
|
84
84
|
}
|
|
85
85
|
|
|
86
86
|
&[data-hide] {
|
|
@@ -99,7 +99,7 @@ $arrow-inset-margin: -($bpk-one-pixel-rem * 11);
|
|
|
99
99
|
padding: bpk-spacing-base();
|
|
100
100
|
justify-content: space-between;
|
|
101
101
|
|
|
102
|
-
@include bpk-border-bottom-sm($bpk-
|
|
102
|
+
@include bpk-border-bottom-sm($bpk-surface-highlight-day);
|
|
103
103
|
}
|
|
104
104
|
|
|
105
105
|
&__label {
|
|
@@ -118,7 +118,7 @@ $arrow-inset-margin: -($bpk-one-pixel-rem * 11);
|
|
|
118
118
|
padding: bpk-spacing-md() bpk-spacing-base();
|
|
119
119
|
text-align: right;
|
|
120
120
|
|
|
121
|
-
@include bpk-border-top-sm($bpk-
|
|
121
|
+
@include bpk-border-top-sm($bpk-surface-highlight-day);
|
|
122
122
|
|
|
123
123
|
@include bpk-rtl {
|
|
124
124
|
text-align: left;
|
|
@@ -20,7 +20,6 @@
|
|
|
20
20
|
|
|
21
21
|
import PropTypes from 'prop-types';
|
|
22
22
|
import React, { Component } from 'react';
|
|
23
|
-
import { colorWhite } from '@skyscanner/bpk-foundations-web/tokens/base.es6';
|
|
24
23
|
import clamp from 'lodash.clamp';
|
|
25
24
|
|
|
26
25
|
import { cssModules } from '../../bpk-react-utils';
|
|
@@ -32,16 +31,15 @@ const getClassName = cssModules(STYLES);
|
|
|
32
31
|
const isTransitionEndSupported = () =>
|
|
33
32
|
!!(typeof window !== 'undefined' && 'TransitionEvent' in window);
|
|
34
33
|
|
|
35
|
-
const renderSteps = (numberOfSteps
|
|
34
|
+
const renderSteps = (numberOfSteps) => {
|
|
36
35
|
const steps = [];
|
|
37
36
|
for (let i = 1; i <= numberOfSteps; i += 1) {
|
|
38
37
|
const left = `${100 * (i / (numberOfSteps + 1))}%`;
|
|
39
|
-
const backgroundColor = stepColor;
|
|
40
38
|
steps.push(
|
|
41
39
|
<div
|
|
42
40
|
key={`bpk-progress__step-${i}`}
|
|
43
41
|
className={getClassName('bpk-progress__step')}
|
|
44
|
-
style={{ left
|
|
42
|
+
style={{ left }}
|
|
45
43
|
/>,
|
|
46
44
|
);
|
|
47
45
|
}
|
|
@@ -53,7 +51,6 @@ type Props = {
|
|
|
53
51
|
min: number,
|
|
54
52
|
value: number,
|
|
55
53
|
stepped: boolean,
|
|
56
|
-
stepColor: string,
|
|
57
54
|
small: boolean,
|
|
58
55
|
className: ?string,
|
|
59
56
|
onComplete: ?() => mixed,
|
|
@@ -67,7 +64,6 @@ class BpkProgress extends Component<Props> {
|
|
|
67
64
|
min: PropTypes.number.isRequired,
|
|
68
65
|
value: PropTypes.number.isRequired,
|
|
69
66
|
stepped: PropTypes.bool,
|
|
70
|
-
stepColor: PropTypes.string,
|
|
71
67
|
small: PropTypes.bool,
|
|
72
68
|
className: PropTypes.string,
|
|
73
69
|
onComplete: PropTypes.func,
|
|
@@ -78,7 +74,6 @@ class BpkProgress extends Component<Props> {
|
|
|
78
74
|
static defaultProps = {
|
|
79
75
|
className: null,
|
|
80
76
|
stepped: false,
|
|
81
|
-
stepColor: colorWhite,
|
|
82
77
|
small: false,
|
|
83
78
|
onComplete: () => null,
|
|
84
79
|
onCompleteTransitionEnd: () => null,
|
|
@@ -114,23 +109,21 @@ class BpkProgress extends Component<Props> {
|
|
|
114
109
|
max,
|
|
115
110
|
min,
|
|
116
111
|
small,
|
|
117
|
-
stepColor,
|
|
118
112
|
stepped,
|
|
119
113
|
value,
|
|
120
114
|
...rest
|
|
121
115
|
} = this.props;
|
|
122
|
-
const classNames = [getClassName('bpk-progress')];
|
|
123
|
-
if (className) {
|
|
124
|
-
classNames.push(className);
|
|
125
|
-
}
|
|
126
|
-
if (small) {
|
|
127
|
-
classNames.push(getClassName('bpk-progress--small'));
|
|
128
|
-
}
|
|
129
116
|
|
|
130
|
-
const
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
117
|
+
const classNames = getClassName(
|
|
118
|
+
'bpk-progress',
|
|
119
|
+
className,
|
|
120
|
+
small && 'bpk-progress--small',
|
|
121
|
+
);
|
|
122
|
+
|
|
123
|
+
const valueClassName = getClassName(
|
|
124
|
+
'bpk-progress__value',
|
|
125
|
+
stepped && 'bpk-progress__value--stepped',
|
|
126
|
+
);
|
|
134
127
|
|
|
135
128
|
const adjustedValue = clamp(value, min, max);
|
|
136
129
|
const percentage = 100 * (adjustedValue / (max - min));
|
|
@@ -142,7 +135,7 @@ class BpkProgress extends Component<Props> {
|
|
|
142
135
|
return (
|
|
143
136
|
// $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
|
|
144
137
|
<div
|
|
145
|
-
className={classNames
|
|
138
|
+
className={classNames}
|
|
146
139
|
role="progressbar"
|
|
147
140
|
aria-valuetext={getValueText ? getValueText(value, min, max) : null}
|
|
148
141
|
aria-valuenow={value}
|
|
@@ -152,11 +145,11 @@ class BpkProgress extends Component<Props> {
|
|
|
152
145
|
{...rest}
|
|
153
146
|
>
|
|
154
147
|
<div
|
|
155
|
-
className={valueClassName
|
|
148
|
+
className={valueClassName}
|
|
156
149
|
style={{ width: `${percentage}%` }}
|
|
157
150
|
onTransitionEnd={this.handleCompleteTransitionEnd}
|
|
158
151
|
/>
|
|
159
|
-
{renderSteps(numberOfSteps
|
|
152
|
+
{renderSteps(numberOfSteps)}
|
|
160
153
|
</div>
|
|
161
154
|
);
|
|
162
155
|
}
|
|
@@ -24,7 +24,7 @@ $bpk-spacing-v2: true;
|
|
|
24
24
|
position: relative;
|
|
25
25
|
height: bpk-spacing-base();
|
|
26
26
|
border-radius: $bpk-border-radius-pill;
|
|
27
|
-
background-color: $bpk-
|
|
27
|
+
background-color: $bpk-surface-highlight-day;
|
|
28
28
|
overflow: hidden;
|
|
29
29
|
|
|
30
30
|
&--small {
|
|
@@ -46,7 +46,7 @@ $bpk-spacing-v2: true;
|
|
|
46
46
|
@include bpk-themeable-property(
|
|
47
47
|
background-color,
|
|
48
48
|
--bpk-progress-bar-fill-color,
|
|
49
|
-
$bpk-
|
|
49
|
+
$bpk-core-accent-day
|
|
50
50
|
);
|
|
51
51
|
|
|
52
52
|
&--stepped {
|
|
@@ -59,6 +59,6 @@ $bpk-spacing-v2: true;
|
|
|
59
59
|
top: 0;
|
|
60
60
|
bottom: 0;
|
|
61
61
|
width: 2 * $bpk-one-pixel-rem;
|
|
62
|
-
background: $bpk-
|
|
62
|
+
background: $bpk-canvas-day;
|
|
63
63
|
}
|
|
64
64
|
}
|
|
@@ -34,7 +34,7 @@ $bpk-spacing-v2: true;
|
|
|
34
34
|
padding-right: bpk-spacing-md();
|
|
35
35
|
justify-content: center;
|
|
36
36
|
align-items: baseline;
|
|
37
|
-
color: $bpk-
|
|
37
|
+
color: $bpk-text-primary-day;
|
|
38
38
|
|
|
39
39
|
@include bpk-rtl {
|
|
40
40
|
padding-right: 0;
|
|
@@ -55,7 +55,7 @@ $bpk-spacing-v2: true;
|
|
|
55
55
|
}
|
|
56
56
|
|
|
57
57
|
&__scale {
|
|
58
|
-
color: $bpk-
|
|
58
|
+
color: $bpk-text-secondary-day;
|
|
59
59
|
}
|
|
60
60
|
|
|
61
61
|
&__title {
|
|
@@ -66,7 +66,7 @@ $bpk-spacing-v2: true;
|
|
|
66
66
|
|
|
67
67
|
&__subtitle {
|
|
68
68
|
padding-left: bpk-spacing-md();
|
|
69
|
-
color: $bpk-
|
|
69
|
+
color: $bpk-text-secondary-day;
|
|
70
70
|
|
|
71
71
|
@include bpk-rtl {
|
|
72
72
|
padding-right: bpk-spacing-md();
|
|
@@ -30,25 +30,25 @@ $bpk-spacing-v2: true;
|
|
|
30
30
|
justify-content: space-between;
|
|
31
31
|
align-items: center;
|
|
32
32
|
border: none;
|
|
33
|
-
background-color: $bpk-
|
|
34
|
-
color: $bpk-
|
|
33
|
+
background-color: $bpk-surface-default-day;
|
|
34
|
+
color: $bpk-text-primary-day;
|
|
35
35
|
text-decoration: none;
|
|
36
36
|
|
|
37
|
-
@include bpk-border-bottom-sm($bpk-
|
|
37
|
+
@include bpk-border-bottom-sm($bpk-line-day);
|
|
38
38
|
|
|
39
39
|
&--interactive {
|
|
40
40
|
cursor: pointer;
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
&__chevron {
|
|
44
|
-
fill: $bpk-
|
|
44
|
+
fill: $bpk-text-secondary-day;
|
|
45
45
|
|
|
46
46
|
#{$root}:hover & {
|
|
47
|
-
fill: $bpk-
|
|
47
|
+
fill: $bpk-text-primary-day;
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
#{$root}:active & {
|
|
51
|
-
fill: $bpk-
|
|
51
|
+
fill: $bpk-text-primary-day;
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
54
|
}
|
|
@@ -23,8 +23,7 @@
|
|
|
23
23
|
padding: $bpk-spacing-sm;
|
|
24
24
|
transition: opacity $bpk-duration-sm ease-in-out;
|
|
25
25
|
border-radius: $bpk-border-radius-sm;
|
|
26
|
-
|
|
27
|
-
color: $bpk-color-white;
|
|
26
|
+
color: $bpk-text-on-dark-day;
|
|
28
27
|
font-weight: bold;
|
|
29
28
|
text-decoration: none;
|
|
30
29
|
opacity: 0;
|
|
@@ -38,7 +37,7 @@
|
|
|
38
37
|
@include bpk-themeable-property(
|
|
39
38
|
background-color,
|
|
40
39
|
--bpk-skip-link-background-color,
|
|
41
|
-
$bpk-
|
|
40
|
+
$bpk-status-danger-spot-day
|
|
42
41
|
);
|
|
43
42
|
|
|
44
43
|
&:focus-within,
|
|
@@ -24,19 +24,20 @@ $bpk-spacing-v2: true;
|
|
|
24
24
|
@include bpk-spinner;
|
|
25
25
|
|
|
26
26
|
&--primary {
|
|
27
|
+
// Post colour adoption/rollout we will require to move the 'primary' style to be the same as dark and make dark (moving to primary/defautl) and light the only options
|
|
27
28
|
@include bpk-themeable-property(
|
|
28
29
|
fill,
|
|
29
30
|
--bpk-spinner-primary-color,
|
|
30
|
-
$bpk-
|
|
31
|
+
$bpk-core-accent-day
|
|
31
32
|
);
|
|
32
33
|
}
|
|
33
34
|
|
|
34
35
|
&--light {
|
|
35
|
-
fill: $bpk-
|
|
36
|
+
fill: $bpk-text-on-dark-day;
|
|
36
37
|
}
|
|
37
38
|
|
|
38
39
|
&--dark {
|
|
39
|
-
fill: $bpk-
|
|
40
|
+
fill: $bpk-text-primary-day;
|
|
40
41
|
}
|
|
41
42
|
|
|
42
43
|
&--large {
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
.bpk-star {
|
|
28
28
|
display: inline-block;
|
|
29
29
|
vertical-align: text-bottom;
|
|
30
|
-
fill: $bpk-
|
|
30
|
+
fill: $bpk-text-disabled-day;
|
|
31
31
|
|
|
32
32
|
&--large {
|
|
33
33
|
@include large-star;
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
@include bpk-themeable-property(
|
|
43
43
|
fill,
|
|
44
44
|
--bpk-star-rating-filled-color,
|
|
45
|
-
$bpk-
|
|
45
|
+
$bpk-status-warning-spot-day
|
|
46
46
|
);
|
|
47
47
|
}
|
|
48
48
|
|
|
@@ -59,8 +59,8 @@ export default () => (
|
|
|
59
59
|
|
|
60
60
|
> For `BpkTable` & `BpkTableHeadCell`.
|
|
61
61
|
|
|
62
|
-
| Property
|
|
63
|
-
|
|
|
64
|
-
| children
|
|
65
|
-
| alternate | bool | false | false |
|
|
62
|
+
| Property | PropType | Required | Default Value |
|
|
63
|
+
| ---------------------- | -------- | -------- | ------------- |
|
|
64
|
+
| children | node | true | - |
|
|
65
|
+
| alternate (deprecated) | bool | false | false |
|
|
66
66
|
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
import PropTypes from 'prop-types';
|
|
22
22
|
import React, { type Node } from 'react';
|
|
23
23
|
|
|
24
|
-
import { cssModules } from '../../bpk-react-utils';
|
|
24
|
+
import { cssModules, deprecated } from '../../bpk-react-utils';
|
|
25
25
|
|
|
26
26
|
import STYLES from './BpkTable.module.scss';
|
|
27
27
|
|
|
@@ -30,7 +30,7 @@ const getClassName = cssModules(STYLES);
|
|
|
30
30
|
type Props = {
|
|
31
31
|
children: Node,
|
|
32
32
|
className: ?string,
|
|
33
|
-
alternate: boolean,
|
|
33
|
+
alternate: ?boolean,
|
|
34
34
|
};
|
|
35
35
|
|
|
36
36
|
const BpkTable = (props: Props) => {
|
|
@@ -53,12 +53,15 @@ const BpkTable = (props: Props) => {
|
|
|
53
53
|
BpkTable.propTypes = {
|
|
54
54
|
children: PropTypes.node.isRequired,
|
|
55
55
|
className: PropTypes.string,
|
|
56
|
-
alternate:
|
|
56
|
+
alternate: deprecated(
|
|
57
|
+
PropTypes.bool,
|
|
58
|
+
'Alternate prop is deprecated, please remove your usage of this property.',
|
|
59
|
+
),
|
|
57
60
|
};
|
|
58
61
|
|
|
59
62
|
BpkTable.defaultProps = {
|
|
60
63
|
className: null,
|
|
61
|
-
alternate:
|
|
64
|
+
alternate: null,
|
|
62
65
|
};
|
|
63
66
|
|
|
64
67
|
export default BpkTable;
|
|
@@ -21,13 +21,13 @@
|
|
|
21
21
|
import PropTypes from 'prop-types';
|
|
22
22
|
import React, { type Node } from 'react';
|
|
23
23
|
|
|
24
|
-
import { cssModules } from '../../bpk-react-utils';
|
|
24
|
+
import { cssModules, deprecated } from '../../bpk-react-utils';
|
|
25
25
|
|
|
26
26
|
import STYLES from './BpkTable.module.scss';
|
|
27
27
|
|
|
28
28
|
const getClassName = cssModules(STYLES);
|
|
29
29
|
|
|
30
|
-
type Props = { children: Node, alternate: boolean, className: ?string };
|
|
30
|
+
type Props = { children: Node, alternate: ?boolean, className: ?string };
|
|
31
31
|
|
|
32
32
|
const BpkTableHeadCell = (props: Props) => {
|
|
33
33
|
const { alternate, className, ...rest } = props;
|
|
@@ -43,12 +43,15 @@ const BpkTableHeadCell = (props: Props) => {
|
|
|
43
43
|
|
|
44
44
|
BpkTableHeadCell.propTypes = {
|
|
45
45
|
children: PropTypes.node.isRequired,
|
|
46
|
-
alternate:
|
|
46
|
+
alternate: deprecated(
|
|
47
|
+
PropTypes.bool,
|
|
48
|
+
'Alternate prop is deprecated, please remove your usage of this property.',
|
|
49
|
+
),
|
|
47
50
|
className: PropTypes.string,
|
|
48
51
|
};
|
|
49
52
|
|
|
50
53
|
BpkTableHeadCell.defaultProps = {
|
|
51
|
-
alternate:
|
|
54
|
+
alternate: null,
|
|
52
55
|
className: null,
|
|
53
56
|
};
|
|
54
57
|
|
|
@@ -34,7 +34,7 @@ $bpk-spacing-v2: true;
|
|
|
34
34
|
z-index: -1;
|
|
35
35
|
transition: opacity 200ms ease-in-out;
|
|
36
36
|
border-radius: inherit;
|
|
37
|
-
box-shadow: $bpk-box-shadow-
|
|
37
|
+
box-shadow: $bpk-box-shadow-sm;
|
|
38
38
|
opacity: 0;
|
|
39
39
|
pointer-events: none; // To prevent the pseudo element absorbing click events
|
|
40
40
|
}
|
|
@@ -51,8 +51,7 @@ $bpk-spacing-v2: true;
|
|
|
51
51
|
flex: none;
|
|
52
52
|
color: $bpk-card-color;
|
|
53
53
|
text-decoration: none;
|
|
54
|
-
box-shadow:
|
|
55
|
-
0 3px 12px rgba($bpk-button-outline-background-color, 0.08);
|
|
54
|
+
box-shadow: $bpk-box-shadow-sm;
|
|
56
55
|
cursor: pointer;
|
|
57
56
|
|
|
58
57
|
@include bpk-border-radius-md;
|
|
@@ -112,17 +111,17 @@ $bpk-spacing-v2: true;
|
|
|
112
111
|
&--horizontal {
|
|
113
112
|
min-width: 30%;
|
|
114
113
|
border-radius: 0 $bpk-border-radius-md $bpk-border-radius-md 0;
|
|
115
|
-
box-shadow: inset $bpk-one-pixel-rem 0 0 $bpk-
|
|
114
|
+
box-shadow: inset $bpk-one-pixel-rem 0 0 $bpk-line-day;
|
|
116
115
|
|
|
117
116
|
@include bpk-rtl {
|
|
118
117
|
border-radius: $bpk-border-radius-md 0 0 $bpk-border-radius-md;
|
|
119
|
-
box-shadow: inset (-$bpk-one-pixel-rem) 0 0 $bpk-
|
|
118
|
+
box-shadow: inset (-$bpk-one-pixel-rem) 0 0 $bpk-line-day;
|
|
120
119
|
}
|
|
121
120
|
}
|
|
122
121
|
|
|
123
122
|
&--vertical {
|
|
124
123
|
border-radius: 0 0 $bpk-border-radius-md $bpk-border-radius-md;
|
|
125
|
-
box-shadow: inset 0 $bpk-one-pixel-rem 0 $bpk-
|
|
124
|
+
box-shadow: inset 0 $bpk-one-pixel-rem 0 $bpk-line-day;
|
|
126
125
|
}
|
|
127
126
|
}
|
|
128
127
|
|
|
@@ -21,8 +21,8 @@
|
|
|
21
21
|
$bpk-spacing-v2: true;
|
|
22
22
|
$arrow-size: bpk-spacing-md();
|
|
23
23
|
$arrow-inset-margin: -($bpk-one-pixel-rem * 3);
|
|
24
|
-
$light-arrow-border-color: $bpk-
|
|
25
|
-
$dark-background-color: $bpk-
|
|
24
|
+
$light-arrow-border-color: $bpk-line-day;
|
|
25
|
+
$dark-background-color: $bpk-surface-contrast-day;
|
|
26
26
|
|
|
27
27
|
.bpk-tooltip-portal {
|
|
28
28
|
z-index: $bpk-zindex-tooltip;
|
|
@@ -80,7 +80,7 @@ $dark-background-color: $bpk-color-sky-gray;
|
|
|
80
80
|
transform: rotate(45deg);
|
|
81
81
|
border: $bpk-one-pixel-rem solid transparent;
|
|
82
82
|
background: inherit;
|
|
83
|
-
background-color: $bpk-
|
|
83
|
+
background-color: $bpk-surface-default-day;
|
|
84
84
|
|
|
85
85
|
.bpk-tooltip-portal[data-popper-placement='top'] & {
|
|
86
86
|
bottom: $arrow-inset-margin;
|
|
@@ -141,7 +141,7 @@ $dark-background-color: $bpk-color-sky-gray;
|
|
|
141
141
|
}
|
|
142
142
|
|
|
143
143
|
&--dark {
|
|
144
|
-
color: $bpk-
|
|
144
|
+
color: $bpk-text-primary-inverse-day;
|
|
145
145
|
|
|
146
146
|
@include bpk-layer($dark-background-color, $dark-background-color);
|
|
147
147
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyscanner/backpack-web",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "13.0.0",
|
|
4
4
|
"description": "Backpack Design System web library",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -24,11 +24,11 @@
|
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"@popperjs/core": "^2.11.5",
|
|
26
26
|
"@react-google-maps/api": "^2.12.0",
|
|
27
|
-
"@skyscanner/bpk-foundations-web": "^
|
|
28
|
-
"@skyscanner/bpk-svgs": "^14.5.
|
|
27
|
+
"@skyscanner/bpk-foundations-web": "^10.4.0",
|
|
28
|
+
"@skyscanner/bpk-svgs": "^14.5.9",
|
|
29
29
|
"a11y-focus-scope": "^1.1.3",
|
|
30
30
|
"a11y-focus-store": "^1.0.0",
|
|
31
|
-
"bpk-mixins": "^
|
|
31
|
+
"bpk-mixins": "^32.2.0",
|
|
32
32
|
"d3-path": "^2.0.0",
|
|
33
33
|
"d3-scale": "^4.0.2",
|
|
34
34
|
"date-fns": "^2.21.1",
|