@skyscanner/backpack-web 34.16.0 → 35.0.0-premajor.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-button/src/BpkButtonDestructive.module.css +18 -0
- package/bpk-component-button/src/BpkButtonFeatured.module.css +18 -0
- package/bpk-component-button/src/BpkButtonLink.module.css +18 -0
- package/bpk-component-button/src/BpkButtonLinkOnDark.module.css +18 -0
- package/bpk-component-button/src/BpkButtonPrimaryOnDark.module.css +18 -0
- package/bpk-component-button/src/BpkButtonPrimaryOnLight.module.css +18 -0
- package/bpk-component-button/src/BpkButtonSecondary.module.css +18 -0
- package/bpk-component-button/src/BpkButtonSecondaryOnDark.module.css +18 -0
- package/bpk-component-close-button/src/BpkCloseButton.d.ts +10 -0
- package/bpk-component-close-button/src/BpkCloseButton.js +21 -37
- package/bpk-component-datepicker/src/BpkDatepicker.module.css +18 -0
- package/bpk-component-flare/src/__generated__/js/corner-radius.d.ts +5 -0
- package/bpk-component-flare/src/__generated__/js/pointer.d.ts +5 -0
- package/bpk-component-input/src/BpkClearButton.module.css +18 -0
- package/bpk-component-input/src/BpkInput.js +1 -1
- package/bpk-component-input/src/common-types.d.ts +1 -1
- package/bpk-component-loading-button/src/BpkLoadingButton.d.ts +6 -38
- package/bpk-component-loading-button/src/BpkLoadingButton.js +13 -44
- package/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.module.css +18 -0
- package/bpk-component-nudger/index.d.ts +1 -2
- package/bpk-component-nudger/index.js +1 -2
- package/bpk-component-nudger/src/BpkNudger.d.ts +1 -1
- package/bpk-component-nudger/src/BpkNudger.js +102 -20
- package/bpk-component-nudger/src/BpkNudger.module.css +1 -1
- package/bpk-component-nudger/src/common-types.d.ts +7 -5
- package/bpk-component-slider/src/BpkSlider.d.ts +4 -1
- package/bpk-component-slider/src/BpkSlider.js +51 -3
- package/bpk-component-spinner/src/BpkExtraLargeSpinner.d.ts +4 -14
- package/bpk-component-spinner/src/BpkExtraLargeSpinner.js +5 -16
- package/bpk-component-spinner/src/BpkLargeSpinner.d.ts +5 -17
- package/bpk-component-spinner/src/BpkLargeSpinner.js +6 -19
- package/bpk-component-spinner/src/BpkSpinner.d.ts +5 -17
- package/bpk-component-spinner/src/BpkSpinner.js +6 -19
- package/bpk-component-split-input/src/BpkInputField.d.ts +21 -0
- package/bpk-component-split-input/src/BpkInputField.js +12 -17
- package/bpk-component-split-input/src/BpkSplitInput.d.ts +44 -0
- package/bpk-component-split-input/src/BpkSplitInput.js +22 -33
- package/bpk-react-utils/src/nativeEventHandler.d.ts +1 -1
- package/bpk-react-utils/src/nativeEventHandler.js +7 -5
- package/bpk-stylesheets/test.css +164 -0
- package/package.json +3 -1
- package/bpk-component-nudger/src/BpkConfigurableNudger.d.ts +0 -26
- package/bpk-component-nudger/src/BpkConfigurableNudger.js +0 -96
|
@@ -0,0 +1,18 @@
|
|
|
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
|
+
.bpk-button--destructive{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233));color:#e70866;color:var(--bpk-button-destructive-text-color, rgb(231, 8, 102));background-color:#e0e4e9;background-color:var(--bpk-button-destructive-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--destructive:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}.bpk-no-touch-support .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}:global(.bpk-no-touch-support) .bpk-button--destructive:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-destructive-hover-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-hover-background-color, rgb(231, 8, 102))}.bpk-button--destructive:active{color:#fff;color:var(--bpk-button-destructive-active-text-color, rgb(255, 255, 255));background-color:#e70866;background-color:var(--bpk-button-destructive-active-background-color, rgb(231, 8, 102))}.bpk-button--destructive:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}
|
|
@@ -0,0 +1,18 @@
|
|
|
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
|
+
.bpk-button--featured{color:#fff;color:var(--bpk-button-featured-text-color, rgb(255, 255, 255));background-color:#0062e3;background-color:var(--bpk-button-featured-background-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}:global(.bpk-no-touch-support) .bpk-button--featured:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-featured-hover-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-hover-background-color, rgb(2, 77, 175))}.bpk-button--featured:active{color:#fff;color:var(--bpk-button-featured-active-text-color, rgb(255, 255, 255));background-color:#024daf;background-color:var(--bpk-button-featured-active-background-color, rgb(2, 77, 175))}.bpk-button--featured:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}
|
|
@@ -0,0 +1,18 @@
|
|
|
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
|
+
.bpk-button--link{background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--link:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--link:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-large{padding:.75rem 0}
|
|
@@ -0,0 +1,18 @@
|
|
|
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
|
+
.bpk-button--link-on-dark{background:none;box-shadow:none;padding:0;border:0;background-color:rgba(0,0,0,0);text-decoration:none;cursor:pointer;appearance:none;color:#0062e3;color:var(--bpk-link-color, rgb(0, 98, 227));padding:.375rem 0;color:#0062e3;color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){text-decoration:underline;color:#0062e3;color:var(--bpk-link-hover-color, rgb(0, 98, 227))}.bpk-button--link-on-dark:visited{color:#0062e3;color:var(--bpk-link-visited-color, rgb(0, 98, 227))}.bpk-button--link-on-dark:active{text-decoration:underline;color:#0062e3;color:var(--bpk-link-active-color, rgb(0, 98, 227))}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){background:none;color:#024daf;text-decoration:none}.bpk-button--link-on-dark:active{background:none;color:#024daf;text-decoration:none}.bpk-button--link-on-dark:disabled{background:none;color:rgba(0,0,0,.2);text-decoration:none}.bpk-button--link-on-dark-large{padding:.75rem 0}.bpk-no-touch-support .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}:global(.bpk-no-touch-support) .bpk-button--link-on-dark:hover:not(:active):not(:disabled){color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-hover-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:active{color:rgba(255,255,255,.5);color:var(--bpk-button-link-on-dark-active-text-color, rgba(255, 255, 255, 0.5))}.bpk-button--link-on-dark:visited{color:#fff;color:var(--bpk-button-link-on-dark-text-color, rgb(255, 255, 255))}.bpk-button--link-on-dark:disabled{color:rgba(255,255,255,.2);color:var(--bpk-button-link-on-dark-disabled-color, rgba(255, 255, 255, 0.2))}
|
|
@@ -0,0 +1,18 @@
|
|
|
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
|
+
.bpk-button--primary-on-dark{color:#161616;color:var(--bpk-button-primary-on-dark-text-color, rgb(22, 22, 22));background-color:#fff;background-color:var(--bpk-button-primary-on-dark-background-color, rgb(255, 255, 255))}.bpk-no-touch-support .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--primary-on-dark:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-primary-on-dark-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-hover-background-color, rgb(193, 199, 207))}.bpk-button--primary-on-dark:active{color:#161616;color:var(--bpk-button-primary-on-dark-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-primary-on-dark-active-background-color, rgb(193, 199, 207))}.bpk-button--primary-on-dark:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}
|
|
@@ -0,0 +1,18 @@
|
|
|
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
|
+
.bpk-button--primary-on-light{color:#fff;color:var(--bpk-button-primary-on-light-text-color, rgb(255, 255, 255));background-color:#05203c;background-color:var(--bpk-button-primary-on-light-background-color, rgb(5, 32, 60))}.bpk-no-touch-support .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}:global(.bpk-no-touch-support) .bpk-button--primary-on-light:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-primary-on-light-hover-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-hover-background-color, rgb(21, 70, 121))}.bpk-button--primary-on-light:active{color:#fff;color:var(--bpk-button-primary-on-light-active-text-color, rgb(255, 255, 255));background-color:#154679;background-color:var(--bpk-button-primary-on-light-active-background-color, rgb(21, 70, 121))}.bpk-button--primary-on-light:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}
|
|
@@ -0,0 +1,18 @@
|
|
|
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
|
+
.bpk-button--secondary{color:#161616;color:var(--bpk-button-secondary-text-color, rgb(22, 22, 22));background-color:#e0e4e9;background-color:var(--bpk-button-secondary-background-color, rgb(224, 228, 233))}.bpk-no-touch-support .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}:global(.bpk-no-touch-support) .bpk-button--secondary:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-button-secondary-hover-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-hover-background-color, rgb(193, 199, 207))}.bpk-button--secondary:active{color:#161616;color:var(--bpk-button-secondary-active-text-color, rgb(22, 22, 22));background-color:#c1c7cf;background-color:var(--bpk-button-secondary-active-background-color, rgb(193, 199, 207))}.bpk-button--secondary:disabled{background-color:#e0e4e9;color:rgba(0,0,0,.2)}
|
|
@@ -0,0 +1,18 @@
|
|
|
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
|
+
.bpk-button--secondary-on-dark{color:#fff;color:var(--bpk-button-secondary-on-dark-text-color, rgb(255, 255, 255));background-color:rgba(255,255,255,.1);background-color:var(--bpk-button-secondary-on-dark-background-color, rgba(255, 255, 255, 0.1))}.bpk-no-touch-support .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}:global(.bpk-no-touch-support) .bpk-button--secondary-on-dark:hover:not(:active):not(:disabled){color:#fff;color:var(--bpk-button-secondary-on-dark-hover-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-hover-background-color, rgb(1, 9, 19))}.bpk-button--secondary-on-dark:active{color:#fff;color:var(--bpk-button-secondary-on-dark-active-text-color, rgb(255, 255, 255));background-color:#010913;background-color:var(--bpk-button-secondary-on-dark-active-background-color, rgb(1, 9, 19))}.bpk-button--secondary-on-dark:disabled{background-color:#0b121d;color:rgba(255,255,255,.2)}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { SyntheticEvent, FunctionComponent } from 'react';
|
|
2
|
+
type Props = {
|
|
3
|
+
label: string;
|
|
4
|
+
onClick: (event: SyntheticEvent<any>) => any;
|
|
5
|
+
className?: string | null;
|
|
6
|
+
customIcon?: FunctionComponent<any> | null;
|
|
7
|
+
onDark?: Boolean;
|
|
8
|
+
};
|
|
9
|
+
declare const BpkCloseButton: ({ className, customIcon, label, onClick, onDark, ...rest }: Props) => JSX.Element;
|
|
10
|
+
export default BpkCloseButton;
|
|
@@ -14,53 +14,37 @@
|
|
|
14
14
|
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
|
-
*/
|
|
17
|
+
*/
|
|
18
|
+
|
|
18
19
|
import CloseIcon from "../../bpk-component-icon/sm/close";
|
|
19
20
|
import { cssModules } from "../../bpk-react-utils";
|
|
20
21
|
import STYLES from "./BpkCloseButton.module.css";
|
|
21
22
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
22
23
|
const getClassName = cssModules(STYLES);
|
|
23
|
-
const BpkCloseButton =
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
} = props;
|
|
24
|
+
const BpkCloseButton = ({
|
|
25
|
+
className = null,
|
|
26
|
+
customIcon = null,
|
|
27
|
+
label,
|
|
28
|
+
onClick,
|
|
29
|
+
onDark = false,
|
|
30
|
+
...rest
|
|
31
|
+
}) => {
|
|
32
32
|
const classNames = [onDark ? getClassName('bpk-close-button__onDark') : getClassName('bpk-close-button__default')];
|
|
33
33
|
const Icon = customIcon || CloseIcon;
|
|
34
34
|
if (className) {
|
|
35
35
|
classNames.push(className);
|
|
36
36
|
}
|
|
37
|
-
return (
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
className:
|
|
46
|
-
|
|
47
|
-
children: /*#__PURE__*/_jsx("span", {
|
|
48
|
-
className: getClassName('bpk-close-button-icon'),
|
|
49
|
-
children: /*#__PURE__*/_jsx(Icon, {})
|
|
50
|
-
})
|
|
37
|
+
return /*#__PURE__*/_jsx("button", {
|
|
38
|
+
type: "button",
|
|
39
|
+
title: label,
|
|
40
|
+
onClick: onClick,
|
|
41
|
+
"aria-label": label,
|
|
42
|
+
className: classNames.join(' '),
|
|
43
|
+
...rest,
|
|
44
|
+
children: /*#__PURE__*/_jsx("span", {
|
|
45
|
+
className: getClassName('bpk-close-button-icon'),
|
|
46
|
+
children: /*#__PURE__*/_jsx(Icon, {})
|
|
51
47
|
})
|
|
52
|
-
);
|
|
53
|
-
};
|
|
54
|
-
BpkCloseButton.propTypes = {
|
|
55
|
-
label: PropTypes.string.isRequired,
|
|
56
|
-
onClick: PropTypes.func.isRequired,
|
|
57
|
-
className: PropTypes.string,
|
|
58
|
-
customIcon: PropTypes.func,
|
|
59
|
-
onDark: PropTypes.bool
|
|
60
|
-
};
|
|
61
|
-
BpkCloseButton.defaultProps = {
|
|
62
|
-
className: null,
|
|
63
|
-
customIcon: null,
|
|
64
|
-
onDark: false
|
|
48
|
+
});
|
|
65
49
|
};
|
|
66
50
|
export default BpkCloseButton;
|
|
@@ -0,0 +1,18 @@
|
|
|
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
|
+
.bpk-datepicker__calendar{margin:0 auto}.bpk-datepicker__input{display:inline-block;width:100%}
|
|
@@ -0,0 +1,18 @@
|
|
|
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
|
+
.bpk-clear-button{padding:0;border:0;background-color:rgba(0,0,0,0);color:#626971;cursor:pointer;appearance:none}.bpk-no-touch-support .bpk-clear-button:hover:not(:active):not(:disabled){color:#161616}:global(.bpk-no-touch-support) .bpk-clear-button:hover:not(:active):not(:disabled){color:#161616}.bpk-clear-button:active{color:#161616}.bpk-clear-button__icon{fill:currentcolor}
|
|
@@ -120,7 +120,7 @@ class BpkInput extends Component {
|
|
|
120
120
|
};
|
|
121
121
|
return clearable ? /*#__PURE__*/_jsxs("div", {
|
|
122
122
|
className: containerClassNames.join(' '),
|
|
123
|
-
children: [renderedInput, value
|
|
123
|
+
children: [renderedInput, `${value}`.length > 0 && /*#__PURE__*/_jsx("button", {
|
|
124
124
|
type: "button",
|
|
125
125
|
title: clearButtonLabel || '',
|
|
126
126
|
"aria-label": clearButtonLabel || '',
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import PropTypes from 'prop-types';
|
|
2
1
|
import type { ReactElement, ReactNode } from 'react';
|
|
2
|
+
import type { Props as ButtonProps } from '../../bpk-component-button/src/BpkButtonV2/common-types';
|
|
3
3
|
export declare const ICON_POSITION: {
|
|
4
4
|
LEADING: string;
|
|
5
5
|
TRAILING: string;
|
|
@@ -17,44 +17,12 @@ type LoadingProps = {
|
|
|
17
17
|
large?: boolean;
|
|
18
18
|
link?: boolean;
|
|
19
19
|
linkOnDark?: boolean;
|
|
20
|
-
loading
|
|
21
|
-
iconOnly
|
|
20
|
+
loading?: boolean;
|
|
21
|
+
iconOnly?: boolean;
|
|
22
22
|
icon?: ReactElement<any>;
|
|
23
|
-
iconPosition
|
|
23
|
+
iconPosition?: (typeof ICON_POSITION)[keyof typeof ICON_POSITION];
|
|
24
24
|
iconDisabled?: ReactElement<any>;
|
|
25
25
|
iconLoading?: ReactElement<any>;
|
|
26
|
-
};
|
|
27
|
-
declare const BpkLoadingButton:
|
|
28
|
-
(props: LoadingProps): JSX.Element;
|
|
29
|
-
propTypes: {
|
|
30
|
-
children: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
|
|
31
|
-
className: PropTypes.Requireable<string>;
|
|
32
|
-
disabled: PropTypes.Requireable<boolean>;
|
|
33
|
-
secondary: PropTypes.Requireable<boolean>;
|
|
34
|
-
destructive: PropTypes.Requireable<boolean>;
|
|
35
|
-
link: PropTypes.Requireable<boolean>;
|
|
36
|
-
linkOnDark: PropTypes.Requireable<boolean>;
|
|
37
|
-
loading: PropTypes.Requireable<boolean>;
|
|
38
|
-
iconOnly: PropTypes.Requireable<boolean>;
|
|
39
|
-
icon: PropTypes.Requireable<PropTypes.ReactElementLike>;
|
|
40
|
-
iconPosition: PropTypes.Requireable<string>;
|
|
41
|
-
iconDisabled: PropTypes.Requireable<PropTypes.ReactElementLike>;
|
|
42
|
-
iconLoading: PropTypes.Requireable<PropTypes.ReactElementLike>;
|
|
43
|
-
};
|
|
44
|
-
defaultProps: {
|
|
45
|
-
className: null;
|
|
46
|
-
disabled: boolean;
|
|
47
|
-
secondary: boolean;
|
|
48
|
-
destructive: boolean;
|
|
49
|
-
large: boolean;
|
|
50
|
-
link: boolean;
|
|
51
|
-
linkOnDark: boolean;
|
|
52
|
-
loading: boolean;
|
|
53
|
-
iconOnly: boolean;
|
|
54
|
-
icon: null;
|
|
55
|
-
iconPosition: string;
|
|
56
|
-
iconDisabled: null;
|
|
57
|
-
iconLoading: null;
|
|
58
|
-
};
|
|
59
|
-
};
|
|
26
|
+
} & ButtonProps;
|
|
27
|
+
declare const BpkLoadingButton: (props: LoadingProps) => JSX.Element;
|
|
60
28
|
export default BpkLoadingButton;
|
|
@@ -16,7 +16,6 @@
|
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
|
-
import PropTypes from 'prop-types';
|
|
20
19
|
import { BUTTON_TYPES, BpkButtonV2, SIZE_TYPES } from "../../bpk-component-button";
|
|
21
20
|
import { withButtonAlignment, withLargeButtonAlignment, withRtlSupport } from "../../bpk-component-icon";
|
|
22
21
|
import ArrowIconLg from "../../bpk-component-icon/lg/long-arrow-right";
|
|
@@ -60,22 +59,22 @@ const getLoadingIcon = props => {
|
|
|
60
59
|
const BpkLoadingButton = props => {
|
|
61
60
|
const {
|
|
62
61
|
children,
|
|
63
|
-
destructive,
|
|
64
|
-
disabled,
|
|
65
|
-
featured,
|
|
62
|
+
destructive = false,
|
|
63
|
+
disabled = false,
|
|
64
|
+
featured = false,
|
|
66
65
|
icon,
|
|
67
66
|
iconDisabled,
|
|
68
67
|
iconLoading,
|
|
69
|
-
iconOnly,
|
|
70
|
-
iconPosition,
|
|
71
|
-
large,
|
|
72
|
-
link,
|
|
73
|
-
linkOnDark,
|
|
74
|
-
loading,
|
|
75
|
-
primaryOnDark,
|
|
76
|
-
primaryOnLight,
|
|
77
|
-
secondary,
|
|
78
|
-
secondaryOnDark,
|
|
68
|
+
iconOnly = false,
|
|
69
|
+
iconPosition = ICON_POSITION.TRAILING,
|
|
70
|
+
large = false,
|
|
71
|
+
link = false,
|
|
72
|
+
linkOnDark = false,
|
|
73
|
+
loading = false,
|
|
74
|
+
primaryOnDark = false,
|
|
75
|
+
primaryOnLight = false,
|
|
76
|
+
secondary = false,
|
|
77
|
+
secondaryOnDark = false,
|
|
79
78
|
...rest
|
|
80
79
|
} = props;
|
|
81
80
|
const showBtnDisabled = disabled || loading;
|
|
@@ -127,34 +126,4 @@ const BpkLoadingButton = props => {
|
|
|
127
126
|
})
|
|
128
127
|
});
|
|
129
128
|
};
|
|
130
|
-
BpkLoadingButton.propTypes = {
|
|
131
|
-
children: PropTypes.node.isRequired,
|
|
132
|
-
className: PropTypes.string,
|
|
133
|
-
disabled: PropTypes.bool,
|
|
134
|
-
secondary: PropTypes.bool,
|
|
135
|
-
destructive: PropTypes.bool,
|
|
136
|
-
link: PropTypes.bool,
|
|
137
|
-
linkOnDark: PropTypes.bool,
|
|
138
|
-
loading: PropTypes.bool,
|
|
139
|
-
iconOnly: PropTypes.bool,
|
|
140
|
-
icon: PropTypes.element,
|
|
141
|
-
iconPosition: PropTypes.oneOf([ICON_POSITION.LEADING, ICON_POSITION.TRAILING]),
|
|
142
|
-
iconDisabled: PropTypes.element,
|
|
143
|
-
iconLoading: PropTypes.element
|
|
144
|
-
};
|
|
145
|
-
BpkLoadingButton.defaultProps = {
|
|
146
|
-
className: null,
|
|
147
|
-
disabled: false,
|
|
148
|
-
secondary: false,
|
|
149
|
-
destructive: false,
|
|
150
|
-
large: false,
|
|
151
|
-
link: false,
|
|
152
|
-
linkOnDark: false,
|
|
153
|
-
loading: false,
|
|
154
|
-
iconOnly: false,
|
|
155
|
-
icon: null,
|
|
156
|
-
iconPosition: ICON_POSITION.TRAILING,
|
|
157
|
-
iconDisabled: null,
|
|
158
|
-
iconLoading: null
|
|
159
|
-
};
|
|
160
129
|
export default BpkLoadingButton;
|
|
@@ -0,0 +1,18 @@
|
|
|
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
|
+
.bpk-navigation-bar-button-link{color:#161616;color:var(--bpk-navigation-bar-button-link-color, rgb(22, 22, 22))}.bpk-no-touch-support .bpk-navigation-bar-button-link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-navigation-bar-button-link-hover-color, rgb(22, 22, 22))}:global(.bpk-no-touch-support) .bpk-navigation-bar-button-link:hover:not(:active):not(:disabled){color:#161616;color:var(--bpk-navigation-bar-button-link-hover-color, rgb(22, 22, 22))}.bpk-navigation-bar-button-link:active{color:#161616;color:var(--bpk-navigation-bar-button-link-active-color, rgb(22, 22, 22))}.bpk-navigation-bar-button-link:visited{color:#161616;color:var(--bpk-navigation-bar-button-link-visited-color, rgb(22, 22, 22))}.bpk-navigation-bar-button-link--on-dark{color:#fff}.bpk-no-touch-support .bpk-navigation-bar-button-link--on-dark:hover:not(:active):not(:disabled){color:#fff}:global(.bpk-no-touch-support) .bpk-navigation-bar-button-link--on-dark:hover:not(:active):not(:disabled){color:#fff}.bpk-navigation-bar-button-link--on-dark:active{color:#fff}.bpk-navigation-bar-button-link--on-dark:visited{color:#fff}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import BpkConfigurableNudger from './src/BpkConfigurableNudger';
|
|
2
1
|
import BpkNudger from './src/BpkNudger';
|
|
3
2
|
import themeAttributes from './src/themeAttributes';
|
|
4
3
|
export default BpkNudger;
|
|
5
|
-
export { themeAttributes
|
|
4
|
+
export { themeAttributes };
|
|
@@ -16,8 +16,7 @@
|
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
|
-
import BpkConfigurableNudger from "./src/BpkConfigurableNudger";
|
|
20
19
|
import BpkNudger from "./src/BpkNudger";
|
|
21
20
|
import themeAttributes from "./src/themeAttributes";
|
|
22
21
|
export default BpkNudger;
|
|
23
|
-
export { themeAttributes
|
|
22
|
+
export { themeAttributes };
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { type CommonProps } from './common-types';
|
|
2
|
-
declare const BpkNudger: ({ buttonType, className, icon, id, subtitle, title, ...rest }: CommonProps) => JSX.Element;
|
|
2
|
+
declare const BpkNudger: ({ buttonType, className, decreaseButtonLabel, icon, id, increaseButtonLabel, inputClassName, max, min, name, onValueChange, step, subtitle, title, value, ...rest }: CommonProps) => JSX.Element;
|
|
3
3
|
export default BpkNudger;
|