@skyscanner/backpack-web 33.0.0-beta.1 → 33.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.
Files changed (74) hide show
  1. package/bpk-component-accordion/src/BpkAccordionItem.js +1 -1
  2. package/bpk-component-badge/index.d.ts +1 -2
  3. package/bpk-component-banner-alert/src/AnimateAndFade.js +2 -3
  4. package/bpk-component-barchart/src/BpkBarchart.js +1 -1
  5. package/bpk-component-barchart/src/BpkBarchartBars.js +2 -2
  6. package/bpk-component-bottom-sheet/src/BpkBottomSheet.d.ts +6 -11
  7. package/bpk-component-bottom-sheet/src/BpkBottomSheet.js +65 -27
  8. package/bpk-component-bottom-sheet/src/BpkBottomSheet.module.css +1 -1
  9. package/bpk-component-breakpoint/src/BpkBreakpoint.js +0 -1
  10. package/bpk-component-button/src/BpkButtonDestructive.module.css +1 -1
  11. package/bpk-component-button/src/BpkButtonLink.module.css +1 -1
  12. package/bpk-component-button/src/BpkButtonLinkOnDark.module.css +1 -1
  13. package/bpk-component-button/src/BpkButtonSecondaryOnDark.module.css +1 -1
  14. package/bpk-component-button/src/BpkButtonV2/BpkButton.d.ts +1 -1
  15. package/bpk-component-button/src/BpkButtonV2/BpkButton.js +2 -1
  16. package/bpk-component-button/src/BpkButtonV2/BpkButton.module.css +1 -1
  17. package/bpk-component-button/src/BpkButtonV2/common-types.d.ts +1 -0
  18. package/bpk-component-calendar/src/BpkCalendarGrid.js +1 -2
  19. package/bpk-component-calendar/src/Week.js +1 -1
  20. package/bpk-component-calendar/src/composeCalendar.d.ts +4 -1
  21. package/bpk-component-calendar/src/date-utils.d.ts +19 -19
  22. package/bpk-component-calendar/src/date-utils.js +21 -21
  23. package/bpk-component-calendar/test-utils.js +1 -1
  24. package/bpk-component-chip/src/BpkSelectableChip.js +1 -1
  25. package/{bpk-component-bottom-sheet/src/BpkBottomSheetInner.d.ts → bpk-component-datatable/index.d.ts} +3 -11
  26. package/bpk-component-datatable/src/BpkDataTable.d.ts +22 -0
  27. package/bpk-component-datatable/src/BpkDataTable.js +1 -2
  28. package/bpk-component-datatable/src/BpkDataTableHeader.d.ts +27 -0
  29. package/bpk-component-datatable/src/BpkDataTableHeader.js +1 -1
  30. package/bpk-component-datatable/src/common-types.d.ts +111 -0
  31. package/bpk-component-datatable/src/utils.d.ts +30 -0
  32. package/bpk-component-flare/src/BpkFlareBar.js +1 -1
  33. package/bpk-component-floating-notification/src/BpkFloatingNotification.js +0 -1
  34. package/bpk-component-icon/src/withRtlSupport.js +1 -1
  35. package/bpk-component-image/src/BpkBackgroundImage.js +0 -1
  36. package/bpk-component-image/src/BpkImage.js +1 -3
  37. package/bpk-component-info-banner/src/AnimateAndFade.js +2 -3
  38. package/bpk-component-input/src/BpkInput.js +1 -1
  39. package/bpk-component-mobile-scroll-container/src/BpkMobileScrollContainer.js +1 -1
  40. package/bpk-component-modal/src/BpkModal.js +1 -1
  41. package/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink.js +1 -1
  42. package/bpk-component-navigation-bar/src/BpkNavigationBarIconButton.js +1 -1
  43. package/bpk-component-popover/src/BpkPopover.js +1 -1
  44. package/bpk-component-popover/src/BpkPopoverPortal.js +3 -3
  45. package/bpk-component-price/src/BpkPrice.js +1 -1
  46. package/bpk-component-rating/src/BpkRating.js +1 -1
  47. package/bpk-component-scrollable-calendar/src/BpkScrollableCalendarGridList.js +1 -1
  48. package/bpk-component-scrollable-calendar/test-utils.js +1 -1
  49. package/bpk-component-section-header/src/BpkSectionHeader.js +1 -0
  50. package/bpk-component-section-header/src/BpkSectionHeader.module.css +1 -1
  51. package/bpk-component-slider/src/BpkSlider.js +1 -2
  52. package/bpk-component-spinner/src/BpkExtraLargeSpinner.js +1 -1
  53. package/bpk-component-spinner/src/BpkLargeSpinner.js +1 -1
  54. package/bpk-component-spinner/src/BpkSpinner.js +1 -1
  55. package/bpk-component-theme-toggle/src/BpkThemeToggle.js +1 -1
  56. package/bpk-component-tooltip/src/BpkTooltip.js +1 -1
  57. package/bpk-component-tooltip/src/BpkTooltipPortal.js +2 -2
  58. package/bpk-mixins/_buttons.scss +15 -0
  59. package/bpk-react-utils/index.d.ts +36 -1
  60. package/bpk-react-utils/index.js +4 -2
  61. package/bpk-react-utils/src/BpkDialogWrapper/BpkDialogWrapper.js +144 -0
  62. package/bpk-react-utils/src/BpkDialogWrapper.d.ts +45 -0
  63. package/bpk-react-utils/src/BpkDialogWrapper.module.css +18 -0
  64. package/bpk-react-utils/src/Portal.js +0 -1
  65. package/bpk-scrim-utils/src/withScrim.js +1 -2
  66. package/bpk-stylesheets/base.css +1 -1
  67. package/bpk-stylesheets/index.js +2 -2
  68. package/bpk-stylesheets/index.scss +20 -22
  69. package/package.json +3 -3
  70. package/unstable__bpk-mixins/_buttons.scss +15 -0
  71. package/bpk-component-bottom-sheet/src/BpkBottomSheetInner.js +0 -96
  72. package/bpk-component-bottom-sheet/src/BpkBottomSheetInner.module.css +0 -18
  73. package/bpk-component-flare/src/corner-radius.d.ts +0 -6
  74. package/bpk-component-flare/src/pointer.d.ts +0 -6
@@ -0,0 +1,144 @@
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 { useEffect, useRef, useState } from "react";
20
+ // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
21
+ import CSSTransition from 'react-transition-group/CSSTransition';
22
+ import cssModules from "../cssModules";
23
+ import STYLES from "./BpkDialogWrapper.module.css";
24
+ import { jsx as _jsx } from "react/jsx-runtime";
25
+ import { jsxs as _jsxs } from "react/jsx-runtime";
26
+ const getClassName = cssModules(STYLES);
27
+ ;
28
+ // TODO: this check if the browser support the HTML dialog element. We can remove it once we drop support as a business for Safari 14
29
+ const dialogSupported = typeof HTMLDialogElement === 'function';
30
+ const setPageProperties = ({
31
+ isDialogOpen
32
+ }) => {
33
+ document.body.style.overflowY = isDialogOpen ? 'hidden' : 'visible';
34
+ if (!dialogSupported) {
35
+ document.body.style.position = isDialogOpen ? 'fixed' : 'relative';
36
+ document.body.style.width = isDialogOpen ? '100%' : 'auto';
37
+ }
38
+ };
39
+ export const BpkDialogWrapper = props => {
40
+ const {
41
+ ariaLabelledby,
42
+ children,
43
+ closeOnEscPressed = false,
44
+ closeOnScrimClick = false,
45
+ dialogClassName = '',
46
+ exiting = false,
47
+ id,
48
+ isOpen,
49
+ onClose,
50
+ timeout = {
51
+ appear: 0,
52
+ exit: 0
53
+ },
54
+ transitionClassNames = {}
55
+ } = props;
56
+ const ref = useRef(null);
57
+ const [dialogTarget, setDialogTarget] = useState(null);
58
+ useEffect(() => {
59
+ const dialog = document.getElementById(`${id}`);
60
+ const dialogWithPolyfill = document.getElementById(`${id}-polyfill`);
61
+ const handleBackdropClick = modal => {
62
+ if (closeOnScrimClick && modal) {
63
+ modal.addEventListener('click', event => {
64
+ const {
65
+ target
66
+ } = event;
67
+ if (target === modal) {
68
+ onClose(event, {
69
+ source: "DOCUMENT_CLICK"
70
+ });
71
+ event.stopPropagation();
72
+ }
73
+ });
74
+ }
75
+ };
76
+ const handleKeyDown = event => {
77
+ if (closeOnEscPressed && event.key === 'Escape' && (!dialogWithPolyfill || event.target === dialogWithPolyfill)) {
78
+ onClose(event, {
79
+ source: "ESCAPE"
80
+ });
81
+ }
82
+ event.stopPropagation();
83
+ };
84
+ if (isOpen) {
85
+ // There is a bug on older versions of browser using chromium (chrome, firefox, edge >114) where the dialog got an open attribute even before it is opened.
86
+ // Therefore, when trying to open it, it crashes and log an error mentioning the dialog has already an open attribute.
87
+ ref.current?.removeAttribute('open');
88
+ ref.current?.showModal?.();
89
+ if (dialogWithPolyfill) {
90
+ setDialogTarget(dialogWithPolyfill);
91
+ handleBackdropClick(dialogWithPolyfill);
92
+ window.addEventListener('keydown', handleKeyDown);
93
+ } else {
94
+ setDialogTarget(dialog);
95
+ }
96
+ handleBackdropClick(dialog);
97
+ } else {
98
+ ref.current?.close?.();
99
+ }
100
+ setPageProperties({
101
+ isDialogOpen: isOpen
102
+ });
103
+ return () => {
104
+ setPageProperties({
105
+ isDialogOpen: false
106
+ });
107
+ window.removeEventListener('keydown', handleKeyDown);
108
+ };
109
+ }, [id, isOpen, onClose, closeOnEscPressed, closeOnScrimClick]);
110
+ return isOpen ? /*#__PURE__*/_jsxs("div", {
111
+ className: getClassName('bpk-dialog-wrapper', !dialogSupported && 'bpk-dialog-wrapper--polyfill'),
112
+ children: [!dialogSupported && /*#__PURE__*/_jsx("div", {
113
+ id: `${id}-polyfill`,
114
+ className: getClassName('bpk-dialog-wrapper--backdrop'),
115
+ "data-open": isOpen
116
+ }), /*#__PURE__*/_jsx(CSSTransition, {
117
+ classNames: transitionClassNames,
118
+ in: !exiting,
119
+ appear: !exiting,
120
+ exit: exiting,
121
+ timeout: timeout,
122
+ children: /*#__PURE__*/_jsx("dialog", {
123
+ id: id,
124
+ className: getClassName('bpk-dialog-wrapper--container', dialogClassName),
125
+ onCancel: e => {
126
+ e.preventDefault();
127
+ if (closeOnEscPressed && (!dialogTarget || e.target === dialogTarget)) {
128
+ onClose(e, {
129
+ source: 'ESCAPE'
130
+ });
131
+ }
132
+ },
133
+ "aria-labelledby": ariaLabelledby,
134
+ "data-open": isOpen,
135
+ ref: ref,
136
+ children: /*#__PURE__*/_jsx("div", {
137
+ className: getClassName('bpk-dialog-wrapper--contents'),
138
+ id: `${id}-contents`,
139
+ children: children
140
+ })
141
+ })
142
+ })]
143
+ }) : null;
144
+ };
@@ -0,0 +1,45 @@
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 { ReactNode } from 'react';
20
+ import type {Props as DialogWrapperProps} from './BpkDialogWrapper';
21
+ export type Props = Partial<DialogWrapperProps> & {
22
+ ariaLabelledby: string;
23
+ children: ReactNode;
24
+ closeOnEscPressed?: boolean;
25
+ closeOnScrimClick?: boolean;
26
+ dialogClassName?: string;
27
+ id: string | undefined;
28
+ isOpen: boolean;
29
+ onClose: (
30
+ arg0?: Event | KeyboardEvent | MouseEvent | PointerEvent | TouchEvent,
31
+ arg1?: {
32
+ source: 'ESCAPE' | 'DOCUMENT_CLICK';
33
+ },
34
+ ) => void | null;
35
+ exiting?: boolean;
36
+ transitionClassNames?: {
37
+ appear?: string,
38
+ appearActive?: string,
39
+ exit?: string
40
+ };
41
+ timeout?: {appear?: number, exit?: number};
42
+ }
43
+
44
+ declare const BpkDialogWrapper: ({ariaLabelledby, children, closeOnEscPressed, closeOnScrimClick, dialogClassName, id, isOpen, onClose, exiting, transitionClassNames, timeout}: Props) => JSX.Element;
45
+ export default BpkDialogWrapper;
@@ -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
+ @keyframes bpk-dialog-wrapper-scrim{0%{opacity:0}100%{opacity:1}}.bpk-dialog-wrapper--container{padding:0;border:none}.bpk-dialog-wrapper--container::backdrop{position:fixed;background-color:rgba(0,0,0,.7);animation:bpk-modal-scrim 400ms ease-in-out;inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-dialog-wrapper--backdrop{position:fixed;z-index:0;margin:0 auto;background-color:rgba(0,0,0,.7);animation:bpk-dialog-wrapper-scrim 200ms ease-in-out;inset:0;inset-block-end:0;inset-inline:0;inset-inline-end:0}.bpk-dialog-wrapper--contents{min-height:100%;padding:0}
@@ -18,7 +18,6 @@
18
18
 
19
19
  import { Component } from 'react';
20
20
  import { createPortal } from 'react-dom';
21
-
22
21
  // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
23
22
  import assign from 'object-assign';
24
23
  import { jsx as _jsx } from "react/jsx-runtime";
@@ -16,12 +16,11 @@
16
16
  * limitations under the License.
17
17
  */
18
18
 
19
- import { Component } from 'react';
20
-
21
19
  // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
22
20
  import focusScope from 'a11y-focus-scope';
23
21
  // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
24
22
  import focusStore from 'a11y-focus-store';
23
+ import { Component } from 'react';
25
24
  import { cssModules, isDeviceIpad, isDeviceIphone, wrapDisplayName } from "../../bpk-react-utils";
26
25
  import BpkScrim from "./BpkScrim";
27
26
  import { fixBody, lockScroll, restoreScroll, storeScroll, unfixBody, unlockScroll } from "./scroll-utils";
@@ -16,4 +16,4 @@
16
16
  * See the License for the specific language governing permissions and
17
17
  * limitations under the License.
18
18
  *
19
- *//*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}html{font-size:100%;box-sizing:border-box}*{box-sizing:inherit}*::before,*::after{box-sizing:inherit}body{color:#161616;font-family:"Skyscanner Relative",-apple-system,BlinkMacSystemFont,"Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:1rem;line-height:1.3rem}body &.scaffold-font-size{font-size:13px}body &.enable-font-smoothing{-webkit-font-smoothing:antialiased}:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.hidden,.hide{display:none !important}.visuallyhidden,.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus,.visually-hidden.focusable:active,.visually-hidden.focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.invisible{visibility:hidden}.clearfix::before,.clearfix::after{content:"";display:table}.clearfix::after{clear:both}
19
+ *//*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,optgroup,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}html{font-size:100%;box-sizing:border-box}*{box-sizing:inherit}*::before,*::after{box-sizing:inherit}body{color:#161616;font-family:"Skyscanner Relative",-apple-system,BlinkMacSystemFont,"Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;font-size:1rem;line-height:1.3rem}body.scaffold-font-size{font-size:13px}body.enable-font-smoothing{-webkit-font-smoothing:antialiased}:focus-visible{outline:.125rem solid #0062e3;outline-offset:.125rem}.hidden,.hide{display:none !important}.visuallyhidden,.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus,.visually-hidden.focusable:active,.visually-hidden.focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}.invisible{visibility:hidden}.clearfix::before,.clearfix::after{content:"";display:table}.clearfix::after{clear:both}
@@ -27,7 +27,7 @@ import './index.scss';
27
27
 
28
28
  // touch support
29
29
  classNames.push(
30
- 'ontouchstart' in window ||
30
+ 'ontouchstart' in window ||
31
31
  (window.DocumentTouch && document instanceof DocumentTouch) // eslint-disable-line no-undef
32
32
  ? 'touch-support'
33
33
  : 'no-touch-support',
@@ -35,7 +35,7 @@ import './index.scss';
35
35
 
36
36
  // add more feature tests here...
37
37
 
38
-
38
+
39
39
  document.documentElement.className += ` ${classNames
40
40
  .map((className) => `bpk-${className}`)
41
41
  .join(' ')}`;
@@ -15,17 +15,15 @@
15
15
  * See the License for the specific language governing permissions and
16
16
  * limitations under the License.
17
17
  */
18
-
19
- /* stylelint-disable at-rule-disallowed-list, scss/at-import-partial-extension */
20
-
21
- @use '../bpk-mixins/tokens';
22
- @use '../bpk-mixins/utils';
23
-
18
+ /* stylelint-disable at-rule-disallowed-list */
19
+ // stylelint-disable-next-line scss/at-import-partial-extension
24
20
  @import './normalize';
21
+ @import '../bpk-mixins/tokens.scss';
22
+ @import '../bpk-mixins/utils.scss';
25
23
 
26
24
  // stylelint-disable-next-line selector-max-type
27
25
  html {
28
- font-size: tokens.$bpk-font-size-root;
26
+ font-size: $bpk-font-size-root;
29
27
  box-sizing: border-box;
30
28
  }
31
29
 
@@ -40,45 +38,45 @@ html {
40
38
 
41
39
  /* stylelint-disable selector-class-pattern */
42
40
  body {
43
- color: tokens.$bpk-font-color-base;
44
- font-family: tokens.$bpk-font-family-base;
45
- font-size: tokens.$bpk-font-size-base;
41
+ color: $bpk-font-color-base;
42
+ font-family: $bpk-font-family-base;
43
+ font-size: $bpk-font-size-base;
46
44
  line-height: 1.3rem; /* stylelint-disable-line scale-unlimited/declaration-strict-value */
45
+ }
47
46
 
48
- :global(&.scaffold-font-size) {
49
- font-size: 13px; /* stylelint-disable-line unit-disallowed-list, scale-unlimited/declaration-strict-value */
50
- }
47
+ :global(body.scaffold-font-size) {
48
+ font-size: 13px; /* stylelint-disable-line unit-disallowed-list, scale-unlimited/declaration-strict-value */
49
+ }
51
50
 
52
- :global(&.enable-font-smoothing) {
53
- -webkit-font-smoothing: antialiased;
54
- }
51
+ :global(body.enable-font-smoothing) {
52
+ -webkit-font-smoothing: antialiased;
55
53
  }
56
54
 
57
55
  :focus-visible {
58
- @include utils.bpk-focus-indicator;
56
+ @include bpk-focus-indicator;
59
57
  }
60
58
 
61
59
  :global(.hidden),
62
60
  :global(.hide) {
63
- @include utils.bpk-hidden;
61
+ @include bpk-hidden;
64
62
  }
65
63
 
66
64
  :global(.visuallyhidden),
67
65
  :global(.visually-hidden) {
68
- @include utils.bpk-visually-hidden;
66
+ @include bpk-visually-hidden;
69
67
  }
70
68
 
71
69
  :global(.visuallyhidden.focusable),
72
70
  :global(.visually-hidden.focusable) {
73
- @include utils.bpk-visually-hidden--focusable;
71
+ @include bpk-visually-hidden--focusable;
74
72
  }
75
73
 
76
74
  :global(.invisible) {
77
- @include utils.bpk-invisible;
75
+ @include bpk-invisible;
78
76
  }
79
77
 
80
78
  :global(.clearfix) {
81
- @include utils.bpk-clearfix;
79
+ @include bpk-clearfix;
82
80
  }
83
81
  /* stylelint-enable selector-class-pattern */
84
82
  /* stylelint-enable at-rule-disallowed-list */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyscanner/backpack-web",
3
- "version": "33.0.0-beta.1",
3
+ "version": "33.0.0",
4
4
  "description": "Backpack Design System web library",
5
5
  "repository": {
6
6
  "type": "git",
@@ -30,7 +30,7 @@
30
30
  "a11y-focus-store": "^1.0.0",
31
31
  "d3-path": "^2.0.0",
32
32
  "d3-scale": "^4.0.2",
33
- "date-fns": "^2.21.1",
33
+ "date-fns": "^3.3.1",
34
34
  "intersection-observer": "^0.7.0",
35
35
  "lodash": "^4.17.20",
36
36
  "lodash.clamp": "^4.0.3",
@@ -42,7 +42,7 @@
42
42
  "react-responsive": "^9.0.2",
43
43
  "react-slider": "^2.0.6",
44
44
  "react-table": "^7.8.0",
45
- "react-virtualized-auto-sizer": "^1.0.20",
45
+ "react-virtualized-auto-sizer": "1.0.20",
46
46
  "react-window": "^1.8.7"
47
47
  },
48
48
  "peerDependencies": {
@@ -566,3 +566,18 @@
566
566
  color: tokens.$bpk-text-disabled-day;
567
567
  }
568
568
  }
569
+
570
+ /// Full width button. Modifies the bpk-button to horizontally fill its container
571
+ ///
572
+ /// @require {mixin} bpk-button
573
+ ///
574
+ /// @example scss
575
+ /// .selector {
576
+ /// @include bpk-button();
577
+ /// @include bpk-button--full-width();
578
+ /// }
579
+
580
+ @mixin bpk-button--full-width {
581
+ display: block;
582
+ width: 100%;
583
+ }
@@ -1,96 +0,0 @@
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
- // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
20
- import CSSTransition from 'react-transition-group/CSSTransition';
21
-
22
- // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
23
- import { BpkButtonLink } from "../../bpk-component-link";
24
- // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
25
- import BpkCloseButton from "../../bpk-component-close-button";
26
- import BpkNavigationBar from "../../bpk-component-navigation-bar";
27
- import { cssModules } from "../../bpk-react-utils";
28
- import STYLES from "./BpkBottomSheetInner.module.css";
29
- import { jsx as _jsx } from "react/jsx-runtime";
30
- import { jsxs as _jsxs } from "react/jsx-runtime";
31
- const getClassName = cssModules(STYLES);
32
- const BpkBottomSheetInner = ({
33
- actionText = '',
34
- children,
35
- closeLabel = '',
36
- dialogRef,
37
- exiting,
38
- id,
39
- onAction = () => null,
40
- onClose,
41
- title = '',
42
- wide = false
43
- }) => {
44
- const classNames = getClassName('bpk-bottom-sheet', wide && 'bpk-bottom-sheet--wide');
45
- const headingId = `bpk-bottom-sheet-heading-${id}`;
46
- return /*#__PURE__*/_jsx(CSSTransition, {
47
- classNames: {
48
- appear: getClassName('bpk-bottom-sheet--appear'),
49
- appearActive: getClassName('bpk-bottom-sheet--appear-active'),
50
- exit: getClassName('bpk-bottom-sheet--exit')
51
- },
52
- in: !exiting,
53
- appear: !exiting,
54
- exit: exiting,
55
- timeout: {
56
- appear: 240,
57
- exit: 240
58
- },
59
- children: /*#__PURE__*/_jsxs("section", {
60
- id: id,
61
- tabIndex: -1,
62
- role: "dialog",
63
- "aria-labelledby": headingId,
64
- className: classNames,
65
- ref: dialogRef,
66
- children: [/*#__PURE__*/_jsx("header", {
67
- className: getClassName('bpk-bottom-sheet--header'),
68
- children: /*#__PURE__*/_jsx(BpkNavigationBar, {
69
- id: headingId,
70
- className: getClassName('bpk-bottom-sheet--navigation'),
71
- title: title && /*#__PURE__*/_jsx("h2", {
72
- id: headingId,
73
- className: getClassName('bpk-bottom-sheet--heading'),
74
- children: title
75
- }),
76
- leadingButton: /*#__PURE__*/_jsx(BpkCloseButton, {
77
- className: getClassName('bpk-bottom-sheet--close-button'),
78
- label: closeLabel,
79
- onClick: onClose
80
- }),
81
- trailingButton: actionText && onAction ? /*#__PURE__*/_jsx(BpkButtonLink, {
82
- className: getClassName('bpk-bottom-sheet--action-button'),
83
- onClick: onAction,
84
- children: actionText
85
- }) : /*#__PURE__*/_jsx("div", {
86
- className: getClassName('bpk-bottom-sheet--action-button')
87
- })
88
- })
89
- }), /*#__PURE__*/_jsx("div", {
90
- className: getClassName('bpk-bottom-sheet--content'),
91
- children: children
92
- })]
93
- })
94
- });
95
- };
96
- export default BpkBottomSheetInner;
@@ -1,18 +0,0 @@
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-bottom-sheet{z-index:1100;width:100%;max-width:32rem;margin:auto;transform:scale(1);transition:opacity 200ms ease-in-out,transform 200ms ease-in-out;outline:0;background-color:#fff;opacity:1;overflow:hidden;-webkit-tap-highlight-color:rgba(0,0,0,0);box-shadow:0px 12px 50px 0px rgba(37,32,31,.25);border-radius:.5rem}@media(max-width: 32rem){.bpk-bottom-sheet{position:fixed;bottom:0;height:fit-content;max-height:90%;margin-bottom:0;border-radius:1.5rem 1.5rem 0 0;overflow-x:hidden;overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none}.bpk-bottom-sheet::-webkit-scrollbar{display:none}}.bpk-bottom-sheet--content{padding:1rem;flex:1;overflow-y:auto}@media(min-width: 32.0625rem){.bpk-bottom-sheet--wide{max-width:64rem}}@keyframes slide-up{0%{transform:translateY(100%)}100%{transform:translateY(0%)}}.bpk-bottom-sheet--appear{animation-duration:.24s;animation-name:slide-up;animation-timing-function:ease-in-out}@media(min-width: 32.0625rem){.bpk-bottom-sheet--appear{transform:scale(0.9);opacity:0;animation:none}}@media(min-width: 32.0625rem){.bpk-bottom-sheet--appear-active{transform:scale(1);opacity:1}}.bpk-bottom-sheet--exit{animation-direction:reverse;animation-duration:.24s;animation-name:slide-up;animation-timing-function:ease-in-out}@media(min-width: 32.0625rem){.bpk-bottom-sheet--exit{animation:none}}.bpk-bottom-sheet--header{position:sticky;top:0;z-index:899;box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-bottom-sheet--navigation{display:flex;justify-content:space-between;background-color:#fff}.bpk-bottom-sheet--heading{width:calc(100% - ((3rem)*2 + 0.125rem));margin-right:auto;text-align:center;margin:0;font-size:1rem;line-height:1.5rem;font-weight:700}.bpk-bottom-sheet--close-button{position:relative;left:auto;margin-right:1.5rem}html[dir=rtl] .bpk-bottom-sheet--close-button{right:auto;margin-right:.125rem;margin-left:1.5rem}.bpk-bottom-sheet--action-button{position:relative;right:auto;width:calc(3rem - (0.25rem));margin-right:.125rem;margin-left:.25rem;word-break:break-all}html[dir=rtl] .bpk-bottom-sheet--action-button{left:auto;margin-right:.25rem;margin-left:.125rem}
@@ -1,6 +0,0 @@
1
- /// <reference types="react" />
2
- declare const _default: ({ styles, ...props }: {
3
- [x: string]: any;
4
- styles?: {} | undefined;
5
- }) => JSX.Element;
6
- export default _default;
@@ -1,6 +0,0 @@
1
- /// <reference types="react" />
2
- declare const _default: ({ styles, ...props }: {
3
- [x: string]: any;
4
- styles?: {} | undefined;
5
- }) => JSX.Element;
6
- export default _default;