@skyscanner/backpack-web 20.1.0 → 21.0.1
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/README.md +3 -2
- package/bpk-component-breakpoint/src/BpkBreakpoint.js +1 -1
- package/bpk-component-button/src/BpkButtonBase.js +1 -11
- package/bpk-component-calendar/README.md +119 -131
- package/bpk-component-calendar/src/BpkCalendarGrid.js +1 -20
- package/bpk-component-calendar/src/BpkCalendarGridHeader.js +6 -15
- package/bpk-component-calendar/src/BpkCalendarNav.module.scss +2 -2
- package/bpk-component-checkbox/src/BpkCheckbox.module.scss +1 -1
- package/bpk-component-form-validation/src/BpkFormValidation.module.scss +1 -1
- package/bpk-component-icon/index.js +8 -4
- package/bpk-component-pagination/src/BpkPaginationPage.module.scss +1 -1
- package/bpk-component-radio/src/BpkRadio.module.scss +1 -1
- package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.js +4 -2
- package/bpk-component-select/src/BpkSelect.module.scss +6 -1
- package/bpk-component-theme-toggle/src/theming.js +3 -6
- package/bpk-component-ticket/src/BpkTicket.module.scss +1 -1
- package/bpk-react-utils/src/deviceDetection.js +2 -2
- package/package.json +4 -4
|
@@ -77,6 +77,7 @@ const BannerAlertExpandableState = withBannerAlertState(BpkBannerAlertExpandable
|
|
|
77
77
|
/>
|
|
78
78
|
|
|
79
79
|
<BannerAlertDismissableState
|
|
80
|
+
dismissButtonLabel="Dismiss"
|
|
80
81
|
message="Successful alert that will disappear after 5 seconds."
|
|
81
82
|
hideAfter={5}
|
|
82
83
|
type={ALERT_TYPES.SUCCESS}
|
|
@@ -112,10 +113,10 @@ const BannerAlertExpandableState = withBannerAlertState(BpkBannerAlertExpandable
|
|
|
112
113
|
| ------------------ | ---------------------- | -------- | ------------- |
|
|
113
114
|
| type | ALERT_TYPES (one of) | true | - |
|
|
114
115
|
| message | node | true | - |
|
|
116
|
+
| dismissButtonLabel | string | true | - |
|
|
115
117
|
| animateOnEnter | bool | false | false |
|
|
116
118
|
| animateOnLeave | bool | false | false |
|
|
117
119
|
| bannerClassName | string | false | null |
|
|
118
|
-
| dismissButtonLabel | string | false | null |
|
|
119
120
|
| icon | BpkIcon | false | null |
|
|
120
121
|
| onDismiss | func | false | null |
|
|
121
122
|
| show | bool | false | true |
|
|
@@ -126,6 +127,7 @@ const BannerAlertExpandableState = withBannerAlertState(BpkBannerAlertExpandable
|
|
|
126
127
|
| ------------------ | ---------------------- | -------- | ------------- |
|
|
127
128
|
| type | ALERT_TYPES (one of) | true | - |
|
|
128
129
|
| message | node | true | - |
|
|
130
|
+
| toggleButtonLabel | string | true | - |
|
|
129
131
|
| animateOnEnter | bool | false | false |
|
|
130
132
|
| animateOnLeave | bool | false | false |
|
|
131
133
|
| bannerClassName | string | false | null |
|
|
@@ -133,7 +135,6 @@ const BannerAlertExpandableState = withBannerAlertState(BpkBannerAlertExpandable
|
|
|
133
135
|
| icon | BpkIcon | false | null |
|
|
134
136
|
| onExpandToggle | func | false | null |
|
|
135
137
|
| show | bool | false | true |
|
|
136
|
-
| toggleButtonLabel | string | false | null |
|
|
137
138
|
|
|
138
139
|
### withBannerAlertState(BpkBannerAlert)
|
|
139
140
|
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
import PropTypes from 'prop-types';
|
|
22
22
|
import type { Node } from 'react';
|
|
23
23
|
import MediaQuery from 'react-responsive';
|
|
24
|
-
import TOKENS from '@skyscanner/bpk-foundations-web/tokens/
|
|
24
|
+
import TOKENS from '@skyscanner/bpk-foundations-web/tokens/base.common';
|
|
25
25
|
|
|
26
26
|
const BREAKPOINTS = {
|
|
27
27
|
SMALL_MOBILE: TOKENS.breakpointQuerySmallMobile,
|
|
@@ -85,16 +85,6 @@ const BpkButton = (props: Props) => {
|
|
|
85
85
|
);
|
|
86
86
|
}
|
|
87
87
|
|
|
88
|
-
// Due to React bug in Chrome, the onClick event fires even if the button is disabled.
|
|
89
|
-
// Pull request is being worked on (as of 2016-12-22): https://github.com/facebook/react/pull/8329
|
|
90
|
-
const onClickWrapper = onClick
|
|
91
|
-
? (...args) => {
|
|
92
|
-
if (!disabled) {
|
|
93
|
-
onClick(...args);
|
|
94
|
-
}
|
|
95
|
-
}
|
|
96
|
-
: null;
|
|
97
|
-
|
|
98
88
|
const buttonType = submit ? 'submit' : 'button';
|
|
99
89
|
|
|
100
90
|
/* eslint-disable react/button-has-type */
|
|
@@ -104,7 +94,7 @@ const BpkButton = (props: Props) => {
|
|
|
104
94
|
type={buttonType}
|
|
105
95
|
disabled={disabled}
|
|
106
96
|
className={classNameFinal}
|
|
107
|
-
onClick={
|
|
97
|
+
onClick={onClick}
|
|
108
98
|
{...rest}
|
|
109
99
|
>
|
|
110
100
|
{children}
|
|
@@ -11,11 +11,13 @@ Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a comp
|
|
|
11
11
|
```js
|
|
12
12
|
import { Component } from 'react';
|
|
13
13
|
import BpkCalendar from '@skyscanner/backpack-web/bpk-component-calendar';
|
|
14
|
-
import BpkInput, {
|
|
14
|
+
import BpkInput, {
|
|
15
|
+
INPUT_TYPES,
|
|
16
|
+
} from '@skyscanner/backpack-web/bpk-component-input';
|
|
15
17
|
import format from 'date-fns/format';
|
|
16
18
|
|
|
17
|
-
const formatDateFull = date => format(date, 'EEEE, do MMMM yyyy');
|
|
18
|
-
const formatMonth = date => format(date, 'MMMM yyyy');
|
|
19
|
+
const formatDateFull = (date) => format(date, 'EEEE, do MMMM yyyy');
|
|
20
|
+
const formatMonth = (date) => format(date, 'MMMM yyyy');
|
|
19
21
|
const daysOfWeek = [
|
|
20
22
|
{
|
|
21
23
|
name: 'Sunday',
|
|
@@ -27,14 +29,14 @@ const daysOfWeek = [
|
|
|
27
29
|
];
|
|
28
30
|
|
|
29
31
|
export default class App extends Component {
|
|
30
|
-
constructor
|
|
32
|
+
constructor() {
|
|
31
33
|
super();
|
|
32
34
|
|
|
33
35
|
this.state = {
|
|
34
36
|
selectionConfiguration: {
|
|
35
37
|
type: CALENDAR_SELECTION_TYPE.single,
|
|
36
38
|
date: null,
|
|
37
|
-
|
|
39
|
+
},
|
|
38
40
|
};
|
|
39
41
|
}
|
|
40
42
|
|
|
@@ -45,20 +47,20 @@ export default class App extends Component {
|
|
|
45
47
|
date: date,
|
|
46
48
|
},
|
|
47
49
|
});
|
|
48
|
-
}
|
|
50
|
+
};
|
|
49
51
|
|
|
50
|
-
render
|
|
52
|
+
render() {
|
|
51
53
|
return (
|
|
52
54
|
<div>
|
|
53
55
|
<BpkInput
|
|
54
|
-
id=
|
|
56
|
+
id="dateInput"
|
|
55
57
|
type={INPUT_TYPES.text}
|
|
56
|
-
name=
|
|
58
|
+
name="date"
|
|
57
59
|
value={(this.state.selectionConfiguration.date || '').toString()}
|
|
58
|
-
placeholder=
|
|
60
|
+
placeholder="Departure date"
|
|
59
61
|
/>
|
|
60
62
|
<BpkCalendar
|
|
61
|
-
id=
|
|
63
|
+
id="calendar"
|
|
62
64
|
onDateSelect={this.handleDateSelect}
|
|
63
65
|
formatMonth={formatMonth}
|
|
64
66
|
formatDateFull={formatDateFull}
|
|
@@ -70,7 +72,7 @@ export default class App extends Component {
|
|
|
70
72
|
selectionConfiguration={this.state.selectionConfiguration}
|
|
71
73
|
/>
|
|
72
74
|
</div>
|
|
73
|
-
)
|
|
75
|
+
);
|
|
74
76
|
}
|
|
75
77
|
}
|
|
76
78
|
```
|
|
@@ -95,12 +97,14 @@ The default export of this package uses the following set of components:
|
|
|
95
97
|
Composition and state are implemented using the aforementioned higher-order components:
|
|
96
98
|
|
|
97
99
|
```js
|
|
98
|
-
withCalendarState(
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
100
|
+
withCalendarState(
|
|
101
|
+
composeCalendar(
|
|
102
|
+
BpkCalendarNav,
|
|
103
|
+
BpkCalendarGridHeader,
|
|
104
|
+
TransitioningBpkCalendarGrid,
|
|
105
|
+
BpkCalendarDate,
|
|
106
|
+
),
|
|
107
|
+
);
|
|
104
108
|
```
|
|
105
109
|
|
|
106
110
|
### Building a custom calendar
|
|
@@ -108,45 +112,32 @@ withCalendarState(composeCalendar(
|
|
|
108
112
|
A custom calendar can be created by swapping out any default component for an alternative:
|
|
109
113
|
|
|
110
114
|
```js
|
|
111
|
-
composeCalendar(
|
|
112
|
-
MyNavigation,
|
|
113
|
-
MyHeader,
|
|
114
|
-
MyGrid,
|
|
115
|
-
MyDate,
|
|
116
|
-
)
|
|
115
|
+
composeCalendar(MyNavigation, MyHeader, MyGrid, MyDate);
|
|
117
116
|
```
|
|
118
117
|
|
|
119
118
|
The navigation and header components are optional. If they are not needed, the arguments to `composeCalendar` should be set to `null`:
|
|
120
119
|
|
|
121
120
|
```js
|
|
122
|
-
composeCalendar(
|
|
123
|
-
null,
|
|
124
|
-
null,
|
|
125
|
-
MyGrid,
|
|
126
|
-
MyDate,
|
|
127
|
-
)
|
|
121
|
+
composeCalendar(null, null, MyGrid, MyDate);
|
|
128
122
|
```
|
|
129
123
|
|
|
130
124
|
In many cases, you might want to keep most of the components and replace only one or two:
|
|
131
125
|
|
|
132
126
|
```js
|
|
133
|
-
composeCalendar(
|
|
134
|
-
BpkCalendarNav,
|
|
135
|
-
BpkCalendarGridHeader,
|
|
136
|
-
BpkCalendarGrid,
|
|
137
|
-
MyDate,
|
|
138
|
-
)
|
|
127
|
+
composeCalendar(BpkCalendarNav, BpkCalendarGridHeader, BpkCalendarGrid, MyDate);
|
|
139
128
|
```
|
|
140
129
|
|
|
141
130
|
Finally, focus management and support for keyboard input can be added using `withCalendarState`:
|
|
142
131
|
|
|
143
132
|
```js
|
|
144
|
-
withCalendarState(
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
133
|
+
withCalendarState(
|
|
134
|
+
composeCalendar(
|
|
135
|
+
BpkCalendarNav,
|
|
136
|
+
BpkCalendarGridHeader,
|
|
137
|
+
BpkCalendarGrid,
|
|
138
|
+
MyDate,
|
|
139
|
+
),
|
|
140
|
+
);
|
|
150
141
|
```
|
|
151
142
|
|
|
152
143
|
> When implementing a replacement for any of the default calendar components, make sure it
|
|
@@ -155,32 +146,32 @@ withCalendarState(composeCalendar(
|
|
|
155
146
|
|
|
156
147
|
## Props
|
|
157
148
|
|
|
158
|
-
| Property
|
|
159
|
-
|
|
|
160
|
-
| daysOfWeek
|
|
161
|
-
| formatDateFull
|
|
162
|
-
| formatMonth
|
|
163
|
-
| id
|
|
164
|
-
| weekStartsOn
|
|
165
|
-
| changeMonthLabel
|
|
166
|
-
| nextMonthLabel
|
|
167
|
-
| previousMonthLabel
|
|
168
|
-
| className
|
|
169
|
-
| fixedWidth
|
|
170
|
-
| gridClassName
|
|
171
|
-
| initiallyFocusedDate
|
|
172
|
-
| markOutsideDays
|
|
173
|
-
| markToday
|
|
174
|
-
| maxDate
|
|
175
|
-
| minDate
|
|
176
|
-
| onDateSelect
|
|
177
|
-
| onMonthChange
|
|
178
|
-
| selectionConfiguration| object
|
|
179
|
-
| navProps
|
|
180
|
-
| headerProps
|
|
181
|
-
| gridProps
|
|
182
|
-
| dateProps
|
|
183
|
-
| weekDayKey
|
|
149
|
+
| Property | PropType | Required | Default Value |
|
|
150
|
+
| ---------------------- | -------- | --------------- | ---------------------------------------------------- |
|
|
151
|
+
| daysOfWeek | object | true | - |
|
|
152
|
+
| formatDateFull | func | true | - |
|
|
153
|
+
| formatMonth | func | true | - |
|
|
154
|
+
| id | string | true | - |
|
|
155
|
+
| weekStartsOn | number | true | - |
|
|
156
|
+
| changeMonthLabel | string | if Nav !== null | - |
|
|
157
|
+
| nextMonthLabel | string | if Nav !== null | - |
|
|
158
|
+
| previousMonthLabel | string | if Nav !== null | - |
|
|
159
|
+
| className | string | false | null |
|
|
160
|
+
| fixedWidth | bool | false | true |
|
|
161
|
+
| gridClassName | string | false | null |
|
|
162
|
+
| initiallyFocusedDate | Date | false | null |
|
|
163
|
+
| markOutsideDays | bool | false | true |
|
|
164
|
+
| markToday | bool | false | true |
|
|
165
|
+
| maxDate | Date | false | new Date() + 1 year |
|
|
166
|
+
| minDate | Date | false | new Date() |
|
|
167
|
+
| onDateSelect | func | false | null |
|
|
168
|
+
| onMonthChange | func | false | null |
|
|
169
|
+
| selectionConfiguration | object | false | { type: CALENDAR_SELECTION_TYPE.single, date: null } |
|
|
170
|
+
| navProps | object | false | null |
|
|
171
|
+
| headerProps | object | false | null |
|
|
172
|
+
| gridProps | object | false | null |
|
|
173
|
+
| dateProps | object | false | null |
|
|
174
|
+
| weekDayKey | string | false | nameAbbr |
|
|
184
175
|
|
|
185
176
|
Some of the more complex props and props for sub-components are detailed below.
|
|
186
177
|
|
|
@@ -189,18 +180,18 @@ Some of the more complex props and props for sub-components are detailed below.
|
|
|
189
180
|
The BpkCalendarNav component is used to change the month that is being displayed by using
|
|
190
181
|
buttons and a select box.
|
|
191
182
|
|
|
192
|
-
| Property
|
|
193
|
-
|
|
|
194
|
-
| changeMonthLabel
|
|
195
|
-
| nextMonthLabel
|
|
196
|
-
| previousMonthLabel
|
|
197
|
-
| formatMonth
|
|
198
|
-
| id
|
|
199
|
-
| maxDate
|
|
200
|
-
| minDate
|
|
201
|
-
| month
|
|
202
|
-
| onMonthChange
|
|
203
|
-
| disabled
|
|
183
|
+
| Property | PropType | Required | Default Value |
|
|
184
|
+
| ------------------ | -------- | -------- | ------------- |
|
|
185
|
+
| changeMonthLabel | string | true | - |
|
|
186
|
+
| nextMonthLabel | string | true | - |
|
|
187
|
+
| previousMonthLabel | string | true | - |
|
|
188
|
+
| formatMonth | func | true | - |
|
|
189
|
+
| id | string | true | - |
|
|
190
|
+
| maxDate | Date | true | - |
|
|
191
|
+
| minDate | Date | true | - |
|
|
192
|
+
| month | Date | true | - |
|
|
193
|
+
| onMonthChange | func | false | null |
|
|
194
|
+
| disabled | bool | false | false |
|
|
204
195
|
|
|
205
196
|
### BpkCalendarGridHeader
|
|
206
197
|
|
|
@@ -208,55 +199,53 @@ The BpkCalendarGridHeader component displays the header of `BpkCalendarGrid`, li
|
|
|
208
199
|
the days of the week. This is needed as a separate component, as the header should stay
|
|
209
200
|
in place while the rest of the grid transitions when changing months.
|
|
210
201
|
|
|
211
|
-
| Property
|
|
212
|
-
|
|
|
213
|
-
| daysOfWeek
|
|
214
|
-
| weekStartsOn
|
|
215
|
-
| className
|
|
216
|
-
| weekDayKey
|
|
202
|
+
| Property | PropType | Required | Default Value |
|
|
203
|
+
| ------------ | -------- | -------- | ------------- |
|
|
204
|
+
| daysOfWeek | object | true | - |
|
|
205
|
+
| weekStartsOn | number | true | - |
|
|
206
|
+
| className | string | false | null |
|
|
207
|
+
| weekDayKey | string | false | nameAbbr |
|
|
217
208
|
|
|
218
209
|
### BpkCalendarGrid
|
|
219
210
|
|
|
220
211
|
The BpkCalendarGrid component displays a month as a table.
|
|
221
212
|
|
|
222
|
-
| Property
|
|
223
|
-
|
|
|
224
|
-
| DateComponent
|
|
225
|
-
|
|
|
226
|
-
|
|
|
227
|
-
|
|
|
228
|
-
|
|
|
229
|
-
|
|
|
230
|
-
|
|
|
231
|
-
|
|
|
232
|
-
|
|
|
233
|
-
|
|
|
234
|
-
|
|
|
235
|
-
|
|
|
236
|
-
|
|
|
237
|
-
|
|
|
238
|
-
| onDateKeyDown | func | false | null |
|
|
239
|
-
| preventKeyboardFocus | bool | false | false |
|
|
213
|
+
| Property | PropType | Required | Default Value |
|
|
214
|
+
| ---------------------- | ----------- | -------- | ---------------------------------------------------- |
|
|
215
|
+
| DateComponent | elementType | true | - |
|
|
216
|
+
| formatDateFull | func | true | - |
|
|
217
|
+
| month | Date | true | - |
|
|
218
|
+
| weekStartsOn | number | true | - |
|
|
219
|
+
| selectionConfiguration | object | false | { type: CALENDAR_SELECTION_TYPE.single, date: null } |
|
|
220
|
+
| focusedDate | Date | false | null |
|
|
221
|
+
| isKeyboardFocusable | bool | false | true |
|
|
222
|
+
| markOutsideDays | bool | false | true |
|
|
223
|
+
| markToday | bool | false | true |
|
|
224
|
+
| maxDate | Date | false | new Date() + 1 year |
|
|
225
|
+
| minDate | Date | false | new Date() |
|
|
226
|
+
| onDateClick | func | false | null |
|
|
227
|
+
| onDateKeyDown | func | false | null |
|
|
228
|
+
| preventKeyboardFocus | bool | false | false |
|
|
240
229
|
|
|
241
230
|
### BpkCalendarDate
|
|
242
231
|
|
|
243
232
|
The BpkCalendarDate component is used to render the content of a cell
|
|
244
233
|
(a single day) inside the calendar grid.
|
|
245
234
|
|
|
246
|
-
| Property
|
|
247
|
-
|
|
|
248
|
-
| date
|
|
249
|
-
| isBlocked
|
|
250
|
-
| isFocused
|
|
251
|
-
| isKeyboardFocusable
|
|
252
|
-
| isOutside
|
|
253
|
-
| isSelected
|
|
254
|
-
| isToday
|
|
255
|
-
| onClick
|
|
256
|
-
| onDateKeyDown
|
|
257
|
-
| preventKeyboardFocus
|
|
258
|
-
| selectionType
|
|
259
|
-
| style
|
|
235
|
+
| Property | PropType | Required | Default Value |
|
|
236
|
+
| -------------------- | ------------------------------------------------------------------------------------------------- | -------- | ---------------------- |
|
|
237
|
+
| date | Date | true | - |
|
|
238
|
+
| isBlocked | bool | false | false |
|
|
239
|
+
| isFocused | bool | false | false |
|
|
240
|
+
| isKeyboardFocusable | bool | false | true |
|
|
241
|
+
| isOutside | bool | false | false |
|
|
242
|
+
| isSelected | bool | false | false |
|
|
243
|
+
| isToday | bool | false | false |
|
|
244
|
+
| onClick | func | false | null |
|
|
245
|
+
| onDateKeyDown | func | false | null |
|
|
246
|
+
| preventKeyboardFocus | bool | false | true |
|
|
247
|
+
| selectionType | oneOf(SELECTION_TYPES.single, SELECTION_TYPES.start, SELECTION_TYPES.middle, SELECTION_TYPES.end) | false | SELECTION_TYPES.single |
|
|
248
|
+
| style | object | false | null |
|
|
260
249
|
|
|
261
250
|
#### `selectionType` prop
|
|
262
251
|
|
|
@@ -341,7 +330,7 @@ A function to format a full, human-readable date, for example: "Monday, 8th Janu
|
|
|
341
330
|
```js
|
|
342
331
|
import format from 'date-fns/format';
|
|
343
332
|
|
|
344
|
-
const formatDateFull = date => format(date, 'EEEE, do MMMM yyyy');
|
|
333
|
+
const formatDateFull = (date) => format(date, 'EEEE, do MMMM yyyy');
|
|
345
334
|
```
|
|
346
335
|
|
|
347
336
|
#### formatMonth
|
|
@@ -353,7 +342,7 @@ If you just need to quickly prototype, use the following from [`date-fns`](https
|
|
|
353
342
|
```js
|
|
354
343
|
import format from 'date-fns/format';
|
|
355
344
|
|
|
356
|
-
const formatMonth = date => format(date, 'MMMM yyyy');
|
|
345
|
+
const formatMonth = (date) => format(date, 'MMMM yyyy');
|
|
357
346
|
```
|
|
358
347
|
|
|
359
348
|
#### weekStartsOn
|
|
@@ -381,14 +370,13 @@ These are useful if your custom implementation of one of these components requir
|
|
|
381
370
|
|
|
382
371
|
## Theme Props
|
|
383
372
|
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
373
|
+
- `calendarDateTextColor`
|
|
374
|
+
- `calendarDateTextHoverColor`
|
|
375
|
+
- `calendarDateTextActiveColor`
|
|
376
|
+
- `calendarDateTextFocusColor`
|
|
377
|
+
- `calendarDateTextSelectedColor`
|
|
378
|
+
- `calendarDateSelectedBackgroundColor`
|
|
379
|
+
- `calendarDateFocusedBorderColor`
|
|
380
|
+
- `calendarNudgerIconColor`
|
|
381
|
+
- `calendarNudgerIconHoverColor`
|
|
382
|
+
- `calendarNudgerIconActiveColor`
|
|
@@ -21,14 +21,12 @@ import { Component } from 'react';
|
|
|
21
21
|
|
|
22
22
|
import { cssModules, isDeviceIos } from '../../bpk-react-utils';
|
|
23
23
|
|
|
24
|
-
import BpkCalendarGridHeader from './BpkCalendarGridHeader';
|
|
25
24
|
import Week from './Week';
|
|
26
25
|
import {
|
|
27
26
|
addMonths,
|
|
28
27
|
formatIsoDate,
|
|
29
28
|
getCalendarMonthWeeks,
|
|
30
29
|
isSameMonth,
|
|
31
|
-
orderDaysOfWeek,
|
|
32
30
|
} from './date-utils';
|
|
33
31
|
import CustomPropTypes, { CALENDAR_SELECTION_TYPE } from './custom-proptypes';
|
|
34
32
|
import STYLES from './BpkCalendarGrid.module.scss';
|
|
@@ -58,14 +56,12 @@ class BpkCalendarGrid extends Component {
|
|
|
58
56
|
props.month,
|
|
59
57
|
props.weekStartsOn,
|
|
60
58
|
),
|
|
61
|
-
daysOfWeek: orderDaysOfWeek(props.daysOfWeek, props.weekStartsOn),
|
|
62
59
|
};
|
|
63
60
|
}
|
|
64
61
|
|
|
65
62
|
UNSAFE_componentWillReceiveProps(nextProps) {
|
|
66
63
|
// We cache expensive calculations (and identities) in state
|
|
67
64
|
if (
|
|
68
|
-
nextProps.daysOfWeek !== this.props.daysOfWeek ||
|
|
69
65
|
!isSameMonth(nextProps.month, this.props.month) ||
|
|
70
66
|
nextProps.weekStartsOn !== this.props.weekStartsOn
|
|
71
67
|
) {
|
|
@@ -74,10 +70,6 @@ class BpkCalendarGrid extends Component {
|
|
|
74
70
|
nextProps.month,
|
|
75
71
|
nextProps.weekStartsOn,
|
|
76
72
|
),
|
|
77
|
-
daysOfWeek: orderDaysOfWeek(
|
|
78
|
-
nextProps.daysOfWeek,
|
|
79
|
-
nextProps.weekStartsOn,
|
|
80
|
-
),
|
|
81
73
|
});
|
|
82
74
|
}
|
|
83
75
|
}
|
|
@@ -91,7 +83,6 @@ class BpkCalendarGrid extends Component {
|
|
|
91
83
|
dateProps,
|
|
92
84
|
focusedDate,
|
|
93
85
|
formatDateFull,
|
|
94
|
-
formatMonth,
|
|
95
86
|
ignoreOutsideDate,
|
|
96
87
|
isKeyboardFocusable,
|
|
97
88
|
markOutsideDays,
|
|
@@ -106,20 +97,12 @@ class BpkCalendarGrid extends Component {
|
|
|
106
97
|
weekStartsOn,
|
|
107
98
|
} = this.props;
|
|
108
99
|
|
|
109
|
-
const { calendarMonthWeeks
|
|
100
|
+
const { calendarMonthWeeks } = this.state;
|
|
110
101
|
|
|
111
102
|
const classNames = getClassName('bpk-calendar-grid', className);
|
|
112
103
|
|
|
113
104
|
return (
|
|
114
105
|
<div className={classNames} aria-hidden={!isKeyboardFocusable}>
|
|
115
|
-
<caption className={getClassName('bpk-calendar-grid__caption')} hidden>
|
|
116
|
-
{formatMonth(month)}
|
|
117
|
-
</caption>
|
|
118
|
-
<BpkCalendarGridHeader
|
|
119
|
-
isTableHead
|
|
120
|
-
daysOfWeek={daysOfWeek}
|
|
121
|
-
weekStartsOn={weekStartsOn}
|
|
122
|
-
/>
|
|
123
106
|
<div>
|
|
124
107
|
{calendarMonthWeeks.map((dates) => (
|
|
125
108
|
<Week
|
|
@@ -154,9 +137,7 @@ class BpkCalendarGrid extends Component {
|
|
|
154
137
|
export const propTypes = {
|
|
155
138
|
// Required
|
|
156
139
|
DateComponent: PropTypes.elementType.isRequired,
|
|
157
|
-
daysOfWeek: CustomPropTypes.DaysOfWeek.isRequired,
|
|
158
140
|
formatDateFull: PropTypes.func.isRequired,
|
|
159
|
-
formatMonth: PropTypes.func.isRequired,
|
|
160
141
|
month: PropTypes.instanceOf(Date).isRequired,
|
|
161
142
|
weekStartsOn: PropTypes.number.isRequired,
|
|
162
143
|
// Optional
|
|
@@ -55,35 +55,28 @@ WeekDay.defaultProps = {
|
|
|
55
55
|
|
|
56
56
|
class BpkCalendarGridHeader extends PureComponent {
|
|
57
57
|
render() {
|
|
58
|
-
const { className,
|
|
59
|
-
|
|
60
|
-
const Header = isTableHead ? 'thead' : 'header';
|
|
61
|
-
const List = isTableHead ? 'tr' : 'ol';
|
|
62
|
-
const Item = isTableHead ? 'th' : 'li';
|
|
58
|
+
const { className, weekDayKey, weekStartsOn } = this.props;
|
|
63
59
|
|
|
64
60
|
const daysOfWeek = orderDaysOfWeek(this.props.daysOfWeek, weekStartsOn);
|
|
65
61
|
|
|
66
62
|
const classNames = [getClassName('bpk-calendar-header')];
|
|
67
|
-
if (isTableHead) {
|
|
68
|
-
classNames.push(getClassName('bpk-calendar-header--table-head'));
|
|
69
|
-
}
|
|
70
63
|
if (className) {
|
|
71
64
|
classNames.push(className);
|
|
72
65
|
}
|
|
73
66
|
|
|
74
67
|
return (
|
|
75
|
-
<
|
|
76
|
-
<
|
|
68
|
+
<header className={classNames.join(' ')} aria-hidden>
|
|
69
|
+
<ol className={getClassName('bpk-calendar-header__week')}>
|
|
77
70
|
{daysOfWeek.map((weekDay) => (
|
|
78
71
|
<WeekDay
|
|
79
|
-
Element=
|
|
72
|
+
Element="li"
|
|
80
73
|
key={weekDay.index}
|
|
81
74
|
weekDay={weekDay}
|
|
82
75
|
weekDayKey={weekDayKey}
|
|
83
76
|
/>
|
|
84
77
|
))}
|
|
85
|
-
</
|
|
86
|
-
</
|
|
78
|
+
</ol>
|
|
79
|
+
</header>
|
|
87
80
|
);
|
|
88
81
|
}
|
|
89
82
|
}
|
|
@@ -91,13 +84,11 @@ class BpkCalendarGridHeader extends PureComponent {
|
|
|
91
84
|
BpkCalendarGridHeader.propTypes = {
|
|
92
85
|
daysOfWeek: CustomPropTypes.DaysOfWeek.isRequired,
|
|
93
86
|
weekStartsOn: PropTypes.number.isRequired,
|
|
94
|
-
isTableHead: PropTypes.bool,
|
|
95
87
|
className: PropTypes.string,
|
|
96
88
|
weekDayKey: CustomPropTypes.WeekDayKey,
|
|
97
89
|
};
|
|
98
90
|
|
|
99
91
|
BpkCalendarGridHeader.defaultProps = {
|
|
100
|
-
isTableHead: false,
|
|
101
92
|
className: null,
|
|
102
93
|
weekDayKey: 'nameAbbr',
|
|
103
94
|
};
|
|
@@ -37,8 +37,8 @@
|
|
|
37
37
|
|
|
38
38
|
&__button {
|
|
39
39
|
width: 100%;
|
|
40
|
-
height: $bpk-
|
|
41
|
-
padding:
|
|
40
|
+
height: $bpk-input-height;
|
|
41
|
+
padding: bpk-spacing-md() - (2 * $bpk-one-pixel-rem) 0;
|
|
42
42
|
border: none;
|
|
43
43
|
background: none;
|
|
44
44
|
cursor: pointer;
|
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
import {
|
|
20
20
|
iconSizeSm,
|
|
21
21
|
iconSizeLg,
|
|
22
|
-
|
|
23
|
-
|
|
22
|
+
privateButtonLineHeight,
|
|
23
|
+
privateButtonLargeLineHeight,
|
|
24
24
|
} from '@skyscanner/bpk-foundations-web/tokens/base.es6';
|
|
25
25
|
|
|
26
26
|
import withAlignment from './src/withAlignment';
|
|
@@ -29,11 +29,15 @@ import withDescription from './src/withDescription';
|
|
|
29
29
|
|
|
30
30
|
// Wrapper functions to provide backwards compatibility
|
|
31
31
|
function withButtonAlignment(WrappedComponent) {
|
|
32
|
-
return withAlignment(WrappedComponent,
|
|
32
|
+
return withAlignment(WrappedComponent, privateButtonLineHeight, iconSizeSm);
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
function withLargeButtonAlignment(WrappedComponent) {
|
|
36
|
-
return withAlignment(
|
|
36
|
+
return withAlignment(
|
|
37
|
+
WrappedComponent,
|
|
38
|
+
privateButtonLargeLineHeight,
|
|
39
|
+
iconSizeLg,
|
|
40
|
+
);
|
|
37
41
|
}
|
|
38
42
|
|
|
39
43
|
export {
|
|
@@ -99,8 +99,10 @@ class BpkScrollableCalendarGridList extends Component {
|
|
|
99
99
|
setComponentHeight = () => {
|
|
100
100
|
const outerNode = this.outerDiv;
|
|
101
101
|
if (outerNode) {
|
|
102
|
-
|
|
103
|
-
|
|
102
|
+
if (outerNode.clientHeight > 0) {
|
|
103
|
+
const newHeight = outerNode.clientHeight;
|
|
104
|
+
this.setState({ outerHeight: newHeight });
|
|
105
|
+
}
|
|
104
106
|
} else {
|
|
105
107
|
this.setState({ outerHeight: ESTIMATED_MONTH_ITEM_HEIGHT });
|
|
106
108
|
}
|
|
@@ -76,7 +76,7 @@ $bpk-spacing-v2: true;
|
|
|
76
76
|
|
|
77
77
|
@include bpk-rtl {
|
|
78
78
|
padding-right: bpk-spacing-xxl() + bpk-spacing-base();
|
|
79
|
-
padding-left:
|
|
79
|
+
padding-left: bpk-spacing-xxl();
|
|
80
80
|
|
|
81
81
|
@media screen\0 {
|
|
82
82
|
padding-right: bpk-spacing-xxl() + bpk-spacing-sm() !important; /* stylelint-disable-line declaration-no-important */
|
|
@@ -117,6 +117,11 @@ $select-image-large-height: 24 * $bpk-one-pixel-rem;
|
|
|
117
117
|
left: bpk-spacing-base();
|
|
118
118
|
width: $select-image-large-width;
|
|
119
119
|
height: $select-image-large-height;
|
|
120
|
+
|
|
121
|
+
@include bpk-rtl {
|
|
122
|
+
right: bpk-spacing-base();
|
|
123
|
+
left: auto;
|
|
124
|
+
}
|
|
120
125
|
}
|
|
121
126
|
|
|
122
127
|
&--disabled {
|
|
@@ -16,9 +16,6 @@
|
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
18
|
import {
|
|
19
|
-
horizontalNavLinkColor,
|
|
20
|
-
horizontalNavLinkHoverColor,
|
|
21
|
-
horizontalNavLinkActiveColor,
|
|
22
19
|
colorSkyGrayTint02,
|
|
23
20
|
colorSkyGrayTint06,
|
|
24
21
|
colorWhite,
|
|
@@ -136,9 +133,9 @@ const generateTheme = ({
|
|
|
136
133
|
|
|
137
134
|
horizontalNavBarSelectedColor: primaryColor500,
|
|
138
135
|
horizontalNavLinkSelectedColor: primaryColor500,
|
|
139
|
-
horizontalNavLinkColor,
|
|
140
|
-
horizontalNavLinkHoverColor,
|
|
141
|
-
horizontalNavLinkActiveColor,
|
|
136
|
+
horizontalNavLinkColor: primaryColor500,
|
|
137
|
+
horizontalNavLinkHoverColor: primaryColor500,
|
|
138
|
+
horizontalNavLinkActiveColor: primaryColor500,
|
|
142
139
|
|
|
143
140
|
selectInvalidBorderColor: secondaryColor500,
|
|
144
141
|
|
|
@@ -20,11 +20,11 @@
|
|
|
20
20
|
|
|
21
21
|
const isDeviceIphone = () =>
|
|
22
22
|
/iPhone/i.test(
|
|
23
|
-
typeof window !== 'undefined' ? window.navigator.
|
|
23
|
+
typeof window !== 'undefined' ? window.navigator.userAgent : '',
|
|
24
24
|
);
|
|
25
25
|
|
|
26
26
|
const isDeviceIpad = () =>
|
|
27
|
-
/iPad/i.test(typeof window !== 'undefined' ? window.navigator.
|
|
27
|
+
/iPad/i.test(typeof window !== 'undefined' ? window.navigator.userAgent : '');
|
|
28
28
|
|
|
29
29
|
const isDeviceIos = () => isDeviceIphone() || isDeviceIpad();
|
|
30
30
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skyscanner/backpack-web",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "21.0.1",
|
|
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": "^16.2.
|
|
27
|
+
"@skyscanner/bpk-foundations-web": "^15.1.0",
|
|
28
|
+
"@skyscanner/bpk-svgs": "^16.2.3",
|
|
29
29
|
"a11y-focus-scope": "^1.1.3",
|
|
30
30
|
"a11y-focus-store": "^1.0.0",
|
|
31
|
-
"bpk-mixins": "^
|
|
31
|
+
"bpk-mixins": "^40.1.0",
|
|
32
32
|
"d3-path": "^2.0.0",
|
|
33
33
|
"d3-scale": "^4.0.2",
|
|
34
34
|
"date-fns": "^2.21.1",
|