@skyscanner/backpack-web 12.0.0 → 14.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-accordion/src/BpkAccordionItem.js +1 -2
- package/bpk-component-barchart/src/BpkBarchartBar.module.scss +4 -4
- package/bpk-component-barchart/src/BpkChartAxis.module.scss +2 -2
- package/bpk-component-barchart/src/BpkChartGridLines.module.scss +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/bpk-scrim-utils/README.md +0 -1
- package/bpk-scrim-utils/src/BpkScrim.js +1 -3
- package/bpk-scrim-utils/src/bpk-scrim.module.scss +3 -6
- package/bpk-scrim-utils/src/withScrim.js +1 -4
- package/package.json +4 -4
|
@@ -80,7 +80,7 @@ const BpkAccordionItem = (props: Props) => {
|
|
|
80
80
|
return (
|
|
81
81
|
// $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
|
|
82
82
|
<div id={id} {...rest}>
|
|
83
|
-
<dt
|
|
83
|
+
<dt className={getClassName('bpk-accordion__title')}>
|
|
84
84
|
<button
|
|
85
85
|
type="button"
|
|
86
86
|
aria-expanded={expanded}
|
|
@@ -105,7 +105,6 @@ const BpkAccordionItem = (props: Props) => {
|
|
|
105
105
|
</dt>
|
|
106
106
|
<dd
|
|
107
107
|
id={contentId}
|
|
108
|
-
aria-labelledby={contentId}
|
|
109
108
|
className={getClassName('bpk-accordion__content-container')}
|
|
110
109
|
>
|
|
111
110
|
<AnimateHeight duration={200} height={expanded ? 'auto' : 0}>
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
@include bpk-themeable-property(
|
|
23
23
|
fill,
|
|
24
24
|
--bpk-barchart-bar-background-color,
|
|
25
|
-
$bpk-
|
|
25
|
+
$bpk-line-day
|
|
26
26
|
);
|
|
27
27
|
|
|
28
28
|
&--interactive:not(.bpk-barchart-bar--selected) {
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
@include bpk-themeable-property(
|
|
33
33
|
fill,
|
|
34
34
|
--bpk-barchart-bar-hover-background-color,
|
|
35
|
-
$bpk-
|
|
35
|
+
$bpk-core-primary-day
|
|
36
36
|
);
|
|
37
37
|
}
|
|
38
38
|
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
@include bpk-themeable-property(
|
|
41
41
|
fill,
|
|
42
42
|
--bpk-barchart-bar-active-background-color,
|
|
43
|
-
$bpk-
|
|
43
|
+
$bpk-core-accent-day
|
|
44
44
|
);
|
|
45
45
|
}
|
|
46
46
|
}
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
@include bpk-themeable-property(
|
|
50
50
|
fill,
|
|
51
51
|
--bpk-barchart-bar-selected-background-color,
|
|
52
|
-
$bpk-
|
|
52
|
+
$bpk-core-accent-day
|
|
53
53
|
);
|
|
54
54
|
}
|
|
55
55
|
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
.bpk-chart {
|
|
22
22
|
&__axis-tick {
|
|
23
23
|
&-text {
|
|
24
|
-
fill: $bpk-
|
|
24
|
+
fill: $bpk-text-secondary-day;
|
|
25
25
|
|
|
26
26
|
@include bpk-text;
|
|
27
27
|
@include bpk-caption;
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
&__axis-label {
|
|
32
|
-
fill: $bpk-
|
|
32
|
+
fill: $bpk-text-secondary-day;
|
|
33
33
|
|
|
34
34
|
@include bpk-text;
|
|
35
35
|
@include bpk-caption;
|
|
@@ -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
|
}
|
|
@@ -41,7 +41,6 @@ const BoxWithScrim = withScrim(Box);
|
|
|
41
41
|
| isIphone | bool | false | `/iPhone/i.test(typeof window !== 'undefined' ? window.navigator.platform : '')` |
|
|
42
42
|
| containerClassName | string | false | '' |
|
|
43
43
|
| closeOnScrimClick | bool | false | true |
|
|
44
|
-
| dark | bool | false | false |
|
|
45
44
|
|
|
46
45
|
### Prop Details
|
|
47
46
|
|
|
@@ -33,7 +33,7 @@ const BpkScrim = (props) => (
|
|
|
33
33
|
>
|
|
34
34
|
<div
|
|
35
35
|
role="presentation"
|
|
36
|
-
className={getClassName('bpk-scrim'
|
|
36
|
+
className={getClassName('bpk-scrim')}
|
|
37
37
|
onMouseDown={props.onClose}
|
|
38
38
|
onTouchStart={props.onClose}
|
|
39
39
|
/>
|
|
@@ -41,12 +41,10 @@ const BpkScrim = (props) => (
|
|
|
41
41
|
);
|
|
42
42
|
|
|
43
43
|
BpkScrim.propTypes = {
|
|
44
|
-
dark: PropTypes.bool,
|
|
45
44
|
onClose: PropTypes.func,
|
|
46
45
|
};
|
|
47
46
|
|
|
48
47
|
BpkScrim.defaultProps = {
|
|
49
|
-
dark: false,
|
|
50
48
|
onClose: null,
|
|
51
49
|
};
|
|
52
50
|
|
|
@@ -26,15 +26,12 @@
|
|
|
26
26
|
left: 0;
|
|
27
27
|
z-index: $bpk-zindex-scrim;
|
|
28
28
|
transition: opacity $bpk-duration-sm ease-in-out;
|
|
29
|
-
background-color: $bpk-scrim-
|
|
29
|
+
background-color: $bpk-scrim-day;
|
|
30
|
+
|
|
31
|
+
// We will need to remove this on hex launch as opacity will be built into the above colour.
|
|
30
32
|
opacity: $bpk-scrim-opacity;
|
|
31
33
|
overflow: hidden;
|
|
32
34
|
|
|
33
|
-
&--dark {
|
|
34
|
-
background-color: $bpk-scrim-dark-background-color;
|
|
35
|
-
opacity: $bpk-scrim-dark-opacity;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
35
|
&--full-screen {
|
|
39
36
|
@include bpk-breakpoint-mobile {
|
|
40
37
|
opacity: $bpk-scrim-mobile-opacity;
|
|
@@ -47,7 +47,6 @@ const withScrim = (WrappedComponent) => {
|
|
|
47
47
|
static propTypes = {
|
|
48
48
|
getApplicationElement: PropTypes.func.isRequired,
|
|
49
49
|
onClose: onClosePropType,
|
|
50
|
-
dark: PropTypes.bool,
|
|
51
50
|
isIphone: PropTypes.bool,
|
|
52
51
|
isIpad: PropTypes.bool,
|
|
53
52
|
containerClassName: PropTypes.string,
|
|
@@ -55,7 +54,6 @@ const withScrim = (WrappedComponent) => {
|
|
|
55
54
|
};
|
|
56
55
|
|
|
57
56
|
static defaultProps = {
|
|
58
|
-
dark: false,
|
|
59
57
|
onClose: null,
|
|
60
58
|
isIphone: isDeviceIphone(),
|
|
61
59
|
isIpad: isDeviceIpad(),
|
|
@@ -125,7 +123,6 @@ const withScrim = (WrappedComponent) => {
|
|
|
125
123
|
const {
|
|
126
124
|
closeOnScrimClick,
|
|
127
125
|
containerClassName,
|
|
128
|
-
dark,
|
|
129
126
|
getApplicationElement,
|
|
130
127
|
isIpad,
|
|
131
128
|
isIphone,
|
|
@@ -141,7 +138,7 @@ const withScrim = (WrappedComponent) => {
|
|
|
141
138
|
|
|
142
139
|
return (
|
|
143
140
|
<div className={classNames.join(' ')}>
|
|
144
|
-
<BpkScrim onClose={closeOnScrimClick ? onClose : null}
|
|
141
|
+
<BpkScrim onClose={closeOnScrimClick ? onClose : null} />
|
|
145
142
|
<WrappedComponent
|
|
146
143
|
{...rest}
|
|
147
144
|
isIphone={isIphone}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyscanner/backpack-web",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "14.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": "^
|
|
27
|
+
"@skyscanner/bpk-foundations-web": "^12.0.0",
|
|
28
|
+
"@skyscanner/bpk-svgs": "^15.0.2",
|
|
29
29
|
"a11y-focus-scope": "^1.1.3",
|
|
30
30
|
"a11y-focus-store": "^1.0.0",
|
|
31
|
-
"bpk-mixins": "^
|
|
31
|
+
"bpk-mixins": "^34.0.1",
|
|
32
32
|
"d3-path": "^2.0.0",
|
|
33
33
|
"d3-scale": "^4.0.2",
|
|
34
34
|
"date-fns": "^2.21.1",
|