@skyscanner/backpack-web 9.3.0 → 10.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-animate-height/package.json +3 -3
- package/bpk-component-accordion/package.json +7 -7
- package/bpk-component-aria-live/README.md +2 -2
- package/bpk-component-aria-live/{index.js → index.ts} +0 -1
- package/bpk-component-aria-live/package.json +9 -10
- package/bpk-component-aria-live/src/BpkAriaLive-test.tsx +60 -0
- package/bpk-component-aria-live/src/{BpkAriaLive.js → BpkAriaLive.tsx} +20 -26
- package/{bpk-component-content-cards/src/BpkContentCard/index.ts → bpk-component-aria-live/src/accessibility-test.tsx} +13 -1
- package/bpk-component-autosuggest/package.json +4 -4
- package/bpk-component-badge/package.json +5 -5
- package/bpk-component-banner-alert/package.json +9 -9
- package/bpk-component-barchart/package.json +8 -8
- package/bpk-component-blockquote/package.json +2 -2
- package/bpk-component-breadcrumb/package.json +5 -5
- package/bpk-component-breakpoint/package.json +3 -3
- package/bpk-component-button/package.json +3 -3
- package/bpk-component-calendar/DOCS.md +1 -7
- package/bpk-component-calendar/README.md +0 -10
- package/bpk-component-calendar/index.js +0 -2
- package/bpk-component-calendar/package.json +9 -9
- package/bpk-component-calendar/src/BpkCalendarDate.js +0 -15
- package/bpk-component-calendar/src/BpkCalendarDate.module.scss +17 -50
- package/bpk-component-calendar/src/BpkCalendarGrid.module.scss +5 -5
- package/bpk-component-calendar/src/_variables.scss +1 -3
- package/bpk-component-card/package.json +4 -4
- package/bpk-component-checkbox/package.json +5 -5
- package/bpk-component-chip/package.json +5 -5
- package/bpk-component-close-button/package.json +4 -4
- package/bpk-component-code/package.json +2 -2
- package/bpk-component-content-cards/package.json +2 -2
- package/bpk-component-content-cards/src/{BpkContentCard/BpkContentCard-test.tsx → BpkContentCard-test.tsx} +0 -0
- package/bpk-component-content-cards/src/{BpkContentCard/BpkContentCard.module.scss → BpkContentCard.module.scss} +0 -0
- package/bpk-component-content-cards/src/{BpkContentCard/BpkContentCard.tsx → BpkContentCard.tsx} +2 -2
- package/bpk-component-content-container/package.json +2 -2
- package/bpk-component-datatable/README.md +78 -21
- package/bpk-component-datatable/package.json +5 -6
- package/bpk-component-datatable/src/BpkDataTable.js +176 -143
- package/bpk-component-datatable/src/BpkDataTable.module.scss +10 -14
- package/bpk-component-datatable/src/BpkDataTableColumn.js +37 -40
- package/bpk-component-datatable/src/BpkDataTableHeader.js +143 -0
- package/bpk-component-datatable/src/{BpkDataTableColumn.module.scss → BpkDataTableHeader.module.scss} +12 -11
- package/bpk-component-datatable/src/common-types.js +33 -11
- package/bpk-component-datatable/src/sort-types.js +6 -0
- package/bpk-component-datatable/src/utils.js +66 -9
- package/bpk-component-datepicker/package.json +9 -9
- package/bpk-component-description-list/package.json +2 -2
- package/bpk-component-dialog/package.json +8 -8
- package/bpk-component-drawer/package.json +9 -9
- package/bpk-component-fieldset/package.json +12 -12
- package/bpk-component-flare/package.json +4 -4
- package/bpk-component-floating-notification/package.json +5 -5
- package/bpk-component-form-validation/package.json +10 -10
- package/bpk-component-graphic-promotion/package.json +6 -5
- package/bpk-component-grid/package.json +2 -2
- package/bpk-component-grid-toggle/package.json +3 -3
- package/bpk-component-horizontal-nav/package.json +6 -6
- package/bpk-component-icon/package.json +7 -7
- package/bpk-component-image/package.json +6 -6
- package/bpk-component-infinite-scroll/package.json +6 -6
- package/bpk-component-input/package.json +6 -6
- package/bpk-component-label/package.json +2 -2
- package/bpk-component-link/package.json +4 -4
- package/bpk-component-list/README.md +8 -5
- package/bpk-component-list/package.json +2 -2
- package/bpk-component-list/src/BpkList.js +18 -2
- package/bpk-component-loading-button/package.json +6 -6
- package/bpk-component-map/package.json +6 -6
- package/bpk-component-mobile-scroll-container/package.json +3 -3
- package/bpk-component-modal/package.json +9 -9
- package/bpk-component-navigation-bar/package.json +8 -8
- package/bpk-component-nudger/package.json +7 -7
- package/bpk-component-overlay/package.json +4 -4
- package/bpk-component-pagination/package.json +4 -4
- package/bpk-component-panel/package.json +2 -2
- package/bpk-component-phone-input/package.json +9 -9
- package/bpk-component-popover/package.json +8 -8
- package/bpk-component-price/package.json +3 -3
- package/bpk-component-progress/package.json +5 -5
- package/bpk-component-radio/package.json +4 -4
- package/bpk-component-rating/package.json +4 -4
- package/bpk-component-rtl-toggle/package.json +2 -2
- package/bpk-component-scrollable-calendar/package.json +6 -6
- package/bpk-component-section-list/package.json +6 -6
- package/bpk-component-select/package.json +3 -3
- package/bpk-component-skip-link/package.json +2 -2
- package/bpk-component-slider/package.json +4 -4
- package/bpk-component-spinner/package.json +3 -3
- package/bpk-component-split-input/package.json +3 -3
- package/bpk-component-star-rating/package.json +5 -5
- package/bpk-component-switch/package.json +2 -2
- package/bpk-component-table/package.json +2 -2
- package/bpk-component-text/package.json +2 -2
- package/bpk-component-textarea/package.json +4 -4
- package/bpk-component-theme-toggle/package.json +5 -5
- package/bpk-component-ticket/package.json +4 -4
- package/bpk-component-tooltip/package.json +4 -4
- package/bpk-scrim-utils/package.json +2 -2
- package/bpk-theming/package.json +2 -2
- package/package.json +4 -4
- package/bpk-component-datatable/src/bpkHeaderRenderer.js +0 -110
- package/bpk-component-datatable/src/sorter.js +0 -166
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "bpk-animate-height",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.3",
|
|
4
4
|
"description": "Animate height using CSS transitions.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"react": "^17.0.2"
|
|
21
21
|
},
|
|
22
22
|
"devDependencies": {
|
|
23
|
-
"@skyscanner/bpk-foundations-web": "^9.
|
|
24
|
-
"bpk-component-button": "^7.0.
|
|
23
|
+
"@skyscanner/bpk-foundations-web": "^9.2.0",
|
|
24
|
+
"bpk-component-button": "^7.0.3"
|
|
25
25
|
}
|
|
26
26
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "bpk-component-accordion",
|
|
3
|
-
"version": "6.1.
|
|
3
|
+
"version": "6.1.2",
|
|
4
4
|
"description": "Backpack accordion component.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -14,10 +14,10 @@
|
|
|
14
14
|
},
|
|
15
15
|
"gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"bpk-animate-height": "^5.0.
|
|
18
|
-
"bpk-component-icon": "^10.0.
|
|
19
|
-
"bpk-component-text": "^8.0.
|
|
20
|
-
"bpk-mixins": "^31.
|
|
17
|
+
"bpk-animate-height": "^5.0.3",
|
|
18
|
+
"bpk-component-icon": "^10.0.3",
|
|
19
|
+
"bpk-component-text": "^8.0.3",
|
|
20
|
+
"bpk-mixins": "^31.6.1",
|
|
21
21
|
"bpk-react-utils": "^7.0.0",
|
|
22
22
|
"prop-types": "^15.7.2"
|
|
23
23
|
},
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"react": "^17.0.2"
|
|
26
26
|
},
|
|
27
27
|
"devDependencies": {
|
|
28
|
-
"@skyscanner/bpk-foundations-web": "^9.
|
|
29
|
-
"bpk-component-checkbox": "^5.0.
|
|
28
|
+
"@skyscanner/bpk-foundations-web": "^9.2.0",
|
|
29
|
+
"bpk-component-checkbox": "^5.0.3"
|
|
30
30
|
}
|
|
31
31
|
}
|
|
@@ -10,7 +10,7 @@ npm install bpk-component-aria-live --save-dev
|
|
|
10
10
|
|
|
11
11
|
## Usage
|
|
12
12
|
|
|
13
|
-
```
|
|
13
|
+
```tsx
|
|
14
14
|
import React from 'react';
|
|
15
15
|
import BpkAriaLive, { ARIA_LIVE_POLITENESS_SETTINGS } from 'bpk-component-aria-live';
|
|
16
16
|
|
|
@@ -37,6 +37,6 @@ export default () => (
|
|
|
37
37
|
|
|
38
38
|
`aria-relevant` and `aria-atomic` props can also be set.
|
|
39
39
|
|
|
40
|
-
`aria-relevant` determines what sort of changes should be read out. By default it is `
|
|
40
|
+
`aria-relevant` determines what sort of changes should be read out. By default it is `text` but can be `additions`, `removals` or `all`. [Read more about `aria-relevant` on MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-relevant).
|
|
41
41
|
|
|
42
42
|
`aria-atomic` is a boolean which determines whether changes should be read out, or the whole region should be read out. [Read more about `aria-atomic` on MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions#Use_Case:_Clock).
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "bpk-component-aria-live",
|
|
3
|
-
"version": "3.0
|
|
3
|
+
"version": "3.1.0",
|
|
4
4
|
"description": "Backpack aria-live component.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -8,21 +8,20 @@
|
|
|
8
8
|
"url": "git@github.com:Skyscanner/backpack.git"
|
|
9
9
|
},
|
|
10
10
|
"author": "Backpack Design System <backpack@skyscanner.net>",
|
|
11
|
-
"main": "index.
|
|
11
|
+
"main": "index.ts",
|
|
12
12
|
"publishConfig": {
|
|
13
13
|
"registry": "https://registry.npmjs.org/"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"bpk-mixins": "^31.
|
|
17
|
-
"bpk-react-utils": "^7.0.0"
|
|
18
|
-
"prop-types": "^15.5.8"
|
|
16
|
+
"bpk-mixins": "^31.6.1",
|
|
17
|
+
"bpk-react-utils": "^7.0.0"
|
|
19
18
|
},
|
|
20
19
|
"devDependencies": {
|
|
21
|
-
"bpk-component-chip": "^6.0.
|
|
22
|
-
"bpk-component-code": "^4.0.
|
|
23
|
-
"bpk-component-fieldset": "^5.0.
|
|
24
|
-
"bpk-component-select": "^6.0.
|
|
25
|
-
"bpk-component-switch": "^3.0.
|
|
20
|
+
"bpk-component-chip": "^6.0.3",
|
|
21
|
+
"bpk-component-code": "^4.0.3",
|
|
22
|
+
"bpk-component-fieldset": "^5.0.3",
|
|
23
|
+
"bpk-component-select": "^6.0.3",
|
|
24
|
+
"bpk-component-switch": "^3.0.3"
|
|
26
25
|
},
|
|
27
26
|
"peerDependencies": {
|
|
28
27
|
"react": "^17.0.2"
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Backpack - Skyscanner's Design System
|
|
3
|
+
*
|
|
4
|
+
* Copyright 2016 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
|
+
import React from 'react';
|
|
20
|
+
import { render } from '@testing-library/react';
|
|
21
|
+
|
|
22
|
+
import BpkAriaLive, { POLITENESS_SETTINGS } from './BpkAriaLive';
|
|
23
|
+
import type { PolitenessSetting } from './BpkAriaLive';
|
|
24
|
+
|
|
25
|
+
describe('BpkAriaLive', () => {
|
|
26
|
+
it('should render correctly', () => {
|
|
27
|
+
const { asFragment } = render(<BpkAriaLive>Backpack</BpkAriaLive>);
|
|
28
|
+
expect(asFragment()).toMatchSnapshot();
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
Object.keys(POLITENESS_SETTINGS).forEach((politenessSetting) => {
|
|
32
|
+
it(`should render correctly with politenessSetting="${politenessSetting}"`, () => {
|
|
33
|
+
const { asFragment } = render(
|
|
34
|
+
<BpkAriaLive politenessSetting={politenessSetting as PolitenessSetting}>
|
|
35
|
+
Backpack
|
|
36
|
+
</BpkAriaLive>,
|
|
37
|
+
);
|
|
38
|
+
expect(asFragment()).toMatchSnapshot();
|
|
39
|
+
});
|
|
40
|
+
});
|
|
41
|
+
|
|
42
|
+
it('should render correctly with the "visible" prop', () => {
|
|
43
|
+
const { asFragment } = render(<BpkAriaLive visible>Backpack</BpkAriaLive>);
|
|
44
|
+
expect(asFragment()).toMatchSnapshot();
|
|
45
|
+
});
|
|
46
|
+
|
|
47
|
+
it('should support custom class names', () => {
|
|
48
|
+
const { asFragment } = render(
|
|
49
|
+
<BpkAriaLive className="custom-classname">Backpack</BpkAriaLive>,
|
|
50
|
+
);
|
|
51
|
+
expect(asFragment()).toMatchSnapshot();
|
|
52
|
+
});
|
|
53
|
+
|
|
54
|
+
it('should support arbitrary props', () => {
|
|
55
|
+
const { asFragment } = render(
|
|
56
|
+
<BpkAriaLive testid="123">Backpack</BpkAriaLive>,
|
|
57
|
+
);
|
|
58
|
+
expect(asFragment()).toMatchSnapshot();
|
|
59
|
+
});
|
|
60
|
+
});
|
|
@@ -15,11 +15,11 @@
|
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
|
-
/* @flow strict */
|
|
19
18
|
|
|
20
|
-
import
|
|
21
|
-
import
|
|
19
|
+
import React from 'react';
|
|
20
|
+
import type { ReactElement } from 'react';
|
|
22
21
|
|
|
22
|
+
// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
|
|
23
23
|
import { cssModules } from '../../bpk-react-utils';
|
|
24
24
|
|
|
25
25
|
import STYLES from './BpkAriaLive.module.scss';
|
|
@@ -30,38 +30,32 @@ export const POLITENESS_SETTINGS = {
|
|
|
30
30
|
off: 'off',
|
|
31
31
|
polite: 'polite',
|
|
32
32
|
assertive: 'assertive',
|
|
33
|
-
};
|
|
33
|
+
} as const;
|
|
34
|
+
|
|
35
|
+
export type PolitenessSetting =
|
|
36
|
+
typeof POLITENESS_SETTINGS[keyof typeof POLITENESS_SETTINGS];
|
|
34
37
|
|
|
35
38
|
export type Props = {
|
|
36
|
-
children:
|
|
37
|
-
politenessSetting
|
|
38
|
-
visible
|
|
39
|
-
className
|
|
39
|
+
children: ReactElement | string;
|
|
40
|
+
politenessSetting?: PolitenessSetting;
|
|
41
|
+
visible?: boolean;
|
|
42
|
+
className?: string | null;
|
|
43
|
+
[rest: string]: any; // Inexact rest. See decisions/inexact-rest.md
|
|
40
44
|
};
|
|
41
|
-
|
|
42
|
-
|
|
45
|
+
|
|
46
|
+
const BpkAriaLive = ({
|
|
47
|
+
className = null,
|
|
48
|
+
politenessSetting = POLITENESS_SETTINGS.polite,
|
|
49
|
+
visible = false,
|
|
50
|
+
...rest
|
|
51
|
+
}: Props) => {
|
|
43
52
|
const classNames = getClassName(
|
|
44
53
|
'bpk-aria-live',
|
|
45
54
|
!visible && 'bpk-aria-live--invisible',
|
|
46
55
|
className,
|
|
47
56
|
);
|
|
48
57
|
|
|
49
|
-
return
|
|
50
|
-
// $FlowFixMe[cannot-spread-inexact] - inexact rest. See 'decisions/flowfixme.md'.
|
|
51
|
-
<div aria-live={politenessSetting} className={classNames} {...rest} />
|
|
52
|
-
);
|
|
53
|
-
};
|
|
54
|
-
|
|
55
|
-
BpkAriaLive.propTypes = {
|
|
56
|
-
className: PropTypes.string,
|
|
57
|
-
politenessSetting: PropTypes.oneOf(Object.keys(POLITENESS_SETTINGS)),
|
|
58
|
-
visible: PropTypes.bool,
|
|
59
|
-
};
|
|
60
|
-
|
|
61
|
-
BpkAriaLive.defaultProps = {
|
|
62
|
-
className: null,
|
|
63
|
-
politenessSetting: POLITENESS_SETTINGS.polite,
|
|
64
|
-
visible: false,
|
|
58
|
+
return <div aria-live={politenessSetting} className={classNames} {...rest} />;
|
|
65
59
|
};
|
|
66
60
|
|
|
67
61
|
export default BpkAriaLive;
|
|
@@ -16,4 +16,16 @@
|
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
|
-
|
|
19
|
+
import React from 'react';
|
|
20
|
+
import { render } from '@testing-library/react';
|
|
21
|
+
import { axe } from 'jest-axe';
|
|
22
|
+
|
|
23
|
+
import BpkAriaLive from './BpkAriaLive';
|
|
24
|
+
|
|
25
|
+
describe('BpkAriaLive accessibility tests', () => {
|
|
26
|
+
it('should not have programmatically-detectable accessibility issues', async () => {
|
|
27
|
+
const { container } = render(<BpkAriaLive>Backpack</BpkAriaLive>);
|
|
28
|
+
const results = await axe(container);
|
|
29
|
+
expect(results).toHaveNoViolations();
|
|
30
|
+
});
|
|
31
|
+
});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "bpk-component-autosuggest",
|
|
3
|
-
"version": "7.0.
|
|
3
|
+
"version": "7.0.3",
|
|
4
4
|
"description": "Backpack autosuggest component.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
},
|
|
15
15
|
"gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"bpk-component-input": "^7.0.
|
|
18
|
-
"bpk-mixins": "^31.
|
|
17
|
+
"bpk-component-input": "^7.0.3",
|
|
18
|
+
"bpk-mixins": "^31.6.1",
|
|
19
19
|
"bpk-react-utils": "^7.0.0",
|
|
20
20
|
"prop-types": "^15.7.2",
|
|
21
21
|
"react-autosuggest": "^9.4.3"
|
|
@@ -24,6 +24,6 @@
|
|
|
24
24
|
"react": "^17.0.2"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"bpk-component-icon": "^10.0.
|
|
27
|
+
"bpk-component-icon": "^10.0.3"
|
|
28
28
|
}
|
|
29
29
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "bpk-component-badge",
|
|
3
|
-
"version": "5.1.
|
|
3
|
+
"version": "5.1.2",
|
|
4
4
|
"description": "Backpack badge component.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
},
|
|
15
15
|
"gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"bpk-mixins": "^31.
|
|
17
|
+
"bpk-mixins": "^31.6.1",
|
|
18
18
|
"bpk-react-utils": "^7.0.0",
|
|
19
19
|
"prop-types": "^15.7.2"
|
|
20
20
|
},
|
|
@@ -22,8 +22,8 @@
|
|
|
22
22
|
"react": "^17.0.2"
|
|
23
23
|
},
|
|
24
24
|
"devDependencies": {
|
|
25
|
-
"@skyscanner/bpk-foundations-web": "^9.
|
|
26
|
-
"bpk-component-icon": "^10.0.
|
|
27
|
-
"bpk-storybook-utils": "^2.0.
|
|
25
|
+
"@skyscanner/bpk-foundations-web": "^9.2.0",
|
|
26
|
+
"bpk-component-icon": "^10.0.3",
|
|
27
|
+
"bpk-storybook-utils": "^2.0.3"
|
|
28
28
|
}
|
|
29
29
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "bpk-component-banner-alert",
|
|
3
|
-
"version": "7.0.
|
|
3
|
+
"version": "7.0.3",
|
|
4
4
|
"description": "Backpack banner alert component.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -14,19 +14,19 @@
|
|
|
14
14
|
},
|
|
15
15
|
"gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@skyscanner/bpk-foundations-web": "^9.
|
|
18
|
-
"bpk-animate-height": "^5.0.
|
|
19
|
-
"bpk-component-close-button": "^4.0.
|
|
20
|
-
"bpk-component-icon": "^10.0.
|
|
21
|
-
"bpk-mixins": "^31.
|
|
17
|
+
"@skyscanner/bpk-foundations-web": "^9.2.0",
|
|
18
|
+
"bpk-animate-height": "^5.0.3",
|
|
19
|
+
"bpk-component-close-button": "^4.0.3",
|
|
20
|
+
"bpk-component-icon": "^10.0.3",
|
|
21
|
+
"bpk-mixins": "^31.6.1",
|
|
22
22
|
"bpk-react-utils": "^7.0.0",
|
|
23
23
|
"prop-types": "^15.7.2",
|
|
24
24
|
"react-transition-group": "^2.5.3"
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
|
-
"bpk-component-aria-live": "^3.0
|
|
28
|
-
"bpk-component-button": "^7.0.
|
|
29
|
-
"bpk-storybook-utils": "^2.0.
|
|
27
|
+
"bpk-component-aria-live": "^3.1.0",
|
|
28
|
+
"bpk-component-button": "^7.0.3",
|
|
29
|
+
"bpk-storybook-utils": "^2.0.3"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"react": "^17.0.2"
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "bpk-component-barchart",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.3",
|
|
4
4
|
"description": "Backpack bar chart component.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -14,9 +14,9 @@
|
|
|
14
14
|
},
|
|
15
15
|
"gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@skyscanner/bpk-foundations-web": "^9.
|
|
18
|
-
"bpk-component-mobile-scroll-container": "^4.0.
|
|
19
|
-
"bpk-mixins": "^31.
|
|
17
|
+
"@skyscanner/bpk-foundations-web": "^9.2.0",
|
|
18
|
+
"bpk-component-mobile-scroll-container": "^4.0.3",
|
|
19
|
+
"bpk-mixins": "^31.6.1",
|
|
20
20
|
"bpk-react-utils": "^7.0.0",
|
|
21
21
|
"d3-path": "^2.0.0",
|
|
22
22
|
"d3-scale": "^4.0.2",
|
|
@@ -27,9 +27,9 @@
|
|
|
27
27
|
"react": "^17.0.2"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"bpk-component-breakpoint": "^5.0.
|
|
31
|
-
"bpk-component-content-container": "^6.0.
|
|
32
|
-
"bpk-component-rtl-toggle": "^4.0.
|
|
33
|
-
"bpk-component-text": "^8.0.
|
|
30
|
+
"bpk-component-breakpoint": "^5.0.3",
|
|
31
|
+
"bpk-component-content-container": "^6.0.3",
|
|
32
|
+
"bpk-component-rtl-toggle": "^4.0.3",
|
|
33
|
+
"bpk-component-text": "^8.0.3"
|
|
34
34
|
}
|
|
35
35
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "bpk-component-blockquote",
|
|
3
|
-
"version": "4.1.
|
|
3
|
+
"version": "4.1.2",
|
|
4
4
|
"description": "Backpack blockquote component.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
},
|
|
15
15
|
"gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"bpk-mixins": "^31.
|
|
17
|
+
"bpk-mixins": "^31.6.1",
|
|
18
18
|
"bpk-react-utils": "^7.0.0",
|
|
19
19
|
"prop-types": "^15.7.2"
|
|
20
20
|
},
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "bpk-component-breadcrumb",
|
|
3
|
-
"version": "4.1.
|
|
3
|
+
"version": "4.1.1",
|
|
4
4
|
"description": "Backpack breadcrumb component.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -14,10 +14,10 @@
|
|
|
14
14
|
},
|
|
15
15
|
"gitHead": "f9f94f86d7cfc75e43bc6ad5eb01b23e62a89cc8",
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"bpk-component-icon": "^10.0.
|
|
18
|
-
"bpk-component-link": "^4.0.
|
|
19
|
-
"bpk-component-text": "^8.0.
|
|
20
|
-
"bpk-mixins": "^31.
|
|
17
|
+
"bpk-component-icon": "^10.0.3",
|
|
18
|
+
"bpk-component-link": "^4.0.3",
|
|
19
|
+
"bpk-component-text": "^8.0.3",
|
|
20
|
+
"bpk-mixins": "^31.6.1",
|
|
21
21
|
"bpk-react-utils": "^7.0.0",
|
|
22
22
|
"prop-types": "^15.7.2"
|
|
23
23
|
},
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "bpk-component-breakpoint",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.3",
|
|
4
4
|
"description": "Backpack breakpoint component.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
},
|
|
15
15
|
"gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"bpk-mixins": "^31.
|
|
17
|
+
"bpk-mixins": "^31.6.1",
|
|
18
18
|
"bpk-react-utils": "^7.0.0",
|
|
19
19
|
"prop-types": "^15.7.2",
|
|
20
20
|
"react-responsive": "^8.2.0"
|
|
@@ -23,6 +23,6 @@
|
|
|
23
23
|
"react": "^17.0.2"
|
|
24
24
|
},
|
|
25
25
|
"devDependencies": {
|
|
26
|
-
"@skyscanner/bpk-foundations-web": "^9.
|
|
26
|
+
"@skyscanner/bpk-foundations-web": "^9.2.0"
|
|
27
27
|
}
|
|
28
28
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "bpk-component-button",
|
|
3
|
-
"version": "7.0.
|
|
3
|
+
"version": "7.0.3",
|
|
4
4
|
"description": "Backpack button component.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -14,11 +14,11 @@
|
|
|
14
14
|
},
|
|
15
15
|
"gitHead": "5c156b97cb0ba5e75851d3c763334578714c895e",
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"bpk-mixins": "^31.
|
|
17
|
+
"bpk-mixins": "^31.6.1",
|
|
18
18
|
"prop-types": "^15.7.2"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
|
-
"bpk-storybook-utils": "^2.0.
|
|
21
|
+
"bpk-storybook-utils": "^2.0.3"
|
|
22
22
|
},
|
|
23
23
|
"peerDependencies": {
|
|
24
24
|
"react": "^17.0.2"
|
|
@@ -20,10 +20,4 @@ Calendar components -
|
|
|
20
20
|
|
|
21
21
|
- `Week` - This is a container that will take the `DateComponent` to display each of the dates in the calendar
|
|
22
22
|
|
|
23
|
-
- `BpkCalendarDate` - is each date cell that would be displayed inside the calendar grid. This would be used to customise how each date cell is displayed e.g. coloured or with special pricing displayed.
|
|
24
|
-
|
|
25
|
-
It has a `cellType` prop which can be used to set a custom colour. An exported `CELL_TYPES` object offers the following cell types:
|
|
26
|
-
- `CELL_TYPES.positive` - sets the calendar cell to `Monteverde`
|
|
27
|
-
- `CELL_TYPES.neutral` - sets the calendar cell to `Erfoud`
|
|
28
|
-
- `CELL_TYPES.negative` - sets the calendar cell to `Panjin`
|
|
29
|
-
- `CELL_TYPES.default` - sets the calendar cell to `Sky Gray Tint 02`
|
|
23
|
+
- `BpkCalendarDate` - is each date cell that would be displayed inside the calendar grid. This would be used to customise how each date cell is displayed e.g. coloured or with special pricing displayed.
|
|
@@ -248,7 +248,6 @@ The BpkCalendarDate component is used to render the content of a cell
|
|
|
248
248
|
| Property | PropType | Required | Default Value |
|
|
249
249
|
| --------------------- | -------------------- | -------- | ---------------- |
|
|
250
250
|
| date | Date | true | - |
|
|
251
|
-
| cellType | oneOf(CELL_TYPES.default, CELL_TYPES.positive, CELL_TYPES.neutral, CELL_TYPES.negative) | false | null |
|
|
252
251
|
| isBlocked | bool | false | false |
|
|
253
252
|
| isFocused | bool | false | false |
|
|
254
253
|
| isKeyboardFocusable | bool | false | true |
|
|
@@ -261,15 +260,6 @@ The BpkCalendarDate component is used to render the content of a cell
|
|
|
261
260
|
| selectionType | oneOf(SELECTION_TYPES.single, SELECTION_TYPES.start, SELECTION_TYPES.middle, SELECTION_TYPES.end) | false | SELECTION_TYPES.single |
|
|
262
261
|
| style | object | false | null |
|
|
263
262
|
|
|
264
|
-
#### `cellType` prop
|
|
265
|
-
|
|
266
|
-
This prop determines what the colour date cell is to be displayed.
|
|
267
|
-
|
|
268
|
-
- `CELL_TYPES.positive` - sets the calendar cell to `Monteverde`
|
|
269
|
-
- `CELL_TYPES.neutral` - sets the calendar cell to `Erfoud`
|
|
270
|
-
- `CELL_TYPES.negative` - sets the calendar cell to `Panjin`
|
|
271
|
-
- `CELL_TYPES.default` - sets the calendar cell to `Sky Gray Tint 02`
|
|
272
|
-
|
|
273
263
|
#### `selectionType` prop
|
|
274
264
|
|
|
275
265
|
This property determines which selected styles will be applied to the date cell. If using ranges use `start`, `middle` and `end` to apply the correct range styles.
|
|
@@ -26,7 +26,6 @@ import BpkCalendarGrid, {
|
|
|
26
26
|
import BpkCalendarGridHeader from './src/BpkCalendarGridHeader';
|
|
27
27
|
import BpkCalendarNav from './src/BpkCalendarNav';
|
|
28
28
|
import BpkCalendarDate, {
|
|
29
|
-
CELL_TYPES,
|
|
30
29
|
ROW_TYPES,
|
|
31
30
|
SELECTION_TYPES,
|
|
32
31
|
propTypes as BpkCalendarDatePropTypes,
|
|
@@ -47,7 +46,6 @@ export {
|
|
|
47
46
|
BpkCalendarDate,
|
|
48
47
|
CustomPropTypes,
|
|
49
48
|
DateUtils,
|
|
50
|
-
CELL_TYPES,
|
|
51
49
|
CALENDAR_SELECTION_TYPE,
|
|
52
50
|
ROW_TYPES,
|
|
53
51
|
SELECTION_TYPES,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "bpk-component-calendar",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "13.0.0",
|
|
4
4
|
"description": "Backpack calendar component.",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -14,11 +14,11 @@
|
|
|
14
14
|
},
|
|
15
15
|
"gitHead": "4e4ec9add28e1db54d6a38a10c331bbd163f2926",
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@skyscanner/bpk-foundations-web": "^9.
|
|
18
|
-
"bpk-component-aria-live": "^3.0
|
|
19
|
-
"bpk-component-icon": "^10.0.
|
|
20
|
-
"bpk-component-select": "^6.0.
|
|
21
|
-
"bpk-mixins": "^31.
|
|
17
|
+
"@skyscanner/bpk-foundations-web": "^9.2.0",
|
|
18
|
+
"bpk-component-aria-live": "^3.1.0",
|
|
19
|
+
"bpk-component-icon": "^10.0.3",
|
|
20
|
+
"bpk-component-select": "^6.0.3",
|
|
21
|
+
"bpk-mixins": "^31.6.1",
|
|
22
22
|
"bpk-react-utils": "^7.0.0",
|
|
23
23
|
"date-fns": "^2.21.1",
|
|
24
24
|
"prop-types": "^15.7.2"
|
|
@@ -27,8 +27,8 @@
|
|
|
27
27
|
"react": "^17.0.2"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"bpk-component-button": "^7.0.
|
|
31
|
-
"bpk-component-text": "^8.0.
|
|
32
|
-
"bpk-storybook-utils": "^2.0.
|
|
30
|
+
"bpk-component-button": "^7.0.3",
|
|
31
|
+
"bpk-component-text": "^8.0.3",
|
|
32
|
+
"bpk-storybook-utils": "^2.0.3"
|
|
33
33
|
}
|
|
34
34
|
}
|
|
@@ -26,13 +26,6 @@ import STYLES from './BpkCalendarDate.module.scss';
|
|
|
26
26
|
|
|
27
27
|
const getClassName = cssModules(STYLES);
|
|
28
28
|
|
|
29
|
-
export const CELL_TYPES = {
|
|
30
|
-
default: 'default',
|
|
31
|
-
negative: 'negative',
|
|
32
|
-
neutral: 'neutral',
|
|
33
|
-
positive: 'positive',
|
|
34
|
-
};
|
|
35
|
-
|
|
36
29
|
export const SELECTION_TYPES = {
|
|
37
30
|
none: 'none',
|
|
38
31
|
single: 'single',
|
|
@@ -99,7 +92,6 @@ class BpkCalendarDate extends PureComponent {
|
|
|
99
92
|
|
|
100
93
|
render() {
|
|
101
94
|
const {
|
|
102
|
-
cellType,
|
|
103
95
|
className,
|
|
104
96
|
date,
|
|
105
97
|
isBlocked,
|
|
@@ -126,11 +118,6 @@ class BpkCalendarDate extends PureComponent {
|
|
|
126
118
|
}
|
|
127
119
|
});
|
|
128
120
|
|
|
129
|
-
if (cellType) {
|
|
130
|
-
classNames.push(getClassName(`bpk-calendar-date--colored`));
|
|
131
|
-
classNames.push(getClassName(`bpk-calendar-date--colored-${cellType}`));
|
|
132
|
-
}
|
|
133
|
-
|
|
134
121
|
if (isFocused) {
|
|
135
122
|
classNames.push(getClassName('bpk-calendar-date--focused'));
|
|
136
123
|
}
|
|
@@ -183,7 +170,6 @@ export const propTypes = {
|
|
|
183
170
|
// Required
|
|
184
171
|
date: PropTypes.instanceOf(Date).isRequired,
|
|
185
172
|
// Optional
|
|
186
|
-
cellType: PropTypes.oneOf(Object.keys(CELL_TYPES)),
|
|
187
173
|
className: PropTypes.string,
|
|
188
174
|
isBlocked: PropTypes.bool,
|
|
189
175
|
isFocused: PropTypes.bool,
|
|
@@ -203,7 +189,6 @@ BpkCalendarDate.propTypes = { ...propTypes };
|
|
|
203
189
|
|
|
204
190
|
export const defaultProps = {
|
|
205
191
|
className: null,
|
|
206
|
-
cellType: null,
|
|
207
192
|
isBlocked: false,
|
|
208
193
|
isFocused: false,
|
|
209
194
|
isKeyboardFocusable: true,
|