@skyscanner/backpack-web 42.18.0 → 42.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2.module.css +1 -1
- package/bpk-component-checkbox/src/BpkCheckboxV2/BpkCheckboxV2HiddenInput.js +4 -0
- package/bpk-component-progress/index.d.ts +5 -0
- package/bpk-component-progress/index.js +3 -1
- package/bpk-component-progress/src/BpkProgress.d.ts +27 -0
- package/bpk-component-progress/src/BpkProgress.js +29 -50
- package/bpk-component-progress/src/themeAttributes.d.ts +2 -0
- package/bpk-component-progress/src/themeAttributes.js +3 -1
- package/package.json +1 -1
|
@@ -15,4 +15,4 @@
|
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
|
-
.bpk-checkbox-v2{position:relative;display:inline-flex;align-items:flex-start;cursor:pointer;gap:.5rem}.bpk-checkbox-v2[data-disabled]{cursor:not-allowed}.bpk-checkbox-v2__control{position:relative;display:flex;width:1.25rem;height:1.25rem;margin-top:.125rem;justify-content:center;align-items:center;flex-shrink:0;border:.1875rem solid #626971;background-color:#fff;border-radius:.25rem;border-radius:var(--bpk-checkbox-border-radius, 0.25rem)}.bpk-checkbox-v2__control[data-
|
|
18
|
+
.bpk-checkbox-v2{position:relative;display:inline-flex;align-items:flex-start;cursor:pointer;gap:.5rem}.bpk-checkbox-v2[data-disabled]{cursor:not-allowed}.bpk-checkbox-v2__control{position:relative;display:flex;width:1.25rem;height:1.25rem;margin-top:.125rem;justify-content:center;align-items:center;flex-shrink:0;border:.1875rem solid #626971;background-color:#fff;border-radius:.25rem;border-radius:var(--bpk-checkbox-border-radius, 0.25rem)}.bpk-checkbox-v2__control[data-state=checked]{border-width:.1875rem;border-color:#0062e3;border-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227));background-color:#0062e3;background-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227));background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22white%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:.0625rem center;background-size:calc(100% - .15625rem) auto}.bpk-checkbox-v2__control[data-state=checked]:disabled{background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22lightgrey%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")}.bpk-checkbox-v2__control[data-state=indeterminate]{border-width:.1875rem;border-color:#0062e3;border-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227));background-color:#0062e3;background-color:var(--bpk-checkbox-selected-color, rgb(0, 98, 227))}.bpk-checkbox-v2__control[data-state=indeterminate]::before{content:"";width:.625rem;height:.1875rem;border-radius:2px;background-color:#fff}.bpk-checkbox-v2__control[data-invalid]{border-color:#e70866}.bpk-checkbox-v2__control[data-disabled]{border-color:rgba(0,0,0,.2);background-color:#fff}.bpk-checkbox-v2__control[data-disabled][data-state=checked],.bpk-checkbox-v2__control[data-disabled][data-state=indeterminate]{border-color:rgba(0,0,0,.2);background-color:#fff}.bpk-checkbox-v2__control[data-disabled][data-state=checked]{background-image:url("data:image/svg+xml,%3Csvg%20width%3D%2213%22%20height%3D%229%22%20viewBox%3D%220%200%2013%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M2.35352%203.64648L5.5%207.5L11.5%201.5%22%20stroke%3D%22lightgrey%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E")}.bpk-checkbox-v2:has(.bpk-checkbox-v2__hidden-input:focus-visible) .bpk-checkbox-v2__control{outline:.125rem solid #0062e3;outline-offset:.125rem}.bpk-checkbox-v2__label{color:#161616;user-select:none;font-size:1rem;line-height:1.5rem;font-weight:400}.bpk-checkbox-v2__label a{color:inherit}[data-disabled] .bpk-checkbox-v2__label{color:rgba(0,0,0,.2)}.bpk-checkbox-v2__description{display:block;margin-top:.25rem;color:#626971;font-size:.875rem;line-height:1.25rem;font-weight:400}[data-disabled] .bpk-checkbox-v2__description{color:rgba(0,0,0,.2)}
|
|
@@ -17,7 +17,10 @@
|
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
19
|
import { Checkbox } from '@ark-ui/react';
|
|
20
|
+
import { cssModules } from "../../../bpk-react-utils";
|
|
21
|
+
import STYLES from "./BpkCheckboxV2.module.css";
|
|
20
22
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
23
|
+
const getClassName = cssModules(STYLES);
|
|
21
24
|
// Renders Ark's visually hidden native <input type="checkbox">.
|
|
22
25
|
// Include when the checkbox is inside a <form> for native form submission.
|
|
23
26
|
// Accepts aria-* attributes so consumers can override the screen-reader
|
|
@@ -28,6 +31,7 @@ const BpkCheckboxV2HiddenInput = ({
|
|
|
28
31
|
'aria-label': ariaLabel,
|
|
29
32
|
'aria-labelledby': ariaLabelledby
|
|
30
33
|
} = {}) => /*#__PURE__*/_jsx(Checkbox.HiddenInput, {
|
|
34
|
+
className: getClassName('bpk-checkbox-v2__hidden-input'),
|
|
31
35
|
"aria-describedby": ariaDescribedby,
|
|
32
36
|
"aria-label": ariaLabel,
|
|
33
37
|
"aria-labelledby": ariaLabelledby
|
|
@@ -14,7 +14,9 @@
|
|
|
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
|
+
|
|
19
|
+
import BpkProgress from "./src/BpkProgress";
|
|
18
20
|
import themeAttributes from "./src/themeAttributes";
|
|
19
21
|
export default BpkProgress;
|
|
20
22
|
export { themeAttributes };
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { Component, type HTMLAttributes } from 'react';
|
|
2
|
+
type NativeDivProps = HTMLAttributes<HTMLDivElement>;
|
|
3
|
+
export type Props = Omit<NativeDivProps, 'className'> & {
|
|
4
|
+
max: number;
|
|
5
|
+
min: number;
|
|
6
|
+
value: number;
|
|
7
|
+
stepped?: boolean;
|
|
8
|
+
small?: boolean;
|
|
9
|
+
className?: string | null;
|
|
10
|
+
onComplete?: (() => unknown) | null;
|
|
11
|
+
onCompleteTransitionEnd?: (() => unknown) | null;
|
|
12
|
+
getValueText?: ((value: number, min: number, max: number) => string) | null;
|
|
13
|
+
};
|
|
14
|
+
declare class BpkProgress extends Component<Props> {
|
|
15
|
+
static defaultProps: {
|
|
16
|
+
className: null;
|
|
17
|
+
stepped: boolean;
|
|
18
|
+
small: boolean;
|
|
19
|
+
onComplete: () => null;
|
|
20
|
+
onCompleteTransitionEnd: () => null;
|
|
21
|
+
getValueText: null;
|
|
22
|
+
};
|
|
23
|
+
componentDidUpdate(previousProps: Props): void;
|
|
24
|
+
handleCompleteTransitionEnd: () => void;
|
|
25
|
+
render(): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
}
|
|
27
|
+
export default BpkProgress;
|
|
@@ -14,7 +14,8 @@
|
|
|
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 { Component } from 'react';
|
|
19
20
|
import clamp from 'lodash.clamp';
|
|
20
21
|
import { cssModules } from "../../bpk-react-utils";
|
|
@@ -35,27 +36,15 @@ const renderSteps = numberOfSteps => {
|
|
|
35
36
|
}
|
|
36
37
|
return steps;
|
|
37
38
|
};
|
|
38
|
-
const propTypes = {
|
|
39
|
-
max: PropTypes.number.isRequired,
|
|
40
|
-
min: PropTypes.number.isRequired,
|
|
41
|
-
value: PropTypes.number.isRequired,
|
|
42
|
-
stepped: PropTypes.bool,
|
|
43
|
-
small: PropTypes.bool,
|
|
44
|
-
className: PropTypes.string,
|
|
45
|
-
onComplete: PropTypes.func,
|
|
46
|
-
onCompleteTransitionEnd: PropTypes.func,
|
|
47
|
-
getValueText: PropTypes.func,
|
|
48
|
-
tabIndex: PropTypes.number
|
|
49
|
-
};
|
|
50
|
-
const defaultProps = {
|
|
51
|
-
className: null,
|
|
52
|
-
stepped: false,
|
|
53
|
-
small: false,
|
|
54
|
-
onComplete: () => null,
|
|
55
|
-
onCompleteTransitionEnd: () => null,
|
|
56
|
-
getValueText: null
|
|
57
|
-
};
|
|
58
39
|
class BpkProgress extends Component {
|
|
40
|
+
static defaultProps = {
|
|
41
|
+
className: null,
|
|
42
|
+
stepped: false,
|
|
43
|
+
small: false,
|
|
44
|
+
onComplete: () => null,
|
|
45
|
+
onCompleteTransitionEnd: () => null,
|
|
46
|
+
getValueText: null
|
|
47
|
+
};
|
|
59
48
|
componentDidUpdate(previousProps) {
|
|
60
49
|
const {
|
|
61
50
|
max,
|
|
@@ -84,6 +73,8 @@ class BpkProgress extends Component {
|
|
|
84
73
|
getValueText,
|
|
85
74
|
max,
|
|
86
75
|
min,
|
|
76
|
+
onComplete,
|
|
77
|
+
onCompleteTransitionEnd,
|
|
87
78
|
small,
|
|
88
79
|
stepped,
|
|
89
80
|
value,
|
|
@@ -94,35 +85,23 @@ class BpkProgress extends Component {
|
|
|
94
85
|
const adjustedValue = clamp(value, min, max);
|
|
95
86
|
const percentage = 100 * (adjustedValue / (max - min));
|
|
96
87
|
const numberOfSteps = stepped ? max - min - 1 : 0;
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
width: `${percentage}%`
|
|
115
|
-
},
|
|
116
|
-
onTransitionEnd: this.handleCompleteTransitionEnd
|
|
117
|
-
}), renderSteps(numberOfSteps)]
|
|
118
|
-
})
|
|
119
|
-
);
|
|
88
|
+
return /*#__PURE__*/_jsxs("div", {
|
|
89
|
+
className: classNames,
|
|
90
|
+
role: "progressbar",
|
|
91
|
+
"aria-valuetext": getValueText ? getValueText(value, min, max) : undefined,
|
|
92
|
+
"aria-valuenow": value,
|
|
93
|
+
"aria-valuemin": min,
|
|
94
|
+
"aria-valuemax": max,
|
|
95
|
+
tabIndex: 0,
|
|
96
|
+
...rest,
|
|
97
|
+
children: [/*#__PURE__*/_jsx("div", {
|
|
98
|
+
className: valueClassName,
|
|
99
|
+
style: {
|
|
100
|
+
width: `${percentage}%`
|
|
101
|
+
},
|
|
102
|
+
onTransitionEnd: this.handleCompleteTransitionEnd
|
|
103
|
+
}), renderSteps(numberOfSteps)]
|
|
104
|
+
});
|
|
120
105
|
}
|
|
121
106
|
}
|
|
122
|
-
BpkProgress.propTypes = {
|
|
123
|
-
...propTypes
|
|
124
|
-
};
|
|
125
|
-
BpkProgress.defaultProps = {
|
|
126
|
-
...defaultProps
|
|
127
|
-
};
|
|
128
107
|
export default BpkProgress;
|
|
@@ -14,4 +14,6 @@
|
|
|
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
|
+
|
|
19
|
+
export default ['progressBarFillColor'];
|